1. 黑暗模式

2.插画设计

3.视频banner

4.微交互

5.3D元素

6.几何图形

7.黑白设计

8. 大字体排版

9.复古风格

10.时尚配色方案

Web 技术的快速发展，不仅让设计和产品足以满足更多更细致深入的需求，也让设计师能够进行更细腻更独特的表达。现今的网页设计趋势，已经不再仅仅局限于单一的技法，而更多是一种复合的、暗含意图的综合的设计方法。从色彩的选取、文本的布局、整体的界面设计和用户体验的呈现，都是当下文化和整个时代走向的一种反馈和外化表现。

根据今年最新的网站设计作品，这篇文章梳理了2019 年的网页设计趋势，有的是旧有趋势回归，有的则是正在悄然流行的新方向，希望能够给你更多启示。

1、在设计中倾注更多情感

Notation

与潜在用户产生真正连接的唯一办法，还是情感化的设计。就目前来看，2019年最优秀的一批网页大都基于某种情感诉求，和用户的快乐或者悲伤相通，让用户感到惊讶，或者巧妙地抓住用户所焦虑的点，从映入用户眼帘的时候就试图建立信任感。

色彩是用户的第一感知，同时，文本、图片等元素应当和色彩在情绪表达上保持一致，方可带来共鸣。通过高度统一的情感输出，赋予用户更进一步操作的欲望。视觉中的情感输出决定了用户的下一步操作。如果网站或者 APP 中所呈现的东西足够吸引人，那么他们采取行动的机率就很高了。通过情感来吸引用户，让兴趣和吸引力成为撬动用户的关键。这也正是今年绝大多数优秀的设计作品所呈现出来的一种成熟的设计技巧。

2、用色彩来强化主题

Dice Berlin

明亮的色彩和鲜艳的色彩，在感知上其实是有所不同的。如果你能够明白两者之间微妙的差异，那么你对于色彩的掌控力就更上一层楼了。在图片和动画的基础上叠加色彩已经是非常的流行的技法了，这种趋势只会愈演愈烈，但是在色彩的选取和表达上，你需要更加小心，更加专业，才能比其他的设计项目更加具有表现力。

从现在最流行设计来看，明亮的蓝色和柔和的紫色正在成为很多新网站和流行 APP 的配色选择。色彩的选取并不是第一次成为影响设计趋势的重要因素，但是在设计的进化过程中，色彩一直发挥着无与伦比的重要作用。

用流行的色彩来服务网站的设计吧。如果网站有现成的配色系统，那么你可以在此基础上更好地部署充满表现力的色彩。

3、目的性极强的动效

X Company

动效并不是新鲜的事物，但是它也随着时间悄然变化，最新的动效设计越来越具有明确的目的性。每一个动效的意图，都是将用户引导到特定的位置，让用户于页面中特定的元素进行交互。

动效本身不应该仅仅只是有趣，传达愉悦感，不能剥离动效背后的目的性，而是要正向地为用户操作注入力量。

即使是在现实生活中，大量的动画效果也是为了快速吸引用户注意力而存在的，它们比图片更有张力。对于网页设计师而言，借助不断快速发展的网页来抓住用户注意力是必须要做的事情，现在正是最好的时机。

4、单页设计的回归

Goods

无限滚动依然有效，这使得单页设计再次流行起来。将网站的所有内容重新铺在首页，向下滚动即可获得，这样的设计在2019年开始重新流行起来。用户通过导航菜单，在页面内快速跳转。

随着近年来移动端设计的快速增长，用户对于滚动交互越来越习惯，所以单页设计的合理性是不存在问题。不过，考虑到如今用户的注意力集中时间并不长，所以单页网站的设计过程中需要尽量让用户可以更快找到他们需要的内容。

5、超现实主义的设计

Gyor Moore

看惯了大量现实的设计，超现实主义风格的设计中所蕴含的丰富想象就显得非常迷人了。在2019年的诸多网页设计当中，那些比现实世界更梦幻的设计元素，显得更加吸引人，影响力更大。

基于目标用户所追求的情感和情绪来构建超现实主义的设计，能够更快地同用户产生情感联系。这种独特的视觉和独一无二的情绪所创建的情感连接更加难以复制，而这其中，动画、漫画和奇怪的插画占据了极大的比例。这些元素能够带来新鲜的体验，而这本身就是影响力。

6、复古的字体排版的回归

Haus

大家似乎已经厌倦了超级现代的设计风格，更加复古的衬线字体和肆意张扬的手写字体在网站设计中重新回归。与之前流行的非衬线字体相比，衬线字体有着更加吸引人的线条和边角，这些精致的细节正是大家沉迷复古设计的原因之一。

而令人惊讶的一点在于，复古的字体和排版在目前绝大多数的屏幕上，所呈现出来的状态已经越来越舒适了，从可读性到视觉效果均是如此。

7、UX设计的关注点更加细腻

The New Yorker

随着技术的提升，用户对于网站的体验，已经不止于可用、好用，用户的关注点已经慢慢迁移到更加细腻的感知维度上，比如是否更加真实、是否从视觉乃至文本上体现出对于用户的尊重和关心。因此，UX写作成了设计师必须掌握的另外一个技能——文案是否走心，用户很在意。

优质的文案能够让用户留存下载，让用户和产品更容易联系到一起，让用户获得尊重感。UX设计的维度正在扩展，设计师需要更加精准地抓住用户的注意力，这也是具有商业价值的设计方向。

8、多变的字体

The Unseen

在过去的几年当中，字体本身经过了一个复杂的转变过程。为了兼容更加复杂的屏幕环境，字体本身具备了越来越强的拓展性。Opentype 字体的灵活可变性让无论哪个平台上的UI界面内容，都可以清晰无缝地展示出来。

而多彩字体的出现，让字体内的色彩和结构的展现，拥有了超乎以往的表现力。另外，诸如苹果为 iOS 提供的 SF Symbols 以及越来越多的图标字体，让UI设计和字体的运用拥有了更多的可能性。

多变的字体，在2019年让设计拥有了更多的可能性。

9、分屏可能带来下一次革命

box

移动端设备的快速增长，让响应式设计乃至于分屏设计成为了一个重要的需求。其实现在已经有平台尝试跨平台、跨界面、跨屏幕的内容共享了，打通不同屏之间的用户体验，是2019年一个技术趋势。

最典型的案例是 Mac 和 iOS 平台之间的「接力」功能：在Mac 电脑上复制链接，通过快速的云端同步，在 iPhone 上接力打开页面。在今年 9 月新的 iOS 、iPadOS 以及新的 macOS 上，更深层的屏幕共享将会出现。这个时候，分屏将不止是做简单的屏幕复制，或者简单的响应，屏幕内容的不对称分割，甚至都有可能成为一种趋势。

各种不同形态的内容，都可能会出现，异于以往的设计会越来越重要。

10、数据可视化

Google Cloud Showcase

信息图表是设计的又一个热点。向用户呈现复杂信息和数据，信息图表和可视化设计是最为有效的方法之一，因为它不仅可以带来视觉愉悦感，而且足够有趣，让人能够理解。

现在数据可视化可以通过静止的图片来呈现，也可以借助动画来展现，具体的呈现取决于你的平台和预期。

可视化的数据最好能够和故事结合到一起，结合叙述和故事，让信息以更加可信的方式呈现在用户面前，这样可以带来更高的转化率。

11、更多渐变色彩

Zef Cherry

渐变是一种功能更为丰富的设计趋势，它几乎可以用在所有的设计门类当中。如今，越来越多的设计项目正在使用渐变来呈设计，而网页正是最为重要的门类之一。

渐变让色彩更加富，更有质感，使得原本平淡的色彩拥有了近乎艺术化的表达。如今的渐变色彩更加丰富，而不仅仅是用作一种叠加于图片的元素。如今，随着对于渐变要求的提升，更多的相关色彩工具也诞生了。

12、使用3D来进行平面设计

Prior

虽然 3D 设计并不是什么新鲜的东西，但是顶级的网页设计师经常在设计中用到 3D 设计。在平面设计当中使用 3D 同样能够带来巨大的影响。3D 渲染所带来的丰富细腻效果，能够让界面更加吸引人。

对于新手设计师而言，3D 软件上手并不算太容易，但是一旦掌握了它，它所带来的效果和可能性会非常的惊人。3D 软件降维进入平面设计，所呈现的价值是无与伦比的。

13、更加立体和拟真的设计元素

Brand.Squarespace

虽然如今虚拟现实设备的普及率还没有那么高，但是毫无疑问它的影响力正在提升，很快就会有用户开始使用 VR 设备来浏览网页了。

新的网页 UI 将会需要在设计当中加入更多有纵深的、立体的元素，让它们在视觉上更加具有真实的质感。即便未来有更多的新技术加入进来，也不足为奇。

14、更多自然的图形和形状

Studio Exchange

虽然绝大多数的网页都使用栅格系统来进行约束，但是在新的技术支持之下，设计师可以更加自由地使用更多有机而自然的图形和形状。

有机的图形，不规则、不对称的图形，增加了设计的深度，让页面能够脱颖而出。这些图形的灵感大多来自自然，也更能够自然的吸引用户的注意力。

15、更多微交互

Grand Image

微交互存在的目的，是以吸引人的方式来给予用户以反馈、惊喜甚至制造一些微妙的「焦虑」。这是一种非常有效的引导方式，它是有信息进来的时候的通知弹出框，是刷新页面完成时的提醒，是点击之后的加载小动效。

微交互是一种一直在缓慢变化的趋势，在 2019 年的网页设计当中有明显的增长，更加多样的微交互开始出现在网页设计作品当中，吸引着用户的注意力，提供有效的信息反馈，提供引导。

16、更多视频内容

Outrider

文本信息已经没有以往那么具有吸引力了，更多的视频内容也是自然的结果。不过随着网络带宽和上下行速度的提升，等待视频加载的时间越来越短，用户也可以更加快速便捷地获得视频内容。

视频内容不仅能够更快的表达，也具备更好表达的可能性。作为一种主动输出的媒体模式，视频内容的优势非常明显。相应的，视频内容的制作也需要更加注意，必须提供有意义的内容，才不会让用户有浪费时间的感觉。

结语

