扁平化设计与可访问性

标签: Tips 扁平化 拟物化 设计 | 发表时间:2013-02-17 08:11 | 作者:神飞
出处:http://www.qianduan.net
译自: Flat Design and Accessibility
原文: 扁平化设计与可访问性
请尊重版权,转载请注明来源,谢谢〜〜


这几年互联网变化好多,我们在网上浏览的方式也一样。在本文中,我们将看一下最近扁平化设计带来的可访问性提升以及使得互联网或多或少更开放和可用性。

扁平化元素

拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状,因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助。然而,对视障用户能有多少用户呢?坚持这种设计方法对他们会有价值吗?好吧,和拟物化设计相对应的,扁平化设计,有很多优势可以帮助到这些特殊需求。因为扁平化设计使用基本的形状,比如,正规/不正规的多边形,它们更容易识别。

在上图中,左边的,扁平化设计展示了方形/矩形元素和高对比色的按钮。而右侧的拟物化计算器,使用了低对比色和大量的立体和阴影元素。

扁平化和拟物化的两个计算器对比展示了两种技术之间的不同。扁平化设计给予按钮本身较小的重要性同时增强了内容(本例中的数字和数学符号)。另一方面,拟物化设计通过给予按钮更大的重要性而使得它们很突出,而内容却因为低对比度而不太醒目了。

上面的例子展示了扁平化设计如何提升和给予内容更大的重要性,从而能证明对视障用户是有帮助的。

大字体和小图标

不只是在扁平化设计中,极简主义设计也一样,大字体元素是最重要的一种表现。字体能让用户聚焦在内容,从而成为设计流程中最重要的一部分。当前设计中的趋势包括高对比色的大字体、清晰的自定义字体和平衡的段落的使用——基本上就是,把传统印刷排版带到Web中来。这些原则增强了易读性和可读性,提高了易用性的另一个方面。毕竟,高对比色的自定义字体能提升可访问性是一个众所周知的事实。


这里的共用元素是使用大而清晰的高对比色字体增强可读性(比较像Sans-Serifs)

此外,清晰的大字体可用于基本元素中以创建Web和UI中强对比色的按钮,从而帮助用户轻易地识别指定元素的功能并将之与别的元素区分开来。说道元素,这些扁平化的元素在设计过程中变得真的很重要,因为它们有助于给于扁平化设计流程个性和强度,从而构建更好的所有按钮和界面元素的表现、可见性和清晰性。


基本形状、实色和简单的图标组成了这个优秀的iPhone皮肤的一部分,它展示了最好的扁平化UI元素。

实色与高对比色

到现在为止,我们讨论了应用于大字体和图标的高对比色。现在,让我们看下细节方面。在网页设计中使用高对比色不是一个新的理念。事实上,多年来,高对比色被用于为网页设计中特定的关键元素提供更好的视觉效果。

网上由很多出色的教程和工具来帮助你创建精确的色彩组合。比如,
Color Scheme Designer
向你展示单色、双色、三色、四色、以此类推的色盘,并让你更多了解某个特定颜色如何与别的颜色相互影响。


Color Scheme Designer, 一个很赞的工具,可以查看颜色混合时的表现,然后用其结果作为创建高对比色的扁平化设计的参考。

同时,高对比色也可以被用于颜色之外,比如形状、分派、高度、线性、纹理和字的粗细。事实上,玩转这些所有元素及其相应的对比度能提升你的设计的表现,并使你的设计让视弱的人更易用。

高对比色网站及其灰度实例

这里是一些高对比色网站及其灰度版本,有的做了负反转,展示出漂亮的设计是如何天然的兼容了可用性和易用性理念的。


bigtop.it. 使用了大的字体和元素,暖色和温和的颜色之间的软对比。他们定义的对比度恰到好处。


aaugh.it 极简主义带来的简易的优势和适度的对比度


cheesesurvivalkit.com 有个漂亮的灰、白、红三色,提供了强对比度并提升了可读性和元素识别度。


metaphiziks.com 很完美的提升了内容显示。


Symb.ly是一个使用了极简样式来让你专注于内容的高对比度网站。


Odopod.com展示了一个漂亮的使用了粉色、白色和高规格图片的温和的对比色。当转换到灰度版本,所有元素都完全可识别。


unfold.no 是一个使用了高雅、简单设计和清晰内容的网站。

相关 [设计 访问] 推荐:

扁平化设计与可访问性

- - 前端观察
译自: Flat Design and Accessibility. 原文: 扁平化设计与可访问性. 请尊重版权,转载请注明来源,谢谢〜〜. 这几年互联网变化好多,我们在网上浏览的方式也一样. 在本文中,我们将看一下最近扁平化设计带来的可访问性提升以及使得互联网或多或少更开放和可用性. 拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状,因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助.

