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

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

作者: 张二蛙 | 来源:发表于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

相关文章

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

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

  • APP导航设计

    良好的APP导航设计模式决策对整个app的核心体验起到关键作用。几种常见的移动APP导航设计模式对比图。 ☆ AP...

  • 导航模式(笔记)

    整理来源:几种常见移动导航模式详析 常用移动导航模式.mmap_微盘下载

  • 设计模式

    常用的设计模式:单例模式,工厂模式,观察者模式,代理模式,其他的我使用不多。单例模式最常见也最简单分为几种实现:懒...

  • Java的常用设计模式详解

    引言 说起设计模式,很多编程语言的设计模式大同小异,而且设计模式很多,这里介绍一下java的几种常见的设计模式,其...

  • iOS设计模式 都在这里哈

    这里呢 主要向大家介绍一下三种设计模式中几种常见的设计模式设计模式大概分为三大类:一. 创建型: 单例设计模式 抽...

  • 移动端设计模式——常见的几种导航形式

    在移动端,导航是APP最重要的区别。根据不同的内容,选择不同的导航方式。没有完美的导航,只有合适的导航。根据具体的...

  • 常见的几种设计模式

    iOS开发学习中,经常弄不清楚iOS的开发模式,今天我们就来进行简单的总结和探讨~ 一 、代理模式 应用场景:当一...

  • 几种常见的设计模式

    学习程序设计模式 1. 单例设计模式 过于简单无脑, 就是依靠类中的静态属性 2. 观察者模式 (Observe)...

  • JAVA几种常见设计模式

    一、工厂模式 1.1、场景解析 定义一个对象,根据子类唯一标识,获取对应的实现进行业务操作 1.2、使用示例 以下...

网友评论

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

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