在手機app應用中各種格式的彈窗效果相信大家都看過，也可能反感過某些彈窗，本文就來談談關于app彈窗設計以及彈窗的適用情景。

一. 彈窗的定義

1. 彈窗作用

彈窗是為了讓用戶回應，需要用戶與之交互的窗口。

非模態彈窗一般被設計成用來告訴用戶信息內容，而模態彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。

2. 模態彈窗

會打斷用戶的操作行為，強制用戶必須進行操作，否則不可以進行其他操作。

（Alerts／dialog，Actionbar，Popover）

3. 非模態彈窗

不會影響用戶操作，用戶可以不與回應，通常有時間限制，出現一段時間就會自動消失。

（Toast/HUD，Snackbar）

二. 彈窗分類

以下將以各類彈窗的含義、作用、適用來進行淺析。

1. Alerts/Dialog：警告框與對話框

含義：英文意為警告、對話，跟彈窗屬性非常吻合，就是緊急狀況，打擾用戶的行為。

剖析：iOS中警告框稱之為Alerts，作用是用來傳達重要信息，并伴隨著需要用戶進行操作。

iOS規范中，警告框包含的元素如下：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。

必須包含標題、包含一個或多個按鈕。

Android規范中，彈窗交互按鈕需結合實際情況，不用「是/否」原則進行設計。

作用：告知用戶當前發生的狀況，讓用戶主動選擇回應。

適用：重要性較高的操作時，如退出、刪除、清空等。

2. Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動視圖

含義：英譯為工具欄、操作欄。

剖析：當用戶激發一個操作的時候，出現此窗口。

一般會給用戶提供更多的功能選擇，一般可采用官方控件。

一般都設計有一個默認的「取消」按鈕，點擊取消可以關閉彈窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用戶觸發、包含兩個或以上的按鈕。

△ 以上為今日頭條、iOS系統相冊

作用：操作列表提供一系列在當前情景下可以完成當前任務的操作，而這樣的形式不會永久占用頁面UI的空間。

適用：如分享功能。

3. Popover/Popup：浮出框/浮層彈窗

含義：英意為彈出窗口，浮動于頂層窗口，氣泡。

△ 以上為微博、qq、微信

剖析：當用戶點擊某個控件或者某個區域時浮出的半透明或者不透明的彈窗窗口。

不會對用戶所在位置進行跳轉。

作用：可以在當前頁面進行更多的操作行為，顯示/隱藏頁面中的折疊信息。

適用：首頁位置呈現一些常用操作的快捷入口。

4. Toast/HUD：提示框（iOS沒有Toast，只有HUD）

含義：Toast也被稱為吐司提示，Toast是安卓系統的一個控件名詞，現也應用于iOS系統中。

剖析：提示框屬于一種輕量級的彈窗反饋形式，常以小彈框的形式出現，持續1-2秒自動消失，可以出現在屏幕任意位置，但是建議同一款產品盡量使用相同位置，讓用戶產生統一認知，成為習慣。

提示信息能給予用戶及時反饋，確保用戶知曉自己所處的狀態，并可以做出相應的措施。

iOS用戶更習慣于在頂部感知反饋信息，不干擾用戶瀏覽主體內容。Toast出現在屏幕頂部不會遮擋主體內容。（如花瓣、有道云筆記）

Android正統的規范中Toast：

• 出現在屏幕底部。
• 只能放文字不能帶圖標，文字要精簡不宜太長。
• 不是模態的，可以通過Toast對其他控件進行操作。
• 短時間后會自動消失。
• 不能對Toast進行交互。
• 優先適用于系統提示，不能手動操作讓Toast主動消失。

△ 以上為今日頭條、微博、即刻

HUD與Toast的區別：

• HUD只出現在屏幕的中央，Toast則在底部。
• HUD可以包含icon，Toast只能純文字。
• HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• HUD中內容可以變化（如調節音量時），Toast中內容不可變化。

△ iOS音量調節

優點：

• 占用屏幕空間小。
• 不會打斷用戶操作。
• 使用簡單，適用范圍廣。

缺點：

• 出現時間短，在碎片化時代注意力不集中容易錯過Toast提示。
• 遮蓋其他控件，但不能對Toast進行交互。

適用：提示不需要的反饋信息，如刷新后的成功狀態。

5. Snackbar：底部彈窗

Android特有的交互形式，在Google的MD規范中，將Toast和Snackbars歸為一類。有些時候也有應用在iOS系統中，也可以理解為加強版的Toast。

含義：英譯為快餐、小吃。

剖析：Snackbars與toast一樣是從屏幕底部向上出現，但是Snackbar不同的是可以經過用戶進行其他操作而消失。

適用：較多適用于撤銷操作。

三. 總結

通過分析和了解彈窗的類別、適用范圍，才能更好的在設計中進行優化與改變。用戶體驗設計的重點，是一步步了解用戶，然后設計出適合用戶體驗，滿足用戶心理需求的產品。把握好彈框設計規范，避免彈框設計的誤區，能更好的幫助你完善產品。

但是，沒有十全十美的產品，所以要根據設計趨勢與用戶需求不斷地進行更新迭代，通過用戶反饋，不斷地改良產品體驗，才是做出優秀產品的前提。

從事電商方面的設計師，詳情頁設計可以說是必修課，好的詳情頁會給帶給用戶更流暢的視覺體驗、更直觀的產品信息、亮點等等，也有助于提升交易的達成率。正是因為如此，所以很多商家不惜重金請設計師為其打造爆款產品的詳情頁，由此可見詳情頁在電商設計中的重要程度。本期和大家一起分析總結：如何把詳情頁做的足夠出彩，詳情頁做不好需要從哪些方面進行提升？

