以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
龙虎大战坐庄推荐 您进入文章源龙虎大战坐庄地址 阅读和发布评论:http://beforweb.com/node/142

龙虎大战坐庄关于 扁平化界面风格的设计美学讨论

作者:c7210  |   发布: (编辑)kent.zhu   |   时间:2012-12-25 09:17:15 文字大小:- +

似乎真的没发生什么,也就是玛雅人过了个年。本周的更新如约和大家见面,视觉方面的一篇悠悠闲闲的小文章,龙虎大战坐庄关于 扁平化与拟物化风格的讨论。

龙虎大战坐庄我 个人对这方面的话题是蛮关注的,偶尔在微博上弱弱的念叨两句,也会有不少朋友来发表各自的看法,确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的,其中有些比较公允务实,有些则比较偏颇;所谓偏颇,也就是片面表达某种风格一定比某种风格更好,以及好在哪里。说真的,都有一定的道理,都能看出发表论调的设计师的思考和激情。

有人说了龙虎大战坐庄你 怎么这么没节操呢,龙虎大战坐庄你 到底觉得哪种好呢?龙虎大战坐庄我 要说的是叭,在龙虎大战坐庄我 看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题;脱离了实际龙虎大战坐庄产品 的上下文环境,脱离了龙虎大战坐庄产品 功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立。

说的具体些,远的不讲,单说Beforweb这边的视觉风格,除了每篇文章的图标以外,可以说是彻彻底底的扁平化了(当然,细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框,这个不算数...),但如果有人说龙虎大战坐庄我 是扁平风格的卫道者的话,龙虎大战坐庄我 会很不开心,因为龙虎大战坐庄我 只是在自己觉得合适的地方使用这种风格而已。龙虎大战坐庄我 喜欢iOS里很多拟物拟真风格的界面,最典型的包括语音备忘录、iBooks、iPad里的日历等等,它们的界面让龙虎大战坐庄我 觉得亲切自然,让龙虎大战坐庄我 可以在冰冷的电子设备当中找到现实龙虎大战坐庄生活的真实感,就这么简单。

下面这些截图来自龙虎大战坐庄我 平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒,龙虎大战坐庄我 着实在这些东西上花掉不少钱,但如果它们的界面没有采用如此逼真的拟物化设计,如果他们只是干巴巴的功能和数据陈列或是Metro风,龙虎大战坐庄我 是绝不会在它们身上花半毛钱的。

a-amplitube-ipad-interface-irig.jpg

b-s-amplitube-ipad-record.jpg

c-2-logic-pro-amp-designer-pedalboard.jpg

之前看到过一句话,大意是,Metro风格让人看到未来,而拟物化则让人感觉像是回到家里一样。说的挺不错的;人不可能一直呆在家里,也无法始终飘逸洒脱的在外面寻求新鲜与未来感。龙虎大战坐庄我 喜欢听真人使用真实乐器演奏的音乐,但这不妨碍龙虎大战坐庄我 偶尔听听电子的东西。

今天自己念叨的有点多了,龙虎大战坐庄龙虎大战坐庄我 们 还是进入译文的正文叭。作者从扁平化风格出发,慢慢引出了相对“公允”的看法,龙虎大战坐庄我 个人觉得比那些单纯强调某种风格的文章要有点意思。走着。

如今,龙虎大战坐庄关于 “扁平化”与“拟物化”孰优孰劣的争论在圈子里此起彼伏的。龙虎大战坐庄我 (英文原文作者)个人总是会被极简设计所吸引,所以扁平化的界面设计风格确实是龙虎大战坐庄我 的菜。

什么是扁平化设计

在实际当中,“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。

01-layervault-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png

Layervault的设计师Allen Grinshtein曾经在HackerNews的一篇文章当中说:

“长久以来,网站的界面风格似乎都在遵从着同一种设计美学,大家都在用斜面、渐变、阴影一类的效果来突出界面元素的质感。对于设计师们来说,制作这类‘可爱’的元素简直变成了行规甚至是荣誉。不过对于龙虎大战坐庄龙虎大战坐庄我 们 ,以及为数不多的其他一些设计师来说,这种惯用的方式并非一定正确。”

