首頁

霧里看花?這些是你能用上的產(chǎn)品思維

前端達人

你也許會困惑,明明絞盡腦汁想出方案但為什么總是不被認可,為什么每當自己來講述設(shè)計方案時總是無從談起。在走出新手村之后,你是否也會思考,這一切背后是否有什么規(guī)律可循。今天咱們略微換一個視角,盤一盤這背后的細節(jié)。
——
 
我們作為設(shè)計師這個角色,對于設(shè)計思維并不陌生。而在實際的工作中只根據(jù)設(shè)計者常有的思維顯然是不太夠的,將視角聚焦在更上游,你是否在心里追問為什么會有這個需求呢?為什么要做這一改動呢?
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
在實際的工作場景中,設(shè)計思維和產(chǎn)品是為是相輔相成的。多方位的思考可以更好的理解需求把控設(shè)計方向,幫助你更好的發(fā)揮自己的作用,設(shè)計出更符合用戶需求和商業(yè)目標的優(yōu)秀產(chǎn)品。
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
1.1 產(chǎn)品思維是什么
產(chǎn)品的目的是為用戶解決問題滿足用戶的需求。而產(chǎn)品經(jīng)理需要權(quán)衡用戶場景和業(yè)務(wù)三者,發(fā)現(xiàn)問題分析問題解決問題,從而實現(xiàn)產(chǎn)品不斷的迭代和優(yōu)化。產(chǎn)品思維則是解決問題的思維方式。這里我根據(jù)之前的工作經(jīng)驗,我挑關(guān)鍵來總結(jié)了一下。
 
用戶導(dǎo)向
理解產(chǎn)品的核心用戶群體,這其中包含了解他們的需求偏好和行為習(xí)慣。為用戶提供好用方便的功能,提升用戶的產(chǎn)品滿意度。
數(shù)據(jù)驅(qū)動
利用產(chǎn)品數(shù)據(jù)分析方法和工具,分析用戶的實際實用情況,從中找到產(chǎn)品優(yōu)化的機會點,迭代產(chǎn)品方案。
市場分析
了解產(chǎn)品處在的市場競爭環(huán)境和行業(yè)發(fā)展趨勢,通過競品的特點和優(yōu)勢從而發(fā)現(xiàn)產(chǎn)品的差異化和創(chuàng)新點,獲得更好的市場競爭力。
用戶增長
面對存量市場,掌握用戶的增長的方法策略,通過產(chǎn)品設(shè)計和優(yōu)化實現(xiàn)用戶和業(yè)務(wù)的增長。
產(chǎn)品策略
 
了解產(chǎn)品策略的定制和執(zhí)行過程,包括但不限于產(chǎn)品定位,目標設(shè)置,功能規(guī)劃。制定產(chǎn)品的發(fā)展策略,對東產(chǎn)品的發(fā)展和優(yōu)化。
 
產(chǎn)品思維并不是照本宣科的工具,而是解決問題的切入點。不同的產(chǎn)品經(jīng)理對產(chǎn)品思維也有著不同的理解。如今高度競爭的環(huán)境下,只有為用戶創(chuàng)造獨特的價值才能在市場中脫穎而出。這也變相的提高了設(shè)計師的要求,能否快速準確的把握需求方向產(chǎn)出有效的設(shè)計方案顯得尤為重要。
 
1.2 產(chǎn)品思維可以幫助設(shè)計師做什么
更全面的思考問題
很多時候受限于視角,設(shè)計師往往會執(zhí)著于界面的視覺表現(xiàn)。耗費更多的精力試圖吸引更多的用戶注意力。而掌握一定的產(chǎn)品思維可以幫助設(shè)計師在設(shè)計環(huán)節(jié)更好的思考和參與。設(shè)計出更符合用戶和業(yè)務(wù)預(yù)期的界面,發(fā)現(xiàn)用戶真實的痛點從而有針對性的優(yōu)化設(shè)計方案。
舉個例子:設(shè)計師通過對復(fù)雜流程的簡化,視覺降噪等方案,聚焦核心功能,改善用戶的交互體驗和視覺感受。
優(yōu)化產(chǎn)品設(shè)計
通過對數(shù)據(jù)的研究,深入分析用戶行為和市場環(huán)境,發(fā)現(xiàn)產(chǎn)品的改進方向。通過數(shù)據(jù)分析和競品分析等手段,發(fā)現(xiàn)用戶需求與市場趨勢,為產(chǎn)品的功能設(shè)計和界面優(yōu)化提供有力的支持。
舉個例子:設(shè)計師根據(jù)用戶反饋的結(jié)果調(diào)整頁面的布局,優(yōu)化產(chǎn)品的交互設(shè)計,提高產(chǎn)品的易用性和吸引力。
提升團隊協(xié)作效率
具備產(chǎn)品思維,可以讓設(shè)計師和產(chǎn)品經(jīng)理無阻力溝通,通過與團隊的有效溝通和協(xié)作,共同推動產(chǎn)品的開發(fā)和優(yōu)化,提升團隊的協(xié)作效率和產(chǎn)品的質(zhì)量,達到事半功倍的效果。
舉個例子:和產(chǎn)品共同研討產(chǎn)品需求文檔,和開發(fā)團隊討論實現(xiàn)方案。確保項目的快速推進。
提升職業(yè)競爭力
 
具備產(chǎn)品思維的設(shè)計師在職場更具有競爭力,可以在不同的工作場景中承擔更多的責(zé)任和挑戰(zhàn),為團隊帶來更大的價值。擁有較好的產(chǎn)品思維可以幫助設(shè)計師保持對行業(yè)趨勢和技術(shù)發(fā)展的敏感性,在職場競爭中也更具優(yōu)勢。
 
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
現(xiàn)在讓我們立即切換到工作視角,怎樣在原有的工作流程中應(yīng)用好產(chǎn)品思維尤為關(guān)鍵。我們作為設(shè)計者,了解產(chǎn)品思維是為了更好的發(fā)散思考和推敲設(shè)計方案。授人以魚不如授人以漁,面對不同領(lǐng)域不同項目的紛繁需求,不妨多問幾個問題,在不斷的提問中找到答案。
2.1 明確設(shè)計目標
設(shè)計師需要明確項目背景推導(dǎo)出正確的設(shè)計目標。這要求設(shè)計師時刻需要將項目的目標和成果放在首位,之后的設(shè)計決策和行動都需要和這些目標保持一致。另外注重跨團隊協(xié)作,合理分類時間和設(shè)計資源,將會讓你更加游刃有余。切忌鉆牛角尖的閉門造車,務(wù)必確保項目按時交付。
 
自問自答:
 
  •  
    項目組都有誰,自己負責(zé)的哪些板塊,我的目的是什么?
  •  
    項目進展到了哪里,什么時候需要交付,什么時候需要上線?
  •  
    設(shè)計方案確定提交后怎樣快速和開發(fā)團隊對接實現(xiàn)落地,期間是否有什么問題?
 
2.2用戶研究
設(shè)計師進行用戶研究是為了更好的了解用戶的需求和行為,確保產(chǎn)品能夠滿足用戶的真實需求。用戶研究的方式很多,設(shè)計師可以根據(jù)團隊需要和項目時間排期進行合理的安排。
 
成功的用戶研究可以幫助設(shè)計師驗證設(shè)計假設(shè)的有效性,降低產(chǎn)品的開發(fā)風(fēng)險,減少不必要的時間和成本損耗。
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
自問自答:
 
  •  
    你的用戶是誰,使用場景是什么,需要為他們解決什么問題?
  •  
    你的用戶是如何使用這些功能的,這期間是否還有優(yōu)化的空間?
 
2.3 競品分析
競品分析是一種通過研究和對比競爭對手的產(chǎn)品和服務(wù)細節(jié),從中發(fā)現(xiàn)優(yōu)勢和劣勢,進而指導(dǎo)自身產(chǎn)品設(shè)計和優(yōu)化的方法。對于設(shè)計師來說,可以幫助我們更快的了解市場和行業(yè)的整體情況,為產(chǎn)品的設(shè)計提供給更多的參考依據(jù),另一方面可以快速發(fā)現(xiàn)自身產(chǎn)品的問題 找到優(yōu)化的方向。
 
需要注意的是,競品分析需要帶著目的進行,切勿走馬觀花泛泛而談。
自問自答
 
  •  
    競品分析的主題是什么,目標是解決當下的什么問題?
  •  
    你的競品是誰,他是怎么做的,反饋怎樣?
  •  
    我們可以借鑒什么,改善什么?
 
2.4埋點與數(shù)據(jù)回收
雖然設(shè)計師并不會直接參與埋點的設(shè)計,但為了更好的捕捉用戶的行為數(shù)據(jù),在設(shè)計中可以根據(jù)情況和優(yōu)先級將埋點納入設(shè)計考慮。
 
設(shè)計師和數(shù)據(jù)分析的溝通可以避免后期添加埋點時,出現(xiàn)和設(shè)計的不匹配的尷尬狀況。數(shù)據(jù)是驗證設(shè)計合理性的重要指標,很多時候設(shè)計師需要一個具體的成果反饋來復(fù)盤和指導(dǎo)之后的設(shè)計工作,多多留意最終呈現(xiàn)頁面效果和用戶反饋,并不是完成上線就可以將這些拋擲腦后了。
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
終極問題:
 
  •  
    如何證明這是個改版方案是合理的
 
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
3.1設(shè)計師的痛點
在實際的工作中,往往會由于不同的產(chǎn)品特點和團隊的配置,設(shè)計師不得不身兼多職面對更為復(fù)雜的情況。在開發(fā)流程中設(shè)計師始終處在“夾縫之中”的位置,而站在公司的視角設(shè)計師這一環(huán)節(jié)既不能直接產(chǎn)生收益也不能為整體降低成本。在進入職業(yè)生涯不久我開始思考為什么設(shè)計師處在這樣一個被動的處境呢,跑遍了前端后端數(shù)據(jù)和產(chǎn)品小組,“厚著臉皮”旁聽了各種冗雜的會議,以及多少次和前輩的交流中,我才慢慢發(fā)現(xiàn)了背后的“難言之隱”
 
  •  
    依賴需求方案
設(shè)計師通常是根據(jù)產(chǎn)品需求方案確定以后再參與工作的,設(shè)計師的工作很大程度上取決于產(chǎn)品需求的制定,因此單從設(shè)計視角來看有一定的滯后性。設(shè)計師接到產(chǎn)品需求后沒有辦法理解背后需要解決的核心問題,也很少思考和判斷需求的合理性,很容易和產(chǎn)品的最初想法產(chǎn)生偏差。
  •  
    反饋的延遲
設(shè)計師的工作成果也需要后期數(shù)據(jù)回收和復(fù)盤,而在實際的工作中,往往是一個需求結(jié)束后就需要急匆匆的應(yīng)對下一個需求。如果不去留意,很多時候作為設(shè)計師并不清楚最終交給開發(fā)的設(shè)計稿到底取得了什么樣的數(shù)據(jù)表現(xiàn),到底哪一個方案才能更好的實現(xiàn)目標。這也使得設(shè)計師很難進行經(jīng)驗總結(jié)。
  •  
    有限的時間和資源成本
當前市場競爭相對激烈,各方產(chǎn)品都需要在有限的時間中盡可能的搶占市場,而設(shè)計師需要在較短的時間中給出合理的設(shè)計方案,同時和產(chǎn)品以及開發(fā)團隊不斷進行細節(jié)的調(diào)整,這也使得設(shè)計師面對的壓力和挑戰(zhàn)更大。
 
 
較低的話語權(quán)、只多不少的需求使得本就焦慮內(nèi)卷的設(shè)計師處境更加雪上加霜。但是反過來想想,既然改變不了外在的環(huán)境,是否有辦法可以讓設(shè)計師們由內(nèi)而外的主動爭取些什么呢,我能想到的答案既是化被動為主動,盡可能的參與項目的推進,同時和上下游保持溝通,從而提升設(shè)計師在團隊中的存在感和參與感。而產(chǎn)品思維,是一塊剛剛好的墊腳石。
 
2.2產(chǎn)品思維的訓(xùn)練
講到如何提升產(chǎn)品思維,我總會想起一位前輩曾經(jīng)說過一切技巧惟手熟爾。你也許會說每天都在一成不變的做著公司的內(nèi)容實在提不起興趣,不過沒有關(guān)系。產(chǎn)品思維的提升并不需要過多一板一眼的訓(xùn)練。就像你走入繁華地段的商場,明明入駐著大差不差的品牌為什么客流量卻有著明顯的不同?是清晰明了的導(dǎo)視路牌?是更為合理的動線規(guī)劃?是明亮舒適的燈光統(tǒng)一的裝置風(fēng)格?用戶體驗是多元的,因此很多時候善于發(fā)現(xiàn)身邊各種各樣的體驗細節(jié),便可以擁有較好的產(chǎn)品感知。關(guān)于具體的方法,我有兩個方向可供大家參考。
 
  •  
    保持好奇心
打開手機想想看哪些應(yīng)用是高頻使用的,同樣的音樂類應(yīng)用你更習(xí)慣用哪個呢,在聯(lián)想一下身邊的朋友同事在聽音樂這件事情上更喜歡哪個應(yīng)用呢。橫向?qū)Ρ纫幌卤憧砂l(fā)現(xiàn),雖然是同類型的產(chǎn)品但在體驗細節(jié)上其實有很多門道可以考究。或者你是否留意過最新出現(xiàn)的產(chǎn)品和剛剛更新的功能?為什么要有這樣那樣的改版?用戶的反饋是怎樣的?
刨根問底多問一步為什么,而不是將自己禁錮在工作范圍中的一畝三分地,在不經(jīng)意之間,其實你已經(jīng)邁出了第一步。
  •  
    知識整理與沉淀
如果你還有多余一些的精力,不妨進行更深入的學(xué)習(xí)。不過好消息是,你想要學(xué)習(xí)的很多技術(shù)都可以在網(wǎng)絡(luò)上輕松找到。定期翻看設(shè)計平臺分享,相關(guān)短視頻頻道,公眾號文章,可以讓你探索更深入更廣闊的知識。不過先別急著開始,走馬觀花的閱讀往往并不會留下什么印記,試著整理這些碎片知識并總結(jié)收獲和心得。不要急于閱讀量收藏量而是爭取收獲更多自己的理解才尤為關(guān)鍵。
 
PS:關(guān)于這部分我之后也會有更多內(nèi)容的分享,多多關(guān)注嘍,謝謝各位啦。
 
3.3 啰啰嗦嗦寫在最后
在工作的第二年,我開始感到枯燥和厭煩。很多次面對頻繁緊急加塞的產(chǎn)品需求和一頭霧水的業(yè)務(wù)指標,我時常情緒激動的和當時的組長抱怨吐苦水,但由于人員緊張,并沒有什么實質(zhì)的改變。后來的一段日子我試著躲避,覺得做好分內(nèi)的任務(wù)就得了,每天出幾版方案到時候由著他們定奪吧。就這樣又過了一段時間,從前得枯燥和厭煩變本加厲,而我好像游離在各個環(huán)節(jié)之中,漸漸我的狀態(tài)變得很差,每天的工作毫無成就感可言,我開始認真的思考,究竟為什么會這樣。
事情的轉(zhuǎn)機出現(xiàn)在不久之后組里來了新的伙伴,一方面分擔了很多任務(wù)壓力,另一方面由于是剛剛畢業(yè)的職場新人,很多工作細節(jié)都需要幫他快速上手。也在這期間我發(fā)現(xiàn)了自己的浮躁和心急,我試著系統(tǒng)的總結(jié)過往的經(jīng)驗和思考,在這個過程中我開始和產(chǎn)品以及前端的伙伴更多的交流和請教。在找不到思路的時候試著切換到其他視角看待問題,去刨根問底無數(shù)個為什么,竟發(fā)現(xiàn)不知不覺中一切似乎都往積極的方向改變了。
或許我的想法與你也會有所偏頗,不過沒有關(guān)系,每當觀點不一致的時候也意味著我又發(fā)現(xiàn)了一個新的視角。不同的鏈接使得我們不斷的發(fā)現(xiàn)和探索,正如那句話說沒有人是一座孤島。
在這里我非常期待與更多的優(yōu)秀前輩交流,也很十分榮幸為后輩提供一些思路和幫助。
 
 


作者:Weiweiwei_Alita
鏈接:https://www.zcool.com.cn/article/ZMTYxOTYwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

優(yōu)秀的UI/UX設(shè)計師需要具備哪些技能?

資深UI設(shè)計者

設(shè)計既是一門學(xué)問,也是一門藝術(shù)。若想在設(shè)計這條道路上越走越遠,自然不能把自己定位為“畫圖的”和“搞藝術(shù)的”。需要不斷總結(jié)設(shè)計經(jīng)驗,知曉市場需求與用戶心理,保持學(xué)習(xí)和進步,鍛煉自己的設(shè)計思維,方能成才。另外,對我來講,最大的技能就是從失敗中學(xué)習(xí),從失敗中成長!

關(guān)于B端導(dǎo)航的選擇

資深UI設(shè)計者

對B端產(chǎn)品架構(gòu)而言,一個合理的導(dǎo)航設(shè)計對能夠解決,對團隊內(nèi)部:堆砌功能開發(fā)混亂;對外部用戶:找不到功能的問題,所以本篇主要總結(jié)一下如何正確選取合適的導(dǎo)航。

移動端導(dǎo)航設(shè)計,這里一定有你不知道的——細節(jié)系列第 01 篇

資深UI設(shè)計者

寫這篇講導(dǎo)航的,本質(zhì)上是希望提高自己界面設(shè)計的組件化意識,也是對近期自己看的關(guān)于導(dǎo)航方面文章的一個總結(jié)和輸出,

B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計

前端達人

歡迎小伙伴們收看《B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計》,本節(jié)內(nèi)容將帶領(lǐng)小伙伴們從零開始認識圖表,了解圖表在數(shù)據(jù)可視化中的作用,圖表的構(gòu)成,不同圖形可以可視化哪些類型的數(shù)據(jù)等等。希望大家看完后能對圖表有個相對完整的認知,在以后的工作中可以得心應(yīng)手。
一、什么是圖表?
大家對圖表一定不陌生,圖表(chart)就是一種通過圖形化的方式呈現(xiàn)和分析數(shù)據(jù)的工具,就是
將表格中的數(shù)據(jù)進行二次加工,將復(fù)雜的業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化為更加直觀的、有趨勢性、有時間線、空間性的圖形數(shù)據(jù)
,協(xié)助用戶根據(jù)數(shù)據(jù)變動而變更相關(guān)決策,最終以實現(xiàn)降本提效的目的。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
不同部門或者角色在公司中會需要各種類型的數(shù)據(jù)信息,以支持其業(yè)務(wù)運營和領(lǐng)導(dǎo)層決策需求。這些數(shù)據(jù)信息的準確性和及時性對于公司的發(fā)展和競爭優(yōu)勢至關(guān)重要。
產(chǎn)品部門關(guān)注的主要是用戶行為數(shù)據(jù)、收入數(shù)據(jù)、用戶量數(shù)據(jù);運營部門關(guān)注用戶活躍度數(shù)據(jù)、營銷效果數(shù)據(jù)和用戶反饋數(shù)據(jù);技術(shù)部門關(guān)注系統(tǒng)運行數(shù)據(jù)、技術(shù)指標數(shù)據(jù);用戶增長部門關(guān)注用戶生命周期數(shù)據(jù)等。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
二、一個優(yōu)秀圖表設(shè)計的標準是什么?
要看一個圖表是否優(yōu)秀,主要看它是否符合GLAD原則。GLAD原則是一個在數(shù)據(jù)可視化設(shè)計中常用來確保圖表質(zhì)量和有效性的方法論,它主要包括以下四個要素:
GLAD原則
GLAD原則
 
 
G原則:優(yōu)質(zhì)數(shù)據(jù)和洞察
G原則是指Good Data and Insight。G原則在探索性數(shù)據(jù)分析過程中著重提升圖表的商業(yè)價值,G原則的關(guān)鍵是“有價值的商業(yè)信息”,這一點就要求在準備數(shù)據(jù)的時候,應(yīng)該剔除那些商業(yè)分析價值不大的部分,而主要留下的是有高價值密度的信息。除了要求有高價值的信息之外,還需要有比較好的Insight,也就是能洞察數(shù)據(jù)中的高價值信息,并以較為通俗易懂的形式在圖表中表達出來。
優(yōu)化前
優(yōu)化前
 
例圖點評:雖然圖表本身看上去好像并沒什么問題,圖形選擇的也對、顏色搭配也得體,讀者也能理解圖本身要表達的意思。但是,
沒有商業(yè)價值,即我能看出茅臺拿鐵賣的最好,然后呢?這是哪個階段的數(shù)據(jù)?不知道。有沒有持續(xù)的表現(xiàn)數(shù)據(jù)?也不知道。
優(yōu)化后
優(yōu)化后
 
例圖點評:修改后,從數(shù)據(jù)中提煉出更有價值的商業(yè)數(shù)據(jù),在時間維度和空間維度都有體現(xiàn),簡潔明了的同時,也具有商業(yè)參考價值。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
L原則:更少的視覺噪音
L原則是指Less Noise。簡單說就是視覺降噪。
B端產(chǎn)品是高度商業(yè)化的產(chǎn)品,有用有效遠大于好看,
這要求B端設(shè)計師對藝術(shù)的追求要適可而止,商業(yè)數(shù)據(jù)分析不是追求藝術(shù)造詣,不是做一張海報去吸引人的眼球,而是提供商業(yè)價值并能快速讓人理解。過于酷炫、花哨、浮夸的修飾并不會給圖表帶來任何附加值,反而會增加讀者的閱讀負擔。
例圖1
例圖1
 
例圖點評:修改前,有些國家由于人口稀少,導(dǎo)致相關(guān)數(shù)據(jù)也非常小,難以在圖表中展示,造成整個圖表花里胡哨且復(fù)雜。修改后,把過小數(shù)據(jù)的選項折疊為“其他”,默認顯示主要幾個較大國家的數(shù)據(jù),當點擊“其他”圖例的時候,再顯示詳細的數(shù)據(jù)信息,使數(shù)據(jù)展示更具有側(cè)重點。
例圖2
例圖2
 
例圖點評:圖例2是dribbble上的圖表作品,左側(cè)是K線圖,右側(cè)是柱狀圖,它們的問題在于花里胡哨,卻缺少必要的刻度,形式大于內(nèi)容,過于追求好看的反面案例。
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
A原則:準確的表達
A原則是指Accurate Expression。通俗講,就是要根據(jù)不同的數(shù)據(jù)類型和不同的商業(yè)目的,采用正確的、適合的圖表類型,如表現(xiàn)占比就要用餅圖、百分比柱形圖,表現(xiàn)趨勢就要用折線圖、面積圖等,且要保證圖例的清晰性、刻度的準確性,避免模棱兩可的圖例和不準確的刻度。
錯誤例圖
錯誤例圖
 
正確例圖
正確例圖
 
例圖點評:圖例的本意是對比2023和2024年不同品牌手機的銷售額占比,是基于時間維度的對比圖,但錯誤圖例卻用了兩個餅圖,無法直觀的表現(xiàn)特定品牌在不同年度的銷售額占比的對比情況。正確的圖例則直接用了柱狀對比圖,一目了然。
 
D原則:明確的標記
D原則是指Dinstinct Mark。D原則的作用是幫助讀者加快理解信息的速度,它強調(diào)
突出重點
,需要把通過數(shù)據(jù)比較得到的差異部分、體現(xiàn)洞察信息的內(nèi)容利用明顯不同的顏色、形狀、文字標注等手段進行區(qū)別,讓讀者的視線聚焦到那里去。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
三、圖表的構(gòu)成要素
圖表是由:標題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素(如水位線、網(wǎng)格線、刻度值、提示信息等)構(gòu)成,每一個元素都有它存在的意義。不過在實際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內(nèi)容即可。
圖表的構(gòu)成
圖表的構(gòu)成
 
 
3.1標題
標題即圖表的名字,是圖表必不可少的元素。標題要求簡短明確通俗易懂,視覺上通常需要字體加粗。標題下面也可以跟一行副標題,用作對標題的補充說明。
  •  
    信息類標題:提供理解數(shù)據(jù)所需的所有信息,回答「何事」、「何地」、「何時」這三個問題
  •  
    描述類標題:突出圖表中顯示的主要數(shù)據(jù)模式或趨勢,描繪出圖表所要講述的故事
標題常用的位置有3種,左上、頂居中、底居中。
標題常用位置
標題常用位置
 
 
3.2圖例
3.2.1圖例的作用:
  •  
    區(qū)分不同類別數(shù)據(jù)的標志
  •  
    開啟/隱藏類別顯示
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
如果圖表中只有一個數(shù)據(jù)系列,則可以不用顯示圖例。
常見圖例展現(xiàn)形式
常見圖例展現(xiàn)形式
 
