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

步驟一：約定規(guī)范

如圖，與開(kāi)發(fā)、UI約定組件規(guī)范，并維護(hù)在獨(dú)立文檔中。

步驟二：使用模板

如圖，Axure可將帶說(shuō)明的通用組件置入元件庫(kù)，出原型時(shí)使用；開(kāi)發(fā)看到組件，則使用約定規(guī)范；墨刀同理。【PS：想了解word如何使用，請(qǐng)?jiān)u論留言哈】

那么，規(guī)范與模板應(yīng)該怎么寫？

本系列將通過(guò)“通用、輸入、輸出、反饋”四類約43個(gè)常用組件及3篇頁(yè)面（表單頁(yè)、列表頁(yè)、詳情頁(yè)）寫法，將規(guī)范與模板分享予您。

本期組件：文本域輸入框

組件概述：最基礎(chǔ)的信息錄入組件，用于輸入多行文本信息

一、約定默認(rèn)交互

本節(jié)主要與開(kāi)發(fā)、UI約定默認(rèn)實(shí)現(xiàn)內(nèi)容，并明確通過(guò)哪種形式約束交互；

本節(jié)內(nèi)容可通過(guò)一份規(guī)范文檔維護(hù)。

基礎(chǔ)交互

1. 可通過(guò)鼠標(biāo)拖動(dòng)輸入框右下角角標(biāo)方式調(diào)整輸入框的高度，也可自適應(yīng)文本高度；
2. 可根據(jù)實(shí)際業(yè)務(wù)需求規(guī)定字符長(zhǎng)度；
3. 鼠標(biāo)移入輸入框區(qū)域時(shí)顯示為懸停狀態(tài)；
4. 鼠標(biāo)點(diǎn)擊輸入框時(shí)，顯示光標(biāo)，為輸入狀態(tài)；

樣式約定

1.當(dāng)需要設(shè)置固定輸入框?qū)挾葧r(shí)，需根據(jù)具體的頁(yè)面布局/樣式設(shè)置合適的寬度；

約定產(chǎn)品可控參數(shù)

1. 輸入框狀態(tài)：默認(rèn)/禁用
2. 字?jǐn)?shù)限制：默認(rèn)100，可根據(jù)業(yè)務(wù)需求自定字?jǐn)?shù)
3. 輸入限制：無(wú)特殊情況默認(rèn)字符
4. 是否必填：默認(rèn)為否
5. 提示信息：即輸入框內(nèi)提示的內(nèi)容
6. 缺省值：輸入框?yàn)榭仗峤粫r(shí)的默認(rèn)數(shù)據(jù)，僅非必填情況需完善

二、產(chǎn)出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件

模板可直接寫入注釋，并存入Axure/墨刀的元件庫(kù)

• 規(guī)范-文本輸入框
• +輸入框狀態(tài)：默認(rèn)
• +字?jǐn)?shù)限制：100
• +輸入限制：字符
• +是否必填：否
• +提示信息：請(qǐng)輸入內(nèi)容
• +缺省值：無(wú)

結(jié)語(yǔ)

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