写在前面的话

在实际工作中，作为一名UI设计师，往往会因为理论知识的匮乏导致在项目中的处于被动的地位，我们需要更多的思考如何将专业理论用于我们的实际项目工作中。

因此，通过对理论的梳理，找出实际案例分析巩固印象的学习方式显得尤为重要。正确运用常见的交互设计原则，便于项目团队之间的沟通协作，也对我们的设计起到指导作用，使设计更有说服力，不仅为用户带来更舒适的体验，也能体现设计师自身的价值。

1.功能可见性原则

定义：通过模拟现实世界中的相应操作来暗示用户如何运作当前操作。

设计方法：主要应用在于界面的功能设计中，运用隐喻的手法，连接用户的操作路径，将现实生活中的操作常识应用至界面当中。

优点：与人们的感官预期相契合，容易被接纳，从而提高操作的可理解性和使用率。

举例：高德地图实时公交功能，模拟现实生活中公交站的站牌提示，方便用户清楚查看公交的路线规划，同时公交图标的实时移动可让用户清楚感知当前公交情况，提前预知等待所需时间。

2.意元集组

定义：人们需要记住大量的信息，或要将信息用于解决问题上，此时将信息分为模块。

设计方法：对内容进行分类，保证每一类别中包含的设置不多于5个。

优点：突破适应短期记忆，通过进行归纳整理，将重要信息用于解决问题上，便于识别与吸收。

举例：短期记忆最有效的是处理四组模块，Iphone拨号键盘，将电话号码分为3小段数字，短期记忆效果会加强，电话更容易在短时间内记住。

3.金字塔原则

定义：任何事情都需要归纳出一个中心点进行信息展示，进行层次区分。

设计方法：

1.对于展示型的信息设计，它的核心在于提升感知的速度于精准度。因此在重点信息于交互行为的主任务上，需要进行信息层级的优先级划分，通过优先级的高低进行展示。

2.另一方面，要根据用户在界面上所愿意停留的时间逐级来给予更多的信息。

优点：提升用户的感知精准度，在有效区域内，传递更多信息。但是，在信息传递的感知当中，需根据人们对不同表现形式的不同感知速度做出调整，大致呈现以下趋势，色彩 > 图形  >  文字。 

举例：支付宝-支日历，通过大面积色彩卡片吸引用户停留，展示待办事项，方面用户进行点击查看，提高分类模块的点击转换率。

4.樊蕾斯托夫效应

定义：相对于普通事件或物体，我们记忆独特、有特色的事件或物体可能性会增大。

设计方法：

1.用特别的元素、色彩、形状、文字，句型结构等方法来突出重点。

2.可以增加趣味性，便于内容更容易回想。

优点：人们会格外注意一些东西里的某个特殊目标，用户会对此特色物体印象更深刻。

举例：打破日常支付宝的常规形象，通过大面积的橙色头部设计吸引用户关注，通过蚂蚁和天猫品牌形象加强双十一产品间的连通性，通过文案吸引用户点击。

5.80/20法则

定义：又称少数关键定律或因素稀疏定律，表明80%的结果，由20%的原因产生。重点突出核心功能和重点信息。

设计方法：

1.利用80/20法则评估设计中各要素的价值，确定用户常用的功能。

2.划定重新设计和优化的范围，对于不经常使用但重要的功能，尝试改进。

3.排定优先级，80%的非关键性功能能减则减，尤其是当时间和资源有限的时候，更应该把重心放到20%的关键性功能上。

优点：通过80/20法则确定功能价值，提升设计最大化 ，提高产品的易用性和有效性。

举例：斗鱼直播根据平台数据将功能区域进行了划分处理 ，通过将点击率最为热门的直播品类展示出来，相关的其他品类通过隐藏的方式，需要用户点击更多进行筛选。活动的预告方便用户预订，在相应时间进行线上观看。

6.羊群效应

定义：羊群效应也称羊群行为，基于用户的从众心理。

设计方法：

1.使用”刺激性“关键字来促发消费者的行为。

2.利用“领头羊”制造热闹的氛围。

3.利用“羊群圈子”制造内容和消费群体，连接消费群体之间的关系。

优点：受到“羊群效应”的影响，用户通过引导做出消费行为，增加活动参与度，提高营收。但是要注意的是需要理性的利用和引导羊群行为，形成规模效应。

举例：京东金融双十一活动，瓜分10亿红包。通过刺激性的标题吸引用户参与活动。累计送出的红包制造出用户参与活动的热闹氛围。累计获得的大额红包数字以及左侧的用户参与气泡提示，制造内容吸引用户再次转发，依靠分享的传播方式进行裂变。

7.尼尔森模型

