UI设计新手不可错过的条法则

1、UI 设计新手不可错过的7 条法则2014-11-29YvesYAN36 氪本文编译自Medium ，作者是一位UX （ User Experience,用户体验）设计师，他通过自己学习UI 设计的过程，总结出7 条实用的法则，为UI 设计新手提供了宝贵的经验。? 序言首先，明确一点，这篇文章并不是为所有人准备的，而是有特定的目标读者：? 想要在开发产品时设计出好看 UI 的开发者。? 想要让自己作品集更出彩的 UX设计师，或者是想要做出更精美的 UI 和UX的设计师。如果你是学艺术的学生或者已经是 UI 设计师了，你可能觉得这篇文章很无聊，而且观点都是错的。没关系，你的批评没错，把这个网页关

2、了，去忙别的事吧。那么从这篇文章中到底能学到什么呢？我曾是一名不懂 UI 的 UX 设计师。我非常热爱 UX 设计，但是后来我发现，做出精美的界面是多么的必要 :? 我以前的作品集看起来一团糟，显得我的作品和思考过程很差劲。? 我做 UX咨询的客户更喜欢有能力呈现作品的人，而不是只会画一堆方块和箭头的人。? 我能为一些早期的创业公司工作吗？还是一边儿呆着吧。我当然也有借口：我没有美术基础，我主修工程专业，所以我做出难看的东西也无可厚非。最 终，我还是学了 app 设计，不断地分析案例，厚着脸皮临摹成功的作品。假设我在 1 个 UI 项目上花 10 个小时的时间， 其中只有 1 个小时是有效的，

3、 其它 9 个小时都是在失败中不断地学习，玩命的在 Google 、Pinterest 或者 Dribble 上找值得借鉴的东西。下面这些“法则”都是我从失败中总结出来的。 所以，我需要提醒新人： 我现在擅长 UI ，主要得益于我经常分析，并不是突然开悟，理解了什么是美，什么是平衡。这 篇文章不讲理论，只谈应用。我不会讲什么黄金分割、色彩理论，只有实站中总结出的经验和教训。 就好像，柔道源于日本几个世纪以来的尚武精神和哲学理念。上 柔道课时，不仅能学到打斗，还会学到很多关于能量、气息与和谐之类的东西。而以色列格斗术（ Krav Maga）则完全不同。这种格斗术是纳粹压迫下犹太人发明的。 其中根

4、本没有“艺术”， 在以色列格斗术的课堂上，你学到就是怎样用一根笔或者本书袭击别人的眼睛。这篇文章就是产品设计领域的以色列格斗术。以下是我要讲的法则：? 光线来自天空? 黑白优先? 增加空白空间? 学会在图片上呈现文字? 做好强调和淡化? 只用合适的字体? 像艺术家一样偷师我们来一起看看这些法则。? 法则 1：光线来自天空阴影能够告诉人脑我们到底在看什么样的 UI 元素。这可能是学习 UI设计时，最容易忽略却又极为重要的一点了:光线来自天空。光线总是从天空（上方）来的，从下面照上来的光看起来会非常诡异。当光线从天上照下来的时候， 物品的上端会偏亮， 而下方会出现阴影。 上半部分颜色浅一些，而下半

5、部分深一些。从下面打一束光到人脸上是不是看起来很渗人？ UI 设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是 3D 的，在每个元素的下方加一些阴影。就拿这个按钮举例，这是一个相对“扁平化” (flat) 的按钮，但依然可以看出一些光线变化的细节 :? 没有按下去的按钮底部边缘更暗，因为没有光线照到那里。? 没有按下去的按钮上半部分比下半部分稍微亮一些。 这是在模仿一个略有弧度的表面（见侧视图）。? 没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。? 按下去的按钮整体颜色都更暗了， 但下半部分的颜色依然比上面深。 这是因为按钮在屏幕的平面上，光线不容易照到。

