推荐!伟大的UI是隐形的

标签: 用户界面 交互设计 PS 教程 & 设计文章 WEB UI 元素 用户体验 | 发表时间:2013-04-15 00:12 | 作者:阿麦
出处:http://www.uisdc.com

featured

一个隐形且流畅提供给访客交互体验的界面,可以更高效的让访客的注意力集中在产品的核心功能上,并且可以引导访客逐步走向产品的最终目标。

很多有经验的设计师都在提倡这样一个设计理念:一个真正设计精良的UI应该让用户察觉不到它的存在。但事实呢?恰恰相反,很多同学设计的UI经常会强迫用户们去注意花哨的界面,而不是你要传达给用户的有效内容。用户登陆某个网页大都有明确的目标,比如说他想买一本新书、想上网学习jQuery技术、想上网去把个妹、追个男神、或者仅仅想和朋友们分享一篇美文等等。

这个时候,用户大不会去花时间观赏你耗尽心思的界面。事实上,用户根本不在乎你的交互界面设计!呃,很早以前,最初的网页设计缺少新鲜的交互技术,所以后来设计者们为了让网页变的更好,经常想加入一些交互:但是,亲爱的同学们,你做个换位思考,或者去观察一下身边的小网龄用户,他们真的在乎这些花哨的东西么?

近几年来,网页设计者们经常花几百个小时去考虑按键的颜色是否好看、是否要加一些阴影使得更加美观、页边距大小是否合适或者是否应用渐变等让UI变的更加漂亮实用等。但是,真正精良的UI设计不应该是好看,而应该是隐形的!

opencoach_carosel_nav

移动终端在人们的生活中日益重要。多点触控移动设备的出现让人们意识到UI是一系列的通过点击和排序来控制的内容,允许更加人性化、更加自然的人机交互。这些自然用户界面(Natural User Interfaces, NUI)更加“自然”的原因有很多,最重要的是,NUI可以让用户对内容直接操作且它的桌面毫不花俏,用户会发现设备的使用变的超级简单,因为UI几乎不可见了。

但是我们仍然需要对着我们的台式机或者笔记本工作,我们仍然需要浏览网页和使用网页APP,而这些东西很少可以做到像手持移动设备那样应用多点触控及自然用户界面。那么,是否因为这些阻碍我们就要延续老一套的界面组成么?答案是否定的!隐形UI的设计理念,是我们每一个UI设计师或开发者应该想要达到的目标。

是用户界面,而不是障碍

img_0007

用户界面永远不应该成为阻挡用户查看内容或者达成目标的障碍;用户也不该必须跳过UI陷阱或者乱七八糟的导航之后才能到达自己的目标。过去的几年里我们经常使用一些我们认为可以给用户带来便捷的UI,但实际上,这些UI却给用户带来了更大负担,Breadcrumb(用来表明用户所处位置的UI导航)就是个很好的例子。我们可能觉得Breadcrumb是一个非常好的导航方式,但实际上,它仅仅是累赘的UI组件,在设计合理的用户体验中没有存在的必要。

虽然Breadcrumb并不直接带给用户负担,但是她占用了屏幕的空间,而这些空间,原本应该用来显示一些和用户目标相关的内容。我们解决UI的问题经常通过增加新的组件,但是过于冗杂的组件势必造成浏览障碍。那么,怎样才能做到增加了许多UI组件,然而你的UI看上去却像是隐形的呢?

解决问题

Metro_UI

建立隐形的UI意味着你要从根本上解决问题,你需要知道到底问题出在什么地方。我们做网站或者APPs也会经常碰到问题,但是我们往往从表面上给出一些解决方案,而并没有从本质上考虑问题的发生。就像我们为了止疼吃布洛芬,但这不能改变疼痛的本质一样。

一般情况下,“吃止疼药”变成了我们当下的最佳策略,因为我们已经学会了如何与项目经理、网站拥有者、股东等做斗争,而且,也有很多时候可能是因为设计师们时间不够或者仅仅是因为懒惰而不想去做。我们经常会做一些用户体验,然后说:“嗯,我知道这里面有些小问题,但是我们让用户看看是否这些问题真的是问题吧。”很明显,用上面的态度去做UI是不能做出隐形UI的。做一个完全隐形的UI意味着你必须要解决深层次的设计问题和用户体验,只有这样才能使得UI不会变成对用户的障碍。

宽容的设计

music

