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

　　網(wǎng)頁設計前的準備工作

　　網(wǎng)站設計師最容易犯的錯誤？

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

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

　　「達成目標才是網(wǎng)站建置的真正意義」，網(wǎng)頁設計前我們得先定義網(wǎng)站目標，假設網(wǎng)站是機械產(chǎn)業(yè)的官方網(wǎng)站，我們定義網(wǎng)站是「被搜尋后得到客戶詢問」，要達成客戶詢問這個目標，在網(wǎng)站上必須提供于「有利于客戶研究或審閱的各種資訊」，突顯企業(yè)的專業(yè)形象，所以網(wǎng)站需要的單元有：公司介紹、工廠規(guī)模、專業(yè)技術、客戶實績、常見問題、型錄下載…，如果還要讓網(wǎng)站具備排名能力，須加入SEO文章知識系統(tǒng)，還有全網(wǎng)站的SEO優(yōu)化架構與策略。

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

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

　　不能依照自己的喜好做設計嗎？

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

　　網(wǎng)站基本設計原則

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

　　傳達單一且明確的主題

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

　　一開始就設定網(wǎng)站氛圍

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

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

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

　　善用留白的技巧

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

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

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

　　維持一致的網(wǎng)站設計風格

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

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

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

　　插圖讓網(wǎng)站視覺進化

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

　　根據(jù)1855制作示意圖，更容易理解1855

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

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

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

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

　　網(wǎng)站設計的差異在細節(jié)

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

　　專屬的設計風格

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

　　用RWD設計網(wǎng)站

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

　　空白的實際應用

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

　　文字編排很重要

　　網(wǎng)站不是圖就是文，圖片就是一張圖，但文字沒那么簡單，文字需要編排，需要注意的事項：文字字距、行距、字體大小、文字字數(shù)、標題顏色、靠左靠右靠中、標點符號、換行字數(shù)、文字段落留白、編排一致性…，光是文字編排得好，就會有好的設計呈現(xiàn)，文字多的網(wǎng)站更應該重視文字邊排，可以多看一些有做文字編輯的網(wǎng)站，像是天下雜志、康健雜志、商業(yè)周刊…，這些網(wǎng)站對于文字編排都具備標準化與整體感，非常值得參考。文字編排很重要，舉一個文字閱讀不友善的例子，很多網(wǎng)站文章每一行的字數(shù)都很寬，中文字數(shù)都超過50個字以上，字數(shù)超過人類的可視角，看完一行要換到下一行會對不準，這就是符合人類閱讀的設計，控制單行在45～55個中文換行是較容易閱讀的換行字數(shù)。文章的行距太擠，會難以閱讀，最好的行距是字高的30%~50%之間。字大小的使用也不是越大越好，字過大有粗糙感，文青風網(wǎng)站很愛用小字表現(xiàn)質感，但也苦了老花眼的長輩，文字大小應該要依據(jù)網(wǎng)站特性適時的微調通用的字體，像是康健網(wǎng)站字體有刻意放大，因為網(wǎng)站有更多的中老年瀏覽者。

　　康健網(wǎng)站刻意放大的字體

　　內容為主才有好設計

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

　　結論

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