移動互聯網用戶體驗設計經驗集錦-12.怎麼從眾多的優秀 UI 設計案例中思考和學習（下）

05-06

Snapchat是為用戶創造沉浸式體驗而採用最簡化導航群組的案例之一。在Snapshat中，四個傳統的菜單按鈕被更主要的1-2個按鍵圖標取代，這些圖示會隨著菜單視圖的切換而改變。然而在應用中切換菜單視圖也十分簡單方便，用戶可以通過點按這幾個主要的圖標，亦可以通過左右滑動屏幕。這是UI設計模式中十分獨特的實現方式，對於如此簡單純粹的操作方式，筆者在其他應用中鮮有遇見。

「卡片」模式是通過Pinterest應用而普及的，它是一種適應響應式設計趨勢，以一種非常優雅的形式排布錯綜複雜的社區反饋信息的，用以吸引用戶瀏覽網頁信息的設計模式。在「卡片」模式下，看起來無論任何碎片式的信息都可以被調配到「卡片」中。但是，也有很多「卡片」模式的實現方式實在很令人擔憂，尤其是Pinterest的一些所謂的競爭對手，它們除了（出於好奇心地）真正理解Pinterest使用「卡片」模式的真正緣由，其他各種嘗試幾乎都做了。筆者在2013年末事實上已經比較過他們的深層區別，在此我們也用UXPin為這個設計模式製作了線框案例。

Lyft和Yelp應用以地圖作為背景視圖，這種在本地應用中賦予當地特性的方式可以加深應用本身的意義。隨著本地應用的普及，以及在地圖視圖上可以載入的層級信息增多，這種設計模式也必將成為一種趨勢。並且全面的體驗模式終將取代單一的形式，更多以視頻、圖片以及其他媒介為背景的UI設計模式也將廣為流傳。我們同樣用UXPin做了一個線框案例。

FacebookMessenger和Instagram都採用圓形視圖來勾勒用戶縮略圖，這種形式從某種程度上說是從Google+中推廣而來，後又被Path加以改善的。雖然相較於傳統方形縮略圖，圓形模式除了徒增了一些變化外沒有明顯其他的得益處，但是作為一種「生活調味劑」式的改變，圓形用戶縮略圖還是受到了廣泛歡迎。我們同樣用UXPin做了一個線框案例。

Secret認為界面中的元素之間應該不留白邊，採用相互堆疊的全出血（無邊距）圖片，在它們的頂端放置一些重要的信息。從某種意義上說，這些圖片也充當了背景的角色，而且相較於Pinterest，這種不留白邊的模式，可以減少易分散用戶注意力的設計細節。

Pinterest和Sptify告訴用戶可以通過點按由「＋」轉變為「x」符號來分別完成「添加關注」以及「取消關注」的操作。這種UI設計模式節省了頁面空間，使得撤銷操作很方便迅捷，同時也是一個有趣好玩的解決方式。

在移動應用中，元素轉變和切換動畫是十分重要的。你可以1）完全用另一個具有不同功能的符號替代，如「添加」和「取消」，2）直觀地連接元素，如當用戶點擊放大一張圖片時漸隱四周的元素，3）給予一個視覺反饋，如在可拖動的標籤之下置於一個透亮陰影。

Asana（2008年達斯廷·莫斯科維茨離開Facebook，與賈斯丁·羅森斯坦一起創辦了Asana，一款為了改善團隊交流和協作方式以提高工作效率的任務管理類應用）中，用戶可以直接操控內容，例如在其網頁版中，通過滑鼠「點擊並拖移」或利用快捷鍵的方式拖動任務條；在移動應用中，通過「點按拖動再放置」的方式將任務放置到任意一處用戶想放的位置（這中方式可以有效替代鍵盤快捷鍵操作）。如果用戶有非常多的任務需要完成，那麼也許其他的模式會更好。但對於大多數用戶來說，這種模式可以很有效滿足用戶以幫助他們重新安排任務列表。我們用UXPin為這個設計模式製作了線框案例。

Tinder和Carousel利用可拖拽的圖片讓用戶完成點贊、分享或者隱藏等操作。Tinder上大大的按鍵讓用戶在任何時候都可以明確、快速地選擇。在Tinder中，將照片拖動至右側或者點擊右邊的愛心表示「贊」，將照片拖至左側或者點擊左邊的叉表示」不喜歡」。在Carousel中，上滑圖片表示分享，下滑圖片表示隱藏。這個「贊或不贊忙不停」的UI設計模式，作為Tinder應用的核心模式使其成為了最出名的案例之一。我們用UXPin為這個設計模式製作了線框案例。

在郵件類應用中，側滑動作因Mailbox而被廣為使用。通過側滑，用戶可以標記已讀郵件，分別管理後續的各項郵件操作。這種UI設計模式很受用戶歡迎並且很高效，難怪Mailbox在上線僅一個月後就被Dropbox以1億美金收購。

