移动应用UI设计模式摘录汇总

简介: 版权声明:本文为半吊子子全栈工匠(wireless_com,同公众号)原创文章,未经允许不得转载。
版权声明:本文为半吊子子全栈工匠(wireless_com,同公众号)原创文章,未经允许不得转载。 https://blog.csdn.net/wireless_com/article/details/9260659


移动应用用户界面的一般功能元素包括:导航,表单,表格和列表,搜索和分类,工具,图表,视觉吸引,反馈和帮助。

常见的导航包括跳板式(包括九宫格),列表菜单,选项菜单,陈列馆式,仪表式,隐喻式和超级菜单,在次级导航中也会用到页面轮盘,图片轮盘和扩展列表。跳板式又叫 launchpad ,同等重要内容使用网格布局,但并不拘泥于网格布局。而列表菜单也包括个性化列表,分组列表,增强列表等,适合显示较长或拥有次级文字内容的标题。使用易于识别或带有标签的图标为已选择的菜单项设置不同的效果,用户就能清晰地制度自己选择了哪一项。 陈列馆式能很好地应用于用户需要经常浏览,频繁更新的内容。不要使用过多的仪表式设计,谨慎引用隐喻式导航。在选用导航前,首先要确定信息架构,如果导航对象仅是应用中的少数内容,就可以使用选项菜单。所有主要导航同样适用于次级导航,对次级导航而言,页面轮盘可以很好地实现少量页面导航,图片轮盘用于展现艺术品,产品和照片。

