1.0版App如何做全局產(chǎn)品設(shè)計(jì)
本文作者根據(jù)自己過(guò)去幾年做工具類App經(jīng)驗(yàn)展開的,講的是搭建App 1.0版時(shí)需要做好的全局設(shè)計(jì),內(nèi)容很基礎(chǔ),分享給經(jīng)驗(yàn)較淺的PM同行,老司機(jī)可直接繞行哦~
在做1.0版App時(shí),項(xiàng)目組為了控制成本、盡快達(dá)成里程碑,往往是功能開發(fā)的優(yōu)先級(jí)較高,體驗(yàn)的優(yōu)先級(jí)相對(duì)較低。
如果PM的經(jīng)驗(yàn)不足,一味做功能、趕進(jìn)度,很容易忽略App全局的一些體驗(yàn)設(shè)計(jì),給項(xiàng)目后期迭代挖坑;
另一方面,如果沒(méi)有對(duì)這些基礎(chǔ)體驗(yàn)進(jìn)行考慮,研發(fā)人員在開發(fā)過(guò)程中會(huì)經(jīng)常提出疑問(wèn),在一問(wèn)一答甚至是返工修改的過(guò)程中反而降低了效率,延長(zhǎng)了項(xiàng)目的周期。
本汪曾經(jīng)在兩天內(nèi)畫出2個(gè)1.0版App的原型并寫出需求,總體體會(huì)是設(shè)計(jì)功能簡(jiǎn)單的初期版本是容易的,難點(diǎn)在于如何在工期緊張的條件下保證App的整體體驗(yàn)。
這篇文章是根據(jù)我過(guò)去幾年做工具類App經(jīng)驗(yàn)展開的,講的是搭建App 1.0版時(shí)需要做好的全局設(shè)計(jì),內(nèi)容很基礎(chǔ),分享給經(jīng)驗(yàn)較淺的PM同行,老司機(jī)可直接繞行。
(以下僅以iOS的交互設(shè)計(jì)舉例,安卓的設(shè)計(jì)根據(jù)material design的原則轉(zhuǎn)化即可,再或者和iOS共用一套設(shè)計(jì)也無(wú)妨)
一、錯(cuò)誤提示
大家都知道,越是復(fù)制的業(yè)務(wù),在系統(tǒng)運(yùn)行過(guò)程中出錯(cuò)的情況就越多。出于對(duì)用戶體驗(yàn)的考慮,我們不能把所有的錯(cuò)誤都告訴用戶。即使是必須告訴用戶的,也應(yīng)該盡量使錯(cuò)誤看起來(lái)友好一點(diǎn)。
除了業(yè)務(wù)方面的錯(cuò)誤外,移動(dòng)端通常只需要給用戶兩類錯(cuò)誤——網(wǎng)絡(luò)錯(cuò)誤和服務(wù)器錯(cuò)誤。
可能會(huì)有些同學(xué)認(rèn)為多數(shù)用戶不理解何為服務(wù)器錯(cuò)誤,而且在成熟的公司和項(xiàng)目上,服務(wù)器出錯(cuò)導(dǎo)致前端無(wú)法訪問(wèn)的情況并不多,所以干脆連這類報(bào)錯(cuò)都省了。但是我個(gè)人認(rèn)為還是應(yīng)該區(qū)分開的——因?yàn)橐坏┯杏脩簟⑦\(yùn)營(yíng)或者客服反饋時(shí),就能快速定位到是哪一類錯(cuò)誤。
網(wǎng)絡(luò)錯(cuò)誤和服務(wù)器錯(cuò)誤在操作過(guò)程中,又區(qū)分為加載整頁(yè)時(shí)報(bào)錯(cuò)、局部加載時(shí)報(bào)錯(cuò)和點(diǎn)擊按鈕時(shí)報(bào)錯(cuò)。第一個(gè)和第三個(gè)好理解,第二個(gè)(局部加載報(bào)錯(cuò))主要指的是上拉頁(yè)面加載更多時(shí)的錯(cuò)誤。整頁(yè)加載出錯(cuò)一般需要有單獨(dú)的提示頁(yè)面,局部加載報(bào)錯(cuò)和點(diǎn)擊按鈕請(qǐng)求服務(wù)時(shí)出錯(cuò)一般給個(gè)toast提示或者彈窗提示即可。
二、空頁(yè)面
在操作App的過(guò)程中,不可避免會(huì)遇到頁(yè)面內(nèi)沒(méi)有數(shù)據(jù)或者頁(yè)面出錯(cuò)的情況;這時(shí)候需要在頁(yè)面內(nèi)顯示出空狀態(tài),告訴用戶為什么出現(xiàn)這種情況、下一步需要做什么。
空狀態(tài)也分整頁(yè)為空、局部為空兩種類型,除了出現(xiàn)的位置不同外,在處理方式上可以采取一樣的辦法。
空狀態(tài)提示一般是圖片、提示標(biāo)題、提示文案和操作按鈕的組合。如何根據(jù)實(shí)際需要進(jìn)行搭配,最好在第一版時(shí)就確定下來(lái)。雖然到了后期也能添加新的版式設(shè)計(jì),但是對(duì)于開發(fā)人員來(lái)說(shuō),有可能前期就做了幾個(gè)通用的版式,如果要臨時(shí)添加就要看你的人品和RD是否積極配合了。
常見(jiàn)的有以下幾種情況:
三、頁(yè)面內(nèi)刷新/加載
如果頁(yè)面內(nèi)容較少,可以一次性全部加載完;內(nèi)容多的情況下,需要做分頁(yè),則分頁(yè)內(nèi)需要定義好每次加載多少條數(shù)據(jù)。
頁(yè)面整體加載通常在頁(yè)面中部使用動(dòng)畫+提示文案,下拉刷新、上拉加載更多則在頁(yè)面頂部和底部添加相關(guān)提示。當(dāng)滑動(dòng)頁(yè)面到了底部沒(méi)有更多時(shí)還也可以再增加一個(gè)提示,典型的如支付寶的“我是有底線的”。
此外,現(xiàn)在有很多App都在加載中使用帶品牌標(biāo)識(shí)的gif圖,這在第一版App中可以暫時(shí)不考慮,只要設(shè)計(jì)了全局加載并讓RD做了開發(fā),圖片可以等到后期再替換。
四、切換頁(yè)面的刷新/加載原則
頁(yè)面的整體刷新會(huì)影響錨點(diǎn)發(fā)揮作用。
例如,用戶拖動(dòng)頁(yè)面中的列表,到了中部的某個(gè)位置,此時(shí)用戶切換到其它頁(yè)面然后再回到原來(lái)的頁(yè)面,如果頁(yè)面刷新了就會(huì)回到頁(yè)面的頂部,那么用戶還得拖動(dòng)頁(yè)面才能接著看列表中的內(nèi)容。在一些情況下,這種體驗(yàn)是非常不好的;所以需要定義好各個(gè)頁(yè)面直接跳轉(zhuǎn)時(shí)刷新還是不刷新。
下面給出一個(gè)參考思路,可以應(yīng)用到整個(gè)App的所有頁(yè)面,也可以具體問(wèn)題具體分析。
五、彈窗
在App中,彈窗樣式也是可以復(fù)用的。有經(jīng)驗(yàn)的客戶端RD會(huì)把彈窗做成global,這樣一旦需要在大版本迭代中對(duì)彈窗UI樣式進(jìn)行修改時(shí),只改動(dòng)global里的設(shè)計(jì)就能完成App里大部分的彈窗樣式。
所以基于這點(diǎn)考慮,在1.0版本時(shí)可以把后期可能會(huì)用到的所有彈窗樣式都列舉出來(lái)給RD;各種樣式說(shuō)到底是圖片、標(biāo)題、說(shuō)明文案、輸入交互和按鈕的組合。
常見(jiàn)的彈窗樣式見(jiàn)下方,其中沒(méi)有交互(輸入項(xiàng))的dialog會(huì)在App中占大頭,其余的也可以讓RD在項(xiàng)目過(guò)程中遇到時(shí)再做特殊處理。
六、操作面板
屏幕底部彈出的操作面板本質(zhì)上是另一種彈窗,事實(shí)上有很多同樣的功能在不同的App上有用彈窗實(shí)現(xiàn)的也有用操作面板實(shí)現(xiàn)的(至于從開發(fā)的角度看是否一樣,本汪就不知道了)。
這里且不說(shuō)復(fù)制的操作面板——因?yàn)橐坏┕δ軓?fù)雜肯定是要做特殊處理的——就說(shuō)最常見(jiàn)的多選功能的操作面板,樣式如下:
需要注意的是:帶有說(shuō)明標(biāo)題和不帶說(shuō)明標(biāo)題的面板對(duì)于RD來(lái)說(shuō)是兩個(gè)組件,需要做區(qū)分處理。
七、升級(jí)引導(dǎo)
最后說(shuō)說(shuō)App的升級(jí)引導(dǎo)。項(xiàng)目組辛苦做出App,第一個(gè)版本發(fā)布后用戶量上去了,但是在后臺(tái)看到各種吐槽。這時(shí)急忙迭代開發(fā)出第二個(gè)版本,卻發(fā)現(xiàn)第一個(gè)版本沒(méi)有做升級(jí)引導(dǎo)——頓時(shí)奔潰有木有啊。
所以本汪建議:但凡是要發(fā)布,那就必須有升級(jí)的機(jī)制,否則客戶不更新PM、RD哭死也沒(méi)用。
升級(jí)無(wú)非分為強(qiáng)制升級(jí)和可選升級(jí)兩種。
對(duì)于安卓來(lái)說(shuō),因?yàn)楦鱾€(gè)市場(chǎng)放得較松,所以可以在發(fā)布新版本時(shí)由App直接先把a(bǔ)pk下載到本地(一般是在wifi環(huán)境下),然后再詢問(wèn)客戶是否要升級(jí);也可以先詢問(wèn)然后再由客戶決定是否下載。
蘋果App Store大家懂得,對(duì)開發(fā)者的約束較強(qiáng),不允許開發(fā)者引導(dǎo)用戶下載更新;如果直接把升級(jí)提示的邏輯卸載ipa包里,并且審核時(shí)被掃描到,蘋果是不會(huì)允許上架的,所以只能通過(guò)后臺(tái)控制繞過(guò)這個(gè)坑:
- 升級(jí)提示邏輯不能寫在本地;
- 先發(fā)包審核,通過(guò)審核后再由服務(wù)端控制,在客戶端彈窗引導(dǎo)升級(jí)。
八、其它
以上所述的基本上都是產(chǎn)品設(shè)計(jì)層面的基礎(chǔ)搭建。除了這些之外還有緩存機(jī)制、crash收集、日志記錄、定位機(jī)制、消息推送、埋點(diǎn)等需要考慮,以上每一項(xiàng)單拿出來(lái)都可以寫很多,此處不展開,以后視了解的深度情況再分享。
作者:霹靂,微信公眾號(hào):產(chǎn)品霹靂
本文由 @霹靂 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
好多坑,我也踩過(guò)了
緩存機(jī)制、crash收集、日志記錄、定位機(jī)制、消息推送、埋點(diǎn)等,這些能描述下么?
這些不都是公司現(xiàn)有的基礎(chǔ)服務(wù)提供吧。cdn緩存,異常監(jiān)控,定位和自動(dòng)定位獲取poi,push,點(diǎn)擊埋點(diǎn),曝光埋點(diǎn),,,太多了吧
兄臺(tái)寫得真好,說(shuō)的,我基本都踩過(guò)了。。。
期待下續(xù)集
干貨,望后續(xù)歸納
拉拉阿拉
(~ ̄▽ ̄)~
講到的其他關(guān)于埋點(diǎn)等的機(jī)制在哪能看到,有相關(guān)文章嗎?希望作者后續(xù)繼續(xù)歸納
非常棒
999999
升級(jí)這個(gè),深有感觸
mark
講的很好