美文网首页@产品产品经理读书笔记
几种最常见移动设计模式盘点

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

作者: 张二蛙 | 来源:发表于2018-06-17 18:06 被阅读9次

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

    导航类

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

    桌面式

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


    导航模式-桌面式

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

    iphone 主屏布局

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


    windows phone 主屏布局

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

    列表式

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


    导航模式-列表式

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

    选项卡式

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


    导航模式-选项卡式

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

    图库式

    适合承载大面积图片


    导航模式-图库式

    表单类

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

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

    引导&反馈类

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

    引导

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

    引导模式-“明示”

    Tips

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

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


    引导模式-“暗示”

    反馈

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


    反馈模式

    参考资料

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

    相关文章

      网友评论

        本文标题:几种最常见移动设计模式盘点

        本文链接:https://www.haomeiwen.com/subject/wxmweftx.html