網頁設計的眉角

瀏覽數:1735


  網頁設計只需要一位設計師就能完工?或是挑出網頁版型就等於完成了網頁設計,之後就能期待上線後產生效益嗎?其實不然,網頁設計是需要很多位專業的人員,共同進行前期規劃、討論,並攜手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個網站首頁必備的內容元素

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

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

更多資訊請參考...
{{item.title}}
生產力中心提供的活動資訊
{{item.title}}
相關出版品...