6、也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。这么一个简单的按钮就有 4 种不同的光线变化。实际上，我们可以把这种原则运用到各处。iOS 6 有点过时了，但还是学习光线不错的案例。这张图是 iOS 6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线变化。? 控制面板的上边缘有一小块阴影。? “开启”滑动槽上部也有阴影。? “开启”滑动槽的下半部分，反射了一些光线。? 按钮是突出的，上边缘较亮，因为是与光源垂直的，接收了大量光线，折射到你的眼睛中。? 因为光线角度的问题，分割线处出现了阴影。通常会内嵌的元素：? 文字输入框? 按下的按钮? 滑动槽? 单选框（未选择的）?

7、复选框通常会外凸的元素? 未按下的按钮? 滑动按钮?下拉控件卡片? 选择后的单选按钮? 弹出消息等等，现在不是追求扁平化的设计吗？iOS 7 引发了科技界对于“扁平化设计” (flat design) 的追求。也就是说图标是平的，不再模仿实物而外凸或内凹，只有线条和单一颜色的形状。我很喜欢这种干净、 简洁的风格， 但是我认为这种趋势不会长久。 通过细微的变化模拟出 3D 的效果非常自然，不会被完全取代的。在不久的将来，我们很可能会看到半扁平的 UI （这也是我推荐你使用的设计风格）我把它称为“ flatty design ”，依然非常干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提示。现

8、在， Google 也在各个产品上推行他们的 Material Design ，提供一种统一的视觉设计语言。 Material Design 的设计指导为我们展示了它如何运用阴影表现不同的层次。这也是我所认同的类型。用现实世界的元素来传递信息，关键在于 : 细微。你不能说它没有模仿现实世界， 但也绝不是 2006 年的网页风格， 没有纹理， 没有梯度，更没有光泽。我认为“ flatty”是未来的方向。扁平化？早晚会过时的。? 法则 2：黑白优先在上色前用灰度模式设计可以简化大量的工作，让你更加关注空间和元素布局。UX 设计师现在都喜欢“移动优先”的概念，这就意味着你要先考虑好在手机上如何显示页

9、面，然后才考虑在超清的 Retina 屏幕上的显示效果。这种限制非常好，能够帮你理清思路。先解决一些棘手的问题（在小屏幕上显示）。然后再解决简单的问题（在大屏幕上的可用性）。我希望你先用黑色和白色设计， 先把复杂的问题解决了。 在不借助颜色帮助的情况下把 app 做得美观易用。最后再有目的地上色。这种方法能保持 app“干净”、“简洁”。加入过多的颜色很容易毁掉简洁性。“黑白优先”会促使你关注空间、 尺寸和布局这些更重要的问题。 先来看一些经典的用灰度模式设计的页面。“黑白优先”法则并不适用于所有情况， 比如运动、卡通等有着鲜明特色的设计就需要好好地运用各种颜色。 不过，大部分 app 并没有

10、这样鲜明的特点， 只要保持干净和整洁就好， 绚丽的颜色被公认是很难设计的， 所以，还是先用黑色和白色来吧。第二步 : 如何上色上色最简单的方法就是只加一种颜色。在灰色的基础上只加一种颜色可以简单快速的吸引眼球和注意力。你也可以更进一步，在灰色的基础上加两种颜色， 或者添加统一色调的多种颜色。实践中的颜色法则 什么是色调？网页主要用的是十六进制 RGB 表。但 RGB 不是个好的颜色设计框架， HSB 模式会更好用，其中 H(hues) 表示色相， S(saturation) 表示饱和度， B（ brightness ）表示亮度。HSB 模式是比 RGB 模式更适合我们看待颜色的方式。如果你对这

