首頁(yè)

思維方法篇:培養(yǎng)專業(yè)的設(shè)計(jì)思維

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

“設(shè)計(jì)思維意識(shí)形態(tài)”強(qiáng)調(diào)親身實(shí)踐、堅(jiān)持以用戶為中心的方法解決問題,并達(dá)到設(shè)計(jì)創(chuàng)新,進(jìn)而實(shí)現(xiàn)差異化、增強(qiáng)競(jìng)爭(zhēng)力。這種 “親身實(shí)踐” 的、“以用戶為中心” 的方法由 “設(shè)計(jì)思維過程” 決定。

設(shè)計(jì)思維發(fā)展史

很多人都有一個(gè)誤解,認(rèn)為設(shè)計(jì)思維才剛剛興起。實(shí)際上,人們對(duì)設(shè)計(jì)思維的運(yùn)用已有年頭:紀(jì)念碑、橋梁、汽車、地鐵系統(tǒng)等都是其產(chǎn)物??v觀歷史,優(yōu)秀的設(shè)計(jì)師早通過以人為本(human-centric)的創(chuàng)造性設(shè)計(jì)過程來締造寓意深刻、富有感染力的設(shè)計(jì)方案。

早在20世紀(jì)初夫妻檔設(shè)計(jì)師 Charls 與 Ray Eames 在設(shè)計(jì) “埃姆斯椅” 之前就堅(jiān)持 “在做中學(xué)”,挖掘了椅子背后的大量需求和限制條件;這款椅子在70年后的今天,依然被投入生產(chǎn)制造。20世紀(jì)60年代,服裝設(shè)計(jì)師 Jean Muir 有 一個(gè)很著名的設(shè)計(jì)策略 “常識(shí)論(’common sense’ approach)”,非常重視自己設(shè)計(jì)出來的衣服在別人眼里是什么樣子。

這幾位設(shè)計(jì)師都是當(dāng)時(shí)的創(chuàng)新先驅(qū),他們的設(shè)計(jì)方法論也被看做是早期的設(shè)計(jì)思維——深入了解用戶的生活方式以及人們未被滿足的需求。

紐約州商業(yè)部標(biāo)識(shí) “ I LOVE NY ” 的設(shè)計(jì)師 Milton Glaser 也對(duì)設(shè)計(jì)思維做了很好的闡釋:

“ 我們一直都在思考,但并沒有真正領(lǐng)悟(什么是用戶真正需要的)……是關(guān)注(attention)這一行為本身讓我們真正了解了用戶的需求本質(zhì)、對(duì)用戶需求有了充分認(rèn)識(shí)?!?

盡管早期就有了用戶為中心的設(shè)計(jì)產(chǎn)物,但設(shè)計(jì)在商界的地位并不高。往往事后才被人想起,也僅僅是一種提高美感的潤(rùn)色手段。所以很多公司根本就沒有滿足顧客的真實(shí)需求。因此,有些公司將設(shè)計(jì)師的角色從受限的的產(chǎn)品開發(fā)后端前置到了產(chǎn)品設(shè)計(jì)之初。以人為本的設(shè)計(jì)方法(human-centric approach)也讓他們獨(dú)樹一幟:其設(shè)計(jì)產(chǎn)物不但滿足了用戶需求,也成功盈利。

大公司在落實(shí)以人為本前,需要一套標(biāo)準(zhǔn)化機(jī)制。設(shè)計(jì)思維(design thinking)就是一套用創(chuàng)造性設(shè)計(jì)流程解決傳統(tǒng)商業(yè)問題的規(guī)范化框架。

20世紀(jì) Roger Martin 和 IDEO 設(shè)計(jì)師 David Kelly & Tim Brown 共同提出了設(shè)計(jì)思維,將醞釀多年的設(shè)計(jì)方法和思想概括成了一個(gè)統(tǒng)一的說法。

設(shè)計(jì)思維是什么?——設(shè)計(jì)思維的定義

設(shè)計(jì)思維是一個(gè)流程化的意識(shí)形態(tài)(Design thinking is an ideology supported by an accompanying process.)。要徹底理解這一概念,先要弄清楚 “設(shè)計(jì)思維意識(shí)形態(tài)” 和 “設(shè)計(jì)思維過程” 。

定義:“設(shè)計(jì)思維意識(shí)形態(tài)”強(qiáng)調(diào)親身實(shí)踐、堅(jiān)持以用戶為中心的方法解決問題,并達(dá)到設(shè)計(jì)創(chuàng)新,進(jìn)而實(shí)現(xiàn)差異化、增強(qiáng)競(jìng)爭(zhēng)力。這種 “親身實(shí)踐” 的、“以用戶為中心” 的方法由 “設(shè)計(jì)思維過程” 決定。設(shè)計(jì)思維過程有6個(gè)鮮明的環(huán)節(jié),接下來會(huì)一一詳述。

設(shè)計(jì)思維如何進(jìn)行?——設(shè)計(jì)思維的過程

設(shè)計(jì)思維整體上遵循著

  1. 理解(understand)
  2. 探索(explore)
  3. 實(shí)現(xiàn)(materialize) 的環(huán)狀流程。
  4. 具體可細(xì)分為6個(gè)階段

(1)與用戶產(chǎn)生共鳴(empathize)

與用戶產(chǎn)生共鳴(即帶著同理心去理解用戶):開展用戶調(diào)研,了解用戶的行為、語(yǔ)言、思想、和感受。

假設(shè)你的目標(biāo)是改善新用戶的登機(jī)體驗(yàn)。那么在這一階段你需要和真實(shí)的用戶對(duì)話,觀察他們做了什么、如何進(jìn)行思考、以及想要什么,同時(shí)思考 “是什么激勵(lì)著用戶或阻礙著用戶”、“用戶在哪兒受到了挫折”。其目的是收集盡可能多的信息,力求與用戶產(chǎn)生共鳴、真正理解他們。

(2)定義問題(define)

定義問題:根據(jù)調(diào)研結(jié)果,觀察用戶有哪些痛點(diǎn)(pain point)。明確用戶需求后,羅列出優(yōu)化點(diǎn)。

該階段以上一階段為基礎(chǔ),幫助我們進(jìn)一步了解用戶。還以登機(jī)體驗(yàn)為例,根據(jù)之前的調(diào)研結(jié)果,我們可以總結(jié)出乘客當(dāng)前的體驗(yàn)概況,思考不同乘客之間是否存在相同痛點(diǎn),找出乘客未被滿足的需求。

(3)形成概念(ideate)

形成概念:針對(duì)用戶未被滿足的需求,腦暴一系列瘋狂的想法和創(chuàng)意。參與者可以自由發(fā)揮、天馬行空一番;這一階段,點(diǎn)子的數(shù)量重于質(zhì)量。

最好整個(gè)團(tuán)隊(duì)一起參與,簡(jiǎn)要描述下各個(gè)想法。然后成員之間觀念互換,將好的點(diǎn)子相互融合、修正,形成一套全員認(rèn)可的解決方案。

(4)繪制原型(prototype)

繪制原型:將概念方案制作成真實(shí)、可感觸的原型。其目的是分辨方案中哪些內(nèi)容有效,哪些無效。同時(shí),依據(jù)原型的反饋信息權(quán)衡我們的解決方案應(yīng)該更具影響力還是可行性。

如果你的任務(wù)是設(shè)計(jì)一個(gè)全新的登錄注冊(cè)頁(yè),繪出線框圖,在團(tuán)隊(duì)內(nèi)討論、匯總建議。然后根據(jù)建議快速調(diào)整方案,換一組人進(jìn)行再次討論。

(5)測(cè)試(test)

測(cè)試:帶著你的原型走進(jìn)用戶、獲取用戶的反饋。同時(shí)思考 “這個(gè)設(shè)計(jì)方案有沒有解決用戶痛點(diǎn)、滿足用戶需求?有沒有讓用戶感覺更好、思路更清晰、任務(wù)執(zhí)行更順暢?”

邀請(qǐng)真實(shí)用戶試體驗(yàn)產(chǎn)品原型,驗(yàn)證設(shè)計(jì)目標(biāo)。乘客對(duì)登機(jī)體驗(yàn)的抱怨有沒有減少?新做的登錄注冊(cè)頁(yè)有沒有增加用戶的時(shí)間和金錢成本?為了實(shí)現(xiàn)最終的設(shè)計(jì)愿景,多測(cè)試幾遍吧。

(6)實(shí)施(implement)

實(shí)施:將你的設(shè)計(jì)愿景開發(fā)上線,確保它能為最終用戶帶來生活品質(zhì)的真正改善。

這是設(shè)計(jì)思維最重要的一環(huán),也最容易被忽略。Don Norman 說過:“我們需要做更多的設(shè)計(jì)。” 設(shè)計(jì)思維不是變戲法,空有理論而不實(shí)踐是沒用的。同時(shí)記住 Milton Glaser 的教誨:“創(chuàng)新設(shè)計(jì)是最難的。”

因?yàn)?‘創(chuàng)新’ 是一個(gè)動(dòng)詞,要花費(fèi)很長(zhǎng)的時(shí)間。我們要先在頭腦里產(chǎn)生一個(gè)點(diǎn)子,然后將它實(shí)現(xiàn)。通常這是一個(gè)漫長(zhǎng)且艱難的過程,但如果你掌握到了其中的真諦,你的工作就被賦予了價(jià)值和意義。

為什么要遵循設(shè)計(jì)思維?——設(shè)計(jì)思維的優(yōu)勢(shì)

為什么要學(xué)習(xí)和使用設(shè)計(jì)思維?其理由很多。通過歸納,我們發(fā)現(xiàn)設(shè)計(jì)思維的優(yōu)勢(shì)在于:

  1. 從用戶數(shù)據(jù)著手,堅(jiān)持以用戶為中心;注重真實(shí)非虛擬的用戶需求;并在真實(shí)的用戶群中進(jìn)行測(cè)試。
  2. 發(fā)揮集體專家的智慧,建立集體語(yǔ)言,尊重每位參與者的建議。
  3. 運(yùn)用多種方法解決同一問題,鼓勵(lì)創(chuàng)新。

Jakob Nielsen 告訴我們:“如果一個(gè)偉大的設(shè)計(jì)解決的是一個(gè)錯(cuò)誤的問題,它必將失敗?!?

靈活性——設(shè)計(jì)思維可適時(shí)調(diào)整

初次接觸設(shè)計(jì)思維,你會(huì)覺得它復(fù)雜深?yuàn)W。但要告訴大家的是,設(shè)計(jì)思維的6個(gè)階段不必生搬硬套,非按順序操作。我們可以把它當(dāng)作指導(dǎo)思想,在需要時(shí)運(yùn)用即可。要學(xué)會(huì)做主廚,而不是打雜的廚子:產(chǎn)品設(shè)計(jì)流程就像烹飪食譜,完全可以根據(jù)實(shí)際情況稍作調(diào)整。

這6個(gè)階段是可迭代、可循環(huán)的,與純線型設(shè)計(jì)過程(詳見圖2)完全相反。在完成最初的原型后,我們常常會(huì)再次回到 “理解” 的前兩個(gè)階段,與用戶進(jìn)一步產(chǎn)生共鳴、深入定義問題。只有產(chǎn)出好的點(diǎn)子、繪制出完整的原型,你才能真正表達(dá)出你的設(shè)計(jì)理念,也能在設(shè)計(jì)之初就準(zhǔn)確評(píng)估方案的有效性。

基于這一點(diǎn),再次進(jìn)行用戶調(diào)研很有價(jià)值。在決策前理清:用戶的哪些信息未被了解到,原型中的哪些用例未被調(diào)研到。

每一個(gè)階段也皆可重復(fù)操作。我們常常會(huì)在其中一個(gè)環(huán)節(jié)里多次反復(fù),達(dá)到這一階段的目的再繼續(xù)下一個(gè)階段。

舉例說明:由于不同的參與者背景不同、專長(zhǎng)各異,“定義問題”時(shí)會(huì)產(chǎn)生很多解決方法。這一階段需要全部參與者集思廣益,花費(fèi)的時(shí)間普遍較長(zhǎng)。如果大家無法達(dá)成一致,就有必要多重復(fù)幾次 “定義問題” 。每個(gè)階段的產(chǎn)出都應(yīng)當(dāng)足夠合理,以作為余下階段的指導(dǎo)原則,同時(shí)不要偏離我們的關(guān)注點(diǎn)。

可擴(kuò)展性——設(shè)計(jì)思維的“雄心壯志”

設(shè)計(jì)思維方便、無障礙的本質(zhì)賦予了其很強(qiáng)的擴(kuò)展性。過去那些不肯轉(zhuǎn)變觀念的公司,現(xiàn)在也有了自己的設(shè)計(jì)指導(dǎo)規(guī)范。設(shè)計(jì)思維不僅適用于傳統(tǒng)的產(chǎn)品設(shè)計(jì)等領(lǐng)域,也適用于社會(huì)、環(huán)境和經(jīng)濟(jì)領(lǐng)域等的問題解決。

設(shè)計(jì)思維簡(jiǎn)單易懂,可被廣泛應(yīng)用;但如果“問題”定義得不準(zhǔn)確,整個(gè)設(shè)計(jì)過程將會(huì)十分棘手。設(shè)計(jì)思維既可以用于優(yōu)化小的功能點(diǎn),如搜索功能;也可以用來制定重大變革性方案,如為教師設(shè)計(jì)職業(yè)發(fā)展階梯,以留住更多教育人才。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

為什么如今很多產(chǎn)品和服務(wù)給人支離破碎的感覺?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

不知道為什么,聰明的人常常會(huì)做出愚蠢的決定。我在之前的《The Curse of Knowledge Bias》文章當(dāng)中,曾經(jīng)提到過這個(gè)問題。很多人會(huì)因?yàn)橹八麄兯莆盏纳踔烈揽康闹R(shí)而產(chǎn)生偏見,很多時(shí)候會(huì)傾向基于一個(gè)特定的指標(biāo)來決定。

很多時(shí)候,我們忘記了生活中有很多事情是易于衡量的,而很多重要的事情,并不一定如此。兩者之間的關(guān)聯(lián)性并沒有那么強(qiáng)。

在數(shù)字設(shè)計(jì)領(lǐng)域,我們傾向于探索事情的擴(kuò)展性和性,這是數(shù)字設(shè)計(jì)本身的優(yōu)勢(shì),但是這種思維方式也對(duì)商業(yè)世界產(chǎn)生了重大的影響。為什么?主要的原因在于商業(yè)本身要求賺到更多的錢,而快速和可拓展的模式怎么看都非常貼合商業(yè)的需求。相應(yīng)的,大家在可拓展式的模式下,就不再追求高質(zhì)量,在意的更多的是「能否擴(kuò)大規(guī)?!?。「它是可規(guī)?;膯??不行?好的,下一個(gè)?!?

你看,數(shù)字領(lǐng)域的東西就是數(shù)字領(lǐng)域的東西。它在算法指標(biāo)上,在自己的模式下且有效地運(yùn)作著,但是這種而機(jī)械化的模式通常是在自己的模式下才有效的。希望它與人類的現(xiàn)實(shí)無縫銜接并且自恰地運(yùn)行,看似可行,實(shí)則問題多多。

