網頁設計的眉角

　　網頁設計只需要一位設計師就能完工？或是挑出網頁版型就等於完成了網頁設計，之後就能期待上線後產生效益嗎？其實不然，網頁設計是需要很多位專業的人員，共同進行前期規劃、討論，並攜手UX（User Experience/使用者體驗）設計師與UI（User Interface/使用者介面）設計師共同合作產出的設計。

　　因此，網頁設計有著本身存在的規格與運作模式，才能讓網頁在上線後發揮效用，下圖是網頁設計的架構流程圖，而以下將探討流程圖中，需要特別注意的「五個眉角」，並讓設計過程中更能有效率的完成。

【眉角一】客戶網站需求

　　首先要確認網站存在的「目的」為何，是為了增加商品曝光率或是為了建構品牌形象等，而當目的產出後就能開始進行下一步的網站「定位」，此階段必需詳細溝通探討包含競品分析、網站風格喜好、主力商品等定位，由於網站的競爭非常激烈，所以做好「定位」是為了在切入市場時能做出區隔，藉此站上有利的位置，也就是所謂的差異化。

　　我們以「科技部特色領域研究中心」網頁設計做為案例並加以描述說明，網站目的是為了推廣包含生科醫農、工程技術、自然科學、設科人文等多元特色領域研究中心的資訊，以及各個學校研究中心所執行的研究領域，所以將網站定位為提供特色領域研究的集中點，讓使用者透過這個平台找到想要的資訊，以達到網站上線的效益。如此一來，透過討論出網站的「目的」再清楚找到「定位」後，就能開始進行整理網頁設計的內容。

【眉角二】網站資訊內容

　　當網站確認目地跟定位後，就要開始思考到底要將那些資訊放上去。如果把網站想成是一家店的櫥窗，準備規劃出能引人注目的裝潢擺設來進行設計，就更容易知道那些訊息、商品適合放上去，並且依據「目標對象」來整理規劃上架的資訊。

文案資料

　　包含基本的公司介紹內容，例如公司簡介、歷史沿革、重要事件、營業項目、產品特色、服務據點、連絡方式等等，此外，企業的LOGO、標準色、視覺識別系統等相關形象資料，也是網頁設計重要的參考依據。當統整出上述資料後，就要以目標對象為思考出發點，針對不同行業的目標對象就會有不一樣的行銷方式，所以，設計出符合他們所期待看到的資訊，就會是第一優先考量的重點。

圖片、影片資料

　　圖片是網站的靈魂，這是很貼切實際的形容。比起文字，圖片更能吸引到使用者的注意，這也是IG（Instagram）會風靡全球的主因，當我們看到時尚網站上美到夢幻的人物照片，也同時在心裡提高了服裝的價值。

　　每當看完網站上的美食照片，總會有股想大快朵頤的衝動，就更加清楚了解網站在設計圖片上的用心程度。如果是販賣商品網站，焦點就在所販售的物件上，而商品最終呈現的效果將大大決定銷售量，由此可見，若能請到專業攝影師協助構圖拍攝商品，將最完美的一面呈現給目標對象，是比單純文字描述更能達到事倍功半的效益。

　　當直播時代來臨，目標對象關注影片的喜好程度，也是重點考量之一，因此影片是能創造高關注度的效果，所以透過適切且簡潔有力的影片是能產生1+1的效益。換句話說，如果商品本身需要透過介紹來做使用說明，運用影片教學更能提升友善度，因此，思考善用影片的優勢是能讓網站持續加分的。

【眉角三】建構網站思維

　　網頁設計是由UX設計師與UI設計師共同完成，但在建構網站思維階段是由UX設計師先行負責網頁優化的工作，並且站在使用者的立場，了解對方的需求與瀏覽網頁的習慣，並規劃出最容易使用該網站的行為模式，只要設計得夠出色，使用者再次造訪的機率將大大提升。

有價值的訊息才上架

