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

产品经理需要了解的移动交互设计知识酷拉皮卡2014.061、缺少大局观，和商业和市场的目光，只能casebycase地完成一项项任务，扎进细节里，眼中只有当前这个case2、被KPI绑架，越走越远，忘记了产品的初衷3、缺少主次和优先级的判断，喜欢把所有的功能一股脑堆在用户面前，每个功能都是他们的心血啊，生怕漏掉一个。4、对用户体验及交互设计一知半解，但却抓住自己懂的那一点死抓不放奉为天条5、盲目崇拜和抄袭，对国外的或者国内领先的产品不加思索的追捧，跟他讨论任何东西就一句话，我们看看淘宝怎么做的...淘宝那么做有淘宝的各种客观条件限制，未必就都是最好的方案6、宁可花一个月做一个各方面都没考虑成熟的东西，再用三个月各种修修补补，也不愿花2个月做一个相对考虑全面的方案交互设计师眼中产品经理的通病*摘自知乎1.交互界面演化2.移动情境特性3.移动设计原则4.框架、导航及细节设计5.多平台适配方法交互界面演化阶段CLIGUINUIOUI命令行界面图形化用户界面自然化用户界面有机化用户界面基于文字，通过键盘间接交互基于图形，通过鼠标间接交互通过手指、语音直接交互所做即所得一切元素都是互联和流动的元素间的关联基于流而非功能输入与输出成为一体功能即实现，动作即结果目前正处于GUI向NUI转型阶段随着iPhone/Android/iPad等设备迅速发展，产品经理需要掌握NUI时代的交互知识*KPCB20141.交互界面演化2.移动情境特性3.移动设计原则4.框架、导航及细节设计5.多平台适配方案移动特性-环境PC时代移动时代移动设备使用环境不固定，需要思考喧闹的环境、碎片化的操作对交互设计的影响移动特性-网络•2G网络仍有20%多的市场份额，需要思考网速较慢时的体验问题•WIFI占比52%，暗示用户对流量资费价格敏感，需要考虑如何帮助用户节省流量*友盟2013移动互联网年度报告移动特性-用户拇指有效触摸区域•用户持机方式多样，其中以单手持机所占时间最长，大概占使用时间的一半以上；•67%的用户习惯右手操作，33%习惯左手操作；•单手持机，拇指的操作最关键，当右手持机时，拇指的有效触控区域如左图所示（左手操作）；•所以很多产品重要的功能元素都会放在这个区域内，如标签栏的导航方式。1.交互界面演化2.移动情境特性3.移动设计原则4.框架、导航及细节设计5.多平台适配方案正文原则一：内容优先不照搬PC功能，敢于删除或隐藏不必要的内容，只抓重点，以便用户能在小屏幕上聚焦内容案例：天猫的搜索列表页，当用户刚进入时，会显示筛选栏。当用户向上滑动查看更多内容时，筛选栏会自动收起，给出最大的空间来展示用户需要的内容。正文原则二：为触摸而设计优先设计自然的手势交互，并引导用户在情境中学习手势操作案例：微博的下拉刷新功能。正文原则三：转换输入方式减少文本输入，尽量通过手势、选择、自动填入、语音、扫码、LBS等方式输入信息支付宝钱包自动识别并填写短信中的校验码手机淘宝扫二维码购物正文原则四：流畅性用户操作触点连接起来的路径短、用户注视点转移路径顺畅而不大幅度跳跃、操作后及时反馈案例：小米应用商店在一个页面完成安装、启动功能，不需跳转至单独的安装APP页面正文原则五：多通道设计输入和输出由视觉、听觉、触觉等来协作完成，让用户更有真实感和沉浸案例：京东刮一刮赢红包，模拟线下刮刮卡的效果。正文原则六：易学性把帮助融入到界面中，用户需要时提供给他，而不是在应用初始页全部描述一遍案例：无秘，下滑浏览过程中首次上滑时，会提示“点击顶部栏，可以快速返回顶部”，而不是进入页面就提示，感觉很贴心Android网易邮箱，首次进入邮件详情页，按退回键时提示“右滑返回，更便捷”无秘网易邮箱正文原则七：为中断而设计保存用户的操作，减少重复劳动；衔接用户的记忆而不是让用户重头开始案例：微信会自动保留未发送的消息正文原则八：智能有爱给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计支付宝钱包-转账支付宝钱包-手机充值案例：支付宝钱包转账的时候可以发送表情或语音给对方，谈钱也能谈感情。支付宝钱包手机充值输入手机号码后，会自动匹配出该号码在手机通讯录里的姓名，以便用户核对号码正确性。目录1.交互界面演化2.移动情境特性3.移动设计原则4.框架、导航及细节设计5.多平台适配方案正文移动产品框架需要浅而窄四种框架从应用场景来看，产品框架可更浅一点碎片化的模式，导致操作经常会被终端，浅层框架可让用户更容易找到想要的内容。从硬件设备来看，产品框架可更窄一点受限于手机的小屏幕，不易放置过多功能入口，核心内容窄而浅，次要内容窄而深正文移动产品常见的6种导航样式标签式桌面式抽屉式平铺式点聚式导航设计需要突出产品的核心点，尽量做到任务路径的扁平化，同时还要考虑到导航操作的便捷性。菜单式正文导航样式1-标签式标签式•标签式导航是iOS主推的导航模式，位于屏幕底部，在Android上常见于顶部。•用户可以直观了解到APP的核心功能，适合在相关几类信息中间频繁跳转。•一般标签数量在5个以内。正文导航样式2-桌面式桌面式•每个入口往往是比较独立的信息内容，用户进入一个入口后，只处理跟此入口相关的内容，如果要跳转至其他入口，必须先回到入口汇总界面•该导航适用于工具类APP，每个工具都有一套独立体系，不适合需要频繁切换不同任务的情况。•随着产品内容逐渐丰富，纯粹的桌面是导航开始减少，更多的是开始融入到其他主导航中，承担其二级导航的作用。位于二级的桌面式导航正文导航样式3-抽屉式抽屉式•追求核心内容的突出，弱化导航界面，常见于一些信息流产品。•导航内容一般位于当前界面的后方，通过左上角的按钮或手势滑动呼出。正文导航样式4-菜单式菜单式•突出内容为主，一般位于产品顶部，通过点击呼出导航菜单。•一般使用列表来展示入口，不适合需要频繁切换的功能。正文导航样式5-平铺式平铺式•一种简单的层级框架，在一个界面中能完全表现一块内容，且多个内容之间是并列关系。正文导航样式6-点聚式点聚式•最早来自应用Path，将用户最频繁使用的多个核心功能点汇聚在主界面，方便用户随时使用。•不同于标签栏，通过一个点汇聚功能入口，所占空间较小，更加灵活。正文细节设计1-点击区域要比按钮本身更大•在比较小的按钮上，点击区域需比按钮本身更大，以提高用户点击的准确度；•点击区域必须大于7*7mm，尽量大于9*9mm。按钮点击区域正文细节设计2-键盘样式•iOS支持8种键盘样式，需根据场景选择适合的样式。•键盘右下角的功能键也是可以配置的：•进入界面时如果键盘自动出现，可引导用户进行输入，而且还节省一次点击。•用户滑动界面时键盘是否消失，取决于这时是否已完成输入过程，是否需要更大的浏览区域，还是在查看其它内容后还要继续输入。所以键盘的出现和消失，和当下界面想要提供给用户的任务直接相关。正文细节设计3-客户端老版本兼容问题•由于部分功能是写死在客户端上的，一旦发布将无法修改。因此在设计新版本时切记考虑老版本兼容问题。•尽可能将业务逻辑控制在服务器端，而非客户端。1.交互界面演化2.移动情境特性3.移动设计原则4.框架、导航及细节设计5.多平台适配方案适配顺序-先iOS，后Android•许多公司在开发移动全平台应用时，由于时间和资源的限制，都会在各个平台上沿用同一套设计；•一般来说都会根据iOS的风格来设计。因为iOS上硬键更少，如果能支持iOS平台，则Android平台上能较容易地迁移。•但对于Android的应用主要是进行Back键的适配，使习惯使用Android的Back键的用户也能顺畅地使用。平台规范指南IOSHumanInterfaceGuidelineAndroidDesignWindowsPhoneiOS人机界面指导手册Android设计指南WindowsPhone用户体验设计准则每个平台都有属于自己的规范、熟悉规范可以开阔设计思路，更容易快速产出符合平台标准的设计方案。jQuerymobilejQueryMobileweb应用程序框架Webapp与Nativeapp•Webapp：通过HTML5实现，通过浏览器访问；•Nativeapp：通过应用市场下载，直接在本地使用。最后想说的话1-保持好奇心，多学习新技术，多借鉴竞品了解新技术探索新的交互模式分析竞品学习优秀之处最后想说的话2-重视用户反馈设计原型出炉后，多找用户试用、收集意见，反复打磨，创造精品PS.推荐书籍关于我产品经理酷拉皮卡的博客酷拉皮卡@酷拉皮卡酷拉皮卡