定义：用户在浏览时，首先按水平移动方式阅读内容区域上部分，向下移动页面，在第二个水平移动中移动更短的区域进行阅读，最后，用户垂直移动扫描内容的左侧。

设计方法：

1.将重要的信息放在前两段，让用户快速触达。

2.结构化展示，用视觉方式进行分组，将大段内容分割成小块，增加吸引力。

3.使用标题，包含关键字，提供简短的标题，让用户快速定位。

优点：用户希望在最短的时间尽快完成任务，通过尼尔森模型方便用户浏览获得信息最大化。

举例：淘宝聚划算，通过将信息拆解，视觉分组的方式展示当前商品销售信息。展示优惠价，聚划算价格倒计时，及购买优惠方式让用户快速定位关键信息，促成下单。

8.奥卡姆剃刀定律

定义：奥卡姆剃刀定律（Occam’s Razor, Ockham’s Razor）又称“奥康的剃刀”，它是由14世纪逻辑学家、圣方济各会修士奥卡姆威廉（William of Occam，约1285年至1349年）提出。这个原理称为“如无必要，勿增实体”，即“简单有效原理”。

设计方法：

1.专注于核心需求，只放置必要内容。

2.减少点击次数，去除不必。

3.给予更少的选项，简单高效的操作。

优点：在设计中除去多余的元素，让设计会更严谨和纯粹。

举例：Instagram、facebook底部tabbar去掉描述性文字，通过图标对应页面功能，简单明了。

9.菲茨定律

定义：任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

设计方法：

1.放大控件的激活区域

2.控件之间保持一定的距离

3.把控件放在边缘获角落区域

4.相关内容更靠近彼此

优点：在视觉上增强用户对它们相关性的认知，减少操作在它们之间移动所需的距离和时间。

举例：微博将更多按钮放置右上角，用户能够在固定边缘位置快速找到它并进行后续操作。

虎牙直播的登陆界面将按钮做得足够大，用户可以轻易快速地点击到这个使用频率最大的按钮 。

10.格式塔理论

定义：人们看待视觉元素，大脑有把信息化繁为简的能力，人脑会先通过简化筛选信息，找到感兴趣的信息了解具体内容，可分为：简单性、相近性、相似型、闭合性、连续性、对称性。

设计方法：

1.相似性：根据形状、颜色、大小等方法，将相似元素组成整体，组织好界面中信息和层级关系。

2.相近性：接近的元素更容易被看成一个整体，或者同一组信息。不同内容的图文通过留白进行分组。

3.闭合型：大脑会将不完全封闭的东西当成一个统一的整体。

4.连续性：人的视觉有追随一个方向上的连续性，以便把不关联的元素联系到一起，倾向于完整连接一个图形。

5.对称性：对称的元素被视为同一组的一部分。

优点：通过格式塔理论帮助实现人与界面之间的沟通关联，影响用户感知，引导用户的注意力，最终引起行为改变 解决问题，提供便利。

1.相近性：虾米音乐通过留白的方式，对不同信息模块进行分组。

2.闭合型：小睡眠的时间调节，在未设置循环时即使缺了一个小口，人们也会有固有经验将其视作圆形。

3.对称性：淘宝App利用对称卡片的方式将信息进行组合。

4.相似性：我的订单Icon运用大小、颜色的方式来进行分组，分区信息层级。

5.连续性：小睡眠App的噪音屏蔽率检测通过方向的强调，引导用户从关注从开始到结束的声音变化。

11.AIDMA原则

定义：是一种以营收为目标的设计原则，表示消费者购买心理的全过程。主要通过五个环节：

引起注意 - 产生兴趣 - 激发欲望 - 强化记忆 - 促进行为。

设计方法：

1.引起注意：在视觉表现手法上有不同的方式，通过强视觉表现力带给用户惊喜和趣味。

2.产生兴趣、激发欲望：展示核心卖点和主要内容。

3.强化记忆，促成行动：用印象深刻的文案以及详细信息，促发用户浏览后做出决定行为。

优点：在每个环节设计相应的传播内容上，为消费者形成全包围的传播结构，提升营收。

举例：天猫App - 天猫U先，从1元使用的文案引起注意 - 通过0.01低价格使用户产生兴趣和激发抢购欲望 - 通过火爆领取中的进度条设计形成热闹景象 - 未抢购到0.01产品后下滑推荐更多便宜试用促成下单的一整套完成流程。

12.小结

在日常工作中，设计师需要有很多专注点，打开固有思维方式，提升在设计中的价值认同至关重要。

以上是笔者对11个主要的交互原则做的案例分析，本文观点仅代表个人对案例的总结归纳，不足之处欢迎大家指点批评。

Powered by Froala Editor