工作中常用的10条交互原则

在交互设计中，除了了解交互的知识外，在制作交互稿时，了解基础的排版知识也是很重要的。无论是大神还是小白，在排版时，都离不开排版四大原则：对齐，对比，亲密，重复。

对齐指的是，任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系。对齐分为三大类型，左对齐、右对齐、居中对齐。对齐的作用就是让这些元素整理形成一条线将他们串联起来。对齐有时候还被区分为物理对齐与视觉对齐，如遇到物理对齐让视觉看起来没对齐时，此时我们应该把它调整为视觉对齐。

【左对齐】

由于我们的阅读顺序大多是从左往右，所以左对齐是阅读效率最高的对齐方式，也成为了排版中最常见的一种对齐方式。左对齐的缺点是容易造成右端留白过多，整体视觉失衡。但是这种对齐方式不破坏文字本身的起伏和韵律，能保证较好的阅读体验。还可以避免英文因单词所包含的字符数量不等而不便于左右对齐的编排难题。

【右对齐】

右对齐的编排方式与人的视线移动方向相反，而且每一行起始部分的不规则增加了阅读的时间和精力，这种格式只适用于少量的文字。右对齐使用的频率不太高，往往会与图形、照片建立某种视觉联系，获得排版上的平衡。使用右对齐会给人一种人为干预的感觉，因此这种对齐方式会显得比较个性。

【居中对齐】

多用于居中对称式的版面，给人庄重、肃穆、经典的感觉。因为大段的居中对齐文字会造成分行和阅读困难的问题，所以常用在标题、导语和短篇文字编排中，在APP设计中多用于常用于弹窗信息。

另外有一个在排版中常用，APP设计中不太常用的

【两端对齐】

强制左右两端都对齐，最后一行靠左对齐。这是最常用的段落性文字编排形式，多运用于杂志、画册、报纸等多文字信息内容的编排。使段落文字严谨工整，让版面清晰有序而有条理，提高阅读效率。

• 【即刻】

用户头像，用户名称，用户内容都遵循了左对齐的方式。大部分的APP都有使用左对齐。

• 【岛读】

标题和内容使用了右对齐的方式，给人个性的感觉，文章自身使用了两端对齐的方式，使整段文字看起来严谨工整，杂志感强烈。

• 【植物保姆】

弹窗中使用居中对齐是APP常用的方式，按钮上的购买文字和按钮也保持了居中对齐的关系。

对比分为四个方法，大小对比、粗细对比，颜色对比，细节对比。运用好对比可以使你的主次分明，可以很好的突出重点。如果两个元素想要形成对比，就应当使之不同，而且是截然不同。

【马蜂窝】

目的地页面通过榜单维度，向用户推荐目的地，通过对色块的颜色和饱和度的调节对比，让画面中元素的层次以及重量级的引导，起到明显的推荐作用。榜单模块使用高饱和的颜色，并叠加图片素材突出信息主体。玩乐热销使用低饱和的颜色和小空间的占比进行第二层级对比。

【即刻】

服务协议这个弹出主要是需要用户同意才能进行下一步，所以同意的button和不同意形成鲜明对比，引导用户点击同意按钮进行下一步操作。

【微信】

同上，同意和拒绝button形成对比，引导用户点击同意按钮进行下一步操作。

【淘宝】

文字类信息处理，通过对标题加粗放大字号使用重色，内容部分使用浅色低饱和的方式，产生视觉差，提高用户的浏览效率以及表达产品的视觉层次，帮助用户快速了解到这段文字中最重要的信息内容，帮助用户快速做出判断。

【高德地图】

我的工具页面利用带背景的面性图标，卡片包裹ICON信息，单独面性图标三种样式，区分出常用工具，精选工具和全部工具三个模块。但是全部工具的ICON统一性还有很大的优化空间，比如是否统一面性图标，而不是有的是线性有的是面性。

【微博】

我的页面使用线性图标和面性图标区分开两个模块信息。个人认为每日签到的ICON看起来视觉体量不统一，比如换成胖胖的笔利用斜角构图撑起位置空间。

【饿了吗】

同为金刚区位置，通过icon细节样式的对比，帮助用户区分了层级。将主要常用的功能icon通过丰富细节，放大占比空间的方式，使用户一眼做出区分，节省用户决策时间。饿了吗的ICON细节是这3个页面中处理最好的。视觉体量一致，圆角统一，颜色取值范围相同。

亲密原则指的就是相关的部分组织在一起，安排好他们之间的间距与主次。

【招商银行】

将相关项组织在一起，从物理位置的接近上使其存在关联。亲密性原则在界面中的作用主要表现在梳理信息组织关系，建立起完整的阅读逻辑和视觉引导。

【网易音乐】

利用卡片将内容包裹在一起，更清晰更容易的将内容分类。

 

【在行】

