如何設(shè)計(jì)一個(gè)好網(wǎng)站？遵守設(shè)計(jì)原則很重要

很多網(wǎng)站看起就覺(jué)得哪里不對(duì)，版型也不算差，圖片也很美，文字也寫(xiě)得不錯(cuò)，到底是哪里出了問(wèn)題？很可能是沒(méi)有依照基本設(shè)計(jì)原則，素材沒(méi)有好好配置而造成的，讓人看不清楚網(wǎng)站設(shè)計(jì)的重點(diǎn)在哪，不夠簡(jiǎn)約有力，內(nèi)容變得很不起眼，讓人無(wú)法繼續(xù)看下去，我們整理了網(wǎng)站制作的幾個(gè)基本設(shè)計(jì)原則，讓網(wǎng)站設(shè)計(jì)師可以不用再埋頭苦干而毫無(wú)成果，快速突破設(shè)計(jì)盲點(diǎn)。

網(wǎng)頁(yè)設(shè)計(jì)前的準(zhǔn)備工作

網(wǎng)站設(shè)計(jì)師最容易犯的錯(cuò)誤？

網(wǎng)站最容易犯的錯(cuò)誤就是，因?yàn)闀r(shí)間很趕，接到專(zhuān)案就開(kāi)始動(dòng)手做，在不知道網(wǎng)站目標(biāo)、對(duì)象、產(chǎn)業(yè)特性、屬性的情況下就開(kāi)始設(shè)計(jì)網(wǎng)站，你可以回想看看這些案子是不是大量的反覆修改？制作網(wǎng)站的時(shí)間特別久？因?yàn)闆](méi)有跟客戶建立共同的價(jià)值觀，以致于彼此的想法像是處在平行時(shí)空，溝通越來(lái)越不順，惡性循環(huán)下把雙方的信任感消磨殆盡。

相關(guān)內(nèi)容：成功的網(wǎng)頁(yè)設(shè)計(jì)師的18個(gè)基本技能

如何定義網(wǎng)站目標(biāo)？

「達(dá)成目標(biāo)才是網(wǎng)站建設(shè)的真正意義」，網(wǎng)頁(yè)設(shè)計(jì)前我們得先定義網(wǎng)站目標(biāo)，假設(shè)網(wǎng)站是機(jī)械產(chǎn)業(yè)的官方網(wǎng)站，我們定義網(wǎng)站是「被搜索后得到客戶咨詢」，要達(dá)成客戶咨詢這個(gè)目標(biāo)，在網(wǎng)站上必須提供于「有利于客戶研究或?qū)忛喌母鞣N資訊」，突顯企業(yè)的專(zhuān)業(yè)形象，所以網(wǎng)站需要的欄目有：公司介紹、工廠規(guī)模、專(zhuān)業(yè)技術(shù)、客戶案例、常見(jiàn)問(wèn)題…，如果還要讓網(wǎng)站具備排名能力，須加入SEO文章知識(shí)系統(tǒng)，還有全網(wǎng)站的SEO優(yōu)化架構(gòu)與策略。

相關(guān)內(nèi)容：網(wǎng)站SEO KPI是什么？5分鐘學(xué)會(huì)如何衡量SEO成效！

網(wǎng)站設(shè)計(jì)前如何搜集資料？

搜集資料的第一個(gè)對(duì)象是「客戶」，沒(méi)有一個(gè)人的意見(jiàn)會(huì)比客戶的意見(jiàn)更重要，這也是雙方價(jià)值觀校正的重要過(guò)程，可以從客戶手中得到各式各樣的網(wǎng)站資料，包含企業(yè)識(shí)別(CI)、產(chǎn)品照片、公司簡(jiǎn)介、各種型錄、網(wǎng)站受眾、產(chǎn)業(yè)型態(tài)…，可以理解產(chǎn)業(yè)程度越多越能設(shè)計(jì)出適合的網(wǎng)站，再來(lái)就是搜集各式各樣類(lèi)似產(chǎn)業(yè)的網(wǎng)站資料，匯整網(wǎng)站資料后才正式開(kāi)始設(shè)計(jì)。

不能依照自己的喜好做設(shè)計(jì)嗎？

