在各種裝置的推陳出新，桌機電腦、平板、智慧型手機、智慧型電視…等，讓我們生活進入多元裝置時代。
與此同時，促使我們檢視網站是否符合各裝置特性，是否能讓使用者容易閱讀？是否能讓使用者容易操作？
這也就是我們所說的UI（User Interface，使用者介面）、UX（User Experience，使用者體驗）。
這篇文章就讓我們來聊聊，UI、UX 到底為何重要？要具備哪些條件，才是一個好網站呢？
讓我們在這個多元裝置時代，都能設計出更友善、更具功能效益的網站，提供使用者美好使用者介面與體驗。
Contents
多元裝置時代 UI、UX 設計的重要性與目的
為因應從智慧型手機、平板等行動裝置普及，2015 年開始 RWD（回應式網頁設計，Responsive Web Design）設計即被熱烈重視與討論。
RWD 設計即指，網站內容能隨著不同裝置螢幕大小自由排列變化，以提供使用者一個最合適閱讀、操作的環境。
但時至今日，隨著裝置的多元，以及網速升級的加持，RWD 設計僅為一個網站設計最基本的條件。
作為一個網站企劃、設計師，更需要注意的是，是否能站在使用者視角思考，除了要讓使用者在視覺上更一目瞭然其功能外，更要避免使用者在使用過程中迷途、找不到想要的資訊。
UI、UX 的議題也因此被視為是網站設計的重點課題，就是為了設計出更友善的使用者介面，提供更好的使用者體驗，以獲得更多的轉換提升網站效益，就是 UI、UX的最終目的。
什麼是 UI 設計？
UI （User Interface，使用者介面），指的即是實際與使用者接觸，產生互動的部分。
簡而言之，就是當使用者在介面上操作畫面、選單，或是透過指令來啟動後端的程式。
因此，如何在視覺上透過設計安排，清楚傳現每一個元件的具體功能，讓使用者在操作互動上更直觀，即是 UI 設計時需要思考的重點。
網站 UI 設計的重點
1）使用單欄佈局代替多欄佈局
在過去以電腦為主的時代，我們總會在網站中規劃上方列表、左側選單…等欄位，將畫面切分為多個區塊。
現今因應多元行動裝置趨勢，為讓同一款設計在不同大小的螢幕上排列組合以符合最佳視覺閱覽模式，單欄佈局因此成為趨勢。
單欄佈局讓內容由上而下更具邏輯性，並以敘述的方式引導使用者往下閱讀。
2）重複行動呼籲按鈕
設計每個網站都會有個目的，可能是「會員募集」、「商品購買」、「問券填寫」…等。
為了讓使用者在閱讀網站的同時能不斷地被提醒執行此動作，可以在網站內容各段落重複放置行動呼籲按鈕。
一方面藉此加強提醒，一方面也能為網站內容做區隔分段，讓使用者在閱讀上有喘息空間。
3）維持界面設計一致性
想像你在看一篇文章內容時，因為有不同字形、字級、色彩，讓你可以很快速的區別文章標題、副標、內文。
同樣，為了讓使用者能在短時間內迅速理解網站內容，在介面的內容樣式上保有一致性也是相當重要的。
因為具有一致性設計的介面，能讓使用者快速理解各個主題、分類、內容區塊的方式，降低使用者在閱讀的過程中對資訊產生混淆，降低使用者學習成本。
4）使用獲利按鈕（好處說明）代替普通的按鈕
如同剛剛提及的重複行動呼籲按鈕，能夠提高使用者執行動作的機率。
而為了再提高使用者執行動作的意願，可在按鈕的設計上加上執行這個動作後可為使用者帶來的好處，即「獲利按鈕」。
例如網站正在招募會員，且提供入會禮 100 元折價券，就可以將原本只是「加入會員」的按鈕，改為「加入會員 享百元折扣」，帶出利益說明，以提高使用者執行的意願。
5）給推薦而非讓使用者選擇
就如同在餐廳點餐，當不同的套餐排排站在一起時，不但要一個個詳細閱讀差異，而且還可能因此陷入選擇困難的情況。
但這時若有個「主廚推薦」的 標示出現在某個套餐旁，那肯定會率先吸引你了目光。
就如同在網站上有多種方案資訊提供給使用者選擇時，在設計上你可將最主要的方案，善用設計讓它更加突出，推薦給使用者吸引注意，同時盡量避免使用者因無法做出選擇而跳出的情況。
什麼是 UX 設計？
UX（User Experience，使用者體驗） 講述的是使用者在執行某一件事時體驗和感受。
與 UI 最大的差異在於，UI 是可見具體呈現的設計，而 UX 則是無形的感受，一切評斷皆源自於使用者的主觀感受。
版面的設計編排、功能元件的設置、資訊內容的呈現…等，都會是影響使用者感受的重點因素。在網站中避免任何可能造成使用者使用操作困擾、認知混亂、資訊混淆的情境都應當避免，如此才能塑造一個良好、友善的網站環境。
因此，該怎麼做，才能避免網站出現上述情況，即是思考 UX 設計時的重點。
網站 UX 設計的重點
1）以使用者為中心思考
在開始一個網站設計之前，首先應該要清楚了解鎖定的目標客群是誰？他們具有哪些特性？
他們在意什麼？清楚描繪出他們的輪廓，有助於讓你站在目標客群的角度思考。
如此才能讓設計聚焦於使用者身上，提前一步預想他們可能遇到的問題，並避免任何會讓使用者產生不便或困擾的狀況產生，製作出符合他們習慣的網站，提供他們良好的使用者體驗。
同時，透過觀察同業網站，了解其他人著重的方向，也可能從中發現自己遺漏的重要訊息也說不定。
2）使用資訊圖像取代文字
商周學院圖像溝通術：大腦處理視覺的速度是文字的六萬倍。
換句話說，過多的文字將增加使用者理解內容資訊的時間。但根據 Microsoft 調查，現代人注意力平均只有 6 秒，要在如此短的時間內抓住使用者目光，將文字資訊圖像化，無庸置疑是網站設計的一大重點。
借助資訊圖表，能更快速地向使用者傳遞數據資訊；善用視覺特效，也能吸引使用者駐足閱讀內容，進而提高點擊，引導使用者完成網站的最終目的。
參考資料：商周學院圖像溝通術課程簡介
3）視覺層次的重要性
在資訊的傳遞上，大家都知道，一次清楚說明一件事（一個重點），是讓使用者聚焦的做法。
但因為網站本身即是一個乘載資訊的平台，要讓網站承載的資訊能被清楚理解不失焦，那搭配視覺設計，讓使用者一眼分出資訊的主次排序即是一個常見的方法。
例如，透過較大較醒目的設計來凸顯主要資訊，或者將重點資訊置於網站最前、最頂端，以確保使用者能更快注意到這些資訊。
換言之，運用較小的字級、或較柔和的設計來表現次要資訊，則可讓使用者自行決定是否詳閱。
如此運用視覺層次來區分資訊的主次程度，能夠讓網站的整體內容更加清晰易讀，也提升視覺設計在網站中的功能性。
4）具一致性、可一目了然的內容
在網站資訊面的設計上，除了可運用視覺層次來凸顯資訊的重要程度，但同時還是必須注意整個網站設計必須具有「一致性」。
具一致性設計的網站，即是針對網站中具同等重要性的資訊使用統一的字型、配色…等設計樣樣。如此一來，使用者即可一眼判別網站中的主次資訊，從中快速擷取重點內容，減少使用者在過成中探索所花費的時間成本。
在功能面上的設計亦同，通常我們建議讓使用者可一眼看到全部資訊，盡量避免收合或隱藏資訊的功能。若真的因資訊量過多，或其他原因要使用該功能，也務必讓此收合功能易於被發現，避免網站資訊傳遞不全，造成使用者理解困擾。
參考資料：網頁使用者體驗更優秀，遵循這7個原則吧！
5）改善頁面加載速度
在 4G 邁向 5G 的時代，快速成為大家追尋的目標，使用者對等待的耐心也逐漸消逝。
根據 Think with Google 分析，電商行動網站每多一秒，轉換率就會降低 20%。顯示每一秒的等待都讓使用者也在流失。
這也是為什麼 Google 要將網站速度列為網站評分標準的原因。
你可透過 Google Page Speed Insights 來測試自己的網站速度，並從分析中了解哪些地方可以再改善。
嘗試最佳化你的網站，減少網站負荷加速網站下載速度是非常重要的。
參考資料：五招打造流暢的行動網站體驗，速度決定你的品牌轉換率
applemint 在 UI、UX 上的堅持
applemint 在進行網站設計時同樣對於 UI、UX 不馬乎。
依循 applemint 過去經驗，通常在規劃一網站設計時，視網站規模大小，平均花費 4-8 小時進行案例蒐集與 UI、UX 企劃。
如果你有網頁製作需求，也認同 applemint 的理念，想給使用者一個美好的 UI、UX 網站使用體驗，歡迎點擊此連結，透過官網與我們聯繫。
從這裡聯絡 applemint！
