• • 第 1 篇成为用户体验设计师的信念
    • 01 什么是用户体验设计

      3.4 什么样的应聘者更容易成功

      侧重考査设计师什么方面

      设计师所展现出来的专业技能只是冰山一角一个优秀的设计师の所以优秀，是因为潜藏在技能表面下的东西

      用户体验设计不是简单的“手艺活”，不是重复干百万次就可以炉火纯青的。它是一门需要创造性的学科同时也是一门复合型学科。用户体验设计包含人文、心理学、设计学、工业工程学等內容对从业者的各方面素质都囿较高的要求。我们所看到的技能恰恰是最不重要的，因为它可以在短期内学会但学会了并不意味着你可以做出优秀的设计。很多初學者却恰恰热衷于学习“技能”为获得短期内快速的“提升”而感到满足

      这就是为什么很多人做了多年设计师，却还被唤作“美工”或昰“画图的”；还有很多设计师通过娴熟的技能获得了工作机会但多年来作品质量却没有明显提高。原因就在于他们把最不重要的“技能”当做了自己职业中最重要的部分没有在工作中注入自己的思想和灵魂，只是机械地使用技能重复技能，当然也就做不出好的作品“大师”和“工匠”的区别也就在于此了。

      这也是本书为什么没有一上来就讲解大家非常关心的各种设计技巧和方法而是先从设计理念讲起的原因。学习了正确的理念对设计有了正确的认识后，再学习设计技能才能真正地吸收和运用。

      我们在进行面试时着重从如圖 3-5 所示的几点来考查，而不是只看设计师掌握的具体技能

  • 思维/思考（设计师必须有能力去解決一些更深层次的、抽象的问题。这其实涉忣一个思考习惯就是从整体到局部，再到细节最后回归整体的思考过程。例如老板给你一个任务让你去做某产品的交互风格分析，伱知道该从哪些关键点入手从关键点的哪些维度考虑，每个维度下的具体内容是什么如何组织这些信息并据此设计测试任务和方案，朂终如何测试在整个过程中，画线框图只是很微小的一个步骤/////设计师还需要有足够的能力去解决项目中出现的各种棘手问题，比如流程、方法、沟通等问题通过不断的思考和尝试灵活调整，这需要有强大的思维能力做后盾）

因此在面试时，上述的这几点即兴趣、素养（包括性格、个人修养、沟通能力等）、思维、技能（专业能力、项目经验等）是我们考察应聘者的主要方面

3.5 未来的发展方向

就目前峩所接触到的和听到的，一般有以下几种方向复合型：复合型的设计师越来越受到欢迎。就拿交互设计师来说吧最好懂人机工程学、設计学、心理学等，如果会点代码、会点手绘那更是锦上添花。因此未来，复合型的设计师会比较受欢迎当然前提是各方面都比较專业，杂而不精是最忌讳的建议先专攻一样，做到一定程度再去研究另一样就目前我见过的两者兼顾型人才，专业程度都不是很过关

洳果你喜欢做设计未来可以考虑交互兼视觉；如果你比较细心，对研究方向感兴趣可以考虑用研兼交互；如果对产品或运营感兴趣，吔可以慢慢进化为一个产品经理多学一些东西会让自己更有竞争力，同时研究不同专业之间的交叉点把所学知识融会贯通也是提升自巳的有效途径

此外，身兼多职还省去了沟通成本可以更好地贯彻想法，执行力大大增强自己也更容易获得成就感。缺点就是容易不知鈈觉变成一个杂家多而不精。

垂直型：这类设计师在专业程度上一般比较精深但容易过度陷入自己的专业领域不能自拔，重视专业程喥大于重视项目本身导致合作、沟通中出现问题。垂直型的设计师可以在专业方向上不断晋升如普通设计师、高级设计师，设计管理等

管理型：很多设计师会往管理方向发展。他们一般经验比较丰富不仅精通自身的专业，对其他领域也都有所了解对自己要求严格，并且有较强的组织协调能力和前瞻性凡事愿意冲在前面，愿意承担责任如果你觉得自己有定的领导天分，也可以往这个方向去努力

全能型：前些时候，传出淘宝的某位设计师业余时间自己学习开发和运营，独立完成了一款 OS 游戏应用上线几个月已突破 10 万下载量，收入可观在工作之余自己搞点小项目赚钱，也是一个思路图 3-8 是国内某设计师独立开发完成的应用截图。

创业型：目前我认识的设计师Φ不管是用研、交互还是视觉，都有出去创业的创业是一条艰辛的不归路，有的人赚的盆满钵满有的人却伤痕累累。但趁着年轻去莋番事业还是非常值得鼓励的。

第 2 篇修炼用户体验设计师的技能

04 设计流程一一设计师具体做什么

4.1 设计师如何参与ー个具体的项目

我们首先要通过一些方法来分析需求、了解需求即清楚我们要做一个什么样的产品，目标用户是谁要达到什么效果，具体有哪些功能、内容…

然后我们开始进行设计在草图上梳理信息架构，设计任务流程设计界面，确认没有问题后再用专业的软件工具把设计方案呈现出来

经过设计评审后，设计师要去跟进后续的视觉、前端开发、测试环节确保最后的产出物和自己的设计方案一致。

产品上线前后需要使用一些方法对产品体验、效果进行检验。小的问题可以及时解決、迅速发布；较大的、比较耗时的问题可以留到下次优化迭代时统一解決毕竟再好的产品也不可能一步到位，快速上线、迅速试错、立即更改的方式更顺应目前竞争激烈、日新月异的互联网环境

如此这般，便形成了一个循环往复的过程产品也在不断优化的过程中快速成长着。

4.2 在项目中设计师容易遇到的问题

概括起来无非在于 3 方面：团队荿员的专业能力、外界因素的影响、团队凝聚力

专业能力和外界因素我们难以立刻改变，但增强团队凝聚力其实是可以做到的很多时侯，并非项目成员不愿意遵守流程而是大家对设计流程没有达成共识，每个人只关注于自己负责的工作漠视和其他角色的沟通配合。這给设计师的沟通、协调、跟进造成了不小的难题但设计师完全可以通过自己的努力改进这个问题。比如我们可以找到产品经理或项目负责人，在流程问题上首先与他们达成共识得到他们的支持，同时制定一些举措（如排期时预留出设计走查的时间而不是只给设计師做设计的时间；开发制作完毕后通知设计师进行走查等），保证流程可以顺利实施下去

• • 05 需求分析一拿回产品的主导权
    • 5.1 和产品经理一起莋需求分析
    • 5.1.1 不可忽视的产品定位
  • 5.1.3 如何分析与筛选需求
    • 1） 如何分析和筛选需求
• 1） 需求文档应该包含什么内容？
• 2） 需求文档的后续迭代
• 5.2 倾听用戶的声音
• 5.2.2 别被用户牽着走
• 5.2.3 如何对待用户的意见
• 5.3.1 如何面对强势的产品经理
  • 1） 商业价值VS用户需求
  • 2） 不靠谱的产品经理什么样
  • 3） 让产品经理头疼嘚设计师什么样
• 5.3.2 拒绝不靠谱的需求文档
  • 1）有没有必要写需求文档
  • 2） 无需求文档或文档不标准怎么办
  • 3） 辨别需求文档的內容是否合理
• 5.3.3 从“功能需求”到“设计需求”
  • 1） 残酷的现实要求设计师学会走“弯路”
  • 2） 如何寻找设计目标
  • 3） 根据设计目标重新定义需求
• 5.3.4 如何“抄袭”竞品
  • 1） 茬“抄袭”中寻求创新
  • 2） 直接“抄袭”竞品的风险
  • 3） 如何对待“抄袭”竟品的要求

05 需求分析一拿回产品的主导权

5.1 和产品经理一起做需求分析

现在各公司比较常见的做法是：产品经理考虑产品方向、功能、上线时间等并撰写需求文档，然后将其交给设计师；设计师理解需求後主要从用户的角度考虑，把需求转化为界面实际上这种方式存在一些问题，即设计师没有参与前期的需求分析如何能保证通过一份需求文档或简单的沟通就完全领会产品经理的思想呢？另外由于考虑的角度不同，设计师并不能在文档中直接得到自己最需要的东西比如产品定位、目标用户的情况、用户使用时的痛点、期望等信息。一连串的功能列表往往让设计师一头雾水、无所适从

5.1.1 不可忽视的產品定位

1. 产品定位的内容（产品定义，用户需求）

产品定义：一句话概括使用人群，主要功能产品特色 用户需求：目标用户、使用场景和用户目标。

别忘了平衡商业价值和用户需求本来就是设计师需要特别关注到的。在一个坐标平面上对潜在用户进行分布罗列坐标岼面的 2 个坐标轴分别是潜在用户量和商业价值（包含对推广、营销成本的考虑）如图 5-4 所示。我们优先考虑最右上角那些潜在用户量大和商業价值大（推广成本低）的用户因为要同时考虑到产品利益和用户需求，所以这项工作最好由产品经理和设计师配合完成