隐形的UI要归功于它设计的非常有包容性,自然用户界面更加开放,而且不易出错,或者在用户出错的时候,能给用户以明确的方向指引。

这几年不是流行一句 交互金句么? 操作前可预知、操作中有反馈、操作后可撤销!

宽容指的是当用户受困的时候(fall into a trap),设计者给予用户的不是告诉用户出错了。实际上,当用户没有明确的目标时更容易误操作,而此时UI会显示给他们大大的警告和出错提示。而一个隐形的UI设计绝对不会显示上面的东西。良好设计的UI会预先判断用户出错发生率高的地方,并在这些地方提供给用户解决出错的办法或者引导用户让他们避免陷入trap。

宽容还表示网页或者APPs允许用户对它们出错。因为用户出错之后,他们会从自己的错误中学到更多的东西,当然,他们出错的时候,肯定不能给他们一个大大的红色叉号或者繁杂的让人摸不着头脑的文字。(这种压迫感和腥红的色彩他们早在现实中就受够了)

目标第一

Speed_Detector_Bigger

上图的交互设计(Cooper building block)实际上非常简便,但是似乎这种设计我们平时并不多见,所以我觉得它——以目标为导向的设计——值得一提。UI设计应该围绕用户的目标,设计者应该挖掘用户的需求,并能通过引导来完成或迎合用户的需求。用户对他们想通过什么方式达到自己的目标很有主见,但是对他们对需要什么却没有任何想法。所以,UI设计师的工作应该是找到用户的需要而不是提供给他们某种方式。

找到目标并且允许用户快速的达成他们的目标将是最好的用户体验,因而你也根本没有必要设计一个非常华丽的界面去吸引用户的眼球。不要用华丽的UI设计作为对目标不够明确的弥补。

真正的一致

inside-b

在UX的世界中,我们谈论一致性显得理所当然。实际上一致性在UI设计中也非常重要。如果你的UI组件都在同一个地方,具有相同的颜色和功能,那么你的UI设计将会随着时间的推移慢慢的从人们的眼球中消失…有点像Marty McFly。但是,仅仅把功能按钮放在每一页的相同的地方或者在整个应用中使用特定的动作来对应相同的东西可能并不能解决连续性的问题。

另外,我们在UX设计经常倾向于应用来源于其它APPs或者网页的那些和我们的设计相通的东西来装扮我们自己的APP。我曾经写过一篇文章来阐释相类似的环境能够让界面显得更加舒适。但是当我们致力于设计一个隐形的UI时,仅仅一致并不足够。我们要的是真正的一致!这就意味着不仅仅是组成、价值、链接以及数据等在APP中的一致,它们应该在上下文内容中也要一致。

例如,你可能注意到很多APP中,登陆按钮一般都会在右上角,因此你会自然而然的认为其他APP的登录按钮应该也会出现在那个位置,这想法没错。但是,这种布局可能在你的APP中不太合适。那么,你就不必要这么做,你要按照自己APP的布局,将组件放在适合于你APP中的地方,并让它们在你的APP中保持高度的一致性。

总结:激发用户

最后,一个真正设计精良的隐形的UI要能够做到激发用户。当UI能够引导用户直接进入他们想要的,用户在使用APP时能将精力集中在他们的目标上面。
界面应该提供数据和内容的无缝交互,这能够激发用户建立与APP更好的关系。用户固然喜欢摆弄一个聪明的UI,但是隐形的UI设计更容易脱颖而出。

翻译小组:SDC番茄匠     微博ID:@ Wiley_小车

原文地址: http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/ 

【各位尽职尽责帅气靓丽的网站编辑、站长大神们,如果您看上了优设网的这篇文章,请复制粘帖的时候把我们网址带上,我会代表节操君向您致敬的,感谢】

优设哥向您推荐:

50套超赞的UI组件打包下载

推荐!22个超赞的扁平化设计经典案例

荐书:众妙之门网站UI设计之道

推荐:UI设计15个黄金法则

怒赞!7个免费下载UI组件包的顶级网站
无觅

相关 [ui 隐形] 推荐:

推荐!伟大的UI是隐形的

- - 优设(UISDC)
一个隐形且流畅提供给访客交互体验的界面,可以更高效的让访客的注意力集中在产品的核心功能上,并且可以引导访客逐步走向产品的最终目标. 很多有经验的设计师都在提倡这样一个设计理念:一个真正设计精良的UI应该让用户察觉不到它的存在. 恰恰相反,很多同学设计的UI经常会强迫用户们去注意花哨的界面,而不是你要传达给用户的有效内容.