如果你仔细观察这些趋势的话，会发现这当中绝大多数的趋势都只是之前趋势的升级和发展。不同的文化和快速变化的时代，正在塑造新的趋势。企业和公司期望能够发掘能够带来商业价值的设计，同时还能兼顾时尚，能够帮助业务有长足发展，这才是最重要的事情。找到这几个关键之间的平衡点，就能够创造有价值的设计。

作者：niceverynice

编辑：陈子木

原文链接：https://niceverynice.com/blog/web-design-trends-2019/

但创意是一种对话。

自从我们第一次学会用木炭在洞穴壁上的赭石记录世界的片段以来，这种对话就一直在进行。我们还学会了把仅仅是用棍子刻在粘土上的抽象符号，变成了承载着充分含义的载体——语言。

趋势仅仅只是庞杂而混乱的多方谈话中的主音，无论是否应用趋势，我们的创造都与这些趋势并存。

趋势为我们提供了大背景，毕竟如果没有规范，又何从定义创新？如果没有去年的热点潮流，又从哪里寻找规范？

所以和去年一样，我和webflow优秀的设计团队一起，预测了2018年的设计趋势。

以下来自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。

1.破碎的网格布局

设计师总是无尽地去追求更具创意、更引人入胜的布局，但在这个过程中网格布局一直广受运用，网格布局能带来和谐和规范的感觉，但网格本身就存在约束。

有时候我们自己都想逃离网格的规范性，对吧！

但这并不意味着破碎的网格布局完全忽略了网格的概念，相反，破碎格局允许图像和文本元素更自由地出现，而在更规范的布局中，元素的排布往往需要按部就班。在这里，图像和文字的位置开始重叠和汇合，位图和字体的并置往往都会出现美丽的意外。

有时候很难说这些效果是故意的，还是只是一个美丽的错误…

2.将插图放在中心位置

我在数字产品营销领域所看到的一个比较有趣的挑战就是选择合适的图像。我看到过整个设计团队针对这一议题进行讨论，并且通常结束于两点之一：

•   产品UI（用户界面）截图及动图
•   设计过的或是生活化的摄影

前者强调产品本身的体验、特征及功能，而后者则试图强调产品的人性层面：它对生活的影响。

进入2018年后，我们可以看到并将继续看到，在产品的设计和营销方面，插画师的工作越来越受重视。

我对这件事不知所以的着迷，甚至于我都不能确定它到底是什么。也许这和我们在时尚界所看到周期性相同，毕竟插画在整个60年代后期一直占据着广告界的主导地位。

或者，Dropbox的设计团队可以通过解释他们的新插画风格来解决问题：

我们用铅笔构建草图，然后用丰富多彩、抽象的形状来填充，将创意变为现实。我们的风格的灵感来源于你第一次有想法的瞬间，这种风格也在提醒我们，除非你有所行动，否则画布上只有空白。

我想，这就是说，他们必须重新设计一些东西，对吧？

在Shopify的Polaris网站中可以看到，插图可以将很多抽象的概念具体化于生活中。仅仅只是一张画作，Shopify就阐述了Polaris的概念—就像北极星一样，为团队中的每一位成员指明方向。

最后，值得注意的是，插图也可以巧妙地解决摄影带来的一些具有代表性的问题。

我们为大众提供数字产品，但当我们将一张真人摄影作品放在网站上的显著位置时，图片中的真人主角就定义了你的用户，但这样就遗漏了其他没有被定义的用户。

相比之下，Shopify Polaris的插画主角形象仅仅只是个人类，并不能确定诸如种族、性别、国际等属性，这使得我们更容易地将自己代入这样的场景中，就像我们自己就是一个独立地思考者，思考这北极星所照亮的创造的可能性。

3.野蛮主义达到主流地位

2017年初，我们发表了一篇文章，谈及野蛮主义的兴起，并试图回答出现新兴风格的原因：

野蛮主义……正在开启一个设计师想做什么就可以做的空间，这甚至超出了应该做什么的范畴。野蛮主义的作品往往避开了所有的最佳建议和最好实践列表上的东西，以支持震撼的外观和效果，有时甚至带有一些攻击性。

所以你可以想象，当这两个电子商务网站都坐上这股粗犷潮流的列车时，我们有多惊讶。

Balenciaga

Gucci

4.更多有机和倾斜的形状

大自然厌恶直线。——William Kent

近几年来，无论是网页端还是移动端的设计都是由卡片式的用户界面占据主导地位。直到现在，这些卡片几乎都是锐边、直角的，可以看出其最基础的几何形状，使得大家去关注网页设计的基础材料。

这在2017年有了很大的改变，现在，从谷歌到推特再到脸书，几乎每一个应用的卡片都应用了圆角，比如输入框、头像框等。

如果这些框都是圆角的，他们就会是椭圆形的。

但这并不是有机形状的主要组成元素。现在的背景设计往往有很多颜色各异的变形斑点，略夸张的对角线，即使是我们平时所用的破折号也会被卡通化。

但在无尽的探索中，设计师总不能仅仅只是运用灵活的曲线，很多人都会把卡片旋转一些角度，运用角度来进行设计，就像Stripe的主页一样。

但这并不意味着直角将会在设计中消失。在下图中，我们可以看到直线和直角的运用，不过是把它们与更多的曲线、球形有机地结合在了一起。

在许多网站，我们都能看到闪烁或是振动的颜色。虽然这些颜色的组合能够让人留下深刻的印象—包括在眼睛中留下残影—不过值得注意的是，在可访问性的层面上，颜色组合的使用可能会出现一些问题。

通常我们都将可访问性作为为残障人士所做的用户友好行为，但不要忘记，即使是不存在色觉障碍的人也可能会遇到令人眼花缭乱的色彩组合。

不开玩笑，当这些形状滚动起来，你就会看到你的屏幕上全是这些东西了。

根据LinkedIn的无障碍工程经理Jennison Asuncion的说法，可访问性可以定义为：

设计和开发包括残疾人在内的每个人都可以独立使用和互动的用户界面。

5.更普遍的交互和动画

媒介就是信息。–Marshall McLuhan

网页并不是一个静态媒介。尽管Justin Jackson的This is a webpage有着持久的美感与真实性，但网页上还可以有更多灵活的东西。媒介就是信息，McLuhan的这句名言，至少意味着有一些网页信息在于网页的变化和交互：网页不能只是简单地向我们提供信息，而应该是让信息生动起来，更重要的是，让我们与这些信息进行交互并对之产生影响。

有的信息都在移动，但这并不影响集中注意力。

渐渐地，当你滚动网页滑块时，一块一块的信息并不仅仅只是被你接受了，还会影响你的认知，并且企图得到你更多的关注。

显然，我们也不能滥用这种生动，会使得网页看起来像动画一样，要小心这会影响你的用户体验，尤其是那些有认知障碍或对运动敏感的人。

但不能否认，恰当的小动画能够在恰当的时间引导用户注意正确的内容，从而使得他们不会错过重要的信息，或是访问其他页面。

以Black Sheep的Heco Partners为例，向下滚动时，标黑的当前行帮助用户集中注意力，然后一系列突出大胆的工具开始争夺用户的注意，呼吁停止阅读并点击下一页。这是创建一个内联导航系统的创造性方案，但这也可能给用户带来了不必要的紧张感。

我们也可以看到很多工具可以简化复杂动画和交互的创建—这是数字设计是工具包中的一个缺口—从我们自己的Interaction2.0到Airbnb的Lottie都可以看得出来。

具体而言，我们期待两种特定的动画模式的出现：不寻常的滑动速率和页面转换。

意外的滑动率

现在视差可能有些过时了，但这并不意味着设计师们不会以有趣的方式来设计滑动。

例如网站Anna Eshwood，网站上的每一张照片一开始都是正常的展示，直到用户下拉滑块滑过后，照片都会快速上升，比滑块滑动速度快，营造出一种有趣的飘渺感，可以很好地展现简朴的黑白照片和严肃的模型。

随着交互和动画在在线体验中更为突出，我们也期望看到更多的设计师设计出更具突破性的作品。

页面转换

在一个充满好看动画的网站中，我们能感知到，网页上正在发生一些变化，但如果是从一个页面转换到另一个页面，就会比较唐突了，无论是在哪个网站上。

转换动画可能会有所用处，它能将用户从一个页面送走，再在另一个新页面上迎接。不过要谨慎运动转换动画，也没有必要链接它们。这个过渡本身就是每一个页面之间的转换：页面突然变为一片空白，然后再有新的页面加载。

但我们发现在这一点上，很多网站都搞了一些事情。以网站3drops为例：

在这里，页面转换时依旧保证了用户的体验，体现了品牌的存在。当用户想要访问是视图库中的另一视图时，髌骨是被导航到了新的页面。这对于以设计为中心的品牌展示来说，是一个不错的点子。

6.至多主义的出现

好的设计尽可能少设计。–Dieter Rams

多年来，设计师最想听到的最振奋人心的设计反馈，恐怕就是：“他很干净。”

那是一个极简主义的时代。深受Dieter Rams的设计原则，以及杂志《The Crystal Goblet》的影响，视觉设计师一直追求提供尽可能少的选择和视觉干扰。

对于当今生活在数字中的世界来说，极简主义是一个全新且难得的经历，这个选择很有意义。我们需要足够放松以进入这个陌生的新世界。

但是今天，我们也有类似于以下的网站：

Pin-Up Magazine

H. Lorenzo

Razzle Dazzle Torino

所有的这些都力图在你看到的那一刻就把所有东西都放入你的世界里。

你可以称之为一种野蛮主义，我也的确在Brutalist网站上发现了所有上述网站。但我们认为我们期待更多至多主义的网站的出现，而在这之前你可能并不觉得这个网站会变成这样。随着数字技术的发展，一些网站会很自然的对用户有更高的期待。

7.衬线字体能表现得更好

在技术落后，字体并不多的糟糕过去，在网页界面中使用无衬线字体是个很好的方法。但随着屏幕和字体渲染技术得进步，我们可以看到越来越多精致得字体占据舞台中心，或者至少成为了更重要的角色。

以Kickstarter最新的设计为例，他运用了柔和的衬线：

或者是大胆的标题：

在特定的日子里，Typewolf都会展示一些衬线的运用：

衬线能提供一种优雅、精致的文学修饰效果，作为衬线的长期爱好者，我欢迎大家多多使用衬线。