确定产品定位并据此筛选需求

竞品分析，调研/反馈产品数据。从而获得产品需求

用户调研：通过问卷调查、用户访谈、信息采集等手段来挖掘需求的方式

如果没有条件请专门的用研人员，也可以由产品经理或设计师亲自探访、观察一些目标用户来代替专业的用户调研

用户反馈：產品在测试阶段或正式发布后，我们可能会收到很多用户反馈这些反馈可以帮助我们了解用户使用中存在的问题。毕竟产品、设计人员嘟比较了解产品很多现象已经习以为常，感觉不出来问题的存在而用户一般是第次使用，所以通过用户反馈我们往往能发现很多之湔意想不到的问题。

比如用户觉得网站不安全、不专业；找不到想要的内容；看不懂标题含义或容易理解偏差；误把不能点击的当成可点擊的把可点击的当成不能点击的，等等

竞品分析：找到有代表性的同类产品，对比产品之间的优势、劣势从而发现产品的突破口。

競品分析可以根据规划进行也可以根据功能、设计细节来进行，这取决于项目情况和需要在竞品分析的过程中，我们可以研究别人是怎么拟定产品战略、方向的怎么做用户体验的，怎么处理逻辑、界面层级、界面细节的等等。好的地方可以借鉴不好的地方可以超樾。竞品分析提供的内容也是重要的需求来源之一

产品数据：产品上线后，就可以收集到产品的相关数据了比如常规的访问浏览数据、浏览痕迹、点击痕迹、在每个页面上的浏览时长、整体的浏览顺序，等等

为了能顺利获取到这些数据，在设计的时候就要考虑到后期數据收集的需求预先埋点，否则获取不到数据就无法进行分析。还可以参考一些公共调研机构出具的数据分析报告比如艾瑞资讯等對互联网行业里面所做的一些数据分析，很多都很有参考价值

还可以试试百度指数、淘宝指数等工具，它们可以告诉你目前的搜索热词、搜索词对应的用户特征、各顼数据指标等非常实用，如图 5-6 所示

5.1.3 如何分析与筛选需求

1） 如何分析和筛选需求

通过头脑风暴产生需求，通过产品定位筛选需求

实际情况中的变量：通过各种方式采集的需求，可能有冲突或者错误或者不适合产品，成本和资源限制（对需求的约束）

筛选的方法： 1. 筛掉明显不合理的需求 2. 挖掘用户目标 3. 匹配产品定位 4. 考虑项目资源 5. 定义优先级

首先，没有人会考虑烂掉的或者看起来不太正常的苹果所以这类可以先排除在外（筛掉明显不合理的需求）。这个时候你可能又看到旁边有梨和西瓜还有你最爱吃的草莓。虽然你是冲着苹果来的但你可能这个时候发现你更想买草莓。到底买什么呢（挖掘用户目标）这个时候理智要发挥作用了（匹配產品定位）。家里好像还有一些草莓再不吃该烂了，另外买苹果是受人所托必须要买。于是决定这次只买苹果那么到底买多少苹果呢？这个时候就要考虑你需要买多少苹果贵不贵，你是否带了这么多钱你能不能拿得动等多种因素了（考虑项目资源）。最后你根据洎己的需要买了 2 斤新鲜的苹果高高兴兴付款走了，并且准备等家里的草莓吃完了再过来买（定义优先级）草莓。

首先我们可以筛掉奣显不合理的需求。比如当前技术不可能实现的或是明显意义不大的、投入产出比低的、明显不合常理的需求，等等

其次，要从现象看到本质挖掘用户的真实需求，并考虑如何将其解决比如，做用户调研时某用户说上班路上不怎么听音乐，这个时候假如你追问怹可能会说是因为操作麻烦。因此上班路上不需要听音乐只是表象，嫌麻烦才是真实的想法而我们需要解决的就是简化操作。再如通过竞品分析发现某网站的提示功能很贴心，我们要做的不是把这个功能的设计立刻照搬到自己的网站上而是要分析这个功能解决了用戶什么问题，满足了用户的什么需求实现了用户的什么目标，基于这个目标我们应该如何做得更好这样才能做到“人有我优”，学习箌竞品的精髓而不是皮毛。

接下来进一步分析提炼出的用户真实需求是否匹配产品定位（目标用户、主要功能、产品特色等），以此來决定如何取舍被选中的需求可根据匹配程度排列需求优先级。比如竞品网站的提示功能虽然很好，但是他们的目标用户和我们的目標用户不完全一致这个功能对我们的用户意义没有那么大，但还是有些作用因此优先级不高。

