用户界面设计原则

标签: 交互视觉 用户界面,设计 | 发表时间:2014-06-09 10:04 | 作者:打酱油的孩纸
出处:http://www.woshipm.com

“设计绝不是简单的拼合,排列甚至编辑;设计是通过阐明,简化、明确、修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义。”——保罗·兰德(Paul Rand)

58331

1.“明确”应该放在设计的首要位置

对任何界面而言,“明确”是首要的也是最重要的一点。人们必须能够辨别出它是什么,才能有效地使用你设计出来的界面。设计师们在设计的时候,要去关心人们为何会使用这个应用,去了解什么样的界面是能帮助他们与之互动的,去预测人们在使用时的行为并能够成功地反馈给他们。这样做了之后,界面中再出现的需要推理的地方以及延时反应都是可以被容忍的,但是绝对不能出现让用户困惑的地方。明确的界面能够给使用者进一步操作的信心。一个应用就算它有一百张页面,但是每一页都是清晰明确的,它也远胜于只有一页却不知所云的应用。

 

2.界面是为了交互而存在

界面的存在是为了让人和我们的世界产生互动。它可以帮助人们厘清,明白,使用,展示相互之间的关系,他能够把我们聚集在一起可以将我们隔开,实现我们的价值并为我们服务。界面设计不是艺术设计。界面设计也不是用来标榜设计师的个人。界面的功用和效果是可以被测量的。但是它们不是功利性的。优秀的界面不但能够让我们做事有效率,还能够激发、唤起和加强我们与这个世界的联系。

 

3.不惜一切代价吸引用户注意

我们生活在一个容易被打扰的世界。我们很难在一个不被干扰的环境中静下心来阅读。用户注意力是非常宝贵的。所以,不要在应用的周围丢一些容易令人分心的东西……

要把设计这个画面最初的目的时刻放在首位。如果用户正在阅读,那先让他们专心的读完之后再弹出广告(如果一定要放广告的话)。尊重用户的注意力,不仅仅会让用户感到高兴,你本身的设计也会收获好结果。如果在界面设计中,用户使用是首要目标的话,那么尊重用户的注意力是先决条件。要不惜一切代价保护它。

 

4.让用户掌控一切

人们会在自己能掌控的环境中感觉最舒心,最放松。设计草率的软件应用不但剥夺了这种舒适性,还会迫使人们面对毫无预期的互动,困惑的流程和意外的结果。通过定期的梳理系统状态,描述因果关系(如果你这个做了,就会被体现出来),并且在每一步操作都给出提示,让用户感觉每一步操作都在他的掌控中。不要担心说,这不是“显而易见”的吗?因为世界上从来没有显而易见的事情。

 

5.直观操作是最好的

好的界面是无意识的,就像我们在实际生活中直接操作的感觉一样。这并不是那么容易实现的,并且随着元素和资讯的不断增加,这就变得更难,所以我们设计界面来帮助我们去和它们互动。要想在画面上添加一个不必要的东西是非常简单,例如,加个华丽的按钮,镶边,图形,选项,偏好,窗口,附件和其它一些冗余的东西。以至于我们一头扎进处理界面元素细节的怪圈中而忽视了最重要的事情。取而代之的,你应该抓住直观操作这个最初的目标……界面设计要尽可能的简洁,更多的可识别的惯用自然手势。理想情况下,界面会变得非常细微,用户在会有直观操作的感觉。

 

6.一个页面一个主要操作

我们设计的每一个画面,都应给用户提供有实际意义的单一操作。这一点,令界面更快上手、易于操作,如果有需要的话,新增或扩充也更简易。如果一个画面上有两个或两个以上的主要操作,瞬间就会让用户感到困惑。就像写文章要有单一的以及强有力的论点一样,界面设计中的单个画面,也都应该有单一且明确的操作,这是它存在的理由。

 

7.让次要操作在次要位置

画面在包含一个主要动作的同时,可以有多个次要动作,但尽量不要让它们喧宾夺主!就像你写一篇文章的目的,是为了让人可以阅读可以了解,而不是为了人们能够把它转载在社交网络上……让次要得动作放在次要的位置,削减它们的视觉冲击力,或是在主要动作完成后再显示它们。

 

8.提供自然而然的下一步操作

很少有交互是故意被放在最后的,所以要为用户精心设计交互的下一步操作。你要预期用户下一步的交互是怎样的,并且通过设计将其实现。就像我们的日常谈话,要为深入交谈开一个好头。当用户已经完成要做的操作后,别让它们不知所措的停留在那……提供自然而然的下一步,帮助他们完成操作。

 

9.界面外观遵循用户行为

人总是对符合期望的行为最感舒适。当某人或某件事的行为始终按照我们所期望的那样去进行时,我们会感觉到和他们之间的关系不错。因此,设计出来的元素,看起来,应该像它们本身特征一样。在具体操作中,这意味着,用户只要看到这个界面元素,就应该能猜测出这个元素是做什么的。如果看起来是个按钮,它就应该有按钮的功能,不要在基本的交互问题上耍小聪明……把你的创造力留到更高层次的需求上吧。

 