設(shè)計(jì)師喜歡的東西不等于是好、適合的，每一次的設(shè)計(jì)都必須將自己歸零，設(shè)計(jì)是為了解決問(wèn)題，不是做自己開(kāi)心的，如果設(shè)計(jì)的網(wǎng)站無(wú)法被接受就是一個(gè)失敗的設(shè)計(jì)。很多設(shè)計(jì)公司限制了修改次數(shù)，不接受批評(píng)，不接受案主意見(jiàn)，堅(jiān)持自己的設(shè)計(jì)理念，這些都是讓設(shè)計(jì)走向極端的錯(cuò)誤方式，最棒的設(shè)計(jì)像水，可以在不同的需求容器中，將設(shè)計(jì)填滿到各種需求中，讓客戶滿意與設(shè)計(jì)品質(zhì)取得最大的平衡。

網(wǎng)站基本設(shè)計(jì)原則

搜集資料之后就正式開(kāi)始網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)有幾個(gè)基本原則，能依照這些原則去設(shè)計(jì)，網(wǎng)站基本就不會(huì)太差，像知道你設(shè)計(jì)的網(wǎng)站出了什么問(wèn)題，就要用以下幾個(gè)原則不斷檢視你的網(wǎng)站，是不是犯了這些錯(cuò)誤？設(shè)計(jì)師不清楚自己的問(wèn)題在哪，就是沒(méi)有「設(shè)計(jì)病識(shí)感」，會(huì)覺(jué)得「那是別人主觀的喜好問(wèn)題」，不會(huì)覺(jué)得是自己的設(shè)計(jì)有問(wèn)題，Design(設(shè)計(jì))這個(gè)字源自于拉丁文，有「完成計(jì)劃」的意思，如果無(wú)法完成計(jì)劃就是失敗的設(shè)計(jì)，設(shè)計(jì)基本原則已哪些呢？請(qǐng)繼續(xù)看下去。

傳達(dá)單一且明確的主題

我知道你有很多資訊想呈現(xiàn)，但過(guò)多的資訊只會(huì)讓人卻步，如果主題只有一個(gè)，那么這個(gè)網(wǎng)頁(yè)就只需要一張示意圖、一個(gè)標(biāo)題、一段說(shuō)明，單一的視覺(jué)設(shè)計(jì)有助于瀏覽者把目光專(zhuān)注放在這個(gè)主題上，如果網(wǎng)頁(yè)采用了多個(gè)設(shè)計(jì)元素，建議你要做取舍，選一個(gè)主題留下來(lái)，其他就割舍吧，把想講其他內(nèi)容放到其他網(wǎng)頁(yè)并串連。

一開(kāi)始就設(shè)定網(wǎng)站氛圍

網(wǎng)站要營(yíng)造什么氣氛是非常重要的事情，也是設(shè)計(jì)公司常常說(shuō)的「設(shè)計(jì)風(fēng)格」，風(fēng)格設(shè)定取決于很多條件，最主要的就是企業(yè)識(shí)別(CI)、產(chǎn)業(yè)特性、喜好，如果是購(gòu)物網(wǎng)站就適合豐富色彩以吸引目光，如果是傳統(tǒng)制造業(yè)就適合沉穩(wěn)專(zhuān)業(yè)氛圍，如果是家具網(wǎng)站就需要營(yíng)造溫馨氣氛。網(wǎng)站氛圍是網(wǎng)頁(yè)設(shè)計(jì)中最難以定義的事情，對(duì)氛圍的感受是主觀的。科技風(fēng)、簡(jiǎn)約風(fēng)、禪風(fēng)、立體風(fēng)、歡樂(lè)風(fēng)…，營(yíng)造風(fēng)格的設(shè)計(jì)元素有，版型配置、形狀、色彩、圖案、字體、平衡感、質(zhì)感…，有經(jīng)驗(yàn)的設(shè)計(jì)師可以快速解構(gòu)客戶想法，解構(gòu)方法有很多，其中最常見(jiàn)的就是提出各種設(shè)計(jì)案例厘清需求，但也不能客戶說(shuō)什么就做什么，這樣網(wǎng)站會(huì)像拼裝車(chē)，失去原本打動(dòng)人心的設(shè)計(jì)初衷。

