開(kāi)發(fā)吐槽原型說(shuō)明不清晰，領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說(shuō)，真是夾縫中生存的產(chǎn)品。今天教大家一個(gè)方法，既快又全。

對(duì)原型規(guī)范&說(shuō)明模板不明白朋友，可查看：如何解決原型說(shuō)明寫不全？

本期組件：折疊面板

組件概述：對(duì)復(fù)雜區(qū)域/平級(jí)內(nèi)容進(jìn)行分組和隱藏，保持頁(yè)面整潔，與《標(biāo)簽頁(yè)》有著異曲同工之妙。

一、約定基礎(chǔ)樣式??

本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容，通過(guò)規(guī)范文檔維護(hù)。

1.1. 樣式???

1、面板頭名稱需UI固定字邊距

2、面板內(nèi)裝載內(nèi)容通常為列表、數(shù)據(jù)詳情、表單

1.2. 異常

1、內(nèi)容為空：有為空樣式

2、載入中：超過(guò)1秒未返回?cái)?shù)據(jù)，需顯示此樣式

3、載入錯(cuò)誤：有錯(cuò)誤樣式，并有按鈕重新載入內(nèi)容

4、內(nèi)容超出：則內(nèi)容區(qū)左右上下滾動(dòng)

二、約定基礎(chǔ)交互

1. 載入時(shí)，默認(rèn)展開(kāi)第一個(gè)面板
2. 點(diǎn)擊面板頭，切換面板展開(kāi)/收起，不限展開(kāi)數(shù)量（手風(fēng)琴式，只允許單個(gè)內(nèi)容區(qū)域展開(kāi)）
3. 收起折疊頁(yè)時(shí)，如無(wú)特殊說(shuō)明，不重置頁(yè)面內(nèi)容
4. 頁(yè)面展開(kāi)/收起動(dòng)效不做限制
5. 打開(kāi)折疊頁(yè)面，會(huì)推動(dòng)/拉起面板之外的內(nèi)容
6. 一般載入頁(yè)面即載入所有內(nèi)容，當(dāng)數(shù)據(jù)量大時(shí)可考慮做成異步加載，即打開(kāi)面板才加載
7. 組件支持響應(yīng)式布局

三、約定可控參數(shù)

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù)，也通過(guò)規(guī)范文檔維護(hù)。文中會(huì)提供示例參數(shù)，及參數(shù)填寫說(shuō)明。

1. 面板名稱寫在原型中，若有特殊說(shuō)明則加上
2. 面板具體尺寸由UI決定
3. 面板內(nèi)容建議單獨(dú)拎出畫原型

四、輸出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫(kù)。

本期組件無(wú)需單獨(dú)寫說(shuō)明，即僅提供組件模板

結(jié)語(yǔ)

本系列持續(xù)更新，喜歡的朋友請(qǐng)點(diǎn)個(gè)【關(guān)注】或【收藏】，您的鼓勵(lì)是我們持續(xù)分享的動(dòng)力。