移动应用UI设计模式图示
移动应用UI设计模式:
1.导航设计模式:主要导航和次要导航模式。
![](https://img.haomeiwen.com/i60437/972691866ec5ae5f.jpg)
1)主菜单导航模式:
跳板式 Springboard
列表菜单式 List Menu
选项卡菜单式 Tab Menu
![](https://img.haomeiwen.com/i60437/3c1cd1ad292bef8b.png)
陈列馆式 Gallery
仪表式 Dashboard
隐喻式 Metaphor
超级菜单式 Mega Menu
![](https://img.haomeiwen.com/i60437/acfb22a737fb8ce2.png)
由生活信息分类切入社交,主菜单不能动,那就加个复式,叠加其上:
![](https://img.haomeiwen.com/i60437/87465bf930d2c951.png)
2)次级导航模式:
页面轮盘式 Page Carousel
图片轮盘式 Image Carousel
扩展列表式 Expanding List
3)主次导航混搭使用
![](https://img.haomeiwen.com/i60437/144f1a26e41d888b.png)
2.表单设计:通过表单实现良好的布局和内容输入。
登录表单
注册表单
核对表单
计算表单
搜索表单
多步骤表单
![](https://img.haomeiwen.com/i60437/534f35853241f598.png)
长表单
3.表格和列表的设计:通过表格和表单简明扼要地显示最重要的信息。
基本表格
无表头表格
固定列 表格
数据表格
![](https://img.haomeiwen.com/i60437/ff2f7e7592ff91f2.png)
带有内容总览和数据的表格
行分组表格
级联式列表
带有视觉指示器的表格
可编辑表格
4.搜索、分类和过滤:通过这些功能的易用性增强用户的主动性。
搜索
![](https://img.haomeiwen.com/i60437/a077564df4c37602.png)
分类
![](https://img.haomeiwen.com/i60437/c9d464bc5355fd83.png)
![](https://img.haomeiwen.com/i60437/c0f031132b866fa7.png)
过滤
5.工具的设计:良好的工具设计能营造出直接交互的使用体验。
工具栏
选项菜单
调用动作按钮
情境工具
内联操作
多状态按钮
批量操作
6.图表设计模式:让用户拥有控制大量数据内容的能力。
带过滤器的图表
带预览窗口的图表
总览加数据式图表
![](https://img.haomeiwen.com/i60437/0d3c6c9e1c93d9da.png)
数据点细节图
详细信息图
缩放图表
数据透视表
火花谱线图
7.视觉吸引:吸引用户并促使其发现产品功能。
对话框
提示
使用向导
视频演示
幻灯片
首次使用引导
持续视觉吸引
可发现的视觉吸引
8.控制与反馈:帮助用户执行操作,并及时提供反馈。
反馈
![](https://img.haomeiwen.com/i60437/d01c21d036a79de6.png)
出错信息
确认
![](https://img.haomeiwen.com/i60437/5635fd95c7979c99.png)
系统状态
功能可见性
9.帮助:真正为用户提供解决问题的方法,而不是告知用户问题是什么。
使用说明
界面元素说明
使用向导
10.反模式:移动应用设计中应该避免犯的错误。
标新立异
隐喻错位
愚蠢的对话框
图表垃圾
按钮海
![](https://img.haomeiwen.com/i60437/5c6a855052157903.png)
![](https://img.haomeiwen.com/i60437/bf270981768e02c1.png)
先列出来,后续上实际产品截图。
移动应用UI的新颖设计模式层出不穷,欢迎补充。