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

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

相關内容：成為網頁設計師的18個基本技能

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

相關内容：網站SEO KPI是什麼？5分鐘學會如何衡量SEO成效！

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

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

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

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

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

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

延伸閱讀：到底是RWD（響應式網頁設計）好還是AWD好？

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

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

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

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

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

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

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

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

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

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

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

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

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

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