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

从策画现职为可视化结构雕塑家也有些日子了，一直想着整理点结构设计准则协助自己以及同僚更加制度化的展开结构设计。但结构设计准则这个该怎么说呢？有鉴于相同的产品种类、题材、使用者、传播方式…，它会有相同的结构设计侧重，这三期，我打算先说说那些能协助他们避免掉绝大部分的手忙脚乱的基础准则：

【连续性准则】

作为最基本的可视化准则之一，它很难被大家所理解，也很难全面落实到具体执行—-只要将常用的命令行母版化，需要时从Loulay里调出来再根据新需求调整内部的重要信息产业布局方可。但是，当产品实际上线营运后，连续性准则是最难被冲破的。

【科学性准则】

以市售众多的ARPG格斗游戏为例，没错看上去是差不多的专业技能骰子，有的是操作方式起来非常简洁，有的是却很难点选或者“莫名其妙雅雷”。这背后的其原因往往就是操作方式的科学性没得到保障，最常见的其原因是 按键\按键间歇\西厄县 过小。

PS：虽然他们能通过改大西厄县的方式来协助使用者更难点选到按键，但按键大小不一仍不提议结构设计得过小，以防影响按键上重要信息的语言选择。另一方面过小的按键也会对使用者构成很大程度的精神压力（无法点选\点错）。

【语言选择准则】

在Axure里面，以一屏大小不一1920*1080的触屏为例，我倾向于使用的中文明甫大小不一为：30（远距提示信息）、34（主要文档）、42（副标题）

个别题材或类型的格斗游戏，由于其本身的复杂性，明甫能稍微缩小，但由于中文档本身的复杂性，提议使用明甫为：

26（远距提示信息）、30（主要文档）、38（副标题）

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

参考《大话西游》的明甫使用情况：

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

其它提高语言选择的技巧：

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

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

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

【3次点选准则】

这个准则怎么理解呢？他们当然无法确保从主介面起算3次点选之内就让使用者实现任意操作方式。对格斗游戏产品而言，3次点选准则主要体现在：3次点选之内必须能抵达到所有玩法入口\副本入口，查看到所有具有“限定次数”的介面。

【防错准则】

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

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

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

重要信息不起眼。通常是因为明甫太小或为了镜头协调而采用了较为柔和的字色导致的。

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

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

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

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

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

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

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

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

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

【字体规范】

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

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

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

提议控制游

【命令行规范】

当同一项目的参与可视化结构雕塑家不止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。有时候，你会发现，结构设计在某种程度上，也是一道数学题。

专栏地址：

 https://zhuanlan.zhihu.com/p/47693620

稿件合作：一元（微信：smallkisshe）

商务合作：Amber（微信：lcxk6876767）

投稿邮箱：[email protected]

投诉邮箱：[email protected]