移动应用UI设计模式图示
移动应用UI设计模式:
1.导航设计模式:主要导航和次要导航模式。

1)主菜单导航模式:
跳板式 Springboard
列表菜单式 List Menu
选项卡菜单式 Tab Menu

陈列馆式 Gallery
仪表式 Dashboard
隐喻式 Metaphor
超级菜单式 Mega Menu

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

2)次级导航模式:
页面轮盘式 Page Carousel
图片轮盘式 Image Carousel
扩展列表式 Expanding List
3)主次导航混搭使用

2.表单设计:通过表单实现良好的布局和内容输入。
登录表单
注册表单
核对表单
计算表单
搜索表单
多步骤表单

长表单
3.表格和列表的设计:通过表格和表单简明扼要地显示最重要的信息。
基本表格
无表头表格
固定列 表格
数据表格

带有内容总览和数据的表格
行分组表格
级联式列表
带有视觉指示器的表格
可编辑表格
4.搜索、分类和过滤:通过这些功能的易用性增强用户的主动性。
搜索

分类


过滤
5.工具的设计:良好的工具设计能营造出直接交互的使用体验。
工具栏
选项菜单
调用动作按钮
情境工具
内联操作
多状态按钮
批量操作
6.图表设计模式:让用户拥有控制大量数据内容的能力。
带过滤器的图表
带预览窗口的图表
总览加数据式图表

数据点细节图
详细信息图
缩放图表
数据透视表
火花谱线图
7.视觉吸引:吸引用户并促使其发现产品功能。
对话框
提示
使用向导
视频演示
幻灯片
首次使用引导
持续视觉吸引
可发现的视觉吸引
8.控制与反馈:帮助用户执行操作,并及时提供反馈。
反馈

出错信息
确认

系统状态
功能可见性
9.帮助:真正为用户提供解决问题的方法,而不是告知用户问题是什么。
使用说明
界面元素说明
使用向导
10.反模式:移动应用设计中应该避免犯的错误。
标新立异
隐喻错位
愚蠢的对话框
图表垃圾
按钮海


先列出来,后续上实际产品截图。
移动应用UI的新颖设计模式层出不穷,欢迎补充。