一、導航的定義

牛津詞典上有對Navigation一詞在互聯網領域的解釋：

the way that you move around a website or the Internet when you are looking for information

翻譯為：你在瀏覽網頁時四處移動尋找信息的方式

也就是說用戶看到的，影響其尋找信息的因素都可視為導航。

二、為什么需要導航

交互上：

用戶在使用傳統方式閱讀時，所處的空間是單向的，只能向前或向后翻頁；

而在網頁領域，所有的內容都存放在各自的URL里，信息在多維度多空間里相互交錯，各有聯系，可跳躍的閱讀方式讓用戶很容易失去位置感。

試想一下我們在大型商場里暈頭轉向的場景，會常常抱怨其導視系統的糟糕，網站有過之而無不及。

業務上：

從潛在用戶想要了解某個產品時，導航就開始起作用了

影響點擊量：網站排名高低，搜索帶來的點擊量

影響轉化：網站的易用性，訪問者轉化為潛在客戶和客戶的概率

設計者創造易用的表單，展示有用的信息，建立流暢的交互，這些都要靠導航來引導用戶達到。

三、從信息構建模式給導航分類

1.內容

內容涉及到的東西很多，內容之間的相互關系也不確定，因此不同內容導航需要不同的導航模式

1）種類

不同行業，不同業務重點對內容的分類方式不同

種類可以是符合大眾認知，具有并列關系的信息，

也可以是按照設計者的意圖創造出的種類，并區分其優先級

種類導航的出現無形中建立了用戶心中對某類產品的預期信息架構，使其在瀏覽信息時更有方向性，例如在瀏覽一家服裝店鋪時，用戶在進入導航列表前就對種類有了預期，諸如男士上裝，男士下裝，女士上裝、女士下裝、配飾，包袋等。

2）字母

以字母順序排列信息。適用于信息量超大，且不存在主次、重要級關系的內容。常見于聯系人列表，地區導航，介紹人名，合作伙伴等場景。

3）自然屬性

以時間，地理位置等屬性組織信息架構。

時間：展示在一段時間內發生的事情，以時間為導航可以直觀地感受到信息的變遷，立體感更強。例如一個企業的發展歷史

地理位置：展示在不同地理位置的事件信息，空間感更強

2.層級

也叫做結構導航，根據信息的上下級關系、主體信息架構等因素將信息有序排列。分為全局導航和局部導航。

全局導航往往指頁眉和頁腳，存在于網站的大部分頁面，便于用戶隨時跳轉。 

頁眉：用戶進入網站關注到的點，將網站進行功能分類后，將導航文字放置在頁眉上

頁腳：此空間是為隱私和法律鏈接保留的，還會加上聯系方式，也有許多內容繁重的網站會把站點地圖放置在頁腳。

雅各布·尼爾森把全局導航在網站中的作用形象地比喻為機艙座位下的救生衣 ，你只要知道它哪 ，而不必時時關注它，需要時立即找到穿上即可。

局部導航是是更深層級的導航，不作用于全局，存在于特定的功能區，可分布在頁面各部分。

3.功能

業務上必要的一些功能入口，通常貫穿全局，例如很多網站的個人信息，用戶需要在大部分時刻都可直接接觸到該功能。根據用戶的心理模型，這類功能會存在于頁面的右上角。

4.搜索

用戶使用較多，也是最重要的導航方式之一。當帶有明確的目的性或無法通過內容，層級導航找到想要的信息時，用戶會在搜索框內嘗試輸入一些信息。

而讓用戶主動搜索會出現下面的情況：用戶無法清晰表達或錯誤地表達其想要搜索的內容，導致系統無法匹配上對應的信息，

為了讓搜索導航更有效地發揮其作用，出現了自動填充，模糊搜索，推薦搜索，搜索歷史，搜索糾正等一系列導航功能，這些功能都是為了想辦法將用戶引導到他可能需要的頁面上。

5.網站地圖

以類似地圖的樣式來展示網站頁面之間的層級關系，并提供相應的鏈接?？梢曅詮?，便于用戶找到想要的信息。

四、導航的常見樣式

1.文字與圖標

考慮到排版布局，樣式美觀，除了用文字本身的含義用作導航外，圖標也經常被用作導航，分為純圖標導航和文字+圖標導航，這里圖標的風格會很大程度上影響這個頁面的視覺效果

2.橫向導航

將導航文字橫向有序地排列，獨立性強，占用空間較少，可放置的導航條目有限，但這個局限性也可以成為優點，它要求設計師創造出簡短，易于理解，且滿足業務需求的標題。

當內容過多時會選擇在單個導航下放置下拉顯示二級導航，下拉顯示的二級導航可以很長或采用滾動顯示的方式，這種臨時的模態導航可以最大限度地利用到屏幕空間。

很多網頁的橫向頁眉導航會保持滑動時固定的樣式，便于用戶時時找到主頁面的入口。

3.豎向導航

占用空間較多，通常放置在頁面左邊位置，用不同的底色或分割線將其與主內容分開，內容文字一般采用左對齊，便于閱讀，導航層級過多時會采用點擊展開的樣式，上下滾動的常用交互也讓豎向導航容納的內容更多。

部分豎向導航是可隱藏或收縮的

4.混合導航

在擁有復雜信息的網頁中，會將橫向導航，豎向導航等其他樣式混合使用，

5.面包屑

面包屑導航是位于頁面頂部或底部的一行內部鏈接，在不同層級的鏈接之間用“>”分隔，可讓訪問者快速返回上一版塊或根網頁。許多面包屑導航都將內容最寬泛的頁面（通常為根網頁）設置為最左邊的首個鏈接，并在右側列出更具體的部分。

占用很少的空間并提供主導航實現不了的深層次定位功能。

面包屑的使用讓網站的結構更加清晰，強化用戶的心理層級模型，并實現跨層級跳躍

6.分頁與無限滾動

分頁顯示的內容數量固定，有時用戶可自定義內容數量，此外頁面上通常有當前頁，任意頁，上一頁，下一頁，首頁，末頁的鏈接。具有定位性，當用戶需要回到之前瀏覽過的某個位置時，可采用分頁的形式

無限滾動希望用戶只注意當前頁的內容且不能快速到達頁面的底部，適用于無法預測用戶何時能夠找到需要的信息的情況。在一些圖片展示，內容推送的網站上設計者不知道用戶想要的內容，同時也要展現網站內容豐富，資源庫深不見底的特質會采用交互上更簡單的無限滾動模式。

