如何確保合作順利？ UIUX 設計師從「問問題」開始
2023 年 4 月 10 日
簽約後發現設計師達不到設計要求，實務上該處理？
2023 年 5 月 10 日
為什麼設計師聽懂了需求，做出來的還是跟我想的不一樣？（下篇）
前期溝通、討論、發案、簽約，各個步驟都沒什麼問題，和 UI/UX 設計師的合作模式也協調好了，你覺得接下來就是效率高峰期，應該可以把這個案子順順利利解決掉！
結果合作一個月後，你發現自己提出的功能或排版，常常最後都被設計師改掉……
雖然設計師提出的替代方案也沒有不對，但就是不能理解為什麼自己的想法不可以，設計師給出的理由也常常聽不太懂，後續被主管質問時，也無法交代清楚，甚至沒辦法解釋進度有點落後的原因是什麼……
如果與接案設計師合作時，你有遇過上述的問題，可以參考這篇文章，試著判斷設計師給的修改理由是不是合理呦！
好設計的共同特徵
有解決目標受眾的問題
大家或多或少有使用過 Uber 或 Uber eat 吧？
這種預約租車或外送服務，對於使用者來說，「預測等待時間」是一個很重要的功能。
所以這類型的 APP 會提供即時地圖，顯示司機或外送員在哪個路口，還有多少距離，以及還要多久才會到。
這樣的設計就解決了有急迫需求的使用者，確定下午茶真的在路上，或是確定來得及趕上飛機。
我自己前期使用 Uber eat ，發現付款選擇 PayPay 時，若是帳戶內金額不足，結帳後訂單會自動失效，但 UX 上並沒有提示這一件事情，甚至還出現了「準備中」的 GIF……所以當時的我以為麥當當早餐有訂成功，一直到 10:30 以後才發現下單失敗，在家裡欲哭無淚吃不到QQ
然而，這個付款失敗不清楚的設計，似乎並沒有影響到 Uber eat 的使用率，這個 bug 後來有被默默(?)解決，我也依然是他的忠實用戶 (麥當當太遠了只有他們願意送…)，Uber eat 也依然被視為一個「好設計」。
這個故事告訴我們，產品設計總是會出現 bug，但只要解決 20% 的 bug，就可以滿足 80% 的用戶。設計師需要確保的，就是讓 80% 用戶都在意的功能正確無誤，而那個付款餘額不足的問題，大概就是極端問題吧哈哈。
假設想要架設一個音樂推薦平台，那設計重點應該就會在挑選音樂的邏輯、使用者操作習慣、註冊與付費流程的便利性等等。如果希望在這個音樂推薦平台中，順便賣樂器，以增加額外營收，設計師應該就會打你槍了。
畢竟現在的目標受眾是要「聽音樂的人」，而不是想「演奏音樂的人」。即使概念上都和音樂相關，產品的架構卻完全不同。若認為只要和「音樂」相關的事業都可以加進來，只會把設計範圍無限擴大，最後產品大概也會變得四不像，甚至是胎死腹中。
符合產品風格
最近接的設計案，由於案主有很多案子集體發包，但設計師們都必須匯報回同一個頁面，所以我也可以看到其他設計師的作品。
近期看到有設計師要做貓狗的寵物用品電商平台設計。這個主題本身沒有什麼問題，市面上也有很多類似的電商服務，所以應該可以找到很多參考資料。
結果我看到設計師最後生出來的設計稿，是一個俐落粗體風格，並使用黑白色系的網站設計，大概可以想像成 NIKE 的頁面在賣貓貓用品 (??????
我是覺得這種風格大概只適合用來賣大麥町的相關商品吧? (超失禮)
我不清楚有這樣的設計，到底是案主的要求，還是設計師的個人偏好……
但看了這位設計師的其他設計後，我應該會傾向相信是案主的要求……
寵物給人的感覺是溫暖、愛心、陪伴，那麼設計的風格就應該以這些關鍵字出發，基本上應該會選擇溫暖色調的粉紅、粉橘，如果不喜歡暖色調，大概也會選擇比較清新的色系，例如天藍、淺綠、鵝黃等等。
產品給人的第一印象，應該要和主要服務有密切關聯性，當案主提出的風格和主題不搭時，設計師就很有可能會提出疑問，並嘗試說服案主調整。
符合使用習慣
設計師如果有時間，有時候會進行現有產品的「再設計」練習 。
我最近進行了一個線上工具的「再設計」練習。會選擇這個產品，是因為在使用的時候，總覺得頁面空空的好奇怪，但又覺得也許是因為剛開始，所以沒有數據可以顯示。
直到開始要新建資料的時候，看到新增按鈕，瞬間知道怎麼回事了。
這個產品是先做了手機版，後來才調整成電腦版，而且元件沒有依照使用者習慣更改。
「新增按鈕」這個元件，在手機上，常常是一個「＋」的符號按鈕而已，但在電腦上，會是「新增」或是「+ 新增」這樣的按鈕設計。
而我在電腦上看到了「＋」的按鈕，瞬間在想：這是一個裝飾還是一個按鈕？如果是一個按鈕，為什麼長這麼奇怪？
當使用者開始懷疑自己的操作和基本認知的時候，就不能說這是一個好體驗。
除了按鈕以外，前面提到「頁面很空」這個問題，會需要針對空白狀態另行設計。簡單來說就是在沒有資料的時候，會顯示一些替代資料。例如購物車內沒有東西的時候，可能會顯示一個購物車的圖示，再加上一段文字「沒有加入任何商品」。
而這個產品沒有針對空白狀態做任何的設計，所以我第一次使用的時候，完全不知道這個空白的頁面如果不是空白的，應該會呈現哪些資訊。
這是一個不符合使用習慣的例子，因此後續設計的重點，就放在手機版和電腦版應該有的視覺和元件差異。
若案主提出的要求不符合使用者習慣，設計師就有可能提出修改建議喔！ 例如案主希望在購物網站的結帳步驟中，預設勾選「使用 Google Pay」，如果目標受眾很明顯都有 Google Pay，這個設計就蠻合理的。但事實上，應該不太可能會根據這樣的條件選擇受眾，所以最好的方式應該是預設勾選普遍大家都會有的「信用卡」，甚至是沒有預設勾選，讓使用者自行勾選即可。
易於工程師開發
在產品開發上，工程師大部分會希望東西「整齊」、「有一致性」，才會比較好進開發。因為工程師會使用網格去對齊物件，也會設定使用的顏色、字體、間距等等類似工具庫的東西，然後在開發的時候，會直接拉工具庫裡的東西來用。
另外也有很多開發專用的框架，例如 Bootstrap 和 Tailwind，這些框架裡面都已經有預設好的字體、顏色、元件，設計師只要拉進來改一下就可以用了。
以上的開發方式算是手動切版，工程師也可以使用 Wordpress 之類的架站服務，雖然 Wordpress 也可以寫程式碼，但大部分還是會使用裡面的功能進行開發。但就是因為使用了架站服務，當然就沒有手動切版這麼彈性，所以會更希望排版一致、使用的元件等等也一致。
簡單來說，易於工程師開發的設計，包含了「清楚的網站架構和流程」、「符合固定倍數的間距」、「制定好的設計系統和元件」等等。
如果案主突發奇想，希望這一頁的表格排版使用 A 方案，另一頁的表格排版使用 B 方案。明明是類似元件，卻要用完全不同的呈現方法時，即使兩種設計都沒有問題，有經驗的設計師還是會建議使用相同的設計就好，減輕開發上的負擔。
維持產品一致性
現在很多大品牌，除了網頁之外，也會開發自己的手機 APP，例如星巴克有點單 APP、銀行也有數位銀行 APP。
以星巴克為例，星巴克的雙尾美人魚是大家都熟知的 LOGO，企業主色則是較深的綠色。如果星巴克的點單 APP沒有那隻美人魚作為企業識別，然後使用咖啡色作為主色進行設計，一般消費者都會覺得這是個詐騙 APP 吧？因為整體設計和消費者的既定印象不符合，這就是為什麼產品需要維持一致性的原因。
我之前待過一家電商公司，他們想要設計一款把「轉運」、「代購代拍」、「商城」三個服務整合在一起的 APP，三大服務的流程都不太一樣，然後三大流程的主色也都不一樣，然而彼此間還是有資料是共用的。其實這樣的設計我認為會讓使用者非常困惑，可能會不知道自己在哪個服務介面，也很難搞清楚整個系統的使用邏輯。
總之，不論是每個句子的口氣、每個 icon 的設計風格、每頁的色彩應用、每個相同位置的間距大小等等，都應該要有一定的規則，讓使用者能夠沈浸在整個使用者體驗中。
如何確定設計走在正確的道路上
想實際驗證目前的設計對不對嗎？如果不想只聽設計師的片面之詞(?)，也許還可以嘗試以下的方法：
使用者研究
想知道目前的設計是不是有解決目標受眾的痛點，最直接的方法就是去問他們！
不管是發問卷，還是比較耗費心力的使用者訪談，或是需要另外準備的測試用設計原型，都可以知道現在這個設計，是不是使用者想要的。
「使用者研究」可以在前期訂定需求的時候使用、可以在設計中期，確認設計方向正確的時候使用、也可以在產品迭代更新的時候使用。
但使用者研究比較勞心勞力，很少會有公司願意每個階段都進行研究，反覆確認使用者的需求。
A/B 測試
相信大部分的人都有使用過 Facebook 吧？Facebook 就是很常進行 A/B 測試的產品。
簡單來說，同一個介面，用你的手機看，和用另一個人的手機看，可能會有不同的資訊或排版。例如用我的手機看朋友 A 的個人頁面，朋友的大頭照是圓形，下方有他的限時動態；用另一個人的手機看朋友 A 的個人頁面，朋友的大頭照是方形，下方出現的是精選照片。
這就是 Facebook 正在進行 A/B 測試，主要目的可能有「測試原有設計和新設計，會如何影響使用者的行為」、「有兩個新設計，想試試看哪個成效比較好」。總之就是釋出多種版本的設計，然後在後台就可以知道哪個設計比較能夠引導使用者作出我們期待的行為。
結語
其實設計沒有絕對的對與錯，常常是依照不同情境下而進行的判斷，而情境又經常變化，更不要說每年流行的設計趨勢都會變動，所以現在覺得好看的設計，也有可能過兩三年後再回頭看，會覺得這個設計很老氣。
現在回去看學習過程中最早做的幾個設計，我也會不想承認那是我做的哈哈。
但上述的分享不論是以前還是現在，應該都是可以參考的，畢竟每個設計都是為了使用者而設計，他們用得開心，案主、工程師、設計師、PM 就會覺得這些心血沒有白費了吧！
該篇文章的上集，請參考「設計稿和我想得不一樣！設計師怎樣才聽得懂我的需求？（上篇）」
如果真的很不幸的，你覺得設計師真的達不到期望，也可以參考「簽約後發現設計師達不到要求，該怎麼辦？」這篇文章的做法喔！