10.前后一致的重要性

遵循上一规则,画面中,视觉元素的外观不应该是一样的,除非他们的功能相近。如果是功能相同或相近的元素,那么它们外观就应该是类似的,反之,如果元素各自的功能不同,那么它们的外观也应该不同。为了保持一致性,新手设计师通常在会把相同的视觉处理 (重用代码) 方式用在,应该用不同的视觉处理方式的元素上。

 

11.强烈的视觉层次会让效果更好

强烈的视觉层次会让画面有清晰的浏览次序。也就是说,当用户每次都用相同的顺序浏览同样的东西,微小的视觉层次令使用者不知道哪里才是需要注意的重点,最后只会让用户感到困惑和混乱。在不断变化的设计环境中,保持强烈的视觉层次是很困难的,因为所有元素视觉上的重量是相对的:当所有文字都是粗体,那就没有所谓的"粗体"了。如果要在画面中添加一个视觉强烈的元素时,设计者应该要重新调整页面上所有元素的重量分配,来达到强烈视觉层次的效果。大多数人都不会注意到视觉重量这一点,但它其实是强化(弱化)设计的最简单的方法。

 

12.巧妙的布局减轻用户认知负担

正如约翰 前田(John Maeda)在他《Simplicity》书中所说的,恰当地编排画面上的元素能够以少见多,帮助他人更加快速简单地理解你设计的界面,因为你已经用你的设计清楚的说明了她们彼此之间的关系。用方位和方向上的编排可以自然地将相同的元素联系在一起。通过对内容的巧妙编排,可以减轻用户的认知负担,他们不再需要花时间去思考元素之间的关联,因为你已经做好了。不要迫使用户去思考……用你的设计直接呈现给他们看。

 

13.重点不要总是用颜色来强调

物体的色彩会随光线改变而改变。艳阳高照下与夕阳西下时,同一棵树,也会呈现不同的景象。在自然世界中,色彩很容易受环境影响而改变,所以在设计时,色彩不应该占很大的比重。作为辅助,我们可以用高亮的颜色,吸引注意力,但这不是区别这些的唯一方法。在长篇阅读或是长时间对着电脑屏幕的情况下,可以使用柔和的背景,降低亮度,当然也可用活泼亮丽的色彩当背景,但是要确保适合你的读者。

 

14.逐步说明

只在画面中显示必要的信息。如果用户需要作出决定,只要展现足够的信息供其选择,然后他们会到下一页去寻找更多的细节。避免一次呈现或解释全部的信息,如果可以的话,将选择放在后面的画面展示。这会使你的界面交互更加清晰。

 

15.内置帮助

在理想的界面设计中,「帮助」选项是没有必要,因为界面操作是有引导性的。「帮助」的下一步,实际上是,内嵌在上下文中的“帮助”,只有在用户确实需要的时候才显示,平常应该是隐藏的状态。让用户自己去寻求帮助,。重要的是你要保证用户可以顺畅的使用你的界面。

 

16.重要时刻:初始状态

第一次使用界面的体验是非常重要的,而这却常常被设计师忽略。为了让用户更快的上手,最好在设计的时候保持初始状态,也就是还没开始使用过的状态。这个状态不是一张空白的画布……它应该要提供一个方向和指引,令用户迅速进入状况。在初始状态下的互动过程中可能会存在一些摩擦,一旦用户了解了规则,那将会有很高的机会获得成功。

 

17.好的设计是隐形的

好的设计有一个奇怪的特性,它通常是会被用户忽略的。其中的一个原因是,一这个设计非常的成功,以至于用户完全专注在他想要达到的目标,而不是这个界面……当用户顺利的完成目的,他们会感到很满意,并不需要反映任何问题。作为一名设计师,这样会很困难……因为我们很少收到正面的回应,我们很少知道哪些设计是好的。但是优秀的设计师是满足于设计出好用的界面……并且他们知道满意的使用者通常是沉默的。

 

18.从其他设计领域下手

视觉,平面设计,排版,文案,信息架构和视觉设计……所有这些学科都是界面设计的一部分。他们都是可以被涉猎和研究的。不要企图跟他们划分界线,或看不起其他的领域:从学到学到很多知识可以帮助你的工作推动你成长,还可以从看似无关的学科学起,接触你不熟悉的领域……我们能从出版、编程、书本装订 、滑板、消防,空手道中学到哪些知识呢?

 

19.界面的存在是为了被使用

在大多数设计领域,有用户使用就是界面设计的成功。就像是一个漂亮椅子,虽然漂亮,但坐起来不舒服,用户就不会选择它,它就是一个失败的设计。因此界面的存在就为了尽可能多的创造好用的环境让用户使用,就像你设计了一个好用的工艺品。设计师设计作品如果仅仅是拿来满足自己的虚荣心,那是远远不够的:它必须要被使用!

source:UI中国


