一、什么是交互设计？

先来看一下百度百科的定义

交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。简而言之，交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。

为什么要做交互设计

在使用网站，软件，消费产品或各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。

从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。

二、交互设计常用原则和定律有哪些？

尼尔森十大可用性原则

1、状态可见原则

系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。

即在用户操作界面功能时给予实时反馈，例如：页面加载状态提示、按钮点击后的状态变化、进度条提示等。

2、环境贴切原则

设计的一切表现和表述，尽可能贴近用户所在的环境，将现实环境的操作功能巧妙的转化为线上功能，使其贴近用户。使用用户能听懂的专业术语，涉及到专业化语言时要转化成用户熟悉的语言。

即模拟真实的事物，使用户更容易理解。例如：天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品，降低理解成本。

3、操作可控原则

对于用户的误操作，提供二次确认或者撤销的功能，这样可提高用户的操作可控性。

例如：删除联系人二次确认提示、消息可撤回操作。

4、一致性原则

遵循统一的产品设计规范／逻辑。这里的一致性包含产品和跨平台产品之间的一致性。

一致性包含视觉交互、文案描述、组建样式等，例如：微信小程序设计规范。

5、防错原则

设置防错的机制，减少用户犯错。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。

例如：用户名称校验提示、手机号码位数限制等。

6、易取原则

减少用户记忆负荷，在适合的时机给用户需要获取的信息。

例如：验证码读取、找人转账提示等。

7、灵活高效原则

提供灵活的操作和高效的获取信息能力。

例如：手机号码一键登录、消息关键字识别等。

8、优美简约原则

保留产品最主要的信息，如果不是优先级最高，要尽一切可能避免去影响产品的简洁和美观。

9、容错原则

用户在使用产品过程中出现了问题，及时准确的告知用户出现问题的原因。

例如：信息输入提示、搜索无结果等。

10、提供人性化帮助

在用户需要的时候提供必要的帮助说明。

例如：新功能引导、解释说明文案等。

七个交互设计定律

1、菲兹定律

点击一个目标的时间同以下两个因素有关：

（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；

（2）目标的大小（S）。目标越大，所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。

交互设计中要合理设置选项，以免用户使用中决策时间过长，降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

例如：手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿去除，只能设法调整、平衡。

例如：在智能手机出现之前，手机上的操作按钮都是实体按钮。在智能手机出现手，手机被整个屏幕占据后，所有的操作都集合在了手机系统之中，等于把物理操作转移到了系统操作中，其本身的功能复杂程度并没有发生改变，只是转移了而已。

6、防错原则

大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。

例如：登录时用户名校验，手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。

”这个原理称为“如无必要，勿增实体”，即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物，从而提升使用效率。

三、交互设计如何开展工作

首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图，而是要先分析需求，了解产品的战略层和范围层的业务目标。把握产品设计大方向，只有方向对了后面的工作才是有价值的。

把握了产品方向，下面就该进行需求的分析，

首先针对需求考虑5个问题：

1、为什么要做这个功能？（业务需求）

2、产品期望得到怎样的成果？（业务目标）

3、谁来使用？（目标用户）

4、他们要怎样使用？（用户需求）

5、如何让他们都来使用？（将业务目标转化为用户行为）

清楚这5个问题后，再根据交互设计流程进行一步一步的进行

这实际上就是对需求的战略层分析。

我们进一步分析业务需求（业务目的、业务目标）和用户需求（目标用户、用户体验目标），把握关键因素（用户的动机、担忧和影响目标达成的障碍）。

归纳这些需求，明确设计策略。

将“业务目标”转化为“用户行为”，通过引导用户的使用来帮助产品实现目标。

从设计“用户行为”到设计“用户界面”，用户行为决定了用户界面，用户界面也导致了用户会出现什么样的行为。

设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。

四、如何进行用户研究，方法有哪些

评估的形式及方法

常见的评估形式分为三类：

1、评估主体：根据评估的主体不同来进行区分，即谁来做评估。

按照评估主体来区分主要有两个主体：用户和专家

用户评估主要靠收集用户使用数据，也就是用户测试，它的数据相对客观，但时间和费用较多，评估范围较窄。

专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观，但费时少、费用少、评估范围窄。

两种评估方法可以相互补充，并结合使用。

2、评估性质：例如定性评估、定量评估或着其它方式。

按照评估的性质来区分可以分为定量评估和定性评估。

定量评估是指对可以计量的部分进行评价，如点击量、使用率等，可以用数据来说明。

定性评估是指对非计量性的部分进行评价，如流畅度、舒适性、创造性等进行评价。它只能表示一个度，无法准确用数据来说明问题。

3、评估过程：按照评估的过程来进行区分。

从评估的过程来区分可以分为理性评估和感性评估。

理性评估相对客观，从客观的角度出发判断客观事物。

感性评估更为主观，评估结果并没有客观规律。

在实际应用中也需要将理性评估和感性评估结合使用，才能完整的完成我们的任务，达到我们的目标。

常见的评估方法有四种：

1、原型评估方法：在产品研发过程中，对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法，原型方法的目的是将界面设计与用户的需求进行匹配。

一般来说原型评估方法分为三大类型：

（1）快速原型：原型迅速成型并分配实施，在原型实验收集的信息基础上，系统从草案中得以完善。

（2）增量原型：应用与大型系统，从系统的基本骨架开始，需要阶段性的安装，及系统的本质特征是在初次安装完成后允许阶段性测试，以减少遗漏的重要特征。

（3）演化原型：对前期的设计原型不断进行补充和优化，直到成为最后的系统。

2、简易测试评估方法

在条件不允许的情况下，可以采取简易的方法来对用户体验进行评价。步骤是：

（1）实验室环境准备：准备好测试用的电脑或其他媒介。两个房间，房间1用来对被测试者进行测试，房间2用于设计师和工程师的观察。

（2）被试选择：分为用户组和专家组。

（3）进行测试：房间1中被试者根据自己的选择进行操作和测试，同时说出自己的内心想法，观察员在调查表上记录被试者的每一次的操作情况，包括出错情况和被试者的口语描述，当被试者在测试过程中遇到困难或操作无法进行时，观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2，设计师和工程师实时观察和记录被试者的情况，以便今后对产品做进一步的修改和完善。

