圖標在界面設計中，雖然很小，但是卻是界面中重要組成部分之一。通過將顯示物體圖形化的形式，將功能本意高度濃縮成一個圖標，再通過視覺隱喻更快地讓用戶理解功能，同時圖形與文字相比，圖形更加生動形象，視覺能力更強、更便于記憶，用戶可以根據圖形快速定位功能位置。而順著時代的發展，圖標不再僅僅以工具的形式出現，更多的起到裝飾頁面，也不斷延伸出不同的圖標類型與圖標設計風格。
圖形與復雜的文字相比，更加簡潔，相應的識別效率也會更高。圖標可以將復雜的文字描述高度濃縮成一個圖標，通過視覺隱喻的方式讓用戶聯想到現實生活中的物體，更直觀地呈現圖標代表的功能，更快理解功能的意義
1.2 減輕頁面負擔
像一些通用常見的圖標，如搜索、播放按鈕、更多等，僅需要一個圖標就能清晰地傳遞功能意義給用戶，省文字的描述，節省更多的頁面空間與閱讀壓力。
1.3 更快定位功能位置
圖標與文字相比有更豐富的表現形式與顏色，所以視覺沖擊也就更強，也能更快地被識別出來，當用戶熟悉了產品后，只需要通過圖標就能快速找到想要的功能，當功能位置發生變化時，不需再重新閱讀枯燥的文字找到對應的功能，只需從圖標形狀、顏色上區別，找到對應的功能。
2.裝飾層面
2.1 傳遞品牌調性
隨著互聯網的發展，同類型的產品越來越多，要在各個產品中突圍，除好用的功能外還要有特色的外觀。在圖標中融入能代表產品品牌的符號，強化品牌調性，保持圖標的獨特性，給用戶留下深刻的印象，一看圖標就知道是哪個產品。
2.2 增強產品吸引力
如今用戶對產品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標可以帶給用戶更好的第一印象，增強產品對用戶的吸引力。
2.3 渲染氣氛
根據不同的節日或運營活動，設計相應氛圍的圖標，幫助產品渲染節日氛圍或加強用戶對產品主題運營活動的感知力度
二、圖標繪制的基本原則
1. 可識別性
圖標與文字在一定程度上起到相同的作用，都是通過特定的表現形式來傳達某種信息給用戶。順著時代發展，圖標的設計更精細化，產生了更多的設計風格，但圖標的本質還是沒變的，是用戶進入功能的入口。因此，一個能被用戶快速識別、快速理解的圖標相當重要，是圖標設計的基本要求。我們繪制圖標時要盡量去掉輔助、無用的元素，保留最清晰、直接、有代表性的元素。
2. 風格統一
設計師在設計圖標時，除了會根據產品類型、用戶群體、品牌調性等因素決定使用哪種圖標風格外，還要根據圖標的具體使用位置，因此在一個產品中，常常會出現多種風格類型的圖標，而風格統一指的是在某個特定功能模塊內的圖標風格要保持一致，是面性的圖標就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小統一
圓形、正方形、三角形，在這三個圖形雖然高度相同，但是整體上三個圖形的視覺重量并不相同。在實際的操作中，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個方向缺得越多，就往那個方向移動一點。
4. 色彩統一
色彩的統一指的是圖標色彩在飽和度與明度上保持特征統一，數值在一定的范圍內發生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標，通常使用的都是產品的主題色，而多彩圖標，常會以主題色為主，拓展出臨近色、相似色、對比色，目前市面上大多數的圖標顏色會使用同類色與鄰近色。對于飽和度與明度的調節，我通過利用灰度模式進行輔助，使圖標視覺更統一柔和，不會出現其中一個亮眼或暗沉。
5. 占比統一
5.1 正負形占比統一
正負形的合理使用是圖標能否傳達準確意思的關鍵，因此也是常會出現的組成元素。在繪制圖標的正負形，注意保持占比統一，其中某個圖形正負形太大或太小，會顯得突兀、別扭，失去統一性，界面整體質感會大大降低。
5.2 顏色占比統一
在繪制圖標時，確定圖標中的主色和輔色，繪制時盡量保證主色和輔色占比相同，保持圖標的統一性。
6. 疏密統一
有規律地將線條組織在一起，利于形成統一的視覺風格。同時，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標，縮小后反而會影響識別。同時，給圖標留出一些空間，使線與線之間不會太擠，增強圖標的呼吸感。
安利一個國外的圖標大神Myicons?，簡單的線性圖標一樣可以很精致。
三、不同風格的圖標
目前市面上的圖標主要有四種類型，分別是：線性圖標、面性圖標、寫實擬物圖標和三維立體圖標。而不同的圖標中組合的元素都會有一些差異，相同類型的圖標中也會有不同的圖標風格。
1. 線性圖標
線性圖標主要還是由線性組成，設計師可以通過改變線的粗細、線的端點、圓角大小或加入一些面性元素在里面來使線性圖標更加豐富、有趣，但整體來說純線性圖標更纖細、簡潔，使得視覺沖擊力稍微弱了些。
1.1.1 單色
單色是線性最基礎的表達方式，這種設計風格單調、視覺沖擊較差，但是制作難度低，設計所耗費的時間頁更斷，因此常常會出現在個人中心頁中，僅需要有圖標顯示功能入口，設計要求并不高的功能模塊中。
1.1.2 雙色
雙色圖標與單色圖標相比，視覺沖擊力更強，應用范圍更廣，通常會融入品牌主色，是除了線面圖標外出現在首頁中的線性圖標。因為雙色圖標可以加入品牌色，增強品牌感的同時，使圖標增加了設計感，不會像單色圖標那么單調乏味，因此雙色圖標也會以“次要功能”的形式出現在首頁當中。
像在“去哪兒旅行App”和“平安銀行App”中，頁面已經存在一組視覺沖擊、視覺層級更高的一組面性圖標，但是因為業務需求露出更多功能入口，因此就可以使用線性圖標這種視覺沖擊力弱一點的圖標搭配，既不會搶走主視覺，也能滿足業務需求。
1.1.3 斷點圖標
斷點圖標在目前的app圖標設計上較少使用。雖然斷點風格圖標在表達上有一定的局限性，但是圖標設計感更強，圖標更有趣味性。
斷點圖標并不是隨便刪除某個描點，在斷點的位置選擇上和斷點的大小都是要注意的地方。斷點位置的選擇要注意兩點：
1 ) 保持相同角度，能更好地增強圖標的協調性，避免造成圖標的視覺混亂降低用戶的視覺體驗。
2 ) 選擇在線的拐角處，利用連續性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。
1.1.4 線面結合
在原本的線性圖標上加入色塊，就會產生新的設計風格--線面圖標。線面圖標比較特殊，圖標的視覺層級會隨著圖標中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強。因此在設計線面結合圖標時，要先確定圖標在該頁面中的重要程度，如果是主要功能則將色塊的占比加大。
1.2 線的影響
圖標中的線主要由兩個元素組成，一個是線的粗細，一個是線的端點，而這兩個元素也是主要控制線性圖標的性格。以常用的48px圖標盒子為例，常用線的粗細有2px、3px、4px，圖標的線越粗圖標越有力量感反之圖標越纖細；而圖標的圓角越小時圖標越穩重、專業，像一些辦公軟件、金融產品，圖標的圓角就比較小。圓角越大圖標越飽滿親和力更強，像一些兒童學習類軟件就會使用大圓角的圖標設計。
因此，圖標的線粗細與圓角大小，都根據不同產品類型與目標用戶確定。而大多數線性圖標主要有四種基礎造型：纖細+小圓角、纖細+大圓角、粗描邊+小圓角/無圓角、粗描邊+大圓角。
1.2.1 纖細+小圓角
精致、嚴謹，多用在銀行、新聞類APP。沒有圓角，會使圖標更加尖銳，對于銀行類APP會給人一種威脅，但是太大的圓角，顯得有點輕浮、可愛，不符合銀行莊嚴的感覺，所以稍微添加一些圓角，使圖標更有親和力的同時，也保留一些莊嚴的感覺。
1.2.2 纖細+大圓角
更加精致、有親和力，這種風格是目前市面上軟件使用得最多的一種線性圖標風格。
1.2.3 粗描邊+無圓角/小圓角
粗曠、個性、有很強的力量感。更多的用在運動、汽車這類主要用戶傾向男性的軟件，同時也會在一些潮流類電商軟件中出現，凸顯更有個性的設計風格。
1.2.4 粗描邊+大圓角
圓潤、可愛、親和力強，常用在偏向兒童的產品
2. 面性圖標
面性圖標時軟件使用的最多的一種圖標類型，設計師通過改變色塊、圖形圓角、正負形和底托等元素，讓面性圖標呈現不同的設計風格，但無論是哪種設計風格，面性圖標設計沖擊力相比面性圖標更強，因此市面上大多數核心功能都會用到面性圖標來提高功能的設計層級，讓功能在頁面中更加突出。
2.1 扁平風格扁平風格的圖標常為單色圖標，圖標整體沒有漸變、高光、陰影等裝飾性設計效果，因此更加簡潔，更突出功能本身，圖標功能性更強，圖標制作成本低，曾經也是風靡一時。但扁平風格的圖標缺少亮點與制作成本的原因，導致圖標同質化嚴重，缺少特點，很難被人記住，因此現在很少被使用。
2.2 漸變色塊
在扁平風的基礎上，在色塊上添加漸變色，在保留了扁平圖標的功能性外，使圖標色彩更加豐富，在不同類型的軟件中都可以使用這種風格，算是一個比較百搭的圖標風格。同時漸變色塊也是很多面性圖標的組合基礎，在漸變色塊這個基礎上還可以添加不同的效果形成不同設計風格。
在設計漸變色塊風格的圖標時要注意兩點：
1 ) 市面上的app都會選擇同類色作為漸變色，然后通過改變顏色的飽和度，使漸變色的明亮對比更加明顯的同時，顏色過渡也更加柔和舒服，使圖標更有通透感，增加視覺沖擊力。
2 ) 在設計這種有白色色塊在頂部的圖標時，可以給色塊添加一個淺淺的透明漸變，讓色塊過渡自然一些，同時也可以添加一層淺淺的陰影，增加層次感。
2.3 圖層疊加
圖層疊加風格的圖標看上去像兩個透明圖層疊加在一起的感覺，圖標層次感強，細節也更加豐富，圖標風格更新穎、更年輕化，因此如果在設計一個年輕人使用或者希望打造年輕化頁面感受的時候，可以嘗試使用圖層疊加風格。
繪制圖層疊加風格的圖標時要注意：
1 ) 重疊在一起的那個色塊是通過布爾運算得到的，并不是通過簡單的透明圖層得到的。而重疊在一起的那個色塊也不宜過于顯眼，畢竟看的是圖標的整體。因此可以參考一下“智行火車票”，通過改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標的變化，同時也不會是色塊太突兀影響觀感。
2 ) 盡量統一疊加部分圖形與圖標之間的占比。
2.4 毛玻璃
毛玻璃是近年最火的一種設計風格，不僅設計風格新穎、特別，而且還有很強的質感表現，因此不僅在金融產品，還是生鮮產品或票務產品，都有毛玻璃風格的圖標。
而在設計毛玻璃圖標時，里面也有很多細節需要注意：
1 ) 背景模糊效果不需要太大，有一種若隱若現的感覺就可以。如果調太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標，只需要將圖標的主色調低飽和度后，就可以使用。這樣的好處是不僅讓圖標顏色過渡更加自然，同時有更多的組合方式、更多的層次。
3 ) 使用邊緣光。毛玻璃圖標有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細節更加豐富。
2.5 晶白風格
晶白類圖標利用圓角正方形或圓形作為底托再在上面添加一個主色為白色的圖標，然后通過調節透明度、投影、漸變給圖標添加一些質感，是常見的圖標風格，也是使用了很久的一種設計風格。
后面也延伸出了另一種設計風格圖標主題通常不會是統一的造型，像喜馬拉雅這種圖標，圖標本身元素復雜、細節較多，形狀也更加不可控，因此用一個淺色圓形底托，將他們統一起來。不僅可以將復雜的圖形統一起來，還可以添加吸引人眼球的漸變色更好地增加圖標的視覺占比，有更強的視覺沖擊感。
在繪制晶白風格時，注意兩點：
1 ) 可以適當改變底托圖形的形狀，增強差異化。
2 ) 統一光源，越白的地方越亮，注意控制好透明度的變化與角度。
2.6 實物展示
這類圖標會出現在生鮮類、藥品類、潮流電商類產品中，因為使用圖標很難將這些類型概括起來，直接使用圖片展示更加直觀，但因為圖片細節、元素更多更復雜，如果使用太多會使圖標看起來很雜亂。
3. 寫實向圖標
寫實向圖標模擬現實中的物體，更貼近生活，用戶對這類圖標理解能力也更強，繪制難度也更高，繪制時間也更長。寫實向圖標除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來增強實感。常常用在運營設計上，或用在一些特殊界面模塊從而增強視覺層級。
3.1 輕擬物圖標
輕擬物圖標是最近很好的的設計風格，但是輕擬物圖標出現在界面設計上還是比較少的。因為輕擬物圖標元素比較復雜，視覺沖擊力強，放在界面上有可能搶走用戶對核心內容的關注度，通常會運用在運營設計長圖、彈窗、核心功能等。
而繪制輕擬物圖標，主要注意的是光影的打造。光影主要由這幾個元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標時，主要注意以下幾點：
1 ) 在繪制輕擬物圖標時，不一定需要使用統一色相中的顏色，可以通過改變顏色的飽和度明度的對比和冷暖色的對比來營造光影，使圖標色彩更豐富、對比更明顯。
2 ) 反光可以使用圖標主色的對比色，降低飽和度，提高明度，運用在輕擬物圖標邊緣，使邊緣更更清晰，不會糊在一起，圖標整體立體感更強。
3 ) 明暗對比越明顯，輕擬物圖標越顯通透、立體。
3.2 2.5D圖標
2.5D曾經是很火的一種設計風格，但是現在已經逐漸被輕擬物與建模替代。2.5D圖標固定展示了三個面，有很強的立體感，常常運用在科技類的網站設計中。
在繪制2.5D風格圖標時，要注意：
1)統一好圖標的厚度。
3.3 3D圖標
隨著時代進步，3D逐漸成為一個主流的設計風格。通過專業軟件給予了圖形材質質感、真實的光影，更加貼近生活真實物件，同時還可以配合動效的設計，有很強的視覺沖擊力和新鮮感。常常出現在網頁設計中、運營設計中。目前繪制3D圖標主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒有oc好，但是還是可以滿足日常工作。
而在繪制3D圖標需要注意以下幾點：
1 ) 統一主光源方向。建模里面會出現很多打光類型，如主光、輔光（有時不止一個）、邊緣光等。
2 ) 統一攝像機位置。攝像機與物體的距離、角度影響渲染的最終效果。
3 ) 用數值定義物體大小。建模軟件不像繪圖軟件那樣強調物體的數值大小，拉遠看物體就是小，拉近看就是大，做一個物體時還好，但是要做一組3D圖標時，就要定義好物體的大小，使圖標更加統一。
四、如何確定使用哪種類型的圖標
不同風格的圖標有著不同的特點，設計師要根據圖標放置位置和功能選擇圖標類型。其中最有決定性的因素就是圖標的重量，而影響圖標重量的因素有：占比、顏色、細節元素。線性圖標在界面中占比較少，因此看起來會更加簡潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標占比更高，視覺上會更加飽滿，同時顏色色塊使圖標更加顯眼，視覺沖擊力得到力增強，使用戶對圖標的感知力更高，是最常用的圖標類型，用在各個重要功能入口上；輕擬物和3D圖標除了占比高、顏色豐富，還有各種光影、材質的細節，圖標元素更多，視覺沖擊力也更強了，也因為圖標復雜、視覺沖擊力強，因此很少出現在界面上，通常運用在一些特殊運營入口或需要吸引用戶的大模塊中。
不同的類型在界面中也會搭配出現。
五、圖標的繪制
1. 圖標盒子
圖標盒子是輔助繪制圖標的一個工具，幫助設計師在設計圖標時更好地規范好各個圖標的尺寸大小。而圖標盒子也有很多種，我最常用的是48*48px，這個尺寸對于線條的控制比較方便，通常用1px、2px、3px。
工具始終都是工具，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個地方缺得越多，哪個地方就拉伸一點。
2. 圖標的繪制方法
圖標中會存在標準化圖標，像刪除就是一個垃圾桶、像首頁通常是一個家的圖標、還有搜索則是放大鏡的圖，照片是兩個山一個太陽，這些圖標都習慣以這種表達方式出現，用戶已經習慣了這種表現形式，因此對于標準化圖標，盡量維持以往的變現形式，讓用戶更好地理解圖標意思。
非標準化圖標可以細分為具象與抽象，對于具象類圖標，現實中有實物可以參照。這類圖標的設計較為簡單，可以在某度上尋找相關照片，根據實物的造型進行提煉和簡化。
抽象圖標則較為復雜，通常是某些特定行為的名詞，沒有具體直接的參照物。因此在設計前，我們要先充分理解功能本身，這個功能是什么、用戶怎么用，然后提煉關鍵詞，接著根據關鍵詞發散思維，尋找相關聯的圖形來表示含義。例如“社區”功能，功能目的是提供一個讓用戶互相交流的環境，同時吸引無目的的用戶逛起來發現感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關鍵詞：聚在一起、發現、交流。接著發散思維進行腦暴，聚在一起：一群人-圈子-同一個世界的人-星球，發現：看-眼睛；尋找-望遠鏡-雷達-指南針，交流：聊天-聊天氣泡-聲波。
六、圖標的使用場景
圖標運用在功能入口上是最基礎的使用場景之一，如首頁中的金剛區、個人中心都會用到很多圖標作為功能入口。
1. 金剛區
目前國內的APP包含的功能有很多，而金剛區的作用就整合產品功能并放置在首頁中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產品功能，增強用戶對產品的粘性。像美團，很多人對他的了解是一個外賣工具，但它里面還有很多其他功能，使用金剛區展示它多元化的服務。
金剛區圖標通常會有1～3行，根據業務具體需求做調整，在每行中會有4～5個圖標。尺寸范圍一般在40px～48px左右（@1x），同時會根據具體的業務需求，調整大小，最終都是一預覽效果為準。
2. 個人中心
個人中心是個人類型功能、運營活動入口和工具的集合地，是除了金剛區外，含圖標最多的一個地方。個人中心中包含很多不同類型的功能，可以使用卡片式的設計，將功能圖標更好地分類。在圖標風格的選擇上，個人類型功能是最重要的功能，通常會以面性風格放置在頂部，如果個人中心中需要展示運營入口時，需要減弱個人類型功能圖標的視覺沖擊，會使用線性風格圖標。
3. 運營入口
運營入口主要作用是讓用戶點擊后跳轉到產品活動頁，因此具有強視覺沖擊力的圖標，會更吸引用戶眼球，從而提高點擊運營入口的機會。
因此運營入口上，通常會使用面性圖標、寫實向圖標或3d圖標。因為寫實向圖標或3D圖標可以提高視覺層級，因此經常運用在主要運營板塊上，而面性圖標相比下較弱，當頁面已存在一個主視覺或主要功能時，運用在運營板塊上。
4. 主題板塊
在軟件中會有很多不同主題的信息板塊，同時信息板塊間有較大的差異，如果全部展示出來會使頁面樣式不同統一、信息混亂導致降低用戶的閱讀體驗。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關鍵信息在頁面中，保證視覺統一的同時，還可以起到流量分發的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗。
純文字的排版在信息流中略顯枯燥，而圖標在主題板塊中起到潤色主題的作用，渲染主題氣氛，提高不同主題板塊的識別度與差異化。對于一些長標題的主題板塊，只需要記住圖標就能快速定位主題板塊位置。
5. 底部tab欄
底部tab欄功能數量通常在2～5個，在設計時，要設計點擊前和點擊后兩個圖標狀態，同時幫助兩個狀態是有明顯的變化。底部tab欄圖標大小通常在22px（@1x）左右，而圖標底下的文字時10px（@1x）。底部tab欄作為最常出現的區域，是傳達產品品牌感、提升產品辨識度、記憶點的重要區域，很多產品都會在底部tab欄的圖標設計上加入品牌元素，增強辨識度。
七、如何提高圖標設計能力
1. 階段一：臨摹
臨摹是人類學習一個新技能開始，就像嬰兒學習父母說話一樣。但是一開始很多都不會臨摹，或者照著畫也不會，那我們應該如何去做？
1.1 臨摹效果不佳
1 ) 提高審美能力，多看一些主流的圖標，可以上追波看看目前流行的設計風格，不行的話就去看看大廠都在畫怎樣的圖標。
2 ) 明確自己的能力，對自己目前的設計水平有一個客觀的評價，到一個怎樣的水平。很多人都急于求成，最基礎的線性圖標都不會就上來搞輕擬物，畫來畫去都不好看，最后就放棄了。
3 ) 敢于支出自己的不足，許多人畫了許多時間去畫一組圖標，就很容易被自己催眠，以為自己已經畫得很好了，其實還會有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對比原作，自 己有哪些地方沒有原作做得好的
1.2 會了，但沒完全會
什么是會了，指的是可以繪制出于優秀原作一樣的圖標；什么是沒完全會，指的是不知道原作是怎么達到這個好看的效果的。而且很重要的一點是，你臨摹的作品可能也有一些不好，需要改進的地方，以此在這個階段我們要做的是：
1 ) 多看別人總結的知識點，知道如何去判斷一個圖標是否還有可以改進的地方，這樣繪制是不是正確的
2 ) 懂得總結與思考，原作是用來什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪
2. 階段二：半原創
臨摹是一個提升自己的手法，但不代表可以直接用到自己的作品中，直接復制別人的設計，并不叫設計師，復制粘貼誰不會啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創。這里說的半原創不是指在別人圖標的基礎上加上兩筆就是半原創，而是要吸取了優秀圖標的優點后，重新設計出一個有相同特點的圖標。那我們應該如何半原創呢？
1 ) 還是多看，但是不同于臨摹階段，我們在臨摹的時候還要多想，這個圖標的特點是什么、怎么做、還能怎么用，積累圖標不同的表現形式2 ) 多練，這個建立在多臨摹上，目的知道別人的技法是什么做的，練習了不同的技法后，將它們再融合在一起
3. 階段三：原創
第三個階段，也是最難得階段。目前很多情況都是只能成為融圖設計師，將不同作品優秀的點組合起來。但如果要建立自己的風格也是要做融圖設計師的基礎上，多想、多嘗試，敢于突破，在一次次的融圖后，發現出自己的特點，為自己的作品打上自己標簽，輸出具有差異化特點的設計。最有印象的就是夸克的設計，品牌特色很明顯，其實我們每個人也可以成為一個品牌，只要我們足夠努力
作者：阿恒的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
// 前言
良好的互動氛圍是社區產品的核心，貼吧作為一款近二十歲的社區產品，設計師秉承年輕包容的產品理念，始終在探索屬于貼吧的特色互動形態，在這過程中，希望通過互動系統設計方法，升級貼吧互動體驗，培養用戶心智，形成良性互動鏈路，最終提升用戶活躍。
一、探索互動系統的設計方法
較為簡單的互動形態為作者生產內容，瀏覽者為喜歡的內容點贊、回復，甚至私信創作者，這些互動行為會激勵創作者繼續生產內容。
基于以上互動形態我們搭建了循環互動系統，創作者為瀏覽者供給內容后，我們需要在互動環節引導互動行為發生，在觸達環節優化互動信息觸達，在反饋環節引導參與互動反饋，從而形成正向循環。結合實際的項目經驗我們發現互動系統運轉離不開“信息更易懂”、“路徑更順暢”、“玩法有驚喜”這三個要素。
二、尋找貼吧互動設計機會點
貼吧的角色是由創作者—樓主、瀏覽者—吧友組成，良好的產品運轉模式為：創作者向瀏覽者生產供給內容，瀏覽者對其互動激勵。但貼吧多年來互動鏈路中斷，導致從互動到供給無法形成正向循環。
1.特色場景洞察問題
貼吧的場景及形態廣泛，與其他產品有所不同，具有內容形式多樣、瀏覽場景獨特、互動類型廣泛、回復邏輯精細、互動玩法多元等特點，通過走查上述特色場景發現諸如鏈路中斷、功能缺失、結構混亂、內容丟失等問題。
2.下探設計機會點
基于以上問題的共性，我們可以從中總結出核心體驗斷點：
a.看不懂：回復列表內容結構不合理、收藏后看不懂更新的樓層內容；
b.看不到：Push通路不穩定無法觸達用戶、大多用戶關閉推送push；
c.沒意思：贊、回復等互動方式老舊，刷貼、簽到行為重復，沒有特別的玩法。
下面會使用上述總結的互動系統設計方法，對貼吧現存問題進行體驗升級，提高用戶的互動積極性。
三、 互動系統設計方法應用舉例
1.信息更易懂
貼吧的回復場景多，邏輯復雜，創作者與瀏覽者在看到對方的回復后，內容展示需要易讀易懂，彼此才會有意愿回復反饋。
a.查看列表—優化結構
查看評論列表的舊體驗存在回復對象錯亂、內容缺失的問題，新體驗根據語境自由展現原貼、樓層、樓中樓三層結構，承接上下文關系，降低用戶理解成本，并將其復用在查看點贊、查看@ 等場景中。
b.查看詳情—精準定位
點擊列表頁后的精準定位也是易懂的關鍵，我們對內容被折疊、定位不準舊體驗問題進行優化，新體驗默認展開原貼及樓層內容，細化點擊貼子、樓層、樓中樓后的定位邏輯，幫助用戶精準看到想看到的內容。
c.繼續消費—延長步長
用戶從回復列表進入查看詳情頁后，舊體驗只展示當前的評論樓層，看不到上下文內容。新體驗在定位樓層前后增加樓層內容，同時通過“查看之前樓層”和“加載之后樓層”方式繼續瀏覽，延長步長。
2.路徑更順暢
產品的推送Push向用戶推送感興趣的信息，需要穩定的觸達用戶且有意愿打開，才能達到召回用戶目的。
a.打開推送開關—場景引導
舊體驗引導開啟push場景缺失，方式過于生硬，新體驗選取貼吧高頻互動場景，在用戶簽到后、回復后、發布后選擇合適形態展現引導，提高推送通知打開率。
b.展示推送—有吸引力
舊體驗互動push內容表述凌亂，新體驗將push內容結構化，以“用戶昵稱+動作+互動對象”的結構展示推送內容，并強化互動用戶的頭像，適當展示互動詳情，吸引用戶點擊。
3.玩法有驚喜
貼吧點贊、回復等互動方式存在多年，缺乏新穎性，用戶互動心智疲軟，急需通過輕量、有趣的創新玩法，刺激瀏覽者互動。
a.新增動態表情
結合貼吧元素，補充單擊、長按、雙擊的遞進互動點贊方式，給予用戶感官刺激，提升點贊爽感。
結合時效性運營活動，增加高考、勞動節、618活動點贊，營造驚喜感。
首次私信提供貼吧IP表情，助力用戶關系破冰。后續私信增加開香檳、丟炮竹以及丟炮竹炸滑稽雙向互動玩法，持續提升用戶互動意愿。
b.新增潮流表態
虛擬形式是近幾年受用戶喜愛的潮流表態玩法，探索虛擬形輕互動方式，互動后通過私信觸達，并沉淀社交貨幣資產，進而引導雙向互動。
// 小結
文本搭建的“信息更易懂”、“路徑更順暢”、“玩法有驚喜”互動系統設計方法，已將其運用在貼吧的特色互動體驗升級中，并取得正向數據和用戶反饋，希望該項目的設計方法及經驗能為大家提供參考。
作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
// 寫在前面
端到端導流是指在產品矩陣體系內引導優質產品的用戶使用另外一款產品，帶來使用量的提升，從而實現用戶規模提升的一種增長手段。隨業務快速增長，有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產品矩陣，依托各端流量實現矩陣產品間的導流，逐步積累用戶規模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導流體驗升級的項目為例，分享導流增長探索的設計思路與實踐經驗。
// 為什么要做導流
導流的目的
對于業務本身而言，隨著移動互聯網流量紅利期的結束，獲取新用戶的成本越來越高，不管是新產品還是成熟型產品，都需要通過導流的手段來持續擴充新用戶。其次，對于有駕產品生態而言，需要各端產品間的相互聯動，協同發揮優勢，實現流量價值最大化。
導流的優勢
成本低，相較于投放、活動等渠道流量獲取方式，矩陣導流成本低；
高意向，用戶購車意向明確更容易實現商業轉化；
可共享，用戶數據及行為關聯互通。
// 如何做好導流設計
1.問題分析
通過梳理核心場景的4種導流條，發現各個場景導流形式各異，用戶缺乏統一認知，導流引導語單一內容吸引力弱。在用戶在瀏覽頁面時，點擊功能入口或想要繼續查看更多內容，需要下載APP才能繼續阻礙用戶瀏覽：
缺乏統一認知：視覺表達形式不成體系，用戶感知不夠；
內容吸引力弱：內容單一缺乏吸引力，用戶沒有點擊欲望；
阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗。
從導流鏈路的用戶行為來看，整個流程下載路徑過長，發現用戶流失較大的轉化點：
從小程序落地頁到下載頁：在進入小程序瀏覽頁面時，用戶沒有注意到導流條就滑走了；
點擊導流條進入下載頁：點擊導流條會先調起導流彈窗，點擊確認后再進入到下載頁，用戶未選擇下載就退出了。
2.明確設計方向
針對導流現狀缺乏統一認知，內容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題，我們搭建了一個完整的導流鏈路圖，根據用戶增長模型，把用戶生命周期各節點的用戶行為與產品觸點一一羅列出來，找到增長路徑的設計機會點。
通過以上的問題分析，如何建立用戶和產品的鏈接，保障友好的體驗，是本次導流升級要解決的問題。根據用戶關鍵行為，我們可以將整個導流鏈路拆分為3個階段來挖掘主要機會點：
下載前：興趣激發導流吸引，建立用戶穩定認知；
下載中：強化用戶轉化動機，刺激用戶完成下載；
下載后：保障還原體驗暢通，提升首次使用體驗。
下面將分別介紹導流下載前階段的設計落地實踐，以及下載中、下載后階段的延伸設計思考。
// 下載前
1.強化觸點吸引
是否能成功引起用戶注意，是轉化開始的第一步，統一的視覺風格和滿足用戶訴求的內容，有利于增強導流條的吸引力。
1）收斂導流條類型
針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉預期的體驗問題，下線了阻斷式和截斷式兩種體驗不友好的導流類型，將原來4種導流類型收斂為2種，僅保留通用導流條和功能延展導流條，基于這2種導流形態進行深入的設計探索。
2）建立通用視覺標準
針對【缺乏統一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題，建立了通用導流條標準化規范。統一視覺形態，優化為頁面內通欄嵌入式，同時融入品牌色強化用戶感知，根據頁面布局制定了不同的展示規則。
上線后，內嵌導流條在展現受限的情況下，導流轉化數據與改版前基本持平，為了進一步提升導流的點擊效果，開始探索場景化定制提轉的設計方向。
3）定制場景化內容
針對【內容吸引力弱】內容單一缺乏吸引力、用戶沒有點擊欲望的內容問題，在通用標準化形態的基礎上，根據不同場景用戶訴求點，豐富導流內容。分別從內容定制、按鈕文案優化、以及氛圍強化3個方向驗證對轉化的影響。
內容定制：豐富導流利益點、場景化內容更能激發用戶興趣，促進轉化達成；
按鈕文案：轉化按鈕文案導向性明確、內容與導流利益點匹配，可以助力按鈕轉化提升；
氛圍強化：導流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導流條點擊。
2.拓展場景擴量
復利通用標準導流條的成功經驗，應用到功能延展類導流條中繼續驗證有效性，從產品價值點出發，挖掘高流量場景的機會點從而帶來轉化增量。
1）價值傳遞
根據小程序和APP兩端各自的不同點，分別從功能差異及體驗差異兩個方向進行優化。
APP特有功能：APP完善的功能體驗可以更好滿足用戶訴求，例如參配瀏覽場景下，引導用戶體驗搜索及橫屏查看的高頻功能，對于導流轉化有正向幫助；
各端體驗差異：小程序和APP兩端體驗存在差異，例如圖片瀏覽場景下，APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗，能夠刺激用戶轉化。
2）價值延續
當用戶完成核心內容消費后，是否可以引導用戶去APP繼續瀏覽更多相關內容，進而引導用戶下載呢？
服務透傳：平臺服務內容傳遞，例如在內容落地頁文末增加品牌廣告導流條，幫助用戶建立品牌認知；
相關推薦：引導相關內容消費，例如在文章或視頻頁增加相關推薦導流條，引導用戶瀏覽更多相似內容。
// 下載中
當用戶通過導流條進入到下載流程時，還有哪些手段可以刺激用戶激活減少流失呢？
強化下載動機：下載頁前置APP落地頁內容，例如將通用下載頁優化為場景化下載頁，給用戶超前產品體驗吸引轉化；
減少用戶流失：縮短鏈路簡化流程，例如可在下載中間頁完成應用下載，同時退出下載頁時增加挽留。
// 下載后
當用戶在應用商店下載完成后，我們還能做哪些提升首次啟動APP的體驗呢？
還原鏈路暢通：提升場景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導新用戶探索功能，根據用戶興趣推薦適合的內容。
以上內容是下載中和下載后階段導流優化方向的一些延伸設計思考，為大家提供可以繼續探索的方向。
// 寫在最后
總結一下本篇文章關于導流的體驗設計要點：
全鏈路洞察，對導流鏈路進行拆解，通過盤點導流鏈路的用戶行為，明確每個節點的設計方向；
降低廣告干擾性，減少用戶瀏覽過程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導，讓用戶專注于產品本身傳遞的價值，引領用戶完成對產品的探索從而完成下載激活。
作者：百度MEUX
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
什么是“有駕”
【有駕】是百度旗下的汽車信息與服務平臺，累計用戶超5.3億，致力于為用戶提供真實、可靠的看選買車服務，以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。
現狀分析
有駕品牌在孵化初期，重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號，減少歧義，強化用戶的感知。
但是隨著品牌持續運營進入新的階段，我們發現現有的設計無法滿足后續的運營訴求了，主要體現在：
品牌logo：不能體現汽車的行業屬性，缺乏成體系的品牌符號和VI體系，色彩上也不夠符合時下潮流的年輕配色體系。
品牌活動：品牌關聯度弱，活動維度單一。
項目概述
因此，我們重新梳理有駕的品牌定位與調性，借助本次品牌升級，打造有駕差異化風格，形成獨有的視覺印記。
因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知，在原有基礎上進行品牌標識的探索及應用，以強化品牌感知，提升品牌的競爭力，整合業務資源做心智觸達。
前期分析
前期我們對汽車垂類的競品進行了一輪調研，并且結合有駕的用戶群里，尋找有駕品牌的差異點。
有駕用戶群體年輕化為主，普遍具有高學歷，集中在新一線二線城市。
通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后，我們確定了有駕品牌設計的四個核心關鍵詞：年輕、科技、未來、專業。
建立體系
在明確設計方向后，我們梳理了線上線下的所有品牌觸點，結合前期的調研結論，匯總出了有駕設計系統的完整框架，以確保品牌設計的完整性和靈活適用性。
設計落地
基于前期分析洞察結論，我們在繼承圓形和車形的基礎上，對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入，簡化圖形形態，嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。
相對于升級前，新版的logo加入汽車元素，解決升級前logo的行業屬性不明確的問題，讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋，輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。
符號提煉
確定品牌logo后，為了確保品牌能夠更好的拓展應用，進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型，造型偏向輪胎；在不破壞原有型的基礎上，加入一些折角的質感的變化，使圖形變化更加豐富，更有識別度。
設計語言
為了更好的觸達到各業務場景，所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向，以適配不同的落地場景。結合有駕的年輕化，科技感的設計目標，探索出以下三種質感呈現：
符號拓展
在提取的形狀基礎上進行變形，增加折疊細節。在大事件活動，海報等場景使用，增加品牌關聯度。
設計字體
結合全新的品牌定位，我們也優化了有駕的品牌字體，從細節出透出有駕的品牌感知。
品牌手冊
新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。
目前我們也對現有的品牌手冊進行拓展和完善，同步到業務方，以便更好的保證各業務場景觸點下品牌的認知和統一，達到提質增效的目的。
品牌落地
除了對品牌對角度的塑造和升級，我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中，讓有駕品牌形象更加立體多元。
結語
目前有駕品牌升級已經取得階段性成果，沉淀出更加完善的品牌資產，不僅提升設計效率保證全鏈路的品牌曝光，也為業務規模化打下基礎。之后我們也將不斷完善和擴充品牌資產，將設計成果不斷落地到業務中，細化業務目標并與設計目標緊密結合，多維度助力業務的高速發展。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文講述了“峰終定律”的定義，并結合筆者生活中的兩個例子做了圖文分析，最后通過學習海底撈的案例，然后結合顧客角度將一次糟糕的活動進行了改進。
峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經濟學獎獲得者，心理學家）提出的——他發現人們對體驗（體驗事物或者產品）的記憶由兩個因素決定：
即，除了峰值和終值時之外的其他體驗，無論好與不好體驗的比重是多少，體驗時間的長短，對記憶或感受都沒那么大影響，會被選擇性忽略。
概念講完，下面筆者結合去飯店買飯的故事，使用“峰終定律”進行圖文分析，為什么一家飯店給我的體驗非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。
之前有一段時間飯店聯合天地壹號搞活動，買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店，我特意說明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。
我看著店里配餐員配餐、出餐，然后我問這份是不是我的，店里服務員支支吾吾，也沒有看著我，然后那份飯被拿去跟天地壹號的工作人員合影，一張不滿意又拍一張，一個角度拍完又換一個角度。最后，飯店的服務員才把那份飯給我，當時我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時間就一個小時，為了能睡好點還要吃得快點。
這家店給我的體驗就是，不把用戶當用戶，心里非常不是滋味。
而當我向同事說起這家店時，我會推薦手撕雞飯，這是我在廣州吃過的最好吃的手撕雞飯， 沒有之一。同時，我還會說上面的故事給同事，最后評價道：可以試試的，另外，出餐質量有問題他們也會給你換一份的。
當我說完這次的經歷給同事聽，同事并沒有表示會去嘗試一次，因為我說的故事，又因為價格也不便宜。所以說，店鋪（或者說品牌）是在食物（或者說餐品）之前被消費的，這是給用戶留下第一印象的關鍵，第一印象不好，即便是廣州第一手撕雞，也不會去嘗試。
那么使用“峰終定律”去分析這次糟糕的就餐體驗就是：
峰值有兩個，正峰值是廣州第一手撕雞的“口味”，負峰值是“員工服務”。負峰值的出現，說明了店家在活動開始前并沒有設計好活動流程，服務員也就沒有足夠的授權去處理和應對。
終值是“離店”時的不爽，店家并沒有作出任何的正面回應，沒有表達歉意，沒有意識到這樣做會給顧客造成怎樣的影響。
“員工服務”是直接突破了我的忍耐底線，“離店”時店家的不作為再次挑戰了我的忍耐底線。短時間內兩次挑戰我的忍耐底線，店家不但“失去”了我，我的幾個同事也不會是潛在客戶了。
忍耐底線不是卡尼曼教授的理論，是我結合了梁寧老師講過的內容，然后加到了這張“用戶體驗模型”圖上。
梁寧老師講的是：“PC時代用戶等待一個頁面打開的忍耐底線平均數是7秒，等了7秒還沒打開，基本上99%的用戶就會離開。所以，對成本的控制是本分，但是不能挑戰用戶的忍耐底線。”
某天中午我發現寫字樓下新開了一家飯店，我到店里問老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個菜用什么材料做，哪個湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺不錯。后面選擇了老板推薦的肉餅飯，發現真合我胃口。
上兩周有兩天中午休息時都到店里想點肉餅飯，但是連續兩天都在我來之前賣完了，之后老板說可以掃門口的小程序預約下單，第二天上班我早早的就預約了肉餅飯，到店之后老板已經打包好了，我把訂單信息給老板看，老板說了一句我聽到就覺得好笑，并且每當給人推薦這家店時就說的一句話：“這是我們專門給您留的肉餅飯?！?
當我笑著回應謝謝的時候我也在想，這飯是我在小程序上面早早預定的，老板還說是專門我留的；因為我先付錢了，所以老板不賣給別人了。
我又想到，這家店的老板是愿意站在顧客的角度來提供對應的服務的，并且我也確實感受到了老板的真誠、熱情。
于是我把這家店介紹給了幾個同事，他們都表示下次沒有自己帶午餐的時候會試一下，并且有兩個同事聽了我的推薦后去下單了，其中有一位同事表示會回購。
這家店給我的體驗就是，不把用戶當流量，心里有用戶，產品可以，用戶自然會安利給身邊人嘗試一下。
使用“峰終定律”去分析這次就餐體驗就是：
有兩個正峰值，第一個正峰值是讓我感受到店家心里有顧客的“員工服務”。第二個正峰值是“口味”，這里甚至有一點點主觀上的小驚喜：當時抱著不知道會不會踩雷，試試新店的心態，當我試到肉餅飯時，小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。
小結：
當我跟同事同事說起第一家飯店體驗不好的時候，并不是說他的“港式氛圍”裝修不好，不是說出餐有問題不給換新的，手撕雞也是廣州最好吃的，而是說，這家店給我的感覺是他并不像跟用戶建立長期關系，只做一桿子買賣。于是他們并不注重維護客情關系，當他們把合過影的手撕雞飯遞給我時，連安撫情緒的話都沒有，就餐體驗自然就糟糕透了。
那么如果我是這家燒臘飯店的主理人，那我會如何設計本次活動？
我們先看看餐飲行業的巨頭都是怎么做的，因服務被大家口口相傳的海底撈就是非常值的學習的對象。
通過模型，我有以下幾點感悟：
服務觸點：用戶為了完成目標，需要做一系列連續的行為，而這一連串行為中會涉及到一個一個的用戶與產品完成交互的觸點，這就是服務觸。比如上圖所示的，海底撈出于提高轉化率、降低顧客等待叫號時的無聊感等原因，在顧客排隊時可以體驗免費的美甲服務、免費擦鞋服務等。
帶著學習完海底撈得出的感悟，下面我來嘗試思考一下，我現在是這家燒臘飯店的主理人，那我會這樣設計本次活動：
首先需要了解我們的顧客：
1、顧客畫像
附近街坊、附近上班族，方便快捷解決午/晚餐。
2、顧客預期
選擇符合自己口味的菜品，店內就餐/打包回公司吃；店家穩定出餐（口味穩定、不要有異物等）；不希望排長龍。
3、服務觸點
點餐時、支付時、等待出餐時（排隊）、（打包完）出餐時、離店時。
其次，才到本次活動的設計：
1、背景
贊助商天地壹號需要做品牌推廣，找到我們合作，方案就是消費即送天地壹號一瓶。
2、目的
幫助合作伙伴宣傳的同時，吸引新的顧客，回饋老顧客，提升營業額。
3、具體方案
3.1、制作印有“12.1~12.3日，消費即送天地壹號一瓶，送完即止”的宣傳海報，并且放置在店鋪門口。
3.2、完善服務流程。（請看下圖）
3.3、設置幾種異常情況的應對方案。（請看下圖）
完善好服務流程，提前設置好幾個異常情況的應對方案，相比于海底撈一連串的各種免費服務，其實花不了多少實際的金錢成本。但是卻能用最少的資源，最大程度的避免“負峰值”的出現。
另外，天地壹號的工作人員提出合影，飯店應該用自己的員工餐，而不是用顧客的。這其實不是異常情況的應對方案，而是作為服務行業從業人員該有的覺悟。
本文到此結束，朋友們如果設計/體驗了好的“峰終體驗”的案例，麻煩在評論區告知我一聲，讓我也去體驗一把~
作者：我是Berwin
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
時間對于我們每個人來說都極為重要和珍貴。隨著生活節奏的加速，很多產品也都開始注重和考慮對于用戶時間的節省和分配。本文重點分享三種在交互設計中幫助用戶「同時做幾件事」的設計方法，以及其對應的優秀案例：
希望會為你帶來更多的設計靈感。
通過將屏幕的布局進行分割處理，可同時呈現多項內容，讓用戶自由選擇任務主次，同時處理多項任務。分屏設計很常見，但其中的體驗細節卻依舊值得研究和優化。
案例1
微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時支持分屏功能，還能夠調整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機尺寸，體驗順暢，看視頻、接微信兩不誤：
案例 2
bilibili 在移動端的視頻通過小窗模式可以不間斷播放，不僅可以在 App 內或外呈現小窗模式，正在播的視頻，在被臨時打斷退出視頻后，還可以用音頻的方式繼續播放：
案例 3
微信的新功能，在你閱讀文章時依舊能看到朋友發來的微信消息，可以直接在當前頁面回復消息，避免你在看文章時閱讀不了微信消息。你還可以將信息“標記未讀”，一會兒再做處理：
案例4
微信視頻號改版后，點擊視頻號下方的博主名稱和頭像，下方彈窗會彈出該博主的主頁和其他視頻，而當前正在播放的視頻會漸漸呈現小屏播放，視頻內容不會被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內容：
案例 5
在微信訂閱號中展示的視頻內容可以通過劃到右下角變成小窗播放音頻，既可以聽內容，也不影響你繼續瀏覽訂閱號的其他內容：
產品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時進行。
案例 1
釘釘的移動端浮窗功能，向右滑動退出正在操作的頁面時，就會出現添加浮窗區域，用于收錄未做完的操作。同時顯示出已添加浮窗的內容數量，最多添加 5 個：
案例2
微信的浮窗功能也可以幫助用戶更快捷地收錄未及時閱讀的內容，在打開時還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時間來閱讀長篇文章，可以更合理地掌控閱讀節奏：
案例3
微信讀書 App 會在你跳讀到其他章節時，在頁面下方顯示“返回原進度”的按鈕，方便你在跳讀后回來繼續閱讀：
案例4
網易163 郵箱側重于為你呈現工作的多線程。每點開一封郵件，頁面上方會增加一個類似瀏覽器標簽頁的 Tab，你可以通過它們查看自己的工作和閱讀軌跡。當你在寫郵件時，同時又收到了其他的新郵件，去查看新郵件之后，可以通過 Tab 直接回到郵件編輯頁面，繼續編寫剛才的郵件：
案例5
使用釘釘發起會議邀請，如果中途退出，系統幫助你自動保存。再發起會議邀請時也會給出上次操作的提示，幫你續寫內容：
用戶可以選擇忽略或隱藏并不重要的、正在進程中的任務，將更多的時間用在其他事情而非無法控制的等待上。
案例1
iOS 系統中，當你在不同 App 之間傳遞文件時，如果文件過大，彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”，用戶點擊后可以繼續做其他操作，并不妨礙后臺的文件傳輸。
案例2
微信在接收超大文件時，增加了“發送給朋友”的選項，你不必等待文件在自己這邊下載完成后再發送，可以直接發送源文件給對方，同時下載：
案例3
微信撥打語音的界面，在等待好友接聽的過程中，你可以看到對方朋友圈的動態，緩解無聊的等待，也為即將進行的語音聊天提供了話題：
作者：元堯
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在上一篇《如何設計高質量B端調研問卷？用戶研究方法(一)》一文中，詳細介紹了如何通過調研問卷的方式，整理發現用戶的淺層需求。
本文將分享另一個更為深層全面的B端用戶研究方法——用戶訪談。通過面對面地溝通，以及觀察用戶的表情、行為去挖掘更深層的需求。（文末附模板下載鏈接）
下面是本次分享的文章結構，標??的為重點部分。
01
用戶訪談的兩種路徑
用戶訪談通?？梢圆捎?strong>線上會議、電話或者線下面對面交流兩種形式。
線上會議和電話訪談的優勢顯而易見，可以不受地域限制展開調研訪談，整體的成本也比較低，設計師可以自己找領導或者協調資源去推動。
缺點也是比較明顯，溝通起來效率低下，比如我們一定有過“電話里說不清，我們見面詳談”的經歷。
所以，相較而言線下訪談無疑是最佳的調研形式。首先當面溝通更加高效，其次對于搭載硬件設備的產品來說，讓受訪者在真實場景里操作演示，可以發現更多隱性問題。
02
常見的3種受訪者類型
在訪談過程中通常會接觸到以下3種類型的受訪用戶，不同類型的用戶我們應該怎么接觸交流呢？
話癆型的受訪者占大多數，通常就是想法、意見比較多。他們不僅有一大堆不滿意的點要訴說，甚至連對應的解決方案都想好了。
整體接觸下來，我覺得該類型的受訪者，可提供的有價值信息會更多一點。只不過我們要學會過濾信息。因為他們的修飾用詞通常比較多，例如：“太難用”、“超級麻煩”、“哎 我真的是受不了啊”...
訪談話癆型的受訪者，我們需要注意無論怎么聊都要緊扣主題，防止變成了吐槽專場。
其次也要表達肯定，安撫情緒，并對問題進行進一步提問：“您的這些建議真的很棒，也給我們提供新的思路，我都記下來了，我還想確認下，剛才您說的3個關于結算環節的問題，哪一個給您造成的困擾最大？”
顧名思義，受訪者可能是因為性格內向或害怕說錯了不好意思等緣故，在受訪過程中問一句答一句，比較容易冷場。答案的價值也比較低，例如：“對，是的”、“還行吧”、“沒啥感覺啊”、“反正就這樣用用吧”、“說不上來”。
這種情況下要嘗試緩解下氛圍壓力，換個形式溝通：“就是隨便聊聊，公司派我們來呢，就是因為非常關注用戶的使用感受，想收集一波用戶反饋與建議，您有啥不滿意的地方都可以跟我講講，越多越好?！?/span>
其次我們在提問的時候也要帶有引導性，例如：“還有呢、然后呢、具體說說呢”，如果對方實在說不出所以然，最有效的辦法就是進入上機操作環節，通常操作過程中那些問題也會隨之暴露出來。
專業型的受訪者一般是老板或者店長、經理崗位的員工，他們對于產品或整個門店乃至行業都了解的比較透徹。
和這樣的受訪者溝通，不僅是局限于產品的一些問題挖掘，他們會從這個行業的角度闡述一些個人的見解觀點，給我們提供一些有價值的優化方案或者改進方向。
例如餐飲的老板其實并不是很關心點餐、結算的流程有多么的順暢高效，畢竟他們不需要親自去做這些執行，而且坦率的說，對于絕大部分產品而言，好用并不能成為其核心競爭力。
他們關心的是如何帶來更大的商業價值，類似于如何提升坪效，如何提升門店會員的儲值能力等等。而這些老板的關注點，也會給我們未來的產品優化方向打開新的思路，去思考如何給我們的用戶創造更高的商業價值。
03
我們在做訪談之前，首先一定要熟悉產品業務的相關背景、受訪商戶的基本情況。
訪談過程中可能會提及一些專業名詞，例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎相關知識以后，省去了不必要的解釋環節，可以使訪談推進地更順利。
其次建議要了解下行業相關的基礎知識。尤其是餐飲業態，華南、北方、四川等地都因為飲食習慣的不同，在產品的功能和使用上的需求也是相差很大。具備了這些知識點以后，在提問過程中，也更利于提出一些深刻的問題，而不是浮于表面的提問。
行業相關的分析報告，可以去艾瑞、36氪、發現報告等網站進行查詢收集，在此不做贅述。
在訪談初期，需要準備一份訪談框架，但并不意味著我們整個過程只能按提綱來提問。尤其是B端這種千載難逢的訪談機會，只按規定的框架提問屬實是太吃虧了。所以在時間允許的情況下，除了框架以內的問題，盡可能多發散的去提問。
例如餐飲業態，會有各種不同載體的終端設備聯動使用，一體機POS、手持的POS、廚房KDS、廚顯大屏、各類打印機等等都可以順便了解、調研下，讓我們對于全鏈路的協作流程也會有更深刻的認知。
再例如后廚會涉及到KDS大屏顯示，可以問問目前的大屏顯示是否夠清晰（字夠大），也可以和負責海鮮稱重的工作人員聊聊，海鮮的售賣、計價流程，以及菜品雙單位（例如：1【條】魚，重量1【公斤】）的使用等等。
在溝通過程中，一定會有一些觸類旁通的收獲與問題被發現。這些問題也許來自一個模塊、或者某個特定角色，又或者是主產品關聯的其他后臺產品。
在提問的時候要考慮到受訪者的年紀和理解能力，如果措辭過于專業，可能會導致受訪者理解不到位，因此溝通的過程中要盡可能的說大白話。
我們都知道沒有經歷過的事，很難感同身受。有時候看到客戶群里，因為產品的各種原因導致商戶情緒激動，我們理智上非常理解，但是情感上很難共鳴。
因此每次的門店調研，我都會抓住機會觀察整個門店的運營情況，去感受那種忙碌的氛圍。有時候開始進入營業高峰期，機器出現卡頓或者外賣不接單等情況時，自己的情緒都會一下子緊張起來，也能夠深刻感受到產品給客戶帶來的困擾。
當再次有產品迭代優化時，這些體驗總能讓自己能更容易代入用戶的角度思考問題。
除了去體會產品對情緒的直接影響，還可以關注下整個門店的布局、收銀產品的數量與擺放位置、不同產品的協同使用等等。
這些都會幫助我們發現，到底什么是門店運營環節里最重要的模塊。
在訪談過程中，不排除受訪客戶會反饋一些暫時無法解決的問題。這時候一定要告訴受訪商戶：“您的問題我已經記錄下來，回去會針對這個問題反饋上報，最遲X天我會讓顧問給您回復的”。
這么做一方面也是細節處維護公司品牌的整體售后體驗，其次也有助于我們再次回訪時，受訪商戶樂意花時間跟我們聊。
04
了解了用戶訪談的一些基本信息和注意點以后，到了本文核心部分，關于整個訪談的推進過程，一共分為3個階段。
首先明確訪談的類型，用戶訪談的類型主要分為以下三種，最常見的就是第三種類產品使用回訪。
新品調研的訪談，一般是由于業務的發展，可能需要升級或者打磨一款新產品來滿足市場的需求。
在訪談的過程中，我們需要關注的點就是用戶畫像、商戶訴求、使用場景、終端載體等一系列因素。
當去往一個城市進行批量客戶調研的時候，偶爾會有拜訪潛在客戶的調研機會。這種類型訪問的關注點集中在商戶的痛點與需求上。
由于是潛在客戶，我們勢必是要了解他們想要購買或者替換產品的前因后果。也是借此機會了解到競對的優劣勢，他們放棄競對的原因，以及我們當前產品的功能是否滿足客戶的需求，還有哪些點不滿足，客戶重點關注的是什么。
使用回訪是最常見的訪問類型，主要目的是對商戶進行售后維護、提升使用體驗。
且由于B端產品的復雜性和遠距離特點，以及新功能同步給商戶存在的滯后性，公司會安排定期的上門回訪。如果有這樣的機會，UED一定要盡量申請跟著去門店調研。
到了最關鍵的一步，就是關于訪談的問題設計。
總結一下，問題的設計渠道來源主要有3種。主要還是根據調研目標進行問題設計，另外兩種方式，作為輔助。
那具體問題應該怎么設計，這邊我們分為3個步驟，從面到點依次拆解進行問題設計。
B端產品的特點可以借用《U一點料》的9個字概括，“多場景、全鏈路、多角色”，所以設計問題前，我們可以從場景+鏈路+角色/節點功能的維度來設計問題。
以餐飲行業的產品舉例，首先建議了解自家產品的全場景業務能力。即從商家端到消費端會經歷的產品模塊和具備的現有功能，做到心中有數即可，畢竟不會一下子調研這么多模塊和功能。
其他ToB產品同理，可根據某個操作鏈路為主線，確定主流程后進行問題設計。其實就可以理解為確定調研的目標。例如下圖要調研的主流程，就是提取點餐>下單>結算為主線。
根據剛才確定的主流程 我們找到所有關鍵節點進行問題框架設計。
以上3個步驟可以理解為，如何在功能極其復雜的B類產品當中，篩選出與訪談目標緊密相連的功能鏈路。避免我們的訪談提綱做的過于冗余沒有核心。
這點也非常重要，每一次去門店調研之前，先由當地負責的顧問與受訪商戶提前溝通。
一方面是需要與對方預約時間，另外一方面這種訪談對商戶而言就相當于優質的售后服務，會有受訪商戶提前列框架，準備問題。
那么這種情況更有利于調研，因為受訪者明確自己的問題點在哪里，就等著調研團隊（售后團隊）來門店后，好好拉扯一番。
萬事具備，只欠東風。我們再盤點確認下本次訪談的各類工具是否備齊，準備進入訪談階段，大致需要準備的東西是以下4種材料工具。
在了解了受訪者類型、采訪者需要注意的點，以及帶著我們設計好的問題，下面正式進入訪談階段。
到達門店后，我們的顧問會給受訪客戶做一下來訪成員介紹，并講明此次到店的目的。一般都是產品使用回訪，或者新功能推薦培訓。
通常來說，受訪商戶對來訪團隊總是有很多”心里話“想嘮一嘮，因此暖場氛圍比較容易起來，也有助于我們接下來的溝通
進入正題以后，我們會先大致了解下受訪者最近使用的體驗以及遇到的問題，而后會根據問題框架進行提問。在整個過程中也需要注意觀察用戶在描述問題時候的表情和肢體語言，搜集用戶對于產品的真實態度。
其實整個訪談流程我們歸納一下，需要關注的就是四個關鍵點，手+口+心+顏。
關于實操演示放在第一個講，是因為這個環節非常重要。線下訪談時強烈不建議“脫機訪問”，這種形式對受訪者而言需要花更多的時間去思考問題的答案。
會遺忘甚至想不起來當時的具體情況，隨便的敷衍回答“嗯，還行”、“挺好的”，或者干脆彼此都不在一個頻道上。
其次，在操作過程中，建議用手機進行拍攝記錄。因為每個人對產品的理解方式與程度不同，在用戶操作的過程中，會發現一些有意思的代償方案。這些也是思考的切入點。代償方案是否比原先設定的實現方法更便捷。
回去通過視頻仔細分析受訪者的操作路徑，以及每個操作之前是否有遲疑等等。并且將問題點一一記錄下來。
這個就是根據問題框架進行提問。在這個過程中，通常會穿插著上機操作演示，在現場記錄的時候可以先記錄個大概，等結束后再仔細整理。
問受訪者的心理感受，其實就比較偏主觀了，我們可以從“我們家的產品”和“人家的產品”兩個維度去對比詢問心里感受。值得注意的是，即使是這樣開放式的提問，也有提問技巧。
比如“你覺得現在還有什么不好用的地方”就比“你感覺現在的產品好用么”這樣的提問方式更有效。
因為產品一定是有可有優化的空間，“有什么不好用的地方”這樣提問的方式就是具體到了某個點上面，具體什么點不好用。
而后者的提問方式是基于整個產品，受訪者可能會出于不好意思等原因直接說“你們的東西還行吧，還可以”。
當我們提問產品優缺點的時候，受訪者大部分都會帶上表情和肢體語言，并且情緒表現和性格有比較大的關系。
性格比較雷厲風行、急躁一點的，通常會像連珠炮一樣瘋狂輸出，并且措辭會比較極端。例如：“真的太難用了”、“太麻煩了”、“嚴重影響門店營業了啊”。
接受到這種信息我們首先要做的就是安撫對方的情緒，其次對于這些信息要學會剔除一些夸張描述。
而性格溫和一點的受訪者，在闡述問題的時候也會比較婉轉?！安皇翘奖恪?、“這個改動沒啥感覺”、“也還行、都可以”，如果某個高頻操作真的很影響日常工作效率，往往會表現得很無奈，甚至還有點委屈。
那么無論是哪種表現，其實都要考驗采訪者的經驗，結合產品的功能去考慮，找到反饋中真實有效的部分。
通過以上4個環節，其實就可以收集到很多有用的信息，語言信息、視頻信息、動作表情信息等等。接下來的任務就是信息的梳理歸納。
訪談結束后，我們需要做個簡單的總結回顧。將關鍵問題再次復述確認，進行查漏補缺并且再次感謝受訪者，表達他們今天提的建議價值很大，后續會梳理出可落地的點優化到產品當中。
如果說聊得比較開心，大多數的受訪商戶都會邀請來訪團隊吃個飯再走，也算是額外的福利。在就餐過程中的非正式場合交流，也可以聊聊門店的一些運營情況等等，幫助我們更深入的了解這個行業。
我們在訪談過程中會有大量未整理的一手記錄，結束后需盡快的梳理，盡可能詳細的記錄下用戶描述的細節、肢體動作表情語言等等。建議使用石墨、語雀、騰訊文檔等在線編輯工具，方便分享修改。（本文提供模板可下載）如果是連續訪談幾位商戶，我會在訪談結束以后，迅速地將剛才的訪談內容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒有的問題，去下一家受訪商戶的時候可以驗證下該問題的普遍性。
② 整理落地
輸出后我們需要再次進行提煉，將有價值可落地的問題點提取出來，進行匯報分享，并找到相對應的產品研發進行探討排期，這樣就形成了一個完整的閉環，真正做到了發現問題、解決問題.
③ 流程概括
前文絮絮叨叨說了很多，其實關于用戶訪談這事用6個字就可以概括，簡單理解：
問誰？問啥？答啥？改啥？
能夠回答清楚這4個問題，那么這就是一次有價值的訪談經歷。
ToB業務的特點就是會有一定的行業壁壘，設計師在剛接觸的時候一定會有很多茫然時刻。對于各種專業詞匯的一臉懵，對于行業的不了解。
或者很多人對于B端的認知還停留在，B端好像沒啥好設計的，都是現成的組件庫拖一拖，成就感比C端差遠了。
那么做訪談、體驗優化的意義是什么呢？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
你有沒有注意過，App底部的圖標是如何變成選中的？大多數產品是將靜態圖標替換（硬切過渡），來完成狀態切換。
當我看完上百個動態后，找到了更有趣的方式...
02 App底部導航構成
通常由圖標、文字/點線裝飾、和底板卡片組成，（當然也有些產品只使用圖標或文字），但設計師在進行動態設計時則是針對這3部分。
03 Tab Bar動態類型
動態效果由弱到強，視覺層級由低到高依次排序：圖標動態 — 裝飾元素動態 — 底板卡片動態。（根據本文案例效果來排序，但效果不同會有所差異）
▍圖標動態?
我們知道圖標風格可以簡單的分為：線性、面性還有線面。在這基礎上通過修改顏色或造型，又能延展出更多風格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調整百分百參數來控制線條生長。
但只是單色修剪，看起來很單調。我們可以在這個動畫基礎上再多復制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調整不同顏色圖標的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個圖標添加修剪路徑，再配合位移、旋轉等基礎屬性則是更好的選擇。
通用的方法是調整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產品來說，可能會顯得有些普通。
我們可以考慮使用遮罩來制作動態，首先在圖標周圍繪制幾個圓，再將圖標外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調整圓的縮放即可。
在一些特殊的時間，設計師們可能會技癢，而將圖標繪制的更加豐富，來營造氛圍。
對于這類圖標，只需要參考它們的物理狀態[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調整基礎屬性，便能制作出細節豐富的出場動畫。
（物理狀態：該物體在現實場景下的狀態，上圖獎杯真實世界狀態通常是放置地面，所以出場方向是從下到上。但假如你的圖標是錦旗，那么物理狀態應該是掛在墻上，所有出場方向是從上到下）
當然如果去掉高光和投影，在制作一些動態時會更方便。
例如：復制一顆星，將其初始位置設定為一個獎杯的距離，并記錄關鍵幀，然后整體再移動一個獎杯距離。耳朵則調整路徑來完成移動和變形，這樣便能營造出3d旋轉的錯覺。
對于結構復雜的圖標，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動態?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當然這類方案很少見，原因在于商業價值不足，實現成本高，所以這里也只是提供一些創意練習思路）
在一些年輕化產品中，如果圖標含義很容易理解，那么設計師可能會用線或點來替代文字，讓整體更簡潔。
國外設計師Tubik，通過讓點元素在移動時呈現心電圖樣式，讓人眼前一亮。
通過動態效果，甚至能體現出產品行業屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產品嗎？
又或者再夸張些，將軌跡設計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產品。
通過調整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態下的圖標出現。
假如你的圖標設計的足夠巧妙，我們可以提前繪制好關鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。
▍底板卡片動態?
這類動態少見的原因在于其動態效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調整卡片路徑，但這樣的方式在制作彈性時非常麻煩。
我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調整卡片大?。?/span>
完成圓滑處理后，修改其他元素的基礎屬性即可。
目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數。
這個效果靈感來源于Dribbble設計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調整基礎屬性。
此方案目前還沒有在其他產品中看過，究其原因還是效果太過搶眼。
看了這么多，其實不難發現。同一個圖標，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。
或許創意的產生，并不是腦袋突然迸發出全新的東西。而是許多我們熟知的舊有內容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創意。
最后再說兩句：
每個產品都有自己的調性和目標用戶，動態效果也有強有弱。好的動態應該是能與其進行匹配，而不是根據某個產品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態，并不代表只能這樣用。動態效果類型遠遠不止這些，而以上只是最常見的動態屬性組合方式，所以請不要局限你的想法。
作者：幺零三 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在產品設計中，當有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點、角標、黑色遮罩+文字提示等這類靜態提示。
而人類是視覺生物，相比于靜態內容，我們的注意力更容易被動態內容吸引。
今天來聊一下頁面中常見的動態引導。
當你看到這個頁面時
我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據閱讀習慣從上到下，從左到右，依次查看其他內容。（大致如下圖）
而當頁面元素都賦予細節時
假如我想讓你關注到其中某個較小元素
其實只需要為它添加動態，便能使其脫穎而出，這就是產品設計中的動態引導。
▍新功能提示 ?
當產品上線新功能時，設計師們都會根據功能重要程度，來決定使用什么形式讓入口元素和其他元素區分開來。常見的有小紅點、標簽、氣泡這類靜態點綴元素（通常這類形式只出現一次，當用戶點擊后就會消失）。當然，也有將上述點綴元素動態處理的。如果入口是圖標，甚至可以為圖標制作動畫，這在很多電商產品的品類區經?？梢钥吹健?
動態處理的形式，比原本的靜態更容易引起用戶對元素的注意力（與動態方式有關），甚至傳遞某種情緒。由于是循環播放的動畫，因此可以持續吸引用戶注意力。
ps：據說，每當頁面多出一個會動的元素，后臺就會多出這樣一些留言，捅了開發窩了[Doge]。
▍誘導用戶操作 ?
動態引導還常常被設計師用來強調重要內容（有可能被產品、運營拿刀架脖子），來達成某些數據指標，通過利用動態誘導用戶操作。
例如：在會員卡片中添加光效、在廣告中讓按鈕進行縮放、為簽到入口圖標設置動畫。
這些都能充分引起用戶注意，甚至提升功能點擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設計師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。
對于這些不可見的功能，在初次使用時需要進行引導，才能被用戶感知與使用。
▍操作教學指引 ?
講到引導，還必須要提的是手勢引導，通過動態直觀展示不同手勢的作用，提示用戶如何與產品進行交互。
這在游戲教學中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當你第一打開視頻時， App 會提醒你雙擊屏幕可以點贊，上下滑動可以切換視頻。
在產品交互設計中，如果使用到一些新穎的交互方式，這類引導可以大幅降低用戶學習成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動態敘述的直觀性，使得我們可以減少對復雜信息進行大量文字描述。通過動態設計，我們可以創建視覺故事，這有助于將復雜信息以更簡單、清晰的方式進行傳遞，從而幫助用戶快速完成任務。
也因此，在一些含有復雜操作的彈窗中，漸漸開始應用。
但是需要注意的是，上述這些大多都只在第一次使用時才會觸發。
當然有特例，例如：
在 App Store 每次下載應用進行驗證時（面容解鎖的情況下），系統會通過動態提醒用戶電源鍵位置，并告知用戶需要雙擊進行人臉識別。
在掃碼時，弱光場景下出現的手電筒，通過動態引起用戶注意，指引用戶使用。
以及作為動態演示，幫助用戶理解如何使用手掌滑動截屏
如何進行NFC感應等等..
動態引導像是設計師用來控制我們眼睛的法寶，有的人用它改善產品體驗，有的人用它提升商業轉化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
感謝大家看到這里，我是幺零三，咱們下期見...
作者：幺零三 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數據可視化
數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律
關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。
1. 分析數據關系
根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。
構成關系
構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯與流轉
流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。
常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉化、關系”
2. 分析數據特征
按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類
層級特征
多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。
流程特征
流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。
1. 強化數據特性
使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。
我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調來進行分類
數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調內在順序
如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。
1. 布局框架適配
在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結語
數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn