网页设计色彩搭配之清淡柔和的蜡笔色，10大网页设计趋势

　　导语：最近，你可能已经注意到，一些新的网站设计变得更加柔和轻盈。今天我们就聊聊网页设计色彩搭配之清淡柔和的蜡笔色，10大网页设计趋势

　　网页设计色彩搭配之清淡柔和的蜡笔色

　　最近，你可能已经注意到，一些新的网站设计变得更加柔和轻盈。在所有五颜六色的色彩之间，似乎有些设计师正在采用更微妙的方式，通过使用更轻或者更平淡的颜色来创造不一样的设计。

　　虽然它们仍然使用相同的基本概念以及方法——例如彩色的遮罩层或渐变层，新色调正在为这些主题创造一种更精致和低调的变化做出贡献。今天我们将深入研究这一趋势，并探索各种设计实例和方法。

　　1.蜡烛色的使用遍布网络

　　柔和的颜色是完美的解决方案，如果你的品牌要求一些令人感觉柔软以及一些复杂层次的元素，但你仍然希望能够利用你收集已久的调色板的话。同时，当把它们用在分层设计上时，柔和的色彩看起来也很好，这使得它们成为一种非常灵活的配色方案，可以在各种各样的网站设计风格中使用。

　　· 扁平以及大胆

　　虽然你经常看到扁平风格的网站设计趋势一般是以最鲜亮的颜色进行的，但在某些情况下，这种方法可能会变得粗暴，甚至有点令人厌恶。看看上面SimpliSafe的网页设计，如果页面中的大字段是以原色执行的，那么这个站点看起来有点太简单和平淡了，选择柔和色调有助于使平面设计元素更加刻意和吸引用户的注意力。

　　· 卡通风

　　一些柔和的蜡笔色组合可能会使你的网页设计整体脱颖而出，这使得它们成为图表设计的一个很好的元素选择，就像上面的案例一样，略带俏皮的矢量插图。这个例子有一个非常复杂的调色板，但是所有的色调在一起仍然能够协同工作，因为它们都采用了相同“迟钝”的颜色搭配，而且插图风格很简单。

　　· 彩色摄影

　　像上面这种的网站设计已经出现了一个更加优雅的色彩应用，其中整屏的照片被一层淡薄的色泽所覆盖。这些色调可以唤起了怀旧和柔软的感觉，这与该公司正在尝试创造的品牌定位紧密相连。

　　这个网页设计提供了类似的示例，显示了大板块的图片如何在这种情况下可以像简单的纹理一样工作，不过，这是一个极端的例子，来说明被冲洗的颜色可以如何进行简约的设计。

　　· 偏移的线条

　　使用蜡笔色与色轮搭配也很有趣。基本颜色的任何柔和的衍生物通常在应用基本颜色理论原理时也起作用，除了外观更异常，异想天开以及明亮。上面的这个网站设计使用了一种基于红色，黄色和蓝色三原色的色板，结果是营造一种温暖而充满活力的视觉方案。

　　· 复古

　　逐渐消逝的颜色是自然怀旧的代表，所以柔和的色彩应该在复古类型的网站设计中占据显着地位。在上面的sweez这个面包店的网站设计中，通过斑点，粉红色和淡蓝色，就像它的草书字体，给予它独特的复古感觉。

　　在上面的这个葡萄园网页设计中，通过使用独特的复古复兴的外观设计，展示了一个非常不同的风格例子。不同的标题字体的组合以及模仿双色印刷是一个特别的视觉元素，让用户感觉像一个历史悠久的葡萄园，一定至一个不错的选择。

　　· 单色

　　尽管蜡笔色是成为彩色组合的完美候选人，但它们在类似配色方案中的功能也非常的出色。上面的这个网站设计展示了如何轻柔地通过橙色色调的不同表现可以做出不同的视觉方案。

　　· 极简主义