精心編排網(wǎng)站內(nèi)容順序

網(wǎng)站為了因應(yīng)行動(dòng)裝置，發(fā)展了RWD網(wǎng)站設(shè)計(jì)，瀏覽網(wǎng)站都是由上而下，于是上面的第一張圖就變得非常重要，這是引起興趣的第一個(gè)視覺(jué)設(shè)計(jì)，為什么是用圖不是用字？因?yàn)榇竽X處理圖片速度比文字快，可快速提高吸引力。經(jīng)過(guò)編排的網(wǎng)站流程，可以讓瀏覽者引發(fā)興趣一路往下看完，就是一個(gè)成功的設(shè)計(jì)。

延伸閱讀：到底是RWD（響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)）好還是AWD好？

善用留白的技巧

于《留白的設(shè)計(jì)美學(xué)》一書(shū)提到，好設(shè)計(jì)的90%取決于「留白」。留白不是真的留下空白一片，留白是指留下空間，不要把每個(gè)位置布滿資訊，讓主題的圖文可以更突顯、更容易閱讀，很多網(wǎng)站設(shè)計(jì)師看到畫(huà)面有空位就想塞滿資訊，不但無(wú)法呈現(xiàn)質(zhì)感更讓閱讀產(chǎn)生障礙，留白應(yīng)用設(shè)計(jì)的地方非常多，包含：圖文間距、表格、行距、字距、圖片配置、區(qū)塊間…，適時(shí)的留白設(shè)計(jì)讓瀏覽者得以喘息、眼睛放松、更專(zhuān)注，讓主題可以聚焦。留白應(yīng)該空下多少？如何配置留白空間？是屬較高難度的設(shè)計(jì)技巧，即使很難也不要怕留白，勇于留白才能設(shè)計(jì)更具水準(zhǔn)的網(wǎng)站。

配色是網(wǎng)站的第一印象

為什么臺(tái)灣商店招牌凌亂無(wú)章，而日本、歐美的商店招牌就是有一種美感呢？問(wèn)題之一就是配色，雜亂無(wú)邏輯的招牌配色就是扼殺設(shè)計(jì)的第一個(gè)殺手。網(wǎng)站也一樣，配色是網(wǎng)站第一眼感受的東西，配色不協(xié)調(diào)馬上產(chǎn)生違合感。網(wǎng)站配色通常會(huì)延續(xù)企業(yè)識(shí)別(CI)的配色策略，如果沒(méi)有識(shí)別設(shè)計(jì)，就很需要網(wǎng)頁(yè)設(shè)計(jì)師的配色輔助，色彩學(xué)是設(shè)計(jì)師必須養(yǎng)成的能力，模仿配色是無(wú)法做出獨(dú)特配色的，色彩不是只有版面、字體、表格、線條…，還有照片、插圖、影片的選用也有配色要考慮，顏色影響網(wǎng)站氣氛甚巨，能掌握配色與用圖的設(shè)計(jì)師就已經(jīng)成功一半，如果對(duì)配色不擅長(zhǎng)，建立多利用配色工具或是色票去練習(xí)配色。

維持一致的網(wǎng)站設(shè)計(jì)風(fēng)格

網(wǎng)站設(shè)定了主題、風(fēng)格、內(nèi)容順序、頁(yè)首、頁(yè)尾之后，后面的設(shè)計(jì)必須沿用這些定義，包含色彩、形狀、質(zhì)感、圖片…等素材都必須維持一致性，讓每個(gè)設(shè)計(jì)頁(yè)都像是一家人，這跟企業(yè)識(shí)別系統(tǒng)(CIS)的邏輯是一樣的，需要有系統(tǒng)的呈現(xiàn)整體感，整體感的并不是要你把相似的東西全部放在一起，錯(cuò)誤方法：設(shè)計(jì)家具網(wǎng)站，整個(gè)網(wǎng)站放滿家具照片，看到都疲乏了，這時(shí)候是適合放上幾張有趣的插畫(huà)，放上幾張優(yōu)惠小圖，文章宣傳圖文，就能緩和類(lèi)似內(nèi)容帶來(lái)的煩膩感。

不要小看網(wǎng)站的字體選擇

