在(zài)當今快速叠代的(de)互聯網産品領域，社交App作爲(wéi / wèi)用戶日常生活中不(bù)可或缺的(de)一(yī / yì ／yí)部分，其設計細節和(hé / huò)用戶體驗至關重要(yào / yāo)。本文作者憑借多年的(de)産品設計經驗，從産品經理的(de)視角出(chū)發，總結了(le／liǎo)27條關于(yú)社交App項目的(de)産品設計經驗。

産品經理常常很快就(jiù)把原型畫出(chū)完了(le／liǎo)，但是(shì)在(zài)設計UI的(de)時(shí)候或開發的(de)時(shí)候就(jiù)常常被拉去澄清細節。

原因就(jiù)是(shì)對設計的(de)細節交代不(bù)清楚，或者了(le／liǎo)解的(de)不(bù)甚深入，缺少對邊界或排他(tā)項的(de)界定。

筆者将社交App項目做下來(lái)後，整理如下見解。

本文就(jiù)移動端App産品的(de)日常總結，從産品經理設計需求的(de)角度，分享一(yī / yì ／yí)些注意事項和(hé / huò)細節如下。歡迎批評探讨。

1、明确App的(de)按鈕類型

從定義需求的(de)角度來(lái)說(shuō)，産品經理隻要(yào / yāo)交代了(le／liǎo)哪裏是(shì)按鈕就(jiù)可以(yǐ)了(le／liǎo)，可以(yǐ)通篇一(yī / yì ／yí)律使用同一(yī / yì ／yí)個(gè)按鈕線框表達。

但是(shì)這(zhè)隻能是(shì)個(gè)初稿，在(zài)落實之(zhī)前，産品經理或交互設計師需要(yào / yāo)确定按鈕的(de)具體形态。

一(yī / yì ／yí)般而(ér)言，一(yī / yì ／yí)個(gè)APP的(de)按鈕設定四種就(jiù)夠了(le／liǎo)，設置的(de)維度可以(yǐ)是(shì)按鈕的(de)定位權重。（注意，菜單的(de)入口或圖表不(bù)包括在(zài)本次讨論中，比如微信的(de)+、定位圖标這(zhè)種）。

權重最高的(de)按鈕：這(zhè)種按鈕一(yī / yì ／yí)般比較大(dà)，顔色明顯，主題鮮明。常見的(de)比如用戶“登錄”按鈕；中等權重的(de)按鈕：這(zhè)種按鈕在(zài)産品中最爲(wéi / wèi)常見，比如一(yī / yì ／yí)般的(de)詢問框上(shàng)的(de)【确定/取消】按鈕；權重最小的(de)按鈕：比如“關閉”、“查看更多”按鈕。這(zhè)些按鈕的(de)作用就(jiù)是(shì)可以(yǐ)點擊，用戶看得到(dào)即可。這(zhè)種按鈕形式多樣，可以(yǐ)沒有框，隻有文字。也(yě)可以(yǐ)隻是(shì)個(gè)圖形，比如關閉按鈕用x表示；特殊按鈕，這(zhè)種按鈕區别于(yú)其他(tā)的(de)按鈕，少且特别。要(yào / yāo)麽是(shì)帶很多文字，要(yào / yāo)麽是(shì)App的(de)核心入口，比如soul首頁的(de)“靈魂匹配”按鈕。

在(zài)輸出(chū)的(de)需求文檔中，可以(yǐ)一(yī / yì ／yí)開始在(zài)“全局規範”中就(jiù)定義這(zhè)四種按鈕代号，然後在(zài)原型中備注按鈕類型的(de)代号。

這(zhè)樣設計就(jiù)知道(dào)你是(shì)要(yào / yāo)怎麽樣的(de)效果了(le／liǎo)。

2、了(le／liǎo)解第三方登錄的(de)本質

社交類App登錄方式，基本都是(shì)手機驗證碼爲(wéi / wèi)主，配合第三方登陸，很少注冊賬号密碼（與App的(de)定位和(hé / huò)用戶群有關）。

第三方登錄就(jiù)是(shì)借助第三方應用的(de)接口實現用戶登記，比如常見的(de)三家：微信、QQ、微博。

其目的(de)之(zhī)一(yī / yì ／yí)是(shì)關聯賬号，形成社交群落之(zhī)間的(de)呼應，有利于(yú)用戶生态鏈的(de)搭建；其二是(shì)獲取用戶的(de)一(yī / yì ／yí)部分已有信息，比如用戶信息或流量資源。需要(yào / yāo)注意的(de)有兩點：

（1）第三方賬号給的(de)資料完善度和(hé / huò)安全性不(bù)好把控。比如你期望獲取QQ中的(de)頭像、昵稱、年齡、地(dì / de)區，但是(shì)QQ可能隻給你頭像和(hé / huò)昵稱。