[转] jQuery ui框架

- - CSDN博客Web前端推荐文章
   jQuery ui框架很多,除了官方提供的 jquery UI(如果你还不知道什么是 jQuery UI,请看 下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于 jquery核心类库实现的ui框架.

UI框架选型

- - ITeye博客
  最近公司的一个新项目要进行UI框架的选型,我把选型的思路和过程跟大家分享一下.   在选型之前,我们先要定一下选型的标准,就像人生一样,想清楚“自己要的是什么”是最重要的.   选型的标准分为几部分:. 业务是根本,和大部分的技术一样,框架没有好坏之分,只有适合与不适合.         我们项目是一个通讯类的监控项目,用户群是移动、电信等运营商的运维人员,系统的特点是:.

Metro UI 平板概念图

- 冉波 - 爱范儿 · Beats of Bits
在 《从应用启动器的设计来谈谈 Metro UI 的不足》 中,我曾抱怨过 Metro UI ,主要是针对它的主屏幕,因为在手机那样的小屏幕上,主屏似乎更适合摆放图标,而不是动态格窗. 但是如果我们将 Metro UI 放到平板上,情况就会完全不同. iOS 在 iPhone 上表现虽然很好,但是将同样的 UI 放到 iPad 上,总感觉不够大气.

Patrick Baudisch: 德國 UI 之神

- tan - 所有文章 - UCD大社区
我曾經為文撰寫過 “日本 UI 之神 – Takeo Igarashi“, 出自於我個人對於 Takeo 的研究的敬佩以及喜愛. 如今,當我投入了 HCI (Human-Computer-Interaction) 研究之後,有一位超新星大師的研究讓我非常喜愛. 如同 Takeo 也是一個非常帥氣的研究員,然而不同於 Takeo 的圖學以及 GUI 雙跨 (近年來 Takeo 更加神猛了, 變成了圖學, GUI, HRI 三跨了),Patrick 的研究自始自終都在 HCI 領域.

开源Python UI框架:Kivy

- xin - 秀码趣 - ShowMuch.com
Kivy是一个可用以快速创建新颖用户界面应用的开源Python库,比如可以用它来创建多点触摸的应用程序,它具备跨平台特性,目前发行有Windows、MacOS、Linux以及Android版本. 作为一个开源框架,Kivy具备以下特性:A.百分百免费使用;B.基于 LGPL3协议 开源,对商业化应用友好;C.跨平台,支持Windows、MacOS、Linux以及Android;D.允许在不同的平台上运行同一套代码;E.稳定以及有完善的API文档;F.通过OpenGL ES 2.0对硬件进行加速;G.自然支持大部分的输入协议或者输入设备;H.基于Python的简单API……等等.

Metro UI 平板概念图

- 可乐加糖 - 互联网的那点事...
在 《从应用启动器的设计来谈谈 Metro UI 的不足》 中,我曾抱怨过 Metro UI ,主要是针对它的主屏幕,因为在手机那样的小屏幕上,主屏似乎更适合摆放图标,而不是动态格窗. 但是如果我们将 Metro UI 放到平板上,情况就会完全不同. iOS 在 iPhone 上表现虽然很好,但是将同样的 UI 放到 iPad 上,总感觉不够大气.

新工具介绍:AdPlus UI

- - CSDN博客推荐文章
通过一段时间,我开发了一款实用新工具,封装了微软的调试利器Adplus.exe让各位更易于使用它. 张佩(Moore.Zhang) . Adplus UI是对Adplus.exe的封装,后者是微软提供的调试工具,是个利器,但虽为利器却少有人用,原因在于它仅支持命令行的方式运作,而命令又稍嫌复杂. Adplus UI的功德就在于把不友好的命令行变成用户友好的界面形式,用户只需要鼠标点几下就可以完成设置,设置会被保存,以后直接使用即可.

从Web借鉴UI设计

- - 博客园_首页
  用户体验已经成为衡量应用软件质量的重要标准. 在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限正在被逐渐模糊. 虽然技术已经焕然一新,但很多开发人员并不是专业的信息架构师,可能还在使用传统的、平凡的UI设计风格.

Android的UI布局总览

- - 博客园_首页
                  android布局的目的是为了实现不同屏幕比例适配而设计的,有五种布局类:FrameLayout、LinearLayout、AbsoluteLayout、RelativeLayout和TableLayout. 五大布局类的继承关系如下(以FrameLayout为例):.