　　當資料已準備齊全，就是跟UX設計師溝通討論如何開始網頁設計的階段。根據統計指出，一般使用者並不會停留在無法找到相關資訊的網站太久，因此把公司最重點的訊息展示給使用者是很關鍵的，或者也能透過期望帶給使用者對該網站有什麼樣的第一印象，來設定訊息上架的規劃方向。

　　此外，也能透過UX設計師對同類型網站的調查研究，從而判斷出最適合上架的資訊，比如說網站除了美圖吸引人之外，若主打價格，折價前後的價錢比對，就是使用者最想知道的重要資訊。

構思網站地圖與網頁熱點

　　網站地圖是指網頁上每一個頁面如何互相連結，通常UX設計師會先構思資訊適合放在哪一個頁面上，並研究出如何引導使用者點擊後，能快速得到他想要的資訊，同時也會根據瀏覽者使用網頁習慣的「Z字法則」來做眼球移動的路線規劃，一般都是從左看到右、從上看到下的眼球移動瀏覽方式。甚至是能在網站上線後，運用「熱點偵測技術」，得知網頁上那些區塊是使用者最常觀看與點擊的地方，從而規劃出重點區，以利未來行銷的運作。

架構網站Wireframe

　　UX設計師在規劃完網站的瀏覽者體驗優化後，就會開始描繪網頁的線框圖（Wireframe），也就是把網頁雛形透過線條描繪出來。下圖是科技部特色領域研究中心的網站wireframe，能清楚看到網頁上各個色塊要擺放的內容，通常網頁畫面左上角就是使用者第一眼會注意看的黃金位置，所以這個位置都是放上企業LOOG或企業名，以便使用者清楚自己正在瀏覽的網站名稱。再來會採用區塊大小的呈現方式，藉此引導使用者分辦出該優先注目的位置，例如主打的商品或重點訊息會放在最顯眼的banner位置，藉此增加點擊率，而網站的主要服務與內容會依序放在banner位置的下方，如此一來，就可達到網頁排列優先順序後的效果與效益。

　　因此，只要清楚分類出優先順序以及需要上架的有價值內容，就能完整規畫出網站wireframe，當UX設計師規畫出來後，UI設計師就能照著此架構設計出網頁的畫面。

規劃行動裝置版網頁

　　又稱為響應式網頁設計（Responsive web design）且通常被縮寫成RWD，是指在手機上呈現出的網頁畫面，更是近年來網頁設計必備的技術。隨著使用者運用手機上網瀏覽網頁的比例逐年增加，UX設計師為了讓使用者有更好的瀏覽體驗，會在規劃網站時，也將其納入重點考量之一。下圖是科技部特色領域研究中心的手機版網頁，因為使用手機是由上往下滑看的瀏覽習性，所以網頁訊息需採用上下整理排列的組合，藉此讓使用者更快找到他要的訊息內容。

【眉角四】進行網頁設計

　　當UX設計師規劃完網站整體的wireframe（網站線框圖）與瀏覽體驗優化後，接下來就是跟UI設計師溝通討論如何進行網頁視覺設計的風格。若說UX設計師是網站的「策略師」，那UI設計師就是網站的「美學師」，此階段就是透過UI設計師的巧手，打造出獨一無二的網頁設計風格。

根據業種型態與目標對象 決定網站的色彩風格

　　當一家商店營業前，首先會思考店內的「風格」，不同的行業有不同的基本風格，確立基本風格後，就會開始思索來店的族群，可能會是年輕人、學生、上班族、主管、專業人士等等，再透過目標對象來決定店面需要改變的裝潢風格，藉此吸引他們到店內消費。

　　建立網站也是同樣的道理，UI設計師會先將「色彩」做為網頁「風格」的分類依據，若是美食網站基本風格一定是暖色系，而紅黃橙這三個色彩，幾乎是與餐飲類的網站畫上等號，除非是賣冰品或是海鮮魚類才會使用冷色調的藍色，而綠色最常出現在自然健康類的網站，科技與金融產業網站最常使用藍色，紫色則是代表著神祕或高貴的網站，此外，最具代表女性網站色彩就是粉紅色。