網(wǎng)站字體用得好不好將會(huì)影響網(wǎng)站的「質(zhì)感」，強(qiáng)調(diào)重點(diǎn)與易讀性的網(wǎng)站，要避免使用有邊線、陰影、裝飾、逗趣、花俏、可愛(ài)、過(guò)度裝飾的字體，如果不是直接跟圖片合成的字體，要特別注意CSS字體的設(shè)定順序，英文字體要放前面中文字體放后面，因?yàn)橹形某３Ｒ呀?jīng)內(nèi)含英文字體。繁體中文網(wǎng)站常用的是微軟正黑體，簡(jiǎn)體網(wǎng)站則常用微軟雅黑體。為了讓網(wǎng)站速度與效能最佳化，還是會(huì)建議使用網(wǎng)站內(nèi)建字體，雖然不同的作業(yè)系統(tǒng)與瀏覽器會(huì)有不一樣的呈現(xiàn)，無(wú)法統(tǒng)一體驗(yàn)，但是只要擅用字體順序、文字間距與留白，一樣可以做到網(wǎng)站所需要的質(zhì)感。最后，網(wǎng)站字體不要不斷換來(lái)?yè)Q去，這會(huì)讓閱讀整體感變得很差，讓字體有整體感也是很重要的事情，善用字體變化也可以讓原本需要編排的區(qū)塊不需要多余的設(shè)計(jì)就能看出區(qū)域。

插圖讓網(wǎng)站視覺(jué)進(jìn)化

有時(shí)候文字無(wú)法精確表達(dá)的時(shí)候，需要將資訊視覺(jué)化，這時(shí)候可以設(shè)計(jì)插圖將資訊圖像化，好的插圖讓網(wǎng)站更有看頭。文章段落間插入照片或圖表，可以提高閱讀者的想像與理解，也會(huì)讓文章更活撥有趣，但千萬(wàn)不要放一堆不知所云的照片或插圖，使用毫無(wú)邏輯的素材是設(shè)計(jì)的大忌。至于是放圖片比較好還是放插畫(huà)呢？要視網(wǎng)站內(nèi)容而定。有時(shí)候也可以用手繪圖營(yíng)造網(wǎng)站氛圍，使用的照片、圖片、插畫(huà)的目的都是為了讓網(wǎng)頁(yè)更容易閱讀與理解。

拍攝網(wǎng)站的重要照片

設(shè)計(jì)原則要善用照片與插圖，但如果沒(méi)有照片呢？除了購(gòu)買(mǎi)圖庫(kù)圖片外，為了呈現(xiàn)更好的視覺(jué)效果，建議要拍攝專(zhuān)屬的照片，整個(gè)網(wǎng)站用了過(guò)多圖庫(kù)照片，除了缺乏整體感還會(huì)有不真實(shí)的感覺(jué)。照片(圖片)是網(wǎng)站素材中最重要的元素，網(wǎng)站在怎樣糟糕，有好的照片就能直接堪用，如果沒(méi)有好照片，再好的版型、配色、文案、留白、內(nèi)容順序… ，因?yàn)槠焚|(zhì)低落的照片或圖片，直接讓網(wǎng)站變成不及格，尤其是首頁(yè)形象圖。好照片可以快速營(yíng)造氣氛，可以突顯主題，有企劃拍攝的照片，內(nèi)容完整、光線充足、構(gòu)圖平衡、視角精確，簡(jiǎn)單后制就能應(yīng)用到網(wǎng)站，照片品質(zhì)不良就需要更多的后制去調(diào)整，包含校正色彩、調(diào)整色調(diào)、消除雜點(diǎn)、加強(qiáng)對(duì)比、增加曝光…，「照片是網(wǎng)站設(shè)計(jì)最大關(guān)鍵」一點(diǎn)都沒(méi)有錯(cuò)。

將影片應(yīng)用在網(wǎng)站上

有時(shí)候文字、照片、插圖、表格都無(wú)法完整表現(xiàn)要說(shuō)明的內(nèi)容，就很適合拍一段影片去呈現(xiàn)，例如：機(jī)械運(yùn)作流程、食譜料理、家具安裝方法…。網(wǎng)站可以寫(xiě)一套影音管理系統(tǒng)，也可以直接用Youtube、Vimeo崁入影音。如何拍攝影片與剪輯？如何在影片篇中加入動(dòng)畫(huà)？就又是另一個(gè)專(zhuān)業(yè)領(lǐng)域了，有機(jī)會(huì)再寫(xiě)關(guān)于影音拍攝的技巧文章，善用影片是網(wǎng)站設(shè)計(jì)基本原則之一。

