在這篇文章中，來自UXPin（一款使用者體驗設計的應用程式）的Chris Bank為我們帶來了最近在現代網際網路和移動應用中出現的一些優秀的使用者介面模式，並將通過例項展示如何將這些出色的UI設計模式應用到其他的網站和應用中。
畢加索曾說過（賈伯斯也曾引用過）： “Good artistscopy, great artists steal.” （通俗的譯文是，好的藝術家複製別人的作品，而偉大的藝術家偷竊別人的作品。）這是最令人費解和誤用的創造性短語之一，但在當下產品設計和產品發展趨勢已經爆炸的時代，這也是相當重要的一句話。
這句引語的爭議性來源於它的簡要，因此對於它的詮釋也具有一定的開放性。內容中對於複製和內在化，原創性和創新性，模仿和同化的區別沒有講明。然而，這不是懶惰的藉口。當然，應該鼓勵學習他人的作品，站在巨人的肩膀上設計自己的產品為特定的人群解決問題－為了那些你終端使用者。
UI設計模式－和線框案例，你準備好了嗎？
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做了一個線框案例。
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聯絡人的整合，讓邀請別人更加容易。因為在消費類應用中，口口相傳和相互推薦是消費增長的巨大推動力，你將會看到更多類似的模式。
如果時機合適，請大膽借鑑。。。
不要害怕借鑑或模仿這些設計－但是你要學會如何把他們變成自己的設計，為你的使用者解決實際的問題，讓他們熱愛你設計的產品。
因為產品的設計趨勢變化很快，各種裝置也從網站到移動應用日新月異，你需要更綜合地思考如何設計產品。所幸的是，很多人和你一樣在做同樣的事情，因此已經有很多案例可以學習，包括上文中我們舉出的案例。
為了結束這個話題，我最後想說的是－設計原則。線上框案例中的設計原則，將會助你設計更好的線框，更完美的產品。