來自 UXPin（一款用戶體驗設計的應用程式）的 Chris Bank 為我們帶來了最近在現代網際網路和移動應用中出現的一些優秀的用戶界面模式，並將通過實例展示如何將這些出色的 UI 設計模式應用到其他的網站和應用中。
畢卡索曾說過（賈伯斯也曾引用過）： 「Good artistscopy, great artists steal.」（通俗的譯文是，好的藝術家複製別人的作品，而偉大的藝術家偷竊別人的作品。）這是最令人費解和誤用的創造性短語之一，但在當下產品設計和產品發展趨勢已經爆炸的時代，這也是相當重要的一句話。
這句引語的爭議性來源於它的簡要，因此對於它的詮釋也具有一定的開放性。內容中對於複製和內在化，原創性和創新性，模仿和同化的區別沒有講明。然而，這不是懶惰的藉口。當然，應該鼓勵學習他人的作品，站在巨人的肩膀上設計自己的產品為特定的人群解決問題－為了那些你終端用戶。
Dropbox 和 Carousel，以及幾乎所有應用中都設有「黏固的」導航，這已經是一個通用的行動裝置用戶界面的設計模式。通過這種設計模式，用戶在瀏覽過程中無需再一路滾動返回到先前主題。例如許多應用程式已允許用戶觸按行動裝置屏幕頂部的區域以實現快速返回到頁面最上端這一功能（因此用戶不需要再一陣長翻頁來回到頁面頂部）。但與 Pinterest 中設專門有「scrollto top」標籤的做法不同的是，在大多數應用程式中通常對於這一項功能都沒有明確的視覺指示。作為一個網頁開發者，沒有必要將所有用戶所需的相關連結都放到頁面上。現在，許多傳統的固定檢索已經可以被直接加載到任何頁面或視圖中了（以前可能只有導航頂部才有）。如下圖中的 Dropbox 和 Carousel，以及上文中我們已經討論過的 UXPin 線框圖。
垂直導航（雖然不是標準模式）是網頁和手機應用中常用的視圖方式，如 Facebook 和 Mailbox。垂直導航這種交互模式除了幫助用戶尋找有關產品、企業的信息和數據外，通過一個流動式的單獨頁面，用戶可以在應用中自由切換到網頁的其他模塊。抽屜式就是垂直導航的案例之一，現已被廣泛應用在行動裝置的 UI 設計中。
和切換（toggling）相類似，抽屜式是一種UI設計趨勢，考慮到行動裝置屏幕的約束以及用戶對於速度的需求。在應用中，每一個滑出式的抽屜都是一個獨立的「層次」，其實並沒有太多限制，我們依舊可以看到很多多樣的設計，包括一些可怕的設計。
Yelp 就是一個試圖將所有相關連結都排布在程序頁面上的典型案例。儘管他們UI設計模式中的功能很詳盡，在電子刊物中似乎想要用盡所有可能的交互方式，例如滑動，點按，框選，撤銷，返回等等。但事實上，諸如此類包含很多內容的應用程式的模式，如 Flipboard，有時反而會使程序應用更加混亂。下圖中，我們用 UXPin 為這種設計模式製作了一個線框分析。
Carousel 中不僅有一個可視的滾動操控條，在其底端還有一個很明顯的控制條，這使用戶可以很愜意地在百萬張照片中自由瀏覽。隨著由用戶自行產生的內容、動態、群組、列表越來越多，更多創新的 UI 設計模式也會超越傳統的搜索方式以幫助用戶及時找到他們想要的內容。
在 Tinder 應用中，內容之間的切換是無縫響應的，用戶只需要通過點擊視圖界面中的主圖就可以切換到該圖的詳細信息頁，再通過點擊圖片回到原來的基礎頁。這種UI設計模式為用戶創造了極致流暢的、本能的用戶體驗流程。同樣，在 OKCupid 中也用到了這種方式。
在 Uber 中，僅通過橫縱向拖曳的方式，用戶就可以很流暢地在四類汽車接送服務中切換。這種 UI 設計模式還可以讓用戶看見可選擇的車輛數量，並通過放大和縮小畫面來了解選擇地區的車輛密度。
當用戶選定了一種接送服務後，通過敲擊按鈕可以在預訂的同時還可以查看到相應的預估費用。這是一個非常簡單但很重要的設計，因為每當我們在預訂接送時，還會做一些其他的事情，這個費用查看設計可以讓我確保 Uber 沒有隨意改動價格。
RelateIQ 用壓低主菜單的方式以快速突出副菜單的導視。RelateIQ 屬於目前市場上最複雜的公司移動應用之一，因此他們要與現有的、新的應用的 UI 設計相區別，帶給用戶快速、清新、簡易的體驗，同時不以犧牲他們的產品信息為代價。
Snapchat 中可以發現隱藏的信息－點按 snapshat 頁眉－可以看到已接收信息和未讀信息的數量。這難道不是一個很簡易的UI設計嗎？
Yelp 應用中，向下拖動頁面時，可以從具體的商家信息列表過渡到一張被掩藏在上端的半透明圖示。半透明式和響應式的設計創造了極好的體驗，這種方式也有可能是目前最鮮為人知但又相對高級的UI設計模式了。希望有更多設計師可以考慮運用這種方式！
在 Secret 中，用戶需要採取一些行動來發現導航欄－即右端滑屏，但這種 UI 設計可以最小使用抽屜式和滑出式，下面的連結中有我們用 UXPin 做的線框案例。
Linkedin 的 app 中，用戶可以在任何時候點按頁面左上角的 logo（通常是一個三線「漢堡式」菜單圖標）來獲取這個輔助導航。這種 UI 設計最初在 Facebook 的移動應用中流傳，隨後又被如 Path，Fancy 和其他類似的公司採用。這是一種將相對次要的信息隱於「側抽屜」中的一種簡單方式，不必擔心移動應用該如何分辨出最重要的信息。你只需要考慮如何當用戶訪問時，在這個「側抽屜」的每一個視圖信息中能讓用戶抓取到最重要信息。下方也有我們用UXPin做的線框案例。
Snapchat 是為用戶創造沉浸式體驗而採用最簡化導航群組的案例之一。在 Snapshat 中，四個傳統的菜單按鈕被更主要的 1-2 個按鍵圖標取代，這些圖示會隨著菜單視圖的切換而改變。然而在應用中切換菜單視圖也十分簡單方便，用戶可以通過點按這幾個主要的圖標，亦可以通過左右滑動屏幕。這是 UI 設計模式中十分獨特的實現方式，對於如此簡單純粹的操作方式，筆者在其他應用中鮮有遇見。
「卡片」模式是通過 Pinterest 應用而普及的，它是一種適應響應式設計趨勢，以一種非常優雅的形式排布錯綜複雜的社區反饋信息的，用以吸引用戶瀏覽網頁信息的設計模式。在「卡片」模式下，看起來無論任何碎片式的信息都可以被調配到「卡片」中。但是，也有很多「卡片」模式的實現方式實在很令人擔憂，尤其是 Pinterest 的一些所謂的競爭對手，它們除了（出於好奇心地）真正理解 Pinterest 使用「卡片」模式的真正緣由，其他各種嘗試幾乎都做了。筆者在 2013 年末事實上已經比較過他們的深層區別，在此我們也用 UXPin 為這個設計模式製作了線框案例。
Lyft 和 Yelp 應用以地圖作為背景視圖，這種在本地應用中賦予當地特性的方式可以加深應用本身的意義。隨著本地應用的普及，以及在地圖視圖上可以加載的層級信息增多，這種設計模式也必將成為一種趨勢。並且全面的體驗模式終將取代單一的形式，更多以視頻、圖片以及其他媒介為背景的 UI 設計模式也將廣為流傳。我們同樣用 UXPin 做了一個線框案例。
Facebook Messenger 和 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 和 Facebook Messenger 讓用戶只需通過向左滑動好友頭像就可以獲得應用的其他特性。在 Snapchat 中，用戶可以通過這種方式一次性刪除多個好友－我將其稱之為」消失的好友"。Facebook Messenger 中，通過左滑，用戶可以發現更多應用特性，包括一個名為「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 聯繫人的整合，讓邀請別人更加容易。因為在消費類應用中，口口相傳和相互推薦是消費增長的巨大推動力，你將會看到更多類似的模式。
不要害怕借鑑或模仿這些設計－但是你要學會如何把他們變成自己的設計，為你的用戶解決實際的問題，讓他們熱愛你設計的產品。
因為產品的設計趨勢變化很快，各種設備也從網站到移動應用日新月異，你需要更綜合地思考如何設計產品。所幸的是，很多人和你一樣在做同樣的事情，因此已經有很多案例可以學習，包括上文中我們舉出的案例。
為了結束這個話題，我最後想說的是設計原則。在線框案例中的設計原則，將會助你設計更好的線框，更完美的產品。
原文：[ UXPin CHRIS BANK ]
投稿和翻譯：[ 用戶體驗諮詢機構-BESD設計實驗室 凱利大帝 ]
同時也歡迎大家投稿原創文章和優秀譯文給我們。
微信搜索【企業App研究】，或通過下方二維碼快速添加：