浅谈移动应用设计模式

全局导航——隐喻式（拟物式）
1、隐喻式导航主要应用于游戏设计 中。 2、隐喻式导航的使用必须非常谨慎。
瞬时导航
• 瞬时导航菜单只在我们需要的时候才显示出来，在我们做出选择 后，它会再次消失
• 瞬时导航出现的原因是手机屏幕尺寸十分有限，需要“打破（屏 幕）的框架”
瞬时导航——侧边抽屉式
1、侧边抽屉的设计可以多样化，但 切忌不要让它承载太多功能。抽屉的 首要功能是展示主导航选项。 2、抽屉可以在左侧或者右侧，也可 以两侧都有，但不应在顶部或底部， 这两个位置会和系统的手势操作冲突。
全局导航——仪表盘式
1、需要使用关键指标或数据作为 应用入口的时候时候，可以采用 仪表盘式。
全局导航——陈列馆式
1、陈列馆式设计是最适合呈现经常更 新的、视觉效果直观的无层级内容
全局导航——选项卡菜单式
1、iOS系统中的标签栏在底部，限制 在5个选项卡以内。 2、常用的行为召唤按钮可以放置于 标签栏，并进行突出。 3、新生模式之一：滑动浏览内容时， 标签栏进行隐藏 4、新生模式之二：可配置选项卡 （类似于网络浏览器的标签页） 5、反模式：标签栏置于侧边
无表头表格
1、无表头表格适合用来显示项目集 合，也适合显示搜索结果。 2、去除噪音（图标和边框等所多余 的视觉元素），并设计精确对齐的表 格以方便浏览。 3、在不那么重要的细节上使用较小 和颜色较浅的字体。 4、不要猜测最重要的信息是什么， 要征询客户的意见，然后通过测试确 定该项设计。
固定列表格
• 次级导航模式
翻页式、滚动选项卡式、伸缩面板式
全局导航
• 全局导航包括列表菜单式、选项卡菜单式等简单的菜单结构。只 要打开有全局导航的应用，主导航的各个选项立刻一目了然。
• 什么时候使用全局导航？
1. 你的应用层次是否“扁平”？应用的菜单分类是同级的还是有优先级的？主要类别是否 只有少数几个?
2. 你的用户是否需要菜单一直处于可见状态以便快速访问？ 3. 菜单分类有无状态指示，比如未读邮件数？
注册表单
1、注册表单要简短，表单长度最好在 一屏之内。 2、操作按钮要放在可视范围内。 3、清楚地说明输入要求。 4、实时反馈：
输入信息反馈； 注册结果反馈。
多步骤表单
1、向用户显示他们当前所处的 位置和下一步，但不要使用拥 挤的进程栏。 2、去掉不必要的输入字段，最 小化页面的数量和步骤数量。
全局导航——跳板式
1、菜单选项是进入各个应用的起点 2、优点：跨平台 3、缺点：全部选项扁平化，没有任 何优先级
全局导航——卡片式
1、原型为扑克牌 2、展示内容的一种优雅方案
全局导航——列表菜单式
1、每一个列表项都是进入该应用 的各项功能的入口；模块之间的 切换需要返回到列表主页。 2、设计层级结构的应用导航模式 时可以考虑使用该方式。 3、这种模式对于列表项名称较长 的菜单和列表项既要有名称又要 有描述的菜单都同样适用。
1、对于较大表格的解决方案。 2、要通过视觉引导，让用户知道 可以通过滑动查看更多的列。 3、默认显示最重要的列。
次级导航——翻页模式
1、这种模式可以通过滑动手势快速 导航内容页。表现这种导航模式的最 常见方式是利用页面指示器。卡片隐 喻也同样适用于页面。 2、运用翻页式时要利用移动的手势 控制，不要依赖像下一步按钮或标签 页这类桌面端模式。
次级导航——滚动选项卡式
1、在一个模块中显示多种类别或 视图时，这种模式非常有用。 2、滚动选项卡可用来对结果进行 筛选。 3、如果使用这种模式，需确保界 面设计清晰地指示出选中的标签项。
浅谈移动应用设计模式
写在前面的话
1、本次分享更像是一次读书总结，对最常用的 六部分进行了整理。 2、将书中的案例以我们常用的APP进行了替换。
第一篇 导航模式
导航的三种模式
• 主导航模式——全局导航
跳板式、列表菜单式、仪表盘式、陈列馆式、选项卡式
• 主导航模式——瞬时导航
侧边抽屉式、下拉菜单式、转盘菜单式
次级导航——折叠菜单时
1、又称为手风琴式，该模式能使用 户在同一页面上看到更多的信息。 2、这种模式比跳转到另一页面在跳 回去更高效。
第二篇 表单及表格模式
表单设计综述
多数网页应用都大量依赖表单实现数据输入和配置。 但糟糕的表单的设计还是充斥网络，表单流失是一个非常严重、代 价高昂的问题。 对于移动端，由于狭小的屏幕和受限的输入方式，糟糕的移动表单 设计没有任何留存的余地。
结账表单
1、同时提供登录、注册和客人用 户选项。 2、简化流程。 3、提供省时的快捷方式。 4、提供快速结账方式。 5、忘掉网页端。
表格设计模式
• 基本表格 • 无表头表格 • 固定列表格 • 概览加数据型表格 • 行分组表格 • 带有视觉指示器的表格 • 可编辑表格
基本表格
1、不要使用深色的网格线。 2、如果不使用垂直网格线的话， 要确保对去。文字左对齐，数字右 对齐。 3、如果要在一屏内显示大量信息， 请考虑采用其它的表格模式。
瞬时导航——下拉菜单式
1、下拉菜单式的一个重要规则是， 无论什么样的手势，都能打开菜单， 比如点击、轻滑、平移。同样，隐藏 菜单也是这样的。 2、不要让菜单覆盖整个屏幕，要把 背景露出来一点。点击背景的任一位 置时，同样可以隐藏菜单。
瞬时导航——转盘菜单式
次级导航
• 是指在一个选中的模块内活动的导航 • 所有主导航模式都同样可以用作次级导航模式
表单设计模式
• 登录表单 • 注册表单 • 结账表单 • 计算表单 • 多步骤表单 • 长表单
登录表单
1、登录表单应该包含尽可能少的 输入：用户名、密码、操作按钮、 密码帮助以及注册选项 2、可以考虑第一个输入框自动获 取焦点 3、可切换是否明文显示密码 4、支持第三方登录 5、将登录（注册）选项放在引导 页上，便于用户在对引导产生兴趣 时可以轻松登录（注册）
长表单
1、不要特意把表单分割成多页步骤。 2、放弃任何没有必要的输入字段。 3、按钮位置的设定要遵守操作系统 规范。
Leabharlann Baidu
计算表单
1、计算器表单布局应该使用 标准化表单设计。 2、在符合应用使用场景的情 况下，增加交互可视化。
搜索表单
1、搜索表单要短而简单，搜索条 件尽量控制在一页内或更少。 2、提供合理的默认值和保存搜索 的选项。