网站设计十年间的变化及2016年网站设计的趋势
2016年 / 02月18日
“十年之前…我不认识你,你不属于我,我们还是一样…….?”喔,离题了,今天我们要来简单谈谈网站设计世界的“十年”。
从网际网络普遍以来,网络平台几乎已是各大企业、公司等许多组织行号与团体必备的讯息传递或营销推广工具。
回顾十年甚至更久前的网络环境,由于网路频宽与设计语言上的限制,传统网站设计常使用 html 的 table 表格来建构网页,网站尺寸设计亦侷限于1024X768甚至800×600这样的尺寸内,也不能使用解析度太大的网页图片,透明图档也以gif的使用为主。接下来由于flash的流行与炫丽的动态效果,越来越多网站设计也使用起 Flash 与 Action 来搭配制作,至今也仍有相当多的网站还搭配着Flash呈现网站。
时间拉回2016年的现在,网络频宽与电脑硬体设备不断提升,人人透过各种高分辨率屏幕、智能型手机、平板电脑等浏览网站,移动平台不再支持FLASH,主流的网站设计语言与规范转为 CSS3 + HTML5 ,成为现在网站设计的标准。现代的网站设计风格与趋势也转为以下几点:
一、响应/自适应式网站设计(Responsive
design)
二、垂直式网站浏览
常常在逛国内外各大网站时一定会发现,越来越多网页的内容呈现方式常常是一长串的瀑布式垂直内容(但会分成数个段落),如APPLE的官方网站这般的呈现方式,也许有人不喜欢在同一个页面捲动多次,但其实透过适当的编排与设计,整个网页的浏览动线与使用其实是会相当流畅的,在手机与平板电脑上也能以相当直觉的垂直滑动来浏览页面。
三、大型按钮设计
大型按钮的设计,具有两个主要的目的。首先,在浏览网站时,常会提示你透过按下按钮前往新页面,或者进行购物的动作,够大的按钮可以显示出其重要度,能让人快速注目到透过大小不同的对比,制造重点上的落差,让使用更直觉。另一方面,这样的按钮设计,也能方便各种触控式屏幕平台的浏览与操作。
四、图层视差滚动设计
运用图层做视差设计,在2D动画世界中塬本就是一个相当常见且重要的模拟景深与空间感的技巧。将前后两张(以上)图层以不同的移动速度作呈现,在页面滚动时可以造成不错的空间效果,从FLASH开始流行后便有许多网站运用这种技巧,现在则转以CSS3 + HTML5来建构。
唯一需要注意的是,这样的效果虽然相当酷炫,但过度运用却是可能造成浏览上的疲惫与分心。视差滚动设计案例:Ben the Bodyguar、activatedrinks
五、社群整合
近年来如Facebook、Twitter社群网站的崛起,改变了相当多人的生活与社交习惯,将网站与透过与社群网站间的结合,一来可以做讯息的传播,也可以吸引更多人浏览与互动。
六、网络字型的运用
字型的运用在网站的视觉设计上是相当重要的一环,原本传统HTML制作的网站,一般而言都是使用预设的字型,显得不够有特色而无趣,如要用特殊字型,只能使用图档的方式,相当不便且耗资源,而网络字型的发展与运用,能使网页更富变化,进而提升浏览的使用经验与趣味效果。
七、扁平化设计─Less is
more简约风格
过去在各种网站设计、智慧型手机等介面上,常见许多花俏炫目的美术与介面设计,然而过度装饰与追求拟真之下,其实会减损资讯的传递与使用的经验。从Window8与苹果最新的iOS7介面可以发现,这种简约的扁平化设计已成趋势,扁平化并不只是盲目地去除各种拟真的视觉效果,而是一种少即是多的设计精神体现。少了过度花俏的装饰效果,却能带给我们更加清晰与直觉的使用体验。