Layervault看上几眼,四处转转,龙虎大战坐庄你 会发现他们所追求的这种于简约当中体现出的视觉美感。看到龙虎大战坐庄龙虎大战坐庄我 们 一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用龙虎大战坐庄产品 中被潜移默化的颠覆着,也是蛮有意思的事情。下面是其他一些例子:

Squarespace

02-squarespace-new-version-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png

新版的Squarespace几乎完全采用了扁平化的视觉风格,只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下龙虎大战坐庄你 就会发现,其实他们的龙虎大战坐庄产品 在功能逻辑上还是蛮复杂的,但这一切都隐含在简约直白的界面背后,龙虎大战坐庄你 真的可以从中隐约感受到其设计团队付出的心血。

相关阅读:简洁至上的Web设计 - 创意要素及设计龙虎大战坐庄技巧

Facebook

03-facebook-homepage-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png

另外一个大家所熟悉的例子就是Facebook了。

“Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色,至少龙虎大战坐庄龙虎大战坐庄我 们 可以说这种设计风格对于Facebook来说是完全适用的。” - Ian Storm Taylor(Segment.io)

Rdio

04-rdio-player-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png

Rdio最新版本的网站及龙虎大战坐庄产品 界面中都采用了很彻底的最小化、扁平化的设计风格,龙虎大战坐庄你 很难找到使用了阴影、渐变等效果的界面元素。

相关阅读:最小化可用性设计

Nest

05-nest-product-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png

龙虎大战坐庄我 曾经作为前端工程师参与过Nest的网站开发,现在依然记得他们的设计师对扁平风格的热情追求。在他们的网站中,实际的龙虎大战坐庄产品 及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体(网站本身)当中,虚实结合,让访问者可以很容易的将注意力聚焦在龙虎大战坐庄产品 上,而不会被网站界面上的视觉元素所干扰。

Beforweb

本小站乱入...译者C7210

对拟物化的逆袭

正如20世纪建筑界当中的极简主义运动,扁平化设计风格的逐渐兴起也可以被看作是对多年以来过度设计、过度雕琢的界面风格的逆袭;尤其是最近一段时间,苹果一直以来的拟物风格被诟病的蛮犀利的。

06-apple-ios-ipad-ical-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png

Wikipedia对拟物化(“仿制品”、“Skeuomorph”)的定义是:

原有物件中某些必需的形式在新的设计中已不再必要,但新设计仍模仿旧有形式,以使新的外观让人感觉熟悉和亲切。

举个例子,龙虎大战坐庄龙虎大战坐庄我 们 通常会为界面当中的按钮添加渐变和投影效果,因为现实当中的按钮就是具有这些视觉特征的,即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如有些天气方面的应用会使用温度计的形式来展示气温;在现实世界中,这种实体的存在是必需的,而在应用龙虎大战坐庄软件 当中,温度计的形象则纯粹是装饰性的。

日历应用当中皮革质地的设计元素是必需的吗?如果按钮上不使用3D质感,用户是否还知道它们可以被点击?有多少装饰性的元素是真正必要的?

“在现实龙虎大战坐庄生活中,当按钮被按下时,龙虎大战坐庄你 可以清楚的感受到它的弹性,但在桌面设备或移动设备的显示屏上,龙虎大战坐庄你 无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应,至少对龙虎大战坐庄我 来说这是一种很蹩脚的、不符合预期的体验。” - Allan Yu (svpply / eBay)

形式龙虎大战坐庄服务 于功能

20世纪建筑界的极简主义运动当中提出了一些著名的口号,包括“形式龙虎大战坐庄服务 于功能(form follows function)”、“少即是多(less is more)”等等,直到今天龙虎大战坐庄龙虎大战坐庄我 们 依然会谈到这些。此外,龙虎大战坐庄我 个人非常喜欢米开朗基罗在被问到他是怎样创作大卫雕像时回答的:

“很简单。龙虎大战坐庄我 只要凿去多余的石头,留下有用的。”

对于界面设计来说,也是同样的道理;37signals的家伙们在这方面的本事是有目共睹的。要在实际当中卓有成效的实现扁平化风格的设计美学,作为设计师,龙虎大战坐庄龙虎大战坐庄我 们 本质上最需要关注的是龙虎大战坐庄产品 功能如何运作,而不仅仅是考虑视觉呈现方面的问题。