（4）结果分析：通过多次测试后，将测试结果汇总，提取出交互设计中存在的问题，以及对交互设计有益的建议形成测试报告。

3、眼动评估方法

眼动追踪可以用来评价对产品（包括硬件产品和软件产品）设计的感性意象，评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。

4、脑电评估方法

通过对脑电信号的分析，研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛，被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷，例如空间分辨率上的局限性，因而对某些认知过程和脑区的定位并不是很准确。第二，在许多相似的实验研究中，由于研究者采用了不同的实验材料和方法等，实验结果也存在差异性。第三 ，由于采集记录时间的滞后性，脑电所记录的并不一定是当下被试者所想到的内容。

采取哪种方法来开展用户测试和评估，要根据不同的任务结合不同的环境来开展，比如：时间、成本、资源等。

启发式评估法

是专家评估法的一种，也被称为经验性评估，最初由Nielsen博士提出。简单来说，启发式评估是一种简易的可用性评估方法，使用一套相对简单、通用、有启发性的可用性原则，让几个评审根据专业知识和经验来进行评估，发现产品潜在的可用性问题。

启发式评估的两大要素：评估者和评估参照的原则。   

对评估者的要求主要有四个方面：

（1）人数：推荐3-5人，有时会更少

（2）知识：最好同时具有可用性知识及设计知识

（3）身份：最好是非设计者本人，否者不具有客观性

（4）岗位：设计师或用户研究员

评估参照的原则有：尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择，常用的是尼尔森十大交互原则。

什么时候适合使用启发式评估法？

交互设计和UI设计阶段、测试优化和产品发布后的阶段。

启发式评估的优缺点有哪些？

优点：成本低、效率高、发现大多数可用性问题，甚至是用户测试时不会出现的问题。

缺点：不能代表真实用户，相对主观、有时候发现问题过多、对评估人员知识背景要求较高。

什么时候适用？

（1）适合时间、资源有限的情况下快速发现可用性问题，降低风险及成本。

（2）版本变动不大的情况下，小成本检验。

（3）作为可用性测试的之前准备。

启发式评估流程是什么？

（1）准备阶段：确定范围、背景调查、参考评估原则、评委邀约、材料准备

（2）执行阶段：任务走查、整体走查、结果记录

（3）分析阶段：汇总讨论、报告总结、优化方案

可用性测试

先来看一下我们在平时工作中常常会听到这样的问题

产品经理：我们的用户觉得产品好不好用？使用过程中会不会遇到问题？他们是否满意？

设计师：设计的过程有一些纠结的地方，不知道实际用户是怎么理解和操作的怎么办？

产品开发后：想在大推前检验一下产品是否靠谱，适不适合大推？

当我们遇到这样的一些问题时，如何找到方法快速得到答案呢？

那就是接下来要介绍的可用性测试方法。

可用性测试是一种常用的、高效的方法。

它的定义是：通过观察具有代表性的用户，完成产品的典型任务，从而找出产品可用性问题并解决，目的是为了改善产品，让产品更容易使用。

什么时候适合做可用性测试呢？

一般是在：交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好，可以尽早发现问题并及时调整。

类型分为两种：形成式和总结式

形成式特点：小样本、发现问题为主、不能做定量对比。

总结式特点：大样本（30人以上）、定量的评估、可以做对比评估

可用性测试可以解决什么样的问题？

1、发现问题，产品在体验上是否存在问题

2、检验实现，期望的设计目的有没有达成，是否满足了用户的期望

3、产品评估，用户是否会满意

4、理解用户，了解用户行为习惯，了解用户认知，找到某些问题的原因

测试流程是什么？

整体上分为4个阶段：1、准备  2、测试  3、分析  4、优化

1、准备阶段要做的有哪些？

确定目标：确定测试目标决定了后面测试过程要怎样去设计

常见的测试目标有：

·对整个产品做可用性评估

·对新增的功能模块进行评估

·提前观察新方案对新老用户有怎样的影响

·提前检测改版是否达到预计目标

·设计时存在争议，如何选择解决方案

·某个环节流失率较高，检测是否为设计原因导致

·需要拓展某一类特殊用户，测试针对这类用户在设计上是否需要作出调整

准备测试方案

方案中应当包含以下内容：

·测试目的：明确测试的目的及范围，测试目的决定了测试方案

·测试关注点：与负责的设计师一起梳理测试中要关注的问题

·用户招募：招募要求，样本配比，招募渠道

·经费预算：奖励的形式和额度

·时间计划：用于把控时间计划

撰写测试脚本：设计测试任务，通过用户行为去观察提问来获得我们想要的内容

基本的流程有：

·暖场：3min，简单聊天，消除用户的紧张情绪

·测试说明：2min，对测试内容规则做说明

·测试前访谈：10min，了解用户基本信息

·简单试用：3min，让用户熟悉产品

·测试执行：30-45min，提示任务并观察

·事后访谈：15min，针对疑点问点追问，填写评价表

·道别：5min，支付礼金，送用户离开

招募用户

招募什么样的用户呢？

·根据测试目的来定，找出与测试目标有关的筛选纬度

·特别考虑用户使用行为相关的特征，例如竞品使用经验，使用产品的目的，用户的活跃度等

·挑选最核心的纬度，转化成用户招募的条件，并尽量客观化，具体化，可衡量

·避免设置交叉条件过多，导致样本代表性降低

·学会辨别真假的用户信息

招募多少用户合适？

·以发现问题为目的快速可用性测试，6-8名即可

·考虑产品的复杂性，覆盖人群差异性，适当做调整，拓展到10-15名

招募渠道有哪些？

·公司内部

·现有产品用户库

·公司其他产品用户库

·熟人，朋友等

·推广渠道：官微、公众号、门户网等

·社区，论坛，qq群等

·第三方调研公司

准备测试素材：低保真或高保真原型，或线上已经可以使用的产品，也可以准备一些量表工具来辅助测试。在测试

过程中需要用到的电脑或手机设备，摄像头，纸，笔，桌椅等。

测试场地选择：

·专业可用性测试实验室：一般对测试质量要求较高，旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间，一个测试间，一个观察间，中间有单向玻璃分隔。测试间中有多角度的摄像头，用来记录测试过程，观察间可以同步看到测试间里的情况，

·普通测试环境：在观察人数较少（小于3人），条件有限时使用。

