原型說(shuō)明咋寫-按鈕

0 評(píng)論 1556 瀏覽 6 收藏 6 分鐘

開(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)該怎么寫?

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

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

本期組件:按鈕

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

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

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

1.基礎(chǔ)交互

1)按鈕類型

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

2)基礎(chǔ)交互

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

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

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

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

3. 尺寸

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

  • 大:一般用于表單頁(yè)的頁(yè)面級(jí)操作,如下一步、提交按鈕等
  • 中:一般用于信息頁(yè)的頁(yè)面級(jí)操作,如新建、編輯按鈕等
  • ?。阂话阌糜陧?yè)面內(nèi)各信息模塊的操作,如導(dǎo)出某個(gè)表格信息

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

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

1)按鈕狀態(tài):?jiǎn)⒂?禁用,如果會(huì)互相切換,需說(shuō)明切換條件

2)氣泡提示:無(wú)需/有,有就填寫文案。

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

3)點(diǎn)擊事件:一般指單擊后的響應(yīng)事件,如果有判斷邏輯,超過(guò)三個(gè)判斷建議通過(guò)流程圖維護(hù)。

三、輸出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”,便于團(tuán)隊(duì)識(shí)別規(guī)范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫(kù)。

  • 組件名稱:規(guī)范-按鈕
  • 按鈕狀態(tài):?jiǎn)⒂?/li>
  • 氣泡提示:無(wú)需
  • 點(diǎn)擊事件:點(diǎn)擊后提交頁(yè)面信息,并跳轉(zhuǎn)至XX頁(yè)

結(jié)語(yǔ)

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

本文由 @產(chǎn)品工具庫(kù) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!