网页设计分析:UI设计中的包容性设计

  

  近年来,移动互联网行业快速发展,互联网已经成为人们日常经常使用的信息交流和获取渠道。虽然智能手机和平板等移动设备更新换代的速度非常快,可是目前大多数网页和应用在设计之初没有考虑到特殊人群的需要,就算设备再强大,这类人群在访问网页或使用应用时还是会遇到很多困难。于是乎,“包容性设计”的概念就被引入到了UI设计中。

  那么,什么是包容性设计?英国标准协会(2005)将包容性设计定义为“主流产品或服务的设计能为尽可能多的人群所方便使用……无需特别的适应或特殊的设计”。当然有人会说,这样不是增加了生产成本吗?我们当然不能指望某一个产品能适合各种人群的需要。但是如果设计的时候有这样理念,产品会有更多的受众,说不定能产生更大的效益,而且这也是社会责任的体现。

  

  在设计越来越高科技、奢侈感、概念化的今天,包容性设计也许是最为亲民与平衡的设计理念,它拒绝让少数服从多数,也不想让多数配合少数,它相信,对极端人群的细心观察,加上对普通大众的广泛关注,能创造出更具包容性、属于更多人的好设计。今天我们就来简单谈谈UI设计中的包容性设计需要注意和有待改进的地方:

  语言和美学

  语言的人类交流的主要工具,它的影响力是无穷的,而且语言的表达方式也很重要,但是这点往往被人们给忽略了,美国杜克大学的一项研究表明,不管什么类型的工作,如果招聘广告带有明显的性别倾向,那么这个工作的吸引力就会受影响。这里就引出了这样一个问题:设计时所选择的语言表达方式对新注册的用户数量或者购买产品的用户数量会产生多大的影响?

  我们都知道,所有的界面或多或少都有文字在其上。在选择语言表达方式的时候,让文字尽量口语化,而不是华美辞藻的堆砌,因为不是人人都是文学大师。为行为提供清晰、简明的标签,保持简朴的文字叙述,用户对此将会很赞赏,因为他们不再是听命于他人的官腔——他们听到的是如朋友般甚至自己说话的表述方式。可以这么说,如果设计师对每个像素、每个图标、每个字体都考虑再三,那么他同样需要斟酌每个词语。

  

  当然,语言表达方式的好坏只是衡量标准之一,除此之外,美学同样在UI设计中扮演着重要的角色,元素的摆放、形状(棱角或者是圆角)以及色彩的使用,在不同性别、不同文化的用户眼里,所产生的效果也是不尽相同。就拿色彩来说,没有一种色彩方案能够符合所有用户的胃口,在使用色彩的时候要记住两件事,首先,不同文化中的颜色代表的含义有所不同,所以确保你的目标用户能够理解你所选颜色的含义。其次,不要忽略色盲用户,在区分不同元素时,多花些心思和功夫,使用一些颜色以外的技巧,例如一个图标中的长条。如果用户是色盲,他们就不能区分特定的颜色,多数色盲患者都是红绿色盲,所以你需要使用其他的方法,例如不同形状、不同材质加以区分。

  用户认知能力

  一般人的观念里会绝对化地将人分为完全能力人和残疾人,基于这个观念产品也被设计成针对完全能力人使用的或针对残疾人使用,实际上人的能力值有连续的变化范围,而且这种变化毫无规律可循,打个比方,量子物理学家在使用功能手机的时候可能会遇到困难,而同样的手机给到一个平均智商的十几岁小孩手里,他却能玩得得心应手。

  在UI设计领域,不管用户的认知能力和水平如何,都应该是设计师潜在的目标用户。降低一件产品的能力要求可以使更多的人能够使用该产品,并且使之前感觉使用困难的那部分人更易使用,这一点同样适用于UI设计,在一个界面中,你增加的元素越多,整个界面的复杂性也就随之增加,用户在使用上所花的努力也就越大。曾经有人说过:“最好的设计不是用来看的,是用来体验的”。这意味着,你的 UI 应该让用户去体验,而不是放一些花里胡哨的东西给用户看。UI 设计越简单,用户体验越好,不要滥用设计元素,不要使用拥挤的界面,拥挤的界面,不管功能多么强大,都会吓跑用户。

  在一些优秀的设计中,你看不到华而不实的UI修饰,或是用不到的设计元素。也就是说,其必须的元素一定是简洁且有意义的。当你想着是否要在界面上加一个新功能或是元素的时候,问问自己,“用户真的需要这些吗?”或者是“为什么用户想要这个小巧的动态图标?”。你是否只是因为出于自我喜好而添加这些元素?记住,永远不要在UI设计中给自己出风头。

  

  自适应界面

  鉴于用户的认知能力会有很大差别,为了照顾普通的小白用户,我们要对界面不断地简化,比如说去掉一些功能,但另一个问题又随之而来,如果界面太过简单,又很难令那些想要更多功能或控制的高端用户满意。比如说,傻瓜相机操作简单,几乎人人都会使用,但是无法满足一些高端用户的需求,例如摄影师。于是,综合各方面的因素,最常见的解决方案是让用户根据自己的需求进行界面的自定义。这个方法真的可行吗?有关研究表明,只有不到5%的用户会对默认设置进行更改,这就说明了用户自定义的方法在界面设计中根本不可取。

  那么,有没有一种能够根据用户的认知能力和使用习惯进行自动适应的方案?虽然目前要实现这个功能,在UI设计领域还存在不小的难度,但这应该是值得尝试的一种解决方法。而且,自适应这个功能在其他领域已经有了先例,iPod之父Tony Fadell发明的智能恒温器Nest或许就是个很好的借鉴例子,Nest不但外观很潮,而且还能自动感应是否有人在家而调节温度,并且根据用户的习惯将温度自动调节到最舒适的状态,并且随着用户使用它的时间越久,它就会更加了解用户的习惯。

  虽然Nest仅仅只是一个特例,但至少说明自适应技术是可行的,这就让界面设计师的思维模式更加开放,或许将来要实现界面的自适应也并非不可能。

  

  结论

  我们已经攻克了各种各样的技术难题,比如实现Web的标准化、引入响应式Web设计概念、推出各种各样的触屏设备等等。也许是我们把太多精力投入在这些技术难题上,从而忽略了人性化界面设计的重要性。我们希望,互联网行业的下一次变革能把更多精力集中在如何让更多的应用和产品变得更为包容,将不同用户的认知能力考虑在内,让用户界面变得更加智能,从而更有效地为更广泛的人群服务,让包容性设计的风暴刮得更猛烈些吧!

  最后,鉴于包容性界面设计目前还处在探索阶段,这里所说的只是一家之言,如能引发更多的思考,本文便是物尽其用了。

  Via SmashingMagazine

  (Danice 供雷锋网专稿,转载请注明来自雷锋网及作者,并链回本页)

