交互设计入门引导：5点原则两条规范

作者：老笨Siva 2019-03-19

从策划转职为交互设计师也有些日子了，一直想着整理点设计原则帮助自己以及同事更加规范化的进行设计。但设计原则这个该怎么说呢？因应不同的品类、题材、用户、媒介...，它会有不同的设计侧重点，这一期，我打算先说说那些能帮助我们避免掉大部分的出错的基础原则：

【一致性原则】

界面的视觉风格、布局、功能、用语、操作应在所有页面中保持一致。

作为最基本的交互原则之一，它很容易被大家所理解，也很容易落实到具体执行----只要将常用的控件母版化，需要时从素材库里调出来再根据新需求调整内部的信息布局即可。但是，当产品实际上线运营后，一致性原则是最容易被打破的。


《Grand Chase》中大部分领奖界面都在右下角设置了【领取全部】按钮；但个别领奖模块却如右图，打破了这一致性。

【有效性原则】

难以点击的问题一定要彻底解决

以市面上众多的ARPG游戏为例，明明看起来是差不多的技能轮盘，有的操作起来非常流畅，有的却很难点击或者“莫名卡顿”。这背后的原因往往就是操作的有效性没得到保障，最常见的原因是按钮\按钮间隙\热区过小。


交互设计师可以在文档中针对热区大小及层级进行说明。

PS：虽然我们可以通过改大热区的方式来帮助用户更容易点击到按钮，但按钮大小仍不建议设计得过小，以免影响按钮上信息的易读性。另一方面过小的按钮也会对用户构成一定程度的心理压力（难以点击\点错）。

【易读性原则】

尽管某些游戏的字号你拿着细看也是完全可以看清楚的，甚至还觉得挺精致。但基于手机的实际应用情景（拥挤的地铁、公交、步行时），字号还是建议略为调大一点，使用户即便在户外依然能够轻松地读取到画面中的文字信息。

在Axure里面，以一屏大小1920*1080的绘图板为例，我倾向于使用的中文字号大小为：30（辅助提示）、34（主要文本）、42（标题）

个别题材或类型的游戏，由于其本身的复杂性，字号可以稍微缩小，但由于中文字本身的复杂性，建议使用字号为：

26（辅助提示）、30（主要文本）、38（标题）

*PS：22号字我认为已经是极限了，比这个更小字号的中文字体基本上很难被识别

参考《大话西游》的字号使用情况：

28（绿色区块）、30（红色区块）、34（蓝色区块）、36（紫色区块）、40（橙色区块）



其它提高易读性的技巧：

提高文字与底图之间的对比度。

承载文字的底图尽可能不设置透明度或较低透明度。

多运用界面留白，包括设置较大的文字的行距，都能有助提升易读性。

【3次点击原则】

用户经常会关心到的内容，务必在3次点击之内让他们找到。

这个原则怎么理解呢？我们当然无法确保从主界面起算3次点击之内就让用户实现任意操作。对游戏产品而言，3次点击原则主要体现在：3次点击之内必须可以抵达到所有玩法入口\副本入口，查看到所有具有“限定次数”的界面。


已运营3年的《拳皇98OL》尽管功能众多，但抵达任何玩法入口都只需点击2次。

【防错原则】

通过对信息的强调，或者二次确认，或增加上锁\解锁功能，或确认按钮位置的改变来防止用户在操作过程中发生失误。

上述的几种防错方式，在游戏中极为常见，执行成本高低不尽相同，但效果还是一般般，往往几种防错方式都用了，但用户因误操作而造成损失的投诉仍然不少。如果要问我在有效性和执行成本之间最高性价比的方案是什么，那么我特别推荐这个：在二次确认弹窗的基础上，要求用户输入指定的文字后才能完成操作。


或者我们可以从上述几种基本的防错方式上检查一下它们为什么失效了。

“信息强调”失效的原因：

信息不起眼。通常是因为字号太小或为了画面协调而采用了较为柔和的字色导致的。

先入为主。随某些条件而变化的规则，往往会因为玩家对规则理解的先入为主，即使改变了界面中的常驻信息进行强调，依然容易被玩家所忽略。（这种情况增加二次确认弹窗即可）

“二次确认”失效的原因：

过度使用。当玩家的某个行为的频率本身非常高，但绝大部分情况下是合理需求的前提下，他们很容易会忽略了在危险操作时系统给予的二次确认提示。（这种情况需要从策划层面考虑调整二次确认的弹出规则）

“上锁\解锁”失效的原因：

缺乏主动性。上锁被动依赖于用户的手动操作行为，大多数用户并没有良好的上锁习惯。

妨碍用户的正常行为。即便是对于有良好上锁习惯的用户而言，上锁\解锁往往会因为制作上考虑不够全面，在需要消耗物品的界面没有提供相应的即时可解锁的操作方式，对用户构成不便，继而不再上锁。

“确认按钮位置的改变”失效的原因：

过度使用。与过度使用二次确认类似，策划有时会对于危险操作的定义过低，导致对用户的日常操作构成不便，久而久之他们会对防错机制麻木。

没有贯彻始终的设定。用户搞不清楚确认按钮在左在右的判断依据是什么，导致该设定既没有起到防错的效果，甚至还妨碍了用户的正常需求，而这往往是在执行层面的疏忽。

【字体规范】

设计上我习惯选用iPhone6P系统画板尺寸为基准，即是1920*1080分辨率。在字体大小的选择方面，则基于以下原则：

