編輯導(dǎo)讀：每一個(gè)產(chǎn)品根據(jù)受眾人群和使用場景，對(duì)應(yīng)的產(chǎn)品設(shè)計(jì)都不相同。本文將以健康類APP為例，通過對(duì)健康類產(chǎn)品的功能、頁面進(jìn)行操作體驗(yàn)，理解不同產(chǎn)品的設(shè)計(jì)意圖和業(yè)務(wù)目標(biāo)，通過每個(gè)模塊的功能流程以及頁面交互形式得出產(chǎn)品設(shè)計(jì)準(zhǔn)則用于指導(dǎo)產(chǎn)品功能設(shè)計(jì)。

一、分析目的

第一，通過對(duì)健康類產(chǎn)品的功能、頁面進(jìn)行操作體驗(yàn)，理解不同產(chǎn)品的設(shè)計(jì)意圖和業(yè)務(wù)目標(biāo)。

第二，通過每個(gè)模塊的功能流程以及頁面交互形式得出產(chǎn)品設(shè)計(jì)準(zhǔn)則用于指導(dǎo)產(chǎn)品功能設(shè)計(jì)。

二、競品選擇

競品選擇參考指標(biāo)：七麥數(shù)據(jù)IOS應(yīng)用排行榜，健康健美分類前5名應(yīng)用。

三、頁面功能對(duì)比

主要以首頁頁面進(jìn)行功能對(duì)比，分析維度包括不限于業(yè)務(wù)目標(biāo)、頁面交互等。

3.1 主功能區(qū)

在每個(gè)常規(guī)應(yīng)用首頁的上方1/3 區(qū)域是非常重要的展示位置，用戶進(jìn)入之后90%以上會(huì)先看到當(dāng)前區(qū)域。所以市面上主流APP應(yīng)用的主功能區(qū)都會(huì)將基礎(chǔ)業(yè)務(wù)入口放置在此處，對(duì)于用戶體驗(yàn)更佳。

業(yè)務(wù)目標(biāo)：用戶使用某款產(chǎn)品主要目的是為了解決自身某方面的需求，而這個(gè)需求必定是他最想做的事情，也是希望快速實(shí)現(xiàn)，所以APP首頁上方區(qū)域的黃金位置就是解決用戶高頻、剛需的功能區(qū)域。

用戶習(xí)慣：豎屏手機(jī)應(yīng)用頁面，上方區(qū)域符合用戶自上而下的瀏覽習(xí)慣，用戶進(jìn)入首頁會(huì)首先觀察最上方區(qū)域的內(nèi)容；

展示優(yōu)勢(shì)：主功能區(qū)屬于整個(gè)應(yīng)用的黃金位置，用戶進(jìn)入之后，不需要任何滑動(dòng)就能看見此區(qū)域的內(nèi)容，此位置的曝光率也是最高的，展示頻率越高，使用的概率越大。

3.1.1 搜索框

通過對(duì)比可以看到，五個(gè)APP中，keep、美柚和薄荷健康3款應(yīng)用有搜索功能，并且其中有2個(gè)應(yīng)用的搜索框位于最上方。

通過此功能我們可以知道該應(yīng)用有許多資訊類信息或者商品信息，因?yàn)橐话愕乃阉鞴δ苤饕糜诳焖俨樵冃侣?、文章、特定?nèi)容等，而垂直類的應(yīng)用就會(huì)更加細(xì)分和精準(zhǔn)，既然用戶會(huì)使用搜索功能，就肯定會(huì)有某種明確需求和目標(biāo)。對(duì)應(yīng)的產(chǎn)品內(nèi)部也會(huì)有對(duì)應(yīng)的滿足需求的內(nèi)容和服務(wù)，這樣才可以形成業(yè)務(wù)閉環(huán)。