大家對(duì)于創(chuàng)造更快、效率更高的機(jī)器都有著持續(xù)且狂熱的情緒,在某些情況下也許是進(jìn)步,但是在更多的時(shí)候,常常會(huì)帶來不良的后果。這一切都始于公司想要快速構(gòu)建產(chǎn)品,或者加速規(guī)模化的做法?!杆邆鋽U(kuò)展性嗎?」「我們要始終保持!」這些語(yǔ)句成為了鐵律,并且在鐵律之下,所有人都期望得到不同的結(jié)果。清醒下來想想,這種粗暴且不顧一切的做法,就像用錘子解決生活中所有的問題。

我們專注于技術(shù)本身,這使得我們和人性漸行漸遠(yuǎn)。——Rory Sutherland

將問題肢解成為更小的部分,然后交由不同的部門,分開解決,最后合并到一起。

這種策略主要是從科技公司借用過來的,更準(zhǔn)確的說是從數(shù)字開發(fā)領(lǐng)域?qū)W習(xí)過來的,他們使用這樣的方法來改進(jìn)產(chǎn)品的算法。你將一個(gè)大問題分解成為更小的塊,將它交由不同的團(tuán)隊(duì),這樣大家在同期進(jìn)行的情況下,可以提升進(jìn)度,在一天結(jié)束的時(shí)候,大家再將各自完成的部分拼接到一起,粘合成為一個(gè)產(chǎn)品。很多問題,很多產(chǎn)品以這樣的方式更快地完成了。

每個(gè)公司都在這么做,似乎是有效的,我們?yōu)槭裁床贿@樣呢?

我同意,這確實(shí)有用。但是這里存在一個(gè)巨大的問題,就是解決問題的語(yǔ)境和背景。你正在做的事情很大程度上和需要解決的問題脫節(jié)了,很多人就像帶著眼罩的馬匹,跑得再快也是盲跑。

在這種局面下,所有人都只會(huì)局限于眼前的一小塊的工作內(nèi)容,而周遭的環(huán)境和內(nèi)容不會(huì)去注意也沒有精力去關(guān)注。接下來就會(huì)發(fā)生上圖所示的情況,然后你需要削減內(nèi)容來確保內(nèi)容具備可擴(kuò)展性。而在上圖的案例當(dāng)中,付出的代價(jià)是互動(dòng)性。

很多問題其實(shí)和「數(shù)獨(dú)」一樣

也許你玩過數(shù)獨(dú),這是一種基于數(shù)學(xué)邏輯的有趣的數(shù)字游戲,它需要你綜合考慮填寫的數(shù)字,確保每行每列上的數(shù)字是完整自恰的。

通常,數(shù)獨(dú)游戲會(huì)使用一個(gè)大的九宮格,每一格當(dāng)中又包含一個(gè)小的九宮格,總體上呈現(xiàn)出來的是一個(gè)9×9的大網(wǎng)格。游戲會(huì)事先給你一部分?jǐn)?shù)字,你需要填寫剩下的一部分,確保每行每列當(dāng)中都有數(shù)字1~9,而每個(gè)小的九宮格也要包含數(shù)字1~9,而每個(gè)數(shù)獨(dú)拼圖都會(huì)有一個(gè)唯一的答案。

這個(gè)游戲有趣的地方在于,你沒有辦法將數(shù)獨(dú)整個(gè)拼圖的一部分交給別人來做。因?yàn)橹挥锌v觀整個(gè)數(shù)獨(dú)布局的人才能推算出唯一的答案,分給別人分開做最后再拼到一起,是解決不了的。我們實(shí)際所設(shè)計(jì)的產(chǎn)品基本上都不是簡(jiǎn)單線性的,在面對(duì)實(shí)際問題的時(shí)候,很大程度上和數(shù)獨(dú)是相同的,要從更宏觀更系統(tǒng)的層面上來看待問題,而不是將點(diǎn)贊按鈕的重設(shè)計(jì)完全交由一個(gè)部門全權(quán)負(fù)責(zé)。

將一個(gè)問題劃分為更小的部分,并且將不同的部分劃歸給不同的部門來思考和解決是一個(gè)「很好的辦法」。這就像你在醫(yī)院外科接受治療的時(shí)候,身體被切成10個(gè)部分,交由10個(gè)不同的外科醫(yī)生來給你治療,最后再縫合到一起。

錯(cuò)誤語(yǔ)境下的「正確行為」

這里所存在的問題不僅僅是在效率上,而且還在于方法本身。在這個(gè)事情當(dāng)中,很多行為的方式是正確的,但是這些方式被用錯(cuò)了地方,用錯(cuò)了語(yǔ)境。

這就像一個(gè)傳教士在一個(gè)前不著村后不著店的脫衣舞俱樂部去傳教一樣。傳教本身沒問題,但是這個(gè)地方真的不合適。

我們將問題劃分為小塊是沒有問題的,但是這并不意味著在產(chǎn)品流程中一直就做這么簡(jiǎn)單的切分。有人說這樣做大型的項(xiàng)目是很合理的,我同意。很多時(shí)候,問題的解決方案有很多,而且不同的解決方案也并非是非此即彼的,不過大家往往會(huì)選擇一種而放棄另外一些。如果只是依靠純粹的理性和直接的邏輯來解決問題,那么世界在很大程度上不會(huì)有真正意義上的進(jìn)步。

一些超級(jí)理性的高管讓產(chǎn)品走向了超級(jí)無聊的方向?!狦ary Hamel

如果這個(gè)方法不對(duì),那么我們?yōu)槭裁催€要繼續(xù)這么做?

首先,必須承認(rèn),這種方法是有效的,只不過這種方法下產(chǎn)出的產(chǎn)品是破碎的。并且,在很多時(shí)候,大家并不急于嘗試更有創(chuàng)意的解決方案。

其次,個(gè)別機(jī)構(gòu),或者更具體地說是不少人,是在純粹的理性驅(qū)動(dòng)行為的環(huán)境下茁壯成長(zhǎng)起來的。在多人團(tuán)隊(duì)當(dāng)中,在各種委員會(huì)當(dāng)中,在你所在的任何團(tuán)體當(dāng)中,大家都需要用合理的邏輯和理由來解釋各自的行為。因此,組織機(jī)構(gòu)在解決問題的時(shí)候,傾向于尋找邏輯最優(yōu)解這樣的東西。人們也更加傾向于將組織機(jī)構(gòu)的運(yùn)作方式和機(jī)器的邏輯等同起來。

做一些理性或者合乎邏輯的事情,就永遠(yuǎn)不會(huì)被解雇。但是你可能會(huì)因?yàn)樽鰟?chuàng)意而被解雇?!猂ory Sutherland

獵殺松鼠的故事

很多時(shí)候案例更有說服力。在18世紀(jì),法國(guó)松鼠成災(zāi),政府專門撥款想解決這個(gè)問題。如果有人獵殺了松鼠,并且將尾巴上交上去,就能夠根據(jù)數(shù)量獲取相應(yīng)的獎(jiǎng)勵(lì)。這樣來看,整體上是一個(gè)合乎邏輯的事情吧?可是,實(shí)際的情況是,法國(guó)政府所發(fā)放的獎(jiǎng)勵(lì)逐年上漲,可是松鼠的問題從來都沒有得到緩解。事實(shí)上,大家發(fā)現(xiàn)這個(gè)情況還變得更糟了。政府慢慢才意識(shí)到,不少民眾開始豢養(yǎng)松鼠來?yè)Q取獎(jiǎng)勵(lì),很多上繳來的松鼠并非是獵殺的。這是一個(gè)典型的不恰當(dāng)獎(jiǎng)勵(lì)的案例。

人和機(jī)器的思維方式是不同的,對(duì)于機(jī)器而言,1+1=2,但是對(duì)于人而言,這個(gè)邏輯有可能是1+1=蘋果。我們不僅會(huì)陷入有缺陷的思維方式當(dāng)中,這些不恰當(dāng)?shù)姆绞缴踔習(xí)l(fā)錯(cuò)誤的行為。

脫離語(yǔ)境的現(xiàn)狀

其實(shí),我最擔(dān)心的是,我們按照機(jī)械直接的邏輯來解決問題,會(huì)引發(fā)不良的行為和不好的結(jié)果。很多解決問題的方法,缺少很重要的一塊內(nèi)容:那就是將人們的思考、決策的運(yùn)作機(jī)制納入到體系當(dāng)中。當(dāng)一個(gè)任務(wù)被分配給不同的人之后,每個(gè)人面對(duì)任務(wù)的時(shí)候都是管中窺豹,盲人摸象,看不到全局,相應(yīng)的,每個(gè)人所面對(duì)的指標(biāo)也都是瑣碎的,并且有可能只會(huì)影響到當(dāng)前微不足道的范疇。

由于產(chǎn)業(yè)和產(chǎn)業(yè)之間的天然壁壘,很多公司必須將特定的產(chǎn)品、模塊或者服務(wù)外包給第三方,以降低成本,并且完善產(chǎn)品或者產(chǎn)業(yè)鏈。但是這種局面下,公司也沒有辦法在這些外包出去的領(lǐng)域上投入足夠多的時(shí)間,自然也談不上創(chuàng)新。很多品牌在多年以來都沒有辦法帶來有意義的創(chuàng)新。完全分散的任務(wù)和小團(tuán)隊(duì),最終受困于自己手頭的一些小事情,比如來回調(diào)整點(diǎn)贊按鈕的樣式。

對(duì)于無用指標(biāo)的奇怪癡迷

現(xiàn)代人對(duì)于消費(fèi)電子產(chǎn)品非常癡迷,但是如果你仔細(xì)審視這個(gè)事情,會(huì)發(fā)現(xiàn)絕大多數(shù)人都受困于一些基本上沒有什么意義的指標(biāo)上。

早在1759年,亞當(dāng)史密斯就在他的《道德情操論》當(dāng)中,提到過人類對(duì)于一些無意義指標(biāo)的沉迷的事情。

史密斯發(fā)現(xiàn)那些小工具愛好者都會(huì)非常沉迷「參數(shù)」,我們以業(yè)余攝影師來舉例,你很少看到他們拍攝出真正讓人覺得眼前一亮的照片,但是他們非常沉迷于畫幅、像素、iSO范圍,快門延遲等參數(shù),對(duì)于某些廠牌的鏡頭參數(shù)或者相機(jī)指標(biāo)非常之了解。這種狀況在汽車、電腦、手機(jī)等領(lǐng)域的業(yè)余愛好者當(dāng)中,也是相當(dāng)普遍的存在。我們需要更好的技術(shù)支持,但是我們所探討的指標(biāo),則往往意義不大。

Rory Sutherland 在他的一篇文章中分享了這樣一個(gè)案例:

有一塊機(jī)械表,平均一天時(shí)間內(nèi)會(huì)慢2分鐘左右,它的主人糾結(jié)于這一點(diǎn),將它賣了,然后花了接近10倍的價(jià)格買了另外一塊手表,新表大概半個(gè)月才會(huì)慢1秒。然而對(duì)于這個(gè)人而言,手表的功能僅僅是提醒他不會(huì)錯(cuò)過大的事情,大概知道當(dāng)前時(shí)間,避免遭遇其他的不便。但是,手表本身準(zhǔn)時(shí)不準(zhǔn)時(shí)的事情讓他糾結(jié)和焦慮了很久,相反他對(duì)于時(shí)間倒是不那么焦慮。他感興趣的僅僅是手表的準(zhǔn)時(shí),是它本身的完美與否,而非時(shí)間本身。

「參數(shù)沉迷」是思維慣性

對(duì)于參數(shù)的沉迷,在關(guān)鍵的事情上可能會(huì)帶來不好的影響??墒?,即便是無法量化的「參數(shù)」,有的時(shí)候也會(huì)帶來壞決策。Rory Sutherland 為此還分享過另外一個(gè)事情。

許多美國(guó)公司將客服部門的人員視作為公司賬面上不應(yīng)存在的「花銷」,這也使得他們紛紛將自己的客服部門外包給印度。相應(yīng)的,很多美國(guó)用戶給隔壁樓的公司打客服電話的時(shí)候,會(huì)轉(zhuǎn)接到印度,在一個(gè)口音不明的接線員的服務(wù)下,艱難地溝通,并且不一定能解決問題。

奧美是 Rory 的客戶之一,他有一次打電話到奧美的呼叫中心,他們的客服給人體驗(yàn)非常棒,樂于助人,知識(shí)淵博,充滿魅力。所以 Rory 后來咨詢奧美的人事,為什么他們的電話接線員能這么優(yōu)秀。結(jié)果奧美的人事笑著回復(fù)他:「其實(shí),我們給客服人員的回饋已經(jīng)超出他們?cè)镜膬r(jià)值?!?

原來,對(duì)于做客服這一行的人而言,在美國(guó)本土想要找到足夠好的工作,可能需要去很遠(yuǎn)的地方,才能找到工資足夠可觀的職位。而奧美的工作地點(diǎn)本身在某個(gè)大城市不遠(yuǎn)的地方,他們的客服來奧美工作根本不需要花費(fèi)太多時(shí)間在通勤上。另一方面,他們的客服人員大多在公司待了幾十年之久,這使得他們對(duì)于工作內(nèi)容非常之精通。這樣一來,在這些客服人員身上投注的時(shí)間、精力甚至花銷,都不是成本,相反,這些客服人員成了公司成功的基石。

固然,將公司的客服部門轉(zhuǎn)移到人力成本極為低廉的國(guó)家,比如印度,能夠?yàn)楣竟?jié)省很大一筆開支,但是實(shí)際上,這件事情給公司本身的業(yè)務(wù)所帶來的負(fù)面影響也是持續(xù)的。

最終,這還是一個(gè)視角上的問題

Andre Malraux 在他的小說《Hope》當(dāng)中,講述了一系列關(guān)于西班牙內(nèi)戰(zhàn)期間的故事。書中有一個(gè)插曲,一位農(nóng)民來到共和軍,告知他們法西斯分子在樹林中建造了一個(gè)秘密機(jī)場(chǎng),不過農(nóng)民自己是個(gè)文盲,他看不懂地圖,但是他愿意做導(dǎo)游,幫共和軍指路,去炸掉這個(gè)秘密機(jī)場(chǎng)。于是,他坐上了一架轟炸機(jī),隨著飛行員一同去尋找秘密機(jī)場(chǎng)。

農(nóng)民熟知方圓幾十公里內(nèi)所有的村莊,山脈,河流,了解土地,也熟知莊稼的種植和生長(zhǎng)。但是當(dāng)他坐上飛機(jī),把眼睛壓在玻璃上盡力往下看的時(shí)候,他分辨不出來他生活過28年的村莊,不認(rèn)識(shí)他每天走過的街道。Malrzux 在書中寫道:「如果有人會(huì)因?yàn)檎也坏綎|西而死的話,那么這個(gè)農(nóng)民肯定已經(jīng)死過很多次了?!?

飛行員已經(jīng)把飛機(jī)的高度壓到30米了,幾乎貼地飛行,他試圖讓農(nóng)民盡力按照他習(xí)慣的視角去看待地面的一切。森林中的樹梢?guī)缀跆蚴弥w機(jī)的底部,農(nóng)民的視野中的山林開始接近他在林間開車時(shí)候的視野,他最終找到了那個(gè)隱藏的機(jī)場(chǎng)。