網(wǎng)站設(shè)計(jì)的差異在細(xì)節(jié)

網(wǎng)站設(shè)計(jì)除了上述提到的基本設(shè)計(jì)原則以外，再來(lái)就是比較繁瑣的設(shè)計(jì)細(xì)節(jié)介紹，要從普通設(shè)計(jì)師到高階設(shè)計(jì)師，你必須重視細(xì)節(jié)，有個(gè)日系汽車(chē)廣告詞「專(zhuān)注完美，近乎苛求」網(wǎng)頁(yè)設(shè)計(jì)工作到了一個(gè)程度，設(shè)計(jì)細(xì)節(jié)好壞就是跟別人最大的差異。

專(zhuān)屬的設(shè)計(jì)風(fēng)格

專(zhuān)業(yè)的網(wǎng)站建設(shè)公司都會(huì)定位設(shè)計(jì)風(fēng)格，選用的設(shè)計(jì)師也會(huì)依照這個(gè)方向去執(zhí)行設(shè)計(jì)，像APPLE商品都有屬于自己的設(shè)計(jì)風(fēng)格，簡(jiǎn)單、易懂、好用、順暢、簡(jiǎn)單配色，商品彼此之間都能找到共同的特質(zhì)，網(wǎng)站也一樣，無(wú)論是要營(yíng)造什么氛圍？設(shè)計(jì)什么素材？用什么照片？開(kāi)什么版型？都會(huì)有一個(gè)基本原則是不會(huì)改變的，而這個(gè)設(shè)計(jì)風(fēng)格的定位將是影響整個(gè)網(wǎng)站的走向，所以選網(wǎng)站設(shè)計(jì)公司的時(shí)候一定要先看設(shè)計(jì)公司的設(shè)計(jì)風(fēng)格，作品都不喜歡真的不要勉強(qiáng)設(shè)計(jì)委托，彼此都痛苦。

用RWD設(shè)計(jì)網(wǎng)站

平面設(shè)計(jì)師跨行網(wǎng)站設(shè)計(jì)常會(huì)遇到問(wèn)題，原因就是平面設(shè)計(jì)不需要依照RWD邏輯進(jìn)行設(shè)計(jì)，但是網(wǎng)站設(shè)計(jì)必須依照RWD做各種排列組合，才可以面對(duì)手機(jī)、平板、桌機(jī)時(shí)可以變換出最佳的畫(huà)面呈現(xiàn)，RWD觀念越好就能在設(shè)計(jì)細(xì)節(jié)上處理得更完善，就不會(huì)設(shè)計(jì)出圖片不知道要配哪一段文字錯(cuò)誤編排。

空白的實(shí)際應(yīng)用

前面有提到要留白，那留白實(shí)際應(yīng)用是什么呢？例如：企業(yè)商標(biāo)(LOGO)的背景與一定范圍區(qū)域都是留白的，這是在保護(hù)LOGO的呈現(xiàn)。文字段落之間會(huì)刻意留幾行空白列，制造一個(gè)無(wú)形的段落界線。還有購(gòu)物網(wǎng)站的商品常常會(huì)去背景只留下商品以突顯商品。以上三個(gè)是留白的常見(jiàn)案例，當(dāng)然還有很多空白的意義，但幾乎都不離這三個(gè)原則：創(chuàng)造空間感、舒適易讀、提高關(guān)注力。

文字編排很重要

網(wǎng)站不是圖就是文，圖片就是一張圖，但文字沒(méi)那么簡(jiǎn)單，文字需要編排，需要注意的事項(xiàng)：文字字距、行距、字體大小、文字字?jǐn)?shù)、標(biāo)題顏色、靠左靠右靠中、標(biāo)點(diǎn)符號(hào)、換行字?jǐn)?shù)、文字段落留白、編排一致性…，光是文字編排得好，就會(huì)有好的設(shè)計(jì)呈現(xiàn)，文字多的網(wǎng)站更應(yīng)該重視文字邊排，可以多看一些有做文字編輯的網(wǎng)站，像是天下雜志、康健雜志、商業(yè)周刊…，這些網(wǎng)站對(duì)于文字編排都具備標(biāo)準(zhǔn)化與整體感，非常值得參考。

