一、长滚动页面
例子：Shadow
图01
随着智好手机的兴起，移动端浏览网页的数量已超过传统桌面端，2015年所看到的网页都在向小屏幕靠拢（相对桌面显示屏）。就如其他悉数在列的设计趋势一样，长滚动网页在相应设计利用方面正变得越来越常见，由于小屏幕就意味着长滚动。
在过去的设计不雅观念中，设计师都是不想让内容缩在一起，须要拉几下才能看到全部内容，但新的研究表明用户的习气在改变，不再讨厌拉滚动条。现在，设计师和用户都意识到长滚动的代价所在：更高的创作自由度、更强的内容故事性、更有效的交互运用以及大略单纯化的导航（如果网站足够小的话）。
但是，长滚动也会带来一些代价，比如SEO效果弱化、加载韶光变长等。由此看来，长滚动对付移动端流量大或者频繁更新内容的网站的运用效果最好，而对付看重如***等媒体的网站的效果就不是那么有效。
运用技巧：
1.利用粘性导航菜单或者弹出选项菜单来提升导航效果。
2.长滚动和单页面网站随意马虎让用户不知所措，设置好导航可以避免这种情形的涌现。
3.利用视差效果和滚动触发动画等突出长滚动的上风所在。
二、卡片式布局
例子：Behance
图02
随着移动设备的兴起而带来的实用性趋势之一是卡片式布局。卡片式布局的优点因此干净和有组织的形式展现丰富的内容。这样的布局让网站很好地适应不同的浏览办法和不同类型的内容，特殊是有链接到外部网站的，用户能直不雅观地知道点击卡片内容带来的干系帖子。
卡片式布局可以将内容很好地划分为各个小部分，而每一个小部分都是浏览者想要知道的：题目、紧张插图、描述或者标签、带有收藏评论等选项的掌握面板。
卡片式布局有良好的相应设计体验，由于它们的行和列都可以自动重新排列，适应不同的屏幕尺寸。
运用技巧：
1.令全体卡片都可以点击，而不但是图像或者笔墨带有链接。根据费茨法则，这会让用户更加随意马虎和乐意点击进去。
2.采取卡片式布局时，添加动画效果，特殊是悬停触发效果。小按钮颜色的变革或者全体卡片的改变，乃至旋转或者迁徙改变效果，都可以让人对高度机构化的布局感到有活力，这样新颖设计可以让你的网站在其他卡片式布局网站脱颖而出。
3.卡片式布局的缺陷在于卡片之间的空间，对付卡片间的间隙要清晰表示好，不要让用户去猜这些是干啥用的。
三、新版扁平化设计
例子：Toyota
图03
在多年前，拟真设计曾经是当代设计趋势之一，而扁平化设计则是它的对立面。
然而，本日的扁平化设计已经远远超出原来设计起源。经由全新和奇妙蜕变后的扁平化设计，供应了更多的机会来展示设计细节以及盛行，Ryan Allen称之为“扁平化设计2.0版本”：鲜亮色彩和高光效果、色彩渐变与着落式阴影、更加有深度的细节设计。
并且最主要的是，扁平化设计仍旧保留其核心设计风格。常见的大略眇小的装饰没有丧失落。卡通化图案、易读性排版、鲜艳的颜色等设计风格都逐一保存，让人一眼就能明白是扁平化设计。
运用技巧：
1.幽灵按钮只需大略的线条和透明背景，却成为扁平化设计中的趋势之一。更加兴庆的是，幽灵按钮同样可以用于扁平化设计以为的创作中：大略明了的样式不会转移用户对俊秀背景的关注度，让用户的把稳力都集中在最突出的图片中去。
2.扁平化设计采取非常大略的图案，可以让网页让加载速率加快，这样的设计特点可以让相应设计做得非常到位。
3.扁平化设计与极简设计趋势的比拟见本文第10条。两者都同样通过简化式设计，达到“少即多”的设计效果。
四、强力动画效果
例子：Bugaboo
图04
运动物体总能吸引到眼睛的把稳，动画可以影响人第一眼看到的视觉效果。通过潜在的与诸如大小、颜色等传统网页设计方面的比拟，动画效果比其他的媒介更能传达某种元素或者信息。
动画同时也有显示关联性的功能。想象一下，一个窗口正在最小化，然后飞进菜单中，这个动画首先让人知道这样的行为是存在的，然后用户就知道能在哪里找到刚才的窗口。
如下所示UXPin采取无码动画编织器的飞进菜单，将这个事理完美演绎。
图05
动画最基本的功能可以在沉闷的变革中凸显出来。一个悬停动画比大略的颜色变革更能显示出一个链接的可点击性。
1.Web和App动画仍旧可以遵照经典的12条迪士尼动画设计原则。
2.长滚动网页非常依赖于动画效果来创造平滑的滚动效果。做得好的时候，由滚动触发的动画效果可以让网站极具意见意义，让浏览者身临其境。
3.设计好加载动画的好处多多。个中，它们就能见告用户大概等待的韶光，并且能在等待过程中欣赏到俊秀的动画，而不会感到摧残浪费蹂躏韶光。
4.在背景中奥妙增加动画，可以激活全体页面，让画面不再沉闷，但要把稳不要做得太过。由于太多的背景动画会分散用户对紧张内容的把稳力，更不用说太多动画加载带来永劫光等待。
五、Hero图片
例子：Frigerio
图06
随着2015年HD高清屏幕遍及，设计师开始更加把稳图片的艺术品质。越来越多的网站喜好用俊秀的拍照图片作为设计素材，而不再是数码化图片。
从今年图片盛行趋势来看，Hero图无疑是现今最潮流的选择。Hero图一样平常突出放置在网页的前面或者中心，概述网站最主要的内容。以Hero图作为网页背景可以为用户创造高度身临其境的体验，吸引用户迅速点击上岸网站。
Hero图同样具有很好的灵巧性。可以根据不同网站的目的调度色调和想表达的信息，从而完成一张图所要达到的目的。
1.自定义照片每每具有个性化方向，而库存图片对付想节省韶光或者省点经费的设计者来说是一个不错的选择。将库存图片变得个性化，就可以结合各自的优点进行利用，比如让自定义照片和库存的说表达的主题保持同等。
2.不同颜色代表不同的情绪意义，颜色叠加可以让设计师操控图片所被理解的意义。比如一张原来黯淡色调的图片，添加黄色或者橙色的颜色叠加，可以图片显得有活力和亲切。
3.在网页中，电商网站开始用商品的实物图片代替原来的商品图片，实物图片可以进一步让消费者知道自己将会买到什么的东西。这样做的好处已经广为人知，由于剁手党在增加。
六、高清背景
图07
随着图片运用的发展，在今年利用HD高清图作为背景的盛行热度正在上升。伴随着越来越多的人拥有高清设备，全面利用HD高清图只是韶光问题。
我们乃至可以不雅观看到HD高清***，更不用说上面先容过的Hero图片。现在浏览器和网速可以支撑网站处理更多的***，***背景加强气氛渲染和情绪联接方的效果，而不再是呆滞的图片了。
相对付SD标准分别率72ppi，HD高清是分辨率超过200ppi（dpi）。这就导致两种情形的涌现：在SD屏幕设计的图案放到HD高清屏幕显示，会涌现成块或者模糊的效果；而HD高清图在SD屏幕上就仍旧显示得很好。这就意味着拥有SD显示设备的用户不用担心这种变革，但有HD高清显示设备的用户却要把稳一下。
1.可缩放矢量图形，简称SVG，便是将图像转换为线条和点，没有像jpg、png、gif等光栅格式的像素。只管即便在设计新图片的时候利用，并且在实际输出图像和***时保存为光栅格式。由于矢量图形可以在最原始端补充像素，这便是为什么在开始的时候以HD高清标准捕捉媒体。
2.大多数设备的屏幕都不符合常日摄像机1:1.5的长宽比尺寸，以是要进行适当的裁剪。否则，你不能掌握***中哪些被剪掉，哪些是看到的。
3.不要让背景的独特视觉元素粉饰了页面中更加主要的内容。
七、大胆的字体设计
图08
随着字体渲染问题的减少、免费新字体的可用性提高，字体设计开始在网页设计中扮演更加主要的角色。
大胆的字体设计是为了让读者更关注度内容本身，而不是必须弄得形式上很狂野或者精雕细琢。事实上，有时候最大略的字体就最大胆的选择。伴随着扁平化设计和极简主义风格盛行，现今的字体设计也趋向于大略化。将无衬线字体放在风格浓重的设计中，有点视觉标识的浸染，提高了内容的可读性。
不管字体如何，今年字体最常见的用场之一便是极限大小。字体可大可小的趋势，让字体设计走向极限。
1.常日网页中只用两种字体可以让人看起来比较舒畅。
2.记住字体设计的紧张目标是提高内容的易读性和可读性。如果字体弄到内容很难懂，再俊秀的字体设计都是无用功。
3.只要产生足够的视觉冲击，炫酷的字体设计乃至可以在网页取代图片的存在。笔墨设计同样可以很养眼的，在一个网页中俊秀的字体设计可以吸引足够眼球。
八、参与交互
图09
HTML5、CSS、Javascript、和jQuery等编程措辞已经成为商业开拓的强大工具，如今这些措辞的改进带来更深层次的互动。现在，更多的视觉刺激、更强大的内容支撑和更具吸引性的操作办法都在带动用户更深入地参与网页内容中。今年明显觉得到这方面趋势的增强。
点击/滑动元素、个性化（特殊是地理定位）、掌握显示的内容、***和动画、滚动化导航、转换和循环功能、推送关照等都是提升交互效果的突出特色。互动的增加同样意味着微互动的增加。
微互动是互动的细分：当发电子邮件时叮的一声，或者吸引关注新关照的动画。交互设计只会变得更加繁芜，这须要一段韶光去磨练。
1.大家都熟知的的标志可以帮助用户理解标志对应的功能，令交互进行得更加随意马虎。比如标记菜单的汉堡图标表示退出菜单，或者播放按钮表示可点击***。
2.时候想着用户想得到什么。设计过程中的每步修正都是为帮助用户尽快达到他们的目的。UX Design Process Best 这篇文章中提到的人物角色、用户场景、体验舆图等都可以帮助你很好地理解用户需求和目标。
3.产品的交互性是在与用户的互换中起浸染的。为更好理解用户的流程，考试测验在用户和操作界面之间进行角色扮演。
九、鲜亮的颜色
图10
正如我们看到扁平化设计的盛行，视觉设计的总体趋势正朝着乐不雅观和喜人的方向发展。
通亮愉悦的颜色与欢畅、友好的吸引力相匹配，同时在本日也更加随意马虎被人接管。在过去，设计师只可用216种Web可用颜色，但现在色彩种类达到数以百万计，并且HD高清屏幕的崛起起到很好的推动浸染。
通亮的颜色不再仅仅展示乐不雅观的审美。引人瞩目的颜色可以减少网站给人沉闷觉得的可能性，这是极简风格网站的常见毛病。当利用很有活力的字体设计时，颜色的奥妙运用可以让人把稳到某个词汇或者短语。乃至对付提示性运用，颜色可起到很主要的浸染，比如当鼠标悬停在一个选项卡上，选项卡颜色涌现变革，这是一个很明显的交互性提示。
1.每种颜色都代表着不同的情绪，以是该当根据表达内容的特性，谨慎选择相对应的颜色。
2.颜色不是多就好。在单色方案中，采取同一颜色的不同色调，来达到界面统一的效果；当笔墨设计比较突出时，采取能干的视觉标示。
3.只要三种紧张颜色方案，就能在网站中制造出完美的比拟效果。
十、极简主义设计
图11
移动端浏览量增加的促进极简主义的发展，一种只会用最大略必要或者最少元素的设计风格。
在上面的例子中，OMEGA网站中只包含必要的东西：措辞设置、下拉菜单以及返回页首的OMEGA Logo图标。这样就险些将浏览者全部的把稳集中在产品的Hero图像上。
无论什么类型的网站，极简主义设计都能在视觉上增加网站专业成熟的味道。但从更实际的层面来说，精简冗余减少加载韶光，提高可读性，创建让用户一看便知的交互界面。并且，更少的设计元素让相应设计变得更加随意马虎。
1.利用淡出或下拉式的形式隐蔽导航菜单可以腾出更多空间。
2.运用不同程度的对称性设计让仅有的元素变得更具设计效果。如果想将某个元素独立突显出来，如一张大产品图中的一小段笔墨，考虑不对称性设计。
3.如果想将重点放在内容上，极简主义网站考虑采取Hero图像和***背景，这样可以减少UI元素分散用户对内容的把稳力。
