原文 Dangerous Design trends 2017 作者 Eleana Gkogka

2017 年危险的设计趋势

三加三的优秀设计趋势可能有损用户体验的设计。

15045756140990.jpg

你不可以通过一本书的封面来评价一本书，但是你肯定可以通过设计来评价一个网页。人们在他们了解到一个产品的特性和用处之前，往往倾向于通过评估其外表来评价一个产品。以下的设计趋势是保持产品新鲜并且有吸引力的必须设计趋势。但是这些设计趋势真的是万金油吗？

我们，作为设计师，明白这些设计趋势对我们的工作是至关重要的部分，但是我们不应该盲目地使用它们。并不是所有的设计趋势都是有用，有帮助或是适合所有的场景。即便是很好的设计趋势，也有可能导致不好的用户体验。这就是为什么我们要明智的使用它们，筛选并调节它们以满足我们的需求。

让我们一起来看看 2017 年的危险设计以及如何明智地使用它们

鲜亮的颜色

15045765620632.jpg

我们都知道，色彩是用来表达情绪的途径，并且，它们可以战略性地被用于品牌以及 UI 设计。限量的颜色可以吸引我们的注意力，并且产生比深色或中性色更加积极的情绪。明亮的，突出的颜色总是会很有趣，充满活力，大胆，与此同时，淡雅的色调更使人轻松，舒适。

2017 年是一个非常令人兴奋的年份，创业以及新的产品就如同蘑菇一般层出不穷，全都尽力在市场中保有一席之地。色彩的使用是非常好的方式来吸引人们的注意，这就是为什么活波的色彩越来越流行。但限量色彩在被大量的使用同时，也很容易对用户体验造成影响。

雷区

1. 大量鲜艳颜色的表面或者许多相近的鲜亮颜色，很容易使眼睛感到难受，并不是肯定的，但是这种方式确实会是眼睛不舒服。这会导致相当数量的用户选择离开，同时你却想要他们留下来；同时，这也是你一开始使用这种闪瞎人眼睛的设计的初衷。
2. 鲜明的颜色，在文本下或者是侧边的文字会导致阅读起来的不愉悦，甚至是无法阅读。鲜明的颜色会反射更多的光。看起来就像在别人的面前点燃了一把火炬，当他们尝试在阅读的时候。及时他们尝试去阅读内容，也会导致他们有很差劲的体验，最终导致不喜欢你的设计和你所表达的内容。

15045827483368.jpg

Do

• 对鲜明颜色使用颜色较深或者更中性的大色块进行平衡。
• 在细节处使用鲜明颜色，吸引用户的注意力并指导用户。
• 在大的版面设计中使用鲜亮颜色时，应作为一个装饰元素。
• 使用鲜亮颜色来强调或者促进内容以及交互。

Don't

• 避免在大的表面上使用鲜亮颜色或者作为主背景色。
• 避免使用太多鲜明的颜色在同一页中，或者紧挨着使用。
• 不要在主要文字后或者附近使用鲜亮的颜色。
• 不要用小的界面上使用鲜亮颜色表达有意义的事情，比如小图标以及导航。

创新的布局

15045896162268.jpg

在吸引注意力的竞赛中，设计师拒绝限制他们的想象力，对表达的和谐持反对意见，通过独特的不平衡的，非典型的布局，给设计的风格带来了直接的混乱。创新的布局现在越发的在 2017 年流行。

这种风格非常有趣，充满可玩性。这是一种通过添加几种有帮助的艺术或者时尚设计使得作品从整洁布局的海洋中脱颖而出的好办法。创新式布局并不是完美的平衡；图文排版或者界面通常不是对齐的，元素也有着不同的填充以及经常趋于重叠。

雷区

1. 我们日常生活已经够混乱了，当我们在网上找信息的时候，是真的需要这些混乱的元素吗？不平衡的活波的界面设计非常轻松的干扰了网页信息的阅读以及发现，使得浏览成为一个难以控制的体验。当我们的主要目的是从一个内容丰富的网页上获取信息，那么它的布局结构就显得十分必要了。
2. 视觉分级体系在指导用户阅读内容上也是十分重要的。在创新式布局中，元素通常一个个的漂浮开，将内容分割的十分奇怪随机，并没有分级的体系。其他的元素可能会遮盖或者结束在页面缺少视觉效果的位置，使得阅读、整理信息的过程变得非常困难。