Keep的搜索框沒有位于最上方，而是在頂部導(dǎo)航菜單下方，因?yàn)镵eep的產(chǎn)品本身變現(xiàn)需求導(dǎo)致，運(yùn)動(dòng)類產(chǎn)品流量變現(xiàn)主要有變賣課程、售賣運(yùn)動(dòng)裝備、廣告或其他收益。

Keep多年來有3億左右的用戶量，但是業(yè)務(wù)營收增長一直是老大難問題，基于此，在產(chǎn)品的運(yùn)營角度對(duì)于營收增長的需求會(huì)十分迫切，所以在首頁最上方keep有導(dǎo)航菜單，主要包括會(huì)員（賣課程）、訓(xùn)練營（課程方案）、活動(dòng)（線下、線上活動(dòng)、廣告合作等）。

這些都是結(jié)合自身平臺(tái)定位的核心業(yè)務(wù)，所以Keep會(huì)將它們都放置在APP首頁黃金區(qū)域最上方，就是因?yàn)檫@里的用戶瀏覽量是非常高，有更大的概率轉(zhuǎn)化付費(fèi)用戶，產(chǎn)生業(yè)務(wù)營收。

導(dǎo)航菜單欄下方接著就是搜索欄，點(diǎn)擊搜索框進(jìn)入到搜索頁面，頁面最上方是搜索框，下方的熱門搜索、排行榜等都是各種課程、活動(dòng)推薦（引導(dǎo)用戶消費(fèi)）。也間接說明了搜索框功能區(qū)的流量很大，用戶對(duì)于搜索有很強(qiáng)的需求和意愿。并且產(chǎn)品本身有足夠豐富的內(nèi)容需要用戶通過搜索功能進(jìn)行精準(zhǔn)查詢。

美柚的搜索欄位于最上方，并且搜索欄最左側(cè)有消息通知圖標(biāo)，最右側(cè)有簽到功能。點(diǎn)擊搜索進(jìn)入到搜索頁，最上面同樣是搜索框，下方是各種垂直內(nèi)容資訊推薦。通過這里可以清楚美柚是的主要業(yè)務(wù)就是做垂直領(lǐng)域的綜合服務(wù)。

薄荷健康的搜索欄位于最上方，搜索欄右側(cè)有 掃一掃功能和消息通知圖標(biāo)。點(diǎn)擊搜索進(jìn)入到搜索頁，最上面同樣是搜索框，下方是各種垂直內(nèi)容推薦。

3.1.2 垂直功能區(qū)

垂直功能區(qū)一般占據(jù)頁面的黃金位置，可以讓用戶快速看見并且使用，因?yàn)檫@個(gè)區(qū)域的主要功能都是當(dāng)前產(chǎn)品或者當(dāng)前模塊主要業(yè)務(wù)，也是目標(biāo)用戶的高頻、剛需需求解決入口。

• 華為運(yùn)動(dòng)健康：主要是手環(huán)運(yùn)動(dòng)步數(shù)和運(yùn)動(dòng)強(qiáng)度數(shù)據(jù)。
• 小米運(yùn)動(dòng)：主要是 當(dāng)日運(yùn)動(dòng)步數(shù)和最新體重?cái)?shù)據(jù)展示。
• 美柚： 垂直功能區(qū)主要是月經(jīng)流量記錄和最近一周月經(jīng)流量變化趨勢(shì)。
• 薄荷健康：垂直功能區(qū)主要是 家人健康圈和健康管理卡片菜單。

3.1.3 分類菜單（九宮格）

宮格設(shè)計(jì)給用戶一目了然的感覺，操作便捷是這種構(gòu)圖方式最重要的優(yōu)勢(shì)。

• Keep分類菜單主要各種運(yùn)動(dòng)課程、活動(dòng)的功能入口。
• 美柚分類菜單主要是備孕錦囊、排卵試紙、能不能吃、問醫(yī)生這類特定人群需求場景的解決方案入口。
• 華為運(yùn)動(dòng)健康分類菜單主要是 運(yùn)動(dòng)記錄、健康生活、心臟健康、睡眠檢測(cè)等各種監(jiān)測(cè)指標(biāo)的查看管理入口。

