原型說明咋寫-文本域輸入框
開發(fā)吐槽原型說明不清晰,領(lǐng)導催促原型要快細節(jié)再說,真是夾縫中生存的產(chǎn)品。今天教大家一個方法,既快又全。文末提供模板,可直接用。
步驟一:約定規(guī)范
如圖,與開發(fā)、UI約定組件規(guī)范,并維護在獨立文檔中。
步驟二:使用模板
如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發(fā)看到組件,則使用約定規(guī)范;墨刀同理?!綪S:想了解word如何使用,請評論留言哈】
那么,規(guī)范與模板應該怎么寫?
本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規(guī)范與模板分享予您。
本期組件:文本域輸入框
組件概述:最基礎(chǔ)的信息錄入組件,用于輸入多行文本信息
一、約定默認交互
本節(jié)主要與開發(fā)、UI約定默認實現(xiàn)內(nèi)容,并明確通過哪種形式約束交互;
本節(jié)內(nèi)容可通過一份規(guī)范文檔維護。
基礎(chǔ)交互
- 可通過鼠標拖動輸入框右下角角標方式調(diào)整輸入框的高度,也可自適應文本高度;
- 可根據(jù)實際業(yè)務需求規(guī)定字符長度;
- 鼠標移入輸入框區(qū)域時顯示為懸停狀態(tài);
- 鼠標點擊輸入框時,顯示光標,為輸入狀態(tài);
樣式約定
1.當需要設(shè)置固定輸入框?qū)挾葧r,需根據(jù)具體的頁面布局/樣式設(shè)置合適的寬度;
約定產(chǎn)品可控參數(shù)
- 輸入框狀態(tài):默認/禁用
- 字數(shù)限制:默認100,可根據(jù)業(yè)務需求自定字數(shù)
- 輸入限制:無特殊情況默認字符
- 是否必填:默認為否
- 提示信息:即輸入框內(nèi)提示的內(nèi)容
- 缺省值:輸入框為空提交時的默認數(shù)據(jù),僅非必填情況需完善
二、產(chǎn)出說明模板
組件名稱前加個“規(guī)范”,便于團隊識別規(guī)范組件
模板可直接寫入注釋,并存入Axure/墨刀的元件庫
- 規(guī)范-文本輸入框
- +輸入框狀態(tài):默認
- +字數(shù)限制:100
- +輸入限制:字符
- +是否必填:否
- +提示信息:請輸入內(nèi)容
- +缺省值:無
結(jié)語
本系列持續(xù)更新,喜歡的朋友請點個【關(guān)注】或【收藏】,您的鼓勵是我們持續(xù)分享的動力。
本文由 @產(chǎn)品工具庫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發(fā)揮!