常见的表单包括:登陆表单,注册表单,核对表单,计算表单,搜索表单,多步骤表单,和长表单。表单的参考文献包括:
forms on Mobile device: modern solutions (http;//WWW.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/)
Mobile Form Design Strategies(http://www.uxbooth.com/blog/mobile-form-design-strategies)
不要独创登陆表单,采用常见的设计方案,最好提供取回以忘记密码的方式。注册页面要简洁明了,一屏内显示完所有要填的信息。不要让太多的搜素选项吓到用户,把搜索条件控制在一页之内。把提升速度、效率和让用户放心作为设计目标,去掉不必要的输入域,减少页面和操作步骤,不要认为地把表单划分成一些步骤来避免屏幕的滚动。

常见的表格包括:基本表格,无表头表格,行分组表格,固定列表格,级联列表,可编辑表格,带有视觉指示器的表格,带有内容总览和数据的表格等。表格不要使用暗色的网格线和垂直分割方式,文字左对齐,数字右对齐,一屏内显示的表格内容不宜过多。每一宽行内最多显示3行信息,为固定的列设计比较醒目的样式,以提示用户,滑动操作能浏览更多的数据。表格内容总览应该显示在数据上方,且要一目了然。使用那些用户能够迅速识别的视觉指示器,去掉不必要的图标。

常见的数据分类包括:显性搜索,自动补全搜索,范围搜索,显示最近搜索内容,屏内分类,分类排序选择器,分类表单,屏内过滤,过滤容器,过滤对话框和过滤表单。对应有限的数据,动态过滤比较有效;对于范围搜索,3~6个范围选项足以。标明已找到搜索结果的总项数,使用延迟加载,而不是分页显示的方式。过滤器选项的用词应该清晰无误,易于理解,使用简短的过滤选项列表,避免滚屏。

常见的操作栏包括:工具栏,重叠菜单,情境工具,内联操作,调用操作按钮,批量操作。工具栏通常显示在屏幕底端,包含有屏幕级的操作。不要把主要操作隐藏在菜单中,也不能将其设计成无法识别的工具栏图标。每个对象最多有1~2种内联操作。多状态按钮既是触发器也是一种反馈机制,适合在一系列联系紧密,在有限屏幕空间连续执行内的操作,诸如删除和重新排序之类的批量操作最好在编辑模式下进行。

常见的图表包括:带过滤器的图表,总览加数据的图表,滚动预览图表,数据点细节图,详细信息图,缩放图,数据透视图和火花谱线图。如果要提供基于时间的过滤控制,一定要为触摸点击对象保留足够的屏幕空间。图表的特性取决于预览窗口是只读的还是可交互的。如果是可交互的预览窗口,使用较大的触摸对象更易于用户的操作。测试图表有三个主要内容:主题是什么?那些信息最重要?最重要信息的具体数值是多少?吸引用户查看更多的数据,使用导航显示层级结构。结合火花谱线和详细信息图来显示所有细节内容。

视觉吸引包括:对话框,提示,使用向导,视频演示,幻灯片,首次使用引导,持续视觉吸引和可发现的视觉吸引。对话框的内容一定要言简意赅,确保用户可以通过其他方式访问程序的使用说明。提示要尽可能地接近它所指向的内容。使用向导能够从用户使用目标的角度出发,突出应用的主要功能,视频演示可以展示应用的关键功能。保持持续视觉吸引元素的简洁,鼓励用户去刷新数据。
常见的反馈包括:出错,确认,系统状态。用纯文字的形式提供解决问题的办法,尽量不要使用模式对话框。当用户执行某项操作时,提示确认信息,但不要打断用户使用产品的过程。
常见功能可见性包括:触摸,滑动,拖拽。斜角和阴影等视觉设计技巧能让界面元素看上去是可触摸的。拖到手柄的图标一定要易于识别。
常见的帮助模式包括:使用说明,界面元素说明,使用向导。在使用说明中综合使用屏幕截图,插图和文本等多种形式。使用向导所包含的应该是应用中最关键的功能,最好从用户的使用目标开始。

移动应用用户界面的设计核心:直接了当和轻量化设计。
目录
相关文章
|
4月前
|
设计模式 编解码 API
Flutter UI设计模式与实现:深入探索与实践
【7月更文挑战第20天】Flutter以其独特的声明式UI模式和丰富的UI组件库,为移动应用开发提供了强大的支持。通过深入理解Flutter的UI设计模式和实现技巧,开发者可以构建出高性能、可维护性强的UI界面。同时,随着Flutter生态的不断完善和发展,相信未来Flutter将在移动应用开发领域发挥更加重要的作用。
|
4月前
|
数据可视化 UED
移动应用的UI/UX设计原则与实践
【7月更文挑战第2天】移动应用UI/UX设计聚焦简约、一致性与用户中心原则。关键在于理解用户需求,创建清晰的视觉层次,实现响应式布局。UX关注反馈速度、情感连接及无障碍访问。通过用户调研、原型测试和持续迭代,提升满意度和产品竞争力。
|
6月前
|
设计模式
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
143 0
HMI-34-【运动模式】实现运动模式的UI上电逻辑控制
今天这界面上没有实际的增加,仅仅是实把运动模式UI上电控制逻辑实现了一下,其实到这个模块的时候,就会发现之前在写舒适模式的时候的一些问题了,有好内容可以抽象出来了,不用每次都实现一遍了。不过现在还比较懒,还是先以实现为主,和面的内容放在优化里面。废话不多说,开始搞事情。不过为了吸你们开下去,现在把目前进度放在了。
|
设计模式 机器学习/深度学习 算法
软件测试|测试开发之路--UI 自动化常用设计模式
软件测试|测试开发之路--UI 自动化常用设计模式
软件测试|测试开发之路--UI 自动化常用设计模式
|
Web App开发 测试技术
Chrome-headless 模式,没有UI界面的自动化UI测试
Chrome-headless 模式,没有UI界面的自动化UI测试
Chrome-headless 模式,没有UI界面的自动化UI测试
|
XML 前端开发 定位技术
Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)
Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)
407 0
Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)
|
存储 设计模式 测试技术
浅谈UI自动化必备的PO模式
PO模式的全名叫做page Object:页面-对象模式。简单的说就是:一个页面是一个类,元素在页面中,所以每个元素的定位信息是这个类中的一个变量;这个页面的常规业务操作是这个类中的一个个成员方法。PO模式是自动化测试框架中很重要的一种设计模式。
1322 1
浅谈UI自动化必备的PO模式
|
设计模式 测试技术 数据安全/隐私保护
软件测试|PO设计模式在 UI 自动化中的实践
软件测试|PO设计模式在 UI 自动化中的实践
|
设计模式 测试技术 API
PageObject(PO)设计模式在 UI 自动化中的实践总结(以 QQ 邮箱登陆为例)
PageObject(PO)设计模式在 UI 自动化中的实践总结(以 QQ 邮箱登陆为例)