目前被認可的一種詳情頁設計形式是分屏式，就是按照手機端設計思維以一屏為單位制作，最后整合成一個完整的詳情頁，這種形式有助于提升視覺流暢度及內容識別度，所以我們可以將每一屏都當作一張海報來制作。而說到海報，就離不開設計構圖。

詳情頁的構圖與傳統的PC端海報有所不同，因為詳情頁設計更注重手機端，所以一屏的內容又可以看做是手機端豎向的海報。而一副出彩的海報，必然需要優質的骨架。那么常見豎向海報構圖形式有哪些？下面為大家總結了幾種在詳情頁設計中比較實用的構圖形式：

如圖所示，這三種構圖形式看似簡單，實則兼顧了手機端的很多必要點，比如：視覺的流暢度、整潔度、辨識度、用戶的接受度等等，詳情頁設計在構圖及板式方面并不需要很復雜，反而干凈整齊的畫面更易于視覺表達，也更利于手機端展示。

這三種構圖形式在詳情頁中使用頻率是非常高的，下面我們看幾組案例：

看似簡單的構圖，反而在詳情頁設計中非常實用，僅靠這三種構圖，完全可以做出很優秀的詳情頁。另外還有一些從這三類衍生的構圖形式，也比較常用：

文案在配圖下半部分的這類構圖相比而言用的少一些、也難把控一些，當然用的好了在版式上會有打破、眼前一亮的視覺感受，只是這類構圖不宜多用，完整的詳情頁中出現1-2次即可。而左右式配圖+文案的形式是比較常用的，下面看組案例：

詳情頁的構圖不易太復雜，這六種構圖形式完全夠日常工作，只需選取其中1-3中構圖形式交替使用即可。以上構圖示例中標識的裝飾元素可以是線條、英文、圖標、數字、實物素材等等，也可以選擇不使用，具體情況根據配圖的留白以及重心靈活使用即可。

所以，詳情頁中每一屏的構圖并不難，完全可以把這六種構圖形式當做公式，需要哪種直接套用其結構就可以（結構類似即可，并非要求1:1）。另外：配圖形式可以分為三種：全屏、半屏、透明圖，具體的構圖形式需要結合畫面整體的重心、留白、美觀度決定。更通俗一些的話，構圖就可以理解為填空，內容就往空的地方填，注意好適量的留白。

補充：當透明圖作為配圖時，不管哪種構圖形式都有可能出現空的現象，這時我們可以用一些具有裝飾性的數字、英文、線條、形狀、文字等等進行填充，舉例說明：

案例中的文字、數字與產品相互結合，既解決了空的問題、提升了整體的飽滿度，又在形式上做到的新穎、有創意。構圖形式與前面所說的皆能吻合。

說到設計素材，浮在腦海中的可能會很多種，而這次要說的主要是三類，即：手勢、植物、肌理（在花瓣搜索關鍵詞“手勢”“植物”“材質”“肌理”就能找到對應素材），這三類素材在詳情頁設計中出現的頻率也是很高的，如果運用得當會將詳情頁的出彩度進一步提升一個檔次，而且對于視覺表達也會更加生動、形象、富有說服力，下面我們逐一來說：

手勢素材

顧名思義，就是各種各樣關于手方面的動作，比如：拿、托、指等等，下面舉個例子來看：

這些手勢在很多詳情頁中都會出現，接下來我們不妨思考這么一個問題：為什么要用這些手勢，只是單純的好看嗎？

其實不然，在視覺上，這些手勢使得畫面更加生動、有立體感、有層次感，讓作品更飽滿、更出彩。而對于用戶而言，能讓其更加深刻的體會到產品是有溫度的、可操作的、更真實、更容易理解，所以對于交易的達成以及加深用戶對產品的了解也更具說服力。

影響詳情頁轉化率的因素有很多種，視覺表達能否真正抓住用戶心理也是很關鍵的一點！

植物素材

這類素材相信大家都不陌生，在很多頁面以及詳情頁出現的頻率都很高，而且裝飾性很強，寓意也很寬泛，比：自然、清新、貼合現實、有生機等等，下面舉個例子：

如圖所示，這里的植物都能很好的與畫面主體形成很好的遮擋關系，在視覺層面顯得更有層次感、畫面也更飽滿；而且植物的運用并不是隨便使用的，而是與海報氛圍、文案都緊密相關，形成了很好的呼應、裝飾作用。

我們常用的植物元素可以是清晰的，也可以模糊處理，只要與畫面整體氣質相符，可以根據實際情況靈活使用。

肌理素材

關于材質、肌理的妙用在前面很多文章中都有提到過，這里簡單的說一下：肌理素材對于提升作品細節感、層次感、出彩度以及飽滿度都有很大的幫助，如果作品碰到上述問題，不妨用肌理素材試試。

單看標題可能很多人不太明白，什么叫做抽象名詞具體化？其實簡單理解就是：將一些比較抽象的名詞通過設計手法表現出來，比如：風、聲音、溫度、輕重、鋒利等等。這樣做的目的不僅可以提升用戶體驗、加快用戶理解，而且在視覺上能生動形象的將抽象化名詞表現出來，對于視覺出彩度的提升也很大。給人留下的印象也更加深刻，間接的提升了視覺傳達的時效性，下面看個例子：

