设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。使用 PS 设计网页版面,足矣?或许五年前是吧!现在的互联网多用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果您追求华而不实的设计,那么相信您很快会被时代遗弃。 2022 年不再属於单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计(responsive design)、持续联络(constant connection)和虚拟现实(virtual reality)。
作 为设计师的您,2022 年会作神马打算?真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。肤浅的赞赏易得肤浅的设计也易被遗 忘。出色的设计师犹如造梦师,给多用户创造一个梦境,让多用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素:优秀的配色,直观的设计,良好的交 互性和快的响应速度。此外,永远不要低估简约的力量。 2022 年,您的设计不但要考虑笔记本、台式电脑,还要考虑智慧手机、上网本和平板电脑等装置。您都 准备好了吗?
2022 年网页设计趋势有何变化?一起关注 11 个网页设计趋势热点:
1. 更多的 CSS3 + HTML5
这是期待已久的事情。在过去的几年设计师已经开始关注和使用 CSS3+HTML5,但在 2022 年 CSS3+HTML5 将会得到更广泛的应用。网页 设计师终会抛弃 Flash 。 Flash 不再是昔日的王者,新技术(指 CSS3+HTML5)将会取而代之。 2022 年,Flash 渐行渐远,魔术师 “HTML5” 成为舞台的主角:
当然,说 HTML5 代替 Flash 为时还早。从上面的两幅截图您可以知道 Flash 和 HTML5 还是有差距的。因此,2011 年两者会各自保持属于 自己的位置。不过 2012 年以前网页设计师滥用 Flash 的现象会慢慢减少。现在很少设计师会整个网站都是用 Flash 设计,他们会在一些可用的地方使用 HTML5 替代 Flash,使网站变得简单执行更快速。然而,目前 HTML5 还不能够取代 Flash,Flash 的某些效果 HTML5 暂时还不能够实现。
然而值得人兴奋的是 CSS3 的应用越来越广,在某些地方甚至超越 PS(Adobe 表示有鸭梨),因为利用 CSS3 来实现文字阴影、图片圆角和图片透明实在是 easy job 。如果您还不会,是时候去了解 CSS3 和 HTML5 。
2. 简单的配色方案
没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的,太不给力了。多点考虑绿、黄或者红作为您的网页主色调。当然,颜色知名保持使用 2 到 3 种。调整颜色的透明度,或许会给您意想不到的效果。比如:
只是简单的绿色,通过调节透明度设计出如此美观的 Twitter 视觉化工具。可要知道:这个网页只是用了 XHTML/CSS 和 Javascript,给力吧!
红色绝对经典,如果配色做得好给人的视觉冲击就更……。上面的网站独特的红色和易友好的文字设计让人不得不为之折服
3. 移动互联网时代的到来
智慧手机,ipad 和上网本随处可见,OMG,2022 年这个现在将会更加明显。这意味着您的设计需要考虑更多的装置。
建立适合移动装置的网站不是简单地在原有的设计去掉华丽的元素,那将会是没有灵魂的设计。尽管在原有的设计再设计一个支持移动装置网站是件痛苦的事情。幸运的是,新的技术让一切变得更简单。
在使用 CSS3 的情况下,设计移动网页方便多了。重要的是您可以修改一个 CSS 档案完成整个网站修改以符合多用户使用不同装置进行浏览网页。
您也可以设计一个移动装置专属的网站,但相信那个网站不久还是要改版的,以现在科技产品的发展速度来看。越来越多的移动网站包括原始网站的浏览选 项。如果您不提供这个选项或者您的原始网站没有针对行动网络标准优化,那您并未准备好迎接移动互联网时代的到来。据相关预测,智慧手机销量将会超越个人 PC 。赶快准备好,迎接移动装置大军的来临。
4. Parallax Scrolling
先来解释下 Parallax Scrolling,Parallax scrolling 是让多层背景以不同的速度移动,形成运动视差 3D 效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验仍然非常出色。 2011 年的网页设计趋势热点就是要创造这样的深度视觉效果。 Parallax Scrolling 可以通过一些简单的 CSS 技巧或 jQuery 外挂来实现(示范站点:站点 1 站点 2)。 Parallax scrolling 运用于网页设计的次要元素中可以起到很好的效果:如 header 、 footer 或者背景。不过知名不要运用于网站导航,那显得有点不伦不类。
Old Pulteney Row to the Pole 在网站背景使用了 Parallax Scrolling 特效,开启该网站然后往下拉即可看到效果。
5. 设计需考虑更多的触屏装置
触屏技术应用越来越广泛,触屏装置随处可见。这意味着,您的导航设计不再只是滑鼠导航,您必须要要考虑您的设计适合触屏装置。请问您的设计做到指尖导航了吗?
作为设计师,我们更喜欢滑鼠。当滑鼠悬停的时候连结会变得高亮,然而触屏没有所谓的悬停。您将会在设计中如何向触屏装置访客展示连结?
同样,如何才能做到方便您的游客仔细阅读您的网站?这可能在浏览器标准上存在争议,或者水平滚动触屏可能更加合适。将网站设计类似于杂志的布局更有利于游客浏览您的网站。
后,您必须考虑在您的网页设计中使用流体布局(liquid layouts)。 2011 年,您需要处理的重点不再是萤幕解析度问题,而是如何做到使访客从垂直到水平阅读您的网站都会清晰。您的设计必须做到灵活以应付任何的挑战。否则您将会成为过去式。
Baby sees the iPad Magic, Copyright Steve Paine, Flickr
6. 深度判析
深度判析是关于在网页设计使用维数,这样可以使您的网页变得更加真实。如果运用得恰当,那将会是一个虚拟的 3D 效果,就像 3D 电影阿凡达那样。尽管 3D 技术还没有去到网站设计,您仍然尝试使用维数进行设计。
Plántate 提供了一个可旋转的 3D 地球,灵活利用阴影和层等手段。
Jordon 活动页,3D 元素清晰简单,设计非常醒目。(貌似已经撤掉)
7. 大背景图
大背景图的网页设计应用在 2011 年将会更加明显。这些背景影象一般是高解析度,覆盖这个网站。高清照片是一个迅速抓住您的读者的好方式,可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。
当然背景图的色彩、内容等都十分讲究,任何情况下都不要破坏多用户的体验,不然再漂亮的照片也是枉然。图片型别趋向于一些比较柔和、略带透明的一类,不要影响到网站文字的阅读,讲究协调,易于阅读。
上面的网站使用了高解析度的图片作为网站的背景,网站主色调是黄色。
This site adds playful animation with its grand scale imagery. Warning: auto-play music.
8. 不拘谨于顶级域名
严格意义上这一点与网页设计无关,但这一点也是发展的趋势,将出现更多创造性的域名。.com 域名的吸引力越来越少,主要是您很难再找到一个比较短 的.com 域名。 2011 年人们开始将视线慢慢转移到.me 、.co 和.cc 等身上。想想域名的发展,抢先一步,不然您很可能再次错失先机。
.me 用在个人展品陈列页、博客是非常不错的。
另一个.me 域名的示范
9. QR: Quick Response
如果您注意现在越来越多的名片、杂志或者其他地方出现方形条形码,证明您已经看到 2011 年的这个趋势热门。但它跟网页设计何干呢?实在匪夷所思。
这个方形的条形码被称为 QR,全称为 Quick Response(在 “QR Code 读取器 QuickMark” 介绍过)。使用您的手机拍摄一张的条形码的照片,像魔术一样,手机上读取 QR 的软件就会开启条形码相关的网站。美妙的事情是您可以将 QR 应用到很多 地方。应用 QR 到您的网站,目的是让浏览者拥有一个您的移动网页的快捷方式。您还可以通过在您的网址上放置一个特殊的推介代码 QR 追踪您的访客。 哈哈,您完全可以使用 QR 作为您的头像,然后到别人的网站留言、评论。 2011 年的移动媒体优势更加凸显,而利用这点优势的网页设计是明智的选择也是将 来的发展趋势。
上面是软矿博客的 QR . 如果您也想建立一个,猛点选这里 .
10. 缩图设计(Thumbnail Design)
Google 已经向浏览多用户推出它们的浏览预览技术。过去我们只能通过点选连结才能看到网页的内容,现在您只需点选放大镜然后将滑鼠悬停在连结上就可以预览该连结的网页内容。
如果您的设计是基于 Flash,会存在这样的一个问题,预览将无法显示您的设计元素。
2011 年的一般互联网多用户变得更加精明,他们更希望看到更多人性化的导航设计。
11. 持续联络/ Life Stream
Lifestreaming, 一种线上记录个人日常活动的网络应用,包括直接通过视讯 feed 或通过聚焦一个人的网络线上内容,比如博客日志,在社会性网络上面的更新,线上相簿,聊天内容甚至只是一些喜欢的网站的连结等等。
后一点,不是不重要的一点,是网页设计更加注重人与人之间持续联络,如 Life Stream 。互联网本身是原始的,枯燥无味的,是人类通过这个开放的平台分享他们的一切才变得多姿多彩。将来人们还会而且加强如 lifestreaming 的形式进行人与人之间的交流互动。作为网页设计师,您必须了解这个趋势和应对这个趋势。
2011 年,个人博客在 Twitter feeds 更活跃(不只是连线到 Twitter 页面的连结),人们会通过 Foursquare 互相传递即时资讯,where are u and what are u doing 。毋庸置疑,2011 年将会带我们走进一个更交心的互联网时代。
个人网站,使用了 lifestreaming 。
一个商业网站,在一个页面上综合大量资讯。