3.2.2圖例的位置
圖例的位置并沒有嚴格限制與要求,常見位置是上、下、右。
圖例的位置
圖例的位置
 
3.2.3圖例的顏色
在選擇圖例顏色時,不要用色相過于接近的顏色,否則會容易看混或看錯。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
要規(guī)范圖例顏色使用,一般分為兩種情況:
  •  
    常用的圖例顏色(顏色本身代表著行業(yè)中的某種含義),此類顏色需要是固定色值,無論哪個 chart 中,都是這個顏色;
  •  
    無特殊含義的圖例,可以規(guī)范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色,圖例整齊劃一。
值得一提的是,為了照顧色弱、色盲群體,有些產(chǎn)品會增加無障礙花紋來進行輔助識別,提高辨識度。這種設(shè)計很有溫度,畢竟設(shè)計以人為本。
Echarts的無障礙花紋樣式
Echarts的無障礙花紋樣式
 
 
3.2.4圖例的數(shù)量
一般來說圖例不要過多,基本要遵循米勒定律,即7±2法則。
米勒定律
米勒定律
 
所以,5個以內(nèi)是最佳圖例數(shù)量。如果遇到比較復(fù)雜的圖表,則可以進行嘗試進行圖例合并,如上面講GLAD原則的時候的L原則案例,除了多個圖表可以共用一組圖例(前提是圖例代表的意思一致),還可以把過于零碎的比重要的數(shù)據(jù)圖例合并為一個“其他”。
如果圖表中只有一個圖例的話,則可以不顯示。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
3.2.5圖例名稱的長度
根據(jù)不同使用場景,為了更好的展示效果,要給圖例名稱設(shè)置一個最大值,超過最大值后省略展示,鼠標hover時再顯示完整名稱。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
3.3坐標軸
3.3.1什么是坐標軸
坐標軸是定義域軸(叫什么)和值域軸(有多少)的統(tǒng)稱。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實意義,因此我們可以根據(jù)坐標軸對應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù),將坐標軸分成連續(xù)軸、時間軸、分類軸三大類。軸的類型不同在設(shè)計處理上也有差異。
坐標軸分類
坐標軸分類
 
 
3.3.2常見坐標軸組合方式
常見二維圖表坐標軸分為X軸(橫軸)和Y軸(縱軸),多用于表示趨勢、排名、比較的數(shù)據(jù)結(jié)構(gòu)。常見搭配是1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。
軸的常見組合方式
軸的常見組合方式
 
在三維圖表里,會多一個Z軸。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
3.3.3坐標軸容易被忽略的設(shè)計細節(jié)
  •  
    軸線一般只考慮是否顯示,例如柱狀圖、折線圖等,在有背景網(wǎng)格線的情況下,會隱藏 y 軸線,條形圖則是隱藏 x 軸線,以達到信息降噪,突出視覺重點的目的。
 
  •  
    軸刻度通常不顯示,只有在肉眼無法定位到某個標簽對應(yīng)的數(shù)據(jù)點時,會顯示刻度線,輔助用戶定位,比如折線圖,或抽樣顯示的柱狀圖。
 
  •  
    網(wǎng)格線用于定位數(shù)據(jù)點的值域范圍,跟隨值域軸的位置單向顯示,柱狀圖采用水平網(wǎng)格,條形圖采用垂直網(wǎng)格。樣式為虛實線的最多,斑馬線由于感知過強,一般不用。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
  •  
    軸標題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當可視化圖表標題、圖例、軸標簽已經(jīng)能充分表達數(shù)據(jù)含義,無需單獨顯示標題/單位,「如無必要,勿增實體」。
沒有必要就不要多此一舉
沒有必要就不要多此一舉
 
 
  •  
    連續(xù)軸/時間軸進行適當抽樣。連續(xù)軸/時間軸,是由一組前后包含同等差值的等差數(shù)列組成,缺少幾個數(shù)值也能明顯看出中間的對應(yīng)關(guān)系。當多個標簽在容器內(nèi)全顯示發(fā)生重疊,我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣:當多個標簽在 x 軸無法完全顯示,優(yōu)先保留首尾標簽,其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù),能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù),就需要「-1」轉(zhuǎn)成合數(shù)。
   舉個例子:9個標簽,間隔數(shù)是 8,能被 2 或4整除,即分成 2 等分和4等分。8個標簽,間隔數(shù)是        7,無法等分,需要在間隔數(shù)基礎(chǔ)上再「-1」,轉(zhuǎn)成合數(shù) 6 后再等分,此時最后一個標簽顯示在倒      數(shù)第二個數(shù)據(jù)點上。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
  •  
    分類軸是由幾組離散數(shù)據(jù)組成,獨立存在無緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則,隱藏一些標簽,用戶對圖表認知就會有困難,違背了數(shù)據(jù)可視化清晰、有效的設(shè)計原則。分類軸最佳處理方式是標簽旋轉(zhuǎn) 45 度,若 45 度仍顯示不下,繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
  •  
    分類軸標簽字段有長有短,長文本標簽直接旋轉(zhuǎn)不僅影響美觀,而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個,長文本標簽更適合水平展示,顯示不下省略即可;如果數(shù)據(jù)量比較多,就限定字符數(shù)后旋轉(zhuǎn)。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
3.4圖形數(shù)據(jù)
圖形數(shù)據(jù)是圖表中最為明顯的地方,即圖表的核心元素,如折線圖中的折線,柱狀圖中的柱,餅狀圖中的圓。
圖形數(shù)據(jù)的使用規(guī)則:
  •  
    邊界要清晰,不可虛化;
  •  
    多個數(shù)據(jù)同時顯示的時候,要保證每個數(shù)據(jù)都能清晰的看到,可以采用透明度來保證所有數(shù)據(jù)的顯示。
關(guān)于圖形的選擇,第四章會著重介紹。
 
3.5提示信息
提示信息用來標識出圖表中重要點的數(shù)據(jù)信息,相當于一個popover浮窗,鼠標指針在圖形中hover的地方通常就是該點的數(shù)據(jù)信息。需要注意的是:重要信息盡量簡化,只需要展示重要字段。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
3.6水位線
根據(jù)不同產(chǎn)品的使用場景,有的時候會用到閾值,當達到某個閾值后,就會觸發(fā)某種聯(lián)動效果。這個時候就需要有個水位線了,它起到警示的作用。
水位線的表現(xiàn)形式有兩種,實線和虛線,顏色的選取則取決于產(chǎn)品的警告級別。
水位線可以是一個,也可以是多個,視情況而定。
 