通過案例我們不難發現：將抽象化的名詞通過視覺手法表現出來，對于用戶理解的難易程度以及視覺出彩度而言都有提升。如果一款產品詳情頁中能出現1-2次這樣的處理手法，會使得詳情頁在視覺上更加生動、形象。

補充：在詳情頁設計中，若文案中出現一些LOGO、數字、英文，注意不要放過它，因為它具有裝飾性的特點，對于詳情頁板式的活躍以及設計感提升都有很大的幫助！形式多為：水印、與產品穿插、作為主體信息使用等等！一款詳情頁這種用法可以出現2-3次！

詳情頁設計不可忽視的兩點：視覺的流暢度以及文案辨識度。文章所提到的一些構圖方式、元素使用、視覺表現形式都是為大家提供一個可供參考的方向，落實到工作中要靈活運用、舉一反三。一般情況下，一款詳情頁大概有2-4屏比較出彩的即可，能形成一定的對比，不至于視覺疲勞、千篇一律！

不妨找一些不錯的詳情頁，按照文章中所寫的自己嘗試分析分析，看是否與之吻合。切記詳情頁設計構圖及文字排版不易太過復雜，切記、切記、切記，重要的事情說三遍！

文章來源：站酷

在做設計的過程中，大部分設計師只專注于主操作流程、主頁面、分支流程、小頁面和頁面的不同狀態。卻容易忽略產品中容易出現的各種異常狀態。

當用戶停留任何一個界面，進行任何一個操作都可能發生異常狀態。

如果接到每個需求都去制定一次異常狀態，這樣的后果可能會使得產品的不同模塊、不同流程，異常狀態都不一致。全局規范性被破壞，同時設計師的效率也降低。

因此全局制定異常狀態規范很有必要，后續就不需要再設計，開發直接復用異常狀態的規范。省時省力、提率、設計規范、運行更流暢、減少代碼重復率、安裝包也會更小。

異常狀態一共有以下 10 類：

• 網絡異常
• 消耗大量流量時
• 空數據
• 加載失敗
• 操作失敗
• 服務器異常
• 搜索無結果
• 無權限
• 功能建設中
• 內容被刪除

網絡異常

當移動設備網絡異常時，導致無法上傳和下載數據，從而無法正常的使用產品。

網絡異常存在兩種場景：

• 網絡異常時，用戶打開 App，這種情況 App 會出現異常狀態提示給用戶，這是 App 主動告知行為；
• 用戶點擊操作時，由于網絡異常，這時候通過交互反饋給用戶，這是 App 被動告知行為。

1. App主動行為

當無網絡時，用戶打開 App，通常有三種方式提醒用戶當前網絡異常。

tips 提示，通過 tips 提示用戶當前網絡不可用，tips 使用場景一般為用戶打開后，界面停留在首頁，且首頁以列表形式展示，這樣的話， tips 才能合理的融入到界面中，常見使用這種布局方式的有微信、qq等。

使用toast提示用戶網絡異常，同時提示用戶可以去使用非數據影響的操作。例如網易云音樂，當無網絡時候，告知用戶可以去正常聽已下載的音樂。

使用對話框，引導用戶進入設置頁面，關閉飛行模式或者打開 Wi-Fi，例如美團進入首頁后的對話框提示。

2. App被動行為

當前無網絡時，用戶點擊操作，無法正常使用產品，這時候通常有兩種處理方式。

一種是當前界面出現 toast 提示。另一種是進入下一級界面，以缺省頁的形式提醒用戶當前網絡異常。

例如手機淘寶，沒有網絡時，用戶點擊會進入下一頁，出現缺省頁提示，告知用戶網絡異常，同時提供刷新按鈕。

美團在無網絡時，點擊其他 tab bar，出現 toast 提示用戶當前網絡異常，稍后重試。

3. 小結

• 個人覺得，當 App 打開進入列表頁面時，常見的如 IM，則使用 tips 提示告知用戶，非列表的 IM 工具時，可使用 toast 告知用戶。
• 當用戶進行界面交互時，用戶點擊操作，通過 toast 告知用戶。

消耗大量流量時

當涉及需要消耗大量流量數據時，且非 Wi-Fi 情況下，這時候需要告知用戶。常見的例如看視頻，聽/下載歌曲、視頻通話、下載上傳文件等。

例如B站，當使用移動數據看視頻，則通過提示語和對應按鈕上的流量值告知用戶。

網易云音樂在非 Wi-Fi 情況下，下載音樂時，通過對話框，告知用戶當前使用數據流量，同時提供可繼續下載的功能，也提供通過辦理新業務解決數據流量的問題。

空數據

空數據一共分為兩種類型，分別為初始狀態和清空狀態。

1. 初始狀態

用戶首次使用，沒有任何內容數據時，需要用戶進行某種操作才能產生內容的界面，這時候需要提示用戶需要進行某種操作。

例如淘寶App，當用戶沒有把商品加入購物車時，進入購物車界面，會給出提示購物車界面為空。給出用戶提示，給出相對應的入口按鈕，引導用戶操作。

如果初始狀態，無任何內容直接給出一個空白界面，用戶可能會以為該界面出 bug 了。

Gmail 直接用一個插畫提示用戶收件箱為空。

一般對于初始狀態的設計，常規做法是簡單的插畫配合簡潔的文案，必要的時候給出引導用戶操作行為的按鈕。

現在流行的設計趨勢是插畫越輕量越簡單越好，以免搶奪了文案信息。

2. 清空狀態

