07：设计标准——好的设计需要表达

原型：是产品功能与内容的示意图，包含静态的页面样式（线框图），也包含动态的操作效果（交互说明）。

通过思考，设计方法等，把需求转化为设计方案，再细化成标准的设计原型。

拿到需求后，在考虑各种限制的基础上，从用户的角度出发，把需求转化为目标。（例如：产品经理发现市场上需要果汁，而手里刚好有个苹果，于是设计师榨出苹果汁。设计师通过思考、分析，发现用户更喜爱的是橙汁。如果提供橙汁，用户会更满意，对公司也没有不利影响。于是最后决定提供橙汁。这个设计决策的过程就是价值的体现。）

如何产出标准的原型稿（清楚、规范）

推荐：设计移动端产品，使用PowerPoint来绘制原型。

高保真原型：在外观、操作上与最终产品一致，适合做展示用。

标准的原型应该包含什么内容

1.简要说明与信息结构

1.1简要说明：以列表的形式呈现

简要说明内容

1.2信息结构：需求文档阶段，信息结构更多体现产品的逻辑结构。原型稿是综合考虑产品逻辑结构和用户习惯而得到的结果。

2.任务流程与页面流程

2.1任务流程：是指用户使用产品时，它的每一步操作会遇到什么结果，系统会如何反馈等，引导用户完成用户目标。

2.2页面流程：展示用户如何通过操作，从一个页面跳转到另一个页面。

3.线框图与交互说明

3.1交互说明：

哪些内容需要详细的说明：文字过多怎么显示？操作瞬间会出现什么提示？点击了页面上某个部分内容，会出现什么反馈？跳转到哪个页面？......

推荐：交互说明与动态效果相配合的方式

交互说明的内容

注：除静态页面外，还需考虑各种动态情况：除正常情况外，还需考虑特殊和错误情况。

如何划线框图。

1.通过明暗对比表达。
        直观表示界面元素的优先级关系。

2.不使用截图和颜色。
        线框图上不建议使用色彩。

3.合理的布局。
        确定界面布局时，提前和视觉设计师沟通商量。

4.遵守栅格规范。
        保证交互稿中的字号、间距尽量符合视觉要求（如间距最小为10像素）。

5.标记第一屏的高度。
        设计Web端时应注意。最重要的内容，在第一屏内完全显示。

6.表达清楚UI逻辑。
        一般来说，操作的优先级大于链接，链接的优先级大于文本。最重要的操作一般是用按钮来表现的，然后是普通的操作，最后是消极的操作。

7.考虑视觉实现后的效果。
       绘制线框图时，应考虑细致。考虑到文字对图片的影响。

8.了解视觉趋势。
       通过对比某个应用的前后版本，分析视觉趋势，应用到线框图的设计中。

写交互说明的诀窍

1.尽量使用真实、符合逻辑的数据内容。
        极端情况的展示需要考虑，但不要作为最主要的。

2.不遗漏特殊状态的描述。
         用户极少用到的情况，不能忽略。（比如：勾选人名后，下面相应显示对应的信息。如何显示？信息如何排序？最多显示多少？超出一行怎么办？名字有无字数限制？名字超长（外国人、少数名族）怎么办？重名怎么办？勾选人名后，在下方修改信息后怎么办？...都需提前考虑到并写在交互说明里。）

3.避免过长的说明。

4.避免流水账式的说明。
      流程图代替文字说明。用表格罗列何种状态。巧妙组织文字说明（用if\else\case等）。制作动态效果。

5.关于重复出现的模块。
       对于重复出现的模块，可以将其命名，在其他页面上留个空位就可以了。尽量用模块化的思维方式来处理较复杂的问题。

6.如原型有修改，不要口头沟通，而要更新交互说明并告知大家。

关于设计规范

一、有了设计规范，可以统一整个产品的风格，“一致性”形成鲜明的产品特征，增强用户粘度。提高易用性。避免重复设计同样的功能，减少工作量，提高工作效率。

二、什么时候开始设计规范？
1.大型且重要的产品。
2.产品结构、页面类型、UI组件相对较单一，可复用的内容较多。
3.项目人手充足、时间较充裕。
4.品牌风格、主题风格已确定完毕，品牌备忘和梳理势在必行。
5.产品线日益丰富，后续设计一致性和可循环的要求被提高。
6.产品结构壮大，新人不断涌入，沟通和执行效率亟待提升。

三、制定设计规范的原则
1.内容一定要简单易懂，条理清晰。
2.交互设计一般先于视觉设计，视觉是在交互的基础上做效果。
3.先制定大的设计方向，再制定项目中单个详细的说明；先制定团队合作的规范，再制定个人操作上的规范。