　　下圖是科技部特色領域研究中心的網頁設計，因為是科技、智慧、先進的風格，所以採用「藍色」為主色調，在圖片上也以藍色調為選擇依據，並加入漸層藍的底色營造出科技智慧的特色，如此一來，就能讓瀏覽者先入為主的認定網站屬性，也因為視覺風格的設計，讓網站更具吸睛力。

　　由此得知，UI設計師會根據業種型態來選擇色彩，並運用色彩建立不同的網頁風格，因此，根據公司本身的產業類別，挑選出合適的色彩，透過色彩的影響力來吸引目標對象，藉此增加網頁瀏覽率。

網頁影響力來自於圖片

　　網頁上的圖片直接決定了網站的質感，圖片不僅是網頁的靈魂，更是代表著視覺上好不好看，且最能吸引使用者注目的重要物件。除此之外，圖片也有著輔助說明的作用，能與文字內容達到相輔相成的效果，當使用者看到圖片是能直接聯想到所要述說的內容。下圖是科技部特色領域研究中心網頁的banner，若能挑選極具吸引力的圖片，並搭配精準文字的說明，就能藉此提高瀏覽者觀看的時間，並可能創造更高的點擊率。

　　由此可見，圖片對於網頁有著舉足輕重的因素，因此，UI設計師挑選圖片的美學至關重要，若說一張圖片就能決定整個網站的成敗也不為過。

設計按鈕上的關鍵文字

　　網頁上的「按鈕」是決定點擊率的重要物件，當使用者在網頁看到類似按鈕的物件時，就會將其聯想成是能夠點擊的物件，所以UX設計師會依照使用者的習慣，在按鈕上做好文字導引，藉此吸引使用者點擊進入下一頁。例如在網站上的按鈕文字，可設計成「只限今天錯過不再」或是「網站達人不藏私推薦」等等，增加使用者想點擊入內一探究竟的慾望，再交由UI設計師去設計成引人注目的按鈕顏色與外觀。

　　所以，若能在網頁上規劃好按鈕的位置，就能讓使用者迅速找到點擊重點，更能減少蒐尋資料的時間，讓網站的瀏覽率持續提升。

【眉角五】持續行銷經營

　　當網站上線後，就是要開始思考如何將網站行銷到目標客群上，以達到架設網站的目標。而根據目標客群就能選擇運用Line@、FB（Facebook）、IG（Instagram）等app軟體，首先，Line是目前使用人數相當廣的即時通訊軟體，幾乎不分年齡層且天天會使用到，而Line@生活圈更能達到即時傳遞資訊，若能把Line@生活圈中的群組夥伴引導到網站上，就是可觀的行銷效益。

　　FB在使用上的年齡層偏高，約介於25歲到34歲的使用者居多，而40、50歲的朋友也是愛用者，若目標客群的年齡層偏高，可考慮透過FB的貼文與資訊分享，抓住他們習慣上FB瀏覽的習慣。IG在使用上的年齡層偏低，以年輕人為主力的社群媒體，而限時動態的影片與貼文再加上照片濾鏡效果，都是年輕族群喜歡的方式，所以，若目標客群的年齡層偏低，只要根據IG的使用方式，打造出吸睛的內容，就能抓住他們的目光。

結論

　　在網路的世代，做好網頁設計只是第一步，後續針對網頁所規劃的經營方式與行銷手法，還有讓使用者更快找到網站的SEO優化（搜尋引擎最佳化），以及透過運用GA（Google Analytics）的網站數據分析工具，徹底了解使用者是如何進到網站，如此一來，才能讓網站長久經營發展下去。

參考文獻：

UI UX設計是什麼？用9個提高網站轉換率的方法告訴你

網頁設計Checklist：10個網站首頁必備的內容元素

我要請設計公司製作網站，我該如何準備資料？

我該準備哪些資料給網頁設計公司？-愛貝斯網頁設計公司