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

本期組件：文本

組件概述：頁面中最基礎(chǔ)的內(nèi)容組件

一、 約定基礎(chǔ)規(guī)范

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

1.基礎(chǔ)樣式

1、樣式：需區(qū)分標題、內(nèi)容段落

不同等級標題字體大小顏色、及段落字體顏色大小等由UI把控

2、標記：可對一段文字內(nèi)的不同內(nèi)容做顏色、加粗、斜體、下劃線、刪除線、文字鏈接等標記

2. 基礎(chǔ)交互

1、為空：文本需自帶為空處理方案，如通過占位符“—”代替，以免頁面容器未對空內(nèi)容做處理時，用戶誤以為未加載全

2、溢出：用省略號表示被截斷的信息。并有交互查看完整內(nèi)容，不同行數(shù)交互不同，如下：

• 內(nèi)容在兩行內(nèi)：使用“氣泡提示”
• 內(nèi)容超出兩行：使用“展開”

以上沒有嚴格限定，可根據(jù)實際情況靈活使用。

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

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

1、數(shù)據(jù)來源：固定/取**值

• 固定：即不變的，前端寫死
• 取值：說明這塊數(shù)據(jù)從哪來

2、顯示行數(shù)：最多顯示的行數(shù)，超出做溢出處理

3、省略位置：末尾/中間

• 末尾：一般默認省略末尾
• 中間：需預(yù)覽開頭、結(jié)尾的內(nèi)容則使用

4、是否標記：當取到的某個值需通過標記突出顯示，可用此方式說明

三、輸出說明模板

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

• 組件名稱：規(guī)范-文本?
• 數(shù)據(jù)來源：
• 顯示行數(shù)：1
• 溢出方案：末尾省略
• 是否標記：無需

結(jié)語

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