对于内容类app界面，需要有意识的将内容拆分为组。元素与元素之间要体现距离的「近」，组间距要体现出距离的「远」。所以只有行间距和段间距要比组间距小，我们才会下意识的认为它们是一组的。

文字信息间距规律为：

字间距 <  行间距 <  段间距  <  组间距。无论版面的信息多少、位置如何变化，只要保证各个间距组合之间的相对性比例，就能更好的控制版面，让信息更高效的传达，符合逻辑又满足视觉感知的要求，还能使排版具有节奏感和美感。

重复，造物之源。重复原则保持页面的统一性，利用某些元素的重复使页面达到统一效果。可以是字体、形状、颜色等等，但要遵循高度、宽度重复出现，元素间距重复出现，可以预见的是，如果我们在最后再加一个小方块，一定还是同样的颜色、高度、宽度、间距，如果不是为了突出，我们不会引入新的元素。

【淘宝】

淘宝首页商品图墙和搜索商品图墙和店铺宝贝页商品图墙，都采用了相同的布局结构，在不同页面也能快速了解商品信息，减少用户认知和记忆负担，提高产品易用性。同时也减少了用户在使用过程中产生的困惑，提高了用户使用产品的愉悦感和流畅感。

【小宇宙】

相同的播客内容使用相同的列表样式展示。

【招商银行】

金刚位的ICON使用相同的材质，尺寸，手法表现。

影响用户点击效率的因素有两点

1是操作的距离

2是可点击按钮的大小

另外比较特殊的是对于边角的利用和逆向操作。

需要连续操作的控件尽可能接近，缩短操作距离

【网易云】

截图后低部直接弹出分享框，方便接下来分享动作的连续操作。

【iOS相册】

点击右下角删除，从底部弹出确认删除弹窗，符合连续操作控件尽可能接近。

【支付宝】

页面的核心功能按钮做大，用户可以容易的看到和进行下一步操作。

【淘宝】

购买和加入购物车按钮几乎同等重要，因此做的一样大，方便用户决策。

【高德地图】

在地图页面利用边角，将一些主要和重要的和地图设置相关的操作放在屏幕边界，缩短相关设置操作距离，方便用户快速设置。

【饿了吗】

将一些运营活动类信息放置在右手最方便触及的区域，利用边角区域，让用户快速了解活动信息，将运营活动信息最快传达给用户。

【抖音】

点击用户头像的加号关注之后，只能点击进入到主页取消关注，让用户花更多的时间去寻找如何取消关注，从而减少取消关注的操作。

【瑞幸咖啡】

点击提交订单后，会弹出超值换购商品信息，关闭的按钮隐藏在商品卡片上，同时还将可点击按钮做的很大很醒目，促使用户点击购买。这样让不需要购买这些商品的用户花费更多时间去寻找如何关闭。 

1.过分短的间距不仅无法提升操作效率，反而会造成视觉压力从而降低用户体验。

2.过分大的目标也会很直接地破坏画面的平衡，浪费屏幕空间。并且按钮的可用性与其尺寸并不是呈线性关系，当按钮已经足够大时，再增大就没有什么体验上的提升了。

希克定律，原称希克海曼定律（Hick Hymalrs 1aw），是一种心理物理学定律。

简单的说，它的意思就是：一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。在一个产品设计中，有时候会不可避免的出现很多的选择，尝试使用减少选择，选择分区，分步操作，置灰选项的方式帮助用户做出选择。

【喜马拉雅】

行车模式只提供播放相关操作，弱化其他操作，减少用户操作，提高行车安全。

【考拉】

登录页给出一个明显的操作按钮，其它方式登录按钮被放在屏幕下方，拉开主次关系，减少选择操作的时间成本。

【支付宝】

头部四个常用功能单独区分出来，减少用户选择时间。

【饿了么】

金刚区图标区分样式，将用户常用功能区分处理，帮助用户减少决策时间。

【淘宝】

内容过多时，通过分类，帮助用户快速找到需求。

【大众点评】

我的页面从不同维度，分类展示，帮助用户从不同维度快速筛选出现在想要的需求。

【京东言良】

填写问卷采用问答形式，分步操作，减少通篇文字给用户带来的焦虑感。创建问卷时，采用分步式添加，让操作者思路更清晰。缺点是不高效，个人认为是不是可以一次铺出2-3个问题，提高填写效率。

【京东金融】

用户未输入金额时，确认转入按钮不可点，减少用户的操作选择。

【微信】

发朋友圈时，选择了图片内容，视频内容显示置灰，帮助用户在选择时不用再人肉区分视频和图片。

以上就是交互功能工作中常用的十条交互原则。

运用在工作中，可以更有理有据的完成工作任务，对页面的理解也更加深刻，同时可以从帮助用户高效，快捷的使用体验上角度思考页面。

完结，散花~ 希望对你们也有帮助 ~