《破茧成蝶》读书笔记——技能（2）

纸面原型

目的：快速表达想法、节省时间、提高效率，沟通、测试、尽快解决不确定的问题。

　　　可快速修改，尽早否定不靠谱想法。

　　   确定纸面原型后，可以每细化一个界面就交付给视觉，缩短项目周期。

使用工具：草图使用铅笔和纸张。逻辑使用马克笔、双头画笔等。交互效果用便签纸和小卡片，当提示气泡、弹出层、模态窗口等，贴在绘图本上，也可以作为页面标注工具，说明产品功能。

　　        若会用到很多可复用的标准交互组件，可以网上找到标准交互原型组件库，打印出来，剪裁成模块贴到页面框架中，与受贿草图配合使用。

　　　　　若为团队合作，可利用白板进行绘制，拍照留存文档。

需要表达什么：框架、流程、基本功能和内容，可以忽略细节。

　　　　　　   逻辑关系，可以用深浅颜色表现。

 

第七章　　设计标准

什么是原型

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

设计师要在考虑商业性、各种限制的基础上，从用户角度出发，把需求文档“翻译”成设计目标，在一定程度上弥补因流程不合理导致的问题，充分发挥体现自身价值的设计决策过程。

eg:产品经理发现市场需要果汁，而自己手上刚好有苹果，就急忙让设计师榨苹果汁，但设计师经过思考、分析，发现用户更喜欢橙汁，在与产品经理沟通后，把苹果汁换成了橙汁。

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

简要说明与信息结构：

• 变更日志：方便项目成员看到每次更改的内容。
• 版本说明：此版本变了哪些地方。
• 信息结构：产品内容、组织、页面层级等。主要是产品的逻辑结构和用户习惯，与需求文档不同。

任务流程&页面流程：

• 任务流程：用户如何操作、界面如何反馈等。
• 页面流程：从一个页面跳转到另一个页面的完整过程。

线框图&交互说明：

• 限制：范围值（数据取值范围）、极限值（数据的显示限制）等。
• 状态：默认、常见、特殊（非正常使用时）状态等。
• 操作：常见、特殊、手势操作及误操作等。
• 反馈：提示、跳转、动画等。

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

绘制线框图

通过明暗对比表达：突出页面元素的优先级，但是，深色并不意味着比浅色重要，要看色块之间的对比关系。

不使用截图与颜色：不要拼凑各种竞品的截图来组成页面；不要在线框图上使用色彩，会对视觉设计形成干扰，告诉视觉设计需要营造的感觉和氛围即可，不需要太过具体。

合理的布局：尽量保持简单的结构，最好不要出现2列、3列混排的结构。确定界面布局时，提前和视觉设计师沟通。

遵守栅格规范：保证交互稿中的字号、间距尽量符合视觉要求。提前和视觉设计师沟通商量好。

标记第一屏高度：1024*768情况下，极限情况可定为 570 或者 600

表达清楚UI逻辑：我们需要提前整理网站主色调、一般文本颜色、弱文本颜色、链接文字颜色等这些UI内容，以保证这些内容的样式符合它们的重要程度。一般优先级：操作>链接>文本。

考虑视觉实现后的效果：要考虑图片对文字的影响，一般在画线框图的时候，图片只是用占位符来表示，不能真实表现出实际情况。

了解视觉趋势：多关注视觉趋势，线框图的整体风格跟视觉趋势是密切相关的，设计好的交互稿整体风格越清楚，视觉设计师在做视觉效果的时候出路会越少，减少沟通成本。

写交互说明的诀窍

尽量使用真实、符合逻辑的数据内容：可以减少对方的理解成本。

不遗漏特殊状态的描述：写交互说明的时候，要按照开发的思路去思考任何一种可能，因为在写程序的时候，是要对任何情况做出判断和处理的。

避免过长的说明：不要有太过复杂的逻辑；适当舍弃出现频率极小的异常，通常处理这些异常的开发成本比较高。

避免流水账式的说明：

• 用流程图代替文字；
• 用表格罗列各种状态。尽量用更有条理、更容易让人理解的方式来展示操作逻辑关系。ps:多想想是否有更清楚、直接的表达方式。
• 巧妙组织文字说明：eg:“if、else、case”来做条件判断说明，这种方式更让开发喜欢。
• 制作动画效果：有些复杂的动态效果很难用文字描述清楚的时候，用动画来展示。

关于重复出现的模块：把这个模块独立出来，并起名为“迷你收藏夹”，然后在其他页面上只留个空位（占位符）就可以了。尽量使用模块化思维来处理复杂的问题，有助于提高效率。

如原型有修改，不要口头沟通，而要更新交互说明并告知大家：邮件或其它方式，通知到团队的每一个成员。

关于设计规范

什么是设计规范：是对设计的具体细节、技术要求，是设计工作的规则和界限，是一种模块化应用的方法......

没有规范出现的问题：

• 不同频道/模块独立设计：设计风格不统一，有损品牌形象。
• 同类功能组件存在多种样式。
• 同类元素多样性。eg:页面中的按钮，不能是每个都不一样。
• 设计效率低下。eg:规定一级标题就是14号字，不用每次改版的时候都不一样。
• 设计质量难以把控。

设计规范解决的问题：

• “一致性”形成鲜明的产品特征，增强用户粘度。保持产品概念、界面元素、视觉风格、操作交互的“一致性”。
• 提高易用性。相同功能、组件采用类似的处理方式。
• 满足团队协作需求。让被反复讨论、验证过的设计思路沉淀下来。
• 其他。避免重复劳动、降低培训和支持成本等。

