移动应用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月前
|
设计模式
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
HMI-34-【运动模式】实现运动模式的UI上电逻辑控制
今天这界面上没有实际的增加,仅仅是实把运动模式UI上电控制逻辑实现了一下,其实到这个模块的时候,就会发现之前在写舒适模式的时候的一些问题了,有好内容可以抽象出来了,不用每次都实现一遍了。不过现在还比较懒,还是先以实现为主,和面的内容放在优化里面。废话不多说,开始搞事情。不过为了吸你们开下去,现在把目前进度放在了。
|
6月前
|
自然语言处理 测试技术 API
关于 SAP Commerce Cloud UI 的混合部署模式
关于 SAP Commerce Cloud UI 的混合部署模式
39 0
|
6月前
SAP UI5 sap.m.Table 实现响应式布局的两种配置模式
SAP UI5 sap.m.Table 实现响应式布局的两种配置模式
46 0
|
7月前
|
存储 API
SAP 电商云 Spartacus UI 的交货模式 Delivery Mode 设计
SAP 电商云 Spartacus UI 的交货模式 Delivery Mode 设计
34 0
|
7月前
|
Web App开发 开发者
为什么 SAP 电商云 Spartacus UI SSR 模式下的客户端应用,不会发起 product 请求
为什么 SAP 电商云 Spartacus UI SSR 模式下的客户端应用,不会发起 product 请求
32 0
|
7月前
SAP 电商云 Spartacus UI 客户端模式下从服务器端渲染模式接收到的状态转移
SAP 电商云 Spartacus UI 客户端模式下从服务器端渲染模式接收到的状态转移
31 0
|
7月前
|
Web App开发 开发者
SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计
SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计
50 0
|
7月前
|
资源调度
SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式
SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式
58 0
|
设计模式 机器学习/深度学习 算法
软件测试|测试开发之路--UI 自动化常用设计模式
软件测试|测试开发之路--UI 自动化常用设计模式
167 0
软件测试|测试开发之路--UI 自动化常用设计模式