3.2 底部菜單和其他功能區(qū)

在移動(dòng)應(yīng)用中，有兩個(gè)區(qū)域比較重要，一個(gè)是上文所述的主功能區(qū)域-黃金位置，其次是應(yīng)用底部菜單-鉑金位置，這兩個(gè)位置都是展示頻率和用戶使用頻率最高的區(qū)域。

二者屬于總-分的關(guān)系，底部菜單是一個(gè)模塊或整個(gè)頁面全部功能和內(nèi)容的概括，必須具備簡潔、明確的性質(zhì)。而單個(gè)頁面中的黃金位置主要是滿足用戶具體和明確的高頻、剛需功能區(qū)，也是產(chǎn)品本身的主要業(yè)務(wù)功能區(qū)。

所以主流產(chǎn)品都將剛需、高頻的主要業(yè)務(wù)功能放置在黃金位置，既滿足目標(biāo)用戶的高頻需求，從而對(duì)自身的產(chǎn)品產(chǎn)生粘性和信任，用戶量的留存度會(huì)更高；同是也增加核心業(yè)務(wù)的高曝光率，讓新用戶進(jìn)入之后可以快速發(fā)現(xiàn)主要功能，讓大量的用戶流量感受到業(yè)務(wù)痛點(diǎn)，愿意繼續(xù)關(guān)注和使用產(chǎn)品，達(dá)到了新增留存目的。

看下圖，可以看到 Keep底部菜單架構(gòu)，主要分為5個(gè)菜單，每個(gè)菜單都對(duì)應(yīng)一類服務(wù)內(nèi)容，分別是 首頁的綜合服務(wù)、社區(qū)模塊的 UGC資訊內(nèi)容、計(jì)劃模塊的記錄提醒功能、商城模塊的運(yùn)動(dòng)類商品銷售、我的模塊個(gè)人中心基礎(chǔ)信息匯總。

這里穿插一句，在一般APP中“個(gè)人中心”模塊具備重要的意義：個(gè)人中心是軟件所有功能點(diǎn)的的集合入口，流量僅次于首頁。用戶使用軟件功能時(shí)，除其他tab（底部菜單icon）亮點(diǎn)功能外，個(gè)人中心的修改編輯個(gè)人信息、查看線上行為信息、設(shè)置應(yīng)用通用功能、掌握線上活動(dòng)、查看商城訂單、聯(lián)系平臺(tái)和系統(tǒng)更新等功能都需要通過個(gè)人中心來承載。

3.2.1 首頁模塊

通過導(dǎo)圖梳理，可以知道，五個(gè)APP中首頁模塊主要分為兩種類型（根據(jù)主要屬性區(qū)分）：

• 快速入口：各種功能、服務(wù)、內(nèi)容的快速入口。
• 健康數(shù)據(jù)：展示用戶或家人的最新健康數(shù)據(jù)動(dòng)態(tài)，數(shù)據(jù)來源于智能設(shè)備或者用戶健康評(píng)測(cè)。

3.2.2 UGC資訊

還可以看出在不同產(chǎn)品中，都有UGC資訊這個(gè)版塊，這一個(gè)共性表明了當(dāng)無論是做內(nèi)容服務(wù)還是智能硬件管理工具，主流APP應(yīng)用都十分看重用戶自主原創(chuàng)內(nèi)容這個(gè)方向，正如網(wǎng)易云音樂充分利用UGC，才得以在眾多音樂APP里殺出一條路來，現(xiàn)在主流健康類產(chǎn)品也不會(huì)放棄這條路線。

3.2.3 記錄提醒

五個(gè)APP中有4個(gè)應(yīng)用都有記錄模塊，記錄也分為兩類：