预测试阶段：正式测试前进行预测试，保证测试流程通畅

·走查：记录可能出现的问题

·预测试：找人先测试一下

·调整：调整测试流程

正式测试阶段

测试参与人员有

·主持人：引导整个测试流程

·记录员：记录操作行为，访谈内容，发现问题等

·产品团队：参与旁听，观察，结束后交流

·用户：完成测试及访谈任务

测试过程中需要观察的要点：

·用户是否独立完成了任务

·是否存在无效操作或不知所措的情况

·用户是否满意

结果分析

边测试边总结，越及时越好

·测试完一个用户，做一次小结

·测试结束当天写小结，与设计师当场讨论

·重要问题反馈后再总结分析报告

·边测边改，边改边测

结果分析4个步骤：1、对发现分类  2、整理不确定项  3、评定优先级  4、结果记录

撰写报告

从4个方面来写：

·总体如何

·有哪些问题

·严重程度如何

·建议是什么

·除此之外，还可以围绕关注的问题，未满足需求补充分析

优化跟踪

在测试之后需要出优化的方案，测试优化的过程是循环的。

测试之后如果还有其他问题没有得到解决，可以结合其他的一些测试方法来得到。

问卷调研

问卷调查法是以书面提出问题的方式搜集数据的一种研究方法，研究者将所要研究的问题编制成问题表格，让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写，从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段，也可以用于产品上线后的评估阶段。

如果是想了解用户对产品上线后的满意度，可以使用问卷调研的方法。它比较适合去了解用户的认知态度，也可以附带了解用户的行为习惯，

问卷调研的优缺点

优点：统一性、灵活性、量化性、匿名性

缺点：（1）只能获得书面的信息，而不能了解到生动、具体的情况。（2）缺乏弹性，很难做深入的定性调研。（3）调查者难以了解被调查者是否认真作答，是不是自己填写的。（4）填写问卷比较容易，有些别调查者会随意选择，或者按照社会主流观点选择，这样会使调查失去真实性。（5）回复效率低，对无回答者的研究比较困难。

问卷调查的使用场景

适用于：（1）需要进行定量分析的调研。（2）需要匿名进行调研的问题。（3）对已有假设进行检验。（4）寻找问题隐藏的关联。（5）对产品设计用户认知及态度的评估。

不适用于：（1）发现和描述具体问题。（2）探索受访对象的模糊态度。（3）获取创新想法。（4）获取精确的行为数据。

问卷调研流程

1、确定目标：确定调研目的、对象、分析目的和应用对象。

2、调研方案：通过访谈、经验、理论等，确定调研框架，题目选项，分析思路，投放渠道，相本配比等。

3、问卷设计：问卷设计，问题美化，投放渠道。

4、问卷测试：多人测试，确保问卷的可读性，逻辑通畅

5、问卷投放：按照计划好的投放渠道进行投放，回收数据，数据清洗

6、问卷分析及填写报告：分析及报告填写，调研结果落地

数据分析

概述：通过在网站或应用中进行数据埋点，获取用户对产品的使用和行为数据，并进行基于产品体验优化的数据进行分析。

数据分析可以做什么？

1、可以做到用户从哪里来，来了多少

2、获取用户属性，用户地域，用户设备

3、访问了哪些页面，使用了哪些功能，消费了多少钱，消耗了多少时间

4、哪些流量可能存在问题，忠诚度如何，活跃度如何，有没有达到目标，和行业相比如何

5、流失情况如何，离开之后是否还回来

可以作为产品的眼镜和大脑，提供客观衡量的依据，可以持续优化改进。

数据获取方式的对比

日志文件：优势，完整的服务端请求记录。

                  缺点，日志的获取和清洗有过滤成本，许多页面操作无法记录。

JS页面标记：优势，数据获取可控、灵活，可以对页面操作记录进行记录，获取数据比较完整丰富。

                      缺点，需要在页面植入JS标记代码，某些情况下无法获取，如当用户禁用JS功能时。

常用的数据监控平台

1、第三方监控平台：如Google Analytics、百度统计、腾讯云分析等

2、自研平台

数据分析流程

1、监控  2、定义  3、埋点  4、测量  5、分析  6、优化

Web分析常用的指标

PV：是指页面浏览量，网页浏览数实施评价网站流量最常用的指标之一，用户每一次访问网站中的页面均被记录，对统一页面多次访问，访问量累计

UV：是指独立访客，是通过互联网访问、浏览这个页面的自然人

UPV：是指唯一身份综合浏览量

访问：是指在一定时间范围内，网站所有访问者对网站发起访问的总次数，从访客来到网站到最终关闭网站所有页面，记为一次访问

识别用户的方式：IP、IP+User Agent、cookie、User ID、设备ID、其他

复合指标

跳出率：指用户来到网站，只浏览了一个页面就离开的访问次数，占全部访问次数的百分比，简称“来了就走”。跳出率可以被用来衡量流量和页面质量，高跳出率表示访问者对着陆页面不感兴趣，没有继续访问更深入的页面。也可能页面设计存在问题，也可能是导入的用户不匹配。跳出率可以通过调整广告渠道，优化页面内容来降低。

退出率：访问者离开网站一次被记录为一次退出，某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高，代表某一页面可能出现了问题。

访问时长：网站停留时长，页面停留时长，应用使用时长。访问量是访问质量的一个衡量指标，较长的访问时间说明用户与产品进行了较多的互动。

访问深度：可以理解为单个用户平均访问的页面数，是PV/UV的比值。访问深度也是访问质量的一个衡量指标，可以考察用户是否和网站进行了较多互动。这个比值越大，代表网站的粘性越高。

转化率：指在一个统计周期内，完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算，例如注册转化率、付款转化率等，是一个重要的分析指标。

移动端基础指标

移动端的基础指标监测与web端略有不同，但分析思路大致相同。指标分为：新增设备、累计设备、启动次数、单词使用时长。

常见分析内容

流量分析（哪里来？）、用户分析（什么样的用户？）、行为分析（如何使用的？）、路径转化（表现如何？）、流失分析（粘性如何？）

A/B test

A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式，来获得具有代表性的实验结论，从而寻找到更好的产品策略。

简单来说，就是为同一目标制定两个方案，让一部分用户使用A方案，另一部分使用B方案，记录用户的使用情况，对比两个方案的结果，选择更符合的方案。