又比如有一(yī / yì ／yí)天第三方封了(le／liǎo)接口，那麽第三方登錄功能就(jiù)停擺了(le／liǎo)。

（2）第三方登錄方式，對用戶來(lái)說(shuō)不(bù)一(yī / yì ／yí)定就(jiù)是(shì)省時(shí)省力的(de)渠道(dào)。因爲(wéi / wèi)相關法規的(de)要(yào / yāo)求很多APP是(shì)需要(yào / yāo)用戶手機号的(de)，而(ér)第三方登錄并不(bù)能獲取用戶已經提供給第三方的(de)手機号（用戶隐私）。

因此對用戶來(lái)說(shuō)常常是(shì)使用第三方登錄後，仍然要(yào / yāo)跳轉到(dào)驗證手機号的(de)界面，還不(bù)如直接使用手機驗證登錄。

3、我們常見的(de)支付功能的(de)貓膩

支付很常見，社交應用的(de)虛拟禮物購買、知識平台的(de)付費學習等。在(zài)設計支付功能的(de)時(shí)候，主要(yào / yāo)注意的(de)是(shì)要(yào / yāo)從安卓和(hé / huò)IOS兩個(gè)系統的(de)角度區分設計。

（1）首先明确一(yī / yì ／yí)個(gè)常識，就(jiù)是(shì)支付必須是(shì)有資質的(de)支付平台才能進行操作處理。

這(zhè)就(jiù)是(shì)爲(wéi / wèi)什麽很多大(dà)的(de)電商公司的(de)交易要(yào / yāo)經過支付公司的(de)結算才能拿到(dào)錢，比如paypal、騰付通、支付寶、微信支付、網銀在(zài)線等。其中安卓手機最常用的(de)是(shì)支付寶或者微信。

（2）安卓系統接通第三方支付體系還是(shì)比較友好的(de)，手續費也(yě)不(bù)高。調用支付寶或微信支付，會返回其綁定的(de)銀行卡或者餘額，可以(yǐ)作爲(wéi / wèi)業務數據保存在(zài)後台。

有時(shí)候前端感受不(bù)到(dào)這(zhè)個(gè)數據，産品經理應該知道(dào)，作爲(wéi / wèi)功能擴展的(de)考慮因素。

（3）蘋果手機（IOS系統）正常來(lái)說(shuō)隻能調用蘋果支付，蘋果順帶扣的(de)手續費比較高。

虛拟支付的(de)時(shí)候，安卓是(shì)可以(yǐ)使用任意金額充值的(de)，但是(shì)蘋果手機對特定的(de)原币，隻能選擇固定的(de)金額。

這(zhè)個(gè)是(shì)因爲(wéi / wèi)蘋果公司将充值金額本身固定了(le／liǎo)，當成一(yī / yì ／yí)個(gè)一(yī / yì ／yí)個(gè)的(de)商品對外出(chū)售。

如下圖就(jiù)是(shì)蘋果提供的(de)清單，比如可以(yǐ)購買的(de)價格列就(jiù)是(shì)需要(yào / yāo)支付的(de)金額，收入列就(jiù)是(shì)扣掉手續費之(zhī)後有效的(de)金額。可以(yǐ)看到(dào)花6元錢，在(zài)蘋果這(zhè)裏隻剩下了(le／liǎo)4.12元。

這(zhè)就(jiù)是(shì)爲(wéi / wèi)什麽陌陌同樣是(shì)充值6塊錢，安卓系統給60個(gè)虛拟币，蘋果隻給42個(gè)币。

4、了(le／liǎo)解後台數據的(de)存儲

做APP的(de)不(bù)僅要(yào / yāo)盯住頁面和(hé / huò)用戶，也(yě)要(yào / yāo)理解數據的(de)運作，這(zhè)樣對内容推送機制、數據搜索的(de)頁面展示的(de)方案選型幫助很大(dà)。這(zhè)裏介紹三點：

（1）初創公司的(de)數據基本都使用的(de)雲端存儲，同時(shí)配合自己的(de)數據庫。從效率和(hé / huò)安全性上(shàng)都會更有保障。産品經理需大(dà)概了(le／liǎo)解數據存儲的(de)定位。

以(yǐ)視頻直播類爲(wéi / wèi)例，直播或視頻數據文件占存比較大(dà)，一(yī / yì ／yí)般都是(shì)存儲在(zài)雲端的(de)，而(ér)用戶業務數據放在(zài)自己的(de)服務器的(de)數據庫中，原因很簡單這(zhè)些牽扯更多的(de)隐私和(hé / huò)安全責任，且一(yī / yì ／yí)般數據不(bù)會太多。

