原型說明咋寫-描述列表

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

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

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

本期組件:描述列表

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

一、約定基礎樣式??

本節(jié)主要與研發(fā)約定默認實現(xiàn)內容,通過規(guī)范文檔維護。

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

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

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

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

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

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

二、約定基礎交互

1、響應式布局

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

三、約定可控參數(shù)

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù),也通過規(guī)范文檔維護。文中會提供示例參數(shù),及參數(shù)填寫說明。

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

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

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

四、輸出說明模板

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

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

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

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

結語

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

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

題圖來自Unsplash,基于 CC0 協(xié)議

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

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