产品经理需要了解的移动交互设计知识

产品经理需要了解的移动交互设计知识

酷拉皮卡

2014.06

交互设计师眼中产品经理的通病

1、缺少大局观，和商业和市场的目光，只能case by case地完成一项项任务，扎进细节里，眼中只有当前这个case

2、被KPI绑架，越走越远，忘记了产品的初衷

3、缺少主次和优先级的判断，喜欢把所有的功能一股脑堆在用户面前，每个功能都是他们的心血啊，生怕漏掉一个。

4、对用户体验及交互设计一知半解，但却抓住自己懂的那一点死抓不放奉为天条

5、盲目崇拜和抄袭，对国外的或者国内领先的产品不加思索的追捧，跟他讨论任何东西就一句话，我们看看淘宝怎么做的...淘宝那么做有淘宝的各种客观条件限制，未必就都是最好的方案

6、宁可花一个月做一个各方面都没考虑成熟的东西，再用三个月各种修修补补，也不愿花2个月做一个相对考虑全面的方案

*摘自知乎

1.交互界面演化

2.移动情境特性

3.移动设计原则

4.框架、导航及细节设计

5.多平台适配方法

交互界面演化阶段CLI

GUI NUI OUI

命令行界面图形化用户界面自然化用户界面有机化用户界面

基于文字，

通过键盘间接交互

基于图形，

通过鼠标间接交互

通过手指、语音直接交互

所做即所得

一切元素都是互联和流动的

元素间的关联基于流而非功能

输入与输出成为一体

功能即实现，动作即结果

目前正处于GUI向NUI转型阶段

*KPCB2014

随着iPhone/Android/iPad等设备迅速发展，产品经理需要掌握NUI时代的交互知识

1.交互界面演化

2.移动情境特性

3.移动设计原则

4.框架、导航及细节设计

5.多平台适配方案

PC时代移动时代移动设备使用环境不固定，需要思考喧闹的环境、碎片化的操作对交互设计的影响

*友盟2013移动互联网年度报告

•2G网络仍有20%多的市场份额，需要思考网速较慢时的体验问题

•WIFI占比52%，暗示用户对流量资费价格敏感，需要考虑如何帮助用户节省流量

移动特性-用户

拇指有效触摸区域•用户持机方式多样，其中以单手持机所占时间最长，大概占使用时间的一半以上；

•67%的用户习惯右手操作，33%习惯左手操作；•单手持机，拇指的操作最关键，当右手持机时，

拇指的有效触控区域如左图所示（左手操作）；

•所以很多产品重要的功能元素都会放在这个区域内，如标签栏的导航方式。

1.交互界面演化

2.移动情境特性

3.移动设计原则

4.框架、导航及细节设计

5.多平台适配方案

正文原则一：内容优先

不照搬PC功能，敢于删除或隐藏不必要的内容，只抓重点，以便用户能在小屏幕上聚焦内容

案例：

天猫的搜索列表页，当用户刚进入时，

会显示筛选栏。

当用户向上滑动查看更多内容时，筛选栏会

自动收起，给出最大的空间来展示用户需要

的内容。

正文原则二：为触摸而设计

优先设计自然的手势交互，并引导用户在情境中学习手势操作

案例：

微博的下拉刷新功能。

正文原则三：转换输入方式

减少文本输入，尽量通过手势、选择、自动填入、语音、扫码、LBS等方式输入信息

支付宝钱包自动识别并填写短信中的校验码手机淘宝扫二维码购物

正文原则四：流畅性

用户操作触点连接起来的路径短、用户注视点转移路径顺畅而不大幅度跳跃、操作后及时反馈

案例：小米应用商店在一个页面完成安装、启动功能，不需跳转至单独的安装APP页面

正文原则五：多通道设计

输入和输出由视觉、听觉、触觉等来协作完成，让用户更有真实感和沉浸

案例：

京东刮一刮赢红包，模拟线下刮刮卡的效果。

正文

原则六：易学性

把帮助融入到界面中，用户需要时提供给他，而不是在应用初始页全部描述一遍

案例：

无秘，下滑浏览过程中首次上滑时，会提示“

点击顶部栏，可以快速返回顶部”，而不是进入页面

就提示，感觉很贴心

Android网易邮箱，首次进入邮件详情页，按退回键

时提示“右滑返回，更便捷”

无秘网易邮箱

正文原则七：为中断而设计

保存用户的操作，减少重复劳动；衔接用户的记忆而不是让用户重头开始

案例：

微信会自动保留未发送的消息

正文原则八：智能有爱

给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计

支付宝钱包-转账支付宝钱包-手机充值案例：

支付宝钱包转账的时候可以发送表情或语音给对方，谈钱也能谈感情。

支付宝钱包手机充值输入手机号码后，会自动匹配出该号码在手机通讯录里的姓名，以便用户核对号码正确性。

目录

1.交互界面演化

2.移动情境特性

3.移动设计原则

4.框架、导航及细节设计

5.多平台适配方案

正文移动产品框架需要浅而窄

四种框架从应用场景来看，产品框架可更浅一点碎片化的模式，导致操作经常会被终端，浅层框架可让用户更容易找到想要的内容。

从硬件设备来看，产品框架可更窄一点受限于手机的小屏幕，不易放置过多功能入口，核心内容窄而浅，次要内容窄而深