预计阅读时间 12 分钟
推荐转发朋友圈并收藏
慢慢品读
2017年即将过去，我们见证了设计领域蓬勃的发展。
作为数字媒介，网页设计一向比传统平面类设计更容易感触到科技进步带来的影响：移动端的重要性进一步加大、可变字体的兴起与运用、冲破禁锢的CSS Grids布局等。
技术的升级给设计工作带来了更多的可能性，如何利用新技术为设计服务，则是所有设计师都在思考并尝试的课题。
在此，我们总结选取10个可能的2018年网页设计趋势，无论是跟随还是抵制，我们的创意都不可避免的与这些趋势关联起来。
对于web页面来说，页面顶部一直是SEO的关键元素，有助于读者快速浏览时找到信息。展望2018，通过独特的字体设计，创造出大幅且极具表现力的页面顶部将成为主流。选用更粗更大的字体、无衬线与有衬线字体的对比、都将有效提升用户体验，吸引访客浏览。
举栗子：
Nurture Digital
Femme Fatale Studio
固定的导航栏在优先考虑转化率或者有下拉菜单的网站中是一个重点，让用户随时实现导航控制将简化网站操作步骤，优化网站体验。最近，将视觉把导航从其它网站设计中分离出来，并将其下移是流行的趋势，毫无疑问，这加强了导航是全局对象的感觉。
Reseau
最直观的方法是在导航栏中添加阴影，并将其从网站最顶端稍稍下移，如Reseau的网站所示。当然扁平化的设计也是一种选择，如Anchor＆Orbit所示。
Anchor＆Orbit
尽管阴影早已成为网页设计的重要部分，但随着Web浏览器技术的发展，阴影又有了新的变化。通过网格和视差布局（parallax layouts），网页设计师利用大面积的靓丽阴影，来创造出一种具有真实世界般视觉的深度。这是对过去几年流行的扁平化设计趋势的直接反应。
algolia
当我们为设计添加阴影的时候，建议先将网页想象成一个房间：黑暗而冷峻的阴影展现的是单一光源的黑暗房间；柔和而多彩的阴影则是一个充满散射光的房间。而对用户来说，最舒适的房间是光线充足的房间，因为我们日常使用电脑时也是这样的环境。除非故意避开舒适区，以达到某种特殊效果，否则应将阴影的不透明度调低。
Clearbit
ATOLYE15
使用柔和细致的阴影作为悬停状态(hover states)来展示链接并不是新的想法，但是像下面的例子那样将它们与鲜亮颜色的渐变结合起来，可以增强阴影的3D效果。
ScaleAPI
渐变在2017年完成大翻盘，新的一年这个趋势也将继续下去。上一次渐变流行时，主要以精致的阴影形式来表现3D效果（比如IOS早期的图标）。
如今，渐变则是以大面积、高饱和度的色彩出现，越来越多的设计师自愿抛弃“配色安全区”，开始尝试鲜艳的，甚至对比强烈的色彩，过饱和的明亮色调更快的吸引了访问者的注意。
Spotify
最近最流行的典型表现就是照片上的渐变滤镜，这是让一张平淡图片快速变得抓眼的最佳方法。如果你没有任何图片可以拿来用，一个简单的渐变背景同样可以让你完美的跟上时代潮流。
Adobe
Web和移动端设计中，尖锐和直角式卡片式界面UI是近几年的常态，这似乎成了现代网页设计的标配。
从2017年起，这种情况发生了很大的变化，现在从google到facebook，从输入框到个人头像等方面，都已经被更加圆润的线条近乎野蛮的占领。用斜线(slashes)和硬角(hard angles)重新构思，或者仅仅将线扭转出不同角度，亦或者将曲线和球状结合这种简单方式来探寻更自然的曲线（organic curves），无论哪种形式，都意味着原有规则的打破，新的一年我们将见证更多有冲击力的设计。
GLAX
CDU
2018年继续走高的是不对称和非传统的“碎片化”布局。当然这并不意味着抛弃网格概念，而是它允许图像和文本元素“穿越”作为分割的固定参看线，甚至是界面。文字和图片的重叠交错，往往能带来意想不到的美感。
Veintidos Grados
matthew-galloway
同时感谢CSS网格中出现的新选项给这些设计增加了更多的可能性。
nike
无论是粒子背景，令人惊喜的滚动，或是有趣的页面切换，更加普及的交互和动画是2018年网站设计中的重头戏。这些都将提升访问者在页面浏览时的整体体验，也在引导视觉焦点时起到了重要作用。
轻量级的JavaScript动画，是网站运行视频背景时性能问题很好的解决方案，它有效的减少了动画元素作为背景被生成的加载时间。
Heco
HeyStack.is
而交互动效，例如动图可以在页面加载时激励用户，或者在连接上向用户展示有趣的悬停状态。微交互（micro-interaction）是帮助用户代入网页故事的好工具。
就像Anna Eswood网站一样，照片在你鼠标滚动前，都是静止的待在页面上，而当你滚动后，它会突然以更快一点的滚动速度收上去。这样的方式，给简洁单色的照片以及他们原本严肃的模式带来了一些好玩的感觉。
Anna Eswood
又或者像designbetter网站一样，更加系统性的页面转换，让访客更加深刻的体会到品牌调性，你并不是被导航到了另一个页面，而是滑到了另一个视觉景象中。让网站更具有深度和整体感。
designbetter
Nutrition app design by Masum R.
如今移动端的设计已经比较成熟，“汉堡包”等大量的icon在小屏幕上更为适用，而且用户已经形成使用习惯。隐藏式菜单、简化icon的线条，节约空间，美化画面的做法仍然是对移动端设计最好的总结。
虽然material design总有一股要凉了的味道，但材质化的设计取代扁平化似乎是大趋势，有阴影的icon、卡片式模块，手势交互，不仅让元素看起来更有互动性，而且更多了一份人情味。
视频相对平面类内容，信息量有质的提升，与此同时，直播平台和短视频的兴起，让视频的重要性大大提升。另外，视频展示的CPMs（千人成本）要比静态展示小得多，这也是众多以平面为主的新闻门户网站头疼的事。甚至有种说法，平面广告将逐渐消失。
其实大家不必过分担心，文字有其固有的优势，它的生产成本低、生产速度快，至今仍然是网络上大多数信息传达的主要格式。
我们早已习惯了图片与文字模板化搭配的信息格式，在CMS（内容管理系统）中完成几百字的图文编辑是轻量且简易的操作。然而我们已经看到了很多设计师“没事找事”，打碎传统的编辑框架，用视频、声音、图标等多维度来叙事，以期打造独特的观看体验。这将是2018年依旧红火且足够抓人眼球的表现形式。
CNN
推荐点击链接，更身临其境的体验：http://edition.cnn.com/interactive/2017/11/world/greenland-global-warning/
这些更为多样化的长格式，同样可以使用碎片化网格布局或者标准分栏来进行展示，正如纽约时报页面所示。
https://www.nytimes.com/interactive/2017/10/28/world/europe/tuam-ireland-babies-children.html?_r=0
2017年，插画在网页上的大量使用是有目共睹的， 经验丰富的设计师们根据品牌调性来制作个性化的插画，无论是在配合文字，以期更清晰准确的传递网站想要表达的信息；
FlowMapp
Illustrated web page by SixDesign
还是将照片和插画结合，让画面更具有张力：
dropbox.design
插画的作用可以很强大。文字难以表述的场景，利用插画可能就直白得多。
就像是shopify Polaris网站中一样，网站中使用不带有任何暗示性的插画人类形象（而非实际的人物摄影），这使得无论什么国籍种族的人，都更容易将自己投射到这个孤独思考者的角色中去。
Shopify Polaris
在去年的设计趋势中，就有文章提出，UX writer（用户体验文案写作者）这个职位正在兴起。而在2018年，用户界面中的文字内容在网页设计中扮演着更加重要的角色。网页应用中前后不统一的文字，或者所有404的展示页面，这些细节都将瞬间打破你一直努力建立的品牌形象。
谷歌公司的在UX writing中提出的三点原则是：
- 清楚（Clear）:用没有行话术语的语言来写作，根据用户场景创造语境；
- 简洁（Concise）：语言保证高效且可以快速被理解
- 有用（Useful）：可以清晰指导下一个操作
注意动词，它是句子中最重要，最有力量的部分；注意设身处地的考虑用户的使用场景，注意之前提到的三个原则。
在遵守 UX Writing Principles的基础上，配合上品牌声音（Brand Voice），思考你产品的核心功能以及角色元素：“我的产品最特别的地方在哪里？”。并将这些特质提炼成为描述性的单词，这就是你的品牌声音。
例如Google Pay的品牌声音就是：新鲜、有同理心、平易近人（fresh，enpathetic and approachable）
Guy Ligertwood
野蛮主义（Brutalism）来自法语的单词“raw”。这种最早在建筑设计中兴起的概念特征十分明显：不断重复的元素（线条，形状）拼凑组合，虽然外形奇特但都追求严格对称。
避开所有你学习的设计知识以及优化建议，不断突破边框，大胆使用想要尝试的颜色组合，难以找到的链接入口，被覆盖半张的图片……“极端主义”中的手法被完美的放在了这里。
下面这些品牌网站，正在成为先锋：
GUCCI
Balenciaga
Weather Is Happening
Pin-Up Magazine
这确实是一种别有风味的尝试，疯狂怪诞的新事物成就了这个美丽的世界。不过反过来说，稍有差池这又会是一种新的精神污染。
总结来说，2018年的网页设计流行语可能有：“深度与广阔”、“不对称的几何学”、“野蛮主义”、“移动端”、“原创性”等。至于2018年会出现哪些有趣的设计？会不会围绕这些词语展开？我们等着瞧吧！
文章参考:
https://www.objectstyle.com/web-design/web-design-trends-2018
https://medium.com/envato/brutalism-the-ugly-web-design-trend-taking-over-the-internet-2dbc8e822e37
https://webflow.com/blog/19-web-design-trends-for-2018
https://99designs.nl/blog/trends/web-design-trends-2018/
https://uxplanet.org/ux-writing-how-to-do-it-like-google-with-this-powerful-checklist-e263cc37f5f1
http://weatherishappening.com/
参加有钱有趣设计竞赛
戳这里
