交互设计的设计原则整理分享

2019.04.12

488

自从我从规划转变为互动设计师以来，这已经过去了一天，我一直在考虑整理设计原则，以帮助自己和同事设计更加标准化的设计。但是我应该怎么说设计原则呢？为了响应不同的类别，主题，用户，媒体......，它将具有不同的设计优先级。在本期中，我打算谈谈可以帮助我们避免大多数错误的基本原则：

【一致性原则】

界面的视觉样式，布局，功能，术语和操作应在所有页面上保持一致。

作为最基本的交互原则之一，每个人都很容易理解，并且很容易实现特定的实现 - 只要掌握了常用的控件，就可以在需要时从库中传输它们，然后根据新要求进行调整。内部信息布局可以。但是，当产品实际运行时，一致性原则最容易破解。

《Grand Chase》大多数屡获殊荣的界面右下角都有[全部接收]按钮;然而，个别获奖模块如右图所示，打破了这种一致性。

【有效性原则】

必须完全解决难以点击的问题

以市场上的许多ARPG游戏为例。这似乎是一个类似的技能轮盘赌。其中一些非常流畅，但有些很难点击或“不幸”。这背后的原因通常是不保证操作的有效性。最常见的原因是按钮按钮间隙热区太小。

交互设计人员可以在文档中描述热区大小和层次结构。

PS：虽然我们可以通过更改热区帮助用户更轻松地点击按钮，但仍不建议按钮尺寸太小，以免影响按钮信息的易读性。另一方面，太小的按钮也会对用户造成一定程度的心理压力（很难点击错误）。

【易读性原则】

虽然您可以清楚地看到某些游戏的字体大小，但您甚至可以看到它非常精致。然而，基于移动电话的实际应用场景（拥挤的地铁，公共汽车，步行），字体大小仍然略大，使得用户甚至可以在户外轻松读取图片中的文本信息。

例如，在Axure中，屏幕尺寸为1920 * 1080的屏幕，我倾向于使用中文字符大小：30（辅助提示），34（正文），42（标题）

对于个别主题或类型的游戏，由于其复杂性，字体大小可以略微减少，但由于汉字本身的复杂性，建议使用字体大小：

26（辅助提示），30（正文），38（标题）

* PS：我认为第22个字已经是限制了。小于此字体大小的中文字体基本上难以识别

有关字体大小的使用，请参阅[＃xA8B]：

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

提高易读性的其他提示：

改善文本和底图之间的对比度。

携带文本的底图尽可能没有透明度或低透明度。

更多地使用界面空白区域，包括设置更大的文本行间距，可以帮助提高可读性。

【3次点击原则】

用户通常关心内容，因此必须在3次点击后找到它们。

你怎么理解这个原理？当然，我们无法确保用户可以在主界面的3次点击中执行任何操作。对于游戏产品，3次点击的原则主要体现在：在3次点击中，您必须能够到达所有游戏入口复制条目并以“有限次数”查看所有界面。

3年的运行《大话西游》尽管有许多功能，但只需2次点击即可访问任何游戏条目。

【防错原则】

通过强调信息，或确认两次，或添加锁定/解锁功能，或确认按钮位置的改变，防止用户在操作期间出错。

上述几种防错方法在游戏中极为常见。执行成本不尽相同，但效果仍然很普遍。有时会使用几种防错方法，但是用户仍然有很多关于误操作造成的损失的投诉。。如果您想问我有效性和实施成本之间最具成本效益的解决方案，那么我建议：在第二个确认弹出窗口的基础上，用户需要输入指定的文本才能完成操作。

《拳皇98OL》虽然防错机制似乎很低，但很容易开发并防止误操作。

或者我们可以从上面提到的基本错误预防方法中检查它们失败的原因。

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

信息不明显。通常因为字体太小或者使用较柔和的颜色进行图片协调。

先入为主。在某些条件下发生变化的规则往往会被玩家对规则的理解所关注。即使界面中的驻留信息被改变为强调，玩家仍然容易忽略它。（这种情况会增加二级确认弹出窗口）

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