3.7圖表范圍
圖表范圍就是時間宏變量,用來切換數(shù)據(jù)的時間區(qū)間,如今天、本周(最近7天)、本月(最近30天)、本年等。
 
四、常見圖形分類及使用場景
圖形種類多種多樣,個個身懷絕技,而設(shè)計師則是作為挑選者。想要做好圖表設(shè)計,就需要對不同圖形有較為深入的了解,并對數(shù)據(jù)進行正確理解后,與之匹配正確的圖形,用可視化的方式將數(shù)據(jù)表現(xiàn)出來。
大多數(shù)人可能熟悉折線圖、餅狀圖、柱狀圖,但是對其他的圖形可能就不太了解了。本章節(jié)將帶大家了解更多的圖形和對應(yīng)的特性,以便更好的運用和設(shè)計。
常見的圖形可以分為七大類:
趨勢類、比較類、排名類、占比類、流程類、分布類、關(guān)系類。
 
4.1趨勢類圖形
趨勢類圖形指的是對一段時間內(nèi)數(shù)據(jù)的展示,如單個或多個分類數(shù)據(jù)之間的趨勢變化和比較。常見的趨勢圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。
4.1.1折線圖
折線圖(Line Chart)常用于顯示數(shù)據(jù)在連續(xù)時間上的趨勢變化。通過折線連接各數(shù)據(jù)點,突出數(shù)據(jù)的上升或下降趨勢,適合用于時間序列數(shù)據(jù)的展示。
折線圖構(gòu)成
折線圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.1.2柱狀圖
柱狀圖(Basic Column Chart)用于展示多個分類的數(shù)據(jù)變化和同類別各變量之間的比較。
柱狀圖構(gòu)成
柱狀圖構(gòu)成
 
如例圖,既能展示店鋪每天銷售額所對應(yīng)的數(shù)據(jù),也能反映出每天份銷售額的對比情況,并能通過圖形能夠快速了解銷售額最多和最少的日期。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
柱狀圖還有個進階用法,就是折柱混合圖。顧名思義,就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數(shù)據(jù)進行對比的情景下,如商場物品銷售數(shù)據(jù)增長或減少,商品價格走勢比較等,它可以非常直觀的展示數(shù)據(jù)與數(shù)據(jù)的比擬,這樣就能一眼查看到不同時間段的數(shù)據(jù)值,通過折線和柱狀的形式展現(xiàn)出來。
如例圖,通過柱狀圖能看出每個月的銷售數(shù)據(jù),而折線圖能體現(xiàn)出利潤率。當鼠標移入對應(yīng)位置就可以看到詳細數(shù)據(jù)。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
4.1.3堆積柱狀圖
堆積柱狀圖(Stacked Bar Chart)是柱狀圖的變種,可以展示兩個或多個數(shù)據(jù)的變化,以及數(shù)據(jù)之間的綜合比較情況。
堆積柱狀圖構(gòu)成
堆積柱狀圖構(gòu)成
 
如例圖所示,兩個店鋪每月總銷售額用堆積圖展示,在坐標軸上的每個品類都有兩個數(shù)據(jù),可以直觀的展示每個品類的數(shù)據(jù)總量。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.1.4面積圖
面積圖(Area Chart)是折線圖的變種。與折線圖不同的是,其變量數(shù)據(jù)和坐標軸之間有顏色田中,這樣可以更加突出數(shù)據(jù)的變化趨勢,更加直觀的體現(xiàn)量的變化。
面積圖構(gòu)成
面積圖構(gòu)成
 
需要注意的是,填充的顏色要有30%左右的透明度,這樣在展示多組數(shù)據(jù)的時候不會互相遮蓋彼此信息。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.1.5蠟燭圖
蠟燭圖也叫K線圖(K Chart),常用于股市或期貨市場(近期炒股的同學(xué)可能看到K線圖心里會一咯噔)。K線是圍繞開盤價、最高價、最低價、收盤價等反映市場趨勢和價格信息的。
蠟燭圖構(gòu)成
蠟燭圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.1.6瀑布圖
瀑布圖也叫階梯圖,顧名思義,瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現(xiàn)隨時間變化的數(shù)據(jù),但不同于堆積柱狀圖的是,瀑布圖能夠重點突出數(shù)據(jù)變化的結(jié)果,以強調(diào)多個特定數(shù)據(jù)之間的變化關(guān)系。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
4.2比較類圖形
比較類圖形主要用于兩個或兩個以上的類別數(shù)據(jù)進行比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。
4.2.1柱狀圖
這里的柱狀圖與前面講的柱狀圖的區(qū)別在于X軸是表現(xiàn)類別的,前面例圖的X軸是表現(xiàn)時間的。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.2.2分組柱狀圖
分組柱狀圖(Grouped Bar Chart)是柱狀圖的延伸,它可以在同一數(shù)軸上展示各個分類下不同分組的數(shù)據(jù)情況。如例圖為三家企業(yè)在產(chǎn)研部、設(shè)計部、商務(wù)部的人數(shù)對比情況,由此可以清晰的看出企業(yè)丙設(shè)計部人數(shù)最少,商務(wù)部人數(shù)最多的結(jié)論。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.2.3氣泡圖
氣泡圖(Bubble Chart)是是散點圖的變體,由卡迪爾坐標系(直角坐標系)和大小不一的圓組成,通常每一個氣泡都代表著一組三個維度的數(shù)據(jù)。其中兩個決定了氣泡在笛卡爾坐標系中的位置(即x,y軸上的值),另外一個則通過氣泡的大小來表示。
氣泡圖構(gòu)成
氣泡圖構(gòu)成
 
如例圖,x軸表示季度,y軸表示銷售額,氣泡大小代表產(chǎn)品所占全年銷售額百分比。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.2.4多條折線圖
多條折線圖除了可以表示數(shù)據(jù)隨時間的變化趨勢,還可以展示多組數(shù)據(jù)的對比情況。如例圖所示,圖為某app經(jīng)營情況的分析,在時間維度上對比下載量、注冊量、成交量三組數(shù)據(jù)及變化趨勢。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.2.5子彈圖
子彈圖(Bullet Graph)顧名思義,就是像子彈發(fā)射軌道的圖表。它的數(shù)據(jù)展示類似儀表盤,優(yōu)勢在于可以表達豐富的數(shù)據(jù)信息,且占用的空間相對較小。子彈圖的數(shù)據(jù)值是需要提前設(shè)計好的。
子彈圖構(gòu)成
子彈圖構(gòu)成
 