當用戶清空當前的頁面內容，產生了空界面，這時候需要有明確的提示告知用戶出現當前頁面的原因，且告知用戶該如何處理。

清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很相似，唯一不同的是文案的提示。

有的產品直接把清空狀態的界面按照初始狀態來設計，這樣也是可以的，缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。

加載失敗

在加載過程中，App 向服務器請求數據，如果是網絡原因導致，則使用網絡異常的設計規范。

如果非網絡異常原因，則可能因為服務器異常導致接口請求不到數據，從而加載失敗。

第一次請求失敗，有些場景可能重試 2 次，例如微信支付寶，這種情況可使用 toast 告知用戶加載失敗的原因。

操作失敗

任何操作行為的交互界面都伴隨著操作失敗的概率。

當用戶操作失敗時，在當前頁面給予一個反饋，告知用戶操作失敗，最好告知用戶操作失敗的原因，讓用戶知道接下來如何避免操作失敗。

服務器異常

因為服務器異常是小概率事件，但是也會發生。

當服務器異常時，且用戶在操作過程中，出現這種情況，一般可設計為對話框提示，明確告知用戶，服務器出現問題，讓用戶稍后重試。

例如下圖的華為云備份恢復界面：

搜索無結果

用戶在搜索過程中，除了出現正常的匹配結果，還存在無匹配結果的情況。針對搜索無結果的情況，要給予用戶操作無結果的提示。

幾乎搜索無結果的狀態都是在內容區出現對應提示。例如 iOS 相冊，通過搜索關鍵詞，當沒有匹配照片時，則出現對應的提示，如下圖右側圖：

下圖淘寶買家版后臺，當用戶搜索關鍵詞無結果時，出現對應的提示語和插畫。

無權限

無權限的場景，通常適用于 b 端產品，對于不同組織架構的企業員工，會存在不同的權限。

例如部分重要的內容，非同一組織架構的員工無權限查看，這種情況，用戶點擊進入一般給出對應的提示。

當然最好的方案是在 App 上面過濾掉無法查看的內容，但是存在員工間的轉發行為，這時候無權限的員工，點擊進入，則顯示暫無權限查看的提示頁面。

功能建設中

一般 App 功能正在開發中，這種情況不會在 App 界面中展示出來，只有完全開發完畢并上線后才會出現在 App 上。

但是也有一些產品的特殊業務，會將一些未開發的功能展示出來，例如微信公眾號，長按微信文章，即出現對應的提示。

也有一些新聞頻道還沒有開發完畢上線，這時候用戶點擊進入下級界面，則出現對應的提示語/插圖提示，如下圖所示：

內容被刪除

有的時候，文件或者頁面內容被刪除，但由于文件或者頁面內容的上一級頁面有緩存，所以當用戶點擊進入時，會出現文章/文件被刪除的情況。

已被刪除的異常狀態，常見的設計是用戶進入新頁面出現對應的插畫和標題提示。

例如下圖微信公眾號文章內容被作者刪除，讀者點擊進入，加載后的界面就出現內容被刪除的提示。

以上就是常見的 10 種異常狀態的簡單介紹和說明。在制定異常狀態的設計規范時，可以參考本篇文章。

當然也有公司特殊的業務導致存在很特殊的異常狀態，針對這種情況，可以適當的增加、刪除或者修改，使其更適用于自己公司的項目。

文章來源：優設

每一次學習改版案例，不僅僅只是去看在視覺層面的變化，更多的應該是要學習到作者改版背后的思考。為什么要這么改，原因是什么，目的又是什么，怎么做，有哪些限制等等，有很多東西要去思考。所以，帶著問題并結合自己實際中所做的項目來看案例，應該會是一個很有收獲的過程。

項目背景

Booking.com繽客 是一家荷蘭初創公司，并已經發展成為全球最大的旅游電子商務公司之一。
在Booking上，旅客可以選擇世界上任何一處的住宿地點，包括公寓，度假酒店，民宿，五星級豪華度假村，樹屋甚至冰屋等等。每天，通過平臺預訂的房間數超過155萬。無論是商務旅行還是休閑旅行，人們都可以快速輕松地預訂到理想的住處。

競品分析

自從Booking發布以來，許多競爭對手都采用類似的商業模式瘋狂跟進，搶占市場，并且在某些方面比Booking本身做的還好。

在調研的前期階段，我去搜集了一些競爭對手和類似的平臺，分析UI，用戶體驗，用戶地圖，信息架構和關鍵功能。但是我并不會花太多時間過于深入的去分析這些產品，因為我希望將重點放在Booking這個產品本身的訴求上。

使用場景

在之前的調研過程中，我發現了許多不同的使用場景，經過匯總歸集，我集中關注以下3個場景：

• 場景1：用戶知道其行程的日期和目的地（默認場景）
• 場景2：用戶明確了日期但對其旅行的目的地不清楚
• 場景3：用戶知道目的地但不確定其旅行日期

典型用戶

在進一步的研究中，我明確了4位具有不同需求和不同目標的典型用戶，這些數據對于改善不同用戶的體驗非常有用。

這個分析的目的是通過梳理最佳的用戶流程并提升產品體驗，來為不同需求的用戶提供最好的用戶體驗。

△ 數據來源：在線研究和用戶訪談（30個用戶樣本）

用戶反饋

收集用戶評論，從中我收到了很多有價值的反饋，這些評論中沒有特別明確指出是可用性或功能性的問題。我將這些反饋分為4類（譯者注：對反饋的問題進行提煉整理）：

