几种最常见移动设计模式盘点
2018-06-17 本文已影响9人
张二蛙
本文盘点几种常见的移动交互模式（pattern），掌握了这些pattern的特点，有助于选择适合的交互。
导航类
导航好比指路牌，通过它，用户知道了往哪里走。
桌面式
所谓桌面式，菜单入口通常以 MxN 排布在屏幕上。看一眼你的手机主屏就懂了。
导航模式-桌面式
无主次之分：每个区块面积相当
iphone 主屏布局
有主次之分：面积越大越醒目
windows phone 主屏布局
Tips
多数情境下，使用桌面式导航，需要考虑给用户留出增删移的自定义空间
列表式
跟桌面式导航以图为主不同，列表式通常是为了容纳长标题（甚至摘要、缩略图等）
导航模式-列表式
Tips
列表式导航往往需要考虑索引及排序的问题
选项卡式
选项卡式就是我们常说的“tab导航”，这个几乎无处不在。
导航模式-选项卡式
Tips
在利用选项卡式时，一定要注意选项卡的“作用域”的问题
图库式
适合承载大面积图片
导航模式-图库式
表单类
表单类属于“用户输入类”交互，常见的组件有：
- 单行输入框
- 多行输入框
- 单选框
- 复选框
- 按钮
- 各类输入控件
- 上传文件
- 选择日期
- ……
表单组件模式举例
引导&反馈类
最后要说的是引导&反馈类的常见交互模式
引导
可以使用明示性质的引导，例如下面是常见的帮助环节的设计模式。
引导模式-“明示”
Tips
- 保持引导文案简洁明快
- 注意提示文案消失的机制，例如手指触摸屏幕任意区域时
除了“明示”用户，更多地，应该利用“约定俗成”的规则，给用户以“暗示”，例如下面的例子。
引导模式-“暗示”
反馈
反馈是为了给予用户控制感和确定性。应该随时随地自问，当下的场景是否给了用户足够的反馈，让Ta知道当下发生了什么、到了什么进程、下一步将会是什么。
反馈模式
参考资料
- Neil, Theresa.Mobile Design Pattern Gallery
- Website Flowchart & Sitemap
