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

　　網頁設計前的準備工作

　　網站設計師最容易犯的錯誤？

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

　　如何定義網站目標？

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

　　網站設計前如何搜集資料？

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

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

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

　　網站基本設計原則

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

　　傳達單一且明確的主題

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

　　一開始就設定網站氛圍

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

　　精心編排網站內容順序

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

　　善用留白的技巧

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

　　配色是網站的第一印象

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

　　維持一致的網站設計風格

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

　　不要小看網站的字體選擇

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

　　插圖讓網站視覺進化

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

　　根據1855制作示意圖，更容易理解1855

　　拍攝網站的重要照片

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

　　將影片應用在網站上

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

　　網站設計的差異在細節

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

　　專屬的設計風格

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

　　用RWD設計網站

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

　　空白的實際應用

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

　　文字編排很重要

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

　　康健網站刻意放大的字體

　　內容為主才有好設計

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

　　結論

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