扁平化设计与色彩趋势

Making it Work: Flat Design and Color Trends
Designmodo版权所有
作者:Carrie Cousins
译者:UCD翻译小组波希米亚
原文地址: http://designmodo.com/flat-design-colors/

这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分。

扁平化设计进修

wistia

roybarber

squidee

solo

扁平化设计你可以通俗的理解为:使用简单特效,或者无特效来创建的设计方案,它不包含三维属性。诸如投影、斜面、浮雕、渐变等特效都不要在设计中使用。

扁平化设计给人的感觉通常都很简洁,即使它可以做的很复杂。简单、直接、友好的特性也使得它广受移动界面和时尚网站设计的青睐。

更多

颜色的代码表达式

The Code Side Of Color
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组波希米亚
原文地址: http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/

知道为什么给色彩命名总是很麻烦吗?因为任何两个人都没法对同一个颜色进行精确的感知和描述——尤其是当他们受到网站自身的情绪或气质影响时。给色彩命名, 最容易被印象所误导。即使像“蓝色”这样的说法也是不确切的。比如为了更准确,可以说是“天蓝”,“海蓝”,“牛仔蓝”或是“电焊火光蓝(arc welder blue)”。

描述的差异跟个人品味和所处环境都有关系。比如我们标注的“靛蓝”,“翡翠绿”,“橄榄绿”,“橘黄”,“绯红色”以及“卡巴莱(cabaret)”等。“酸橙(electric lime,大概是这个色)”到底是个什么颜色?你知道它的名字和精确的色调变化?——除非你是台电脑。

精确的代码表示

电脑在命名一个颜色时,通常使用所谓的十六进制代码来表示24位色彩。也就是说,通过用10个数字加6个字母的排列组合形式,可以产生16,777,216 种不同的6位字符——在哈希标记出现之前。与任何计算机语言一样,这其中也是蕴含逻辑的。如果设计师了解了十六进制色彩的工作原理,那它就不再是什么神秘的东西,而是一种工具。

把十六进制拆成易控制的字节

在背光显示屏上,像素点是暗的,只有当红,绿,蓝组合以后,像素才被点亮。采用简洁的十六进制表示这些代码组合,这样代码就容易理解了。如#970515, 我们来看一下它的结构:# 表示这是一个十六进制数,其余的6个字符被 0-9 和 a-f 分成三部分,每部分控制一个原色。

数值越高,原色就越亮。如上例,97 覆盖了红色,05 是绿色,15是蓝色。

更多

Web设计师能从游戏中学到些什么

What Web Designers Can Learn From Video Games
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组波希米亚
原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/

译者序:一直以来我都想写一篇关于游戏与交互设计之间关系的文章,因为我坚信好的设计和游戏一样有魔力,都能为用户带来乐趣。这可能跟我之前在游戏公司任职过有关,潜移默化地受到感染和熏陶。当看到这篇文章时,共鸣了,这就是我想要说的,于是我决定译过来,跟更多设计师产生共鸣,推动 “乐趣设计”,同时也为自己这方面的想法写下第一笔。

好的设计应该是融会贯通的,有相似的细节和处理方法,当然,还要有一个能够吸引人的理由或法宝,如果你有过这方面的零碎念头,而没有能汇总在一起,往下看,这就是了!

游戏越来越Web化,而Web也越来越游戏化。如果你想证明这一点,只需要去看看雅虎问答。有人问,有人答,最终获胜答案还能拿到奖励分(译者注:没玩过雅虎问答的想想百度知道)。这是一个排名系统,可以积聚和解锁系统中越来越多的功能。它的工作原理是因为心理的成就和游戏机制,从而鼓励互动。问题来 了,Web设计师们能从游戏中学到什么?或者更确切的说,是从视频游戏中?

一个好的游戏界面必须高度可用,并且直观,能够用尽可能少的动作完成很多重复的动作。它们需要具有吸引力,并且够可爱。一个好的游戏界面会给用户体验加分的。在游戏中,人们接受内容的同时不希望幻想被打破,所以再伟大的游戏产品都可能败于一个不给力的界面。

即使在像《波斯王子》这样的老游戏里,只有有限的系统功能,也要求设计师们必须做出一些创新。在功能越发丰富的今天,我们不难从现代视频游戏中发掘中更先进的设计技术。

网站的用户以同样的方式,希望其内容交付的方式,是很容易理解,直观,引人入胜,而且不需要过多滚动或点击。事实上,Web设计师可以从视频游戏界面中学到 很多。使用了通用游戏界面思想的网站,可以简化用户操作,同时为站点注入更多个性化。这样能带来更高的流量和回访率,甚至销售额(说白了,就是钱嘛!)

这并不奇怪,我们已经看到,像carousels,lightboxes,accordions和日益复杂的导航,已经通过CSS和JavaScript库大量涌入了浏览器中。无论是好事还是坏事,那都是另一篇文章要讨论的,本文将专注于技术,而不是那些错误的应用。

更多

UCD开心招聘页面这么切

UCD开心招聘-第1季

一大早看到JunChen开始锐荐“UCD开心招聘第1季”,二话没说,立马转推。这就是网络的力量,以至于随后不长时间UCDChina打开就困难了。有朋友说这是UCDChina赚钱的小玩意,没错,有钱才好换更好的硬件设备。

广告就打到这。来说说做这个页面的感受。有段时间没做代码了,重新操刀感觉还不错,至少原来的东西没忘,技术尚且还跟得上潮流,虽说是前端出身,不过干过这行的人都有这种感觉——放下一段时间不写代码,突然捡起来会有陌生感,特别是浏览器跟你找别扭,需要预热才能进入状态。

前端是辛苦的,好前端是难求的。顺便吐吐最近做项目的苦水,“万两黄金容易得,前端一个也难求”啊!都自己做?疯了,我累死了,团队没成长,项目成功又有什么意义。一个团队中,互相促进,共同提高。如果最终只成就了一个人,他也迟早会离开。离开了去哪?首先去“UCD开心招聘”看看。

这个页面潇潇同学给我出了不少难题,主要问题在高度自适应上,特别是底下的渐变和白云,还有上下呼应的一排人物。在做这套页面之前,首先要明白为什么设计这个,先花点时间读懂设计者的意图和目的,之后再着手做,这是有计划的执行,别盲目,少折腾。一旦领会意图,坚决执行,想尽办法把设计实现出来。不能让一个好的设计止步于平面阶段!

我现在的工作是视觉的上游,人手不够经常客串下游。UED每个角色是不分家的,充分理解、换位思考,每个人都要有“下游意识”,你所做的一切,都是为了让下游更好的理解、消化并执行,最终产出一套完整体验。

切页面,不仅仅是把设计稿代码化而已。