• 記錄提醒：類似于消息提醒的備忘錄功能，用戶可以快速記錄和設(shè)置提醒時(shí)間。
• 運(yùn)動(dòng)記錄：運(yùn)動(dòng)記錄主要是通過手機(jī)記錄用戶運(yùn)動(dòng)過程時(shí)間，便于運(yùn)動(dòng)數(shù)據(jù)統(tǒng)計(jì)和分享展示。

3.2.4 電商商城

全部APP中都有商城模塊，說明電商賣貨是健康類產(chǎn)品殊途同歸之路，流量變現(xiàn)最終還是要靠賣東西來實(shí)現(xiàn)。不過商城也分為兩類：

• 虛擬商品：主要是各種需要付費(fèi)的健康相關(guān)線上課程售賣。
• 實(shí)體商品：主要是各類運(yùn)動(dòng)設(shè)備、智能硬件以及健康輕食售賣。

APP首頁展示

3.3 界面風(fēng)格

一款好的產(chǎn)品界面風(fēng)格需具備一致性和獨(dú)特性。

一致性：主要是指界面顏色、界面結(jié)構(gòu)、功能交互在整個(gè)應(yīng)用內(nèi)應(yīng)該都是統(tǒng)一風(fēng)格，不能各種顏色、icon、各種布局、各種交互方式雜亂使用。一款產(chǎn)品的風(fēng)格一致性會(huì)給用戶留下的潛在形象，長期的保持一致性，會(huì)讓大部分用戶對(duì)于該產(chǎn)品更具有辨識(shí)性和依賴性。

例如：一提到淘寶，大家都會(huì)想到橘黃色的icon和整體頁面色調(diào)；提到京東就會(huì)想到一只白色小狗的圖標(biāo)和紅白相間的頁面色調(diào)；如果說抖音，就會(huì)想起一個(gè)音符的圖標(biāo)和整體偏深色的界面風(fēng)格。

獨(dú)特性，則是指的每個(gè)產(chǎn)品要有自己的定位和調(diào)性，讓用戶一提到某個(gè)場景就會(huì)想到特定產(chǎn)品。

例如：一說到朋友圈，大部分都會(huì)想到微信的朋友圈，而不是其他產(chǎn)品的社交圈；肚子餓了需要訂外賣基本就會(huì)想到美團(tuán)或餓了么。

當(dāng)然這幾款產(chǎn)品都是通過資本的博弈之后在市場上具備壟斷地位的存在，大眾用戶除了用他們，很難有替換品，這也是他們巨大的優(yōu)勢(shì)，此處不多說。不過也有許多小眾產(chǎn)品，就是在細(xì)分領(lǐng)域抓住用戶的核心需求，并且打磨出良好的產(chǎn)品風(fēng)格，也可實(shí)現(xiàn)用戶長期留存。

當(dāng)前五個(gè)APP的界面風(fēng)格有如下特點(diǎn)：

界面顏色風(fēng)格：所選擇的5個(gè)健康類APP中有4種色調(diào)，紫色、粉色、橘紅色和淡青色。

• 其中keep的色調(diào)主要通過分類菜單（宮格區(qū)域）和廣告位置的圖片以及底部菜單icon表現(xiàn)，觀察宮格區(qū)域的圖標(biāo)回會(huì)發(fā)現(xiàn)有4種顏色存在，所以整體區(qū)域的色調(diào)過多，讓人感覺有些凌亂。
• 美柚 的色調(diào)以粉色、白色為主，主要通過主功能區(qū)域（黃金位置）的背景圖、下方的廣告位置圖片及底部菜單icon渲染色調(diào)，宮格區(qū)域的圖標(biāo)控制在3種顏色以內(nèi)，而且只有一行圖標(biāo)，占據(jù)頁面空間較少，所以整體效果看著比較清爽，視覺效果比keep更好。
• 華為運(yùn)動(dòng)健康和小米運(yùn)動(dòng)兩款應(yīng)用首頁風(fēng)格都是橘紅色，而且都是通過上方主功能區(qū)域的banner背景和底部菜單icon顏色來體現(xiàn)，其余部分都是偏淺色調(diào)，對(duì)于產(chǎn)品印象有點(diǎn)類似餐飲風(fēng)格（肯德基、麥當(dāng)勞、美團(tuán)外賣）
• 薄荷健康首頁色調(diào)風(fēng)格主要是淡青色，主要通過卡片菜單的背景、其他功能按鈕和底部菜單icon的顏色表現(xiàn)，這種色調(diào)整體讓人感覺清爽、綠色和健康。不過因?yàn)檎w都是兩種偏淺色系，再加上布局結(jié)構(gòu)導(dǎo)致視覺效果難以快速找到重點(diǎn)。

