`

UI设计的五大原则

阅读更多

关于UI设计规范,互联网上有各种各样的说法,归根结底,离不开以下五大原则,它们能让你的软件操作更加舒适简单,体现产品定位和特点。

一、一致性原则

坚持以用户体验为中心设计原则,界面直观、简洁,操作方便快捷,用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。

字体

-保持字体及颜色一致,避免一套主题出现多个字体;

-不可修改的字段,统一用灰色文字显示。

对齐

-保持页面内元素对齐方式的一致,如无特殊情况应避免同一页面出现多种数据对齐方式。

表单录入

-在包含必须与选填的页面中,必须在必填项旁边给出醒目标识(*);

-各类型数据输入需限制文本类型,并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等,在用户输入有误时给出明确提示。

鼠标手势

-可点击的按钮、链接需要切换鼠标手势至手型;

保持功能及内容描述一致

-避免同一功能描述使用多个词汇,如编辑和修改,新增和增加,删除和清除混用等。建议在项目开发阶段建立一个产品词典,包括产品中常用术语及描述,设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。

二、准确性原则

使用一致的标记、标准缩写和颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源。

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

避免使用文本输入框来放置不可编辑的文字内容,不要将文本输入框当成标签使用。

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

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

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

保持语言的一致性,如“确定”对应“取消”,“是”对应“否”。

三、布局合理化原则

在进行UI设计时需要充分考虑布局的合理化问题,遵循用户从上而下,自左向右浏览、操作习惯,避免常用业务功能按键排列过于分散,以造成用户鼠标移动距离过长的弊端。多做“减法”运算,将不常用的功能区块隐藏,以保持界面的简洁,使用户专注于主要业务操作流程,有利于提高软件的易用性及可用性。

菜单

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

-菜单中功能是需要打开一个新页面来完成的,需要在菜单名字后面加上“…”。【只适用于C/S架构,B/S请无视】。

按钮

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

功能

-未完成功能必须隐藏处理,不要置于页面内容中,以免引起误会。

排版

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

表格数据列表

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

滚动条

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

页面导航(面包屑导航)

-在页面显眼位置应该出现面包屑导航栏,让用户知道当前所在页面的位置,并明确导航结构,如:首页>新闻中心>欧科智能招商服务平台正式发布,其中带下划线部分为可点击链接。

信息提示窗口

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

四、系统操作合理性原则

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

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

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

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

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

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

五、系统响应时间原则

系统响应时间应该适中,响应时间过长,用户就会感到不安和沮丧,而响应时间过快也会影响到用户的操作节奏,并可能导致错误。因此在系统响应时间上坚持如下原则:

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

5秒以上显示处理窗口,或显示进度条;

一个长时间的处理完成时应给予完成警告信息。

转载地址:http://www.devstore.cn/essay/essayInfo/520.html

0
0
分享到:
评论

相关推荐

    界面设计方案.doc

    好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、 简单、自由,充分体现软件的定位和特点。 二、用户界面设计原则 1.简易性 界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择...

    界面设计方案(1).doc

    好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、 简单、自由,充分体现软件的定位和特点。 二、用户界面设计原则 1.简易性 界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择...

    微服务设计与解决方案.docx

    目录: 一、微服务架构演进过程 二、微服务架构的好处 三、微服务应用4个设计原则 四、微服务架构带来的问题 五、微服务平台的19个落地实践 六、总结展望 微服务设计与解决方案全文共18页,当前为第1页。...

    学生管理系统PPT毕业论文答辩

    3.3.6 UI要求设计要求 17 3.3.7 开发与运行环境规定 17 第四章 学生成绩管理系统详细 4.1 系统结构 18 4.2 程序逻辑 19 4.2.1系统E-R图 19 4.2.2查询模块流程图 19 4.2.3 维护模块流程图 20 4.2.4系统维护模块...

    asp.net知识库

    忽略大小写Replace效率瓶颈IndexOf 随机排列算法 理解C#中的委托[翻译] 利用委托机制处理.NET中的异常 与正则表达式相关的几个小工具 你真的了解.NET中的String吗? .NET中的方法及其调用(一) 如何判断ArrayList,...

    DDR2Layout指导手册

    DDR2Layout指导手册 DDR布线通常是一款硬件产品设计中的一个重要的环节,也正是因为其重要性,网络上也有大把的人在探讨DDR布线规则,有很多同行故弄玄虚,把DDR布线说得很难,我在这里要反其道而行之,讲一讲DDR...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    第五章 认我测在线检测服务系统设计 29 5.1认我测在线检测服务系统需求分析 29 5.2 系统时序流程 29 5.3 系统功能模块图 30 5.4 本章小结 32 第六章 认我测在线检测服务系统实现与测试 33 6.1认我测在线检测服务框架...

    ASP.NET 3.5 开发大全word课件

    这是整部学习资料 由于太大第一章免费供应给大家 在我的上传资源中 如果觉得还不过希望大家给个好评 当然具体本书的作者就不深究了把! 第1章 认识ASP.NET 3.5 1.1 什么是ASP.NET 1.1.1 .NET历史与展望 1.1.2 ASP...

    《程序员》杂志2012年第7期

    本文从移动设备、Metro UI、编程的变化、Windows Store四个方面分析了Windows 8在移动互联网时代带来的影响与面对的挑战。 (3)游戏画面的印象价值和审美属性分析 (4)Cocos2D-X for XNA游戏开发指南(下)—...

    精通matlab6.5

    10.2 图形用户界面的设计原则和一般步骤 10.3 界面菜单 uimenu) 10.4 用户控件 uicontrol) 10.5 由M函数文件产生用户菜单和控件 10.6 图形用户界面设计工具 第十一章 MATLAB编译器 11.1 编译器概述 11.2 编译器...

    java开源包1

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包11

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包2

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包3

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包6

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包5

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包10

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包4

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包8

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

    java开源包7

    设计原则 容易维护扩展(不需要修改主类就可以添加新的API支持) 注入型解释器(依据不同的返回格式注入相应的解释器) 集中管理请求参数与参数映射 以运行时异常的方式来管理错误的响应 使用泛型来做强类型编程 多...

Global site tag (gtag.js) - Google Analytics