筆者從產(chǎn)品經(jīng)理設(shè)計(jì)需求的角度，分享了APP產(chǎn)品原型設(shè)計(jì)背后需要的注意的細(xì)節(jié)和原則，供大家參考與學(xué)習(xí)。

移動(dòng)App的產(chǎn)品設(shè)計(jì)往往都是所見(jiàn)即所有，沒(méi)有太深?yuàn)W的邏輯要交代的，比葫蘆畫(huà)瓢即可。

產(chǎn)品經(jīng)理常常很快就把原型畫(huà)出完了，但是在設(shè)計(jì)UI的時(shí)候或開(kāi)發(fā)的時(shí)候就常常被拉去澄清細(xì)節(jié)，原因就是對(duì)設(shè)計(jì)的細(xì)節(jié)交代不清楚，或者了解的不甚深入，缺少對(duì)邊界或排他項(xiàng)的界定。

筆者近期從事社交App的需求，本文就移動(dòng)端App產(chǎn)品的日常總結(jié)，從產(chǎn)品經(jīng)理設(shè)計(jì)需求的角度，分享一些注意事項(xiàng)和細(xì)節(jié)如下，歡迎批評(píng)探討。

一、明確App的按鈕類型

從定義需求的角度來(lái)說(shuō)，產(chǎn)品經(jīng)理只要交代了哪里是按鈕就可以了，可以通篇一律使用同一個(gè)按鈕線框表達(dá)。但是這只能是個(gè)初稿，在落實(shí)之前，產(chǎn)品經(jīng)理或交互設(shè)計(jì)師需要確定按鈕的具體形態(tài)。

一般而言，一個(gè)APP的按鈕設(shè)定四種就夠了，設(shè)置的維度可以是按鈕的定位權(quán)重（注意，菜單的入口或圖表不包括在本次討論中，比如微信的+、定位圖標(biāo)這種）。

1. 權(quán)重最高的按鈕：這種按鈕一般比較大，顏色明顯，主題鮮明。常見(jiàn)的比如用戶“登錄”按鈕；
2. 中等權(quán)重的按鈕：這種按鈕在產(chǎn)品中最為常見(jiàn)，比如一般的詢問(wèn)框上的【確定/取消】按鈕；
3. 權(quán)重最小的按鈕：比如“關(guān)閉”、“查看更多”按鈕。這些按鈕的作用就是可以點(diǎn)擊，用戶看得到即可。這種按鈕形式多樣，可以沒(méi)有框，只有文字。也可以只是個(gè)圖形，比如關(guān)閉按鈕用x表示；
4. 特殊按鈕，這種按鈕區(qū)別于其他的按鈕，少且特別。要么是帶很多文字，要么是App的核心入口，比如soul首頁(yè)的“靈魂匹配”按鈕。

在輸出的需求文檔中，可以一開(kāi)始在“全局規(guī)范”中就定義這四種按鈕代號(hào)，然后在原型中備注按鈕類型的代號(hào)，這樣設(shè)計(jì)就知道你是要怎么樣的效果了。

二、了解第三方登錄的本質(zhì)

社交類App登錄方式，基本都是手機(jī)驗(yàn)證碼為主，配合第三方登陸，很少注冊(cè)賬號(hào)密碼（與App的定位和用戶群有關(guān)）。

第三方登錄就是借助第三方應(yīng)用的接口實(shí)現(xiàn)用戶登記，比如常見(jiàn)的三家：微信、QQ、微博。

其目的之一是關(guān)聯(lián)賬號(hào)，形成社交群落之間的呼應(yīng)，有利于用戶生態(tài)鏈的搭建；其二是獲取用戶的一部分已有信息，比如用戶信息或流量資源。

需要注意的有兩點(diǎn)：

1. 第三方賬號(hào)給的資料完善度和安全性不好把控。比如你期望獲取QQ中的頭像、昵稱、年齡、地區(qū)，但是QQ可能只給你頭像和昵稱。又比如有一天第三方封了接口，那么第三方登錄功能就停擺了；
2. 第三方登錄方式，對(duì)用戶來(lái)說(shuō)不一定就是省時(shí)省力的渠道。因?yàn)橄嚓P(guān)法規(guī)的要求很多APP是需要用戶手機(jī)號(hào)的，而第三方登錄并不能獲取用戶已經(jīng)提供給第三方的手機(jī)號(hào)（用戶隱私）。

因此對(duì)用戶來(lái)說(shuō)常常是使用第三方登錄后，仍然要跳轉(zhuǎn)到驗(yàn)證手機(jī)號(hào)的界面，還不如直接使用手機(jī)驗(yàn)證登錄。