8.浮动的导航菜单

固定的导航已经成为以转化为中心或具有庞大菜单的网站的主流，因为核心导航可在滑动时与用户保持一致。不过浮动的导航使得用户在滑动浏览时也能轻松使用，直接优化了网站体验。

最近，我们注意到有些设计师将导航从其他设计中分离出来，并将其移动到浏览器的下方，进一步确定了用户可以随时接触到导航。这增强了导航是网站的广泛对象的感觉，不一定是某一页的一个部分，而是放在一个触手可及的地方，使人安心。

最直观的方法就是在导航栏中添加阴影，并将其移动到网页的最顶端，以Reseau为例。但在平面的设计中也是可行的，以Anchor & Orbit为例。

与离线型设计类似，浮动的导航允许设计师在设计中自然地或带有目的性地运用巧妙的并置，这又给设计带来了更多的空间。

9.视频元素

当你想用可视格式传达复杂的信息时，静态图像往往都难以达到效果。毕竟，复杂性需要时间来表现，而一个用户界面上的静态图像只会告诉你图片上的内容，而不是如何使用。

以下是几点重要的原因：

• 视频元素可以无缝地切入设计中，无需嵌入Youtube或是Vimeo插件。
• 即使有很多颜色，渐变和细节，视频地质量依然很高，但如果GIF动图不按大小以指数倍数放大，则很难做到。
• 视频可以循环以确保副本的细节和图像的细节保持一致，并为有需要的人重复播放。

所以从我们自己的网站到Stripe Sigma，当视频元素风靡整个网络时，我们并不感到奇怪。

10.更多身临其境的“多媒体”长格式

当我们想要发布长格式的内容时，只需在页面上放置一个长文本字段，特别是当我们的长格式内容有CMS支持时。其中，单个布局的内容长度大概为200字到一篇较为详细的短教程的长度。

但现在一些设计师和作家并不采用这种方法，他们将布局和量身定制的副本结合起来，通过视频、声音、图表和图形、地图等丰富的载体，娓娓道来故事的内容。

说实话，这并不是一个“新”趋势，我更倾向于把它称为网络产生长期对话的基石。但现在所有的网络出版工具都出现了，包括我们在内，2018年似乎都是最佳时机。

以CNN讲述全球变暖对格陵兰岛和全世界其他地区的影响为例。

这个故事尽可能地做到引人入胜，这对于很多还较为抽象的问题来说至关重要。它巧妙地将一个复杂的话题变成一系列便于理解的段落。你永远都不会觉得内容过于冗杂，相反你总是不知不觉就接受了，你发现自己阅读每一个字，都很容易理解。

请注意，我并不是批评CMS，事实上，我们可以利用CMS来提供这种体验。这里只需要一点小技巧：利用背景图片和视频来传递所有的视觉效果，在编写、设计时仔细检查每一个故事的一致性。这就和“博客”的格式不大一样了。

如果你正在寻找更有吸引力的长形，我不会推荐纽约时报上由Tuam拍摄的“失落的儿童”。

值得一提的是，这样更为多样化的长格式可以用破碎网格或者标准布局进行组合，正如上面的纽约时报片段所示。

11.可变的字体！

在今天看来，我们很难相信就在几年前，我们还不得不依靠稀少的字体来呈现我们所有的文本内容。

今天，网络上到处都是各种各样华丽的字体，从而引发了人们对字体印刷、字体设计和选用、消费字体的兴趣。

可变字体出现后，这一趋势愈演愈烈。科技和印刷技术的巨头——苹果、谷歌、微软和Adobe之间有一个可变字体联合项目，这使得可变字体实现了一种全新的字体设计形式，正式增加了opentype格式，这意味着，允许设计师插入一个字体的整个词库或者有多达64000axe（磅值、字号等）的单个字形，并在设计空间中将特定位置定义为命名实体（粗体、浓缩等）。

说实话上面这段文字有些难懂了，那么请直接看John Hudson的解释，他认为可变字体是：

一个字体文件的行为像多个字体一样。

但是在讨论字体设计等视觉艺术时，最好还是坚持从视觉方面入手。

简而言之，这就是一个可变的字体，一个单一的字体文件，能够变黑，而不需要调用其它字体。

12.内容中心–或称webook？尽量酷起来！

（注意：内容一直很酷）

作为一个内容为王的极客，我很高兴看到在2017年产生了如此之多的有见解、极有帮助的内容。我相信2018年我们会见到更多，毕竟2017年已经打下了很好的基础。

我们也可以看到，有很多领先品牌将pdf格式用于电子书领域并充分发掘网络出版长内容的潜力，我喜欢称之为“webooks”，这很具有吸引力。

具体而言，我指的是：

Stripe Atlas Guides

AirtableUniverse

DesignBetter.co

Intercom Books

我们自己的电子书网站

我想不需多言了吧！

13.CSS网格

Robin Rendle的CSS网格演示，来自CSS-Tricks。

正如Robin Rendle极具有表现力地将它放在了CSS-Tricks上：

那么，CSS网格是第一个真正地网页布局系统，它旨在将内容组织成列和行，并最终为给予开发人员最高的权限。

此处应有得逞了的笑声。

注：Webflow 将支持CSS网格，但尚未提供官方日期。

14.追求完美的数字设计工具

2017年是一个重要的年份，尤其是对于深入讨论设计工具的性质及其 对我们工作的适用程度。

Spectrum的Bryn Jackson分享了自己的看法：

设计成品和设计工具之间的中间格式，可以为产品团队和设计人员提供更高效、更强大的工具。

在一篇名为“接口”的文章中，他继续假设：“今天所有的每一种流行的设计工具都是为了优化插图。”

（需要注意，Bryn Jackson对于插图的定义是导致图像、图标、插图、字体、广告、印刷媒体或其他没有本地交互性的可视通信媒介的任何设计工作，但这是一个有争议的定义，其中没有提到阅读和交互形势。）

除了插图和交互性的定义以外，不难看出，Bryn Jackson的观点：在最基础的地方，大多数现代设计工具都注重图像的制作而不是接口。

设计师兼工程师Adam Michela在“I’m a Designer at Facebook, and This Is What’s Missing in Design Tools Today.”中提出了一些相同的观点。他认为大多数设计师花费大部分时间来创建实际价值并不大的少量工件。而这些工件仅代表最终产品—数字接口，这与上述的情况背道而驰。

在文章的最后，他积极地认为，有机会创建融合（而不是桥接）设计和实现的工具。

这正是我们试图在webflow上构建的。像Michela，我们希望一个设计交付的不是网站的示意图，而是网站本身，不是接口的文档，而是接口本身。在这个过程中，网站能不断地修改、完善，还可以保存时间线上的不同版本，可以检查，甚至点击一个键就可以恢复。

15.多样性和包容性使得设计更具挑战

Webflow是一个公平的机会雇主，我们致力于建立一个团队，这个团队不仅在观念和身份上具有多样性，并且受到鼓励。– Our job listings

在Webflow所在的美国，日益激烈的政治环境正在推动对多样性和包容性在设计中的作用的强烈关注。

我们不得不承认，设计的选择，小到性别的下拉列表中包含了哪些选项，都能影响我们同胞中的一些人。我们可以清楚地看到，错误的消息、措辞地影响有多严重，数据验证机制在人机交互地动态机制中有多强大。我们意识到，让种族成为广告的过滤器会产生彻头彻尾的种族主义效果，从而维护我们许多人希望看到被颠覆的现有权利体系。

我们也清楚地意识到，如果我们地团队没有多元化和包容性，我们也没有办法提出设计方案。

最起码，我们中的一些人不能。

另一方面，我们也看到了性别歧视在明显的自相矛盾和边缘化之后抬起了丑恶的头颅，甚至会化身在看似道德的日常对话中。性别歧视就是双重标准的明显例子。

最终，作为用户体验专业人员，我们的工作是为每个人提供可用且理想愉快的体验，而不论他们的种族、国籍、信仰等个人情况。

换句话说，我们的工作就是包容，让我们一起在2018年，包容更多，获得更多。

16.视频的广泛应用

尽管我们几乎没有人大肆鼓吹视频将会成为网络发布媒体，但发行商仍然非常看好转播。

视频早已到处可见：从一开始就坚持使用视频而不是短故事的新闻网站，到Snapchat，再到Instagram，最后到Facebook。无疑，Excel很快也会赶上潮流！

但就像科技领域的大多数事情一样，这并不是一个平稳的发展，成千上万的记者在文本和动图之间丢掉了工作。

对于转播的网站来说，前景也可能不是很好。根据哥伦比亚新闻评论：

转播的发行商们仅花了一年的时间，就用无差别的、平淡的快餐式视频，驱散了大多数来之不易的本土观众。

独立新闻业至今遭受创伤，这要归功于特朗普，而视频的宣传也没有帮到他们。

值得一提的是：根据Digiday的说法：“展示一千次视频的费用远高于展览一千次的费用。”在理想的世界里，报纸可以在打更少的广告。

当然，这不会发生。

面对这一切，请记住文字作为创意和信息媒介的优势：

•   生产速度相对较快
•   便宜
•   仍是网络上大多数通信的主要形式

最后一点可能也会让人费解，但我希望你能去各个社交网站看看。除非你点开的是Instagram，Pinterest或Snapchat，否则你仍会看到大量的文字。即使在这些视觉效果站第一的平台上，文字仍然扮演者重要的支撑角色。

因为一张图片可能在捕捉场景时值得多说几句，但图片很难捕捉到具体的内容，人物、时间、地点、原因和方式。

这使得我们很自然地谈及下一点：

17.用户体验写手的持续兴起

任何影响设计的人都是设计师，这包括开发人员、CFO甚至公司法律。所有的这些都可以是设计师。–Jared Spool

我在去年的设计趋势中谈到了这一点，但我今天想将注意力更多地放在被称为用户体验写手地原因上。

简而言之，UX写手们专注于用户界面中的内容，这些内容主要用于大型数字产品和web应用程序。现在，我说我是为Webflow产出内容，过去是为了Linkedln，人们都会问：“这是啥？”

但请放心，用户界面都有写手地痕迹。并且这些内容往往在你的理解过程中起到关键作用：

•   你可以在用户界面中做什么
•   如何做这些事情
•   你可能会遇到什么限制和困难