15045981149559.jpg

Do

• 当阅读内容不是主要目标的时候使用创新布局。
• 在良好的结构以及对齐的块之间使用不平衡的布局作为有趣的细节。
• 使有关联的元素能够相邻并且与不同的内容区有着明显的分割。
• 只有当你有这足够好的对比和足够大的排版面积时使用遮罩元素。

Don't

• 不要在内容很多的页面里使用创新型布局。
• 不要使用不平衡的布局，当你的用户只有有限的时间来阅读内容。
• 不要随便的将元素洒满整个页面，某些基础的对齐策略还是要使用的。
• 不要盲目地使用遮罩元素，考虑到对比和相关性。

小细节

15046025529887.jpg

极简抽象设计已经持续流行了很久。当然，我们现在也见证了正在迁移向拥有更多细节的设计。这其中是有许多原因的；极简设计不能提供足够的能力去突出和区别设计相较于多细节和复杂的构成设计。关注小细节之处已经在最近非常重要。

留白处的小细节能够抓住人的眼球，比如用于浮动元素的无功能的导航点。浮动的装饰性图标，下划线，几何形状以及随便变得越来越流行，同时他们也为许多设计添加了有趣之笔。它们可以作为平衡者，分割者或者是内容的导航，有点像小小用处的注解。

雷区

1. 小细节在吸引注意力和愉悦用户上非常有效，但是也能不经意的与内容导航之类的发生竞争。过多的细节即便能帮助用户导航和阅读内容但却更会对分级结构造成巨大的混乱和迷惑。这样的小细节就是无意义的数码噪音和畸变。
2. 小细节通常用于装饰元素，在文字或者图片的旁边，有时会在其上作为遮罩。有时会跟随滚动或者鼠标指针。当然，它们紧紧地抓住了我们的注意，有利有弊。我们需要明白，在使用小细节是，要注意不能危机阅读。

15046037833509.jpg

Do

• 使用小细节时要注意到内容，确保可读性不会被影响到。
• 使用小细节作为提示来转移注意里或者分割主要内容。
• 使用极简清楚地布局来平衡小细节。
• 通过对小细节增加文本，使他们与正文相关联。

Don't

• 不要在内容很多的页面上使用小细节
• 避免使用随机的没有目的的细节，否则并不能帮助你讲述你的故事。
• 尽力从主要的用户指引中分离出无用的细节。
• 将小细节处理为你设计中的小惊喜，而不是设计中的主要元素。

提名表扬

小型版面设计

15046649118609.jpg

小型的版面设计感觉起来更加经典。这种设计给其他元素留下了呼吸的空间，并且允许眼睛在四周观望。使用小一些的字体，给予了不需要通过协调空间就能创造出极其有趣的对比的机会。

反面来看，小型版面设计会在大块的文字中迷失，或者会阻碍内容的阅读。使用小型排版一定要小心---仅在短段落中。同时，尽量不适用小于 13 pt 的字号。

创新型导航

15046654903201.jpg

创新型导航样式已经变得越来越流行，随着越来越多的设计师想要尝试革新。不同的导航样式可以让内容较少的网页变得更加有趣，或者可以帮助用户通过特殊途径来导航。

创新型导航样式如果足够简洁，就能够变得很愉悦并且很有用，可以促使用户与其交互。我们要意识到，这并不是适合所有设计也并不适合所有用户，在我们使用前测试其可用性是十分重要的。

动画

15046669178714.gif

动画的使用为 UI 设计带来了无限可能。动画能够给予有创造的变换以及增强体验。动画能够为任何设计添加附加的层，在正确的地方吸引注意力。动画能够丰富极简的排版，增强叙事及用户吸引能力。

过多的使用动画会导致网页看起来很重并且会增加载入时间，从而考研用户的耐心。错误和不必要的动画同时会迷惑，扰乱甚至误导用户，一定要谨慎使用。

15046681711910.gif

结论

在数不尽的网页和产品中，设计者一直想要他们的设计能够紧跟潮流保持新鲜。但是趋势也可能是十分危险并且并不是万能的。如何明智的根据内容、用户、以及目标来决定设计方案，这才是我们想要达到的目的。

最后也是最重要的，我们不能一味追求外观的好看而牺牲用户体验。