A/B test一般会在产品改版正式上线之前使用，来验证新的设计是否可以提高产品的表现。

A/B test可以测试的元素有：标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试，这就是两个测试类型单变量测试和多变量测试。

A/B test工具

Google Website Optimizer：搜索巨头提供的免费A/B test工具，一个很好的入门级工具，但是没有一些先进的功能。

Visual Website Optimizer：一个易于使用的A/Btest测试工具，包含功能有所见即所得的编辑器，单机地图，访问者分割和标签等。

Unbounce and Performable：集成着陆设计的A/B测试工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企业级测试工具

App Adhoc Optimizer：国内A/B Test工具，同时支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB测试服务的专业Saas平台

Optimizely：是网上现有的最专业的AB测试工具之一，它的价格要比其他的工具高很多（也可以免费使用一个月），它提供了一些非常好的功能。

Unbounce：对于登录页面的测试来讲非常不错，而且它不仅仅是个测试工具，还可以在无需自己编写任何代码的情况下来创建登录页面。

如何做A/Btest

1、确定目标，例如提高网站的付费转化率，降低跳出率等

2、测试方案，建立假设：购买按钮的颜色会影响点击率？缩短流程可以提高复费率？改变导航可以降低跳出率等？

3、创建相比较的两个版本，改变其中的变量

4、发布测试，将部分流量导向B方案，但不一定是5：5

5、数据分析，收集数据，对比AB版本的转化率、跳出率、留存率等

感谢阅读！

UI设计中，除了界面整体的布局，还有一些图标、插画的设计，大部分都是素材的填充，而这么重要的部分往往被设计师所忽略。

对于素材的随意挑选，殊不知选图的技巧和方法有很多，众多素材中如何找到我们心仪的配图呢？这就是今天要和大家分享的主题，用科学合理的方法找到最合适的素材。

一、选择配图的常见错误

在为产品寻找配图素材时，是一个长久过程。所以素材的运用即能帮你提升界面的效果，也能拉低界面的效果，很多设计师不在意选材的重要性，往往因为配图后界面效果还不如原型图看起来规范好看。下面我总结出三个方法可以提升配图的效果。

1、素材与用户预期：

不真正调研产品的用户群里和心里。搭配的素材必然达不到用户预期。每款产品的使用人群是不同的，我们的素材配图要符合产品使用人群的预期。

如下图：是一款有关于售车的界面效果，此项目的用户的目标已经确定，主为高端用户，我们来看看左右配图的区别。

左图中我们在找配图时如果不能保证对高端车的认知，必然会有低端车的产品图的出现，由于不符合产品的使用人群，给用户造成心理落差；而右图则是我们了解高端车后的选图，内容是符合用户心理预期的，同时通过配图再次提升产品的逼格。

PS：我上面说到图片内容的心理预期与用户不符，其实在关于选图上，也是存在这个问题的，例如左侧是通过百度找到的素材，不够精致，无法提高界面的整体效果，而右侧则是在站酷海洛找到的素材：

只要进行裁剪，缩放比例即可使用，界面整体档次也提升很多。

2、素材与主视觉：

说到主视觉，就先要说说有关颜色的归类，颜色主要分为暖色系，冷色系和中性色系三种，在界面中不同的颜色可以带来不一样的感受，如果不理解主视觉所要表达的感受，便找不到合适的配图，无法提升界面效果。所以我们在选择配图时一定要追寻界面的主色系所以传达的情感。

如下图：左侧是以冷色为主的直播界面，右侧是以暖色为主的产品详情页。

左图由于忽略了主视觉的关系，配图为颜色过多，页面整体表达出来的情感不够直观，无法产生共鸣。

右图中我们通过控件可知主色为暖色系，选择同色系的素材进行搭配，通过素材和主视觉的完美搭配才能明确传达产品想要给用户的感受。

3、素材与素材：

这是最容易出现的错误，我们通常只关注于素材的整体感觉，反而忽略同类素材之间的差异，不是所有的同类素材都可以放到一起来用的，我们还要注意素材与素材内容的差异化。

如下图：左图为一款外卖食品列表的效果图，右图为商品列表的效果图，大家可以分别感受一下左右两侧的哪个更舒服些。

左图中列表的素材与素材的内容是不同的，虽然都是食物图，但有的是实物，有的是适量图，给人的感觉是不同的，这也是大家总是觉得哪里不对，却又说不出来的问题。

再看右图中的列表，配图元素统一，同为国外真人模特，符合素材与素材之间风格的统一。

PS：我们平时在做概念稿时，找同类型的产品图消耗的时间也是很大的，不是图片少，而是同质量的素材太少了。

所以一定要在专业的素材平台找查找，因为专业的素材平台会根据设计师的需要提供方便快捷的素材集合。

例如上图，我在站酷海洛中的搜索水果，便的到各个角度和不同风格的同质量图片，可以有更多的选择去搭配。

二、运用配图的常见错误

上面我们说的是如何选择素材，而下面一部分主要是让大家了解到没有量身定做的素材，不是什么素材都可以拿来直接用的，理想是丰满的，现实是骨感的。

辛辛苦苦找到的素材，就差一步便可以提升作品的效果，却因为嫌修改麻烦而失之交臂，我们来看看下面三种方法是如何将素材进行优化的。

1、统一素材比例：

在设计界面时，素材被拉伸变形，填充不满等低级问题出现的已经越来越少了，所以这里要说的不是基础的尺寸问题，而且是素材内容的占比比例。要保证素材中的内容与背景的占比是一致的，才能提升界面规范性。

如下图：两张运动类产品的界面列表，我们来分别单独预览两个界面，有没有发现同样的界面同样的产品，但预览产品的顺序是不同的，这是什么原因导致的呢？我们往下看。

左图中的产品展示内容与背景的占比不统一，可能是按现实中的比例进行摆放的，有大有小，界面显乱，干扰用户的阅读顺序。

右图通过更改图片比例后，统一了图片内容与背景的比例，不会干扰用户阅读界面的顺序。

2、统一素材角度：

素材因为角度不一，给人的感受也是不同的，在一个界面中的素材如果角度各式各样，会影响到用户的点击欲望。所以在挑选素材时应该注意参考图的角度，统一的拍摄角度可以让界面变得更有秩序。

如下图：左右两张界面的产品展示部分。