一旦你以一個(gè)視角工作了30年,你會(huì)比其他人更難看到事物本身的另外一面。

更全面的視角

我知道,糟糕的企業(yè)文化,激烈的辦公室政治,錯(cuò)漏百出的產(chǎn)品,并不是這種產(chǎn)品開發(fā)模式和思維方式所造成的,但是它在整個(gè)體系當(dāng)中扮演了極為重要的角色,放大了問題。對(duì)于和可拓展性的癡迷,注定會(huì)在更長(zhǎng)的時(shí)間尺度上,創(chuàng)造一個(gè)糟糕的產(chǎn)品,甚至帶來一個(gè)糟糕的公司。

太多的公司和團(tuán)隊(duì)將人置于一個(gè)固定的位置,讓他們?cè)谧约旱墓ぷ餮h(huán)當(dāng)中待著,不讓他們具備額外的視角。試想一個(gè)開發(fā)團(tuán)隊(duì)中,3個(gè)人只負(fù)責(zé)首頁(yè)右上角的搜索框和過濾器的開發(fā),他怎么會(huì)在意整個(gè)產(chǎn)品是否有更大的缺陷?

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如何理解產(chǎn)品的「核心功能」?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

產(chǎn)品的核心功能及其意義


王子吻醒了白雪公主后,將白雪公主帶回了城堡,給了白雪公主應(yīng)有的一切,白雪公主過得很開心,衣來伸手飯來張口,金銀珠寶取之不盡用之不竭。這一切哪里來?王子給的,因?yàn)橥踝訍郯籽┕?。?guó)王和王后也很愛白雪公主,那是因?yàn)樗麄儛弁踝?。老百姓也很愛白雪公主,因?yàn)樗麄儛鄞鲊?guó)王和王后,同時(shí)也喜愛王子。白雪公主的這一切財(cái)富、幸福、快樂都來自于王子對(duì)她的愛。王子為什么愛她,因?yàn)樗拿烂?。是因?yàn)榘籽┕鞯拿烂玻率雇踝游撬?,白雪公主才醒了,不是因?yàn)樾愿?,因?yàn)樗?dāng)時(shí)是死的,王子不知道她的性格怎么樣,所以白雪公主得到的這一切,都是因?yàn)樗拿烂病K园籽┕骱茉谝庾约旱拿烂?,因?yàn)樗拿烂?,讓她得到了這一切。但是人都是會(huì)逐漸老去的,所以白雪公主每天都會(huì)去保養(yǎng)自己的容貌,每天都會(huì)去照鏡子,她擔(dān)心這個(gè)世界上會(huì)有一個(gè)比她更美的人出現(xiàn)在王子面前,奪走她的一切,她很不安。直到有一天,她對(duì)鏡子說:鏡子啊鏡子,誰(shuí)是世界上最美的女人。


故事結(jié)束。


Image title


大家發(fā)現(xiàn)了嗎,白雪公主成為了童話故事里的那個(gè)王后,那個(gè)用毒蘋果的女人,現(xiàn)在你還會(huì)覺得王后壞么?好吧,我們今天要聊的不是這個(gè),而是「白雪公主的美貌」,類比于「產(chǎn)品的核心功能」。


如果白雪公主的容顏衰老了,她就失去這一切了,即使她曾經(jīng)得到過。就好像微信的核心功能是即時(shí)聊天,假設(shè)微信哪天不能即時(shí)通訊了,那它的價(jià)值就不存在了。所以它也害怕,害怕自己被其他產(chǎn)品取代,因?yàn)槿耸秦澙返?,一件事物總有?duì)其厭倦的時(shí)候,這也是為什么他們現(xiàn)在已經(jīng)開始說自己要?jiǎng)?chuàng)造一個(gè)生態(tài)體系。以至于出現(xiàn)了小程序、小游戲、紅包、掃碼、支付、看一看、搜一搜等等。他們?cè)诰S系這個(gè)產(chǎn)品給人的幻想,他們?cè)诔掷m(xù)性的創(chuàng)造這個(gè)幻想,來連接人與人之間的那一份羈絆,或者說情感。


類似于白雪公主的美貌得到了一切,而產(chǎn)品的核心功能帶來了用戶。


我說這個(gè)故事的目的是:不管是商業(yè)競(jìng)爭(zhēng),還是產(chǎn)品設(shè)計(jì),其實(shí)都是一個(gè)道理,就是我們應(yīng)該圍繞產(chǎn)品的這個(gè)核心功能去做文章,去拓展商業(yè)價(jià)值。


也許你平時(shí)看到很多文章,都在告訴你要注意產(chǎn)品的核心功能,你知道了核心功能的概念,但是不知道具體意思,其實(shí)還是不理解。所以我通過這個(gè)故事告訴大家,幫大家理清什么是「核心功能」以及它的意義。


為什么我們要了解并摸清產(chǎn)品的「核心功能」?因?yàn)橹挥性谶@個(gè)基礎(chǔ)上,我們才能正確做到拆解需求發(fā)現(xiàn)核心功能并對(duì)其進(jìn)行設(shè)計(jì),這就是我們所說的需求拆解與功能設(shè)計(jì)。


判斷產(chǎn)品核心功能的價(jià)值


產(chǎn)品的核心功能是由產(chǎn)品的定位決定,產(chǎn)品的定位是由產(chǎn)品的市場(chǎng)決定。那么要分析某一個(gè)核心功能的價(jià)值,須得從產(chǎn)品的市場(chǎng)著手分析。一般而言,產(chǎn)品市場(chǎng)可以歸納為以下三類:a.現(xiàn)有市場(chǎng)、b.細(xì)分市場(chǎng)、c.未來市場(chǎng)。


a.現(xiàn)有市場(chǎng)


現(xiàn)有市場(chǎng),其實(shí)就是目前常見且已盈利的模式,這類模式已存在于如今的市場(chǎng)上,并被許多產(chǎn)品借鑒、供奉著。如各類互聯(lián)網(wǎng)產(chǎn)品,電商、社交、音樂等,都有一定的模式在遵循著。針對(duì)現(xiàn)有市場(chǎng)的產(chǎn)品,對(duì)競(jìng)品的了解似乎已經(jīng)成為當(dāng)下產(chǎn)品人的必走路徑,競(jìng)品在做什么,都做了什么,以及做到了什么程度,再結(jié)合自己產(chǎn)品的定位以及核心競(jìng)爭(zhēng)力來斟酌某一個(gè)功能的去留及方向。正所謂知己知彼,百戰(zhàn)不殆。


值得一提的是,競(jìng)品分析的產(chǎn)出物并不是抄襲,而是更多的挖掘與糾正自己產(chǎn)品在下一步的需求,競(jìng)品不可以做的不代表自己產(chǎn)品不可以做,同理,競(jìng)品做的好的地方我們也不能輕易跟風(fēng),每一個(gè)產(chǎn)品之所以能夠存活下去,都是因?yàn)橛凶约旱暮诵母?jìng)爭(zhēng)力。這段話我之前在其他文章里寫過,沒什么指導(dǎo)意義,就是糾正部分人對(duì)于「競(jìng)品分析」的錯(cuò)誤看法。


成功的,比如網(wǎng)易云音樂的評(píng)論功能,早期他們就是通過這個(gè)功能從其他平臺(tái)挖來了不少用戶(評(píng)論是之一,當(dāng)然還有歌單,UGC 內(nèi)容分布渠道)。這些用戶在聽歌的同時(shí)會(huì)沉浸在音樂的氛圍里,期待找到志同道合的人,宣泄內(nèi)心感性的情緒。(不得不說現(xiàn)在的人其實(shí)都挺矯情的~嘻嘻)


Image title


失敗的,比如各類騎行產(chǎn)品,這類產(chǎn)品其實(shí)是借鑒了國(guó)外的模式,但各位也看到,基于國(guó)情及人民文化普及程度的區(qū)別,國(guó)內(nèi)市場(chǎng)騎行類產(chǎn)品現(xiàn)在很難發(fā)展起來,至少目前我身邊已經(jīng)有很多人想要退款某類單車服務(wù)的押金都很難了。


b.細(xì)分市場(chǎng)


其實(shí)就是將現(xiàn)有市場(chǎng)細(xì)分化。從用戶群體分析,每一個(gè)細(xì)分市場(chǎng)都是具有類似需求傾向的消費(fèi)者構(gòu)成的群體。比如社交這一個(gè)分類,微信出現(xiàn)后,隨之出現(xiàn)的各類「交友」軟件,如雨后春筍般崛起。其中大部分產(chǎn)品的功能模式都非常單一,著重突出核心點(diǎn),但礙于市場(chǎng)價(jià)值的可供性太低,以至于能真正崛起的產(chǎn)品卻寥寥無幾。


原因就在于,本來市場(chǎng)就已經(jīng)細(xì)分化,在細(xì)分化的市場(chǎng)里做出屬于自己的產(chǎn)品特性,需要考慮的因素有以下三類:

  • 差異化,該功能具不具備個(gè)性化,能不能在區(qū)別于其他產(chǎn)品的同時(shí)提升用戶體驗(yàn);
  • 強(qiáng)需求,也就是所謂的剛需;
  • 技術(shù)支持,例如產(chǎn)品的技術(shù)壁壘;


c.未來市場(chǎng)


這點(diǎn)類似于目前比較火的人工智能,市場(chǎng)盈利期沒有到,尚處于摸索階段,但也許會(huì)在未來創(chuàng)造出巨大的價(jià)值。這里就不展開討論了吧,因?yàn)樵谡nI(lǐng)域里,一般人達(dá)不到這樣的高度,所以討論意義不大。


實(shí)踐出真知


其實(shí)現(xiàn)在的很多產(chǎn)品都有一個(gè)問題,就是初期急忙上線新功能,后期發(fā)現(xiàn)效果不好,甚至到了無人去用的地步,但還是會(huì)把它掛著,不愿去掉。回頭看目前比較成功的產(chǎn)品,哪一款是有這樣的功能存在的?所以在工作中,我們要堅(jiān)持以下三個(gè)原則:a.砍掉殘缺功能、b.不要提用戶去思考、c.幫助用戶聚焦;


a.砍掉殘缺功能


可能很多產(chǎn)品已經(jīng)存在上述的那種情況,那么如何來刪除那些不必要的功能呢?


首先大家第一個(gè)想到的是「刪除那些功能,那我之前的工作不是全白做了么?既浪費(fèi)時(shí)間,又浪費(fèi)精力,成本都收不回來了」。


沒錯(cuò),這么理解也是對(duì)的,但也不是全對(duì)。因?yàn)樵诘倪^程中總會(huì)有一些自己沒辦法預(yù)知的情況,也許你之前的功能做得不好,但是不代表白做,可能在這個(gè)過程中積累了一些經(jīng)驗(yàn),知道之后遇到這些類似的情況如何去處理。這個(gè)成本算是智商稅吧,這算是前期產(chǎn)品沒有規(guī)劃好,導(dǎo)致后期發(fā)生這種情況的一個(gè)代價(jià)。


所以有人會(huì)因?yàn)檫@塊成本原因,選擇不去刪除這些功能。說實(shí)話,這樣不僅會(huì)導(dǎo)致產(chǎn)品后期在精力上持續(xù)不必要的輸出而導(dǎo)致產(chǎn)品爛尾,還會(huì)影響用戶的體驗(yàn)。所以在砍功能時(shí),應(yīng)該問問自己「為什么要留著它」,而不是「為什么要去掉它」。(好好想想這句話。)


Image title


b.不要替用戶去思考


說到這里,大家可能又會(huì)想問「你怎么知道用戶想不想要這個(gè)功能呢?」


一般來說,我們會(huì)通過數(shù)據(jù)來分析這些功能是否有存在的必要。同時(shí)從多角度去切入思考,比如前期的用戶模型、需求分析、可用性測(cè)試等等,但是千萬不要去猜測(cè)用戶想不想要這個(gè)功能。因?yàn)槿艘坏┫萑搿盖笕睦怼沟臓顟B(tài)中,設(shè)計(jì)者就會(huì)擔(dān)心自己漏掉了什么需求,而不是去解決問題。


所以我們要傾聽用戶的意見,但絕不能盲從。


c.幫助用戶聚焦


相信有人會(huì)反駁「那難道沒有完成一個(gè)功能前,我就完全不能去做其他功能了嗎?」

不是的,我上面也提到了,只要不影響用戶使用產(chǎn)品的核心功能,適當(dāng)?shù)募右恍┳庸δ苁菦]什么的,好比上面「微信」的例子。


產(chǎn)品的主要功能能夠滿足用戶的話,他們就不會(huì)太去在意你的改變。所以無論是刪除某些子功能或改進(jìn)某些功能,都不要輕易的打擾用戶。


如何做到這點(diǎn)?

  • 確定用戶想要達(dá)到的目的,并排定優(yōu)先級(jí);
  • 找到能夠完全滿足優(yōu)先級(jí)最高用戶需求的解決方案;
  • 確定用戶在使用產(chǎn)品過程中最常見的干擾源,并將解決這些問題的功能按難易程度排出優(yōu)先級(jí);


比如;

  • 微信的例子,用戶主要目的是社交,「游戲」和「購(gòu)物」只是當(dāng)中的消遣功能,之所以放在發(fā)現(xiàn)的子功能中,是因?yàn)樗鼈儗?duì)主流用戶來說并不重要;
  • 同樣的,因?yàn)榇蟛糠钟脩舻哪康氖巧缃唬遣慌懦俨糠秩藭?huì)去使用這些子功能,所以要做到不能打擾主流用戶的同時(shí),滿足部分用戶的需求;
  • 用戶在使用產(chǎn)品的主要功能時(shí),我們要看到子功能是否影響用戶的使用,然后找出當(dāng)中最阻礙用戶使用產(chǎn)品功能的干擾源,并把它解決。


小結(jié)


以上,我通過三個(gè)大點(diǎn)闡述了「核心功能」是什么、它的意義以及價(jià)值,工作中如何對(duì)核心功能做處理。


最后說一點(diǎn),在接需求的同時(shí),各位是否有想過這個(gè)需求背后的目的?如果有,那么是否有再進(jìn)一步分析這個(gè)目的與核心功能的關(guān)系?大部分人做到了第一點(diǎn)卻忘記了第二點(diǎn)。


各位謹(jǐn)記:產(chǎn)品人/設(shè)計(jì)師的思維,就是用戶看到界面時(shí)的樣子。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。


整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

每個(gè)人都在關(guān)注趨勢(shì),Dribbble 是設(shè)計(jì)師的集散地,那么在2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

每個(gè)人都在關(guān)注趨勢(shì),Dribbble 是設(shè)計(jì)師的集散地,也是設(shè)計(jì)趨勢(shì)最容易體現(xiàn)的地方。如果你經(jīng)常關(guān)注 Dribbble 上的那些設(shè)計(jì)作品,你總會(huì)注意到許多有意思的共性,在更長(zhǎng)的時(shí)間尺度上關(guān)注這些共性,會(huì)發(fā)現(xiàn)其中不少會(huì)延伸到更大的設(shè)計(jì)領(lǐng)域和范疇,其中很多會(huì)以趨勢(shì)的形式成為階段性甚至長(zhǎng)期的設(shè)計(jì)趨勢(shì)。這些流行的趨勢(shì)有的關(guān)乎技法,有的則是色彩、風(fēng)格,甚至是某種隱喻。