界面結(jié)構(gòu)：

5個(gè)APP在整體布局方面，分為3類，一種是搜索欄+宮格布局+列表為主的形式（Keep和美柚），另一種是靜態(tài)banenr + 卡片的形式（華為運(yùn)動(dòng)健康、薄荷健康），第三種就是導(dǎo)航菜單+數(shù)據(jù)卡片形式（小米運(yùn)動(dòng)）。這3類布局側(cè)重點(diǎn)不同，第一類可以讓用戶快速找到需要的功能服務(wù)，第二類用戶主動(dòng)操作的功能會(huì)較少，因此主要以數(shù)據(jù)展示為主，第3類則是功能入口和數(shù)據(jù)展示兼顧。

從設(shè)計(jì)簡易性角度看：第1類的布局會(huì)更加好些，每個(gè)功能或服務(wù)都有明確的icon入口，用戶更容易理解；而第2類需要用戶思考數(shù)據(jù)從何而來？如何更新數(shù)據(jù)？增加用戶更多的學(xué)習(xí)使用成本；第3類同時(shí)兼顧了數(shù)據(jù)展示和功能入口，所以整體頁面布局屬于一個(gè)混搭風(fēng)格。

從界面一致性角度看：華為運(yùn)動(dòng)健康和小米運(yùn)動(dòng)結(jié)構(gòu)更加明確和清晰，運(yùn)動(dòng)健康首頁菜單“健康”，頁面內(nèi)容也是全部展示健康類數(shù)據(jù)為主；小米運(yùn)動(dòng)首頁模塊菜單“運(yùn)動(dòng)”，頁面上方導(dǎo)航菜單也是展示各種運(yùn)動(dòng)分類，只是下方的內(nèi)容增加了資訊、話題有些偏離。

四、產(chǎn)品設(shè)計(jì)的參考準(zhǔn)則

4.1 關(guān)鍵區(qū)域?qū)?yīng)高頻剛需業(yè)務(wù)

每一款應(yīng)用和每個(gè)產(chǎn)品都有一個(gè)主要目的，每個(gè)產(chǎn)品的首頁黃金位置一般也是展示高頻剛需業(yè)務(wù)的為主，即用戶每次進(jìn)入的時(shí)候都可以快速看見這個(gè)產(chǎn)品的高頻業(yè)務(wù)，這個(gè)高頻業(yè)務(wù)可能也是用戶使用該產(chǎn)品的主要目的。通過此方法，既可以提高應(yīng)用打開率和功能使用率，還可以持續(xù)吸引新增用戶。

例如：抖音、快手對(duì)于用戶的主要需求就是看視頻或者發(fā)視頻，微信、QQ對(duì)于用戶的主要需求就是社交。

4.2 保持界面風(fēng)格一致性

就是降低用戶使用產(chǎn)品的學(xué)習(xí)時(shí)間，保持跟之前用過的產(chǎn)品有相似的交互邏輯和頁面顏色風(fēng)格，讓用戶更容易理解和操作。