（2）産品經理需直觀地(dì / de)理解關系型數據庫和(hé / huò)非關系型數據庫。比如非關系型的(de)mongdb數據庫，一(yī / yì ／yí)般存儲信息量大(dà)的(de)不(bù)定型數據，比如用戶日志。而(ér)MySQL則承擔了(le／liǎo)大(dà)部分可以(yǐ)用二維表表達的(de)規則的(de)數據，比如用戶資料、數據字典的(de)參數配置等。

（3）數據存儲與頁面的(de)搜索方式等方面都有很大(dà)關系。比如，在(zài)“我的(de)好友”中搜索用戶昵稱，是(shì)隻搜索自己關系爲(wéi / wèi)好友的(de)用戶，還是(shì)搜出(chū)有一(yī / yì ／yí)部分是(shì)好友，另一(yī / yì ／yí)部分非好友的(de)用戶并用标簽分類呢？

這(zhè)兩個(gè)方案前者比較保守，但是(shì)如果期望用戶擴大(dà)社交圈的(de)話後者更有價值。因爲(wéi / wèi)不(bù)僅可以(yǐ)看到(dào)好友并且還能提供增加陌生人(rén)爲(wéi / wèi)好友的(de)功能。

但是(shì)這(zhè)時(shí)候還要(yào / yāo)結合後台數據的(de)存儲，是(shì)否好友和(hé / huò)陌生人(rén)存儲在(zài)一(yī / yì ／yí)個(gè)表裏了(le／liǎo)呢，如果分開了(le／liǎo)那最好就(jiù)不(bù)要(yào / yāo)一(yī / yì ／yí)起搜索，随着用戶量增大(dà)，聊表查詢很耗性能。

5、了(le／liǎo)解前後端接口

項目過程中，前端與後端開發之(zhī)間溝通需求基本都是(shì)圍繞接口請求數據進行的(de)。接口是(shì)前後端分開開發的(de)行業标配嗎，是(shì)高内聚的(de)體現。

因此産品經理要(yào / yāo)理解接口的(de)原理和(hé / huò)自己的(de)目的(de)，協助前後端完善接口的(de)定義（另一(yī / yì ／yí)篇文章有專門介紹）。

後端開發在(zài)寫接口的(de)時(shí)候，一(yī / yì ／yí)般需要(yào / yāo)知道(dào)未來(lái)的(de)走向，包括數據量級、功能擴展性等。

産品經理要(yào / yāo)針對該功能給開發們說(shuō)清楚未來(lái)的(de)擴展可能性。比如：App的(de)用戶動态的(de)評論，計劃是(shì)展示一(yī / yì ／yí)部分優質評論内容（類似微信的(de)朋友圈）在(zài)外層，類似下圖：

但是(shì)對于(yú)展開部分的(de)算法尚還在(zài)研究階段，因此這(zhè)個(gè)版本将評論折疊，隻顯示數字。點開則打開評論列表。

後端在(zài)給前端傳的(de)接口中，可能會多設計出(chū)“是(shì)否展示在(zài)外層”标識，提前預留參數，以(yǐ)後版本用。本版本前端隻需填留下自己需要(yào / yāo)的(de)信息即可。

6、圖片比例、圓角和(hé / huò)縮放的(de)注意事項

App用到(dào)圖片的(de)地(dì / de)方很多，每一(yī / yì ／yí)處又可能有不(bù)同狀态下的(de)不(bù)同表現形式。産品經理不(bù)能隻放一(yī / yì ／yí)張圖了(le／liǎo)事。應當對圖片不(bù)同場景下的(de)樣式列舉清楚。比如下面幾點：

（1）縮略圖的(de)縮放比例

微信朋友圈的(de)列表中，圖片都是(shì)縮略的(de)。那麽設計的(de)時(shí)候首先就(jiù)是(shì)縮略方式的(de)問題。

之(zhī)所以(yǐ)要(yào / yāo)給出(chū)縮小的(de)比例或最終尺寸大(dà)小，是(shì)因爲(wéi / wèi)拍攝的(de)手機屏幕尺寸和(hé / huò)比例不(bù)一(yī / yì ／yí)緻，上(shàng)傳的(de)圖片又可能有各種形狀。

因此發布之(zhī)後要(yào / yāo)給予對應的(de)規則和(hé / huò)秩序。避免效果模糊、展示不(bù)全、圖片過小等不(bù)良效果。

在(zài)确定方案的(de)時(shí)候，合理即可。可以(yǐ)通過研究競品，找近期流行的(de)産品的(de)規律。比如：

按圖片或視頻的(de)H:W:

