每一位企業主，肯定都希望擁有令人一眼就被吸引的網站面貌吧。那么如何做出漂亮的網頁呢？早晨設計作為專業的建站服務商，最常聽到的建議就是：「上網找素材、找高檔次的網站當作模板?！?/p>

的確，觀察別人的網站、看這些好看又實用的頁面是怎么運作設計的，是我們的基本功。但是，有時大量搜集了各式各樣的模板網站當素材，是否讓你眼花撩亂、越看越模糊沒有頭緒呢？今天來談談：找到了理想的模板之后、要如何分析消化，當理解了別人為什么要這樣設計、才能把思考模式轉換成自己的知識庫，幫助你找到建立自己網站的最佳組合應用。

架設網站有不同的目的，今天我們首先以「商業用途」的網站做分析介紹取經：

分析案例：【Menlaser】激光切割設備制造企業

網站構架目的： 1.建立企業形象 2.推廣主力產品，得到訂單或合作機會 3.提供專業資質、知識為產品/企業技術背書 4.提供產品相關QA，拉近與客戶之間距離

一、設計首頁1-門面

【訂立視覺目標】

進入首頁，就像第一眼的大門，傳達給觀者「我是誰」的意象。這里使用精修的產品首圖，以想讓人聯想到什么關鍵字/感覺為主，因此Mablaser是「激光切割、高品質的、安心的」。

還有，由于銷售的對象是「機器設備」，受眾目標是「使用機器設備的人」，因此在建立形象時，除了「我是專業制造商」之外，還要營造出品牌的形象和實力，讓客戶產生信賴感。

【基礎色調、空間布局】

建立客戶的「安心、信賴感」，讓人在視覺舒服的狀態下，得到找尋的信息。

對于顏色選用，呈現干凈，只選擇一種貼合logo的主色（棕）、一到兩種副色就夠了，避免眼花撩亂、模糊企業形象。當然，使用繽紛熱鬧的視覺做設計的優秀網站也有許多，但因為這個品牌聚焦在「激光切割機」這個主軸上，不同的網站、品牌必定會有不同的視覺目標要呈現，后面我們會再舉例做比較。

最上方的目錄區，一般會讓目錄菜單一整排清楚地展開、中間不被其他元素打斷（例如故意將LOGO置中、選項分散等），使選項彼此之間有「屬于同一層級」的連接感；其中第二、三、五項旁邊標志的小箭頭，讓觀者直覺會知道「這里有許多子目錄可以點」，光標滑過去時會特別停頓留意。

這些設計小細節，都是需要經驗時間累積，且知識永遠在更新變動，因此不需要求自己一步到位、持續不斷優化才是重點。隨時多多觀摩、咨詢前輩專家的實戰經驗、也可以站在巨人的肩膀上。

一、設計首頁2-首頁下拉

【搭配使用顏色、字體、字幅的變化目的】

選擇一個適合的主色會連接到你的品牌印象，因此許多品牌會從LOGO設計中挑選網站主色。

繼續把首頁往下滾動，可以發現顏色配置、字體、字幅對網站的作用，劃分出內容文字的層次、強調按鈕、引導觀者視線移動方向等，透過以上三者變化，觀者可以一眼的知此畫面的標題是什么、摘要重點、詳細信息連接按鈕在哪里；此外，把按鈕加框線，光標滑過時變色，也是非常實用的方法，告訴大家「這里有東西，點進來！」。

【滾動頁面信息】

滾動往下，是從網頁頂端選項中，各種重要內容挑出幾篇，搭配圖片設計，讓觀者在還沒花心力去了解你的網站時，先喂給他們一些信息引子。這些信息要記得時常更新，展現出你的網站內容十分豐富，吸引大家深入挖掘。

制作這些滾動信息，就像在做簡報，一張簡報的大小以不超過一個電腦/手機屏幕的頁面長寬為佳；超過，觀者需要一直滑來滑去看信息，影響閱覽。

這個網站中，不同張「簡報」的底色不同，優點是可以讓人不看字也清楚知道：「這里」和「這里」在說不一樣的事情；缺點是畫面的整體性、干凈度會減弱許多，設計自己的網站時，我們可以從中思考權衡。

一般滾動至網頁底，我們會再度發現目錄菜單（網站位置稱為Footer），這里的菜單安排與頁首不同：頁首的菜單，主要針對客人/潛在客群，把他們最需要先知道、吸引人的項目放上去。

Footer：1.重復一遍頁首的項目，供觀者滑到底時方便再跳去其他頁面； 2.放上商業重要性次高的連接/子項目，例如：人才招募、服務法規等，一般人有需要時才會特地去查詢的東西。 最后，首頁頁面信息中，別忘了加入「完整聯絡信息」和「社交平臺連接」、建立「意見信箱」也是很好的，打開大門、提供更多觀者與你建立交流的管道。

三、內頁設計1-基本款

簡單、清楚的分工：把網頁需要的目錄、標題、內容內存塊等用不刺眼的純色塊、輪廓線、空白等，制造視覺區分；左側目錄區也一目了然、不需要額外下拉或點擊。一切以傳達網頁內容信息為最主要目的。帶給觀者利落、簡單大方的感受，建立網頁、更新編輯也最容易。

插入圖片，可以使用slide模板，設定每張圖的停留時間做輪播；也可以設定為使用者點擊時、撥放下一張。

三、內頁設計2-層次堆疊

文字方塊加入層次感，搭配降低透明度；看起來背景圖不會完全被擋住，讓網頁看起來更豐富和諧，不會有「內存塊壁壘分明」的感覺。使用這樣的設計，建議背景圖簡單大方、避免使用零亂、顏色太多、甚至會動的圖，讓觀者失焦喔！

三、內頁設計3-圖片式目錄

頁首和側邊菜單，使用利落、清楚的目錄呈現，讓人最快找到信息、不浪費耐心。那內文中，這些產品區、專題文章區就可以多加變化了，瀏覽賞心悅目、觀者被吸引點入內文的機率也增加，同時因為屬于內文區，這樣的編排不影響觀者搜尋要看的項目。

另外，使用的照片（首圖）建議使用能切入該篇點進去的內文重點、并且每張首圖畫面風格能達成一致的照片。

以上，就是早晨設計這次的分享，希望能幫助大家在欣賞各種大神級網站時，更容易讀懂「??！原來這個網站的巧思在這里」。

如果還想知道更多架站技巧、網頁優化技巧等，就來看看早晨設計的網頁設計知識區，滿滿的寶藏就等你挖掘、實際運用！也隨時歡迎咨早晨設計團隊，讓設計師親自告訴你，他們高深莫測的腦袋在想什么吧！

而且在2021疫情后，人際交流、實體商店需求被網絡取代，越來越多商業品牌和一般大眾都投注心力于網站系統建置和網頁設計，選擇早晨設計讓您在疫情期間，事業逆勢成長。