• 預訂被取消
• App的Bug
• 投訴的處理效率
• 反饋的進度

毫無疑問，最相關的是預訂被取消的問題。太多用戶會注意到不合理的費用或與房間的主人取得聯系時遇到困難。

用戶訪談

基于30個用戶樣本，我試圖獲得進一步的用戶反饋，從中注意到以下的幾點事實：

• 與其他平臺相比，booking的平均價格通常更高
• 產品過于突出好評，用戶很難發現一些真實的差評
• 當房屋主人接收到用戶的回復時聯系用戶也很困難

我想引用一段話，來總結這里面遇到的問題，這段話也蠻有意思的，它說的是：

「與其他應用比較來看，套路顯得有點多，會讓你覺得一切看起來都蠻劃算，總是想多賣一些東西給你。」

用戶痛點

總結之前的分析，我提出了以下幾點觀點：

• 沒有一個完美的解決方案能夠滿足所有用戶，用戶需要盡可能多的掌握有用信息。
• 沒有的功能沒有太多考慮到個性化需求。
• 可以改進UI并使用戶更加集中于他的目標，而不是完全「以推銷為中心」
• 優化用戶與房東之間的聯系問題

解決方案

從用戶痛點出發，嘗試找到合適的解決方案，來提升產品體驗。

1. 主頁

總的來說，我對首頁進行了大手術。主頁的搜索功能已經完全重新設計，減少過多的干擾信息。

導航：我設計了一個新的導航欄，剝離出「已保存」功能，這樣用戶就可以快速找到自己所收藏的商品。此外，我也優化了「交易」的模塊，后面我會詳細的說說這塊的改動思路。

其它功能 :至于之前的版本，我保留了搜索和相關推薦的功能，重新設計界面以改善UI的可用性。

2. 社交功能

如今，社交網絡在用戶的生活中扮演重要的角色，那沒理由在booking中做的這么差。我搞了一個新功能，允許用戶關聯自己的好友并查看他們的選擇，包括他們的評價（喜歡/不喜歡）。我已將此功能放置到主頁的下方，因為我希望在將其推廣到其他模塊之前收集更多有關它的數據。

3. 搜索功能

把這個功能分解為多個步驟。在輸入第一個詞后，即使沒有指定日期或其他信息，也能顯示相匹配的酒店。此外，我也加入了語音搜索，使搜索更容易?；谥拔覍Σ煌脩艚巧亩x，搜索的結果將根據最后的信息進行推薦：

• 1名成人 ——背包客 ——酒店
• 2名成人——度假夫婦——酒店，賓館或B＆B（某種酒店形式）
• 2名成人+兒童——家庭——民宿公寓或酒店
• 1名成人+商務選擇——商人——酒店

4. 列表頁面

列表頁針對易用性方面做了整體的優化：

• 我將篩選功能從3個按鈕更改為2個按鈕以減少用戶的操作步驟——將它放在頁面底部，方便使用
• 我添加了標簽功能來更好的區分屬性類型
• 在第一時間向用戶展示物業的主要設施特點。注意：根據不同的用戶，可以智能突出顯示不同人正在尋找的不同信息。
• 我將報價的方式轉換為「單晚」而不是「總價」，以便在不同商品之間進行比較

5. 詳情頁

我列出許多可以在詳情頁面中加入的修改。將總價格突出顯示，以免有些隱形消費用戶可能會被忽略。

增強了一個與評論相關的次要功能，允許用戶通過不同標簽篩選它們。

6. 交易功能

在優化開始時，我確定了操作場景2—— 「用戶還不知道自己的目的地」作為優化方向。為了提供更好的用戶體驗，我增加了一個新的功能，用戶可以在其中找到不同目的地的區間。利用篩選功能，用戶可以選擇最適合其需求的區間（區間 – 大陸 – 國家等…）

動效原型

最后，我還設計了一個整個項目的動效原型，把之前所有重設計的頁面串聯起來。

結語

由于時間限制，分析和結果是基于我的個人經驗和少量數據，需要進行深入分析和其他測試，以便完善和驗證解決方案。

文章來源：優設網

還在頻繁地使用彈窗對用戶展示重要提示嗎？明知這樣有損體驗卻沒有更好的選擇嗎？那么不妨來試試干擾度更低，卻依然可以用于重要提示的 Sheet 控件吧。

什么是Sheets

Sheets 控件并非彈窗，通常會被熟稱為「浮層」或「浮窗」。

該控件在 iOS 和 Android 系統規范中都有相關定義，屬于多才多藝的控件，可以用于給予信息提示，也可用于展示更多的拓展信息。

從用于提示的角度來看，Sheets 控件和 Dialogs 控件的相同點和不同點在哪里呢？

1. 共同點

模態化

二者都可以設置模態，當模態控件顯示時，頁面背景會顯示深色遮罩，并立即打斷用戶當前操作。

承載操作和信息

二者都可以承載豐富的操作和信息，支持嵌入列表、選擇器等控件及圖片、文本信息。

2. 不同點

觸發方式不同

Dialog 可以不通過用戶操作而自動觸發，Sheet 必須通過用戶操作才可以觸發顯示，因此用戶對 Sheet 的顯示會更有預期。

關閉方式不同

Dialog 的關閉方式較少，通常會要求用戶進行選項操作后才可關閉；Sheet 的關閉方式較多，對于用戶而言有更豐富的選擇權。

因此綜上所述，我們可以發現，Sheet 對比 Dialog 的優勢在于，它的顯示會更符合用戶的預期，它的干擾層度也會低于Dialog（因為更易關閉）。

