每一位使用架站平台的人，肯定都希望做出令人一眼就被吸引的網站面貌吧。身為一位架站新手，最常聽到的建議就是：「上網找素材、找喜歡的網站當作範本。」
的確，觀察別人的網站、 看這些好看又實用的頁面是怎麼運作設計的，是我們的基本功。但是，有時大量蒐集了各式各樣的範本網站當素材， 是否讓你眼花撩亂、越看越模糊沒有頭緒呢？今天來談談：找到了理想的範本之後、要如何分析消化，當理解了別人為什麼要這樣設計、才能把思考模式轉換成自己的知識庫，幫助你找到建立自己網站的最佳組合應用。
架設網站有不同的目的（可以參考我們的相關文章：如何規劃網站內容？），今天我們首先以「商業用途」的網站做分析介紹取經：
目錄
網站架構目的：
1.建立企業形象
2.推廣主力商品，得到訂單或合作機會
3.提供醫學文獻、知識為產品/企業技術背書
4.提供寵物相關 QA，拉近與消費者之間距離
一、設計首頁1-門面
【訂立視覺目標】
進入首頁，就像第一眼的大門，傳達給觀者「我是誰」的意象。這裡使用健康的寵物為首圖，以想讓人聯想到什麼關鍵字/感覺為主，因此 Prttrust 是「寵物、正向的、安心的」。
還有，由於醫療的對象是「動物」，受眾目標是「寵物的主人」，因此在建立形象時，除了「我是醫療專業」之外，還會比針對「人」的醫療研究開發商，多一點柔和、如寵物一般溫暖的信賴感。
【基礎色調、空間布局】
建立他們的「安心、信賴感」，讓人在視覺舒服的狀態下，得到找尋的資訊。
對於顏色選用，呈現乾淨，只選擇一種主色（橘）、一到兩種副色（白、透明度低的淺藕）就夠了，避免眼花撩亂、模糊醫療專業形象。當然，使用繽紛熱鬧的視覺做設計的優秀網站也有許多，但因為這個品牌聚焦在「醫療用品」這個主軸上，不同的網站、品牌必定會有不同的視覺目標要呈現，後面我們會再舉例做比較。
Pettrust 主色調使用暖色、明亮不刺眼的橘，可以看出與其他醫療類網站的選用差別，冷色系給人專業與權威感，適合使用於大型醫學中心、工業器械、研究機構等；而 Pettrust 這種出發點是「寵物」、「照護」的形象，則可以考慮暖色系。空間上，避免過多、大塊的視覺衝擊一口氣攤在眼前，適時地使用留白，讓觀者眼睛有喘息的空間、好好地消化資訊。
最上方的目錄區，一般會讓目錄選單一整排清楚地展開、中間不被其他元素打斷（例如故意將 LOGO 置中、選項分散等），使選項彼此之間有「屬於同一層級」的連結感；其中第二、三項旁邊標誌的小箭頭，讓觀者直覺會知道「這裡有許多子目錄可以點」，游標滑過去時會特別停頓留意。
另外最右的語言選單，與目錄選單們雖然同字體，但中間的留白明顯大於每個選項之間的留白，讓觀者知道「這個東西」不屬於目錄群，再加上地球圖案，即使是看不懂日文的人，也會直覺聯想到「可能是和不同國家有關」。
這些設計小細節，都是需要經驗時間累積，且知識永遠在更新變動，因此不需要求自己一步到位、持續不斷優化才是重點。隨時多多觀摩、諮詢前輩專家的實戰經驗、也可以站在巨人的肩膀上。
一、設計首頁2-首頁下拉
【搭配使用顏色、字體、字幅的變化目的】
選擇一個適合的主色會連結到你的品牌印象（例如 Facebook ），因此許多品牌會從 LOGO 設計中挑選網站主色。
繼續把首頁如左圖往下滾動，可以發現顏色配置、字體、字幅對網站的作用，劃分出內容文字的層次、強調按鈕、引導觀者視線移動方向等，透過以上三者變化，觀者可以一眼的知此畫面的標題是什麼、摘要重點、詳細資訊連結按鈕在哪裡；此外，把按鈕加框線，游標滑過時變色（如左圖中按鈕），也是非常實用的方法，告訴大家「這裡有東西，點進來！」。
【滾動頁面資訊】
滾動往下，是從網頁頂端選項中，各種重要內容挑出幾篇，搭配圖片設計，讓觀者在還沒花心力去了解你的網站時，先餵給他們一些訊息引子。這些訊息要記得時常更新，展現出你的網站內容十分豐富，吸引大家深入挖掘。
製作這些滾動資訊，就像在做簡報，一張簡報的大小以不超過一個電腦/手機螢幕的頁面長寬為佳；超過，觀者需要一直滑來滑去看訊息，影響閱覽。
這個網站中，不同張「簡報」的底色不同，優點是可以讓人不看字也清楚知道：「這裡」和「這裡」在說不一樣的事情；缺點是畫面的整體性、乾淨度會減弱許多，設計自己的網站時，我們可以從中思考權衡。
一般滾動至網頁底，我們會再度發現目錄選單（網站位置稱為 Footer )，這裡的選單安排與頁首不同：頁首的選單，主要針對客人/潛在客群，把他們最需要先知道、吸引人的項目放上去。
Footer：
1. 重複一遍頁首的項目，供觀者滑到底時方便再跳去其他頁面；
2. 放上商業重要性次高的連結/子項目，例如：人才招募、服務法規等，一般人有需要時才會特地去查詢的東西。
最後，首頁頁面資訊中，別忘了加入「完整聯絡資訊」和「社交平台連結」、建立「意見信箱」也是很好的，打開大門、提供更多觀者與你建立交流的管道。
二、來看看其他視覺目標的例子
Pettrust 是「寵物醫療」、強調安心感，我們來看看其他商業產品的例子，比較不同視覺目標在設計時的差別吧！
【頂呱呱】
獨立經營的花藝設計師，呈現「文青」、「優雅」、「精神治癒」的意象。
選用單張能清楚代表「花藝」的背景照片，搭配乾淨、黑白色調的文字。靠圖片及文案的氛圍吸引人駐足，慢下來細看、品味內容。
提醒大家，為了視覺美感，把字調得過小、透明度太低、或是整體偏霧偏暗，都是常見的盲點；建議設計網站時，多蒐集旁人的使用體驗回饋，或是諮詢專業架站人的經驗，一步步修整。
三、內頁設計1-基本款
簡單、清楚的分工：把網頁需要的目錄、標題、內容區塊等用不刺眼的純色塊、輪廓線、空白等，製造視覺區分；左側目錄區也一目了然、不需要額外下拉或點擊。一切以傳達網頁內容資訊為最主要目的。帶給觀者俐落、簡單大方的感受，建立網頁、更新編輯也最容易。
插入圖片，可以使用 slide 模板，設定每張圖的停留時間做輪播；也可以設定為使用者點擊時、撥放下一張。
三、內頁設計2-層次堆疊
文字方塊加入層次感，搭配降低透明度；看起來背景圖不會完全被擋住 ( 還看得到貓咪！) ，讓網頁看起來更豐富和諧，不會有「區塊壁壘分明」的感覺。使用這樣的設計，建議背景圖簡單大方、避免使用零亂、顏色太多、甚至會動的圖，讓觀者失焦喔！
三、內頁設計3-圖片式目錄
以上，就是這次的「帶你讀架站攻略」的分享，希望能幫助大家在蒐集各種大神級網站模板時，更容易讀懂「啊！原來這個網站的巧思在這裡」。
如果還想知道更多架站技巧、網頁優化技巧等，就來看看艾格的網頁設計知識區，滿滿的寶藏就等你挖掘、實際運用！也隨時歡迎諮詢艾格設計團隊，讓設計師親自告訴你，他們高深莫測的腦袋在想什麼吧！
而且在 2021 疫情後，人際交流、實體商店需求被網路取代，越來越多商業品牌和一般大眾都投注心力於網站系統建置和網頁設計。艾格也因此推出疫情專案，針對近期相要開發架站的對象，將採用遠端協作的方式，與你在空中一起、一步步架設美麗實用的專業網站。
疫情期間，讓你的事業逆勢成長。
了解更多艾格網頁設計解決方案：
網頁設計首選艾格｜全程遠端網頁設計，即刻數位轉型