日访问量百亿级的应用如何做缓存架构设计

- - IT瘾-dev
中生代技术链接技术大咖,分享技术干货. 链接3000+技术总监/CTO, 每天早上推送技术干货文章. 微博日活跃用户1.6亿+,每日访问量达百亿级,面对庞大用户群的海量访问,良好架构且不断改进的缓存体系具有非常重要的支撑作用. 4月21日,中生代技术走进盒子科技的现场技术交流活动上,新浪微博技术专家陈波为大家讲解了微博Cache架构的设计实践过程.

Google和SugarSync访问异常

- Freeman - 月光博客
  今天下午,Https的Google出现了短时间的访问异常,国内各地网友发现其访问出现不稳定状态,有时可以访问,有时无法访问.   这对中国用户最直接的影响是,很多用户无法访问Https版Google Reader,还有一些用户无法登录Gmail邮箱.   今天的另一个坏消息是,知名美国云存储服务SugarSync网站的域名被关键字屏蔽,目前已经无法从中国访问,虽然SugarSync的上传速度比起Dropbox还有差距,但至少美国的服务用起来放心一些,早先云存储服务Dropbox被屏蔽时不少网友转到了SugarSync这个服务,不过值得庆幸的是,该服务的电脑客户端和iPhone手机端都可以正常使用,上传和下载文件都没有问题.

昨天访问了李娜

- sg - 咆哮女郎柏邦妮
昨天访问李娜,当然也见到了姜山. 体育界人士,原本不在我专业范围内,但是有一种朴素的好奇. 当世的一流高手,是怎么样的状态. 拄着网球拍,坐在镜头前,如沉渊一样深静. 环抱着网球拍,像剑客抱着自己的剑,有一种不怒而威的自信. 在镜头前走动,跑动,是不擅拍照人的青涩,. 但是表演挥拍动作时,几万个小时的积累就化作了自然,.

HBase 之访问控制

- gengmao - Trend Micro CDC SPN Team
构建和运维HBase集群是一个非常有挑战性的工作. HBase凭借其在海量数据的良好的扩展性和高效的读写能力,受到越来越多公司的重视. 在公司里,HBase越来越受欢迎. 希望通过HBase读写数据的产品越来越多,在兴奋之余,头疼的问题也来了. 毕竟,作为线上的产品,我们不希望过多人随意的访问,会照成很多潜在的风险,比如误删,误操作.

修改Hosts访问Twitter/Facebook

- cheng - 启光博客
  以前没感觉Facebook多么特别,最近又玩了一些日子,感觉还不错. 因为关注Facebook所以对最新Hosts比较关注,今天发现一个网友整理的,测试可直接使用. 虽然一直在文章中说以后不再发布类似的文章,不过没忍住,网友低调点使用吧,希望对经常访问Twitter与Facebook的网友有此帮助.

微软Hotmail无法访问

- Tim - 月光博客
  今天上午,世界最大的电子邮件服务之一:微软Hotmail出现了大规模长时间无法访问的状况,同时无法访问的还有微软的SkyDrive等服务.   通过对其域名的测试发现,Hotmail的域名在某些地区无法解析出IP地址,Ping不通,其NS服务器同样也Ping不通,怀疑有可能宕机.   中午时候,微软在Hotmail官方Twitter发布声明称,因为停电的原因导致Hotmail、SkyDrive等服务故障,目前正在积极努力的解决这个问题.

Linux可访问性现状

- - Solidot
一位有计算机科学学位的盲人Robert Cole在DistroWatch Weekly上发表文章谈论Linux对残障人士的可访问性. 他说,Linux为视力残障人士提供了大量优秀的软件,相比之下Windows盲人用户如果想使用上类似的工具至少要花600美元. 他使用Linux已将近7年,有5年只用Linux.

Android_ContentProvider_访问通讯录

- - CSDN博客推荐文章
本博文为子墨原创,转载请注明出处. 联系人提供者是一个很强很灵活的应用组件,用来管理联系人信息,可以方便的操作和查询联系人信息. 主要的3张表格,contact,raw contact,data,但是我们操作主要为raw contact,data两张表. /** * 使用批处理,插入联系人信息 * 插入姓名,email,家庭电话,工作电话,手机号码信息 * @param view */ public void insert() {.

Nginx并发访问优化

- - CSDN博客推荐文章
    Nginx反向代理并发能力的强弱,直接影响到系统的稳定性. 安装Nginx过程,默认配置并不涉及到过多的并发参数,作为产品运行,不得不考虑这些因素. Nginx作为产品运行,官方建议部署到Linux64位系统,基于该建议,本文中从系统线之上考虑Nginx的并发优化.     1、打开Linux系统epoll支持.