開(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ī)范；墨刀同理?！綪S：想了解word如何使用，請(qǐng)?jiān)u論留言哈】

那么，規(guī)范與模板應(yīng)該怎么寫(xiě)？本系列將通過(guò)“通用、輸入、輸出、反饋”四類約43個(gè)常用組件及3篇頁(yè)面（表單頁(yè)、列表頁(yè)、詳情頁(yè)）寫(xiě)法，將規(guī)范與模板分享予您。強(qiáng)烈建議點(diǎn)個(gè)【關(guān)注】或【收藏】不迷路。

以下，enjoy~

當(dāng)前為本系列第6篇，剩40篇。

單選框，適用于在多個(gè)互斥的選項(xiàng)中選擇的場(chǎng)景，所有選項(xiàng)默認(rèn)可見(jiàn)，方便用戶在比較中選擇，因此選項(xiàng)不宜過(guò)多。由于選項(xiàng)默認(rèn)可見(jiàn)，不宜過(guò)多。若選擇項(xiàng)超過(guò)5項(xiàng)，建議使用下拉選擇器。

一、約定規(guī)范

本節(jié)為開(kāi)發(fā)與設(shè)計(jì)師默認(rèn)要實(shí)現(xiàn)的內(nèi)容；以及產(chǎn)品會(huì)通過(guò)哪種形式約束哪些參數(shù)，通過(guò)一份規(guī)范文檔維護(hù)。

1. 交互規(guī)范

基礎(chǔ)狀態(tài)及操作

• + 鼠標(biāo)移入選項(xiàng)，對(duì)應(yīng)選項(xiàng)呈懸停狀態(tài)
• + 鼠標(biāo)點(diǎn)擊選項(xiàng)，對(duì)應(yīng)選項(xiàng)切換為選中，點(diǎn)擊范圍為圖標(biāo)與文字區(qū)域
• – 再次點(diǎn)擊已選中選項(xiàng)，無(wú)法取消選中
• – 已有選中基礎(chǔ)上，點(diǎn)擊其他選項(xiàng)則切換選中
• + 禁用狀態(tài)下，無(wú)懸停效果，也無(wú)法選中

排版說(shuō)明

• +選項(xiàng)之間會(huì)隨著選項(xiàng)文字?jǐn)?shù)調(diào)整間距，使選項(xiàng)間距始終一致。
• +在有限橫向范圍內(nèi)，一行放不下所有選項(xiàng)，則換行顯示。（注：非文字換行）

2. 設(shè)計(jì)規(guī)范

• +可根據(jù)頁(yè)面要求，定義選項(xiàng)間距參數(shù)等，未定義則使用默認(rèn)值
• +可定義樣式有“帶邊框樣式”、“組合按鈕樣式”，未定義則使用默認(rèn)樣式

3. 可控參數(shù)

• +狀態(tài)：默認(rèn)，可選禁用
• +可選項(xiàng)：如果可選項(xiàng)數(shù)量是固定的，則直接標(biāo)明，不建議在原型維護(hù)選項(xiàng)，因?yàn)橐疹櫯虐?，比較浪費(fèi)時(shí)間；
• +默認(rèn)值：根據(jù)實(shí)際業(yè)務(wù)需求來(lái)確定，原型說(shuō)明中需寫(xiě)明。
• +操作后置結(jié)果：選擇后，將影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)及關(guān)聯(lián)控件的使用狀態(tài)。

二、產(chǎn)出模板

組件名稱前加個(gè)“規(guī)范”，便于通過(guò)此標(biāo)識(shí)讓團(tuán)隊(duì)知道此組件已編制規(guī)范。

• 組件名稱：?jiǎn)芜x框
• +狀態(tài)：可用
• +可選項(xiàng)：選項(xiàng)名1、選項(xiàng)名2
• +默認(rèn)值：選項(xiàng)名1
• +操作后置結(jié)果：暫無(wú)

結(jié)語(yǔ)

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