移動(dòng)端APP應(yīng)該如何定義頁面規(guī)范
時(shí)間：2023-09-24 15:00:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-24 15:00:01 來源：網(wǎng)站運(yùn)營(yíng)
移動(dòng)端APP應(yīng)該如何定義頁面規(guī)范：
APP的所有功能和內(nèi)容最終都呈現(xiàn)在頁面這個(gè)載體上。設(shè)計(jì)好頁面，至少會(huì)讓整個(gè)APP的交互體驗(yàn)達(dá)到及格的水平。而頁面的加載邏輯、狀態(tài)表現(xiàn)等規(guī)則在大部分時(shí)候都應(yīng)該是一致的，所以PM應(yīng)該提前定義好頁面的全局規(guī)范再去設(shè)計(jì)具體的頁面。
我將從頁面內(nèi)容的類型、頁面數(shù)據(jù)的加載邏輯&刷新邏輯、頁面顯示的狀態(tài)、頁面間如何轉(zhuǎn)場(chǎng)等5個(gè)角度來講解。
當(dāng)你通過這種方法去和前端工程師提頁面需求并要求他寫到框架中，會(huì)讓他對(duì)你另眼相看。并且如果以后需要修改，僅需修改框架即可改變所有頁面的交互規(guī)則。
一、頁面
當(dāng)你打開一個(gè)APP之后，你看到的功能、文字、圖片、視頻等所有的東西都顯示在頁面這個(gè)載體里面。
二、頁面類型
你在APP里面看到的每一個(gè)頁面都不太一樣，但從
技術(shù)實(shí)現(xiàn)的角度來看可能只有幾種。
很多PM以頁面用途的角度還分成了什么卡片頁面、內(nèi)容頁面，導(dǎo)航頁面、既無法窮舉又無法形成共識(shí)。
但是技術(shù)實(shí)現(xiàn)的角度可以窮舉，并且更主要的是影響著你選擇頁面加載的方法。當(dāng)然其實(shí)很多PM其實(shí)忽視了這樣做可以快速提升用戶打開頁面的體驗(yàn)。下一篇我們單獨(dú)講一下這個(gè)。
三、頁面狀態(tài)
按照頁面加載或者刷新的結(jié)果可以分為以下常見的幾種。
為什么是這幾種狀態(tài)，為什么沒有其他狀態(tài)。要知道這些狀態(tài)是根據(jù)頁面加載或者刷新的狀態(tài)變化而得出來的。想了解如何畫狀態(tài)機(jī)圖，請(qǐng)查看如何繪畫狀態(tài)機(jī)來描述業(yè)務(wù)變化。
四、頁面加載
曾經(jīng)寫過一篇詳細(xì)的文章來講解2種模式6種方法解析頁面加載邏輯，這里不再贅述，或者詳見詳見頁面加載。
五、頁面刷新
需要用到刷新的頁面，往往是列表頁。頁面刷新的交互方式大概有三種。
5.1、點(diǎn)擊刷新5.2、自動(dòng)刷新5.3、下拉刷新下拉刷新由于邏輯比較復(fù)雜，還需要和技術(shù)溝通清楚。詳見頁面刷新。
六、頁面轉(zhuǎn)場(chǎng)
iOS和Android的規(guī)范略有不同。
還有一些不太常見的轉(zhuǎn)場(chǎng)效果，還有一些不太常見的轉(zhuǎn)場(chǎng)效果。詳見頁面轉(zhuǎn)場(chǎng)。
七、總結(jié)
不一定非要按照我定義的頁面規(guī)范來設(shè)計(jì)你們的APP，可以自己定義。但是理解全局規(guī)則并由寫到框架中，這種工作思想一定要學(xué)會(huì)。
當(dāng)然頁面規(guī)范、僅僅是全局規(guī)則里面的一部分。還有全局手勢(shì)和頁面里的交互，后續(xù)會(huì)單獨(dú)來講。
作者：浪子，關(guān)注公眾號(hào)langzisay查看全部文章，浪子PRD系列http://51prd.com/。
關(guān)鍵詞：定義,規(guī)范,移動(dòng)
在線咨詢