总体界面设计
1958字,阅读需时7分钟

系统总体界面设计给出本系统中界面设计原则(含要求、限定等),设计思路(如使用XML形成界面菜单,采用CSS提供多套样式风格等),界面布局及设计风格(如配色、操作模式等)。

用户界面设计原则

遵循一致的准则,确立标准并遵循,是软件界面设计中必不可必的环节。

1.便于用户操作:用户使用起来能够建立起精确的心理模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能;   

2.使用户感觉到统一、规范,在使用软件的过程中愉快轻松的完成操作,提高对软件的认知;   

对话设计原则

每个模态对话必须有一个标题用来标识用途,当对话是一个功能对话,这个标题还应该包含这个功能的动作。如果对话用来定义某个对象的属性,标题应该包含该对象的名字或者描述;每个对话至少有一个终止命令控件,被触发时会让对话关闭或者消失,比如“确定”和“取消”,另外右上角的关闭按钮也是一个终止命令的习惯用法。

信息呈现原则

在了解用户需求和任务场景的基础上,用户界面设计中视觉信息呈现的设计应遵循下列原则:

(1)明确性:信息的内容被准确和迅速地传达;

(2)可分辨性:呈现的信息能被准确地分辨;

(3)简洁性:仅向用户提供完成任务所必须得信息;

(4)一致性:在整个应用中的同类信息始终以相同的符合用户期望的方式呈现;

(5)可觉察性:用户的注意力能被吸引到所需信息上;

(6)可读性:信息容易阅读;

(7)可理解性:含义清晰易于理解,不包含歧义,可被解释和识别。

(8)一致性原则:本系统采用统一的风格进行界面设计,一致的外观将使用户界面更易于理解和使用。

(9)对齐原则:使用左对齐来使用户界面控件更易于浏览。对于数值文本,应该使用小数点对齐或右对齐。对于非数值文本,应该避免使用右对齐或居中对齐。不必对什么都使用中间对齐,或者使它们保持对称形式。在右边或底部保留空白区域更适合习惯。

(10)功能分组原则:将相关的用户界面控件分成组,以体现它们之间的关系。同时,还要显示相关信息。将控件放在它所作用的对象旁。使用空格、分组框、线条和标签,或者其它分隔符对用户界面控件进行分组。

(11)核心内容强调原则:使用焦点、位置、分组、层次、启用/禁用、大小、颜色或者字体等,将注意力集中在需要首先看到的用户界面控件上。尽量以可视的方式指明用户接下来应该进行的操作。

界面布局

每个页面采用一致的布局方案,以支持用户在不同界面的相同位置找到相似的信息。

(1)宜采用适当的技术定义页面布局,以适当显示设备或软件特性的变化;

(2)界面均宜显示一个描述性标题,且标题宜放在不同界面的统一位置上;

(3)始终将系统标识放置在每个界面上,确保用户知道其所在界面属于哪个系统;

(4)界面所采用的公共按钮名称应保持一致。

(5)应在适当位置显示产品版权信息、法律信息、联系方式等信息。

系统以蓝、白、灰色调为主。

用户界面公共元素设计

本系统在界面设计中,对于一些共性的页面元素进行统一规范,具体说明如下:

(1)列表控件

宽度:采用百分比的方式设定宽度,宽度可随窗口大小自适应调整。

标题:对齐方式为居中对齐;不允许折行。

内容对齐:内容中所有数字型、日期型右对齐,其他型左对齐,复选框居中对齐。

格式:日期格式例如2019-03-06,数字格式浮点型一般保留2位小数(例如23.57)

文本过长无法全部显示的情况,采用省略显示。显示方式为“部分内容+省略号”,鼠标移动到内容上显示全部内容。

条数:一般情况下,浏览器端每页显示20条数据。如果查询内容为空,显示“没有查询到符合条件的数据”。

复选框:对于列表中有复选框,列表上方操作只能选择一项进行操作时,若选择多项进行操作、将提示“请选择一项数据进行操作!”

分页:在列表框下边显示分页条,左侧显示页数,右侧显示总条数信息。

(2)按钮

尺寸:保证主要按钮更加突出。增加其尺寸(通过增大按钮使其看起来对用户更重要)并且使用对比强一些的颜色捕捉用户的注意力。

视觉:当用户单击按钮时,系统应给出视觉反馈。没有视觉反馈的按钮,用户可能会重复单击按钮。这种行为通常导致多次不必要的操作。

位置:按钮应该放在用户可以轻松找到或者期望看到的地方。不要让用户去寻找按钮。

遵循标准:通过标准布局,用户可以轻松理解每个元素的用途-即使是没有强指示性的按钮。通过标准布局和整齐的视觉设计,会使用户更加容易理解。

留白:按钮的周围要留有空间,按钮附近的留白会使用户更容易(或更难)理解它是否是可交互的。

(3)输入框

提示:每个输入框要有提示,提示的作用是告诉用户输入正确类型的信息。

校验:当对输入的数据有格式、字符数量、内容组成要求时,应即时校验并给出提示,以便用户进行下一步操作。

对齐:当多个输入框排列在一起时,输入框应遵循对齐原则,包括位置、提示文字、输入内容的对齐。

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有