當(dāng)然,不論如何,作為設(shè)計(jì)師,這些趨勢(shì)的價(jià)值是毋庸置疑的,關(guān)注它們,以開放的心態(tài)面對(duì)著,也許它們會(huì)在下一個(gè)階段在我們自己的設(shè)計(jì)作品中開花結(jié)果。

1. 非標(biāo)準(zhǔn)比例的人物形象

以人為核心的自定義插畫是這兩年來,最顯著的設(shè)計(jì)趨勢(shì)之一。這種插畫展現(xiàn)形式能夠快速呈現(xiàn)想要呈現(xiàn)的環(huán)境、流程,更重要的是創(chuàng)造情感訴求。標(biāo)準(zhǔn)而寫實(shí)的人物形象在大量的設(shè)計(jì)訴求之下,顯得平庸而不夠突出,這也使得走樣但是富有張力的非標(biāo)準(zhǔn)人物身材比例顯得更加出彩,這也是為什么近年來我們能夠如此頻繁地看到諸多非標(biāo)準(zhǔn)的人物插畫。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這幅插畫來自 icons8 。巨大的鞋子,不成比例的巨手,水壺纖細(xì)的握柄和壺頸,強(qiáng)烈的對(duì)比顯得頗具張力。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Diana Stoyanova 的插畫呈現(xiàn)了一個(gè)忙碌女性的形象,非標(biāo)準(zhǔn)的身材略顯抽象,但是很有力量。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Diana Stoyanova 的這幅插畫作品用夸張巨大的人物形象來強(qiáng)調(diào)你比手機(jī)更大,更重要。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

而 Radio 的這幅插畫則使用走樣的身材營(yíng)造出有趣而可愛的形象,讓交互更加有意思。

2. 提供輔助信息的界面插畫

時(shí)至今日,插畫在 UI 中已經(jīng)不再鮮見。自定義的插畫早就不是裝飾性的設(shè)計(jì),它讓UI界面更加具有視覺吸引力,和情感表達(dá)的能力。更重要的是,它是功能性的,它為界面的功能和信息提供支撐,以「互文」的方式來告知用戶界面想要呈現(xiàn)的功能,畢竟圖片和插畫所呈現(xiàn)的視覺信息比文字更快。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這個(gè)界面也是 icons8 團(tuán)隊(duì)制作的。輔助性的插畫讓報(bào)錯(cuò)信息也顯得足夠明亮而正能量,讓用戶不會(huì)覺得難受。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這組作品同樣來自 icons8 ,這次的風(fēng)格不同,并且是為移動(dòng)端新用戶引導(dǎo)而設(shè)計(jì)的。引人矚目的插畫將文字描述的優(yōu)勢(shì)更加具象化地表現(xiàn)出來。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Netguru 的報(bào)錯(cuò)頁(yè)面顯得非常純粹也非??蓯邸?

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Hoang Nguyen 所設(shè)計(jì)的這個(gè)插畫甚至是交互式的,它的靈感來源于一款經(jīng)典的滑塊游戲,動(dòng)效模擬了這個(gè)效果。

3. 動(dòng)態(tài)的 LOGO 和圖形

動(dòng)畫效果是強(qiáng)化視覺的重要手段。在以往,視覺和圖形化元素絕大多數(shù)都是靜態(tài)的,但是現(xiàn)在為了更加積極地迎合用戶體驗(yàn),動(dòng)態(tài)的設(shè)計(jì)已經(jīng)成為常規(guī),許多動(dòng)效所帶來的效果是靜態(tài)設(shè)計(jì)所無法呈現(xiàn)的,在情緒和氛圍上的營(yíng)造也更加強(qiáng)大。

動(dòng)效不僅能夠讓產(chǎn)品在視覺上更加吸引人,而且能夠向用戶呈現(xiàn)出產(chǎn)品的品質(zhì)感。此外,你還能夠在網(wǎng)站、通知、教程和交互流等吧托女個(gè)的地方找到動(dòng)效。這也是為何 Dribbble 的設(shè)計(jì)作品中,有如此之多的動(dòng)態(tài)的圖形化元素。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Motion Design School 的這個(gè)動(dòng)態(tài) LOGO 借用了負(fù)空間的設(shè)計(jì)方法,主體則采用了狗的形象,動(dòng)態(tài)呈現(xiàn)下極為可愛生動(dòng)。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Awsmd 則更有意思,將水母的運(yùn)動(dòng)方式賦予了花朵,良好總生命體在體態(tài)上貫穿一致,有著的視覺表現(xiàn)力。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Markus Magnusson 將一組風(fēng)格一致情節(jié)連貫地插畫動(dòng)態(tài)地連接到了一起,讓LOGO 具備了強(qiáng)大的敘事能力。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Yup Nguyen 的動(dòng)畫則不僅時(shí)尚,而且非常有趣,讓人感到愉悅,而忘記等待的煩惱。

4. 工作流程和工作區(qū)主題插畫

Dribbble 上的數(shù)字插畫主題之一,就是對(duì)各種工作流程和場(chǎng)景。插畫和平面設(shè)計(jì)師熱衷于相對(duì)藝術(shù)地呈現(xiàn)設(shè)計(jì)工作的流程,團(tuán)隊(duì)的協(xié)作,創(chuàng)意的發(fā)散過程,溝通的狀態(tài),工作空間的呈現(xiàn)。它流行的另一原因,是這種內(nèi)容的插畫在著陸頁(yè)和博客文章頁(yè)面中非常適用,且非常流行。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Tubik Studio 的這幅插畫展現(xiàn)了設(shè)計(jì)師的工作空間,整個(gè)視角似乎是在廣角相機(jī)下被扭曲了,非常有趣。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

來自 Walid Beno 的這個(gè)插畫則呈現(xiàn)的是團(tuán)隊(duì)協(xié)作的場(chǎng)景,巨大的UI界面顯得頗為夸張,不過主題性也是借此才得以體現(xiàn)和強(qiáng)化。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Pitch 的這幅插畫同樣呈現(xiàn)的是團(tuán)隊(duì)協(xié)作的場(chǎng)景,不過加入的動(dòng)效非常微妙,將協(xié)作的趨勢(shì)和狀態(tài)給放大了出來,視覺上更加動(dòng)感,且足夠時(shí)尚。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Ted Kulakevich 的插畫中則描摹的是一個(gè)正在工作,喝著咖啡的角色形象,和日常的設(shè)計(jì)和創(chuàng)意工作者的狀態(tài)非常接近,令人賞心悅目的色彩則讓整個(gè)狀態(tài)令觀者非常舒適。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

如果你的工作狀態(tài)也是如此的忙碌,那么你應(yīng)該能夠從 icons8 的這幅插畫中找到共鳴。插畫中被工作內(nèi)容所包圍的狀態(tài)不就是你嘛?

5. 有趣的吉祥物和奇妙的生物

設(shè)計(jì)是一個(gè)需要想象力的工作。有趣的小怪獸,奇妙的機(jī)器人,經(jīng)典或者原創(chuàng)的卡通人物,只存在于傳說和想象中的生物,從來都不會(huì)在 Dribbble 上缺席。品牌吉祥物的設(shè)計(jì)在這種趨勢(shì)下越來越具有明顯的情感表現(xiàn)力,而卡通化的角色形象很大程度上會(huì)利用人們對(duì)于特定動(dòng)物或者特定形象的情感關(guān)聯(lián),人格化、角色化之后的吉祥物,能夠讓用戶產(chǎn)生在和它進(jìn)行情感交流的錯(cuò)覺。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

設(shè)計(jì)師 Mike 的網(wǎng)頁(yè)設(shè)計(jì)作品當(dāng)中,有趣的卡通形象作為視覺主體,讓產(chǎn)品和用戶更快和頁(yè)面產(chǎn)生視覺連接。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

和Mike 的設(shè)計(jì)目標(biāo)不同的是,Alexandra Zutto 的插畫是借助機(jī)器人的形象來呈現(xiàn)未來主義的氛圍。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Motion Design School 使用可愛的動(dòng)態(tài)插畫來強(qiáng)化品牌的展示。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這組來自 icons8 的插畫所營(yíng)造的是一個(gè)典型的結(jié)帳場(chǎng)景。真正特別的地方在于角色的設(shè)定,人和機(jī)器人之間的交互,營(yíng)造出科幻的氛圍。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Ramothion 靈活的運(yùn)用狐貍這個(gè)吉祥物形象,結(jié)合UI元素,表達(dá)了「演示」的主題。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

icons8 的這幅插畫則利用了噪點(diǎn)來賦予角色以一種帶有藝術(shù)感的氣息。

6、各式各樣的運(yùn)動(dòng)狀態(tài)

運(yùn)動(dòng)就是生命,對(duì)于設(shè)計(jì)師和插畫師而言,最有張力的東西大概都藏在運(yùn)動(dòng)將要開始的時(shí)候,藏而未發(fā)的一瞬間,或者運(yùn)動(dòng)過程中,姿態(tài)舒展的某一秒。

體育運(yùn)動(dòng)中往往能夠更快找到這樣的狀態(tài),不過其他的主題之下,也存在類似的運(yùn)動(dòng)狀態(tài)。這樣的運(yùn)動(dòng)狀態(tài)充滿了表現(xiàn)力,設(shè)計(jì)師和插畫師們常常會(huì)借助色彩、圖形、曲線等元素來構(gòu)建這樣的設(shè)計(jì)作品。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Unfold 的插畫呈現(xiàn)的是沖過終點(diǎn)的運(yùn)動(dòng)員,主題暗示出了成功、成就,明亮的色彩和舒展的姿態(tài)在整體上保持了一致,藝術(shù)性也不低。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

同樣是呈現(xiàn)的跑步,但是Jack Daly 所表現(xiàn)的是即將開始的運(yùn)動(dòng),蓄勢(shì)待發(fā)的一瞬間的狀態(tài)。這幅插畫是給 InVision 所設(shè)計(jì)的,主題是設(shè)計(jì)沖刺,而這幅插畫非常貼合這一隱喻。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Walid Beno 的插畫所呈現(xiàn)的場(chǎng)景非常獨(dú)特,現(xiàn)實(shí)的路徑和虛擬的景象連在一起,人物仿佛騎行在現(xiàn)在與未來之間。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這幅來自 Tubik 的插畫則將運(yùn)動(dòng)的場(chǎng)景和手機(jī)熔于一個(gè)場(chǎng)景當(dāng)中,整個(gè)構(gòu)圖非常動(dòng)態(tài)。

7. 陰影和負(fù)空間

平面設(shè)計(jì)另外一個(gè)重要的趨勢(shì),就是使用盡可能具有表現(xiàn)力的插畫設(shè)計(jì),利用陰影和負(fù)空間來創(chuàng)造戲劇感和視覺影響力,就像Vogue 的御用設(shè)計(jì)師 Malika Favre 的插畫作品那樣。

有限的色彩,引人矚目的色彩對(duì)比,光影之間的互相成就,大膽而有意義的細(xì)節(jié)。如果你稍微有意識(shí)地去看,會(huì)發(fā)現(xiàn)每天都有設(shè)計(jì)師在 Dribbble 上發(fā)布這樣風(fēng)格的作品。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

比如 Ksenia Shokorova 的這幅插畫就很好地呈現(xiàn)出夏天的炎熱和慵懶的夏日氣氛,以富有表現(xiàn)力的人物輪廓作為構(gòu)圖的中心,甲板和水面構(gòu)成鮮明的對(duì)比,色彩不多但是令人印象深刻。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Joanna Lawniszak 的插畫則使用強(qiáng)烈的光影,讓一個(gè)簡(jiǎn)單的著名變得具有明顯的舞臺(tái)效果,相當(dāng)大氣。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Yoga Perdana 的這個(gè)LOGO設(shè)計(jì)作品利用的是負(fù)空間,讓文字當(dāng)中融入了一個(gè)非常清晰的貓的形象,并且還呈現(xiàn)出貓?jiān)谖淖种g穿插的效果。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這個(gè)名為 Mr.Travel 的LOGO設(shè)計(jì)作品來自設(shè)計(jì)師 Yuri Kartashov,他將男人的面部和山脈的形象結(jié)合到了一起。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Dmitry Stolz 的設(shè)計(jì)項(xiàng)目 Fetch My Meds 中使用了兩個(gè)可愛的動(dòng)物角色,微妙的動(dòng)畫和明確的對(duì)比使得兩個(gè)角色顯得活潑而有趣。

8. 3D 圖形

3D 無疑是現(xiàn)在 Dribbble 上最熱門的趨勢(shì)。大家用3D建模來做各種各樣的東西,無論是等軸測(cè)的插畫還是游戲角色,還是以往大家會(huì)用PS來繪制的光影,現(xiàn)在一并使用 3D建模和渲染來實(shí)現(xiàn)了。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Ueno 這個(gè)引人入勝的動(dòng)畫效果就是在 3D 渲染的基礎(chǔ)上實(shí)現(xiàn)的,有趣的元素構(gòu)建成的場(chǎng)景讓人愛不釋手,而這居然是一個(gè)招聘廣告?有意思。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Tubik Studio 的這個(gè)首圖中的插畫形象,同樣是使用3D建模來實(shí)現(xiàn)的,這樣的角色形象很容易讓人聯(lián)想到動(dòng)漫和游戲,結(jié)合風(fēng)格類似的CTA元素,可以極強(qiáng)地影響用戶的注意力。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這是設(shè)計(jì)師 Mohamed Chahin 精心設(shè)計(jì)的等軸測(cè)插畫,柔和的色調(diào)和模糊的光影讓家的氛圍得到了強(qiáng)化。

9. 關(guān)于 UI 界面的插畫

隨著精通插畫的設(shè)計(jì)師越來越多,插畫開始深入到設(shè)計(jì)的方方面面,包括在 Web 和 UI 界面當(dāng)中的字體、圖形甚至整個(gè)氛圍和環(huán)境。由于注意力的競(jìng)爭(zhēng)如此的激烈,以往原本只需要普通圖片就能做到的事情,現(xiàn)在需要借助插畫來做到。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

在 Dropbox Design 的這篇?jiǎng)?chuàng)意相關(guān)的文章當(dāng)中,包含有一些這樣帶有粗野主義風(fēng)格的插畫。也許你并不是那么青睞這種風(fēng)格的插畫,但是即便如此,你也不會(huì)繞過這幅插畫只單純?yōu)g覽文字。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這是一幅關(guān)于醫(yī)生和專業(yè)交互界面的插畫,作者是設(shè)計(jì)師 Alexander Savic ,插畫會(huì)將人迅速帶入進(jìn)醫(yī)療保健相關(guān)的領(lǐng)域。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這幅插畫來自設(shè)計(jì)工作室 Fireart Studio,它暗示了約會(huì) APP 背后的真實(shí)和潛藏的精彩,讓人主動(dòng)追求屬于自己的愛情。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Dmitry Stolz 的插畫則呈現(xiàn)了移動(dòng)端APP 上的交互,做決策的關(guān)鍵時(shí)刻。