但UX写手能做的不仅仅是这些。用户界面中的词汇也是塑造好的用户界面背后的品牌认知的强大工具。试想一下，如果你看到的所有推文，所有应用中，都有一系列的搞笑文章，或者是在404页的展示中都有亮点，这些都是为了在最不理想的时候敦促你的行动。

这在被称为Chatbot的UI格式中显得尤其明显。一般来说，这些用户界面只包含单词，单词构成了整个用户界面。Chatbot的个性、品牌都只能通过语言表达，不过也有一些精心挑选的表情符号来调味。

作为一名经验丰富的UX写手，我很高兴看到这个关键角色得到了它应有的更多认可。

我们也是设计师，不过我们是在音节和字母表中工作，我们迫不及待想要和你合作。

18.系统化

现在，设计已经赢得了重要的位置。设计的对话已经从价值主张转移到更成熟的分析，即如何使设计作品的成功更加系统化，更加具有扩展性且在品牌的许多产出和不同环境中具有凝聚力。

设计系统专注于将品牌美学和功能方法转化为模块化的组件，这些模块化组件可以混合搭配以满足任何UI的独特需求（理想情况下）。当设计语言被系统化时，就简化了设计决策，缩短了开发时间，并且能让设计人员在尚未建立设计模式的项目上更好地工作。

通常情况下，品牌正处于这一趋势之上。UXPin推出了Systems，这是一款用于创建和维护设计系统的工具。Shopify推出了Polaris，凭借其独特的内容、设计和开发指导方案而获得高度赞誉。UX Power Tools推出了一个想要使Sketch称为可行的设计系统工具的库（我们即将会看到！）

我想2018年会有更多这样的消息。

19.原则—设计的第一要务

设计界一直纠结于鸡还是蛋的问题：内容至上还是设计至上。

我过去一直都是支持内容至上，这并不仅仅是因为我是一个内容的极客。对于我来说，在确定怎么包装之前，确定所包装的信息是最符合逻辑的。

但最近，由于我已经由特定交付品的内容设计专项更系统化的工作，品牌内容策略，我对我们的工作是否遵从内容还是设计变得柔和了起来。

它应该从原则开始。

不论其他一切如何工作，我们都应该明确原则，并依赖于这些原则。

当Shopify的高级UX主管Amy Thibodeau，在她的文章“Locating Polaris”中提到：

如果系统是为了实现真正的工作而创建的，它应该反映一个组织的行事准则及其价值。这也是说，一个不包含任何原则或价值取向的设计系统没法考虑日常实践中的这些问题。

原则为其他所有决策提供了一个框架，从主要内容要多长到内容的背景是什么都有所限制。毕竟，品牌是建立在其原则至上：品牌的使命、愿景和目标。这些名词都需要一个进出的信念来作为支撑，使之成立而不倒。

换句话说，原则回答了为什么。

例如，在Webflow上，我们的使命是鼓励设计师，企业家和创意者将他们的想法带到网络上。这一使命融入了我所做的一切，从Ryan为我们创造的美学到我设计的语音和音调标准。

这些标准知道我们创建草图，沟通我们的意见，并希望每篇文章、电子邮件和广告页面能更丰富。到目前为止，这是一个温暖的摇篮。

你认为2018的数字设计将会如何？

每当我将这些点列在一起时，我的脑海里会涌满很多与之相关的想法，时间的流逝也使得我不得不优先考虑一些。

这是为什么我放弃了一些显而易见的热点但迄今为止对网络的影响有限，比如去年提到的AR和VR。考虑到这一点，你会在这个列表中添加什么？

感谢阅读!

原文地址：webflow

译文地址：玩皮兔设计（公众号）

作者：JOHN MOORE WILLIAMS

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 都是可以借镜的例子。

来源：设计IN台湾

本文中，我们来展望一下网页设计的未来。高清网页设计是否能主导网络，这已经不是问题了，关键是高分辨率显示屏何时能够普及，这是提升视觉设计的必备条件。

下面开始，我们将要探索如何运用图片、视频、或是动画来创建高清背景，并且把所有内容有层次地组合。

图片

超大图、焦点图、全屏图。

以上几个词，最适合用来描述现代网页设计的背景图片。设计师们对高清设计不仅停留在思考层面，他们将其发挥到极致，用背景图占据了整个画面。

这种设计技巧很有效，因为用户天生就是视觉动物。

正如《2015与2016的网页设计趋势》所描述的，毕竟我们理解周围世界时，视觉在主导潜意识。而且，令人愉悦的图片在一定程度上能创造更好的用户体验，因为我们理所当然认为有吸引力的东西更好。这看似极其肤浅，但在设计中，感知就是真相。

高屏幕分辨率创造了绝佳的机遇，让用户能看到从前无法察觉的细节。图片中的小细节——例如Junction Moama所用的Macquarie公园的多色调纹理（上图的两种）——提升了界面的精细程度，对至关重要的第一印象大有帮助。

使用高清图片的5条建议：

1. 使主画面成为视觉焦点——虽然图片是作为背景，不代表它就能占据舞台中央。优秀的照片能与用户建立情感连接，学习图片的精妙之处，看它如何影响设计的视觉层次。
2. 考虑使用多图——使用我们在网页UI模式中提到的幻灯片或卡片风格的结构，来应对内容丰富或相片集类型的设计。
3. 在图片上添加效果——模糊或色彩叠加，能够增加或是改变一张图片的调性（例如全用红色调会更加积极）。这在高清图片上很管用，因为下层的图片画质够高，细节仍清晰可辨。
4. 考虑图片在不同屏幕尺寸下的效果——安排各种尺寸下的背景图，使之能适应任何断点，不会露出纯色块（那其实是真正的背景）。
5. 打破局限——照片背景不一定要遵循标准的1:1.5相机比例，也可以使用从各自背景中裁剪出来的图片。

背景照片能创造简单的视觉吸引。选用优秀的照片强化品牌、产品或信息时，效果最佳。记住，有时会用多张背景照片，要确保这种设计结构和周遭元素能与每张图搭配良好。

视频

高清视频背景可能是今年最盛行的技巧之一——尤其是有着疯狂感的大量快镜头动作。从AirBnB这样的巨人，到几乎所有类型的小网站，视频迅速成为了网页设计中重要的一道风景线。

最初一批运用背景视频的网站，正是电影网站。例如《少年派的奇幻漂流》官网，用了一段电影预告作为背景（而且还是可下载的格式）。

视频作为一种设计技巧的出现，与它本身的新奇性毫无关系。在HTML5（还有能播放高清视频的智能手机）推出以前，许多浏览器与网络连接环境根本无法处理全屏视频背景。

任何关于高清视频的讨论，都应当围绕最终成品。无论是像Dunckelfeld’s这样的超现实主义黑白手法，还是像AirBnB这种更加现实的蒙太奇短片，你都需要来回调整它的饱和度和帧速率，让视频更吸引人，而不会使人分心。

光有一段视频可不够。所有拍摄优秀电影的技巧——取景、变焦、平移——在网页视频中同样重要，即便是用作背景。

Brindisa Tapas Kitchens做得非常棒，它剪辑了大量短片来展现它的食物与环境。视频从多个角度拍摄，有些片段用了缩时摄影的风格加速，另一些则刻意调慢来营造合适的氛围。

同样，在设计中运用高清视频也有5条建议：

1. 注意视频长度——背景视频应当在几秒钟内呈现一段视觉故事，让用户感受到氛围。最佳循环间隔是10到30秒。
2. 关闭声音——对于多数用户而言，声音仍是一种很极端的自动播放元素。如果想要使用声音，也要默认设成静音。
3. 关注加载时间——虽然高清视频很有意思，但不能因此拖慢网站加载速度。如果用户在加载过程中就退出了，视频再精彩都没有用。
4. 考虑备选方案——有些设备无法渲染高清视频。在Goolge统计中查看访客最常用的设备，根据情况进行设计。通常，你会选取一张静态图片作为备选方案。
5. 坚持高质量的视频——不论是否自己拍摄，为了清晰出众的画质，最好雇人来做这个事情，或者使用版权视频。不仅仅因为它要用在高清的环境中，也因为需要相当好的画质。就像照片一样，如果超过原片分辨率使用，视频就毁了。

网页设计，尤其是使用背景视频的网页，都在营造一种电影般的体验。网站中的高清视频，创造了一种完整的多媒体体验，在运动的背景之上层层传递信息。

动画

高清背景动画存在于固定图片的设计中，因为这些动画往往同时包含固定与运动元素。

它与加载动画同样盛行，数十年来设计原则几乎没有改变。唯一改变的是高清显示屏能呈现的画质水平。

成功的高清动画，关键在于时间控制。动画应当有着流畅无痕的效果。所有的循环动画都要首尾相接。

《2015与2016的网页设计趋势》中描述过，我们建议牢记以下5条原则：

1. 坚持简单的动画——太复杂的故事与动作可能会加重认知负担，如果能实现完美的基本动画，就不要制作复杂的效果。
2. 使用亮色调来关联界面——例如，可以从简单的鼠标悬停效果入手，改变链接颜色。考虑选用配色中最亮的颜色作为鼠标悬停色，让人注意到这个动画效果。悬停时放大文字也是一种视觉线索，能够起到额外的强调作用。这些简单的手段有助于突显特定的用户操作。
3. 利用高清屏幕的特性——为了最佳的视觉效果，使用可缩放的图片格式，例如矢量图。
4. 用视频的方法制作动画——同样的精妙之处也适用于动画。应当避免不和谐的运动和物体，例如声音，那会令用户感到厌烦。
5. 为合适的观众制作动画——虽然许多设计师常把动画和插画合为一体，但这未必适用于每个网站。

同样，要注意细节。根据网站与用户的不同，动画可以是卡通式、视频风格，或者仅仅是插画环境中的一系列运动感。动画可以通过用户操作触发——点按、滚动或是鼠标点击——或者就简单地自动播放。

层层构筑：融合所有内容

高清背景只有作为某一层信息时才有效果。精彩的图片、视频或动画独木难支——你得考虑它与屏幕上其他内容的关系。

以下是3个简单的案例研究，这几个网站都将它们融合得非常好。

Adidas设计工作室

Adidas设计工作室用了各种技巧处理鲜明的大尺寸图片，号召人们加入。