三、我們常見(jiàn)的支付功能的貓膩

支付很常見(jiàn)，社交應(yīng)用的虛擬禮物購(gòu)買、知識(shí)平臺(tái)的付費(fèi)學(xué)習(xí)等。

在設(shè)計(jì)支付功能的時(shí)候，主要注意的是要從安卓和IOS兩個(gè)系統(tǒng)的角度區(qū)分設(shè)計(jì)。

（1）首先明確一個(gè)常識(shí)，就是支付必須是有資質(zhì)的支付平臺(tái)才能進(jìn)行操作處理。這就是為什么很多大的電商公司的交易要經(jīng)過(guò)支付公司的結(jié)算才能拿到錢(qián)，比如paypal、騰付通、支付寶、微信支付、網(wǎng)銀在線等。其中安卓手機(jī)最常用的是支付寶或者微信；

（2）安卓系統(tǒng)接通第三方支付體系還是比較友好的，手續(xù)費(fèi)也不高。調(diào)用支付寶或微信支付，會(huì)返回其綁定的銀行卡或者余額，可以作為業(yè)務(wù)數(shù)據(jù)保存在后臺(tái)。有時(shí)候前端感受不到這個(gè)數(shù)據(jù)，產(chǎn)品經(jīng)理應(yīng)該知道，作為功能擴(kuò)展的考慮因素；

（3）蘋(píng)果手機(jī)（IOS系統(tǒng)）正常來(lái)說(shuō)只能調(diào)用蘋(píng)果支付，蘋(píng)果順帶扣的手續(xù)費(fèi)比較高。虛擬支付的時(shí)候，安卓是可以使用任意金額充值的，但是蘋(píng)果手機(jī)對(duì)特定的原幣，只能選擇固定的金額。這個(gè)是因?yàn)樘O(píng)果公司將充值金額本身固定了，當(dāng)成一個(gè)一個(gè)的商品對(duì)外出售。

如下圖就是蘋(píng)果提供的清單，比如可以購(gòu)買的價(jià)格列就是需要支付的金額，收入列就是扣掉手續(xù)費(fèi)之后有效的金額?？梢钥吹交?元錢(qián)，在蘋(píng)果這里只剩下了4.12元。

這就是為什么陌陌同樣是充值6塊錢(qián)，安卓系統(tǒng)給60個(gè)虛擬幣，蘋(píng)果只給42個(gè)幣。

四、了解后臺(tái)數(shù)據(jù)的存儲(chǔ)

做APP的不僅要盯住頁(yè)面和用戶，也要理解數(shù)據(jù)的運(yùn)作，這樣對(duì)內(nèi)容推送機(jī)制、數(shù)據(jù)搜索的頁(yè)面展示的方案選型幫助很大。

這里介紹三點(diǎn)：

（1）初創(chuàng)公司的數(shù)據(jù)基本都使用的云端存儲(chǔ)，同時(shí)配合自己的數(shù)據(jù)庫(kù)，從效率和安全性上都會(huì)更有保障。

產(chǎn)品經(jīng)理需大概了解數(shù)據(jù)存儲(chǔ)的定位。以視頻直播類為例，直播或視頻數(shù)據(jù)文件占存比較大，一般都是存儲(chǔ)在云端的，而用戶業(yè)務(wù)數(shù)據(jù)放在自己的服務(wù)器的數(shù)據(jù)庫(kù)中，原因很簡(jiǎn)單這些牽扯更多的隱私和安全責(zé)任，且一般數(shù)據(jù)不會(huì)太多。

（2）產(chǎn)品經(jīng)理需直觀地理解關(guān)系型數(shù)據(jù)庫(kù)和非關(guān)系型數(shù)據(jù)庫(kù)，比如非關(guān)系型的mongdb數(shù)據(jù)庫(kù)，一般存儲(chǔ)信息量大的不定型數(shù)據(jù)，比如用戶日志。

而MySQL則承擔(dān)了大部分可以用二維表表達(dá)的規(guī)則的數(shù)據(jù)，比如用戶資料、數(shù)據(jù)字典的參數(shù)配置等。

（3）數(shù)據(jù)存儲(chǔ)與頁(yè)面的搜索方式等方面都有很大關(guān)系。比如，在“我的好友”中搜索用戶昵稱，是只搜索自己關(guān)系為好友的用戶，還是搜出有一部分是好友，另一部分非好友的用戶并用標(biāo)簽分類呢？

這兩個(gè)方案前者比較保守，但是如果期望用戶擴(kuò)大社交圈的話后者更有價(jià)值。因?yàn)椴粌H可以看到好友，并且還能提供增加陌生人為好友的功能。