时间: 2024-11-04 21:18:48

网页设计分析:UI设计中的包容性设计的相关文章

UI设计中的包容性设计

近年来,移动互联网行业快速发展,互联网已经成为人们日常经常使用的信息交流和获取渠道.虽然智能手机和平板等移动设备更新换代的速度非常快,可是目前大多数网页和应用在设计之初没有考虑到特殊人群的需要,就算设备再强大,这类人群在访问网页或使用应用时还是会遇到很多困难.于是乎,"包容性设计" 的概念就被引入到了UI设计中. 那么,什么是包容性设计?英国标准协会(2005)将包容性设计定义为"主流产品或服务的设计能为尽可能多的人群所方便使用--无需特别的适应或特殊的设计".当然

网页设计中的按钮设计

在网页设计中,按钮设计是常被忽略却又相当重要的一个角色.在网页设计中,按钮与链接的功能类似,都是经过点击后到达另一页面或实现某种目的,不过二者还是有实际上的区别的. 按钮代表着"做某件事",即点击了按钮代表着操作了一个功能,做的这件事是有后果的,不易挽回的.并且绝大多数都是对表单的提交.从技术上讲,这类按钮的作用是向后台提交了数据,"命令"服务器去做了一件事.而链接则是带你去另一个页面,从功能属性上而言,它是看,而非是做. 按钮和链接的另一区别就是它的眼球效应.因此

信息设计的交流原则和信息设计中的图形设计

文章描述:信息设计中的图形设计原则. 在当今纷繁复杂的世界,设计形式也是百花齐放,什么设计才是最容易被用户接受,并且能很好的给用户带来他们需要的信息,这是值得我们探讨的.  信息设计的定义 信息设计顾名思义就是用于信息交流的设计,如果我们把"信息"这个词语拿出来单独来解释的话,首先"信息"这个词语由来已久,它是人类文明赖以发展的基础,可以说人类所有的知识和故事都是信息,通过信息的传递,人类的文明才得以进步和向前发展.现在人们接收的信息越来越多,所以我们可以根据规律来

手机网站交互设计中的信息设计

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

谈产品设计中的策略设计

在动笔写这篇文章之前,对文章的标题我纠结了很久,本来想将题目写成<谈产品的策略设计>后来一想"产品策略"这个词包含的范围太广,还包括市场营销,品牌宣传等,而自己写的却仅限于互联网产品设计的这个范畴,所以最后决定还是写成<谈产品设计中的策略设计>更好一些.在 产品讨论会议中大家总是会发生激烈的争论,争论的方面有很多,可能是用户体验,也可能是产品功能,但仔细想想让大家争执最激烈,争执时间最久的恐怕就要属 产品策略方面的问题了.一个问题从不同的角度,或者是不同的思维的

让我们谈谈网页设计中的卡式设计

  前言 "我要卡式的",这是上一期客户在和我聊需求的时候说的第一个需求点.毫无疑问,卡式不论是适应PC还是手机都表现优秀.从在线商城到社交媒体网站,卡式设计成为网页设计中的一股强大风潮且风头正劲.其中最重要的原因想必就是它的灵活性. 卡片,可以是任何形状.颜色和形式.但是总的来说,他们都包含了图片.图标和一些基本的文字信息,例如标题.用户名和位置信息. "然而,其风靡起来的核心还在于其简单性.你很少见到复杂的卡片设计,它之所以出现的目的就是为了引导用户去点击它"

HTML网页设计中关于字体设计的详细讲解

设计|网页|网页设计     ●字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面:     字符集的设定.     在查看html文件原代码时,我们经常可以在文件头<head>和</head>之间看到这么一句代码:     <meta http-equiv="Content-Type" content="text/html; charset

谈谈网页设计中的卡式设计

  前言 "我要卡式的",这是上一期客户在和我聊需求的时候说的第一个需求点.毫无疑问,卡式不论是适应PC还是手机都表现优秀.从在线商城到社交媒体网站,卡式设计成为网页设计中的一股强大风潮且风头正劲.其中最重要的原因想必就是它的灵活性. 卡片,可以是任何形状.颜色和形式.但是总的来说,他们都包含了图片.图标和一些基本的文字信息,例如标题.用户名和位置信息. "然而,其风靡起来的核心还在于其简单性.你很少见到复杂的卡片设计,它之所以出现的目的就是为了引导用户去点击它"

HTML网页设计中关于字体设计

 字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面: 字符集的设定. 在查看html文件原代码时,我们经常可以在文件头<head>和</head>之间看到这么一句代码: <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 这段代码的作用是什