原型說明咋寫-文本

0 評論 1212 瀏覽 6 收藏 4 分鐘

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

本期組件:文本

組件概述:頁面中最基礎的內容組件

一、 約定基礎規范

本節主要與研發約定默認實現內容,通過規范文檔維護。

1.基礎樣式

1、樣式:需區分標題、內容段落

不同等級標題字體大小顏色、及段落字體顏色大小等由UI把控

2、標記:可對一段文字內的不同內容做顏色、加粗、斜體、下劃線、刪除線、文字鏈接等標記

2. 基礎交互

1、為空:文本需自帶為空處理方案,如通過占位符“—”代替,以免頁面容器未對空內容做處理時,用戶誤以為未加載全

2、溢出:用省略號表示被截斷的信息。并有交互查看完整內容,不同行數交互不同,如下:

  • 內容在兩行內:使用“氣泡提示”
  • 內容超出兩行:使用“展開”

以上沒有嚴格限定,可根據實際情況靈活使用。

二、約定可控參數

本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。

1、數據來源:固定/取**值

  • 固定:即不變的,前端寫死
  • 取值:說明這塊數據從哪來

2、顯示行數:最多顯示的行數,超出做溢出處理

3、省略位置:末尾/中間

  • 末尾:一般默認省略末尾
  • 中間:需預覽開頭、結尾的內容則使用

4、是否標記:當取到的某個值需通過標記突出顯示,可用此方式說明

三、輸出說明模板

組件名稱前加個“規范”,便于團隊識別規范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫。

  • 組件名稱:規范-文本?
  • 數據來源:
  • 顯示行數:1
  • 溢出方案:末尾省略
  • 是否標記:無需

結語

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

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

題圖來自Unsplash,基于 CC0 協議

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

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