1.0版App如何做全局產(chǎn)品設(shè)計(jì)

14 評(píng)論 34514 瀏覽 473 收藏 11 分鐘

本文作者根據(jù)自己過(guò)去幾年做工具類App經(jīng)驗(yàn)展開(kāi)的,講的是搭建App 1.0版時(shí)需要做好的全局設(shè)計(jì),內(nèi)容很基礎(chǔ),分享給經(jīng)驗(yàn)較淺的PM同行,老司機(jī)可直接繞行哦~

在做1.0版App時(shí),項(xiàng)目組為了控制成本、盡快達(dá)成里程碑,往往是功能開(kāi)發(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ā)人員在開(kāi)發(fā)過(guò)程中會(huì)經(jīng)常提出疑問(wèn),在一問(wèn)一答甚至是返工修改的過(guò)程中反而降低了效率,延長(zhǎng)了項(xiàng)目的周期。

本汪曾經(jīng)在兩天內(nèi)畫(huà)出2個(gè)1.0版App的原型并寫(xiě)出需求,總體體會(huì)是設(shè)計(jì)功能簡(jiǎn)單的初期版本是容易的,難點(diǎn)在于如何在工期緊張的條件下保證App的整體體驗(yàn)。

這篇文章是根據(jù)我過(guò)去幾年做工具類App經(jīng)驗(yàn)展開(kāi)的,講的是搭建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ū)分開(kāi)的——因?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ì)于開(kāi)發(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)畫(huà)+提示文案,下拉刷新、上拉加載更多則在頁(yè)面頂部和底部添加相關(guān)提示。當(dāng)滑動(dòng)頁(yè)面到了底部沒(méi)有更多時(shí)還也可以再增加一個(gè)提示,典型的如支付寶的“我是有底線的”。

此外,現(xiàn)在有很多App都在加載中使用帶品牌標(biāo)識(shí)的gif圖,這在第一版App中可以暫時(shí)不考慮,只要設(shè)計(jì)了全局加載并讓RD做了開(kāi)發(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)的(至于從開(kāi)發(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í)急忙迭代開(kāi)發(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)然后再由客戶決定是否下載。

蘋(píng)果App Store大家懂得,對(duì)開(kāi)發(fā)者的約束較強(qiáng),不允許開(kāi)發(fā)者引導(dǎo)用戶下載更新;如果直接把升級(jí)提示的邏輯卸載ipa包里,并且審核時(shí)被掃描到,蘋(píng)果是不會(huì)允許上架的,所以只能通過(guò)后臺(tái)控制繞過(guò)這個(gè)坑:

  1. 升級(jí)提示邏輯不能寫(xiě)在本地;
  2. 先發(fā)包審核,通過(guò)審核后再由服務(wù)端控制,在客戶端彈窗引導(dǎo)升級(jí)。

八、其它

以上所述的基本上都是產(chǎn)品設(shè)計(jì)層面的基礎(chǔ)搭建。除了這些之外還有緩存機(jī)制、crash收集、日志記錄、定位機(jī)制、消息推送、埋點(diǎn)等需要考慮,以上每一項(xiàng)單拿出來(lái)都可以寫(xiě)很多,此處不展開(kāi),以后視了解的深度情況再分享。

 

作者:霹靂,微信公眾號(hào):產(chǎn)品霹靂

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 好多坑,我也踩過(guò)了

    來(lái)自江蘇 回復(fù)
  2. 緩存機(jī)制、crash收集、日志記錄、定位機(jī)制、消息推送、埋點(diǎn)等,這些能描述下么?

    來(lái)自北京 回復(fù)
    1. 這些不都是公司現(xiàn)有的基礎(chǔ)服務(wù)提供吧。cdn緩存,異常監(jiān)控,定位和自動(dòng)定位獲取poi,push,點(diǎn)擊埋點(diǎn),曝光埋點(diǎn),,,太多了吧

      來(lái)自江蘇 回復(fù)
  3. 兄臺(tái)寫(xiě)得真好,說(shuō)的,我基本都踩過(guò)了。。。

    來(lái)自廣西 回復(fù)
  4. 期待下續(xù)集

    回復(fù)
  5. 干貨,望后續(xù)歸納

    回復(fù)
    1. 拉拉阿拉

      來(lái)自北京 回復(fù)
    2. (~ ̄▽ ̄)~

      來(lái)自福建 回復(fù)
  6. 講到的其他關(guān)于埋點(diǎn)等的機(jī)制在哪能看到,有相關(guān)文章嗎?希望作者后續(xù)繼續(xù)歸納

    回復(fù)
  7. 非常棒

    回復(fù)
  8. 999999

    來(lái)自廣東 回復(fù)
  9. 升級(jí)這個(gè),深有感觸

    來(lái)自浙江 回復(fù)
  10. mark

    回復(fù)
  11. 講的很好

    來(lái)自河北 回復(fù)