十大年度网页设计趋（qū）势欣赏（shǎng）
怎么样才（cái）能让（ràng）网站看起来最潮（cháo）最（zuì）新？在适者生存的规则下，每（měi）一年都会筛选出哪（nǎ）些设计（jì）风（fēng）格是趋（qū）势指向，哪些又是（shì）过时的（de）。随着2018年即将（jiāng）结束，我们现在（zài）可以看到什么才是2015年最成功网页设（shè）计（jì）趋势，这些被定（dìng）义为年度设（shè）计风（fēng）格的（de）趋势将会强势地（dì）延伸到新的（de）一年（nián）。本期国外精品（pǐn）翻（fān）译（yì）教程就同大家分享2015年（nián）十（shí）大网页设计趋势，一起来看看：
一（yī）、长（zhǎng）滚动（dòng）页（yè）面
例子（zǐ）：Shadow
回顾2018！十大年度网页设（shè）计趋（qū）势欣（xīn）赏
随着智能手（shǒu）机的兴起，移动端浏（liú）览网页（yè）的数量已超过传统桌面端，2015年所看到的网（wǎng）页（yè）都在向小屏幕靠拢（相对桌面显示屏）。就如其他悉数在列的（de）设计趋势一（yī）样，长（zhǎng）滚动网页在响（xiǎng）应设计使（shǐ）用方面正变得越来越常见，因为（wéi）小屏（píng）幕就意味着长滚动。
在过去的设计观念中，设计师（shī）都是不想让内容缩在一起，需要拉几下才能看到（dào）全部（bù）内容，但新的研究表明用户的习惯（guàn）在（zài）改（gǎi）变，不再讨厌拉滚动条。现在，设计师和用户都意（yì）识到长滚动（dòng）的价值所在（zài）：更高的创作自由度、更强的内容故事性（xìng）、更有效的交互应用以（yǐ）及简易（yì）化的导航（如果网（wǎng）站足够小（xiǎo）的话）。
但是，长滚动也会带来一（yī）些代（dài）价，比如SEO效果弱化（huà）、加载时（shí）间变（biàn）长等。由此看来，长滚动对于（yú）移动端流（liú）量大或者（zhě）频繁更新内容的网站的应（yīng）用效果最好，而对于注重（chóng）如视频等媒体的网站的效（xiào）果就不是（shì）那么有效（xiào）。
应用技巧：
1.使用粘性导航菜单（dān）或者弹出选项菜单来提（tí）升导航效果（guǒ）。
2.长滚动和单页面网站容易（yì）让（ràng）用户不知所（suǒ）措，设置（zhì）好重（chóng）庆影视公司导航可以避免这种情况（kuàng）的出（chū）现。
3.利用视（shì）差效果和（hé）滚动触发动（dòng）画等突出长滚（gǔn）动的优势（shì）所在（zài）。
二、卡片式（shì）布局（jú）
例（lì）子：Behance
回顾（gù）2015！十大年度网页设（shè）计趋势欣（xīn）赏
图02
随着移动设备的兴起而带来的（de）实用性趋势之一是卡片（piàn）式布局。卡片式布局的优点是以干净和有组织的形（xíng）式展现丰（fēng）富的（de）内容。这样的布局让网站很好地适应（yīng）不同的浏览（lǎn）方式和不同类（lèi）型的内（nèi）容，特别（bié）是有链接到外（wài）部（bù）网站的，用户（hù）能直观地知道点（diǎn）击卡片内容带来的相关帖子。
卡片式布局可以将（jiāng）内容很好地（dì）划分（fèn）为各个（gè）小部分（fèn），而每（měi）一个小部分都（dōu）是浏览者想要（yào）知道的：题目（mù）、主（zhǔ）要插图、描述（shù）或（huò）者标签、带有收藏评论（lùn）等选项的控制面板。
卡片式布（bù）局有良好的响应设计体（tǐ）验，因为（wéi）它们的行和列都可以（yǐ）自动重新排列，适应不同的（de）屏（píng）幕尺寸。
应用技巧：
1.令整个卡（kǎ）片都可以点击，而不只是图（tú）像或者文字带有链接。根据费茨法则，重庆（qìng）动画公司这会让用户更加（jiā）容易和愿意点击进去。
2.采（cǎi）用卡片式（shì）布局时，添加动画（huà）效果，特别是悬停触发效果。小按钮颜色（sè）的变（biàn）化或者整个卡片的改变，甚至旋转或者转动效果，都可以让人对高度机构化（huà）的（de）布（bù）局感到（dào）有活力，这样新（xīn）颖设计（jì）可（kě）以让你（nǐ）的网（wǎng）站在其他卡片式布局（jú）网站脱颖而（ér）出。
3.卡片式（shì）布局的缺点在于卡片之间（jiān）的空间，对于卡片间的（de）间（jiān）隙要（yào）清晰表示好，不要（yào）让用户去猜这些是干啥用的。
三、新版扁平化设计
例子：Toyota
回顾2015！十大（dà）年度网页设计趋势（shì）欣赏
图03
在多年前，拟真（zhēn）设计曾经是现代设计趋势之一（yī），而扁平化设计则是它（tā）的（de）对立面。
然而，今天的扁平化设（shè）计已经远远超出原来设计（jì）起源。经（jīng）过全新（xīn）和微妙蜕变后的扁平化设（shè）计，提供了更多的机会来（lái）展示（shì）设计细节以及流行，Ryan Allen称之为“扁平（píng）化设计2.0版本”：鲜亮色（sè）彩和高光效果、色（sè）彩渐变与（yǔ）下落式阴影、更加有深度（dù）的细节设计。
并且最重（chóng）要的是，扁平（píng）化（huà）设（shè）计仍然保留其核心（xīn）设计风格。常见的简单细小的装饰没（méi）有丢掉（diào）。卡通化图案、易（yì）读性排版、鲜艳的颜色等设（shè）计风格都（dōu）一一保存，让人一眼（yǎn）就能明白是扁平化设计。
应用技巧：
1.幽灵按钮只需（xū）简单（dān）的线条和透（tòu）明背景，却成为扁平（píng）化（huà）设计中的（de）趋势（shì）之（zhī）一。重庆3d动画制作更（gèng）加兴庆（qìng）的是，幽灵（líng）按钮同样可以用于扁（biǎn）平化设计以为（wéi）的创（chuàng）作中（zhōng）：简单明了的样式不会转（zhuǎn）移用户对漂（piāo）亮背景的（de）关注（zhù）度，让用户的注意力都集中在最突出（chū）的图片中去。
2.扁（biǎn）平（píng）化（huà）设计采用非常简单的图（tú）案，可以（yǐ）让（ràng）网页让加载速度（dù）加快，这样的设（shè）计（jì）特点可（kě）以让响应设（shè）计做得非常到（dào）位。
3.扁平化（huà）设计与极简设计趋（qū）势（shì）的对（duì）比见本文第10条。两者都同样通过（guò）简化式设计，达（dá）到“少即（jí）多”的设计效果。
2强力动画效（xiào）果（guǒ）、Hero图片
四、强力动画（huà）效果
例子（zǐ）：Bugaboo
回顾（gù）2015！十大年度网页设计趋势（shì）欣赏
图04
运（yùn）动物体（tǐ）总能吸引到眼（yǎn）睛的（de）注意，动（dòng）画可以影响人第一眼看到的视觉效果。通过潜在的与诸如大小、颜色等传统网（wǎng）页（yè）设计方面的（de）对比，动画效果（guǒ）比其他（tā）的媒介（jiè）更能（néng）传达某种元素或者信息。
动画同时也（yě）有（yǒu）显示关联性的（de）功能。想象一下，一个窗口正在最小化（huà），然后飞（fēi）进菜（cài）单中，这个动画首先让人知道这样的（de）行为是存在的，然后用户就（jiù）知道能在哪里找到刚（gāng）才的窗口。
如下所示UXPin采用（yòng）无码（mǎ）动画编织器的飞进菜单，将这（zhè）个原理完美演绎。
回顾（gù）2015！十大（dà）年度网页设计趋势欣赏
图05
动（dòng）画最（zuì）基本的功能可以（yǐ）在沉（chén）闷（mèn）的变（biàn）化中凸显出来。一个悬（xuán）停动画比简单（dān）的颜色变化（huà）更能显示出一个链接的可（kě）点击（jī）性（xìng）。
应用技（jì）巧：
1.Web和App动画仍然可以遵循经典（diǎn）的12条迪士尼动画设计原则。
2.长滚动网页非常依赖于动画效果来创造（zào）平滑的滚（gǔn）动（dòng）效（xiào）果。做得好的（de）时候，由滚动触发的动画效果可以（yǐ）让网站极具趣味，让浏览者身临其（qí）境。
3.设计好加载动画的好处多多（duō）。其中，它们就能告诉用户大（dà）概等（děng）待的时间，并且能（néng）在等待过程中欣（xīn）赏到（dào）漂亮（liàng）的动画（huà），而不会感（gǎn）到浪费时间。
4.在背景中巧妙增加动画，可以激活整（zhěng）个页（yè）面，让画面（miàn）不再沉闷，但要（yào）注意不要（yào）做得太过。因为太多的背（bèi）景（jǐng）动（dòng）画会分散用（yòng）户对主（zhǔ）要内容的注意力，更不用说太多动画加载（zǎi）带来长时间等待。
