一个好的设计，要兼顾可视性和易通性。所谓可视性，就是让用户知道这个产品怎么用，怎么操作才是合理的。所谓易通性，就是要让用户明白你的设计意图，明确地告诉用户，你设计的这个东西是干什么用的。——唐纳德·诺曼，《设计心理学》
交互设计师为什么要会视觉？不就是画一个黑白稿，上面都是线线框框的，写个标注就搞定的事情，剩下的美化交给视觉设计师去做不就好了？
如果你真的这么想，那你可能还没有理解交互设计师这个职业的重要性，也忽略了交互稿中所能传达出来的庞大信息量。
交互稿作为产品从概念到实现的第一版原型，它需要承担的是产品设计团队对于这款产品的底层设计理念，它的设计过程需要凝结交互设计师大量的思考和心血，并不是那么容易就能做好的。
交互稿的定义过程
- 定义形式要素、姿态和输入方法；
- 定义功能性和数据元素；
- 确定功能组和层级；
- 勾画交互框架；
- 构建关键线路情景剧本；
- 运用验证性场景来检查设计。
回顾上面的过程，1~5都要用到一定的视觉思维，这还真不是一个纯逻辑的事情。一个优秀的交互设计师，他做出的交互稿不仅逻辑清晰，能让人一眼就看出每个界面的视觉重点、信息层级，同时还标出了用户使用的流程步骤、转场动画形态，直接把整个产品的完整形态展开在你的面前，一切了然于胸。
视觉思维同样也是交互设计师的灵魂技能，只不过侧重点不同。但视觉思维中所包含的概念和方法实在是太多了，我在构思今天这篇文章的时候，足足花了两个多小时才想好这个提纲，把所有交互设计师会用到的视觉理念最终融合到三个角色中，理解起来就相对容易了。
视觉思维的三位角色
- 建筑师：他赋予界面蓝图中每个模块在这里的理由；
- 解说员：他让用户看到界面后自然就知道如何使用；
- 漫画家：他会和你对话、给你反馈，还会讲故事。
一、勾画蓝图的建筑师
1. 场景
在开始设计界面之前，先想好以下几个问题：
- 这个界面是在什么设备上（Web、手机、电视）呈现的，它的分辨率是多少，适合的字体大小和最小点击区域是多大？
- 用户在什么场景下使用这个界面，是坐在电脑前、走在路上、躺在沙发上还是在开车途中？
- 用户的基本输入方式是什么，是鼠标键盘还是触摸屏，或者是电视遥控器？
- 用户是怎么进入到这个界面的，它的上下文界面（Context Interface）各是什么？
如果你没有思考过上面四个问题就开始设计，很可能犯一些基本的错误：比如为高分辨率屏幕的手机设计了一个文字小到看不清的界面，或者是要用鼠标才能点到的汽车中控台界面，这是要让人难受死么？
交互设计师也要考虑场景，为的就是不要设计出一个看起来合理，但实际上没法使用的产品。
2. 区块
设计关注的是最适于传达某些信息的呈现方式。——凯文·米莱、达雷尔·萨诺，《设计视觉界面》
界面设计是一个和信息打交道的工作，你所要展现给用户看到的一切功能其实都是信息的组合，这种组合的最小单元我称之为区块（Block）。
以我们常用的微信首页为例，这里有我们最近聊天的联系人和群聊的会话列表，那每一个会话区块是怎么构成的呢？
这看起来再简单不过的会话区块其实包含了很多信息，比如你看到联系人头像就可以快速辨别每个联系人；比如你需要看到你和她的最近聊天记录，还需要知道她是什么时候给你发的——不好，现在都五点了我还没回老婆消息，死定了！
当你花费一定心思组合好这些元素之后，一个简单的区块就完成了。
这时候下一个问题来了，如果是一个群聊会话怎么办？
你需要做一些修改：
- 群聊是多个人的会话，所以头像就不是特定的某个人，画一个代表群聊的图标行不行？不好，这样每个群聊都一样，没有辨识度了。可以把组成群聊的成员头像组合起来，这样至少能大概认得出其中的主要成员；
- 群聊有时候会被屏蔽，这样是降低骚扰了，但是有未读消息又希望有标记，于是可以把数字改成一个小红点；
- 既然消息被屏蔽了，那就得有个提示，加上个图标；
- 最近聊天记录要加上联系人名，否则不知道是群聊里的谁发的。
好了，只做了简单的几步修改，这个区块就变成了另外一个功能，但是还保持了原来的格式，皆大欢喜。
这像不像是在设计建筑图上的一个个房间？
每一个区块都有各自的信息内容，也有各自需要完成的功能，还有很多形态的衍生和状态的变化，这都是需要交互设计师提前考虑好的事情。
3. 布局
既然是建筑师，当然不能只设计一堆房间了事，他还需要根据整个建筑的面积和形状合理安排这些房间的布局，那这个布局有什么原则呢？
我推荐知名设计师 Robin Williams 写的这本《写给大家看的设计书》，简单易懂又威力强大。
设计的四大基本原则
- 对比（Contrast）：如果元素（字体、颜色、大小、形状、线宽、空间等）不相同，那就干脆让它们截然不同。
- 重复（Repetition）：让设计中的视觉要素在整个产品中重复出现，既能增加条理性和统一性，也能降低认知成本。
- 对齐（Alignment）：每个元素都应当与页面上的另一个元素有某种视觉联系，任何东西都不能在页面上随意安放。
- 亲密性（Proximity）：彼此相关的项应当靠近和归组在一起，组成区块或者区块组，减少混乱，提供清晰的结构。
这些原则实际上是互相关联的，很少仅仅只用某一个原则，同时它们不仅在布局阶段要用到，其实你在设计每个区块的时候就已经开始用了，整齐好看、对比鲜明的功能区块无疑能够为你的设计大大加分。
随手画了一个微信首页的布局交互稿，里面的内容就不细化了，你可以明显地看到上面这四个设计原则的应用，一个个区块就这么妥善安放好了。
层级和眯眼测试
布局阶段，最重要的事情除了保证页面元素的美观和易读，还有一个就是要注意元素间的层级是否合适。拿刚才微信首页的例子来说，首页最重要的元素是什么？
- 页面标题
- 未读消息数
- 未读的会话
设计师有一个通用的检查层级的方法，叫做「眯眼测试」（Squint Test）——闭上一只眼睛，眯着另一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去分组了（亲密性和区块）。只要改变一下看问题的角度，你就能发现此前沉迷于细节时未曾发现的布局和构成问题。
4. 规律
设计中有一些约定俗称的规律，比如黄金分割法、网格系统、系统规范等，遵守这些前人总结出的规律能让你事半功倍，设计出更加美观的界面。同时，你还能通过使用「重复性」来制造自己的规律，同样能提高效率和降低用户的认知成本。
网格系统
网格系统（Grid System）将屏幕分成多个大的水平和垂直区域，是帮助你在布局中实现对齐和亲密性的好工具，无论是在 Web 还是在 APP 设计中都有比较广泛的应用。设计师可以将界面的元素规则化地布局到网格结构中，适当地强调高层次元素和结构，并为低层次的元素或者次重要的区块留出适当的空间。
系统规范
系统规范有人觉得很烦，我爱怎么设计就怎么设计，为什么要你来规定我？所以在移动互联网的早期，你的确可以看到大量的不按系统规范进行设计的 APP，自由是很自由，但是大部分都让人用起来很别扭，更何况每个应用都自成体系，用的交互方式又各不相同，让人真的有抓狂的感觉。
随后，人们越来越发现系统规范的好处：你可以从谷歌、苹果、微软这些大型互联网企业的设计团队中学到很多设计原则，能节省很多控件的设计成本、提高设计和开发效率，同时如果大家都用同一套设计规范，那用户的认知和使用成本无疑会大大降低，何乐而不为？
常用的系统规范
- iOS 的 Do’s and Don’ts：https://developer.apple.com/design/tips/
- 苹