11、方面不太了解，以下是一些 HSB 模式简单的入门知识。通过调整单一色相的饱和度和亮度， 你可以生成各种不同的颜色深色、 浅色、背景色、强调的地方、吸引眼球的地方等，但是又不会很扎眼。使用一种或两种基础色调的多种颜色是强调和淡化某些元素， 而又不把设计搞得一团糟的最可靠的方法。关于颜色的其它几点建议颜色是视觉设计中最复杂的。 我从复杂的理论和长期的实践中挑出了一些好的建议送给你 :小工具箱：? 不要用纯黑色： 在现实世界中几乎见不到绝对的黑色。 调整不同的饱和度可以增加设计的丰富程度，也更接近现实世界。? Adobe Color CC ：寻找、调整、创造颜色组合的绝佳工具。? 在 Dribble

12、 通过颜色搜索：寻找某种颜色如何搭配的好方法，非常实用，如果你已经决定了要用那种颜色， 可以通过颜色搜索看看世界顶级的设计师是如何配色的。? 法则 3：增加空白空间为了让 UI 看起来更加有设计感，留出一些空白的空间。在第 2 条法则中，我说到了黑白优先的原则，让设计师在考虑颜色之前先想想空间和布局，那么现在我们就来说说如何安排空间和布局。HTML的默认版式是这样的：所有东西都堆在屏幕上，字号、行距都很小，段与段之间有一些间隔，但是也不是很大。这么布局实在是太难看了。如果你想设计出精美的 UI，那就需要留出更多空白的空间。留白空间、 HTML 和 CSS如果你和我以前一样， 习惯用CSS 来调

13、整布局， 那你最好改掉这个坏习惯， 因为 CSS 默认是没有留出空间的。 试着把空白当作默认状态， 在空白页面添加各种元素。从没有修饰过的 HTML 开始，先做好内容，然后再做排版。下图是 Piotr Kwiatkowski设计的一个音乐播放器。请注意左侧的菜单栏。字号是 12px ，行间距有文字的两倍高。再看看列表的名称，“PLAYLISTS”和下划线之间有 15px 的空白，播放列表名称之间还有 25px 的间距。在顶部导航栏也有很大的空间，搜索图标和“ Search all music”占到了导航栏高度的 20%。留白的空间收到了良好的效果， 不同的元素有机的组合在一起， 使得这个页面成

14、为最好的音乐播放器 UI 之一。大量的空白可以把混乱的界面做得简洁美观，比如这个论坛：或者维基百科：很多人认为在维基百科的这个新页面上， 很多功能找不到了， 但是你不能否认这是学习页面设计的一个好案例。在行之间留出空间。在各个元素之间留出空间。在各组元素之间留出空间。分析一下哪些是可行的。? 法则 4：学会在图片上呈现文字在图片上优雅地呈现文字并不容易，这里给出6 种方法。如果你想要成为好的 UI 设计师，你必须学会在图片上美观地呈现文字。 优秀的设计师在这方面做得都不错， 而水平较低的设计师往往在这方面也比较差， 甚至完全不会。在学习了这部分以后，相信你会有很大的提升。方法 0：直接在图片上

15、放文字我很犹豫要不要讲这种方法， 因为应用起来十分困难。 不过直接在图片上放文字从技术上来说也是可行的，下面这个网站的首页就很不错，所以说说也无妨。直接在图片上放文字时，有几点需要非常注意：? 图片应该比较暗，而且颜色不能有太大的反差。? 文字必须是白色的，我知道你也能找到用其它颜色的案例。但是我觉得，你最好还是用白色。? 在不同屏幕，不同尺寸的窗口调试页面，确保各种情况下文字都是清晰、易于辨识的。上面这 3个方面调整好就OK 了，不要再做其它处理。我自己从来没有在任何专业的项目上直接把文字放在图片上， 这种方法是可行的，也能做出酷炫的效果，但还是小心点。方法 1：暗化整张图片可能在图片上放文

