最近想花点时间去总结整理一下做设计这几年的一些经验技巧或是踩过的坑,也不知道从哪开始,就先从《一款APP设计的从0到1》开始吧,这是一篇自己工作经历总结,希望可以给你一定的帮助吧~
一、项目确定(和产品过prd理逻辑需求,预估项目时间)
二、界面设计(开始着手整个界面视觉风格思考啦)
三、切图标注(按照你用的软件还有程序猿哥哥的要求来)
四、视觉还原(也就是找茬,看看程序猿哥哥的视觉还原度怎么样)
五、上线准备(准备上线需要的各种资料)
-----------------------------------------------------------------------------------------------------------------------------------------------------
一、项目确定
熟悉了解整个产品逻辑:这个过程一般公司应该都是在产品原型已经出来后,我们UI设计开始参与讨论prd的一系列逻辑和交互,这个过程最重要的就是我们设计师一定要把整个产品的逻辑理清楚,这样才能保证我们之后出的视觉稿逻辑是没有问题的。这个过程是很重要的,因为一般公司产品在原型出来之前,我们UI设计师几乎是接触不到,也不会参与什么逻辑讨论的部分,所以在这段时间对于我们熟悉产品特别重要,在对产品充分熟悉了解后,会更有助于我们下面的界面风格确定,更好地把控整个产品的全局。
在了解熟悉整个产品之后,下面可能就需要我们UI设计师来预估项目时间了,这时候可能boss和产品会问你多久图能出完,先别着急答复,你需要再审视一下所有的页面(他们会没完没了的催你,因为他们着急上线,抢占市场,恨不得让你天天加班作图,然后搞上线;催你不要管,让他们尽情催去吧)
预估项目时间:预估时间首先要确定重要页面,在如今看颜值的时代,所以一款APP的首页视觉就相当重要了,还有很多主要的一级页面也是重要页面,一般这些可能会需要2天时间左右(这2天你需要确定主色、设计风格、icon设计,以及还要预留可能要修改设计风格或者设计细节的时间),首页确定之后,整个APP风格也就确定了,其他的页面做起来也就相对轻松一点了
其次可以看下大概有多少个重复页面,一个App去掉框架布局重复的,也就差不多去掉一半的页面了,(比如一个项目有80个页面左右,去掉重复框架布局的页面,差不多就还剩40个左右页面),然后再按照各自预估大概多久时间可以完成,一般需要多留出点充足的时间(在实际预估时间上多30%—50%左右,以应付突如其来的其他工作状况)
这样就可以预估一下整个项目大概需要多久时间完成了,就可以直接去和boss或者产品汇报完稿时间了(如果他们要嫌你慢,你可以直接回怼:一味的追求速度,出了问题谁负责?质量和时间是成正比的咧,吧啦吧啦~)
二、界面设计
目前在行业里,关于APP界面设计规范也是参差不齐,但是最常用的也就是iphone 7和iOS 10,界面尺寸:750*1334
设计工具:
做界面设计一般会用到PS、AI、Sketch,如果你是windows电脑,那你一定用PS最多,如果你是mac电脑,那你肯定会用到sketch。使用PS做图的话一般用二倍图设计,使用Sketch做图大部分采用一倍图(当然也可以用二倍图)。UI设计师使用一倍图为基准进行界面设计,主要是因为方便,便于理解。对开发来讲也不需要进行二次换算,效率也会得到提高。因为我比较喜欢直接用2@图设计,所以sketch也是用的2@图来做设计的。但是sketch用2@图设计一定要保证每个切图、间距都得是偶数,这样开发哥哥才能用哦~
设计标准尺寸:
在iPhone 6还没出的时候,都是用640x1136 px来做设计稿的,自从6的发布,所有的设计稿尺寸以750x1334 px来做设计稿尺寸,(现在不管是ios还是安卓都可以用同一套750*1334的设计图来上下适配,不过不同公司程序猿哥哥的要求也不一样,需要和程序猿哥哥沟通好,避免被程序猿哥哥打哦~)
下面是iPhone屏幕的一些界面尺寸,还不是很清楚的同学可以看一下,用小本本记一下哦~
设计规范:
基于750*1334界面尺寸,下面这些设计规范一定要熟记哦~
顶部状态栏高:40px
导航栏最小高度:88px
导航栏下滑动tab高度:80px
底部tab高度:98px
在了解了上面这些就可以开始你的设计啦~
三、切图标注
理论状态下,为了兼顾到目前还存在的各个机型,应该为不同的机型尺寸提供不同尺寸大小的切图。但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,也就没必要去考虑适配,所以具体输出几套需要看公司的产品需求而定。(一般输出2@、3@的就可以了)
切图工具:
Cutterman,一款PS的插件,切图非常方便,目前cutterman最新版为3.6.0版本。
Assistor PS也是一款PS的切图标注插件,也被誉为神器;这款我自己电脑里没有安装,从别人的使用评价上看说它切图和标注上体验不高,但是它的其他辅助功能还是很不错的,比如参考线辅助,圆角大小,磁铁功能。有兴趣的同学可以去试一下~
Sketch Measure 是一款Sketch最佳自动标注切图插件,非常强大好用。切图标注一建生成~
下载地址:https://oursketch.com/plugin/sketch-measure
画板上切刀切好,规范导出,一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。
在线演示: http://utom.design/news/
标注工具:
Mark Man,也是一款高效的设计稿标注工具,支持 Win / Mac, 可免费使用基础功能,基础功能不能保存编辑的内容,只能导出png图片,导出后不能修改,不过毕竟是免费的,要求也不能太高;如果需要高级功能也是需要付费的60RMB/年。
PxCook(像素大厨),是一款切图标注设计工具软件。自2.0.0版本开始,支持PSD文件的文字,颜色,距离自动智能识别。
优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。标注功能包括:支持长度,颜色,区域,文字注释;从2.0.0版本开始,整体效率有了很大的提高,值得推荐的是自动智能识别标注。
Parker,和cutterman是同一家的,Parker能够自动计算尺寸、距离、文字大小、阴影、描边圆角、行高等信息,并按照你的需要进行标注, 它极大节省你标注的时间,大幅度提升设计效率。但是parker不是免费的,而是一款付费软件,需要60RMB。
以上工具各有优点和缺点,在选择上主要还是看个人的习惯,哪个用着顺手就选择哪个。个人感觉还是Sketch Measure最方便快捷,有mac的小伙伴可以试试~
四、视觉还原
视觉还原也就是找茬,看看程序猿哥哥的视觉还原度怎么样,一般很多程序猿哥哥都会很随意,他们有时候都是跟着感觉走,几乎会忽略你给他的标注,所以这个时候我们就要仔细检查了,也是发挥我们像素眼的时候了,不过还是得温柔的和程序猿哥哥提这些修改。可以整理一个设计视觉调整文档给到程序猿哥哥们,像我们公司就是会抽点时间给设计,让我们有一个为程序猿哥哥面对面找茬的机会(这个时候作为设计的你我他一定、一定、一定要理智,温柔对待,万一把程序猿哥哥惹火了,那可就惨啦,哈哈哈~)
遇到问题及时面对面协商解决、达成共识、修改、敲定、解决。沟通是解决问题的最有效方法,所以多和开发哥哥接触沟通交流吧~
五、上线准备
应用图标(APP Icon)
因为需要的图标非常多,不可能全部加进去,只能选择最好的尺寸,我们公司的开发哥哥要求我提供以下图标尺寸:
1. iOS icon:
注意:这里需要注意一下,iOS系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方形的PNG格式即可。
2.Android icon:
安卓的图标相对iOS来说较少,我们只需提供以下几个尺寸就可以了,但是安卓的需要圆角哦~
启动页(LaunchImage)
1、IOS:
640x960px iPhone 4/4s
640x1136px iPhone5/5s/5c/SE
750x1334px iPhone6/6S/7
1242x2208px iPhone 6plus/6S plus/7 plus
1125x2436px iPhone X/XS
注意:启动页面一定要是PNG格式的,建议给开发之前讲图片全部压缩一下。
2、Android:
安卓的屏幕尺寸比较多,所以我们的程序猿哥哥一般会要求我们启动图设计成750*1334尺寸的,直接切2@、3@的图和标注给他们(不同公司程序猿哥哥的要求也不一样,要和开发同学协商好)
应用商店图:
APPstore:商店页最多为5张,格式为png或jpg文件格式,并且还支持视频格式,现在APPstore商店页只需做一套尺寸:750x1334px
安卓应用市场:安卓应用市场有很多,但总体来来说相对比较一致,安卓的商店页我们是需要提供2套就可以了(480x854px、720x1280px)
关于《一款APP设计的从0到1》就全部讲完了,希望可以给各位同学带来帮助,之后有时间会陆续出一系列的经验总结和各位同学一起分享,不足之处也希望大家指正~