购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.3 UI设计的设计规范

规范是指群体所确立的行为标准,主要是因为无法精准定量而形成的标准。UI设计的设计规范一般包括一致性、准确性、可读性、布局合理化、系统操作合理性及系统响应时间六部分。本节将对此进行说明。

1.3.1 一致性

UI设计应坚持以用户体验为中心的设计原则,确保界面清晰简洁,各项功能一目了然,方便用户使用。在进行UI设计时,应注意以下方面的一致性。

· 字体: 在同一套主题中应保持字体及颜色的一致性,避免出现多个字体或颜色,导致界面繁杂;不可修改的字段统一用灰色文字显示。

· 对齐: 保持对齐方式的一致性,避免界面中各元素分布混乱、杂乱无章的情况。

· 表单录入: 保持与用户认知的一致性,如必填选项旁边需给出醒目标识(*);电话号码输入框只允许输入数字并限制字数,在输入有误时给予提示等。

· 鼠标手势: 遇到可操作的按钮、链接时,保证鼠标手势切换图形的一致性。

· 保持功能及内容描述一致: 针对同一项功能,应确保描述一致,避免词汇更改造成的语义混乱、难以辨别等问题。在项目建设初期,可以建立一个通用的、包括常用术语及描述的产品词典,在设计和开发时相关人员严格按照词典中的词汇来进行表述。

1.3.2 准确性

在进行UI设计时应使用一致的标记、标准缩写和颜色,以确保显示信息的含义非常明确,避免意义不明导致的用户体验不佳。

· 显示有意义的出错信息,而不是单纯的程序错误代码。

· 避免使用文本输入框放置不可编辑的文字内容。

· 使用缩进和文本辅助理解。

· 使用用户语言词汇,而不是单纯的专业计算机术语。

· 高效使用显示器的显示空间,但要避免空间过于拥挤。

· 保持语言的一致性,如“复制”对应“粘贴”,“是”对应“否”。

1.3.3 可读性

该原则主要针对界面中的文字,文字必须以可读性作为首要原则。

· 文字长度: 文字的长度影响阅读效果,太长会造成视觉疲劳,阅读困难;太短则会造成断裂效果,影响阅读的流畅性。

· 空间: 字符的长度及间距设置极为重要,每个字符之间的间距至少等于字符的大小,大多数数字设计人员习惯选择最小文字大小的1.5倍作为空间距离,以确保有充足的空间。

· 对齐方式: 文本的对齐方式极大地影响可读性,默认的阅读方式为从左至右,文本一般遵循这一阅读方式,向左对齐。

1.3.4 布局合理化

在进行设计时需要充分考虑布局的合理化问题,遵循用户的浏览、操作习惯,确保常用业务功能按键排列集中,便于用户使用。多做“减法”运算,隐藏不常用的功能区块来保持界面的简洁,使用户能够专注于主要业务的操作流程,提高软件的易用性及可用性。

· 菜单: 保持菜单简洁性及分类的准确性,避免菜单深度超过3层。

· 按钮: 确认操作按钮放置于左边,取消或关闭按钮放置于右边。

· 功能: 未完成功能必须隐藏处理,不要置于页面中,以免引起误操作。

· 排版: 所有文字内容排版避免贴边显示(页面边缘),尽量保持10~20px的间距,并在垂直方向上居中对齐;各控件元素间也保持至少10px以上的间距,并确保控件元素与页面边沿保持距离。

· 表格数据列表: 字符型数据保持左对齐,数值型数据保持右对齐(方便阅读对比),并根据字段要求,统一显示小数的位数。

· 滚动条: 页面布局设计时应避免出现横向滚动条。

· 页面导航(面包屑导航): 在页面显眼位置应该出现面包屑导航栏,让用户知道当前所在页面的位置,并明确导航结构。

· 信息提示窗口: 信息提示窗口应位于当前页面的居中位置,并适当弱化背景层,以减少信息干扰,让用户把注意力集中在当前的信息提示窗口。一般做法是在信息提示窗口的背面加一个半透明颜色填充的遮罩层。

1.3.5 系统操作合理性

进行UI设计时,应保证操作的合理性,即符合用户认知习惯。

· 尽量确保用户在只使用键盘的情况下也可以流畅地完成一些常用的业务操作,各控件间可以通过Tab键进行切换,并将可编辑的文本全选处理。

· 查询检索类页面,在查询条件输入框内按回车键应该自动触发查询操作。

· 在进行一些不可逆或者删除操作时应对用户作出提醒,并让用户确认是否继续操作,必要时应该把操作造成的后果也告诉用户。

· 信息提示窗口的“确认”及“取消”按钮需要分别映射键盘的回车键和Esc键。

· 避免使用鼠标的双击动作,不仅会增加用户的操作难度,还可能会引起用户误会,认为功能单击无效。

· 表单录入页面,需要把输入焦点定位到第一个输入项。用户可以通过Tab键在输入框或操作按钮间切换,并注意切换操作应该遵循从左向右、从上向下的顺序。

1.3.6 系统响应时间

系统响应时间应保持在合适的范围内。时间过长,用户会感到烦躁;时间过短会影响操作节奏。一般来说系统响应时间应坚持以下两个原则。

· 响应时间为2~5秒,窗口显示处理信息提示,避免用户误认为没响应而重复操作。

· 响应时间为5秒以上,显示处理窗口,或显示进度条,处理完成时应给予警告信息。 bbizJx/rNu+p0UAm2N/r4a0/OJt6ip66ZfEF6Ry5LcmLYy7jxWUYqMJWILmhr6bP

点击中间区域
呼出菜单
上一章
目录
下一章
×