(关注更多人人都是产品经理观点,参与微信互动(微信搜索“人人都是产品经理”或“woshipm”)

相关 [用户界面 设计 原则] 推荐:

用户界面设计原则

- - 人人都是产品经理
“设计绝不是简单的拼合,排列甚至编辑;设计是通过阐明,简化、明确、修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义. ”——保罗·兰德(Paul Rand). 1.“明确”应该放在设计的首要位置. 对任何界面而言,“明确”是首要的也是最重要的一点. 人们必须能够辨别出它是什么,才能有效地使用你设计出来的界面.

50+PSD用户界面Web设计素材

- DayuLu - 互联网的那点事
对于很多设计初学者来说很多高手的界面设计得让他们惊叹. 其实,对于真正的设计老手来说,他们有能力设计出各种效果,但是即便这样也是需要大量的时间的. 在大多数的中小企业中这样的完全独立设计师很少见的. 老练的设计师都有一套属于自己的设计素材库,里面包罗万象会让各种菜鸟汗颜. 这些就好比日积月累的各种武术套路,当需要那种就自然的打了出来,快、准、狠.

Android 4.0用户界面设计和元素-ICS简介

- - 博客园_新闻
最新的 Android 冰淇淋三明治(Ice Cream Sandwich, ICS)操作系统,不仅仅是用户界面(UI)的简单改变,它几乎是对整个 Android 系统界面的重新定义. 为了让你更好地为 ICS 系统设计和开发应用,这里有一个简单的介绍和指南. 内容和活动导航:选项卡和下拉选项 (Tabs and Dropdowns).

用户界面设计中“状态”和“动作”的表达

- - 互联网的那点事...
前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题. 想想这个问题多年前已经开始讨论了,所以在此整理一下思路,与大家共享. 具体案例是这样的:如上图所示,在“启用”和“停用”搜索定制功能时,这个按钮到底是表示“状态”还是表示“动作”呢. 简单的说,上图中 1表示当前是停用状态,还是表示点击后为停用操作呢.

什么才是优秀的用户界面设计

- - 互联网的那点事
今天为大家分享一些 Good UI 在一些项目中获取的设计以及运营策略等方面的经验. 这是本人收藏了很久的干货,最近开始做网站产品,又把它翻出来了. Good UI 是一家研究用户体验的设计机构. 我们知道成功的页面设计不仅有很高的转化率更便于用户使用,既能满足商业目标更能为用户带来良好的体验. 整合相似的功能,去掉零碎的 UI 元素.

转载:免费的用户界面设计工具,工具包和资源

- Betula - Axure教程|手机交互设计|手机产品设计
来源:免费的用户界面设计工具,工具包和资源    发贴会员:图图网-sunqilong. 都是一些UI界面与设计使用的元素,软件,网站等. 内容很丰富,适合网页设计师,用户体验设计师,界面设计师,产品设计师,JS前段开发,手机产品设计,ipad产品设计等使用. Lumzy是一个网站应用和原型界面制作工具.

细节成就卓越——浅析iPhone用户界面设计精粹

- Shengbin - 腾讯CDC
  作为一款革命性产品,iPhone(这里泛指iPhone和iPod touch,当然还有iPad)为我们带来了许多意想不到的创意和惊喜. 过去两个月多的时间里,我们认真地咀嚼《iPhone Human Interface Guidelines》,感悟字里行间透露着的苹果的细致与智慧. 兴奋、激动之余,有太多的惊喜想与大家分享.

50个精美的 PSD 用户界面素材和设计模板资源

- brett80 - 博客园-首页原创精华区
  对于每一个网页设计师来说,有预先设计好的和可编辑的UI元素是组织和优化工作流程的关键. 这些元素可以让你快速制作出风格统一的网页原型. 今天,本文与大家分享50个精美的PSD资源,包含UI元素模板、表单、按钮、菜单、进度条、播放器、提示框等等. 注册和登录表单 PSD 资源. 这个素材包除了按钮之外,还包括菜单、多媒体播放器、导航等等很多资源,赶紧下载吧.

Android设计原则

- - 所有文章 - UCD大社区
译者按: 在 iOS HIG已经强大经典了N年之后,Android终于推出了一套比较系统的 HIG(大概是为了配合Android 4.0 Ice Cream Sandwich). 仔细比较两套HIG的“设计原则”部分,发现完全是截然不同的两种风格. iOS HIG走的是更专业型的路线,描述严谨且有不少的专业词汇(比如Metaphors、Consistency之类的).

iPad用户体验暨UI设计—如何设计出优秀的用户界面

- Ken - 互联网的那点事
iPad划时代地将我们带入了平板电脑时代,对于传统的移动终端的设计师而言,一个拥有更大的触摸屏幕,更大空间的舞台展现在大家面前,看上去一切都是那么的美好. 然而如何在iPad上设计出优秀的用户界面. 相信对于设计师们的挑战与忧愁远不止屏幕放大那么简单. 大的屏幕、可以触摸的操作、支持多种手势…这一切条件都为让用户能沉浸于你的设计中提供了条件,那么如何将设计与用户生活的环境、习惯更好的结合,获得最佳的体验,就成为了一个挑战.