UI设计协作工具和习惯

这篇分享界面设计中用所到的工具利器和常用工作流程,学习设计中难免会遇到不太熟练的知识点,我们需要耐心去积累去学习,基础功扎实了才是真的好。

油画作品chomoon

设计准备

准备铅笔、橡皮、水性笔和荧光笔,打印原型图纸。

构思结构

最享受的是这一part了,拿起铅笔橡皮和荧光笔开始在自己事先打印好的原型图纸上画一个和PM讨论完毕后的草图,一个或多个,把想法换成文字+图片的形式记录在边上,最后将需要操作的按钮或者需啊哟突出的部分用荧光笔进行高亮处理。

寻找案例

即使脑中有许多交互原型和眼花缭乱的效果,真的开始做了,还是需要一些参考资料,我会将页面需要的模块标注出来,在 Pinterest 或者 花瓣网 上找相应的模块设计图,收集的同时必须要问自己:

  1. 这个交互是怎么操作的?
  2. 这个模块适合我们的产品吗?
  3. 这个开发工作量大概需要多久?
  4. 还有更好的交互吗?

开始设计

设计的过程中不能被参考图片的风格和交互带跑,建议开始前再一次拿起铅笔、橡皮和荧光笔,就自己想的新页面重画一遍草图,这一次将交互细节考虑进去,按钮的状态,缺省情况等。思考的时候避免一直面对电脑而感到迷茫。

如果自己把握不好草图的尺寸怎么办?建议先打印 1:1 的原型图,如果你对自己手绘原型有极高的要求(这或许应该说是情怀),《平面设计中的网格设计》一书提到了解决方法,练习不同尺寸的字体手绘,将标题和文本都能清晰地画出来,就像一个人肉打印机一样。后面我会写一篇关于书籍推荐的文章。

制作原型

绘制完简单的页面,我会将页面传输到第三方原型展示工具,用来和同事分享我的原型,当然主要观众还是老板和 PM。国内可以使用墨刀收会员费),可以在线修改原型并分享,可以调整的东西很多很全。

尝试过的各种工具
<iframe src="https://modao.cc/app/Q2Pz9q8D5P3sOiQnXLFvNsO8z4EB3vl/embed" width="515" height="968" allowTransparency="true" frameborder="0"></iframe>

设计总结

因为PM需要把设计给老板看,所以就需要我做一个展示方案文件,目前我的做法是在 sketch 里做一个模板,文字样式和图片大小都固定好的页面,将设计稿件放进去后,修改文字解释,导出PDF文件就可以了。

开发交接

国外的朋友可以用 zeplin ,现在 sketch 支持了交互原型功能,应该用着更得心应手里了,国内可以用 蓝湖,或者是墨刀收费) 。我觉得应该有不少公司还在用最原始的方式切图、标注,作为设计师应该去推广更前卫高效率的工具给团队。

记录问题

要学会记录自己不会或者较不熟练的知识点。

善用教程

自己大学期间并没有图标设计这类的选修课程,所以并不是很清楚如何系统地绘制图标,于是工作的时候会对自己的图标设计很没有自信,后来用 YouTube 看到了老师们怎么构思怎么从零开始绘制应用图标才有全新的认识,还学会使用黄金分割法绘制logo,没有比在工作中付诸实践了立马查看成果来得更有成就感的事了,再一次把自己的作品拿出去当产品图标,感觉有底气多了。

收集原型

这是设计师必备的技能,收集自己觉得很棒的设计并加上标签放进自己的收藏夹,有人用花瓣有人用 pinterest ,我用印象笔记来收集,为此我还买了高级会员,可以在多端浏览修改,流量也不会用完,除了放原型,一些设计资源和教程也会往里面放,甚至有时候变成了我用苹果手机往 Windows 电脑里传文件的快速通道。

继续阅读《公司里的酷设计师》(暂定)

2 replies to “UI设计协作工具和习惯”

Leave a Reply

Your email address will not be published.