文 / 西乔

19年前,世界上第一个网页诞生,它没有设计可言,由文本和url组成,样式只有最基本的<h1> <p>。 而如今,Web设计已经成长为独立而庞大的设计门类,一个网页的创造需要多个工种、多种技术的参与,其流程的复杂性和挑战性已经超过任何传统设计类别。

这19年间,网站拥有者越来越清楚自己的目标,而设计师们也越来越理性和专注,人们在不停寻求商业诉求、用户、审美和技术上的平衡点。每一年过去,都有无数过时的风格、特征元素以及实现技术被抛于身后。

设计风潮体现着一个时期内人们对特定的风格、趣味、审美、技术乃至理念等各种模型或特征的追随。新技术的发展、媒介载体的占有量的变化、新网站类型的诞生、全球的设计思潮的影响、行业领军者的转变、明星设计师个体的亮点,这些因素都在推动潮流的变化。你可以回想一下那些曾经风靡一时的模式:复古的像素样式;Google的朴素之风;韩式清新插画风;Flashsite的兴起带来的不规则布局和动画的滥用;Apple引发的对质感的追求;用户和情境意识的觉醒;对细节的关注——圆角和阴影的广泛运用;Web2.0设计风潮中典型的配色和特征元素;空间与层次感的魔术……

[/caption]

[/caption] 潮流的涌现,是社会一致化与个体差异化的碰撞,每一次碰撞都推动着这个行业的进步。

让我们来看看这些发生中的变化:

简洁,精简,极简

极简主义(Minimalism )在这一年大热。原因有4点:

1. 手持便携设备的占有量逐步上升,人们的访问方式发生了改变,小尺寸屏幕所需的精简之道反过来影响了整体的设计趋势。

2. Apple公司简洁、专注、充满诱惑力的设计哲学重领潮流,效仿者众多。

3. 来自全球设计思潮的影响:极简、禅意、人文、空间感的“日式风格”这两年在出版界、时装设计、包装设计、工业设计界都颇受追捧。

4. 网站的专业性和针对性在进一步加强,人们选择一个网站一次把一件事做好、做到极致,而非盲目扩张。这也使“精简”拥有更大的实现空间。

极简主义体现设计师对意图、受众、情境的强大控制力。不是简单的做减法就可以了,如果不能很好地把握取舍的宗旨与理由,一个为了极简效果而精简的页面可能看起来庸俗不堪,是为“做作”的留白 。

操刀这一风格需要对作品有充分的自信和理解力,更重视细节和布局,把握恰当的对比、强调。

[/caption]

[/caption] 极简主义的风潮中,还涌现了许多单页网站。所有内容都放在一个页面上呈现,通过分屏来巧妙地布置格局,不再有跳转和复杂的站点结构,一目了然。

更有人情味与趣味的设计

运营上的专注使得设计师们可以在设计中投入更多的感情,更有针对性地取悦受众。从保守、冷漠、功利的陈旧风貌中,涌现出更多富有生命力和趣味的产品。

[/caption] 这一变化出现的原因:

1. 是具有针对性的中小型服务和应用类网站大批涌现。

2. 是来自示范者的力量。

3. 是多元化的必然趋向。

4. 是在功能性、规范性和用户体验之外,设计师开始寻找那些从未出现过的、能更深层次打动用户的东西——“一种在感情上赢得人们喜爱的东西”。

[/caption] [caption id="attachment_3504" align="aligncenter" width="300" caption="曾经很不常见的高饱和度的配色,这种充满动感和生命力的高调设计让人充满惊喜。"]

[/caption]

对传统设计的借鉴

Web设计这个年轻的分支在自我生长的同时,也在不停向传统设计汲取营养。在布局与版式方面,设计师们一直在探寻更好的表现手法,所以尝试从传统的设计媒介中寻求灵感。杂志版式布局( Magazine-style Layouts)的从2009年就开始大热,不光大型新闻网纷纷求变,杂志版式布局的Wordpress Themes 也炙手可热。 这一变化对传统设计不仅仅是形式上的追随,更重要的是尝试去借鉴与融合的态度。