左侧界面中产品配图角度各异，有正视拍摄，有俯视拍摄的界面毫无秩序感。而右侧则对配图进行了规范，都为正视图，让界面看起来更统一规矩。

3、统一颜色：

很多素材的构图和内容都很棒，但放到界面中却显得格格不入，主要原因在于颜色之间的差异。选用素材后，如果对差异较大的颜色不做改变，便会造成颜色混乱，弱化了主视觉的颜色，用户对其产品的认识便会渐弱。

如下图：播放器界面中唱片封面的颜色差异。

左图我们为播放器寻找到了合适的素材封面，但素材的颜色是橙色的，素材与整体的颜色调性是不融洽的，破坏了界面的统一性，并不适合。

所以我们可以将封面改变其颜色变为符合我们界面中按钮以及播放时长的进度条的蓝色即可。

三、线上运营用图

前面说到的都是关于概念稿选择素材用到的一些技巧，可能大家看了会觉得这是概念稿，在实际的线上是没办法控制的，这个观点我并不同，实际线上的配图就真的没办法提升了吗？还是我们选择性忽略了呢？也许我们最初的选择就是美丽的谎言。

1.确保真实用图：

在设计初期我们就应该使用真实的运营图片进行设计，防止上线后才发现图片与设计风格不符的情况，为时已晚。

如下图：两组图为图书展示模块区域。

左图为设计时摆放的封面，都是精心挑选的优质素材，美化了模块的效果。

而右侧为线上效果，无法保证封面设计的统一性，所以切勿使用与实际上线不符的图片，会影响产品最终效果的判断。

2.不可重复用图：

很多设计师在做设计稿时，通篇只用一张素材图，交给开发，其实这样做出的设计，和原型无太大差异。

但是我们的设计稿是为了给运营提供参考的基础模版，为了能和线上效果保持一致，所以设计稿中的素材不可在一个界面中出现两次。

如下图：视频App中的频道页，左侧为复用素材设计，右侧为选择不同素材设计。

左侧的复用设计其实和原型区别不大，无法根据界面中的素材选择运营图，可利用性不大。而右侧更贴近线上效果，可以给运营提供找素材图的方向，避免返工。

3.图片的清晰度：

模糊的图片会使用户的视觉体验变得糟糕，现在的用户对于图片的浏览量每天都是不计其数的，如果想要在配图上得到用户的亲睐，就必须要清晰且看着舒服的图片。

如下图：两张同样的界面展示，分别用了模糊的素材和清晰的素材。

左图中图片清晰度不够，影响用户的浏览，同时也会给用户造成未加载完成的错觉。

右图中的素材则清晰可见，增加界面的美观度。所以我们在用图时，不可以用小尺寸的图片强行拉伸，会导致图片模糊不清，请选择高清大尺寸的配图。

4.图片比例：

同一张图片可能需要在多个界面中进行展示，而展示的尺寸也有可能存在差别，所以我们需要统一制定界面中运营图的尺寸规则，也可以做好安全区，避免界面因比例不对造成的图片拉伸或者显示不全等情况。

如下图：下面的图片是原图素材，接下来要将原图分别放入不同的区域内，他们的尺寸也不同。

在左侧界面中，如果任由系统自动适配比例就会出现前两种的错误，留白或变形，所以我们应该把较大的图片制作规范，画出安全区。

如右图banner通过上面等比例缩放到刚好填充满即可，下面的素材也是等比缩放大填满整个摆放区域后在进行裁剪。

5.元素太多不使用：

很多运营的用图元素过多，一心想把能放的都放进去，最后图片内容中没有重点，用户看的也是一头雾水，元素少，突出重点的图来使用。

如下图：同为视频App中热播模块，同样的美剧和字段，只是素材有所不同。

左侧素材中元素过多，影响用户对图片阅读，无重点，没有点击欲望。

而右侧的配图简单清晰一目了然，不会给用户带来阅读负担，更是挑选影片中简单清晰的画面作为封面使用，增加用户点击欲望。所以我们要选择元素少的运营图作为配图。

6.格式太大：

图片格式过大是一件很严重的问题，用户预览时加载速度过慢影响用户体验的流畅性，图片过大也会增加用户流量的使用费用。所以我们在导出运营用图时，一定要记得压缩图片，对于压缩到什么程度，要看图片本身的大小，只要保证压缩完依然清晰就可以。

如下图：两张同样的素材图，他们的清晰度是一样的，可大小却有区别。

左侧为原图大小，右侧为压缩后的图片大小，我们可以看到压缩后的图片明显占用的内存更小了。

7.不要使用白色背景：

目前线上产品中白色背景的产品占比还是很高，所以我们在选用素材时，要避开白色背景的素材，当界面背景也为白色时，会造成无边缘感。

如下图：两个模块中选择用了不同背景底色的素材图。

左侧素材中用了大量的白色背景的素材，无法判断图片与图片之间的距离，同时也会造成图片大小不一的错觉。

右图中使用有背景色的素材，可以清晰的区分每一个模块的间距，整齐规范。

总结

我们在做概念稿时都知道需要精心选择配图，为什么在做线上稿时，图片的质量就变得那么差，是一件需要思考的事情，难道没有好的素材，我们就放弃了产品的美观度吗？

我们不应该把美化调整运营图变成日常的流程中吗？这样才能保证产品的最终质量。好看的素材不是找出来的，而是通过我们优化出来的。


文章来源：站酷   作者：海边来的设计师

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

“人家设计得真好！”可是好在什么地方呢，却说不出来。这是阻挡你成为优秀设计师的一大障碍。设计是我们的本行，不会用设计语言来解构画面，是说不过去的。

移动互联网设计发展到今天，有很多传统的设计规律可以遵循，也提出了新的挑战。因为手持设备屏幕较小，如何在有限的页面内呈现或引导有效信息，又不显得杂乱臃肿，考验着设计师的能力。

为什么有的主题或App界面就那么舒服，那么清新，那么有情怀？里面蕴含着哪些最基础的版式设计理念，让我们一块梳理梳理，给初入UI设计的同学做个参考。

今天和大家讲讲构图。

构图版式三板斧

问题一：为什么要讲版式设计？有必要么？

