設計網站版面最重要的一環

好的設計帶你上天堂,這句耳熟能詳的話大家應該都會背了。但我們都很清楚,「設計」真的是很主觀的,每個人對美的定義都不同,透過網站視覺所接收到的訊息也不同。但撇開一些極端的例子不談,設計還是有所謂的「安全範圍」,而這個安全範圍,是可以安全到讓人點頭稱好的。

那麼,揪竟在設計「安全範圍」的網站時,該把握哪一項要素,才能讓客戶點頭稱好呢?

那項要素,就叫做「整體的質感」。

同樣撇開有天分的設計師不談,每個人可以駕馭的風格都不太一樣,比如玩遊戲你選擇了元素師職業,也會有擅長與不擅長的元素,而決定你要轉職風火水雷哪一個元素。對設計師來說這也是一樣的道理,「色彩繽紛的」、「復古的」、「簡潔的」、「炫麗的」、「扁平的」、「立體的」….,我相信不是每個設計師都擅長所有的網站風格。但即使如此,依然要注重「整體的質感」。

只要設計網站時,質感抓到了,即使物件排列些微詭異、色彩運用些微不妥,也不會第一眼就被別人打槍。因為設計師交稿一定是先給 JPEG 檔案,業主第一眼一定是先看縮圖的整體視覺,才會細看裡面的配置,整體性有了、質感有了,剩下的小調整隻要在容許範圍內,都可稱得上是好的合作模式。

所以建議設計師,在設計網站時,除了過度專注在某一區塊的微調時,也請時不時的「ctrl + 0」一下,看看整體的版面風格,是否有過於跳 tone,或是粗糙的地方。因為唯有綜觀全局,你才能發現配色、細緻度、以及物件之間的連結性,是否有需要修正的地方。

我在逛網站特別注重整體質感以及細節的精緻度,當我看到一個平凡,沒質感又不精緻的網站,實在讓我沒有動力瀏覽下去。如果你跟我一樣有這種詭異的毛病,歡迎與我分享你覺得好看的網站,大家一起讓眼睛吃冰淇淋 😀

Dribbble 所賜,許多厲害的設計師會將他們的作品放在上面供人膜拜欣賞;要找出我覺得很醜的網站、非常多,但我心臟沒那麼大顆,不敢明目張膽的秀出來,所以只好反其道而行,放上我覺得有「整體質感」的網站給大家欣賞 (多來自 Dribbble) 。


1. Slate – Eduardo Santos

適當的留白與簡單的風格,還有重點突出的配色,不會讓人覺得很突兀,而且黑白的 Flat design,是非常安全的質感色。

圖片來源: Slate – Eduardo Santos


2. Blog Design – Mani

當然,不一定只有黑白灰才能做出質感,暗色背景與淺灰的搭配,還有按鈕的精緻度也很重要。而精緻這件事情,並不是要你做的多複雜、多花俏,簡單的線條也可能做到精緻的效果,當然這就要看個人的設計功力了。

圖片來源: Blog Design – Mani


3. Google+ Grid – Haraldur Thorleifsson

只要顏色運用得當,色彩繽紛的風格也不會給人雜亂的感覺,反而會覺得很豐富;另外區塊愈大、色彩愈多,留白也變得相對重要。色彩是門學問,以這個網站縮圖的例子來說,即使他用的顏色很多,主要還是繞著紅、綠、藍、黃這四種配色,如果不會掌握明度與彩度, Dribbble 的設計都有提供色碼,可以多多參考運用。

圖片來源: Google+ Grid – Haraldur Thorleifsson


4. Hypo

官方網站要做的有質感,商攝也是重要的因素之一。選出好看的照片做搭配,可以讓網站風格大加分,搭配像木頭架子這樣故事性強烈的畫面,是不是非常賞心悅目又不突兀呢。官方網站有時需要嚴謹的作風因此不能太跳 tone,但是設計師如果可以搭配官方產品做出不一樣的巧思,一定可以讓業主感受到用心。畢竟天下模板一大抄,別人無法複製的卻是你的用心與創意。

圖片來源: Hypo


最後附上我私藏多年的個人網站 🙂

5. PEPPER

誰說十年前的個人網站就不能有質感? PEPPER 是個人網站盛行的時候,我非常喜歡的一個素材網站,撇開當時的環境盛行用 table 排版不談,網站很有主題性,風格也一致,手繪的向量 icon 同樣很精緻,這就像我前面提到的,誰說一定要複雜才叫精緻?簡單俐落的線條也可以呈現出質感。

圖片來源: PEPPER


其他像是復古風、絢麗風…等等的網站,其實概念大同小異。我覺得優質的設計一定要包含:
1. 適當的間距與留白
2. 細緻的物件與元素 (再次強調。簡單的線條也可以呈現細緻感)
3. 細節 (例如區塊的陰影是否會讓畫面有骯髒的感覺,還有按鈕和文字間的比例…等等)
4. 整體的質感

設計是一項值得尊敬的專業,也是一門高深的學問。我絕對不敢說自己會設計,但我期望朝著自己心中優質的設計之路邁進,也希望每個設計師的心中,也有一條自己的優質設計路,用模板也許可以快速地做出一個網站,但事後想想,你真的能自豪地說這是你的設計嗎?

設計也需要設計師的用心與巧思,你可以選擇做出一個很安全的版面讓業主點頭過關,但如果可以在這安全的層面上,加上多一點的質感,我想不僅業主滿意,設計師也會有成就感,這才是工作上的雙贏 :)。


  • 小吳

    muki大大說的對耶!
    我想我的網站應該很醜吧!
    在這裡:http://doraemon32.byethost12.com/