3分鐘搞懂 UIUX 到底是什麼？為什麼網頁設計無法避免 UIUX？

UI 和 UX 是什麼

簡單說明經常聽到的 UIUX 是什麼東西，我們雖然口語化都會說 UIUX，其實 UX 應該要擺在 UI 前面，先知道要體驗什麼，然後才畫出符合需求的設計稿。

• User Experience

  UX 是 User Experience 的簡稱，中文翻譯為使用者體驗。最大目標就是「使用體驗舒服順暢」及「您希望使用者體驗什麼」，進而降低使用者的跳出率。這得仰賴設計師的智慧與經驗，訪談業主引導業主說出自己最核心的想法，及各頁面希望出現哪些內容。

  • 使用體驗舒服順暢

    大部分基本該做到的體驗，可以參考世界通用的操作慣例，多看看別人的網站，每個功能都擺在頁面內符合直觀邏輯的區塊，讓網站使用起來很簡單、可以輕鬆找到自己想找的東西，這樣就算是有把握基本分數。

    舉個例子，您應該很習慣進入網站能夠在最上方、左上、右上找到導覽選單，像是麥當勞官網的電腦版和手機版，但如果您今天進入網站發現找不到，結果導覽選單是埋在頁面中間的區塊，甚至要點擊某個展開按鈕才看得到，想必您會感到一陣困惑「天啊！這是要我怎麼樣」，這就是體驗。

    不僅是區塊位置，文案的排列也是體驗的一環，像是您正在看小弟寫的這篇文章，如果我沒有條列式、沒有適當標點符號、沒有分段，您還會看到這裡嗎？這就是體驗。

    以上僅是簡單情境，如果是購物車動線、退換貨動線、優惠券動線、內部工具條件規則...等等，甚至是您目前想都沒想過的功能，那就真的是燒腦大考驗。

  • 您希望使用者體驗什麼

    您最希望使用者體驗到的項目，必須安排在最先接觸到的地方，而且沒有違和感。網站內的所有項目，您心中會有個希望使用者體驗到的順序，最大概率產出您想要的結果，可以說是考驗經商之道。

    例如「註冊、逛商品、加入購物車、金流結帳」這幾個功能頁面，我連想都不用想就能知道您最想要使用者體驗金流結帳，但我們總不能這麼直接硬來，至少得先吸引使用者註冊、看到喜歡的商品。想要先讓大家註冊，可以主動跳出優惠券訊息「現在註冊贈送現金券」；想要先讓大家看商品，可以主動跳出最新商品或熱門商品，甚至是寫演算法跳出使用者可能喜歡的商品。

    再舉個例子，如果您是類似591房屋交易那樣的資訊搜尋平台，您的首頁最上方可能就不是輪播圖，而是搜尋引擎，優先讓使用者感受強大搜尋能力、感受平台的核心價值。

    這些舉例都在呼應剛剛提到的經商之道，您希望使用者此刻最先體驗到什麼項目，對您的生意最有幫助。

• User Interface

  UI 是 User Interface 的簡稱，中文翻譯為使用者介面。具象化 UX 階段的結論，將腦袋裡面的想法畫成眼睛看得見的設計稿。

  • 風格定調

    網站想要中規中矩、前衛潮流、溫馨路線、日式風格等等，可以提供參考網站話會更具體。接著所有步驟都會依照定調後的風格進行。

  • 元件設計

    網站內會使用到的按鈕、線框、字型等等，都需要統一風格。假設每個頁面的加入購物車按鈕都長不太一樣，可能就會不太美觀，工程成本也會比較高。

  • 區塊排列

    將每個頁面的內容排得漂漂亮亮，符合操作邏輯。會優先考量 UX 定出的方針，例如剛剛提過的，首頁最上面通常會放輪播圖，但也有可能放搜尋引擎。

UI 和 UX 的區別

確實兩者經常會部分重疊，更精確一點的說明，UX 注重「用起來什麼感覺」，UI 注重「看起來什麼樣子」，術業有專攻，彼此技能不一定同時具備。我可能網站經驗豐富，但我不會畫圖；我可能很會畫圖，但接觸網站類型不夠多。

舉汽車品牌的 Benz 和 BMW 為例，如果我是 UX 就會說「Benz 要尊榮感、BMW 要駕馭感」，如果我是 UI 就會考慮「這樣的話 Benz 外型要如何設計沈穩精緻才能呈現尊榮感、這樣的話 BMW 外型要如何設計霸氣狂野才能呈現駕馭感」。

為什麼需要 UI 和 UX

直接講一講就開始切版不行嗎？不行！沒經過 UIUX 階段就直接進入工程，往往會造成悲劇一場。一定要先設計好藍圖再開始施工，不能邊施工邊設計藍圖，我們目前接手的專案，還沒看過避掉 UIUX 直接進入工程能夠全身而退，往往只是便宜前面、貴了後面。比較輕微的圖文修改還能多花點錢處理，如果是比較嚴重的動線邏輯可能會不知從何改起，最後不僅總成本更高，還會覺得心力交瘁。

結尾

文章寫了好多字，其實沒那麼複雜，我們會引導您提供想法，關鍵決定交給您定奪，剩下就由我們統整成適合網頁的方式。整個網站設計要紮實的從 UIUX 階段開始走，這時候溝通發現不對，要調整都很簡單，也能夠幫助您確定網站是遵循您的想法在走。