全屏背景实际上链接到一段视频，滚动操作还有视觉差效果，引导用户浏览整个产品线和相关信息。清晰的图片搭配同样清晰的文字。通过一种温和的方式，用颜色构建了视觉的层次。

Flipboard

Flipboard熟练运用固定背景图的技艺，这高度依赖传统的摄影艺术。

高清图片包含许多细节，却不会咄咄逼人。图片还延伸到了屏幕之外，让人想象餐桌还会向各个方向延伸，在不同的屏幕分辨率下也确实如此。整个色调将这张图片塑造成背景元素，使注意力保持在其上更明亮的行动号召信息上。

5 Eme Gauche

5 Eme Gauche的特色是具有多层元素的大背景图，包含底部导航、社交媒体图标，还有屏幕中央的品牌logo和主页链接。

每层内容都与背景有互动，并且有所区分，让你一眼就能看出屏幕上的分层关系。这个网站的内部层级很清晰，因为所有页面都采用同样的分层格式和滚动动画。

结论

尽管高清背景近年来正逐渐盛行，但不能仅把它当作一种潮流。它们的产生，是可用性终于跟上科技发展的结果。

这意味着人们不会有一天厌倦高清设计，转而寻找下一股潮流。作为日渐成长的视觉行业，这种创作技巧绝对值得一学。

想学习更多不会过时的网页设计技巧，请看UXPin推出的免费电子书《2015与2016的网页设计趋势》。这份指南通过分解165个今日最佳设计，讲解了10种最有用的趋势，它们来自Intercom、Spotify、Apple、Google这样的公司。

原文链接：http://designmodo.com/high-definition-design/

译文链接：http://colachan.com/post/3474

其实创业界和设计界的风潮也一样，你一直想比别人先一步找到未来的流行风潮，期望能率先站在风口上，孰料最终不是走错了方向和风口出现的地方背道而 驰，或者就是慢了别人半拍，最终只能走到风尾巴上面，而且还要是Peter Thiel在他的《从0到1》中提到的长尾理论(幂次法则)的那条长长的尾巴上面，眼巴巴地看着别人投入了风口的怀抱。

所以风潮这个东西是一个非常神秘的事物，上帝往往不会轻易的给你暗示。所谓“国之利器，不以示人”，如果大家都知道风口在哪里了，那大家一窝蜂的跑过去不就把风口给堵死了，从而也就无风口可言了。

但是，今天我就自动请缨，敢冒天下之大不韪，用本人尚算深厚的设计背景以及对这几年设计风向的观察，跟大家提提我对未来网页设计风潮的风口的猜想。如果大家觉得说的还算有点道理的，有钱的捧个钱场给个打赏，没钱的捧个人场评论转发来声呐喊。当然，如果大家觉得这是一派胡言的话，那也就只能请你赶快离场，等下一篇文章上来再请你来好好捧场。

滑动优先于点击

先上图：

上图是否非常熟悉呢？当然了，这不就是我们今天打开电脑天天在做的事情嘛。

但是你要知道现在已经是移动互联的年代，移动设备占据了用户大量的网上浏览时间，而移动设备的特点是屏幕相对比较小，而控件一般设计的比较大以方便 点击。所以用户更希望的是能随心所欲的通过指尖快速的浏览到指定的信息，而非通过鼠标慢慢的往下拉，然后找到一行小的可怜的链接点进去进行查看。

所以这个时候的设计更多应该是手势操作优先，让用户可以通过手势快速的定位到自己想要的内容。

况且现在移动互联网的用户越来越急躁和越来越懒，很少人有耐心去一个个条目仔细去查看去找到想要的内容信息。所以他们更希望的是能快速的在简洁的屏幕上定位到自己想要的目标，如果能不让自己动手就能自己出现就更好了。

这个就是我们都熟知的泰晤士周刊网络版，它甚至的是无限循环的去滚动着显示文章，而不像传统的PC浏览那样，分成无数个tag和页面来让用户进行点击选择。而这，我认为就是这种风潮到来的一种暗示。

虽然我不知道可穿戴设备如智能手表等什么时候能完全流行起来，但是我相信如果真流行起来的话，它里面的应用肯定是能更好的滚动显示和通过手势进行方便的操作的。

折叠显示将成明日黄花

正因为现在对页面进行滑动是如此的简便和随心所欲，且当今的智能设备的大小型号琳琅满目，所以因为一些内容过长而进行折叠显示的方式已经过时了 -仅仅将一些关键信息显示给用户，当需要的时候再去点击个“＋”号什么的进行展开。

同时你也再没有必要在一篇文章的前面堆积大量的文字内容来让用户知道你下面将要描述的是什么内容，因为用户很容易就能通过手势操作滑动到它想要看的内容上面去。

比如你看下人家Medium的做法，点击一篇文章进去，开门见山的就是一张大图铺天盖地的映入眼帘。用户只有往下滑动才会出现文章的内容，而用户如果想快速查看某一个章节，只需要多滑动几下就到了。

所以取消折叠内容的显示，这我认为也肯定是将要风靡网页设计界的风潮之一。

快速的呈现和简约的设计

我不知道读者您算不算是个脾气比较温顺比较随和的人，如果你自认为是的话，那么如果因为网络太慢，本文下面的内容到了现在还没有完全加载完毕。那 么，我相信你肯定会立刻火冒三丈，把网络提供商的先人都会问候一遍(网络出问题的时候，我本人往往首先问候的就是网络供应商，因为人家贪污的话还收了钱干 活，而这班人往往是收了钱还不干活)。

在当今这个生活节奏这么快速的年代，什么最贵？时间最贵。每个人都在争分夺秒的不甘落后的往前狂奔，而因为通过你的应用或者网页找到一个想要的内容却要耗掉我好几十秒的宝贵时间，我能不暴跳如雷立刻拉黑吗？

所以我们的设计要迎合我们这些暴躁的用户的需求，在能快速显示之余，还要能足够简洁的将内容显示出来让用户能快速的弄懂这是怎么一回事。

上图显示了页面加载时间和用户放弃继续浏览的可能性的一个关系，可以看出来，一个页面如果加载太慢的话，对于大部分用户来说，跟没有加载是没有什么区别的，因为他们等不了几秒就将你的页面或者应用给关闭掉，删除拉黑掉了。

简洁快速的设计应该是让人能够快速的打开并能愉悦的开始欣赏里面的内容的，而不是等半天只显示了一半内容，或者内容显示出来了却耗掉用户半天时间才发现这里面根本没有我TMD想要的东西。下面就是这两种设计的一个对比例子，谁更简单扼要，相信不用我明说了吧。

大家对比下现在很多手机优秀App的设计和其他一些门户网站的设计，就会为这些网站的设计感觉汗颜。因为那些优秀应用里面的界面超级简约和漂亮，而之所以做成这么简约的原因又正是因为需要有好的性能来满足浮躁的用户的需求。

现在炙手可热的扁平化设计其实只是一个开始，其最终的目标瞄准的就是简洁和实时性。而这，就是我认为的另外一个网页设计的风潮。

矢量图将迎来春天

相信大家在欣赏一个朋友通过微信发过来的声称有亮点的图的时候，应该都会尝试将其进行放大再开始亮点查找。你在Retina屏上面放大还好，但是如 果在其他非Retina屏幕上对图片进行放大，到时你就真的找到亮点了，且找到很多，一个个方块的格子状的像素点。旁边美女一边走过时瞥见的话还以为你在 看什么东西了，竟然还要打马赛克！立刻投以鄙视的眼光或者一顿拳脚(如果是公交上的话)！怪谁？怪你朋友发给你的是位图。

而随着现在Retina屏的流行和现代浏览器地矢量图的支持越来越好，所以一度因实现和支持难度而少人问津的矢量图相信将会再次回到风口浪尖上，因为如果是矢量图的话，无论你做多大比例的缩放，它都不会失真。

而其实现在这种风潮已经初露端倪，你看下当今流行的字体图标和谷歌在大力推的Material Design就可见一斑了。

所以很有可能不久的将来你再打开朋友发给你的图片找亮点的时候，可以放心的跟自己说：“自从有了矢量图，妈妈再也不用担心我被人打了”。

动图将上演王者归来

曾几何时，动图曾经到处泛滥，泛滥到在你的网站需要更新的时候都要在上面贴个“网站正在更新”的Flash上去，泛滥到大家都觉得有点噁心了。

但是现在情况有所转变了，不少的流行因素正在试图让动画上演一出王者归来的好戏。

扁平化设计的流行：正因为太扁太平太飞机场般的过于单调，动图的作用就显示出来了。只要你不像以前一样在你的网站上铺天盖地的使用动图，那么它就能将很多东西融合在一张动图中来给你扁平略显单调的页面带来不少的活力和视觉冲击。

移动应用的风靡：移动应用对人们的预期重新进行了定义，它更多是通过动画来传递不同的意义，而我们的网页设计也很应该开始效仿。

HTML5等新技术的支持: 这些技术让我们不需要安装任何插件的情况下就能使用动画。

所以说GIF动画将要上演一出王者归来的好戏。其实在本文你就已经看到了好几张GIF动画。有必要相信，动画将再一次引领大家进入到下一波网页设计风潮。

Web Components组件标准化的到来

另外一个我认为在网络设计上将会盛行起来的是Web Components组件技术。大家都知道现在的网络实现技术正变得越来越复杂，而可读性却又变得越来越差。所以大家都期待有一个统一的标准来让设计师们 简单的完成一些如增加个打开Google Analystics的按钮之类的事情，比如简单的加一行下面的代码来达成这个目标：

而这就是Web Components所能做的事情，但是现在很多设计师都没有用它把自己给武装起来。而现在谷歌Material design就是一个很好的开始，它提供了丰富的动画和交互方面的组件，用户只需要如下图般简单几行代码就能进行使用：

如果一切如我猜想般正常发展下去的话，那么很有可能我们的2015年下半年将会有更多基于组件的框架浮出水面，比如Bootstrap 4.0?

社交网络内容的泛滥和邮件列表风格的复古风

在当今社交媒体这么盛行的年代，每天都有无数的内容产生，让人目不暇接。但是很多内容提供商/者却并不因此而欢喜雀跃。

