交互設(shè)計(jì)往往對(duì)用戶體驗(yàn)起著決定性作用，其重要性不言而喻。

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

移動(dòng)端產(chǎn)品設(shè)計(jì)模式：

設(shè)計(jì)模式-導(dǎo)航

一般有標(biāo)簽式導(dǎo)航，分段式導(dǎo)航，舵式導(dǎo)航，抽屜式導(dǎo)航和下拉菜單式導(dǎo)航。

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

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

設(shè)計(jì)模式-列表

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

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

web端的設(shè)計(jì)模式

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

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

Web端產(chǎn)品設(shè)計(jì)

接下來將利用案例從產(chǎn)品定位，頁(yè)面結(jié)構(gòu)和設(shè)計(jì)模式詳細(xì)的分析web端，ios端，安卓端的利弊和不同。如有錯(cuò)誤，誠(chéng)請(qǐng)指出，謝謝~

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

產(chǎn)品定位分析

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

2.用戶需求：淘出品位。通過社會(huì)化和意見領(lǐng)袖兩種方式為用戶淘出品位，并提供購(gòu)買方式，把良倉(cāng)打造成一個(gè)速成品位的聚合地。有“淘出品位”這一心理的潛在用戶很多，把握細(xì)分市場(chǎng)，一家獨(dú)大。

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

頁(yè)面結(jié)構(gòu)分析

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

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

設(shè)計(jì)模式分析

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

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

A.水平導(dǎo)航設(shè)計(jì)

良倉(cāng)的信息架構(gòu)清晰簡(jiǎn)單，一級(jí)導(dǎo)航采用水平式的下劃線的標(biāo)簽式導(dǎo)航，次級(jí)導(dǎo)航則是列表式的分類導(dǎo)航。符合用戶習(xí)慣，能夠輕松地進(jìn)行點(diǎn)擊和快速切換。

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

缺點(diǎn)：不適合信息層級(jí)復(fù)雜的產(chǎn)品。但也可以結(jié)合列表導(dǎo)航搭配使用。

B.內(nèi)容列表分析（如圖注釋2-5）

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

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

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

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

C.表單設(shè)計(jì)分析：

登錄注冊(cè)表單同樣是簡(jiǎn)潔的列表模式。并支持第三方登入。

優(yōu)點(diǎn)：列表模式清晰，容易操作，注冊(cè)流程簡(jiǎn)短。排除用戶對(duì)于注冊(cè)流程冗長(zhǎng)復(fù)雜的心理負(fù)擔(dān)。

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

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

產(chǎn)品定位分析

1. 標(biāo)語：更適合中文字體的拍照加字應(yīng)用。

2.用戶需求：

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

頁(yè)面結(jié)構(gòu)分析

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

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

設(shè)計(jì)模式分析

A. 導(dǎo)航設(shè)計(jì)模式：抽屜式導(dǎo)航

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

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

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

B. 內(nèi)容列表分析：圖文列表混合

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

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

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

C. 表單設(shè)計(jì)分析：列表分段式混合

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

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

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

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

產(chǎn)品定位分析

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

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

1）年齡分布

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

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

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

4.競(jìng)品：Acfun

頁(yè)面結(jié)構(gòu)

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

設(shè)計(jì)模式分析

A. 導(dǎo)航設(shè)計(jì)模式：tab標(biāo)簽式的一級(jí)導(dǎo)航+分段式和宮格式的二級(jí)導(dǎo)航?

優(yōu)點(diǎn)：Tab標(biāo)簽導(dǎo)航入口扁平化，能夠輕松進(jìn)行點(diǎn)擊和功能間的快速切換。首頁(yè)的二級(jí)導(dǎo)航為分段式的，能夠輕松的融于界面不占空間，是ios的標(biāo)準(zhǔn)控件?！胺謪^(qū)”下的宮格導(dǎo)航，優(yōu)點(diǎn)能同時(shí)顯示大量的功能，并且功能扁平化，充分利用整個(gè)界面，有限空間羅列了大量的功能。

缺點(diǎn)：導(dǎo)航控件占地面積大，空間有限的情況下，展示的內(nèi)容較少

B. 內(nèi)容列表設(shè)計(jì)：圖文結(jié)合的網(wǎng)格列表+垂直列表

因?yàn)槭且曨l社交產(chǎn)品，圖片和視頻展示較多。所以大多采用圖文結(jié)合的網(wǎng)格列表，如首頁(yè)直播里的推薦主播頁(yè)面。而“關(guān)注”里的“追番”則設(shè)計(jì)為垂直列表模式。

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

缺點(diǎn)：需要明顯的返回操作按鈕。在用戶迷失在永無止境的信息流里時(shí)，可以及時(shí)返回上一層級(jí)。而與Android的操作不同的是，Android平臺(tái)有物理返回按鍵，且點(diǎn)擊返回的是動(dòng)作流。IOS平臺(tái)沒有實(shí)體返回按鍵，所以涉及層級(jí)間的導(dǎo)航，app界面本身一定要有返回按鈕，而實(shí)體home鍵只負(fù)責(zé)應(yīng)用退出。

C 表單設(shè)計(jì)分析

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

優(yōu)點(diǎn)：分段式設(shè)計(jì)，逐步完成填寫，每個(gè)頁(yè)面都完成簡(jiǎn)單的操作。幫助引導(dǎo)用戶，減少誤操作。

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

四.Android 端產(chǎn)品結(jié)合部分IOS設(shè)計(jì)模式案例：KEEP-移動(dòng)健身工具

產(chǎn)品定位分析

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

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

A.量體裁衣，多種健身訓(xùn)練供你選擇：訓(xùn)練計(jì)劃針對(duì)不同人群、各種器械和階段健身目標(biāo)組合編排，適用最廣泛的健身場(chǎng)景。

B.真人同步訓(xùn)練，記錄訓(xùn)練記錄：全程語音督導(dǎo)，自動(dòng)同步進(jìn)度，真正良好的體驗(yàn)是你永遠(yuǎn)不需要背動(dòng)作、記組數(shù)。

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

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

設(shè)計(jì)模式分析 ：部分套用ios的設(shè)計(jì)模式

A.底部Tab導(dǎo)航標(biāo)簽設(shè)計(jì)（如圖）

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

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

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

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

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

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

C.表單設(shè)計(jì)分析：列表設(shè)計(jì)

登錄注冊(cè)表單同樣是簡(jiǎn)潔的列表設(shè)計(jì)。同時(shí)支持第三方登入。

總結(jié)

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

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