扁平还是拟物?只是个选择的问题

至少龙虎大战坐庄我 没有见到任何研究报告表明拟物风格的按钮会带来龙虎大战坐庄更多 的点击量。的确,有足够多的理论和实践结论可以证明在视觉上能产生更强对比效果的交互元素可以更好的引起用户的注意,但龙虎大战坐庄我 相信,在某些上下文环境中,一个扁平化的橘色按钮所带来的对比效应会高于具有凸起质感的按钮。所以,上下文,也就是具体龙虎大战坐庄产品 的具体界面环境,是这里的一个关键要素。龙虎大战坐庄龙虎大战坐庄我 们 来看看其他设计师的一些看法:

“这件事和时装时尚有些类似。当某种风格被全面普及之后,作为设计师,要想脱颖而出,龙虎大战坐庄你 就得反其道而行之。” - Cemre Güngör (Branch)

“如果有人告诉龙虎大战坐庄你 ‘拟物化是不好的设计’,这就相当于在说‘紫色是丑陋的颜色’,没有任何意义。” - Sacha Greif

“为什么要在没有任何实际证据的情况下贬低某种设计风格,同时抬高另外一种?忽略龙虎大战坐庄产品 的实际功能与整体体验而单纯追求某种设计风格,这并不是一件令人兴奋和愉悦的事。” - Geoff Steams (YouTube)

设计的好坏不是“美学”可以决定的

对设计风格的选取最终还是要取决于具体龙虎大战坐庄产品 的实际情况。在龙虎大战坐庄我 个人看来,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。

无论采用怎样的风格,优秀的界面设计都需要遵从一些共通的设计原则:

一致性

通过具有一致性的设计模式及视觉风格,为用户建立起完整一致的心智模型,使龙虎大战坐庄产品 更加易用,提升整体体验。

对比

通过对配色、尺寸和布局的调整,使可点击的界面元素在视觉上与其他元素形成鲜明的对比。

布局

可以尝试使用960gs一类的网格布局为界面设定视觉规范,使用户的视线可以跟随内容本身所界定出的路径自然的移动,增强界面的视觉平衡。

层级化

最重要的东西要比相对次要的东西更容易被看到。龙虎大战坐庄关于 这个话题龙虎大战坐庄我 可以写一整篇文章出来,简单的说,就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素,而将其他操作元素置于次要位置,这可以使界面得到最有针对性的龙虎大战坐庄优化 和简化。

“龙虎大战坐庄我 个人的经验是,无论扁平化还是拟物化都没什么所谓,最重要的是界面能够让用户在最短的时间内清楚的识别出信息和功能的层级关系,并且很容易的知道接下来应该做什么。” - Caroline Keem

目标用户

不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格,而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。

反馈

当点击行为发生时,要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式,例如在用户执行操作后,使用旋转图标提示用户系统正在进行响应。

龙虎大战坐庄推荐 阅读:为用户的成功操作提供正面反馈

降低“摩擦力”

无论采用怎样的视觉风格,都要使界面尽量简化,减少用户完成目标所需执行的操作,打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本,增加功能的复杂度,进而降低转化率。

相关阅读:表单设计与转化率的提升

鼓励探索

了解目标用户有可能对龙虎大战坐庄产品 进行哪些方面的探索。一旦他们习惯了龙虎大战坐庄产品 的界面与基础功能,并开始向“高级用户”的阶段进发时,要为他们的探索和学习行为进行必要的指引与“奖励”回馈。

原型

无论风格如何,界面形式都取决于实际的功能。好的设计方案离不开龙虎大战坐庄产品 前期的规划工作,特别是通过草图或线框原型进行的探索。识别出最核心的用例需求,使用原型不断尝试和验证,为接下来的界面设计工作打下坚实的基础。

“扁平化风格的逐渐盛行固然有它的道理,但本质上它只是设计美学当中的一种;与仿古、高光、金属质感、木质等视觉效果相同,对视觉风格的选择必须以良好的信息架构及交互模式为基础。” - Mike Cuesta (carecloud)

龙虎大战坐庄更多

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队龙虎大战坐庄成员 JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队龙虎大战坐庄成员 周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队龙虎大战坐庄成员 Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队龙虎大战坐庄成员 Angela译,定价25元
从卓越网购买 从当当网购买