例如：keep 和 美柚兩款應(yīng)用，都在首頁上方區(qū)域有分類菜單模塊（九宮格），這樣許多用戶進(jìn)入到首頁后就會(huì)習(xí)慣性的查看這兩個(gè)區(qū)域，因?yàn)楝F(xiàn)在90%以上的移動(dòng)互聯(lián)網(wǎng)用戶都有使用過 淘寶、京東這類APP，大家都已經(jīng)習(xí)慣了在首頁的黃金區(qū)域?qū)ふ易约焊信d趣的功能和內(nèi)容。用戶一打開APP就可以不用去其他頁面尋找需要的功能，可以快速的上手。

4.3 讓重度用戶有捷徑可用

許多APP的老用戶可能會(huì)覺得，常規(guī)的使用方式可能不夠創(chuàng)新，難以吸引他們的注意力，如果有種使用方法是可以快捷呈現(xiàn)某個(gè)功能或許能讓大家耳目一新。

4.4 提供有意義的回饋

用戶主動(dòng)進(jìn)入到某個(gè)環(huán)節(jié)，或者被動(dòng)處于某種階段，如果沒有合理的跳轉(zhuǎn)或者提示，可能會(huì)讓用戶產(chǎn)生困惑，不知道當(dāng)前的狀態(tài)以及后續(xù)的操作目標(biāo)。

舉例來說：目前網(wǎng)絡(luò)傳輸信號(hào)不穩(wěn)定可能需要等候一些時(shí)間；當(dāng)前沒有網(wǎng)絡(luò)請(qǐng)檢查下網(wǎng)絡(luò)情況等。只有提供給用戶有意義的回饋，用戶才不會(huì)感覺沒有耐心，或是莫名其妙，以后不想使用這個(gè)應(yīng)用!

五、總結(jié)

通過對(duì)5個(gè)APP應(yīng)用的對(duì)比、分析，筆者認(rèn)識(shí)到：一款產(chǎn)品要想獲得市場認(rèn)可擁有成長能力，首先必須要找對(duì)賽道和目標(biāo)人群，同時(shí)自身的產(chǎn)品要有一定的優(yōu)勢(shì)（資源、服務(wù)），并且對(duì)于目標(biāo)人群屬于剛需。

這樣第一階段用戶只有選擇你，然后就是優(yōu)化服務(wù)體驗(yàn)以及拓展更多的增值服務(wù)。否則就會(huì)淪為一次性工具，用戶在完成某個(gè)小場景之后，用完即走，不愿意停留，無法產(chǎn)生更大的運(yùn)營價(jià)值；如果產(chǎn)品本身的行業(yè)壁壘不夠高，還會(huì)遭遇競爭對(duì)手的跨界打擊。

舉個(gè)例子：

美柚APP的基礎(chǔ)服務(wù)就是經(jīng)期記錄功能和孕期輔助，這也是大部分的用戶使用它的初衷，但是因?yàn)樗钠渌鲋捣?wù)沒有跟上，或者說不屬于高頻剛需，導(dǎo)致用戶在完成當(dāng)前階段主要操作之后，不知道接下來還有什么值得停留的意義，包括后續(xù)運(yùn)營服務(wù)沒有跟上，也是導(dǎo)致美柚新增用戶量減少、老用戶留存率下降；

其次另外一款薄荷健康，雖然在初次進(jìn)入首頁界面有些凌亂和，但是通過各種引導(dǎo)和服務(wù)讓用戶停留下來之后，薄荷健康本身有需要拓展服務(wù)，也包括了 美柚的基礎(chǔ)服務(wù)。這樣一來，美柚的主要功能在薄荷健康也有，薄荷健康還有更多其他服務(wù)，類似減肥專區(qū)等等，大量用戶就逐漸轉(zhuǎn)移到類似薄荷健康的產(chǎn)品。

作者：明遠(yuǎn)；5年互聯(lián)網(wǎng)工作經(jīng)驗(yàn)，主要涉及智慧養(yǎng)老、智慧社區(qū)、智能安防等方面。

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

題圖來自Unsplash，基于CC0協(xié)議。