文作者對彈窗4大控件進行了對比分析，非常好地闡釋了不同控件的應用場景，并通過案例進一步加深了對控件應用的理解。

大家平時做完一個項目有沒有總結的習慣呢？最近我一直在分析彈窗相關的知識點，原本覺得彈窗很簡單沒啥可分析的，大家基本也清楚什么情況下該用什么彈窗，但是發現一些同學在設計時仍然會出現濫用的情況，主要原因還是知識沒有內化。

如何才能把看過的文章內化成自己的知識呢，那就是多發現問題，比如之前我在寫彈窗的總結文章時就發現了3個問題：

問題一：警示類彈窗用 Alert 好還是 Action Sheets 好？

問題二：Toast的位置在界面頂部、居中、底部都有，三者哪個好？

問題三：Snackbar和Toast有啥區別？

當然發現問題并不能達到知識的內化，重要的是去分析并解決這些問題，這樣以后在設計時就能做到有理有據，不會濫用了。

一、了解四大控件

談問題之前我們先了解寫這些英文控件分別代表什么：Alert（對話框）、Action Sheets（控制面板）、Toast（小提示）、Snackbar（快捷提示）。

1. Alert：對話框是一種模態彈窗，當用戶將進行一些危險或者不可逆操作時，系統將會以Alert對話框的形式提醒用戶是否還繼續操作，起到警示的作用，其阻斷感強，操作不可忽略。
2. Action Sheets：控制面板是Alert的一種延伸，也是模態彈窗，用戶必須進行操作，彈窗才會消失，和Alert的區別是Action Sheets擁有更多的功能按鈕，其重點在操作。
3. Toast：是一種非模態彈窗，他一般出現在頁面的任何位置，顯示幾秒然后自動消失，其阻斷感弱，一般用來顯示操作結果，或者表單未填寫提示。
4. Snackbar：是 Google Material Design 中提供的一種兼容提示與操作的消息控件。其和Toast類似，在不操作的情況下幾秒后自動消失，同時向下滑動也可忽略消息。

二、界面位置的強弱

通過分析上面提出的三個問題，不難看出其實就是位置強弱的選擇，因此在解決問題之前，我們先來了解下APP界面中位置的強弱對比。

一個界面我們可以將其分為上中下三個部分，如下圖：

其中中間部分為用戶的視覺焦點，最吸引用戶的注意，當然對用戶的干擾也比較大，因此在使用時往往將重要的彈窗信息放在此處，比如對話框、二次確認等。

上下兩個部分的權重相當（上部略大于下部），對用戶的吸引和干擾都小于中間，因此我們可以把通知、不太重要的操作放在這兩個位置。

三、解決問題

了解了界面中位置的強弱，我們在回到最初的問題，就能更好的判斷了。

1. 警示類彈窗用 Alert 好還是 Action Sheets 好？

在一般的Alert和Action Sheets的對比文章中，大多區別是Action Sheets可以包含更多的按鈕，同時暫用空間小，而Alert一般只支持2個按鈕。

但是當都是警示類彈窗、都只有2個按鈕又該如何判斷呢？這時候就可以通過彈窗的強弱來判斷。

• 微信提倡用完即走，因此當用戶退出時并沒有做過多的挽留，這時候我們可以使用Action Sheets控件，其阻斷感小，用戶能很快的完成退出操作。
• QQ從彈窗的文案上我們就能看出，當用戶退出時連續登陸的記錄將被清零，QQ達人圖標變灰，通過這樣的方式盡力挽回用戶。因此采用Alert對話框阻斷感更強，更合適。

2. Toast的位置在界面頂部、居中、底部都有，三者哪個好？

Toast的位置從常規來看，安卓端一般在界面底部；iOS端在界面的中部，但并不是所有產品都遵循這一原則。

有的產品也將Toast放在頂部，同時iOS中也有部分APP放在底部。那么具體什么位置好一點呢？同樣我們可以根據位置的強弱進行分析。

• 淘票票選擇電影最佳觀影區提示，這些提示信息對用戶操作并沒有影響，因此放到中部可以減少對用戶的阻斷感，同時相對底部來說又更容易被注意到。
• 菜鳥裹裹當為選擇收件人地址時，點擊立即下單系統會采用Toast提示你，這時候放到界面中間能夠很好的引起用戶注意。
• 貓眼的選座提示，其實和淘票票一樣的功能，但是其放在界面底部，對用戶的干擾最小。

3. Snackbar和Toast有什么區別？

在應用時Snackbar和Toast有點類似，現在也可以看到一些APP已經將Toast換成了Snackbar，那他們有什么區別呢？

Snackbar和Toast的一樣有時間限制，若用戶不回應，他將在幾秒后自動消失，其區別是Snackbar提供一個或者2個功能按鈕。