7.突出的版式

一些設計者想要用戶優先注意到的內容，會采用突出的版面設計，通過改變文字圖形的大小，顏色等與其他一般性內容形成對比或使用海報，彈窗等形式試圖引導用戶行為。

五、導航設計的建議

根據上面第三和第四點，分別從信息層和表現層給出導航設計的建議

信息層

1.信息結構盡可能扁平

多花一些時間去考慮信息體系結構，可根據首頁規劃全局的導航，首頁是用戶在網站中導航的起點，考慮如何讓用戶盡可能方便地從網站上的寬泛內容（首頁）轉到他們所需的更加具體的內容。

2.重視導航的順序

當同一級別的導航數量很多時，順序變的更加重要。根據用戶的認知習慣，開頭和結尾作為關注度（看到的）和保留度最高（剛剛發生的）的地方，其內容更加突出。

3.SEO優化

良好的網站導航結構可以幫助搜索引擎了解哪些是網站站長認為重要的內容，盡量用一些具體的描述詞語而非大而寬泛的詞匯，例如“產品”，“服務”。雖然搜索引擎的搜索結果是在頁面級別提供的，但它也希望了解頁面在網站這個更大層面上的角色。導航中關鍵詞的使用會影響其在搜索引擎中被搜到的質量。

4.創建網站地圖

用于顯示網站結構的一個簡單頁面，通常包含網站頁面的分層列表。如果在網站上查找頁面時遇到問題，用戶可能會訪問此頁面。此外搜索引擎也會訪問此頁面，以便使抓取范圍盡量覆蓋網站的全部頁面。

表現層

1.一致性

同一類型導航的視覺表現與交互操作在整個網站頁面中要保持一致，清晰一致的導航可以讓用戶預見每一步操作的結果。

2.清晰性

顏色與大?。何淖诸伾c背景顏色的對比，標題與內容的字號大小，這些最基本的元素直接影響導航的清晰度

留白與裝飾：與平面設計中原理一樣，留白讓網站頁面布局平衡，張弛有度；裝飾與留白相結合，讓導航表現得更精美，也有助于視覺分割

強調與弱化：有些導航起引導作用需要突出，有些起輔助作用需要弱化，強弱對比結合豐富了視覺層次，并讓導航起到它該起的作用

3.凸顯超鏈接

將可點擊的超鏈接文本與常規文字在樣式和交互上進行區分，常見做法有下劃線，文字顏色，加粗，鼠標懸浮變色。

4.在常規位置放置導航

網頁發展的幾十年讓用戶對網頁產生了一些常識性認識，例如用戶會在進入一個網站時去頁眉或側邊欄尋找主導航，盡量遵循這些常規用法。

5.導航數量不宜過多

無論是全局或局部導航，數目越多用戶處理和記住信息的難度越大，可以通過分組分層來提高信息瀏覽效率

6.側邊欄

側邊欄導航會占據一部分的屏幕空間，將其與主內容部分進行分割有助于用戶，例如用反差較大的背景色形成導航區與內容區

加入導航收縮功能，以便更好地利用屏幕空間，特別是在一些小尺寸屏幕上。

六、導航設計審查：

在做完網頁設計后可以根據瀏覽網頁的一般習慣，通過以下幾個方面對導航設計進行簡單審查

問自己以及團隊其他成員以下幾個問題

1.這是什么網站

2.網站有哪些主要內容

3.導航看上去是否像是導航，可點擊的

4.導航的名稱是否會引起歧義

5.現在處在網站的哪個層級

6.如何進退

7.具體的功能是否會在預想的地方出現

8.怎么進行內容搜索

借助工具

9.使用Google Analytics對網站的訪問情況進行回顧并進行一些評估

例如一些頁面的瀏覽量極低于預期或相較于同類頁面瀏覽差距過大，就要考慮是否是指向該頁面的導航出現了問題。

總結

導航的最終目的是簡化獲取信息的過程，具體以何種方式表達還需要取決于業務內容，但總體上要以用戶易接受的方式呈現。用戶若是能在獲取信息的過程中按照設計者所想的方式前進并感受到暢通無阻的快感，導航便是成功的。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

網頁中超過95%以上的信息都是通過文字的形式呈現。 然而，頁面文字并非毫無章法的隨意呈現。事實上，更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。

BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設計要求也越來越高，

接下來為大家分享一下我收集到的案例：

（以上圖片均來源于網絡）

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  更多精彩文章：

       ui界面設計之網站設計案例欣賞(一)

先來了解一下項目的背景。Conduira online是一個線上的教育平臺，為準備考試的用戶提供有用的工具和資源。這個平臺目前有一個側邊導航欄，上面有11個選項。后來由于平臺的變化，將主導航的選項縮減到3個——主頁、實習和課程。

導航的數量變少了，團隊又迎來了新的問題：是應該繼續保留側邊導航的設計樣式還是切換成頂部導航的樣式呢？

為了做出最合理的選擇，我們需要回答三個基本的問題。

主導航中有幾個選項？

在選擇導航時回答這個問題很重要。這里介紹一個有趣的的交互概念叫做視覺固定（Visual Fixation）：注意力一直保持在同一個地方。

在頂部導航中，一個視覺固定點通常只適合一個選項。然而，側邊導航上的單一視覺固定點可以同時容納兩個選項。

結果很明確。與頂部導航相比，用戶在一次視覺觀察中可以在側邊導航上查看和感知更多菜單選項。當然頂部導航也有自己的優勢，為每個菜單項賦予各自的權重，而不是讓它們的重要性被其他選項分散。

對于具有過濾選項或帶有二級菜單的電商網站，視覺固定的概念起到了非常重要的作用。因為在這些情況下，我們希望用戶能夠在單一的視覺點上盡可能多的選擇。

Tips：這里的選擇僅僅取決于界面上有多少選項。如果主導航的菜單項不多于5個，只需使用頂部導航，這樣能夠更好地控制用戶在整個平臺上的體驗旅程。

主導航與選項優先級的關系？

用戶在瀏覽網頁或App時會有各種各樣的瀏覽順序，其中一種就是「F型模式」。

看起來像這樣：

F型布局的特點是將注視力集中在頁面的頂部和左側:

• 用戶首先以水平移動的方式瀏覽內容區域，這個動線構成了F型布局的頂欄；
• 接下來用戶掃描頁面左側的垂直線，進行第二次水平移動瀏覽。隨著路徑越來越長，閱讀覆蓋的區域一次比一次短，構成了F型布局下面的部分；
• 最后用戶以垂直移動的方式瀏覽整個頁面的內容。

