在如今的工作中（尤其是B端）越來越多的會開始出現數據可視化的身影，對于一部分小伙伴來說這個概念是較為陌生的，面對這道無形之中提升的“門檻”我們常常會表現的手足無措。所以，為了讓大家對于數據可視化不再那么束手無措，我希望能通過這篇文章和大家一起交流學習，解決一些屬于我們共同的問題
那么我們還是老規矩，想要了解一個事物首先需要知道的是它的定義
較為籠統的來說數據可視化是一種由圖形、圖像、數字等元素組成的語言用于解釋、呈現目標數據之間的關系。從這個定義上來看，數據可視化從外觀層面來說是與圖形、圖像這些視覺元素密不可分，這也是數據可視化最為明顯的特征
而結合我們實際的生活與工作來說，數據可視化是一種以圖形符號為主要表現形式，將不可見的、抽象的、復雜的、枯燥的、專業的、不直觀的數據內容，有趣的、淺顯的傳遞給用戶的有效手段。用戶可以通過這樣的手段在數據完成自己的目標（例如對選定范圍內的數據進行分析發現數據的周期與規律、迅速找到自己目標節點中的關鍵數值、對比幾組數據以了解當下研究對象的情況等）這也是數據可視化最為明顯的價值
關于可視化的發展史上可追溯至1950年，當時人們利用計算機創建出了首批圖形圖表，可以說是數據可視化圖表最為早期的雛形，而在50-60年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813對俄戰爭中法軍人力持續損失示意圖》為代表
該圖描繪了拿破侖的軍隊自離開波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對俄戰爭的重要數據分析資料，后來這種帶狀圖被稱為“?；鶊D”用來解釋能量的流動
而可視化真正被提到一個應用理論的高度是到了1987年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學基金會報告《Visualization in Scientific Computing》（科學計算之中的可視化），其意在強調了基于計算機的可視化技術方法的必要性，此時的概念已經與現在我們所接觸的工作中的數據可視化是非常接近
到了90年代初人們發起了一個稱為“信息可視化”的研究領域旨在為許多應用領域（科學、商業、行政、財務、數字媒體）之中對于抽象的異質性數據集的分析工作提供支持，與前面提到的“科學可視化”交叉形成了現在耳熟能詳的“數據可視化”，此時這個詞匯才慢慢的被更多的專業領域的人所接受，并在之后互聯網的不斷發展中擴充著自己的分支
目前大量開始使用視覺可視化的原因其實非常簡單大致的原因可以分為需要處理的數據量太大了和人腦不夠用了
據不完全統計IBM公司每天有2.5億字節數據的吞吐量，麻省理工學院的研究科學家Andrew McAfee和Erik Brynjolfsson教授指出，如今在互聯網上傳遞的數據量比過去20年的總和還多，而且根據IDC預測，到2025年將有163萬億GB的數據
這是非常驚人的，而這么多需求的數據量單憑人腦的計算能力和處理能力來說是完全無法與之匹配的，研究表明人腦很難同時處理5組以上的抽象數據，所以這種單線程的處理方式就決定了需要借助外力
而對于用戶尤其是決策層的用戶來說在現實的工作場景中經常需要同時處理超過5組以上的數據并需要對其建立精準的分析模型以便于做出最準確的決策所以基于這樣的需求，數據可視化設計氤氳而生
基于數據可視化的需求來看，數據可視化的優勢是顯而易見的，可以概括為兩點認知減負和傳遞賦能
認知減負是使用者在使用數據可視化工具時候的最直觀感受，當所面對的龐大的、復雜的枯燥海量數據集變成了圖像化、通俗化、形象化的視覺符號時我們會本能的放下對于面對再面對冰冷數據時候的抗拒和戒備，這是因為人對于一目了然更加接近自己熟悉的有趣事物的時候會更為親切和愿意去主動理解
而且被處理過、規劃過的簡潔直觀表現形式能更為直接的讓使用者看到數據與數據之間的關聯，進而分析出其潛在關系，在人對數據的認知這個環節上降低了識別成本和分析成本
傳遞賦能上圖像傳遞更接近人類最本能的獲ju取信息的方式，比起文字來說圖像更像是一個解密的步驟，通過解開文字描述這重“密碼”將最本質的信息進行呈現，而且對比文字，圖像所能夠承載的信息其實更為廣泛，而且人類讀圖的效率要遠遠高于閱讀文字
無論是一個約定俗成的語義符號形象還是符合語境的配色都能夠起到比文字直白表述更為強烈的深入人心效果，并且圖解的形式并不受限于語言的障礙，極大的降低了溝通成本
基于用戶的使用目標來說，使用數據可視化其實就像是一個偵探用“蛛網圖”輔助自己梳理思緒進行破案的過程：將一些有關的，但是較為零散信息數據用一根根線索線穿插起來，形成體系化的聯系，方便使用者迅速把握各個節點之間的關系進行推導
所以說我們在設計數據可視化的時候并不是對我們拿到的數據的無腦映射，而是要基于用戶的目標經過一定的處理和優化后才能進行呈現，隨時記住我們是給用戶在打輔助，所以我們每一步的設計一定要基于用戶的思考
用戶的期望是能夠高效、清晰、簡潔地完成數據的對比、關鍵節點的查詢、每組數據之間的分析等一系列交互，提升自己的工作效率，降低自己的學習和使用成本
數據可視化的應用領域較為廣泛涉及醫療、統計、管理、金融、娛樂、人工智能等一系列領域，在UI的設計中我們最常接觸到的包括：PC后臺的數據概覽、數據可視化大屏、游戲UI、后臺實時監控等
當我們大致了解了數據可視化的歷史、使用原因、優勢、用戶目標、應用領域后下面就要切入我們設計師最為關心的話題：我們在設計中的任務
數據可視化作為一門跨領域的學科，本身對于從業者而言就有著一定的綜合素質要求，但由于國內教育并沒有垂直教學學科所以在現在的階段從業人員一部分由純視覺設計專業的同學組成另一部分由純工科類型的專業的同學組成
于是這就導致了非視覺設計師在進行設計時，會將全副精力放在強數據的準確性、合理性上，從而讓視覺的易讀性上有一定的損失，表現形式也較為單一枯燥，視覺感官較差，反觀視覺設計師通常會將數據可視化在視覺表現形式上過度用力，雖然營造了很好的視覺體驗，但是從其實用度、可用性上來說會大打折扣
于是設計的難點很多時候就會集中在平衡視覺與實用之間的關系
通過以上分析，不難看出設計的主要目標，而面對這句較為抽象的“把握設計與實用之間的平衡”其實無外乎也就是拆解到功能和視覺這兩個方面
從功能上來說，我的目標是提升用戶的數據閱讀效率、讓用戶能夠迅速Touch到目標信息，提升交互效率，一切都是以結果為導向，以解決用戶問題為導向，一定記住人們不愿意接受未處理過的數據
而從視覺上來說，我們的目標是處理好在視覺上各個模塊之間的統一、透氣關系，同時將數據進行可視化的同時盡量提升感官上的審美體驗與傳達上的有趣
以上會作為后文中我們每一步設計的指導和檢驗和理性的方式，從實際操作的維度上來說二者也并不是五十比五十的分配，遵循的原則是：體驗一定要讓位于功能，所以在視覺的層面發揮的空間其實需要比較克制
了解了數據可視化的設計難點，明確了數據可視化的設計目標，那么我下面進入我們最重點的環節：可視化頁面案例制作，由于數據可視化的形式較多，這次我們以工作中經常接觸得到的PC頁面數據概覽頁為例
同樣的細化到數據概覽這個分支項目我們同樣需要明確了解其基礎定義和性質，嚴格意義上來說數據概覽部分屬于Dashboard design（儀表盤設計）的一種，其主要的目的和功能可分為分析和操作兩塊
所以從綜合的角度來說數據概覽部分可以理解為：1.其他模塊的摘要視圖，并顯示來自應用程序各個部分的關鍵信息，從這點上來說建議此模塊可以在其余模塊設計完后再進行設計，如此有利于設計師從一個全局的視角切入進行設計，理解上也會更加透徹，否則很可能會陷入在你設計其他模塊的時候不斷地返回對其進行修改的怪圈
2.他也是核心功能、常用功能的快速操作助手和快捷頁面跳轉(有點類似于導航)，交互功能的排布和關鍵信息的顯示其共同的要求點是顯而易見的，即明確各個模塊之間的層級，做好順序、優先級排布這就需要你對業務目標有一定的了解，記住對業務目標不了解你的設計將毫無意義
你可以通過查詢一些內部資料、報告、也可以詢問產品經理等相關負責人，還可以通過用戶調研得出，這里不展開說，具體可以去參考我的另一篇關于用戶畫像的文章，在動手之前你需要搞清楚：各模塊之間優先級如何、你需要在一張單獨的圖表內展示多少變量、想展示一段時間內的值還是項目和項目之間嗨是組與組之間、每段變量中有多少關鍵數據需要展示等問題
、
如上圖所示，在工作中我們經常接到需求的時候是面對一堆冗雜的數據集，組成了若干個模塊，但是正如上文所說我們并不能對其進行無腦的可視化映射，所以首先要做的就是要對各個模塊進行優先級的梳理排序
明確了各個模塊的優先級排布之后我們開始對每一個單獨模塊進行可視化轉化，即哪一個部分分別用什么類型的可視化形式表現，這一步非常類似于土地使用規劃，當你在將土地劃分完后，為每一塊土地定義其使用類型
想準確的將圖表與所要表現的數據進行對應現需要了解圖表本身所包含的基本元素
在這些元素中正常情況下一定在圖表中的有：標題、時間范圍、圖形主體，經常出現的有：坐標系、圖例、提示信息，有時候會有的有：切換選項和值域
知道了這些重要的基礎信息了，那么在面對這么多圖表的時候我們該如何正確的選擇來進行使用呢
、
其實和之前說的一樣：基于目的來進行思考，所謂的基于目的來進行思考也就是要明確你所確立的數據指標需要分析的維度，而日常使用的數據需要分析的維度無外乎：比較、構成、分布聯系
比較類圖表應該是大家最為熟悉的范疇，第一時間能夠想到的就是柱狀圖，這也是運用最為廣泛的圖表之一，經常出現在PC端之中，用于描述分類數據之間的對比，描述的數據可以是地區、品類甚至一個時間周期，但由于其擴展能力有限，所以一般不建議項目超過12條
條形圖與柱狀圖類似，看上去只是交換了X軸與Y軸，功能和承載數據種類較為類似，但不同的是，條形所能承載的項目數量相對于柱狀圖而言更多，由于其優良的縱向延展性一般用于手機端較多，而且從上到下的閱讀方式符合人眼閱讀習慣，所以也會經常用于排行榜的設計中
分組條形圖是條形圖的衍生之一用于比較多個變量在不同區域之間的數量關系，比如當想比較同樣一款衣服和鞋子在四個門店中的一個季度的營業額時就可以使用分組條形圖
雙向條形圖表適合比較兩組以上的分類數據比較，和分組條形圖較為類似，但是由于自身外觀特征更適合用于比較兩組意義相反的數據，也正是如此，雙向條形圖的組內二級分類數量一般不要超過3條最好
折線圖與前者最大的不同就在于在坐標軸中加入了連續類別這個概念，數據基于時間等因素變得動態了起來，注重變化趨勢的展現
面積圖是折線圖的延伸，除了表示變化趨勢之外還能比較所選范圍內積累的值
玫瑰圖應該算是可視化圖表中的“網紅”，因為我們從小學的課本中就知道它還有一個別稱叫“南丁格爾玫瑰圖”它是一種圓形的直方圖，使用半徑長短表示數值大小，其特點就在于因為其獨特的外觀可以將數值之間的差距在視覺層面進行放大，和將坐標軸范圍縮小來提升視覺上數值的碾壓是一個道理，發布會吹水最愛，但是要注意的是這不是一個表示占比構成的圖，因為玫瑰圖的每一份角度是一樣的，一定要和餅狀圖等圖區分開來，它用來表示的還是數值與數值之間的大小
雷達圖經常用于分析一些多維的性能數據、評分數據，經常打游戲的朋友應該不陌生，有多少五邊形選手可以扣個1，每一項指標越接近圓心說明狀態越差，越向外說明越佳
子彈圖用于比較當前數值與目標之間的關系，比如看當前業績是否達標，也可以通過標記劃分區域來進行更好的評估
漏斗圖適用于業務流程比較規范、周期長、環節多的單流程單項分析，一定要有清晰的環節，比如監控買家從瀏覽到最后下單的數量統計以求得轉化率，不適合無邏輯、無流程的分類對比
構成類圖表整體上來說主要用于觀察部分和整體的占比關系，最經典的莫過于餅狀圖，這個不用多說，通過每一份半圓角度所占整個圓的大小來表示部分和整體的關系，但是由于其所占面積較大，經常會讓視覺過于集中，影響注意力
相對于餅狀圖而言，環狀圖十分有效的避免的干擾視覺的問題，其本質是將餅圖中間掏空，功能與餅圖基本一致，但是視覺上做到了輕量化，目前在日常設計中較為常用
旭日圖相當于前面二者的結合，適用于展示多層級數據的占比關系，距離圓心越近代表層級越高，下一層級的總和構成上一層級，存在一定的父子層級關系
堆疊面積圖出了可以表達趨勢外，其優勢在于能夠表達總量和分量的構成關系，堆疊面積圖上的最大的面積代表了所有的數據量的總和，是一個整體。各個疊起來的面積表示各個數據量的大小
堆疊柱狀圖的優勢在于它既可以表達一級分類的比較，同時還能看出二級分類在各其一級分類中的占比，但是缺點在于二級分類并不是按照同一基準線對齊的，相比于堆疊面積圖更為常用
瀑布圖用表達兩個數值之間的變化過程，過程值為正的時候，向上加，過程值為負的時候向下減
分布聯系類地圖在這兩年在國人的心中其實已經非常熟悉了，因為疫情今年的地圖可視化的應用經常出現在我們的生活中，地圖可以結合不同的表達方式：
可以結合散點、可以結合動畫、還可以結合引導線以及熱力圖的方式，圖的形式使用視具體的業務需求來定
最后就是氣泡圖，這是在查看分布關系中最為經典的視覺模型，用氣泡的面積大小表示數量，結合輔助線可以更好地觀察分布情況
當我們對每種圖表的功能和使用范圍有了一個較為明確的認知之后，下面我們就可以對我們之前所規劃好的優先級的模塊進行可視化形式（圖表）的匹配了
進行匹配過后，我們將對布局進行重構，整體重構需要遵循的原則是
1.布局層級明確，首屏盡量曝光更多內容
2.統一透氣，具有呼吸感
從首屏曝光更多內容來說主要是因為基于分析類的數據概覽工作場景和Analytical dashboard自身特征決定的，用戶希望能夠通過僅僅一屏的的大小進行對各類信息的情況有基本的把控達到一眼全局的目的，其主要注意力都會放在首屏，所以我們需要盡可能的在首屏安排更多的信息
當然首屏內容也并不是越多越好，一般建議也盡量不要超過7組模塊，而在層級明確這塊兒主要是根據人眼閱讀習慣所產生的優先級排布：正常情況下都是左上為優先級最高，而右下優先級較低，這是無數經典的眼動測試和設計總結產生的最常用結論，就不展開敘述了，所以當我們按照優先級、首屏曝光更多內容的原則進行處理后會得到如上圖的布局
這主要是視覺層面的問題，統一透氣的要求在首頁概覽中可以依靠柵格系統來來解決，它可以有效的幫助頁面布局的對其保持頁面布局一致性，為頁面建立基礎布局框架，將頁面中的所有元素都捆綁在一個體系之中，同時還能有效解決適配問題
完成了大規劃之后，下面我們開始對一個一個的模塊進行拆解同樣的以目標指導設計，邊設計邊驗證
和大規劃一樣，單獨到每一個圖表同樣要時刻注意層級的梳理，銷售渠道部分很明確應該是運用一個折線圖的形式，由于業務目標上來說更關注銷售額而不是銷售額和訂單數的比較，所以我們選用了一個帶有切換選項的折線圖形式
但是我們會很容易發現的在讀圖時會出現較大的視覺干擾，并沒有能夠很好地突出重點信息，視覺層級不清晰、混亂
于是我們對沒有重點的視覺層級進行梳理，像之前劃分模塊那樣，對視覺元素進行高、中、低的P0、P1、P2的設定，提升易讀性
P0：層級最高的自然是重點信息突出部分，所以我們需要在其之上做加法，給予內容異形懸停樣式進行具體強調，配合投影加強視覺效果，有效傳遞用戶，拉開與別的元素的層級，同時數據部分用特殊字體并適當加大字號進行設計，方便用戶第一時間能夠看到所要強調的數據具體值
P1: 其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場景中會長時間盯視，所以采用更低的明度與更高的飽和色顏色確保易讀性，但是也不致于會讓用戶太晃眼產生視覺疲勞，最后考慮到該模塊所處位置屬于頁面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強化主體圖形的同時不致于太顯單薄
P2：前兩者都是一定程度的做加法，那么層級最低的元素比那需要開始做減法，此時軸線、刻度、切換選項等元素需要弱化視覺層級，降低透明度，尤其是背后的刻度線與背景的明度對比大概控制在1.6:1上較為合適
銷售總額、訂單數、渠道數同屬于一個數據統計的范疇，最忌諱的就是把以上提供的三個信息給做平，讓用戶抓不住重點，面對這樣的情況還是一樣，確立需要突出的重點信息給予特殊文字和大小的設計，選擇合適的主體圖形
但在這里需要注意的是由于在這個模塊中P0是金額數、訂單數、渠道數這些重要值，所以可視化圖形需要適當為其讓步，不要放在閱讀中心位置，按照P1來進行處理，而訂單數、轉換率這樣的標題就成了P2需要適當降低透明度和文字大小，不干擾主要信息的表達
說到統一，最先想到的一定是色彩，無非也就是需要處理好對立統一關系，而這其中統一的比例又要大于對立，配色上盡量選用同類色系，不宜太過花哨，尤其是對于B端而言，建議在可能的情況下不要超過5種，而且主色、輔助色，對比色的比例建議控制在6:3:1的比例（但不絕對），既能做到有所區別又不致于過于絢麗干擾視覺
你的主色不一定要遷就你的品牌色，但是一定要是如上文說的盡量低明度高飽和，以適應于長時間的注視
顏色過后就是字體，字體字體的使用需要極為謹慎，如果可以盡量只出現一種字體（但不要超過三種），并且只采用基礎字體，正常情況下都是將其作為一個需要被降噪了的視覺元素來對待（比如降低透明度），在PC端中盡量也不要出現較多不同的字號，字重，造成沒有必要的視覺干擾
除了字體之外，在統一感的營造上卡片的布局結構也需要盡量保持一致，這是為了提升易用性，同一個產品內，相同布局會給予用戶相同交互、相同功能的暗示，也更容易培養用戶習慣，提升操作效率
呼吸感是留白的藝術，很考驗設計師的排版能力，在單獨的模塊內，元素與元素之間盡量不要用實線進行間隔，可以的話利用親密性原則通過元素間距的遠近進行布局
而柱狀圖的設計上，柱與柱之間的間距最好大于柱寬的1.5倍，這樣才顯得視覺上較為透氣，不致于太臃腫
最后就是模塊中的邊距留白部分，這點一定要重視，不然不僅你的版心會變散，還會嚴重影響你的頁面呼吸感
細節上首先要說的就是橫縱坐標軸上的文字，上面的文字一定不要過長，最好的方式是將文字進行精簡。然后橫、豎排對齊處理，如果實在不能精簡那么再進行斜排的方式
第二點就是橫縱坐標軸有的時候會因為需要展示的數據過多而過于密集影響閱讀，這個時候可以采用適當增加一個值域的劃定的方式來進行坐標間距的縮放
第三點就是，在排行榜等模塊可以適當增加一些小設計，比如金、銀、銅的設計，提升情感化元素的融入
第四點就是，盡量不要選用一些3D的酷炫效果來做可視化，因為這種效果很容易對數據進行遮擋和扭曲，不是非常適用于高效閱讀，也不適合PC頁面上的交互，而且也不利于開發，比較得不償失
當所有的模塊設計完成后，像拼高達一樣進行組裝，組裝完成后適當調整其過于干擾視覺的地方，然后進行自檢
自檢不只是從檢查你的視覺、你的模塊間的布局，更重要的是帶入使用角色來進行檢查，你可以模用戶使用中的各種需求場景，對已經制作好的頁面進行交互和閱讀，看是否能夠快速高效地完成使用目標
當然除了自己之外，你還能在有條件的情況下找專家用戶進行使用，即使記錄使用中存在的問題并及時進行調整，當初步使用大致無問題后便可以交付
了解了圖表在PC頁面的布局使用之后，最后想和大家聊一點拓展性的話題：數據可視化大屏，目前在B端領域可視化大屏已經是一個越來越熱的研究課題，同樣也是承載信息圖表的重要載體之一，但由于篇幅限制本篇并不展開討論
同樣從定義上來說，數據可視化大屏就是以大屏為主要展示載體的數據可視化設計，聽著和PC端的數據概覽相比似乎只有載體的區別，但是兩者的差異卻不止于此
首先是尺寸上來說，數據可視化大屏要遠遠大于PC數據概覽，我們在市面經?？吹降拇笃劣布幸徽麎K巨型的P3屏幕，也有用若干臺液晶電視拼接而成的大屏，而且不像是PC有一些固定尺寸的長寬約束，大屏的尺寸更自由
其次大屏的配色更為炫酷、科幻具有一種未來感，哪怕不是設計師朋友看過數據可視化大屏的朋友一定會感覺一種撲面而來的科技感、前衛感，這主要是因為大屏的配色多半是以藍黑等深沉的顏色為背景色主基調，然后在數據可視化展示部分以一些高明度、高飽和的色彩進行呈現，給人會不由自主營造一種賽博朋克的味道
這并不是一開始就制定的配色準則，而是大屏本身需要向其面向的用戶營造一種實力、科技、質感的氛圍，所以慢慢大家不約而同的選擇了這樣的調性，還有就是考慮到大屏本身的體積問題，如果以明度較高的顏色作為背景色，很容易造成人眼的視覺疲勞和光污染，所以這也是為什么我們很少會看到可視化大屏用白色作為底色的原因
再次就是內容上，可視化大屏比PC頁面信息承載的更多，但是頁面切換、交互操作更少，這是因為可視化大屏主要目標是對相關信息的全局展示，基本不存在PC頁面那樣的首屏、二屏的概念，用戶更多的使用場景是通過大屏的數據實時反饋來進行決策，所以也很少會進行頁面的跳轉、對某一個區域進行編輯這樣的操作
最后就是在使用的時長上相對來說要比數據概覽頁面更長，這個也很好理解，尤其是在一些監測、預防的重要部門中（如氣象監測），很多時候都是24小時輪班來盯大屏的實時數據的，而很多PC頁面的數據概覽部分，用戶可能就是每天打開大致看一看然后就切換至別的頁面進行其他工作了
從應用場景的角度切入，可視化大屏的分類可以分為三種：
1.參觀視察類
2.展示宣傳類
3.辦公決策類
參觀視察類，其主要應用場景是在企業內部展廳，面對的用戶主要是領導、客戶、上級單位等
，這類大屏一般是不需要進行交互的，其目的主要是盡可能完整清晰的，展示流程、業績、能力
展示宣傳類與參觀視察類其實比較類似，只是相對于參觀視察類更多的會在發布會、展臺展會等應用場景出現，面向的的用戶主要是一些潛在客戶、媒體、同行等，像我們很熟悉的天貓雙十一展示大屏就屬于展示宣傳類大屏
其目的主要是用于展示公司、產品的品牌、價值、能力等屬性
以上兩者更多的偏向于一種純粹的對結果的呈現
相對于前兩者而言辦公決策類大屏的實現成本更高，使用的時效更長，定制化更深，工具屬性感更強
應用場景上多用于交通指揮系統、天氣監測預報系統，面向的用戶包括單位指戰領導、一線人員等，這樣的角色就決定了其具有較強的決策輔助價值
其目的主要用于讓用戶能夠通過使用大屏達到快速的指揮、調度、監控、決策
最后給大家推薦一些數據可視化方面的工具，來助力我們平時的工作
以上是一些能夠更快速生成各種數據可視化圖表的工具，類型和樣式都十分豐富
以上是一些能夠在線生成可視化大屏模版的一些工具，有助于在日常工作中涉及數據可視化大屏的時候進行參考
好了以上就是在B端設計中對于數據可視化尤其是PC端數據概覽的設計探討，當然其實關于數據可視化的范圍還遠遠不止于此，感謝你能夠耐心看到最后，如果這對于你的工作有一點幫助那么備感榮幸
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：核糖bro
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
無論是在生活場景、工作場景還是學習場景中，視頻播放的普及度都已經非常之高，為我們的多元化場景帶來便利。視頻功能在產品中的體現也已經成為基礎功能，在設計層面的不斷優化對于產品設計師來說至關重要。
本文特意結合目前比較熱門的產品，為大家梳理了涉及到視頻功能的產品在設計上面的解決方案。希望這些優秀的設計思考可以帶給產品設計師更多的靈感，不斷探索和發現優秀的設計解決方案。
影視類產品在不斷優化用戶體驗的時候，為了滿足用戶在一些特殊場景下的使用體驗，推出了后臺播放的附加功能。比如用戶在步行中、騎行中，或者處于不便于觀看視頻的場景中，可以采用后臺播放。視頻將會以音頻的形式后臺播放，讓用戶從視聽體驗轉為音頻體驗，也是一種變相的解決方案。
思考：考慮到用戶的多場景需求，而不只是底層的需求。
很多用戶在睡覺前都會習慣刷一下視頻，有時候經常會忘記關閉視頻就入睡了，第二天起來發現手機沒電啦！定時關閉功能的出現解決了用戶這一痛點，可以根據自己入睡的大致時間評估，設置定時關閉的時間段。人性化的功能設置在細微之處考慮到了用戶痛點，圖標設計也是結合場景化表現，提高用戶對于產品的操作體驗。
思考：幫助用戶培養習慣和解決用戶可能會出現的失誤，以情感化的方式拉近與用戶之間的親和力。
為了考慮到特殊人群的使用體驗，讓視頻播放的效果符合不同用戶的視覺感知，色覺障礙優化的功能設置人性化的呈現了解決方案。該功能針對色覺障礙用戶的臨床表現，優化視頻色彩來提高畫面辨識度。
思考：考慮到特殊人群的使用體驗，才能把產品的體驗延伸到更多的場景。
隨著短視頻的盛行，利用空余時間刷視頻成為用戶消磨時間的方式之一。對于視頻上傳用戶來說，根據視頻拍攝的題材會選擇適合的比例，有些題材適合橫屏比例。
抖音作為短視頻平臺積累了龐大的用戶量，視頻的種類和播放比例也是豐富多樣。為了滿足用戶的播放需求，設計了“全屏觀看”的切換按鈕，方便用戶觀看寬屏視頻的需求。觀看體驗的升級帶給用戶人性化的體驗，也方便更多比例視頻的完美呈現。
思考：為用戶提供匹配當前內容的方式，而不要局限在內容創造本身的匹配度上。
在刷短視頻的時候，刷到自己感興趣的內容想要繼續看完續集，以往的做法是進入作者主頁挨個尋找，視頻多了找起來很慢，用戶體驗很差。短視頻平臺提供了“剛剛看過”的快速定位操作，點擊之后會直接定位到剛剛看過的視頻位置，方便用戶觀看續集。人性化的功能設置節省了用戶的操作成本，方便一些持續更新的視頻內容更好的進行觀看體驗。
思考：節省用戶的時間就是提高自己的認可度，培養用戶的依賴度。
在觀看一些兒歌、短片視頻合集的時候，右側的視頻目錄區采用名稱和視頻截圖預覽呈現，直觀的預覽效果增加點擊觀看的欲望。小朋友在刷兒歌視頻的時候，降低了學習成本，切換視頻也更加便利。
思考：降低用戶的理解成本，才能獲得用戶的青睞。
情感化的設計可以拉進與用戶之間的親和力，體現產品人性化的一面。在特定的節假日或者特殊時間內，為了增強氛圍，視頻播放暫停的設計上面設計師也投入了很多小心思。比如在跨年期間，雙擊屏幕暫停時會出現綻放的煙花效果和 2021 年的絢麗文字，氛圍的營造帶動了跨年的氛圍，帶給用戶更加溫馨的感官體驗。
思考：提高用戶體驗的設計，就存在于細微之處的變化中。
有時候我們沒有明確的觀影目標，打開一個視頻后還想繼續尋找更好的影片，又怕當前影片有看點。“畫中畫”功能解決了這個痛點，觀看視頻時點擊“畫中畫”當前播放視頻縮小窗口顯示在側邊，用戶還可以繼續瀏覽新的內容，篩選更多可能性。
思考：在用戶沒有明確目標的時候，帶給用戶多種選擇性。
將影片投到電視觀看是家庭觀影的最佳選擇，讓觀影體驗不局限于方寸之間的設備上，還能與家人朋友一起觀看影片。如果家里有小孩子需要看動畫片之類的，除了投屏電視給他們觀看以外，自己還能繼續在 App 上觀看別的影片，雙向選擇提高了用戶的多場景需求體驗。
思考：特殊場景下不僅需要滿足用戶的需求，也要考慮用戶可能會出現的周邊困境。
各種手勢的研究是產品設計師探索的方向，在刷短視頻的時候，向左滑動除了進入作者主頁以外，也有產品選擇曝光作者更多視頻作品。更多視頻的曝光不僅方便用戶觀看續集，還能通過更多視頻的觀看建立對作者的好感度，讓用戶充分的判斷是否需要關注作者。該交互形式給用戶提供了更多的判斷權，也提高了作者更多視頻作品的曝光度。
思考：通過交互形式的改變給用戶帶來便利，也給作者帶來曝光度，平臺也提高了使用體驗，這是最穩固的體驗三角形。
在視頻播放中的手勢交互為用戶的操作提供了便利，短視頻中的單擊暫停/播放、雙擊點贊、長按浮層、左右滑動也有對應的內容變化。目前運用比較多的是單手操作的手勢，同樣的手勢在不同的產品中也激活不一樣的功能操作，比如影視 App 中通常是雙擊暫停/播放。作為產品設計師我們在交互設計的時候，手勢的變化在視頻功能中的運用可以深入探索。
思考：手勢交互的運用可以在原本的基礎上實現更多可能性。
在很多自媒體上大家經常會看到很多影視片段的 GIF 動畫，不僅增加了趣味性，也間接的傳播了視頻內容。很多視頻類產品為了給用戶提供自動生成短視頻和 GIF 動畫的便利，提供了一鍵生成的操作，不僅可以選擇內容區間，還可以自由控制時間。便利的操作降低了用戶的學習成本，還增加了用戶分享的趣味性。
思考：幫助用戶降低在外部平臺上分享內容的制作成本，也是提高自身內容被分享的概率。
截圖屬于手機系統自帶的功能，通過交互路徑操作或者設備按鍵快捷操作完成。而視頻播放器自帶的快照功能更便利，一鍵操作隨時定格畫面，還能快捷分享或者制作表情，非常的便利。
思考：只有把操作的時間和難度降低到臨界值，才能讓用戶逐漸形成依賴。
在觀看影片的時候，針對一些故事情節比較長的影片，我們可以選擇觀看指定角色的片段，或者選擇倍速播放等來實現個性化的觀影選擇。忙碌的生活讓我們少了一些觀影耐心，這也是短視頻備受喜歡的因素之一，片段的播放需求滿足了這部分用戶的需求。
思考：個性化的功能服務可以培養用戶對產品的忠誠度，這是形成種子用戶的關鍵。
由于移動端設備的大小限制，如何在有限的屏幕內進行延展設計，是產品設計師探索的方向。分屏設計是在保持當前視頻播放的前提下將屏幕劃分為更多模塊，不影響內容進展的情況下進行更多功能操作。
比如愛奇藝觀看視頻時的夸夸功能操作，在操作功能的同時不影響用戶的觀影體驗，增加用戶觀影時的互動性。
思考：有限空間內的更多可能性設計，是設計師不斷探索的過程，盡顯方寸之間的設計能力。
還有更多關于視頻功能在 UI 場景中的運用案例，這里僅拋磚引玉的列舉了部分設計分析，更多分析我們下期繼續。
針對單一功能的體驗總結，是分析和積累同一功能不同設計解決方案的形式，輔助增加設計需求中的效率發揮。產品體驗日記總結的不同維度帶來不同的深度思考，希望這個維度的總結起到拋磚引玉的作用，帶給大家更多的思考方向和總結思路。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：黑馬青年
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著互聯網的發展，近這幾年設計圈子里大家都在討論UGD（User Growth Design），要向UGD轉型等等，以用戶為中心，以增長為導向，這個概念本身并沒有問題，而且是對UED的一種非常棒的進化和升級，要求設計團隊需要具備更綜合的專業能力與視野。本著對團隊的升級優化，我也以UGD的思路對團隊有了新的更高的要求，然而在這個過程中卻發現在很多問題。
隨著各種社交平臺的傳播普及，什么閉環、串聯、顆粒度等等這些互聯網黑語，滿大街飛來飛去，設計師們的PPT、匯報資料是越來越豐富多彩，但項目效果卻并不明顯。數據、增長的概念確實是鋪開了，但卻成了PPT里的裝飾，并沒有真正落地生根。
經過很長時間的摸索，我們終于有了一套適合團隊自己的UGD思路，也一步一步的在不斷的優化提升，下面以我們做過的一個項目（用戶投資路徑優化）為例來說說我們對UGD的思考，以及設計師對數據分析以及場景化設計的思路。
作為設計師，最常關注的用戶數據就是轉化率、點擊率、停留時長、跳轉路徑等等，從單一數據來看，都是一些常見的簡單的數據，但要真正能夠分析用戶，還需要結合實際場景來分析。
案例：
我們在分析交易線的數據時發現了一些問題，并對數據做了對比分析。
[ 項目列表頁 ]
用戶的點擊主要集中在前十個投資項目，占據整個頁面點擊的80%。
[ 項目詳情頁 ]
用戶通過列表頁進入到詳情頁，詳情頁的瀏覽率較高，但轉化卻很低，另外優惠券的點擊率十分高，超過85%，意味著進入到詳情頁的用戶，基本上都進入過優惠券頁面，而最終促成成交卻很低。
以上是整個交易環節最初始的兩個頁面，也是最核心的頁面，從單個頁面的數據（點）來看都屬于正常漏斗數據表現，接下來我們從用戶路徑（線）的角度來繼續分析。
我們從用戶當中，抽取了部分最終完成了交易的用戶，對整個交易路徑的進行分析，結果發現用戶在列表頁——詳情頁——優惠券這三個步驟之間反復切換。
不難看出，用戶在列表頁、詳情頁、優惠券選擇頁來回切換，即使最終產生交易，但整個路徑耗時長，反復操作，跳轉不合理，導致大量流失，這是目前數據所呈現出來的情況，也是問題的核心所在。
案例：
這是最典型的購物交易場景，通過上面的分析，我們再結合場景化的思路進一步整理思考用戶的操作行為目的。
用戶為何反復的從列表頁進入詳情，又跳轉回列表頁再進入詳情頁？這就是突破口了，想清楚這一點，解決思路也就清晰了。
我們舉一個現實生活中的購物場景來幫助思考分析（靈感來源于生活）。
購物路徑1：想買東西-找到對應的貨架-使用優惠券并買單；
購物路徑2：有優惠券-到超市看看有沒有想買的-使用優惠券并買單；
在現實生活中，除了”有想買的東西”這一主觀需求外，對交易產生一定決策作用的，就是優惠。
結合前面對投資用戶路徑的分析來看，用戶交易路徑如此反復，實際上就是在同樣的資金投入的前提下，對比不同的項目、不同的優惠，如何搭配才能利益最大化，這就是用戶的最核心需求。
基于場景化的分析明確用戶的核心需求，確定需要增長（優化）的數據指標，我們提出來了兩個解決方向。
[ A方案——詳情頁的快速切換（優化） ]
，在原有的路徑上，保持用戶的操作習慣，新增詳情頁左右滑動切換的功能，用戶學習成本低，開發成本低，可快速上線，但對于路徑優化、數據對比不夠直接，治標不治本；
[ B方案—— 設計新的快速路徑（創新）]
結合前面分析的兩種現實生活中的購物場景，在原有的路徑上，針對平臺老客對平臺項目的規則詳情已經清楚了解的特點，設置多一條快速通道，減少干擾，對比直接，加快老客的決策速度，但用戶學習成本高，開發成本高，雖然治本但風險也大。
案例：
A方案直接開發上線即可，上線后就可以收集數據進行分析了，經過兩周的時間，從數據表現來看，交易總時長稍有所下降但并不明顯，約下降了2%，而交易率基本持平。
[ B方案最終UI稿 ]
在此期間B方案完成設計開發后，協調產品運營推廣等業務方，選擇確定部分渠道進行ABtest，經過一個多月，持續收集數據反饋優化方案，多輪ABtest后，從數據反饋來看，B方案數據提升明顯，有效的降低了用戶的決策時長（降低了近20%） ，提升交易成功率（老客轉化提升1%），說明方案的可行性強，隨即全量更新。
在后續工作過程中，持續根據數據表現，分析，發現并提出問題，提出解決方案，測試驗證，不斷的循環重復，持續提升用戶體驗，以數據為依據，以增長（優化）為目標，這就是我們對于UGD的一些思考跟嘗試。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：包大佬
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多設計師包括我在內對按鈕尺寸有著頗多困惑。為什么很多產品甚至蘋果本身并沒有遵循 44pt 的標準規范？為什么有些場景下的 CTA 按鈕那么?。堪粹o的最佳尺寸到底是多少？按鈕規范背后到底是什么樣的科學依據？這些依據可否量化？
emmmm，如果你和我一樣有著這些困惑，本篇文章應該可以給你很多啟發。
按鈕的尺寸具體影響到的依舊是視覺和交互的兩種能力。
視覺能力上很好理解。當一個元素尺寸越大，人眼就越容易抓捕到這個元素。所以那些越重要的東西，往往會給予更大的尺寸來強制用戶注意到它，這也可以解釋為什么甲方總喜歡不停地在背后指指點點嫌棄元素太小，就是因為這些元素對他們來說非常重要，只是他們沒有我們那么專業，知道強調一個東西的手法不僅僅是放大一種策略。
因此，相對較大的按鈕尺寸從視覺上，可以迅速捕獲用戶的注意力，對點擊行為是有益的。
而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目標尺寸越大，移動至目標所花費的時間就越短。所以，較大的按鈕尺寸可以降低用戶交互的交互成本，使得目標更加”易點“，對點擊行為同樣是有益的。
但是，按鈕尺寸并非越大越好，一方面是避免視覺上的失衡，另一方面也會受到界面空間限制、以及場景差異等因素的影響。
我們先來看下 iOS 的。蘋果規定的最小點擊區域是 44pt，這意味著一旦點擊區域低于 44pt，將可能會出現點擊失準的情況。當然，一些控件（標簽欄圖標、文字鏈）可以在視覺表現上只有 24pt*24pt，但是會在周圍加入額外的填充使其達到 44pt。
但是，在實際的 iOS 原生產品界面中，很多按鈕并未嚴格執行 44pt 這個數值。小于 44pt 的按鈕比比皆是，比如信息頁的發送、App Store 的獲取、購買浮層的確認、添加 siri、導航類右上角的工具型按鈕，它們的點擊區域為按鈕本身，但是均未達到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產品詳情頁中的獲取按鈕，它的高度僅僅是 27pt。
而 Android 中的按鈕建議尺寸是 56dp，但是和 iOS 一樣存在著大量低于這個尺寸的情況。其中不乏那些 CTA 按鈕。
這些情況的發生其實也很好理解，每個按鈕所對應的用戶場景、業務訴求不同，因此并不能一招鮮用一個尺寸吃遍所有場景。但是，有沒有一些科學的依據來可量化地解釋按鈕尺寸對點擊的影響？
著名產品設計師斯科特·赫爾夫就曾在他的文章《Using science to make truly tappable user interfaces》中提過，iOS9 的 Apple Music 在鎖屏界面下的按鈕過小，經常會發生無法準確點擊的情況，他需要集中精力精確得點擊才能完成任務。
不過蘋果在 iOS10 之后，鎖屏界面下的三個按鈕、乃至進度、音量的控制球全部被顯著地增大。這使得歌曲點擊操作的錯誤率明顯下降，不論是在什么場景下（你懂得，跑步、擠地鐵這些不可控的場景下總是會有聽歌的需求）都可以輕松地點擊。
而他為了解釋按鈕尺寸所帶來的變化，引入了歷史上著名的兩個實驗。
第一次實驗
2006 年，芬蘭 Oulu 大學，Maryland 大學和 Parck 學院的研究人員組成一個研究小組。他們的研究目標是，確定在觸摸屏幕上單手使用最容易的按鈕尺寸。
他們進行了兩組不同場景的實驗。第一組讓受試者執行一次性的任務，點擊一個 CTA 按鈕、復選框或者多選框；第二組讓受試者執行多次連續的任務，比如輸入電話號碼。并且在實驗期間，研究人員測試了每一種場景下按鈕的尺寸。最終的實驗結果表明，單個任務下，按鈕尺寸小于 9.2mm 后錯誤率顯著增加，而多次連續任務下，按鈕尺寸小于 9.6mm 后的錯誤率顯著增加。
特別的是，對于多次連續任務，9.6mm 到 11.5mm 之間的錯誤率基本不變。
看到這，來稍微總結一下，9.2mm 和 9.6mm 是兩個關鍵的尺寸節點。在單次任務和多次連續任務下，按鈕尺寸分別小于 9.2mm 和 9.6mm 會導致錯誤率的攀升。這個結果和 MIT Touch Lab 研究得出的最佳熱區尺寸 10mm 很接近。
第二次實驗
當然，這還不算完。5 年后，德國兩所大學的研究人員又進行了一項類似的研究，目的是確定觸摸屏幕按鈕的最佳大小。
他們的實驗方法相對就很潮了。他們專門開發了一款安卓游戲，游戲玩法也很無腦：玩家必須要精準地點擊到屏幕中任何地方飄動的任意尺寸的圓圈，游戲才能繼續。并且速度越快，得分也就越高。
這款游戲在上線之后被下載了 10w 次，并且悄咪咪得暗中記錄了用戶所有的點擊行為，記錄總量約為 1.2 億次。
最后根據統計分析，得出了錯誤率和圓圈尺寸的圖表關系。你可以看到，和 5 年前的實驗同樣，呈現類似的指數關系。研究人員根據圖表發現：
在圓圈尺寸小于 12mm 后，錯誤率開始逐步提升。在尺寸小于 8mm 之后，錯誤率高達 40%以上。并且研究還發現，在圓圈尺寸超過 12mm 之后，玩家的正確率并沒有得到顯著的提升。
由上述的兩個實驗，我們可以概括出一些有用的結論。
那么，按鈕的最佳尺寸到底是多少呢？
斯科特將實驗得出的關鍵尺寸與蘋果、谷歌和微軟三大規范進行結合，發現了一些有意思的現象——
可以看到 Android 和微軟的尺寸，基本對應到了這兩項實驗得出的關鍵尺寸。
最后，再來看下開頭 iTunes 的鎖屏界面的按鈕?？梢钥吹綇?iOS9 到 iOS10，蘋果將按鈕可點范圍由 7mm（44pt）擴大至 12mm（82pt），結果也正好符合了微軟的規范?？吹竭@里，你肯定更困惑了——按鈕的最佳尺寸到底是多少？
其實，并不存在什么按鈕的最佳尺寸。
不論是 iOS 的 44pt，Android 的 56dp，還是微軟的 82pt，都需要具體情況具體分析。界面布局、用戶場景、業務訴求等等，都屬于按鈕尺寸的影響因素。
比如下面這些 iOS 端產品的 CTA 按鈕，它們的尺寸最小到 26pt，最大到 87pt，而且每個產品內部的 CTA 按鈕也存在差異。你能說出這些按鈕哪一個是最佳尺寸嗎?
當然，我們起碼可以去界定一些相對可控的范圍。
這里我簡單根據斯科特文章中的結論，結合市面主流產品的情況劃分出按鈕的幾類尺寸：
1. 常規場景、局部模塊
比如 App Store 的產品詳情頁的獲取，知乎中個人主頁的關注，都屬于當前頁的局部模塊，點擊之后通常是狀態的變化或者出現新的彈層。這些按鈕的尺寸我建議控制在 28pt~40pt 之間。
2. 常規場景、全局模塊、強業務屬性
比如微信個人頁的添加好友、各大電商商品詳情頁的加購、登錄注冊頁的登錄注冊等等。這些頁面的 CTA 按鈕隸屬于頁面全局，所以可以給它極高的權重、甚至全局吸底展示（如詳情頁），以更快地促進點擊。通常，這類按鈕在常規場景下具備了最大尺寸。我個人的建議是保持在 40pt~60pt 之間。
3. 不可控場景
不可控場景的意思就是，用戶點擊按鈕時所處的場景可能比較特殊，并且這種特殊的場景很可能給用戶帶來一系列無法掌控的風險。
比如 keep 在跑步場景下的按鈕，就需要充分考慮到跑步時不穩定的狀態，如果按鈕和常規場景一樣，那很容易發生無法準確點擊的情況，增加意外事故發生的概率；包括來電場景、地圖導航場景、快遞取件場景等等，都屬于不可控的場景。各位可以自己代入腦補一下，這些場景中無法準確點擊時容易產生什么樣的后果。
所以這些場景中的按鈕就得夠大，以盡可能覆蓋到那些極端的不可控情況。我個人的建議保持在 60pt~90pt 之間。
當然，這僅僅是很粗略的參考區間值，如何結合現有業務訴求、用戶場景需求等因素去合理地界定才是重中之重。如果為了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。
其實從知乎去年 10 周年的大改版可以看到一些有意思的細節。很多按鈕的高度比以往更高了。比如鹽選會員的續費按鈕，由之前的 36pt 提升到了 40pt。
個人主頁的關注按鈕也由 28pt 提升到了 32pt，你仔細看的話，按鈕的寬度也發生了變化，從之前的 90pt 提升到了 100pt。
邀請回答界面中的寫回答按鈕，也由原本的文字鏈，提升到了實心按鈕，高度則直接復用了關注按鈕的尺寸——32pt。哦，不好意思，這應該是按鈕設計形式上的改變。
總之一句話，知乎這次的改版，CTA 按鈕的尺寸更大了。我們從尺寸對點擊行為的影響可以推導出，這次改版背后更為明確的業務目標——促進UGC內容生產、促進關系鏈沉淀（一旦沉淀了復雜的關系鏈，用戶也就更難以離開平臺）以及會員付費轉化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：轉行人的設計筆記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
據說只要可能犯錯，就一定會有人犯錯，用戶犯錯的可能性比我們想象中要大得多得多得多
做好防錯與容錯，可以讓用戶更順暢...
據說只要可能犯錯，就一定會有人犯錯，用戶犯錯的可能性比我們想象中要大得多得多得多得多。
做好防錯與容錯，可以讓用戶更順暢的達成自己的目標。
恩，用戶總是那么不可理喻對吧
都做得那么明顯了，還犯錯。該提醒的也提醒了...誒～
打住，打住，當用戶犯錯時，別急著怪他，我們需要先判斷清楚。
用戶委屈的說：“來來來，我就想下載一個資源，大家都是講道理的設計師，來評評理，我錯在哪里？”
這，這... 每一步的確都好像沒問題，那，問題究竟在哪？
作為設計師的你是不是已經敏銳的察覺到了什么？
對，關鍵點在 ' 67bh ' 這里。都是空格惹的禍！
那好，你準備好方案救用戶了嗎？......（這里理論上應該停頓30s以上吧）。
當然，現在不會公布答案，方式有好多種。留著你看完文章中間部分再跟大家一起找方案吧。
這一部分的重點不是方案，而是思維。
很多時候，用戶并沒有錯，作為一個有擔當的設計師，我們可不能甩鍋。
有了這個前提，我們就可以去掉心中的那些煩躁和埋怨...開始愿意伸出援手，去拯救用戶了。
對，這個疑問就已經包含了解決方案了。
真的感嘆中文的博大精深，避 （防錯）、免 （容錯）。
為了讓大家能更好的理解什么是防錯和容錯，我特意舉一個例子哈～
（什么，防錯容錯你都懂？你怎么知道我講的跟你想的一樣呢，既然這么厲害趕緊做下面這道題。）
對，就是圖片里那個拿滑板的家伙，估計是第一次來這片海灘，有鯊魚都不知道，還使勁忘海里沖...
從避（防錯）的角度來看，你有什么方法幫他呢？（先不考慮哪種方法更好也不要考慮成本哈，能達到目的的都行。）
友情提示：防錯的目的是讓用戶在操作之前，盡量減少用戶出錯的可能性。
看看的你腦袋是不是真的轉得飛起...
我這邊有幾個想法，看看我們有沒有緣，想到一塊兒去了：
大聲告訴他，這位拿滑板的大哥，海里有鯊魚，別忘海里沖了...
警告這位大哥，嘿兄弟，這里只允許坐輪船和直升機去海島那邊。
在通往海島的路線全程搭起防鯊網。
恩，目前就想到這些了，還有方案的同學可以在評論區炸沙發哈。
這些方式，我們試著抽象一下：
【提前做好引導和提示】大聲告訴他，這位拿滑板的大哥，海里有鯊魚，別忘海里沖了...
【優先選擇減少輸入】警告這位大哥，嘿兄弟，這里只允許坐輪船和直升機去海島那邊。
【限制原操作范圍】在通往海島的路線全程搭起防鯊網。
大家應該都發現了，這種方式雖然能達到讓用戶安全的目的，但是用戶會有挫敗感，同時也會有被限制的感覺。
我只要說到USB插頭，大家應該就開始腦補畫面了吧“為什么我插的進去的第一次永遠是錯的方向，OMG!”
那，容錯呢？
還是這位拿著滑板的大哥，想要去海上的小島，從免（容錯）的角度來看，你有什么方法幫他呢？
友情提示：容錯的目的是在用戶操作之后，自動糾正/化解錯誤或提供挽回的方法。
我有幾個奇怪的方法，來跟大家分享一下：
呃...馴化/殺死鯊魚。
派一直專業驅鯊救援隊跟隨這位大哥（滑板大哥：我何德何能，太感動了）。
同樣，我們繼續抽象一下：
【讓原本的錯誤不影響用戶行為和結果】呃...馴化/殺死鯊魚。
【出現錯誤可挽回】派一直專業驅鯊救援隊跟隨這位大哥，出現鯊魚就殺魚。
誒，成本好像非常高哈，但是用戶感覺良好哦～
因為他甚至都感知不到這片海還有過危險，按自己喜歡的方式行動就行。
我提一提微信消息的撤銷功能，大家可能就會舒緩一口氣了。
不知道挽回了多少個尷尬的瞬間，是吧～
可是...我只是一個有無縛雞之力的設計師，我肝不過鯊魚怎么辦？
來來來，前面那個喊救命的大哥又來了，大家趕緊想想辦法吧～
（第一步和第四步就是單純點擊，就先刪掉了）
前面講的方法也列在右側了，看看你們是不是可以針對每種方法找到對應方案了呢？
看看是不是可以這樣？
方案一：使用方法-提前做好引導和提示
方案二：使用方法-優先選擇減少輸入
方案三：使用方法-限制操作范圍
方案四：使用方法-出現錯誤可挽回
方案五：使用方法-讓錯誤不影響結果
在這個案例中，大家覺得那個方案更好呢？
好吧，這個問題的確很蠢。當然是 方案二 + 方案五 結合使用了。因為是兩個平臺的交互，而對于各自平臺而言，一個控制好輸出，一個控制好輸入。對平臺自身的容錯性有很大的幫助。
通過上面的案例，相信大家都已經熟練掌握好防錯和容錯的方法了。
什么，還沒掌握？那你滾回去，（望著你正在慢慢蜷縮的身體）不.........不是你滾，是你的鼠標往回滾!
那，我們先不管那幾個往回滾的同學，開始進行強化學習啦～
找了一些生活中經常用到的產品，讓大家感受一下防錯容錯的魅力。
如果你根本無法從圖中發現什么，那我只能說... 你還是需要經常用銀杏葉擦擦眼睛了（因為擦了之后你就更容易發現（人性）。
案例先到這里，大家一定以為要結束了吧～不，不，前面這些都不是最重要的。
方法總會越來越多，靠“別人”總結的方法也就能應個急。
來來來，放空～～～～拋棄你的職業相關認知、拋棄你的設計師的身份，你再看我們的設計。
你像孩子一樣，好奇又“無知”。
你會發現，為什么會有這么多奇怪的看不見的規則，為什么我這么難完成我的任務。
如果當客戶遇到問題，你能用合適的方法去解決，那你已經是個不錯的設計師了，但離優秀還很遠，因為優秀的設計師必須具有敏銳的嗅覺，要在產品團隊的前面，感知并規避風險。
所以，更重要的還是，我們必須學會變身。
好了，這一次真的需要大家獨立思考了，并且沒有標準答案，大家可以交流交流。
在以下場景中，可能會出現什么“錯誤”，如何有效處理用戶“犯錯”？
在生活中，其實會有很多很多“讓用戶犯錯”的產品/場景，多參與其中，去發現問題，去思考解決方案，慢慢的，你就會具備非常好的問題發現能力和解決能力了。
說了這么多，可能有一部分同學會想說：
“用戶出錯的情況應該很少吧，你花這么長的篇幅”
“你一定低估了用戶的智商”
我告訴你，出來玩玩，誰帶智商做事啊～
不信你看。
百度一下，你會發現用戶犯錯的可能性大大超出你的預期。
只是，你以為與你“無關”而已。
要防止用戶犯錯，你需要不斷的模擬用戶的操作行為，去捕獲那些可能存在的問題，然后將它一一化解；這個過程很難，因為你要拋開自己以往的經驗和認知，去感受用戶的視角。
想想，用戶體驗的改進不就是讓產品越來越符合用戶認知，從而減少用戶“犯錯”嗎？
只是有些錯誤，我們只作為圍觀者，將它推向了用戶。
從現在起，將“錯誤”留給自己。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：得勿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
合理的移動導航設計能夠盡可能地減少摩擦，引導用戶去他們要去的地方。
這篇文章匯總了移動端導航設計最常見的樣式、要注意的設計準則以及優秀的案例分析，一起來系統性地掌握這些知識～
簡單來說，導航是用戶從 A 點到 B 點的方式，是他們發現設計點并與產品交互的過程。
可能很多用戶認為導航的目標是“在盡可能短的時間內讓用戶從 A 到 B”，但時間短只屬于操作結果，這個結果需要依靠合理且簡單的設計才能實現。
△ 一個頁面中可以存在多種導航。例如在油管首頁，有頂部導航欄、篩選器導航和底部導航，這些導航相互搭配為產品助力。
1. 漢堡菜單
圍繞漢堡菜單有很多爭論，但存在即合理，在合適的場景下漢堡菜單也能發揮大的作用。
來看一下漢堡菜單具備的優勢：
△ 使用用戶熟悉的設計可以事半功倍。例如美團和餓了么兩個產品有著完全不同的主題色，但外賣點餐流程卻是一樣的，仍然是用戶熟悉的操作，并沒有因為產品的不同而改變點餐流程。
2. 底部導航
底部導航欄通常包含產品中最主要的導航鏈接，用戶只需要簡單的點擊就能直觀地在不同頁面間切換。
△ 幾乎每款產品都缺少不了底部導航欄，它方便用戶單手操作，不需要太費力就能快速訪問產品頁面，提高可用性。
3. 頂部導航
關于頂部導航，可以看之前分享的文章，里面詳細介紹了頂部導航的設計方法。
△ 頂部導航通常包含頁面中最重要的信息，與其他輔助導航結合使用。
4. 卡片式導航
卡片式是一種出色的設計樣式，支持改變各種形狀和大小，并且能展示文本、鏈接或照片等各種元素。
隨著網絡上的內容越來越碎片化和個性化，卡片是在頁面中聚合單個信息的好方式。
△ 為了改進體驗，卡片可以個性化顯示不同的內容。另外卡片很容易適應不同的屏幕尺寸，配合響應性設計。
5. 標簽
標簽往往是在一個大主題下同時支持多個選項，每個選項都轉到不同的界面。
△ 標簽通常用于在同一頁面中的幾個視圖之間切換，展示內容上的差異性。而頂部導航欄有主頁、搜索、收藏夾等多個圖標，代表不同的功能。
6. 基于手勢的導航
基于手勢的導航可以讓用戶在所需方向上快速滑動，來完成特定的操作。
這種樣式的優點在于，即使最沒有經驗的用戶也很容易掌握，因為手勢通常是直觀的。
△ 國外大火的約會產品Tinder以及國內的探探，都使用了基于手勢的導航樣式，為用戶帶來滑動的樂趣。
△ 基于手勢的導航并不是Tinder發明的，但這款產品無疑將這種流行帶給了大眾。經典的向左或向右滑動模式保持了事物的動態性、簡單性和娛樂性。
7. 全屏導航
全屏導航是指將大部分屏幕用于導航操作，能夠很好地將用戶的注意力聚焦到具體的產品細節上。這是一種以連貫的方式提供大量導航的方法，可以立即幫助用戶了解產品的功能。
△ 點擊圖片可以跳轉到全屏大圖導航中，能夠更清晰地查看商品的外觀狀態。
8. 3D touch
最初是由蘋果公司提供給用戶的，這是一種創建導航快捷方式的方法，可以顯示選定的 APP 的一些關鍵操作。
△ 蘋果為手機創造了一種全新的快捷方式，同時提供了強大的可用性。
△ 3D touch另一個用途是內容預覽，在處理內容選項時例如收件箱或文章列表時，這是給用戶提供預覽的好方法。
1. 導航需要直觀明顯
對所有類型的導航來說都是如此。在移動端中由于屏幕空間的縮小和交互成本的增加，導航體驗的好壞會對產品產生很大的影響。
△ 從可用性角度來看，直觀的導航對目標用戶來說至關重要。這意味著需要進行嚴格的測試和大量的研究，可以使用卡片分類或樹狀圖等方法來驗證導航的可用性。
2. 考慮手指的位置
這點對于移動應用來說至關重要，沒有用戶想反復點擊圖標卻沒有反應。
△ 鏈接和按鈕的尺寸需要足夠大，以便大多數用戶在第一次點擊時就能成功點擊。頁面中按鈕的尺寸最小通常保持在10mm。
3. 建立視覺層級避免混亂
小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素，如果元素沒有平衡，用戶仍然會有混亂的感覺。
△ 極簡主義是UI設計的一種特定風格，通過必備的頂部導航欄、留白以及由大小、版式、顏色劃分的視覺層級來規劃頁面內容。
1. Facebook
Facebook 的導航構成比較復雜，融合了多種不同樣式的導航。
△ Facebook主頁包括漢堡菜單、頂部導航欄和底部導航欄。通過這種方式，這家社交媒體巨頭明確的將主要內容與次要內容分隔開。
2. Spotify
Spotif 作為音樂流媒體業務的巨頭，即使對于新用戶來說，頁面的設計也容易理解和探索。
△ 以高度視覺化的形式突出每張卡片背后的關鍵內容，另外底部導航也可以完成繁重的任務指引。
3. App Store
App Store 是使用標簽進行導航的好例證，每個標簽代表了同一內容的不同方面。
△ 在排行榜中，用戶可以瀏覽付費、免費和熱門的標簽頁，從而快速建立一致性和對其他頁面的感知。
4. Telegram
Telegram 可以供任何人使用，漢堡菜單提供了用戶可能需要的所有關鍵導航選項。
△ 每個用戶都能立即找出漢堡菜單，非常容易使用和理解，而且幾乎不占用界面中的寶貴空間。
5. Yelp
yelp 在創建全屏導航體驗時采用了一種稍微不同的方法。
△ Yelp將屏幕劃分為兩個不同的區域，實際上并沒有將整個屏幕專門用于導航選項，而是將頂部用于導航選項，并在底部留下更多的負空間。
6. Trello
頁面中的卡片是拉長的矩形，整齊有序地填滿屏幕空間而不會讓用戶不知所措。
△ 卡片系統很好地代表了Trello簡化復雜工作流程的能力，為用戶帶來整潔和方便。
7. Twitter
同樣使用了多種導航混合的設計樣式。
△ Twitter將導航重點放在底部欄上，涵蓋了整個平臺中四個主要的方面。
沒有高速公路，我們很難便利地在城市間穿梭。同理，如果沒有導航，一款 APP 的使用也會遇到很多麻煩。導航就像高速，不斷在為用戶提供必要的指引！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
面對國內外競品崛起，QQ 音視頻如何尋求突破，制定對用戶有價值的策略，贏得數據增長和用戶口碑。
要突破用戶增長停滯的困境，需從全局角度思考，對問題所處的系統進行分析與洞察，找出拓展應用場景的機會點，提供技術或價值創新的功能與服務。
首先，針對 QQ 音視頻所處行業的競爭態勢進行全面、系統的分析，包括內部優劣勢，以及外部機會和威脅，以此制定相應的策略與計劃。
關注競爭對手，更要研究用戶，通過用戶調研洞察用戶需求，找出 QQ 音視頻應持續鞏固優化，以及需考慮突破的使用場景。
綜觀音視頻的行業發展與科技趨勢，有三個主要的發展方向：
超高清視頻
5G 高帶寬、低時延將開拓更多玩法和業務場景，超高清視頻通話將帶來更豐富的感官體驗，猶如面對面溝通。
應用場景多元化
從使用場景來看，音視頻已走出會議室，從單純的溝通交流，擴展至豐富的應用場景，廣泛服務于人們的日常生活。
智能終端+音視頻云服務
未來智能終端將具備聯網連接的能力，搭配音視頻服務提供商的云服務，使得通話無所不在，可隨時通過智能終端進行音視頻通話。
綜合前述分析，提出 QQ 音視頻的用戶體驗愿景（UX Vision）和價值主張（Value Proposition）。
QQ 音視頻的本質在于溝通，其聲影重現的獨特優勢，消弭了空間距離。未來隨著通信技術的演進，高畫質、低時延、實時互動的感官體驗，將實現遠距臨場（Telepresence）的終極目標，使用戶感受到近乎面對面交流的體驗，就像在眼前〝一起做〞某些事。
2. 價值主張
綜上所述，提出 QQ 音視頻為用戶傳遞的價值——社交臨場感（Social Presence）。
臨場感相關理論與研究，源自 Short、Williams 和 Christie 等三位學者于 1976 年所提出的社會臨場感理論（Social Presence Theory），指的是雙方通過傳播媒介進行溝通的過程中，所能感受到對方真實存在的程度。QQ 音視頻憑借高度的媒介豐富性，提供實時響應、語言/非語言線索交互，使用戶能輕易地在社交互動中感知對方真實存在，進而在心理上獲得歸屬感與認同感。
根據過往文獻與媒介特性，將 QQ 音視頻的社交臨場感分為四個層次：
界面質量（Interface Quality）
界面可用性與視覺設計不會干擾操作，能讓用戶專注于音視頻溝通。
真實感（Realness）
音視頻的聲畫體驗及與人交流的方式，能貼近于真實世界。
互動性（Interactivity）
用戶之間的互動交流越強，越能感受到對方的存在。
情感傳達（Affective Expression）
通過情緒表達、環境氛圍的營造與對方建立連接，在心理上感到彼此的存在。
圍繞社交臨場感的價值主張，制定突破當前困境的目標與設計策略。音視頻產品除了廣泛應用在通訊場景，正逐漸賦能更多創新場景?；?Q 群生態和調研結果，聚焦于生活、辦公、娛樂等場景進行探索。
兩個主要的設計目標：
重塑體驗
回歸通訊本質、夯實基礎體驗，對通話界面進行改版設計，讓用戶專注于音視頻溝通。
場景探索
開拓應用場景，通過社交臨場感賦能生活、辦公、娛樂等場景需求，為用戶創造價值。
針對 QQ 音視頻的應用場景，制定相應的設計策略。
界面質量是影響社交臨場感的關鍵要素，然而調研結果顯示，QQ 音視頻的通話質量和體驗落后競品，包括主界面功能復雜、通話流程痛點多、核心能力落后競品等體驗問題。
針對上述問題，提出 QQ 音視頻改版的設計思路：
1. 化繁為簡，回歸本質
分析不同通話類型的用戶習慣，以及各個功能的使用數據，區分功能優先級，分為核心功能、輔助功能、高級功能等三個層次，重新定義功能架構與布局。
2. 鏈路排查，解決痛點
運用認知走查（Cognitive Walkthrough）快速排查通話過程存在的用戶痛點，并將缺失的功能與信息補齊，最終解決超過 16 個以上的可用性問題。
3. 補齊短板，超越競品
對于視頻畫面的思考：
QQ 采用 1 大 N 小的畫中畫模式，適合 1 人主講、他人觀看的場景，主客位明顯，缺少一種與他人共在的感覺；反觀微信是 9 路宮格畫面，視頻畫面僅聚集在上半部，有利于節省流量，但同時也限制了屏幕利用率。
兼合上述兩者的優點，設計了 16 人視頻通話的功能：
16 人視頻通話也延伸了不同的創意玩法，例如祝朋友生日快樂、拼字表白或求婚。
QQ 視頻通話重度用戶的通話對象，主要來自戀人伴侶，這類用戶最希望獲得〝在一起〞的陪伴感，而社交臨場感的〝真實感〞是營造音視頻陪伴感的關鍵因素——彷佛對方就在眼前，兩個人一起聊天、一起做某些事。
1. 讓他 ? 她看到最好的你
聲影的真實感，是讓對方感受到你就在眼前的必要條件。真實感包括流暢度與清晰度，通過用戶行為分析，發現在不同場景下，用戶對視頻清晰度與流暢度有不同偏好 。
為此，QQ 音視頻開創了的高清 / 流暢模式，用戶能根據自身需求做選擇，切換自動、流暢 480P、高清 720P 三種模式，針對不同模式定制碼表，匹配不同的幀率和碼率。除此之外，QQ 音視頻也與手機廠商合作，開發 QQ 5G 1080P 超高清視頻通話，提前布局 5G 應用。
2. 記錄〝在一起〞的時刻
創造情感連接，有助于拉近彼此距離，營造陪伴感。有什么是情侶、閨蜜平時會做的事，因為分隔兩地不能一起做了？
循著這個思路，設計了全新的雙人合拍模式。距離遙遠的兩人，通過 QQ 音視頻實現留影合拍，讓彼此的情感得以沉淀。另外，為了增添合拍時的樂趣，該模式結合了 P 圖資源與人臉識別的能力，讓用戶可選用場景模版與掛件，創造屬于兩人的高光時刻。
3. 〝一起做〞某些事
情緒之間的感染，更能強化陪伴感與互動感，據此設計了第一款支持視頻聊天的一起看應用 ——視頻包廂。有別于Q群一起看的廣播形式，視頻包廂訴求更親密、1v1的陪伴感，彷佛對方坐在身邊，一邊看劇、一邊聊天。視頻包廂的價值，除了提升QQ音視頻的互動性，也為關系鏈活躍拓展應用場景。
線上會議是辦公用戶主要的使用場景，一方面將聚焦用戶核心需求，思考辦公場景的功能設計，另一方面增強用戶之間的互動性，讓會議更具社交臨場感，就像面對面溝通一樣高效。
1. 溝通更多元
為什么需要文字聊天？當主持人開啟全員靜音，此時無法回應講者；多人通話時，最多同時聽到 6 個人的聲音；不方便開麥或攝像頭，又想參與互動。
為了解決痛點、完善溝通形式，QQ 音視頻新增了文字聊天的功能，可通過手勢快速展開 / 收起聊天界面，并支持發送表情和文字消息；這些消息只會在通話界面沉淀，不影響未參與會議的群成員，避免不必要的打擾。
2. 輕松會議管理
對辦公用戶而言，線上會議需要完善的管理機制。QQ 音視頻嘗試結合 Q 群管家機器人，小成本實現通話預定。用戶能設置通話主題、開始時間、會議提醒，并支持分享會議鏈接到微信、QQ 空間等其他渠道；獲取鏈接的用戶，能快速拉起 QQ 加入會議。
3. 以我所?為你呈現
面對面分享是信息共享最有效率的方式，分享者能夠當面指出要點，有效地表達與溝通。QQ 音視頻借助系統鏡像投屏，實現邊通話、邊共享的能力。在商務會議中，將手機中的信息與操作，實時同步給其他參會成員，例如文件、照片、郵件內容等，并支持同步畫面、設備聲音。另外，諸如游戲分享、作業輔導、操作協助等場景，都能通過屏幕共享滿足需求，為用戶帶來實質性的效益。手機端最后一塊拼圖完成后，QQ 多端皆可實現屏幕共享，現已成為 QQ 音視頻的口碑能力。
疫情期間，線下聚會被迫停止，線上娛樂應運而生。在此契機之下，借助音視頻實時互動、聲影重現的特性，開啟了新的娛樂形態——QQ一起派對。
QQ 一起派對是基于音視頻展開的實時社交游戲，旨在打造真實聚會游戲體驗，讓游戲過程更貼近線下真實場景，就像面對面一起玩聚會游戲，能與好友邊玩游戲、邊聊天。通過環境氛圍的營造，包括場景具象化、增強代入感等方法，實時感知好友的情感變化，從而獲得社交臨場感，在心理上感到彼此的存在。
此外，有別于競品需通過點擊按鈕作答，QQ 一起派對利用實時語音識別，讓用戶通過更自然的人機交互方式，在游戲過程中進行語音搶答，彷佛置身于真實世界中與好友互動。
QQ 音視頻經過一系列的體驗重塑，獲得不錯的成果。基于生活、辦公、娛樂等場景深挖需求，新增許多實用功能和創新玩法，為用戶體驗和價值創新奠定良好的基礎，且歸功于這些積累，以致于在疫情期間，QQ 音視頻能不畏競品的挑戰。除此之外，多項新增能力，例如屏幕共享、視頻包廂、QQ 一起派對，獲得用戶廣泛好評；調研顯示，用戶樂于將 QQ 一起派對推薦給其他人，足見該功能獲得不錯的用戶口碑。
對于音視頻行業來說，疫情迎來的爆發式增長，無法保持高速成長態勢，會有一定程度的回落，但能提高大眾接受度和習慣養成，認識到音視頻能在一定程度上替代線下溝通，不僅限于通訊功能，音視頻應用擁有更多的可能性，正逐漸賦能更多創新場景。為此，QQ 音視頻基于社交臨場感，探索并賦能生活、辦公、娛樂等應用場景，提供技術或價值創新的功能與服務，為用戶創造獨特的價值。
面對市場上同類競品的崛起，作為一個 UX 設計師，除了因應產品思維設定目標，亦應思考如何以價值驅動解決問題：對于如何解決問題、邁向未來愿景，提出最適切、有效的方法。換言之，要關注的不只是當前面臨的問題，更重要的是擘畫用戶體驗愿景，提出該產品的價值主張，并制定相應的設計策略。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：騰訊ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
聽到<夜配色>這個詞，你腦海中會聯想到什么樣的色彩？或者什么樣的畫面？
可能最容易被人聯想到的就是黑色，因為夜晚給人的印象通常就是一片漆黑。如果繼續聯想，可能有的人也會想到藍色，因為真實的夜晚也并非純黑，但是這種藍一定是暗色的藍。
但是夜晚也并非什么都看不見，有時候也會有光亮，比如自然的星光或者人造的燈光，這種光可以是冷色的。
當然也可以是暖色的。這些情況基本上就是人們通常會聯想到的關于<夜配色>的色彩形象。
而讓大家失望的是，這些通常會想到的色彩印象其實都不屬于<夜配色>的形式，那到底什么是“夜配色”呢？
電影《綠皮書》海報
這個需要從第 91 屆奧斯卡金像獎最佳影片《綠皮書》說起，《綠皮書》的海報色彩很美：水藍色的汽車與天空色相呼應，司機也穿著藍色的上衣，整個畫面都散發著明凈的藍青色調，奇妙的是，后座的“主人”卻穿著一件咖啡色系的套頭衫，但是露出的襯領同樣也藍色系的，其實這種色彩組合就屬于<夜配色>。不過大家先別急，我們接著往下看。
電影《綠皮書》劇照
不僅電影海報如此，整部劇中的色彩搭配也始終保持著<夜配色>的基調。比如女演員明亮的藍色針織外套與褐色的裙子就形成了夜配色，其他場景也是如此，這正是它迷人的地方。電影《綠皮書》講述的是一段跨越種族、階級的友誼故事，而<夜配色>恰恰具有民族的、世界的、神秘的、共通的色彩屬性。
具有以上這些屬性，很大程度上是因為這種色彩搭配的不常見性，不常見不代表就沒有規律可循，任何色彩搭配必定有它的內在規律，我們不能只看表面，抓到本質才能掌握它的內核。我們把剛剛提取的這幾組顏色排列出來分析一下。
我們看這些色彩有什么共性：上方的顏色純度或明度都是在偏低的范圍，而下方顏色的純度或明度都普遍偏高。如果再結合冷暖色來看我們會發現，上方都是暖色系，而下方都是冷色系。
因此我們可以總結出：低純度或低明度的暖色搭配高純度或高明度的冷色，這種配色形式就是<夜配色>，也叫<影印色>。
如果大家難以理解，我們可以再通俗一點，就是暗濁的暖色搭配鮮亮的冷色。嚴格來講<夜配色>并不算什么真正的配色技巧，無非屬于冷暖色搭配范疇，但是因為搭配在一起很特別，所以我們就把它單獨拿出來作為一種搭配原則來探討。
異域情調
最早引入<夜配色>這一概念的是服裝領域。很多咖啡色系的衣裙如果只是搭配黑色或米色等色系，整體上雖然和諧但也會顯得單調和乏味，所以就會加入藍色系，這時就會有不一樣的感覺。并且<夜配色>的搭配具有高級感，比如藍色的牛仔褲就可以試試搭配駝色上衣。
復古紳士
而且<夜配色>的搭配男女通用，比如男士的話可以是水綠色的毛衣搭配棕色西裝外套，或是是領帶、胸花都可以。男士使用夜配色，很有時尚感，會顯得精致典雅，細節處彰顯低調華麗的質感，整體具有復古紳士的浪漫氣息。
魅力碰撞
使用<夜配色>也可以考慮面積配比，想要冷暖碰撞的效果，通常情況下就是在上半身和下半身使用一對夜配色，比如葡萄酒色配天青藍，充滿異域風情。
點睛之筆
當然也可以用點綴的方式來使用<夜配色>，比如用鮮亮的冷色搭配低明度的咖啡色，用鮮亮的冷色來點綴，展示高級感，對于服裝搭配而言，衣領、袖口、包、鞋這些都可以是點綴色的應用載體。
對于這些<夜配色>在服裝領域的應用，我們可以將它們提取出來，按照暖色和冷色重新擺放，然后旋轉角度，不知道大家發現什么沒有，其實<夜配色>的獨特美感，像極了天空色與大地色的碰撞。
雖然到這里大家對<夜配色>已經有了一些基本的了解，但是想要良好的運用到設計當中，還需要繼續加深理解，畢竟我們之前所看到的都是電影或者服裝領域的<夜配色>，而我們切入的角度，就是先排除那些不屬于<夜配色>的形式。
回到之前我們總結的，首先<夜配色>包含一種冷色和一種暖色，然后色調上分為暗濁的和鮮亮的，所以它們兩兩組合就會出現四種形式：也就是暗濁的冷色搭配鮮亮的冷色、暗濁的冷色搭配鮮亮的暖色、暗濁的暖色搭配鮮亮的暖色、暗濁的暖色搭配鮮亮的冷色。
暗濁的<冷色>——鮮亮的<冷色>
首先第一種就是暗濁的冷色搭配鮮亮的冷色，這種配色形式很常用，比如通常我們確定一個背景色之后，上方的文字色或元素色就會在背景色的基礎上改變純度或明度。
暗濁的<冷色>——鮮亮的<暖色>
第二種就是暗濁的冷色搭配鮮亮的暖色，這種比第一種更常見，因為這種形式就是我們通常所講的冷暖搭配，一冷一暖，一亮一暗。
暗濁的<暖色>——鮮亮的<暖色>
第三種形式就是暗濁的暖色搭配鮮亮的暖色，這種搭配形式整體方向也是比較偏向統一協調的，不會有太大的問題，但也很難給人眼前一亮的視覺沖擊。
暗濁的<暖色>——鮮亮的<冷色>
最后一種就是暗濁的暖色搭配鮮亮的冷色，也就是我們這期教程中所講的<夜配色>，這種配色形式運用到平面設計領域，整體上還是可以保留它的氣質和風格的：神秘、充滿異域風情，當然我認為這些屬性并不是一成不變的，但是不變的是<夜配色>會給人不一樣的感覺，因為通常人們都不太會這么配色，所以我們什么情況下去使用<夜配色>，相信大家心理已經有答案了吧。接下來我們來嘗試幾個案例。
這是一個人物插畫，首先我們先將人物皮膚的顏色填充進來，然后是箱子。
接下來就是為人物的穿著填色，這時候我們就可以回想之前我們列舉的服裝搭配的例子了，我們可以將褲子的顏色填充一個大地色。
然后是上衣的顏色，如果是常規的人物插畫配色，通常情況下衣服都會選擇一個跟褲子顏色相統一和諧的顏色，但是如果我們想要一些不一樣的效果，這時就可以使用<夜配色>，將衣服的顏色填充一個天藍色，也是我們之前所講的碰撞色，因為面積相當。
當然，我們也可以將褲子填充水藍色，有些類似牛仔褲的顏色，衣服填充一個咖色，這也是一種<夜配色>。
或者我們也可以使用點綴色的形式，比如整體顏色是咖色，但是我們可以在衣領、袖口、褲腳這些小面積區域填充亮冷色。
再或者是鞋子的顏色也可以，或者再大膽一些給頭發染個色。
我們也可以嘗試一個網頁首屏，比如畫面中這種色調的圖片現在很流行，本身就很適合我們這期內容所講<夜配色>。
如果我們添加白色文字，雖然識別度很好，但是不會給人眼前一亮的感覺，會稍顯平庸。
這時我們就可以嘗試<夜配色>的搭配，當然文字色可以有選擇，都可以嘗試一下，甚至是偏暖一些的文字也不是說就不可以，我們總結出的規律要為我們所用，而不要被規律所限制，希望大家能明白這個道理，千萬不要理解的太死板。
最后我又嘗試了一個海報，海報的主題是“南非當代攝影展”，這個名字就會讓我腦海中浮現出異域風情，所以我認為可以使用夜配色。
先將圖片置入到版面當中，而這張圖片本身就是大地色調，因此也是適合<夜配色>搭配的。
所以上方的背景色我們就可以填充一個天藍色，現在整體上下色調對比就是<夜配色>的形式。
文字這里我們也可以不使用黑色，替換成大地色，下方的小字使用上方的藍色。但是做到這里我感覺畫面還缺少點什么，也就是整個版面的構圖和文字編排都很規矩和工整，這時候就需要有一些破壞這種工整的元素。
所以我就在右下方這里添加了一個手寫體的英文，為這個畫面增加一些靈動，當然顏色上也是吸取上方的藍色，形成呼應。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：研習社
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
