那些經典UX 設計模式中容易遭到誤用的設計

如果你是位有經驗的設計師，你可能也會同意，在 UI 設計方面，將設計建立在他人之上，並不是竊取創意，而是共同研究什麼是最佳實踐、使用設計模式（Design Patterns）、遵守設計準則、透過模式確保你的用戶可以熟悉如何操作你設計出的UI界面。

有些人說，一味遵守設計準則、以及跟隨他人的腳步，是在扼殺創意，而且到了最後，所有的 App 看起來都一樣。從 UX 的角度，我則看到不一樣的問題。當你開始導入某些設計模式之後，可能會讓你覺得 Google/Facebook/Instagram/其他你喜歡的 App 就是你的目標，你也從未對此有所疑問。以下我們就會列出一些你可能會覺得是最佳的設計模式，而其實並沒有你所想的那麼好。

隱藏的導覽（Navigation）設計問題

我猜至少有五十幾萬篇文章討論過漢堡菜單（hamburger menu）設計，絕大多數都是設計師寫的，為此爭論不休。如果你都沒有讀過，不妨讀個其中一兩篇，但總而言之，問題不是在這個漢堡選單的圖示本身，而是關於這個設計把導覽行為隱藏到圖示之後。

具有彈性而且方便使用的側邊欄菜單設計

對設計師而言，漢堡包設計這套解決方案非常吸引人且便利，你再也不用擔心屏幕尺寸的限制，只要把整個導航菜單都塞到一個可以捲動、預設隱藏的選單中。

不過，實驗顯示，把各種功能選項直接顯示出來，是更能夠增加使用者互動、讓用戶滿意、以及獲得營收的作法。因此，現在所有 App 市場的大玩家都從原本的漢堡菜單設計，轉往讓功能更直接可視的方向移動。

Luke Wroblewski重新設計的Youtube導航

如果你的 App 的導覽行為很複雜，把導覽隱藏起來並不會讓你的設計對行動裝置友善。反之，你應該挑選出最重要的功能顯示。

圖標使用的問題

因為屏幕尺寸的限制，造成很多人不用思考，就儘可能的使用圖標代替文字以節省空間。在畫面中使用圖像可以使用比較少的空間，而且也不需要多國語文翻譯，而且人們都習慣使用圖標了，對吧？而且，其他所有 App也都這麼做。

因為心中有這樣的假設，不少 App 設計師於是把許多功能隱藏在其實難以理解的圖標之後。比方說，當你在用 Instagram 的時候，有辦法看懂你可以使用這個圖標按鈕來傳達信息給其他用戶嗎？

或是，假如你從來沒有用過 Google 翻譯，你覺得按下這個按鈕，應該會出現怎樣的功能？

假設你的用戶都很熟悉這些抽象的符號，或是假設他們願意花時間探索、了解這些抽象符號的功能，是種非常常見的錯誤。

Bloom.fm APP 中 標籤欄（Tab Bar）

如果你設計了一個圖標，然後你還覺得用戶看不懂，還得加上一個浮動的文字說明，就代表你的設計方向真的有問題。就算你做的 App 是 Foursquare，然後你的用戶一定得學會這個功能，一樣是個問題。

Swarm APP

這不代表你應該就不要用圖標。畢竟，也有不少用戶已經清楚理解的圖標，這些圖標絕大多數代表一些常用功能，包括搜尋、播放影片、email、設定…等等。（但其實用戶也可能不太能確定這個圖標的功能，比方說，當他按下愛心圖標的時候，不見得知道到底會發生什麼事情。）

一些大多數用戶能夠識別的icon

在設計一些複雜並且抽象的功能時，則應該要搭配適當的文字說明。在這類的狀況中，圖標仍然有其用途，因為圖示可以加強用戶在選單中辨識這些功能，並且可以呈現出你的 App 的獨特風格。

pixelmator

用圖標可以有效代表不少基本功能，但是當功能複雜時，使用文字說明會更有用。（而且，當你用了圖標，一定要做過使用性測試才行。）

手勢操作設計的問題

在蘋果 2007 年推出 iPhone 之後，多點觸控設計成了主流，用戶也學會了，他們除了單擊屏幕之外，還可以使用多指縮放以及滑動等手勢。手勢操作也在設計師之間便流行起來，並且有不少 App 做了手勢操作的設計實驗。

Clear app里的手勢操作

就像把導航隱藏起來、或是用圖標取代文字一樣，手勢設計相當吸引設計師，因為這樣做可以節省畫面空間（我們在畫面上就不需要放置刪除按鈕了，只要用戶用手指向左、或向右滑動。）

首先，我們知道各種手勢其實都是被隱藏起來的行為。人們需要額外記住這些功能,就像漢堡包設計的例子一樣：當功能被隱藏起來之後，就會讓愈少人使用這些功能。

此外，手勢操作跟濫用圖標有一樣的問題：有些手勢比較常用，像單擊點選、縮放以及捲動等等，但反之，有些複雜的手勢，需要用戶就不同的 App 額外學習。很不幸的，絕大多數的手勢操作，在不同 App 之間並沒有統一。?—?在觸控界面的設計中，這還是一塊很新的領域。就算是單指橫畫，在不同的郵件 App 中，也有不同的行為。

Apple Mail 中，向右滑動，會出現標記成未讀選項

在Mailbox app中，向右滑動，則會出現存檔郵件選項

甚至，當你搖晃手機的時候，也會有不一樣的行為。在 iOS 上搖晃手機代表還原上一動（Undo），但是在 Google Map 中，則是發送意見反饋。

千萬別忘了，手勢是被隱藏的操作行為，而且用戶要花上不少心力記憶。如果你是 Tinder 的話，你大概有辦法可以教育全世界往右滑動是什麼意思，但前提是：這個手勢操作，是你的 App 的設計概念的核心。

使用模態提示做為首次使用說明問題

首次使用說明（Onboarding）是門最近非常熱門的 UX 話題，代表的是用戶與你的 App 的第一次接觸。在許多例子中，首次使用說明通常代表的是在你的原本的界面上，加上一層模態提示（overlay），解釋每個功能的用途。

Discovery app中的模態視圖提示

為什麼這是一種很糟糕的解決方式？因為絕大多數的用戶都會掠過這些介紹提示，他們只想馬上開始使用你的 App。而且就算他們注意到了這些說明，他們只要一把這一層覆蓋提示關掉，也就馬上什麼都忘記了（特別是畫面中塞滿一大堆資訊的狀況下）。另外，加上各種標記，也不會讓你的介面變得更直覺。你要記得：

UI 就跟笑話一樣：需要解釋的笑話不是好笑話，需要解釋的 UI 也不是好 UI。

圖片來源：Startup Vitamins

首次使用說明可以用很多種不同的方法，變得對用戶而言更有用。比方說，打開 Slack 看到的第一個畫面，就在建立情境：他們做了簡單的自我簡介，主要強調使用這個 App 可以帶來什麽好處，代替用來說明功能的畫面。

另外一種更具互動、親近用戶的方式，則是使用漸進式的首次使用說明。在 Duolingo 裡並沒有解釋這套 App 如何運作，打開 App 之後，用戶就馬上就選好的語言進行一段簡短的語言測驗（甚至用戶都還不需要註冊帳號），因為讓人們學習的最好的方法，就是從做中學。而且，直接揭露這套 App 的價值所在，也是更有效加深用戶印象的方法。

還記得在 Mailbox 里的設計，橫畫手勢與 Apple Mail 不一樣嗎？他們也使用了漸進式的說明：用戶在實際開始使用 App 之前，首先要實際操作過一遍這些手勢。

在你開始在半透明的模態畫面上，設計各種箭頭標記之前，請先停下來思考用戶在第一次使用你的 App 時，到底應該要有怎樣的體驗。我們要聚焦在情境上。在絕大多數狀況下，一定會有比覆蓋提示更好的方法，可以用來歡迎你的新用戶。

充滿創意但是違反直覺的空資料畫面問題

缺少經驗的設計師往往會忽視空資料畫面，不過，空資料畫面會是營造整體 App 的使用經驗的重要一環。有些設計師，會把錯誤訊息或是空資料的狀態，當做是一張可以盡情發揮創意的空白畫布。

我們來瞧瞧 Google 相簿的空資料畫面：

Google相冊的空資料畫面

第一眼看下去，很不錯，對吧？妥當安排的版面編排、加上說明文字，上面還有漂亮的圖片。

我們再看一眼，就發現了一些奇怪的事情：

1.為什麼在沒有照片收藏（collection）的時候，下方會有一個這麼突出的搜尋按鈕？你為什麽會想要在空無一物中搜尋？

2.第二突出的畫面元素，則是上方一大張顯然不能按的圖片。（不過有些人可能會去按按看）

3.提示文字說，我應該去看看畫面上方的 + 號，真是有夠糟糕，為什麼不把「加入」按鈕就直接放在提示文字里呢？這段文字簡直就像「請按繼續按鈕繼續」一樣荒唐。

這樣的空資料畫面，顯然無法讓用戶了解當下的情境：

什麼是收藏（collection）？收藏為什麼有用？

為什麼我什麼收藏都沒有？

我該對此做些什麼？（如果我一定得做些什麼的話）

當我們講到創意的時候，少即是多。下面這個空資料畫面的範例則在有用這個面向表現非常出色。（我們姑且先忽略「請按下方按鈕」這段話）

Lootsy的空資料頁面

請別忘了，空資料畫面（或網站的 404 頁面）並不只是一個發揮視覺美感或品牌個性的地方。空資料畫面在 App 的可用性上也扮演了重要的角色。請讓他們變得更直覺。

每時每刻，都要有質疑的精神！

請不要誤解哈：各種設計模式與最佳實踐，仍然還是非常有用的，畢竟是經過很多次試驗總結得出的。但你需要明白每個 App 的用戶屬性都是不同的，某套設計在某個 App 可能成功，但是在你的 App 中可能會失敗。沒有什麼設計可以放諸四海皆準。而且，你始終無法搞清楚為什麼某個 App 之前會用那種方式設計。

你要自己思考，你要做自己的設計，你要做自己的研究，測量、測試、檢驗。如果你的想法有道理的話，也不需要畏懼違反既有的準則。

原文轉自：https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570#.fvozkrdn5

本文發佈於設計夾。未經許可，禁止轉載。轉載請聯繫微信sezign01，得到允許保留出處和作者信息

推薦閱讀：