上一篇文章《APP彈窗的分類及設(shè)計(jì)技巧》匯總了APP彈窗的分類，今天主要針對如何在一個項(xiàng)目中進(jìn)行APP彈窗設(shè)計(jì)。
每個公司或許都有自己的設(shè)計(jì)流程，本文只是根據(jù)日常使用的方式進(jìn)行敘述，大家可以根據(jù)項(xiàng)目情況進(jìn)行使用。
彈窗的設(shè)計(jì)原則大致包括以下方面：
【視覺方面】
1. 彈窗文案簡潔，表意清晰無歧義
比如，彈窗提醒文字為“是否要刪除該項(xiàng)？”，操作為“是”和“否”會讓用戶猶豫不清是刪除還是不是刪除，若換成“刪除”和“取消”就不會有歧義了。
2. 設(shè)計(jì)風(fēng)格盡量簡約
避免視覺設(shè)計(jì)過度復(fù)雜影響彈窗閱讀情況。
3. 彈窗的設(shè)計(jì)風(fēng)格可以根據(jù)應(yīng)用設(shè)計(jì)風(fēng)格進(jìn)行重塑
比如，微博Toast彈窗就根據(jù)微博整體風(fēng)格進(jìn)行設(shè)計(jì)。
4. 可進(jìn)行誘導(dǎo)性設(shè)計(jì)
常見的如希望用戶點(diǎn)擊的按鈕放在右邊，放大點(diǎn)擊按鈕弱化關(guān)閉按鈕等。
5. 危險操作需警示
如刪除時需要將“刪除”操作警示。
【交互方面】
1. 彈窗的出現(xiàn)盡量不干擾用戶使用
2. 具有同種層級的彈窗使用相同的樣式
3. 同種Toast彈窗位置保持相同
4. 注意彈窗頻率
#小黑板劃重點(diǎn)#以下是本文重點(diǎn)
那，一個項(xiàng)目中彈窗那么多，又如何做到即統(tǒng)一又有特色？
首先，根據(jù)彈窗強(qiáng)調(diào)程度對整個應(yīng)用的彈窗進(jìn)行劃分，分出哪些是需要重點(diǎn)強(qiáng)調(diào)的彈窗，哪些是弱化的彈窗（具體可看上篇文章）；
其次，對于同種強(qiáng)調(diào)程度的彈窗進(jìn)行框架樣式設(shè)計(jì)（下文會詳細(xì)介紹Dialog的框架樣式）；
最后，針對不同頁面進(jìn)行視覺設(shè)計(jì)。
A 最常見的就是Dialog了，針對功能的不同對彈窗做了框架樣式，方便分辨。
這樣的設(shè)計(jì)難免會有些單調(diào)，也無法體現(xiàn)應(yīng)用的特色。今天搜羅了大量彈窗的視覺，針對每一種框架樣式看看都可以做哪些設(shè)計(jì)？
1. 無按鈕
無框架的樣式多為信息展示，因此文字一般較多?？梢酝ㄟ^信息用場景化的方式呈現(xiàn)，但需要注意文字的層次。
2. 單項(xiàng)按鈕+無取消
這種一般想要用戶必須點(diǎn)擊才可進(jìn)行下一步操作，設(shè)計(jì)需要引導(dǎo)點(diǎn)擊按鈕操作，因此在設(shè)計(jì)的時候?qū)粹o的樣式進(jìn)行重化處理或特殊樣式處理，增加視覺。
3. 單項(xiàng)按鈕+取消
這種類型和2類似，添加的取消按鈕也會弱化處理。
4. 雙項(xiàng)按鈕+無取消
雙向按鈕中有優(yōu)先和輔助按鈕，優(yōu)先按鈕會引導(dǎo)性設(shè)計(jì)。若作為兩個并列的button設(shè)計(jì)的化，通常會將優(yōu)先按鈕放于右側(cè)。
5. 雙向按鈕+取消
應(yīng)用最多的樣式，同4的樣式添加了取消，用戶友好度高。
B 然后來看看Actionbar的樣式
1. 應(yīng)用內(nèi)部功能
根據(jù)頁面視覺進(jìn)行設(shè)計(jì)的同時，將取消按鈕進(jìn)行變換增加其他按鈕點(diǎn)擊率，毛玻璃的樣式仍是經(jīng)常使用的樣式，但是純色及大背景的樣式也可以給頁面增加一些特色。
2. 其他應(yīng)用功能
經(jīng)常使用在社交應(yīng)用的分享，一般會用社交應(yīng)用的icon表示按鈕（降低用戶學(xué)習(xí)成本），同時也會增加一些引導(dǎo)性的文案誘導(dǎo)分享。
C 再接下來是Popover的樣式
隨著3D touch的發(fā)展，現(xiàn)在越來越多的應(yīng)用使用Popover的機(jī)會越來越多，清晰簡潔的Popover可以添加很多常用功能。
D 最后是Toast/HUD
除了常用的毛玻璃樣式，也可以使用全屏的樣式進(jìn)行設(shè)計(jì)，這樣的視覺感會增強(qiáng)。
視覺可以對彈窗進(jìn)行整體設(shè)計(jì)、添加icon、融入插畫、異型設(shè)計(jì)等方式進(jìn)行設(shè)計(jì)，具體的設(shè)計(jì)技巧可以參考之前的文章《APP走心設(shè)計(jì)的小思考》
