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

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

本期組件：標(biāo)簽頁

組件概述：提供在頁面內(nèi)將大塊平級(jí)內(nèi)容進(jìn)行收納和展現(xiàn)，保持界面整潔。還有一種框架級(jí)“標(biāo)簽頁”不在本次組件所涉及范圍內(nèi)，會(huì)在“頁面框架”板塊單獨(dú)說明。

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

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

1.1. 樣式

1、標(biāo)簽需固定字邊距，并隨著文字寬度增減標(biāo)簽寬度

2、標(biāo)簽有鼠標(biāo)懸停、選中樣式

3、標(biāo)簽布局有橫向、縱向布局

4、標(biāo)簽頁內(nèi)裝載內(nèi)容通常為列表、數(shù)據(jù)詳情、表單

1.2. 異常????

1、標(biāo)簽數(shù)量超出：標(biāo)簽欄支持左右鼓搗弄

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

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

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

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

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

1、載入時(shí)，默認(rèn)顯示第一個(gè)標(biāo)簽頁

2、點(diǎn)擊其他標(biāo)簽則切換選中；

4、切換標(biāo)簽時(shí)，如無特殊說明，不重置每個(gè)標(biāo)簽頁內(nèi)容

5、頁面切換效果不做限制

6、組件支持響應(yīng)式布局

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

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

1、標(biāo)簽名稱寫在原型中，若有特殊說明，則加上說明

2、標(biāo)簽頁內(nèi)容如果每頁本質(zhì)上不一樣，建議在單獨(dú)提出畫原型

四、輸出說明模板

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

本期組件無需單獨(dú)寫說明，即僅放上組件?????????：

結(jié)語

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