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

时间: 2024-10-02 01:08:44

UI设计的五大原则的相关文章

专注产品UI设计:移动界面设计原则和设计工具

文章描述:移动界面设计点滴. 移动平台的设计与传统的网页有许多不同之处,如独特的交互体验.不同光线下的视觉效果以及移动终端的资源有限.这些都考验着开发者的技术. 通过对设计移动界面的点滴记录,本文为读者介绍了对界面的规划的设计原则以及相关案例,并且推荐了自己中意的设计工具. 一.减少空间占用 与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息. 接下来以当前正在工作的UI做为sample,实战空间优化.

优秀设计师必须知道哪些优秀的UI设计原则

  tiah在Joshua Porter总结出来的优秀的UI设计原则基础上,进行了重新整理并增加图文解说,以便于酷友理解. 界面清晰最重要 界面清晰是UI设计的第一步,要想让用户喜欢你设计的UI,首先必须让用户认可它.知道怎么样使用它.让用户在使用时预期会发生什么,并方便地与它交互. ▲ 正确示范|界面没有任何的操作提示,用户就明白通过左右滑动屏幕来查看更多卡片,还知道卡片是以扇形为运动轨迹. 全力维护用户的注意力 在阅读的时候,总是会有事物分散我们的注意力.因此,在设计界面的时候,能够吸引用户

【APP UI 设计模式】(一)APP UI 设计原则和流程

一.基本原则         1.用户体验原则UCD,以用户为中心去设计         2.设计模式是可重用的设计规范实现         3.反模式是糟糕设计的典型,极力避免使用         4.试验模式--超越既有理念和移动现状的设计,有望成为下一个主流UI设计模式. 二.主要内容         1.APP UI 设计模式描述的对象是智能手机.平板.智能设备等设备上运行的应用程序.         2.设备多样性-->设计多样性         3.设备类型定义:          

优秀设计师应当知道的20大UI设计原则

世界级http://www.aliyun.com/zixun/aggregation/12288.html">图形设计大师Paul Rand(保罗.兰德)曾经说过:"设计绝不是简单的排列组合与简单地再编辑,它应当充满着价值和意义,去说明道理,去删繁就简,去阐明演绎,去修饰美化,去赞美褒扬,使其有戏剧意味,让人们信服你所言--",由此可见,设计绝非轻而易举之事,优秀的设计更是难上加难,今日小编偶然发现一篇界面设计师Joshua Porter博客当中的一篇文章--<P

浅谈那些站长从生活中领悟的UI设计原则

UI设计又被称为用户体验度设计,这是目前seo行业中站长一直在追求的,但是如何做好?了解用户,明白用户需要什么,想要什么.笔者认为了解用户的人莫过于我们自己,因为我们也是"用户"这个群体中的一员,seo站长应该从我们的生活点滴中,用心发现用户需要什么? 比如,看看下面的图,没错是两双拖鞋,作为用户的你,你会选择哪双? 当然如果是笔者的话,我会选择下面的一双,原因有: 1.保暖措施:两双鞋相比,第一双的保暖效果远没有第二双好,不管是从外秒的用料还是说鞋面的宽度延伸脚后跟的长短,第二双效果

11个最好的UI设计

  UI设计可以成就或者毁掉你的网站和应用:怎么做才对呢? 在网页设计中,好的用户界面和UI设计的宗旨在于帮助用户尽可能简单和高效的完成特定任务.虽然视觉和感受也很重要,但是好的UI设计的核心永远是功能:对于导航来说,必须是达到不可见的直观.只要用户会迷路或者不知道去哪儿,这个UI设计就是失败的. 一些例举的网站和应用可能有不同的设计原则和功能,但是它们有一个共同点-高效的UI设计,完美解决上面的问题甚至更加到位.让我们来看看它们是如何做到的. 01.栅格 Grid 应用"栅格"顾名思

先掌握科学有效的UI设计自学姿势

  这可能是有史以来最值得阅读转发的一篇UI设计自学指南.作者是个全栈设计师,在临摹了大量教程,掌握了PS.AI等软件后才发现自己对于真正的设计一无所知,因此写了这篇文章,希望能帮大家用正确的方式学习UI设计,不要本末倒置,在错误的路上浪费时间. 写给UI设计初学者们 几乎每隔几天我便能在简书或其他各类设计网站看到关于自学UI设计的分享文章.这些文章有一个共同的特点,就是描述作者如何从一个零基础的设计小白,通过种种途径,成长为一个熟练掌握PS或AI的设计达人的,亦或是分享了一堆有参考价值的设计类

从零开始全面掌握UI设计的配色方法

  一篇你绝对不想错过的文章!以前的色彩知识大多是基础科普,容易看完就忘,配色时还得翻书.但今天这篇,大多是从实战出发,学完可以立刻上手,而且还附有作者本人的色板.配色工具等等,无论是小白还是UI设计师,这篇都不容错过! 我们从小都能熟练地区分颜色,但为什么当我们需要运用色彩进行UI设计的时侯,却往往发现很难恰到好处地运用色彩,作出那些和谐得体.令人赏心悦目的设计来呢?--我觉得原因是我们对色彩的认识和实践不足,以及当我们做设计时,很容易会过度地使用色彩.作为设计初学者,你需要掌握基本的色彩理论

客户端交互设计:手机平台客户端UI设计

文章描述:客户端UI设计之手机平台之争. 1. 当前手机平台的争锋     为了占领移动互联网的制高点,当前的几大IT巨头都以手机平台为基础展开争夺.占领移动平台就是占领了用户的移动桌面,也就为自身的移动服务争取到了最佳位置.       微软公司推出windows phone 7, 曝光了windows 8:苹果公司也开了iOS 5的发布会:谷歌的Android 3.0的发布,Android 2.4 的若隐若现等等:大家都在努力提升平台体验.另外,惠普的Web OS.黑莓公司也都在研制和发布新