在UI設(shè)計中,組件的設(shè)計思路基本相通,旨在滿足產(chǎn)品的實(shí)用性、視覺的統(tǒng)一性,主要圍繞著以下幾點(diǎn)進(jìn)行:

 

    基礎(chǔ)定義:利用清晰易懂且簡短的文案描述彈窗組件的內(nèi)容及目的。

 

    類型及構(gòu)成:明確彈窗的類型,如模態(tài)/非模態(tài),將其拆分并注明每個小元素的具體信息。

 

    規(guī)則用法:彈窗出現(xiàn)的位置、包含的具體內(nèi)容及信息的展示規(guī)則,比如哪些場景可復(fù)用。

 

    交互狀態(tài):交互流程邏輯清晰,擬請產(chǎn)品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。

 

    首先,設(shè)計師應(yīng)該理解產(chǎn)品需求,分別從用戶側(cè)(能給用戶帶來什么?滿足什么樣的需求?避免什么損失?...)、產(chǎn)品側(cè)(能給產(chǎn)品帶來什么?產(chǎn)品如何期望?是否合理?能得到什么樣的結(jié)果?...)分析為什么要加彈窗,然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計目標(biāo),以確保彈窗根據(jù)不同的需求,在恰當(dāng)?shù)臅r間、適合的樣式合理的呈現(xiàn)給用戶。

 

    其次,在得到設(shè)計目標(biāo)后,同樣需要從設(shè)計側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計角度,團(tuán)隊(duì)所有成員需要對該組件有清晰且統(tǒng)一的認(rèn)知,了解組件的使用場景,以確保不會錯用、濫用,如果增加或更換新人設(shè)計師,很容易學(xué)習(xí)和上手,提升效率;站在技術(shù)角度,一致性的常用彈窗組件,便于開發(fā)做組件封裝后續(xù)復(fù)用,減少不必要的重復(fù)工作,大大提高開發(fā)效率。