大家都在用微信，相信大家每天微信上面都有无数的图片和日日更新的人生新方向的感悟出现在朋友圈里，开始的时候还好奇瞄几眼，到了后来这些信息越来 越多且千篇一律了，就变得视若无睹直接飘过了。同时也很有可能将一些朋友发送的优秀内容都错过了，比如天地会珠海分舵发送的这篇好文。

怎么回事呢？其实说白了就是内容已经饱和得有点泛滥了。比如你在微博上发个消息，很有可能立刻就会淹没在信息海洋中消失得无影无踪了。

当然，这并不是说社交网络将会从此没落。我这里想表达的是，正是社交网络所碰到的这种信息泛滥的问题，让一些看上去陈旧而不起眼的利基市场茂发了生 机。比如2014年就有不少如Tim Ferriss等的基于邮件列表的杰出博客开始冒起来，它们提供了优秀的迎合邮件列表样式博客的设计，吸引了不少人的眼球。因为它们很清楚的知道，社交媒 体泛滥的信息也许会引起读者的反感而被忽略掉，但是读者往往还是很乐意去看每一封发送到他们的电子邮箱的邮件的。

所以，我个人认为邮件列表为代表的这种瞄准尼基市场的设计，也许将会成为未来的一股风潮，填补社交网络做不到的那一片空白。

原文地址：Medium

译者：天地会珠海分舵

1.大屏幕体验

大屏幕的体验是如今网页设计必不可少的一个部分。尽管对于很多人来说，很难接受主页只有零星几个词，取而代之的是图片和视频。有的时候，甚至导航都被隐藏成了一个小小的图标。

这两种类型的网页设计可以被标签为“影院效果”和“杂志效果”。前者常常是受到了电影和电视广告的启发，而后者往往是从书本或者页面的提炼出了传统精华。

这种趋势形成的缘由可以从两方面来分析：一是视觉性，而是实用性。当用户登陆上你的页面时，PC端也好，移动端也好，你应当给用户最大的视觉冲击。

大屏幕的的图片从去年（2014年）开始流行，随着图片品质的大大提升和页面速度的不断优化，我们可以看到那些采用杂志效果的页面给人的整体感觉提升到了一个新的高度。

现在这种趋势流行的很快，很多大型网站比如Paypal都用起了这样的背景。

2.多媒体体验

多媒体这个概念因为被滥用，所以它听上去似乎已经过时了。在如今，多媒体一词也需要被重新定义。越来越多的设计师和程序员在增加多媒体体验这一条道路上前赴后继。

在这之前，Flash是这些体验的平台。而如今HTML5的CANVAS元素慢慢取代了原来网页上Flash的地位。

另一个值得一提的用HTML5的例子是音乐家Jonathan Dagan的项目DNA-PROJECT。一打开页面就是就是一个视频作为网站的背景，Dagan通过这样的表现形式，用他的个人经历来讲述他的个人音乐专辑的故事。

Raise the river是另一个很棒的项目。不仅仅是因为它的视觉隐喻，更在它的多媒体展现上。页面滚动的速度和页面右边小河流淌的速度一致，暗示了每张图片之间的联系，也给了整个页面更丰富的表现效果。

我们在做页面设计的时候，我们做的所有事情就是增强用户的可用性。这个网页反其道而行之，它限制了你的滚动，反而会给页面带来更好的视觉效果。

3.视差滚动

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不防一试。感受一下下面的Mint Design Company这个网站。

Mint Design Company这个网站巧妙地运用了CSS技术，效果简单但是视觉效果很棒。

4.有趣的故事

在Boldking的页面中，和第一个例子类似，当你的滚轮滚到一个特定的位置的时候，就展现出了特殊的页面效果。通常情况下，一般都是一些页面元素采用淡进和淡出的效果。

这种轻量级的SVG和Java script的运用可以很好地达成这种效果。不仅仅因为带来的效果很出众，而且它们的运用才使整个页面大小为1.5MB。

Colin and Dewi的婚礼这个页面可以让用户专注于阅读他们的故事。你当前仅仅展示了他们故事中的一个部分，如果你需要看下个部分，往下滚动就可以了。

看上去有点像视差滚动的效果，但是3D CSS就完全可以做到隐藏和显示文字部分的效果。

5.扁平化设计

在过去三年中，扁平化设计一直占据着主导地位。就目前看来，这种趋势还将继续延续下去，尤其是一些更小的元素，比如图标、菜单和图片。比如Colin and Dewi这个网站。

扁平化元素看上去非常简洁，而且大小可控。icomoon.io是一个免费的生成ICON的的网站，非常好用。

Lab 21把扁平化设计转化为“手工设计”。

如果你的页面元素不全都是扁平化的，那也没有关系。设计师经常通过看上去与页面那么协调的元素来创造出惊人的效果。扁平化设计通过不同元素的拼接合成，来形成很好的视觉效果，并且适应不同大小的页面。

我想这种趋势会和更多的视觉元素混合发展，就像HábitatWeb这个网站一样。

6.方框减少

网页设计师总是喜欢炫耀自己的思维能够跳出框框，而且能以不止一种方式跳出方框。姑且称之为“画一个框框然后证明你能打破它”理论。矩形显示器本身就是对网页设计师的束缚（别说你见过圆形显示器）。网页上的每个HTML元素也是方形的。

但是跟大多数人一样，设计师不喜欢被束缚。下面提供据我判断目前处于上升期的几个趋势，可以作为证明你不是矩形奴隶的长期战略计划。

就像不存在矩形边框一样去设计布局

详情点DAN Paris.  DAN的instagram photo由圆形组成菜单导航.

和谐元素：圆形，六边形，不规则形状，甚至菱形。

详情点Lorenzo Bocchi

以轴测图的视角展示的水平倾斜视角和网站布局预览，给人空间和运动的感觉。

详情点The Rosa
在罗萨餐厅主页你的感官会被骗到–你几乎可以闻到饼干的香味。其实不是新技巧，它是一个现代版的以百年老技术trompe-l’œIL,模拟镜头下的真实桌面。例如，把木桌作为背景，然后把所有的布景物体放置在上面。

详情点Swiss Airlines

否定矩形的根本方法是将用户置于一个无限的空间里，滚动页面就可以飞行，呃，滚起来。
瑞士航空公司的挑战了你的网站导航的理解。浏览他们的页面，你会感慨我们对文档空间的理解是多么常规和局限。在这里，不是鼠标在向上或向下，而是我们在云里自由穿梭。

7.贴瓷砖

如果你和矩形相处得很融洽，那么有一个很酷的方式来组织你的内容：贴瓷砖。不知为何瓷砖在网页设计这块比在Windows 8 Metro界面这块更为流行。瓷砖非常适用于响应式布局，同时是一个形成令人印象深刻的布局元素。

如果贴瓷砖变得太无聊，可以尝试进一步把边缘锯齿化，然后把对象或者文本推出锯齿边缘。

8.导航控件

Daily Beast网站导航控件把滚动方向显示在文章内部。

导航设计一直是网页设计师最喜欢的游乐场。“玩”导航达到顶峰的时候，网站是纯粹的Flash设计。Flash消失后菜单
变得安静了，没有了动画或夸张的交互。

但尖锐导航趋势又一直在上升，部分是由于新的网页设计趋势和现有的导航模式的低效。由于Java的不断演化和现代CSS在各个浏览器中更频繁的被阐释，Java Script脚本的更广泛的应用（通过框架和插件），因此尖锐导航设计的实现变得更为容易。

这里有几个导航设计试验和趋势的几个例子。其中部分想法已得到了广泛的应用，而其余的作为一种新生力量在推动网页设计
走向。

粘性菜单

菜单在鼠标滚动时不断扩展相关项目。它适用于有很多内容的单页网站。The LESS的菜单是一个少有的非常舒适的使用“手动”的网页。

粘性菜单是当鼠标滚动时菜单仍停留在屏幕的顶部或边缘。不管你喜不喜欢，它正在成为单页网站的标准。

有时它结合scrollspy脚本创建一个部件能准确显示浏览者在页面具体位置，这在是有长长层次关系菜单的网页里尤其实用。

贴在屏幕四角的粘连导航

详情点Hum

街景视角导航条

详情点Oh Dear Games

谷歌地图，特别是街景，启发了这个网站开发者创建类似通过谷歌街景步行的导航。时间会告诉我们它是否能成为一种趋势。

9.结合谷歌地图

把这个特点作为2015一大趋势，不仅因为它已经在近几年逐渐崛起（而且我们看它几乎无处不在），而且它正变得越来越有趣，这得益于谷歌提供的易用定制选项。

按这个特点做的最有趣的网站是在一个地图概念图周围进行功能区和视觉上的创意构造。当然，它使用的是定制的谷歌地图以良好地配合页面的外观和感觉。

10.混搭界面

详情点Necotrans

对单页网站持续的偏爱所带来的挑战是可以解决的，而且是以一种创造性的，用户友好的且直观有吸引力的方式解决。面临的挑
战是要在一个页面上包容很多信息，实现很多功能。所以页面必须有一个整洁，现代的外观和易用的导航。

该解决方案可以称为混搭界面：一个布局包括许多“层”，适应所需的功能或内容。实际这不是新概念，它本质上很类似于桌面应用程序，却没有在主流的互联网上广受欢迎。最近，这种界面的使用率在增大，他们变得越来越精致，功能多样。

Necotrans网站在网页上方似乎没有什么内容，仅仅在全屏背景上打上一行字。但是右侧菜单允许访问所有必要的功能，为用户提供站点搜索工具，定制的谷歌地图，新闻版块和联系方式表单。

11.极简化

详情点Maemo

20世纪60年代以来，经典的KISS原则（“Keep It Simple, Stupid”的首字母）已被用于军事，企业和政府。然而，即使你可能已经很努力的简化你的设计了，它也许还有进一步简化的可能。

Maemo餐厅用不可抗拒的口吻，最精炼的语言讲述自己的故事，冷雾萦绕的峡湾上悬着餐厅的名字。浏览者只面临一个去诱惑——行动（订一个餐位）。

向下滚动会看见随意布置的几张照片，很难说是水平还是垂直对齐。照片的主题看起来也很随意。然而，浏览网页会给人强烈的感官体验。

苦行僧的形式提升了照片的质量，而这种极简主义让你很愿意去读照片下方的几句禅语。

