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

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

本期：輸入組件通用規(guī)范

概述：涉及輸入框、數(shù)字輸入框、選擇框、選擇器等組件樣式、交互、可控參數(shù)的通用規(guī)范。

1. 通用基礎(chǔ)樣式

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

1、默認(rèn)：即最基礎(chǔ)的樣式

2、懸停：可輸入組件，在鼠標(biāo)懸停時(shí)需有交互，表示此組件可操作

3、獲取焦點(diǎn)/選中：當(dāng)前窗戶聚焦的組件，需顯示對(duì)應(yīng)樣式

4、完成：輸入/選擇完成的樣式

5、只讀：內(nèi)容可復(fù)制，但不能更改、輸入

6、禁用：無(wú)法與用戶交互，如無(wú)法復(fù)制或者輸入

7、溢出：內(nèi)容溢出需有良好交互，以便用戶及時(shí)獲取所需內(nèi)容

• 輸入框：溢出截?cái)?，光?biāo)移動(dòng)至邊緣后，推動(dòng)文本往反方向移動(dòng)
• 單選框：溢出截?cái)嗉纯?/li>
• 復(fù)選框：選項(xiàng)溢出則向下拓展選擇框，選項(xiàng)內(nèi)文字溢出則用“…”代替

2. 通用基礎(chǔ)交互

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

2.1. 一鍵清除

輸入框、選擇器等需填入內(nèi)容的組件，需默認(rèn)支持一鍵清除，如場(chǎng)景中無(wú)需，則在組件中說(shuō)明。具體交互如下：

• 有填入值時(shí)鼠標(biāo)懸停，右側(cè)圖標(biāo)切換為“清空”狀態(tài)，點(diǎn)擊清空選項(xiàng)。
• 無(wú)填入值時(shí)鼠標(biāo)懸停，不顯示

2.2. 通用反饋

1、必填項(xiàng)未填：失去焦點(diǎn)/提交表單時(shí)，必填項(xiàng)內(nèi)容為空，則出現(xiàn)此提示

2、加載中：失去焦點(diǎn)后需調(diào)用時(shí)間較長(zhǎng)的接口進(jìn)行數(shù)據(jù)校驗(yàn)，則此時(shí)組件為“禁用”樣式，并有“加載提示”

3. 約定可控參數(shù)

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

3.1 操作反饋

在用戶操作時(shí)，可提供反饋提示，以引導(dǎo)用戶做出正確操作。提示信息簡(jiǎn)明扼要，控制10字內(nèi)。提示類(lèi)型涉及信息、加載、正確、錯(cuò)誤、警告，以便應(yīng)用于各場(chǎng)景

說(shuō)明編寫(xiě)方式，在組件說(shuō)明的最后一條加上“操作反饋”，如：

1）其他說(shuō)明點(diǎn)…

2）操作反饋：

事件，提示類(lèi)型“文案”，如：

• 獲取焦點(diǎn)時(shí)，消息提示“請(qǐng)輸入XXXX”
• 失去焦點(diǎn)時(shí)，加載提示“字段校驗(yàn)中”?
• 用戶名重復(fù)時(shí)，錯(cuò)誤提示“該用戶名已被占用”
• 輸入內(nèi)容不符合規(guī)則時(shí)，警告提示“用戶名必須為6至20位字母或字母+數(shù)字組合”

結(jié)語(yǔ)

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