這種模式的含義是同一頁面上的第一行文本比后幾行文本受到更多的關注；每行文本左邊的幾個字比后面的文字接受度更多。

因此，在頂部導航中最左邊的選項比其他選項具有更多的視覺權重，因為它位于主要視覺區域，優先級更高。

側邊導航采用了垂直移動，這是用戶瀏覽網頁的一個自然方向，但是選項優先級的排序是個限制。當選項的優先級相同時，可以使用側邊導航，這樣用戶就可以完整瀏覽列表并確定對他們重要的內容。

是否考慮使用二級導航？

如果是的話，可以考慮利用以下兩種設計樣式：

水平導航——在頁面頂部設置一個主導航，在主導航下面設置二級導航進一步來區分內容。

側邊欄——在頂部設置一個主導航，然后在側邊設置一個側邊欄菜單來處理其他內容。

總結

頂部導航和側邊導航之間的選擇實際上取決于以上三個基本的問題。

另外由于現在的設備有了更大的屏幕尺寸，如今許多設計趨勢已轉向側邊導航，因為它看起來更干凈并優化了更多的屏幕空間。

最后將導航的選擇歸結為兩點：

• 主導航包含的選項數量;
• 是希望用戶根據優先級瀏覽項目，還是希望用戶可視化地瀏覽并根據其偏好選擇項目。

文章來源：優設    作者：Clip設計夾

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

在這個項目中，主要任務是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設計一個全新的品牌電商網站。

新電商網站最主要的目的是吸引顧客前往線下店鋪選購商品，同時也希望通過快遞和門店自提的方式來完善線上銷售流程，拓展消費群體。

該網站需要鞏固品牌核心業務價值觀：傳統，有趣和創意。該網站還需要通過強調其龐大的庫存體量和手工精選商品來將 Jeffrey’s Toys 和其他電子商務零售商區分開。

該網站的主要業務目標包括：

• 能快速定位商品

• 每一個商品都有單獨的詳情頁

• 用戶能成功購買一個或多個商品

• 為爆款商品引流

用戶分析

1. 用戶畫像

誰才是這個網站真正的用戶？當我接到這個任務的時候，客戶已經繪制出了3個用戶畫像，每個用戶畫像都有特定的需求和痛點。

△ 客戶繪制的三個用戶畫像

基于三個用戶畫像，我確定了該網站要滿足的用戶需求，同時也考慮了Jeffrey’s Toys的需求。

確定的主要需求是：

• 通過清晰的商品組織分類來提供流暢的電商購物體驗

• 通過商品搜索使用戶能夠快速找到想要的商品

• 通過實用的商品推薦來體現 Jeffrey’s Toys 的專業以及龐大的庫存

• 通過與用戶建立品牌關系來樹立信任

• 通過產品細節信息來確保用戶選購合適的商品

• 通過商品評論來輔助用戶作出消費決策并允許用戶進行商品反饋

• 通過的下單結賬流程簡化購買行為并節省用戶時間

2. 競品分析

為了獲得啟發，我確定了3個主要競品，特別是舊金山的精品玩具店；還有3個玩具零售市場的間接競品。直接競品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競品分析了 Lululemon 、Ikea 和 CVS 。競品分析的目的是比較并找出這些電商網站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機會。

競品分析最重要的收獲是了解了不同的電商網站的商品選擇模塊以及網站整體的布局。這些信息有助于鞏固我第二階段的研究。

△ 比較直接競品和間接競品的特征

2. 思維導圖

在完成競品分析之后，我把這個項目中用戶的需求和客戶的需求列成了長長的信息清單。之后我又通過思維導圖來理清了在這個項目中用戶的需求和客戶的需求。思維導圖幫助我將信息組織成更清晰的想法，同時在各個想法之間建立層次結構關系。

△ 用來理清信息和想法的思維導圖

信息架構

接下來我通過卡片分類法來構造網站的導航系統，卡片分類法是一種利用人們現有思維模型的研究技術。在構造導航系統時，我了解到94種商店中最暢銷的商品庫存信息。擁有如此龐大的商品庫存，就很有必要通過清晰易懂的方式組織、分類庫存信息，以便用戶能夠快速的找到他們想要的商品。

1. 卡片分類

△ 卡片分類的初期階段

開放式卡片分類：我要求9位參與調研的用戶通過他們自己覺得合理的分類規則將94種商品分類，然后給每個類別加上他們認為能夠準確描述該類別的標簽。這樣做的目的是對于網站潛在的商品分類方式及類別名稱有一個大致的了解。

封閉式卡片分類：基于開放式卡片分類的結果，我從最常見的類別標簽中創建了13個預定類別。然后，我進行了封閉式的卡片分類，我邀請了20位參與調研的用戶將商品逐一分類到我之前預定的13種類別中。封閉式卡片分類有助于讓我在進行設計之前能夠清楚判斷這些類別是否符合大部分網站用戶的分類邏輯。

△ 通過卡片分類得到的13種商品類別

2. 站點圖

根據卡片分類以及競品分析的結果，我繪制了網站的站點圖來明確整個網站的框架結構。這是為了確保所有產品都放置在用戶期望的位置，同時使購物體驗更加直觀。

△ 站點地圖

3. 系統架構圖

為了對用戶將會如何瀏覽網站有一個全面的概述，我繪制一張系統架構圖。這樣做的主要目的是為了了解網站應該給用戶提供什么功能以及功能拓展的廣度。我還通過系統架構圖來探索電商網站和實體店鋪之間的聯系。

△ 系統架構圖演示用戶將會如何瀏覽網站

4. 用戶流程

在確定了我需要給用戶提供的體驗「全局」之后，我為每一個用戶畫像創建了不同的用戶流程，通過不同的用戶流程來使購物體驗更加符合他們的需求。構建用戶流程的目的是確定每個用戶為了實現各自的預期目標經過的頁面和操作步驟。這不僅能使我專注于每個用戶的操作，也使我能夠在設計網站的時候將功能拆分，以便給用戶提供更佳的購物體驗。

我繪制的第一個用戶流程是關于用戶畫像是 Jenny 的。Jenny 最主要的目是為自己的孫子購買初級魔術玩具。Jenny 的用戶流程（如下圖所示）表明了她是如何搜索初級魔術玩具，以及為了成功購買她可能采取的幾種不同路徑。