如例圖所示,差、良、優(yōu)和目標值、實際值都是作為動態(tài)數(shù)據(jù)呈現(xiàn)的。相較于餅圖,子彈圖可以更高效的傳遞信息。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
4.3排名類圖形
排名圖形可以為分類數(shù)據(jù)進行排排坐,它可以直觀的展示最大值和最小值。它的特點是“有序”,數(shù)值往往是從高到底依次排列,類似榜單。
4.3.1有序條形圖
有序條形圖主要用于展示各個分類的數(shù)據(jù)排名,它是最常用的排名圖形,因為是線性結(jié)構(gòu),對于微小數(shù)據(jù)間的對比會有很好的易讀性。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.3.2有序柱狀圖
有序柱狀圖和有序條形圖一樣,都可以表現(xiàn)數(shù)據(jù)的排名情況。區(qū)別在于一個是橫向?qū)Ρ葓D,一個是縱向?qū)Ρ葓D。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.4占比類圖形
占比圖形是大家最常見的圖形了,主要用于表現(xiàn)分類數(shù)據(jù)占整體的
百分比情況
。常見的圖形有餅圖、環(huán)形圖、堆積面積圖、矩形樹圖、旭日圖等。
4.4.1餅圖
餅圖(Pie Chart)是展示占比數(shù)據(jù)最最直觀的圖形了,它是通過餅塊的大小來直觀的表示分類的占比。但是餅圖也有一定局限性,即當占比數(shù)值比較接近或者占比分類比較多時,在視覺上就不太容易分辨各個類別的占比情況。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.4.2環(huán)形圖
環(huán)形圖(Donut Chart)的作用和餅圖一樣,但是環(huán)形圖的特點是中間區(qū)域是空的,所以視覺表現(xiàn)上比餅圖要弱一些,中間空心區(qū)域還可以用來放標題、圖標、數(shù)據(jù)等。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.4.3堆積面積圖
堆積面積圖(Stacked Area Chart)就是疊加數(shù)據(jù),不同顏色之間的數(shù)據(jù)并沒有疊加關(guān)系,它的整體色塊面積是數(shù)據(jù)總量,不同的分類數(shù)據(jù)可展示不同的占比情況。如例圖,不僅可以展示全球能源消耗總量,切換百分比模式還能展示不同國家消耗能源的占比情況。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.4.4矩形樹圖
矩形樹圖(Treemap)由馬里蘭大學(xué)教授Ben Shneiderman于上個世紀90年代提出,起初是為了找到一種有效了解磁盤空間使用情況的方法。 矩形樹圖適合展現(xiàn)具有層級關(guān)系的數(shù)據(jù),能夠直觀體現(xiàn)同級之間的比較。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
矩形樹圖的好處在于,相比起傳統(tǒng)的樹形結(jié)構(gòu)圖,矩形樹圖能更有效得利用空間,并且擁有展示占比的功能。矩形樹圖的缺點在于,當分類占比太小的時候文本會變得很難排布。相比起分叉樹圖,矩形樹圖的樹形數(shù)據(jù)結(jié)構(gòu)表達的不夠直觀、明確。
4.4.5旭日圖
旭日圖(Sunburst Chart)是一種現(xiàn)代餅圖,它超越傳統(tǒng)的餅圖和環(huán)圖,能表達清晰的層級和歸屬關(guān)系,以父子層次結(jié)構(gòu)來顯示數(shù)據(jù)構(gòu)成情況。旭日圖中,離遠點越近表示級別越高,相鄰兩層中,是內(nèi)層包含外層的關(guān)系。
如例圖,對醫(yī)院進行看病、掛號、取藥的流程,用旭日圖呈現(xiàn)。比如取藥是等號、排隊、拿藥的父級,其中等號占取藥的比重最大。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.5流程類圖形
流程類圖形用來顯示流程流轉(zhuǎn)和流程流量。一般流程都會呈現(xiàn)出多個環(huán)節(jié),每個環(huán)節(jié)之間會有相應(yīng)的流量關(guān)系,這類圖形可以很好的表示這些關(guān)系。常見的流程類圖形有漏斗圖和桑基圖。
4.5.1漏斗圖
漏斗圖(Funnel Chart)適用于業(yè)務(wù)流程
比較規(guī)范
、
周期長
、
環(huán)節(jié)多
流程單向分析,通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié),進而做出決策。漏斗圖用梯形面積表示某個環(huán)節(jié)業(yè)務(wù)量與上一個環(huán)節(jié)之間的差異。漏斗圖
從上到下
,有邏輯上的順序關(guān)系,表現(xiàn)了隨著業(yè)務(wù)流程的推進業(yè)務(wù)目標完成的情況。
漏斗圖總是開始于一個100%的數(shù)量,結(jié)束于一個較小的數(shù)量。在開始和結(jié)束之間由N個流程環(huán)節(jié)組成。每個環(huán)節(jié)用一個梯形來表示,梯形的上底寬度表示當前環(huán)節(jié)的輸入情況,梯形的下底寬度表示當前環(huán)節(jié)的輸出情況,上底與下底之間的差值形象的表現(xiàn)了在當前環(huán)節(jié)業(yè)務(wù)量的減小量,當前梯形邊的斜率表現(xiàn)了當前環(huán)節(jié)的減小率。 通過給不同的環(huán)節(jié)標以不同的顏色,可以幫助用戶更好的區(qū)分各個環(huán)節(jié)之間的差異。漏斗圖的所有環(huán)節(jié)的流量都應(yīng)該使用同一個度量。
漏斗圖構(gòu)成
漏斗圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.5.2桑基圖
?;鶊D (Sankey Diagram),是一種特定類型的流圖,用于描述一組值到另一組值的流向。因為首次使用它的人是一名叫Sankey的愛爾蘭土木工程師,所以就叫?;鶊D。
?;鶊D通常應(yīng)用于能源、材料成分、金融等數(shù)據(jù)的可視化分析。
桑基圖的構(gòu)成
?;鶊D的構(gòu)成
 
如例圖所示,可以清晰的看到,從搜索框直接搜索進入酒店詳情頁的流量是最大的。充分說明了搜索是剛需。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
 
