交互設計往往對用戶體驗起著決定性作用，其重要性不言而喻。

不管是移動應用的還是Web端的設計，交互設計對用戶體驗來說有著決定性的作用。遵循各自的設計模式和平臺規范是最基本的設計原則。不同的框架承載不同的內容和設計目標，表達了不同用戶獲取信息的方式和行為，也表達了一些商業上的目標和意圖。任何應用的基本信息組織邏輯都會以某種類似的層級框架來設定。在層級框架圖片上的每塊內容對用戶的優先級和重要性是不一樣的，同時手機界面的空間是有限的。

移動端產品設計模式：

設計模式-導航

一般有標簽式導航，分段式導航，舵式導航，抽屜式導航和下拉菜單式導航。

• 標簽式導航：ios端的標簽式導航常放置在底部，而安卓在頂部。這也是最容易區分ios和安卓界面的區別點。安卓放置在頂部是為了和安卓系統自帶的虛擬鍵區分，放置出現誤操作的現象。常見的標簽式導航數量一般不超過5個。
• 分段式導航：例如QQ。一般只分2-3個分段狀態。體積小，屬于ios的標準控件，但一般不適合做一級導航，常常和一級導航嵌套使用。同時安卓并不推崇這種控件。
• 舵式導航：例如美拍和早期的INS都是這種導航，是標簽式導航的變種，在其基礎上有強調了核心功能。一般圖片社交的APP比較常用。
• 抽屜式導航：可以隱藏不重要的功能，讓用戶專注于重要的功能。例如打車軟件，滴滴Uber等等，減少主界面的控件數量。在Meterial Design安卓5.0中，也比較推崇抽屜式導航。但是抽屜式導航也有很大的缺點。對于不太重要的功能相比標簽式導航來說，點擊率將會大大降低。
• 下拉式導航：在安卓4.0的時候比較流行，現在已經很少見了。但是能和滾動式標簽導航互補。

沒有最完美的導航只有最合適的導航。只有從需求出發，找到符合產品定位的導航才能給用戶帶來更好的體驗。

設計模式-列表

列表相對來說更好理解，現有市面APP種類繁多，隨手翻幾個APP都可以看到各種各樣的垂直列表，輪播面板和網格列表等等。垂直列表簡單清晰易于理解，適合功能層級比較淺，功能切換不頻繁的主導航。輪播面板更適合瀏覽體驗式的產品，常見于各種Banner的推廣頁。網格列表功能扁平化，能充分利用界面，適合二級導航。支付寶和微信的錢包頁面就是常見的網格列表。

當然還有其他更多的瀑布流，時間軸或者對話框等形式多樣的圖文結合的列表模式。沒有一個產品是只有一種列表模式的，合理根據產品的應用場景和需求出發，結合使用才會更好。

web端的設計模式

網頁端的產品種類較多，但基本要素相似。logo，登錄和注冊，搜索，一級導航，個人信息等等通常放置在頁面的頂層。而主要內容則根據不同類型的網頁產品通過不同的頁面布局來體現。常見的網頁類型有：搜索類網站，博客類網站，電商網站，圖片類網站，新聞類網站和產品類網站。隨著用戶習慣的養成，這些網站在實際生活中對于大多數用戶已經形成了較為固定的心智模型。而且每種類型的網站競品繁多，對于新型網站要如何突破吸引用戶和對于用戶群龐大的網站（如淘寶和新浪等等）如何留住忠實用戶難度也越來越大。那么通過交互細節來提升用戶體驗，就顯得非常重要。

除此之外各類新型網站，例如卡片式不糊，滾動式動畫，和利用新技術的動效效果的網站也層出不窮。這些則大多偏向展示類的產品。

Web端產品設計

接下來將利用案例從產品定位，頁面結構和設計模式詳細的分析web端，ios端，安卓端的利弊和不同。如有錯誤，誠請指出，謝謝~

1.Web端產品案例：良倉