就以我刚入行UI设计失败经历为鉴吧，那时候，一拿到需求就马上开始设计，根本就不管什么版式，结果设计出来方案总是很别扭，显得特别乱，往往被扣上“风格不统一”“用户体验差”的帽子。最开始我也是说服不了自己，觉得别人不理解自己的作品。现在想想确实当时存在问题。UI设计必然离不开设计师的天马行空，但是它毕竟是要面向大众市场，做成全世界只有自己能理解的孤品有什么意义呢，UI里的“用户体验”又体现在什么地方呢？而这样的设计又反过来阻碍了你的设计生涯，长期的失败设计很容易带来挫败感和麻木感。

尤其是作为初入行的UI设计师，更有必要学习一些版式设计思路。所谓创新，也仍然需要在了解已有的好设计基础之上进行，这里说这些不是让你生搬硬套，是让你站在前人的肩膀上看得更远。

问题二：为什么一开始就要构图呢？

设计和绘画一样，对需求和内容进行分析，采用适当的构图可以化繁为简，提高设计效率。在尝试比较多种构图后，设计师的思路会更加明确。期间耗费的时间成本最低，可以反复进行调整，直到找到最为合适的构图方式再往下进行细化，添加元素，丰富画面。

一个项目给设计师的时间是有限的，我们核心重点在于弄清楚产品的功能核心和卖点，把它们凸显出来，最终让用户获得更为舒服的体验。而杂乱无章的堆积会显得非常的糟糕，甚至有时候，用户会因为找不到自己想要的东西而马上流失，留下非常不好的印象。通过前期构图，可以节省时间，让设计更有条理。

问题三：构图，会限制设计的创造力吗？

不会的。设计的痛苦莫过于“没有思路”和“漫无边际”，这两者都源于需求分析不够，同时也与事先没有做好构图工作有关。构图为设计提供了明确的尝试方向，甚至通过不同的构图可以产生的交互效应，达到意想不到的效果。限制创造力的问题不要担心，因为构图只是一个框架，同类型的构图完全可以做出不一样的风格。虽然设计构图结构相同，但设计的表现方式和元素不同，仍然能够塑造出不同的设计赶脚。灵活运用构图和布局更能让你把设计集中在元素和产品特色上。

废话不多说，下面我将和大家介绍以下几种在界面中常用的构图方法：

九宫格构图，圆心点放射形构图，三角形构图，SF字形构图。

1.九宫格网格构图

这种版式主要运用在分类为主的一级页面，起到功能分类的作用。

通常在界面设计中，我们会利用网格在界面进行布局，根据水平方向和垂直方向划分所构成的辅助线，设计会进行得非常顺利。在界面设计中，九宫格这种类型的构图更为规范和常用，用户在使用过程中非常的方便，应用功能会显得格外的明确和突出。

九宫格给用户一目了然的感觉，操作便捷是这种构图方式最重要的优势。

九宫格看似简单随意，用好了同样能呈现出奇妙的效果。

灵活运用九宫格辅助线区分出来的方块。在有规律的设计方法中找突破，做设计一定要注重这一点！

在九个方块分配的时候，不一定要一个格子对应一个内容，完全可以一对二，一对多，打破平均分割的框框，增加留白，调整页面节奏，或突出功能点或广告。各个方块的不同组成方式，页面的效果也会产生无数的变化。

我们可以看出这样的版式，同样可以使界面变得非常的灵活，内容简单，信息明了。

2.圆心点放射形构图

生活中，最为常见的就是圆形了，眼睛是圆的，太阳是圆的，碗也是圆的，天也是圆的。在界面设计中圆的运用可谓是点睛之笔。

圆是有圆心的，在界面中，往往通过构造一个大圆来起到聚焦、凸显作用。

放射形的构图，有凸显位于中间内容或功能点的作用。在强调核心功能点的时候，可以试着将功能以圆形的范式排布到中间，以当前主要功能点为中心，将其他的按钮或内容放射编排起来。

我们将主要的功能设置在版式的中位置，就能引导用户的视线聚集在想要突出的功能点上，就算视线本来不在中间的位置，也能引导用户再次回到中心的聚集处。

在界面设计中，圆形的运用能使界面显得格外生动，多数可操作的按钮上或交互动画中都能见到圆形的身影。

因为圆形具有灵动、活跃、有趣、可爱、多变的特质。在界面设计中善于将圆形的设计与动画结合，能让整个软件鲜活起来。

如再加上旋转围绕的动画，会让整个软件鲜活起来。界面中的圆形能集中用户的视线，引导点击操作，突出主要的功能点或数据，把产品核心展现出来。

圆心点放射形的设计，会使软件感觉更为智能化，包容万象。

如果要体现的功能点非常简单，只有几个功能按钮的时候，可尝试这种大圆的展示设计，突出最重要的功能，然后罗列并排出其他的功能点。这种方式非常实用，就和画重点一样，圈出最重要的数据。善于运用大圆构图，能撑起整个画面，让界面圆润而饱满。

3.三角形构图

这类的构图方式主要运用在文字与图标的版式中，能让界面保持平衡稳定。从上至下式的三角形构图，能把信息层级罗列得更为规整和明确。

在界面中三角形构图大部分都是图在上，字在下，阅读更为舒服，有重点有描述。

Gogobot登陆页在设计中将logo作为了图形的部分，输入框就是产品的核心描述。

个人信息页比较常用三角形构图。头像明确了这个页面的内容，而下面的粉丝、喜欢等数据就是对本人的一个描述和介绍。

当时在设计儿童卫士宝贝信息设置页时运用到了三角构图与圆形构图的结合。将体重刻度做成可滑动操作的方式，而卡通形象来突出设置的对象及这个页面的功能。

4.视线在界面中的构图法则（SF字形构图）

在设计实践中，如何引导读者视线，对增强用户体验有重要作用。好的构图视线法则，能够获得非常舒服的阅读体验。而杂乱无章的构图，往往让用户厌倦。

在进行界面设计的时候，对用户的视觉移动方向的预设是非常重要的。在界面中加入更为顺畅的构图设计引导用户视线移动的元素，就能使用户更多的观察到产品的核心和产品的卖点。

视线流动的轨迹多则是从上至下从左到右移动，如果不能围绕这样的视线轨迹进行排版，用户在阅读的时候会变得很吃力，找不到重点，使用户产生反感。所以在界面设计中格外需要注意这个地方。现在界面一般是上下滑动的，做好视线引导，可以大大减小用户的负担和阅读疲劳。