• Sheets 在 Google Material design 規范中被分為了 Bottom sheest 和 Side sheets 兩類；
• 在 iOS Human Interface Guidelines 中被分為了 Action sheets 和 Activity views 兩類。

下面就由我來依次詳解其特性和玩法吧。

Bottom sheets 底部浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場景

用于補充內容相關的更多信息（非模態）、提供可交互的菜單或對話（模態）或其它關鍵功能/任務的拓展。

2. 注意事項

• Bottom sheet 通常用于 Android 豎屏場景，在 Android 橫屏場景建議使用 Side sheet。
• 在 iOS 中不建議使用 Bottom sheet，建議使用原生的 Action sheets 或 Activity views。

3. 樣式類型

菜單樣式

可嵌套 Menus，展示多個選項內容。

宮格樣式

可使用宮格布局，展示多個選項內容。

迷你樣式（非模態）

一個非模態底部浮窗可被設置固定展示在頁面底部，用戶可以隨時用它來對其它功能/任務進行快捷操作，如進入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。

4. 模態/非模態

非模態浮窗：如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作。

模態浮窗：如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。

5. 顯示與消失

顯示

浮窗顯示時從底部向上滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。

模態浮窗在以下情況下會消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶下拉浮窗達到收起閾值后（自定義）；
• 用戶點擊 Android 系統返回鍵。

非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。

6. 支持高度延伸

當浮窗底部仍有未顯示的內容時，可設置通過滑動或拖動浮窗來使其變為全屏展示，并在頂部顯示 Toolbar 來展示關閉/收起操作。

7. 支持深層鏈接

模態浮窗中可以展示其它應用的深層鏈接內容或操作，譬如調用 Google 翻譯。

8. 范例

抖音的評論功能使用的是模態 Bottom sheet；百度地圖的路線切換功能使用的是非模態 Bottom sheet。

Side sheets 側邊浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場景

用于補充內容相關的更多信息（非模態）或提供可交互的列表信息（模態）。

2. 注意事項

• Bottom sheet 通常用于 Android 豎屏場景，在 Android 橫屏場景建議使用 Side sheet。
• 在 iOS 中不建議使用 Bottom sheet，建議使用原生的 Action sheet 或 Activity views。

3. 樣式類型

菜單樣式：可嵌套 Menus，展示多個選項內容。

宮格樣式：可使用宮格布局，展示多個選項內容。

4. 模態/非模態

如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作（在移動端較少使用，通常用于 PC 端）。

如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。

5. 顯示與消失

顯示

浮窗顯示時從左/右邊緣滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向左/右邊緣滑出。

模態浮窗在以下情況下會消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶側拉浮窗達到收起閾值后（自定義）；
• 用戶點擊 Android 系統返回鍵。

非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。

6. 滑動說明

支持上下滑動，不支持左右滑動。

7. 范例

淘寶的篩選功能使用的是 Side sheet。

Action sheets 操作浮窗

專屬于 iOS 的 Sheets 控件。

1. 使用場景

用于呈現一組與當前操作相關的選項，如啟動某個任務，或者確認是否開始執行某個可能具有破壞性的操作。

2. 注意事項

在 Android 中不建議使用 Action sheet，建議使用原生的 Bottom sheet 或 Simple dialog。

3. 樣式類型

如下所示，支持單個或多個操作的展示，以及說明文案的展示：

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。會在以下情況消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶點擊浮窗「取消」按鈕。

5. 顯示位置

豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。

6. 范例

微信的選擇朋友圈發布類型及清除聊天記錄的二次確認，都是使用的 Action sheet。

Activity views 活動浮窗

專屬于 iOS 的 Sheets 控件。

1. 使用場景

用于呈現一組與當前操作相關的選項表，如復制、收藏或分享。

2. 注意事項

在 Android 中不建議使用 Activity views，建議使用原生的 Bottom sheet。

3. 樣式類型

列表樣式

宮格樣式

混合樣式

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。會在以下情況消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶下拉浮窗達到收起閾值后（自定義）。

5. 顯示位置

豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。

6. 支持高度延伸

當面板底部仍有未顯示的內容時，可設置通過滑動或拖動面板來使其高度進行延伸，從而展示更多信息。

7. 范例

愛奇藝的分享功能和泡泡圈選擇發布內容類型，都使用的是 Activity view。

用法總結

建議針對非系統級或業務級的重要提示，使用 Sheets 控件進行提示；Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。

另外在調用原生 Sheets 組件時，記得分端的差異性。

文章來源：優設網

當界面設計定稿之后，設計師需要對圖標進行切片，提供給開發工程師。切圖與標注是為了能夠滿足開發人員對于效果圖的高度還原需求，直接影響到工程師對設計效果的還原度，并且也是設計師重要的輸出物之一。合適、精準的切圖可以最大限度地還原設計圖，起到事半功倍的效果。

通常我們只需要對 icon 與圖片進行切圖即可，文字、線條和一些標準的幾何形狀是不需要切圖的，例如搜索框只需要在標注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發工程師可以用代碼實現這種效果。

切圖基本規范

1. 切圖的尺寸必須為偶數；
2. 同一模塊內，切圖大小應保持一致；
3. 如果有背景，盡量用平鋪的背景圖案來設計（減少程序體積）；
4. 可點擊的部件要把相關狀態都切圖輸出，比如：正常狀態、點擊狀態、不可點擊狀態；
5. 輸出的切圖應當盡可能的壓縮大小，以降低 APP 的總大小，提升用戶使用時的加載速度（推薦在線壓縮：https://tinypng.com）；
6. 所有的變形字體把它當成 icon 來切；
7. 切圖輸出格式：png-24；
8. 重復的東西只切一個。