Instagram讓用戶發覺更快速的操作方式，例如雙擊圖片點贊而不是往下滾動點擊「贊」的按鍵。其實我個人不太喜歡沒有撤銷命令的UI設計模式，但至今為止，這是唯一看到通過輕擊圖片內容來標示的案例了。我相信許多實際很醜的圖片會被意外地喜歡也是因為這個方便的點贊模式。我們用UXPin為這個設計模式製作了線框案例。

Snapchat和FacebookMessenger讓用戶只需通過向左滑動好友頭像就可以獲得應用的其他特性。在Snapchat中，用戶可以通過這種方式一次性刪除多個好友－我將其稱之為」消失的好友"。FacebookMessenger中，通過左滑，用戶可以發現更多應用特性，包括一個名為「more」的子菜單。有趣的是，用戶可以在「delete」中選擇存檔或是刪除對話這兩項功能，在大多數UI設計中，用戶是沒有這樣的選擇的，存檔選項往往是在「more」的子菜單中。我們用UXPin為這個設計模式製作了線框案例。

Secret讓用戶以發現新菜單的方式發現新的操作命令。左滑為「贊」，但右滑並不是「不喜歡」，而是一個隱藏菜單。我個人很喜歡這個模式雖然它與通常的模式不同，甚至需要一些腦力去記住右滑是一個菜單而不是「不喜歡」或者「隱藏」。

Secret在創建內容頁面上有一些「可被發覺的」工具。在用戶上傳一張圖片之前，左右滑動可以改變背景顏色，上下滑動可以改變樣式。當用戶上傳一張圖片後，這些操作動作會更形象生動：頁面右邊從上滑向下方，可以使頁面變暗；頁面左邊上下滑動可以改變圖片飽和度；左右滑動改變圖片清晰度。應用中沒有其他具體的控制鍵會告知用戶有這些改變－也不應該有。這是一種基於用戶直覺的，簡約的UI設計模式，你必然會遇到更多。

越來越多的應用會為用戶提供好友列表，Snapchat和Yelp便是如此。無論是一對一的交流還是追隨某人的品味和偏好，無論是網站還是移動應用的體驗，都需要好友的參與，用戶探索他們的朋友圈的方式也將變得更加全面整體。我相信社交圈的UI設計模式將會遵循一個與現有UI設計模式相似的軌跡，因為平均每一位網站或移動用戶至少有數以百計的朋友和數以千計的跟隨者。

Songkick和Flipboard是讓用戶擁有良好「follow體驗」的案例。無論用戶是否有好友，都會不斷自行產生新的可關注內容。與好友列表將成為一個越來越重要的UI設計模式的原因一樣，良好的「follow體驗」也同樣重要。

Quora和Venmo是我最喜歡的活動諮詢反饋應用，因為「學習」和「收穫」是人生中兩件很重要的事情。我對大家討論的各類話題以及提出的有意思解答可以看得入神，感謝這個UI設計模式，我可以收穫很多。

Carousel、Instagram，以及其他一些應用會提供聊天或直接對話體驗，這是作為整個應用體驗的一部分。私聊的UI設計模式將繼續時興，由於用戶會越來越適應在網上分享更多私人信息，私聊將不再僅僅是傳統的「社交網路」，而會產生更多更廣的內容與服務，甚至是財務交易，如Venmo。

Medium，如其他許多應用一樣，併合使用了「分享」小工具，通過一個單獨的分享圖標，帶給用戶完美的體驗和明確的分享操作指示，忽略那些分享到的地方，這對我來說是一個雙贏的UI設計模式。

YouTube和幾乎所有都應用都是讓用戶贊（或是不贊）這種二選一的形式，而不是用打星或者其他的評級方式。雖然乘車共享應用如Uber和Lyft目前在用評級系統，但最終他們會更趨向於二選一的評定方式－即接受或者不接受駕車。因為這是最為簡練地在網站或移動應用中組織內容的方式之一，這種方式會繼續持續下去－我個人希望標籤的組合可以讓用戶不費更多的力氣就可以分別發現他們最喜歡的喜劇演出和音樂視頻。我們用UXPin為這個設計模式製作了線框案例。

Youtube和Facebook Messenger讓用戶群組相似的好友和內容。因為內容有很多形式－包括好友檔案－並在不斷增補變化，也需要用戶有一定的組織統籌能力。我對如何讓這些不同的應用最終融合成另一個，並有一組新的UI設計模式而感到有些好奇。

Venmo通過手機和email聯繫人的整合，讓邀請別人更加容易。因為在消費類應用中，口口相傳和相互推薦是消費增長的巨大推動力，你將會看到更多類似的模式。

如果時機合適，請大膽借鑒。。。

不要害怕借鑒或模仿這些設計－但是你要學會如何把他們變成自己的設計，為你的用戶解決實際的問題，讓他們熱愛你設計的產品。

因為產品的設計趨勢變化很快，各種設備也從網站到移動應用日新月異，你需要更綜合地思考如何設計產品。所幸的是，很多人和你一樣在做同樣的事情，因此已經有很多案例可以學習，包括上文中我們舉出的案例。

為了結束這個話題，我最後想說的是－設計原則。在線框案例中的設計原則，將會助你設計更好的線框，更完美的產品。