在 C 端設計中，不管是給車載客戶端、手機客戶端、電腦客戶端設計界面，都有比較具體的規范需要我們學習和遵守。
而唯獨 B 端設計，或者說網頁設計，我們在網上是找不到具體詳細的規范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統，其規范都只是針對自己這套產品的設計說明。
當我們不使用這些框架，要完成自定義設計，那么新人就完全不知道該怎么下手。所以，今天這篇內容，就是針對 B 端設計所需具備了解的基本規范進行說明。
幫助大家快速了解和掌握 B 端設計所需的規范知識。
B 端設計是 UI 類設計中的一個大類，它包含了非常多種面向企業、商業的客戶端類型，包括電腦、手機、平板、大屏等等，針對不同客戶端和系統，基礎規范都有一定的差異。本文主要集中在 WEB 端的管理界面設計。
WEB 管理界面雖然看起來和一般的網頁差別很大，但說到底，它也是網頁的一種，它遵循網頁設計的基本原則。我們對規范的解釋以網頁基礎規范為框架展開，并會加入一部分 B 端特有的設計元素規范說明。
主要包含的規范內容包含下面這些模塊：
規范的解釋，會涉及到不少網頁前端制作的知識點，建議立志在 B 端進行深耕的設計師，都要掌握 HTML + CSS 這些前端知識。
我們過去做過這個系列的詳解，可以通過下方的鏈接查看：
還要聲明一點，規范中總結的內容，包含 “規則” 和 “建議” 兩種類型，規則指的是瀏覽器、代碼等限制產生的硬性規范，而建議則是我根據自己經驗整理出來便于大家理解的內容。
在自己的項目中，如果出現 “建議” 無法適應的情況，那么完全可以根據實際場景來做決策，不需要拘泥于我給出的數值和限制。
下面，就開始進入正題吧！
首先，我們來解析一下 B 端布局的規范，即界面排版應該遵守的基本原則。
在前端 HTML CSS 的知識中，需要定義不同 DIV（或其它標簽）的長寬數值，并將這些大小不一的矩形進行排列、移動、嵌套，來實現界面的視覺樣式。
換句話說，所有置入畫面中的元素都包含一個矩形的外邊框，無論是文字、圖標、圖片、按鈕、標簽還是符號。
所以，在界面的布局中，無論我們使用什么樣的內容、字段，對于前端的頁面來講都只是無數矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。
矩陣布局法是設計方式和前端開發方式的統一，提升開發階段實現設計稿的效率和準確性，是每一個專業 B 端設計師都需要具備的素養。
在此基礎上，我們還有幾個統一的原則需要遵守：
1. 數值使用標準
在 UI 領域中，元素尺寸的定義不像平面設計大多以比例或“感覺”來制定，更多是使用手動輸入數值的方法來完成。
主流的系統、規范都會建議我們通過網格化參考工具來輔助我們進行布局設計，比如 Android MD 系統使用的 8*8 網格系統（常用電腦分辨率可以完美支持）。
也就是說，在這個系統中，元素的外邊框、間距，都是以 8 的倍數來設置的。這樣無論我們在設計還是在開發過程中，對于使用的數值都會有相應的默契。
但是，以 8 的倍數為基準的設計，跨越的幅度有點太大了，比如一個圖標，當你覺得 16px 小的時候，那下一檔 24px 頁可能太大了。所以，我的建議是對于相對比較復雜的項目來說，使用小一級的 4*4 網格來設計，會更兼顧靈活度和數值的統一性。
即設置元素的尺寸、間距的時候，我們都用 4 的倍數來完成，當你覺得元素的長或寬不合適，就對它進行 4px 的增減，比如下面的案例：
要警惕的是，4px 的基準，是針對元素視圖邊框的值，文字字號、圖標柵格等次級內容，并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”，而不是限制，在特殊場景中可以選擇打破它。
2. 固定和響應尺寸
使用 4 的倍數完成設計，并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中，我們會加入響應式的邏輯，即頁面元素尺寸隨瀏覽器窗口的變動而變動。
所以，在設計 B 端界面元素的時候，我們要考慮兩種場景，固定尺寸和響應尺寸。
固定尺寸即不管環境發生什么變化，它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸，則是一個 “未知數”，是需要一定的計算規則 “求得” 的。
比如還是搜索欄的案例，搜索框響應尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：
要理解響應式尺寸對應規則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。
元素是響應還是固定尺寸是我們在設計過程中就做后決定的，而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內容，在我們定義組件的過程中就要通過軟件的響應式功能進行設置，并需要在后期的標注和文檔中進行說明。
3. 常用的界面布局
最后，就是 B 端界面設計使用的主流布局形式了。雖然網頁因為畫布比手機大得多，設計的靈活性更高，但在 B 端中可以應用的布局形式也不多，只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位：導航、標題欄、工具欄、內容區域。
主要使用左右或上下布局兩個方向：
左右布局的形式，通常是左側作為導航區域，頂部作為工具欄使用。這種做法通常是因為系統內模塊較多，需要的導航數也多，用戶需要經常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。
而上下布局中，則是面向一些處理場景、功能比較簡單的平臺，導航模塊少，且切換的頻率不高，主要的操作都集中在內容區域的設置上，沒有邊欄的影響還能提高操作的專注性和效率。
要使用哪種類型的布局，需要根據當前的項目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結束了，還需要在這個布局的框架下做進一步的規劃。
比如，我們需要制定內容區域多欄設計的比例劃分、復雜表單填寫系統中的內容引導欄、列表條目展開的側邊欄形式等等……
每套項目都需要先確定頁面的布局框架，然后再開始針對具體頁面、業務內容進行設計，保證整套系統操作方式的一致性。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著項目的不斷發展，設計團隊在不斷壯大，設計師之間的協作也越來越多，相應的溝通和協作成本在不斷增加。如何才能更高效的合作，并把設計質量和一致性做的更好，是我們需要去解決的問題。
本文將以 QQ 動漫設計系統為例，分享一些過程中的思考和經驗，拋磚引玉，希望對大家有所幫助。
在項目初期，團隊設計師的協作方式是通過一個本地的 sketch 規范文件，以復制粘貼的方式來復用一些元素和控件。在設計師協作人數不多，UI 控件改動頻繁的情況下，這套流程可以比較快速的完成需求。
但隨著項目逐漸成熟，協作設計師人數變多、UI 控件逐漸趨于穩定且需要復用的地方逐漸變多時，之前流程的不足就逐漸凸顯出來。
1. 更新通知缺乏自動化
文件更新難以做到及時有效的通知到所有設計師，且需要人工在群里發通知，告知大家更新了文件。有些設計師暫時可能沒有相應的設計需求，可能會忽略更新后的文件，造成設計的不同步?；蛘叩鹊叫枰臅r候才去群里找更新的規范文件，版本容易搞錯且費時費力。
2. 全局組件更新困難
由于組件樣式是通過復制或修改的方式應用到界面設計中，當規范文件更新時，無法智能的自動更新修改相應的組件，需要設計師人工核對哪些地方有修改。這樣很難保證大家的設計版本都能得到統一的更新，當大家使用的組件版本不一致時，輸出的界面就會出現雜亂無章的情況。
3. 代碼復用率低
開發沒法全局調用代碼樣式，有些樣式可能需要反復復制使用，耗時費力，并因此產生的代碼臃腫，還會直接影響產品性能。
鑒于設計師目前多使用 sketch+xshow 的工作流程，而 xshow 正好也具備云端管理的能力，故決定以 xshow 作為橋梁，建立一個基于 sketch+xshow 的云端設計組件庫，以非常低的遷移和學習成本完成流程優化。
優化后的流程是把 sketch 本地組件庫通過 xshow 上傳至云端服務器，設計師通過 xshow 云端功能添加到 sketch 中，并在設計文件中嵌入這些云端組件。
這樣做能很好的解決上面說的問題：
1. 更新通知自動化
更新文件不用再靠人工在群里發通知，設計師也不需要去找文件，而是在 sketch 中會自動進行提醒。一旦有更新，會在右上角顯示提醒消息，設計師只需要點擊提醒，下載最新組件文件即可完成更新。
2. 全局組件一鍵更新
當更新組件庫文件后，界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異，方便設計師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認了更新后的內容，所有界面都會自動按規范進行更新而無需設計師再逐個篩查。這樣做既能保證設計稿的一致性，也能大幅提高設計效率。
3. 開發效率和質量大幅提升
開發通過代碼把一些常用的樣式進行封裝，在一些高度復用的場景中直接調用。一方面可以通過調用的形式減少重復樣式代碼的復制，精簡代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護。
想要高效解決問題，正確的方法很關鍵，這里我們用到的方法就是原子設計理論。2013 年前端工程師 Brad Forst 將此理論思想運用在界面設計中，形成一套設計系統，包含 5 個層次：原子、分子、組織、模板、頁面，這套理論為組件庫的搭建提供了思路和方法。
在實際搭建過程中，因為組件庫的搭建工作量往往比較大，需要先明確流程和分工，主要包括以下幾個關鍵步驟：
1. 明確工具流程
因為是搭建云端組件庫，所以首先需要有一個云端工具進行管理。針對以 sketch 為基礎的云端組件庫來說，常用的工具流程包括 sketch cloud，各類云同步盤，第三方云數據庫自主部署等等。我們選擇的 sketch+xshow 工作流也是基于 xshow 具備云端管理功能，與其他流程本質上是一樣的，大家根據項目實際情況合理選擇就好。
2. 全面匯總并分類
按原子理論由小到大來對常規控件進行匯總并分類。對于 QQ 動漫項目來說，常見的控件類別包括：顏色、字體、圖標、按鈕、導航、狀態欄、彈窗、列表、標簽等等。每個項目所需要整理的組件不盡相同，原則就是對要復用的元素進行整理。
3. 制作樣式模板
為了便于維護和提升合作效率，將組件庫拆分為幾個不同的獨立文件，每一個文件由組件庫搭建小組成員獨立負責，減少混亂。
如果是有多位設計師參與時，因為組件庫的元素存在相互調用的情況，會遇到到底誰先做的問題。解決流程分 2 步：
QQ 動漫組件庫一共分了 5 個不同文件，分別是：基礎、操作、導航、反饋和內容。
4. 搭建本地組件庫
1?? 確定命名邏輯
提升設計效率，是組件庫存在的重要目標之一，而合理的組件命名起到了至關重要的作用。組件的名稱要保證通用性，太獨立的命名可能不夠兼容其他場景，也會讓使用的同學產生誤解。
對于組件命名，要多與使用的設計師一起探討，因為每個人的習慣都不同，方不方便因人而異，所以需要做一些平衡。
比如在做圖標命名邏輯的時候，糾結于要先按尺寸分（圖標/序號類別/尺寸/圖標名），還是按功能分（圖標 / 序號類別/尺寸/圖標名/狀態），不斷調整多次，這時候就需要找大家一起探討，怎么才是最方便的。
命名的方法是盡可能按共用屬性由多到少的順序來整理。比如，圖標共用的尺寸屬性多，就把尺寸歸到上層；如果圖標功能分類比較集中，那就把功能名稱歸到上層。根據實際項目和設計師使用情況的不同，會有不同的命名形式，命名確保效率就好。
在梳理組件庫結構命名時，先用思維導圖描繪一份結構化地圖，方便前期討論及調整。明確層級關系后，用在多人合作時進行參照，從而統一組件庫層級。在做這份結構化地圖時，需要列好全部分類、層級、具體名稱及示例。
2?? 顏色
顏色庫的設計，需要將產品中可復用的顏色匯總并分組，比如品牌顏色，按鈕顏色，圖標顏色，裝飾顏色等等，這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規范是：序號_功能/淺色 or 深色/序號 _ 屬性 / 序號 _ 狀態。例如，04 _ 按鈕色/淺色/01 _ 常規按鈕/04 _不可點
3?? 字體
字體樣式需要做全字重、顏色和左中右三種對齊方式，因為按目前 sketch 的組件邏輯，還不能修改嵌套字體的屬性。這些屬性可以對應到組件的命名上，字體組件的命名規范是：大小/序號對齊方式/屬性/用途，例如 42px/1 居左/常規/主文本。
邊做邊檢查。由于文字組件需要的命名特別多，很容易出錯，所以建議是最好每做一組，就檢查一遍。檢查的時候打開組件樣式，如果在組件預覽中發現重復或者結構不對的地方，及時調整。
多行文本行高要注意。文字的行高要尤其注意，一定要在前期檢查好尤其是多行文本的行高。如果行高前期設置不對的話，非常影響后面文本的擴展性，在用到多行文本時會遇到麻煩。想回頭修改的話，因為是最底層的原子需要逐個調整，所以代價是巨大的。
所以一定要開始設置字體組件之前就確定好行高，比如 QQ 動漫組件庫中的文字行高統一用文字大小的 1.5 倍，并取偶數作為文本的行高。當然，這里的行高也不是完全規定死，有時候也需要視情況而定。
文本的粗細。文字的粗細也是要在一開始的時候就要設置周全，最好是給所有字號的文字都設置好不同粗細的組件，盡管可能開始用不到，但會提升文字的擴展性，不然后面添加就會比較麻煩。
4?? 圖標
圖標組件最關鍵的地方在于使用邏輯和圖標規范。比如，我現在做的圖標邏輯是：圖標/類別/使用場景/具體名稱/尺寸/不同狀態，主要是按使用的頻次來整理的。也可以有其他邏輯方式，以方便使用為準。
圖標規范也會影響組件庫的整理和日常使用，在做圖標組件時，需要定義好圖標的最大范圍和最小范圍，嵌套起來使用才不會出錯。圖標的規范要嚴謹，同一個尺寸下的圖標視覺面積要保持一致。不然在大小這個層級就會出現，雖然是相同尺寸的圖標切圖范圍，但圖標的體量看起來卻并不一致。
將純色或漸變圖標中的顏色剝離，并使用顏色組件進行嵌套，這樣做既方便替換又能減少圖標組件庫的復雜度。
對于圖標的多種狀態，建議做在同一個層級中方便選擇。
對于圖標來說，直接對畫板設置切片即可，不需要再加切片框。如果你的組件庫之前用了很多切片來導出圖標，可以用 Automate 插件直接清理或設置全局的切片，非常方便。
5?? 控件
有了顏色、字體、圖標這些基礎元素后再來制作組件就會相對簡單很多，只需要通過拼裝把通用性強的組件做出來即可。這里可能需要注意設置好布局方式，讓內容盒子隨著內容的變化而變化。新版 sketch 的布局設置相對于老版本的確實會方便很多，理解起來很容易，所以這就不多討論了。
6?? 代碼組件化
在開發側進行前端 UI 組件庫的封裝，實現從設計到開發的樣式統一，提升效率和質量。
在優先級上，代碼組件化跟 UI 組件化可以同步進行，開發先寫好框架，然后隨著 UI 組件化的逐步確定，代碼也進行相應補充。
5. 構建云端組件庫
本地組件庫構建完成后，即可通過 xshow 上傳至云端，再由 xshow 直接添加到本地 sketch 中，完成整個使用流程的搭建。
6. 權限與維護
為了更好的維護云端組件庫，避免更新混亂，需要成立組件庫小組，只允許組件庫小組成員有編輯權限。日常需求中，如有新增組件，需提交給組件庫小組成員審核，通過后方可上傳至云端組件庫。
在制作組件文件的過程中，需遵循先自測后上傳的原則，避免在上傳后發現一些諸如命名錯誤、遺漏、嵌套混亂等問題，造成麻煩。
7. 編寫規范文檔
文檔的作用是給相關同事查閱，形成標準化使用流程。一些在組件庫中難體現的設計說明、未形成組件元素的使用規則或一些常見問題都可以寫在文檔里。
8. 問題與技巧
1??善用插件，提高效率
我其實是一個非常喜歡“偷懶”的人，但凡需要重復，批量的工作，我都覺得應該有更聰明的辦法。這里我推薦幾個我在做組件庫中經常用到的小插件。
2??不斷測試
組件庫的設計過程中，一定要邊做邊測試，尤其是在前期確立邏輯的時候，要不斷檢測是否真的好用。
3??內容更新權限與維護需要專人專辦
舉例：假設我負責字體，那么后續所有的字體更新相關都只找我來修改。若其他人在組件庫內找不到相應的組件搭建頁面而又特別高頻使用，需要向組件庫小組提出申請，并由對應組件庫管理員進行更新，不可以私自修改組件庫內容并上傳。
組件化思維不僅僅應用在 UI 領域，甚至在各行各業都需要建立組件化，比如對于一些時效性非常強的新聞產品，就需要針對突發事件內容模板化，以期能第一時間發布；如果想追熱點，組件化能夠使得產品具備隨時跟進熱點的能力，提升市場競爭力等等。
組件化是一種思維模式，也是如今設計師必不可少的能力。通過組件庫提升效率能夠讓設計和開發有更多的時間去打磨產品細節，從而打造出對用戶更加友好的產品，賦能設計的價值。
文章來源：優設網 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
5分鐘帶你了解服務設計的原則、案例及常用方法！
我們常說，現在是體驗至上的時代，用戶對產品的使用不再是單純的需求滿足，更要獲得滿意的體驗。服務設計的發展為我們改善用戶的體驗提供了新的思路，從本質出發，任何產品都是在提供某種服務，服務的質量從根本上決定了用戶的體驗。
什么是服務設計
服務設計一直在我們的生活中，我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業的服務設計機構31 Volts是這樣描述服務設計的：“如果有兩家緊挨著的咖啡店，出售同樣價格的咖啡時，服務設計是讓你走進其中一家而不是另一家的原因?！边@個描述很生動，同時也說明了服務設計的作用。
其實服務設計的定義還有很多，行業內不同的專家和學者都有自己的理解和解讀，不管定義如何，重要的是服務設計的思維方式，可以幫助我們從全局改善服務體驗。
服務設計的原則及案例說明
2010年在《This is Service Design Thinking》一書中，作者首次提出了5個服務設計基本原則，這些原則之后也被廣泛使用，但隨著服務設計的不斷發展，其中的一些原則也需要重新去審視和思考，因此在2017年作者將其更新修訂為6項。
a.以人為中心(Human-centered)
以人為中心的設計理念在產品設計、交互設計等領域已經得到了廣泛的應用，服務設計當然也沒有例外，以人為中心就是要站在用戶的角度上看待和思考問題，考慮所有被服務影響的人。
在日本，農產品市場存在這樣一個問題，農產品批發商無法及時從種植者處了解農產品的相關狀況、收獲量等信息，因此他們也就無法與要購買農產品的人進行談判，這樣造成的結果可能是糧食的浪費。日本的一家軟件公司NJC（Nippon Jimuki Co. Ltd.）發現了這一問題，他們希望利用自身能力（軟件方面的優勢）去解決這一問題，因此將目標設定為：創建一個可以提供有用數據而又不給農民或農產品批發商帶來負擔的系統。
最終的產出的結果是Fudoloop這個應用程序，通過Fudoloop，批發商可以提前一天從農民那里收到信息，進而協調買家的各種要求。Fudoloop的使用者分為兩種，一種是需要更新農產品信息的農民，一種是從Fudoloop上獲取農產品信息的批發商，Fudoloop分別為兩種用戶進行了設計。
圖片來源：Fudoloop
在設計Fudoloop時存在這樣一個問題，農產品市場中的相關從業人員普遍年齡較大、受教育程度低、軟件使用經驗很少，面對這樣的用戶，顯然通常的軟件設計并不符合他們的需求，因此Fudoloop的界面設計非常簡單且信息突出，從事農產品相關工作的人員可以輕松的使用Fudoloop完成農產品信息的更新，而不會因為學習產生很大的壓力。Fudoloop還在大型農業貿易展覽會邀請了一些行業內的人員和用戶參與到了產品的體驗中，并收集了他們反饋的建議，以改善產品。
圖片來源：IDEO
NJC在設計Fudoloop時充分堅持了以人為中心的原則，考慮到服務涉及的不同用戶，并根據用戶本身的特點和需求進行設計。NJC的CMO佐藤賢一是這樣評價Fudoloop的：“當簡單、以人為本的思想匯聚在一起時，創新就會發生”。
b.協作(Collaborative)
這條原則說的是，不同背景和職能的利益相關者應該參與到服務設計流程中，收集多方訴求，發現不同看待問題的角度，才會更好的解決問題。
在美國舊金山，有一所學校和Revolution Foods這家餐飲公司合作，為學校內的人員提供豐富的、營養的午餐，但是實際來餐廳就餐的人數與預期相差很大，數據顯示，有72%可以承擔起午餐費用的人并沒有來到食堂吃午餐。經過調查發現其中的原因，很多學生等校內人員并不愿意排長隊或者匆忙的吃完午餐，因此他們選擇了去校外享受午餐的時間。
為了改善這種情況，這所學校請來了全球頂尖的設計咨詢公司IDEO，他們與1300多名學生、父母、營養人員、董事會專員、校長、老師和社區團體等利益相關者一起工作，重新去設計了學校的午餐，并且制定了針對三種年齡的就餐體驗的建議，完成了飲食、就餐空間、新技術使用等多方面的優化和設計。
圖片來源：IDEO
最終，學校完美的改善了午餐服務的體驗，這其中包含了所有利益相關者的想法和工作，因此設計成果也被人們所接受，越來越多的校內人員會選擇學校的午餐，之后，這種設計模式也被舊金山的許多學校采納和推出。
所以，服務中涉及到的利益相關者有很多，多收集他們的想法與建議，甚至讓他們參與到服務設計中去，問題會得到更好的解決。
c.迭代(Iterative)
迭代是一個不斷接受反饋不斷優化的過程，如此重復執行，讓產品變得越來越好。服務設計也需要迭代，不要避免犯錯誤，而是從錯誤中學習和改變，同時也要不斷的收集各方的反饋信息，這些信息是服務進行迭代的核心所在。隨著互聯網的發展，迭代的思維早已滲透到每一個互聯網產品，此處就不再過多解釋。
d.有序(Sequential)
服務設計應該是一系列相互關聯的活動，并且是按照順序進行的，精準的把控服務每一個環節的節奏，用戶才能獲得更愉悅的體驗。
以外賣為例，用戶的使用過程包含訂外賣時的商家選擇到下單過程，下單后配送外賣，用戶收到外賣和用餐后這幾個過程，而服務的提供者主要包括商家、平臺和外賣小哥，為了保證用戶能夠獲得流暢的服務體驗，需要各個服務提供者在服務展開的不同環節推出優質的服務，如下圖。
在訂外賣時，平臺會為用戶推出“超值優惠”“限時秒殺”等優惠活動，商家推薦、訂單歷史等商家選擇渠道，以及不同的篩選條件，以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后，進入到選擇商品并下單的過程，一方面，商家會推出優惠的活動、推薦菜品等，另一方面，平臺也會給出自己的優惠。
下單后，用戶面臨的是一個配送過程中的等待時間，為了緩解用戶在等待過程中的焦慮情緒，平臺會及時更新和推送外賣小哥的狀態，如到達商家、取餐中、與用戶的距離等，同時會給出用戶預期的送達時間，若超過預期時間用戶還可進行催單，商家可以聯系用戶表達歉意，整個過程用戶對配送狀態是可視的。
用戶收到外賣時首先會與外賣小哥接觸，包括與外賣小哥提前確定取餐的時間地點，取外賣時的短暫對話等，這些都會影響用戶對服務的印象，因此外賣小哥需要保證服務態度的禮貌和友好。收到外賣后，食品包裝首先給到了用戶對商家的第一印象，然后是餐品是否符合用戶預期，讓用戶滿意。
在用戶就餐后，首先平臺要提供給用戶評價的功能，用戶可以分享自己就餐的感受，商家也可以通過平臺為用戶提供更多的優惠，引導用戶能夠再次回到商家訂餐。
從外賣的案例中我們可以看到，服務是一個過程，是需要有序展開的，每一個環節的體驗都會影響到用戶對服務的印象，在恰當的環節提供恰當的優質服務，才能確保用戶的整體體驗。
e.真實(Real)
服務本質上是無形的，應該用“物理元素”來可視化，這樣可以用戶的服務記憶，增強用戶對他們所接受服務的感知。
同樣以上述外賣為例，商家為用戶提供餐食，這部分是借助美團這個平臺和外賣小哥來完成的，用戶和商家的接觸僅僅是送達的餐食，因此無法通過像到店體驗一樣，讓用戶感知到商家提供的更多服務。
為了讓服務變得更加“有形化”，商家就需要花費更多的心思，如圖，商家為了增強用戶對服務的感知，一般會在在包裝上花費很多功夫，精致的包裝讓商家的形象更好且更加值得信任，一些有趣的包裝還可能讓用戶的心情變得愉悅。另外，商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務，通過這樣的手段，即使用戶并沒有真的接觸到商家，體驗也會變得很好，商家的形象也會提升很多。
圖片來源：古田路9號
f.整體(Holistic)
整體就是要著眼于整個用戶旅程，考慮用戶與服務的每個觸點（觸點的概念后文會進行介紹），并兼顧多方利益相關者的需求。也就是所謂的全方位服務體驗，考慮服務環境的方方面面，沒有任何遺漏。這個原則實施起來并不是那么簡單，從整體角度思考問題會使問題變得復雜。不過在服務設計中，是有一些方法和工具是可以幫助我們完成整體思考的，比如服務藍圖。
服務設計的常用方法-服務藍圖
a.服務藍圖簡介
服務藍圖是一張圖表，通過列出在每個階段發生的、不同角色執行的所有活動，顯示了服務的整個過程。如圖所示是一個服務藍圖的簡單示例，垂直方向上展示服務中的利益相關者，水平方向上為用戶的歷程，也就是用戶經歷的不同階段。在服務藍圖中有兩條線，一條是可見線（line of visibility），可見線上方為用戶可與之交互的服務，也可以稱之為“前臺”，可見線下方代表的是后臺進程，用戶無法看到但需要給用戶提供支持，后臺進程還可以存在內部交互線，用來表示內部人員的聯系。用戶與前臺服務之間存在另外一條交互線（line of interaction），用來表示用戶與服務之間的接觸。
圖片來源：Service Design Tools
明確了服務藍圖的大致框架之后，還需要注意服務藍圖中一個非常重要的概念——觸點。觸點就是在服務的各階段，用戶和產品、服務、后臺產生的接觸，每個觸點也是服務可以進行展開和優化的方向。
b.Uber服務藍圖繪制
為了明確服務藍圖的繪制和分析過程，下面將結合下圖所示的Uber服務藍圖進行說明。
圖片來源：Medium
(1) 明確用戶歷程
用戶使用Uber打車服務主要可以簡單分為以下三個階段：注冊（下載APP - 新用戶注冊），乘車階段（下單 - 等待車輛到達 - 乘車 - 到達目的地）、乘車后（付款 - 評價）。
(2) 明確利益相關者
用戶與之產生互動的前臺服務人員為司機，而設計師、開發人員、項目經理等負責后臺的服務支持，以保證Uber按照預期的目標運作。
(3) 明確前后臺活動
一方面，需要明確和用戶接觸的前臺活動有哪些，Uber打車服務中和用戶產生接觸的主要為司機及車輛，因此需要確保司機是合格的、車輛內部的環境是干凈舒適的，同時司機在與用戶接觸的過程中需要提供禮貌的問候和交流，滿足用戶在乘車過程中的要求，完成乘車費用的收取，提醒用戶離開前帶好隨身物品，以及評價乘客等。
另一方面，用戶對后臺的流程可能并不了解，但需要明確哪些后臺活動和支持會對用戶產生影響。比如在用戶下單時能夠自動獲取用戶定位，告知用戶預期的時間和價格，以及發送給用戶司機的狀態等。
在明確前后臺活動時，我們可以以用戶歷程為線，分步驟進行分析，確保每個環節中涉及到的前后臺活動沒有被遺漏。
(4)明確關鍵觸點
在服務藍圖中我們可以標注用戶與服務的主要接觸點，針對觸點進行設計是提升服務體驗的一個重要和有效的手段。
在Uber打車服務中還有一些需要注意的觸點，一是等待時間，這包括用戶發起乘車請求后、付款時以及評價司機時，等待時間是造成用戶體驗較差的一個原因，因此需要注意標注出這些觸點，并想辦法優化，在服務設計中需要注意相關環節的應盡量簡單，減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點，如司機態度不友好、乘客下車時忘記帶隨身物品等，可能造成失敗的服務體驗的觸點應該精心地去設計，避免這樣的情況發生。
通過以上過程我們完成了Uber服務藍圖的繪制，從中可以獲取到Uber打車服務的整體概貌及其相互關系。
///
結語
服務設計的思維能夠幫助我們從全局的角度去審視和思考，發現更多改善服務的可能性，從而為用戶提供更好的體驗。因此對于產品和設計等相關人員來說，不能僅僅把目光放在產品本身，而是要從服務的角度去正確看待產品和用戶的關系，以用戶為中心，找到用戶與產品的每一個接觸點來進行服務設計，這樣才能保證用戶在整個流程中都能得到好的體驗。
文章來源：站酷 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
先看目錄！
1.什么是流量分發
2.為什么要做流量分發
3.首頁中流量分發的類型
4.流量轉化模型
5.流量如何分配的
6.設計案例與流量分發
7.如何衡量流量的效果
相信大家對流量并不陌生，我們在運營的口中經常會聽到這個詞：流量。運營通過各種手段和策略吸引用戶來接觸、使用我們的產品，從而吸引到了許多的流量，流量越多機會也就越多，比如一家奶茶店門店選址要考慮的最關鍵因素就是人流量。
流量分發的本質其實就是用戶需求分發，我們設計師的價值就在于如何讓這些流量發揮出更大的價值，讓流量價值和用戶價值相匹配。流量就像是一片海，海水通過不同的分支流入大陸形成了江、河，如果沒有這些分支，那么這些水永遠無法被利用，發揮出它們的價值。流量分發我們最常見的方式有：搜索分發、算法分發、社交分發、人工分發、付費分發
舉一個比較典型的例子：海底撈在進行流量轉化之前，并不是單純的在店門口給用戶一排座位讓用戶去等待，因為這部分用戶就像沒有被分流的海水是死的，這時候的用戶其實也有自己的目標，就是消磨時間，那么海底撈就提供了一系列服務讓這部分用戶活動起來，比如給零食、玩具、做指甲等等，于是這部分用戶其實就相當于進入了就餐流程的分支，提前享受服務和餐廳提供的福利，除了提升用戶體驗以外，也消化了大部分的流量。試想一下如果一下來了許多客戶，但你只有十幾張椅子讓用戶等待，勢必造成更多的損失。
流量是無序混亂的，只有到它應該去的地方，它才會有價值。產品與用戶雙方都需要有清晰的目標，產品提供解決方案和導流不同的場景，用戶負責完成目標給業務帶來價值。
流量分發最典型的就是電商產品，因為業務目標非常明確，就是實現gmv的提升，但同時其用戶的需求場景也是相對來說很復雜的。那么一個好的流量分發策略，可以大大的減少用戶完成目標的時間和精力，也讓產品可以準確的掌握用戶的需求流向。
流量不分發或者錯誤分發就會造成更多的消耗，什么意思呢？我們舉個例子，譬如下方的?？觓pp首頁，首頁中雖然提供了搜索、分類和標簽欄不同模塊，但是核心的內容顯示區域則只有一張預售產品的大圖。我們知道用戶類型非常多，這樣的布局對于小白和第一次用此款產品的小白來說會十分迷茫，因為最顯眼的內容中并沒有他們想要獲取的信息。我們不求滿足所有用戶，但至少需要覆蓋大部分用戶和核心用戶，此外，這樣的形式就像一個漏斗，只靠一個出口漏水，效率自然不高。
同時為了達到最大化，流量的分發并不是單向的，而是并行、串聯的。比如你可以在通過搜索找到某件商品，參與活動、運營板塊、商品分類、網紅直播等等區域都可以發現這個商品，同理，你想要購買視頻app的會員，不僅僅可以去個人中心，你還可以去詳情。所以流量就像一個大網格，單純的給漏斗戳幾個洞還不夠，甚至要把這些洞用很多根管子串起來。
流量分發可以幫助盤活新業務以及尋找新的價值，例如我們之前的電商產品在前期是以時間軸為核心的消化方式，商品以單品列表平鋪的形式展示，在產品發展過程中形態會發生變化，單純以這樣的形態承載用戶需求肯定是不夠的，所以更多運營板塊和推薦可以分擔這部分“舊”流量。
我們在移動端的首頁可以?？匆姷念愋陀校核阉?、宮格型板塊、信息流、banner、fab等。
搜索給有明確需求的用戶提供了入口，同時在搜索這個顯性場景中我們也可以細化出更多的場景給流量提供更有效的支持
例如搜索場景下除了熱門搜索、搜素歷史以外還可以提供不同的分類內容推薦。
逐漸走下神壇的banner，曾經可是在UI界叱咤風云，在當時由于他是首頁占比一哥，很多產品在首頁規劃中都認為banner會承載大部分的流量，尤其是像淘寶等電商產品，banner不僅僅可以靠圖片吸引用戶，在做一些大促活動時候還可以變成氛圍擔當，和導航欄上下呼應。我們說首頁是寸土寸金的，但是大家發現沒有，banner的流量和他本身的價值可能不相匹配。也就是說雖然他面積很大，但是用戶點擊率相比于其他板塊并沒有什么優勢，甚至還低。所以淘寶目前的首頁已經看不到banner了，這個區域可以放下更多的運營區塊和流量入口，當需要它的時候再配置起來就可以了。
這個板塊除了業務分類的“金剛區”以外還有運營活動的配置區域，我們先來說以業務劃來劃分的流量入口，以這樣的形式來分配流量是常規的手段，當然他也是有利弊的，有利的地方在于幾乎每個業務板塊雨露均沾，至少是在同一屏幕中呈現，還可以左右滑動切換更多。弊端的話就是層級深，并且用戶瀏覽效率低不聚焦，對于那些泛瀏覽型的用戶并不友好，因為你進入一個業務板塊后發現內容自己 不感興趣需要就需要再返回。所以這樣的分流更適合深度使用產品的用戶
那有沒有另外一種形式可以分配流量給不同業務板塊呢？當然是有的，比如tab標簽，有了tab標簽，泛瀏覽的型的用戶會更喜歡，他們能更快的找到自己喜歡的內容，比如bilibili、騰訊視頻的首頁，這個當然也和產品目標有關，他們希望讓用戶看到更多的內容，讓產品更扁平化。
那么你即想扁平又想讓用戶直觀的看到業務板塊分類怎么辦呢，你可以這么做，就像大眾點評一樣上邊是宮格，下面是tab標簽
Fab和cta可以說是比較另類的存在了，幾乎就是你想讓用戶去點，那你就放，所以這樣的入口流量路徑就比較單一，無法沉淀和升級流量，是短期目標的形態。fab的這樣的懸浮入口會一直在首頁顯示，通常產品為了吸引用戶會將其設計的比較吸引人，比如添加動效等，但是fab也會干擾用戶正常瀏覽界面，所以一般可以用透明、伸縮的方式解決，不過伸縮要考慮用戶實際操作，避免頻繁的伸縮造成的更多干擾。
大部分產品對于泛瀏覽用戶的匹配場景都是提供信息流，但是單純的給信息流依然無法讓用戶深入沉淀，所以需要在信息流中穿插一些分流入口，譬如品牌、話題、活動、排行等，讓用戶有更深入的瀏覽，這樣才能促成轉化。
流量獲取很容易，但是我們的目標并不是讓用戶進來逛一圈就走，所以流量的轉化我把他以這樣的模型展示，也就是說流量從獲取到沉淀再到最后的進化過程。
獲取新流量的方式很多，例如社交分發、線下活動引流等等，內部流量也可以通過打通多個板塊進行流量互換。但是這些流量是表面的，不做進一步整合也就沒有實際價值，所以我們需要將其沉淀下來。
流量就像過江之鯽，如果你想讓這條江里有更多魚，你首先需要有個兜來留住這些用戶，為了不讓這些魚繼續游走，你可以給更多豐富的食物、創造更好的環境。如何讓魚更好的在這里生存呢，要讓他們熟悉你的一切，要讓這些魚在其中發展、繁衍，所以當我們用內容吸引住用戶后，要讓用戶留下來成為深度用戶，這個前提就是讓用戶更長時間的使用產品，如何提升產品使用時長呢？譬如通過智能算法在很多斷流的板塊提供偏好推薦、幫助用戶預判場景、社交互動、讓用戶有成就感、積分體系、個人成長系統、個人品牌塑造等。
之前兩步依然是在存量市場里盤流量，這是對的，從十四五國家發展規劃來看，我們能看到一個關鍵的變化，就是從“速度”到“質量”的變化，如果你的流量已經完成沉淀，那么可以不著急找增量，而是找進化的方法。當然以下是我個人的一些思考，僅供參考。從淺層到深入，從深入到高效，從高效到創造，所以當你的流量已經比較成熟的時候，可能更多需要讓這些用戶再創造新的內容，他們可以利用你提供的產品創造自己的玩法，即便你不提供任何的幫助也可以形成生態，甚至還可以幫你引入增量市場。
譬如玩社群的都知道，引流簡單，但是要維持社群的熱度和培養超級粉絲是很難的，但是一旦你做到了，那么這些人就是幫你創造更多的價值，所以你需要一個龐大且智能的基建，還有更好的服務。
判斷流量分配是否合理的標準不在于多和廣，而在于核心價值與目標是否達成。譬如內容型電商（抖音、快手）和傳統型電商（淘寶、京東），內容型電商的流量是依靠內容帶動電商去轉化，更多的是依靠內容的質量，而傳統型電商依靠的是商品，那么在這兩個產品中，前者的流量更多還是要流向內容而非商品。
再舉個例子，在首頁的板塊中，我們默認流量從大到小是板塊越靠上的越多，越靠下的越少是嗎？也不是，板塊的分配是需要結合用戶需求的，比如你規劃的板塊視覺上很明顯但是從數據上看流量很低，那么這個板塊就是有問題的，或者板塊不明顯但流量很高，這些都不是正常表現。
所以流量分發之前就要確定好，分發的目的和希望達成的目標。是能夠讓新用戶更快了解產品，還是讓成熟用戶在使用時更高效，或者大力宣傳新業務等等，不是一股腦兒隨大流的把蛋糕切成幾塊。
不知道有沒有在做抖音的小伙伴，抖音的流量分發讓很多人搞不明白，其實抖音屬于一個強運營平臺，當用戶制作一個視頻發布后，他的流量并不是全部來自于已經關注你的粉絲，一部分是通過判斷你的視頻內容和質量分發給相應標簽、可能會喜歡的用戶。但是快手和抖音不同，快手的社交分發策略更重，用戶發布的視頻，已經關注的粉絲分發到的比例會更高，這樣用戶的互動也會更強。
通過一些設計案例我們來看看設計在流量分發中起到的作用。
流量與曝光是有關系的，為了爭取更多的曝光我們可以采用這樣的方式進行設計，通常我們可以看到橫向滾動結束后進入下一級界面需要點擊更多，但點擊的成本就高于滑動，所以在這里可以讓用戶直接通過滑動進入下一級界面，增加曝光。同時滑動是承接上一步手勢操作，很連貫，相比點擊的效率也會越高。
我們經常在用產品的時候能看到同一個界面可以從多個不同的入口進來，比如像小鹿茶app點擊下單跳轉到商品列表，也可以直接點擊底部第二個tab切換過來。比如你可以在夜宵板塊和品牌板塊都能找到kfc，讓一個區域的流量不僅僅從單獨的方向流入，這樣可以滿足更多用戶的場景需求。像淘寶的商品流量來自多個不同的層級
還有我們可以將更深層級的業務板塊提到上一層級，提高子業務板塊的點擊率和曝光，譬如貝殼在下方的tab板塊中除了信息流內容外還嵌入了精選、人氣、熱門三個分類。還有類似像德邦app這樣的工具型首頁其實版面利用率太低，本身產品功能不多其實不需要劃分出這么多板塊，讓每個板塊流量這么分散，可以直接在首頁中加入查單號的功能，并且將寄件收件歷史平鋪在首頁。
淘寶商品詳情中會有店鋪和店鋪推薦內容，方便用戶查看更多偏好商品，提高客單價。具有電商屬性的社交產品在用戶圖文中可以添加商品鏈接、標簽、話題等等。還有淘寶在首頁的feed流中點擊商品會進入另一個feed流，這里的商品又進行了算法權重的加持，會更加準確與多樣，由于本身處于逛場景的用戶，在這一步再次幫助用戶進行準確選擇，可以提高轉化，當然了，這樣中心化的分流方式對于商家而言不太友好。
衡量流量分發的效果，我們可以查看板塊的點擊率（UV/PV）和預期。比如在某個周期中，有100個人進入這個界面，而這個界面中的banner最終點擊量為1000次，那么這個banner的點擊率為1000/100=10，平均每人點擊了10次。點擊率越高，該入口的流量自然更大。
每個產品對于活躍的標準不同，比如一個商場衡量活躍用戶數會算那些進來蹭空調的大伯大媽嗎？還是衡量那些有消費行為的顧客，同理一個產品計算活躍不是單純看每天有多少人登錄瀏覽就算活躍的。
那么觀察活躍度有什么用呢？比如我們之前做一個大促活動，每個板塊都有活動，但是大促結束后，只有童裝類板塊的日活流量在持續下降，于是我們通過相關調研，發現是因為童裝類的品類太少，用戶沒有逛和再次購買的興趣。
一波流量進入后，我們不僅要看他們去了哪里，還要查看這波流量在這里做了什么，于是我們通過查看頁面停留時長可以判斷一些問題，比如
1. 如果用戶在本該停留時長長的頁面反而停留時間短可能是當前內容不感興趣、看不懂、閃退、臨時有事等等
2.反之，在本該停留時間短但是用戶停留時間長，說明可能文案排版或者解釋的不清楚、用戶可能在思考、臨時有事等等
一波流量進入后，可能進入更深級界面也可能停留原地，那么還有一部分可能就直接離開了，查看流量的流失可以幫助我們判斷以下問題
1.如果用戶在進行某個多步驟任務，當我們發現其在即將完成時退出了，或者在中間步驟退出了，那說明可能出現了某些問題讓用戶進行不下去
2.用戶可能對當前流程沒有預期，也可能覺得有風險也可能是對某個地方產生不滿
流量就像是一群被標記過的小白鼠，從哪里來到哪里去，中間做了什么，都被我們記錄了下來，那么頁面訪問路徑也是我們查看這些流量去向的關鍵指標，例如cctalk在冷啟動后默認打開發現頁面，我們進行了一些用戶的調研，發現90%以上的同學在進入后都會切換到上課這個界面，這里可以思考的是作為產品我們發現用戶有這樣的行為，需不需要對產品進行優化，產品這樣的設計是否考慮到的是新用戶和培養用戶習慣讓更多課程有曝光。其實這里可以做一些判斷，如果用戶近期有購課、上課的記錄和行為，默認打開上課板塊。若新用戶或者長期沒有上課行為的用戶則默認打開發現界面。這樣就可以起到更精準的分流。
8.總結
流量誠可貴，流失就白費。
今天分享就到這里，你學廢了嗎？
文章來源：站酷 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計是溝通，是人和人、人和物之間，通過某些形式傳遞和反饋信息的過程。
設計時刻都在為產品或商業提供有價值的幫助，例如產品轉化率的提升、品牌好感度的提升、還有商業變現等等；與此同時 創新性的設計，很可能會帶來數據上的質變，體驗上的顛覆，甚至是改變某個領域的發展方向。
-
設計的本質，是對人性視角的轉化。
通過洞察用戶在產品使用過程中的痛點，提出全新體驗的可能性，實現體驗和業務的平衡；
設計不是產品可視化，它是全局的，是通過用戶視角對設計機會點的洞察。
-
設計包括，但不僅僅是形式。
形式是設計的外層映射，設計本身是廣義的；設計形式是設計理念的承載，是設計滿足用戶需求、實現商業目標和呈現品牌調性的具象化結果。
-
設計的價值在于創新，探索出解決問題的更多可能性。
設計是通過創新思維，對問題本質的探尋和對常規框架的突破，為體驗和業務賦能。
-
設計是價值導向的，需要為業務負責，為行業負責；好的設計，需要能比常規方案產生更多價值，驅動業務和行業發展；設計不是單獨的原型圖或者視覺稿，而是一個全局性的創新型解決方案。
我們在做的設計，是大設計。
文章來源：站酷 作者：樂信用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
QQ 購物號是專門為 QQ 用戶定制的購物平臺，2020 年隨著疫情過后，整體電商行業開始恢復階段，QQ 購物號計劃了今年雙 11 大促季活動，活動的業務目標是希望強化特殊樣式設計來促進購買轉化，驅動整體大盤消耗與效果提升。為此如何通過設計賦能業務，從而突破增長的瓶頸呢？
購物號是屬于 QQ 的訂閱號服務，整體的曝光位置并沒有很好，而且這次大促設計的落腳點只通過外層的樣式和推送頁面的廣告內容進行展示。
以及要如何去滿足不同電商廣告主的投放訴求，和不同素材規格的投放適配，這都是需要去考慮和解決的問題。
1. 通過品牌關鍵詞定義視覺情緒版
QQ 購物號用戶群主要還是 00 后為主，這些年輕群體的購物趨勢變化非常快，審美要求也越來越高！
所以前期思考了大量的關鍵分別為：活力/期待/年輕/狂歡/心動/發現/熱愛，最后確定以活力/熱愛為這次大促季的品牌關鍵詞
2. 不同時期變化
隨著大促運營節奏的慢慢展開，視覺側也需要考慮到相應的視覺變化去引導用戶的感官，避免用戶審美疲勞。
嘗試前期的預熱階段通過特殊視覺吸睛，第一眼先抓住用戶的眼球，進入狂歡階段，則可以利用動效加持來進一步吸引用戶。
1. 讓容器層面提升專屬感
通過多方案從常規到異形多結構卡片探索，這里為了避免品牌標識壓在廣告素材上會有遮擋問題，同時又要突出品牌標識。
所以前期預熱期選用卡片 F 更能強化品牌感，可以讓用戶更有代入感，當到了狂歡期選用卡片 G，通過擴大視覺著色區域，提升品牌專屬內容曝光優先級，增加用戶吸引力。
2. 利用情感化氛圍與用戶溝通
從前期的分析得出 QQ 購物的用戶群是非常年輕的 00 后，所以整體視覺上需要運用更具年輕和活力的情感化氛圍。
通過品牌字體上使用現代硬朗風格，巧妙的融入氣泡元素，提升大促氛圍，在傳播上結合 QQ 購物的品牌符號。
包括品牌頭像以及卡片的氛圍圖形也采用氣球泡泡，彰顯活力感。整體保持一致的視覺體驗。
對于整體色系上延續 QQ 購物的品牌基調，輕漸變暖紅色更能營造年輕、購物、活力的調性，讓用戶更有情感上的共鳴。
3. 通過動效不斷激發用戶的行動力
整體的動效節奏通過吸引-激發-共鳴-行動四重奏來進行，讓用戶更深刻去感知大促狂歡期的感知。
比如在外層入口上通過動態頭像來吸引用戶注意力，當用戶進入 QQ 購物號后，利用帶有大促品牌的禮包彩蛋來制造驚喜感，吸引用戶搶禮包。
再通過卡片若隱若現的動態圖形去烘托氛圍感達到用戶共鳴，以及行動按鈕的微動效觸發用戶行動。
4. 高效適配于不同規格廣告位
QQ 購物支持投放多種廣告位，因此定下整體視覺風格后，快速對不同規格廣告位進行適配復用。
廣告主提供不同素材規格均可適配投放，降低廣告主成本，也讓用戶達到視覺的統一體驗
經過這次官方活動大促的主視覺風格塑造，我們沉淀下來整套視覺框架結構。
通過制定設計規范可以讓廣告主自定義皮膚模版，以及分不同行業模版，比如拼多多五周年的定制模版以及在寒假期間推出的 K12 教育行業模版。
不僅降低廣告主制作成本，也通過更吸睛的皮膚模版提升促進購買轉化，驅動整體大盤消耗與效果提升！
本次活動的數據指標目標達成，整體的增長環比 19 年的雙 11 和今年的 618 均有了較大幅度的提升！
在設計策略與運營策略配合優化下，11.01-11.11 的廣告主整體預算消耗超出 4 千萬，完成預期超出 16%，也提升用戶的轉化率。
回顧整個雙 11 大促活動，我最大的感悟是要有全局觀！
前期基于對產品目標的了解，從更高的角度去理清產品思路定下設計策略，結合個人設計手法不斷的打磨細節。當然整個過程會碰撞出很多思考和糾結，需要不斷的實踐、驗證。
隨著廣告主對品效要求越來越高，未來電商的廣告形式也開始隨著精細化運營的方向發展，這些變化可能對商業化設計師來說，或許是一種挑戰和機遇
文章來源：優設網 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
工作中我們常常會聽到或在撰寫交互說明時提到“從底部向上出現彈層”、“出現浮層”、展示“對話框”、彈出“彈框”、“出現對話框”諸如此類的話術。我相信大家對“浮層、彈層、彈框、對話框……”等稱呼常常也會感到困惑。到底什么時候應該稱呼為“對話框，什么時候稱呼彈框”，此類相似的組件又是如何分類的，應該如何應用、如何設計。
恰好筆者近期在設計彈出層組件，本篇文章將結合自己的實戰經歷，自己對彈出層組件的理解和設計經驗分享給大家，希望幫助大家對彈出層組件有更清晰的認知和理解。
首先我們看一下彈出層組件的定義：當觸發某項操作時，在頁面上方展示的彈出層容器，容器內可展示文本、按鈕、列表、標簽、表單項等內容，英文名稱定義為 Popup。
△ 彈出層組件的構成
根據彈出位置的不同，我們又可以將 Popup 組件細分為如下 5 種樣式。
△彈出層組件的 5 種樣式
看到彈出層組件的樣式，想必大家已經聯想到日常用的比較多的組件了，比如“Alert 確認框，picker 選擇器、基于場景的篩選組件”等。彈出層組件是十分基礎的組件，基于該組件我們可以開發通用性組件以及場景組件。從“形式”角度來看，“浮層、彈層、彈框、對話框……”本質上都是彈出層。
“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺也都根據自身的規范對相關組件進行命名。Material Design 和 iOS 官方規范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發整理了組件之間的對應關系。后文會詳述每種組件的定義及應用。
△MD 和 iOS 規范中的彈出層組件
在詳述組件之前，還需要向大家傳達一個概念“模態”，即平時我們常說的“模態彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態彈框”，而是當彈框采用了“模態”的設計手法時，我們將其簡稱為“模態彈窗”。
iOS 官方定義為：
“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”
翻譯過來即：模態是一種設計手法，它使用一種臨時性的模式將用戶之前看到的內容與當前看到的內容進行區分，并且需要通過明確的操作才能退出該模式。模態呈現的內容可以：
幫助用戶專注于一個獨立的任務或一組緊密相關的選項，確保用戶收到關鍵信息，并在必要時采取行動
由此可見，彈層是否為模態彈層可以根據具體的使用場景進行定義。在 iOS 官方中定義的模態彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續的系統中將 Fullsreen 也作為模態彈層進行使用。MD 中的 Dialogs 組件均為模態，而 sheets 組件不采用模態設計手法。
警示型彈框均采用從頁面中間進行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場景和功能相同。都是在重要信息提示、需要用戶確認的操作、以及破壞性操作之前進行提示，警示型彈窗會中斷用戶的任務流程，影響用戶體驗，因此需注意其使用頻率。
△警示型彈框 Alert Dialog
使用場景：通常在系統級信息的提示，例如權限的獲取、系統通知，需要明確告知用戶的信息，以及破壞性操作前使用。
△警示型彈框應用
根據用戶在彈層中需要完成的任務內容和任務數量，又可分為簡單型和復雜型彈層。
簡單型彈層
常用于在彈層中展示內容，需要用戶進行選擇的場景，該場景通常只需要用戶完成一種任務，比如通過點擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺多使用在頁面中間彈層的方式。
彈層中是否存在操作按鈕可根據實際應用場景去確定。通常選擇項條目較少或內容簡單易于識別時，可不需要「確認」按鈕。而在選擇項條目較多時或需要用戶作短暫的思考才能確認選項時，可增加「確認」按鈕，允許用戶有修改選項的機會。
△簡單型任務彈層的組件樣式
△簡單型任務彈層的組件樣式
彈層中信息的呈現方式又可分為“列表”和“網格”兩種，大多種場景下，均可使用列表展示內容，更加符合用戶從上到下的閱讀習慣；而在分享場景下多通過網格的方式將分享渠道展示出來，增加屏顯的內容，同時提高用戶查看信息的效率，具體樣式可參考上圖。
使用場景：簡單型彈層多用在信息的篩選、排序和信息確認的場景下使用。且在目前市面上的絕大多數應用中，除原生的安卓應用外，大部分應用都采用從底部向上彈層和從頂部向下彈層的方式。
△簡單型任務彈層的應用
復雜型彈層
復雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務。
涉及到信息篩選時，通常采用側邊彈層組件進行展示，且彈層上的信息僅支持垂直滾動查看，不支持水平滾動查看，且通常采用“非模態”的手法，方便用戶快速取消當前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統中，很多 APP 應用在復雜的篩選場景下也都采用側邊彈層的方式。
全屏彈層會將當前頁面中的全部信息遮擋，更方便用戶聚焦于當前需要完成的任務，避免用戶的注意力被分散。通常采用模態的設計手法，僅當用戶觸發確認、取消或關閉操作時，彈層才會消失。一般全屏彈層中需要包含標題、操作按鈕、內容區域。用戶在全屏彈層中需要完成多個任務，因此內容區域中也會包含多個組件。例如“按鈕、輸入框、標簽、開關、列表、日期選擇”等。
△復雜型任務彈層的組件樣式
使用場景：通常用于完成復雜任務的表單信息填寫、內容篩選、搜索和內容展示。
△復雜型任務彈層的應用
需要單獨說明氣泡框組件
在 iOS 的官方定義中，氣泡框組件應用于 iPad 應用程序，在 iPhone 應用程序中，通過以全屏模態視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實際場景進行應用的。例如，在手機端，氣泡框組件更多被用于簡單信息的展示與選擇。
△Popovers 氣泡框的應用
小結：
筆者按照使用場景、信息的復雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務型”，并且枚舉了常用的 MD（安卓系統遵循的規范）和 iOS 兩大規范中定義的彈出層組件，方便讀者對彈出層組件有更清晰的了解。需要說明的是，由于業務場景是復雜的、多樣的，各位設計師也需要結合實際的業務場景和設計目標，靈活的使用組件。
△彈出層組件的類型與使用場景
1. 設計目的
首先需要理解我們為什么要設計組件，組件最終設計的目標是什么，筆者從“設計側和技術側”兩方面談談自己的理解。
設計側：規范的組件設計，對內有利于全公司的設計師對組件的使用有統一的認知，明確組件的使用場景，避免誤用和錯用組件，并且方便新人設計師快速學習和上手，提高設計效率。對外也有利于保證設計上線后的一致性和規范性，方便用戶對本公司產品建立統一的心理認知。
技術側：通用的基礎組件，具有可復用性，能夠減少重復開發，大大提高開發效率。
組件設計的最終目標可歸納為保持設計的統一性，提升用戶體驗，同時提高設計和開發的效率。因此，組件設計是非常有必要的，那么到底如何從 0-1 開始設計組件呢，下面我們來看組件設計的詳細思路。
2. 設計思路
其實組件設計的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎組件的設計。通常我們會從組件的定義、用法、構成、種類、行為與狀態五個方面進行組件的設計。
△組件設計的思路
回歸到本文所講的移動端彈出層組件，組件設計時需要考慮其“通用性和可復用性”?；诖嗽瓌t，將彈出層組件進行拆解，如下圖所示。它包括：
△彈出層組件的拆解
從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進行任何彈層組件的開發。因此，在彈層組件設計時將 Popup 組件抽離出來作為最基礎的組件進行開發， 還可以進一步開發通用的彈層組件和高頻使用的場景組件。由于上文中已講 Popoup 組件的構成與樣式，且由于該組件相對來講比較簡單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場景下的高頻組件“篩選器 Filter”為例進行說明。
1. Picker 選擇器
定義：用于從一組預設數據中進行選擇的控件。
用法：
構成：標題、按鈕、內容（當前選項和其他選項）
△Picker 選擇器組件的構成
種類：根據選項間是否存在級聯關系可將其分為 2 類，普通選擇和級聯選擇。
△Picker 選擇器組件的分類
行為與狀態：狀態，給出單列選項和多列選項的常態頁面以及選項被禁用的狀態頁面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現->選項查看->選擇目標選項->彈層消失的完整邏輯進行說明。
△Picker 選擇器組件的狀態
△Picker 選擇器組件的交互流程與行為說明
當完成以上全部內容的撰寫時，可對本組件開發出的效果進行說明。例如：
2. Filter 篩選器
Filter 組件是基于公司移動端產品均存在的高頻“篩選”場景而總結的場景（業務）組件，其設計思路和上方描述的通用組件的設計思路相同，筆者此處只強調 2 個重點注意事項。
場景組件在設計時遵循“加法”邏輯，從而提升組件的復用率。組件內容分區塊進行封裝，從而增加組件的靈活性。
△篩選器組件
在上圖所示的篩選場景中，單類目和多類目篩選若均為高頻的使用場景，那么單類目和多類目篩選組件均可以抽離成組件并進行開發，且多類目篩選可基于單類目篩選組件進行開發。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發不同于設計稿，設計稿可將多個類目刪除掉只剩余單個類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發成本要高于重新開發組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發出單類目篩選的組件。這也是需要我們牢記的，組件設計需要從“原子組件到復雜組件”，遵循由“簡單到復雜”的加法邏輯。
而在組件開發時通過“goup”的形式進行封裝，可使組件更加靈活。例如，當業務場景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復用，這就提高了組件的通用性和復用率。
當然，Filter 組件還需要考慮很多設計細節，例如類目名稱是否顯示為當前篩選項名稱、重置的邏輯是什么、確認篩選后頁面信息會如何變化、篩選項支持單選還是多選等等。復雜的場景組件通常是由多個原子組件組合而成，因此組件的邏輯也更為復雜，組件設計的整體流程和交互細節也應考慮的更加全面。
文章來源：優設網 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021趨勢已悄悄來襲，還不趕快來看這些落地實例...
前言
在這艱難又魔幻的2020年的尾聲，有必要系統匯總下關于UI/UX的設計發展方向，為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時，分析特點并舉例落地實例，來幫助大家啟發創意設計工作的思考切入點。
流行趨勢跟人們所處的環境密切相關，從最初的方塊馬賽克——>追求極度寫實——>扁平風——>到現在的質感擬物，扁平設計霸屏的這幾年，設計風又向更立體、豐富、更有層次感的方向發展，所以說趨勢就是一個輪回。設計風格沒有絕對的好壞，在審美達到一定疲勞時，就會開始出現新的設計風格。每一個新風格都值得設計師去拆解、思考，本質都是為了提升更好的交互體驗。
而在進入下一個十年的過程中，我們對數字產品和體驗的依賴將日益增長，預測真正勝出的將會是3D動畫和用戶界面/用戶體驗設計的結合設計，5G技術的發展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創意、鼓舞人心的發展階段。在這里讓我們來看看未來那些不可忽視的設計趨勢吧。
（注:圖片來自網絡，均標明出處及作者，若有侵權請告知刪除）
1、3D與UI結合
隨著高效且易用的3d軟件工具的出現，3D 元素已經開始變得越來越受歡迎，而在這之前，UI界面一直被平面設計所主導。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動效、電商到平面視覺，在所有的設計類型中都能找到它，3D現實主義已是各個領域的大勢。
圈中也出現了很多免費或付費的3D預設元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點：
? 直觀感受；
? 立體真實；
? 形態豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實例應用：
各大廠都開始紛紛嘗試在產品中加入3D元素，將自家IP立體化，植入到各個品牌靜態頁面，加深品牌印象滲入。3D技術雖然已經出現有一段時間了，但是為了保證速度和性能表現，較少應用到產品中，隨著軟件技術的提升，立體渲染產品將開始慢慢運用到更多的界面交互、H5活動中。
▲閑魚、QQ、花椒直播的3D啟動頁
▲得物（毒）的3D空間動效
▲樂無登錄頁
網易云音樂每年的音樂總結報告都追隨著最新的設計潮流，今年還可以自由選擇人物形象，增強了用戶的主觀代入感，以下是每年的設計風格變化：
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結陳詞H5
▲總結報告Banner的動效
其中IP立體化最多的當屬K12教育領域，除了制作IP周邊外，3D效果能適應豐富的運營場景，高度還原現實世界，給小朋友帶來最真實的學習互動體驗。
▲洪恩識字（3D學習場景）、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時的互動
值得一提的是今年蘋果發布的macOS Big Sur除了玻璃擬態的變化，圖標還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機交互指南中也明確指出：“圖標不僅是裝飾性的，而且在與用戶交流中起著至關重要的作用，它應該傳達應用程序的主要目的并暗示用戶體驗?！边@次扁平化和擬物化的結合，將又要引領一波設計趨勢。
2、軟漸變（Soft gradients）
過于強烈的漸變不再是趨勢，大多數設計師都開始喜歡使用非常簡單和微妙的漸變，如果產品的目標用戶人群需要輕松溫和的視覺環境，那么此風格再適合不過。
軟漸變包括背景、陰影、反光，常與線條平面圖形結合，應用于界面、網站、圖標、icon等設計中。
特點：
? 低調溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設計網站中我們已經看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創造多彩的模糊背景。它使設計看起來非?，F代、不打擾、清新而令人愉悅，其中畫面內容是主要視覺焦點。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實例應用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標設計中經常需要漸變或陰影來塑造物體，柔陰影使設計元素更豐富立體，并且它們有助于區分內容之間的層次結構。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實例應用：
▲有道數學（已下架）
▲Uki
3、玻璃擬態（Glassmorphism）
去年新擬態掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現問題，新擬態更適合用在局部的少量元素點綴，無法完整地使用在整套應用程序中。
▲Alexander Plyut
伴隨著今年蘋果發布的 MacOS Big Sur 操作系統的發布，新的擬物風格正式回歸大眾視野，整體風格應用了新擬態（Neumorphism）的設計思路，利用大量的毛玻璃質感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur最新的圖標也加入了 3D 質感設計，設計語言更為時尚簡潔。蘋果設計師 Alan Dye 在發布會上也提到了設計風格轉變的原因，主要是希望「降低視覺的復雜度，讓用戶能夠將注意力集中在內容上」。
而最新的玻璃擬態則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質感，模糊的邊界有細微的淺色邊框，整體效果就是讓元素之間有虛實結合的特殊空間。毛玻璃運用在界面中對關鍵信息起到強調作用，用戶可以看到物體間的層次關系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。
特點：
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領新擬態風格的Alexander的最新作品也朝著玻璃擬態變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實例運用：
▲毛玻璃視覺可追溯到2007年發售的Windows Vista，而當時的 OS X Yosemite 也大量使用了這種設計語言
▲最新的MacOS Big Sur操作系統
▲圖標的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時分。之前用了很長時間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經常提到的夜間模式是有區別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設計，重在降低對比度，以降低在暗光環境下屏幕對人眼的刺激。
特點：
? 突出內容
? 減輕干擾
? 沉浸體驗
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實例應用：
▲有道詞典
▲愛范兒（ifanr）
最常使用暗黑模式的車載系統：
▲小度車載
暗黑模式的靈感最早引起大家注意的應該是抖音，在這之前大部分的應用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的，在這之后也相繼出現了以黑色為主的APP設計：
▲MOO音樂(可手動切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風格，我個人就非常喜歡熒光色，現在要是談到該風格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風格已經成為清新、酷炫、數字時代的代名詞，而在2021一趨勢還將會繼續影響UI、平面、廣告、插畫等領域。
特點：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網站設計中的應用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實例應用：
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀初開始，抽象構成中的簡單幾何形狀就已經用于視覺藝術中，多用于主背景主題或色彩細節，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設計看起來既規則又有趣。
幾何圖形可以運用到UI設計中 ，將它們混合在一起以創建馬賽克的效果，形成具有品牌意向符號的記憶點。
特點：
? 規則組合
? 品牌印象
? 重復記憶
▲Johnny Nova
▲Vladimir Gruev
實例應用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風格，那就是SHINee的正規六輯合輯《‘The Story of Light’》，采用紅黃藍三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當然，幾何形狀不止用于色彩圖案細節，在UI界面布局中經常使用大塊面圖形，這種設計方法受到越來越多的關注。
7、極簡風
極簡設計的前身是2010年代中期精巧又花哨的設計，這種設計已經存在很長一段時間了，但在2020年，人們每天需要消化的信息量越來越多，所以現在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。
特點
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會涉及到無鍵趨勢，因為按鍵越少就意味著設計越簡潔，而這種簡化過的設計將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實例應用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應用到UI中
在 2020 年，信息的觸達的速度將會變得更快，而視頻是很好的載體，各個年齡段的用戶都喜歡觀看引人入勝的動畫，無論是選擇通過短視頻還是電影的方式來推廣產品，都很好地灌輸品牌理念，建立與受眾群體的關系，加強用戶忠誠信任感。
特點：
? 營造氛圍
? 類型多樣
? 品牌調性
▲Fireart Studio
▲Ehsan Rahimi
實例應用：
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術插圖從2017年開始到現在仍然很流行，幾乎適用于任何類型的設計行業，是設計領域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產品背后的故事，為了把故事講好，我們可以創造出一個品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產品問題。這是在產品設計中講好故事的基礎，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經看到了3D與插畫的結合，藝術家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細節和質感都放大到了熒幕上，在劇中還采用對比強烈的大色塊擴大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經典線條
▲Entei Ryu在3D建模使用插畫質感
▲Minh Pham ?在ui界面中的嘗試
實例應用：
騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個風格之間來回切換，給我們帶來了一個多元的音樂世界。各大視頻網站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強互動性，而3D插畫與動效的結合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。
10、更多的微交互動效
最后一點，還是要強調動效在UI中的的作用，微交互最早出現在 2018 年，讓用戶更好地理解系統如何工作，并在引導其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設計中決定了一個 App 或網站是普通還是優秀，從點擊反饋、加載等待、導航交互等等，為用戶界面設計增加了動態性，交互性和直觀性。
動效起到的作用：
? 引起人們對應該做什么或接下來將要發生的事情的關注；
? 創造流暢和視覺愉悅的過渡；
? 帶給使用者美觀的享受；
? 指導我們進行復雜的操作；
? 確認用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實例應用：
▲GoFun選擇車輛后的頁面轉場動效
結尾：
2020的趨勢在滿足用戶的美學要求上，側重內容和感情表達，還會根據不同設備載體、新的技術而變化，為用戶提供最大程度的豐富體驗。
借用Adobe設計副總裁 Jamie Myrold 的一句話：如今設計師要思考的，絕不僅僅是設計一款App、網站或設計工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設計。
設計趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術，每個設計人員都可以找到自己喜歡的方向，不管哪種趨勢最受歡迎，最重要的是如何學習并合理地運用到產品中，以產生最大的設計商業價值。
文章來源：UI中國 作者：_阿丹a_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
迪士尼的12條動畫基本原則是傳統動畫中最有價值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統動畫（例如角色動畫）設計的，但在本文中，我們將探討如何將其中的一些原理應用于UI動效上。
在動畫中，擠壓和拉伸表示對象的重力，質量，彈性。當場景中的彈球撞擊地面時會被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結合。
例如，按鈕的按下狀態為擠壓。通過控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態。除此之外，它還可以應用于界面上的所有的交互式元素。
應用于按鈕上的擠壓和拉伸
應用于側邊欄的擠壓和拉伸
預備動作為用戶展示了即將發生的事情。就像奔跑開始時，我們的身體會先向后傾，然后才是加速跑，這就是預備動作。在UI動效中，懸停狀態就是很好的例子。每當我們將鼠標懸停在元素上時，某些元素都會做出反應，表明它是可單擊的，并且當您單擊它時會發生某些事情。
懸?；油ǔ嬖V我們接下來有一個動作發生
涉及水平滾動的界面通常會顯示下一個元素的一部分，該元素會出現在滾動/滑動中
在傳統動畫中，時間由繪制的幀動畫來控制。幀數越多，動畫將越流暢和越慢。時間還可以表現對象的情緒和性格。
時間也是所有UI動效最基本的屬性。定時和緩動功能在動效設計中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面，如果動畫太快，用戶可能會錯過一些東西。通常，大多數界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過渡之類的復雜動作約為500毫秒。您可以參考Material Design，其中對每種類型的動畫的持續時間都有很好的解釋。
右側的過渡會使用戶等待太久
現實世界中的大多數對象都遵循緩動效果。換句話說，物體的運動并不突然。就像自由下落的物體會在運動過程中逐漸加速。
向UI元素添加緩動效果可以使它們看起來更生動自然。制定時間節奏和緩動標準可以讓你建立一個高效的動效庫。
右側添加了緩動效果，所以看起來更自然
轉場，它包括如何將對象放置在場景中，如何以及何時進行每個動畫等等。它將用戶的注意力引向場景中最重要的對象。
對于UI界面，轉場決定了元素的放置位置以及在發生交互時如何對元素進行排版。它將用戶的注意力引向最關鍵的元素。
這是一個音樂類的APP，轉場動畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨出現，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中，使用弧線運動會比使用直線運動更加的自然，要突出元素運動的路徑時可以使用弧線。
弧線運動更加生動自然
在動畫中，輔助動畫用于強調場景中發生主要動作。例如，角色的頭發在行走時的微妙移動，或者是面部表情的微妙變化。
在UI界面中，輔助動畫可以使主要動作更加突出，這在向用戶反饋信息時非常有幫助，所有微交互的作用均基于此原理。
輔助的例子動畫讓點贊效果更飽滿
場景中的重要角色必須具有吸引力，通常會將某些動作進行夸大以引起更多關注。
在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設計就是一個很好的例子，懸浮的按鈕在靜態狀態很顯眼，因為它的顏色更重，并且懸浮在所有元素之上。當發生任何交互時，夸張的動畫讓它可以占據整個屏幕，使其吸引力更上一層樓。
占滿全屏的夸張動畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當車前進的時，身體會短暫后仰，然后也會隨之前進，我們稱之為延時。突然剎車時，又會由于慣性運動身體向前傾然后回來 。
在UI界面中，同樣可以在元素靜止之前添加慣性運動，以使它們感覺更自然。不同元素直接也可以添加延時效果，讓動效更細膩~
窗口放大時添加了慣性效果
圖像和文本添加了短暫的延時效果
文章來源：UI中國 作者：設計師深海
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