產品定位分析

1.用戶人群：創意行業，廣告業和媒體從業者等具有一定消費能力的小眾人群，在國內的美學領域獨樹一幟。在互聯網快速發展的時代，這一類人群不斷增長。種子用戶形態明顯。

2.用戶需求：淘出品位。通過社會化和意見領袖兩種方式為用戶淘出品位，并提供購買方式，把良倉打造成一個速成品位的聚合地。有“淘出品位”這一心理的潛在用戶很多，把握細分市場，一家獨大。

3.商業模式：媒體+電商。通過軟實力對美學的獨到審美定期高產分析內容，同時利用明星效應（達人）匯聚關注。結合電商，力圖涵蓋生活中各個方面，體現美學中小眾主義的一面。

頁面結構分析

有五個大的功能模塊，首頁推薦人氣商品，數量小眾而精?！吧坛恰焙汀半s志”均可進入購買頁面，利用年媒體屬性和名人效應可以在“分享”和粉絲們分享一些有品位的收藏，更有名人入駐“達人”專區，社區屬性加上名人效應對網站的流量的增值作業很大。

1. 首頁：從是視覺的角度看，色調統一，字體和排版簡潔，主頁商品以人氣為排序方式，推薦精品至首頁。點擊更多跳轉“商店”。
2. 商店：精細分類19項，除了日常的電商分類，還有“禮物”（包括送他，送閨蜜，送父母，送兒童等等）“推薦”（包括限量，優惠，獨家，合作款等等）。
3. 雜志：屬于良倉的媒體屬性。內容輸出的主版塊，包括趣味，數碼，汽車，文化，時尚，美食，建筑，空間，圈子，清單。
4. 分享：社交屬性充分發揮的版塊。
5. 達人:即意見領袖，通過意見領袖為人們淘出好品味。提升用戶對美學的認知，也提高了良倉社區的活躍度。

設計模式分析

分別從導航，內容列表和表單三個方面分析優劣之處。從網站屬性來看，良倉雖然有很搶的媒體優勢，但仍舊是屬于電商平臺，而不同于搜索型平臺的網站（如亞馬孫，淘寶等等）搜索框做的很大，放在網頁的核心位置?；谥袊脩粢呀浟晳T了引導消費做出決策，一般的電商平臺都需要增加站內廣告陳列來引導用戶的選擇。而像良倉這樣的需要美學引導的網站更甚。首頁的banner輪播圖，下方的廣告推薦，以及人氣良品，都是出于這樣的考慮而布局。

同時，利用格式塔原則規則排列，給人信任感，簡單干凈。大量的留白讓頁面看起來有靈氣。高級灰的色調，像無印良品一樣，給人一種對家的憧憬。具體頁面布局如下圖。

A.水平導航設計

良倉的信息架構清晰簡單，一級導航采用水平式的下劃線的標簽式導航，次級導航則是列表式的分類導航。符合用戶習慣，能夠輕松地進行點擊和快速切換。

優點：符合用戶習慣，能夠輕松地進行點擊和快速切換。

缺點：不適合信息層級復雜的產品。但也可以結合列表導航搭配使用。

B.內容列表分析（如圖注釋2-5）

整體來看，良倉的內容展示為大圖文結合的列表設計，直觀而富有感染力，通過大圖吸引用戶多次點擊，Banner位是圖片的輪播圖，節省空間。內容詳情部分為網格列表，鼠標懸停是顯示具體價格和設計靈感，幫助減少用戶的點擊次數，提升體驗。底部展示產品的相關信息，為單列設計模式。

而值得一提的是，在達人頁面，用戶可以根據自己的習慣選擇商量瀏覽模式，分別為圖文列表模式或者網格列表模式。

優點：直觀而富有感染力，綜合利用格式塔原理，視覺優化后的信息，讓用戶共容易找到欣喜的產品。

缺點：不合適新聞條目類多的產品。

C.表單設計分析：

登錄注冊表單同樣是簡潔的列表模式。并支持第三方登入。

優點：列表模式清晰，容易操作，注冊流程簡短。排除用戶對于注冊流程冗長復雜的心理負擔。

缺點：缺點是相對的，具體產品具體分析，現階段對于良倉來說，列表表單能滿足用戶需求并且能夠快速上手操作足以。當然，在不斷迭代的過程中發現問題解決問題越更好。

二.android端產品案例：黃油相機

產品定位分析

1. 標語：更適合中文字體的拍照加字應用。

2.用戶需求：

3.核心功能：是將圖片用中文字體美化，同事具備社交功能，分享自己的作品，收藏別人的作品和Ding（使用收藏的模板）。

頁面結構分析

分為5大部分，Tab名字突破往常的app.接地氣的又通俗易懂。

1. 首頁：抽屜式導航“大家的”頁面。圖片社交型網站，以圖片展示為主，除了左下角拍照美化圖片的主功能外，還包括banner輪播，橫向滑動的“黃油照相館”和feed流“館長推薦”；右上角還有“發現好友”和“消息列表”快捷操作。
2. 關注的：包括“關注”和“動態”。
3. 賣的：包括“字體”和“圖形”
4. 我的：包括原創和收藏的他人模板。
5. 設置：APP常用設置。

設計模式分析

A. 導航設計模式：抽屜式導航

如圖1為Android 4.0的規范（圖片來自人人都是產品經理），參照4.0的設計規范看黃油相機，采用典型的抽屜式導航，導航欄與狀態欄高度一致。右側導航低于狀態欄，重要的應用操作“發現好友”“消息列表”放在title的最右端，方便用戶快速查找。

優點：節省了屏幕上的有限空間，首頁展示更多的內容，合適層次明確的應用使用，例如知乎等。黃油相機核心功能突出，隱藏不重要的功能，讓用戶更專注。能夠大大減少界面中的導航控件。

缺點：抽屜式導航無法和首頁內容同時出現在一個界面，需要用戶更多的點擊，會使一些功能的使用頻率降低。同時對于一些使用APP較少經驗的用戶來說學習成本更高。抽屜式導航和Tab式的經典案例可以參考Facebook。

B. 內容列表分析：圖文列表混合

1. 主頁面有輪播面板展示Banner,有指示器提示用戶?！包S油照相館”小圖展示型的縮略圖，并隱藏少部分圖片，告知用戶屏幕外面還有內容，節省空間。
2. “發現好友”頁面采用圖文結合的列表方式推薦好友。干凈清晰。而“推送設置”設計為控制模式的垂直列表，操作方式簡單，符合用戶的使用習慣。同時在推送頁面的上一級的icon,本身設計的就是控制模式的圖標，貼心。

優點：對于圖片展示的部分，圖文結合，和多圖的feed流展示，充分利用整個界面，提升感染力喝視覺魅力。量大而優質的用戶作品大圖展示也會給新用戶更多新鮮感和想體驗的欲望。對于消息通知設計為垂直列表，冷靜清晰，控制條目則能直觀做出選擇。

缺點：需要有清晰的導航引導下才可以使用多圖展示甚至瀑布流，不然用戶很容易迷失在永無止境的信息流里。

C. 表單設計分析：列表分段式混合

登錄注冊頁面為列表設計，同時還有“手機”“郵箱”采用分段式的設計，根據需要自由切換。

優點：用戶可以根據自身習慣隨意選擇登入方式和注冊入口。

缺點：分段式切換的視覺樣式如果做得不明顯，用戶很難判斷是否可點擊。變得無從下手，增加了心理負擔甚至從而放棄繼續使用。

三.ios 端產品分析：B站

產品定位分析

bilibili 現為國內最大的年輕人潮流文化娛樂社區，又稱“B站”。產品用戶為二次元漫畫的年輕人群。

1.目標用戶：Biliili的目標用戶是國內的ACG愛好者群體，其中也包括一批高質量的內容產出團隊——“UP主”。UP主通過制作和上傳ACG相關的視頻，再由ACG愛好者們觀看和傳播。這種UGC模式下源源不斷產出的高質量內容，成為網站發展繁榮的基礎。

1）年齡分布

2）地域分布上，高頻使用人群主要集中在沿海地區和一線城市。這些地區經濟發達，教育水平高，思想觀念開放，也是最早受ACG亞文化影響的地區。同時，大量漫展、同人祭等活動也都選擇在該地區開辦，因此成功培養起一大群忠實的ACG愛好者，成為Bilibili潛在用戶。

2.需求分析：ACG愛好者群體日常上網需求主要就是看動畫、玩游戲和讀小說，同時輔以一些社交活動、深度動漫行為和購買行為。Bilibili針對ACG愛好者提供了多樣又全面的功能，滿足了其日常上網的各個需求。

3．市場分析：2015年我國泛ACG用戶達2.19億，其中90后超過95%，他們每年在二次元文化周邊平均花費超1700元。同時二次元用戶以學生和職場新人為主，他們有充足的空閑時間可以分配，花在游戲上的時間也很長，屬于中重度游戲玩家。其中愿意為游戲付費的玩家高達70%。國內ACG愛好者群體雖然收入普遍不高（學生群體月均零花錢接近600元，非學生群體月均收入接近4000元），但其在ACG上的花錢比例高達95%，再加上他們接下來將成為社會主要的消費群體，所以Bilibili市場前景廣闊。

4.競品：Acfun

頁面結構

B站的核心功能：“彈幕”。還有直播和追番?！爸辈ァ焙汀胺瑒　本驮谑醉摰牡谝豁撁嫦?。而“分區”不僅有常見的視頻分類，還有B站獨有“鬼畜”等項目類別。網站成為極具互動分享和二次創造的潮流文化娛樂社區。bilibili網站目前也是眾多網絡熱門詞匯的發源地之一。

設計模式分析

A. 導航設計模式：tab標簽式的一級導航+分段式和宮格式的二級導航?

優點：Tab標簽導航入口扁平化，能夠輕松進行點擊和功能間的快速切換。首頁的二級導航為分段式的，能夠輕松的融于界面不占空間，是ios的標準控件?！胺謪^”下的宮格導航，優點能同時顯示大量的功能，并且功能扁平化，充分利用整個界面，有限空間羅列了大量的功能。

缺點：導航控件占地面積大，空間有限的情況下，展示的內容較少

B. 內容列表設計：圖文結合的網格列表+垂直列表

因為是視頻社交產品，圖片和視頻展示較多。所以大多采用圖文結合的網格列表，如首頁直播里的推薦主播頁面。而“關注”里的“追番”則設計為垂直列表模式。

優點：對于視頻社交為主的應用，圖文結合的網格列表，能充分利用整個界面，提升感染力喝視覺魅力。歸納分類的視頻，按照用戶瀏覽的習慣，從上至下，從左至右排版，每一個部分展示四個縮略圖。使用戶可以準確找到自己喜歡的分類的同時，也不至于迷失在大量視頻信息流中無法選擇。

缺點：需要明顯的返回操作按鈕。在用戶迷失在永無止境的信息流里時，可以及時返回上一層級。而與Android的操作不同的是，Android平臺有物理返回按鍵，且點擊返回的是動作流。IOS平臺沒有實體返回按鍵，所以涉及層級間的導航，app界面本身一定要有返回按鈕，而實體home鍵只負責應用退出。

C 表單設計分析

登錄和注冊頁面為分段式設計。值得一提的是，在登錄頁面填寫密碼的時候，有一個可愛的設計，B站的吉祥物22娘和33娘會自動捂眼睛，細節設計很好，讓用戶會心一笑的交互體驗。

