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

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

本期組件：描述列表

組件概述：展示多個只讀字段的組合，通常用于描述詳情內(nèi)容

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

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

1、文字樣式：注意文字邊距，居左排版，標(biāo)題淺色文字、內(nèi)容深色文字

2、有框列表排版樣式：比較適用結(jié)構(gòu)復(fù)雜的描述列表，實(shí)際應(yīng)用中可三列、兩列、一列混搭，因無論如何搭配要保持列表完整性，區(qū)分為水平、垂直樣式：

• 水平列表：左標(biāo)題右內(nèi)容排版
• 垂直列表：上標(biāo)題下內(nèi)容排版

3、無框列表排版樣式:因?yàn)闆]有邊框劃分內(nèi)容區(qū)域，所以適用于結(jié)構(gòu)規(guī)則但內(nèi)容量大的描述列表，區(qū)分為水平、垂直樣式。

• 水平列表：標(biāo)題與內(nèi)容往中間對其，且用冒號隔開
• 垂直列表：標(biāo)題與內(nèi)容左側(cè)對齊

4、異常情況：內(nèi)容超出（拓展/省略，點(diǎn)擊彈窗顯示）、內(nèi)容為空，可參照《文本組件-基礎(chǔ)交互》

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

1、響應(yīng)式布局

• 窗口大小變化，需按比例調(diào)整寬高
• 展開溢出內(nèi)容，高度需跟隨變化

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

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

1、整體無需可控參數(shù)，如確需對整體進(jìn)行說明，可切換為“動態(tài)面板”進(jìn)行描述

2、“內(nèi)容”中放置的不止文本，還可能是標(biāo)簽、圖像等，依據(jù)放置的組件，使用對應(yīng)說明模板

3、建議每個數(shù)據(jù)都做描述，再簡單的數(shù)據(jù)也寫一遍，以防團(tuán)隊(duì)理解不一致

四、輸出說明模板

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

原型組件可從“約定基礎(chǔ)樣式”中取。

本節(jié)以水平有框?yàn)槔?，“?nèi)容”使用組件以“文本”為例：

• 組件名稱：規(guī)范-文本
• 數(shù)據(jù)來源：
• 顯示行數(shù)：3
• 溢出方案：末尾省略/末尾省略
• 是否標(biāo)記：無需標(biāo)記/見原型標(biāo)記方式/子項(xiàng)列出

結(jié)語

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