　　有时候，一个令人信赖或感到舒适的网站设计所需要的仅仅是极简主义元素。上面的这款天气应用程序的使用大范围的绿色和蓝调还有一大堆深色系的颜色搭配出一个不同寻常的组合，你仿佛可以感到网站此刻就在发出手机震动的嗡嗡声，现代字体增加了足够的兴趣，吸引观众进一步探索。

　　2.色彩工具可以帮助你找到完美的配色

　　从许多这些例子可以看出，通常，调色板可以帮助网站设计从普通到意想不到。如果你对配色这方面需要帮助的话，网络上有几种颜色选择工具非常值得探索。

　　· 调色板

　　Design Seeds上有不少能够让人眼前一亮的调色板分享。如果你浏览这个网站，你会注意到所有最近的帖子中流行的柔和的色彩组合，这个现象也说明了这一趋势变化的速度如此之快。

　　· 意象

　　尝试在Designspiration上进行基于颜色的搜索，以找到大量在设计工作中流行的颜色组合的示例。你可以从其调色板中选择多达五种色调，因此可以轻松找出甚至非常复杂的组合的示例。

　　· 图片

　　如果你需要一些很好的图片素材来提升你的网页设计，你还可以浏览Shutterstock Spectrum，它通过颜色对图片进行分类，并排列形成一个巨大的图像库，方式与Designspiration类似，但更具体。

　　总结

　　当然，柔和的配色方案并不是适用于所有类型网站的最佳选择。如果你想要一个柔和的外观，那么明亮与暗色的色调混合可能是正确的组合。对于那些需要让人感觉到奢华或者说隆重的网站场景，紫红色和奶油色可能是比较合适的选择。但是，如果你正在寻找一种增添平淡和温暖的调色板，通过增加兴趣点而不会压倒设计的其余部分的话，柔和的调色板可能只是你的项目的最好选择。

　　10大网页设计趋势

　　网站设计最迷人之处就是不断变化，技术的演进让设计师与工程师可以不停实验创新，带来更好、更流畅的使用体验，以及让人处处惊奇的感官飨宴。

　　2018年，网页又会有哪些有趣的风格将主宰我们的萤幕?我们综合了 Webflow、The Next Web、AWWWARDS 等媒体与网站设计公司的预测，整理出网页设计十大趋势：

　　1、打破框架的版面设计

　　过去几年，一成不变的网页布局(layout)已开始令人疲乏，幸而Flexbox 以及CSS Grid!(Chrome、Firefox 预计于今年三月开始支援)等技术的出现，让版面设计变得更灵活弹性，为设计师、工程师带来更宽广的挥洒空间，今年将可看到更多网站打破惯有的「对称」、「秩序」守则，形形色色，层层叠叠的网页布局肯定精彩。

　　不过不变的大原则是，设计的重点是要烘托「内容」，内容才是骨肉、才是人们光临网站的主因，因此设计的尺度上也需斟酌，天马行空之余，别反客为主，夺走内容的风采。

　　2、极简out，色彩当道

　　色彩作为表达个性的重要元素，在极简风蔚为风潮时却被剥除，不过约莫去年开始，大面积渐层色块似有强势回归，Instagram、Asana、Stripe 都以饱和的渐层重塑品牌视觉主调，今年绚烂的色彩以及流动的渐层更将大行其道;此外，影像以双色调(duotone)后制，也可能会是今年的潮流。设计师，Sarah Hutto 预言，今年将会是很「funky」的一年，期待强烈的色彩刺激人们的视觉感官。

　　与前两年的明亮轻盈、以及上述张扬鲜浓的色彩对比，以相对沉着冷静的黑色作为主色调也是愈来愈多网站的选择，只要「辅色」(accent color)搭配得宜，黑色一点也不沉闷，反而能在一片光彩的世界里脱颖而出。

　　3、华丽且实用的动态效果

