原型說明咋寫-描述列表

0 評論 1819 瀏覽 8 收藏 4 分鐘

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

對原型規范&說明模板不明白朋友,可查看:如何解決原型說明寫不全?

本期組件:描述列表

組件概述:展示多個只讀字段的組合,通常用于描述詳情內容

一、約定基礎樣式??

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

1、文字樣式:注意文字邊距,居左排版,標題淺色文字、內容深色文字

2、有框列表排版樣式:比較適用結構復雜的描述列表,實際應用中可三列、兩列、一列混搭,因無論如何搭配要保持列表完整性,區分為水平、垂直樣式:

  • 水平列表:左標題右內容排版
  • 垂直列表:上標題下內容排版

3、無框列表排版樣式:因為沒有邊框劃分內容區域,所以適用于結構規則但內容量大的描述列表,區分為水平、垂直樣式。

  • 水平列表:標題與內容往中間對其,且用冒號隔開
  • 垂直列表:標題與內容左側對齊

4、異常情況:內容超出(拓展/省略,點擊彈窗顯示)、內容為空,可參照《文本組件-基礎交互》

二、約定基礎交互

1、響應式布局

  • 窗口大小變化,需按比例調整寬高
  • 展開溢出內容,高度需跟隨變化

三、約定可控參數

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

1、整體無需可控參數,如確需對整體進行說明,可切換為“動態面板”進行描述

2、“內容”中放置的不止文本,還可能是標簽、圖像等,依據放置的組件,使用對應說明模板

3、建議每個數據都做描述,再簡單的數據也寫一遍,以防團隊理解不一致

四、輸出說明模板

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

原型組件可從“約定基礎樣式”中取。

本節以水平有框為例,“內容”使用組件以“文本”為例:

  • 組件名稱:規范-文本
  • 數據來源:
  • 顯示行數:3
  • 溢出方案:末尾省略/末尾省略
  • 是否標記:無需標記/見原型標記方式/子項列出

結語

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

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

題圖來自Unsplash,基于 CC0 協議

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

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