界面中最基础的是S形视线构图

在界面中怎么运用S形视线构图呢？

S形视线大家都懂，关键是如何运用好S形视线来抓住用户眼球。

首先我们看一下视线的轨迹，在视线转角处视觉轨迹最为密集，浏览更为集中在切换的地方，视线转折的地方停留时间最长。所以我们应该把重要的想要突出的产品或功能放在这块，这样更容易让用户记住产品的卖点。

苹果官网便采用了S形视线构图，引导阅读，大家可以从苹果官网好好体会一下。每个模块的图形进行穿插，可以起到帮助折回视线的作用。产品图更多的让用户去记忆，设计引导消费！

此外，为了帮助视线的移动方向,图片的处理也非常的讲究。

在iPod touch 的介绍中，第一张图片展开的效果用到了三角形构图，强化了引导视线轨迹的指示性。同时多张图片借助手机排列方向引导到视线轨迹，很好地实现了图片—文字—图片之间切换，将用户带入到整个产品画面中。

第一屏手机展开方向与视线保持一致

为了使用户阅读更有推进性，在图片层次和空间上，我们也需要注重用户的视线效果，将焦点调整到合理的视线位置上，产品正面方向对准视线的来源点。通过这些调整不仅能使阅读顺畅，更加强了界面的平衡性。

相比于左右构图，S形构图在上下滚动页面上优势非常明显。左右构图很容易给人疲劳感，而S形则将图片和文字完美结合在一起，配以大量的留白，如同山间的溪流，给人轻快流畅的感觉。

下图界面中，设计师很好的运用到S视线形构图，增强了穿插感和灵动性。人物的信息上下穿插布局，头像则成为视线的转折点，使这种双列模式的排版更为有节奏。而具体到每一部分，头像与内容采用了三角形构图，内容描述段落用到了文本居中式，画面稳定、和谐。

在引导页中也会常常运用到S形的构图。图文进行穿插布局，这样的构图层次感分明，动感十足！

由图文版式布局，我们还可以演变出F字形构图，这种类型的构图大部分运用在图文左右搭配图和banner中，使用F形构图能让图文搭配更有张力，更大气，产品信息更为简单和明确。

在F形构图的规律中，主图为F的主干，右侧两行（或两部分）文字为辅，要注意合理分配图片和文字的占比。

F形构图在banner中使用，能将标题更为突出，主题更加吸引视线。

值得注意的是，要充分利用主图的画面的指向性。比如，主图是人物，可将文字放置于其眼神、朝向、手势等对应的方向，加强视线引导。如果是产品图，则可以通过产品的朝向来引导。这样做，用户能最快速的关注到文本信息，加强认知度和购买度。

小结：这一课没有什么实战技巧，更多的是引导大家学会欣赏，学会用基本的设计原理来描述自己看到的作品，而不是简单扔下一句“人家设计得真好”就完了，要明白其中道理，并努力为自己所用。构图先说到这里，当然版式不仅仅指构图，还有很多东西可讲，有时间我再整理给大家。

做设计要培养职业敏感，习惯用设计语言解构看到的画面。


文章来源：站酷   作者：micu设计

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

【译者注】本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”，通过与移动设计界大牛们的对话，帮助大家了解在进行 移动设计时应该特别注意的禁忌，顺便推了一下Proto这个工具。大家可以回顾一下自己团队的应用正在触犯哪些禁忌，想必会有点意思。读完本文，相信你能 找到优化自家移动应用设计的方向。

规则就是用来打破的？这完全取决于规则本身。在移动应用界面设计（后续简称：移动设计）的世界里，大家对美学、手势和动效的看法略有不同。有时一个简单的功能性应用比华丽的应用带来的效果更好，而有时候却恰恰相反。

不过，有些基本规则是人们不愿意去打破的。如果你的移动设计使得用户无法顺利触达关键功能，这显然是行不通的。假使你的文字字号过小导致没人能顺利完成阅读，那么你得回炉重做。浅色背景搭配白色文字？重来吧。

我们试图了解优秀的设计师们心目当中移动设计的7宗罪是什么。经过垂询三组设计专家，我们得到了三个略有区别的结果，看看你是否能从其中找到一致的地方呢。

来自AKTA的意见

Alyssa Burke与Macy Nguyen是AKTA（一个数字体验咨询公司）的设计师，俩人都曾为财富500强的公司以及迅速增长的创业公司效力，参与过原生移动设计项目，为某些机构的顶级项目贡献设计输出。以下是他们认为无法接受的移动设计7宗罪：

1、忽略上下文情境

目标用户的个人档案（年龄、生活习惯、技术潜能等）与他们的物理环境（室内室外，在线离线，早晨晚上等）会影响许多设计决策。移动设计师应该在迭代流程中 充分考虑上下文因素，以降低可用性不足的风险。即使拥有平滑的过渡转场、光滑的按钮和美丽的字体，一些应用也会因为整体界面设计不符合特定用户场景（深色 界面用于户外场景：糟糕的移动设计）而失去成名机会。

2、闭门造车

设计和开发数字产品是一项需要团队协作的工作。即使有项目成员（开发、新人、极客、狂热者、朋友、陌生人、你的哥们儿和设计师潮人）对具体项目内容完全不 了解，将设计工作及早并及时推广到整个项目周期中的不同角色之间也是非常关键的。我们需要让他们了解到必要的上下文信息，并持续保持相关信息互通。与其在 发布后修复问题，不如在项目进程早期预留调整空间。

3、怠慢开发人员

程序员和工程师（以及偶尔酗酒的码农）不仅是你的同伴，而且是技术先导。他们除了知道哪些能够在现实中奏效之外，还能够如你设想的那般确保你的想法得到完 美落地。有些移动设计在技术上行不通，有些或许可行，但这些都需要很多努力或时间在项目中验证。如果不问你或许永远无法确定能否做到。在项目交付时，开发 人员会把你的设计成果实现出来，此刻，他们可能很欣赏你，也可能很讨厌你。

4、低估动效设计

随着物联网逐步成熟，数字界面在人们与周围真实世界的互动中扮演了更重要的角色，界面设计的这一部分需要被设计师更加慎重的对待。人类拥有与生而来的本 能，从所处环境的变化中得到不同的感知与反应。使用合理的界面动效是一种呈现优先级和重要内容的有效方式。在某些情形下的恰当运用，甚至能够引发用户的愉 悦。有兴趣的读者可以了解下迪斯尼动画的12项基本法则。

