本文适用于刚入行的新人UI设计师,也欢迎各位大大拍砖,初来简书,不周之处还望海涵。
作为新人,我们在进行新项目的处理过程中,经常会难免犯一些错误或是走一些弯路,笔者结合自己之前做设计中的一些实际经验在这里列出一些需要注意和提防的地方,希望能够帮助大家少走一些弯路,共勉。
工欲善其事必先利其器这句话说了千千万万遍,不要不信。在确定好产品的内容、面向群体等等产品因素后,不要急于直接打开PS建立图层开始进行设计,先建立产品视觉规范。
1.文字布局规范:视觉规范是指你在接下来所设计的产品中所用到所有元素的合集,包括这些元素的大小参数与将在何处何时被使用。一般的视觉规范由字号、字体、图标、颜色、布局(导航栏参数、头像框参数等)等组成。
现在UI设计都有着约定俗成的规范,作为新人我们大部分时候可以借鉴这些前辈辛辛苦苦总结出来的经验,例如导航栏和Tab taber的高度,字号图标的区分,倒角的大小,板块的分割方式等等。如果不是太偏门的产品,一般都可以在各大网站找到你心水的UI界面范例,找一到两款合适的,将你将要使用的文字(包括中英文字体,各种情况下将要使用的字号)大概的界面布局(导航栏高度、Tab栏高度、左右留白宽度、板块圆角半径等)先在视觉规范中写出来。
2.图标和颜色规范:第一步之后,你心中对将要做的事情应该有一个更明确的雏形,但还不到着手设计主界面的时候,接下来花一点时间先做图标和颜色规范。
首先是颜色,根据你要做的产品,利用各种配色工具选定一组产品颜色规范(建议先选定一种主色,一到两种辅色,然后白色,不同深度的黑色3种用于文字,浅灰色两种用于界面分割等。)确定主要板块的主要色值分布,文字界面的文字安排,按钮图标各种状态下的颜色,做一个粗略的颜色规范。
其次是图标,一款产品经常会涉及到十几二十甚至更多的图标,先把确定会用到的(例如返回,前进,Tab栏中的)图标做好,记住要统一图标外观(图标样式 空心/实心等,图标粗细等等),不要有虚边,区分优先级及各级别图标大小,列在规范当中,其中包括大小、颜色、位置、各状态下相应变化这些参数。
3.调试:初步建立视觉规范后,可以试着进行产品首页的设计,有了视觉规范,你会发现界面设计将变得异常轻松,导航栏从规范中直接拖(两个相同大小的画布中按住shift拖动图层不会改变图层相对位置),Tab栏直接拖,参考线直接画,板块布局直接上,每一步你都心中有数,知道哪儿该左右对齐,哪儿该用多大的字什么颜色,而不是一头撞去,指哪儿打哪儿造成最后改起来异常不方便的情况。
试着设计首页的过程中,遇到不顺手或是觉得需要修改的地方一定尽量追求完美,务必使得规范与产品适配,查漏补缺。之后我们正式进入页面设计过程。
4.干净分组,及时改名:一款产品永远不是你一个人就能彻底完成的,团队合作必不可少,所以你不仅需要自己看懂设计稿,也需要让别人看懂,所以在最开始设计的过程中,我建议大家就要开始养成保持PSD中图层清爽,分组明确的习惯。无论是之后你自己改稿子还是与别人合作,这个习惯都将省去你很多麻烦,而且,这也是一个优秀的设计师应该有的习惯。
5.设计过程中,时刻记住规范:
界面设计不同于泼墨山水画,它更多的需要一份严谨与规范。当你遇到任何觉得可以自己看着调的问题的时候,请想一想你的规范(例如当你在板块下面加入文字的时候,那么这个文字与上下板块的间距,左右对齐方式,字号大小,字体规格都应该是确定的,而不是靠眼睛看看随便移移;任何一个板块突出的文字或是图标都应该有着对齐方式和位置参数,就像板块标题大部分水平居中一样。)
不要有任何一个地方想当然,规范,规范,规范