AudioClip當我選擇標記音樂時，他直接用Snackbar提示需要登錄，這樣并不會打擾用戶當然的操作，如果用戶不想登錄，直接忽略即可。

劃重點

1. 當你不知道用Alert還是Action Sheets時可根據彈窗的強度來選擇，如果強度大就選擇Alert，強度小九選擇Action Sheets；
2. Toast在使用時首先可根據平臺規范來選擇，其次在部分位置可根據具體場景來放置；
3. 當反饋信息不需要太強的阻斷感時，采用Snackbar代替Toast也是一個不錯的選擇。從用戶體驗上來說，用戶操作起來會更順暢。

作者：風箏KK，公眾號：海鹽社

本文由 @風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

建圖片樣式到樣式庫，快速實現圖片排版格式化。

大家好，今天這一講我們來講創建圖片樣式到樣式庫，快速實現圖片排版格式化。當我們把圖片插入到一篇文檔中以后，可能也會遇到這樣的問題，圖片的并沒有像我們預想的那樣居中顯示，而是偏左或者偏右，這樣我們就需要將圖片的位置進行調整。

如果我們單純的來設置這個圖片，讓它居中對齊，經常是沒有效果的，這種情況可能是我們的段落設置所造成的。我們可以看一下這個圖片的段落設置，它的首行縮進是2.02個字符，所以才造成了它無法居中對齊這種情況。把它調整為沒有縮進，然后確定，然后居中對齊或者是ctrl+e，這個圖片就居中對齊的。

還有一種方式，通過選擇這個圖片，然后拖動標尺上的游標，然后拖到左邊，接下來再選擇居中對齊，這樣這個圖片也變成了居中對齊。這是兩種居中對齊的方式。

但是不管是第一種方法還是第二種方法，我們都需要對一個圖片進行兩步操作。第一步把它的縮進取消掉，第二步居中對齊這兩個步驟。如果圖片比較多的話，那么我們每個圖片都需要進行兩步的操作，可能就會花費我們較多的時間。

今天介紹一種方法，能夠把兩步操作步驟減少為一步，怎么實現呢？

·首先選擇一個已經調整好格式的圖片，然后在開始菜單的樣式選項卡里面，選擇這個向下的小箭頭點擊一下。

·然后在最下方有一個創建樣式，點一下，再根據格式化創建樣式，對話框里面為這個樣式起個名字，比如叫插圖樣式，然后確定。

·這時候再點向下的小箭頭就可以看到剛剛建好的這個樣式，這時候要確保剛才調整好的圖片是選中狀態，這時候對應的樣式庫里面的插圖樣式也是選擇狀態。

·然后把鼠標放在插圖樣式這里，右擊鼠標，點擊第一個更新插圖樣式已匹配，所選內容就是把當前選中的圖片的格式更新到插圖樣式里面來，這時候插圖樣式就可以作為樣式模板來使用。

·繼續在下面一個圖片，這個也是由左縮鏡的選中圖片，在樣式庫里面找到插圖樣式，點一下就變成居中對齊了，第二個點一下，后面繼續點一下完成。

通過這樣創建一個插圖樣式就把兩步操作合并為一步操作，節省了一半的時間。另外這種方式還會對以后選擇圖片有非常大的用處。

輯導語：關于啟動頁和引導頁，我們在每個APP都可以看到。做好這兩個頁面，是用戶了解產品的基礎一步，也是用戶最先了解產品的第一個窗口。因此，該如何設計啟動頁與引導頁，才能夠吸引他人？作者總結了一些自己的經驗，與你分享。

啟動頁與引導頁設計幾乎是每個APP必備的。

在產品上架前期，設計師們通常會集中設計產品啟動頁與引導頁。啟動頁與引導頁是用戶了解產品的第一個窗口，能給用戶留下初印象~最近剛做完新產品的啟動圖與引導頁設計，分享自己關于做啟動圖、引導頁學到的相關知識與經驗總結，希望對大家有所幫助，歡迎一起交流學習呀~

一、啟動頁、引導頁是什么？

啟動頁：當用戶打開APP時，在啟動APP的過程中被用戶所看到的過渡頁面或動畫都被稱為啟動頁。

作用：

• 緩解用戶啟動APP時等待的焦慮情緒。
• 傳遞品牌或介紹產品服務理念，加強用戶對產品的印象。

特點：

• 展示時間短，一般3s內，不可交互。
• 啟動圖設計的更新速率可以保持1~3年更換一次，不建議頻繁更換，啟動圖設計更新應該是跟隨產品整個戰略進行更換的。

啟動頁的形式比較多樣化，但UI設計師在產品上架前期主要還是設計以產品內容或品牌為主的品牌啟動圖，介紹產品核心服務與傳遞品牌，本文主要介紹的是APP品牌啟動圖這種形式。

