入门必读!交互设计师浅聊设计流程中的严谨与规范

2015/06/22 16858

alibaba-design-flow-standard-1

@窒息红Leon :以前可能会觉得,设计师应该是自由、随性、充满创意的。但在实际工作中,尤其是互联网产品方面的设计师,因为需要管理自己的工作文档并且和同事协作沟通,设计流程中的严谨与规范显得尤为重要 >>>

本文为作者授权优设发布,未经作者本人授权请勿转载,谢谢 :)

作者微信公众号:zhenlei_pd,欢迎同学们关注唷。

不幸的是,我这大半年的设计工作中都不够重视这件事;而幸运的是,现在醒悟还不晚。

想看同学的面试经验?戳:《毕业季专题第二期!揭秘天猫交互设计师面试过程》

图层管理、命名规范、Style Guide 等等都是再重要不过的内容,每一步偷下的懒,日后都要花费数倍的时间去填坑。

这是我月初时候设计稿某一版的图层截图。

可以看到,毫无逻辑可言,仅仅从这张图看来,根本没有办法把设计内容和图层、命名结合起来,更不要提理解和管理了。Group 都保留了默认命名,无法理解含义;中文英文混合,大小写混合,无法正常阅读;逻辑层次混乱,取图层、选定图层都比较困难;没有使用 Symbol 功能(或智能对象),对样式的管理为零。

很多时候,如果需要在界面中添加一条分割线,你会怎么做?也许你会直接快捷键拉一个线条,确定长度和角度后放置到指定位置,就完事儿了。那么,这条线的名字就叫做「Line」,下次复制的时候,新的线条名字就变成了「Line Copy 2」。如果再切换到别的页面或者创建其他组件,一个混乱的图层就逐渐成型了。

图层混乱最大的问题就是迭代烦琐,包括设计层面的图层修改和合作层面的切图等。

一般,一个项目的设计图最少也有几十页,多的可能会有上百页。如果我在每个页面中都采用不规范的做法新建「分割线」,比如都采用了 200pt 宽,纯黑色的线条,加在一起可能有百来条这样的线。当项目评审后,要求把线条的颜色改成灰色,你就会默念「真是日了狗了」。想想很容易明白,如果不使用 Symbol 进行样式管理,每一个线条都要重新编辑一次,还要确保不遗漏、不出错,工作量绝对惊人。

再说切图,按照上面这张图的命名方法,直接切图给开发,对方基本是看不懂这个规则的,结果就是根本找不到需要的内容在文件夹里的什么位置。而且,编码过程中的每一个组件也可能是一个对象,也需要对其命名,比如「separator_leftview_long」等,如果你的切图命名为「Line Copu 2」,请问同事是什么心情呢?

所以,这次我花费了大量的时间把设计稿从头到尾整理了一遍,把所有用到的字体样式、图层样式、常用组件都采用 Symbol 进行统一管理,并且确保了所有页面中同一个组件具备完全一致的命名和样式。

页面名称方面,使用「模块_内容_备注」的形式进行命名,如下图所示:

层次方面,让图层和视觉顺序相对应,图层本身的命名也采用「类型_位置_备注」的形式进行标注。比如「bar_project_leftview_segnav_selected」指的就是一个条块,位于 project 模块下的左视图次级导航页面中,功能是标识选中的效果。

对于经常用到的组件如 icon、分割线、按钮等,使用 Symbol 和字体样式进行统一管理,并且把它们罗列在 Style Guide 中,一方面便于查找,另一方面切图的时候只要输出一份就可以了。如下图所示:

这样,无论要求改动哪个内容,都可以「牵一发动全身」,极大避免了重复性工作。

切图方面,@1x 和 @2x 分别存放,对于样式类经常需要复用的内容可以单独导出,然后每个模块独有的内容就单独罗列出来,这样工程师可以结合设计稿很快地找到所需要的内容。

PS:本次合作的工程师说,@1x 是不需要在命名时单独注释的,@2x 则要在文件名尾标出。我第一次还特意手动添上了@1x,多此一举,倒也学会了这个小要求。

至于标注方面,使用 Zeplin 后真的方便了很多,原本要花不少时间的工作可以避免了,开发也表示看起来更加舒畅。

也许今天这篇文章对于很多有经验的设计师来说是不值一提的小事,因为确实这都是基本的工作规范。但是对于新人来说,不犯错可能就不知道这些内容的重要性,所谓吃一堑长一智,做的细致,只会让你更加专业。

今天收到了最近这几个月来听到的最大的表扬,就是「比我们公司的设计专业多了」,继续加油!

作者微信公众号:

wzlqr

招聘风暴月来了,来看看怎么找到工作!

心血合集!你的工作就它承包了!
《毕业生求职指南!手把手帮你从零开始找到工作!》

自学时刻到,我们一起来祷告!
《超赞!设计师完全自学指南》

给自己打气!来看看90后的大学生活!
《这才是大学生活!90后设计师的成长记事录》

作者:@窒息红Leon

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量96万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/alibaba-design-flow-standard

界面设计 交互设计师 HTML5 素材 用户体验设计 好文 UI 转场动效 设计师专访 设计师 设计规范 排版布局 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里