文字編排很重要，舉一個(gè)文字閱讀不友善的例子，很多網(wǎng)站文章每一行的字?jǐn)?shù)都很寬，中文字?jǐn)?shù)都超過(guò)50個(gè)字以上，字?jǐn)?shù)超過(guò)人類(lèi)的可視角，看完一行要換到下一行會(huì)對(duì)不準(zhǔn)，這就是符合人類(lèi)閱讀的設(shè)計(jì)，控制單行在45～55個(gè)中文換行是較容易閱讀的換行字?jǐn)?shù)。文章的行距太擠，會(huì)難以閱讀，最好的行距是字高的30%~50%之間。字大小的使用也不是越大越好，字過(guò)大有粗糙感，文青風(fēng)網(wǎng)站很愛(ài)用小字表現(xiàn)質(zhì)感，但也苦了老花眼的長(zhǎng)輩，文字大小應(yīng)該要依據(jù)網(wǎng)站特性適時(shí)的微調(diào)通用的字體，像是康健網(wǎng)站字體有刻意放大，因?yàn)榫W(wǎng)站有更多的中老年瀏覽者。

內(nèi)容為主才有好設(shè)計(jì)

網(wǎng)站設(shè)計(jì)的意義是為了什么？為了呈現(xiàn)動(dòng)畫(huà)？為了設(shè)計(jì)美圖？為了成為網(wǎng)路藝術(shù)品？其實(shí)都不是，網(wǎng)站設(shè)計(jì)就是為了要將「有用的資訊」友善的呈現(xiàn)在網(wǎng)路上，透過(guò)設(shè)計(jì)讓網(wǎng)站更容易的被接受與喜愛(ài)，提高網(wǎng)站的曝光效率，而這些邏輯恰巧跟搜索引擎的排名邏輯一致，明確的主題、良好的使用體驗(yàn)設(shè)計(jì)(UX)、口語(yǔ)化易讀的文字、清楚明了的表格、符合主題的影片、良好的SEO架構(gòu)、好用的內(nèi)容管理系統(tǒng)(CMS)，以上都必須靠設(shè)計(jì)來(lái)達(dá)成，網(wǎng)站設(shè)計(jì)是技術(shù)整合的完美呈現(xiàn)，是扎實(shí)的內(nèi)功而不是花拳繡腿。如果網(wǎng)站的本質(zhì)是內(nèi)容，那應(yīng)該要認(rèn)真的思考網(wǎng)站可以幫助人們什么？它的受眾對(duì)象是誰(shuí)？應(yīng)該準(zhǔn)備什么資料來(lái)滿足瀏覽者？回到內(nèi)容與使用者需求之后，透過(guò)設(shè)計(jì)來(lái)解決呈現(xiàn)的問(wèn)題就不再是一個(gè)難以理解的事情。

結(jié)論

為什么這個(gè)設(shè)計(jì)可以？這個(gè)設(shè)計(jì)不行？絕對(duì)不是單憑感覺(jué)與主觀做評(píng)判，對(duì)于專(zhuān)業(yè)的網(wǎng)站建設(shè)公司來(lái)說(shuō)，絕對(duì)可以具體列出設(shè)計(jì)不妥的理由，設(shè)計(jì)當(dāng)然沒(méi)有這么簡(jiǎn)單，但只要依循基本設(shè)計(jì)原則設(shè)計(jì)網(wǎng)站，網(wǎng)站絕對(duì)不會(huì)太差，本文提到的項(xiàng)目都是「設(shè)計(jì)的基本功」，如果這些你知道，恭喜你只要繼續(xù)努力絕對(duì)可以成為獨(dú)當(dāng)一面的設(shè)計(jì)師，如果你還不是很清楚這些細(xì)節(jié)，可以試著體會(huì)一下這些基本原則，希望對(duì)你的網(wǎng)頁(yè)設(shè)計(jì)路上有一些幫助。