△ Jenny 的用戶流程

Debbie 和 Jenny 都希望能有一個的下單結賬流程，所以很有必要在用戶流程中繪制出下單結賬流程。下圖的用戶流程顯示了Debbie在選定一個特技自行車之后該如何進行結賬下單。通過允許她登錄自己的帳號，自動輸入她的結賬信息來簡化她的結賬下單流程。

△ Debbie 的用戶流程

開發階段

1. 草稿

在我整理了前期獲取的所有信息之后，我就開始著手設計網站?；谥罢沓鰜淼挠脩袅鞒虉D，我開始繪制幾個主要頁面的草圖，同時快速思考出幾個不同的網站布局方案。之后我邀請3個用戶參與了用戶調研，以驗證這些方案是否同時滿足客戶和網站用戶的需求。

△ 網站首頁和品類頁面的初稿

2. 線框圖

基于用戶對草圖的反饋和我個人的想法，我開始使用Figma來繪制線框圖。整個過程中，根據優先級不同，優先考慮最能滿足網站用戶的功能。

△ 網站首頁和產品詳情頁的線框圖

原型制作

1. 主頁

首頁我盡可能的保持簡潔，避免用戶進入網站時被過多的信息干擾而不知所措。

首頁放置了全局導航、輔助導航和搜索欄，方便用戶快捷的找到自己想要的商品。首頁還放置了新品推薦，因為新品推薦能夠展示品牌豐富的庫存，同時能為用戶提供有用的購買建議。我想通過介紹 Jeffrey’s Toys 豐富的歷史來樹立用戶品牌聯系，所以在首頁我還放置了「關于我們」部分，用戶點擊還可跳轉到具體的介紹頁面查看更多關于品牌故事的信息。在頁腳，我放置了其他的用戶可能需要的信息。除此之外，我還將用戶交流系統放在頁腳，這樣是為了獲得用戶想法并在店鋪進行活動時通過用戶參與提高店鋪活動氛圍。

2. 商品類別頁面

當用戶點擊商店按鈕或者是某個類別之后，用戶將會前往一個列出了該類別下所有商品的商品列表頁。有個用戶畫像想要給他的孫子買一個合適他孫子年齡的玩具，所以頁面需要一個品類篩選器，同時支持商品按照不同的屬性例如年齡、價格和品牌分類也很重要。除此之外，我還通過面包屑導航來方便用戶定位頁面位置。

△ 商品類別頁線框圖

3. 商品詳情頁

在商品詳情頁，我希望能夠提供盡可能多的商品詳情來確保這個商品是用戶想要的。

在頁面下方，網站會基于當前商品給用戶推薦其他相似商品。在商品詳情頁，產品評論區占了很大一部分，因為用戶可以在產品評論區反饋商品信息，便于樹立用戶信任，同時用戶能夠通過其他用戶的評論來作出更明智的購買決定。為了簡化下單流程，我設計了一個購物車預覽頁，用戶在購物車預覽頁可以預覽商品信息，用戶每次將商品加入購物車后都會出現購物車預覽頁，在購物車預覽頁面，用戶可以很方便的點擊「選好了」按鈕而進入結賬下單流程。

△ 商品詳情頁線框圖

4. 購物車預覽頁

當用戶點擊「選好了」按鈕或者是購物車按鈕，用戶將會進入到一個如下圖所示的購物車預覽頁。這是結賬下單流程的第一步，用戶在購物車可以管理他們所選的商品，作出合適的調整。用戶在下單時，可以選擇到店自提或者是物流配送，設置到店自提是為了引導用戶去 Jeffrey’s Toy的線下店鋪，同時降低運輸成本。

△ 購物車預覽頁線框圖

5. 結帳頁面

客戶提供的三個用戶畫像的主要痛點之一就是想要有一個的結賬流程，所以我得確保結賬下單體驗要盡可能的流暢。作為一個回頭客，用戶可以選擇登錄自己的帳號，并自動保存物流信息和支付信息。我決定在一個頁面上承載全部的結賬流程，這樣方便用戶在結賬流程中任何時刻都能編輯信息。頂部的進度欄顯示了下單結賬流程有多少步，用戶當前在哪一步以及用戶還剩下多少步驟。

△ 登錄頁

△ 下單頁

△ 訂單查看頁

6. 其他畫面

我還創建了一些其他頁面，例如訂單確認頁面。訂單確認頁面明確告知用戶結賬流程已經完成了，用戶還能在訂單確認頁查看有關訂單的其他信息，以供參考。

我創建了一個店鋪聯系頁面，當用戶在網站找不到想要的商品時，可以在店鋪聯系頁面查詢線下店鋪商品情況以及店鋪的營業時間、位置和聯系電話。

除此之外我還創建了一個「關于頁面」用來著重強調 Jeffrey’s Toys 與其他電商網站例如亞馬遜的區別。我還在這個頁面介紹了Jeffrey’s Toys 長達60年的獨特歷史，以增強用戶對于品牌傳統、有趣和創意的商業價值的印象。

△ 訂單確認頁

△ 聯系方式頁

△ 公司介紹頁

7. 可用性測試

在完成線框圖之后，我就開始繪制網站原型以便進行可用性測試。這使我能夠評估用戶將會如何與網站進行交互，也能讓我評估網站是否滿足了用戶的基本需求。在進行UI設計之前，通過中保真原型進行可用性測試來獲取潛在用戶真實、關鍵的反饋是很有必要的，可用性測試還能鞏固網站的功能需求。

我邀請了4位用戶進行可用性測試，為了讓他們吻合用戶畫像中的用戶特征，我指定了三種用戶場景來讓他們完成測試。這三種用戶場景包括：

• 您需要為您的女兒購買一個玩具。您會怎么查找商品并完成購買。

• 您可以通過什么方法知道 Jeffrey’s Toys 下個月將要舉辦的店鋪活動。

• 當您在網站上沒有找到您想要的玩具時，您將如何查詢并購買。

這些是我通過可用性測試得到的用戶反饋：

• 總體而言，用戶能夠輕松地找到想要的產品和信息

• 在結賬流程中，促銷活動部分會分散用戶的注意力

• 部分用戶不想通過電話來查詢商品信息，需要提供其他的查詢方式。

• 部分用戶覺得前往線下店鋪的引導部分還可以增強，目前的引導不夠。

△ 可用性測試得到的反饋

8. 后續步驟