優點：分段式設計，逐步完成填寫，每個頁面都完成簡單的操作。幫助引導用戶，減少誤操作。

缺點：如果登入注冊流程步驟太多，使用戶產生厭煩心理就得不償失了。

四.Android 端產品結合部分IOS設計模式案例：KEEP-移動健身工具

產品定位分析

1. 用戶需求類型：keep的用戶人群性格偏向活躍，喜歡社交，同時又喜歡輕量運動的健身健美人群。鎖定的是社交型和健美型用戶，更多偏向無器械健身的女性要用戶。
2. 戰略層分析：運動健身的核心戰略是搶占用戶。在前期積累用戶時期，確保用戶保持高頻使用，根據自身目標市場特征長期產出個性化需求的訓練視頻，融入更多元素。而在后期，盡量減少通過廣告植入的方式謀取盈利，降低損害用戶體驗的風險。同時考慮為將來盈利點打好鋪路。頁面結構分析

keep內容需求明確，在安卓端的4大標簽下，分別設有“訓練”“發現”“關注”“我”來滿足用戶需求。以下為keep的核心特點：

A.量體裁衣，多種健身訓練供你選擇：訓練計劃針對不同人群、各種器械和階段健身目標組合編排，適用最廣泛的健身場景。

B.真人同步訓練，記錄訓練記錄：全程語音督導，自動同步進度，真正良好的體驗是你永遠不需要背動作、記組數。

C.分享健身成果，一起進步：拍照記錄每一天的變化，分享好友相互勉勵，在「Keep」運動社區，健身不再是孤獨的堅持。

D.連接 HealthKit，同步訓練數據：完成訓練后可與 HealthKit 連接，記錄每次的訓練成果和變化。

設計模式分析 ：部分套用ios的設計模式

A.底部Tab導航標簽設計（如圖）

安卓規范下采用的Tab標簽為了防止誤觸，一般設計在頂部。而keep的Tab標簽導航則在底部，客觀來講，這是大部分國內安卓應用直接套用ios的設計模式常用的手法。但是如果再進一步對比觀察，如右圖，如果將Tab欄設計在頂端，會給人頭重腳輕的感覺，視覺體驗大大減小。所以，根據用戶需求，具體問題具體分析，不要為了規范而規范，適合產品的模式才是最好的設計。

左右兩側的頁面則根據用戶需求，將重要且常用的功能添加進來。方便用戶快速切換。

B.內容列表分析：圖文列表+網格列表+滑動展示的混合設計模式（如圖）

整體來看，keep的內容展示為大圖文結合的列表設計，直觀而富有感染力。首頁將用戶的訓練數據直觀的展現出來，清晰明了。訓練課程頁面設計為網格式的大圖文列表，通過圖片展示分類的運動模塊。發現頁面的推薦用戶設計為滑動頁面，盡可能的多推薦興趣用戶，左右滑動的邊界展示部分icon告知用戶還有更多，在有限的空間內展示更多內容。

而值得一提的是，在達人頁面，用戶可以根據自己的習慣選擇商量瀏覽模式，分別為圖文列表模式或者網格列表模式。

臨時視圖模式，一般用戶處理臨時性的內容，通常情況下以模態視圖的形式展現出來，常見的有卡片式或全屏式。Keep的提醒用戶升級頁面則是模態視圖的卡片式設計。

C.表單設計分析：列表設計

登錄注冊表單同樣是簡潔的列表設計。同時支持第三方登入。

總結

縱觀各個平臺的規范和設計模式都有共同點和差異點。遵循平臺規范和設計模式是評價一個設計師是否專業的重要因素，符合用戶習慣，讓用戶有好的用戶體驗是判斷一個產品是否好的重要因素。但是不要為了規范而規范，從需求出發選擇合適的設計模式更重要。學會分析，靈活應用，多思考多總結才能變得更好。

本文由 @ 糖糖 原創發布于人人都是產品經理。未經許可，禁止轉載。