　　动态效果在当代的网页设计领域扮演举足轻重的角色，今年也丝毫没有退流行的迹象，反而应用会更广泛。适当的动态效果，具有突出重点、争取注意力的用处，今年以 SVG、CSS 创造的动态效果预料将大幅增加，滚动视差(Parallax Scrolling)也愈来愈华丽。但设计师应考量品牌或内容的内涵以及每个动态效果的意义，避免「为动而动」。

　　4、创造小惊喜的「微互动」

　　「微互动」在网页上也会愈来愈流行，比如滑鼠移过、点击各式网页零件如按钮，卷轴滑动过程中，适时出现细致变化，也能够有提示重点的作用。当然，就跟动态效果一样，设计师也要拿捏「动」的意义与幅度，才不致画蛇添足。

　　5、不失真、载入快的 SVG 向量图档大行其道

　　比起传统图片格式JPG、PNG、GIF 以像素构成，近年兴起的可缩放向量图片SVG 在网页上具有更大优势，以标记式语言(XML)组合图形，绘制矩形、圆形、线条都是小事一桩，复杂的填充、形状也难不倒它，也能轻而易举制作动态效果，而且不受解析度影响，无论利用什么萤幕、什么装置观看，都不会破坏图像品质。 SVG 胜出更关键的是，不需 HTTP Request，能够大幅提升网站载入速度。例如这个便是以 SVG 绘制的后背包。

　　6、巨大字体精准传达品牌意涵

　　首页以巨大的字体呈现品牌主旨，也将是今年随处可见的风潮。不过「巨大」并不代表加宽加粗，而是以恰当的字体设计，言简意赅、精准表达产品精神，取代冗长赘言。而字体与背景或色彩互动、或者在字体上塑造动态效果，也是可以尝试的作法。

　　7、虚拟实境技术结合内容

　　虚拟实境的话题从前年延烧到今年，科技巨头对虚拟实境的投资力道丝毫没有减弱的迹象，特别是Facebook 未来十年将砸下 30 亿美金专注虚拟实境的研发。可预见的是技术更臻成熟，也会有愈来愈多媒体或品牌运用虚拟实境科技「说故事」，为人们创造更身历其境的感受。

　　8、为不同使用者量身打造内容

　　对内容网站而言，有效的把「对的内容」传递给「对的使用者」，是这几年备受重视的能力。不过能够命中核心的却不多。因为要达到跟随情境给予特定内容，需要考虑不同使用者的不同特征，例如，使用者来访网站的目的是私人之用还是为了工作?使用者是从哪里来到网站的?使用者此刻正在做什么?他们以前在网站上的行为又是什么?他们使用什么电子装置上网?他们现在是登入状态还是登出?

　　这些特征综合起来增加了复杂性，有些媒体使用「推荐阅读」机制或如 Facebook 以演算法为个体决定不同讯息流。而如 Fubiz 则用「Creativity Finder」，让使用者自行设定「身分」、「区域」、「目的」三个条件，过滤最符合要求的内容给予不同使用者。

　　9、「登录页」重于「首页」

　　登录页(landing page)与首页(homepage)的差异在于，前者有个非常明确的目标，例如希望使用者注册、订阅电子报、甚至购买，而首页则如自家门口，提示网站包含哪些内容或功能，作用乃为提纲挈领。前者的重要性日益彰显，设计上要能高效率地带领使用者完成「转换(conversion)」目的，几乎不会有「导航(navigation)」的成分，因为我们不希望使用者分心到其他地方，最重要、几乎也是唯一的目的就是推进转换。

　　10、设计的分享

　　如同程式领域热烈的分享文化，近几年有愈来愈多小公司或大企业乐于公开分享内部的设计团队协作与工作技巧流程，不但有招募人才之效，也充分展现品牌特色、塑造设计领域的互助氛围。

　　Google Design、Facebook、 Shopify 、Airbnb Design 都是可以借镜的例子。