原型說明咋寫-對話框

0 評論 1035 瀏覽 5 收藏 6 分鐘

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

步驟一:約定規(guī)范

如圖,與開發(fā)、UI約定組件規(guī)范,并維護在獨立文檔中

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發(fā)看到組件,則使用約定規(guī)范;墨刀同理。【PS:想了解word如何使用,請評論留言哈】

那么,規(guī)范與模板應(yīng)該怎么寫?

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

=========強烈建議點個【關(guān)注】【收藏】不迷路=========

本期組件:對話框

組件概述:在浮層中顯示,引導用戶進行相關(guān)操作。需要用戶處理事務(wù),又不希望跳轉(zhuǎn)頁面以致打斷工作流程時,可以使用模態(tài)對話框在當前頁面正中打開一個浮層,承載相應(yīng)的操作。

一、 約定基礎(chǔ)規(guī)范

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

1. 交互與樣式??????

1)交互說明:通過系統(tǒng)事件觸發(fā)(通常不與用戶操作同步),彈出時頁面有半透遮罩(燈箱背景)阻斷用戶操作,點擊遮罩區(qū)域,不關(guān)閉對話框。

  • 關(guān)閉:通過關(guān)閉按鈕關(guān)閉,或完成操作后,通過對話框上的按鈕關(guān)閉。
  • 多個:盡量不疊加

2)樣式說明

  • 尺寸:一般固定,最多顯示三行文字。如需裝載更多內(nèi)容,如列表、表單則不屬于對話框范疇,屬于彈窗。
  • 按鈕:底部一排為按鈕區(qū)域,至少會有一個按鈕

2. 位置與層級

1)位置:對話框始終在頁面垂直和水平居中位置顯示,并有遮罩阻斷用戶操作

2)層級:需明確該組件所在的頁面層級,以防出現(xiàn)彈窗將全局提示遮蓋情況

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

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

1.可控參數(shù)

1)類型:不填則默認不帶圖標類型,可選“消息、警告、成功、錯誤、詢問”

注:此描述一般跟隨在元件名稱后

2)標題:不填則不顯示標題,如需則描述

3)內(nèi)容:描述實際顯示內(nèi)容,如有動態(tài)數(shù)據(jù),則通過大括號{}表示,并說明數(shù)據(jù)來源,如需顯示{創(chuàng)建時間}

{創(chuàng)建時間}:此條記錄的創(chuàng)建時間

4)主按鈕:描述對話框主按鈕的文案及點擊后的事件,通過|隔斷。不描述或為空默認為:確定,如:

5)次按鈕:排倒數(shù)第二位的按鈕,為空則沒有,也可通過隔斷描述按鈕樣式,如圖為危險按鈕?

6)次按鈕:排倒數(shù)第三位的按鈕,為空則沒有

2. 快捷描述

可定義幾個常用簡單的快捷描述方式,當出現(xiàn)在原型說明中,則默認使用此類組件????。

三、輸出說明模板

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

結(jié)語

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

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

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

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

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