从这里能学到什么？你可以在网页上保持视觉上的沉静，同时实现震撼的视觉效果！尽量减少文字、表格和色彩的同时，要添加大幅逼真的视频来营造趣味性。

12.加载网页设计

我们能以前所未有的快速度创建网站，如使用高清视频网站后台。但每一步都是有代价的，在这种情况下，代价是加载时间。

现在我们可以看到一个大逆转的视觉魅力的加载页面，而不像在Flash时代小游戏式的加载网页。

13.设计自动化

详情点grid.io

截图的是显示有错误的一个页面，没有人会去做这样的东西：在黑暗的背景放上不易读的黑色文本。

本文如果不提“grid”的话就不算一篇完整的文章–“grid”是由最近经常搞出动作的“折衷的设计师”提出的一个吸睛的想法。它试图以人工智能取代设计师和程序员的位置。未来网页设计师会变成多余的？有待观察。

现在仍然无法测试这个假想系统，所以很难判断其可用性。这个系统做出的网站似乎是其理论的唯一依据，这个网站对大多数问题应对良好，但试图创造完全人工艺术似乎是这个时代做不到的。例如，绘画傻瓜创意软件还没有消灭掉绘画艺术画廊。

结语

这13个网页设计的趋势已经蔓延在过去一年，也很可能会极大影响2015年的网站建设样貌。然而，如果我们用一句话来概括今年的建站趋势，就是“内容为上”。

这条定律一直很准。但如今，网页设计越来越强调美感，可以不断指出许多在前期设计中所犯的错误：概念，导航流程规划，线框，文案写作等等。所以扩大视野和学习新技术的同时，要确保自己不要忘记最基本的东西。

原文：应酷

Dante Harker

Cole Plante

Follow Bubble

Commonway Church

P&Co Fashion

Tendigi Apps

Architecture Website Design

Caffe Cimo

Ikreativ

Australian Catholic University

Tu Corte

Osum Studio

1.响应式网页设计（Responsive Web Design）

　　现在越来越多用户都拥有多种终端：台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在的潮流，甚至是未来很长一段时间的设计趋势。那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视觉效果。

　　除了多终端的多样化，我们还可以看到我们的电脑屏幕，手机屏幕都在不断变大，而在对未来生活的预测、概念设计里，“屏幕”这个产物更是被运用到多种新平台上。例如微软发布的“未来生活概念视频”里，厨房、室内墙壁、办公室玻璃墙面都成为了交互平台。所以我们可以发现，响应式网页设计所具备的良好的适应性和可塑性，在未来的网页设计里将占有举足轻重的位置。

2.全屏网页设计（Full Screen Design）

　　所谓设计不分家，近年来平面设计里“纯净”“留白”等概念也被互联网设计吸取，为了更简单明了的突出主体，提供更舒适的感官感受，很多网站开始采用全屏网页设计，利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可很好的吸引观者注意。通常页面内的文字内容不会特别多（所出现的少量文字加上精美的排版将会变得更加吸引人），主要以图片展示为主。这个样子的网站多用于摄影团队或个人作品集展示会比较常见。虽然简单养眼，但是承载信息有限，公司部门的主页很少见这样的设计。

3.视差滚动设计（Parallax Design）

　　视差设计可以说是近年来网页设计中的一大突破，也备受推崇。视差滚动是让多层背景以不同速度滚动，以形成一种3D立体的运动效果，给观者带来一种独特的视觉感受。

　　除此以外，鼠标滚轮的流畅体验，让用户在观看此类网站时有一种控制感，简单来说这是有响应的交互体验。就好像童年看到走马灯，转动它你就能看到人物动起来，还能欣赏故事。视差滚动设计的趣味也在于此。所以无论是网站还是电商商品宣传页都经常采用视差设计，吸引眼球也很受用户喜爱。

4.扁平化设计（Flat Design）

　　扁平化设计可以说是去繁从简的设计美学。去掉所有装饰性的设计，可以说是对之前所推崇的拟物化设计的颠覆。我们不能妄加评论说这是好还是不好，只能说它提供了一种新的设计思维。扁平化设计是否会成为将来的趋势我们也无法回答，尽管褒贬不一，备受争议，但是就现在来说它是当下的一种潮流。

5.滚动侦测网页设计（Scrollspy）

　　利用CSS的实现将导航栏固定在网页顶部（大多数是顶部，当然也有侧面或底部），并将版面内容按照导航顺序垂直或横向排布，使得用户点击相应导航tab时页面自动滑到相应页面，而若点击内容，导航也将随之改变。这样的网页设计页面基本不会跳转，每一个tab所指向的页面内容也基本一屏显示完整，所以在页面呈现的内容上会有所局限。为不影响布局一般也会伴随自适应。

 　　滚动侦测式的网页会给设计师带来了很大挑战——要在有限空间内保证内容呈现的完整性，故设计师会在版面上下足功夫。而这类网站结构和视差设计有异曲同工之处，所以我们发现很多网站会结合两者，给观者带来不一样的视觉感受和用户体验。

6.无限滚动模式（瀑布流）

　　有一些网站内容很多，但他们并没有简单分页，而是采用的是一种垂直瀑布流的方式布局。将那些内容垂直排布，当用户纵向滚动时，内容会不断更新好像永无止境。这样的瀑布流很早之前就开始流行，最早采用该布局的是pinterest。这样的滚动页面就大大减少了分页的数量，个人认为对于这类信息量大，每日更新数据快的网站是比较不错的方案。

7.网页的风格化设计

　　现在的网页早已不再像过去受诸多条件和技术限制了。其呈现方式颇为丰富。风格从清新到复古，插画手绘到拟真设计，无奇不有。无论是版面版式，还是设计元素，用标新立异这个词形容绝不为过。根据自己撇到的冰山一角，提一下对我感触最深的变化：

（1）平面设计感的加强

　　网页设计随着设备和技术的革新，早已突破了过去单一框架的限制，变得更加灵活。所以就页面风格更多地开始向平面设计靠近，许多页面设计得极赋海报和杂志的版式感。时尚而富有冲击力。

（2）注重字体设计

　　近年来很多设计师将字体设计也融入了网页设计中，并作为设计的一个重要元素提升整个网页品味。通过使用CSS3设计师可以拥有许多自定义的字体，这给网页的视觉设计也增加了一个重要的设计思路。

（3）丰富灵活的动画

　　Html5和flash的广泛应用，让网页的交互动画变得更加生动有趣。

 　　通过观察这些趋势如何影响现代网站设计，或许可以为网页设计师带去指引，发散出新想法。

　　虽然设计师和开发者都需要和市场接轨并跟上潮流的脚步，但是所谓的潮流是当下的，未来确是未知的。我们的确需要保证自己不被行业趋势甩到队尾，但更重要的是在浪潮中适应和学习。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=7800)

设计的影响仅仅是一个来自于我们的文化和用户界面感知的反馈。观念上这些趋势代表了在网页设计社区最受喜爱的点子。可是当提到设计团队时，就会想到设计师拥有他们独立的观点，所以要有保留的接受这些想法.
 

1.响应式布局

响应式设计已经变成了一个最终来使设计的布局适配各种数字媒体视窗的入口。此想法是用来支持所有的来自笔记本电脑，台式机，智能手机，平板和任何将来将要发布的设备。

你应该想象这个趋势更像是一份单一的代码，完美地运行在所有环境下统一网页的设计中。响应式站点被经常想象为是向手机浏览器迎合，但那不是唯一的目的。你也可以拥有一个让浏览器窗口更大，可以让你的页面布局添加鲜艳的插图和图案的响应式站点。

这里的重点是思考站点设计作为一个动态和自然流体的单一画板，css3媒体查询允许开发者在有限的或者扩展的屏幕之上自定义布局，用这个来增加你的优势同时也看看其他设计师是如何实用它的。
 

2.视网膜支持

随着响应式支持网站布局，同时我也发现在为视网膜设备建站的人有明显的增加。苹果第一次实践这个想法是在iphone4上，从那以后苹果在他们的其它设备包括ipad和一些macbooks上也应用了视网膜屏。

视网膜屏像素基本上是其他任何普通LCD的两倍，虽然它们有相同的物理尺寸，但是视网膜屏可以使用两倍的数字像素来适应相同的物理尺寸。

这意味着“像素完美”的网页设计师将要制作两套图片格式.以此来支持视网膜设备。首先你需要使你的样本图片两倍于普通图片的分辨率，接着保存标准版本的图片。大分辨率的图片将会在标准分辨率的屏幕上缩小并且在视网膜屏上看上去更鲜明。

我最喜欢的一个响应式网页设计工具retina.js,它是一个javascript库，用来使你的用户无论何时在使用视网膜设备时，自动的展现视网膜图片。

尽管它不检测CSS背景图片，但它依旧是用来避免在媒体查询里写下所有情况代码的最方面资源.
 

3.固定的头部条目

使用CSS position:fixed属性是使你的头部条目固定在网站最好的方法。当用户往下滚动你网页的时候，此方法会提供一个静止不动的导航和一个回主页的路径。这个趋势已经有一段时间，但是我们现在才看到它全部的力量。

因为他们几乎可以工作在任何网站，所以看上去很有趣。它们包括社交网络、博客甚至有设计工作室又或者是私人公司。这种设计非常的流行并且看上去和许多布局很搭配。但是从美学角度看，这个固定的条目提供了一个减小操作网站距离感的特别用户体验。
 

4.大图片背景

摄影师或者摄影爱好者肯定很享受这种设计趋势。我已看过无数的案例来讨论使用超大图片来作为背景的这种想法。这是获取用户注意力极佳的方法并且当恰如其分的完成时会看上去很棒。

当大图赏心悦目的时候我就慢慢的喜欢上了它们，当你把这种大图做背景的想法融合进你的设计的时候，这样的设计技术，在市场上会使你的网站显得更专业。谈到这时我总会想到曾经很流行的Kerem Suer的设计作品，为每一个登到他网站的用户设计一个非常具有个性的背景图片。

5.CSS透明

CSS3的新属性已经允许编辑网页上任何元素的不透明，这意味着你可以在不使用photoshop的情况下，在现代浏览器中实现透明。这种透明性的网页设计趋势最近在codrops上讨论带有一些非常生动的话题。

