移動互聯網用戶體驗設計經驗集錦-12.怎麼從眾多的優秀 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做的線框案例。