切圖輸出類型

1. 圖標切圖輸出

桌面圖標切圖輸出

App 的桌面圖標會被運用在很多不同的地方，比如手機桌面、APP store、手機的設置列表，所以 app 桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對應的桌面圖標設計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可，手機系統會自動生成圓角效果。

系統圖標切圖輸出

一套圖適配雙平臺：iOS平臺（iPhone 6plus版本除外）和安卓平臺公用 44*44px 切圖素材，即可實現一套切圖適配兩個平臺的開發。

適配大屏幕：為了適配 iPhone 6plus、iPhone 7plus，單獨切一套比原有 44*44px 切圖大 1.5 倍的切圖，即 66*66px 大小的切圖。

APP內功能圖標

圖標是可以有留白區域的，建議圖標尺寸盡量不要過多。

2. 圖片類切圖輸出

圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小，以便于工程師開發使用。另外一般這些切圖的文件較大，在切圖過程中需要控制切圖文件的大小。

全屏類切圖

局部類切圖

3. 動效元素切圖

動效元素切圖一般是指在 app 中加載動效所需要的切圖元素。

gif 動圖切圖一般分為三種：

一是只需要給到 gif 圖動效的部分即可。

△ 城易logo

二是，導出序列圖片壓縮打包給開發人員。

三是導出 json 。

Airbnb 開發了一款動效神器：Lottie，這是一個將 After Effects 動畫提供給任意一個 iOS，macOS，Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進行輸出。Lottie 通過 JSON 格式下載動畫數據并實時提供給開發者。

相關鏈接

• Lottie官方：Lottie 官方地址
• bodymovin：GitHub 地址（安裝方法：https://www.uisdc.com/lottie-make-loading-animation）
  如若安裝不成功，可在下面的網址中下載其他版本插件：bodymovin版本地址：https://github.com/bigxixi/bodymovin_cn
• lottie-ios：GitHub 地址
• lottie-android：GitHub 地址

如何導出json動畫文件

打開 AE，首選項 – 常規，將允許腳本寫入文件和訪問網絡選項勾選上。

窗口 – 擴展 – Bodymovin，選擇好合成和保存路徑后，點擊 Render 導出 data.jason 文件，再把該文件交給 iOS 開發 （其他同理），具體如下圖：

這里設置選擇 Demo ，可以導出 html 文件，在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉換成圖形形狀。

導出文件：

在線測試結果：可以直接上傳 json 文件，可以提前知道動畫是否有問題，然后再交付給開發。

網址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切圖命名規范

1. 通用切圖命名：組件_類別_功能_狀態@2x.png

舉例：tabbar_icon_home_default@2x.png（對應中文：標簽欄_圖標_主頁_默認@2x.png）

2. 模塊特有切圖命名：模塊_類別_功能_狀態@2x.png

舉例：bill_icon_search_pressed@2x.png（對應的中文為：賬單_圖標_搜索_ 默認@2x.png）

3. 常用英文單詞表

標注軟件

現如今市場已有很多設計交互的平臺，如：國內的墨刀、藍湖、摹客等，國外的 Figma、invision 等，各自都有優秀的特點，既滿足交互需求，又能有標注切圖功能，選擇適合自己團隊的工具與開發一起協作即可。

1. Figma

支持 sketch 導入，Figma 也像 Zeplin 一樣，標注頁面間距與尺寸，并且支持各種圖片格式、尺寸、形態輸出，開發人員也有相應的代碼可用參考，分享鏈接即可。

2. 墨刀

支持 sketch 上傳頁面至客戶端，分享鏈接即可。支持多種切圖格式下載，開發人員也有相應的代碼可用參考，操作簡單清晰。

3. 藍湖

支持軟件 PS、sketch 上傳在線標注，在設計源文件上切好圖片，開發人員可在線上下載，且有相應的代碼可用參考，分享鏈接即可。

文章來源：優設

在日常的設計工作中，我們也許會遇到這樣的情況：作品缺少變化導致枯燥乏味；而變化太多又會顯得雜亂、沒有章法；這就對應了設計中統一和打破的關系，那么為什么統一和打破這兩種看似矛盾的關系，卻總是能同時出現在我們的設計作品中？如何更好的理解二者之間的關系并運用到日常的工作中去？希望本期內容能對大家有所幫助。

在設計中統一并不是所有元素1:1的一模一樣，它可以體現在：板式、配色、元素屬性、處理手法等等，那么為什么要統一？統一的目的是什么？下面我們具體來說：

統一：讓作品更整體

作品不夠整體，會給人一種信息散亂、沒有視覺焦點的感受；而將視覺元素進行“統一”，就能很好的解決這一現象，這無關乎技法的熟練與否，在我們的日常生活中就隨處可見：比如：我們的書本排版，會有統一的頁眉、頁腳、段落留白、文字間距等等，其目的就有讓文本內容在視覺感受上更像一個整體；下面我們看個設計中的案例：

如圖所示，上側案例給人的感覺比較雜亂，不夠整體，原因在于：元素與元素之間的關聯性不強，且視覺形態及色彩屬性各不相同，導致整體各元素之間的呼應不夠明顯，所以會給人一種不夠整體甚至雜亂的感覺。而下側案例通過在形態、色彩、屬性等方面的統一化處理，加強了每個單獨視覺元素之間的呼應，使得畫面更整體！

