APP的所有功能和內(nèi)容最終都呈現(xiàn)在頁面這個載體上。設(shè)計好頁面，至少會讓整個APP的交互體驗達到及格的水平。而頁面的加載邏輯、狀態(tài)表現(xiàn)等規(guī)則在大部分時候都應(yīng)該是一致的。所以，PM應(yīng)該提前定義好頁面的全局規(guī)范再去設(shè)計具體的頁面。

我將從頁面內(nèi)容的類型、頁面數(shù)據(jù)的加載邏輯&刷新邏輯、頁面顯示的狀態(tài)、頁面間如何轉(zhuǎn)場等5個角度來講解。

當(dāng)你通過這種方法去和前端工程師提頁面需求并要求他寫到框架中，會讓他對你另眼相看。并且如果以后需要修改，僅需修改框架即可改變所有頁面的交互規(guī)則。

一、頁面

當(dāng)你打開一個APP之后，你看到的功能、文字、圖片、視頻等所有的東西都顯示在頁面這個載體里面。

二、頁面類型

你在APP里面看到的每一個頁面都不太一樣，但從技術(shù)實現(xiàn)的角度來看可能只有幾種。

很多PM以頁面用途的角度還分成了什么卡片頁面、內(nèi)容頁面，導(dǎo)航頁面、既無法窮舉又無法形成共識。

但是，技術(shù)實現(xiàn)的角度可以窮舉，并且更主要的是影響著你選擇頁面加載的方法。當(dāng)然，其實很多PM其實忽視了這樣做可以快速提升用戶打開頁面的體驗。下一篇我們單獨講一下這個。

三、頁面狀態(tài)

按照頁面加載或者刷新的結(jié)果可以分為以下常見的幾種。

為什么是這幾種狀態(tài)，為什么沒有其他狀態(tài)。要知道這些狀態(tài)是根據(jù)頁面加載或者刷新的狀態(tài)變化而得出來的。想了解如何畫狀態(tài)機圖，請查看如何繪畫狀態(tài)機來描述業(yè)務(wù)變化。

四、頁面加載

曾經(jīng)寫過一篇詳細的文章來講解2種模式6種方法解析頁面加載邏輯，這里不再贅述，或者詳見詳見頁面加載。

五、頁面刷新

需要用到刷新的頁面，往往是列表頁。頁面刷新的交互方式大概有三種。

5.1 點擊刷新

5.2 自動刷新

5.3 下拉刷新

下拉刷新由于邏輯比較復(fù)雜，還需要和技術(shù)溝通清楚。詳見頁面刷新。

六、頁面轉(zhuǎn)場

iOS和Android的規(guī)范略有不同。

還有一些不太常見的轉(zhuǎn)場效果。詳見頁面轉(zhuǎn)場

七、總結(jié)

不一定非要按照我定義的頁面規(guī)范來設(shè)計你們的APP，可以自己定義。但是理解全局規(guī)則并由寫到框架中，這種工作思想一定要學(xué)會。

當(dāng)然，頁面規(guī)范、僅僅是全局規(guī)則里面的一部分。還有全局手勢和頁面里的交互，后續(xù)會單獨來講。

相關(guān)閱讀

善用Axure寫PRD，全面通用的移動端產(chǎn)品規(guī)范V2.0

善用Axure寫PRD，全局規(guī)范一個都不能少

2種模式6種方法解析頁面加載邏輯

PRD1.0分享：全面通用的移動端產(chǎn)品需求文檔

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號langzisay。

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