几种最常见移动设计模式盘点

本文盘点几种常见的移动交互模式(pattern),掌握了这些pattern的特点,有助于选择适合的交互。

导航类

导航好比指路牌,通过它,用户知道了往哪里走。

桌面式

所谓桌面式,菜单入口通常以 MxN 排布在屏幕上。看一眼你的手机主屏就懂了。


导航模式-桌面式

无主次之分:每个区块面积相当

iphone 主屏布局

有主次之分:面积越大越醒目


windows phone 主屏布局

Tips
多数情境下,使用桌面式导航,需要考虑给用户留出增删移的自定义空间

列表式

跟桌面式导航以图为主不同,列表式通常是为了容纳长标题(甚至摘要、缩略图等)


导航模式-列表式

Tips
列表式导航往往需要考虑索引及排序的问题

选项卡式

选项卡式就是我们常说的“tab导航”,这个几乎无处不在。


导航模式-选项卡式

Tips
在利用选项卡式时,一定要注意选项卡的“作用域”的问题

图库式

适合承载大面积图片


导航模式-图库式

表单类

表单类属于“用户输入类”交互,常见的组件有:

  • 单行输入框
  • 多行输入框
  • 单选框
  • 复选框
  • 按钮
  • 各类输入控件
    • 上传文件
    • 选择日期
    • ……
表单组件模式举例

引导&反馈类

最后要说的是引导&反馈类的常见交互模式

引导

可以使用明示性质的引导,例如下面是常见的帮助环节的设计模式。

引导模式-“明示”

Tips

  • 保持引导文案简洁明快
  • 注意提示文案消失的机制,例如手指触摸屏幕任意区域时

除了“明示”用户,更多地,应该利用“约定俗成”的规则,给用户以“暗示”,例如下面的例子。


引导模式-“暗示”

反馈

反馈是为了给予用户控制感和确定性。应该随时随地自问,当下的场景是否给了用户足够的反馈,让Ta知道当下发生了什么、到了什么进程、下一步将会是什么。


反馈模式

参考资料

  1. Neil, Theresa.Mobile Design Pattern Gallery
  2. Website Flowchart & Sitemap

你可能感兴趣的:(几种最常见移动设计模式盘点)