統一：讓作品更整潔

不管是在設計工作還是日常生活中，干凈整潔的東西都是更易于大眾接受的，在設計工作中，做好統一是最重要的一環，在此前提下，才能做好另一環“打破”！所以當設計作品出現亂的現象時，我們需要對其視覺元素進行規整及相應的處理，比如：

通過左右對比我們發現，很明顯右側給人的感覺雜亂無章，而左側干凈整潔、有條理，原因在于：

①、元素與元素之間并不是相互孤立的，而是在視覺上存在著一定的呼應關系，相互關聯，這樣畫面整體性也會更強。

②、視覺上將原本各不相同的形態以及色彩重新進行了統一處理，目的是通過減少視覺元素形態及色彩變化而進一步提升畫面的整潔。

③、視覺元素在物理關系以及屬性上也做到了統一，即統一元素與元素之間的間隔、形態、顏色等等。

下面我們再看組案例：

上圖中，相比而言案例二比案例一給人的感覺更整潔、干凈、也更像一個整體，原因在于：案例二中配圖的屬性做到了視覺上的統一，具體體現在：①、圖片的顏色屬性：統一藍色色相屬性；②、圖片的內容屬性：統一高端、仰視角度建筑屬性；③、圖片的留白屬性：每一幅配圖在視覺上都會有一些留白性質的屬性，給人的感覺很舒服。

所以：出于讓整體更整潔的統一，大多是在做減法或者合并的過程，目的是減少一些造成視覺整體雜亂的因素，比如：色彩雜亂、圖形雜亂、文字形式雜亂、視角角度雜亂、以及過多無關聯的視覺元素等等，統一的過程也是整合視覺元素的過程。

注意：設計中的統一并不是絕對的，而是相對的，如果所有的視覺元素、屬性都嚴格按照統一化去處理，那么就會滋生另一個問題：整體視覺太過平滑、缺少變化甚至會給人一種單調、枯燥的感受。那么在強調統一的同時，“打破”就是為了解決這難題的。

在日常設計工作中，打破是建立在統一基礎之上的操作，那么既然已經做好了統一，為什么還要打破呢？打破能為作品帶來什么？下面我們具體分析：

打破：提升作品視覺層次感

當作品過于統一時，很容易會給人一種單調、乏味、缺少層次變化的視覺感受，而在統一的基礎上做一定的打破操作，就能起到很好的解決這一現象的作用，那么什么是打破？舉幾個簡單的例子：

如上圖所示，圖①就屬于過于統一的表現形式，很明顯整體平淡、乏味，缺少視覺變化；而其他都是在統一的基礎上做了一些“打破”的處理，只不過各自切入點不同，下面我們逐一分析：

圖②：切入點是打破了一成不變的排列形式。

圖③：切入點是打破了一成不變的配色形式。

圖④：切入點是打破了完全統一的配色形式以及形態。

圖⑤：切入點是打破了統一的元素屬性值。

圖⑥：切入點是打破了統一的元素屬性。

以上這些雖然切入點都各不相同，但是目的都是通過打破過于統一的視覺現象，增加整體視覺變化程度，從而提升整體視覺層次感，也打破了呆板、乏味，增添了一些視覺上的跳躍性。

下面我們再看個設計中的例子：

如圖所示，上側案例屬于很好的貫徹整體統一的理念，而下側案例則是打破了固有的統一、卻也保留了大部分統一的屬性，通過兩者對比我們發現，其實單只看這一組案例：兩種表現形式都是可取的，只不過相比而言下側案例給人的視覺感受變化更多、層次感更強，所以相比而言給人留下的視覺印象更深刻。

上面說兩種表現形式都可取的前提是：單單只看這組案例，但是很顯然這組案例只是頁面的局部，如果整體頁面都如上側案例那樣嚴格的按照統一進行，那么頁面整體就會過于平淡、缺少視覺層次感、甚至主次不分明。

打破：劃分視覺主次

在現實生活中，具有差異化的人或實物會很容易引起周圍人的注意，甚至印象深刻、難以忘懷。在設計中亦是如此！其具體表現形式參考上圖①-⑥，因為打破過于統一就是在營造具有差異化的視覺元素，從而會很容易在視覺上形成先后、主次之分，所以就起到了一定的劃分視覺主次的作用。

注意：打破也不可盲目的進行，過于統一會單調、乏味、重復感強；而過于追求差異化也會出現雜亂、沒有章法的視覺現象。所以一定要結合實際情況靈活運用。一幅作品中大多情況下：打破的次數要少于統一，即作品整體絕大不多保留整體統一的屬性，通過局部打破處理提升整體出彩度，這樣容易給人一種干凈、整潔且不失視覺變化、層次感的感受！

不妨找一些優秀的網頁分析一下，是否很多優秀的設計作品都符合這一規律？

綜上所述，統一是為了讓作品有視覺條理性、更整體，而打破則是增加視覺層次變化，讓作品更出彩！統一和打破看似是兩個矛盾的名詞，實則在設計中是相輔相成的作用！不管是統一還是打破，兩者的切入點都是相似的，一般體現在：形態、屬性、色彩、大小、位置關系、留白等等。但是無論如何統一都是打破的前提，如果作品整體性都不夠，再一味的追求打破關系，只會讓作品越做越亂。所以一定要先做好統一，其次才是進行打破、改變。當然文中提到的只是一部分，希望大家能活學活用、舉一反三！

文章來源：站酷