“十年之前…我不認識你,你不屬于我,我們還是一樣…….?”喔,離題了,今天我們要來(lái)簡(jiǎn)單談?wù)?span style="COLOR: #000000">網(wǎng)站設計世界的“十年”。
從網(wǎng)際網(wǎng)絡(luò )普遍以來(lái),網(wǎng)絡(luò )平臺幾乎已是各大企業(yè)、公司等許多組織行號與團體必備的訊息傳遞或營(yíng)銷(xiāo)推廣工具。
回顧十年甚至更久前的網(wǎng)絡(luò )環(huán)境,由于網(wǎng)路頻寬與設計語(yǔ)言上的限制,傳統網(wǎng)站設計常使用 html 的 table 表格來(lái)建構網(wǎng)頁(yè),網(wǎng)站尺寸設計亦侷限于1024X768甚至800×600這樣的尺寸內,也不能使用解析度太大的網(wǎng)頁(yè)圖片,透明圖檔也以gif的使用為主。接下來(lái)由于flash的流行與炫麗的動(dòng)態(tài)效果,越來(lái)越多網(wǎng)站設計也使用起 Flash 與 Action 來(lái)搭配制作,至今也仍有相當多的網(wǎng)站還搭配著(zhù)Flash呈現網(wǎng)站。
時(shí)間拉回2016年的現在,網(wǎng)絡(luò )頻寬與電腦硬體設備不斷提升,人人透過(guò)各種高分辨率屏幕、智能型手機、平板電腦等瀏覽網(wǎng)站,移動(dòng)平臺不再支持FLASH,主流的網(wǎng)站設計語(yǔ)言與規范轉為 CSS3 + HTML5 ,成為現在網(wǎng)站設計的標準,F代的網(wǎng)站設計風(fēng)格與趨勢也轉為以下幾點(diǎn):
一、響應/自適應式網(wǎng)站設計(Responsive design)
由于瀏覽網(wǎng)頁(yè)的平臺不再僅限于電腦屏幕(即便是電腦屏幕,使用者也可能使用著(zhù)不同的分辨率),更有平板電腦、智能手機等,如果用固定寬高制作網(wǎng)站,則在不同平臺上瀏覽網(wǎng)站將出現版面太小或太大等版面浪費或不足的問(wèn)題,因此,能針對不同平臺做調整的自適應式網(wǎng)站設計是近年的重點(diǎn)之一。
二、垂直式網(wǎng)站瀏覽
常常在逛國內外各大網(wǎng)站時(shí)一定會(huì )發(fā)現,越來(lái)越多網(wǎng)頁(yè)的內容呈現方式常常是一長(cháng)串的瀑布式垂直內容(但會(huì )分成數個(gè)段落),如APPLE的官方網(wǎng)站這般的呈現方式,也許有人不喜歡在同一個(gè)頁(yè)面捲動(dòng)多次,但其實(shí)透過(guò)適當的編排與設計,整個(gè)網(wǎng)頁(yè)的瀏覽動(dòng)線(xiàn)與使用其實(shí)是會(huì )相當流暢的,在手機與平板電腦上也能以相當直覺(jué)的垂直滑動(dòng)來(lái)瀏覽頁(yè)面。
三、大型按鈕設計
大型按鈕的設計,具有兩個(gè)主要的目的。*先,在瀏覽網(wǎng)站時(shí),常會(huì )提示你透過(guò)按下按鈕前往新頁(yè)面,或者進(jìn)行購物的動(dòng)作,夠大的按鈕可以顯示出其重要度,能讓人快速注目到透過(guò)大小不同的對比,制造重點(diǎn)上的落差,讓使用更直覺(jué)。另一方面,這樣的按鈕設計,也能方便各種觸控式屏幕平臺的瀏覽與操作。
四、圖層視差滾動(dòng)設計
運用圖層做視差設計,在2D動(dòng)畫(huà)世界中塬本就是一個(gè)相當常見(jiàn)且重要的模擬景深與空間感的技巧。將前后兩張(以上)圖層以不同的移動(dòng)速度作呈現,在頁(yè)面滾動(dòng)時(shí)可以造成不錯的空間效果,從FLASH開(kāi)始流行后便有許多網(wǎng)站運用這種技巧,現在則轉以CSS3 + HTML5來(lái)建構。
唯一需要注意的是,這樣的效果雖然相當酷炫,但過(guò)度運用卻是可能造成瀏覽上的疲憊與分心。視差滾動(dòng)設計案例:Ben the Bodyguar、activatedrinks
五、社群整合
近年來(lái)如Facebook、Twitter社群網(wǎng)站的崛起,改變了相當多人的生活與社交習慣,將網(wǎng)站與透過(guò)與社群網(wǎng)站間的結合,一來(lái)可以做訊息的傳播,也可以吸引更多人瀏覽與互動(dòng)。
六、網(wǎng)絡(luò )字型的運用
字型的運用在網(wǎng)站的視覺(jué)設計上是相當重要的一環(huán),原本傳統HTML制作的網(wǎng)站,一般而言都是使用預設的字型,顯得不夠有特色而無(wú)趣,如要用特殊字型,只能使用圖檔的方式,相當不便且耗資源,而網(wǎng)絡(luò )字型的發(fā)展與運用,能使網(wǎng)頁(yè)更富變化,進(jìn)而提升瀏覽的使用經(jīng)驗與趣味效果。
七、扁平化設計─Less is more簡(jiǎn)約風(fēng)格
過(guò)去在各種網(wǎng)站設計、智慧型手機等介面上,常見(jiàn)許多花俏炫目的美術(shù)與介面設計,然而過(guò)度裝飾與追求擬真之下,其實(shí)會(huì )減損資訊的傳遞與使用的經(jīng)驗。從Window8與蘋(píng)果*新的iOS7介面可以發(fā)現,這種簡(jiǎn)約的扁平化設計已成趨勢,扁平化并不只是盲目地去除各種擬真的視覺(jué)效果,而是一種少即是多的設計精神體現。少了過(guò)度花俏的裝飾效果,卻能帶給我們更加清晰與直覺(jué)的使用體驗。