開發(fā)吐槽原型說明不清晰，領導催促原型要快細節(jié)再說，真是夾縫中生存的產品。今天教大家一個方法，既快又全。文末提供模板，可直接用。

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

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

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發(fā)看到組件，則使用約定規(guī)范；墨刀同理。【PS：想了解word如何使用，請評論留言哈】

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

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

以下，enjoy~

當前為本系列第6篇，剩40篇。

單選框，適用于在多個互斥的選項中選擇的場景，所有選項默認可見，方便用戶在比較中選擇，因此選項不宜過多。由于選項默認可見，不宜過多。若選擇項超過5項，建議使用下拉選擇器。

一、約定規(guī)范

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

1. 交互規(guī)范

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

• + 鼠標移入選項，對應選項呈懸停狀態(tài)
• + 鼠標點擊選項，對應選項切換為選中，點擊范圍為圖標與文字區(qū)域
• – 再次點擊已選中選項，無法取消選中
• – 已有選中基礎上，點擊其他選項則切換選中
• + 禁用狀態(tài)下，無懸停效果，也無法選中

排版說明

• +選項之間會隨著選項文字數(shù)調整間距，使選項間距始終一致。
• +在有限橫向范圍內，一行放不下所有選項，則換行顯示。（注：非文字換行）

2. 設計規(guī)范

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

3. 可控參數(shù)

• +狀態(tài)：默認，可選禁用
• +可選項：如果可選項數(shù)量是固定的，則直接標明，不建議在原型維護選項，因為要照顧排版，比較浪費時間；
• +默認值：根據(jù)實際業(yè)務需求來確定，原型說明中需寫明。
• +操作后置結果：選擇后，將影響關聯(lián)數(shù)據(jù)表數(shù)據(jù)及關聯(lián)控件的使用狀態(tài)。

二、產出模板

組件名稱前加個“規(guī)范”，便于通過此標識讓團隊知道此組件已編制規(guī)范。

• 組件名稱：單選框
• +狀態(tài)：可用
• +可選項：選項名1、選項名2
• +默認值：選項名1
• +操作后置結果：暫無

結語

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