移动应用UI设计模式图示

移动应用UI设计模式：

1.导航设计模式：主要导航和次要导航模式。

7种菜单导航

1）主菜单导航模式：

跳板式 Springboard

列表菜单式 List Menu

选项卡菜单式 Tab Menu

底部主菜单+顶部二三级菜单

陈列馆式 Gallery

仪表式 Dashboard

隐喻式 Metaphor

超级菜单式 Mega Menu

注意底部右侧：类微信图标

由生活信息分类切入社交，主菜单不能动，那就加个复式，叠加其上：

底部复合式菜单

2）次级导航模式：

页面轮盘式 Page Carousel

图片轮盘式 Image Carousel

扩展列表式 Expanding List

3）主次导航混搭使用

底部选项卡+跳板式

2.表单设计：通过表单实现良好的布局和内容输入。

登录表单

注册表单

核对表单

计算表单

搜索表单

多步骤表单

注册->设置密码多步骤表单

长表单

3.表格和列表的设计：通过表格和表单简明扼要地显示最重要的信息。

基本表格

无表头表格

固定列 表格

数据表格

糖护士：数据表格

带有内容总览和数据的表格

行分组表格

级联式列表

带有视觉指示器的表格

可编辑表格

4.搜索、分类和过滤：通过这些功能的易用性增强用户的主动性。

搜索

顶栏：基于所在小区周边的搜索

分类

芙蓉兴盛的分类

MUJI Passport的搜索+分类

过滤

5.工具的设计：良好的工具设计能营造出直接交互的使用体验。

工具栏

选项菜单

调用动作按钮

情境工具

内联操作

多状态按钮

批量操作

6.图表设计模式：让用户拥有控制大量数据内容的能力。

带过滤器的图表

带预览窗口的图表

总览加数据式图表

微糖图表

数据点细节图

详细信息图

缩放图表

数据透视表

火花谱线图

7.视觉吸引：吸引用户并促使其发现产品功能。

对话框

提示

使用向导

视频演示

幻灯片

首次使用引导

持续视觉吸引

可发现的视觉吸引

8.控制与反馈：帮助用户执行操作，并及时提供反馈。

反馈

医护到家：用户第一次使用名医挂号时的引导提示

出错信息

确认

微信读书使用微信登录与退出，退出时的告知确认

系统状态

功能可见性

9.帮助：真正为用户提供解决问题的方法，而不是告知用户问题是什么。

使用说明

界面元素说明

使用向导

10.反模式：移动应用设计中应该避免犯的错误。

标新立异

隐喻错位

愚蠢的对话框

图表垃圾

按钮海

按钮海 ：每个角落都藏着各式各样的按钮(文字、图标、button)

按钮海：适合左右手使用习惯的统一样式的按钮布局

先列出来，后续上实际产品截图。

移动应用UI的新颖设计模式层出不穷，欢迎补充。