iOS开发转产品-工具篇

前言

作为一名iOS开发一直有一个做产品的心,但是迟迟没有往前走,新的一年,值得去展望一下,2022年给自己定下一个小目标,学习掌握墨刀和Sketch的使用,先踏出一小步,再去下载学习一下App Store各个模块比较好的产品,借鉴思考,想想为什么这些产品可以成功,帮助人们解决了哪些问题,最后再去沉淀一下,这两天刚好有时间就用墨刀写了一个原型和sketch画了一张设计图,记录一下

为什么选择学习墨刀?

最开始对产品文档的工具没有什么了解,查了一下目前用的比较多的有Axure和墨刀,经过对比,Axture更适合比较进阶、全面的学习,墨刀相对入门比较简单,再就是Axure破解版没有找到资源,另外现在公司产品原型也是用墨刀来制作的,所以就确定使用墨刀作为学习对象

墨刀的使用

我使用的是墨刀的web版本,直接在线制作,有一个月的免费试用期,注册登录完成后就可以新建一个项目,先直接按照新手引导操作一遍,然后就可以新建一个页面,修改为你的标题,添加画板,往里面添加控件和元素就可以,非常简单,就和xib布局一样,也可以添加事件,进行跳转或状态变化,有些复杂的交互或者逻辑,可以通过标注进行说明,感觉最重要的就是这个标注,怎么简洁、清晰的向开发阐述你所要的,再画原型的过程中,右上角有一个预览按钮,点击可以选择真机进行实时预览看原型效果,这里附上我练习的产品文档(有点简陋,练习了一天),需要勤练习,孰能生巧,有好多功能需要慢慢学习,提升效率

旅行地图原型

为什么选择学习sketch?

制作UI比较常用的有ps和sketch,经过了解,ps更侧重于图片的处理,相对sketch功能也更全面,sketch更偏向于UI图的绘制,上手相对要简单一些,所以就开始学习sketch了

sketch的使用

sketch本来打算也是安装破解版,找了许久没有找到,于是就去官网下载了,也是一个月的使用期,下载完成后就可以新建一个文档进行开发,这里没有新手引导,一进去会很懵,网上查了一下教程,都不详细,最后发现sketch自己的教程就非常清晰,左上角点击帮助,进入帮助中心,这里好像只有英文文档,英文不太好的可以和我一样,选择科学上网,Google翻译成中文,先对着文档学习一遍,就大概了解到sketch界面的布局,每个按钮是用来做什么的,过了一遍后我们就开始进行UI的制作了,可以随便找一个APP页面进行模仿

建立画板,添加iOS组件

还是一样先建一个画板,这里我是准备制作iOS的设计稿,所以选择iPhone11为画板,下一步就是添加状态栏,这时sketch并没有组件,我们需要去Apple Design Resources下载组件,下载完成后添加到组件库,这时就可以添加状态栏、导航栏、label等iOS组件,临摹别人的页面,突然会发现人家的页面上有icon图片,这我们该怎么弄,破解APP砸壳,拿到对应的图片资源,不不不,你现在是一名UI设计师,哈哈,不要慌,这时我们开始学习制作icon,基本上这些icon都是通过三角形、圆形、矩形等一些基础图形进行组合形成的

制作icon

这里我们再新建一个页面,起名为icons,添加一个矩形画板,添加一些基础图形,拼接成你要的样在图形的拼接过程中,右上角有四个矩形拼接的按钮分别可以进行合并或者取交集进行裁剪等等操作,这个功能需要自己去试一下,有些icon会用到,最后将所有子元素进行创建一个新的控件就可以了,还有一些icon本身就用到一些素材icon,比如删除、问号等icon,我们可以去素材网站进行下载,贴过来,但是不是很麻烦,这时Sketch Iconfont就派上了用场,非常轻松管理自己的图标字体,具体操作可以看 Sketch Iconfont

设计稿上传到蓝湖

icon制作完用图像进行布局,这里需要通过右侧面板进行导出,不然上传蓝湖,开发下载不到icon,其它布局就是xib一样,设计稿完成后就需要上传到蓝湖交给开发了,于是我们需要先去下载对应的sketch插件,下载安装完成后,我们就可以在插件中看到蓝湖,可以进行设计图的上传,我们上传间可以先对设计图进行走查,看还需不需要修改,确定后可以进行单页或全部进行上传,上传完可以自己再核对一下,看布局有没有问题,icon有没有漏切(这里很重要,本人开发过程中经常会遇到icon漏掉的情况,需要再去向UI要icon),这里也附上练习的UI设计图

旅行地图首页

经过两天的练习,对墨刀和sketch有了一个简单、初步的了解,墨刀制作原型相对sketch要简单一些,做产品原型更重要的是产品思维,UI更重要的是细节的把控,但是都有一个共性,需要熟练的掌握他们的工具,才能把东西做出来,所以后期有时间需要继续去学习更多的功能,熟练的掌握,加油💪🏻

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,589评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,615评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,933评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,976评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,999评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,775评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,474评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,359评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,854评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,007评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,146评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,826评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,484评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,029评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,153评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,420评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,107评论 2 356

推荐阅读更多精彩内容