工作流程
前期调研阶段
在我们设计界面之前,我们必须做用户研究来了解产品的调性,比如用户研究手段中的用户画像、用户调研、用户使用场景分析、设计竞品分析等方法。不管工作再忙也建议大家做这些工作,他们对我们深入了解产品大有裨益。
原型图阶段
APP产品设计首先需要构建出原型图,之后再开始视觉设计。这个工作有些公司是由产品经理负责的,也有交互设计师负责的,还有的公司因为人手较少,也会出现由UI设计师来负责的情况。就算有产品经理或其他职能人员来完成原型图,那设计师也需要和产品经理等人员沟通需求和探讨原型图,并不是产品经理向设计师下发需求。设计师要站在视觉和交互的角度提出自己建设性的意见,而不是简单等原型图完成后照着上色而已。关于原型图的工具,我们不仅仅可以用Axure RP设计原型图,也可以使用像墨刀、Adobe XD等新工具来完成原型图。
![3e051bb14bd985cc09d1d1078cacd4bb.png](https://i-blog.csdnimg.cn/blog_migrate/6d23ef95745841a53e1b3609acff323b.jpeg)
构建APP原型图(工具:Adobe XD )
视觉稿阶段
视觉稿阶段要根据原型图确定的内容和大体版式完成APP的界面设计。但是这里请大家注意一下:目前业界主要是以Sketch、Adobe XD、Photoshop这三个软件来完成APP的界面设计的。Sketch和Adobe XD都是以逻辑像素的单位(PT)来设计,然后导出图像的时候再进行放大两倍三倍来切图。这样做的好处是不用在设计的时候小心翼翼地使用偶数了。而Photoshop由于主要是处理图像而非矢量图形的软件,所以在设计移动端界面时如果做成一倍的话切图会变得很虚,所以要基于2倍图来进行界面设计。比如如果我们以iPhone6/7/8的界面来进行设计,那么在Sketch和Adobe XD中我们建立的画布就是375x667pt在Photoshop中则是750x1334px。
![d38fee57edf72476dc15736250c36eea.png](https://i-blog.csdnimg.cn/blog_migrate/b23863e6bb3117c3fc1d6d211cea6e44.jpeg)
视觉稿设计阶段(工具:Adobe XD)
![38c5c28689ee6aeafddcc3d74728735b.png](https://i-blog.csdnimg.cn/blog_migrate/c0f323dcce1fb7760ab1217600069a00.jpeg)
视觉稿设计阶段(工具:Adobe Photoshop)
iPhone6/7/8尺寸
在iPhone6/7/8尺寸下,状态栏高度20pt(40px)、导航栏44pt(88px)、Tab栏49pt(98px)、导航标题字号建议17pt(34px)、导航栏图标建议22pt(44px)、Tab栏图标建议30pt(60px)、Tab栏图标注释文字11pt(22px)、左右安全距离建议12pt(24px)。字号从10pt(20px)到34pt(68px)均可,要视具体情况决定。
![bb6b15249e7336e190b3331e987230aa.png](https://i-blog.csdnimg.cn/blog_migrate/b296a3d72e18e33bb9cdea3104bb1fc8.jpeg)
在iPhone6/7/8尺寸下的设计尺寸
实时预览你的设计稿
我们在Sketch、Adobe XD、Photoshop等软件中设计界面时有一个问题:电脑上的效果总和手机上呈现的效果不同。这是由于尺寸和观察方式决定的,所以最好的方式是我们实时地查看设计稿在手机上的呈现效果。以下APP通过数据线或wifi链接电脑后,即可及时在手机中看到还没有保存的设计稿呈现在手机中的样子。
![ba58df68d6d3297655a9d13f466116a7.png](https://i-blog.csdnimg.cn/blog_migrate/9dcb52ed1ba6ba469b7cd73bc75941dc.jpeg)
Design Mirror:可实时预览Photoshop、XD等设计稿
![ae1d9cb131b949003fe71f8317dfe05b.png](https://i-blog.csdnimg.cn/blog_migrate/556b25e22f758e8afacda580af3ab328.jpeg)
Adobe XD:可实时预览你的XD画板
![827b48062a8d03500f37dd9785f5df98.png](https://i-blog.csdnimg.cn/blog_migrate/7474e5173d4f7d568f0eb0197bdcf31d.jpeg)
Sketch Mirror:可实时预览你的Sketch画板
iPhoneX设计效果图
虽然程序员对于iPhoneX等全面屏手机的适配只需要设计师提供切图即可,但很多设计师比较青睐iPhone X和最新XR和XSM等的设计效果,也比较愿意把设计稿改成iPhoneX的设计图放到作品集或者在汇报时展示。那么我们应该怎么做呢?如果设计稿需要调整为iPhone X的显示效果,可以下载iOS 12设计源文件,把界面头和尾替换成iPhoneX专用头尾——专用头尾在刘海和圆角处做了留白。Sketch和XD都是用一倍图设计所以不涉及修改尺寸,改头尾即可。而PS比较复杂一点:需要先等比例变大整个设计稿,再把宽度改为1125宽度自适应即可。PS变大会虚还得一个一个调一下,然后再改头尾。
![d4c96d99eb6f7c79a041741fcdb7eaf9.png](https://i-blog.csdnimg.cn/blog_migrate/d5836a10dfa5f57ef439947b78f3a32b.jpeg)
替换导航区域和Tab栏区域,即可得到iPhoneX设计效果
视觉规范
如果我们设计完了五六个主要界面,那么现在做什么呢?APP设计一套视觉规范是非常有必要的,有了视觉规范我们就可以把控整体的设计和语言。一般来说,一套APP应该有3-5种主题色和辅助色;5-10种不同变化的字体样式。这些如果没有落实到一套规范中,那么很容易跑偏。一套移动端应用的视觉规范应该包括:
主色/辅色/色彩规范: 规定APP所能使用的色彩种类;
文字颜色/大小规范: 规定APP主要使用文字的大小、颜色、应用场景等;
ICON规范: 规定APP的icon设计规范;
应用图标规范: 规定APP的应用图标使用规范;
按钮和交互态规范: 规定APP内所有按钮和交互态的样式;
间距规范: 规定APP内所有间距的尺寸。
![b416329d0b372b51d2b5d529e766d2dc.png](https://i-blog.csdnimg.cn/blog_migrate/570307e2eca6e55ff30b0b1499c30783.jpeg)
设计规范的重要性
![cdc2b2bad963670bbdc7123f301ee46d.png](https://i-blog.csdnimg.cn/blog_migrate/741c953eb025c59bb510105f9bff022e.jpeg)
设计规范中的色彩规范
设计规范的类型可以是png或者多个页面组成的pdf文件。其他设计师打开我们制定的设计规范,可以清晰地找到当前项目适合使用的元素和字体大小、间距等。这样尽管是多人协同工作也可以保证项目设计风格的一致性。
切图
有了大小各异的iPhone尺寸,如果程序只有一套切图,那么一定会造成有的手机显示很差。所以我们要在程序里放置多套切图,然后让程序判断“主人”的手机是什么型号,显示不同的切图。这样才能够完美地呈现给用户最好的体验。切图的方法有很多种。Sketch和Adobe XD可以直接导出。Phtoshop不具备这个功能,但是我们可以使用cutterman、蓝湖等插件导出切图。不管是自带功能还是插件,导出切图都可以导出@2x和@3x图,而设计稿只需要iPhone6/7/8一套即可。
![7772f40c3a80493574ecd41a4eec7d78.png](https://i-blog.csdnimg.cn/blog_migrate/c708237fc2a3ae702fe2b2d5c771576c.jpeg)
某项目中的切图文件
Adobe XD切图功能
在Adobe XD中将需要切出的元素在图层面板(Ctrl + Y)点击添加批量导出标记记录;然后点击 菜单 > 导出 > 所选画板 > 用于iOS > 导出所有画板 即可。
![101e1776ee50f54eaf2fba7674345cd6.png](https://i-blog.csdnimg.cn/blog_migrate/424fd1bb6397278edea869d3b621c840.jpeg)
Adobe XD自带切图功能
使用Cutterman协助Photoshop切图
在Cutterman官网下载PS插件后,点击窗口 > 扩展功能 > Cutterman 调出面板;然后选择iOS 并高亮选中@3X和@2X;在图层面板里选中需要切图的元素,点击“导出选中图层”即可。
![5a03918599b71301e00093dbe7653cd8.png](https://i-blog.csdnimg.cn/blog_migrate/1ea6e18eb24bdef914f0cbfa1eeffdfc.jpeg)
Photoshop中的Cutterman 插件
使用蓝湖切图
在蓝湖平台可以下载Sketch、Adobe XD或Photoshop对应的插件。然后在不同设计软件插件中将设计稿上传到蓝湖(PS需要用插件标记需要切出的元素),然后在蓝湖网页版点击切图按钮,选择视网膜@2x和高清视网膜@3x,再点击“下载该页全部切图”即可。
![7490e3b9be5854affed65283e3279864.png](https://i-blog.csdnimg.cn/blog_migrate/b7106d5911de59ef48b0750fea79a074.jpeg)
在蓝湖平台导出切图
切图命名规范
切图最后需要命名成规范的格式,这样方便程序员查找。切图命名的格式建议全英文,如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后,需要整理切图命名,或在切图之前对图层命名亦可。以下是切图元素的中英文对照:
![684c5ac18dd026ca2109ee095671e2eb.png](https://i-blog.csdnimg.cn/blog_migrate/cd1ba30d97d2d91bfa70e6dc79060b1e.jpeg)
切图命名对照表
然后我们要按照 功能_类型_名称_状态@倍数 来命名每个切图,比如我们导航条上有一个搜索图标,那么它的名称就是:
navi_icon_search_default@2x.png
(导航_图标_搜索_正常@2x.png)
iOS开发语言
作为iOS开发工程师,最重要的三个工具是:Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言;而Swift开发非常高效。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架,这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中,有许多控件和苹果自带程序是一致的,这就是UIKit的功劳。
![5dca9effd703850eba862b589fab3881.png](https://i-blog.csdnimg.cn/blog_migrate/97ff965b3f237de4caa6acac124afa89.jpeg)
开发视角 By @alvaroreyes
了解开发工程师的语言和工具对我们做设计也格外有帮助,我们会知道哪些效果能做,哪些效果不能做,哪些效果能做不好做等等。我找了大家关注的九个问题请教了iOS资深开发工程师程威:
![ee6f3b60127c831020c043c85f486849.png](https://i-blog.csdnimg.cn/blog_migrate/e5cf772f0ff1c6f3a8c67ea7db7f0cd2.jpeg)
![3cb6b948887fb55bcce83ef9584221be.png](https://i-blog.csdnimg.cn/blog_migrate/c0a793b1e7468e263a33ad718475f0ec.jpeg)
和iOS工程师沟通
沟通完是不是学到了不少?我们明白了iOS工程师工作的机制后再设计界面时就可以做到心中有数了。在平时工作中我们也应该多和开发小哥哥聊聊,学习一下他们实现的方式,以便我们的设计能够更好地落地。
标注
切图后程序员得到了什么?一大堆碎片。把这些碎片重新用OC或者Swift构建回我们设计的界面并没有想的那么简单。所以开发工程师可能会总是在思考构架层面的问题,而忽视了视觉还原。并且由于iOS的开发人员不会使用设计软件,所以很容易出现比如14pt或者28px的文字,实现后是16pt或者32px。那就乱了套了不是,那怎么办呢?我们可以通过一些标注软件把图标之间的位置、字体的高度、字体的大小和色彩进行标注,让程序员轻松省力地还原我们的设计稿。
蓝湖平台自动标注功能
将Sketch和Adobe XD、Photoshop的设计稿上传至蓝湖后,在蓝湖平台每个页面左侧有一个类似分享的图标,点击会获取一个网址,这个网址就是系统生成的自动标注。它会自动识别设计稿中字体大小和间距等,甚至有代码参考。
![2443423056d2628f8f6f7edf147e9ea7.png](https://i-blog.csdnimg.cn/blog_migrate/191200976cdf5c84159377fefa5ffd2b.jpeg)
蓝湖自动标注工具
使用Px像素大厨标注
像素大厨同样提供了自动标注、手动标注两种标注方法。自动标注需要上传设计稿,手动标注需要设计师使用“尺子”来测量距离、“吸管”来吸取色号。在界面上部有单位选择,如果我们给iOS开发做标注,那么单位最好选择PT,与开发环境一致。
![74c4ebe50f6efa00360a611d40e60924.png](https://i-blog.csdnimg.cn/blog_migrate/84a67ee6ff806ecf5ad6c8f2887ed3da.jpeg)
像素大厨标注工具
“标你妹啊”进行自动标注
国产标注在线神器。只需要登录网站后,上传设计稿可直接生成标注网址,发给程序员就可以啦。同样提供代码参考和自动标注间距尺寸等功能。
![80bf2b3e0d994e88735b00dd04142f24.png](https://i-blog.csdnimg.cn/blog_migrate/19c8762bc728a6322fbf566026dfd855.jpeg)
在线标注工具 - 标你妹啊
Markman 手动标注
Markman同样是国产标注神器。而且是我使用的第一个标注工具,选用底部工具可以进行手动标注,标注后导出png标注图即可。
![e280c82941f65e257b2754138a14e85e.png](https://i-blog.csdnimg.cn/blog_migrate/f33789c6719e0e271852b9f51216eed7.jpeg)
Markman标注工具
动效
据资深iOS开发程威介绍,目前的iOS主流的动效实现方式有以下四种:第一种,设计师给到开发动效视频或gif,开发人员照着效果编写代码调用静态切图重新做一遍,这样的还原度可能会有问题,需要开发和设计师多沟通。第二种,可以使用序列帧的方式实现动画,原理是给到开发按顺序命名的png,比如1.png、2.png等,然后用代码将它们快速替换实现动画。第三种,我们也可以给到程序员avi等视频文件直接插入视频。第四种,使用Airbnb开源的Lottie(https://airbnb.design/lottie/)。具体来说是通过after effects来完成动效,然后通过BodyMovin插件导出json文件,里面记录的就是动画的细节,然后在安卓,iOS,React Native上都有一套对应的SDK,来解析这个json文件来还原成动画。这个方式的还原度很高,除了部分AE特效不支持外堪称完美。其实还有QuartzCode、CoreAnimator等工具,有兴趣的大家可以去尝试一下。但我认为不管使用什么方式,最优秀的动效还是要靠设计师和开发人员“真诚地交流”。
项目走查
当我们最终完成了界面设计,需要和我们的设计稿进行对照还原。除了用肉眼辨别之外,我们也可以把还原后的程序截图下来放到PS中对照,寻找问题。那么我们给程序员的反馈就是一个有截图对照和标注的文档,这个文档可以成为Buglist。
![730970fe1ad57940b824fd61b9b80ad9.png](https://i-blog.csdnimg.cn/blog_migrate/5952deb6a45d9de04d78f781fd1db03f.jpeg)
截图后可在软件中对比寻找问题
项目走查除了判断视觉还原程度,也要兼顾动效、点击状态等动态效果是否符合设计预期。如果有问题需要及时和技术反馈,反馈的方式建议是文档类型,保证有据可查。
![e54e12c2c4812e86719825fd7182cdee.png](https://i-blog.csdnimg.cn/blog_migrate/37dc4b93ae59c04e48e9c5c69a1e03f6.jpeg)
总结
我们一起来小结一下:当我们设计iOS平台的APP时,我们可以选择使用Sketch、Adobe XD、Photoshop等工具。为了切图和适配方便,设计时我们以iPhone6/7/8尺寸(750x1334px或375x667pt)为基准设计。设计过程中我们需要通过诸如Adobe XD或Mirror等工具随时在手机上预览设计效果。之后我们需要把图像资源输出成@2x视网膜屏幕和@3x高清视网膜屏幕两套图像资源,这时可以使用Cutterman或Sketch和XD自带的切图功能切图。为了保证开发工程师能够完美地还原我们的设计稿,我们需要提供标注。通过蓝湖或像素大厨、Markman、标你妹啊等工具我们可以把设计稿完美标注给到程序员,这时程序员就清晰地明白每个元素的大小和间距了。最后,我们要对完成的程序进行验收。本篇文章写于二零一八年,按照惯例,每年苹果都会举办两场发布会发布新产品。如果后面发布了新的手机,也希望大家能够理清脉络,透过现象看到本质,找出合适的设计适配方法。