其他的，比如廣告頁、節日閃屏等運營類的啟動頁形式，我們知道有這種過渡頁面存在就行了，這里就不做過多介紹了。

引導頁：當用戶安裝或更新APP后首次啟動APP時展示的3-5個滑動頁面就是引導頁，幫助用戶更加清晰的了解產品定位與功能服務。

作用：

• 呈現APP核心功能服務與產品特色或對迭代優化的地方做功能說明，讓用戶快速了解產品。
• 引導頁的設計調性能讓用戶對產品設計留下初印象。引導頁已成為每個APP的儀式感設計，每次產品迭代更新，通過引導頁形式，讓用戶感知到產品的迭代更新。

特點：

• 可左右滑動切換頁面，最后一頁有進入按鈕
• 引導頁個數一般為3-5個，個數不要超過5個，且盡量提供直接進入或跳過的按鈕
• 引導頁的設計更新頻率可以跟隨每次產品升級、新功能特色進行更新，更新頻率相對較頻繁一些

二、啟動頁、引導頁怎么做？

啟動圖設計形式啟動圖常見的設計形式有純背景+圖標/slogan、背景圖片、漂浮圖標、品牌滲透這4種形式。

純背景+圖標/slogan在純色背景上，融入產品啟動圖標或產品slogan。這一種是最簡潔也是最經典的啟動圖設計形式。簡單有力的宣傳產品品牌、傳遞產品服務理念、加深用戶對產品印象。

設計小tip：設計這種形式的啟動圖，我們需要注意頁面的視覺平衡。上下比例建議采用0.86:1很多設計師在對齊的時候會直接采用工具的垂直居中，我們可以來對比看一下直接垂直居中與微調后的視覺感受~

很明顯，直接采用垂直居中，上下比例為1:1的話，視覺中心是有些往下掉的；我們需要往上進行調整，達到視覺平衡。NAVER的改版設計中，專門將啟動頁的比例由1:1調整為了0.86:1，讓視覺達到舒適。

背景圖片采用圖片或短視頻作為背景圖。圖片或視頻的選取需要符合產品調性。這種設計形式更加直觀，具有場景感，能帶來更大的共鳴，具有沉浸式體驗。最具代表的就是微信的啟動圖了，僅靠一張圖片就形成了產品的記憶點。

政務類產品啟動圖常選用當地的地標建筑或區域特色作為啟動背景圖。

漂浮圖標將與產品相關的功能服務圖標飄散浮動在整個頁面中。最具代表的就是淘寶的啟動圖。

品牌滲透品牌滲透設計形式是目前市場上應用得最多的。采用插畫、3D等設計手法，結合產品IP形象、品牌符號等與品牌相關的元素進行融合設計，加強品牌推廣，形成品牌記憶。

品牌滲透的設計形式有：a.將品牌圖形與服務場景進行融合設計利用插圖或3d的形式將品牌圖形與功能服務場景相結合，這類設計形式也是比較流行的，既能直觀的展示服務場景又能很好的宣傳品牌。

b.品牌符號因為啟動圖時間特別短，將產品的品牌符號放大或者重復排版，從而加深用戶對產品、品牌的記憶，這也是一個比較討巧的方法。

c.IP形象啟動圖展示產品的IP形象，加強用于與產品IP的鏈接。最經典的就是QQ的企鵝開屏，這么多年都是一直保持這種設計形式。

引導頁動圖設計形式引導頁設計除了幫助用戶更加清晰的了解產品定位與功能服務外，現已成為每個app的儀式感設計。

每次下載新的app后，自己也很期待看到產品的引導頁，通過引導頁來推測整個app的設計調性~引導頁設計內容相對來說比較固定，一般為文案（主副標題）、圖形部分、輪播器、按鈕這四部分。

設計形式也主要為插畫、3D、實景圖片這3種設計形式。

插畫設計形式這是市場上應用得最多的設計形式，分為扁平化插圖與2.5D插圖形式。

3D元素隨著3D設計形式的流行，3D元素在UI設計中越來越常見。3D圖形比扁平化的圖形更加直觀立體、具有場景感，在引導頁中的應用也越來越多。

實景圖片采用實景圖片或視頻形式，讓畫面更具場景感，具有沉浸式體驗。這類設計形式更適合旅游類或短視頻類產品。

一個產品的啟動圖與引導頁設計（特別是啟動圖設計）是很具有代表性的。我們可以從啟動圖與引導頁看出產品的設計調性與服務理念，個人覺得這兩個模塊也是值得設計師花心思做的~

結合產品服務與品牌進行設計方案探索，也是很有趣的。以上就是自己關于啟動圖與引導頁的部分設計見解與解析，歡迎大家多多指教呀~

本文由 @小魚晴子 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議