设计规范的分类：

• 产品战略级方向的规范。一个是整个公司或部门的风格，即品牌规范。另外是恒定不变的内容：基本控件设计规范等。
• 单个项目中的设计规范。为每个产品设计详细的规格说明书。比如：banner规范、专题规范。

 

 第八章　　项目跟进

设计评审

目的：检验目标、发现问题、达成共识。

评审前的准备：

• 事先考虑所有可能的方案。
• 准备各种设计依据。
• 做好会议邀请工作。会议开始前尽量保证产品经理及最主要的项目成员的认可，尽量私下达成一致，而不是把所有问题都抛到会议上。越重要的事情越要尽可能少的人参与。

如何在评审中掌握主导权：

• 主导流程。推进设计也是设计师重要工作之一。清晰表达设计意图和设计要点，让组员正确理解设计方案，展示后收集意见，引导讨论。
• 提高效率，控制话题。跑题、对细节纠缠不清是会议效率的两大杀手，最重要的是在设计的大的功能点上达成一致，对细节求同存异。
• 区分和收集有价值的反馈意见。带有个人喜好的反馈意见不要去深入探讨；模糊的意见不要采纳。收集：客观、明确、可操作的。

设计评审是一个建立设计师口碑的过程。准备充足、有理有据，体现出专业素质，才会得到大家的认可。

如何审视视觉稿

界面中的视觉设计不是艺术作品，正确地理解信息和传递信息是最重要的事，忽略内容而关注形式是不可取的。

逻辑性：交互设计师需要注意视觉设计师在改变交互稿后的方案是否合理，是否违背交互逻辑，会不会引起用户歧义。

美观性 & 氛围渲染：视觉设计不仅要把交互稿的逻辑和信息正确传达出来，还要发挥出视觉设计师的创造力，把界面设计得更加美观，更加有氛围。

视觉层次：清晰的视觉层次能够对用户进行正确的引导，并且让用户快速地理解信息。

交互细节 & 状态：例如按钮的3个状态、鼠标悬浮时的显示效果、各种间距等等。

审美：不要过分干涉。

开发阶段，设计师该做些什么

沟通：确保方案在技术上可实现；当面沟通设计重点和需要特别注意的地方；解答在开发时的设计问题，了解开发进度。

规范设计稿：在标注页面时，一定要与前端采用相同的规范和标注。

设计走查：上线前对产品Demo进行交互走查；配合测试工程师撰写测试用例，保证产品上线后与设计稿一致。

 

第九章　　成果检验

可用性测试

通过观察用户使用产品，发现产品存在问题的一种方法。

流程：设计核心操作人物--->招募测试用户--->观察并记录用户操作情况--->分析问题

设计测试任务该注意什么：

• 给出使用目标，而不是直接得操作。比如测试收藏功能，NO：请找到喜欢的文章，点收藏按钮。 YES：有篇你喜欢的文章，下次还想找到，怎么做？ 注：应揣测用户期望。
• 尽量选择最重要、最频繁的任务进行测试。测试时间控制在30~50分钟，选择5~8个功能点，涵盖核心操作。
• 符合正常的操作流程。任务的顺序应符合习惯，不要随意打乱。

测试用户的选择：

• 选择代表性用户。注意关注产品使用经验和行为。
• 数量。小型：3~5名；大型：5~10名。

测试过程中的注意事项：

• 切忌引导性过强。默默观察和记录，尽量不要提供帮助。
• 操作行为是重点。鼓励用户采用“出声思维法”，将思考、行为、感受都描述出来。
• 不要忽视现场反应。表情、声音等。
• 考虑使用场景。Web产品一般找个房间和电脑就能测，但是移动端产品，一般是在吵闹街头、公交车等不稳定的环境，我们最好能走进真实环境去测试。在测试的时候，我们也可以事先为用户提供使用背景，比如测试快捷易用性，我们可以告诉用户“现在只有三分钟的时间让你挑选物品并下单”；测试导购性，可以说“明天是你女朋友的生日，给她挑份礼物”。
• 感想被测者，给予一定报酬。零食、水果、金钱等。

问题的分析与改进：

　　趁记忆犹新的时候，快速把问题整理出来。根据问题频数、严重等级、优先级和违反的可用性准则（正规的可用性准则非常繁琐，可以在设计过程中多次使用简易的可用性测试）。设计初期的可用性测试主要测流程问题，高保真和内测环境下的测试可发现细节问题。尽早展开简易可用性测试，可以及时发现问题，流出足够的时间去解决和改进。

A/B测试（用于上线前和预上线）

A方案和B方案进行比较。为同一个目标设计2个方案，一部分用户使用A，另一部分使用B。通过用户的使用情况，选出较好的方案。

• 设定衡量标准。从产品目标角度出发，可将PV、UV、点击量、转化率、跳出率、二次返回率等数据作为衡量标准。
• 对同一个用户呈现相同的页面。保证同一个用户在测试期间，看到的都是同一个方案。
• 保证两个版本同时测试。
• 单一变量。A和B的差别不要太大，保持一个变量的差异。
• A/B测试的延生——灰度发布。通常用于新旧版的交替时。A为旧版，B为新版，看用户的使用反馈。

定性用户的反馈和定量的产品数据（上线后）

收集和读懂用户反馈：收集、分析（内容、功能、使用流程、设计、新功能建议、现有bug）。

用数据检验产品目标：点击量、转化率、营业额等数据来检验产品。做好商业价值和用户需求的平衡，好的设计会给公司带来价值