但是這時(shí)候還要結(jié)合后臺(tái)數(shù)據(jù)的存儲(chǔ)，是否好友和陌生人存儲(chǔ)在一個(gè)表里了呢，如果分開(kāi)了那最好就不要一起搜索，隨著用戶量增大，聊表查詢很耗性能。

五、了解前后端接口

項(xiàng)目過(guò)程中，前端與后端開(kāi)發(fā)之間溝通需求基本都是圍繞接口請(qǐng)求數(shù)據(jù)進(jìn)行的。

接口是前后端分開(kāi)開(kāi)發(fā)的行業(yè)標(biāo)配嗎，是高內(nèi)聚的體現(xiàn)。因此產(chǎn)品經(jīng)理要理解接口的原理和自己的目的，協(xié)助前后端完善接口的定義（另一篇文章有專門(mén)介紹）。

后端開(kāi)發(fā)在寫(xiě)接口的時(shí)候，一般需要知道未來(lái)的走向，包括數(shù)據(jù)量級(jí)、功能擴(kuò)展性等。

產(chǎn)品經(jīng)理要針對(duì)該功能給開(kāi)發(fā)們說(shuō)清楚未來(lái)的擴(kuò)展可能性，比如：App的用戶動(dòng)態(tài)的評(píng)論，計(jì)劃是展示一部分優(yōu)質(zhì)評(píng)論內(nèi)容（類似微信的朋友圈）在外層，類似下圖：

但是對(duì)于展開(kāi)部分的算法尚還在研究階段，因此這個(gè)版本將評(píng)論折疊，只顯示數(shù)字，點(diǎn)開(kāi)則打開(kāi)評(píng)論列表。

后端在給前端傳的接口中，可能會(huì)多設(shè)計(jì)出“是否展示在外層”標(biāo)識(shí)，提前預(yù)留參數(shù)，以后版本用。本版本前端只需填留下自己需要的信息即可。

六、圖片比例、圓角和縮放的注意事項(xiàng)

App用到圖片的地方很多，每一處又可能有不同狀態(tài)下的不同表現(xiàn)形式。產(chǎn)品經(jīng)理不能只放一張圖了事，應(yīng)當(dāng)對(duì)圖片不同場(chǎng)景下的樣式列舉清楚。比如下面幾點(diǎn)：

1. 縮略圖的縮放比例

微信朋友圈的列表中，圖片都是縮略的，那么設(shè)計(jì)的時(shí)候首先就是縮略方式的問(wèn)題。

之所以要給出縮小的比例或最終尺寸大小，是因?yàn)榕臄z的手機(jī)屏幕尺寸和比例不一致，上傳的圖片又可能有各種形狀。因此發(fā)布之后要給予對(duì)應(yīng)的規(guī)則和秩序，避免效果模糊、展示不全、圖片過(guò)小等不良效果。

在確定方案的時(shí)候，合理即可。可以通過(guò)研究競(jìng)品，找近期流行的產(chǎn)品的規(guī)律。

比如按圖片或視頻的H:W:

1. H:W>4/3(高圖）：切上下兩端，保存為4/3，靠左展示；
2. 3/4≤(H:W)<4/3之間(方圖）：切成正方形，靠中間展示；
3. H:W≤3/4(扁圖）：切成3/4，靠中間展示。

以上并不一定是最好的，但是秩序是要給到開(kāi)發(fā)的。

2. 圖片的圓角和直角

留意的話，就會(huì)發(fā)現(xiàn)有的App的圖片是圓角的有的是直角的。目的只有一個(gè)，就是確定這兩種展示方式哪種更符合產(chǎn)品的定位和氣質(zhì)。

一般而言，做社交類的產(chǎn)品，圖片用圓角看著舒服和氣；做技術(shù)類的或者法律類的比較嚴(yán)肅的產(chǎn)品，可以考慮直角。

最后還是一句話，看競(jìng)品，以及一段時(shí)間流行哪種。

3. 大圖和縮略圖

消息發(fā)送成功之后 ，圖片也是縮略的，并且要設(shè)計(jì)發(fā)送失敗的提示圖例。

點(diǎn)擊打開(kāi)之后大圖是否鋪滿整個(gè)窗口？最后就是不要忘記做縮略圖和大圖，這是完整的一套。

另外在很多公司，這個(gè)算是設(shè)計(jì)師方面的工作，但是產(chǎn)品經(jīng)理要全局把關(guān)，就要知其然知其所以然，不是主管覺(jué)得看著順眼就就這樣。

作者：唧唧歪歪PM；公眾號(hào)：唧唧歪歪PM（ID：jjyypm）

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

題圖來(lái)自Unsplash，基于CC0協(xié)議