①H:W>4/3(高圖）：切上(shàng)下兩端，保存爲(wéi / wèi)4/3，靠左展示。

②3/4≤(H:W)<4/3之(zhī)間(方圖）：切成正方形，靠中間展示。

③H:W≤3/4(扁圖）：切成3/4，靠中間展示。

以(yǐ)上(shàng)并不(bù)一(yī / yì ／yí)定是(shì)最好的(de)，但是(shì)秩序是(shì)要(yào / yāo)給到(dào)開發的(de)。

（2）圖片的(de)圓角和(hé / huò)直角

留意的(de)話，就(jiù)會發現有的(de)App的(de)圖片是(shì)圓角的(de)有的(de)是(shì)直角的(de)。

目的(de)隻有一(yī / yì ／yí)個(gè)，就(jiù)是(shì)确定這(zhè)兩種展示方式哪種更符合産品的(de)定位和(hé / huò)氣質。

一(yī / yì ／yí)般而(ér)言，做社交類的(de)産品，圖片用圓角看着舒服和(hé / huò)氣。做技術類的(de)或者法律類的(de)比較嚴肅的(de)産品，可以(yǐ)考慮直角。

最後還是(shì)一(yī / yì ／yí)句話，看競品，以(yǐ)及一(yī / yì ／yí)段時(shí)間流行哪種。

（3）大(dà)圖和(hé / huò)縮略圖

消息發送成功之(zhī)後 ，圖片也(yě)是(shì)縮略的(de)。并且要(yào / yāo)設計發送失敗的(de)提示圖例。點擊打開之(zhī)後大(dà)圖是(shì)否鋪滿整個(gè)窗口？

最後就(jiù)是(shì)不(bù)要(yào / yāo)忘記做縮略圖和(hé / huò)大(dà)圖，這(zhè)是(shì)完整的(de)一(yī / yì ／yí)套。

另外在(zài)很多公司，這(zhè)個(gè)算是(shì)設計師方面的(de)工作，但是(shì)産品經理要(yào / yāo)全局把關，就(jiù)要(yào / yāo)知其然知其所以(yǐ)然，不(bù)是(shì)主管覺得看着順眼就(jiù)這(zhè)樣吧。

7、産品經理對視頻拍攝窗口的(de)界定

産品經理在(zài)設計拍攝視頻或圖片功能的(de)時(shí)候，需要(yào / yāo)考慮是(shì)否滿屏拍攝，是(shì)否限制必須按一(yī / yì ／yí)定比例拍攝等。

之(zhī)所以(yǐ)考慮這(zhè)個(gè)問題，是(shì)因爲(wéi / wèi)有的(de)手機全屏比例拍攝的(de)效果并不(bù)美觀。另外一(yī / yì ／yí)些帶劉海的(de)手機屏幕，劉海部位必然是(shì)看不(bù)到(dào)拍攝畫面的(de)。

因此爲(wéi / wèi)了(le／liǎo)避免這(zhè)個(gè)影響，很多産品就(jiù)會選擇将上(shàng)方平齊與劉海的(de)高度遮住，設置成隻支持劉海以(yǐ)下拍攝。

當然，也(yě)有将底部菜單位置遮住的(de)，還有的(de)規則是(shì)隻允許拍攝出(chū)指定比例的(de)畫面，比如安寬度固定，取16:9的(de)畫面作爲(wéi / wèi)視頻窗口，多餘的(de)部分在(zài)拍攝期間都用黑色背景遮住。

這(zhè)種規則的(de)制定有好有壞，屬于(yú)A/B選擇的(de)問題。這(zhè)個(gè)選擇，需要(yào / yāo)産品經理來(lái)定。

産品經理可以(yǐ)通過借鑒競品和(hé / huò)分析本産品的(de)定位，有理有據地(dì / de)說(shuō)出(chū)自己的(de)理由，支持自己的(de)觀點即可。

8、将低頻功能放深一(yī / yì ／yí)點，以(yǐ)便将高頻功能凸顯出(chū)來(lái)

以(yǐ)拍攝視頻後的(de)貼紙爲(wéi / wèi)例，貼紙可以(yǐ)貼在(zài)視頻的(de)指定位置，也(yě)可以(yǐ)應用在(zài)視頻的(de)某一(yī / yì ／yí)時(shí)間段上(shàng)。

但是(shì)根據調研，多數用戶使用的(de)功能隻是(shì)選擇貼紙、删除貼紙和(hé / huò)拖動位置。少數用戶才會花精力在(zài)手機上(shàng)調整貼紙應用的(de)時(shí)間段，因爲(wéi / wèi)這(zhè)個(gè)操作稍微有點麻煩。

但是(shì)畢竟還是(shì)有這(zhè)麽一(yī / yì ／yí)小部分用戶是(shì)希望将自己拍攝的(de)作品精益求精的(de)，對此我們看如下方案：

方案一(yī / yì ／yí)，在(zài)選擇貼紙的(de)同時(shí)就(jiù)展示出(chū)時(shí)間軸，讓用戶選擇貼紙和(hé / huò)應用的(de)時(shí)間軸一(yī / yì ／yí)次性完成。讓功能集中在(zài)一(yī / yì ／yí)處開始和(hé / huò)結束，幹淨利索。

方案二，将選擇貼紙、删除貼紙和(hé / huò)拖動位置放在(zài)第一(yī / yì ／yí)層。完成之(zhī)後，再點擊該貼紙，彈出(chū)‘編輯’，這(zhè)才進入時(shí)間軸的(de)編輯。

很明顯第二個(gè)方案要(yào / yāo)好一(yī / yì ／yí)些，一(yī / yì ／yí)來(lái)提高了(le／liǎo)大(dà)部分用戶的(de)操作效率，不(bù)被無關的(de)功能幹擾；另外也(yě)不(bù)會影響發燒用戶進一(yī / yì ／yí)步挖掘極緻。

這(zhè)其實是(shì)整個(gè)産品設計的(de)指導思想：考慮了(le／liǎo)複雜性和(hé / huò)使用頻率，針對大(dà)衆用戶和(hé / huò)極緻用戶進行功能分離，最終實現完美的(de)效果。

9、圖片上(shàng)傳、壓縮等需要(yào / yāo)注意的(de)細節

圖片上(shàng)傳是(shì)APP離不(bù)開的(de)功能，比如聊天消息、上(shàng)傳照片做認證或頭像等。

提到(dào)圖片上(shàng)傳，就(jiù)離不(bù)開上(shàng)傳的(de)規制、發送或上(shàng)傳成功的(de)效果、點擊後的(de)效果、發布失敗的(de)效果、下載到(dào)本地(dì / de)的(de)效果等。具體可以(yǐ)這(zhè)樣分析：

（1）上(shàng)傳的(de)圖片文件大(dà)小和(hé / huò)尺寸大(dà)小的(de)要(yào / yāo)求：

在(zài)服務器承受的(de)壓力之(zhī)内盡量不(bù)做限制，必要(yào / yāo)的(de)時(shí)候才給予阈值。作爲(wéi / wèi)産品經理，需要(yào / yāo)與開發溝通當前的(de)方案選項是(shì)否有限制的(de)必要(yào / yāo)。

一(yī / yì ／yí)般而(ér)言，可以(yǐ)由客戶端自行壓縮或調整後展示。

對于(yú)PRD，給不(bù)給上(shàng)述限制都要(yào / yāo)交代清楚。

（2）限制一(yī / yì ／yí)次上(shàng)傳的(de)圖片張數：

比如微信是(shì)9張，抖音12張。對于(yú)PRD，該限制雖小，但要(yào / yāo)交代清楚。

（3）上(shàng)傳的(de)圖片限制格式：

一(yī / yì ／yí)般盡量不(bù)限制。作爲(wéi / wèi)産品經理，需要(yào / yāo)與開發溝通當前的(de)方案選項是(shì)否有限制的(de)必要(yào / yāo)。對于(yú)PRD，要(yào / yāo)交代清楚。

（4）上(shàng)傳圖片後展示的(de)效果：

一(yī / yì ／yí)般都是(shì)縮略圖，固定顯示的(de)長寬高。上(shàng)傳失敗的(de)圖片，支持再次上(shàng)傳。

點擊上(shàng)傳成功的(de)圖片，打開大(dà)圖。

（5）若需要(yào / yāo)該圖片進行小圖标或者展示形式的(de)多樣化應用，則後台隻需要(yào / yāo)保存原圖，其餘的(de)格式化應用在(zài)客戶端進行定義。

比如頭像圖片在(zài)後台存一(yī / yì ／yí)張大(dà)圖，應用層面展示的(de)是(shì)原型圖。又比如送禮物的(de)圖标，選擇的(de)界面展示的(de)是(shì)大(dà)圖，發出(chū)去之(zhī)後的(de)消息通知可能就(jiù)隻是(shì)個(gè)小圖标。

（6）圖片上(shàng)傳的(de)方式：

①第一(yī / yì ／yí)種是(shì)九宮格式的(de)

典型的(de)就(jiù)是(shì)微信發朋友圈的(de)圖片上(shàng)傳功能，這(zhè)種圖片上(shàng)傳功能适合上(shàng)傳多張圖片，圖片的(de)呈現方式一(yī / yì ／yí)般都是(shì)九宮格的(de)方式，在(zài)社交類，電商類的(de)商品上(shàng)傳和(hé / huò)寫遊記的(de)app上(shàng)多見。

多用于(yú)信息内容的(de)展示，一(yī / yì ／yí)般都是(shì)圖文相結合。一(yī / yì ／yí)般是(shì)先開啓相冊選取圖片，圖片的(de)點擊順序也(yě)一(yī / yì ／yí)般是(shì)最後的(de)呈現順序。

②第二種文件上(shàng)傳式

一(yī / yì ／yí)般在(zài)聊天界面會用到(dào)這(zhè)個(gè)功能居多，點擊qq和(hé / huò)微信下方工具欄的(de)加号都會有一(yī / yì ／yí)個(gè)圖片上(shàng)傳的(de)功能，這(zhè)種功能一(yī / yì ／yí)般是(shì)基于(yú)聊天的(de)場景，這(zhè)部分圖片上(shàng)傳功能展開的(de)方式都是(shì)半浮窗的(de)樣式，系統會先展示當前相冊最近的(de)幾張圖片，會有選擇是(shì)否發原圖的(de)設計。

③第三種嵌入式圖片上(shàng)傳

嵌入式圖片上(shàng)傳一(yī / yì ／yí)般應用在(zài)文檔撰寫類的(de)應用，在(zài)編寫文章的(de)時(shí)候需要(yào / yāo)嵌入一(yī / yì ／yí)些圖片說(shuō)明，這(zhè)種設計時(shí)圖片嵌入屬于(yú)一(yī / yì ／yí)種輔助文檔編輯的(de)功能，一(yī / yì ／yí)般需要(yào / yāo)去調取系統相冊，然後手動從相冊裏選取出(chū)你所需要(yào / yāo)的(de)圖片，可一(yī / yì ／yí)次性上(shàng)傳多張圖片。

④第四種添加附件

這(zhè)種圖片上(shàng)傳形式一(yī / yì ／yí)般圖片會作爲(wéi / wèi)附件的(de)形式上(shàng)傳，也(yě)是(shì)調取系統相冊，一(yī / yì ／yí)般上(shàng)傳成功後圖片都是(shì)縮略圖的(de)形式展示。

例如我們常用的(de)寫周報和(hé / huò)百度雲盤裏就(jiù)常用到(dào)這(zhè)個(gè)功能。這(zhè)種設計的(de)圖片上(shàng)傳功能适合大(dà)批量的(de)圖片上(shàng)傳。

10、時(shí)間格式的(de)定義

時(shí)間的(de)顯示基本分兩類，一(yī / yì ／yí)類是(shì)展示在(zài)外層的(de)，不(bù)需要(yào / yāo)很精準的(de)時(shí)間，比如聊天環境下的(de)時(shí)間、用戶動态外層顯示的(de)時(shí)間；另一(yī / yì ／yí)種作爲(wéi / wèi)嚴格的(de)時(shí)間落款，比如賬單明細。

後者基本可以(yǐ)一(yī / yì ／yí)刀切，就(jiù)用年月日時(shí)分秒，一(yī / yì ／yí)般都不(bù)是(shì)問題。

前者就(jiù)要(yào / yāo)切合場景，對時(shí)間的(de)要(yào / yāo)求和(hé / huò)用戶情感的(de)匹配性，融入一(yī / yì ／yí)定的(de)感情色彩或者暗示。這(zhè)裏就(jiù)有多種流派，比如推特和(hé / huò)微信就(jiù)區别很大(dà)。

對于(yú)前者，筆者在(zài)這(zhè)裏整理一(yī / yì ／yí)套自己用于(yú)聊天信息、評論、系統消息、動态的(de)時(shí)間的(de)展示規則，可以(yǐ)作爲(wéi / wèi)借鑒：

剛剛（T<1分鍾）；

XX分鍾前（1≤T<1h），比如53分鍾前；

XX小時(shí)前（1h≤T<24h），比如23小時(shí)前；

昨天 +點鍾（24h≤T<48h），比如 昨天 12：20。

日期+點鍾（48h≤T<1年） 比如：6-5 14:52，跨年則加上(shàng)年 2018-12-9 16:21

年-月（1年≤T） 比如：2018-5

11. 請求設備授權可以(yǐ)更簡捷嗎？

用戶如果未開啓APP的(de)設備授權，那麽用到(dào)相應的(de)功能，就(jiù)需要(yào / yāo)臨時(shí)提醒用戶授權。

比如點擊【抖音】的(de)拍攝按鈕進行視頻拍攝，就(jiù)需要(yào / yāo)請求攝像機授權。

如上(shàng)圖，點擊“去設置”，則前往手機的(de)【系統設置】界面手動操作。

相當于(yú)App隻負責告訴用戶：我需要(yào / yāo)你去設置中授權。

①若不(bù)同意，則放棄視頻功能的(de)使用。

②若同意，則前往【系統設置】中，執行獨立于(yú)App之(zhī)外的(de)操作。

操作完成，會發現連個(gè)返回APP功能都沒有，還需要(yào / yāo)自己找到(dào)App再進入一(yī / yì ／yí)次。是(shì)不(bù)是(shì)很low？

爲(wéi / wèi)什麽不(bù)能在(zài)App中一(yī / yì ／yí)鍵完成授權呢？

這(zhè)其實與手機操作系統有關系。

以(yǐ)IOS爲(wéi / wèi)例，手機操作系統對設備授權有一(yī / yì ／yí)個(gè)規定：

安裝後，首次打開App，App會自動請求用戶進行設備授權。

僅此一(yī / yì ／yí)下，之(zhī)後打開App，操作系統就(jiù)不(bù)會幫忙請求了(le／liǎo)。

因此，若首次未授權，或之(zhī)後關閉了(le／liǎo)授權，那麽手機系統不(bù)允許App直接一(yī / yì ／yí)鍵授權了(le／liǎo)。

明白這(zhè)個(gè)道(dào)理，設就(jiù)可以(yǐ)設計出(chū)貼合實際的(de)方案。需摸到(dào)操作系統的(de)“屋檐”，适當“低頭”。

12.頁面刷新加載的(de)“蘿蔔和(hé / huò)泥”

刷新，是(shì)産品經理需要(yào / yāo)定義的(de)常見的(de)功能。

要(yào / yāo)麽是(shì)手動觸發刷新，要(yào / yāo)麽是(shì)定時(shí)任務觸發。

定時(shí)任務觸發，比如1分鍾内的(de)消息顯示“剛剛”，那麽系統就(jiù)可以(yǐ)每一(yī / yì ／yí)分鍾自動刷新一(yī / yì ／yí)次，使顯示合理的(de)時(shí)間格式。

本文主要(yào / yāo)以(yǐ)手動觸發說(shuō)明，産品經理至少可以(yǐ)考慮四個(gè)方面的(de)問題：

①怎樣的(de)觸發方式

列表頁面加載，主流觸發方式是(shì)滑動，包括上(shàng)下左右滑動。

對于(yú)瀑布流的(de)内容爲(wéi / wèi)主的(de)産品，刷新較爲(wéi / wèi)頻繁，除了(le／liǎo)使用滑動加載之(zhī)外，還可配合按鈕加載。

比如【抖音】，可以(yǐ)雙擊底部菜單實現頁面刷新。

“滑動+點擊”這(zhè)樣的(de)設計，避免用戶置身于(yú)視頻瀑布流中隻靠單一(yī / yì ／yí)滑動帶來(lái)的(de)枯燥和(hé / huò)不(bù)适。

②打開新頁面加載的(de)

刷新有打開新頁面的(de)，也(yě)有在(zài)當前頁面加載新内容。

打開新頁面的(de)，需要(yào / yāo)考慮如下：

a. 翻頁方向：目前流行的(de)交互方式，是(shì)左右平移或覆蓋平移，比較符合用戶對線性操作流程的(de)的(de)直觀感受。

b. 加載發生在(zài)翻頁的(de)前還是(shì)後呢？

翻頁前加載：适用于(yú)需要(yào / yāo)判斷及驗證處理的(de)頁面中。例如表單信息判斷和(hé / huò)登錄驗證等。

而(ér)絕大(dà)部分app采用翻過去之(zhī)後加載，這(zhè)樣可以(yǐ)極大(dà)的(de)增強頁面的(de)流暢感。

③設計loading标示

a.loading标示的(de)樣式

菊花和(hé / huò)進度條是(shì)最基礎的(de)loading标示。

若做成動畫，或者加入App品牌特色，就(jiù)更顯誠意了(le／liǎo)。

b.loading标示的(de)位置

是(shì)在(zài)頂部、中部、還是(shì)底部呢？

若看不(bù)出(chū)優劣，就(jiù)選一(yī / yì ／yí)種，并向團隊交代清楚。必要(yào / yāo)的(de)時(shí)候做A/B測試。

④加載策略

在(zài)實現機制上(shàng)，産品經理要(yào / yāo)說(shuō)清楚效果。

比如最遲不(bù)超過2s、要(yào / yāo)求某些内容先加載出(chū)來(lái)等等。

這(zhè)樣就(jiù)引導出(chū)了(le／liǎo)常見的(de)幾種機制：

異步加載、分模塊加載、懶加載和(hé / huò)預加載等。

需要(yào / yāo)注意的(de)是(shì)：加載機制不(bù)僅僅是(shì)受限于(yú)網速，更是(shì)信息泛濫時(shí)代的(de)一(yī / yì ／yí)種策略：

讓用戶優先看到(dào)什麽，節約用戶精力，提高回報率。

13. 【消息】模塊的(de)設計

①消息歸類

在(zài)設計消息菜單的(de)時(shí)候，需要(yào / yāo)考慮默認置頂、消息歸類等功能。讓目标信息曝光增加，同時(shí)讓消息有條理。

比如，【互動通知】置頂在(zài)列表的(de)最上(shàng)方，類于(yú)“文件夾”。點擊，則打開系統消息列表。

②未讀提示：數字還是(shì)紅點呢？

一(yī / yì ／yí)般而(ér)言，人(rén)與人(rén)的(de)聊天顯示未讀條數，因爲(wéi / wèi)時(shí)效性要(yào / yāo)求高。

超過99條一(yī / yì ／yí)般顯示99+。

實際顯示99也(yě)可以(yǐ)，對用戶而(ér)言已無差異。

非緊急的(de)通知可以(yǐ)不(bù)顯示具體數字。

消息已讀的(de)判斷标準：隻要(yào / yāo)打開就(jiù)算已讀。

哪怕眼前條隻展出(chū)了(le／liǎo)1條，哪怕沒來(lái)得及看就(jiù)手機掉線了(le／liǎo)，也(yě)都當做已讀處理。

③删除消息

分兩類，一(yī / yì ／yí)類是(shì)單條聊天記錄的(de)删除；一(yī / yì ／yí)類是(shì)整個(gè)聊天條目的(de)删除。

④消息保存時(shí)長

可以(yǐ)保存在(zài)服務器，用戶可以(yǐ)通過加載，分批查看曆史消息。

此外，考慮聊天消息的(de)複制、轉發、失敗重發等。

14. Web在(zài)手機端的(de)适配

産品官網，初期都很簡單，基本都是(shì)：産品介紹+下載鏈接。

功能不(bù)複雜，因此可以(yǐ)考慮設置手機訪問官網的(de)功能。

如上(shàng)圖所示，手機端直接訪問PC官網體驗極差。

因此需要(yào / yāo)一(yī / yì ／yí)定程度的(de)适配，大(dà)概會有以(yǐ)下幾種形式：

①極簡适配

極簡适配就(jiù)是(shì)對内容進行删減，直到(dào)剩下最後一(yī / yì ／yí)個(gè)頁面，用一(yī / yì ／yí)個(gè)頁面去呈現最基本的(de)産品介紹以(yǐ)及下載按鈕。

②完全适配

做了(le／liǎo)全适配的(de)官網會在(zài)手機端有良好的(de)表現。當然，Pc端的(de)官網有時(shí)候體量太大(dà)，在(zài)适配到(dào)手機端的(de)時(shí)候也(yě)要(yào / yāo)有删減。

15. 左右滑動切換Tab頁簽

很多App的(de)Tab頁簽，支持左右滑動切換。那麽是(shì)不(bù)是(shì)在(zài)設計Tab頁簽的(de)時(shí)候都要(yào / yāo)這(zhè)樣規劃呢？

筆者認爲(wéi / wèi)在(zài)确定這(zhè)個(gè)方案時(shí)，産品經理需要(yào / yāo)考慮如下：

（1）明确滑動切換頁簽的(de)優缺點

操作步驟上(shàng)，點擊切換和(hé / huò)滑動切換都是(shì)1個(gè)動作事件。隻是(shì)通常來(lái)看，滑動操作比點擊操作難度稍低，畢竟點擊需要(yào / yāo)找到(dào)觸發區。

另一(yī / yì ／yí)個(gè)方面，支持滑動切換可以(yǐ)覆蓋更多用戶的(de)操作預期——假設用戶普遍習慣滑動切換的(de)操作方式。

但是(shì)滑動切換頁簽的(de)操作本身也(yě)有弊端。比如有時(shí)候本來(lái)是(shì)想上(shàng)下滑動的(de)，但是(shì)手指一(yī / yì ／yí)不(bù)小心就(jiù)滑歪了(le／liǎo)，于(yú)是(shì)無意識觸發了(le／liǎo)滑動事件，跳到(dào)了(le／liǎo)另一(yī / yì ／yí)個(gè)頁面去，可能就(jiù)打斷用戶沉浸式體驗。

（2）基于(yú)以(yǐ)上(shàng)，筆者建議如下

①沉浸式的(de)瀑布流，比如抖音的(de)視頻流，不(bù)推薦滑切Tab頁。

如果非要(yào / yāo)做，則将滑動切換觸發靈敏度降低。

②内容長度有限，或者閱讀速度快的(de)Tab頁簽，可以(yǐ)使用滑切。比如電商商品的(de)【參數】、【評論】之(zhī)間的(de)切換。