创造华丽UI的7条规则(Part1)

原文:7 Rules for Creating Gorgeous UI (Part
1)

翻译:David
Lee

简介

各位,友情提示先。这篇指导并不适用于所有人,那么,对什么人才有用吗?

开发者–在必要的时候,希望团结可以统筹出漂亮UI的开销工程师

用户体验(UX)设计师–他俩期待团结的著述集比呆板的PPT更赏心悦目,或者,想经过绚丽的UI包装传达更但是的用户体验,也一如既往适用。

只要您读过艺术院校或者你觉得自己一度变为一个视觉设计师了,这您很有可能发现这篇著作中充斥着:

a 无聊 b 错误 还有 c 令人气愤的内容。

自己不会介意的,你们所有的批评都是对的。关了那一个,去读点其余吗。

抑或,仍旧自己告诉你你究竟能在这篇著作中学到咋样啊。

先是,我曾是一名完全不懂视觉设计的用户体验设计师。我真心热爱用户体验设计,但当自家发现到,我可以找到一大堆理由来协助自己去学学——咋样统筹一个看上去不错的界面的时候,就丢弃了仅仅的UX设计:

本身的著作集就是个垃圾,完全没能突显出我工作和思辨的历程

假诺能提供更多业内的见地,而不仅仅是画多少个方框和箭头这么简单,我的发问客户自然更乐于为此买单。

说不准某天我会考虑加盟一个初期的创业项目?最好能成为工作中的全能王。

理由是找到了,但自己实在不懂美学那玩意儿。毕竟我只是个工程学的硕士–最值得骄傲的地点,大概就是能把某部东西设计的奇丑无比。

自家只是个工程学的大学生–最值得骄傲的地方大概就是能把某部东西创建的奇丑无比。 ”

最终,APP的规划美学依旧被自己搞懂了,用的是我定位的办法:冷酷,扎实的分析。而且假使能用的上,我不以“抄袭”为耻。我会花10钟头来搞定一个设计项目,但实际的计划工作只有1钟头。另外9时辰都在被惨痛的学习过程折磨着。几乎绝望的在google,pinterest和dribbble下面找一些能引以为戒的统筹素材。

下面的“规则”就是从这么些时刻里综合出来的。

送给那几个书呆子:现在自家的UI设总结是做的不易,这是因为自己分析研讨了不少东西——并不是因为自身猛然开窍凭着直觉就了解了美和平衡。

这篇著作讲的不是辩论,纯粹是实用性的情节。你不会在著作里看看黄金比例。我仍然不会提及配色法则。我从败北的计划中学到的就是,这事儿只可以凭靠坚持不渝不懈的演习才能落得。

试着这样想转手:柔道的树立源自于多少个世纪以来日本的物质文化和艺术学观念。你去报个柔道班,除了打斗外,你还会听到很多有关能量,气流和协调的理由。大概我要讲的也是这类东西。

马伽术,简单介绍一下,1930年的捷克,某个彪悍的犹太人对付纳粹时表达的格斗术。这东西一点儿都不艺术。在马伽术的科目里,你会学到如何用一支钢笔或者书来挖掉对方的眼眸。

我要讲的就是界面版的马伽术。

规则

如下:

光来自于天空

先用黑白来验证设计

留白的地方加大两倍

