交互设计笔记整理

PC与手机对比

1. 使用环境

   pc：固定位置，干扰少，注意力集中，输入方式强大。

   手机：任何地方，干扰多，注意力难集中，输入方式单一。

2. 交互媒介

   pc：操作精准快速，桌面大显示内容多，过大屏幕会有视觉盲点。

   手机：手指操作，精准度低、速度慢。

3. 使用特点

   pc：需处理复杂任务，多任务切换，讲究效率和强互动，没有电池流量问题。

   手机：适合处理简单任务，多任务切换困难，适合各种姿势使用，电池流量问题严重。

web与APP界面对比

• web是书架，内容繁多，一目了然。更直观，跳转少，分类更清晰。

• APP是抽屉，内容需要有条理的分门别类摆放。信息隐藏深，跳转多，逻辑性强。

APP界面布局

• 沉浸式：如膜拜单车，导航隐藏，首页内容浏览为主，切换放到下一级别中。

• tab式：如微信，左右滑动浏览多个模块，适用于多个模块重要程度相同时。一个tab可能有子集，可以更多的分类过滤内容。

• 大数据式：如UC浏览器，一堆导航的罗列，容量大，大部分行为是寻找入口，特点是可以无限扩充。

web界面布局

• 展示类：信息少，展示空间大，大图片，布局灵活，艺术感自由度高，结构简单随意。

• 电子商务类：

  （1）平台类，信息大，布局规则，展示空间有限，逻辑严谨复杂，导航清晰、更多跳转。（如天猫）

  （2）垂直电商，信息相对单一，导航简单，图片展示空间大，视觉效果好。（如苹果官网）

• 门户类：信息量极大，导航 众多，布局规则，展示空间有限，屏幕黄金位置被导航占据，多跳转。（如腾讯网首页）

• 博客类：信息量大，导航简单，跳转少，内容为王，视觉干扰少，符合人的阅读习惯。（如知乎）

• 工具类：功能性强，目的明确，视觉集中。（百度）

信息架构基本原则

• 一致性原则：结构一致性、色彩一致性、操作一致性、反馈一致性、文字一致性。

• 对软件的控制：加载等待时间不能太长，对用户的动作及时作出反馈，预防出错（如输入校验），对用户的误操作可以撤销。

• 软件的服务性：干扰（如突然的弹框），体贴（如输入提示），有时选择本身也是一种干扰，它会让用户思考。

• 误操作：过多的误操作基本判定了产品的失败，预防误操作通常有几个原则。

  （1）删除不要和常用的东西放一起。

  （2）一个新的状态引入可能干扰其他设计，从而形成误操作。

  （3）防止误操作，要么给它合理的摆放，要么给它单独的使用状态。

• 入口与出口：

  （1）点击这个按钮要知道去哪里。

  （2）点击这个按钮知道可以回到哪里。

  （3）进入这个界面后，知道自己在哪里。

  （4）进入一个界面，发现下一个要去的界面就在旁边。

  （5）有一个固定的办法能让用户返回。

• 法则三定律：

  （1）给用户的入口选择越少，他犯错的记录越少。

  （2）不要试图给用户更多的选择，选择权交给用户往往让他们更迷茫。

  （3）不要觉得对入口的引导很有效，用户往往看不到他们。

信息架构的特性

• 二八法则：你设计的100个功能，只有20个会经常被用到。

• 费茨定律：操作的按钮越小，需要点击时话费的成本（精力）越大。所以被点击越频繁的按钮可以考虑设计的越大一些。

• 格式塔原则：格式塔心理学，人对图形自发性的心理活动。在形式、颜色、距离上进行自发的关系构建。所以同类的ico应该更靠近，这样用户可以自动把它们归为一类。

• 剃刀原理：用户选择越多，做选择的时机越长。所以尽量少的选择，简单的界面更吸引用户。

• 精简界面：

  1、只放置必要的东西

  2、减少点击次数

  3、减少段落个数

  4、给予更少的选项

• 7分钟阅读：注意力在7分钟后开始减弱。

• 视觉流：

  1、图片和鲜亮的颜色都能吸引用户的视觉，应谨慎使用。

  2、没什么比动画更能吸引眼球，没什么比低劣的动画更能毁灭体验。

减少负荷与交互设计

• 认知负荷：对产品熟悉、使用需要付出的思考。

  操作负荷：操作的难易程度。

  视觉负荷：界面的简洁程度。

• 负荷越低，用户的内心期望值越低，进而体验越高。

  负荷越高，用户的内心期望值越高，进而体验越低。

• 用户宁可付出更多的努力也不喜欢更多的思考。

  必要时增加视觉负荷或者动作负荷，减少认知负荷。