最后要考虑需求的实现成本（人力、時间、资源等因素)以及收益(商业价值/用户价值等），综合考虑是否将其 纳入本阶段的需求库中还是放到下一期执行。

重点描述每个需求嘚逻辑内容，开始写详细的需求文档

经理和设计师配合完成。也就是说设计师并不是在需求文档产生后才开始工作，而是在前期就配合产品经理进行各项工作的这样才能产出令双方都理解并满意的需求文档。也只有这样设计师在后续的设计工作中才会更有主导权，也更容易得到项目组其他成员的认可

反之可能形成“以需求文档为设计依据”的局面。

1） 需求文档应该包含什么内容

内容根据项目凊况而定。

在常规情况下需求文档应该包含前面提到的产品定位、需求内容、需求优先级等，以及关于需求的详细描述说明

背景描述：为什么要做这个产品/模块、市场行情、业务目标、产品定位等。

用户类型和特征：简单的描述目标用户情况或现有使用人群的情况

项目時间安排：何时启动何时完成等。

信息结构：这里可筒单理解为內容或页面的层级如图 5-10 所示。可以由设计师和产品经理配合完成也鈳由产品经理独立完成，设计师做参考用

整体业务流程说明: 对于涉及操作较多的产品/功能需要业务流程图，帮助设计师和项目成员理解具体的业务逻辑比如一个广告投放系统，当广告排期被占用时用户是否可接受相关位置；如不接受，系统如何处理账户金额等等，洳图 5-11 所示

需求详细说明：每一条需求的详细说明。一个文档里会有若干条这样的说明如图 5-12 所示。

【业务：各行业中需要处理的事务偏向指销售事务。个人或机构的本职工作业务经理，可能指的是销售经理业务流程，应该是指销售流程或者与销售相关的流程。】

2） 需求文档的后续迭代

另外有一些较细节的东西在需求阶段不容易考虑清楚，要到具体的设计阶段オ会有更深入的思考

最后一点要注意的是，设计师不要严格按照需求文档来做设计

因此，专业的交互设计师产出的设计结果一般都会和需求文档提供的内容不太一样如信息结构、任务流程、内容、界面形式等。只要经过有效的沟通产品经理一般都是可以接受的。这相当于是在交互设计阶段对文档进行叻迭代产品经理可以在设计完成后再修正需求文档，也可以让设计师把相应的修改部分注释在原型稿上这样开发人员只看原型稿就可鉯了。

5.2 倾听用户的声音

共情persona-虚拟的目标用户形象，了解用户-用户调研

不是所有的产品经理都有做用户调研的意识，也不是所有公司都囿专门的用户研究员设计师可以自己做一些简单的调研，并向产品经理强调这样做的好处唤醒产品经理的意识，避免拍脑门做决定

5.2.2 別被用户牽着走

用户说的不一定是心中想的。需要对用户说的内容进行挖掘

用户的意见不一定专业。

5.2.3 如何对待用户的意见

考虑目标用户嘚五个因素：目标用户使用场景，用户目标产品定位，项目资源

1. 根据目标用户考虑：提出要求的用户是你的目标用户吗

比如某杀毒類产品面向的主要目标人群是二、三线城市的打工族，他们普遍受文化教育程度较低不懂得具体的电脑操作知识。这个时候如果有用戶提出需要设置快捷键等高级操作的要求，就可以不予理会因为这种高级用户不是我们的目标用户。但如果提这类需求的用户过多就徝得思考了。是不是功能或界面设计得过于复杂没有吸引原定的目标用户，反而吸引了很多高级用户还是产品的目标用户定位有问题等？这些都是需要我们去思考的

1. 根据使用场景考虑：用户提出的这个问题一般发生在什么场景？合乎实际的使用情况吗

使用场景一方媔和使用平台有关，例如台式机的使用场景一般较固定，而手机的使用场景则较为多样化室内/ 室外,走路/跑步,工作/体闲等都有可能。使鼡场景另方面和目标用户有关比如“运动型”的用户，他听音乐的场景可能更多地是在运动时；而“学习型”的用户他的使用场景可能更多地是在学习工作时。

人在不同的场景下会有不同的行为比如，在室内工作时我们倾向于使用台式机工作而在地铁或公车上习惯拿出手机来看新闻，在家里我们可能又会拿出平板电脑来看美剧

而用户在提各种问题反馈时可未必会考虑到不同的使用场景，很可能只昰根据他当时的使用场景来提出的

比如某用户反馈，希望在客户端上增加复杂的分析图表因为他在电脑上经常使用这个功能。但这种複杂的功能并不适用于客户端：一是因为手机屏幕小放不下这么大的分析图表，阅读起来非常不方便；二是因为手机的使用场景决定了咜更偏向于体闲娱乐或是处理比较简单的工作用户一般不会在手机上使用非常复杂的功能。

1. 根据用户目标（真实需求）考虑：用户表达絀自己的真实需求了吗

比如用户反馈说客户端上的虚拟键盘太小了，希望能提供放大键盘的设置用户为什么会提这个要求呢？因为他總是点不准经常误操作。所以我们其实要解决的是用户误点击的问题而不是解决键盘大小的问题（毕竟手机的面积有限）。我们可以栲虑多种方案比如，点击瞬间出现一个放大效果、或者增加键盘的有效触摸面积等

1. 根据产品定位考虑：用户提出的要求符合产品的定位吗？

比如某新闻应用给自己的产品特色定位是“快速”那么当有用户反馈新闻更新速度过慢时，就非常值得关注反之，如果这个新聞应用给自己的特征定位是“精致”并且里面的新闻内容都是由编辑精心挑选出来的，并以此作为该产品的一大特色这个时候，如果囿用户反馈新闻更新速度慢就可以忽略

1. 根据项目资源考虑：用户提出的这个要求需要多少开发资源？价值有多大需要立即开发吗？

产品经理和设计师不仅要考虑用户体验还要在项目中平衡商业价值与用户需求。所以是否要立刻采纳用户的合理意见，还要看项目的实際运作情况每一个阶段，产品都需要处理很多需求开发很多的功能，这就需要给这些功能排列优先级如果某功能实现起来成本过高，而收益甚小就有可能延后执行

【增加某项功能，也许也能这么考虑】

以上是理想情况，现实中可能什么都没有设计师处于被动地位，需要主动和产品经理沟通交流主动和产品经理沟通和交流，让他意识到你对产品的热爱、对工作的主动这样也就更愿意和你交流。

在这里告诉大家一个诀窍：搬到产品经理旁边去吧距离既产生美，也产生隔阂和麻烦如果能及时关注产品经理的动态，及时和他探討你会发现你的存在感提升很多。

总之通过扎实的基本功和良好的心态、积极的行为我们完全有可能在逆境中调整自我，坚持不懈地通往成长之路

5.3.1 如何面对强势的产品经理

1） 商业价值VS用户需求

很多设计师都会遇到这种情况：领导要求要这么做，产品经理只负责传话設计师没有一点辩驳的机会，只能照做这个时候其实最重要的还是摆正好心态，换位思考考虑对方要求这么做的原因，而不是一味抱怨

2） 不靠谱的产品经理什么样

需求变动多：需求不靠谱，没有想清楚总是改来改去 过于主观：在设计方面提过多主观意见，干扰设计師的工作 过于关注细节：产品经理应该关注细节，但不要过于纠结细节 不能合理安排时间：工作拖沓、效率低给别人安排时间时却非瑺紧凑。 不负责任：不够热爱产品对工作敷衍了事。 过于强调自己的主导地位：产品经理是一个职位名称而不是一个行政头衔他与团隊成员只是组织和合作的关系。产品经理应该能够意识到这种平等协作的关系而不是把自己当作甲方，对其他人呼来喝去这样是难以組织一个优秀的团队的。

3） 让产品经理头疼的设计师什么样

不懂得平衡：设计师需要学会兼顾商业利益和用户体验

定位局限：把自己局限茬专业范围之内没有考虑业务线的需要，缺乏产品意识

例如用户研究员一般会根据分析结果给产品提供一些建议，但因为用研人员可能缺乏产品、运营、推广方面的相关知识对产品又不够了解，提出的建议根本不可用或者让产品经理看起来很幼稚。

交互设计师可能會过于重视用户的操作习惯、用户体验等完全忽略了产品的业务要求和商业利益

视觉设计师可能过于重视视觉表现和流行趋势，没有考慮到如何通过视觉元素来对用户进行有效的视觉、操作引导以及如何突出产品想表现出的关键元素。

抱怨多、建设性意见少：对业务质疑、抱怨多却很少去想怎么解決问题。

视野狭窄：只懂得专业领域的知识难以和其他角色沟通和合作。

应该懂一些用研方面的基本知識能独立做一些简单的用研工作，也能够评判一些视觉设计的问题；视觉（界面）设计师应该懂一些交互方面的知识这样才能确保理解产品、交互原型传达的理念。

当然这些还不够。不管是用研、交互还是视觉设计师不仅要懂用户，还要学会站在产品的角度想问题平时也要注意学习产品方面的知识。这样才能和产品经理站在同等的高度沟通

专业技能不佳：不够懂用户，经验欠缺设计水平欠佳等

5.3.2 拒绝不靠谱的需求文档

现实：快节奏，人们不太支持写需求文档

1）有没有必要写需求文档

看情况。在大团队大项目中需要写需求文档

应该养成写需求文档的好习惯。

2） 无需求文档或文档不标准怎么办

提醒大团队需要统一规范的文档。

如果产品经理提供的需求文档不夠标准设计师应该提醒产品经理修改需求文档。

一来如果需求文档不合格，说明产品经理根本没有想清楚需求设计师难以进行后续嘚设计任务；

二来，没有需求文档这个依据产品经理可以在设计环节随意更改想法，导致后续环节效率极低所以设计师必须做到心中囿数，清楚需求文档中应该包含什么内容内容不全时要求产品经理补全即可。如果产品经理确实没有时间补充也要自己想办法把这些禸容搞明白，并和产品经理确认清楚否则后面的设计工作也难以顺利地进行。

而如果是一些比较小的功能点设计师可以灵活处理。可鉯总结自己在项目中需要知道和了解的问题列出一份清单，请产品经理回答相信每个产品经理都不会拒绝为大家回答问题吧。如果觉嘚对方回答得不清楚可以继续细化问题，直至回答清楚为止

3） 辨别需求文档的內容是否合理

如果设计师并没有和产品经理一同参与前期的需求分析过程，而是直接拿到了需求文档（这也是最常见的情况）那么就需要注意了需求文档中关于业务逻辑、产品要求资源限制等是设计师必须要正确理解的内容。而与设计有关的信息结构、任务流程、功能说明、界面描述等仅需作为参考即可。

目前从事产品經理职位的人员良莠不齐，并不是所有人都具备合格的素质再者，产品经理也是普通人也可能会犯普通用户犯的错误。比如有的产品经理设计的需求并不是用户的真实需求；没有正确理解用户的意图；把自己当做了目标用户，提出的需求过于主观化；需求明显不合乎瑺理等等。

所以设计师需要重新考虑正确的需求（在 5.3.3 小节会有更具体的说明）在设计过程中与产品经理保持密切沟通双方不断地达成┅致，而不是仅把需求文档作为设计指南来对待

如果设计师收到的不是需求文档，而是产品经理绘制的系列精致的线框图也不要感到無奈。我们可以通过这些线框图去理解产品的本质需求、业务逻辑再和产品经理沟通确认他的想法，然后彻底忘掉这些线框图再重新詓设计，而不是在原有基础上做简单修改

如果产品经理直接要求设计师照抄竟品，设计师也可采用同样的方式从竞品界面去理解业务、需求，再重新设计（具体请看 5.3.4 小节内容）

5.3.3 从“功能需求”到“设计需求”

1） 残酷的现实要求设计师学会走“弯路”

理想情况，设计师與产品经理前期沟通获得对用户和产品需求的一致理解

现实：但在多数情况下，设计师很可能没有机会和产品经理进行前期的工作一來，双方可能都没有这样的意识、能力与信任感（因此双方最好有一定合作基础，能够默契配合）；二来时间紧急是永远的借口；三來，来自上层的压力决定了无论是产品经理还是设计师，可能都没有太大的决策权甚至只是几句口头的交代。

为了避免“错误的开始”导致“错误的过程”和“错误的结束”设计师需要适当地走些“弯路”，以避免因为前期流程的不完善而导致的后续错误决策

2） 如哬寻找设计目标

因此，我们现在先不要急着去做设计而是要思考以下问题。既然是做优化就说明已经有一定的用户基础了。那是不是鈳以先查一下目前用户的评论和反馈是不是可以观察身边的人是如何使用的？可以做一些简单的访谈和测试看看用户使用过程中有什麼痛点。另外还可以对比一下竞品，看看竞品哪里体验比我们好哪里还有改进余地…

通过对它们进行筒单分析后可以发现：产品已经提供了 12 款滤镜，但用户还是找不到喜欢的说明滤镜的品质可能欠佳；用户希望增加漶镜种类，可能是由于滤镜的差异化不大品质一般，难以满足用户的需要；很难找到上次使用的漶镜可能是因为潓镜的差异化不大；希望增加自定义调节、同一款滤镜的不同强度、滤镜疊加，这些都是用户对滤镜个性化的需求如图 5-17 所示。

我们同样也针对竞品做了简单分析并查看了用户对竞品的评价，询问了身边用户對竞品的意见....从简单的竞品分析中可以得出结论：我们需要更个性化、品质感更好的滤镜并且应该突出分享功能。

综上所述我们最终嘚到了 4 个设计目标：提升滤镜品质、增加滤镜间的差异化、增加个性化滤镜；突出分享功能。

3） 根据设计目标重新定义需求

和产品经理讨論整理思路，对设计需求进行优先级排序

【是一个更加细化到如何设计的过程。】

确定设计需求之后设计师就可以开始后续的设计笁作了，而这也是设计师参与最多的阶段具体内容请看第 6 章“设计规划一从需求到设计草图”。

5.3.4 如何“抄袭”竞品

1） 在“抄袭”中寻求創新

刚开始工作时每次听到“抄”这个字就很难受，觉得这是对设计师的不尊重、是对设计的亵渎但是慢慢地，我明白了毕竟公司莋产品要考虑商业利益，而不是设计创作我也会不停开导自己：大家所说的“抄”并不一定是让设计师完全复制对方的界面，而是希望朂后的结果不比竞品差最后我也发现，只要是真去用心设计、做得比竞品更好即使最后的结果和竞品不一样，也很容易被大家接受

當然过程中也会遇到阻碍和挫折，也会遭到某些产品经理的不理解觉得你怎么这么固执，做事情怎么这么磨蹭明明可以简单抄抄了事非要自己瞎折腾。但是最后事实证明，这些付出和坚持都是有意义的在这个过程中，我的能力得到了很大的提升而那些领导一说“莏”就应付了事的人，虽然当时可以顺利应付但多年来自身能力毫无提升，逐渐被淘汏

2） 直接“抄袭”竞品的风险

影响企业形象 出现嚴重错误....

3） 如何对待“抄袭”竟品的要求

【都需要通过明确设计目标，将这些内容转化为设计需求明确设计目标的方法是用户调研，竞品分析用户反馈，产品数据】

具体来说就是这样：首先我们尝试所有的操作，截取全套的竞品截图；接下来根据这些截图绘制流程圖，然后再根据流程图倒推需求接下来再用 5.3.3 小节中的方法，提炼设计目标确定设计需求，然后再开始正常的设计过程

就好像有人拿來一个录音机，要求你设计一个跟它一样的你需要先研究录音机的构造，把它拆开来看看里面的零部件是如何组织的深入了解它的工莋原理，然后才有可能做出跟它一样的录音机

如果设计师想设计出更好用的录音机，不仅需要知道它的工作原理还需要知道用户对它嘚看法。我们可以通过前面提到的用户调研、竟品分析、用户反馈、产品数据等方式了解我们的用户和竟品用户的区别，以及竞品用户茬使用中有什么痛点和期望如何更好地满足用户需求…和 5.3.3 节的例子类似，最后得出设计目标

即使时间非常有限，不允许做太多的调研、分析工作设计师也可以把自己想象成一个从来没用过该产品的用户认真体验产品，记录使用中遇到的困惑和问题再通过自己的设计經验来解决它们。

• • 06 设计规划一从需求到设计草图
    • 6.1 从需求到界面隔着一扇门
    • 6.1.1 如何搞定信息分类
• 6.1.2 好的导航是成功的一半
• 用户所需信息与商业嶊广信息的平衡
• 为重要功能和常用功能设置快捷入口

• 6.1.3 主要任务与次要任务
• 6.1.4 如何突出主要任务

• 6.1.5 如何引?导用户完成任务

• 6.2 设计友好而易用的界媔
• 6.2.1 如何简化复杂的操作

• 6.2.2 信息量太大，页面怎么摆

• 帮助用户找到想要的东西

• 6.3 捕获用户的芳心
• 6.3.1 来自真实世界的灵感

• 6.3.2 贴心的设计惹人爱

• 6.3.3 如何调动鼡户的情感

• 6.4 快速表达我的想法一一纸面原型

06 设计规划一从需求到设计草图

交互设计师要在这一环节中起到主导作用

我们根据需求来确定應该提供哪些必要的信息给用户然后对信息分门别类、有效地组织起来，并以导航的形式展现在界面上让用户可以快速找到自己想要的信息。比如我们浏览一个电子商务网站的首页时需要通过导航或类目引导，来找到自己需要的内容

同时，我们会根据需求来设计相应嘚任务排列任务优先级，并在界面上通过一系列引导帮助用户快速完成任务。对于复杂的任务尽量简化其操作；对于信息量过大的頁面，想办法使其重点突出、一目了然……

需求——信息/任务——草图——界面

6.1 从需求到界面隔着一扇门

6.1.1 如何搞定信息分类

1. 我们可以使鼡人们在生活中熟悉的分类逻辑对內容进行组织。
2. 我们还可以将物品按照生活中常见的用途、品类、形状、颜色、材料、品牌等进行分类通过数字、字母、时间等进行标识。

优点是能设计出符合用户心智模型的信息架构

简单地说，卡片分类就是邀请用户“把类似的东西放在一起”在产品设计的初级阶段，利用卡片分类可以知道用户对网站内容的期望为信息架构的搭建提供依据。对现有产品进行改版時卡片分类可以检验现有的信息结构是否合理，对新版本的改进提供有效帮助

卡片分类的方法简单易行。首先准备好剪裁过的卡片或便签纸将需要分类的信息写在卡片上，然后组织招募到的志愿者对卡片进行分类志愿者最好是与网站设计不相关的人员。在用户进行汾类时设计师和用户研究员可以观察用户的分类过程，以及他们对标签含义的理解最后，需要对卡片分类的结果进行分析数据量少嘚情况下，可以直接在白板上分析分类的情况或拍照记录数据。如果数据量庞大也可以使用专门的数据分析软件，如

卡片分类一般可汾为 2 类：开放式和封闭式

开放式：开放式的卡片分类会给用户足够的自由度来进行信息归类。设计师将完全打乱的卡片分发给用户用戶可以完全自由地决定把卡片分为几组、每组有多少张卡片。最后再由用户为分好组的卡片命名开放的方式给了用户极大的发挥空间。設计师可能会得到更加丰富的分类结果如图 6-4 所示。但对于内容复杂、信息量庞大的网站开放式的分类方法可能会使结果变得不可控。

葑闭式：设计师首先会将导航的架构设计好确定出导航的个数和名称，再将属于这些类目的卡片分发给用户让用户根据自己的期望，紦卡片归类在不同的导航分类下如果有些卡片用户不知道该将它分到哪个类目下，可以将它拿出来所有卡片不ー定要全部分完。封闭式的分类更利于掌控可以用于对信息设计的结果进行验证的阶段，如图 6-5 图 6-6 所示

【封闭式：类别已经订出来了，用户在有限的空间内进荇分类】

6.1.2 好的导航是成功的一半

存在的问题：打来目录，看到的分类和自己想象的不一样

成功的导航设计可以自我解释，让用户在导航系统中清楚地认识到信息结构和自己所处的位置为用户解释“我从哪里来？”、“我现在在哪里”、“我能去哪里？”的问题

【洎我解释是指用户对自己的自我解释：明白自己的位置，以及对这个产品的信息结构的了解】

面包屑“Home> Fashion> Women's”记录了用户的访问路径，用户鈳以通过它回到之前访问过的任一层级的页面

如果导航深度过深，用户就需要耗费多次点击才能找到所需信息。同时让用户迷失

比起深层次的导航结构，广度导航更利于用户发现信息但如果广度超出用户可以接受的范围，人们必须一次阅读很多选项才能在其中进行選择也会大大增加用户的选择负担。一般来讲超过 7 个选项时，用户就很难记住了一次性展示过多选项会令用户患上“选择恐惧症”，很难从中挑出哪一项オ是自己想要的

清晰的视觉焦点可以让用户快速筛选第 1 层级再浏览相应的第 2 层级

3. 用户所需信息与商业推广信息的岼衡

亚马逊在这方面做得不错。当用户进入亚马逊浏览商品类目、购买商品时并不会一开始就被商业推广所干扰，而是在用户选择的內嫆附近默默地出现相关的推荐广告如图 6-12 所示。这样的推广信息更接近用户目标也更容易被用户所接受。在不同产品页面为用户推荐苻合其目标的信息，可以起到事半功倍的作用

在韩国电子商务网站乐天的商品类目导航中，信息被划分为 3 部分：最上方最突出的信息为商品类目满足了用户查找商品的需求；在导航中部，乐天为用户推荐了公司旗下的其他购物网站并在背景色上加以区分，使它在视觉仩弱于用户所需信息；在导航最底部有一个活动推广的链接，虽然它所处的位置最不明显但在颜色上进行了强调，对推广活动感兴趣嘚用户可以在这里找到它。对不同类型的信息进行分类组织在不影响用户找到所需信息的情况下进行商业推广，可以减少对用户的干擾如图

【从视觉和交互上进行平衡。交互上是指亚马逊那种默默的出现相关推广形式】

4. 为重要功能和常用功能设置快捷入口

【类似Apple watch出現的便捷界面的设计。】

以淘宝为例从逻辑上来说，“购物车”属于“我的淘宝”中的内容“我的淘宝”页面左侧导航的结构，也体現出了这一点但无论对于用户的购买目标，还是网站的销售目标购物车都起到了至关重要的作用。用户需要能方便地找到它网站也唏望用户随时能看到它。所以在首页上方的导航栏上放置了购物车的快速入口。从这个逻辑上看“购物车”与“我的淘宝”似乎成了岼级关系。但用户在使用时并不会考虑到产品逻辑，只希望在需要时能立刻找到自己想要的功能如果仅仅为了完美的逻辑，“购物车”就无法直接显示在首页中了这是对用户目标和商业目标的双重挑战，

但设置快捷入口也是一个需要权衡的过程必要的“快捷通道”鈳以提高使用效率，但如果快捷入口过多产品会变得混乱复杂。同一个功能入口过多不仅不会提升使用效率，反而会使用户感到迷茫

6.1.3 主要任务与次要任务

如果说产品定位或设计目标相当于指南针，需求中的功能点就是一个一个零散的地理坐标而任务流程就是途经这些地理坐标的路线图。由于有主线、有分支这张路线图看起来更像一个迷宫。有了迷宫“地图”设计师就可以轻松地带领用户完成任務，达成用户目标

具体怎么设计任务流程呢？和设计迷官的方法一样要先设计那条主线，再从容设计支线脉络清晰了，才能正确构建起整个产品的功能和内容

1. 设计主线（主行为流）就是把杂乱无章的功能点根据用户的期望及目标以正确的次序组织起来的过程，告诉鼡户需要先做什么再做什么。
2. 是否设计支线（次要行为流）要看次要行为流是否能对用户完成主行为流产生必要的帮助（迷官的支线樾少整体复杂度越低，越有助于用户迅速完成任务）

任务流程确定后就可以通过一系列草图去把用户完成任务的过程表现出来，这样我們就得到了任务流、页面流设计然后再去细化具体的界面。

6.1.4 如何突出主要任务

以在线购买电影票为例进行讲解此案例中只讨论购票过程，不考虑支付流程

从图 6-21 中分解出的用户行为可以看出，其实每一个子任务都可以对应到一个产品功能、一个界面模块接下来我们就偠开始排列和组合这些功能、模块。

确定优先级不是凭感觉的事我们要有可以量化的标准来衡量哪些功能优先级高，哪些功能优先级低大多数用户需要用到的功能和使用频率很高的功能，需要重点突出对用户目标和商业目标的影响大小，可以表示为此项功能的重要程喥所以，我们可以通过使用人数、使用频率和重要程度这 3 个维度来排布优先级如图 6-22 所示。

【但是这种综合分数是如何判断出来的呢】

3. 组织合并相关任务

就像设计一个洗衣机面板。首先要将所有按钮放在一个统一的区域内再在这个区域内将操作和功能相似的按钮摆放茬一起，然后画个圈把它们圈为组同样地，我们可以将次序相同、操作类似、界面类似的任务组合起来合并为同一组模块展现在用户媔前。

由于最终要呈现给用户的是界面我们可以直接将分解出的子任务转化为界面。在这里只需粗略地想好每个页面的大致设计，只偠能表示出这是一个列表页、这是一个选择器就可以了

组织合并之后，15 项用户任务转化为了 8 个界面模块被规划到 3 个页面中。下面可以根据这些模块的优先级将它们排布到页面中去。在页面中对于不同级别的任务，要有不同的展现形式一级任务一级展现，二级任务②级展现我们可以利用人们从左上到右下的阅读规律及自上而下的直线式逻辑，将重要的任务放置在页面的左上部使用较大的视觉区域进行展示。使用较强烈的对比度突出重要信息和操作如图

运用此方法将所有页面进行布局之后，我们可以得到大致的页面原型如图 6-25 所示。

6.1.5 如何引?导用户完成任务

所谓相似性引导就是如果大小、色彩、形态、视觉元素等因素相似，那么这些相似的因素可以牵引着用戶的视觉引导用户操作，如图 6-28 所示

指向性箭头，对齐等等形成视觉顺序，以及视觉逻辑

在设计选座页面时，需要引导用户在页面咗侧选择座位然后到页面右侧区域去确认购票。这时在用户选座后，所选座位会变成一张电影票的形状按照图 6-32 中虚线的运动轨迹，“飞到”右侧订单确认区

向导控件（Wizard）是一种常用的交互方式，用来引导用户完成多步操作Wiz?rd 在英文中是巫师的意思。向导控件就像鉮奇的巫师可以在陌生的页面环境下，为用户指引路线同时，还可以告诉用户要完成任务一共需要多少步骤，你现在所处的步骤是哪个还有多少步可以完成任务等。让用户对整个操作有个预期帮助迷失的人们找到前进。

6.2 设计友好而易用的界面

6.2.1 如何简化复杂的操作

1. 減少冗余步骤和干扰项

有这么一个例子一位哥伦比亚大学教授在一个超级市场设立了一个免费品尝的展位。在第一个星期六提供了 24 种ロ味的果酱供人们品尝，而另一个周六则仅提供 6 种口味出人意料的是，在有 24 种口味的展示上有 60%的顾客停在了展位并参与了免费品尝活動，在他们中有 3%的人购买了商品；在只有 6 种口味的展示中有 40%的顾客参与了免费品尝活动，但在这些人中却有 30%的人购买了产品后者的转換率是前者的 10 倍！

2. 将复杂操作转移给系统

【转移问题，就好像奔驰女车主事件的解决就是使用了转移的方法：那笔没有收取名目的钱，被凭空捏造了一个公司承担了从而让多收费的公司逃过一劫。】

每一个过程都有其固有的复杂性无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂性都无法依照我们的意愿消失而只能设法调整、平衡。复杂性存在个临界点超过了这个点，过程就无法再简化了你只能将固有的复杂性从一个地方转移到另一个地方。比如想要做菜就一定要洗菜、切菜这个复杂过程是无法跳过的。但峩们也可以购买洗好、切好的蔬菜将复杂转移给商家。

在交互设计中如果已经到了这个临界点怎么办？我们可以将复杂操作从用户转迻给系统让机器代替用户进行操作

在 Google Maps 中，如果用户想查询路线就一定要输入起点和终点，这是无法省略的过程但是在查询路线时，Google Maps 會利用定位功能自动将起点定位为“我的位置”减少用户的操作，如图 6-36 所示

【将复杂任务转移给系统，其实是在对系统的智能化提出偠求】

我在使用 Chrome 浏览器的时侯发现，在复制操作的下方有一个“用 Google 搜索'XXx'”的选项，只需点击这一选项浏览器就会自动弹出一个标签頁，把我要的结果搜索出来“选中一右键复制一新建窗口打开网站一粘贴一搜索”这一复杂的过程就变成了“选中右键点击 Google 搜索”，只需 2 步轻松完成任务，如图 6-38 所示

【Mac词典的设计使用了这个方法，应该算是某种捷径有些操作不用按部就班做，而是抄小路到达目的地在文本中右键，就可以用词典查询这个单词还可以进入浏览器查询单词含义。】

提供合适的首选项、适时帮助、及时反馈、提供合理嘚默认值等等，这些细节的优化可以帮助用户降低出错几率，使他们能够更快、更顺畅地完成任务如图 6-40 所示。

Pad 在更新系统时会提湔检测用户的电量。如果电量不足以支撑完成更新会提示用户将 iPod 插上电源再来更新。试想一下如果没有这个提醒会怎样呢？用户花费叻大量的时间下载更新在安装到一半时却因为没电而关机了用户需要连接电源再次重新更新。

【这个思想和简化步骤减少冗余不同之處在于，它减少了操作和完成任务过程中可能存在的问题】

6.2.2 信息量太大，页面怎么摆

1. 让页面层次不言而喻

在设计以信息呈现为主的界面嘚时侯我们可以将要呈现的大段信息分解成易于理解的信息模块，根据“用户想看到什么”和“我们想让用户看到什么”为内容模块排列优先级。再根据用户的浏览习惯将不同优先级的信息放置到相应的页面位置。这和分析用户任务（详情参见 6.1.4 小节）的过程类似都遵循“分解一排列一组织”的原则。

内容或重要程度不同的在视觉上体现出差异：对于同类信息可以使用“接近原则”对于内容或重要程度不同的信息就要使用“差异原则”。

逻辑上有包含关系的在视觉上进行嵌套：逻辑相关的部分在视觉呈现上也应该是相关的。要让鼡户一眼就能看出内容之间的关系

2. 让重点信息“跳出来”

我们可以通过视觉设计的方法，如字体加大加粗、色彩对比、添加背景色、留皛等强调界面的重点元素。而其他非重点的元素应该尽量藏起来或是显得暗淡些，从而使界面的重点“跳出来”

3. 将次要信息“藏起來”

通过确定产品定位、需求采集与分析、撰写需求文档信息组织、任务分解、绘制草图等一系列理性的步骤，我们终于可以得到界面的維形了但是在细化一个个具体的界面时，我们又常常纠结于各种细节中而无法自拔比如界面内容如何排布？图片应该大ー些好还是小┅些好按钮放左边还是右边？对于功能类似的表单可以在视觉效果上做成完全一样的吗？

为什么会出现这种状况这是因为在做设计嘚过程中设计师需要用到不同的思维方式。在需求分析、设计任务流程、信息架构、导航、操作逻辑等阶段设计师需要使用偏理性、逻輯的思维方式。如果你的设计思路是清晰的你给用户的指引和操作路径才可能是清晰的，这样用户在使用你设计的产品时才不会感到迷惑才能快速达到自己的目的。而在绘制界面细节时设计师又需要使用偏感性的思维方式。因为用户使用产品时是相对感性的他在使鼡你的产品时不会去刻意思考，而是通过感觉来判断你的产品是否适合他所以，设计师需要通过界面来给用户营造一个良好的印象投其所好。这样用户才有可能对你的产品感兴趣并尝试去操作。

1. 以人为本的界面设计

如何让用户被你的界面所吸引进而愿意通过操作来唍成任务呢？首先我们要了解用户，知道用户有什么样的需求他想要的是什么。其次我们要保证我们的界面逻辑不是错误的，可以讓用户顺利完成任务最后，我们要力求让设计形式符合用户的心理模型让用户感受到“人性化”的设计。

以电子商务网站为例用户嘚主要需求是购买到心仪的产品，但前提是他需要先找到他想要的产品在这个过程中，他的目标可能是明确的（知道自己要买什么）吔有可能是模糊的（想买钱包，但没想好买什么款式的）还有可能没有目标（只是随便逛逛，看到喜欢的就买）

目标明确的用户在使鼡产品时会按照流程一步步完成任务，而对于 目标不明确的用户则需要通过更多的展示内容来吸引他 。用户被吸引了オ有可能尝试操作进而完成任务。

举个例子比如淘宝的收藏夹和购物车页面，它们的内容其实是类似的都是要包含图片、商品名称、价格等元素。如果按照正常逻辑来处理这 2 个页面的设计样式应该是很类似的，有的网站甚至把这 2 个页面做成了相同的样式但是为什么淘宝的收藏夹和購物车却有很大差别呢？如图 6-50 所示

这正是因为考虑到了用户的使用情境和心理感受如果用户对商品感兴趣，但又不急于购买就倾向于紦商品放到收藏夹中；如果用户的购买意愿较强，就会倾向于放到购物车中所以，收藏夹需要适度地突出图片、评论、人气等内容吸引用户去购买；而购物车则应尽量简洁明了，不过多干扰用户方便用户迅速下单。

2. 帮助用户找到想要的东西

图 6-51 所示为电子商务网站 eBoy 的首頁明确自己想要买什么的用户，可以通过搜索框快速找到特定商品对于自己要买的商品有大概目标的用户，可以使用页面左上方的商品分类在特定的类目中寻找商品。完全没有目标的用户则可以浏览最近热销或是有折扣的商品，在“闲逛”中激发购买需求

【不同需求和状态的用户】

对于无目标或目标不明确的用户来说，我们不能再用理性、逻辑的思维方式来对待他们而是要充分地换位思考，用感性的思维方式来给他们营造贴心、友好、有吸引力的界面

所示为新浪微博登录页面。对于有微博账号想要登录微博浏览信息的用户，这个页面的逻辑没有任何问题页面没有太多干扰，用户可以快速找到登录框完成操作。对于没有账号想要注册的用户页面也提供叻明显的“立即注册”按钮。但对于那些听说过微博不知道它是做什么的，没有账号想要了解又懒得注册的“闲逛型”用户来说，这個页面的内容完全无法吸引他们这部分用户很可能因为无法了解更多而流失掉。但是如果有吸引人的推荐信息他们可能就会留下来，並注册成为活跃用户

所示为知乎登录页面，在页面最显眼的地方提供了登录框页面下方推荐了高质量用户和热门话题的一些问答，让鼡户在没有注册时也可以对网站內容略知一二。从产品逻辑上来说登录页面的任务就是让用户去登录，一个简单的登录框就可以完成任务如果严格遵守产品逻辑，内容推荐也许不会出现在这个页面上无目标用户也就很难被吸引了。

4. 符合用户心理模型

【传达的信息冷热，通过视觉强调出来了人的心理模型是：热的事物，对应的视觉是火红色的五感上的互相对应。】

6.3 捕获用户的芳心

6.3.1 来自真实世界嘚灵感

.... 那么拟物化是不是真地已经过时了呢不是的。注重效率的应用可以设计得尽可能简洁帮助用户快速完成任务但是，对于那些娱樂型应用来说人们对于情感的追求永远不会消失。拟物化并不意味着一定要 100%还原物理世界的真实质感抽象出物体中最有特征的部分，將繁复的视觉元素进行简化处理一样可以设计出既简约又可以调动起用户情感的产品。

直接拟物化的设计也有一定的局限性并不是每種界面中的元素都可以在现实中找到对应物品的。视觉表现难以拟物时也可以通过模拟现实中的操作，使用隐喻的方式让用户对操作感箌熟悉

当点击文件夹时，展开的动画就像是拉开一个抽屉用户一看就会明白。关闭和打开文件夹是对称的操作只需再次点击文件夹即可关闭。这种操作之间的逻辑关系形成了种空间感。这种逻辑关系越符合现实就越容易让用户理解

6.3.2 贴心的设计惹人爱

如今一些小区嘚电梯上出现了“宠物”按钮，按钮上有一个狗狗的图案宠物的主人在乘坐电梯时只要按下此按钮，电梯外面的显示面板上就会有提示怕动物的人看到这样贴心的提示可以提前做好心理准备，防止与宠物发生冲突如图 6-63 所示。这样人性化的设计解决

可以如果遇到有倒计時的信号灯情况就会好很多。在飞机晚点时我们经常会去询问还有多久可以起飞，就算是被告知还有 2 个小时我们也会觉得心里有所預期，

调查表明如果界面没有任何提示，80%的用户等待超过 2 秒就会直接关闭窗口如果界面有提示或是加载状态，用户的离开率就会极大哋降低加载状态提示可以增加用户对界面的可控感，形成操作预期使用户安心，

在用户刚刚打开网站准备登录时在用户的输入框内會提示账号类型是电子邮箱。...当输入邮箱后Quora 会及时校验这个邮箱是否曾经注册过。如果邮箱有误登录框马上会告诉用户此邮箱还没有紸册，并提供一个马上注册的链接入口如果是注册过的邮箱，Quora 会在输入框前直接显示出用户头像以一种可视化的方式，来帮助用户确認信息并在密码输入框的下方提供找回密码的链接，

【界面元素提醒：问题图片，声音等等】

除了运用文字直接提醒用户之外，还鈳以通过界面元素状态的改变给予用户提醒例如，很多新闻阅读类客户端会改变已读文章的颜色降低其饱和度，使用户不要过多关注於已经阅读过的内容在 iOS7 中，最新更新过的应用名称前方会出现一个小蓝点提示用户哪些应用是刚更新过的。在电子邮件客户端 Seed 中未讀邮件会用绿色的竖条和圆点明显标出，提醒用户这些消息是还没有屺读过的如图 6-71 所示。这些小小的状态改变可以降低用户的认知负擔，提醒用户哪些是可以快速略过的內容哪些是需要关注的重要信息。

6.3.3 如何调动用户的情感

互动以及动效。【被手挥散的水草兔子】

在淘宝触屏版中，用户将商品添加到购物车时点击操作之后会有一个小车子从屏幕右边滑出，将商品运送到界面左下角的“淘+”随即，“淘”字变为了购物车的图案还会在屏幕上抖动几下。积极有趣的反馈方式令用户觉得操作得到了充分的响应希望与界面互动的凊感得到了满足

微信中有很多让人津津乐道的彩蛋。在聊天时发送特定关键词会触发一些绚丽的背景特效。这些彩蛋并不是固定的会茬特殊的日子根据特定事件为用户送去新的彩蛋，在不打扰用户的情况下给人们带来一些小惊喜

为产品设计一个故事情节，通过视觉、動画和音效的烘托把用户带入一个情境中。这种讲故事的方式可以很有趣味性也可以很感人，能够有效吸引用户的注意力调动起用戶的情感。

情境烘托很适合用在活动页面的设计中活动页面一般都会有较大的空间来设置一个完整的故事。如果选择人们比较有共性的經历就很容易勾起用户的回忆。

6.4 快速表达我的想法一一纸面原型

...打开电脑开始绘制产品原型吗？不！在设计规划阶段就开始画原型会使设计师过早地陷入设计细节不自觉地就会考虑到页面的尺寸是否符合栅格、每一行展示 4 个还是 5 个商品、按钮是否需要 3 个状态…这些细節会禁锢设计师的想法。就算是相同的任务流程、信息架构也不只会产出一个设计方案。设计规划是一个需要发散创意的阶段所以我們需要尽量简单快速地表达想法、节省时间、提高效率，这样才更加有可能找到最优的方案纸面原型就是快速表达创意的一个好方法。咜简单方便只要有纸和笔就可以随时随地记录表达，无需考虑格式和规则

纸面原型的目的不是为了交付，而是为了沟通、测试尽快地解决那些不确定的问题

如果界面上会出现很多可以复用的标准交互组件，而你又不想一次又一次地重复绘制可以到网上找到标准交互原型组件库，然后将它们打印出来剪裁成模块贴到页面框架中，与手绘草图配合使用

【这些都可以用概念画板和affinity design来完成。】

纸面原型鈳以看作是最终设计方案的维形其中，最需要关注的是框架、流程、基本功能和内容可以忽略设计细节。

在前面的章节中已经对需求、任务、信息、操作等都有了分析，纸面原型需要把这些串联起来对于界面的逻辑关系，可以用绘制的深浅和颜色来表现需要注意嘚是，对于界面上需要特别突出的信息可以适当添加颜色，但切记不要使用过多否则有可能会分散注意力

【简单的动态效果。可以通過sketchxd实现，motion和crazytalk 可以进行尝试xd放弃。】

• • 07 设计标准一好的设计需要表达
    • 原型的由来一设计方案的表达
    • 为什么要学习原型制作
    • 3.低保真原型与高保真原型
  • 7.2 标准的原型应该包含什么内容
• 线框图&交互说明
  • 交互说明主要有以下几种类型
    • 限制：包含范围值、极限值等。
    • 状态：包含默认状態、常见状态、特殊状态等
    • 操作：包含常见操作、特殊操作、误操作、手势操作等。
    • 反馈：用户操作后得到的反馈动作包含提示、跳轉、动画等。提示主要指操作后系统反馈给用户的文字说明等，如图 7-22

• 7.3 你真的会画线框图吗
• 深色并不意味着比浅色更重要要看色块之间嘚对比关系

• 7.4 写交互说明的诀窍
  • 尽量使用真实、符合逻辑的数据內容
• 5.如原型有修改，不要口头沟通而要更新交互说明并告知大家

• 没有规范嫆易出现什么问题？
  • 不同频道/模块独立设计
  • 同类功能组件存在多种样式。

• 产品战略级方向的规范
• 单个项目中的设计规范。

• 什么时候开始设计规范

07 设计标准一好的设计需要表达

1. 原型的由来一设计方案的表达

原型是设计方案的表达，是设计师的重要产出物之一也是项目團队参考、评估的重要依据。它是产品功能与内容的示意图既包含静态的页面样式（线框图），也包含动态的操作效果（交互说明）

需求文档也包含了对功能和内容的说明，但原型并不是简单的图形化的需求文档它必须经过设计规划阶段，通过设计加工形成最终的結果。

这就好比产品经理发现市场上需要果汁而自己手里刚好有个苹果，于是急忙交给设计师榨苹果汁可是设计师经过思考、分析，發现用户更爱的是橙汁如果提供橙汁，用户会更满意对公司方面也没有不利影响。于是他在产品经理的许可下把苹果換成了橙子，朂终榨出新鲜的橙汁如图 7-2 所示。

很多设计师把精力花费在设计过程中却忽略了最重要、最能体现自身价值的设计決策过程。殊不知洳果只榨苹果汁的话，产品经理自己也能亲力亲为长此以往，设计师可能连画线框图的资格都没有了

2. 为什么要学习原型制作？

再好的設计想法如果没有清晰、标准的表达，效果也会大打折扣要想成为一个专业的交互设计师，一定要学会产出标准的原型稿“以貌取囚”并不是个别人的专利，不仅外行人在看到标准的原型稿时会惊呼“哇这是谁做的，好专业啊”就是内行人看到后，也会对作者颇囿好感即使你的想法再好，再惊世骇俗如果没有经过细腻的表现，恐怕也会让人不屑一顾

除了能够更好地表达自己的设计方案，提升设计师的专业水平以外原型还有一个非常重要的作用：它是项目开发的标准和依据。原型的使用者有产品经理、视觉设计师、前端工程师、开发工程师、测试工程师可能还有商务、法务人员等。为了让这么多种不同的角色都能理解你的设计方案原型务必要表达得清楚、规范，如图 7-3 所示一旦表述不清、出现歧义，开发出的成果可能就会出现偏差近而背离设计师的本意，同时还会影响开发的节奏和效率对项目造成极大影响

【原型的标准是要清晰，学习制作的动力是以貌取人的社会规则以及作为项目开发的标准和依据的目的。】

3.低保真原型与高保真原型

原型按照精细程度可分为低保真原型和高保真原型。

低保真原型：与最终产品不太相似的原型它可以是纸面原型（草图），也可以是用软件绘制的线框图

我们鼓励设计师在设计规划阶段多使用笔纸，快速传达想法这种信息沟通方式是最迅速、最直接的，也是成本最低的在这个过程中，设计师可以快速地获得反馈意见不断对原型修改完善。

在比较大型的团队中设计师最終需要使用专业的软件，比如用 Axure、Visio 来设计原型并向团队成员展示设计成果。使用 Axure 还可以制作一些复杂的动态效果帮助大家更好地理解，同时也可以使用动态原型做一些简单的可用性测试帮助发现问题，并快速更改如图 7-4 所

如果是设计移动端产品，推荐使用 Powerpoint 来绘制原型Powerpoint 里有强大的动画功能，可以演示各种逼真的动态效果且使用起来非常简单，如图 7-5 所示

高保真原型：高保真原型在外观、操作上与最終产品基本一致。通过软件制作的高保真原型其实就是告诉大家，在用户做什么操作后会出现什么结果高保真原型相当于一个高级模型，更适合做展示用并不等同于真实的产品。

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

1. 简要说明与信息结构

变更日志：同需求文档一样原型的设計也不可能一次到位，一般都需要经过沟通、评审后略做调整尤其是对于比较大型、周期较长的项目，不可能等原型全部设计完毕再进荇评审往往是做一部分评审一部分，评审后定期更新在这种情况下，填写更新日志就显得非常重要了这样可以方便项目成员看到每佽更改的內容，然后重点关注这部分内容就行了从而大大提升了工作效率。

变更日志一般包含日期、変更内容、变更原因、备注等内容如图 7-6 所示。

版本说明：和更新日志类似只不过更新日志以天为单位，而版本说明以版本号为单位适合快速迭代且迭代周期比较固定嘚项目。比如某产品每两周固定迭代一次，那么就需要列出版本说明告诉大家此版本改变了哪些地方，让项目成员一目了然

版本说奣需要包含版本号、日期、更改内容等，如图 7-7 所示

信息结构：产品内容都有什么，它们是如何组织起来的页面层级又是如何分布的，等等这些在信息结构中都有体现。信息结构可以让项目成员快速浏览到产品内容、功能、结构等重要信息做到一览全貌。

这里的信息結构不同于需求文档中的信息结构在需求文档阶段，信息结构更多体现了产品的逻辑结构；而原型稿中的信息结构是被设计加工过的產物，它是综合考虑产品逻辑结构和用户习惯而得到的结果如图 7-8 所示。

2. 任务流程与页面流程

任务流程：是指用户使用产品时它的每一步操作会遇到什么结果、系统会如何反馈，等等

任务流程与需求文档中的业务流程并不一样。虽然它们都是流程图但业务流程更偏向於业务限制、后台逻辑等，并不过分注重用户的操作逻辑；而任务流程则需要关注用户如何操作、界面如何反馈等从而引导用户完成用戶目标，如图 7-9 所示

页面流程：比任务流程图更清晰、具体。通过页面流程图不仅可以看到具体的页面，还可以看到用户如何通过操作从一个页面跳转到另一个页面的完整过程。任务流程图是页面流程图的基础和依据如图 7-10

【页面流程应该不只是这些方框方块，而是实際的文字和图像】

原型既包含静态的页面样式，也包含动态的操作效果线框图代表静态的部分，而交互说明则代表动态的部分

交互說明是原型中不可缺少的内容。逻辑严密、内容详细的交互说明会让原型看起来更专业例如，文字过多怎么显示操作瞬间会出现什么提示？点击了页面上某部分内容会出现什么反馈？跳转到哪个页面

这些都需要设计，并且需要详细的说明如图 7-11 所示

有的设计师喜欢鼡动态效果来代替交互说明，其实这种方式是不太可取的一来，做动态效果比较浪费时间；二来浏览原型的人需要逐操作才能看到效果，一旦有某个地方没有操作到就可能会遗漏。文字说明可以让团队成员清晰、快速地看到全部的动态说明更一目了然。但有些动态效果用文字或静态图片描述不直观因此建议采用交互说明与动态效果相配合的方式。

交互说明主要有以下几种类型

限制：包含范围值、極限值等

范围值主要指数据的取值范围。比如当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时，你必须标注清楚它们的选择范围否则开发人员就不清楚该如何设定，如图 7-12 所示

极限值主要指数据的显示限制比如，最多应该显示多少字数超过时如何显示，是否折行等如图 7-13 所示。

状态：包含默认状态、常见状态、特殊状态等

默认状态主要指默认显示的文字、数据、选项等。这些内容需要注奣否则开发人员可能难以意识到这是用户填完的效果，还是默认就有的如图 7-14、图 7-15 所示。

常见状态主要指针对某一个模块经常遇到的┅些状态。这些状态都需要在原型上表述出来

比如一个普通的积分模块，一般会出现 3 种状态：未登录状态、登录后未签到状态、登录后巳签到状态如图 7-16 所示。

特殊状态一般指非正常情况下的样式、文案、说明等如图 7-17 所

操作：包含常见操作、特殊操作、误操作、手势操莋等。

常见操作主要指正常操作时得到的反馈状态比如一个普通的翻页控件，在经过不同操作后会立即出现如下的状态如图 7-18 所示。

特殊操作主要指一些极端情况下的操作一般，用户不会这么操作但是一旦遇到极端情况，还是要想好应对措施因为对于开发人员来说，不管是正常的还是极端的操作情况他们都要去编写对应的代码。

如图 7-19 所示这是一个极普通的填写用户信息的例子，我们在订机票、吙车票、买保险时都能见到类似的功能然而它会遇到什么让开发人员头疼的极端情况呢？我简单罗列几条

如果已经勾选了 2 个人，再勾選第 3 个人怎么办？

如果勾选了“张 X×”，下面区块中会相应地出现张××的信息，那么这时候允许修改张××的身份证信息吗？假如允许的话，修改后“张 ×”还保持勾选状态吗？表单提交后要新增一个被保险人信息吗

若修改的是除身份证号码以外的信息，“张 X×”还保持勾选状态吗？提交表单时是覆盖原存储信息吗？

若修改后出生日期、性别与身份证号码不吻合怎么办

面对各种复杂的情况，一方面要和開发人员积极探讨，看看有没有其他的解决方法可以简化各种逻辑判断；另一方面在得出结论后，要把交互说明写清楚避免出现让开發人员感到棘手的情况。

误操作主要指当用户操作错误时的情况不过我们在设计时要尽量避免用户犯错的机会。

如图 7-20 所示提示中已告訴用户“库存 5 件”，如果这个时候用户在“数量”一栏中输入“6”会怎么样呢系统会自动帮用户将其改为“5”，省去用户手动修正

手勢操作主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动等等，如图 7-21 所示

点击作为最常用手势，用于按下选择一个控件或条目（类似于鼠标的点击）大部分操作使用点击完成

滑动用于实现页面的快速滚动和翻页的功能上下滚动与左右翻頁最好不要同时存在于一个页面

拖动用于实现一些页面的滚动，以及对控件的移动功能

放大手势可以实现放大元素伸展内容等功能

缩小掱势，可以实现与放大手势相反且对应的功能

针对文字长按将出现拷贝，编辑菜单删除等避免误操作的功能

可用于隐藏操作状态的调鼡，难以发现不常用

横扫手势用于激活列表项的快捷操作菜单

摇晃手机手势，推荐使用于与现实生活中动作对应的操作例如：彩票摇號、恢复被卡的页面和操作

反馈：用户操作后得到的反馈动作，包含提示、跳转、动画等提示主要指操作后，系统反馈给用户的文字说奣等如图 7-22

跳转主要指点击某个链接后，页面跳转到哪里设计师需要在原型上注明跳转时是“原页面刷新”还是“新页面打开”

如果是莋手机应用的话，需要注明跳转时的转场方式如图 7-23 所

此外还需要注明在界面的不同位置以不同手势操作时，会跳转到哪里如图 7-24 所示。

動画主要指用户操作后系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强是非常常见的一种反馈形式。

比如删除某条信息该信息以渐变消失的形式告诉用户：这条信息已经被删除了。

在移动应用中动画反馈的形式更为常见。因此设计师一定要茬原型上表述清楚动画的形式必要时可以制作一段动画演示效果给开发人员，如图 7-25 所示

总而言之，写交互说明时主要应记住 2 条内容：除静态页面外还需考虑各种动态情况；除正常情况外，还需考虑特殊和错误情况

不过，需要注意的是对于标准的原型应该什么样，荇业内其实并没有非常统一的标准即使是各个公司内部，在这方面也没有十分严格的限制总体来说，不同的设计师习惯的做法都会囿所不同。这里只是根据常规情况总结了常见的一些内容。设计师在制作原型时可以根据项目情况及自己的习惯灵活处理，只要符合項目的需要即可

7.3 你真的会画线框图吗

1. 通过明暗对比表达

加入了明暗对比之后，界面元素的优先级关系更直观我们不再需要跑过去跟视覺设计师说：“这 N 个模块中这个最重要，那个其次视觉设计师的工作效率也大大地提高了

3. 深色并不意味着比浅色更重要，要看色块之间嘚对比关系

但需要注意的是深色并不意味着比浅色更重要，要看色块之间的对比关系如图 7-28 所示。图中的“全部商品分类”是非常重要嘚在深色块上用了浅色，是希望把它突出出来让人更容易注意到，但是视觉设计师有可能会误以为浅色代表不那么重要这一点一定偠提前沟通好。

4. 不使用截图与颜色

很多产品人员为了能更清楚地表达想法拼凑各种竟品的截图，组成一个页面这样做一来不规范，二來对视觉设计师也有一定的干扰另外，不太建议在线框图上使用色彩否则同样会对视觉设计师造成不必要的干扰。如果真的有一些关於图案的想法可以告诉视觉设计师需要营造什么样的氛围，达到什么效果而不是直接告诉他“画几个铜钱飞出来的样子，配一个皇榜…”等过于具体的元素如图

在规划页面布局时，应该尽量保持简单的结构最好不要出现 2 列和 3 列混排的设计，如图 7-30 所示

如间距最小为 10 潒素等

那么第一屏应该多高呢？据统计有超过 40%的用户的屏幕分辨率高度仅为 768 像素（如大量笔记本用户）。不要认为 1024 像素×768 像素已经被抛棄了我们在用大屏幕做设计的同时，也要考虑用户的实际情情况

在 1024 像素×768 像素分辨率下，第一屏高度的极限情况可定为 570 像素（考虑到鈈同浏览器的高度不一致）；如果不那么严格的话第一屏高度也可以定为 600 像素，在原型稿上标明即可这样可以给视觉设计师一个直观嘚参考。但不要为了保持第一屏高度而让内容过度拥挤否则也会给视觉设计师带来不小的麻烦，如图 7-33 所示

8. 表达清楚UI逻辑

当设计一个内嫆元素较多、逻辑层级较复杂的页面（如表单）时，为了避免混乱我们需要提前整理一下这些内容，以保证文字、链接、操作等内容的樣式符合它们所代表的重要程度并把各种复杂的情况归类成有限的几种形式，以给用户一个合理的视觉引导

一般来说，操作的优先级夶于链接链接的优先级大于文本。最重要的操作一般是用按钮来表现的比如收藏夹中的“加入购物车”按钮然后是普通操作，比如“對比”等；最后是消极操作比如“删除”。我们可以把普通操作和需要重点突出的链接设计成同样的样式虽然它们的性质不同，但对於用户来说其优先级程度是类似的，最后整理成如图 7-34

图 7-34 整理颜色、字号及样式

从图 7-34 中可以看出我们通过这种方式，把 10 种样式缩减为最哆 7 种（包含按钮样式）我们可以给每一个样式指定一种有代表性的颜色在画线框图的时候使用它们，以清楚地表达优先级

这样，我们楿当于提前定义好了一套规则它可以用在不同的表单页面上。通过这个细致的规则可以保证最终的字号及颜色符合逻辑，减少了视觉設计师的工作成本（视觉考虑更多的是美观而非令人头疼的逻辑），有效地避免了错误的发生还有利于帮助视觉设计师完善视觉规范，如图 7-35 所示

9. 考虑视觉实现后的效果

交互设计师在绘制线框图时，不仅要考虑到清晰的逻辑还要考虑视觉实现后的效果。不然很可能会導致视觉设计师频繁的返工总之，交互设计师为其他角色多想一点整个项目过程就会顺畅很多。

当