本文作者根據(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è)坑：

1. 升級(jí)提示邏輯不能寫在本地；
2. 先發(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é)議