這個案例研究展現的只是電商網站設計的開端。后續我將會繼續進行可用性測試，并進一步迭代我的設計。如果有更多的時間，我將會著重探索更多從網站引導用戶前往線下店鋪的方式。我也將會繼續豐富網站頁面并將Jeffrey’s Toys的視覺風格融入到網站中。下圖展示了我最初設想的UI設計風格。UI設計我希望秉持簡潔、創意、傳統的設計理念。

△ 首頁

△ 商品分類頁

△ 商品詳情頁

編輯總結

本文以玩具購物網站這個小案例，清晰地記錄了一個較為完整的產品設計流程。不論是設計方法，還是記錄方法，都可以借鑒運用在工作、匯報和作品集上。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

今天分享一個很多設計師頭疼已久的問題，關于網頁響應式布局原理和設計方法。文章主要包含三個部分：

• 響應式頁面是什么
• 響應式布局的規則
• 響應式的設計流程

所以廢話不多說，我們直接進入正題吧！

響應式頁面是什么

在過去，網站通常就是為了電腦大屏幕展示而設計，如果用手機訪問，只能在巴掌大的屏幕里看縮小版的頁面。雖然還有手機專供的 WAP 頁面，但因為太簡陋也無濟于事。

隨著智能手機、3G、4G、HTML5 的普及，使用手機訪問網站的人越來越多，為了讓用戶在手機上看到更合適的布局，且兼顧開發的效率，響應式的概念就被提出了。

通俗解釋，就是通過一套代碼，可以無縫匹配符合電腦、平板、手機預覽效果的前端技術。比如下方 Nike 官網，就是應用了響應式設計后在不同客戶端、分辨率下的效果。

雖然響應式的應用越來越廣泛，但是從零開始去寫一個響應式效果的網站對于程序員來講是非常復雜的，因為當中包含了大量的邏輯、判斷、適配內容。

所以，今天市面上看見的響應式網站，多數使用了一些開源的代碼或者框架。而應用最廣泛的，就數 Bootstrap 了。

之所以提這個，是因為既然開發使用了別人寫的框架，那么對于我們的設計稿也就上了緊箍咒，我們需要根據框架的要求來設計界面，這會稍后具體解釋。

還有個問題，就是為了實現平板、手機和電腦不同的預覽效果，并不是只有響應式布局一種技術，還有另一種技術 —— 自適應。

通俗點說，自適應就是為不同客戶端分別提供一套獨立的前端代碼，和響應式使用一套代碼適配多種客戶端不同。

響應式適合應用在一些簡單的官網、展示類頁面，展示的內容大致相同。而自適應適合應用在需要在不同客戶端類型有較大差異的網站，這樣只使用一套前端代碼就完全行不通了。

比如愛奇藝的官網，為了符合用戶體驗，在移動端網頁布局中精簡替換了大量的內容，和電腦版已經沒有太直接的聯系了。

兩種做法并沒有好壞之分，只有適不適合項目之別。了解了它們的不同，我們就可以進一步學習響應式的規則了。

響應式布局的規則

響應式布局的規則并不是特別復雜，只要注意兩個問題：

• 分段響應規則
• 組件寬度適應

1. 分段響應規則

敲黑板，響應式的響應，面向的核心對象是瀏覽器窗口的寬度，而不是設備類型。所以打開使用響應式的網站，我們通過改變瀏覽器的寬度，就可以看見不同的展示效果，比如下圖的星巴克官網。

我們可以發現，瀏覽器寬度每達到一個數值（Breakpoint）的時候，頁面的排版和樣式就會發生明顯的變化，而這就是響應式設計最重要的功能 —— 分段展示。

也就是說，響應式規則就是為頁面分配不同的寬度區間，每個區間有各自展示的樣式，用來應對不同的場景和設備類型，常見的適配區間大致如下：

包含圖片截圖 320-800 ：移動端收集屏幕 800-1200：平板或上網本屏幕 1200-無窮：一般的電腦顯示器

面對分段式的布局、樣式變更，我們就要關注到底發生了哪些變化?？偨Y起來，可以簡單的歸納成三種組件的調整：內容增減、布局調整、樣式調整。

第一種，內容增減。即部分模塊在不同的分段內會有顯示和隱藏的狀態，尤其是一些網頁端的內容覺得在小屏幕上展示會太多了，就在小屏幕場景中隱藏掉。

第二種，布局調整。主要是模塊的排列和順序發生變化，常見的就是模塊一行的列數發生改變。

第三種，樣式變更。即針對不同的分段設計完全不一樣的樣式，最多應用在導航欄的設計中，會為最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 樣式。

所以，歸納起來，就是頁面針對不同的分段展示不同的結果，即頁面中的組件觸發了對應的變化類型。每個組件都可以應用不同的變化類型，而無需進行統一。

2. 組件寬度適應

分段式響應，是響應式布局的第一層邏輯。而在觸發關鍵值（Breakpoint） 之間的區間，我們拖動窗口的寬度，會發現組件的寬度也隨之改動，這就是 —— 組件寬度適應。

組件寬度適應在手機 UI 的適配中非常重要，即完成不同屏幕寬的手機適配所應用的邏輯，所下面我們簡單講講它的規則。

組件的寬度適應模式主要有兩種類型，一種是容器寬度適應，一種是容器比例縮放，比如下面的圖例。

容器是一個比較抽象的概念，類似設計軟件中的編組，它集合了所有下級元素，但本身并沒有實際的內容和樣式。在響應式規則中，下級元素并不會和這個容器等比變動，出現下面這種錯誤的效果。

正確做法是會定義下級元素針對父容器的響應方法，做到容器變更的同時其自身的顯示也是合理的。比如相對容器左右間距一致、對齊方向一致、尺寸固定等設置。

而這種規則的設置，就是 Sketch/Figma/XD 中的響應式設置功能。只要設置得當，就可以獲得一樣的寬度適應效果。

如果對軟件響應式功能了解不全面的同學，就可以自己多搜索一下對應的說明，我就不在這里過多的展開了。

再總結一下，響應式的規則就是頁面組件先遵循當前分段展示的布局效果，并在這個區間內支持小范圍寬度的變更和適應。

響應式的設計流程

響應式設計是一種源自技術的概念，而不是單純的設計風格、方法，所以設計響應式設計其實就是 「面向編程設計」。

