原型說明咋寫-描述列表
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。
對原型規范&說明模板不明白朋友,可查看:如何解決原型說明寫不全?
本期組件:描述列表
組件概述:展示多個只讀字段的組合,通常用于描述詳情內容
一、約定基礎樣式??
本節主要與研發約定默認實現內容,通過規范文檔維護。
1、文字樣式:注意文字邊距,居左排版,標題淺色文字、內容深色文字
2、有框列表排版樣式:比較適用結構復雜的描述列表,實際應用中可三列、兩列、一列混搭,因無論如何搭配要保持列表完整性,區分為水平、垂直樣式:
- 水平列表:左標題右內容排版
- 垂直列表:上標題下內容排版
3、無框列表排版樣式:因為沒有邊框劃分內容區域,所以適用于結構規則但內容量大的描述列表,區分為水平、垂直樣式。
- 水平列表:標題與內容往中間對其,且用冒號隔開
- 垂直列表:標題與內容左側對齊
4、異常情況:內容超出(拓展/省略,點擊彈窗顯示)、內容為空,可參照《文本組件-基礎交互》
二、約定基礎交互
1、響應式布局
- 窗口大小變化,需按比例調整寬高
- 展開溢出內容,高度需跟隨變化
三、約定可控參數
本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。
1、整體無需可控參數,如確需對整體進行說明,可切換為“動態面板”進行描述
2、“內容”中放置的不止文本,還可能是標簽、圖像等,依據放置的組件,使用對應說明模板
3、建議每個數據都做描述,再簡單的數據也寫一遍,以防團隊理解不一致
四、輸出說明模板
組件名稱前加個“規范”,便于團隊識別規范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫。
原型組件可從“約定基礎樣式”中取。
本節以水平有框為例,“內容”使用組件以“文本”為例:
- 組件名稱:規范-文本
- 數據來源:
- 顯示行數:3
- 溢出方案:末尾省略/末尾省略
- 是否標記:無需標記/見原型標記方式/子項列出
結語
本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!