UI设计中的包容性设计

所属分类: 网页制作 / CSS 阅读数: 743
收藏 0 赞 0 分享
近年来,移动互联网行业快速发展,互联网已经成为人们日常经常使用的信息交流和获取渠道。虽然智能手机和平板等移动设备更新换代的速度非常快,可是目前大多数网页和应用在设计之初没有考虑到特殊人群的需要,就算设备再强大,这类人群在访问网页或使用应用时还是会遇到很多困难。于是乎,“包容性设计” 的概念就被引入到了UI设计中。
  那么,什么是包容性设计?英国标准协会(2005)将包容性设计定义为“主流产品或服务的设计能为尽可能多的人群所方便使用……无需特别的适应或特殊的设计”。当然有人会说,这样不是增加了生产成本吗?我们当然不能指望某一个产品能适合各种人群的需要。但是如果设计的时候有这样理念,产品会有更多的受众,说不定能产生更大的效益,而且这也是社会责任的体现。
UI设计中的包容性设计 脚本之家
  在设计越来越高科技、奢侈感、概念化的今天,包容性设计也许是最为亲民与平衡的设计理念,它拒绝让少数服从多数,也不想让多数配合少数,它相信,对极端人群的细心观察,加上对普通大众的广泛关注,能创造出更具包容性、属于更多人的好设计。今天我们就来简单谈谈UI设计中的包容性设计需要注意和有待改进的地方:
  语言和美学
  语言的人类交流的主要工具,它的影响力是无穷的,而且语言的表达方式也很重要,但是这点往往被人们给忽略了,美国杜克大学的一项研究表明,不管什么类型的工作,如果招聘广告带有明显的性别倾向,那么这个工作的吸引力就会受影响。这里就引出了这样一个问题:设计时所选择的语言表达方式对新注册的用户数量或者购买产品的用户数量会产生多大的影响?
  我们都知道,所有的界面或多或少都有文字在其上。在选择语言表达方式的时候,让文字尽量口语化,而不是华美辞藻的堆砌,因为不是人人都是文学大师。为行为提供清晰、简明的标签,保持简朴的文字叙述,用户对此将会很赞赏,因为他们不再是听命于他人的官腔——他们听到的是如朋友般甚至自己说话的表述方式。可以这么说,如果设计师对每个像素、每个图标、每个字体都考虑再三,那么他同样需要斟酌每个词语。
  当然,语言表达方式的好坏只是衡量标准之一,除此之外,美学同样在UI设计中扮演着重要的角色,元素的摆放、形状(棱角或者是圆角)以及色彩的使用,在不同性别、不同文化的用户眼里,所产生的效果也是不尽相同。就拿色彩来说,没有一种色彩方案能够符合所有用户的胃口,在使用色彩的时候要记住两件事,首先,不同文化中的颜色代表的含义有所不同,所以确保你的目标用户能够理解你所选颜色的含义。其次,不要忽略色盲用户,在区分不同元素时,多花些心思和功夫,使用一些颜色以外的技巧,例如一个图标中的长条。如果用户是色盲,他们就不能区分特定的颜色,多数色盲患者都是红绿色盲,所以你需要使用其他的方法,例如不同形状、不同材质加以区分。
  用户认知能力
  一般人的观念里会绝对化地将人分为完全能力人和残疾人,基于这个观念产品也被设计成针对完全能力人使用的或针对残疾人使用,实际上人的能力值有连续的变化范围,而且这种变化毫无规律可循,打个比方,量子物理学家在使用功能手机的时候可能会遇到困难,而同样的手机给到一个平均智商的十几岁小孩手里,他却能玩得得心应手。
  在UI设计领域,不管用户的认知能力和水平如何,都应该是设计师潜在的目标用户。降低一件产品的能力要求可以使更多的人能够使用该产品,并且使之前感觉使用困难的那部分人更易使用,这一点同样适用于UI设计,在一个界面中,你增加的元素越多,整个界面的复杂性也就随之增加,用户在使用上所花的努力也就越大。曾经有人说过:“最好的设计不是用来看的,是用来体验的”。这意味着,你的 UI 应该让用户去体验,而不是放一些花里胡哨的东西给用户看。UI 设计越简单,用户体验越好,不要滥用设计元素,不要使用拥挤的界面,拥挤的界面,不管功能多么强大,都会吓跑用户。
  在一些优秀的设计中,你看不到华而不实的UI修饰,或是用不到的设计元素。也就是说,其必须的元素一定是简洁且有意义的。当你想着是否要在界面上加一个新功能或是元素的时候,问问自己,“用户真的需要这些吗?”或者是“为什么用户想要这个小巧的动态图标?”。你是否只是因为出于自我喜好而添加这些元素?记住,永远不要在UI设计中给自己出风头。
  自适应界面
  鉴于用户的认知能力会有很大差别,为了照顾普通的小白用户,我们要对界面不断地简化,比如说去掉一些功能,但另一个问题又随之而来,如果界面太过简单,又很难令那些想要更多功能或控制的高端用户满意。比如说,傻瓜相机操作简单,几乎人人都会使用,但是无法满足一些高端用户的需求,例如摄影师。于是,综合各方面的因素,最常见的解决方案是让用户根据自己的需求进行界面的自定义。这个方法真的可行吗?有关研究表明,只有不到5%的用户会对默认设置进行更改,这就说明了用户自定义的方法在界面设计中根本不可取。
  那么,有没有一种能够根据用户的认知能力和使用习惯进行自动适应的方案?虽然目前要实现这个功能,在UI设计领域还存在不小的难度,但这应该是值得尝试的一种解决方法。而且,自适应这个功能在其他领域已经有了先例,iPod之父Tony Fadell发明的智能恒温器Nest或许就是个很好的借鉴例子,Nest不但外观很潮,而且还能自动感应是否有人在家而调节温度,并且根据用户的习惯将温度自动调节到最舒适的状态,并且随着用户使用它的时间越久,它就会更加了解用户的习惯。
  虽然Nest仅仅只是一个特例,但至少说明自适应技术是可行的,这就让界面设计师的思维模式更加开放,或许将来要实现界面的自适应也并非不可能。
  结论
  我们已经攻克了各种各样的技术难题,比如实现Web的标准化、引入响应式Web设计概念、推出各种各样的触屏设备等等。也许是我们把太多精力投入在这些技术难题上,从而忽略了人性化界面设计的重要性。我们希望,互联网行业的下一次变革能把更多精力集中在如何让更多的应用和产品变得更为包容,将不同用户的认知能力考虑在内,让用户界面变得更加智能,从而更有效地为更广泛的人群服务,让包容性设计的风暴刮得更猛烈些吧!
  最后,鉴于包容性界面设计目前还处在探索阶段,这里所说的只是一家之言,如能引发更多的思考,本文便是物尽其用了。
  Via SmashingMagazine
  (Danice 供雷锋网专稿,转载请注明!)
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多