UI进阶产品设计师之交互设计

2019-11-14 11:27:30

 

早在2015年，阿里巴巴设计高管就提到“全栈设计师”的概念，而“产品设计师”这个概念，更是很早就存在了，只是一直未成大气候。随着互联网“下半场”的到来，产品设计师在行业内的呼声越来越高，它很可能取代UI和UE，变成它们二者的最终形态。作为一个兼UED的工作的UID，一直未对交互设计进行系统性的思考。今天就来梳理下关于交互设计的一些理论和思路。

交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。简而言之，交互设计的目的是帮助用户更好的达成目标，满足用户需求。

 

交互状态

 

1. 等待

a. 无线端产品，多从等待开始

b. 降低用户在等待过程中的敏感性

c. 若无法降低，就给予期望

d. 切忌呆滞

3秒内不能让用户顺畅使用App，流失率约75%

 

2. 初始

a. 先打招呼，再商量，再问用户要什么

b. 最好能知道用户想要什么

c. 不要自作聪明做决定

d. 但可以给出建议

·  网易云音乐初始页是类似引导页的登录界面，可达到引人入胜的效果。

·  其次用户也可以选择先体验再登录 知乎的初始页则是主动收集用户需求，但也是选择性的

· 在行一点则在初始页放入新人福利，引导用户进一步使用

 

3. 输入

a. 输入是一件成本极高的事情，不到万不得已，不要选择输入

b. 如果一定要输入，想办法简化输入步骤

c. 帮助输入

·  京东金融帮助用户记住账号，免输入

·  人人贷的手势密码登录

·  微信的声音锁登录

·  微信的“按住说话”，用语音帮助用户输入

·  微信的指纹支付代替密码支付

·  微信的扫一扫登录/付款

·  知乎首次进入搜索页面，出现热搜、影视等推荐内容

·  知乎搜索页面会根据输入关键词，实时推荐相关内容

·  知乎根据之前的搜索关键词，加入搜索历史

 

4. 空

a. 空是件坏事情，想办法消灭（提升产品硬实力)

b. 如果不能消灭，那最好找到替补方案

c. 如果替补方案都没有，就鼓励用户不让它空着

·  网易云音乐无结果没有任何反馈，产品硬实力不够（如硬实力很强的Google、火狐等浏览器包罗万象）

·  饿了么搜索后无结果，给用户提供推荐商家

·  口碑在订单空状态下，鼓励用户去首页逛逛（创建订单），淘宝、天猫等电商App在购物车空状态同样如此

 

5. 有数据

a. 引导用户进行下一步操作

b. 确定数据的排序原则，减少用户挑选成本

·  毒App根据关键词的关联性排序

·  微信读书则根据书本的阅读用户数排序

·  钛媒体的排序方式，话题>瞬眼>文章

 

6. 过多数据

a. 这不是用户想要的

b. 不必展现所有数据

c. 收起而不是隐藏过多的数据，并给予出口

d. 筛选方式，判断用户的在乎维度

·  知乎的筛选方式：综合、近一周、用户、话题、私家课、Live

·  饿了么的筛选方式：综合、销量最高、距离最近、其他

·  58同城选择地区，将热门城市展示靠前

 

7. 关注/沉浸

a. 保证用户关注，有兴趣（留住用户）

b. 不要干扰，直到事件完成（如不要锁屏，不要弹出无关信息）

c. 如果被强制干扰，记得保存现场

·  YouTube观看视频过程中，返回后依然可以以小窗口的形式看到该视频继续播放；

·  淘票票则提供电影预告片引人入胜

·  bilibili在被打断（如断网或者有事退出），可以选择继续上次的播放进度

 

8. 正确

a. 最好的交互是让用户感觉不到，就继续下一步

b. 除非这是最后一步，才需给予用户提示

 

9. 错误

a. 直接帮助用户修正错误

b. 告诉用户错在哪，越明确越好

c. 给用户指明修正错误的方式

·  UC浏览器在百度搜索，可及时纠正文字错误

·  简书登录提示手机号码格式不正确

·  用未注册过的手机号登录时，提示用户注册

 

10. 待确认

a. 无法返回，可能是误操作，需要确认

b. 涉及到金钱

c. 确认文案清晰明了

 

11. 结束

a. 绝不等同于：请你关了我 ❌

b. 继续引导用户下一步操作

c. 呆滞状态，间接告诉用户操作已结束

 

12. 中断

a. 因为意外情况，操作被迫终止

b. 保存现场，让用户继续上一步操作

c. 意外崩溃采用定时保存方式，以降低用户损失

 

交互设计定律

1. 奥卡姆剃刀原理

在设计上的应用，则表现为：不必要的元素会导致设计效率降低，并增加不可预期的后果。所以去掉不必要的干扰元素，保证页面纯粹、简洁。

 

2. 席克定律

席克定律多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。

例如比起 2 个菜单，每个菜单有 5 项，用户会更快得从有 10 项的 1 个菜单中做出选择。

 

3. 菲兹定律

• 1、我们想要更容易点击到控件，就应该放在屏幕的边缘或角落里。让常用的控件更大，更容易辨别;

• 2、使用屏幕的边缘和角落，让控件有效扩大，永远不要把控件放在离屏幕边缘或角落1px远的地方;

• 3、边缘之外的地方，也可以算作目标点的面积，这样一来，目标的面积就被无限的放大了，也更方便用户操作。

 

4. 神奇数字 7±2 法则

• 1、web导航或选项卡尽量不要超过9个，移动应用交互设计上，选项卡不会超过 5 个。

• 2、如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段，并注意其深广度的平衡。

• 3、把大块整段的信息分割成各个小段，并显著标记每个信息段和子段，以便清晰的确认各自的内容。（如iPhone手机号：XXX XXXX XXXX）

 

交互设计工具

推荐工具：Axure、Sketch配合蓝湖或者Overflow、XD、Principle、Origami、Framer 。

 

关键词：好的h5 h5页面练习 h5做网页

↑ 回到顶部