过度使用。当玩家的行为频率非常高时，但在大多数情况下这是一个合理的需求，他们可以很容易地忽略系统在危险操作期间给出的二次确认提示。（这种情况需要考虑用于从计划级别调整二级确认的弹出规则）

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

缺乏主动性。被动锁定取决于用户的手动操作行为，大多数用户没有良好的锁定习惯。

防止用户的正常行为。即使对于具有良好锁定习惯的用户，由于生产考虑，锁定/解锁通常也不够全面。需要消耗物品的界面不提供相应的即时解锁操作模式，这对用户来说是不方便的，然后不再锁定它。

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

过度使用。与过度使用的二次确认类似，计划有时对危险操作的定义太低，这会给用户的日常操作带来不便，并且随着时间的推移，他们将麻痹错误预防机制。

没有一致的设置。用户无法弄清楚左侧和右侧的判断按钮是什么。这使得设置不起到防止错误的作用，甚至妨碍用户的正常需求，这通常是执行级别的疏忽。

【字体规范】

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

增强字大小差异并减小字体大小;
统一“节奏”并简化单词步骤的递增顺序;
使用灰度，固定颜色系统增强文本性;

建议将游戏中常用的字体大小控制在6种类型中，最好在4种类型中。我习惯于4pt作为“节奏”。为了让玩家更容易从一堆文本中获取所需的信息，我倾向于使用单词间距作为单词大小的行间距。

【控件规范】

当同一项目中有多个参与交互设计人员时，设计人员应建立一套基础控制规范，以避免在协作时出现分歧。在控制方面，我的原则是：

可重用性很高，尝试控制相同风格和不同大小的控件数量;
确保设备上的视觉输出控件边缘清晰锐利;
为确保视觉输出控制，配色方案不会干扰用户的交互体验;

虽然每个设计师对一般视觉风格有一致的理解，但在处理细节时不可避免地有自己的偏好。例如，在最容易发出标准问题的按钮中，游戏开发周期将不可避免地成为一定程度。出现各种尺寸但具有相同风格的按钮，甚至放置也有点随意。

首先说说尺寸，建议控制尺寸以4为基本单位调整长度和宽度。

原因是这种适应性更好。例如，在某些设备上，我们的设计将以倍数呈现。如果控件的大小是奇数像素，则会导致半像素偏移，具体取决于程序的处理方式。最终像素变得嘈杂或变得模糊。

这时，有些学生必须问，这不是奇数和偶数之间的区别，那么为什么基本单位4而不是2 6 8 10？这主要是考虑控件高度与纯文本之间的关系。还记得我提到4＃作为推荐字体大小之间的“节奏”吗？

然后谈谈纵横比，例如均方根比率，加入系列的比例，Fobonazi量表的比例等，更不用说，游戏开发中的应用率基本不高，没有必要困难我作为一个实用主义者，我只提到这些：

方形（基本上不用作主要功能按钮）

整数比矩形（对于上图中的三个按钮，例如，80 * 240，这称为1: 3整数比矩形，后两者不是，所以美学打折.PS：此外，大于1: 3的整数也低于矩形用法，因为它们容易出现不稳定。）

黄金分割矩形（记得吗？1：在游戏开发的实际应用过程中，黄金分割矩形的使用不高。另一方面，为了方便计算，我们使用的比例为5: 8以上。）

【关于模块化设计】

事实上，模块是“控制”和“元素”之前的概念。在界面中，它们通常由多个功能模块组成。每个模块中都有相应的控件，模块的底图中也使用了不同的装饰元素。将实施业界最佳模块化设计的行业应该是腾讯。模块化设计被广泛使用，因为它具有以下优点：

标准化：模块是预制的功能单元，具有标准尺寸和标准接口，是组装，互换性等的基础;
可组装：可以方便灵活地组合和配置多个模块，构建不同尺寸，形状和功能的系统;
备用：通过将一个模块替换为另一个模块，您可以更改系统的本地功能，而不会影响系统的其他部分;
可维护：可以在本地修改或设置模块以满足用户需求。通过不时添加新模块，可以逐步扩展系统功能。

当然，模块化设计的缺点也很明显 - 强调功能，缺乏仪式和新鲜感。