4.6分布類圖形
分布圖形主要用于展示每個數(shù)值在數(shù)據(jù)集中出現(xiàn)的頻次和數(shù)量,常見類型有散點圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等
4.6.1散點圖
散點圖Scatter Chart,也叫 X-Y 圖,它將所有的數(shù)據(jù)以點的形式展現(xiàn)在笛卡爾坐標系上,以顯示變量之間的相互影響程度,點的位置由變量的數(shù)值決定。
例圖展示的是AB兩國男性的身高和體重數(shù)據(jù),通過散點圖中的數(shù)據(jù)點分布情況可看出,B國男性的身高遠大于A國。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
4.6.2氣泡圖
前面4.2.3里講過單維度數(shù)據(jù)的氣泡圖,這里是多維度的氣泡圖案例。如例圖所示,圖中展示了5個維度的數(shù)據(jù),氣泡的代表地區(qū)類別,氣泡的大小代表人口總數(shù),氣泡顏色代表國家類別,X軸代表人均國內(nèi)生產(chǎn)總值,Y軸代表人均壽命。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈:圖表設(shè)計
 
 
需要注意的是,氣泡圖的數(shù)據(jù)大小容量有限,氣泡太多會使圖表難以閱讀。但是可以通過增加一些交互行為彌補:隱藏一些信息,當鼠標點擊或者懸浮時顯示,或者添加一個選項用于重組或者過濾分組類別。另外,氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因為如果是基于半徑或者直徑的話,圓的大小不僅會呈指數(shù)級變化,而且還會導(dǎo)致視覺誤差。
 
4.6.3熱力圖
熱力圖就是使用冷色到暖色的不同顏色表示數(shù)據(jù)從大到小的權(quán)重,或用同色系顏色的深淺來表示數(shù)據(jù)的多少。熱力圖可以在坐標軸上呈現(xiàn)數(shù)據(jù)的大小分布,也可以在地圖或圖片上使用。
 
 
 


作者:MoeDesigner
鏈接:https://www.zcool.com.cn/article/ZMTYxOTU3Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

這些包裝技巧,簡單又出效果,不看一會就刪了!

前端達人

最近ui課學(xué)員開始做結(jié)課作業(yè),在給大家批作業(yè)的時候,發(fā)現(xiàn)很多同學(xué)對于包裝審美還是差一些,課上給大家實操了很多案例,今天給大家分享幾個,比如一組的這塊需求分析,包裝的就不太行:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
有點太隨意了,包括文字的排版,還有標題前面的兩個圓圈:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
如果我來包裝的話,一定要加點修飾,不能只是文字,比如加點圖標或者加點卡片,我可以先把卡片加上,這樣會更加有聚焦的感覺:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這時候我們可以想辦法加點顏色區(qū)分,比如用產(chǎn)品的主色:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
然后可以再給圓圈里面加點圖標,或者修飾元素,因為一組同學(xué)已經(jīng)有了一些質(zhì)感圖標的繪制,直接加上就可以了:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
然后再加上標題:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
我們來對比下第一版和優(yōu)化后的效果:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這里面其實差的僅僅只是一點點包裝審美和用心的態(tài)度,技法層面沒什么門檻,只有兩個質(zhì)感圖標,還都是一組同學(xué)自己畫的!
再舉一個1組同學(xué)的例子,他們在展示圖表的時候,效果是這樣的:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
如果面試官用手機看你的作品,能看清楚啥呀,所以如果你覺得自己的作品做的還不錯,一定要學(xué)會放大展示局部,比如我們這樣優(yōu)化一下:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
是不是比剛才更加簡潔大氣?
所以大家一定要記住,有優(yōu)秀的東西,一定要拿出來放大展示,我們看看3組同學(xué)的展示方式,就優(yōu)秀很多:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
再看5組的一個案例,這張圖:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
啥問題?是不是太空了,主次也不清晰,左上角的logo快比頁面還重了,所以我們一定要先解決畫面主次的問題,先把界面變大變飽滿:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這時候可以再優(yōu)化一下左側(cè)文案的排版,稍微有點空曠:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
如果覺得層次還是不夠,可以把底色融入一個黑圈:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這樣的話,把上面黑色的圖標頁,銜接在一起,就會好很多了:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這是不是比最開始那頁的包裝強太多了:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
所以大家在作品包裝展示的時候,一定要注意這些細節(jié),而且是非常細致的細節(jié),有時候真的就是差一點點,感覺就不一樣了!
希望今天分享的這幾個包裝小案例,大家可以有所啟發(fā),后面我會經(jīng)常改ui課同學(xué)的作業(yè),尤其是這種細節(jié)上的改動,讓大家更好的做出精致作品!
加油,兄弟們!
 

藍藍設(shè)計(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計、圖標定制用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)



作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyMDA3Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

UI&UE實用方法論 | 做交互體驗,你必須得知道的「多爾蒂閾值」

資深UI設(shè)計者

“當你使用計算機執(zhí)行一系列操作,每當你按下回車鍵,它都能在400毫秒內(nèi)給予你反饋,反饋時間還不到半秒,那么就可以讓你一直保持專注,效率也會飆升,你會完全沉迷進去。但反饋時間哪怕只是偏差到半秒鐘,你的注意力都容易被分散,你甚至?xí)肫鹕硐磦€碗、拿個遙控板、看場比賽...所以說400毫秒以下的反饋速度,是最佳節(jié)點。”

UI&UE實用方法論 | 做設(shè)計為什么需要“對比”:「馮·雷斯托夫效應(yīng)」

資深UI設(shè)計者

 

羅賓·威廉姆斯《寫給大家看的設(shè)計書》應(yīng)該是每一位設(shè)計人的入門必讀吧?雖然我不確定你有沒有讀過,但是“親密、對齊、重復(fù)、對比”這四個基本的視覺設(shè)計手法,你應(yīng)該多多少少有聽過了吧。

UI&UE實用方法論 | 「美即好用效應(yīng)」就是UI存在的價值嗎?

資深UI設(shè)計者

有研究表明,人們會自然地認為外表更漂亮的人擁有更加優(yōu)秀的品質(zhì)特質(zhì)。即我們對一個人的外表印象會影響對他品質(zhì)的感受和思考,心理學(xué)上將這種行為稱為「光環(huán)效應(yīng)」。

日歷

鏈接

個人資料

存檔