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

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

移動端產(chǎn)品設計模式：

設計模式-導航

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

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

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

設計模式-列表

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

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

web端的設計模式

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

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

Web端產(chǎn)品設計

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

1.Web端產(chǎn)品案例：良倉

產(chǎn)品定位分析

1.用戶人群：創(chuàng)意行業(yè)，廣告業(yè)和媒體從業(yè)者等具有一定消費能力的小眾人群，在國內的美學領域獨樹一幟。在互聯(lián)網(wǎng)快速發(fā)展的時代，這一類人群不斷增長。種子用戶形態(tài)明顯。

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

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

頁面結構分析

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

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

設計模式分析

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

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

A.水平導航設計

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

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

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

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

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

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

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

缺點：不合適新聞條目類多的產(chǎn)品。

C.表單設計分析：

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

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

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

二.android端產(chǎn)品案例：黃油相機

產(chǎn)品定位分析

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

2.用戶需求：

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

頁面結構分析

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

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

設計模式分析

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

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

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

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

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

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

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

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

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

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

優(yōu)點：用戶可以根據(jù)自身習慣隨意選擇登入方式和注冊入口。

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

三.ios 端產(chǎn)品分析：B站

產(chǎn)品定位分析

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

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

1）年齡分布

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

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

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

4.競品：Acfun

頁面結構

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

設計模式分析

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

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

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

B. 內容列表設計：圖文結合的網(wǎng)格列表+垂直列表

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

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

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

C 表單設計分析

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

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

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

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

產(chǎn)品定位分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結

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

本文由 @ 糖糖 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。