[/caption]

由比较可见,国外的大容量信息网站的趋势是降低首页的信息密度,把内容分摊到二级频道;版式上更具引导性、更适于阅读,浏览方式像读报一样更流畅随意。由于广告盈利价值的差别,国内这类网站还是使用信息密度极高的索引模式,所以看起来更像说一份导流量的“黄页”而非可随心阅读的媒体。在信息呈现密度与模式无法改变的情况下,照搬国外的版式布局是非常危险的。

除了在样式上的借鉴,传统版式设计上的许多经典的实现手法也移植了过来,最著名的就是黄金比例和栅格系统(Grid System)。栅格系统的历史有300多年,运用严谨的几何网格来指导和规范元件的分布排列。将传统栅格移植为适合网页设计的系统,不光是创造了一种工具,也产生了一种普遍的审美规范与倾向。无论你是选择遵循规范还是打破规范,都是对它的推动。

[caption id="attachment_3509" align="aligncenter" width="300" caption="960px宽的网页栅格系统"]

[/caption]

个体风格带来的变化

谁才代表着趋势?有人认为设计师们所追捧的变化代表了潮流,有人认为Top100的大站才是大势所趋。狡猾一点说,两个说法都不确切,网站运营的Top100并不代表设计上的Top100,出于多种原因,很可能它们是最保守的阵营。但你无法忽略它们对用户/客户的审美及视觉习惯造成的影响。而设计师们虽然愿意挑战和尝试变化,但在面对个人化设计和商业设计时,他们的取舍却往往不尽相同。

巨头和个体们在设计风格一直在互相影响和渗透。所以你永远不应该轻视那些看起来“个人化”和“小众”的创新设计。观察它们的最好舞台就是设计师的blog和profile站。

下面这几点都是从现在小众网站上流行,慢慢被许多普通大众网站设计所趋向的特征。

[/caption]

更大header区,更醒目的logo和标识,字号更大的标题。

在背景中使用恰当地纹理。十几年前,在美化手法贫乏的年代,人们也喜欢在背景中使用纹理,但大多只取得了浮华嘈杂的效果。现在的设计师们学会了理性而低调的使用纹理来制造风格、提升品质和烘托气氛。

[/caption]

把Footer区利用起来:

更注重品质,更能抓住用户眼睛的设计

这点变化在和消费挂钩的网站上非常明显。设计师们注重对设计心理学和视觉传达的技巧的运用,使用强调和对比的策略来引导用户的视觉焦点。更醒目的标题、高质量的图片,使用Slideshow来创造更多展现空间,这些手法都在强调那些希望得到用户关注的地方。

Apple网站的专业、直接、有效的界面设计,不光打动了消费者的心,也吸引了众多开发者的效仿,大量App应用网站都以使用Apple风格为荣。

……(完整文章请关注07期杂志)

作者简介:

西乔,《神秘的程序员们》漫画作者,Magicome公司创始人。新近创建designlol.net全球设计精华分享站,向中文用户分享英文专业设计blog的精华文章。现居上海,从业经验5年,担任过Web设计师、项目经理、产品顾问等职位。

(本文来自《程序员》杂志10年07期,更多精彩内容敬请关注07期杂志)

《程序员》7月刊精彩内容预告:http://www.programmer.com.cn/3484/

