原型說明咋寫-復(fù)選框

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

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

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

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

原型說明咋寫-復(fù)選框

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫(kù),出原型時(shí)使用;開發(fā)看到組件,則使用約定規(guī)范;墨刀同理。【PS:想了解word如何使用,請(qǐng)?jiān)u論留言哈】

原型說明咋寫-復(fù)選框

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

以下,enjoy~

當(dāng)前為本系列第7篇,剩39篇。

復(fù)選框,適用于多個(gè)勾選框綁定到同一個(gè)數(shù)組的情景,通過是否勾選來表示這一組選項(xiàng)中選中的項(xiàng)。單獨(dú)使用可以表示兩種狀態(tài)之間的切換。若選擇項(xiàng)超過5項(xiàng),建議使用下拉選擇器。

1. 約定規(guī)范

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

1.1樣式規(guī)范

+多選框默認(rèn)方形,選中時(shí)填充方形/打勾,并呈現(xiàn)主題色

+可根據(jù)頁(yè)面要求,定義選項(xiàng)間距參數(shù)等,未定義則使用默認(rèn)值

+可定義樣式:“帶框樣式”、“組合按鈕樣式”,樣式需覆蓋基礎(chǔ)狀態(tài),未定義則使用默認(rèn)樣式

原型說明咋寫-復(fù)選框

1.2. 交互規(guī)范

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

+鼠標(biāo)移入選項(xiàng),對(duì)應(yīng)選項(xiàng)呈懸停樣式(熱區(qū)為圖標(biāo)與文字區(qū)域)

+禁用狀態(tài)下,無懸停效果,也無法選中;

+單擊選項(xiàng),切換為選中狀態(tài)

-再次單擊,取消選中

-單擊其他選項(xiàng),增加選中,不取消原有選項(xiàng)

-當(dāng)選擇數(shù)量達(dá)到最大可選時(shí),單擊未選中項(xiàng),toast提示:已達(dá)最大可選數(shù);

原型說明咋寫-復(fù)選框

“全選”操作

+“全選”按鈕默認(rèn)排第一位,選中則全選所有選項(xiàng),取消選中則全不選

+選中所有選項(xiàng)后,“全選”自動(dòng)選中

+僅選中其中一個(gè)選項(xiàng),或未選滿,不自動(dòng)選中“全選”

原型說明咋寫-復(fù)選框

排版說明

+選項(xiàng)之間會(huì)隨著選項(xiàng)文字?jǐn)?shù)調(diào)整間距,使選項(xiàng)間距始終一致。

+在有限橫向范圍內(nèi),一行放不下所有選項(xiàng),則換行顯示。(注:非文字換行)

原型說明咋寫-復(fù)選框

1.3.可控參數(shù)

+狀態(tài):可用/禁用

+選項(xiàng):將選項(xiàng)寫在說明中,不建議在通過原型維護(hù),因?yàn)橐疹櫯虐?,較浪費(fèi)時(shí)間

+默認(rèn)值:默認(rèn)選項(xiàng)

+帶全選:帶/不帶,帶全選則占用第一個(gè)選項(xiàng)為“全選”按鈕

+選擇數(shù)量限制:0~N,即可選范圍大于等于0個(gè),小于等于N個(gè),“全選”項(xiàng)不計(jì)數(shù)

+操作后置結(jié)果:選擇后,將影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)及剩余可勾選的選項(xiàng)數(shù)量

2. 產(chǎn)出模板

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

組件名稱:規(guī)范-復(fù)選框

+狀態(tài):可用

+可選項(xiàng):選項(xiàng)1、選項(xiàng)2、選項(xiàng)3

+默認(rèn)值:選項(xiàng)1

+帶全選:不帶

+選擇數(shù)量限制:0~N

+操作后置結(jié)果:暫無

結(jié)語

本系列持續(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)載

題圖來自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. 目前還沒評(píng)論,等你發(fā)揮!