“十年之前…我不認識你,你不屬于我,我們還是一樣…….?”喔,離題了,今天我們要來簡單談談網站設計世界的“十年”。
從網際網絡普遍以來,網絡平臺幾乎已是各大企業、公司等許多組織行號與團體必備的訊息傳遞或營銷推廣工具。
回顧十年甚至更久前的網絡環境,由于網路頻寬與設計語言上的限制,傳統網站設計常使用 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介面可以發現,這種簡約的扁平化設計已成趨勢,扁平化并不只是盲目地去除各種擬真的視覺效果,而是一種少即是多的設計精神體現。少了過度花俏的裝飾效果,卻能帶給我們更加清晰與直覺的使用體驗。