10. 多層次剪切效果插畫

最后一個(gè)值得一體的趨勢(shì),則是類似剪紙一樣的多層剪切視覺效果插畫。這種設(shè)計(jì)效果讓插畫具備了豐富的層次,顯得深沉而原創(chuàng),帶有更強(qiáng)的物理工藝質(zhì)感和難以磨滅的印象。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Eddie Lobanovskiy 的插畫就是使用的這樣的效果,主題關(guān)于太空,這種多層剪切效果讓太空顯得更為深邃。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Michael Fugoso 的設(shè)計(jì)作品,他將這種插畫定義為具有深度幻覺的平面數(shù)字插畫。

如果這種插畫風(fēng)格和卷軸效果結(jié)合起來,就更加強(qiáng)大了,

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

Studio V?R的多層次剪切插畫在交互中次第呈現(xiàn),各個(gè)部分相互之間影響并關(guān)聯(lián)著。

整個(gè)2018年,Dribbble 反映出來設(shè)計(jì)趨勢(shì)是什么?

這是 Anano Miminoshvili 所創(chuàng)建的一個(gè)網(wǎng)頁(yè)滾動(dòng)交互的案例,隨著用戶不斷滾動(dòng),不同的層級(jí)的元素次第運(yùn)動(dòng),一個(gè)接這一個(gè)被激活。

結(jié)語(yǔ)

毫無疑問,Dribbble 本身正在逐步成熟,越來越多的設(shè)計(jì)作品中,開始融入更為明顯的藝術(shù)特征,設(shè)計(jì)的層次和力量感比以往更強(qiáng)了。作為設(shè)計(jì)師發(fā)布各種小樣、練習(xí)的Dribbble,本身也作為設(shè)計(jì)領(lǐng)域的試驗(yàn)田而存在,很多設(shè)計(jì)趨勢(shì)在這個(gè)平臺(tái)上醞釀,成熟,并且逐漸走向世界。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

溫暖與生命力!2019年潘通年度流行色「活力珊瑚橙」新鮮出爐!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

2019 年的潘通年度流行色終于發(fā)布了。這家專注于色彩研究和標(biāo)準(zhǔn)化的公司,針對(duì)過去一年甚至更長(zhǎng)時(shí)間維度上的文化和色彩趨勢(shì)進(jìn)行廣泛分析之后,選出了這款 Living Coral —— 「活力珊瑚橙」 作為2019年的潘通年度流行色。

在這個(gè)全球都處于動(dòng)蕩而不確定的時(shí)間點(diǎn),潘通希望這樣一個(gè)充滿生命力,象征活力的色彩能夠像一針強(qiáng)心劑,給每個(gè)人都注入能量。

對(duì)于這款珊瑚橙,潘通色彩研究中心副總裁 Laurie Pressman 是這樣說的:「就像這種色彩所依附的連綿的珊瑚一樣,我們期望這個(gè)顏色能夠在接下來不斷變幻的10年里面給人以向上的浮力和確信的力量。在技術(shù)疾速發(fā)展和全球動(dòng)蕩的背景之下,我們希望這種色彩能在全球文化上帶來扭轉(zhuǎn),加速轉(zhuǎn)變。」

如果你對(duì)于色彩的心理效應(yīng)和歷史有所了解,那么你會(huì)發(fā)現(xiàn),活力珊瑚橙并不是一個(gè)帶來變革和飛躍的色彩。在這個(gè)權(quán)威主義盛行的時(shí)代,它的存在目的更像是在給每個(gè)人的一種精神加持,提升確信感?;盍ι汉鞒仁且环N曾經(jīng)流行于上世紀(jì)50年代和60年代的色彩,你可以在當(dāng)時(shí)的汽車、配飾、海報(bào)和時(shí)尚穿搭當(dāng)中看到它的影子,在現(xiàn)在看來這就是一種傳遞復(fù)古的感覺的色調(diào),它代表著那個(gè)簡(jiǎn)單、熱情而單純的年代,換句話說,它能夠喚起「簡(jiǎn)單時(shí)代」的感覺,沒有紅藍(lán)白三色(美國(guó)國(guó)旗的顏色)所營(yíng)造出來的強(qiáng)烈的政治意味。

潘通色彩研究中心的執(zhí)行董事 Leatrice Eiseman 在聲明當(dāng)中提到:「當(dāng)我們透過自然和數(shù)字設(shè)備來透視我們的生活的時(shí)候,色彩是貫穿始終、保持平衡的鏡頭,而活力珊瑚橙更是這樣的一種色彩。大眾對(duì)于人與人之間的溝通與社交聯(lián)系的期待越來越高,珊瑚橙這種色彩的人性化的特征可以讓人更加振奮?!?

在新聞發(fā)布會(huì)上,潘通官方表示:「在它光彩奪目又難以琢磨的色彩氣質(zhì)之下,仿佛帶著海洋的呼吸感,珊瑚橙用仿佛泛著氣泡的活力感沖擊著我們的視覺和大腦?!?

潘通每年所選取的流行色通常都有著一系列比較富有凝聚力的主題,而活力珊瑚橙本身和大自然有著非常緊密的聯(lián)系,這總讓人忍不住想起 2017 年所選取的年度色彩,草木綠。

「這種色彩很令人舒適!」Pressman說道:「越多東西推著我們前進(jìn),我們就越是想回歸根本。周遭的一切都令人畏懼,所以我們希望有東西能夠讓我們感到安全、快樂,期待感受到舒適和溫暖?!?

色彩所帶來的情緒影響并不只是停留在理論當(dāng)中?;盍ι汉鞒仁且环N非常實(shí)用的顏色,無論是在現(xiàn)實(shí)生活中,還是在虛擬的屏幕以內(nèi),都能幫我們彌合鴻溝,縮小差距。

在接受采訪的時(shí)候,Pressman 提到了活力珊瑚橙的許多特性。在過去的幾年當(dāng)中,珊瑚橙越來越受歡迎。它整體上是處于橙色的色相當(dāng)中,并沒有偏向粉紅,它溫暖的質(zhì)感和膚色相得益彰。在室內(nèi)設(shè)計(jì)當(dāng)中,珊瑚橙有著更強(qiáng)的功能性,可以和多種不同的色彩搭配,有著近乎中性色的強(qiáng)大兼容性。在移動(dòng)端 UI 當(dāng)中,珊瑚橙呈現(xiàn)出飽滿的色感,足以讓界面顯得充盈而活力十足,在社交媒體上呈現(xiàn)出非常強(qiáng)大的傳播性。

即使是在數(shù)字界面當(dāng)中,活力珊瑚橙都隱約傳遞出和自然界之間的緊密聯(lián)系。

▲設(shè)計(jì)師 Julien Blouet

今年9月份,以多彩配色的 iPhone XR系列產(chǎn)品當(dāng)中,也有采用了近似活力珊瑚橙的配色,這無疑也是這一色彩流行的明證。在此之前,潘通公司已經(jīng)推出過相似的色彩,不過蘋果發(fā)布的新機(jī)當(dāng)中包含這一色彩這件事情依然讓潘通公司感到驚訝。

在采訪過程中,Pressman 還盛贊了 Airbnb 這家公司,因?yàn)?Airbnb 早在 2014 年的時(shí)候就已經(jīng)在進(jìn)行品牌重設(shè)計(jì)的過程中融入了這一色彩。「可以說是非常有先見之明了」,Pressman 稱贊道。

▲設(shè)計(jì)師 Peter Tarka

最后,附上年度活力珊瑚橙的相關(guān)參數(shù):


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

15年圖標(biāo)設(shè)計(jì)經(jīng)驗(yàn),總結(jié)出1套專業(yè)流程和8個(gè)注意事項(xiàng)

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

我們每天都在設(shè)計(jì)圖標(biāo),并且保持這樣的狀態(tài)超過15年。身為設(shè)計(jì)師,想必你已經(jīng)閱讀過很多關(guān)于圖標(biāo)設(shè)計(jì)的文章,但是今天的文章不一樣,今天我們的文章不會(huì)花費(fèi)很長(zhǎng)時(shí)間來單獨(dú)介紹某一個(gè)圖標(biāo)的設(shè)計(jì),而是設(shè)計(jì)任何一套圖標(biāo)應(yīng)當(dāng)遵循的基本流程,以及一定要注意的8個(gè)關(guān)鍵的注意事項(xiàng),你可以將這些東西帶入到一些現(xiàn)成的案例當(dāng)中去驗(yàn)證。

這個(gè)注意事項(xiàng)清單,也可以被視作為給設(shè)計(jì)師所編寫的圖標(biāo)設(shè)計(jì)指南,即使設(shè)計(jì)趨勢(shì)發(fā)生變化,這些規(guī)則和經(jīng)驗(yàn)依然適用。遵循這些規(guī)則和技巧,能夠確保圖標(biāo)從設(shè)計(jì)到使用都可以更加無縫和順暢。

我們并沒有重新發(fā)明輪子,相反,我們會(huì)以這種方式來呈現(xiàn)我們的工作流程細(xì)節(jié),希望它也能幫你有效地組織工作。

循序漸進(jìn)地設(shè)計(jì)圖標(biāo)

像我們需要系統(tǒng)而大量地設(shè)計(jì)圖標(biāo),設(shè)計(jì)流程是最重要的事情。正如你所看到的,繪制流程在圖標(biāo)繪制之前,就已經(jīng)開始了。

  1. 了解你要?jiǎng)?chuàng)建的圖標(biāo)的含義。明白不同圖標(biāo)的使用場(chǎng)景,不同的圖標(biāo)分別代表著什么,了解哪些圖標(biāo)需要使用隱喻,哪些圖標(biāo)使用現(xiàn)實(shí)世界中真實(shí)的形象。
  2. 梳理出圖標(biāo)正確的隱喻,腦暴出可能的符號(hào)和形象。記住圖標(biāo)的含義和形象之間的關(guān)聯(lián),以最佳的形式呈現(xiàn)圖標(biāo),直指本質(zhì)。借助詞典和單詞集來獲取圖標(biāo)相關(guān)的概念的關(guān)鍵詞,同義詞和定義。簡(jiǎn)化和抽象你的想法,你會(huì)找到一個(gè)抽象概念「翻譯」出來的對(duì)象。
  3. 不要拘泥于現(xiàn)在當(dāng)前的任務(wù)和狀態(tài),盡量進(jìn)行徹底的調(diào)研,盡可能地搜集相關(guān)參考資料??赡苡腥艘呀?jīng)為這一主題設(shè)計(jì)了很不錯(cuò)的圖標(biāo)版本,可以參考已有的設(shè)計(jì),獲取靈感。
  4. 確定圖標(biāo)的樣式。圖標(biāo)應(yīng)該是扁平的,線性的,Material Design,是用符號(hào)還是借助手繪來呈現(xiàn)。有的 UI界面有很清晰的要求,比如 iOS 平臺(tái)和 Material Design,如果 UI 有非常清晰固定的設(shè)計(jì)風(fēng)格,那么圖標(biāo)的設(shè)計(jì)需要盡量貼近。
  5. 按照選定的方式來呈現(xiàn)設(shè)計(jì),看看它最終呈現(xiàn)是否正確。保持整體設(shè)計(jì)的一致性。
  6. 注意圖標(biāo)要矢量化,連基本的草圖都應(yīng)該是矢量化的。
  7. 在 UI 布局中測(cè)試圖標(biāo)的設(shè)計(jì)。

Icons8 的實(shí)戰(zhàn)案例

按照上面的流程,能夠繪制出不同樣式足夠優(yōu)秀的圖標(biāo)合集。下面是我們?cè)谶@樣的流程下所設(shè)計(jì)出來的圖標(biāo)示例。

▲ Material, Outline: Science and Studies Icons

▲ Carbon Copy: Animals

▲ Nolan Icons: Aging

注意事項(xiàng)清單

如果你像我們一樣每天設(shè)計(jì)圖標(biāo)的話,也會(huì)碰到各種各樣的問題。其中最重要的是下面的注意事項(xiàng)清單,它們能夠確保我們不同的人在不同的時(shí)期不同狀態(tài)下,設(shè)計(jì)出來的圖標(biāo)能夠協(xié)調(diào)到一個(gè)主題、一個(gè)系統(tǒng)當(dāng)中。如果你也要設(shè)計(jì)圖標(biāo)的話,可以將下面的清單打印出來,貼在自己的桌子旁邊作為參考。

1. 像素完美

讓圖標(biāo)踩在每個(gè)像素點(diǎn)上,確保清晰不模糊。

2. 視覺重量

用斜視的方法來感知圖標(biāo),看看成套的圖標(biāo)是否都具有相同的大小。斜視、調(diào)整、再看、再調(diào)整,直至均勻理想。為了保持總體視覺重量的一致性,我們會(huì)使用「完美的圓形和正方形」來和所有的新圖標(biāo)進(jìn)行對(duì)比。

3. 幾何圖形

盡量使用簡(jiǎn)單堅(jiān)實(shí)的幾何形狀來繪制所有必要的線條,它們會(huì)讓你的圖標(biāo)顯得更加牢固可靠,具有吸引力和說服力。

4. 清晰簡(jiǎn)潔

刪除所有無法傳達(dá)圖標(biāo)概念的細(xì)節(jié),避免讓圖標(biāo)顯得沉重而復(fù)雜。

5. 足夠的空間

確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間,不會(huì)顯得過于擁擠或者空曠。

6. 對(duì)比度

在黑色和白色的背景上檢查圖標(biāo)的全部細(xì)節(jié),看看是否其中的每種顏色都是可見的,以及元素之間的對(duì)比是否足夠。

7. 視覺統(tǒng)一

檢查線條的粗細(xì)重量,邊角的大小,配色方案,細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。

8. 圖層排序

確保圖標(biāo)中圖層順序清晰而規(guī)整。這是一種良好的習(xí)慣和專業(yè)的精神。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

2019年讓用戶愛不釋手的8大UI設(shè)計(jì)趨勢(shì)

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

什么?都已經(jīng)開始討論2019年的設(shè)計(jì)趨勢(shì)了?我依稀還記得最后一次看見秋葉在窗前墜落的場(chǎng)景,仿佛就發(fā)生在昨天。


但2018年也是真的到了底。在2018年的最后一月,說說2018年的設(shè)計(jì)熱點(diǎn),談?wù)?019年的設(shè)計(jì)趨勢(shì),再合適不過。因此我們選取了8個(gè)一定會(huì)在2019年當(dāng)中發(fā)光發(fā)熱的設(shè)計(jì)趨勢(shì)!


這篇文章的要點(diǎn)包括:

  • 有哪些影響2019年UI設(shè)計(jì)趨勢(shì)的元素?
  • 2019年7大UI設(shè)計(jì)趨勢(shì)是什么?

我們認(rèn)為這些UI趨勢(shì)不單單會(huì)滿足用戶的審美需求,同時(shí)也會(huì)提供給用戶極高的可用性。這些趨勢(shì)的廣泛結(jié)合會(huì)取悅用戶并且推動(dòng)你的產(chǎn)品走向成功。


有哪些影響2019年UI設(shè)計(jì)趨勢(shì)的元素?


