移动设计指南!界面交互方法与技巧超全总结_.docx

《移动设计指南!界面交互方法与技巧超全总结_.docx》由会员分享，可在线阅读，更多相关《移动设计指南!界面交互方法与技巧超全总结_.docx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、移动设计指南!界面交互方法与技巧超全总结_移动设计指南!界面交互方法与技巧超全总结移动设计指南!界面交互方法与技巧超全总结移动设计指南！界面交互方法与技巧超全总结二编者按：恶补交互基础知识第二版来咯！昨天刚出炉那篇关于交互信息架构的好文还温热着，不过为了同学们尽快完善交互知识体系，王笑Nothing趁热打铁把第二篇也译过来了，全文构造明晰，语言无比晓畅，插图全是私货，进来给你的梦想加点料吧！私货重要，经历也不要放过呦！（交互设计师修炼指南！教你从零开场成为优秀交互设计师）我的第一个手机是Nokia51101988年买的，它的功能非常少，所以我只用它来打打、玩玩贪食蛇。但是随着厂商不断的技术革新

2、，传统手机使用方式被完全颠覆了。如今我们都在使用大尺寸的触屏手机，并且出现了“应用商店的新型平台。设计师也受益于这个时代，所以尽快把握移动设计形式也成了我们的责任和义务。欢迎浏览（移动设计指南！怎样理解移动交互？），正如你所见，系列文章的第二篇。为了方便您的浏览，我在这里会交代一些（移动设计指南！怎样理解移动信息架构？一）的背景。第一篇文章中指出：设计师在移动设计面临的挑战主要有：观察使用环境、用户行为和情绪。由于这些差异会很大程度上影响我们的设计思路和研究经过，最终将会导致产品的形态。第一篇文章讨论了怎样在移动环境下进行信息架构探索。做好第一点将会为接下来的设计流程打下良好的基础。在继续讨论

3、交互理论前，非常有必要先让大家了解一下，移动设备的交互理念与桌面设备究竟有何差异。“设计交互现今，绝大多数移动设备使用触摸屏，这对我们来讲有好有坏。我们不仅能够使用设备来阅读内容，并且还能够与之交互。这就要求设计师考虑人体工程学，不停地模拟用户握持和操作手势，最终才能得出可用的交互形式。移动设计指南!界面交互方法与技巧超全总结移动设计指南!界面交互方法与技巧超全总结人体工程学人体工程学在移动设备中最需要注意的就是屏幕尺寸。用户握持的姿势、触摸的手势都影响着用户所能触及到的区域。点击区域需要足够大的面积，大到让用户非常自信不会点错最佳。手指尖通常1到2厘米宽，标准分辨率的屏幕大概44px到57p

4、x之间，在retina高分屏上大概88px到114px。诺基亚、苹果、微软等根据使用屏幕的不同推荐策略也不一样。当然对触摸面积没有硬性规定，寻找标准不是目的，为用户考虑，怎么样设计才能尽快完成他们的任务，就应该怎么设计。手势操作移动设备的屏幕可谓寸土寸金，怎样能通过手势实现不同的功能很值得研究。下面列举目前主流三大系统的基本操作形式。列表如下：移动设计指南!界面交互方法与技巧超全总结移动设计指南!界面交互方法与技巧超全总结此外，触屏设备的系统标准和操作形式也正处于不断发展之中，设计师要不断研究新的操作方式以适用于APP。过渡转场转场为了使不同界面切换愈加平滑顺畅，或暗示给用户一种新的可用手势操

5、作方式。一般而言，转场在APP中给用户指引方向，防止用户“迷路。基本的转场如下：移动设计指南!界面交互方法与技巧超全总结移动设计指南!界面交互方法与技巧超全总结以上仅列举少部分，还有非常多的转场效果我们能够选择。最佳选择标准是引入该转场能够促进交互的一致性。常见的形式正如第一部分所讲，相比桌面电脑，移动设备给设计师放置导航菜单空间更小。结合环境因素，例如恶劣的浏览条件使人分心。这就很难设计一种好的内容构造去让用户专注与内容。然而，有几种常见的交互形式迎接了这个挑战。怎样改良导航、内容选择、登陆/登出、表格显示的展现形式是我们所需要学习的重点。主导航主要或核心导航用视觉方式展现了我们网站或APP

6、的信息架构。下面有一些需要考虑的地方：展开式菜单ExpandingMenu很多移动和响应式网站使用这种展开式菜单作为导航。一般菜单的图标在页面头部，点击图标就会展开菜单列表。适用于:响应式网站。注意:太多的菜单项目会使本就拥挤的屏幕看起来愈加糟糕。移动设计指南!界面交互方法与技巧超全总结移动设计指南!界面交互方法与技巧超全总结星巴克响应网站展开式菜单侧滑菜单Sidemenu一些APP和网站都使用侧滑菜单。点击左上角的菜单图标，屏幕边缘就会滑出一块专门的菜单区域。菜单以列表可带分类的形式展现，并且还能够向下滚动查看更多。适用于：选项数目庞大的菜单。它创立一个单独的菜单区域，而不占用用户阅读内容的

7、空间。注意：必须确保它不与其它交互形式冲突，否则用户会产生迷茫的感觉。移动设计指南!界面交互方法与技巧超全总结移动设计指南!界面交互方法与技巧超全总结Facebook侧滑式菜单选项卡菜单TabbedMenu在APP的顶部或底部显示常驻的选项卡，用户能够通过点击切换选项。适用于：选项数目非常少的菜单，由屏幕宽度决定。注意:需要考虑Android和windowsphone8屏幕底部虚拟按键相互干扰的问题。移动设计指南!界面交互方法与技巧超全总结移动设计指南!界面交互方法与技巧超全总结亚马逊选项卡菜单辐射状菜单星型拓扑Hubandspokemenu一个集中的主页屏幕提供菜单可供用户选择。点击菜单项选择项后会进入它本人的内部导航形式。用户能够通过点击返回链接或按钮回到主页。适用于：直观反映了程序的功能。注意：对于辐射状菜单，假如用户希望在不同功能之间切换，主屏幕这个必经之路会使用户沮丧。