設計界面要吻合編程的真實方法和需求，而不是根據我們想怎么做就怎么做，所以整個流程不能只站在設計師自身的角度考慮，而要和前端程序員緊密溝通，首先確定響應幾個寬度區間，以及它們對應的數值分別是多少。

然后我們就要完成對應數量頁面的設計，因為前面我們說過，分段響應規則中會有明顯的樣式變動，這就要求設計師是一定要給出設計示例的，而不能依靠口頭描述或程序員自由發揮。

完成這些設計稿以后，我們再進一步確定同一個區間內，組件的寬度適應規則是什么樣的。多數情況下，這個階段使用口述就可以，如果規則比較多，那么就可以在標注階段把你要實現的效果記錄上去即可。

全部設計稿和規則都溝通完畢以后，才進入切圖導出的階段。要提醒一次，在一些特殊的情況下，響應式的背景切圖會和普通頁面的背景切法不一樣，盡可能讓前端程序員檢查一遍導出的文件。

只要根據上述的流程，在遇到不確定或者不清楚的情況，就和前端程序員做溝通，那么很快就可以將項目輸出出來。

結尾

響應式這個概念雖然高大上，但并不是任何項目都要無腦往上套的。因為框架規則上的限制，導致我們很難在響應式頁面中使用一些特別復雜、高級的視覺樣式，導致最終呈現的效果往往非常簡單或者過度依賴圖片的質量。

所以，如果在功能較為復雜或需要復雜視覺支撐的網頁中，就可以選擇應用固定頁面內容寬度的設計來完成。

文章來源：優設    作者：超人的電話亭

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

   藍藍設計的同事們，在積累了一定經驗的同時，也在不斷的學習和豐富關于網站及數據可視化的表達方式，搜集資料，作為大屏及數據可視化界面設計資料的參考，分享如下：

希望這篇文章可以幫到您！

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

——-- 網站ui設計 --——

（圖片均來源于網絡）

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

    更多精彩文章：

編者按：這是 UI 設計師 Diana Malewicz 的第二篇 UI 設計分享。這一次，她要設計的是一個控制面板的界面，如何控制不同UI元素的平衡，如何從零開始構建，相當值得學習~

歡迎來到我的「UI設計指南」第二篇！如果你對于我的第一篇文章印象不錯的話，那么這一篇應該也會合你胃口：

當然，請注意一點，我創建 UI 界面的過程中，繞過了通常 UI 和產品設計應該有的「用戶調研」——「用戶研究」——「體驗分析」這樣的前置步驟，而是直接開始創建干凈、一致的 UI 界面。在真實的設計項目當中，開頭的這些步驟是無法忽略的！

基本思路和低保真線框圖

這一次我們要設計的是儀表盤界面。那么我們從基本的想法開始。

這一次，我們將會設計一個服務于醫療行業的控制面板（實際上，這個設計的初衷來源于我的姨媽，她是一名醫生，不僅要治療病人還要處理大量的文書工作），而整個設計我將會在 Sketch 中完成。

通常，我會從一個非常低保真的線框圖開始。我會創建一系列的矩形線框，然后將他們按照需求和大小進行排列，直到最終滿足我的想法為止。我選擇了一些隨機的、但是相近的色彩，確保我能看清位置就可以了。

然后我針對哪些內容在哪里顯示，進行了基本的說明。

這就是一個非常原始的界面框架了。

將要分析的競品排了個期，從最難最不熟悉的開始。為什么從最難的開始，可能是個人習慣吧，吃掉最難的那個，后面就會更上手。突然想起之前讀的一本書「吃掉那只青蛙」，很不錯的一本書，有時間去溫習下。

一個產品，其實會有很多功能點，有核心的主要功能，也有一些輔助功能，也會有一些讓你忽略，但關鍵時刻很需要的應急功能，而這些點都需要去整理出來。

分析前-熟悉產品

這一點很重要，要先熟悉產品。如果對產品都不熟悉，那還是先不要做競品分析。因為很難判斷競品的功能和風格是否也適合當前產品，因為對產品的不熟悉，會產生誤判。

當然，產品的目標人群，產品定位，適用范圍等等，都會影響產品分析。

所以，花時間熟悉自己負責的產品，是不能跳過的。

開始前的準備

1. 制定時間規劃

最好事先做好時間規劃，可以有一整塊的時間，這樣分析產品時，思緒也會比較完整和連續，可以更專注。計算大概分析一個產品需要花費的時間，最好不要用零碎時間來做，這樣只會增加時間上的代價，也會增加挫折感；

2. 確定分析的目的

在「競品分析」中，想要得到的結論和重點是什么。比如重點可能是產品的報表功能、產品的代碼審核功能等等，目的的確定能讓分析更有針對性，減少干擾。無目的隨意分析，得到的結果也會是零亂不堪，最后只是在浪費時間。

3. 尋找幫助者

每個產品，都有其不一樣的特性和產品邏輯，你不一定能夠完全 cover 到，甚至有些點就是比較難理解的，特別是偏技術性的名詞，這時若有技術同學的幫助，就會如虎添翼。所以最好可以事先找一位產品相關的技術同學，詢問這段時間是否有空，幫助你解答一些問題。

個人建議：能夠在網上查到的資料，就不要先問人，除非時間成本特別高。一方面也是提升自己解決問題的能力，另一方面，也是節省彼此的時間。對方愿意幫你解決問題，不代表你要把所有問題一股腦倒給他，自己了解后再問，也是對對方的尊重，大家的時間都同樣寶貴。

4. 其他tips

如果是內部公司產品，提前確認是否需要權限，提前申請好，減少正式開始后，還要等待審批時間。外部產品可以提前找好網站，可以咨詢的客服入口，如果是付費競品，咨詢是否可以向財務申請報銷等等。

好，現在正式開始吧！

1. 像個用戶一樣去使用產品

很多時候，設計師的職業病，會讓我們過多注重視覺享受，而忽略作為用戶，想要的有時候只是功能可用。今天不管你把「掃一掃」功能做得多美，美得像個藝術品一樣，可是當掃碼付款的時候，怎么也掃不出來，那種站在店家前面忐忑不安，怎么也無法完成付款，后面一堆人等你，你仿佛聽見后面其他顧客竊竊私語地討論著發生什么事情。那種場景我相信你不想經歷，同樣我們也不應該讓用戶來經歷。

我的項目主管，一直都有提醒我，要像個小白來使用和設計我們的產品。這句建議，也一直在提醒著我。如果站在高姿態來俯視用戶，我們就很難真正的「懂」用戶，進而很難設計出真正滿足用戶需要的產品。