目前的科技生態(tài)圈對(duì)UI趨勢(shì)有著持續(xù)的影響?;仡欉@個(gè)年頭看看,2018年已經(jīng)發(fā)生了什么?


設(shè)計(jì)第一主義的改變


產(chǎn)品設(shè)計(jì)中,設(shè)計(jì)第一主義已經(jīng)在今年變成了次要因素。為何?設(shè)計(jì)應(yīng)該改善人們的生活并且?guī)椭鷮?shí)現(xiàn)商業(yè)目的。


在2019年中,設(shè)計(jì)趨勢(shì)比以往任何時(shí)候都要符合以下要求,他們會(huì)優(yōu)先考慮速度、精簡(jiǎn)的頁(yè)面配合不對(duì)稱的排版,最重要的是,移動(dòng)端第一。主要要考慮到目前用戶訪問網(wǎng)站或者APP時(shí),時(shí)下最主流設(shè)備。


圓邊移動(dòng)設(shè)備


目前大多數(shù)的移動(dòng)設(shè)備都放棄了邊框轉(zhuǎn)為了圓邊。這樣的改變也深深地影響了界面。這個(gè)也會(huì)對(duì)使用使用銳邊元素的設(shè)計(jì)師在移動(dòng)端UI設(shè)計(jì)上造成挑戰(zhàn)。


所以,不用多說,2018年的這些UI趨勢(shì)也可能早2019年依然存在:


2019年UI趨勢(shì)1:排版和講故事

Image title

2019年中,圍繞產(chǎn)品體驗(yàn)講一個(gè)優(yōu)秀故事的能力將會(huì)成為首要的趨勢(shì)。


排版本身可以構(gòu)建強(qiáng)大的視覺層次結(jié)構(gòu)。UI是一個(gè)非常關(guān)鍵的元素,它在帶來卓越的用戶體驗(yàn)方面發(fā)揮著重要作用。


文本樣式本身也是不夠用的。文案正在成為優(yōu)秀用戶體驗(yàn)最重要元素之一。


雖然風(fēng)格吸引了用戶的注意力,但是敘述會(huì)讓用戶感知品牌,使品牌作為故事的一部分。反過來也讓用戶不會(huì)表面的瀏覽內(nèi)容。


2019年UI趨勢(shì)2:插圖和動(dòng)畫圖形                 

Image title

隨著2019年的來臨,微動(dòng)畫逐漸變得流行起來。它能夠通過交互幫助用戶區(qū)分屏幕上的元素。事件觸發(fā)后,反饋承擔(dān)起了重任,確保用戶清楚預(yù)期的操作事實(shí)上發(fā)生了。


數(shù)字或手繪的自定義插圖在2018年中發(fā)揮了巨大的作用。自由形式,不對(duì)齊設(shè)計(jì)和巨大的不對(duì)稱性不僅幫助平臺(tái)脫穎而出,而且還創(chuàng)造了一個(gè)友好和溫馨的環(huán)境。反過來又為用戶帶來了更好的體驗(yàn)。


此外, 為了使這些頁(yè)面脫穎而出,這次插圖經(jīng)常以復(fù)雜的動(dòng)作呈現(xiàn)。


這樣的動(dòng)感更容易吸引用戶注意力,并且可以一目了然地解釋公司或品牌提供的內(nèi)容。一個(gè)引人愉悅的插圖可以為網(wǎng)站或移動(dòng)App提供鮮明的個(gè)性,從而使其更加難忘。


2019年UI趨勢(shì)3:色彩,漸變和重疊效果

Image title

一種可能在不久的將來變得更加受歡迎的技術(shù),重疊效果包括顏色、文本和圖像。重疊可以創(chuàng)建空間感和更結(jié)構(gòu)化的界面。


由于現(xiàn)代顯示器具有比以往更好的色彩再現(xiàn)水平,漸變色在2018年大幅回顧。明年可能會(huì)給我們帶來大量色彩和漸變混合透明的材料。


我們可以在任何地方看到它們:插圖、UI元素、文本、我們喜歡漸變,因?yàn)樗鼈優(yōu)槠脚_(tái)增添了現(xiàn)實(shí)感和深度,是我們?cè)诂F(xiàn)實(shí)生活中看到一切的方式。這可呢解釋了為什么具有漸變的元素感覺更自然。


越來越多的人使用大膽的顏色,無論是組合還是單色。通過使用超大文本,設(shè)計(jì)師發(fā)現(xiàn)最好限制極端的色彩展示。這會(huì)減少用戶使用次要元素的注意力,讓他們專注于他們應(yīng)該做的事情。


2019年UI趨勢(shì)4:AI

Image title

在未來一年中,AI技術(shù)將繼續(xù)朝著更完美的方向發(fā)展,人機(jī)交互會(huì)變得更為平滑和一致。到2020年,語(yǔ)音在搜索引擎查詢的比重預(yù)期會(huì)達(dá)到50%。


聊天機(jī)器人和通信接口也趨于困難。伴隨著人工智能和機(jī)器學(xué)習(xí)技術(shù)進(jìn)步,聊天機(jī)器人變得更加聰明。因此,許多網(wǎng)站和APP已經(jīng)開始使用語(yǔ)音交互來增強(qiáng)體驗(yàn)。


當(dāng)我們?cè)谒衅脚_(tái)上說話的時(shí)候,機(jī)器人變得越發(fā)普遍,包括Google的自動(dòng)提示,智能家居語(yǔ)音交互(比如Google Home或亞馬遜的Alexa),虛擬助手(如Apple的Siri)以及幫助臺(tái)的機(jī)器人等。


2019年UI趨勢(shì)5:VR

Image title

虛擬現(xiàn)實(shí)在ui趨勢(shì)中有著重要作用,并且這個(gè)地位短期內(nèi)不會(huì)動(dòng)搖。憑借它對(duì)用帶來的影響,我們可以把它稱為互聯(lián)網(wǎng)體驗(yàn)。


VR可以用于醫(yī)療保健以治愈恐懼癥或者用于教學(xué)以增強(qiáng)互動(dòng)。因此,為了在2019年中真正增強(qiáng)UI效果,它看起來也是非常有前景的。


想知道UX研究中如何使用VR?看看這個(gè)有意思的文章。


2019年UI趨勢(shì)6:AR

Image title

設(shè)計(jì)師需要跳出僅限屏幕內(nèi)的界面來,考慮到物理交互。增強(qiáng)現(xiàn)實(shí)開創(chuàng)了UI設(shè)計(jì)的新紀(jì)元,開辟了一種全新的思維方式。


2019年當(dāng)中,網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)將跳出固有模式。我們需要忘記固定在屏幕上的UI,相反,我們應(yīng)該強(qiáng)調(diào)在現(xiàn)實(shí)環(huán)境中發(fā)生的交互。


谷歌和蘋果已經(jīng)推出了自己的AR開發(fā)平臺(tái),ARCore和AEKit,它們?nèi)诤狭宋锢硎澜绾蛿?shù)字世界。


AR UI有不同實(shí)現(xiàn)方法:


參考某個(gè)對(duì)象,與現(xiàn)實(shí)世界物體產(chǎn)生羈絆和交互; 固定到屏幕空間,用戶需要以特定的形式固定鏡頭; 參考真實(shí)世界,充分結(jié)合現(xiàn)實(shí)物理環(huán)境。


因此,我們必須仔細(xì)思考AR體驗(yàn)的場(chǎng)景和功能。


2019年UI趨勢(shì)7:3D圖像

Image title

目前大眾市場(chǎng)對(duì)這項(xiàng)技術(shù)的需求很少,對(duì)網(wǎng)站來說也不常見。 盡管如此,專為平臺(tái)呈現(xiàn)的3D元素也是今年UI趨勢(shì)列表中的特色。


它接近尾聲,因?yàn)樗粌H生產(chǎn)成本很高,而且加載時(shí)間也更長(zhǎng)。 沒有人喜歡等待。



用戶希望平臺(tái)能夠立即加載。 任何為用戶旅程增加時(shí)間的元素都會(huì)讓人感到沮喪。


但我們不必完全放棄3D元素。Fauz-3D技術(shù)讓物體看起來是三維的,盡管在光線和陰影方面并不完全令人信服。


2019年UI趨勢(shì)8:動(dòng)態(tài)“原型

Image title

UI設(shè)計(jì)絕對(duì)不是產(chǎn)出一張張靜態(tài)的設(shè)計(jì)稿,而應(yīng)該是包含著設(shè)計(jì)思維,用戶流程,交互鏈接的動(dòng)態(tài)“原型”。


這其實(shí)不僅僅是意味著UI設(shè)計(jì)師的能力增長(zhǎng),也是產(chǎn)品得以快速實(shí)現(xiàn)落地的必要成長(zhǎng)。


設(shè)計(jì)不是一個(gè)單獨(dú)的工作,它和產(chǎn)品、開發(fā)甚至用戶是存在著千絲萬縷的關(guān)系。就拿和開發(fā)的關(guān)系來說,handoff design已經(jīng)是一個(gè)火熱的話題和趨勢(shì),設(shè)計(jì)和開發(fā)的協(xié)作,設(shè)計(jì)和產(chǎn)品的交流,都離不開一份“動(dòng)態(tài)”的“設(shè)計(jì)稿原型”。它傳達(dá)的信息至少包含(以摹客iDoc為例):


(1)智能標(biāo)注:

Image title

  1. 間距標(biāo)注
  2. 尺寸智能標(biāo)注
  3. 百分比標(biāo)注,兼容多屏幕分辨率
  4. 多選標(biāo)注,告別點(diǎn)擊
  5. 放大鏡,查看微小間距

(2)智能切圖

Image title

  1. 自動(dòng)切圖
  2. 自動(dòng)生成不同高倍率
  3. 自由切換平臺(tái)
  4. 下載全部切圖

(3)繪制交互

Image title


  1. 設(shè)置交互動(dòng)畫
  2. 設(shè)置返回鏈接
  3. 自動(dòng)跳轉(zhuǎn)
  4. 克隆交互


伴隨這一趨勢(shì),協(xié)作平臺(tái)將會(huì)噴涌出現(xiàn),比如ZeplineMockplus idoc,前者是更早的一個(gè)產(chǎn)品,后者是我2018年接觸到的新平臺(tái),都在有力的提醒我作為一個(gè)UI設(shè)計(jì)師改要增長(zhǎng)的能力和視野。同時(shí),我的工作效率乃至整個(gè)團(tuán)隊(duì)的效率也會(huì)提升。



總結(jié):2019年UI設(shè)計(jì)趨勢(shì)


1、排版和講故事


排版不僅是創(chuàng)建品牌形象的絕佳工具。將它與一個(gè)很棒的片段相結(jié)合,讓用戶能夠沉浸到故事當(dāng)中。


2、插圖和動(dòng)畫圖形


隨著19年的臨近,微動(dòng)畫越來越受歡迎了。它們通過交互幫助用戶區(qū)分屏幕上的元素。


3、顏色,漸變和重疊效果


重疊效果包括顏色,文本或圖像。 重疊可以創(chuàng)造空間感,從而創(chuàng)建更加結(jié)構(gòu)化的界面。


4、AI


在未來一年中,AI技術(shù)將繼續(xù)朝著更完美的方向發(fā)展,人機(jī)交互會(huì)變得更為平滑和一致。到2020年,語(yǔ)音在搜索引擎查詢的比重預(yù)期會(huì)達(dá)到50%。


5、VR


虛擬現(xiàn)實(shí)在ui趨勢(shì)中有著重要作用,并且這個(gè)地位短期內(nèi)不會(huì)動(dòng)搖。憑借它對(duì)用帶來的影響,我們可以把它稱為互聯(lián)網(wǎng)體驗(yàn)。


6、AR


設(shè)計(jì)師需要跳出僅限屏幕內(nèi)的界面來,考慮到物理交互。增強(qiáng)現(xiàn)實(shí)開創(chuàng)了UI設(shè)計(jì)的新紀(jì)元,開辟了一種全新的思維方式。


7、3D圖像


目前大眾市場(chǎng)對(duì)這項(xiàng)技術(shù)的需求很少,對(duì)網(wǎng)站來說也不常見。 盡管如此,專為平臺(tái)呈現(xiàn)的3D元素也是今年UI趨勢(shì)列表中的特色。


8、動(dòng)態(tài)“原型”


從handoff design而來的交互設(shè)計(jì)稿原型圖,包含自動(dòng)標(biāo)注和切圖,交互原型演示,評(píng)論批注和全貌畫板于一體,極大的促進(jìn)和產(chǎn)品、開發(fā)的寫作和交流。


總而言之,UX / UI設(shè)計(jì)師需要在工作中與創(chuàng)造力和創(chuàng)新為伴。 雖然我們無法避免一成不變的狀態(tài)的渴望,但是緊跟熱點(diǎn)并且充分利用起來至關(guān)重要。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。


用戶體驗(yàn)旅程圖 | 概念&實(shí)操&模板

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

讓產(chǎn)品(服務(wù))團(tuán)隊(duì)了解用戶使用過程中的看、想、聽、做,讓他們能夠從用戶角度去考慮產(chǎn)品、設(shè)計(jì)產(chǎn)品。

什么是用戶體驗(yàn)旅程圖?


概念&作用


從用戶角度出發(fā),以敘述故事的方式描述用戶使用產(chǎn)品或接受服務(wù)的體驗(yàn)情況,以可視化圖形的方式展示,從中發(fā)現(xiàn)用戶在整個(gè)使用過程中的痛點(diǎn)和滿意點(diǎn),最后提煉出產(chǎn)品或服務(wù)中的優(yōu)化點(diǎn)、設(shè)計(jì)的機(jī)會(huì)點(diǎn)。同時(shí)讓產(chǎn)品(服務(wù))團(tuán)隊(duì)了解用戶使用過程中的看、想、聽、做,讓他們能夠從用戶角度去考慮產(chǎn)品、設(shè)計(jì)產(chǎn)品。這個(gè)過程的產(chǎn)出物即為用戶體驗(yàn)旅程圖。









由什么構(gòu)成?


這里分為功能定義前和功能定義后;

定義前即為:準(zhǔn)備規(guī)劃做的功能、進(jìn)入用研階段時(shí);

定義后:已經(jīng)上線的功能、需要優(yōu)化的功能。

Image title

如何做?


1、創(chuàng)建用戶角色模型(用戶畫像)


既然旅程圖是梳理用戶使用產(chǎn)品上的體驗(yàn)問題,那么我們需要以用戶的真實(shí)情況為基準(zhǔn),這樣會(huì)使旅程圖更真實(shí)。


這里可以通過前期的用戶研究,比如:訪談?dòng)涗?、行為研究、調(diào)查問卷、意見反饋等方法,獲得大量真實(shí)有效的用戶數(shù)據(jù)。


然后對(duì)產(chǎn)品的主要目標(biāo)用戶進(jìn)行分類,并為每個(gè)用戶創(chuàng)建角色模型(包含基本信息、訴求、期望、痛點(diǎn)),每個(gè)角色將對(duì)應(yīng)不同的用戶體驗(yàn)地圖。


Image title




2、開始制作旅程圖


