原型說明咋寫-文本域輸入框

0 評論 1147 瀏覽 11 收藏 4 分鐘

開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。文末提供模板,可直接用。

步驟一:約定規范

如圖,與開發、UI約定組件規范,并維護在獨立文檔中。

原型說明咋寫-單選框

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理?!綪S:想了解word如何使用,請評論留言哈】

原型說明咋寫-單選框

那么,規范與模板應該怎么寫?

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

本期組件:文本域輸入框

組件概述:最基礎的信息錄入組件,用于輸入多行文本信息

一、約定默認交互

本節主要與開發、UI約定默認實現內容,并明確通過哪種形式約束交互;

本節內容可通過一份規范文檔維護。

基礎交互

  1. 可通過鼠標拖動輸入框右下角角標方式調整輸入框的高度,也可自適應文本高度;
  2. 可根據實際業務需求規定字符長度;
  3. 鼠標移入輸入框區域時顯示為懸停狀態;
  4. 鼠標點擊輸入框時,顯示光標,為輸入狀態;

樣式約定

1.當需要設置固定輸入框寬度時,需根據具體的頁面布局/樣式設置合適的寬度;

約定產品可控參數

  1. 輸入框狀態:默認/禁用
  2. 字數限制:默認100,可根據業務需求自定字數
  3. 輸入限制:無特殊情況默認字符
  4. 是否必填:默認為否
  5. 提示信息:即輸入框內提示的內容
  6. 缺省值:輸入框為空提交時的默認數據,僅非必填情況需完善

二、產出說明模板

組件名稱前加個“規范”,便于團隊識別規范組件

模板可直接寫入注釋,并存入Axure/墨刀的元件庫

  • 規范-文本輸入框
  • +輸入框狀態:默認
  • +字數限制:100
  • +輸入限制:字符
  • +是否必填:否
  • +提示信息:請輸入內容
  • +缺省值:無

結語

本系列持續更新,喜歡的朋友請點個【關注】【收藏】,您的鼓勵是我們持續分享的動力。

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!