16、字最简单的方法就是暗化整张图片， 如果原图颜色不够深， 你可以用半透明的黑色在上面覆盖一层，比如下面这个案例就加了一层不透明度 35% 的黑色。如果你直接放原图，底色太亮，和文字的反差不够明显，看不清文字。类似的方法同样适用于小图。加一层黑色是最简单、 普适性最强的。 当然你也可以用其它合适的颜色， 比如这样：方法 2：给文字加个框这是一种简单有效的方法。 在白色文字下方加上一个略透明的黑色方块， 就可以放在各种各样的图片上了，而且显示效果非常清晰。当然，你也可以放别的颜色，只是需要小心谨慎。方法 3：虚化图片虚化图片是增加文字易读性的好方法， 把文字下方的图片虚化了， 同时把虚化部分亮度调低

17、。iOS 7 用毛玻璃的效果虚化了背景， 而 Windows Vista也使用了这种虚化效果。虚化图片的方法也有局限性， 你需要确保在不同屏幕上图片尺寸调整后， 文字依然是在虚化的区域上的。看看下面这个例子， 你能看清小标题吗？真不知道这样的设计是怎么通过审核上线的。方法 4：底部褪色所谓底部褪色是将图片的下边缘变暗一些， 然后在放上白色的文字。 这是一种非常有独创性的方法，我不知道在 Medium 之前有没有人用过，但我是先在 Medium 上看到的。乍一看，你可能觉得这就是把文字放在了图片上。其实不然，图片上有一些非常细微的变化，中间完全没有黑色覆盖，而底部有不透明度大约 20% 的黑色覆

18、盖在上面。这样的变化很难看出来，但确实存在，而且确实提高了文字的可辨认性。此外，Medium 还给文集图片上的文字加了些许阴影， 进一步提高了文字的易读性。最终的效果就是 Medium 可以把任何文字放在任何图片上，阅读体验非常好。有人可能会问了，为什么是把图片的底部变暗呢？为什么不能是图片的其它区域？要回答这个问题，请看法则 1：光线来自天空。光线从上面照下来，图片的上方亮一些，而底部较暗，看起来更自然。此外，你还可以把虚化和底部褪色结合起来， 做出底部虚化的效果， 比如下面这张图的效果：方法 5：把图片部分区域的光线变得更柔和Elastica 的博客的题图并不是太暗，而且对比都较强。为什么

19、文字的辨识度还这么高呢，就像下面两张图显示的这样：这里实际上是把图片局部区域的光线变得更柔和， 突出了文字。如果我们在浏览器上缩小 Elastica 博客，会看出到底发生了什么。在图片左下角有一块阴影区域，文字置于其上，就很容易辨认了。这可能是在图片优雅呈现文字最细微的一种方法。 我还没在别处见过，保存下来，说不定将来什么时候就用到了。? 法则 5：做好强调与弱化把文字设计得又美观又得体通常就是通过放大或缩小文字，做出反差的效果。我认为， UI 设计最困难的地方就在于文字的装饰，因为设计文字时需要考虑的因素太多了：? 字号? 颜色? 字体粗细? 大小写? 斜体? 字母间距? 页边空白（准确的说

20、不是文字的一部分，但是容易影响阅读时的注意力，所以也算在这个列表里了）还有其它一些方法调整文字吸引读者的注意力，但是不常用，也不推荐你使用。? 下划线。下划线现在基本上等同于超链接了， 我觉得你还是不要挑战人们的常识比较好。? 文字背景色。这个有时候也被当作超链接，只不过不是那么常见。? 删除线。一边待着去吧，你这个怪人。就我个人经验来说， 当我觉得一段文字设计的不好时， 通常不是因为用了大写字母，或者颜色太重，而是因为各种要素的搭配出了问题。强调和弱化你可以把所有的文字样式分成两类：? 增强可读性的样式：大字号、粗体、大写等；? 减弱可读性的样式：小字号、与背景对比不明显、空白较少等。上图“

