App產(chǎn)品原型背后要交代的細節(jié)和要理解的原則(一)
筆者從產(chǎn)品經(jīng)理設(shè)計需求的角度,分享了APP產(chǎn)品原型設(shè)計背后需要的注意的細節(jié)和原則,供大家參考與學(xué)習(xí)。
移動App的產(chǎn)品設(shè)計往往都是所見即所有,沒有太深奧的邏輯要交代的,比葫蘆畫瓢即可。
產(chǎn)品經(jīng)理常常很快就把原型畫出完了,但是在設(shè)計UI的時候或開發(fā)的時候就常常被拉去澄清細節(jié),原因就是對設(shè)計的細節(jié)交代不清楚,或者了解的不甚深入,缺少對邊界或排他項的界定。
筆者近期從事社交App的需求,本文就移動端App產(chǎn)品的日??偨Y(jié),從產(chǎn)品經(jīng)理設(shè)計需求的角度,分享一些注意事項和細節(jié)如下,歡迎批評探討。
一、明確App的按鈕類型
從定義需求的角度來說,產(chǎn)品經(jīng)理只要交代了哪里是按鈕就可以了,可以通篇一律使用同一個按鈕線框表達。但是這只能是個初稿,在落實之前,產(chǎn)品經(jīng)理或交互設(shè)計師需要確定按鈕的具體形態(tài)。
一般而言,一個APP的按鈕設(shè)定四種就夠了,設(shè)置的維度可以是按鈕的定位權(quán)重(注意,菜單的入口或圖表不包括在本次討論中,比如微信的+、定位圖標這種)。
- 權(quán)重最高的按鈕:這種按鈕一般比較大,顏色明顯,主題鮮明。常見的比如用戶“登錄”按鈕;
- 中等權(quán)重的按鈕:這種按鈕在產(chǎn)品中最為常見,比如一般的詢問框上的【確定/取消】按鈕;
- 權(quán)重最小的按鈕:比如“關(guān)閉”、“查看更多”按鈕。這些按鈕的作用就是可以點擊,用戶看得到即可。這種按鈕形式多樣,可以沒有框,只有文字。也可以只是個圖形,比如關(guān)閉按鈕用x表示;
- 特殊按鈕,這種按鈕區(qū)別于其他的按鈕,少且特別。要么是帶很多文字,要么是App的核心入口,比如soul首頁的“靈魂匹配”按鈕。
在輸出的需求文檔中,可以一開始在“全局規(guī)范”中就定義這四種按鈕代號,然后在原型中備注按鈕類型的代號,這樣設(shè)計就知道你是要怎么樣的效果了。
二、了解第三方登錄的本質(zhì)
社交類App登錄方式,基本都是手機驗證碼為主,配合第三方登陸,很少注冊賬號密碼(與App的定位和用戶群有關(guān))。
第三方登錄就是借助第三方應(yīng)用的接口實現(xiàn)用戶登記,比如常見的三家:微信、QQ、微博。
其目的之一是關(guān)聯(lián)賬號,形成社交群落之間的呼應(yīng),有利于用戶生態(tài)鏈的搭建;其二是獲取用戶的一部分已有信息,比如用戶信息或流量資源。
需要注意的有兩點:
- 第三方賬號給的資料完善度和安全性不好把控。比如你期望獲取QQ中的頭像、昵稱、年齡、地區(qū),但是QQ可能只給你頭像和昵稱。又比如有一天第三方封了接口,那么第三方登錄功能就停擺了;
- 第三方登錄方式,對用戶來說不一定就是省時省力的渠道。因為相關(guān)法規(guī)的要求很多APP是需要用戶手機號的,而第三方登錄并不能獲取用戶已經(jīng)提供給第三方的手機號(用戶隱私)。
因此對用戶來說常常是使用第三方登錄后,仍然要跳轉(zhuǎn)到驗證手機號的界面,還不如直接使用手機驗證登錄。
三、我們常見的支付功能的貓膩
支付很常見,社交應(yīng)用的虛擬禮物購買、知識平臺的付費學(xué)習(xí)等。
在設(shè)計支付功能的時候,主要注意的是要從安卓和IOS兩個系統(tǒng)的角度區(qū)分設(shè)計。
(1)首先明確一個常識,就是支付必須是有資質(zhì)的支付平臺才能進行操作處理。這就是為什么很多大的電商公司的交易要經(jīng)過支付公司的結(jié)算才能拿到錢,比如paypal、騰付通、支付寶、微信支付、網(wǎng)銀在線等。其中安卓手機最常用的是支付寶或者微信;
(2)安卓系統(tǒng)接通第三方支付體系還是比較友好的,手續(xù)費也不高。調(diào)用支付寶或微信支付,會返回其綁定的銀行卡或者余額,可以作為業(yè)務(wù)數(shù)據(jù)保存在后臺。有時候前端感受不到這個數(shù)據(jù),產(chǎn)品經(jīng)理應(yīng)該知道,作為功能擴展的考慮因素;
(3)蘋果手機(IOS系統(tǒng))正常來說只能調(diào)用蘋果支付,蘋果順帶扣的手續(xù)費比較高。虛擬支付的時候,安卓是可以使用任意金額充值的,但是蘋果手機對特定的原幣,只能選擇固定的金額。這個是因為蘋果公司將充值金額本身固定了,當成一個一個的商品對外出售。
如下圖就是蘋果提供的清單,比如可以購買的價格列就是需要支付的金額,收入列就是扣掉手續(xù)費之后有效的金額??梢钥吹交?元錢,在蘋果這里只剩下了4.12元。
這就是為什么陌陌同樣是充值6塊錢,安卓系統(tǒng)給60個虛擬幣,蘋果只給42個幣。
四、了解后臺數(shù)據(jù)的存儲
做APP的不僅要盯住頁面和用戶,也要理解數(shù)據(jù)的運作,這樣對內(nèi)容推送機制、數(shù)據(jù)搜索的頁面展示的方案選型幫助很大。
這里介紹三點:
(1)初創(chuàng)公司的數(shù)據(jù)基本都使用的云端存儲,同時配合自己的數(shù)據(jù)庫,從效率和安全性上都會更有保障。
產(chǎn)品經(jīng)理需大概了解數(shù)據(jù)存儲的定位。以視頻直播類為例,直播或視頻數(shù)據(jù)文件占存比較大,一般都是存儲在云端的,而用戶業(yè)務(wù)數(shù)據(jù)放在自己的服務(wù)器的數(shù)據(jù)庫中,原因很簡單這些牽扯更多的隱私和安全責任,且一般數(shù)據(jù)不會太多。
(2)產(chǎn)品經(jīng)理需直觀地理解關(guān)系型數(shù)據(jù)庫和非關(guān)系型數(shù)據(jù)庫,比如非關(guān)系型的mongdb數(shù)據(jù)庫,一般存儲信息量大的不定型數(shù)據(jù),比如用戶日志。
而MySQL則承擔了大部分可以用二維表表達的規(guī)則的數(shù)據(jù),比如用戶資料、數(shù)據(jù)字典的參數(shù)配置等。
(3)數(shù)據(jù)存儲與頁面的搜索方式等方面都有很大關(guān)系。比如,在“我的好友”中搜索用戶昵稱,是只搜索自己關(guān)系為好友的用戶,還是搜出有一部分是好友,另一部分非好友的用戶并用標簽分類呢?
這兩個方案前者比較保守,但是如果期望用戶擴大社交圈的話后者更有價值。因為不僅可以看到好友,并且還能提供增加陌生人為好友的功能。
但是這時候還要結(jié)合后臺數(shù)據(jù)的存儲,是否好友和陌生人存儲在一個表里了呢,如果分開了那最好就不要一起搜索,隨著用戶量增大,聊表查詢很耗性能。
五、了解前后端接口
項目過程中,前端與后端開發(fā)之間溝通需求基本都是圍繞接口請求數(shù)據(jù)進行的。
接口是前后端分開開發(fā)的行業(yè)標配嗎,是高內(nèi)聚的體現(xiàn)。因此產(chǎn)品經(jīng)理要理解接口的原理和自己的目的,協(xié)助前后端完善接口的定義(另一篇文章有專門介紹)。
后端開發(fā)在寫接口的時候,一般需要知道未來的走向,包括數(shù)據(jù)量級、功能擴展性等。
產(chǎn)品經(jīng)理要針對該功能給開發(fā)們說清楚未來的擴展可能性,比如:App的用戶動態(tài)的評論,計劃是展示一部分優(yōu)質(zhì)評論內(nèi)容(類似微信的朋友圈)在外層,類似下圖:
但是對于展開部分的算法尚還在研究階段,因此這個版本將評論折疊,只顯示數(shù)字,點開則打開評論列表。
后端在給前端傳的接口中,可能會多設(shè)計出“是否展示在外層”標識,提前預(yù)留參數(shù),以后版本用。本版本前端只需填留下自己需要的信息即可。
六、圖片比例、圓角和縮放的注意事項
App用到圖片的地方很多,每一處又可能有不同狀態(tài)下的不同表現(xiàn)形式。產(chǎn)品經(jīng)理不能只放一張圖了事,應(yīng)當對圖片不同場景下的樣式列舉清楚。比如下面幾點:
1. 縮略圖的縮放比例
微信朋友圈的列表中,圖片都是縮略的,那么設(shè)計的時候首先就是縮略方式的問題。
之所以要給出縮小的比例或最終尺寸大小,是因為拍攝的手機屏幕尺寸和比例不一致,上傳的圖片又可能有各種形狀。因此發(fā)布之后要給予對應(yīng)的規(guī)則和秩序,避免效果模糊、展示不全、圖片過小等不良效果。
在確定方案的時候,合理即可。可以通過研究競品,找近期流行的產(chǎn)品的規(guī)律。
比如按圖片或視頻的H:W:
- H:W>4/3(高圖):切上下兩端,保存為4/3,靠左展示;
- 3/4≤(H:W)<4/3之間(方圖):切成正方形,靠中間展示;
- H:W≤3/4(扁圖):切成3/4,靠中間展示。
以上并不一定是最好的,但是秩序是要給到開發(fā)的。
2. 圖片的圓角和直角
留意的話,就會發(fā)現(xiàn)有的App的圖片是圓角的有的是直角的。目的只有一個,就是確定這兩種展示方式哪種更符合產(chǎn)品的定位和氣質(zhì)。
一般而言,做社交類的產(chǎn)品,圖片用圓角看著舒服和氣;做技術(shù)類的或者法律類的比較嚴肅的產(chǎn)品,可以考慮直角。
最后還是一句話,看競品,以及一段時間流行哪種。
3. 大圖和縮略圖
消息發(fā)送成功之后 ,圖片也是縮略的,并且要設(shè)計發(fā)送失敗的提示圖例。
點擊打開之后大圖是否鋪滿整個窗口?最后就是不要忘記做縮略圖和大圖,這是完整的一套。
另外在很多公司,這個算是設(shè)計師方面的工作,但是產(chǎn)品經(jīng)理要全局把關(guān),就要知其然知其所以然,不是主管覺得看著順眼就就這樣。
作者:唧唧歪歪PM;公眾號:唧唧歪歪PM(ID:jjyypm)
本文由 @唧唧歪歪PM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議
謝謝
謝謝作者分享,新人表示很清晰很受用
去給我征文的作品點是個贊 快 http://zt.woshipm.com/9years/articleDetail?articleId=20&from=groupmessage&isappinstalled=0
很實用,謝謝大佬得輸出分享
簡直太棒啦,對剛接觸app的產(chǎn)品,真的超級實用
(頭像好看)
會有接下來的文章更新嗎 受益了 希望持續(xù)更新
“調(diào)用支付寶或微信支付,會返回其綁定的銀行卡或者余額”
支付寶或微信沒有提供該類服務(wù)吧!
我也好奇,怎么會返回用戶余額這種信息。以前看過的接口中沒看到有余額這個字段,不知道是不是看漏了
返回余額想多了
微信的第三方登陸,不能申請獲取微信的手機號碼是嗎?
這些知識怎么系統(tǒng)學(xué)習(xí)呀
多謝分享,在下受益良多