强化字阶差异，减少字号种类；

统一“韵律”，简化字阶递增规律；

以灰度、固定色彩体系强化文字性质；

建议控制游戏中最终使用到的常用字号在6种以内，4种以内为佳。字阶差异我习惯以4pt为“韵律”递增。而为了让玩家更容易从一堆文字中获取到所需信息，我倾向于将字间距按文字字号的1.5倍来作为其行间距。


【控件规范】

当同一项目的参与交互设计师不止1个时，设计师之间应建立一套底层的控件规范以避免在协作的时候出现分歧，在控件方面，我的原则：

复用性要高，尽量控制相同样式不同尺寸的控件数量；

确保视觉输出的控件，设备上看，边缘是锐利清晰的；

确保视觉输出的控件，配色方案不会对用户构成交互体验上的干扰；

虽然每个设计师对大体上的视觉风格理解上是一致的，但在细节处理时难免会有自己的偏好，比如以最容易出规范问题的按钮来说，游戏开发周期长到一定程度难免会出现各种不同size但相同样式的按钮，甚至连摆放的位置都有点随性。


先说说size，控件的尺寸建议以4为基准单位来对长宽进行调整。

原因是这样的适配性更好，例如在某些设备上，我们的设计将会以1.5倍大小呈现，如果控件尺寸为奇数像素，将导致出现半像素的偏移，视乎程序的处理方式，最终图素要么变得带有噪点，要么变得模糊。


这时候肯定有同学要问，这不就是奇偶数的区别吗，那为什么基准单位是4，而不是2\6\8\10？这个主要是考虑到控件与纯文本的高度之间的关联问题，还记得我上面提到推荐字号之间以4pt为“韵律”递增吗？

然后说说长宽比，像均方根比例、相加级数比例、弗波纳齐级数这些教科书级的比例，就不说了，在游戏开发中基本上应用率不高，没必要难为自己，作为实用主义者我只提提这几种：

• 正方形（基本上不会用作主功能按钮）
• 整数比矩形（以上图的3个按钮为例，80*240，这种就叫1:3整数比矩形，后两款都不是，所以美观度上都打了折扣。PS：另外，大于1:3的整数比矩形使用率也很低，因为它们容易产生不稳定感。）
• 黄金分割矩形（还记得吧？1：1.618，在游戏开发的实际应用过程中黄金分割矩形的使用率并不高，另一方面，为了方便计算，我们更多采用的是5:8的比例。）
  

【关于模块化设计】

其实模块是在“控件”和“元素”之前的概念，在一个界面里往往会由多个功能模块组成。而每个模块内有相应的控件，模块的底图中也会运用到不同的装饰元素。业内将模块化设计推行得最好的企业应该是腾讯，广泛使用模块设计是因为它具有这些优点：

标准化：模块是具有标准尺寸和标准接口的预制功能单元，这是组装、互换等特征的基础；

可组装：多个模块可以方便、灵活地组合、配置，以构造不同大小、不同形状、不同功能的系统；

可替换：通过用一个模块去更换另一个模块，可以改变系统的局部功能而不影响系统的其他部分；

可维护：可以对模块进行局部修改或设置，以满足用户需求，可通过不定期的增加新模块，而逐步扩展系统功能。

当然模块化设计的坏处也是显而易见的----强调功能性，缺乏仪式感和新鲜感。

【关于栅格系统】

栅格系统英文为Grid Systems，也有翻译为网格系统的。简单地说就是运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。对于网页设计及手机应用类产品来说相当常用，但在游戏产品上应用不广。

快速生成栅格系统的在线工具→http://grid.guide


通过栅格的运用，可以更为有效的以逻辑解释商业设计的细节问题。设计师可以利用栅格让画面更有调性，同时间提高内容的可读性、快速校准元素的位置、帮助设计师平衡画面、模块化管理页面元素、提升版面层次感。

在运用栅格的时候，需要设置其最小单位，通常而言，网页端栅格的最小单位为10px，移动端栅格的最小单位为3、4、5px。

对于网页设计而言，由于内容多少不确定，所以高度没有办法定死，但内容区的宽度是可以定的，然后根据界面总宽度再等分列数制作栅格。网页端常用栅格为12或24列，移动端常用栅格则为6列，这里说到的列，是包含水槽的大列。


一般而言，除了列宽和水槽外，界面设计时还会留有一定的安全边距，用于保证文字的易读性和界面美观度。安全边距通常与水槽宽度有一定的比例关系，常见比例关系为0.5：1和2.0：1。

anyway，栅格系统是辅助页面布局而存在的，应该根据实际内容灵活的使用栅格，而不要被栅格所束缚。所以，最后说说怎么使用栅格系统：

第一步：确定页面宽度，比如1920、1800、1600、1366、1280等等。

第二步：分析内容等分的复杂度，如果内容简单只需要3、4等分，12列的栅格系统即可。如果有较多不等分的可能，建议采用24列的栅格系统，可灵活设置。

第三步：根据内容布局页面，确定模块之间是否有「间隔」，间隔尺寸是多少，6px、8px、10px、12px和20px选一个方便计算、方便记忆和整除的数值即可。

就像过去，开发人员发现960px是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12，15。有时候，你会发现，设计在某种程度上，也是一道数学题。

作者：老笨Siva
专栏地址：https://zhuanlan.zhihu.com/p/47693620

参与评论