21、 Material Design”这个标题就很突出：字号大、反衬明显、字体较粗上图页脚的字就是弱化处理的，字号小、反衬不明显、字体较细我认为文字设计的核心在于：标题是唯一需要全部强调的元素，其它的部分则应该将强调与弱化结合使用。如果网页上某个元素需要强调， 把强调和弱化结合在一起， 可以避免整个页面看起来太有压迫感，同时又让各个元素的呈现效果恰到好处。下面这张 Blu Homes 的首页堪称是这方面的典范：上方文字较大，突出显示，但是用了小写字母。没有给人强烈的压迫感。网页上的数字字号较大，是网页上的重要信息。但是请注意，数字的字体很细，与背景色对比也不明显； 而数字下方的单位虽然写得很小，

22、却全部加粗， 用大写字母。这就是设计中的平衡。上面这张图是 ContentsMagazine 的网站，也是学习强调和弱化的一个好案例。? 文章标题是唯一没有用斜体的部分， 而且还做了加粗处理， 更容易吸引读者的关注。? 作者姓名写在文章标题下方，字体加粗，与没有加粗的”by“区分开来。? “ ALREADY OUT”独立出来，字号很小，与背景区分不明显，但是用了大写字母，字间距很大， 文字外围空白较多， 当你想要找它的时候一眼就能看见。鼠标悬停或选中时的样式设计鼠标悬停或选中时的样式也是同样的道理，只不过更难一些。通常情况下，改变字体大小、大小写、粗细时会改变文字所占空间的大小，让人们理解鼠标

23、正悬停在这里。此外，下面这些要素也能够影响人们的感受：? 文字颜色? 背景色? 阴影? 下划线? 细小的动画上升、下降等这里再推荐一个比较普适的方法：给白色的元素上色；或者当背景颜色较深时，把有颜色的内容变成白色。装饰文字是非常难的， 但是每当我感到“这些文字不可能再变好看时”， 我的判断都是错的。我需要做的就是不断优化，不断尝试。所以想开点吧， 如果你设计出来的文字不好看， 不要担心， 你需要不断地提升自己的能力，让自己变得更好。? 法则 6：只用合适的字体有些字体很不错，就用它们吧。注意 : 这一部分没有太多知识要学，我只是给你推荐一些好用的免费字体给你。有的网站很有个性， 会用到比较特别

24、的字体。 但是，大多数产品的 UI 设计只要保持干净、简洁就可以了。所以，把那些太花哨的字体放到一边吧。我在这里推荐一些免费的字体。 因为这篇文章是为初学 UI 设计的人所写， 这些免费的字体完全够用了。我希望你把这些字体下载下来，在你开始项目设计之前，浏览一下它们。以下是我推荐的字体：Ubuntu（上图）字体偏粗，对于有些 app 来说太张扬了，但是对于大多数 app 来说还是不错的。在 Google Fonts 上可以找到。Open Sans非常易于辩读，是一款很流行的字体，用在正文非常合适，在 Google Fonts 上也能找到。Bebas Neue适合作标题，都是大写字母，在 Fon

25、tfabric 上能找到，这个网站上还有一些 Bebas Neue 的应用实例。Montserrat 只有两种粗细，但也足够了。是 Gotham 和 Proximate Nova 最好的免费替代品，但不如那两种好。在 Google Fonts 上能找到。Raleway适合作标题，但不适合用于正文。有一个极细的版本（上图没有展现），在 Google Fonts 可以找到。Cabin 在 Google Fonts可以找到。Lato 在 Google Fonts可以找到。PT Sans在 Google Fonts可以找到。Entypo Social一个社交网络图标集，在E上能找到。这里还有其它一些资源：?Beautiful Google web fonts有 Google Fonts 的运用实例，我经常在这里找灵感。? FontSquiirrel 收集了不少可以免费商用的好字体。? Typekit 如果你用 Adobe Creative Cloud（也就是用 Photoshop或 Illustrator 等），你就可以从 Typekit 中获得包括 Proximate Nova在内的大量字体。? 法则 7：像艺术家一样偷师我第一次坐下来试着设计按钮、图标、弹窗等各个 app 元素时，我感到我对于什么是“好”知之甚少。但是我也很幸运，我并不需要完全