世界Web设计最新潮流相关推荐

  1. html5毕业论文题目,web设计论文选题推荐 web设计专业论文题目怎么拟

    精选了[100道]关于web设计论文选题推荐供您后续的写作参考,在写web设计论文之前,很多大学生总是被web设计专业论文题目怎么拟难倒怎么办?请阅读本文! 一.比较好写的web设计论文题目: 1.响 ...

  2. [转] WEB设计趋势与潮流

    原载于 <程序员>杂志2010年第7期. 作者:西乔 原文永久链接: http://blog.xiqiao.info/2010/07/19/719 19年前,世界上第一个网页诞生,它没有设 ...

  3. WEB前端之网页设计③----最新最全详解/如何在网页上创建表格

    WEB前端之网页设计③--最新最全详解/如何在网页上创建表格 一.表格效果图1: <table border="0px" cellspacing="1px" ...

  4. Web 设计中的 5 个最具争议性的话题

    在 Web 空前繁荣的今天,有关 Web 设计中的各种观点很多会成为话题,有的很快达成一致,有的则一直争议下去,本文讲述 Web 设计中的 5 大经典争议,这些争议从它们诞生的那天起,就被正反两方争得 ...

  5. web编程开发_Web编程简介(Web设计和Web开发)

    web编程开发 为什么要进行网站开发? (Why web development?) The most important reason of why one should learn web dev ...

  6. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

  7. 50种响应式web设计的奇妙工具

    在您开始着手响应式站点的搭建之前,如果能拥有强有力的开发工具会让您的世界另有一番风采.本文中Denise Javobs和Peter Gasston推荐了50种强大的工具来支持您建造响应式站点的过程. ...

  8. 2012年Web设计和开发的15个趋势

    Craig Grannell访问了行业的精英们关于2012年Web设计和开发的趋势. 2012看来注定是有趣的一年.经济的下滑继续广泛地打击行业,看不到结束的尽头.政府极力审查网络,否认公民的基本权利 ...

  9. 无懈可击的web设计

    在现实世界中,防弹衣并不能100%保证您不受伤害,但人们总是在不断地争取提升其防弹性能.毕竟,穿了防弹衣总是比不穿好. 这样的规则同样适用于Web设计.通过增加网页的灵活性,以及采用必要的步骤来保证它 ...

最新文章

  1. Hibernate事务处理
  2. 学会订阅——什么是feed ?如何订阅feed?
  3. Jenkins Android gradle只能打包app-release-unsigned.apk
  4. java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
  5. python代码写完怎么运行-Python 项目代码写完了,然后怎么打包和发布?
  6. 用matlab建立控制系统的数学模型,第二章控制系统的数学模型.ppt
  7. 【sas proc sql】group by
  8. python 行为驱动_什么是行为驱动的Python?
  9. Windows2003系统无法运行CS游戏的解决方案
  10. c语言数码管按下k1显示1,单片机C语言程序的设计实训100例_基于8051+PROTEUS仿真1.docx...
  11. DEVC++中的 “万能头文件” <bits/stdc++.h>
  12. linux命令查看系统日期,Linux系统查看当前时间的命令
  13. 使用SDKMAN来安装JDK和管理多个JDK版本
  14. 7.3 使用“设计视图”创建报表
  15. Kettle连接Hadoop clusters 报错
  16. Linux下Bluetooth编程
  17. 谷歌ai人工智能叫什么_谷歌正在通过AI策展和内置订阅全面革新Google新闻
  18. BackupPC - 恢复选项Restore options
  19. 程序人生:面试字节跳动Java工程师该怎么准备?挑战大厂重燃激情!
  20. 华为云通用计算增强型C6到底怎么样?

热门文章

  1. 秒懂Java类型(Type)系统
  2. GBase 8c 函数和操作符 - 类型转换函数 之 类型转换函数
  3. python爬虫之scrapy框架
  4. WinCE平台的C#程序中调用MessageBeep发出一些系统自带的声音,而不用使用playsound
  5. word tab 支持 word 2010
  6. 【Java】_3.方法
  7. MAD,现代安卓开发技术:Android 领域开发方式的重大变革~
  8. oracle dba常用命令
  9. 苹果14键盘遮挡fixed定位的输入框等元素
  10. PICT中文乱码问题