移动设计指南!界面交互方法与技巧超全总结(二)_图文.doc

人体工程学 人体工程学在移动设备中最需要注意的就是屏幕尺寸。用户握持的姿势、触摸的手势都影响着用户 所能触及到的区域。 点击区域需要足够大的面积,大到让用户非常自信不会点错最佳。手指尖通常 1到 2厘米宽,标准分 辨率的屏幕大概 44px 到 57px 之间,在 retina 高分屏上大概 88px 到 114px 。诺基亚、苹果、微软等根 据使用屏幕的不同推荐策略也不相同。 当然对触摸面积没有硬性规定,寻找标准不是目的,为用户考虑,怎么样设计才能尽快完成他们的 任务,就应该怎么设计。 手势操作 移动设备的屏幕可谓寸土寸金,如何能通过手势实现不同的功能很值得研究。下面列举目前主流三 大系统的基本操作模式。 列表如下: 此外,触屏设备的系统标准和操作模式也正处于不断发展之中,设计师要不断研究新的操作方式以 适用于 APP 。 过渡转场 转场为了使不同界面切换更加平滑顺畅,或暗示给用户一种新的可用手势操作方式。一般而言,转 场在 APP 中给用户指引方向,防止用户 “ 迷路 ” 。 基本的转场如下: 以上仅列举少部分,还有非常多的转场效果我们可以选择。最佳选择标准是引入该转场可以促进交 互的一致性。 常见的模式 正如第一部分所说,相比桌面电脑,移动设备给设计师放置导航菜单空间更小。结合环境因素,例 如恶劣的阅读条件使人分心。这就很难设计一种好的内容结构去让用户专注与内容。 然而,有几种常见的交互模式迎接了这个挑战。如何改进导航、内容选择、登陆 /登出、表格显示的 展现形式是我们所需要学习的重点。 主导航 主要(或核心导航用视觉方式展现了我们网站或 APP 的信息架构。以下有一些需要考虑的地方:展开式菜单(Expanding Menu 许多移动和响应式网站使用这种展开式菜单作为导航。 一般菜单的图标在页面头部,点击图标就会 展开菜单列表。 适用于 : 响应式网站。 注意 : 过多的菜单项目会使本就拥挤的屏幕看起来更加糟糕。 星巴克响应网站展开式菜单 侧滑菜单(Side menu 一些 APP 和网站都使用侧滑菜单。点击左上角的菜单图标,屏幕边缘就会滑出一块专门的菜单区域 。菜单以列表(可带分类的形式展现,并且还可以向下滚动查看更多。 适用于:选项数目庞大的菜单。它创建一个单独的菜单区域,而不占用用户浏览内容的空间。 注意:必须确保它不与其它交互模式冲突,否则用户会产生迷茫的感觉。 Facebook 侧滑式菜单 选项卡菜单(Tabbed Menu 在 APP 的顶部或底部显示常驻的选项卡,用户可以通过点击切换选项。 适用于:选项数目非常少的菜单,由屏幕宽度决定。 注意 : 需要考虑 Android 和 windows phone 8 屏幕底部虚拟按键互相干扰的问题。 亚马逊选项卡菜单 辐射状菜单(星型拓扑 Hub and spoke menu 一个集中的主页屏幕提供菜单可供用户选择。点击菜单选项后会进入它自己的内部导航模式。用户 可以通过点击返回链接或按钮回到主页。 适用于:直观反映了程序的功能。 注意:对于辐射状菜单,如果用户希望在不同功能之间切换,主屏幕这个必经之路会使用户沮丧。 领英仪表板菜单 内容选择形式 如果你的设计可以很轻松的让用户单手操作,这点就会让你的产品增加不少转化率。 点击(Press to move forward 选择分类,查看相关文章,然后再选择与本篇内容相关的文章,这就是渐进式导航的精髓。 适用于:内容主导型的网站。 注意:跳转多次页面之后用可能会不知道当前所处位置。 BBC 新闻 滚动效果(Coverflow 用户可以水平滚动预览项目,点击可以进入。 Win8的 Metro 风格程序也是如此。 适用于:选项数目庞大的菜单。它创建一个单独的菜单区域,而不占用用户浏览内容的空间。 注意:必须确保它不与其它交互模式冲突,否则用户会产生迷茫的感觉。 应用商店 翻页效果(Flip over / Peel back 如果你想进一步了解正在浏览的内容,或你正要进行的设置,那么翻页效果是很好的选择。 适用于:两个相关的内容,比如进行设置或查看信息详情。 注意:会让你的交互方式过于复杂,用户也容易对导航结构感到困惑。 iOS 苹果地图 登陆和注册 登陆和注册对于 APP 必不可少,所以我们应该尽可能把过程设计的简单方便。 自动登陆 用户信息首次登陆就自动保存在 APP 内,以后打开 APP 会自动登陆,并更新主页最新消息。这也是 在许多社交 APP 最常见的模式,例如:Facebook 、 Instagram 、 Twitter 。 适用于:必须登陆才能进入主页查看信息,但对安全要求不是很高。 注意:只适用于对信息安全要求不高的 APP 。 Instagram 保存账号