這是競品分析，但是我們也需要轉換自己的角色，變成用戶。這樣能更明白究竟競品帶給用戶是便利，還是麻煩。有時適時抽離「設計師」的角色，會讓你更能去體會用戶的感受。

所以，先去用這個產品吧，然后才會有然后。

2. 如何去使用競品

一個產品的使用，總是有它的使用場景，手機端的就更多樣了，簡直無所不在。B 端產品可能會相對少，一般是在辦公場景或是特定場景。

可以像個編劇一樣，給自己寫點劇本，加點情節，塑造一個角色，假設競品是電商方向，你可以想像，自己是一個剛畢業的社會新人，你可能沒多少錢，你可能剛拿到你人生第一桶金，你想買件衣服犒勞自己，或許你會是數碼控，你關注已久的佳能單反在雙 11 中有優惠等等，然后再去預想接下去的情節，在購物方面會考慮的問題，或許是好用，或許是有趣等等。

也可以做任務式去使用產品，比如以電商為例，任務可以是買件喜歡的衣服，從搜索產品，到找到喜歡的衣服，添加購物車，提交訂單，等待發貨，收貨，確認收貨。這一個完整的流程走下來，就會體驗產品功能是否好用，搜索結果是否符合預期等等。

3. 記錄

使用產品的過程中，會遇到很多情況，有些是可預期的，有些是不可預期的。有些讓人覺得很好用，有些卻會讓人受挫。將這些情況都記錄下來，有助于分析產品的可用性程度和滿意度。

• 愉快的：可能是一個友好的提示，減輕你的認知負擔，也可以是一個貼心小 loading 動畫等等
• 受挫的：點擊沒有反饋，提交后沒反饋，不知道執行成功與否等等
• 難以理解：產品中專業名詞太多，沒有附帶解釋和幫助文檔，完全不知其所以然
• 產生誤解：以為是 A，結果是 B
• 一臉懵：頁面太亂，不知從哪里下手

上面這些只是舉例說明，在競品當中可能遇到的一些問題，也可以去反思自己的產品是否也會這樣讓用戶感到困惑。有時候，太熟悉自己的產品，會自認為產品很完美，會理所當然認為「大家都這么認為」……

記錄問題、原因，感受并截圖為證（有必要可錄屏），后期可追溯。寫得越詳細越好，后面整理的時候會更清晰。

4. 各個擊破-功能了解

在熟悉整個產品后，就需要對產品的各個功能進行分析了解、梳理。了解競品的核心功能是什么，核心功能在解決用戶什么問題，是否真的解決了用戶的痛點，其他功能又在整個產品當中充當什么樣的角色。

將競品的功能與本產品功能對比，不只是對比有無，更進一步地去想，為什么有這個功能，為什么沒有這個功能，有或沒有是否會提高用戶的使用效率，用戶的留存，用戶的體驗等等。

功能多不代表好，如果功能不能給用戶帶來益處，其實它的存在只是增加開發成本而已。

整體總結

其實競品分析中，最難的是總結歸納。做了一堆的分析后，結論是什么呢，這個結論如何寫呢？

可以先從設立分析目的開始，找到中心軸線，然后再慢慢延展開來。在要做總結報告時，你會欣喜地發現最初設立目標是多么的重要。

文章來源：優設    作者：箴鹽設計

互聯網時代的人們早就受夠了信息爆炸，我們每天都會經系統推送、應用通知、微信、電話、短信等各類渠道收到大量消息。有多久你沒有查收自己的郵箱？就算打開郵件，又有多少推薦內容讓你有興趣進一步了解？是 EDM 老了沒用了？真正的原因，可能是我們一開始就錯誤地忽視了 EDM 設計。

對于 95 后以及更年輕的群體來說，EDM 確實是個上了年紀的概念。EDM（Email Direct Marketing）也叫 Email 營銷、電子郵件營銷。企業向目標客戶發送 EDM 郵件，建立同目標客戶的溝通渠道，向其直接傳達相關信息，用來促進銷售轉化。

這個起源于上世紀 80 年代中期，正式誕生于 90 年代的早期互聯網產物現在已經三十多歲了。時至今日，EDM 早已成為了全球公認的網絡營銷重要方法之一，其卓越效果為互聯網人數十年的實踐所證實。但 EDM 在我國的應用還處于非常低級的水平，不僅沒有系統的理論，在實踐中也存在許多誤區。

在這樣一個重視審美與強調更新及時的時代，EDM 郵件樸實無華的外表與「一旦發出就固定呈現」的內容特質顯得有些格格不入。作為用戶體驗設計師，我們可以做什么讓 EDM 不落伍呢？

避免成為垃圾郵件

首先，我們可以在設計層面上避免 EDM 郵件被郵箱軟件識別為垃圾郵件，不帶敏感詞語或內容、淡化商業廣告色彩、減少數字與附件使用都有助于降低被郵箱系統屏蔽的風險。我們更可以在全量發送前，對指定郵箱進行小范圍測試以確保郵件發送成功率。

其次，從其歷史來源來看，早期的 EDM 來源于垃圾郵件，這使人們對其本能地缺乏好感，存在排斥心理。因此 EDM 的節奏和時機必須做好控制，對郵件發送的各類數據做好統計，掌握用戶的閱讀習慣，能更好地提升郵件的打開率。

保持最佳郵件格式

郵件內容需要設計為一定的格式來發送，常用的郵件格式包括純文本格式、HTML 格式和 Rich Media 格式，或者是這些格式的組合。一般來說，HTML 格式和 Rich Media 格式的電子郵件比純文本格式具有更好的體驗效果。但 Rich Media 格式的電子郵件易造成郵件過大，并且無法確保用戶在客戶端均能夠正常顯示，所以在設計時我們優先選擇 HTML 格式郵件。

確保跨端體驗

與網頁不同，我們無法針對不同設備做郵件內容相應的適配設計，兼顧設備特性的通用模版也就成為了設計時的必要關注點。對用戶來說，一封郵件閱讀體驗很差，那么無論郵件的內容多么精彩、多么吸引人，最終的結果也可能只會被丟棄在一邊。因此，我們通常會按照移動端尺寸對郵件界面進行設計，注意字體大小、最佳尺寸以及鏈接按鈕的大小等。