上学文字置于图上的不二法门(Part
2

让文字看上去很潮流— 或者常常尚(Part
2

只用美观的字体(Part
2

像歌唱家一样去剽窃(Part
2

大家初始学习啊。

平整1:光来自于天空

大脑在领略我们见到的界面时,影子是重大的要素。

这可能是读书UI设计时最重要却又不显眼的一个见识:光是来自于天空的。.光从天而降,这事情太稀疏平日了,而且直接这样,以至于从下方打出的光看上去真的很奇异。

呃……

光源来自于上方时,它会照亮物体的顶部并在人间成立阴影。物体的顶部就会更亮,下方就会更暗。

你不会期待人们的下眼睑都特此外黑啊,所以,假诺我们在这些恶魔般的眼睛下面多加一些金灿灿,突然间他们就改为了您家门前的魔鬼女郎。

是的,那多少个真谛一样适用于UI。就象是在大家的面部特征中总能看到影子处于下方,当您看遍那个UI元素,你会发现他们的花花世界同样有黑影存在。屏幕即便是平的,但大家花了汪洋脑筋,培育了平面上也可以展现三维效果的章程。

本人最欣赏的一部分是图形下方靠右的不得了手指图标。

例如这多少个按钮,固然是近乎“扁平”的按钮,也兼具广大与光线相关的细节:

未点击的按钮有一个肉色的底部,少年你懂的,太阳是照不到这里的……

按钮在未点击状态下,顶部会比底部更亮一些。这是因为按钮上有一个分寸的曲面。比如,你需要把一面镜子在您前边向上翘起才能在镜中看到太阳,所以发展翘起的平面总会对您反射更多的光。

未点击的按钮会投射一些淡淡的地阴影 —— 可能在拓宽的截图中能看的更明了。

点击后的按钮,底部如故比顶部还要暗一些,并且整个按钮全都更暗……这是因为它与屏幕本身处于同一个平面,光线就不可能自由的照到它了。也有人指出具体世界中的按钮,点击之后也会变暗,是因为大家的手挡住了光明。

这只是个按钮而已,就已经显现了4个分寸的亮光效果。学习暂告一等级,我们前几天要把光芒理论用在富有地点。

iOS
6有某些过时了,但是只要您想精晓光泽的表征,它能够做为一个很好的案例来进展讨论。

这是一对iOS
6设置按钮 — “勿扰情势” 和 “提示”。这没怎么惊天动地的,对吧?不过我们密切看看有多少光线效果在其中起了意义。

嵌入式的控制器顶部边缘投射了一个很轻微的阴影

滑动按钮“打开”的边缘也有一部分黑影

滑动按钮“打开”的外表是凹陷的,底部会反射更多光线

小图标有一点点鼓鼓的。你看看它上半有些的亮光了吗?这表明它的外部和光源是有些垂直的,由此它能接受到广大光辉,同样它也能把广大管线反射到你的眼睛里。

分栏凹槽的黑影处有有限曲折的感觉到,这是因为阳光来自上方,假诺光线反过来,那么阴影也会随之转移。

又一个分栏凹槽的样式,来自于本人一度设计的Hubster

普遍向内凹陷的视觉元素:

文字输入区域

点击后的按钮

滑动轨迹

Radio按钮 (未选中时)

勾选框

广阔向外优良的视觉元素:

按钮 (未点击时)

滑动的按钮

下拉控制面板

卡片

已被入选的radio按钮(其中的按钮部分)

弹出框

今昔你懂了吗,你会在许多地方来看他们。欢迎入门,少年。

等等,那扁平的计划性啊?

iOS7的“扁平设计”曾经在各大科技论坛吸引了轰动。正如它的名字所说,它真心是扁平的。没有此外模拟现实的隆起或者凹痕——只无线,形状和单色。

自身跟你们一样,真心喜欢干净简洁的设计,不过实话实说,我不觉得这会是个持久的趋势。那多少个在细微处模仿3D空间的界面设计真的令人备感很自然,似乎我们很难将这种做法完全放任。

更有可能的是,我们会在不远的先天来看更多半扁平化的设计。(这也是自我提出您连忙了然的筹划风格)。 我会称那种风格为 “扁平化设计”。依旧干净,依旧简单,然则当你敲打,滑动,点击的时候,仍是可以收看影子和曲线 。

OS X Yosemite— 扁平化,但不扁平。

就在自己写这篇文章的时候,Google基于旗下不同出品生产了他们的“Material
Design”语言。这是独创的视觉语言,它的精髓就在于,追求模仿物理世界。

这是Material
Design下面的一个图示,示意怎么样通过不同的影子来代表不同的深度。

这才是自家身边最常出现的事物。

它利用了真正世界部分细微的因向来传递信息。这或多或少第一,只是轻微的。

也无法说它完全没有模拟真实世界,然而这不同于二〇〇六年的网页设计风格。并从未利用材料,渐变和光辉的场所出现。

自我以为,扁平化就是前景之路,至于扁平的?臆度很快就要成为历史。

扁平设计现在看起来可真火啊!

规则 2: 以黑白效果起步

水彩是可是复杂的计划性因素,在增多颜色以前,设计只是灰度的,那更便于让你关心要素之间的上空和布局。

用户体验设计师如今确实很爱惜“移动优先”。这象征你得想象页面上的相互在一个部手机上是否行得通,即便你面对的是一台超高分辨率的Retina展现器。

这种预设的限定标准特别好,它能让思绪更清晰。您从一个较难的题材起步(在小屏幕上构建一个可用的采用),然后再让方案适应更易于解决的问题(大屏幕上的可用应用)。

这些范围条件的情状跟上边类似:从黑白效果最先设计。从更难的题目出发,先让使用无论在另外动静下都不错和好用,唯独紧缺颜色。最后再进入颜色,同时要力保,颜色的加盟都有目标性。

Haraldur
Thorleifsson的灰度线框看上去要比少数设计师最后的网页设计创作还好

这就是让使用看上去“干净”“整洁”的最靠谱方法。尽管你在各样地点都采纳了无数颜色,这会让规划看上去很不好。黑白效果会迫使你优先专注于空间,大小和布局,而这才是让页面看起来到底简洁的更深层次的原委。

经文灰度设计。

有些意况下,黑白效果就没怎么用了。比如为了这么些引人注目的对象展开规划的时候——“动感的”,“炫目标”,“卡通风格的”等等,这亟需设计师支配颜色的能力非常强硬。然则多数选用并不需要如此强烈的宏图目的,只要形成彻底和简单就够了。而对于规划来说,这多亏公认更难成功的业务。

璀璨且充满活力的设计,由Julien
Renvoye
(左侧)和Cosmin
Capitanu
(左边)所计划。这么些规划要比看起来难得多。

黑白效果,无处不在。

步骤2: 怎样扩充颜色

最简便的颜色使用办法就是加上单色。

为一个灰度的网页设计增添单色可以自由高效的抓住眼球。

您也可以更进一步。灰度+二种颜色,或者灰度+同一色调下的有余颜料。

颜色密码实战——等等,什么是颜色?

多数意况下网页中的颜色都是利用RGB16进制代码来兑现的。因为RGB的拔取几乎变成常识,所以我们一再忽视了这样一个实际,RGB并非在统筹中贯彻颜色的最优框架。而比它更好的框架是HSB(H代表色调,S代表饱和度,B代表亮度)

HSB比RGB更好是因为它更契合大家体会颜色的法门,而且你可知预料到当您改变HSB数值时会对颜色暴发咋样的震慑。

假定这对你来说仍旧个新闻,这您可以读读这篇小说,高级的HSB颜色框架

单色调金色大旨 来自Smashing
Magazine
.

单色调红色主旨 来自Smashing
Magazine
.

经过改动一个颜色的饱和度和亮度,你可以创造多种颜色——暗色,亮色,背景观,强调色,抢眼——可是又未必让眼睛不能经受。

在计划中强调或者中和某种元素时,最靠谱的法子是应用基于联合颜色(或二种颜色)的有余颜料,这能避免将所有规划搞得乱七八糟。

Kerem
Suer
所做的倒数计时器,颜色的运用很有助益

在视觉设计领域,颜色是最最复杂的。所以当您起来手头的统筹工作时,很多关于颜色的工具都没用或者并不实用,但自我要介绍多少个虔诚给力的好工具。

小工具合集:

决不使用肉色(IanStorm
泰勒). 这么些网站上秉持的见识是彻头彻尾的棕色在实事求是世界里几乎没有出现过,还有色调是何等影响阴影的灰度 - 尤其是影子的暗部 - 那能为你的筹划增加更多视觉充裕感。此外,带有色调的灰度色更加类似对实事求是世界的模仿,这是个固有的优点。

Adobe Color
CC
用来搜寻颜色,修改颜色和创立颜色组合的超酷工具。

Dribbble按颜色查找这是另一个技术,你可以按一定颜色查找设计创作的。让颜色的利用有据可查,一旦你早就确定了特需实用的水彩,就来这里看望世界上最优良的设计师在她们的规划上怎么行使同一的水彩。

规则3: 让留白扩充两倍

为了让UI看上去更有设计感,可以留出更多通透的半空中。

在规则2里,大家提过黑白效果会迫使设计师在设想颜色以前先去思辨页面空间和布局,并且这种思维情势特别好。好吧,接下去的年华大家好好聊聊空间和布局。

假定你写过HTML代码,你可能很熟谙HTML代码以这种最原始的样板显示在页面上。

差不多,所有东西都被打散放置到屏幕上,字体很小;行与行之间基本没有空间。段落之间有一点点上空,不过远远不够。段落的直白延伸到页面的另一头,无论页面宽度是100px仍然10000px,这彰着也不够好。

从美学角度说,这简直糟透了。假诺您期望您所做的UI看起来是规划过的,你需要在筹划中追加更多透气的上空。

偶然需要充实的半空中多到接近荒谬。

空白区块,HTML和CSS

一经你跟自身同一,习惯于拔取CSS来决定页面的布局,并且默认情况下不会利用空白区块,这现在是时候来改变自己的坏习惯了。在一开头就把空白区块当作页面默认的指南——一切都从空白区块开头,知道您用其它页面元平素代替这一个职位。

听起来很有禅意?我觉着这正是大多数人直接忽略这件事的原因所在。

以空白的报表来搭建你的页面,这需要你只行使空白区来初叶筹划。你会在中期就考虑到边距和空中。任由你在页面下边画些什么事物,都会慎重考虑其对空白区域的熏陶。

从一堆没有样式的HTML开始布局,也象征你会更爱惜页面和情节的涉嫌。空间和留白是延续考虑的工作,这或多或少务必精通。

这是一个音乐广播界面的概念设计,来自Piotr
Kwiatkowski
.

特别注意一下左方的菜系。

左侧菜单

菜单项之间的垂直空间中度正好是文字中度的两倍。你所看到的12px字体上下正好有相同低度的留白。

抑或也足以小心一下列表中的标题。题目“播放列表”和它下边的下划线之间有15px的距离。那比字体本身的低度还要高一些。更不要说每个列表之间的离开有25px那么远。

顶部的导航条有更多的半空中。文字“搜索音乐”占了整整导航条中度的20%。图标也利用了仿佛的可观。

左边栏的文字里面留出了相比富厚的长空,甚至更多。

Piotr在留白这件事上正是做到了仁至义尽,而且结果肯定。这即使是她自娱自乐做的概念设计,但因为在美感上下足了功夫,能够和市面上最好的音乐播放器UI界面不分厚薄。

好吧,丰盛的留白可以让最乱的界面看起来简洁和诱人——像Forum一样。

Forum的概念设计,来自Matt
Sisto

活着Wikipedia.

Wikipedia概念设计,来自Aurélien
Salomon

你会意识对此有广大争持不休,比如,有人指出Wikipedia的再规划从意见上完全忽视了使用网站时的功用性。不过我们也不能够说这不是个好计划,完全不值得学习!

在行以内留出空间。

在要素之间留出空间。

在要素结合的组之间留出空间。

浅析咋样才是最管用的。

可以吗,这就是首先有些的内容。谢谢您的不止关注。