這里就以功能定義前為場(chǎng)景,因?yàn)橛脩舢嬒窈褪褂眯袨槭菃为?dú)知識(shí)體系,后面會(huì)單獨(dú)產(chǎn)出一篇關(guān)于用戶畫像的,敬請(qǐng)期待哦!


(1)為了便大家理解,我在這里列舉一個(gè)生活中都經(jīng)歷過的小栗子。



開始:起床

目標(biāo):到達(dá)公司


我們先回想一下今天早上起床的過程。把這段場(chǎng)景分成下面幾個(gè)階段:


一級(jí)行為:


Image title


起點(diǎn)和終點(diǎn)并不代表結(jié)束,要聯(lián)想到相關(guān)的場(chǎng)景,比如:到到達(dá)公司后,還有沒有有可能解決上班相關(guān)的問題?


Image title


(2)在真實(shí)做項(xiàng)目過程中,大家在這一步可能會(huì)寫出不同顆粒度的故事,需要設(shè)計(jì)師或產(chǎn)品經(jīng)理把控場(chǎng)景大小。這段場(chǎng)景可以再往下梳理一層顆粒度更小一點(diǎn)的場(chǎng)景,比如起床就可以再細(xì)分為:


二級(jí)行為:


Image title


剩下的場(chǎng)景模塊都可以繼續(xù)這樣細(xì)化并歸類。


Image title


這樣我們的主線場(chǎng)景就有兩個(gè)層級(jí):一級(jí)行為和二級(jí)行為,場(chǎng)景從左至右形成一個(gè)時(shí)間線。

但是,真實(shí)的用戶場(chǎng)景不會(huì)按照你所畫的順利進(jìn)行,情況會(huì)變得復(fù)雜、多變(交互設(shè)計(jì)師要考慮到異常情況和特殊場(chǎng)景的發(fā)生),這個(gè)時(shí)候我們可以借助流程圖的方式連接我們的場(chǎng)景:


Image title


(3)拆分場(chǎng)景

此時(shí),我們需要在剛剛梳理的每個(gè)二級(jí)行為下面停留,繼續(xù)細(xì)化二級(jí)行為,從中獲取更多的信息。


體驗(yàn)設(shè)計(jì)就是需要不斷地問“為什么”、不斷發(fā)掘潛在需求。


參與人員會(huì)圍繞這個(gè)行為場(chǎng)景寫出很多細(xì)節(jié)來。我們可以按照以下幾個(gè)維度對(duì)細(xì)節(jié)進(jìn)行歸類:


Image title


其中情緒曲線可以通過固定的問題獲得,也可以通過用戶想法、用戶的痛點(diǎn)結(jié)合主觀判斷。

在這個(gè)過程中,先限制時(shí)間,讓大家按照自己的想法寫出來,每條思考寫在一張卡片上,相互不干擾,然后每個(gè)人闡述自己的卡片內(nèi)容,讓參與者了解大致的信息


注意:要以完整的流程為中心,一定要廣度優(yōu)先,而非深度,比如起床這個(gè)故事里面,找衣服、穿衣服這類場(chǎng)景在這個(gè)階段我們無須關(guān)注,不要過早的沉浸到細(xì)節(jié)中。


Image title





完成上述步驟后,你將得到一份重要的節(jié)點(diǎn)清單,下面需要對(duì)重要的節(jié)點(diǎn)進(jìn)行分類,以便在繪制旅程圖時(shí)更加的方便。比較常用的做法是將所有關(guān)鍵節(jié)點(diǎn)寫在便利中并黏在墻上,然后將同類別的關(guān)鍵節(jié)點(diǎn)集中在一起,并為每個(gè)類別貼上分類標(biāo)簽。分類完成后,對(duì)核心的節(jié)點(diǎn)進(jìn)行篩選,移除掉重復(fù)、沒有價(jià)值的內(nèi)容。



(4)接下來,我們可以根據(jù)問題點(diǎn)的數(shù)量來衡量每個(gè)節(jié)點(diǎn)的情緒水平了。一般可以用積極、平靜、消極這三種情緒來表達(dá)用戶的使用感受。這一步做完,我們一眼就可以看出痛點(diǎn)在哪個(gè)環(huán)節(jié)上了。



(5)針對(duì)痛點(diǎn),討論可行的解決方案

先根據(jù)自己的經(jīng)驗(yàn),對(duì)標(biāo)競(jìng)品,設(shè)想一些解決方案,然后組織產(chǎn)品、設(shè)計(jì)、leader再進(jìn)行一次腦暴(核心人員即可,人多會(huì)導(dǎo)致喪失方向),讓大家一起進(jìn)入旅程圖,以用戶的角度再走一遍流程。在這個(gè)過程中,如果發(fā)現(xiàn)旅程圖中有偏差和遺漏的地方,大家就可以一起修改、補(bǔ)充、審核。



總結(jié)并通過可視化模板記錄:






Image title


最后,結(jié)合體驗(yàn)地圖行為的情緒曲線、設(shè)計(jì)的機(jī)會(huì)點(diǎn),梳理優(yōu)先級(jí):


a.對(duì)情緒的最高觸點(diǎn),思考還有沒有優(yōu)化的空間,能否將它繼續(xù)優(yōu)化做到;

b.對(duì)情緒的觸點(diǎn),思考是否能將其他觸點(diǎn)較高的地方,分擔(dān)一部分功能(次要功能)到觸點(diǎn),來均衡體驗(yàn)情感;

c.可以對(duì)標(biāo)競(jìng)品,看看別人是怎么解決問題的,尋找適合自己產(chǎn)品現(xiàn)階段的解決辦法。


補(bǔ)充:

大家發(fā)現(xiàn)沒有?參與人員在寫想法的時(shí)候,就是頭腦風(fēng)暴的過程,抓住機(jī)會(huì),通過一些開放式、引導(dǎo)式的提問來刺激大家腦暴出更多的內(nèi)容(有利于產(chǎn)品經(jīng)理和交互設(shè)計(jì)師獲取靈感)比如:

Image title





總結(jié):







Image title


另外,功能或痛點(diǎn)的解決優(yōu)先級(jí)可以通過四象限法則歸類,與旅程圖同時(shí)交付,

做到:用戶、場(chǎng)景、行為、問題、解決辦法、解決時(shí)間一目了然


Image title

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

上億人使用的百度網(wǎng)盤是如何做品牌升級(jí)的?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

文章包括品牌理念、品牌識(shí)別、APP大改版、品牌延伸。

△ 點(diǎn)擊查看完整視頻

一、項(xiàng)目背景

百度網(wǎng)盤是百度提供的個(gè)人云存儲(chǔ)服務(wù),自2012年上線至今,通過強(qiáng)大的技術(shù)能力以及承擔(dān)高額的帶寬成本,為7億用戶提供文件存儲(chǔ)、備份、分享、共享等服務(wù),成為行業(yè)領(lǐng)先位置。

這6年里,我們從滿足基礎(chǔ)存儲(chǔ)需求的一款工具,到現(xiàn)在越來越意識(shí)到高品質(zhì)和情感化的體驗(yàn)對(duì)于用戶的重要性。

因此,團(tuán)隊(duì)希望通過本次的品牌升級(jí),能夠從視覺識(shí)別、產(chǎn)品體驗(yàn)、線上線下推廣等多維度來傳遞品牌核心價(jià)值,同時(shí)遵從極簡(jiǎn)克制的百度「高級(jí)感」設(shè)計(jì)理念,形成一套完整統(tǒng)一的設(shè)計(jì)語(yǔ)言,真正的做到像 slogan 所傳遞的:「讓美好永遠(yuǎn)陪伴」。

二、品牌升級(jí)目標(biāo)

本次品牌升級(jí)希望傳遞用戶3個(gè)核心點(diǎn):更有溫度、更便捷、更年輕。

1. 為什么要「更有溫度」?

網(wǎng)盤一直以來存儲(chǔ)著用戶的美好回憶,比如:每一次難忘旅途的照片,寶寶成長(zhǎng)記錄,家人團(tuán)圓時(shí)的合影,激情工作時(shí)的陪伴。因此,它不僅僅是一款冰冷的工具,而是一個(gè)懂你的、有情感、有溫度的生活助手。

2. 為什么要「更便捷」?

過去幾年,網(wǎng)盤一直主打的品牌核心點(diǎn)是「安全」、「免費(fèi)」、「大空間」,不可否認(rèn)之前的品牌傳遞是成功的,因?yàn)橥ㄟ^這些核心點(diǎn),在同行業(yè)的用戶占有率達(dá)到80%以上。

但是,未來除了最基礎(chǔ)的「安全」以外,還需要傳遞什么感受呢?我們深知產(chǎn)品體驗(yàn)還有很大的提升空間,比如:如何讓產(chǎn)品更易用、存儲(chǔ)更便捷、查找更方便、瀏覽更沉浸等等。因此,「便捷」是接下來品牌需要傳達(dá)給用戶的核心價(jià)值。

3. 為什么要「更年輕」?

通過數(shù)據(jù)分析,網(wǎng)盤的用戶24歲左右占大多數(shù),也就意味著我們的主流群體是年輕人。除此之外,保持品牌的年輕化,也是每一個(gè)公司都希望做到的。

因此,本次品牌升級(jí),我們希望不管是從視覺層面,還是文案互動(dòng),以及運(yùn)營(yíng)手法,都更加年輕化及趣味性。

三、品牌理念滲透

品牌升級(jí)不是虛喊口號(hào),而是應(yīng)該通過各個(gè)設(shè)計(jì)觸點(diǎn)的配合給用戶傳達(dá)融合、一致的感受和體驗(yàn)。因此,我們從以下幾個(gè)場(chǎng)景進(jìn)行滲透:品牌識(shí)別、APP設(shè)計(jì)、品牌延伸。

1. 品牌識(shí)別

在品牌識(shí)別滲透環(huán)節(jié),涉及到以下幾個(gè)方面進(jìn)行優(yōu)化設(shè)計(jì):品牌色、品牌標(biāo)識(shí)、品牌字體。

品牌色

品牌色是用戶感知品牌最直觀的方式,比如:想到可口可樂就想到紅色,想到百事可樂就是藍(lán)色,想零度可樂就是黑色。對(duì),好的品牌色能夠占領(lǐng)用戶心智,從而產(chǎn)生聯(lián)想,這就是品牌色的重要性。

那么百度網(wǎng)盤呢?網(wǎng)盤的品牌不是從0到1的小而美的創(chuàng)新設(shè)計(jì),需要兼顧7億用戶量對(duì)品牌的已有認(rèn)知,這是一個(gè)令人頭疼的挑戰(zhàn)。

因此在品牌色的選擇上,考慮到較大改動(dòng)帶來的用戶認(rèn)知成本的增加,所以經(jīng)過多輪嘗試和討論后,決定延續(xù)用戶已有認(rèn)知的「紅藍(lán)」配色,在此基礎(chǔ)上,進(jìn)行調(diào)整并滲透新品牌的理念。

同時(shí),在品牌色上希望傳遞「更年輕」的品牌理念。我們大量收集體現(xiàn)「年輕」的場(chǎng)景進(jìn)行多輪討論篩選,提取色調(diào),結(jié)合情緒板,最終提煉并定義了我們的品牌色。

品牌標(biāo)識(shí)

在做品牌標(biāo)識(shí)(LOGO)階段,大家發(fā)散了很多想法,嘗試了很多方案。

通過多維度思考以及利弊權(quán)衡,最后選擇在延續(xù)原有 logo 特征上,體現(xiàn)新品牌理念——「更有溫度」的感受。

那么,現(xiàn)實(shí)生活中什么場(chǎng)景,會(huì)給人「有溫度的」感受呢?我們想到了擁抱、愛心、陽(yáng)光、火焰等等。最終覺得「微笑」更符合我們所傳遞的感受,同時(shí)也能更好的跟原有 LOGO 特征進(jìn)行結(jié)合。

以下是 LOGO 的設(shè)計(jì)思路,用顏色體現(xiàn)「年輕」,微笑體現(xiàn)「溫度」。

LOGO的最終造型:

品牌字體

LOGO 確定后,還需要設(shè)計(jì)與之搭配的品牌文字,這個(gè)階段最主要是找到跟品牌性格以及圖形風(fēng)格相契合的字體骨架。同時(shí)兼顧原有字體的認(rèn)知,在此基礎(chǔ)上進(jìn)行微調(diào)。比如:統(tǒng)一字體的粗細(xì),以及切角的角度,使整體視覺更加協(xié)調(diào)。

LOGO和字體組合的最終版本:

2. APP設(shè)計(jì)—NA端9.0全新升級(jí)

不可否認(rèn),傳遞品牌理念最直接的方式,就是在用戶使用它時(shí)。因此,我們對(duì)產(chǎn)品 NA端進(jìn)行9.0全新升級(jí)(這是自上線以來第一次大改版)。

品牌基因

在互聯(lián)網(wǎng)產(chǎn)品越來越同質(zhì)化的今天,做出有差異性和符合品牌調(diào)性的設(shè)計(jì)是我們面臨的挑戰(zhàn)。因此,在品牌基因方面,做了大量的嘗試。

經(jīng)過多輪討論,我們選擇以「積木」作為網(wǎng)盤的品牌基因。因?yàn)椤阜e木」陪伴著我們成長(zhǎng),代表著我們的童年,給人溫暖的感受,同時(shí),不同幾何形的積木看似單一,組合起來又有很多可能性,體現(xiàn)了年輕和趣味。

在圖形設(shè)計(jì)(ICON)時(shí),提取「積木」中的幾何元素進(jìn)行疊加處理,用色上更加鮮亮,突顯年輕化,形成網(wǎng)盤自己的圖形體系。

相比「尖銳」的直角,圓角給人柔和的視覺感受,同時(shí)經(jīng)過多輪的嘗試,最終確定圓角大小為8px。

同時(shí)在空白頁(yè)上延續(xù)圖形風(fēng)格,能夠更好的統(tǒng)一視覺語(yǔ)言,傳遞更加一致的品牌感。

動(dòng)效上,采用了符合「積木」運(yùn)動(dòng)特征的物理屬性。因此,運(yùn)動(dòng)節(jié)奏上利落的不拖泥帶水。比如,積木受到一個(gè)力,由于摩擦力會(huì)快速停止,而并非很Q 的彈性動(dòng)效。

下圖中,「藍(lán)球」代表目前網(wǎng)盤中元素的運(yùn)動(dòng)方式,「紅球」代表了市面上常見的彈性運(yùn)動(dòng)方式。

下圖,是將這種運(yùn)動(dòng)規(guī)則使用在產(chǎn)品界面中時(shí):

同時(shí)底部 tab 在運(yùn)動(dòng)節(jié)奏上,也采用相同的運(yùn)動(dòng)規(guī)律,賦予產(chǎn)品年輕活力的視覺感受,同時(shí)又不會(huì)喧賓奪主過度搶戲。

下拉刷新,是增強(qiáng)品牌記憶的最好體現(xiàn)。本次提取 logo 基本元素,同時(shí)強(qiáng)調(diào)「微笑」,加深用戶對(duì)品牌的印象。

功能設(shè)計(jì)

前面有提到,百度網(wǎng)盤保存著用戶非常多美好回憶的照片,或許那些回憶,用戶都已經(jīng)忘記,但往往這些才是最大的驚喜和感動(dòng)。