除此以外，郵件中鏈接的定義也應得到我們充分的重視。由于郵件中的鏈接我們同樣無法預先針對不同打開設備進行單獨編輯，在有條件的情況下我們可以對鏈接所跳轉的頁面進行響應式設計以確保高質量的跨端瀏覽體驗，或者我們也可以采用默認跳轉路徑而后重定向的傳統方式。

與「我」緊密相關

EDM 營銷與一般的營銷方式最大的區別是：EDM 是一對一的溝通，讓用戶感覺到尊重，讓他感覺到這是為他所建立并且是他所獨享的溝通方式。在標題、正文的文案上強調「我」，在內容上也應如此。用戶在意什么，我們就發送什么。把握住用戶關注的信息，幫助用戶收集支持 TA 做決策所需的信息。當我們發送郵件給用戶，給予其操作行為的反饋或提醒時，不要浪費這最好的營銷機會。優先提供給用戶與之行為或特征相關的服務與幫助，其次通過個性化服務或產品推薦促進購買或注冊轉化，有助于我們將營銷機會轉化為實際銷售成果。

兼顧質量和效率

做好個性化對 EDM 內容模型要求頗高，但從設計角度講，我們完全可以以原子設計思維實現郵件內容模塊的低成本創建與復用。以通用設計模塊為「殼」，內容與組合規則為「核」，快速響應 EDM 的運營需求。

以上 5 點就是我結合近期項目經驗所得。EDM 雖老，但設計可以讓 EDM 老而彌新。祝經你精心設計的 EDM 郵件，一經發出，封封有回應

文章來源：優設    作者：魚子醬聊設計

這幾天在工作中處理了一個歷史遺留問題：彈窗適配，幾經折騰終于落定發包。于是我也趁著這個機會把彈窗體系梳理研究了一遍。

我們常見的彈窗有對話框，提示框，有時候在需求溝通中經常會聽到產品同學說，給這里加個彈窗，那里加個提示框吧。實際上，這個彈窗到底該不該加？這個彈窗承載的是提示說明文字內容，還是需要引導用戶下一步操作？接下來我們從彈窗的屬性來聊聊我們的彈窗到底在什么時候加比較合適？用什么形態展示體驗會更好？

彈窗體系：模態與非模態

模態彈窗：是指在用戶任務中，終止了用戶的上一步行為。也就是說，這個模態彈窗必須要用戶操作才可以進行下一步動作。所以在產品設計中，我們通常會用模態彈窗引導用戶去做我們要他做的操作。

常見的模態彈窗有這幾種：對話框、動作欄、浮層。

對話框：對話框主要是給用戶提供選項、相關的操作。另外，在一些對話框中，也可以展現圖片、頭像、步驟圖、其它輸入項等。

動作欄：常見的動作欄一般會出現屏幕下方，比如選擇某個內容時候，出現的選擇。

浮層：彈出窗口，浮動于頂層窗口，氣泡。

非模態彈窗：是指不強制用戶操作，他的作用相當于內容信息提示，他的出現不打擾用戶的當前操作，并且有時間限制，在一定時間里能自動消失。比如「xxx 功能已更新哦」，這種提示是不需要用戶點擊操作，讓用戶看到就可以了。

常見的非模態彈窗有這幾種：toast/hud、snackbar、notice（通知）

toast/hud：iOS 用戶更習慣于在中間感知反饋信息，通常在信息提示完 3 秒左右后會消失，安卓通常會出現在屏幕頂部或者下部，不會遮擋主體內容。需要注意的是 toast 只有文字，hud 是可以帶有圖標的。

snackbar；可以理解為加強版的 Toast

notice：系統消息、通知推送，也是不干擾用戶行為，有消失時間，是非模態的彈窗。

什么場景下使用什么彈框

了解完彈窗體系后，我們就可以針對具體場景來看產品同學說加個彈窗到底合適不合適？我們可以從下面的幾個使用場景來看用什么樣的彈窗合適。

1. 重要打斷用戶操作

在一些重要操作，避免用戶操作失誤。不過目前很多人都覺得這類彈框有利有弊，有的地方出現得不合時宜，打斷了用戶的使用狀態。所以在設計這類彈框時要非常謹慎，得通過多研究確認是否有必要出現。

對話框相對來說比動作欄更重要，因為在視覺中心，更能強烈引起用戶的重視，對于十分重要的內容需要打斷用戶上一步任務的，采用對話框的彈窗，對于不是特別重要信息露出又需要終止用戶上一步動作的情況下，一般采用動作欄彈框。

2. 定制化廣告彈窗

如功能更新、升級、優惠券彈窗。這一類一般是強制用戶看到的，要展示出與眾不同的特色，在視覺上比較突出，會使用模態的彈窗浮層形式。

3. 給予一定提示

比如提示用戶狀態、信息、反饋，確保用戶知曉自己所處的狀態，并可以做出相應的措施。一般使用非模態的彈窗。

4. 用戶操作反饋

出現在用戶操作完之后的反饋，比如提醒用戶頁面正在加載中、保存成功、已刪除、已刷新等等。

可以不用彈窗的反饋例子：完成頁

比如已支付成功、下載完畢、簽到成功，這一類是告訴你上個動作結束了，下一步不需要進行引導了，這種反饋大多數都不采用彈窗形式展現了。

需要注意事項

1. 層級關系

彈框是內容和導航的補充，用于通知、操作菜單、成功或加載狀態的 toast，他是寫在蒙層上面的一層內容。

2. 適配方式

下面我們需要了解的是這幾種彈窗在開發那的實現形式。我們可以理解為 2 種形式：

一種是開發直接用系統的接口，缺點是具有不可定制，形式美觀度不夠好。

另一種是開發用代碼會單獨寫出一個模態彈框系統，這套系統與整體設計語言具有一致性，可以復用在各個任務中，可以定制化設計。

需要注意的是，代碼寫出來的模態樣式要考慮在不同機型的適配情況，考慮不同機型的邊界。這個適配也有兩種實現形式，一種是固定寬高尺寸，展示在不同機型尺寸中，另一種是常用的等比例縮放。這個就需要開發與設計進行密切的溝通，能盡量合理地在不同機型展現更加合適，避免出現極限的情況。

我們是這樣操作的，為了避免尺寸比例混亂的情況，會設計一個彈窗的寬高尺寸范圍，開發同學代碼寫出的這套彈窗的適配在各個機型中，是在一定縮放比例下，適用各個不同情況下的視覺展示。這套彈窗可以調用在首頁引導、升級等各個頁面的彈窗設計中。

文章來源：優設    作者：詠舍