莫奈是一款主要服務京東內部用戶的數據可視化平臺，它以容器的形式將京東城市各種與智慧城市建設及運營相關的能力聚合，并以可視化的形式面向客戶呈現。
作為京東莫奈的設計負責人，過去三年一直負責莫奈可視化平臺的用戶體驗設計工作，由于本人日常設計主要以智慧城市、數據可視化大屏為主，所以我即是莫奈的設計負責人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗相關的問題，這些問題，部分在產品日常迭代中得到了優化，但是也有相當一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗設計師，我日常與業務方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側收集了不少使用體驗相關的問題。我對以上兩個渠道的問題整體梳理匯總，并與產品側討論溝通后，大家認為這些問題比較嚴重的影響了用戶使用莫奈的效率，降低了莫奈對業務側賦能的質量，提高了客戶使用莫奈的成本。所以我們必須規劃出一個產品迭代的周期，針對莫奈體驗問題，進行一次密集的優化和革新，這便是本次莫奈體驗升級改版的基礎背景和原因。
本篇文章寫作的主要目的，是想將本人在這次改版設計中用到的一些方法、流程和經驗與大家做次交流和分享，希望能為同行在類似的改版設計中提供一定的借鑒和參考。
實際上，在梳理出整個體驗升級流程之前，通過與產品負責人的多次溝通，我們事實上已經對體驗升級這個需求達成了共識，而流程圖解決的是做什么、怎么做的問題。
下圖展示的這套體驗升級流程較為通用，大多數產品的體驗升級都可參考下面的流程執行。
這套流程的主要作用有兩個，一是通過它可以更直觀的跟產品負責人、開發負責人等關鍵角色溝通，讓大家對體驗升級這件事兒有整體且全面的了解，方便大家評估工時、預估成本和安排排期；另一方面也能夠使我自己的工作推進的更加有節奏有條理，避免工作內容長時間停滯在某一個環節而影響整體進度。
基于STAR法則，背景概況部分向大家介紹莫奈體驗升級的必要性。在企業中，想要推動一個需求順利執行，那一定是需求上下游以及相關方的利益都得到了體現和滿足。莫奈此次升級，從體驗設計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責任將用戶的聲音轉化為需求，并推進落地為產品的一部分；從產品團隊來講，莫奈想要不斷發展，持續為客戶和業務方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產品架構做一次深度的革新和優化；從前端工程師、研發同學的角度看，以往不合理的底層代碼設計，使產品在性能、穩定性等方面留有大量隱患，因此在日常迭代工作之外，研發同學總要消耗部分精力去維護那部分不穩定的存在，從而導致研發同學人效比低、開發體驗差；從上級Leader來看，公司的核心經營理念是“成本、效率、體驗”，但成本的降低、效率的提升、體驗的優化都依賴于強悍的技術和優秀的產品，而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗升級于多方有益，符合部門整體利益，所以大家很快達成共識。
通常我們說用戶體驗時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進一步細分為多種角色，理想情況是每一類角色的體驗都被滿足，但現實執行中我們必須要有策略和取舍。所以要想產品有好的體驗，首先我們要知道用戶群體中不同角色對產品的使用情況如何，并找到對產品依賴度強使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優先級的優化。
從莫奈典型用戶使用場景可以歸納出：
首先，莫奈的主要使用者為各個項目的產品經理及開發工程師，其中設計師也有相當大的使用強度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數據可視化場景構建相關需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產出的作品，經由上下游同事傳達和部署給業務方及客戶后，莫奈的商業價值便得以體現。
其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發現，莫奈的使用具有上下游的關聯性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因為更接近客戶和業務，往往具有比核心用戶更高的決策權。因此我們優先讓核心用戶體驗提升并不意味著放棄上游的體驗，而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色，通過核心用戶使用莫奈交付的結果來證明莫奈的可靠。與此同時，我們也通過對內外的宣講和培訓，持續接收上游用戶的反饋，并在迭代中持續優化。
知道了核心用戶是誰，那么核心用戶的體驗痛點是什么呢？
雖然在日常的交流溝通中我們已經獲取了不少用戶反饋、收集了相當的問題建議，但作為體驗升級的系統性工作，為了更全面的了解用戶體驗痛點，我們還是設計了一次完整的用戶調研活動。本次調研主要采用線上問卷調研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內容，因此，問卷調研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內外部用戶，以期獲得更加客觀真實的反饋。
用戶調研的核心目標是充分收集用戶反饋，并將反饋結果量化及系統化，量化后的結果可做為設計側推動產品執行體驗優化的關鍵依據，也可以作為后續驗證優化結果的對照項。
本次問卷設計我們參考了PSSUQ整體可用性量表，并結合本次調研目標做了部分調整。
PSSUQ整體可用性量表可以從系統易用性、信息質量、界面質量三個方面將體驗結果量化，然后通過與行業基本經驗值比較，既可以知道用戶對莫奈在以上三項的滿意度，也可對莫奈當前整體體驗結果有一個全局的概況性評價。同時根據三個方向的評分也可以更細致的指導后續的設計優化方向，為設計決策提供更多科學可信的依據。
PSSUQ整體可用性量表作為一個通用模版，其內容比較固定，為避免多次打擾用戶，提升問卷調研效率，我在PSSUQ的基礎上添加了少量關鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內容更加符合本次調研目標。
問卷設計好之后，接下來就是問卷發放以及結果分析了。
PSSUQ量表內每個問題均有8個選項，【1-7】是對該項描述的認可程度，得分越低代表用戶對該項描述越認可；【NA】代表用戶對該項描述無法評價。本次調研通過京東良研發放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數量：20），說明問卷結果具有較好的可信度，其結果值得進一步研究。
通過整理和統計問卷數據，可以得出以下結論：
1、內外部用戶在系統易用性、信息質量、界面質量三個維度對莫奈均不滿意
2、對比行業經驗值（均值），莫奈系統總體體驗質量與行業同類產品存在明顯差距
3、莫奈用戶群體整體積極性較高，具有較強的溝通及反饋意愿
整體評分結果與日常同相關同學的溝通結果一致，以上評分結果也反映出此次體驗升級的緊迫性，作為由設計驅動的改版設計，設計側面臨較大壓力。
在設計問卷的環節我也提到過我們的問卷在PSSUQ量表的基礎上針對本次調研目標做了部分調整和優化，而線上問卷最后兩個選項以問答題的形式向被調研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋做整理，親和圖顧名思義，它可以使具有類似特征和關聯屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。
如下圖所示，產品的反應速度及穩定性、模板和組件豐富度是用戶反饋問題最集中的兩項，前者影響用戶最基礎的使用體驗，后者決定產品能多大程度上便捷的服務用戶。良好的穩定性和反應速度可以讓用戶專注于任務本身，而使用模板能最快速的產出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復雜場景下的業務需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點，首先，對于那些能夠在當前產品日常迭代中優化的點，我整理后會以需求的方式向產品團隊提出，并在日常迭代中逐步優化；然后，對于那些需要“傷筋動骨”做底層優化以及長期運營沉淀才能有效改善的問題，我們會進一步向用戶收集和完善相關信息，并將相關問題梳理到本次改版任務中，做系統的解決和處理。
在【05、體驗痛點分析-用戶調研部分】已經介紹了本次參與訪談的用戶來源，但在實際執行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業以及使用莫奈的主要場景、頻次、設備等，然后通過給用戶設置一到兩個簡單的任務，觀察用戶在完成任務過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發工程師：請在畫布中添加一個環形圖，并使用json為環形圖添加一組動態數據....。之后，在用戶完成基礎任務后，我們還會針對用戶關心的問題進行更細致的溝通，了解用戶更細致的反饋。對于用戶反饋的問題，我們整理后會在公司內部的需求及研發管理系統“行云”中以需求的方式提交給產品團隊并同步添加反饋問題的用戶為該需求的關注者，后續，當該需求的狀態有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗收，都能在線跟蹤并閉環。這樣做既是我們團隊的責任，也可以增進用戶對莫奈的信任，并期望活躍用戶后續能繼續為莫奈提供建議和反饋。
通過線上問卷調研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗5要素模型，將各類問題進一步歸納并按照產品建設的上下游協作關系，把每一個具體的問題匯總給對應的角色，并由對應的角色產出具體的解決方案，然后通過線下會議同步各自方案并對方案進行評審和溝通，由此，關于體驗升級的所有事項及具體任務便可周密安排，之后便是資源投入、推進升級工作具體執行。
用戶體驗5要素模型，從產品的戰略層出發，層層遞進直到表現層，把影響用戶體驗最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解，并能促成大家在更大的層面上達成共識。以往談到用戶體驗，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發側同學更是如此，他們鮮有意識到產品的目標、內容以及性能等這類的因素，也是構成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續迭代的產品來說，好的用戶體驗并不能以“畢其功于一役”的方式來實現，而是要通過持續不斷的改進和優化才能持續滿足并提升用戶體驗，所以借助用戶體驗5要素等模型，我們引導產品及研發團隊更好的理解用戶體驗，這樣不僅能幫助設計師在本次體驗升級改版工作中與大家高效協作，也非常益于之后日常產品迭代的溝通與協作。
上一步，我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色，之后各個負責人產出解決方案并與大家評審和溝通，而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結果，體驗升級方向以設計為主導，同時兼顧產品和研發的部分目標，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質量提升”解決表現層的問題、“信息層級優化”解決框架層的問題。體驗升級方向作為對體驗升級結果的導向，將指導后續設計動作的展開。
基于體驗升級方向，接下來就要制定具體的設計策略，來實現體驗升級方向中要達成的結果。設計策略制定第一步先確定設計目標，我們將設計目標拆解為三個方向，每個方向通過兩個關鍵詞定義。設計目標主要分為視角與交互兩個方向，同時兼顧產品側“易拓展、易維護”的需求。實際設計中，視覺與交互并非獨自分開進行，在設計開始的階段，需要先定義設計風格等基礎設計要素，之后視覺便可在此基礎之上全面展開，此時視覺設計要考慮交互的效果，交互設計也需要斟酌設計的展現。
對于設計目標中關鍵詞所代表的那些抽象概念，每個人的認知可能都不一樣，但是搜索引擎和大數據推薦的算法，可以告訴我們普通大眾對那些關鍵詞所表現出來的意象是如何認知的，之后我們便可從符合大家普遍認知的視覺素材中，提取出符合關鍵詞所表達出的意象的設計要素，之后通過在設計中應用這些設計要素，就能把關鍵詞定義的抽象的設計概念轉化為具象的認知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。
我們使用搜索引擎以及AI推薦的關聯算法，針對“科技和高效”這兩個視覺目標的關鍵詞收集了海量的音視頻設計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點/要素，就能將體現“科技、高效”這兩個概念的所有設計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設計執行的過程中應用這些設計要素，通過合理的搭配和組織，將這些設計要素融入到莫奈新的設計語言，如此，產品最終便可在視覺上呈現出與視覺目標關鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設計要素其實已經足夠具體，但是如何將這些要素應用在設計中，我們還需要進一步歸納。我個人一直以來習慣從形、色、字、質、構、動、音7個維度分析一個設計作品的設計風格，就如同人體是由肌肉、骨骼構成的一樣，以上7個維度也是構成一個設計作品的“經、骨、肉”。所以，我認為對于一個設計作品，尤其是UI設計作品，以上7個維度基本能夠完全概況它的風格，所以當我要為自己的產品做風格設定時，我也是從這7個維度出發來為每個維度定義具體的風格和策略。
這種細分維度然后定義風格的方式有多種優勢，其中最明顯的是它能夠將我們風格定義的設計工作條理化，避免反復嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質感的定義有偏差，不符合情緒版中提取出來的設計要素的特點，這時候我只需要對“質感”這個維度的風格進行優化和調整，而不需要推翻整個7要素重新再來。這種設計方式讓我的設計更加理性，也讓后續設計執行的工作更加的有條理和舒適，從設計風格落地的角度來講，這種方式我個人認為是最能夠忠于情緒版所歸納出的設計感受的方法。
對于產品界面的造形設計，一方面依照情緒版中提取的設計要素“透視、空間感、異構造形”來考慮，另一方面我也結合莫奈的產品Logo做了適當的抽象和演繹；兩者結合最終確定了當前莫奈的造形設計。
首先，產品左側主導航采用了具有一定透視角度的異形設計；產品頂部標題區域也采用了相同的設計思路：左側為品牌Logo設計了一個容器，Logo在其中容納放置；Logo右側收起的區域預留了常用公告、跑馬燈的設計，方便產品把日常重要信息同步給用戶；最右側呈現用戶個人中心、空間管理、使用幫助等菜單項。
對于這種異形的設計，用戶是否能夠接受，在設計開始時我存在一定的疑慮，因此在設計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認為新的設計有創意具有鮮明的特點，也有部分用戶認為透視的設計看著較為怪異，尤其是左側主導航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優化了透視的角度，從多個透視數值中選擇了一個即能展示透視的設計效果、又不至于透視過大導致文本圖標等變形嚴重而不易識別的角度，其次，我還配合開發同學對導航透視文本和圖標的渲染做了一些優化，從而使其具有更好的識別性和清晰度。在以上兩項優化完成后，新的用戶測試表明大家對該設計的滿意度有很好的提升。
莫奈在改版之前就已經有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關鍵詞，結合情緒版提取的設計要素，將原有品牌色做了細微的調整。首先藍色飽和度增加，綠色調整色相使其偏向藍色的一端并增加亮度。如此，當兩個顏色搭配使用時，藍色作為主色調體現科技、可靠的視覺和心理感受；綠色作為點綴色和強調色，體現活力、高效與創新。藍綠對比強烈，具有很好的場景適應性和品牌特色。
字體作為UI界面中最常見的元素以及作為信息呈現的主要載體，字體的使用對產品的易用性和視覺表現有著非常重要的影響。結合體驗升級方向中定義的“增強品牌特色”的目標以及情緒版中提取的非襯線的設計要素，對于字體的設計風格，我將其歸納為"定制化、品牌性和非襯線"。
為了實現字體風格的設計目標，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經過多次迭代，目前具有豐富的字重和獨特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現京東的品牌特色并體現出與其它產品差異化的字體設計。京東正黑體主要用于莫奈產品中的數字、拼音、英語、數值符號四個場景，該字體也是京東金融APP的系統數字字體，其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數字字體使用時，其小數點、千分符等也具有很強的特色，具有不錯的辨識度與個性。
而產品中的中文字體Mac與Windows系統有不同的方案。在Windows下，由于系統自帶的微軟雅黑當字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現象，加之該字體很少更新，沒有針對當前高像素密度、高分辨率的屏幕特點做相關的適配優化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調研中，有用戶反饋字體模糊不清、識別困難也是上述原因造成，所以Windows系統下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯合開發的開源字體，其字重豐富、字形簡潔、現代，能夠很好的適應PC與移動端的顯示，也能適應當前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現。除此之外，思源黑體的字形特點與MacOS系統下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。
質感的呈現主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現科技、輕盈的質感。
結構設計主要目標是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構建所需的大多數功能，也是莫奈產品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設計雖然也有不錯的設計規范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設計規范，大屏編輯器頁面的產品需求總是需要UI產出設計稿研發才能開發，且由于沒有系統的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設計、開發和維護都具有較高的成本。
新的改版設計，在設計之初就聯合產品對編輯器內的各個模塊所包含的各類組件進行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規范、使用場景示例等方式解決了如何用的問題。
原子化的組件，精簡了組件的數量，同時每個組件也針對自身功能和用途的特點進行了優化，在此過程中也考慮了組件搭配、組合使用的適配和呈現問題。比如，針對顏色選擇組件，我們默認以十六進制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預覽的小色塊，這樣的設計兼顧了開發與設計同學使用莫奈的場景。對于開發同學，他們在代碼中習慣使用十六進制色值，而設計師更習慣于RGBA或HSLA的調色模式，因此，雖然十六進制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設計同學確認顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設置的模式以統一的格式呈現。而諸如此類優化，在本次體驗升級中不勝枚舉。
莫奈的動效設計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節奏感、輕盈”的設計風格，傳遞科技、高效的視覺感受。
在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網頁端實時渲染，具有矢量動畫的特點，能適應多種設備及屏幕分辨率，具有優秀的前端呈現效果。
首頁科技感流光氛圍動效
頁面及大屏加載Loading動畫
針對視覺層面設計優化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優化，我們交互優化的目標是“簡單、流暢”。
首先進行交互優化的是各類圖表的屬性及配置項設置相關的交互優化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數據、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現了什么數據、圖表可以與用戶進行那些互動三個維度解決了圖表在數據可視化呈現中最基礎的需求。由于圖表在數據可視化呈現中頻繁使用，所以與圖表配置相關的操作自然也是相當高頻和常用。當前版本下，圖表配置項主要問題有兩個：一個是圖表配置項層級過深，用戶需多次點擊才能對某一內容進行修改；第二是批量對多個圖表的相同屬性進行修改在當前版本不可用，導致用戶圖表配置成本高。針對用戶最關心最影響體驗的兩個交互問題，我的優化方案如下。
要解決問題，首先要知道問題從何而來。經過深入與產品、研發同學及部分用戶訪談溝通后，我發現當前導致圖表配置項層級過深主要有兩個原因，分別是產品規劃與設計展現。
具體來講，產品層面有三個問題：
01、產品對于當前圖表配置項的結構梳理是以程序的邏輯來呈現，而非以用戶的視角來歸納。舉個栗子，在當前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數據系列>系列名稱>形狀設置>顏色設置。而這一路徑為何如此設計？因為顏色這個屬性的后端代碼就是這樣的結構。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現的內容、名詞其實都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數據系列、其次還要了解形狀設置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進行上述設置時往往需要在樣式一級菜單下點擊多個屬性、反復嘗試確認，才能最終完成顏色修改的設置，這樣一個使用的流程自然會給用戶“層級過深”的感受
02、圖表配置結構存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結構設計是必要的么？答案是并不是！因為只有用戶關注的才是有用的，產品應該提供用戶想要的內容而不是強塞給用戶產品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當的對配置項做些精簡，合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現無關緊要的內容，如此，圖表配置項便能瘦身，用戶使用起來也更輕松。
03、圖表配置項的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產品的效率，另一方面也加深了用戶“層級過深”的感受。
知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯合產品經理，對莫奈已有的60多個各類圖表組件，逐個進行了配置項的梳理，當所有圖表的配置項都以思維導圖的形式呈現時，他們的共同點、同類項便一目了然。此時，之前存在的“圖表配置結構存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點，在上述梳理工作完成后有了一定的優化和改善空間，但仍然存在一些不確定的因素影響設計和產品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結論，對此，一方面我們通過為配置項區域增加數據埋點，分析用戶對各個配置項使用的頻次來為后續的持續優化提供決策支持，另一方面我們也參考、調研了同類產品中一些用戶量較大、設計質量較高的產品來進行當前有限的優化。
配置項層級過深的另一個原因，是屬性配置列表的結構及布局設計存在“深層級、空間利用率底”的特點。
如下圖，左側圖片示意了舊版莫奈的配置列表設計結構。可以看到舊版設計完全采用樹結構的形式將各項自上而下排列，并且采用每級向右縮進一個字符的形式來做層級的區分，舊版的設計基準尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進的策略更是導致信息展示困難；其次，樹狀的結構在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標滾輪才能看全信息，綜上，舊的設計策略也給了用戶“層級深”的直觀感受和交互體驗。
新版設計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設計，將提煉后的一級屬性標簽固定在屬性配置列表左側。相較于之前，這樣的設計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側屬性內容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設計采用分隔線與色塊結合的方式來表達屬性列表內的層級關系，去掉逐級縮進后，配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。
在數據可視化場景搭建過程中，用戶對多個圖表的相同屬性進行統一修改、一次性調整的需求非常迫切和剛需。比如當前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調整為相同的綠色，在用戶的視角下，此時的操作應該是先選中6個想要調整的圖表，然后找到橫軸顏色設置項，之后統一調整色彩。但莫奈當前的版本，如果用戶按照上述流程操作，看到的將是下圖左側的示例：圖表多選之后，對齊、坐標等基礎項仍然可用，而與屬性相關的其它設置并沒有被聚合并呈現，在此情況下，用戶想要完成最初的目標就只能6個圖表逐個依次調整！顯然，這樣的操作并不符合用戶預期，它使用戶的操作效率大大降低。
上述問題是一個體驗相關的問題，同時也是一個強技術相關的問題，我們想要讓多個圖表的同類項聚合顯示，首先要能在底層對各個圖表的配置項有十分清晰的梳理，好在我們解決第一個問題：“配置項層級過深”時，已經完成了對60多個圖表的細致分析，有了這項工作的基礎，當前面臨的問題便不那么棘手。如右側示例：當用戶多選圖表時，圖表的同類項會被聚合，并以用戶視角的理解，將屬性類別進行分類，這樣的分類打破了傳統的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統一的調整和修改，而這樣的操作是符合用戶習慣和預期的。
新建大屏作為創建數據可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優化主要有三個方面：創建流程、模板預覽與模板展示。
創建流程優化：首先，舊版的創建流程：新建可視化>選擇模板>大屏命名>創建成功。 這一流程中“大屏命名”是沒有必要的，因為用戶在新建可視化大屏時可能存在多種需求的可能性，也許用戶只是想看看創建完成后內部編輯器是什么樣，或許用戶有實際項目，但當前項目名稱也并未確認，所以在此時添加一個不可跳過的步驟著實讓人不爽，況且大屏創建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進入編輯器開始設計創作才是用戶創建可視化最根本的目標，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。
模板預覽與模板展示優化：原有的設計，當用戶點擊創建大屏按鈕后，會在頁面底部拉起一個小的抽屜，抽屜內包含一個空白模板以及有限多個其它內容模板，而在如此狹小的區域展示這么多內容，不管是從交互效率還是視覺效果上看，都顯得格外的拘謹和難受。新的設計首先是全屏鋪開，盡可能充分的利用頁面空間。
在模板展示及預覽方面，我設計了列表展示與縮略圖分布展示兩種方式，并添加了分類標簽和搜索按鈕，此外還聯合產品增加了模板收藏功能，這樣用戶可以把自己喜歡的、常用的模板收藏，方便之后更快速的使用
模板預覽方面，在兩種布局模式下，用戶鼠標滑過模板縮略圖時，模板均會以較大的視圖動態呈現模板內容。在列表模式下，模板預覽窗口固定在頁面右側區域；縮略圖分布的模式下，預覽窗口根據鼠標指針的位置激活。當用戶選中某個模板時，點擊底部創建按鈕即刻進入大屏編輯器界面，此時用戶便可基于模板內容進一步完成自己的定制化設計。
如今移動端各類產品已經給用戶養成了算法推薦+自主搜索的產品使用習慣，這種習慣當前也逐步從移動端往PC端轉化。搜索能從海量信息中最快速的找到用戶關心的內容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應模塊才能進行搜索，降低了搜索的便捷性和易用性。新的設計在保留之前搜索能力的基礎上，新增全局搜索，用戶在一個位置即可完成對組件（優先展示當前畫板內組件）、屬性、幫助等內容的搜索和查找，進一步提升搜索的效率。
一個數據可視化場景，通常是由N個數據圖表與其它數據要素一起構成的多個頁面來呈現和展示的。這些頁面內包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側的圖層管理面板來實現。一般我們對圖層管理的手段主要有三種：命名、分組和查找。
給組件命名是一個耗時且麻煩的行為，我們在做用戶調研時發現，大部分用戶都沒有給組件規范命名的習慣，大多數情況下，組件在圖層面板列表內都是以默認名稱或者默認名稱+1、2、3的形式存在。這導致了當頁面組件較多時，通過組件命名來查找組件其實相當困難，所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗?？s略圖以快照方式保存當前組件最新狀態截圖，從而幫助用戶更快速的將圖層組件與頁面上的內容對應起來。
新的設計，圖層成組后也取消了縮進字符的效果，我采用給成組對象設計更明顯的分組示意圖標以及為組內列表添加深色色塊的方式，完成了成組對象與列表內其他要素區分的需求，新的設計使成組對象更易查找和識別。
此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設計元素。
此次體驗升級是設計主導推動，產品與研發緊密配合的結果。體驗設計師作為最接近用戶的群體，是產品與用戶溝通的橋梁。時刻關注用戶心聲，并能將用戶細碎的吐槽和各類反饋轉化為體驗痛點、制定對應的優化策略是體驗設計師的基本功。而對于設計和產品本身是否熱愛，也是設計能否不斷精進、體驗是否能夠不斷提升的關鍵。好的設計不僅服務了產品、幫助了用戶、同時也成就了設計師本身。
本人為莫奈提供設計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內部需求管理系統“行云”，為莫奈提交231個體驗優化建議；以線下線上的形式面向莫奈產品及研發團隊進行了20多次專業分享。正是日常這些積極主動且持續的努力，使我本人與莫奈產品團隊建立了非常友好緊密的聯系，這也為推動本次體驗升級改版提供了巨大的助力。我認為作為體驗設計師，我們不僅要對用戶有同理心，為用戶創造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗關乎人、環境與生活，嘗試在生活中磨煉自己創造好的體驗的能力，并將其應用到體驗設計師的職業工作中，我相信，倘若如此實踐，必能在職業和生活中都獲得有不錯的成就。
好的產品，必然是持續關注用戶訴求，不斷迭代發展的產品，好的體驗設計也必然是陪伴產品不斷優化、持續精進的設計，復盤的意義不僅是沉淀過去的經驗，更是為未來更好的體驗蓄能。
此次分享如能為大家帶來那怕一點點的啟發，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~
作者：BYMD 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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的體驗呢？
還原鏈路暢通：提升場景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導新用戶探索功能，根據用戶興趣推薦適合的內容。
以上內容是下載中和下載后階段導流優化方向的一些延伸設計思考，為大家提供可以繼續探索的方向。
// 寫在最后
總結一下本篇文章關于導流的體驗設計要點：
全鏈路洞察，對導流鏈路進行拆解，通過盤點導流鏈路的用戶行為，明確每個節點的設計方向；
降低廣告干擾性，減少用戶瀏覽過程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導，讓用戶專注于產品本身傳遞的價值，引領用戶完成對產品的探索從而完成下載激活。
希望以上的設計思考，可以帶給大家一些啟發。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
當你使用形形色色的APP時，是不是時常不由自主地感慨“這個APP的界面太丑了”、“這個APP太難用了，連入口都找不到”，是什么原因造成這種感受呢？
認知心理學中有個概念叫做認知負荷「cognitive load」，它表示大腦在工作中記憶資源的使用量，會影響用戶的信息閱讀和產品使用體驗。本文將從信息層級、信息結構、閱讀順序、信息密度、文案表述五個層面來探討如何降低用戶認知負荷。
格式塔心理學的封閉性原理告訴我們，人們在認知某個東西的時候首先看到的會是整體、而不是單獨的部分。如圖所示，你首先看到的是一個藍色的字母U和深褐色的人頭側臉，其次才是構成這個形狀的各種細節。
從人類視覺系統成像原理來說，人類天生對于顏色對比非常敏感（彩色視覺是因為視網膜中3種視錐細胞分別感知特定顏色所致，當用戶同時看到多種不同的顏色時，不同視錐細胞就會被激活眼睛感受到強烈的對比）。
因此，在設計界面時通常會通過大面積的色塊對比來凸出層級更高的信息。
總結來說，我們在平時的設計中常用形狀大小差異和顏色對比差異來拉開信息層級。
此外，由于人眼視度（舒適的垂直視場角度為-30°~25°）和用戶使用不同設備時的閱讀角度問題，人眼對于屏幕上不同區域的關注度有著天然的差異。
因此，我們在設計時若想拉開信息層級，除了使用面積和顏色對比外，也可以通過位置對比來實現，即將層級較高的信息置于舒適閱讀區內。如圖所示，移動端設備位于屏幕中央偏上的信息在閱讀舒適度上會優于屏幕下方的信息。
我們知道了如何通過設計手段來區分信息層級，那在信息層級區分上是不是越多越好呢？
顯然不是，信息層級過多也會增加人腦的認知負荷（整個頁面顯得很花哨）；而信息層級過少，則頁面的內容展示會比較平均、不一定能突出所有重點信息。一般來說，我們可以將信息劃分為重要信息、次重要信息、一般信息和和輔助信息，也就是信息層級控制在4個以內比較合適。
如圖所示，我們把聚劃算的頁面做高斯模糊后，里面的信息層級就一目了然了。
在討論信息結構之前，我們首先對基本的信息單元做拆解：信息單元 = 信息本體 + 信息容器，這里我們把信息本體定義為我們主動讓用戶感知并能輔助其進行下一步動作的信息元素，而容器定義為具有明顯視覺區隔的信息承載物。信息本體一般包括圖片、文案、icon、行動按鈕等，而信息容器可以大到頁面小到一般的模態、非模態控件。
如圖所示，在典型的電商場景中商品卡片可拆分為信息本體（商品圖、商品名、商品價格、利益點）+ 信息容器（卡片）：
熟悉格式塔原理的朋友都知道相近原則——即彼此位置相近的物體會被人們看成是一類東西。同時，保持相同的信息結構意味著視覺焦點內不同層級信息的相對位置是固定的，這樣用戶在快速掃視某個產品時會降低記憶負擔——即無需尋找同屬性的信息。反之有一定的記憶負擔，不利于用戶快速掃視重要信息。
如圖所示，滴滴我的錢包頁面5張輪播圖的信息結構相同，遵循左文右圖和主文案在上、輔助文案在下的信息結構。
而支付寶理財頁面的輪播圖則有著不同的信息結構，如輔助文案和按鈕在不同輪播圖中的位置和大小、樣式均不一樣，輪播時同類屬性的信息會以不同樣式在不同位置切換，增加用戶的眼動成本和認知負擔。
從頁面整體動線看，同類或關聯信息會有明顯的區塊分隔。如下圖所示，滴滴「我的」tab在頁面整體動線布局上有著非常明顯的區塊劃分來承載關聯信息：
用戶信息（個人信息+會員信息）→常用工具→促活福利（卡券 + 福利）→平臺服務（金融服務 + 企業服務）→低頻工具。
從信息單元內部來看，同樣會對關聯信息做位置上的劃分。例如一般的社區信息流卡片結構基本都是生產者信息→內容信息→互動入口。
我們前面提到過信息單元=信息本體+信息容器（容器為具有明顯視覺區隔的信息承載物），而信息容器的排布也有其內在的規律。
筆者體驗過大量產品后，大致總結了3種較為常見的容器排布結構，即三角結構、宮格結構和列表結構，每種結構容器的排列規則會遵循一定的主次關系并根據其特點有不同的適用場景。
（1）三角結構
我們都知道三角形是多邊形里最穩定的結構，其容器排布主次突出（根據主要容器與次要容器的位置關系可分為上下結構和左右結構），用戶縱向的視覺遷移路徑較短，一般比較適用于數量較少、且有明顯優先級的場景。
（2）宮格結構
宮格結構適用于優先級相同或相似的功能入口，一般以四宮格和六宮格為主，數量過多時容易造成視覺疲勞和信息密度過高。四宮格信息容器和六宮格信息容器如圖：
值得注意的是容器內也可以是宮格結構，但這種宮格結構的信息主體數量會比信息容器更多：
（3）列表結構
列表結構同樣適用于優先級相同或相似的功能入口，但與宮格結構不同的是列表結構的一般具有排布邏輯或規則，如按照時間線排布。
列表結構包含橫向列表和縱向列表，橫向列表適用于短文案卡片（比如活動或功能入口），方便用戶掃視更多圖片；縱向列表適用于長文案卡片，用戶可以快速掃視較多文字。
在B端設計需求中，我們經常會遇到讓用戶輸入一堆信息的場景，這時候如果我們把所有信息都羅列在1個頁面中，可能會造成高跳出率和低完成率。
表單設計領域的專家Adam Silver通過實際項目發現：將較長表單按照關聯性拆解為若干部分，能有效提升用戶滿意度以及完成率。除此之外，Adam還總結了這種設計理念的16個優點，我們認為其中比較有價值的是這3個點：
市面上將長表單拆分成幾個步驟做分頁處理的產品比較多，如下圖小紅書就將店鋪申請流程拆分為了填寫店鋪類型、經營類目、個人信息3個部分。
我們都知道用戶的閱讀習慣一般是近似于從左往右、從上至下的Z字形結構，且基于人眼視度和不同設備屏幕角度的差異，人們掃視屏幕時一般會先注意到屏幕中央偏上一點的位置，因此我們在設計信息結構時也要考慮用戶的閱讀路徑和習慣，將對用戶高價值或者高優先級的信息置于視覺焦點容易觸及的地方。
那什么是對用戶高價值或者高優先級的信息呢？我們判斷的標準是哪種信息形式（圖片or文字）更能高效地傳遞有效信息以輔助用戶決策，比如在電商產品或外賣產品中一般采用上圖下文或者左圖右文的信息結構，且會將圖片的信息層級拉到最高，這是因為用戶在快速掃視過程中僅通過看圖即可看到這件商品，初步了解外賣商家賣的是什么。
但如果我們換一個場景，這種形式就不那么適用了，用戶僅通過看圖并不了解這條資訊的大致含義，因此，此時文案的優先級更高，常常采用上文下圖或者左文右圖的形式。
國外的用研團隊曾通過眼動熱力圖的AB實驗發現通過在圖片中加入人類面部表情的視覺引導對于信息的閱讀率有明顯提升作用。如圖所示在第一張廣告圖中，用戶的視覺焦點大部分集中在了嬰兒的臉部，而右側的文案則很少有用戶關注，第二張圖中嬰兒由正臉轉化成了側臉同時眼睛看向右側的文字，此時右側文字的眼動熱力成像明顯提升。
這里的信息密度指的是在單位容器內（卡片、頁面）所呈現的信息量，比如在1個頁面中如果信息密度大，則相對屏效較高，但卻容易增加用戶的認知負荷；反之，1個頁面中信息密度低則相對屏效較低，用戶的認知負荷也相對較低。
我們來看1個關于信息密度對于閱讀體驗影響的案例：在美國開車，人們常常因為看不懂街邊的停車牌而違停被罰款，我們可以看到左圖中的停車牌上密密麻麻全是字，想要閱讀根本無從下手。
Nikki Sylianteng是一個華裔的設計師，當她初來乍到美國時也因此遇到了很多不便，針對這個問題她簡化用戶的需求，即：
于是她將文字信息做了可視化處理，通過較少的文字+色塊極大地降低了停車牌的信息密度，讓司機看到后一目了然。Nikki Sylianteng的這種設計被美國各地的市政部門廣泛采用。
在傳統媒介中，一張充滿文字和圖片的報紙與一個時尚雜志封面的信息密度對比更加明顯，給讀者帶來的閱讀體驗和認知負荷也完全不同，這也是為什么很少有人會耐心讀完報紙上的文字。
關于海報與雜志設計還牽涉到圖版率這一個概念，簡單講就是圖片面積所占整體版面的比率，通常來說圖版率越高則表現力和親和力就越強，有興趣的讀者可以自行上網了解圖版率的相關知識，在這里就不做詳細闡述了。
在廣告場景下，當用戶被圖片吸引視覺焦點后，文案表述就顯得尤其重要了。這時候我們要搞清楚3個問題：
首先，我們得搞清楚核心目標受眾是誰，同一款產品來自一線城市的年輕白領和三四線城市的中年人關注點和付費動機可能完全不一樣（比如同樣都是手機，一線城市的年輕白領更關注顏值和性能，而三四線城市中年人更關注價格和質量）。
這時候產品的廣告文案也必須依據核心目標受眾的需求點來設計才能命中用戶，小米手機的線下廣告語在一線城市的地鐵站（左圖）和農村的大字報廣告（右圖）就采取了完全不同的描述策略。
在回答完以上3個問題后還需要注意，我們的文案描述目標受眾是否能夠理解，因為人群不一樣，其受教育程度和理解能力也會不一樣。
在設計動作文案時，我們時常會受到慣性思維（常態場景下的通用做法）的影響而忽略了動作本身的意涵。
比如下圖的二次確認彈窗用戶取消上傳和取消訂單是一個對當前行為的否定，但我們習慣于用“確定”和“取消”來讓用戶回應是否進行某個行為（我們也可以從另一個角度理解，否定的否定就是肯定，點擊「取消」按鈕即繼續用戶當前行為，但這種理解很繞），這個時候就會帶來理解上的歧義，當出現這種情況時，最好的做法就是將動作本身簡單明了地描述出來避免產生歧義。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
2022卡塔爾世界杯已經拉開帷幕，相信大家從這周開始，都已經陷入四年一次的狂熱的足球氛圍中。那你有聽過懂球帝這款足球APP嗎？作為國內用戶規模和影響力最大的足球社區，據官方統計，懂球帝在全國足球迷中的滲透率高達83%，甚至有這樣一句口號——十個足球迷，八個用懂球帝。本期設計大偵探，全面拆解體育行業的獨角獸懂球帝，看看一款足球類APP是如何設計的！
一、導讀
1. 內容結構
全文8517字，分為五個部分，分別是導讀、產品畫像、內容服務、變現服務和設計總結，你可以通過下面的思維導圖對本文內容結構有全面的了解。
2. 適合人群
第一類，UI/交互設計師，可以跳出執行層，去思考懂球帝的產品設計策略，提升產品分析能力；
第二類，產品經理/運營，通過全面的產品設計拆解、策略推導，獲取產品設計參考；
第三類，體育產品行業從業者，通過對懂球帝的全面拆解，獲取競品設計參考。
3. 分析模型
我們主要運用三種模型對產品的功能、設計進行拆解，由于沒有權威的官方數據，所以我們更多以推導的形式去思考懂球帝為什么這樣設計。
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于分析產品的功能價值。
第二個，上癮模型。由尼爾·法埃爾提出，通過對上千種習慣類產品的調研，總結出一款產品如果要讓用戶習慣、上癮，可以按照觸發、行動、多變的酬賞和投入四個步驟去設計，主要用于分析產品的功能價值和推導產品的策略設計。
第三個，社會心理學。主要結合西奧迪尼的社會心理學《影響力》六大說服力原則——互惠、承諾和一致、社會認同、喜好、權威和稀缺，去推導產品設計的用戶心理設計，主要用于推導產品的策略設計。
二、產品畫像
1. 產品介紹
懂球帝是一款體育類APP，首個版本發布于2013年12月5日，根據易觀千帆2022年8月的最新數據，懂球帝月活躍用戶人數301.8萬。懂球帝持有中超、德甲、足協杯等賽事直播版權，靠著多年的積累，吸引了眾多國內外豪門俱樂部、足球媒體和運動員在懂球帝開通官方懂球號，目前是全國用戶規模和影響力最大的足球內容平臺和社區。
2. 商業模式
2.1 客戶細分
懂球帝的客戶群體主要以足球迷為主，年齡區間在24-35歲，男性居多。據官方數據，在足球球迷群體中，懂球帝APP的滲透率高達83%。從這些數據可以看得出來，懂球帝是一個覆蓋大眾足球用戶群體的產品，不僅為用戶提供專業的足球資訊、直播、競彩和游戲等服務，還滿足了很多小眾用戶群體的需求，比如球星卡交易、賽事舉辦曝光等。
2.2 價值主張
懂球帝以懂足球，更懂你為價值主張。
2.3 渠道通路
懂球帝主要通過網絡媒體平臺進行拉新引流，比如微信、微博（56.6萬）、抖音（110萬粉絲）、知乎和小紅書（3.7萬）等平臺，其次還會通過贊助線下足球比賽活動進行宣傳，比如懂球帝足球星火公益計劃等，還有會直接投入廣告進行宣傳，比如在世界杯、歐洲杯、歐洲五大聯賽投入廣告，邀請世界巨星為產品代言等。
2.4 客戶關系
懂球帝主要通過社區、圈子和粉絲群等方式和用戶建立緊密的關系。
2.5 收入來源
懂球帝的收入來源主要通過會員VIP、商城、競彩、游戲和廣告等方式實現營收。
2.6 核心資源
懂球帝在足球領域深耕已有十年，無論是技術、數據、資源、口碑還是球迷用戶，都已經有了非常夯實的積累。
2.7 關鍵業務
懂球帝的核心業務包含足球資訊、球迷社區、體育彩票、比賽直播、球星卡交易和游戲等。
2.8 重要合作伙伴
第一類，體育行業的知識創作者，通過簽約合作的形式為平臺輸出高質量的內容，比如專欄和懂彩帝；第二類，體育運動員、解說員及具有一定名氣的體育從業者，通過在懂球帝建立懂球號和球迷進行深入的溝通，提高個人知名度和影響力；第三類，體育機構和俱樂部，比如亞足聯、歐洲各大聯賽豪門俱樂部均在懂球帝開通了懂球號，和中國地區的球迷第一時間進行交流互動，提高球隊知名度和影響力。
2.9 成本結構
作為一個互聯網產品公司，懂球帝的成本開銷主要是產品運營和開發人力等成本。
3. 用戶畫像
懂球帝的用戶群體主要以男性用戶居多，占比75.55%；從年齡分布看，以31-35歲的用戶群體最多，占比39.55%，其次為24到30歲的用戶，占比33.21%；從用戶消費能力看，懂球帝的中等及中高消費者占比67.11%；從地域分布看，三線城市用戶最多，占比21.62%，新一線城市占比23.05%，二線城市占比19.39%，一線城市僅占12.42%，其中廣東省最多，山東和四川省位居前三。
4. 信息結構
懂球帝的一級菜單包含首頁、比賽、主隊、發現、數據和用戶中心。「首頁」采用千人千面的信息流方式，根據用戶的興趣、標簽和瀏覽記錄推薦新聞，其中包含了頭條、精選、快訊、游戲等熱門欄目；「比賽」主要為球迷提供最新足球、籃球比賽的體育賽事直播，球迷可在直播間和專家進行互動；「主隊」是為球迷設置自己喜歡的球隊，當球隊開啟比賽時，會第一時間通知球迷；「數據」主要為球迷提供各大主流聯賽的當季的聯賽排名、積分、射手榜和賽程等數據；「用戶中心」設計成抽屜導航，聚合了懂球帝整個產品其他功能的入口，比如賽事、公益足球、系統設置等功能。從信息結構看，懂球帝的產品功能并不復雜。
5. 重要迭代記錄
根據七麥數據統計，懂球帝APP首個版本發布于2013年12月5日，截止到11月20日，APP版本已經更新至V7.8.8版本，近一年版本更新次數為17次。
版本重要迭代記錄
2015年1月，發布V3.0版本，全新UI，球員球隊資料頁改版，新增實時聊天室、訂閱等功能；
2016年2月，發布V4.1.1版本，Slogan為「足球迷神器（足球、直播、新聞、足彩、足球論壇社區）」；
2016年7月，發布V4.6版本，上線商品搜索功能，方便用戶購買裝備；
2017年1月，發布V5.1版本，圈子功能改版，新增Twins功能（球員twitter和ins動態）
2018年4月，發布V5.9.9版本，新增球隊數據頁，為用戶提供豐富的足球數據；
2019年1月，發布V7.0版本，全新UI，提供舒適的閱讀體驗，新增世界功能；
2020年3月，發布V7.3.5版本，上線球隊球員人氣榜功能，支持用戶為喜歡的球隊球員打榜；
2020年7月，發布V7.4.2版本，Slogan升級為「不只是一個足球APP」；
2021年9月，發布V7.6.6版本，上線會員連續包月服務；
6. 產品生命周期
根據易觀千帆2022年8月數據，懂球帝月活躍用戶人數301.80萬。官方數據公布目前懂球帝下載量超過1.5億次，注冊用戶4000萬，在足球迷群體中，懂球帝用戶滲透率超過82%，是國內最大的足球聚合平臺。 懂球帝目前在2016年就拿到了C輪融資，明年即將年滿的十周歲的懂球帝，目前處于產品生命周期的成熟期，當下聚焦于商業變現的探索和創新。
7. 競爭圖譜
截止到2022年11月21日，懂球帝APP在蘋果的APP Store應用市場，體育分類排名第11，騰訊體育位居第一，月活躍用戶人數1,205.75萬；在體育彩票分類，懂球帝位居第一，是中國體育彩票月活躍用戶人數的3倍；在體育資訊分類，虎撲以555.25萬月活躍用戶人數排名第一，懂球帝位居第二。
三、內容服務
「內容服務」是產品實現用戶留存的關鍵方式。作為一個足球媒體，懂球帝不僅覆蓋了歐洲五大主流聯賽，還包含中超、中甲、電競等聯賽資訊，為球迷提供了豐富的內容。作為一個社區，懂球帝以UGC用戶生產內容模式，吸引了全國眾多足球愛好者和創作者加入了平臺，并設計了圈子（球迷可根據自己的喜好加入不同的圈子，比如皇馬球迷圈、梅西球迷圈）等欄目，為全國球迷提供了一個創作、交流和娛樂的足球平臺。其次懂球帝利用自身強大的技術資源能力，為用戶提供每日足球/籃球比賽的直播，滿足眾多球迷無法觀看比賽或需要付費支付觀看的痛點。懂球帝還提供了非常強大的數據查詢功能，球迷可以在「數據」欄目查詢到當季各大聯賽最新的賽程、排名和射手榜等信息。
1. 內容頻道
作為一個足球媒體社區，懂球帝的內容頻道主要分為以下幾類。按聯賽分，有歐洲五大聯賽（英超、西甲、德甲、意甲和法甲）還有中超和中甲聯賽；按內容長短分，有「快訊」（提供每天最新的足球資訊）；按內容質量分，有「精選」和「深度」；按興趣分，有「關注」和「頭條」；按傳播形式，有「視頻」；其次還有電競和彩經等欄目。從內容頻道設計分類看，懂球帝的內容非常夯實，可以滿足不同球迷們的需求，但是內容設計的創新度有一定缺失，比較中規中矩。
1.1 頭條
「頭條」作為懂球帝的首頁，采用千人千面的信息流形式為用戶推薦足球資訊。頭部的輪播主要以當日或當周熱點賽事或活動為主，輪播下方內容為當日熱點比賽預告或比分，方便球迷第一時間獲取比賽數據。從第一屏開始，平臺主要結合用戶的個人興趣、標簽和主隊（球迷群體一般會選擇一個主隊，比如廖爾摩斯是阿森納球迷，就會把阿森納設置為自己的主隊）進行個性化資訊推薦。
1.1.1 新聞詳情頁
足球社區是一個充滿了愛恨交織的大江湖，比如皇馬和巴薩、AC米蘭和國際米蘭的球迷往往水火不容，所以往往在足球新聞的評論區，會非常鬧熱，甚至形成獨特的球迷文化。從懂球帝的內容詳情頁可以看出，懂球帝的用戶活躍度非常高，一篇頭條的新聞評論數有上百條評論，甚至單條評論還支持多人評論、點贊、分享和舉報，非常熱鬧。
1.1.2 用戶主頁
「用戶主頁」主要指用戶的個人主頁，主要包含發表、評論、關注和粉絲四個內容。用戶之間可進行相互關注，但不支持發送私信或其他互動方式，無法進行建立更深的關系鏈接。
1.2 精選
「精選」主要按資訊的熱度來設計，從上至下分為今日賽事、戰報、12小時熱門、24小時熱門和今日推薦五個部分。這個欄目的設計有利于讓球迷看到過去24小時的熱門新聞，避免因為個性化推送錯過當天重要新聞。
1.3 圈子
「圈子」就像貼吧，用戶可自行加入喜歡的圈子和其他用戶一起交流。懂球帝的圈子非常豐富，有按俱樂部、國家隊和球星分類建立的圈子，也有根據用戶興趣愛好建立的圈子。從官方數據看，足球彩票圈子發帖數超過1000萬，一支歐洲明星球隊的圈子發帖數均在100萬以上，可以看出用戶活躍度非常高。圈子的設計，本質就是細分用戶，讓有共同愛好的球迷相聚在一起，從而建立用戶關系，最終提高用戶留存率。
2. 懂球號
懂球帝是一個UGC內容模式的球迷社區，社區內容主要由用戶創作。懂球號分為企業機構和個人自媒體兩種類型，企業機構主要針對國內外俱樂部和足球媒體機構，個人自媒體主要針對球員教練以及熱愛足球創作的的球迷群體。
懂球號的認證分為兩種，第一種是個人認證標識，黃V，主要針對在業內有一定知名度的記者、球員、KOL和優秀創作者；第二種是團體認證標識，藍V，主要針對各大俱樂部、媒體和有公眾影響力的團體。
懂球號作為一個知識創作平臺，創作者通過寫作獲取流量曝光也可以獲得收益，以此形成內容創作閉環，為社區提供專業的資訊內容。從官方公布數據看，目前懂球帝已經吸引了眾多知名俱樂部開通了懂球號，包括亞足聯、歐洲五大聯賽眾多豪門球隊和中國男女足，可謂星光熠熠，具有很大的號召力。
3. 比賽
「比賽」這個欄目，主要為球迷們提供各大足球聯賽的比賽預告和直播。從賽事分類看，懂球帝幾乎包含了世界足壇所有主流和非主流聯賽，從最熱門的歐洲五大聯賽到巴甲、阿超、墨超這些南美聯賽，都有比賽播放源和精準的數據。
3.1 直播間
直播間分為直播君、球迷直播間和專家直播間?！钢辈ゾ咕褪枪俜降闹辈ラg，由懂球帝官方負責解說?！盖蛎灾辈ラg」就是球迷們一起聊天看球，這就像在B站看視頻彈幕一樣，非常熱鬧，屬于獨特的懂球帝看球文化。
「專家直播間」加入了很多足彩內容，首先完全由懂球帝的足彩專家負責解說比賽，其次在比賽中會向球迷推送自己的競彩方案，用戶需要購買專家錦囊或開通紅單會員才能觀看，對付費用戶的激活有很大幫助。
3.2 數據
3.2.1 賽況
「賽況」就是記錄一場比賽的真實數據，包含比賽動態（GIF動圖）、高評分球員、進攻心率圖、技術統計和完整事件。
3.2.2 陣容
「陣容」記錄了整場比賽運動員的詳細數據，包括出場時間、進球數、射門數、跑動距離和比賽評分等。
3.3 競彩
3.3.1 情報
「情報」是付費服務，用戶需要開通小紅單會員（懂球帝足彩會員服務，售價每月588元）以后才能查看。從內容設計看，非常豐富，包含專家方案、歐亞對比、高斯大小球、會員專享情報、得失球時間分布、必發冷熱分布和必發大注傾向等內容。這是懂球帝的核心優質內容，通過直播看球的場景，提升用戶開通VIP的激活率。
3.3.2 分析
「分析」內容包含猜勝負（球迷競猜數據）、大數據錦囊（付費服務）、近期戰績、未來三場、綜合實力（包含近10場戰績、場均進球等）、場面控制（控球率等）、雙方特征（射門進球效率、射門次數等）、角球、半全場（近10場半場進球數平均值）和事件統計（犯規次數和紅黃牌）。
3.3.3 專家
「專家」主要指懂球帝彩票板塊的足彩專家，這是懂球帝足彩內容的核心創作團隊，他們通過對比賽的分析輸出精準的投注方案，用戶需要購買才能查看。
3.3.4 指數
「指數」是指歐亞各大博彩公司對當場比賽競彩賠率的數據，這個欄目為用戶提供更多全面的投注參考。
4. 數據
數據分為歐洲足球、亞洲足球、美洲足球、非洲足球、全球足球、籃球和電競7大類，幾乎覆蓋了全球所有足球聯賽。
①積分主要查看當前聯賽的積分排行榜，包含勝平負場次和進失球等數據。
②球員榜的數據非常精細，幾乎可以查詢到一個球員的所有比賽數據，從射手榜、助攻榜、關鍵傳球、射門、越位、傳球再到攔截、成功過人、搶斷和解圍，應有盡有。
③球隊榜和球員榜也很相似，顆粒度非常細，從進球數、控球率到撲救點球數、領先情況下丟分數據都包含了。
④賽程主要提供當前聯賽的比賽進程，方便球迷查詢。
⑤懂球帝還為球迷提供過往賽季數據查詢的功能，甚至可追溯到1986~87賽季的數據。這就像一座足球博物館，球迷可以查詢過往賽季各大聯賽、各支球隊的詳細數據，非常方便。如此專業強大的數據服務，也能提升球迷對產品的滿意度，提高用戶留存率。
4.1 球隊主頁
「球隊主頁」包含球隊當前戰績、動態、賽程、數據、球員、圈子、資料和轉會8個內容模塊。
①「動態」就是把球隊的新聞資訊匯總，方便球迷可以看到和俱樂部相關的所有新聞。
②「賽程」展示球隊當前賽季的比賽記錄，懂球帝還提供了一個歷史賽季查詢的功能，最高可追溯到1920賽季，跨度超過100年。
③「數據」主要展示當前賽季球隊的聯賽數據，包括進攻、組織、防守、關鍵球員等數據，懂球帝統計了近10個賽季的球隊數據，非常完善。
④「球員」主要展示球隊當前的球員信息，包含出場數量、進球數、助攻數以及合同到期時間。
⑤「圈子」關聯了球隊的球迷圈，用戶可以在圈子發帖，和其他球迷一起交流。
⑥「資料」展示了球隊的歷史資料，數據非常豐富，包括歷任主教練、隊史紀錄（進球、出場記錄）、榮譽記錄（聯賽冠軍、杯賽冠軍等）。
⑦「轉會」就是統計球隊的球員轉出和轉入記錄，包含球員轉入轉出的去向以及轉會費，懂球帝統計了近10個賽季的數據轉會記錄。
4.2 球員主頁
「球員主頁」就是展示球員的詳細信息，主要包含球員的動態、數據、能力值和資料。
①「數據」統計了球員整個職業生涯在聯賽、杯賽以及國家隊的數據，包括出場時間、進球數、助攻數、射門次數等，非常全面。
②「能力值」就是對當前球員的能力評估，包括速度、射門、力量、防守、傳球和盤帶等；
③「資料」統計了當前球員職業生涯中的所有榮譽，包括基礎資料、球員身價變化、轉會記錄、俱樂部生涯以及個人榮譽。
④「球星卡」是一個競拍交易的版塊，球迷可以出售和當前球星相關聯的等物品。
5. 賽事服務
「賽事服務」面向的用戶人群主要是擁有舉辦體育比賽活動組織能力的機構或球迷團體，但由于賽事規?；蛸Y金的緣故，無法獲取更高的曝光以及獲取專業的技術設備。懂球帝從技術、數據、直播以及流量四個維度為用戶提供專業完善的服務，吸引全國各地的體育愛好者加入懂球帝，實現用戶拉新（已經單獨設計直播君APP運營），提高知名度。目前該服務官方顯示為免費，滿足條件的用戶都可以免費申請。
5.1 賽事詳情頁
「賽事詳情頁」包含了賽程、積分榜、球隊榜、球員榜和參與球隊等內容，有效幫助賽事舉辦方實現精準的數據化統計，方便球迷查詢。
6. 公益足球
「懂球帝公益」在2016年開始運營，在2021年升級為「懂球帝足球星火公益計劃」。這個活動的主要目的是為貧困地區和專項足球小學的學生提供愛心足球，在幫助他們快樂健康成長的同時，也擴大了中國足球的青少年基礎。目前APP顯示已向916所學校捐贈足球14441個，其次公益版塊顯示正在全新升級，暫停捐款。
四、變現服務
懂球帝在商業變現的形式設計上，主要通過體育彩票版塊切入。通過「彩經」版塊，招募了眾多足彩KOL組成了懂彩帝專家團，以撰寫比賽分析向用戶銷售競彩情報。用戶不僅可以直接購買，也可以開通懂球帝的小紅單會員和紅單會員，獲得專業可靠的競彩方案。其次，懂球帝還有球星卡、周邊商城和游戲三個變現業務。
1. 彩經
「彩經」就是體育彩票，作為體育產品最重要的變現服務之一，懂球帝的彩經版塊包含了足球、籃球、電競和數字彩四種類型。從頁面內容結構看，從上至下主要分為熱門專家直播、金剛區、專家和足彩情報。
1.1 懂彩帝
「懂彩帝」就是懂球帝官方的專家團，包含了足球、籃球和電競的各種競彩專家。競彩專家主要通過對賽事的分析，以撰寫競彩情報向用戶銷售。懂彩帝的專家庫非常完善，從歐洲主流聯賽到中超、中甲、美職聯這些聯賽，都有不同的專家針對對應的聯賽研究分析。
其次懂彩帝還設計了三個排行榜，非常有趣，不僅可以吸引粉絲關注，還能利用攀比心理，倒逼專家寫出更精準的投注方案，分別為命中榜（推薦的方案命中率）、連紅榜（連續推薦命中的比賽場次）和回報榜（通過購買專家方案獲取的回報排行）。
1.2 專家主頁
「專家主頁」主要包含專家資料、命中率數據趨勢圖和在售方案三塊內容。用戶可以關注專家，成為他的粉絲，還可以購買真愛卡（虛擬貨幣）加入專家的粉絲團，成為他的忠實粉絲；其次通過命中率趨勢圖可以查看專家近期的競彩命中趨勢；「在售方案」就是專家最新的競彩方案，用戶可直接購買查看。
2. 球星卡
「球星卡」作為一種實物珍藏品，近兩年在國內市場非?；馃幔捎谄洫氂械南∪毙院屯顿Y屬性，所以催生了球星卡的拍賣模式。從懂球帝關于球星卡科普的文章可以看出，一張稀有的球星卡售價可以超過百萬美元，在美國每年的球星卡成交額高達上億美元。
球星卡版塊主要包含每日截標卡推薦、?？ú┪镳^、圈子、數據庫和商品等內容。球星卡采用拍賣的形式進行銷售，商家設置競拍底價以后，在截止時間內出價最高者勝出。
3. 商城
懂球帝的商城主要包含運動休閑、配件和足球周邊三大類服務，商城的設計比較簡單，除了分類，就是商品信息流，用戶可直接加入購物車購買。
4. 游戲中心
游戲是體育產品的最重要的變現方式之一，懂球帝的游戲中心包含了電競、足球、籃球、休閑掛機和魔幻修仙等游戲，以小程序的形式游戲，非常方便。
5. 付費會員
懂球帝的會員主要分為三種類型，分別是小紅單會員、紅單會員和D+會員。
5.1 小紅單會員
小紅單會員售價588元每月，主要針對足彩的用戶，主要權益包含專家方案解鎖、專家方案公布、每月神券、冷門提前預警、關鍵情報推送、高斯大小球模型、必發冷熱分布、深度數據分析、歐亞大盤對比、昵稱紅名、入場廣播、紅單會員標識和會員免廣告13種會員權益。
5.2 紅單會員
紅單會員售價1998元，主要針對足彩用戶，和小紅單會員特權相比，增加了專家方案折扣（9折）、免費大數據錦囊（每月2次）、會員專屬圈子三個服務。
5.3 D+會員
D+會員屬于平臺的基礎會員，售價19元每月，可享受免廣告特權、極致畫質、尊貴身份和炫彩名牌4種特權服務。
五、設計總結
1. 商業層
從懂球帝的商業模式看，懂球帝的盈利模式比較單一。除了傳統的線上廣告收入，盈利模式主要圍繞體育彩票設計，比如懂彩帝專家團以及小紅單和紅單會員等。而體育彩票這塊，由于國家的政策等原因，懂彩帝更像一個知識付費服務，只是向球迷銷售投注方案。另外體育彩票服務也容易導致球迷購買了方案去境外網站Du球，觸及國家的紅線區。對于馬上年滿10周歲的懂球帝來說，對商業模式的設計還需要拓展和創新。
2. 內容層
懂球帝這個產品，在內容設計方面，其實比較中規中矩，缺乏創新。作為一個足球媒體，懂球帝欠缺有深度、特色、個性化的內容欄目，雖然依靠UGC內容模式可以降低大量人力成本，但在內容深度的缺失就很難讓懂球帝擁有核心競爭力。其次在整個產品的功能、內容以及結構的設計上，也看不到太多的亮點。比如周邊商城，就只是最簡單直接的商品銷售，而如果你有看過樊登讀書的商城設計，你就會發現同是各自行業的獨角獸，懂球帝的產品設計創新力就太弱了。
3. 體驗層
體驗層包含產品的交互、視覺以及用戶在使用產品整個過程中的操作體驗。從交互和視覺看，懂球帝的產品設計不夠精細，比如像「比賽」版塊，無論是內容布局，還是字體大小、顏色，在視覺上給人的感覺比較粗糙。還有彩經版塊，金剛區的圖標都是模糊的，整個版塊的設計顯得雜亂又廉價。其次在產品的使用中，廣告實在太多，而用戶屏蔽廣告的方式除了花錢開通D+會員，只有通過觀看其他廣告獲取免廣告卡才能屏蔽，這樣的設計，讓人略失所望。
4. 運營層
懂球帝在用戶運營方面的功能設計得比較淺，整個產品只設計了一個任務中心，內容也比較常規，用戶通過簽到或者做任務可以領取金幣（金幣可以兌換成現金提現，5萬金幣可以兌換5元），其他的功能就再也沒有了。相比脈脈和樊登讀書這些具有豐富用戶福利的產品，懂球帝和站酷很像，其實我也是懂球帝的老用戶（注冊時間超過7年），但迄今為止并沒有看到任何官方粉絲交流群，也無法和平臺建立任何鏈接，甚至在球迷圈，即便我關注了同是阿森納的球迷朋友，也無法建立更深的鏈接。
參考文獻
易觀千帆 - 懂球帝/虎撲/騰訊體育APP數據分析
七麥網-懂球帝迭代記錄
懂球帝官網
2017年中國互聯網體育服務行業研究報告
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作為全球最火爆的體育賽事，世界杯由于其獨有的稀缺性，被外界譽為四年一次的足球盛宴。根據國際足聯主席因凡蒂諾預測，2022年的卡塔爾世界杯賽事將會吸引到全球超過五十億人觀看，這一人數占全球總人數的比重超過60%。
以往球迷們觀看世界杯，更多是通過電視或者央視頻、優酷這種傳統的互聯網視頻平臺，而在2022年這個冬天，抖音花費10億巨資，成為了國內首個獲得世界杯直播版權的短視頻平臺。作為擁有6億日活的抖音，將會如何跨界設計世界杯專題，讓億萬球迷能在抖音享受四年一次的足球盛宴，本期設計大偵探，就來全面拆解抖音世界杯專題。
一、欄目入口
抖音世界杯的入口在抖音頭部一級導航欄最左邊，和周邊、關注、商城以及推薦并列。世界杯的欄目首頁從上至下主要分為5個部分，分別是輪播（當日熱門賽事以及活動）、金剛區（包含賽程、積分榜、有獎預測和我的主隊入口）、比賽直播（當日賽事）、名嘴聊球（簽約足球大咖）、賽事熱點（熱點頭條資訊）、熱門球星（入駐足球巨星）、世界杯好物（周邊商城和抖音生活服務）、重磅熱播（抖音自制節目）、大家都在拍（平臺用戶自創視頻）和視頻信息流（世界杯專題相關視頻）。
二、內容策劃
抖音在內容策劃方面，幾乎把前央視解說團隊都邀請過來了，比如黃健翔、段暄、劉建宏這些家喻戶曉的的足球主持人，都在抖音單獨負責至少一款足球綜藝欄目。除了解說團隊，抖音還邀請了眾多跨界娛樂綜藝大咖，為球迷一口氣送上8個原創足球綜藝節目。從這個版塊可以看出，抖音對此次世界杯的重視度之高，就像卡塔爾為了舉辦世界杯投資2200億美元一樣，劣勢可以用金錢彌補。
1. 內容專題
1.1 觀賽指南
「觀賽指南」是指在一場比賽開打之前，各方媒體對這場比賽進行的賽事分析和預測。足球這項運動，由于充滿了競技性，一場焦點比賽，從賽前到比賽，再到比賽后，都充滿了無數話題。而觀賽指南，可以為球迷提供完整的比賽情報和指南，為比賽做預熱。
1.1.1 分組解析
「分組解析」是針對世界杯的8個小組（世界杯有32支參賽球隊，分為8個小組，每個小組4支球隊，前兩名可以晉級到淘汰賽）進行出線形勢分析。作為四年舉辦一次的比賽，對于每支球隊來說，都是非常寶貴的機會，所以關于小組的出線分析也往往是世界杯的熱門話題之一。從內容設計看，抖音的分組解析包含了專家預測（名嘴大咖）、小組賽程、歷史數據（歷史對戰記錄）、熱門球員（小組熱門球星）和熱門動態（相關的足球資訊）五個內容。
1.1.2 賽程解讀
「賽程解讀」就是針對單場比賽進行解讀，包含比賽前瞻（專業的足球分析）、專家點評（世界杯專家團，含金量高）、網友熱議（精選網友的高質量分析）、近5場戰績、球隊名單、球員PK（核心球員）、積分榜以及相關的最新足球資訊。從這個欄目的內容策劃看，由于缺少足彩競彩和有深度的內容，顯得中規中矩，稍顯嚴謹，欠缺互動。
1.2 比賽日報
「比賽日報」就是根據每天結束的比賽生成當天所有比賽的戰報，這個頁面包含了直播回放、圖文戰報、視頻集錦、賽況詳情、技術統計和積分榜等內容，球迷也可以切換不同的比賽查看當場比賽詳細的戰報。
1.2.1 直播回放
「直播回放」對于體育賽事來說非常重要，比如像深夜場的比賽，大部分球迷都很難熬夜觀看，這個時候只能通過直播回放來觀看比賽。抖音的「直播回放」提供了全場錄播回放、全場集錦（分長集錦和短集錦）、球星集錦和精彩時刻集錦，可以滿足不同用戶的觀看需求。
1.3 熱議話題
當一場比賽結束以后，話題討論的熱度將會達到最高值，比如阿根廷輸給沙特的比賽，全網球迷都在心疼梅西。抖音在「熱議話題」的內容設計上，不僅有獨立的圖文專題頁還有白巖松的「白說世界杯」短視頻欄目，給球迷帶來全方位的內容解讀。
2. 視頻節目
2.1 DOU來世界杯
「DOU來世界杯」是抖音官方自制的視頻節目，這個節目合計29期，每天更新1期，內容非常豐富，包含比賽復盤、每日看點、球星球隊故事和賽事預測等。從欄目定位看，這個欄目直接對標曾經央視體育最知名的《天下足球》欄目，更是邀請了主持多年《天下足球》的主持人段暄親自負責，這不僅可以確保內容質量，還可以幫助抖音贏取眾多80、90后球迷的好感（國內80%的80、90后球迷都是看著《天下足球》長大的），既賣專業，也賣情懷，一舉兩得。
2.2 宏哥侃球
「宏哥侃球」是資深體育解說員劉建宏獨家打造的足球直播綜藝，合計12期。劉建宏和段暄一樣，是央視體育另一個王牌節目《足球之夜》的制片人和主持人，甚至是第一位獲得“金話筒獎”的體育節目主持人。從內容定位看，這個欄目主要以劉建宏通過邀約足球名宿和名人明星聊天的形式，為球迷帶來不同角度的比賽解讀和話題討論。從嘉賓陣容看，不僅邀請了李明、徐亮、徐云龍這些足球大咖，還邀請了蘇醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可謂群星熠熠。
2.3 黃健翔談
「黃健翔談」是前央視主持人黃健翔的個人脫口秀節目，合計24期。從內容定位看，這個欄目主要是黃健翔針對每日比賽進行看點分析，講述隊伍、球員之間的淵源與故事，專業性較強，差異化低。
2.4 依然范志毅
「依然范志毅」是前國足名宿范志毅打造的直播節目。從內容定位看，這個欄目集合了脫口秀、電競PK、國際球星挑戰等娛樂內容，其次還會邀請02年世界杯國足的眾多足球大咖一起聊球。范志毅作為前國足名宿，不僅知名度高，近年來在社交媒體平臺也以獨特的“范式辣評”成為了眾多網友崇拜的偶像，話題熱度非常高。
2.5 懂球大會
「懂球大會」是以段暄、黃健翔和劉建宏為常駐嘉賓，搭配各路懂球大咖賽前或賽后連線的足球直播節目。從內容定位看，這個節目主打前央視解說鐵三角的賣點，再邀請其他足球嘉賓圍繞每期的熱門話題以直播火熱開“吵”的形式為球迷們打造一款直播時代的另類足球節目。
2.6 黃家足球班
「黃家足球班」 是黃健翔聯手德云社打造的直播節目，合計12期。從內容定位看，這個節目把足球的專業性稀釋，加入了相聲的元素，從而拓寬用戶人群，讓大眾都能看得懂，看得進去，感受到足球的樂趣。
2.7 大咖侃球
「大咖侃球」由抖音官方出品。從內容定位看，這個節目主要以邀請體育、文化、財經、商業等領域的名人大咖，圍繞世界杯開展泛人文社會熱點話題討的論，旨在打造一個專業又具有趣味性、互動性的世界杯抖音脫口秀。不過這個節目話題寬度太廣，目標用戶不精準。
2.8 Hi！足球少年
「Hi！足球少年」是世界杯官方贊助商海信獨家打造的一款足球少年選秀節目，通過節目選拔足球熱忱最突出的4名少年奔赴卡塔爾。這個節目邀請了李明、米盧等國足退役名將，還有柳巖、梁漢文這些娛樂明星，從嘉賓陣容看，這個節目以娛樂選秀為主，目前8期節目已全部更新結束。
三、比賽數據
歷時29天的世界杯，將會進行64場比賽，最終決出冠軍、MVP和金靴獎等。隨著互聯網泛娛樂的發展，相比過往大家主要通過電視觀看比賽這樣靜態的形式，現在的足球比賽不僅擁有豐富的直播形式，而且每個平臺都有自己獨特的看球文化。
1. 直播間
抖音的比賽直播間，功能非常豐富，主要包含六個內容，分別是直播、聊天、陣容、賽況、看點和預測。
①「直播」就像視頻彈幕一樣，大家可以暢所欲言的一邊看球一邊聊天。在底部的聊天窗口，點擊「分享」后，不僅可以保存本場比賽即時生成的精彩瞬間，還能邀請好友一起觀看比賽直播，互動非常強。
②「聊天」這個功能，充分利用了抖音的社交屬性，通過邀請好有，可以像建立群組一樣快速創建一個直播聊天群，非常便捷。這個功能就像一個VIP包廂，為用戶提供了一個相對私密的空間，滿足不同用戶的需求。
③「陣容」是指當場比賽的出場人員統計，包含首發陣容、球員統計和替補球員等信息，點擊球員頭像以后，可查看球員當場比賽的數據，包含進球、射門、傳球成功率等，非常全面。
④「賽況」是指當場比賽的詳細戰況，包含各種技術統計，比如控球率、射門數、傳球成功率等。
⑤「看點」就是把一場比賽的精彩時刻快速生成GIF，不僅可以作為當場比賽的賽況回放，也降低了用戶傳播的行動成本，吸引用戶分享傳播。
⑥「預測」就是競彩，球迷可以通過金幣預測當場比賽的勝平負、兩隊總進球數以及其他話題。
1.1 播放器
「播放器」的功能非常豐富，除了彈幕、倍速、視頻畫質和電視投屏這樣的常見功能，抖音還支持多種類型的解說和視角方式。比如同一場比賽可以切換不同的主持人（央視主持人、退役運動員還有粵語主持），還支持球星、無障礙字幕、現場原聲、戰術機位、場館全景等四種視角方式，觀看體驗非常豐富。
2. 數據
作為一項體育運動，比賽數據的統計分析至關重要。球迷需要查詢世界杯的詳細賽程、積分榜、射手榜、球隊和球員的詳細數據。
2.1 賽程
「賽程」主要為球迷提供世界杯的詳細比賽賽程，用戶可以直接預約比賽直播。當球迷預約后，抖音會一鍵生成比賽海報吸引用戶傳播，設計得非常巧妙。其次抖音的設計團隊非常用心，相比其他產品的「賽程」欄目，他們會用一句簡短的話來描述每場比賽的結果或前瞻，讓「賽程」這個冰冷的欄目加入了溫度。
2.2 積分榜
「積分榜」主要為球迷們提供8個小組的積分排行詳細，包含勝平負場次、進失球數和小組積分。
2.3 晉級圖
「晉級圖」主要為淘汰賽服務，當小組賽結束以后，每個小組的前兩名會進入淘汰賽，球迷可以通過這個圖俯瞰世界杯的晉級明細路徑。
2.4 射手榜
「射手榜」主要針對球員個人，統計的數據非常全面，包含進球、助攻、射正、關鍵傳球、紅牌、黃牌等數據。
2.4.1 球員主頁
「球員主頁」就是足球運動員的詳情落地頁，主要包含六個部分，分別是基礎資料（姓名、年齡、身高、體重、位置、身價、效力俱樂部等）、精彩集錦、球員單場表現、球員累計數據、球員賽程和球員百科。
2.5 球隊榜
「球隊榜」和「射手榜」一樣，包含進球、助攻、射正、關鍵傳球、紅牌、黃牌等數據。
2.5.1 球隊主頁
「球隊主頁」就是參賽球隊的詳情落地頁，主要包含六個部分，分別是基礎資料（世界排名、總身價、平均年齡、歷屆最佳成績等）、精彩集錦、球隊單場表現、球隊累計數據、球隊賽程、熱門球星、球隊陣容、歷史數據和球隊百科。
3、互動
從2014年開始，世界杯就成了一個全民狂歡的盛宴，可謂全民參與，全民娛樂。由于受政策限制，抖音沒有足彩版塊，而是通過虛擬金幣的形式設計了有獎預測和世界杯樂園、足球答人等游戲。其次為了鼓勵用戶參與到世界杯的盛宴中，抖音還設計了一套世界杯特效，提升用戶的參與度。
3.1 有獎預測
「有獎預測」其實就是足球競彩。足球競彩作為支撐足球運動發展的重要支柱，也是全民世界杯的主要動力之一。由于國家政策等原因，抖音使用了虛擬的金球幣用來作為競彩的籌碼，增加娛樂性。
①「有獎預測」的頁面設計比較簡單，頭部為用戶的錢包（金幣和紅包數量），主視覺為當前比賽的對陣雙方，右上角是活動規則和預測記錄，右下角是賺金錢幣和預測榜。預測的內容主要是比賽的勝平負、總進球數以及其他根據當前比賽設計的競彩內容，比如梅西會不會進球，比賽會不會出現頭球等。
②整個預測頁面的內容，相對而言比較簡單，主要以提升用戶參與度和用戶拉新為目的。當用戶確認預測后，抖音設計了一個用戶拉新的功能，只要邀請好友助力就可以獲得10萬金幣，如果是一個新用戶，則可以獲得3倍獎勵。
3.1.1 錢包
「錢包」的內容主要分為三塊，頭部是數據板，包含金球幣數量、現金金額（金球幣可以兌換成現金，提現到自己的銀行卡）、獎品數量、優惠券數量和抖音成就（類似勛章）；中間是「金球幣抽獎」，用戶可以使用金球幣進行抽獎，獎品包含足球、優惠券等周邊商品；底部是「公益版塊」，用戶可以使用金球幣購買足球等方式助力貧困地區的鄉村學校捐建足球場。
3.1.2 預測榜
抖音統計了全站預測榜的球迷，分為全國榜、本地榜和朋友榜。榜單的設計，能增加球迷的攀比心理，提升用戶活躍度。
3.1.3 金幣游戲
3.1.3.1 世界杯樂園
「世界杯樂園」是一款足球游戲，玩法比較簡單，用戶通過體力可以讓角色不斷前進獲取福利。而用戶獲取體力的方式需要做任務、看比賽以及邀請好友。
3.1.3.2 足球答人
「足球答人」是一款問答競技類型足球游戲。這款游戲設計得非常有創意，三人隨機組隊，通過答題的形式模擬足球比賽在線PK。第一個回答正確的用戶會有模擬進球的畫面，吸引球迷搶答，其次模擬世界杯的賽制，勝利后可以晉級下一輪，最終決出冠軍，非常有趣。
3.2 我的主隊
每個球迷都有自己喜歡的球隊，這支球隊就稱為「主隊」，比如一個喜歡阿根廷的球迷就會把阿根廷看作自己的主隊。這種帶有鮮明愛恨的元素，也是足球這項運動的魅力之一。用戶進入「我的主隊」以后，需要設置自己的主隊，選定后，將會展示主隊的賽況、比賽數據和視頻集錦。用戶如果更換主隊，還需要消耗金幣，可見抖音產品團隊對球迷的研究足夠透徹。通過建立「主隊」，不僅可以增加用戶的黏度，還能建立關系鏈接，提升用戶的留存率。
3.3 世界杯好物
3.3.1 燃情好物
「燃情好物」就是向球迷銷售世界杯相關的周邊商品，比如世界杯吉祥物、鑰匙扣、手辦、紀念品等物品。
3.3.2 吃喝玩樂
世界杯獨有的文化就是喝著啤酒看比賽，所以「吃喝玩樂」這個版塊接入了抖音的「生活服務」，球迷可以在抖音購買夜宵、小吃、奶茶等，非常方便。
3.4 大家都在拍
為了鼓勵用戶參與到世界杯的狂歡中，抖音為世界杯專門設計了一套視頻特效，用戶可以選擇喜歡的特效錄制，提升用戶參與度。
四、總結思考
1.商業層
作為一個短視頻平臺，抖音為什么舍得花費巨資打造世界杯欄目，通過此次對抖音世界杯專題的拆解，我認為這是一次對針對80、90后群體的二次拉新和激活。從抖音重金邀請前央視主持人陣容看，抖音正在嘗試通過世界杯這樣能激發球迷情懷的載體把那些邊緣用戶重新拉回來?！窪OU來世界杯」不僅直接對標央視體育曾經最知名的《天下足球》欄目，甚至連主持人都不變，既賣內容，更賣情懷。像筆者這樣以前每周只會打開幾次抖音的用戶，通過此次世界杯的直播，變成了日均使用超過6個小時的重度用戶，這在以前簡直不敢想象。
當然，和四年前的優酷等互聯網視頻平臺面臨的情況一樣，當世界杯硝煙散完以后，抖音又如何通過高質量的內容留住這部分用戶群體，是一個問題。
2. 內容層
在過去，多數用戶對抖音的印象是一個內容質量低劣、靠娛樂搞笑博眼球的短視頻平臺，但從此次世界杯的內容策劃看，抖音不僅誠意十足，一口氣推出8檔原創足球直播節目，更是邀請了眾多體育名嘴、知名運動員和跨界嘉賓輸出高質量的內容。這對廣大球迷來說，實在太過癮了，已經很久沒有這樣的足球盛宴。而且相比過去傳統的圖文時代，加入了短視頻傳播媒介的世界杯，給了億萬球迷全新的看球體驗，切換不同的解說風格、直播視角，在抖音直播間邀上幾個好友，就可以一邊聊天，一邊看球，這樣的看球體驗，太爽了。
3. 體驗層
抖音產品設計團隊對世界杯專題的設計，無論是視覺、交互還是產品體驗，都非常用心。比如在「賽程」頁面，通過一句簡短的賽況描述，不僅豐富了設計形式，還傳遞了設計的溫度（其他的體育產品相比，「賽程」頁面更像一個冰冷的機器，除了播報數據，沒有任何情感）。還有像「足球答人」這樣的游戲，完全以模擬世界杯晉級賽制的形式設計，在我首次試玩的時候，就開始為了“進球”進行“搶答”，最終拿下比賽冠軍。這樣讓用戶尖叫的設計，真的讓人愛不釋手。
參考文獻：
當抖音進軍世界杯，TikTok挖了NBA墻角
終于，我們都能在抖音看世界杯直播了
“抖”來世界杯：流量盛筵，意義幾何？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從事互聯網醫療行業的年頭也不短了，做過慢病的健康管理產品，負責過互聯網醫院整條產品線的建設，也參與過AI健康檢測硬件產品的設計。
行業中互聯網醫療行業中一些公司在對外的宣傳中也衍生出了數字醫療、數智醫療等新名詞，無論是服務于醫生、還是醫院或者是藥企或者是保險，最終落地或者說繞不開的都是C端患者。那么，如今市面上互聯網醫療C端產品的組成成分都有哪些呢？
在談互聯網醫療C端產品的組成前，我們先用一小段介紹下人體有哪些重要組成部分：
“臟”是指實心有機構的臟器，“腑”是指空心的容器。
人體五臟包含：心臟、肝臟、脾臟、肺臟、腎臟。
人體六腑包含：小腸、膽囊、胃、大腸、膀胱等分別和五個臟相對應的五個腑，另外人體的胸腔和腹腔分為上焦、中焦、下焦，統稱為三焦，是第六個腑。
五臟和六腑的關系：臟與腑是表里互相配合的，一臟配一腑，臟屬陰為里，腑屬陽為表。臟腑的表里是由經絡來聯系，即臟的經脈絡于腑，腑的經脈絡于臟，彼此經氣相通，互相作用，因此臟與腑在病變上能夠互相影響，互相傳變。
人體各個器官按照一定的順序排列在一起，完成一項或多項生理活動的結構叫系統。
人體的八大系統：消化系統、呼吸系統、循環系統、泌尿系統、運動系統、生殖系統、內分泌系統和神經系統。
八大系統在神經和內分泌系統調節下，互相聯系、互相制約，共同完成整個人體的全部生命活動，以保證人體生存和種族綿延。
看到這也許大家會納悶，文章標題是“互聯網醫療C端產品的組成和優勢的建立”，PM大白怎么在開篇講起人體的五臟六腑和八大系統呢，因為PM大白認為產品同樣也是一個生命體，產品的0-1即是產品的出生、產品的迭代即是產品的成長、產品的矩陣即是種族的綿延，那么產品作為一個生命體，并且是互聯網醫療產品，那么她同樣存在著類似五臟六腑八大系統的組織，只是組織的名稱不一樣，大家不這樣稱呼而已。
不多說了，下文進入正題，看看互聯網醫療C端產品的組成成分有哪些：
上文中提到了人體的五臟六腑：“臟”是指實心有機構的臟器，屬陰；“腑”是指空心的容器，屬陽。
那互聯網醫療C端產品中（下文中簡稱為“產品”）的五臟六腑PM大白如何定義呢？
上文中選擇互聯網醫療C端產品中的幾個重要模塊定義為其“五臟六腑”，那互聯網醫院C端產品中將這“五臟六腑”串聯起來的八大系統又有哪些呢？其實本質是各個維度中的供需關系的維護。
上文我們介紹了互聯網醫療產品的核心組成模塊，但是好像現在互聯網醫療行業并沒有迎來爆發期或者說沒有得到大范圍的應用和產生價值，那又是為何呢？
之前我在生物實驗室工作，那個時候社會上就說生物行業是朝陽產業，未來可期；后來我轉行到了互聯網醫療行業，身邊的朋友又說，互聯網醫療可是互聯網垂直行業中的朝陽行業，可是互聯網醫療這個朝陽一直在海平面附近起起落落，一直沒有升起來，更不用說什么日到中天的趨勢，反而是不溫不火。
更有甚者，同行們開始懷疑互聯網醫療的價值到底在何處，難道互聯網醫療就是賣藥賣保險賣醫療周邊延伸服務的工具嗎？個人沒有懷疑過互聯網醫療價值，至少從沒有懷疑過這個行業的未來價值的，只是限于當前的用戶就醫習慣、政策法規、相關技術以及醫療體系，醫療是一個嚴肅的產業，必須循序漸進與互聯網、AI等新技術結合，這才是負責任的醫療行業從業者該有的態度，因為醫療健康事關生死。
如何在現在的這個行業處境下默默地建立起自己的優勢才是正道，那么互聯網醫療產品的優勢在何處建立呢？其實有兩個方向：資源和技術（也許對從事互聯網醫療行業的大家來說，這就是大白話）。
資源型優勢：通過不斷地積累醫療業務相關的核心資源建立優勢。
1）數據優勢
定義：這里提到的“數據”僅指患者在所有醫療、健康活動中產生的用于組成患者健康檔案的數據。
來源：線下醫院（核心）、線上問診、用藥記錄、醫保數據、健康險數據、移動設備檢測數據……
政策：近期國家相關部門出臺了《“十四五”全民健康信息化規劃》正是一個信號，出于患者個人醫療健康數據的重要性、復雜性、安全性、隱私性，也只有國家力量才有這種能力去實現；以下是從《“十四五”全民健康信息化規劃》摘錄的部分信息 ：
堅持統籌集約，共建共享。堅持統籌布局，深化共建共用，增強全民健康信息化發展的系統性、整體性和協調性，以構建大平臺、大系統、大目錄為導向，加大信息化建設統籌力度，加強信息化基礎設施集約化建設，鞏固政務信息系統整合成果，進一步破除數據共享壁壘，暢通數據共享通道，推進數據全生命周期管理。
到2025年，初步建設形成統一權威、互聯互通的全民健康信息平臺支撐保障體系，基本實現公立醫療衛生機構與全民健康信息平臺聯通全覆蓋。
數字健康服務成為醫療衛生服務體系的重要組成部分，每個居民擁有一份動態管理的電子健康檔案和一個功能完備的電子健康碼，推動每個家庭實現家庭醫生簽約服務，建成若干區域健康醫療大數據中心與“互聯網+醫療健康”示范省，基本形成衛生健康行業機構數字化、資源網絡化、服務智能化、監管一體化的全民健康信息服務體系。
目的：打通各個醫療數據孤島，構建患者全生命周期的健康檔案、屬于整個現代醫療體系的底層基礎建設，服務于上層所有與醫療相關的應用服務，對線上互聯網醫療尤為重要；
最終在健康數據這塊的發展趨勢，應該是國家完成居民全生命周期的健康檔案的統籌和建設，制定授權標準，然后通過授權的方式提供給具備相關資質的互聯網醫療企業在其產品中進行調用。
我們選取了騰訊醫療官網以及騰訊醫療面向C端用戶的一款產品：騰訊健康（小程序），看看對方在數據建設方面的的產品。
①騰訊官網
產品服務對象劃分為了兩類：醫療機構與患者、區域醫療。
面向不同的服務對象，騰訊提供了不同的解決方案；面向醫療機構與患者，解決方案有：
前兩種方案的實現必然需要與醫保系統和醫院his系統的對接，則涉及醫保數據和his數據的互通；后兩種方案則涉及到疾病和藥品數據知識庫的建設。面向區域醫療，解決方案是：微信電子健康卡開放平臺、全名健康信息平臺、區域智慧醫療平臺、區域大數據云，這類方案完全符合了《“十四五”全民健康信息化規劃》的目標。
②騰訊健康小程序
進入首頁是不是發現與其他互聯網醫療APP呈現的內容有所不同呢，騰訊健康既沒有直接呈現大量的醫生和科室，也沒有直接呈現各種醫療服務包，金剛區顯示的是“醫保電子憑證”和“防疫健康碼”，首頁還還在功能區顯示了“我的醫?！比肟?，以及在服務推薦區1號位顯示“本地醫保碼”領取和查看入口。
2）知識優勢
定義：這里提到的知識主要指與健康管理，疾病治療相關的醫學知識。
來源：醫生、醫院、協會、醫學百科以及權威醫學書籍。
形式：直播、短視頻、音頻、圖文。
目的：培養患者的健康習慣、提供患者自我健康管理的科學方法、提高患者對疾病各方面的認知以及自我治療和線下就醫的各種渠道和流程信息，對產品來講是前期的流量入口。
我們選取百度健康官網和騰訊醫典APP，看看同行在醫療健康知識這方面的重視程度和所做的努力：
我們可以看到百度健康的PC端官網沒有一個醫生，沒有任何線上問診等其他醫療服務入口，展示的是不同形式的疾病知識，其中包含短視頻、直播、圖文等形式，其實百度健康是用它的“醫典”模塊作為的PC端官網，如果不是百度健康搞錯了，那就足以看出百度健康認為健康知識這塊的重要程度；還有就是騰訊很早就做出了一款定位醫學科普知識的產品——騰訊醫典。
3）服務優勢
定義：這里提到的服務主要指線上的問診、開藥、健康管理、掛號、等需要醫生或其他專業醫療健康從業者或醫療機構參與的業務。
來源：醫療機構、專家、醫生、藥師、健康管理師、營養師等。
目的：醫療健康服務是最直觀的能讓患者感受到當前產品所具備醫療健康價值的模塊，也是能幫助患者解決實際需求的重要模塊，對定位于互聯網醫療的產品長期發展來講，醫療健康服務必定是后期的主要盈利入口，互聯網醫療也必然會像現在的線下醫療體系改革一樣擺脫以藥養醫的依賴。在所有的互聯網醫療產品中，好大夫便是聚焦服務和堅持線上醫療服務為主要方向的一款產品。
4）商品優勢
定義：這里提到的商品主要指藥品、健康險、保健品等與醫療健康相關，由醫療服務延伸出的需要付費交易的實物產品。
來源：藥企、健康險公司、移動健康設備等。
目的：在患者對線上醫療健康服務付費接受度還沒有那么高時，采取的一種盈利生存手段；如果一家互聯網醫療公司是靠藥品、保險或其他非服務產品維持發展和成長的話，醫療服務型產品只是為這些盈利手段服務的話，也許會是一個成功的生意，但是個人寧愿將這類公司直接稱之為醫藥電商公司、醫療設備提供商，而不是今天全篇講的互聯網醫療公司（或產品）；目前在京東健康上的藥品收入與醫療服務收入占比接近7:1。
技術型優勢：通過發明或優化新的技術讓線上的互聯網醫療服務流程發生革命性的變化，并且獲得醫生、患者以及醫療權威機構或政府相關單位的認可。
1）檢測技術
大家去線下就醫見到醫生后的第一件事是做什么？是各種抽血化驗等檢查，檢查前的醫生問診只是為了縮小檢查范圍。
我們必須接受的一個現實就是：如今沒有設備檢查，沒有具體定量的檢查指標，醫生可能都不會下診斷，這也不能怪醫院或醫生，西醫就是這個流程：檢查-診斷-給藥或手術，而這個流程中哪些是可以在線上真正解決的呢？我想應該只有“給藥”了，這也是目前大多數互聯網醫療公司以藥品為突破口的原因之一。
說到第一步：檢查，互聯網醫療是無法在線上做到醫院要求的各種指標檢查的，所以最終線上問診，醫生給出的結果多是“可能”、“建議線下就診”等結論，同時也是現在線下問診開藥不支持首診的原因，因為在沒有線下確診的情況下開具處方藥是有很大風險的。
SO如果患者不用去醫院就能完成醫院要求的部分疾病確診的核心指標的檢測，理想情況下那是不是互聯網醫療就可以實現部分疾病的檢查-診斷-給藥的流程了，特別是常見的慢性病或者季節性疾病。
這就依賴于便攜式家庭健康檢測技術和設備的發展了，例如：血管納米機器人，全體24小時記錄生物體的各種生理指標。
2）溝通技術
患者另一個不愿意接受線下問診治療，或不相信在不去醫院的情況下，就可以給出一個滿意的健康問題的解決方案的原因是——信任的力量。
因為千百年來患者就醫都是與醫生面對面接觸進行檢查診斷，線上的方式中，也許目前的視頻溝通比起之前的文字或者語音的方式更進了一步，但是不光是醫生無法確認是否完整地了解到了相關的病情信息，就是患者自己也會擔心自己是否把病情完整陳述給了對面的醫生，醫生是否有認真在給自己看病。
因為每個患者的語音表達力都不同，很有可能患者對癥狀的描述并不是真實的疾病表現；更何況線下就醫，患者都有可能去多家醫院咨詢問診。
這種線上的溝通方式與面對面的溝通相比，以及加上患者早已習慣的線下就診方式，新的溝通問診形式讓患者對另外一頭醫生的信任感大打折扣。
文字溝通到語音再到視頻，問診溝通方式在不斷進步，但還不夠，與線下相比越真實越好，越趨于線下面對面的體驗越能增強患者的安全感和信任感，也許目前比較火的虛擬現實、元宇宙在溝通方式上的應用在一定程度上改變這種狀態。
以上提到的案例基本并不會在單一維度努力去沉淀自己的產品優勢，而多會綜合去發展，但是需要根據自身的優勢和能力范去選擇建立優勢的方向。
例如做醫藥電商的建東健康，也在大力發展醫療服務，家庭醫生方面的產品；專注做醫生問診服務的好大夫也有在向藥店、醫院合作方面發展；上文還未提到的平安健康更是在醫療服務、醫藥、健康險等方面同時發力（目前平安健康財報顯示其在醫療服務和醫藥上的營收占比已接近1:1）。
其實上文提到的這些維度大致可以分為：基礎能力建設層（數據+技術）、知識引流層、醫療服務層、醫療商品層。
醫療醫藥醫保醫健康，診前診中診后整閉環；線上線下，院內院外，醫院醫生醫護醫全家；上有政策，下找對策，To G To B To C To all in；深挖坑，廣積糧，醫路漫漫修遠兮！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
界面設計的好壞，會直接影響到用戶的使用體驗，很多時候我們往往會直接拿到競品的頁面搬運到自己產品上，而沒有針對自身產品的特點和業務加以思考。
這種做法理論上不會讓自己的頁面出錯。但是很多人往往忽略了一點，就是別人這么設計的出發點是什么，是否匹配自身產品的業務流程，如果不了解這些貿然的去搬運設計，那么時間久了就會養成一個不好的習慣，導致思維不能得到足夠的刺激和知識的沉淀。當需要我們專門進行設計構思時，就會遇到諸多困難。
如果是剛入手的領域，前期可以去進行適當的搬運參考，但是一定要了解別人設計思考點，明白其背后的原因，將其沉淀成自己的知識儲備在腦海中。
過去60年，人類社會的數據發生了爆炸式增長。2008年人類大約創造了近10億張DVD能存儲的數據，這等同于過去5000年的人類創造數據的總和。12年，調研機構預測信息每隔18月會翻一倍20年，調研機構預測信息每隔73天會翻一倍
在信息爆炸的年代，人類進化的速度卻是緩慢的，我們現在的大腦跟250萬年前的原始人并沒有太大區別。
我們的大腦每秒鐘要接收約4000萬次的感官信息輸入，但意識一次能注意到其中約40個，其中短期工作記憶能處理的只有4±1個。
正是由于現代信息數據的大爆炸，多數產品日益臃腫的結構，以及人類有限的處理能力，所以呈現什么信息，以何種形式呈現的信息層級設計就非常重要。
作為設計師，我們有必要根據自身產品的業務方向，以及用戶的行為和特征，結合信息環境，選擇合適的信息，并以適合的方式進行組織和呈現，以便讓用戶獲取并理解信息更容易，完成信息的組織和傳達作用。
相關聯信息需要進行歸類，無論是什么類型的產品模塊，我們在設計中應當做好信息分層，當兩段內容元素具有關聯性時，他們應當作為一個整體給用戶展現。
（1）層級數量應靠近“3”
信息層級作為影響頁面信息傳達效率的重要因素之一，那么怎樣做好頁面的信息層級便尤為重要。網上資料大多都在圍繞對比、對齊、親密、重復四個基本原則講解。
不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用，并且也是我們非常熟悉的。但其闡述得太過寬泛，在我們實際工作中面對復雜層級排版時，仍會面感到困惑，很難直接有效地利用。
于是我把優秀的案例進行收集并整理分析。
經過線上頁面與概念的整體研究發現，他們在遵循排版原則的基礎上，都存在著一個簡單的規律：主內容的層級控制在三層左右。
如下圖所示：
可以發現，三層左右的層級是最容易被用戶識別的，且視覺上不易混亂。三層往后，隨著層級越多其復雜性會成比增加。
比如我們看下面這兩個例子，左邊層級方面平鋪直敘沒有重構區分，使得層級復雜，造成用戶識別效率變低。但其實我們只需要對信息加以歸類并控制層級數量，瞬間就變得更簡單且易懂。
因此，我們需要在著手設計前，首先思考一個邏輯：盡量將我們的內容層級控制在三層左右，且這三層內有比較明顯的對比關系。
有朋友看到這肯定要問了，這個道理大家都懂啊，可是在實際工作中大多數拿到的信息都非常多，根本做不到保持在三層以內。別著急，本文的重點當然不是告訴你這么簡單的道理，而是在面對復雜層級的時候，我們應該怎樣去控制它的層級表現，從而讓它在最終呈現上保持在三層左右，讓用戶獲取信息的效率更高。
（2）源頭篩選處理
源頭篩選的關鍵在于接手復雜信息時，我們首先需要從源頭上進行第一層的判斷，了解這些信息是否真實地被需要。這也是我們大多數人容易忽視的一點，當然這也不能完全怪我們，因為通常需求給到我們的時候都是大致的概括，好一點的話還有個交接文檔，甚至有時候需求拿到我們手上時，已經轉好幾手了交接人可能也不知所云，導致很難知曉其底層出因，
源頭篩選的本質就是判斷我們當前所要呈現的信息是不是必要的。
比如某些時候產品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設計的一致性。
過程需要我們對以下2點進行思考：
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產品或者業務溝通，弄清楚該信息呈現的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
（3）在排布上降低復雜度
信息排布的本質是通過我們對信息進行主觀的排列上的組織重構，來將復雜的層級控制在三層左右的區間里。從而保證我們頁面的簡潔性、規律性、識別性。
通過目前的實踐總結，合理地安排信息層級的方法大致可以分為：分組、組件、組織、融入、弱化。
① 信息分組
信息分組是大家在設計時都能夠想到的形式，分組能夠將復雜的信息歸組從整，從而降低整體復雜度，清晰線索。
我們常用的分組方式主要有三種：間距、分割線、卡片。
那么這三種方式有沒有區分呢？
VIVO設計團隊曾經就這個問題展開過用戶調研，但結果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現信息時的整體視覺觀感，因此我們可以根據當前信息的復雜度作出以下規則：
② 利用組件拆分
組件其實是目前大部分設計師在進行信息排布時必備的部分，因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結構、表格結構、步驟條、選項卡。
③ 靈活組織
通過對組織方式的調整，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。
舉個簡單的例子：
從圖中你可以看出左側的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結構變為左右結構，達到從視覺上簡化層級的作用：
當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以通過改變結構使其交互邏輯更清晰，從而減少其復雜度。
④ 巧妙融入
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，產品設計中將button與查詢項利用分割排列在一起，從而變為同一層級，通過這種方式有效降低了頁面的復雜度。
當我們在進行B端布局時，信息融入這個方法用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間，還能夠降低信息層級的復雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。
⑤ 信息弱化
信息弱化的原則是：將某些超出層級的部分進行弱化。
比如圖中有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。
比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復雜度：
因此我們需要學會對信息分級，不重要的信息就進行弱化，這樣整體的呈現上會好很多。
但不可否認仍會有更復雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
（4）突出熱區
當模塊具有按鈕、文字鏈、圖片入口等需要下一步操作的關鍵元素，需要進行高亮顯示，以此幫助用戶快速定位目標。
圖中 “Learn more” 使用文字高亮進行處理，通過顏色讓用戶快速定位入口，且不影響用戶正常閱讀，若使用色塊按鈕進行突出，模塊會冗余，過于喧賓奪主。
當產品需要用戶進行多步驟完成任務時，應當展示系統進度，讓用戶了解他們的行為操作在界面中所處于的位置。
比如下圖中房屋裝修信息填寫流程，用戶面對這種多流程任務時，耐心往往很低，我們可以在設計時添加系統狀態進度條，時刻提示用戶當前的節點，此方法應用場景還有注冊登錄、信息完善等更多場景，目的都是為了讓用戶達到交互可預測的狀態，提升用戶體驗。
我們在設計內容復雜的網頁時，建議根據產品訴求和用戶目標，合理的放置元素，以此來達到目標，另一方面符合眼動規律的瀏覽順序，可以讓用戶不會產生視覺疲憊，每個視覺點停頓時看到元素都是不同，提升用戶體驗。
在設計大面積文字排版時，應當注意字體粗細，它決定著我們的設計是否易讀性高。
無論標題還是內容，字體過重或者過輕都會降低文本的基本識別度，而且遇到文字信息過多的情況，長時間專注文本的識別很容易出現視覺疲勞的情況。
在設計UI界面中，無論是長文字體還是模塊元素字體，我們都要注意字體的重量，保證基本識別度的同時，優化視覺重心，確保用戶在閱讀時不容易陷入疲勞。
當界面中存在多個入口時，我們可以對這些入口進行優先級處理，以突出核心功能為目的，用戶瀏覽界面的動作是大面積掃讀的形式，這就意味著我們需要弱化無關信息，既保證了界面的基本美觀性，又能夠具備良好的體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B 端設計離不開設計規范這個話題，而做好設計規范是一個龐大復雜工程，很多人對這些處于一知半解狀態，在這個系列文章里我通過結合自己平時的項目案例來談談自己對 B 端設計規范的一些理解，希望可以帶來一些啟發。
本篇先談談設計規范制作的指導思想--設計原則，后續文章再展開講一下常見各種組件的設計規范。
設計規范作為 B 端設計中非常重要的一環，它的作用主要體現在以下三個方面：
在日常工作中，當項目組收到一個新的需求時，如果已經具備了成熟的設計規范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：
通過前面內容我們知道了設計規范對于產品設計意義重大，那么制定設計規范制定依據又是什么呢？這里就要引出設計原則這個話題，設計原則是設計規范的總的綱領，所有的設計規范都應當以設計原則為基準。設計原則主要包含以下內容：
接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復四個方面。
① 對比：
對比是指界面中為了區分信息層級，強化元素對比度，使用的很常見的一種手段，例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕；又比如通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關鍵文字信息。
② 親密：
如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。
③ 對齊：
在界面設計中，將元素進行對齊，既符合了用戶的認知特點（我們往往傾向使知覺對象的直線延續還是直線，曲線延續還是曲線），也能引導視用戶視覺流，讓用戶更流暢地接收信息。
④ 重復：
重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯性。
高效原則體現在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產品操作更加便捷；交互體驗與內容更加輕量和簡化；以及產品風格保持一致。下面結合幾個常見案例說明如何應用這一原則。
① 合理利用拖拽--便捷、輕量：
在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。
② 盡量減少不必要的跳轉--便捷、輕量：
用戶操作過程盡量減少跳轉，以實現交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡...依次類推（優先級從高到低：原位 ＞ 展開收起 ＞ 氣泡 ＞ 彈窗 ＞ 抽屜 ＞ 新頁面）
③ 放大點擊熱區--便捷：
放大可點擊按鈕熱區，相對于較小點擊熱區，具備更絲滑操作體驗。
④ 懸停即現--輕量：
利用懸停即現，避免信息過于重復啰嗦，簡化頁面提高閱讀體驗。
⑤ 折疊次要功能--簡化：
頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內容簡潔。
⑥ 統一樣式--一致：
一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式，可有降低用戶學習成本與企業開發成本。
友好原則應貫穿用戶操作前，操作中以及操作后三個階段，給予用戶及時反饋與幫助。
① 操作前：
在用戶操作前給到合適的引導與幫助，有效減少用戶迷茫感。
② 操作中：
通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。
③ 操作后：
利用界面中元素變化清晰直觀展示當前的狀態
可控主要體現在自由和導航兩個方面。
① 自由：
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
② 導航：
導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。
通過本篇內容我們大概知道了制作設計規范主要方向，那么具體到每個組件上，我們該如何去設計呢？后續篇章將細分聊聊如何去設計 B 端常見組件的一些內容。
部分參考資料：
作者：huang。亮 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
談到 B 端組件，很多人的印象是多且雜，想要全面準確的熟悉這些它們，需要我們對它有個合理的歸納總結?？赡苊總€人會從不同的視角去做這件事情，我一般是按照使用場景去對組件分類整理。
下面我們根據這個分類框架來逐個聊聊這些組件。
說到基礎組件，我想再將其細分成兩個大類：一類是通用組件；一類是柵格/導航。怎么去更深刻的理解這兩類的區別呢，我們可以打個這樣的形象比方：
通過這個比方我們不難理解，柵格/導航是先給頁面定下了基本框架，而通用組件則是在這個框架基礎上搭建頁面的所用到基本元素。
常見通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來似乎很簡單，但卻是決定產品品牌調性、界面細節品質的重要因素，在設計過程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談談這三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產品的主要色調，在選取時應當優先選擇品牌色，但有一點要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調，則盡量考慮另選取一個冷色系作為主色，原因有兩點：一是為了避免和警告、錯誤色沖突，產生歧義；二是冷色系帶有商務、專業、冷靜的情感，更符合 B 端產品調性。
同時主色選取應避免高亮、熒光色、灰調高的顏色。
主色的應用
主色在設計中常見的應用包括可交互、選中狀態、可視化、插圖、圖標等場景。
② 功能色
功能色主要用于頁面表征狀態，常見有成功色、警告色、報錯色等。
成功色
主要用于操作結果成功提示以及標簽配色等。
警告色
主要用于警告提醒功能以及標簽配色等。
報錯色
主要用于系統報錯提示、圓點提示、以及標簽配色等。
③ 中性色
中性色在頁面設計中應用非常廣泛，從線條到文字再到圖形等等都可以見到它的影子。
Tips：無論我們主色調是什么，中性色在調色時建議可加入適量的藍色調，可讓頁面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個顏色的梯度呢？（這里主要指對主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當我們需要淺色，通過調整白色遮罩透明度得到合適顏色；而當我們需要深色時，則通過調整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優點是后續如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規范包含字體、字號、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規范即可：
② 字號
不同于 C 端，B 端在字號選擇上應當盡量保持克制。研究表明，Web 端上正文字號為 14 時，可以帶來最佳閱讀體驗。因此在字號選取上應盡量優先選取 14 號字。如果想要區分文字層級，優先級從高到低的手法應該是顏色、字重、字號，也就是說一般盡量不采用字號大小區分文字層級。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過公式算出行高非整數或非偶數，可就近取偶整數。
間距
關于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優先考慮 8px 的倍數作為間距值，在一些特殊場景可采用 4px 的倍數間距值。
分割線
分割線寬度一般統一為 1px 即可，同時注意顏色不可過深，以免干擾主體信息。如果需要不同層級分割線，可用顏色深淺來區分。
圓角
圓角大小一般根據使用場景控制在 2-3 個梯度即可，既不能全部統一一個圓角值，同時也不適合出現過多圓角值。同時圓角值不要過大，建議控制在 2-6px，以符合 B 端產品嚴謹專業調性。
按鈕
這里從按鈕的大小/狀態/排放位置幾個緯度來講。
① 按鈕尺寸
按鈕高度一般情況下可以設置 3-4 種尺寸按鈕，足以滿足各種使用場景。至于按鈕寬度，我們一般定義一個最小值，當超過最小值時，可設置 padding 值，按鈕寬度根據內容自適應。
② 按鈕狀態
操作按鈕過程中，按鈕會呈現不同的交互狀態。
③ 按鈕位置
對于主次按鈕組合，主次按鈕排放位置應該怎么規定呢？可分為兩種場景：一是當為從左到右閱讀順序時，主要按鈕應當排在次要按鈕左側。二是當為從右到左閱讀順序時，主要按鈕應當排在次要按鈕右側。而當一些特殊場景與這個原則沖突時，應權衡優先級做出取舍。
熟悉通用組件后，我們要通柵格/導航來確定產品頁面框架。
柵格
柵格可以有效地保證設計的一致性、讓頁面布局更具規律，并提高團隊協作效率。應該如何設計柵格呢？
① 柵格區域的劃定
我們一般習慣將頁面從下到上劃分為背景層、全局控制層、內容層、臨時層，而柵格區應當用在內容層。以下為常見幾種頁面布局柵格區的劃定。
② 柵格自適應規則
隨著頁面寬度變化，一般來說是通過欄寬變化實現自適應。
③ 柵格欄數的確定
根據頁面內容豐富程度，柵格欄數一般定 12 或者 24 欄，考慮到 B 端產品功能往往比較復雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導航
導航可分為全局導航與局部導航。
① 全局導航
全局導航包含頂部導航、側邊導航、混合導航。
這三種導航樣式各具特點，應結合產品特性選擇合適的導航樣式。這里要注意的一點是，當產品可用性和用戶體驗產生沖突時，應優先保證產品可用性。
② 局部導航
局部導航包含面包屑、標簽頁、步驟條、分頁器。
面包屑
面包屑導航的作用是告訴用戶當前頁面在系統層級結構中的位置以及父子級頁面間的關系，并且可以快速回到上幾級導航。
標簽頁
標簽頁可以幫助用戶在一個頁面實現快速切換不同內容，提升單個頁面內容擴展性?？煞譃榛緲邮?、標簽樣式、卡片樣式。
步驟條
當任務復雜或者存在先后關系時，可將其分解成一系列步驟，這里就會用上步驟條。步驟條是引導用戶按照流程完成任務的導航條，作用包含 3 點：一是讓用戶對操作流程長度和步驟有個預期，二是明確知道自己目前所在步驟，三是可以對用戶的任務完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當步驟條中有操作難度偏大的內容時，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經完成了大部分簡單操作，后面碰到高難度操作后，出于損失厭惡心理，不會輕易放棄操作。
分頁器
當有大量內容需要展現時進行分頁加載處理，分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內容有多少頁、當前所在頁碼、快捷前往目標頁碼。
分頁器一般分為迷你、簡易、自定義三種樣式。
妙用分頁器小 Tips：當表格中需要對數據全選操作時，為了提高操作效率，可將自定義每頁跳數調到最大。例如一共 100 條數據，默認每頁 10 條數據，要完成全選需要點擊 9 次翻頁，10 次全選（表格的全選框勾選后一般只選中當前頁面全部數據，而不是所有頁面總數據），當把每頁條數調整為 50 后，則只需翻頁 1 次，點擊 2 次全選即可。
到這里關于 B 端的基礎組件就全部梳理完了，后續我們就來揭開展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
SaaS，英文全稱 Software as a Service，意思為軟件即服務。是通過網絡提供軟件服務，可以理解為一種軟件交付模式，因為交付模式的不同也決定了和傳統軟件的差別。
在Saas之前傳統軟件需要購買后本地化部署，兩者最大的區別在于，賣軟件是將軟件作為一個軟件實體賣給客戶了；而賣SaaS 軟件的所有權還在廠商所有，提供的是“軟件服務”。
Saas模式的提出者是Salesforce創始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時候提出。有兩個原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統軟件部署實施交付的失敗率非常高；
2. 軟件的售賣價格非常高，很多中型、中小企業有需求但無法承擔高昂的費用。
基于以上兩個痛點及當時的現狀賣軟件給企業造成的影響，已經形成了惡性循環，市場受到嚴重的阻礙（據Gartner 高德納公司（美國咨詢公司）的調查研究曾表明：在所有CRM項目中大約55%沒有達到軟件用戶的完整交付和預期目的，通俗的說是實施失敗。）
從賣軟件變成賣服務，其中的技術方式的改變、交易模式的改變，促成了軟件時代的變革，對于傳統軟件公司來說，是一次大革命。原來賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務后，這筆錢就不能在短周期內一次性收了，現行的SaaS模式通常是按照用戶的使用年費來收取。
兩者差別在于，軟件商需要先主動改變可以短期的一次性高收入，從短期收入向長期收入的轉變；
所以SaaS是長期主義的事情。
失敗的Saas生意會出現一個問題：把長期生意做成了短期不可持續的生意；而短期生意帶來的就是經營成本的劇增，導致生意不可持續。
所以，Saas模式決定了需要客戶長期使用你的產品，才可以長期可持續賺錢，也就是通常意義上的客戶終身價值（LTV）。
那如何做到客戶長期使用，其實只有一種方式：長期為客戶創造價值，做到幫客戶成功（幫助客戶的業務成功），從而持續續約。
吳昊老師，在《SaaS創業路線圖》中的講到：SaaS的本質是續費。這個觀點我比較贊同，SaaS的經營本質在于可持續。
那么，決定SaaS的成功因素是什么呢？
我認為決定性因素有三個方面：產品強大且靈活、用戶體驗優質、服務的有效支持。產品強大和服務的有效支持不言而喻，具體我們來聊聊用戶體驗的價值。
傳統軟件在一次交付實施后，客戶付80%的錢，剩下的20%能不能收回來就不那么重要。但SaaS模式，客戶每年進行續費，若產品使用及用戶體驗滿意度低，帶來的影響和后果可能是客戶終止續費。
因此，和傳統軟件相比SaaS的用戶體驗的價值就更為重要，它直接影響SaaS的續費和流失。
相信“用戶體驗”這個詞大家應該非常熟悉，接下來我們從新認識什么是用戶體驗？
官方的定義是：用戶在使用產品過程中建立起來的一種主觀感受。“用戶體驗”這一概念是唐納德·諾曼（Donald Norman）在20世紀90年代中期提出的。產品大神俞軍老師說過用戶體驗的本質是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認為是幫助產品和用戶：最小成本滿足需求，同時創造「美·好」體驗。
怎么理解，因為用戶體驗是滿足商業目標的一種行為手段，我們來看下用戶體驗的需要考慮的雙邊關系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業最高效的服務用戶。
企業的本質就是創造商業價值，商業價值來源于用戶價值，同時考慮實現商業價值的效果和效率。我們常常會聽到“投入產出比”或者叫“投資回報率”；對于商業行為中的一環用戶體驗也如此。
所以，用戶體驗的核心的就是：平衡用戶最小成本滿足需求，及企業最小成本服務用戶。完成價值交換同時，滿足持續性。
由此，可以看出在SaaS的產品設計中，用戶體驗其實承擔著一個比較重要的責任，因為它關系到成本的邊際和規?；挠绊?，一頭是產品一頭是用戶。
那么作為產品體驗設計師，我們需要具備一定成本意識，做好“成本管控的設計”，更本質來說設計過程中我們應該：把復雜留給自己，把簡單留給用戶。
因為我們在設計的過程中把握產品的交互方式、使用流程，在用戶認知和效率層面有較強的把控空間，充分做到的以“用戶體驗”出發；那后續銷售、交付、客戶成功的全鏈路服務過程的學習效率和服務效率會呈指數級上升。
產品設計，應該把復雜留給自己、把簡單留給用戶。
關于用戶體驗，就不得不介紹一下“ 用戶體驗要素”模型，個人認為這是所有產品經理和設計師可以貫穿整個職業生涯中都需要經常性、反復對照思考的設計模型。
用戶體驗設計的價值遠不止于讓產品的視覺、顏值提升，設計更大的價值在于深入業務、洞察用戶，幫助業務梳理產品信息架構、任務流程、交互體驗。
構建系統的用戶使用方式和工作模式，從而達成用戶目標；通過達成用戶目標完成價值交換、以此完成商業交易達成商業目標。
回顧Saas的商業模式，Saas的商業模式決定我們提供的這個服務不是靠人海戰術，因為Saas軟件即服務的含義是所提供的軟件就等于提供自助化的服務，應該提供的是自助服務、開箱即用、開箱易用的服務。
那么Saas服務設計策略上，應該從降低系統使用門檻和提升用戶的自主化服務兩維度出發，根據這兩個核心維度，我們構建了每刻SaaS產品體驗的設計策略模型。
第一，設計“系統服務自動化”，這里的服務是功能使用的操作，符合“低認知、易上手”，那么從設計整個體系 需要遵守“易發現、低認知、高效率、有溫度”的設計原則展開，以用戶使用行為出發設計符合用戶心智認知的功能形態和交互流程。
第二，設計“系統幫助自助化”，什么意思在全系統中構建幫助引導的自助化體系，用戶需要幫助的時候提供人性化的引導幫助，我們從發現的維度、認知的維度，系統認知的維度，綜合考慮用戶系統的幫助引導。
設計原則，是指導我們做正確設計的方針。
設計原則的建立基于對用戶使用體驗全流程的基礎上，以每刻報銷的設計原則，圍繞用戶旅程、認知及行為出發構建。
1. 當用戶接觸系統從看出發，看見系統界面、發現操作入口；（發現）
2. 帶著操作任務用戶進入系統、看見導航、看見文字、看見按鈕，都需要理解認知；（認知）
3.用戶從何開始、如何操作，在完成整個業務事項的過程需要進行填寫、選擇、交互過程就產生了生產效率問題；（操作）
4. 當出現誤操作或系統出錯時，需要系統糾錯提醒、容錯的設計、幫助及引導，當完成整個業務事項后，用戶產生一種的情緒感受，這個感受即是印象、評價、口碑。（感受）
緊緊圍繞產品業務、用戶處理特性業務的基礎上，以終為始，回歸到用戶、業務、系統進行思考歸納的產物。
設計策略，是指導我們如何進行做正確的設計。
在SaaS產品分類上，常見的SaaS產品主要分為3類，行業SaaS、職能SaaS和通用SaaS。
每刻報銷產品從核心業務來說是職能類Saas，從提升財務人員報銷的發票審批、費用審核等效率展開，但報銷的來源又源于普通員工的業務報銷，業務報銷發生又和所在行業的費用發生行為特征有一定相關性，所以是結合職能和行業Saas的屬性，從用戶體驗的設計上需要考慮不同角色用戶對于系統的業務理解、功能交織使用的不同訴求，這個設計過程探索研究是相對比較有難度的，以后有機會可以展開聊。
下圖是每刻系統經過6年過程中統計的問題分布，分布比率呈現：認知問題 60%，效率問題 30%、情感問題10%。
我們在訪談客戶調研發現，企業服務雖然客戶已經用了好幾年我們的系統，但財務部門還是經常性會碰到新入職員工的系統使用問題，甚至財務部門來新人時 以前系統發生的使用問題會從新出現一遍，所以企業服務有一個現象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個遇到的問題就是認知問題，也輔證了我們對于Saas系統認知問題是用戶體驗的第一大問題。
幫助體系建立可以從系統層面體系化有效降低用戶使用的認知成本，圍繞用戶角色的核心業務操作使用流程、洞察用戶旅程上的疑惑和障礙點。用戶首次進入系統要建立介紹和引導，足夠簡單、降低陌生感，來減少人力咨詢回復的投入。
相比人，系統的自助化和自動化的服務，更具有復用性和規模效應。
SaaS的商業模式，按年使用賬號來收費和傳統軟件的付費模式區別非常大，因為需要先主動放棄自己本來可以唾手可得的收入，從短期收入向長期收入的轉變。
在SaaS模式的時代，商業模式決定其必須關注客戶成功、客戶持續續費、LTV客戶長期價值。
SaaS的產品更需要重視用戶體驗，用戶體驗的優劣決定其產品的長期發展，SaaS的用戶體驗設計則關注用戶使用認知和行為效率，以及系統服務自主化設計和系統幫助自動化設計，用戶體驗將在產品成長期后半程，逐漸成為SaaS商業模式不可或缺的產品競爭力。
作者：周大蝦07 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn