2015年7月28日 星期二

網頁設計這樣就對了!十招教你做出最棒的網站!

RWD響應式網頁的設計,已經成為現在做網站的基本條件之一。另外SDT小編再與大家分享十招網頁設計的概念,有了這些祕招,你也能做出最潮的時尚網站!



【第一招】圖大!還要更大!

source:http://www.borngroup.com/















自從響應式網站風行後,我們常常看到進入網站就是非常大的圖(或影片),使用者對於影像的接受度,遠遠超過贅述的文字,一張好的圖,除了能夠立馬就吸引到觀眾的目光,加深印象外,更直接替代掉廢話連篇。



【第二招】多媒體體驗

source:http://barstories.jackdaniels.com















運用Html5網頁技術,可以將多媒體置入網頁之中,讓使用者有耳目一新的感受,同時也加強互動的概念,但還是要特別注意效能表現,免得過多的效果反而讓網站不好用。



【第三招】視差效果設計

source:http://www.quoplus.com/














視差設計也是今年設計的一個風潮,將網頁瀏覽時的上下(或左右)移動,設計在視覺上和背景間的差距呈現,可以創造出更多的驚喜。例如上面的耳機網站中,就運用這樣的技巧在展現各種耳機顏色,質感非常棒!



【第四招】用動畫說故事

source:http://habitatweb.mx/















前面有提到多媒體的部分,而在新的html5設計上,也更多了"動畫"的呈現模式,將會動的元素,搭配網頁瀏覽時的文字內容,讓使用者在觀看時,更能一步步引導,深化腦內的印象度。



【第五招】扁平化設計

source:http://colinanddewi.com/















扁平化設計在APP的表現上早就已經是引領潮流的王道,而在網頁設計上,也有著相同趨勢,無論是 icon 、圖像、字體、按鈕,都已變化為簡潔的扁平設計,反而會讓使用者有一種質樸輕鬆的使用經驗。



【第六招】打破格子吧!

source:https://pixelgrade.com/demos/rosa/















source:http://www.world-of-swiss.com/

















以往的網頁設計,強調版面規劃完整、直線切版、將網頁內容一塊一塊的呈現在首頁上,但現在因應手機版的使用度越來越高,突破框架式的思考也才符合未來的設計概念,同時也更能展現網頁的特殊設計風格。




【第七招】運用拼貼

source:http://dynamit.com/































相對於突破框架式的設計,還是有許多網站的設計,是以拼貼的方式來表現,但這個拼貼,不代表就是非常規律的格子,反而是有設計風格的多樣化拼貼,如此更能展現網站圖像式的內容,吸引使用者目光。



【第八招】引導按鈕元件

source:http://humcreative.com/about/















進入一個網站最怕就是迷路,因此許多網站都將導航列(Navigation bar)放在最上方,明顯之處。不過現在也有設計人希望將這些引導的按鈕,置入在網頁之中,創造出更多的使用者互動與趣味。不過重點還是要記住:千萬不能讓使用者迷路阿!



【第九招】導入Google地圖

source:http://nitwinski.com/













Google map提供API可以串接,也讓自己網站可以多樣化的呈現與地圖相關的資訊。



【第十招】多層次呈現

source:http://necotrans.com/















利用多個圖層的相互疊壓,創造出獨特的設計風格,這種方式也比較適合資訊很多的網站,有效率的運用空間來對使用者說明所有內容。

SDT小編結語:

有了這十招的醍醐灌頂,對網頁設計或是需要規劃網站的人來說,應該是個很不錯的建議,不過就像所有的武功絕招一樣,學習每個技巧或觀念還是要能夠應用與消化,而不是硬把不適合的東西加入網站設計之中,這樣只會讓使用者覺得眼花撩亂。還是要仔細思考自己的網站對象是誰?誰來使用?目的為何?才能真正做出一個同時具備實用與設計感的好網站。



以上非翻譯文章,小編概念與原文作者並不一定完全相同
圖文參考資料來源:http://99designs.com/designer-blog/2015/01/16/top-web-design-trends-2015/

沒有留言:

張貼留言