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

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

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

步驟二：使用模板

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

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

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

=========強(qiáng)烈建議點個【關(guān)注】或【收藏】不迷路=========

本期組件：按鈕

組件概述：按鈕用于開始一個即時操作，響應(yīng)用戶點擊行為，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯。按鈕樣式千變?nèi)f化，但這屬于設(shè)計師工作范疇，產(chǎn)品經(jīng)理僅需將按鈕的基本意思表達(dá)到位即可。

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

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

1.基礎(chǔ)交互

1）按鈕類型

• 主按鈕：用于主操作，一個操作區(qū)域只能有一個主按鈕。
• 默認(rèn)按鈕：可用于次按鈕，也可用于沒有主次之分的一組操作。
• 鏈接按鈕：一般用于鏈接，即導(dǎo)航至某位置。

2）基礎(chǔ)交互

鼠標(biāo)懸停與單擊都要有對應(yīng)交互：

2. 基礎(chǔ)狀態(tài)

三種狀態(tài)與按鈕類型配合使用：

1. 危險：刪除/移動/修改權(quán)限等危險操作，一般需要二次確認(rèn)（此狀態(tài)僅改變主題色，懸停、單擊、加載中等樣式與默認(rèn)一致）
2. 加載中：用于異步操作等待反饋的時候，也可以避免多次提交
3. 禁用：操作不可用的時候，一般需要文案解釋，通過懸停氣泡提示實現(xiàn)

3. 尺寸

原型按鈕尺寸默認(rèn)為中，產(chǎn)品無需決定按鈕尺寸，一般由UI根據(jù)不同場景選擇合適的按鈕尺寸，建議如下：

• 大：一般用于表單頁的頁面級操作，如下一步、提交按鈕等
• 中：一般用于信息頁的頁面級操作，如新建、編輯按鈕等
• 小：一般用于頁面內(nèi)各信息模塊的操作，如導(dǎo)出某個表格信息

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

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

1）按鈕狀態(tài)：啟用/禁用，如果會互相切換，需說明切換條件

2）氣泡提示：無需/有，有就填寫文案。

• 復(fù)雜操作建議增加提示
• 禁用態(tài)，一定要提示用戶為何禁用及如何啟用。

3）點擊事件：一般指單擊后的響應(yīng)事件，如果有判斷邏輯，超過三個判斷建議通過流程圖維護(hù)。

三、輸出說明模板

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

• 組件名稱：規(guī)范-按鈕
• 按鈕狀態(tài)：啟用
• 氣泡提示：無需
• 點擊事件：點擊后提交頁面信息，并跳轉(zhuǎn)至XX頁

結(jié)語

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