移动设计指南!界面交互方法与技巧超全总结(二)精选.pdfVIP

移动设计指南 ！界面交互方法与技巧超全总结 （二 ） 我的第一个手机是No kia 5110 （1988 买的 ），它的功能非常少 ，所以我只用它来打打电话、玩玩 贪食蛇。但是随着厂商不断的技术革新 ，传统手机使用方式被完全颠覆了。现在我们都在使用大尺 寸的触屏手机 ，并且出现了“应用商店”的新型平台。设计师也受益于这个时代 ，所以尽快掌握移动 设计模式也成了我们的责任和义务。 欢迎阅读 《移动设计指南 ！如何理解移动交互 ？》 ，正如你所见 ，系列文章的第二篇。为了方便您 的阅读 ，我在这里会交代一些 《移动设计指南 ！如何理解移动信息架构 ？（一 ）》的背景。第一篇 文章中指出 ：设计师在移动设计面临的挑战主要有 ：观察使用环境、用户行为和情绪。因为这些差 异会很大程度上影响我们的设计思路和研究过程 ，最终将会导致产品的形态。 第一篇文章讨论了如何在移动环境下进行信息架构探索。做好第一点将会为接下来的设计流程打下 良好的基础。在继续讨论交互理论前 ，非常有必要先让大家了解一下 ，移动设备的交互理念与桌面 设备究竟有何差别。 “设计”交互 现今 ，绝大多数移动设备使用触摸屏 ，这对我们来说有好有坏。我们不仅可以使用设备来浏览内容 ，并且还可以与之交互。这就要求设计师考虑人体工程学 ，不停地模拟用户握持和操作手势 ，最终 才能得出可用的交互模式。 人体工程学 人体工程学在移动设备中最需要注意的就是屏幕尺寸。用户握持的姿势、触摸的手势都影响着用户 所能触及到的区域。 点击区域需要足够大的面积 ，大到让用户非常自信不会点错最佳。手指尖通常1到2厘米宽 ，标准分 辨率的屏幕大概44 px到57px之间 ，在ret ina高分屏上大概88px到114 px。诺基亚、苹果、微软等根 据使用屏幕的不同推荐策略也不相同。 当然对触摸面积没有硬性规定 ，寻找标准不是目的 ，为用户考虑 ，怎么样设计才能尽快完成他们的 任务 ，就应该怎么设计。 手势操作 移动设备的屏幕可谓寸土寸金 ，如何能通过手势实现不同的功能很值得研究。下面列举目前主流三 大系统的基本操作模式。 列表如下 ： 此外 ，触屏设备的系统标准和操作模式也正处于不断发展之中 ，设计师要不断研究新的操作方式以 适用于A PP。 过渡转场 转场为了使不同界面切换更加平滑顺畅 ，或暗示给用户一种新的可用手势操作方式。一般而言 ，转 场在A PP中给用户指引方向 ，防止用户“迷路”。 基本的转场如下 ： 以上仅列举少部分 ，还有非常多的转场效果我们可以选择。最佳选择标准是引入该转场可以促进交 互的一致性。 常见的模式 正如第一部分所说 ，相比桌面电脑 ，移动设备给设计师放置导航菜单空间更小。结合环境因素 ，例 如恶劣的阅读条件使人分心。这就很难设计一种好的内容结构去让用户专注与内容。 然而 ，有几种常见的交互模式迎接了这个挑战。如何改进导航、内容选择、登陆/登出、表格显示的 展现形式是我们所需要学习的重点。 主导航 主要 （或核心 ）导航用视觉方式展现了我们网站或A PP的信息架构。以下有一些需要考虑的地方 ： 展开式菜单 （Expanding Menu ） 许多移动和响应式网站使用这种展开式菜单作为导航。 一般菜单的图标在页面头部 ，点击图标就会 展开菜单列表。 适用于: 响应式网站。 注意: 过多的菜单项目会使本就拥挤的屏幕看起来更加糟糕。 星巴克响应网站展开式菜单 滑菜单 （ ide menu ） 一些A PP和网站都使用侧滑菜单。点击左上角的菜单图标 ，屏幕边缘就会滑出一块专门的菜单区域 。菜单以列表 （可带分类 ）的形式展现 ，并且还可以向下滚动查看更多。 适用于 ：选项数目庞大的菜单。它创建一个单独的菜单区域 ，而不占用用户浏览内容的空间。 注意 ：必须确保它不与其它交互模式冲突 ，否则用户会产生迷茫的感觉。 Faceboo k 侧滑式菜单 选项卡菜单 （Tabbed Menu ） 在A PP的顶部或底部显示常驻的选项卡 ，用户可以通过点击切换选项。 适用于 ：选项数目非常少的菜单 ，由屏幕宽度决定。 注意: 需要考虑A ndro id和w indows pho ne 8 屏幕底部虚拟按键互相干扰的问题。 亚马逊选项卡菜单 辐射状菜单 （星型拓扑Hub and s po ke menu ） 一个集中的主页屏幕提供菜单可供用户选择。点击菜单选项后会进入它自己的内部导航模式。用户 可以通过点击返回链接或按钮回到主页。 适用于 ：直观反映了程序的功能。 注意 ：对于辐射状菜单 ，如果用户希望在不同功能之间切换 ，主屏幕这个必经之路会使用户