5、字号太小

比起纸质内容，人们在手机屏幕上进行阅读的精确度和深入度略有不足。正如移动设计拇指触控规则所定义，数字界面的字号最少应该两倍于印刷字号。不同情形适 用不同的字体和设置，尤其当用户试图在移动设备上完成多类任务时。为了避免字号太小，还需要优先考虑按钮形状、图片及交互等界面元素对整体体验有何影响。

6、忽略触控目标

许多移动设计师仍然对用户手指大小不同的现状缺乏重视。一旦涉及行动或者任务导向的触控目标，尽可能的使它简单而且容易点击。为老人设计时要考虑触控时的 抖动因素，同样为儿童设计时需要考虑点击的不准确性。建议为图形资源周围增加留白区域，以便本质上提升触控面积，帮助提升完成任务的速度。

7、死抠平台规范

在Android和iOS平台上统一一套设计方案有一定局限性，也容易对全局体验目标带来副作用。两个平台上有各自用户熟悉的设计模式，设计师不应该只熟悉规范，而应该探索在两个平台上流行的应用。

来自Moblico Solutions的意见

我们同Moblico Solutions（一家提供移动关系管理方案的企业，其目标是协助品牌“打造更多有意义的移动瞬间”）的一些员工进行了交流，他们不仅为诸多行业客户提 供了“如何让他们的移动应用体验更棒”的建议，而且掌握移动设计方面的窍门。以下是他们认为移动设计的7大禁忌：

1、在用户设备上占用过多容量只为了体现存在感

当用户收到“磁盘空间不够”的提示时，会马上遍历手机上已经安装的应用并开始选择删除的对象。如果一个移动应用体积很大，占用了过多的容量却并未提供等同的价值会怎么样？后会有期，用户肯定拿你开刀。记得保持应用在体积上足够轻量，这样至少用户不会轻易把你删掉。

2、在应用启动时及要求允许权限控制（推送、地理位置、摄像头等）

回想下，有多少次我们兴冲冲的下载一个应用并准备开始使用时，一个对话框立马跳出来扫了兴？我不关心这个对话框描述什么内容，只想马上关掉它并继续使用应用功能。它是啥？好吧，菜鸟应用！

3、下载后在使用前就要求登录、注册甚至收费

实际上，这条或许应该排为第一禁忌，很难让人忍受。你能对用户所做最糟糕的事情就是：在他们下载你的应用后告诉他们必须付费才能使用。烂，烂，烂，重要的事情说三遍，赶紧删之。

4、设计的移动应用界面看起来像网页

如果这样，还需要移动应用干嘛呢？要说有一件事情可以毁掉一个移动开发者，那就是把网页的体验缩小到移动端并且称之为移动应用。移动应用应该有其具体优势，只提供缩水的网页体验远不能满足用户期望。

5、粗暴投放广告，或者只提供极难点击的广告关闭按钮

当你在滚动浏览移动站点时，只是手指不小心长按了某张图片就触发了浏览器广告，这难道不是让人烦躁的事情？偏偏还提供极小的关闭按钮，谁能点得到？想要点击简直跟赌博一样。尝试点击关闭的时候还总是因为手指触控面积较大误触了广告，真是要了命！

6、消息推送过载

没错，现在你的应用出现在数百万人的手机屏幕上，它有巨大的影响力。不过，在推送之前请三思，扪心自问：推送是否与用户相关？用户是否真的需要它？当然，你可以在你的移动店铺每次上新时都推送一下，但真的至于么？影响力越大，责任也越大，慎重使用消息推送吧。

7、移动账号缺乏单点登录支持

当移动开发者认同并尊重用户不愿意重复劳动的想法时，最好的体验才可能产生。没人愿意为你的应用重新登录一次。我们得接受单点登录的现行趋势，Facebook在这点上非常成功，继续加油吧。

来自Ideaware的意见

Andres Max是数字创新机构Ideaware（致力于帮助创业团队和财富500强的公司打造有竞争力的移动应用）的创始人。在创建Ideaware之前，Max 是Mashable设计团队的    负责人。经历过为众多行业巨头设计移动产品之后，Max对移动设计7宗罪有自己深刻的见解：

1、用户点击后无反馈

看在上帝的份上，当用户在你的应用中进行点击后请给予及时的反馈吧，否则用户会以为你的应用挂了，并且马上退出。

2、无休止的引导

如果使用自己的手机，我只想快速完成相关任务。别问我各种问题或者让我填写乱七八糟的内容。

3、触控热区尺寸不对

请停止把按钮和输入框做的太小，这不是网页。我的手指需要轻松触及行动按钮，而不是要进行精确到像素级的点击。

4、使用古怪的导航模式

想让用户可以快速熟悉你的应用？那就不要以自己独特的方式来组织导航。Apple的人机交互规范和Google的设计指南就是最好的参照标准。导航设计方面别引入争议，从而给潜在用户一个卸载应用的理由。

5、选取糟糕的配色色系

给眼睛一些休息的空间，你不必采用黄黑色文本那样的出挑配色。

6、留白

移动应用需要很多留白空间，把各种视觉元素进行区分，按钮得加大处理，所有一切都依靠留白来提供视觉缓冲。移动端首屏的概念没有网页那么夸张，所以切忌把所有东西都塞到首屏当中。

7、无休止的推送

为了上帝，请不要每天推送20条消息给用户了。用户在收到几条推送后，就会深深的感觉到想要卸载应用的那股冲动。

你心目中的移动设计7宗罪是什么呢？

尽管不同设计师心目中的7宗罪不尽相同，我们依然可以看到不少相似点和共识。最重要的两条是：1、除非确有必要，避免推送消息；2、通过使用符合习惯与直觉的导航，以及提供其当尺寸的视觉元素，让你的移动设计具备可用性。

我们还能想到的一条是：忽略数字原型。在原型设计阶段能够发现很多移动设计问题，以及让它们更具可用性更加出色的宝贵反馈。这也是Proto.io为什么坚持提供强大又易用的原型解决方案的原因。

译者：1688事业部/无线交互/舒舟
文章来源：站酷   作者：阿里巴巴CBU设计

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务