原型說(shuō)明咋寫(xiě)-常規(guī)輸入框

2 評(píng)論 1322 瀏覽 17 收藏 6 分鐘

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

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

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

原型說(shuō)明咋寫(xiě)-單選框

步驟二:使用模板

如圖,Axure可將帶說(shuō)明的通用組件置入元件庫(kù),出原型時(shí)使用;開(kāi)發(fā)看到組件,則使用約定規(guī)范;墨刀同理。

原型說(shuō)明咋寫(xiě)-單選框

那么,規(guī)范與模板應(yīng)該怎么寫(xiě)?

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

本期組件:常規(guī)輸入框

組件概述:????最基礎(chǔ)的信息錄入組件

一、約定規(guī)范

本節(jié)主要與開(kāi)發(fā)、UI約定默認(rèn)實(shí)現(xiàn)內(nèi)容,并明確通過(guò)哪種形式約束交互;

本節(jié)內(nèi)容可通過(guò)一份規(guī)范文檔維護(hù)。

基礎(chǔ)交互

1.鼠標(biāo)移入輸入框區(qū)域時(shí)顯示為懸停狀態(tài);(輸入框統(tǒng)一交互及樣式)。

2.輸入框獲取焦點(diǎn)時(shí)顯示為輸入狀態(tài);(輸入框統(tǒng)一交互及樣式)。

3.輸入框文本改變時(shí)如果文本不為空,顯示清除圖標(biāo);(帶清除圖標(biāo)輸入框)。

4.點(diǎn)擊清除圖標(biāo)時(shí)清空已輸入字符并隱藏清除圖標(biāo);(帶清除圖標(biāo)輸入框)。

5.輸入框輸入時(shí)顯示對(duì)應(yīng)的輸入提示,默認(rèn)在右側(cè),右側(cè)不夠則顯示在下方;(帶輸入提示輸入框)。

6.當(dāng)輸入框有字?jǐn)?shù)限制時(shí),默認(rèn)帶“字?jǐn)?shù)統(tǒng)計(jì)”。

基礎(chǔ)樣式

1.高:默認(rèn)使用默認(rèn)高度,方案中如無(wú)規(guī)定尺寸,UI可根據(jù)產(chǎn)品實(shí)際情況決定尺寸大小。

2.長(zhǎng):默認(rèn)長(zhǎng)度,UI可根據(jù)最大輸入字?jǐn)?shù),及實(shí)際業(yè)務(wù)情況,做相應(yīng)調(diào)整。

3.高度調(diào)整,內(nèi)部文字大小需跟隨調(diào)整。

4.方案中若未規(guī)定樣式,UI可根據(jù)表單實(shí)際情況決定所用樣式。

3. 約定產(chǎn)品可控參數(shù)

1.輸入框標(biāo)題:標(biāo)題需注意字?jǐn)?shù)長(zhǎng)度。

2.框內(nèi)提示:無(wú)則寫(xiě)“默認(rèn)”。

3.輸入框狀態(tài):默認(rèn)/禁用。

4.輸入提示:即獲取焦點(diǎn)時(shí),輸入框出現(xiàn)氣泡提示。

5.顯示字?jǐn)?shù):輸入框末端是否顯示最大字?jǐn)?shù)與當(dāng)前字?jǐn)?shù)。

6.清空按鈕:是否需要一鍵清空按鈕。

7.長(zhǎng)度區(qū)間:輸入框的字節(jié)范圍,其中1漢字為2字節(jié)。

8.輸入格式:可選漢字、數(shù)字、字母、小數(shù)點(diǎn),或字符。

9.是否必填:是/否。

10.缺省值:輸入框?yàn)榭?,提交后的預(yù)置信息,如昵稱非必填情況下,會(huì)缺省值就是隨機(jī)昵稱。

二、產(chǎn)出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”,便于團(tuán)隊(duì)識(shí)別規(guī)范組件

模板可直接寫(xiě)入注釋,并存入Axure/墨刀的元件庫(kù)

  • 規(guī)范-常規(guī)輸入框
  • 輸入框標(biāo)題:標(biāo)題需注意字?jǐn)?shù)長(zhǎng)度
  • 框內(nèi)提示:默認(rèn)
  • 輸入框狀態(tài):默認(rèn)
  • 輸入提示:無(wú)
  • 顯示字?jǐn)?shù):是
  • 清空按鈕:是
  • 長(zhǎng)度區(qū)間:0-10
  • 輸入格式:字符
  • 是否必填:是
  • 缺省值:無(wú)

結(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. 有模板分享嗎

    來(lái)自河南 回復(fù)
    1. 您好,請(qǐng)持續(xù)關(guān)注。本系列分享完后,會(huì)提供全套模板。

      來(lái)自福建 回復(fù)