一个极佳的例子是在Squarespace Blog上，它页面中间的层给了一个background:transparent;属性,典型地它可以应用在生成一些其他平铺背景上，又或者设置内部元素当背景。

另一个来操作透明度的设计技巧是通过rgba()颜色语法，在css书写时你可以指定具体的红，绿，蓝以及透明度，所以使用rgba(255,255,255,0.6)会生成60%的不透明白色，这确定是一个设计趋势，所以在2013以及以后我们仍可以抱有期待！
 

6.极简的着陆页面

任何一个花一些时间调研市场的人都会明白网络销售是既简单又聪明的，你可以接触到世界上任何地方的消费群体，另外你还可以卖一些非实体产品，例如视频或有创造性的东西。

在网上创建一个简洁的着陆页面就是为了获取指引到你的产品或服务的引导线。这个新趋势奉行极简主义的信条：保持所有东西简单同时专注你的核心产品。

在PictoPro webpage上提供了许多精美的低价图片示例资源，这个页面使用矢量图标作为背景是相当灵巧效果，同时文本也容易阅读，事实上它是一个一次单击结算的流程，你不可能做的比那更简洁了。
 

7.数字快速响应编码

随着智能手机的充足导致QR（快速响应）应用程序的激增。它代表Quick Response Code，始于早期的UPC二维码,你可以从餐馆通知事件的地点和汽车销售好多地方发现这种标签。

但是最近我发现一些站点巧妙的将编码融入到设计中，因为它们经常出现在打印中，所以你很少注意到它们。但是随着时间的增长，由于数据传输越来越快，QR 编码会成为流行趋势。你可以在Keith Cakes联系页面看到此技术鲜明的例子。
 

8.社交媒体标记

网络营销是网站成功或失败的基本决定因素。社交化媒体和病毒式营销在许多不同的网站爆发，Digg 曾经是这一领域的霸主，但是现在已经被对手Reddit所取代。但是这并不意味着仅仅有两个可以在线分享心情故事的网站资源。

你可以在任何社交社团上检索到分享标记，这样就有可能发现很好的解决方案。你可以把这些分享标记放在你的布局的任何地方。这种设计对于一些急迫想在Facebook，Twitter更或者是LinkedIn上分享内容的读者或粉丝也是有积极一面的。

下面我列出了一小部分社交媒体标记，你可以在自己的网站布局上尝试一下。

§ StumbleUpon Badges

§ Google +1 Button

§ Pinterest Buttons

§ LinkedIn Share Badge

§ Hacker News Vote Badge

§ Dzone Vote Buttons

§ Free Social Media Icon Sets – Best Of

§ 100+ Remarkably Beautiful Twitter Icons And Buttons
 

9.详细的插图

新的设计趋势都是为了抓住和控制某人的注意力，我个人感觉插图能出色的完成此任务。但问题是找一位能做出如此完美无瑕艺术品工作的设计师，并且还可以教自己。

插图可以应用在多种各式各样的方法中，以此给你的网站带来不同的感受。看看互联网，你就会发现许多画廊和插图网站都集中在电子插图上。你能看到这么有美感的工作最终完美的融入网站的品牌中，MailChimp或许是拥有黑猩猩邮递员商标最具代表性的例子了。
 

10.无限滚动

无限滚动加载至少存在许多年了,但是此技术直到今年才成为主流，我想在2013年还会继续。

Pinterest已经为他们的布局采用此加载技术并且运行的很完美，你可以搜索任何东西而且当你往下滚动时结果页会不断地加载，分页基本上不是问题，甚至不会对用户体验造成影响，讨论为简约设计。

但是另一个非常棒的或许是我最喜爱的例子是在Tumblr。你可以发博客同时可以摘录所有出现在你面板上你跟随人的照片。所以当你登陆之后所有最近的帖子会出现且无线的往下滚动页面。

这是一个极好的技术，可是并不能应用在每一个布局上。但是对于能适应此方法的网站从视觉和表现上都相当惊人。
 

11.主页特点巡回

在网上新产品通过滚动图片展示和示例视频都很常见。着陆页和新建页面经常尝试使用一些甜头来诱惑潜在的客户。如果你知道如何在网站上将东西构造的很好，它的作用将会很明显。

回顾2012年我会说此趋势最好的例子是MediaFire’s homepage.这个页面的整个头部是在一系列幻灯片之间滚动。每一个幻灯片都表述了你可以在MediaFire做什么同时阐述了和其他网站的对比他们的特点。帮助此例子表现突出的依旧是他们使用的大插图和图标。这是一个不适合全站使用的趋势，你仅仅可为某些产品以此来吸引更多的关注。
 

12.滑动的网页面板

过去当flash和Actionscript很盛行的时候，滚动的网站很火。而现在，动的效果已经可以通过Javascript和JQuery实现，并且依次影响了设计师建设网站的方法。我是偶然喜欢上滚动面板技术并且希望在2013年看到更多。

立马点击，你或许会想CaptainDash是一个普通的网站，可是当你通过导航点击的时候，你会发现每一个页面都是通过左右连续推动加载的。这些动的效果并不总是对手机用户是个好的兆头。

若你可以通过响应式布局来处理它们，又或者有可供选择的手机站点，滚动效果在手机上就会很酷，值得一试！
 

13.移动导航切换

当谈到响应式设计时，最难的问题之一是如何创建一个靠谱的导航。你希望能给用户对你所有重要的链接以直接的访问，而不要淹没在页面中而使其难以辨读。先保持导航隐藏当需要时再出现也是一个很好的点子。

进入移动导航切换菜单漂亮的设计趋势，Treehouse Blog是极少数将此技术在智能手机和pc端浏览器表现都很耀眼的例子之一。但是有许多网站和工作室在他们的个人响应式布局中使用了此趋势。

我所喜欢的导航切换是你可以以多种方式设计导航，你可以有从头部到底部的导航或者往下滑动，又或者左右推动内容。设计师有许多玩的选择但是对于UI实验需要更多的时间。
 

14.全屏排版

前面我提到过使用超大图片作为网站布局的背景，这种趋势依旧可以延伸到文字排版上，设计的你网站文本完全适应浏览器。一些用户可能感觉到很恼火，但是如果布局对于超大文本很合适这也不是常有的事。

Alex Pierce有一个很棒的专注于排版布局的网站，你可以通过CSS3的属性看到富文本效果。另外这个网站很容易被导航以及许多其他页面的元素显示的也是超大的。

独一无二的大字体样式可以像超大图片一样突出，同时我确定在新的一年我们会看到这种设计会得到更多的评论。
 

15.编程接口和开源

开源软件已经存在数十年了同时自从它存在就改变了网络。但是在2012年里我注意到有更多的关于开源软件涉及到网页组件、布局、动态效果。典型的是我们可以谈论免费网站模板，布局或者像WordPress的CMS软件。

像Github这样开放的编程接口和资源不仅允许设计者进行原型布局，还可以在页面上制作动画和效果。在网络上jQuery事实上有无数的插件供免费下载使用。

说真的我不希望开源项目在任何时期发展缓慢，现在就是该开始并且促进在创建网站领域知识的时候。
 

16.深度盒子阴影

我在2012年的文章中已经讨论过CSS3的盒子阴影，这种趋势已被证明是非常准确的。事实上，我经常希望看到在现代网页设计中加入盒子阴影效果。这种效果看上去很神奇，它们从来不会偏离美学除非过度使用。

我相信在前些年设计师遇到的问题源于盒子阴影太难而不容易实现。往前推几年，这种效果需要Javascript或者在photoshop中制作阴影背景，而现在阴影盒子可以在CSS中使用几行代码来生成。

我将会在整个2013年留意盒子阴影效果。我想此效果已经在设计社区根深蒂固，现在更该关注的是谁最有创造力的实现盒子阴影效果。
 

17.CSS3动画

CSS3 带有相关浏览器前缀的transition属性允许CSS实现像Javascript一样的动画效果。设计师现在能以不同的CSS属性实现动画效果。我有许多恰当使用过渡效果的hover effects and form input fields例子。

另外一个优秀且激动人心的例子来自CSS alerts tutorial on Codrops。提示你如何为各种不同的动画设置时间。

我对新的设计师推动不通过脚本来实现的动画充满信心。
 

18.垂直导航

当我第一次注意到不同的网站使用此趋势的时候，并不是很感兴趣。可是在过去的一年里，我看到越来越多的设计师创造了完美的垂直解决方案。当此布局被正确的完成，垂直网站布局可以容纳充足的内容同时具有好的设计体验。

Riot Industries的组合对于新设计师是个很好的例子。查看一下导航链接是如何工作的，在移动上去是整个组合动的效果是如何实现的。边框纹理确实展现了一个左右两列分开的线。

纹理效果同样在另一个垂直布局上出现，例如CSS画廊Design Bombs.

19.单页面网页设计

单页面设计是一个很大的话题，覆盖了许多不同网站分类。显而易见自从万维网创建单页面网站就出现了。但是最近几年这种趋势变成了一种更加自然的用户体验。

我想为Cage App设计的网站或许是这篇文章中列出的例子中最棒的一个。他们利用单页布局通过水平布局鲜明的展现出内容。但是你还会注意到页面的顶端有一个模糊的背景图片效果。

随着你往下滚动页面，导航条一直固定在你的浏览器顶部。合并其他的网页设计趋势到单页面布局里面是吸引用户注意力和创建一个迷人的网站的解决方法。
 

20.圆圈元素设计

这一圆圈设计趋势在网站布局是比较新的且已经被赋予了很多的关注。设计师喜欢圆圈设计，因为它们干净、整洁，一般适合任何块状布局。你可以构建你的圆形或者把你的页面元素更改为圆形设计（例如用户头像、分享按钮、发表日期等等）。

Lucia Soto组合基本上是圆形网页设计中很棒的一个例子。这个网站是动态创建的所以你得在页面上水平移动不同的片段。您也将注意到一些可爱的向量艺术品以及星罗棋布的间隙。Web设计师渴望这些额外的花絮在页面布局上,因为他们透露出唯一性。

你可以在Site Optimizer主页上发现一个简单的例子，它使用了圆形页面设计作为他们服务的信息卖点。
 

结束语

当创建数字产品时，用户界面是最复杂的话题。尝试着使导航和内容样式获得成功的用户体验。这些设计趋势目的是给设计师指明正确的方向。