原型說明咋寫-折疊面板
開發(fā)吐槽原型說明不清晰,領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說,真是夾縫中生存的產(chǎn)品。今天教大家一個(gè)方法,既快又全。
對原型規(guī)范&說明模板不明白朋友,可查看:如何解決原型說明寫不全?
本期組件:折疊面板
組件概述:對復(fù)雜區(qū)域/平級內(nèi)容進(jìn)行分組和隱藏,保持頁面整潔,與《標(biāo)簽頁》有著異曲同工之妙。
一、約定基礎(chǔ)樣式??
本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容,通過規(guī)范文檔維護(hù)。
1.1. 樣式???
1、面板頭名稱需UI固定字邊距
2、面板內(nèi)裝載內(nèi)容通常為列表、數(shù)據(jù)詳情、表單
1.2. 異常
1、內(nèi)容為空:有為空樣式
2、載入中:超過1秒未返回?cái)?shù)據(jù),需顯示此樣式
3、載入錯(cuò)誤:有錯(cuò)誤樣式,并有按鈕重新載入內(nèi)容
4、內(nèi)容超出:則內(nèi)容區(qū)左右上下滾動
二、約定基礎(chǔ)交互
- 載入時(shí),默認(rèn)展開第一個(gè)面板
- 點(diǎn)擊面板頭,切換面板展開/收起,不限展開數(shù)量(手風(fēng)琴式,只允許單個(gè)內(nèi)容區(qū)域展開)
- 收起折疊頁時(shí),如無特殊說明,不重置頁面內(nèi)容
- 頁面展開/收起動效不做限制
- 打開折疊頁面,會推動/拉起面板之外的內(nèi)容
- 一般載入頁面即載入所有內(nèi)容,當(dāng)數(shù)據(jù)量大時(shí)可考慮做成異步加載,即打開面板才加載
- 組件支持響應(yīng)式布局
三、約定可控參數(shù)
本節(jié)主要與研發(fā)約定原型中可控制的參數(shù),也通過規(guī)范文檔維護(hù)。文中會提供示例參數(shù),及參數(shù)填寫說明。
- 面板名稱寫在原型中,若有特殊說明則加上
- 面板具體尺寸由UI決定
- 面板內(nèi)容建議單獨(dú)拎出畫原型
四、輸出說明模板
組件名稱前加個(gè)“規(guī)范”,便于團(tuán)隊(duì)識別規(guī)范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫。
本期組件無需單獨(dú)寫說明,即僅提供組件模板
結(jié)語
本系列持續(xù)更新,喜歡的朋友請點(diǎn)個(gè)【關(guān)注】或【收藏】,您的鼓勵(lì)是我們持續(xù)分享的動力。
本文由 @產(chǎn)品工具庫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
說的很清晰呢