0
雷锋网按：本文作者GaraC，著有《绝密原型档案-看看专业的产品经理怎么画原型》。
大多数时候，交互的工作是和内容设计一起完成的，但是为了让你能够了解这两者之间的差别，我特地把材料分成两个阶段，也可以让自己梳理一下细节。
“我躺在沙滩上，感觉到细碎的沙子在后背陷入；我踩在小溪里，感觉到脚底的乱石和流过脚面的溪水。我和沙子，我和溪水，产生了交互。”
在讲交互的过程中，我必须排除体验（感觉）的干扰。这是极容易被混淆的两个概念。交互仅止于人与产品之间的互动，它会给与用户“感觉”的结果，但他们不是一回事。
交互是人的行为与事物之间产生互动联系的过程。
人类行为不是定格画面，而是连锁反应。
动态视频比静止的画面传达更大的信息量并且被记住。你可能还记得《哈利·波特》中的“预言家日报”的经典画面，你看到一段完整的视频：罪犯“小天狼星”被警察“傲罗”抓住，并且愤怒地嘶吼。
如果是静态的画面，我们恐怕不能确定画面中人是先吼叫被抓住，还是先被抓住再吼叫：
“疯狂罪犯终于落网！”
“魔法界警察暴力执法！”
——这两者之间的差别可大了。
这就是动态画面中连贯地逻辑线，先后顺序、因果关系。
如果内容设计就像一帧帧现场照片，那么交互就是用户触发的蝴蝶效应。你知道做了这个选择，会导致不同的结果。或者按下这个按钮，后面会发生什么。
Hi-Fi毁一生，如果你不巧是个高保真音乐的爱好者，并且运气糟糕还和我一样是个古典乐的爱好者，那么你应该有这样的经验：“优秀的耳机给你音乐厅一般身临其境的感受”。
这个形容有它背后的原因：如果你身处于一个交响乐团或者摇滚乐队中间，当他们开始演奏的时候，你会感觉到小提琴就在你右手边，或者那把电吉他就在你前方5米处。越优秀的耳机，越会加深这种感觉，这就是为什么你会觉得“身临其境”。
声音恐怕是传达信息效率最低的一种方法，但是即便如此，耳机也能够给你传达如此巨量的信息，最大程度激发人脑的空间想象力。
那么，这件事情和我们的设计有什么关系？
“大页面的设计是焦点的设计，小页面的设计是空间的设计”
如果我们在web页上做设计，让用户快速找到内容是设计的重点。但是在小页面，移动设备的设计中，我却认为空间感才是设计的重点。比如小户型的设计重点是 “让你觉得大”。
以Apple Watch为例（图1）。
【图1 Apple Watch】
Apple Watch继承了iPhone的设计基调，它的交互设计有个显著的优点，这在表面的小屏幕上体现得尤其明显（我认为那不能简单地概括为“扁平化”）。
Apple Watch的初始页面是表盘，按Home键表盘缩小到Home页面的中间，成为“手表小图标”。再次按下Home键，则图标放大成表盘（图2），这会给用户透视的错觉。
【图2 Apple Watch的初始页与home页】
背景（Home页）到前景（表盘）的过渡给我们纵深感，背景没有边界就好像一个无限扩展的空间，可以在里面放上任何东西。
“扁平化其实为了让你觉得地方足够大。你信吗？反正我信。”——“李白”
交互为人类行为而设计，人类的行为依赖经验和本能。
经验是我们记忆中曾经发生过的事情，经验告诉我们能做什么或者不能做什么。
比如公寓楼的门牌号，看到1003，我不用太费心就知道找个位置是10楼3号房间。这是社会通用的沟通语言。
比如给我一个乐谱，我能快速地区分高低音谱号，或者升降音符。这是行业通用的沟通语言。
我们喜欢遵循经验办事，因为那代表了安全和可控。一个成熟的行业为经验设计了规则，这些规则培养了用户习惯，如果没有足够的理由，我们不会轻易打破它们：
“使用APP，你不需要别人告知左箭头是什么意思。”
平台（iOS和Android）的官方设计规范事无巨细地规定了所有的细节，并且培养了用户的使用习惯以及前端开发的工作习惯。遵守官方设计规范，你和开发的沟通会非常轻松，以及不至于在用户面前“出错”
规则除了告诉你用户习惯之外，还有技术可行性。
我要向你强调规则的重要性，它们并不是限制你发挥的枷锁，而是你挥洒创意的舞台。
你应该熟读Android和iOS的官方设计规范、人机交互指南文档，只要遵循这些规范，用户不会因此犯错。
Ps：规范可以帮我们“不出错”，但要达成“绝妙的设计”还需更多创造力。
我们在规则的基础上，为本能设计交互。想象一下：
突然！你被人打晕了！
醒来的时候你发现自己到了一个陌生的地方。
现在你在想啥？——
“我在哪？”
“我是谁？”
“我该怎么办？”
我们通过回答这三个问题，来完成接下来的交互工作：
“我在哪？”
如果用户在使用产品的过程中迷失了自己，就会觉得很挫败。所以，让用户时刻自己在哪里，并且知道自己从哪来，到哪去。
“我是谁？”
用户认知自己的身份或者状态，并且采取相应的行动，人物的身份和状态是探索用户行为的重要依据。
“我该怎么办？”
接下来会发生什么，用户会采取什么样的行动。我们应该提前预期到用户会遭遇哪些事情并作出什么样的反应。
为了让用户定位自己，我们需要为他们设计导航系统。
表面上用户看到的仅仅是一个页面（图3）：
【图3 眼睛看到的页面】
用户应该可以感觉到的页面位置（图4）：
【图4 用户能够感觉到的页面位置】
用户想知道的路线（图5）：
【图5 用户想知道的路线】
用户在这个页面停留时，知道自己是从哪个页面过来的，也知道应该如何回去。我们通过各种方式（菜单、返回键、标题等信息）让用户知道自己可以到达哪些页面，完成哪些任务——这就是导航系统的意义。
地图和道路，共同构成导航系统。
地图告诉我们每个物体的位置：我在这里，它在那里
道路告诉我们物体之间如何连接：我要从这里，去那里
我们在用户潜意识中，植入产品导航系统。这就要先完成地图和道路规划。
“我在18层1806，我要去3层0303。出门左拐坐电梯，出了电梯再右拐”
3.1.1 地图——页面方位
我们需要一个足够简单便于记忆的地图。
如果你有一栋两层小楼，面朝大海，春暖花开。第一层是客厅和厨房，第二层是卧室和书房。你从一层爬楼梯上到二楼，不会因此迷路。
如果你住在公寓，高层楼的格局都是差不多的，18楼和28楼的楼梯间都在同一个位置，唯一能让你分辨自己在第几层的方法就是简单粗暴的门牌号。
所以地图设计应该做到：层级扁平，排列规则统一。
检查页面关系并排列（图6）
【图6 页面关系】
把所有页面按模块放在平面上：
流程的一系列页面通常是从左到右排列，并列内容的页面从上往下，同样内容的页面从前往后。还有一些与其他都没有关联的页面放在单独的位置。
比如“预约会议”与“临时会议”是并列关系；记录的“列表”与“日程”是用不同方式展示了一样的内容，属于同样内容的页面等。
3.1.2 道路——菜单
菜单是到达页面的主干道，菜单设置的原则，是符合逻辑，有时候符合逻辑，意味着不太方便快捷。如果这两者有冲突，我们取逻辑，舍快捷。
菜单是产品的核心安全区，如果用户迷路，他们就会返回菜单页，如果用户不知道该做什么，也会返回菜单页。而一条符合逻辑的道路，比如原路返回，远比快捷的道路来得更加安全。
以下是移动端APP常见的几个菜单结构：
下部菜单：
操作以点击为主，页面切换。大部分的APP使用的菜单布局。
淘宝APP的菜单结构就是这种形式(图7)。
【图7 淘宝APP的下部菜单】
上部菜单：
操作以划动为主，页面平移。Airbnb的Android版本菜单就是这样设计的(图8)。
【图8 Airbnb（Android）的上部菜单】
左侧菜单：
适用于功能单一但是比较复杂的产品，左侧栏不影响主页面的操作，并且扩展性好，可以随时添加快捷入口。
只使用左侧菜单的形式，通常用在早期还不确定的产品形态中，成熟的产品通常都会改为上下部菜单的导航形式。
另外像UBER这种功能单一，主界面（地图）承载较多信息的产品，使用上下导航都太占用空间，所以也使用了左侧菜单（图9）。
【图9 UBER的左侧菜单】
左侧菜单还要注意空间的前后关系。
空间位置在前面的侧边栏好像在说：“我随时都会被用到！”（图9）。
空间位置在后面的侧边栏好像在说：“我先睡会，有事叫我……”，后面的侧边栏比较少见，用于比较复杂的产品。图10中，QQ的主菜单是下部菜单，左侧菜单作为辅助菜单，使用了暗色，与主页面的浅色对比，会让用户有种左侧菜单在后面的感觉。
【图10 QQ的左侧菜单】
右侧菜单：
左重右轻，因此右侧菜单通常适用于内容和功能都比较复杂的产品，常作为次要菜单或者辅助菜单，很少作为独立菜单使用（图11）。
【图11 Airbnb（iOS）的右侧的辅助菜单】
融合菜单：
复杂产品会融合多个菜单，注意主次分明，并且逻辑关系清晰。
这是比较常见的菜单形式，QQ就使用了双菜单架构。主页面下部菜单是三个主要内容模块，左侧放置扩展功能菜单（图12）。
【图12 QQ的主菜单和左侧菜单】
增加快捷操作：增加一些快捷入口，让结构更加扁平。距离菜单越远的页面，重要性也就越小。
比如通常我们把反馈建议整理到设置中心中，但是在新产品刚上线的时候，我希望能够多收集一些用户反馈，这个页面就变得很重要。于是我们在菜单增加了“反馈建议”的快捷入口（图13）。
【图13 菜单中的“反馈建议”】
离菜单越近的页面地位越高。注意微信的朋友圈，它离菜单很远，无声地说着：“就算朋友圈再火热，微信也还是一个聊天软件。”
导航系统让用户知道自己在哪个位置，知道如何去另外一个陌生的位置，并且能够原路返回。设计完导航系统之后，我们得让用户知道它的存在。
3.1.3 空间暗示——页面动态
把导航系统告知用户，需要各种空间暗示。我之前提到Apple Watch的空间设计就是其中一种。在APP中，空间感主要来自页面的进入与退出。
按照左重右轻（左侧的内容重要于右侧的内容）的原理，我把第二张页面放在右边，然后根据导航关系制作页面动态。移动方式可以是覆盖移动，或者平移。
总结一下页面动态的种类：
覆盖移入（图14）
【图14 下一页从右往左覆盖进入】
案例中，“会议记录”是首页，点击记录中的某项可以查看“会议日志”页面，我们让“会议日志”从右侧移入屏幕，盖住了“会议记录”。用户会感觉“会议记录”还在原地。
覆盖移动用户觉得这两个页面是叠加在一起的（图15）。
【图15 前后关系的页面】
覆盖移出
覆盖移出，是上一张页面（比如“会议记录”）往左移出了屏幕，“会议日志”在原地（图16）。
【图16 上一页从右往左覆盖移出】
但是图16这个方式不太适合我们的案例，因为这样显得“会议记录”不太重要，“它”已经移出了屏幕。
左右平移
平移是下一页平移进入，上一页平移离开。这样的页面关系比较紧密，页面是平等并且高度连贯的。可以用在任务流中，也可以用在相同内容的页面移动中。比如从文章的上一篇平移到下一篇，或者上一张图片平移到下一张图片（图17）。
【图17 下一页平移进入】
上下平移
上下距离比左右距离要远的多，也不确定的多，上下跳转页面会给用户失去x轴的错觉，所以上下平移被使用得比较少，即便有，也让用户感觉是个长页面，而不是跳转了新的页面。
知乎APP的答案翻页就采取了这样的方式。看完一个答案之后，往上拉动可以继续阅读下一个答案，当然前提是知乎有大量优质答案，并且知乎的用户也有足够的耐心看完这一个答案之后继续往下（图18）。
【图18 知乎的上下平移】
3.1.4 额外的
有些页面和其他页面没有明确的因果关系，就好像翻书翻到一半，突然来了个电话，我接完电话接着看书。它和我正在进行的事情没什么太大的关系。所以它是凭空出现的，而不是书页中的其中一张。它的出现和退出需要特殊处理。
模态视图，常见的是提示框。它和我正在进行的任务有巨大关联，它不得不出现，又想快点消失。它们有平台默认的样式和退出进入的方法，我们也可以额外为它设计（图19）。
【图19 特别设计的弹窗动效】
3.2.1 身份还是状态？
我们常在不同产品上看到不同的身份标签，比如普通用户和VIP用户啦，乘客和司机啦，女人和男人啦……
大家都很喜欢树立敌人，这样不太好。你不能做一些不符合身份的事情，当你是一个老师的时候，你成为了一个教导者或者回答问题的人，但是有些问题你也很想请教别人。这个时候就一切就变得复杂起来：“毕竟是个有身份的人，万一问了个蠢问题怎么办，还是继续高深莫测下去吧。”
我被拉进了不少交流群里，如果是以被访问者的身份邀请进去的，一定三缄其口，讲话慎之又慎，能不说就不说；如果我以菜鸟的身份进了一个大牛的群，就会满世界的喊“老师”；如果有人称呼我女神，我就不得不告诉他“我得去洗澡了”。你看，我自然而然地做着符合我身份的事情。这些都是别人眼中的我。
而状态就不同了，我可以处于回答问题的状态，同时也可以处于问问题的状态，多么轻松自如。这是真实的我。
如果限定一批用户是老师，另外一批用户是学生。那么我们就放弃了他们各自另外一半的时间和精力，另外一半的活力，另外一半的内容提供。因为某位“老师”不可能一直持续地在“教学”，即便他以此为工作。而如果我靠回答问题赚钱，那么我也同样愿意为别人的回答花钱。
除非能得到足够数量匹配的供应者和消费者，否则就让用户上一秒收入，下一秒就卖出吧！
3.2.2 身份标签
当用户年龄平均在20岁或者更小的时候，这些未走入社会的年轻人急需认可，这种认可在现实中很难得到，身份头衔是有用的激励方法。
对于年龄更长的用户来说就情况就相反了。我花钱买电影看理所当然，可是为什么好像是买了个VIP的头衔呢。天哪，连上个视频网站都在攀比，还能不能好好聊天了。如果一定要这样做，收集成就的方法比身份头衔有用多了。
3.2.3 同时拥有不同的状态
我最好的学习状态就是立刻把学到的东西分享出去。如果你是一个优秀的读者，或许应该尝试开始写点什么？
在产品设计中，时刻把这种逻辑推送给用户，就像一颗思想的种子，它会自己成长和蔓延。
这种方式用在状态可以灵活转变的用户群中更有效，比如临时的租客可以成为临时的房东，或者乘客有时候可以成为司机。
这并不是通用的方法，如果用户之间的关系很少模糊地带，或者有极多的信息不能共用等，明确地区分身份也是可行方案，请视具体的产品情况考虑。比如出租车司机与乘客，双方身份与状态不能灵活转换，互相有较多不重叠的信息。
为人设计就要理解人的行为模式。结果可控的情况下，完成任务的唯一条件，就是不要犯错。因此，我们尽量确保用户不会犯错，这就是“为错误设计”这条规则的由来。
另外，人类会受到情绪的影响，这是不可避免要被考虑到的。我将为你介绍一下“为人为错误设计”与“为情绪设计”的交互理念。
3.3.1 为人为错误设计
灾难是一系列错误的连锁反应——《重返危机现场》
人类不是机器，行为不可控，所以只要涉及人类活动，我们甚至都无法真正意义上地杜绝错误的发生，只能尽力把它发生的概率降低。
为错误设计的步骤：
习惯
违背习惯就像违背自然规律或者用户经验，这会及容易导致用户犯错。所以在设计先后顺序、左右位置的时候不必要特立独行（图20）。
【图20 返回键违背习惯】
提示
重要紧急的行为、一旦开始无法反悔、或者如果犯错就会遭遇巨大损失的行为，需要向用户预警，甚至可以强势一点。这都比让我犯错更好（图21）。
“这是你的选择吗？你要不要再确认一下？”
【图21 预警】
反馈
我需要知道那件事情是不是成功了，否则我就不知道哪里出错了。
“为什么没有反应？是因为我没有按到按钮吗？”（图22）
“我按到按钮了，为什么没有反应？是我的网络有问题吗？”
【图22 反馈】
当我们有所举动的时候，周围的事物都会因此而被影响，并且有所反应。如果用户的每一个操作行为都能得到直接的反馈，对用户更加友好。
反悔
最后我依然犯了错误，请让我有机会反悔。现在大多数的文字输入都有自动存储的功能，如果不小心意外关闭了页面也不用担心重来一遍。
3.3.2 为情绪设计
团队由人构成，产品为人而作。人，必然存在情绪，它非常容易被调动与刺激。因此，为人的设计，必然要顾及人的情绪，纯以理性做决策，是最不理智的做法。
人们容易记住那些与情感密切相关的事物，或者任何加剧情绪的事物。我们可以利用情感化元素让用户与产品产生互动，为产品赋予人格 。
成就感
建立用户克服困难，解决问题的成就感。
经历
似曾相识的的难忘的回忆可以给用户“会心一击”。
放松
放松状态我们能更好地处理信息，生成记忆。让用户进入积极正面的状态、轻松完成操作，享受过程。
选择恐惧症
选择恐惧症是担心选择的结果不是最好的，给用户较少的选择意味着用户可以轻松抉择、完成任务。
3.3.3 特殊情况的处理
第一次与不是第一次
有些行为不需要反复提醒，这样会让人产生“你觉得我智商低”的错觉。所以很多产品只在用户第一次使用的时候做引导设计（图23）。
【图23 第一次引导】
“哦！讨厌。”
网络突然断了，手机突然没电了。我们知道你不愿意它发生，但是它总会发生的。为了应对这些突发情况，我们在正常流程之外还要为它们设计流程或页面。
人类与硬件接触，通过行为与产品建立沟通交互的桥梁，有一门学科专门研究这些——“人体工程学”。
以下以移动产品为例。
对于手机用户来说，行为主要包含手指的活动，其次是眼睛接受信息，特定情况下用到嘴巴和耳朵。我猜暂时很少用到舌头和鼻子什么的。
手指是最为高效、灵活并且使用最为频繁的器官。移动产品大部分都是手持设备，你会看到所有人都用手抓着手机戳来戳去，所以我们当然应该先说说手指的事情。
单手点击舒适度（图24）：
【图24 单手操作】
【图25 重要按钮放在右边】
我们默认右手操作手机的人更多，当然这个观点至今都有争议，因为现在移动设备的操作都非常简单，即便是不太好使的左手一样可以轻松使用。
假设你使用右手，图中红色部分是更容易点击的区域，其他区域次之。顶部是最难点击的地方。
为了让左右手都可以轻松操作，很多产品使用了居中的长按钮。
【图26 居中的按钮双手都可以点】
双手点击舒适度（图27）：
【图27 双手操作】
玩游戏时用户通常都是双手操作，游戏界面的内容设计因此有很大不同。
用户常用单机和滑动操作，这两种操作可以满足大部分交互行为，双指拉伸抓取的操作也很常见（图28）。我们没有必要使用冷门的操作方式，如果使用了少见的手势，记得在用户第一次使用的时候引导他。
【图28 手势】
用手指戳的时候如果戳不到地方实在是太让人糟心了，由于手指与鼠标不同，灵活但是不够精确，因此移动产品规定了最小操作范围。比如iOS最小操作区是44dp，Android则是48dp（请查阅官方人机交互文档）。
使用移动产品时，用户经常处于噪杂的环境或者活动的状态。比如一边走路坐车一边看手机。这对眼睛的压力很大，同时也要求产品设计中为眼睛考虑更多。
下图是眼动热力的示意图，用户习惯于从左到右的阅读方式，左上是关注的焦点。我们在设计产品时毫无疑问会把最重要的内容放置在左上角（图29）。
【图29 眼动的焦点】
用户在运动过程中实际看到的页面，很大一部分是糊的。所以视觉焦点应该清晰可见，这样用户可以快速捕捉到我们设计的“焦点”，对其他信息没什么耐心（图30）。
【图30 清晰的焦点】
必须承认，大多数情况下，交互设计是个繁琐的活，既要关注人类的活动，还要照顾技术实现的逻辑。在大型团队中，这个工作会由交互设计师来完成。在我们的团队中，产品、设计、研发拆分了这个任务。
本文由人人都是产品经理授权雷锋网发布，内容取自人人都是产品经理专栏作家@Gara 同名书籍《绝密原型档案-看看专业的产品经理怎么画原型》，已经在当当、京东等各大平台上架。
雷峰网原创文章，未经授权禁止转载。详情见转载须知。
