【2017.11.15】设计师的正确工作流程

天才靠的是积累，聪明靠的是努力。

扩展扩展：

banner 编辑：

可以作为网站页面的横幅广告，也可以作为游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner[1] 主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。

• Banner设计的六大原则
• 如何设计一款好的Banner-知乎
• fotor-在线快速平面设计平台

头脑风暴：

一种创造能力的集体训练法。
当一群人围绕一个特定的兴趣领域产生新观点的时候，这种情境就叫做头脑风暴。

• 头脑风暴-百度

极客：

极客是美国俚语“geek”的音译。随着互联网文化的兴起，这个词含有智力超群和努力的语意，又被用于形容对计算机和网络技术有狂热兴趣并投入大量时间钻研的人。在国外普遍定义Geek是指一些喜于业余时在电脑网络上与人交往的人，一般认为在电脑和网络上进行生活的人就是Geek现。

• 极客

一，头脑风暴

头脑风暴最怕的就是矜持

二， 交互草图

准备一个玻璃墙或者大黑板、几打便利贴、几种颜色的油性笔、几个小标记磁铁。
软件:
- Axure：拥有全面的Wed控件库，直接拖曳就可以快速制作网站的原型，丰富的动态面板可以用来完成各种交互效果，无论给什么阶段的人看都是简单移动的。
- Balsamiq Mockups:功能同Axure，所有的元素都是手绘风格的图像。
- Illustrator: AI，有利于矢量图形的处理，不过工作效率较低
- Ptototyping on Paper： POP

三，设计阶段

每做一个项目之前最好下载大量的同类竞品，贴延后将亮点部分截图

先不要动手，先去分析竞品，记录各自竞品的优点和缺点。想一想：这款竞品为什么不受欢迎，或者为什么这么受欢迎？这个元素的颜色用的是否恰当？这个风格是否符合用户？这个按钮或者标题文字的大小位置是否恰当？

工具：网点纸，图标网格纸，iphone6模板网点纸

四，输出研发

所谓输出，也可以更加通俗地说，叫作切图。

在PhotoShop中建议采用下面的样式：

模块类别功能_状态，例如：Nav_button_message_sel

状态：

• nor：normal，正常；
• hig：highlight，高亮；
• sel：select，选中；
• dis：disable，不可用；

五，动态描述

可以使用ps的时间轴

六，补充待命

后续

七，产品上线

后续

八，倾听用户

后续

Appendix：APP切图常用英文对照参考

• 启动页：slashscreens
• 引导页：user guide
• 加载：loading
• 登陆：login
• 登陆条：loginbar
• 注册：register
• 搜索：search
• 功能区：shop
• 标题：title
• 加入：joinus
• 状态：status
• 按钮：btn
• 滚动：scroll
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 当前的：current
• 小技巧：tips
• 图标：icon
• 注释：note
• 指南：guild
• 服务：service
• 热点：hot
• 新闻：news
• 下载：download
• 上传：upload
• 头：header
• 内容：content/container
• 尾/页脚：footer
• 导航：nav
• 侧栏：column
• 左，右，中：left right center
• 标志：LOGO
• 广告：banner
• 页面主题：main
• 子导航：subnav
• 菜单：menu
• 子菜单：sunmenu
• 版权：copyright
• 投票：vote
• 边导航：sidebar
• 摘要：summary

吐血整理( ﹁ ﹁ ) ~→

学习素材：视界·无界-写给UI设计师的设计书（Design Without Borders-A guidebook For UI Designer）【王涵】

感谢感谢( *︾▽︾)