因此,9.0版本新增「故事」模塊,讓美好回憶與你不期而遇。通過技術(shù)對(duì)優(yōu)質(zhì)、精彩照片的篩選,生成故事卡片,推送給你,給你帶來溫暖。

為了節(jié)省用戶時(shí)間,傳遞品牌「更便捷」的理念,本次改版我們優(yōu)化「分類」模塊,將「分類」外置于首頁(yè)頂部,減少用戶操作步長(zhǎng),輕松查找自己的文件。

同時(shí)在首頁(yè)新增「最近」功能,方便用戶便捷查找歷史操作,而不是像以前,反復(fù)點(diǎn)擊層層相套的文件夾去瀏覽與查找。

排版布局

文件列表是用戶使用網(wǎng)盤最高頻的路徑,針對(duì)這個(gè)場(chǎng)景,我們遵循視覺服從功能,極簡(jiǎn)克制的百度「高級(jí)感」設(shè)計(jì)理念,通過視覺手段區(qū)分信息層級(jí),讓用戶瀏覽時(shí)「更便捷」。

因此,本次對(duì)文件列表排版布局,從以下幾個(gè)維度進(jìn)行優(yōu)化:大小、重量、間距。

大小

改版前,用戶打開文件列表,首先看到的是滿屏黃色的文件夾,而這些并不能幫助用戶進(jìn)行瀏覽或篩選,反而會(huì)造成視覺干擾。

因此,本次對(duì)文件圖標(biāo)大小,縮略圖尺寸,以及標(biāo)題信息大小,進(jìn)行整體調(diào)整,從而提升瀏覽效率。

重量

對(duì)于文件列表,信息層級(jí)重要性依次為:名稱>圖標(biāo)>時(shí)間,因此,本次優(yōu)化了視覺重量對(duì)比。

通過視覺重量的處理(對(duì)標(biāo)題字號(hào)加粗、顏色增強(qiáng)),讓用戶更加便捷的獲取有效信息。

間距

以下是舊版安卓端和改版后對(duì)比,去除頂部藍(lán)色雙導(dǎo)航的同時(shí),通過縮小文件圖標(biāo),進(jìn)而縮小列表間距。

同時(shí),調(diào)研行業(yè)內(nèi)有代表性產(chǎn)品的列表行間距,綜合分析對(duì)比,最終確定列表行間距為「180px」,平衡體驗(yàn)的同時(shí),讓用戶在首屏看到更多內(nèi)容。

還對(duì) NA端進(jìn)行統(tǒng)一的柵格化布局,讓頁(yè)面富有統(tǒng)一的秩序感和韻律。讓元素、模塊、頁(yè)面間距有規(guī)律可循。

柵格化布局落地全部界面:

以上,是品牌理念滲透到 APP 設(shè)計(jì)中,進(jìn)行9.0大改版的相關(guān)設(shè)計(jì),從品牌基因、功能設(shè)計(jì)到排版布局,統(tǒng)一的傳遞全新品牌理念。

3. 品牌延伸

線上線下的活動(dòng)和物料設(shè)計(jì),也是品牌和用戶的觸點(diǎn),在設(shè)計(jì)的時(shí)候需要延續(xù)整體的品牌調(diào)性,傳遞出統(tǒng)一的品牌感。

總結(jié)

以上,是百度網(wǎng)盤本次品牌升級(jí)背后的原因,以及相關(guān)體驗(yàn)設(shè)計(jì)優(yōu)化。從前期定義品牌核心理念(更有溫度、更便捷、更年輕),到通過不同場(chǎng)景及接觸點(diǎn)進(jìn)行滲透(品牌識(shí)別、APP設(shè)計(jì)、品牌延伸),線上線下多維度的傳達(dá)統(tǒng)一的品牌理念。所做的這一切,都是希望能為用戶提供更好的服務(wù)。

本次品牌升級(jí),是百度網(wǎng)盤所有同學(xué)努力的結(jié)果,我們深知還有很多體驗(yàn)需要提升,這次升級(jí)只是開始,會(huì)持續(xù)讓用戶感受到「讓美好永遠(yuǎn)陪伴」。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

高手總結(jié)的15個(gè)技巧,讓你輕松玩轉(zhuǎn)數(shù)據(jù)可視化!

資深UI設(shè)計(jì)者


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

大數(shù)據(jù)時(shí)代,數(shù)據(jù)驅(qū)動(dòng)決策。處理不好龐大、復(fù)雜的數(shù)據(jù),其價(jià)值將大打折扣。

那如何縮短數(shù)據(jù)與用戶的距離?讓用戶一眼抓到重點(diǎn)?讓老板為你的匯報(bào)方案鼓掌?

本文通過連環(huán)15關(guān),層層深入,傳你數(shù)據(jù)匹配圖形神功,讓數(shù)據(jù)可視化更。

無論數(shù)據(jù)總量和復(fù)雜程度如何,數(shù)據(jù)間的關(guān)系大多可分為三類:比較/構(gòu)成/分布&聯(lián)系。

一、比較

基于分類/時(shí)間的數(shù)據(jù)對(duì)比,通常需用到比較型圖表。用戶通過圖表輕松識(shí)別最大/最小值,查看當(dāng)前和過去的數(shù)據(jù)變動(dòng)情況。

常見場(chǎng)景:哪個(gè)地區(qū)的收件量最多?今年的收入和去年相比如何……

1. 條目少 – 柱狀圖

比較條目較少時(shí),如5個(gè)地區(qū)收件量的對(duì)比,可選用柱狀圖表示。

△ 柱狀圖

2. 條目多 – 條形圖

當(dāng)條目較多,如大于12條,移動(dòng)端上的柱狀圖會(huì)顯得擁擠不堪,更適合用條形圖。一般數(shù)據(jù)條目不超過30條,否則易帶來視覺和記憶負(fù)擔(dān)。

△ 條形圖

3. 看趨勢(shì) – 折線圖

當(dāng)X軸為連續(xù)數(shù)值(如時(shí)間)且注重變化趨勢(shì)時(shí),則適用折線圖。

△ 折線圖

4. 擴(kuò)大差異 – 南丁格爾玫瑰圖

除柱狀圖外,有無更新穎的表現(xiàn)方式呢?那就屬南丁格爾玫瑰圖了。

△ 南丁格爾玫瑰圖

由于扇形的半徑和面積是平方的關(guān)系,南丁格爾玫瑰圖會(huì)將數(shù)值之間的差異放大,適合對(duì)比大小相近的數(shù)值。它不適合對(duì)比差異較大的數(shù)值,因?yàn)閿?shù)值過小的類目會(huì)難以觀察。

此外,因?yàn)閳A有周期性,玫瑰圖也適于表示周期/時(shí)間概念,比如星期、月份。依然建議數(shù)據(jù)量不超過30條,超出可考慮條形圖。

5. 雙向 – 雙向條形圖

前面的例子都是單維度比較,當(dāng)比較正反兩類甚至更多維度的數(shù)據(jù)時(shí),可嘗試雙向條形圖,下圖為各大區(qū)的重點(diǎn)地區(qū)的收派件量的對(duì)比。

△ 雙向條形圖

用顏色區(qū)分大區(qū),空心/實(shí)心區(qū)分收件量和派件量,既能整體比較大區(qū),又能詳細(xì)對(duì)比地區(qū)的情況。

打怪升級(jí),再加點(diǎn)難度。在雙向圖上再增加一個(gè)維度,如下表,比較5個(gè)地區(qū)的利潤(rùn)及相應(yīng)的收入和成本。請(qǐng)先思考一下,再下滑看推薦圖表。

△ 業(yè)務(wù)數(shù)據(jù)

△ 雙向條形圖(多維度)

通過圖形一眼就能看出深圳區(qū)的利潤(rùn)低于廣州區(qū),即使它的收入高于廣州區(qū),但成本相對(duì)來說高于廣州區(qū)。

6. 目標(biāo)達(dá)成 – 子彈圖

實(shí)際業(yè)務(wù)中,常要考察指標(biāo)的達(dá)成情況,如收入達(dá)標(biāo)情況及所處區(qū)間(優(yōu)、良、差),如下表,你會(huì)怎么可視化呢?動(dòng)手畫一畫吧!

△ 業(yè)務(wù)數(shù)據(jù)

△ 子彈圖

子彈圖,因?yàn)橄褡訌椛浜髱С龅能壍?。相較于儀表盤,它能夠在狹小的空間中表達(dá)豐富的數(shù)據(jù)信息,在信息傳遞上有更大的效能優(yōu)勢(shì)。

若還要比較4個(gè)季度的收入情況,只需用不同顏色區(qū)分。如下圖,一眼便知第二季度表現(xiàn)較好,而第一季度則不佳。

△ 子彈圖

7. 性能 – 雷達(dá)圖

對(duì)于一些多維的性能數(shù)據(jù),如綜合評(píng)價(jià),常用雷達(dá)圖表示。指標(biāo)得分接近圓心,說明處于較差狀態(tài),應(yīng)分析改進(jìn);指標(biāo)得分接近外邊線,說明處于理想狀態(tài)。

△ 雷達(dá)圖

以上就是「比較」類的常用圖表,可歸納如下。

此表并非一成不變的「鐵表」,相互之間還會(huì)串聯(lián)交叉,大家還需靈活應(yīng)用。

二、構(gòu)成

部分相較于整體,一個(gè)整體被分成幾個(gè)部分。這類情況會(huì)用到構(gòu)成型圖表,如五大區(qū)的收件量占比、公司利潤(rùn)的來源構(gòu)成等。

1. 單層 – 餅狀圖

第1關(guān)中,對(duì)比5個(gè)地區(qū)的收件量時(shí)用到了柱狀圖。若看占比情況,餅狀圖更合適。

△ 餅狀圖

如果變成17個(gè)地區(qū),會(huì)怎樣?

像不像彩色七星瓢蟲?

所以餅圖分類一般不超過9個(gè),超過建議用條形圖展示。

除餅圖外,環(huán)形圖(甜甜圈圖)亦可表示占比,其差異是將餅圖的中間區(qū)域挖空,在空心區(qū)域顯示文本信息,比如標(biāo)題,優(yōu)勢(shì)是其空間利用率更高。

△ 環(huán)形圖

2. 分層 – 環(huán)形圖、旭日?qǐng)D

對(duì)于管理層而言,需先把握大局和重點(diǎn)。比如大區(qū)負(fù)責(zé)人需一眼看到重點(diǎn)地區(qū)及重點(diǎn)分部的情況(如下圖),如何展示?

△ 環(huán)形圖

△ 旭日?qǐng)D

這個(gè)叫旭日?qǐng)D,逐層下鉆看數(shù)據(jù),大區(qū)的重點(diǎn)地區(qū)及相應(yīng)分部的構(gòu)成情況一目了然。

3. 累計(jì)趨勢(shì) – 堆疊面積圖

接下來,看看數(shù)值構(gòu)成隨時(shí)間變化的案例:第一大區(qū)(包含四個(gè)重點(diǎn)地區(qū))近四年收入構(gòu)成的趨勢(shì)要如何可視化?自己想一想,再下滑看推薦方案。

△ 業(yè)務(wù)數(shù)據(jù)

△ 堆疊面積圖

推薦方案是堆疊面積圖,可以展現(xiàn)分量(地區(qū))對(duì)于總量(大區(qū))的貢獻(xiàn),并顯示總量(大區(qū))的變化過程。需要說明的是,地區(qū)收入的起點(diǎn)并非從 y=0 開始,而是在下面的地區(qū)基礎(chǔ)上逐層疊加,最后組成一個(gè)整體。

4. 累計(jì)比較 – 堆疊柱狀圖

如果將上圖X軸的標(biāo)簽文字(即年份)和圖例(即地區(qū))互換(如下圖A),用來看每個(gè)地區(qū)近四年的收入構(gòu)成,用哪個(gè)圖更合適?

△ 堆疊柱狀圖

是不是覺得都可以?那圖中 X1 有何含義?堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現(xiàn)累加值。差別在于,堆疊面積圖的 x 軸是連續(xù)數(shù)據(jù)(如時(shí)間),堆疊柱狀圖的 x 軸是分類數(shù)據(jù)。此案例中的 x 軸是非連續(xù)的分類數(shù)據(jù),因此用 B 方案更適合。

5. 累計(jì)增減 – 瀑布圖

若想表達(dá)兩個(gè)數(shù)據(jù)點(diǎn)間數(shù)量的演變過程,可使用瀑布圖。開始的一個(gè)值,在經(jīng)過不斷的加減后,得到一個(gè)值。瀑布圖將這個(gè)過程圖示化,常用來展現(xiàn)財(cái)務(wù)分析中的收支情況。

△ 瀑布圖

以上就是「構(gòu)成」類常用圖表,可歸納如下。

三、分布&聯(lián)系

通過分布&聯(lián)系型圖表能看到數(shù)據(jù)的分布情況,進(jìn)而找到某些聯(lián)系,如相關(guān)性、異常值和數(shù)據(jù)集群。

常見使用場(chǎng)景:客戶的年齡段分布?單票成本與收件量的關(guān)系?

1. 兩個(gè)變量 – 散點(diǎn)圖

仍以業(yè)務(wù)為例,下圖為全國(guó)網(wǎng)點(diǎn)的單票成本/收入分布情況。

△ 散點(diǎn)圖

單單這樣看,可能看不出什么,如果加兩條平均線就不一樣了。

加了平均線,就知道哪些網(wǎng)點(diǎn)高于平均線,哪些低于平均線。但網(wǎng)點(diǎn)那么多,總不能逐個(gè)點(diǎn)擊查看是哪個(gè)大區(qū)的,給散點(diǎn)加上顏色后,就很有意義了。

通過此圖,可以看出哪些大區(qū)單票利潤(rùn)較低,急需提升,比如廣泛聚集于右下角的第四大區(qū),單票收入低于平均線,單票成本卻高于平均線。

2. 三個(gè)變量 – 氣泡圖

大家都知道,網(wǎng)點(diǎn)總利潤(rùn)除了和單票利潤(rùn)有關(guān),還和體量(即收件量)有關(guān),用散點(diǎn)的面積大小表示收件量,就變成了氣泡圖。

△ 氣泡圖

3. 結(jié)合地圖 – 熱力圖

氣泡圖與地圖結(jié)合可演變?yōu)闊崃D。通過熱力圖,能看到哪些網(wǎng)點(diǎn)收派件量較多,需進(jìn)行資源調(diào)配。

△ 熱力圖

以上是 「分布&聯(lián)系」類的常用圖表,可歸納如下:

小結(jié)

當(dāng)我們拿到數(shù)據(jù)后,先提煉關(guān)鍵信息,明確數(shù)據(jù)關(guān)系及主題,再選擇合適的圖表進(jìn)行可視化。希望下圖能給各位一些參考(結(jié)合可視化專家 Andrew Abela 的圖表選擇指南,進(jìn)行了簡(jiǎn)化調(diào)整)。

數(shù)據(jù)可視化設(shè)計(jì)只要多練習(xí)、多總結(jié),總有一天會(huì)得心應(yīng)手。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

 

日歷

鏈接

個(gè)人資料

存檔