首頁

讓設(shè)計(jì)方案更具說服力的10個(gè)心理學(xué)原理!

seo達(dá)人


??????

 

1.格式塔原則 

相似原則

人的眼睛會(huì)把具有相似特征的元素當(dāng)成一個(gè)整體,認(rèn)為這些元素具有相同的作用。

圖片

▲ 界面中的綠色圖標(biāo)具有相同的功能,方便用戶快速認(rèn)知和操作。因此在設(shè)計(jì)具有相同功能或內(nèi)容的界面元素時(shí),應(yīng)該保持一致性。

應(yīng)用位置:導(dǎo)航、鏈接、按鈕、內(nèi)容頁。

 

連續(xù)原則

用戶傾向于把連續(xù)排列的元素視為一個(gè)整體。這條原則與對(duì)稱性和相似性密切相關(guān)。通過在序列上創(chuàng)建相似且重復(fù)的元素,引導(dǎo)用戶的視線方向,使操作更加連貫和清晰。

圖片

▲ 只露出一部分的卡片會(huì)向用戶發(fā)出信號(hào),表示滑動(dòng)可以查看更多的書。

應(yīng)用位置:菜單和子菜單、列表、產(chǎn)品頁、輪播頁。

 

封閉原則

當(dāng)看到不完整的圖像時(shí),我們會(huì)依據(jù)已有的經(jīng)驗(yàn)把不完全封閉的圖像當(dāng)成一個(gè)統(tǒng)一的整體,這是在平面或logo設(shè)計(jì)中常用到的原則。

圖片

▲ 盡管頁面右上方的餅圖只顯示了一部分,我們?nèi)匀荒軌蜉p松地識(shí)別出來。

應(yīng)用位置:圖標(biāo)、加載、數(shù)據(jù)可視化。

 

鄰近原則

人們會(huì)將彼此相鄰的元素視為一組。在設(shè)計(jì)時(shí)要注意使用間距將元素組合在一起。使用較大的間距來分隔大的內(nèi)容組,再使用較小的間距來分隔大內(nèi)容組中的小內(nèi)容組。

圖片

▲ 頁面上的每個(gè)卡片中都含有4組信息,很難快速識(shí)別具體的內(nèi)容。通過調(diào)整間距,可以將這些信息清楚地分為2組。

應(yīng)用位置:導(dǎo)航、卡片、橫幅、列表頁、分頁。

 

對(duì)稱原則

我們喜歡看到對(duì)稱且平衡的事物。它是所設(shè)計(jì)領(lǐng)域中最常用和最安全的原則,有助于營造一種穩(wěn)定感和秩序感。

圖片

▲ 對(duì)稱的布局不僅增強(qiáng)了用戶的印象,還強(qiáng)調(diào)了中間的視頻播放按鈕。

應(yīng)用位置:產(chǎn)品展示頁、列表、導(dǎo)航以及任何內(nèi)容豐富的頁面。

 

共同區(qū)域原則

通過信息分組和內(nèi)容組織,實(shí)現(xiàn)內(nèi)容的組合,有助于提升內(nèi)容的層次結(jié)構(gòu)和可掃描性。

圖片

▲ 卡片式UI有助于將信息分組并創(chuàng)建內(nèi)容的層級(jí)深度。

應(yīng)用位置:卡片、內(nèi)容、服務(wù)、摘要。

 

共同命運(yùn)原則

向同一方向移動(dòng)的元素被認(rèn)為比靜止或向另一個(gè)方向上移動(dòng)的元素更相關(guān)。這個(gè)原則有利于建立不同分組或狀態(tài)之間的關(guān)系。

圖片

▲ 頁面右側(cè)的3個(gè)圖形方向相同,有利于展示信息并讓用戶了解它們的功能。

應(yīng)用位置:導(dǎo)航/下拉、折疊條目、工具提示、產(chǎn)品滑塊、滾動(dòng)條。

 

2.焦點(diǎn) 

看東西時(shí),我們的視線往往會(huì)首先關(guān)注最突出的元素。理解這種行為有助于我們?cè)谠O(shè)計(jì)中創(chuàng)建一個(gè)“錨點(diǎn)”,從而引導(dǎo)用戶按照我們?cè)O(shè)計(jì)的場(chǎng)景查看內(nèi)容。

圖片

▲ 通過人物插畫將用戶的注意力引導(dǎo)到賬單和人數(shù)等主要信息上。

應(yīng)用位置:內(nèi)容、登錄頁、產(chǎn)品頁。

 

3.馮·雷斯托夫效應(yīng) 

又稱隔離效應(yīng),相對(duì)于普通事件或物體,獨(dú)特、有特色的事件或物體更容易被人記住。應(yīng)用此原則的元素通常獨(dú)立存在,不需要向用戶導(dǎo)航額外的信息。

圖片

▲ 中間的升級(jí)插畫部分在整個(gè)頁面上是獨(dú)立存在的,并且吸引注意力是號(hào)召性用語或轉(zhuǎn)化的關(guān)鍵。

應(yīng)用位置:價(jià)格表、促銷頁、圖標(biāo)入口。

 

4.本能反應(yīng) 

根據(jù)現(xiàn)實(shí)中的用戶行為創(chuàng)建視覺上引人入勝的體驗(yàn)。例如看幽默類視頻的時(shí)候,如果在視頻的高潮伴有笑聲音效,我們也會(huì)更容易跟著笑起來。

圖片

如果能讓用戶感覺良好和舒適,他們也會(huì)更喜歡我們的設(shè)計(jì)。

應(yīng)用位置:產(chǎn)品圖、插圖、攝影。

 

5.色彩心理學(xué) 

許多研究表明,顏色對(duì)我們的潛意識(shí)有特殊的影響。性別、宗教和文化對(duì)顏色的理解也有所不同。

圖片

▲ 關(guān)于顏色的運(yùn)用,這張色彩心理學(xué)海報(bào)介紹了豐富的方法。同時(shí)也要記住最廣泛使用的系統(tǒng)顏色:紅色代表錯(cuò)誤;綠色代表成功;藍(lán)色代表進(jìn)行中;黃色代表警告。

 

6.形狀心理學(xué) 

圖片

▲ 同顏色一樣,人們的潛意識(shí)對(duì)不同的形狀也有不同的反應(yīng):

圓形、橢圓形:傳達(dá)積極的信息,通常與社區(qū)或關(guān)系有關(guān);

正方形、三角形:傳達(dá)強(qiáng)烈的信息,通常與強(qiáng)度和穩(wěn)定性有關(guān);

垂直線:表示強(qiáng)度或力量。

水平線:表示平靜、相等或安靜。

 

7.雙重編碼理論 

這個(gè)理論解釋了人類需要視覺和語言信息來盡快處理信息。為了最大限度地提高設(shè)計(jì)的有效性,不應(yīng)該刪除必要的說明性文字。

圖片

▲ 大多數(shù)App的底部導(dǎo)航欄都利用圖標(biāo)與文字相結(jié)合的方式讓用戶快速知道功能。

 

另一個(gè)好的設(shè)計(jì)案例:

圖片

 

8.并行設(shè)計(jì) 

人眼傾向于看到平行因素比其他因素更相關(guān)。這一原理經(jīng)常用來對(duì)同一頁面中的兩組不同內(nèi)容進(jìn)行分類。

圖片

▲ 使用垂直排列的卡片代表相同的問題,水平排列的卡片代表不同的問題。

 

9.公共區(qū)域 

這一原理類似于格式塔原則中的相似原則。公共區(qū)域通過使用線、形狀或顏色劃分的方式創(chuàng)建。

圖片

▲ 如果頁面需要用戶不斷滾動(dòng)來查看內(nèi)容,可以考慮使用顏色來更清楚地劃分這些內(nèi)容,而不僅僅是使用間距。

 

10.掃描模式 

根據(jù)NNGroup、UXPin等設(shè)計(jì)團(tuán)體的研究,最常用的兩種掃描模式是“F型”和“Z型”:

“F型”應(yīng)用最為廣泛,尤其是對(duì)于內(nèi)容豐富的網(wǎng)站。

“Z型”用于那些文字信息少,最后需要強(qiáng)調(diào)用戶點(diǎn)擊類的網(wǎng)站。

關(guān)于掃描模式更詳細(xì)的內(nèi)容可以查看我之前的文章:如何構(gòu)建直觀有效的導(dǎo)航結(jié)構(gòu)(上)

了解如何使用這些模式后,我們就可以有效地選擇布局和安排元素來實(shí)現(xiàn)設(shè)計(jì)目標(biāo)。

 

最后 

第一印象是最令人難忘的,好的體驗(yàn)可以在用戶與產(chǎn)品之間建立持久的聯(lián)系。


作者:Hoang Nguyen

譯者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》讓設(shè)計(jì)方案更具說服力的10個(gè)心理學(xué)原理!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




干貨遲到了,但三魚不會(huì)讓它缺席2

seo達(dá)人

產(chǎn)品體驗(yàn)設(shè)計(jì)師的核心價(jià)值

一款產(chǎn)品,本質(zhì)是提供服務(wù)以解決某個(gè)用戶問題。因此產(chǎn)品體驗(yàn)設(shè)計(jì)師對(duì)整個(gè)業(yè)務(wù)的核心價(jià)值一定是解決用戶/業(yè)務(wù)問題,其次才是帶來美的感受?!爱a(chǎn)品設(shè)計(jì)師的價(jià)值取決于業(yè)務(wù)需要他貢獻(xiàn)出多大的價(jià)值”。如果你認(rèn)同這個(gè)觀點(diǎn),你就能理解接下來的兩個(gè)觀點(diǎn)。

 

交互創(chuàng)造價(jià)值的機(jī)會(huì)大于視覺

交互在工作流程上在視覺上游,產(chǎn)品問題的討論一定是先基于交互,所以在交互領(lǐng)域解決問題的機(jī)會(huì)遠(yuǎn)遠(yuǎn)多于視覺。因此在產(chǎn)品體驗(yàn)設(shè)計(jì)中,交互創(chuàng)造價(jià)值的機(jī)會(huì)往往大于視覺。所以我的建議是:體驗(yàn)設(shè)計(jì)師可以做純交互,但盡可能不要做純視覺,工作中一定要觸及交互部分。

 

B端體驗(yàn)設(shè)計(jì)創(chuàng)造價(jià)值的機(jī)會(huì)大于C端

價(jià)值,應(yīng)該是所有大廠設(shè)計(jì)師都被問到過的點(diǎn)。不管你的價(jià)值陳述對(duì)象是誰,本質(zhì)上都是陳述給業(yè)務(wù)方,區(qū)別僅僅是由你直接陳述給業(yè)務(wù)方,還是由你的上級(jí)將大家的價(jià)值匯總打包陳述給業(yè)務(wù)方。

所以,業(yè)務(wù)方愿意買單的價(jià)值才算價(jià)值。

作為一個(gè)C端B端都待過的設(shè)計(jì)師,我說說二者的特點(diǎn):

C端產(chǎn)品功能少+簡單(面向小白)、產(chǎn)品體驗(yàn)有競(jìng)品可參考,因此體驗(yàn)設(shè)計(jì)難度可控。

B端產(chǎn)品功能復(fù)雜+龐大、競(jìng)品參考成本高 (賽道小眾(無競(jìng)品)、專業(yè)門檻(跨行業(yè))、收費(fèi)門檻(企業(yè)版定制)),因此產(chǎn)品體驗(yàn)難度更大,業(yè)務(wù)只能依賴設(shè)計(jì)師所給出的體驗(yàn)方案。

從前文的觀點(diǎn)“產(chǎn)品設(shè)計(jì)師的價(jià)值取決于業(yè)務(wù)需要他貢獻(xiàn)多大的價(jià)值”來看,B端體驗(yàn)設(shè)計(jì)的難度更高,所以B端體驗(yàn)設(shè)計(jì)創(chuàng)造價(jià)值的機(jī)會(huì)應(yīng)該更大。

坊間傳言:tb的設(shè)計(jì)團(tuán)隊(duì)據(jù)說有上百人… dy的設(shè)計(jì)團(tuán)隊(duì)據(jù)說有數(shù)百人… wx的設(shè)計(jì)師連按鈕是圓角還是方角都要展開討論,還要做ABtest… 三魚講個(gè)小故事吧:

在C端的工作就好像在一艘裝滿水手的大船上

你在船上被分配到了負(fù)責(zé)擦拭桅桿的工作

你需要思考如何在擦桅桿的工作中展現(xiàn)自己的價(jià)值

于是你研究了不同擦拭工具的工作效率

研究不同溫度、濕度下的桅桿油漆磨損情況

你越研究越癡迷

這份工作看似簡單,但其實(shí)

有很多可以深挖的點(diǎn)

有很多值得研究的課題

甚至你的價(jià)值看起來還很好衡量

畢竟在大船上

哪怕是一根桅桿都會(huì)被天天使用

看來這真是一份有價(jià)值的工作

畢竟

體驗(yàn)設(shè)計(jì)就應(yīng)該做到嚴(yán)謹(jǐn)且錙銖必較嘛!

可以思考一下,倘若一個(gè)領(lǐng)域能創(chuàng)造價(jià)值的機(jī)會(huì)已經(jīng)很少了,那就意味著這個(gè)領(lǐng)域的競(jìng)爭會(huì)變得殘酷且事不由人。大家論證價(jià)值的成本越來越高,邊際收益越來越低,俗稱“內(nèi)卷”…

再來看看B端,B端體驗(yàn)設(shè)計(jì)師往往可以負(fù)責(zé)一個(gè)完整產(chǎn)品(甚至多個(gè)),設(shè)計(jì)師會(huì)負(fù)責(zé)產(chǎn)品的框架搭建、邏輯梳理、頁面設(shè)計(jì)、品牌、官網(wǎng)、運(yùn)營等一系列設(shè)計(jì)。有趣的是,由于B端設(shè)計(jì)往往都是創(chuàng)新項(xiàng)目,產(chǎn)品經(jīng)理其實(shí)對(duì)這個(gè)產(chǎn)品該是什么樣的也沒有清晰的認(rèn)知,最終的產(chǎn)品形態(tài)往往是設(shè)計(jì)師和產(chǎn)品經(jīng)理一同討論出來的,設(shè)計(jì)對(duì)業(yè)務(wù)的價(jià)值不言而喻。

如果還是套用那個(gè)故事,在B端工作,你所負(fù)責(zé)的可能是一艘小船,你的注意力不再是這艘小船的桅桿是否擦得夠嚴(yán)謹(jǐn)科學(xué),而是這條小船的航道、動(dòng)力、擴(kuò)建規(guī)劃等,這些將會(huì)更有意思。

工作難度決定價(jià)值,價(jià)值與職業(yè)壽命掛鉤,職業(yè)壽命決定了焦慮感。那三魚的建議也不言而喻。

 

動(dòng)態(tài)思維是B端交互很重要的能力

一直以來我們把動(dòng)效歸為視覺能力。但事實(shí)上,動(dòng)效背后的動(dòng)態(tài)思維應(yīng)該是交互尤其是B端交互必備的能力??纯聪旅孢@幾個(gè)案例中設(shè)計(jì)師所解決的問題。

案例1

下圖是AE的界面,當(dāng)用戶不選中任何圖層時(shí),點(diǎn)擊“形狀工具”,可以新建一個(gè)矢量圖形,但當(dāng)用戶選中某個(gè)圖層時(shí),再點(diǎn)擊“形狀工具”,該功能則變成了給用戶選中的圖層創(chuàng)建蒙版。我相信用過AE的人,都見識(shí)過這個(gè)鬼畜的交互:即同一個(gè)按鈕卻有兩種不同的含義。

Adobe After Effects-“形狀工具”

在我所負(fù)責(zé)的一款數(shù)據(jù)分析產(chǎn)品中,也遇到了類似的問題 (即用戶點(diǎn)擊圖表icon可以新建一個(gè)圖表,用戶選中某個(gè)已有圖表時(shí),再點(diǎn)擊圖表icon則是切換該圖表的類型)。

因此在2.0版我們嘗試將 “創(chuàng)建圖表” 和 “切換圖表類型” 兩種場(chǎng)景區(qū)分開??梢钥吹较聢D中,圖1和圖2都解決了這個(gè)的問題。但圖1的方式是直接將其拆分成兩套功能區(qū),雖然解決了問題,但也讓導(dǎo)航的內(nèi)容變得冗余。而圖2的方式則更為巧妙,拆分功能區(qū)的同時(shí),利用鼠標(biāo)的點(diǎn)擊和失焦,用動(dòng)效的方式讓用戶感知到場(chǎng)景的切換,不影響操作的同時(shí)還節(jié)約了導(dǎo)航空間。

 

案例2

在一款數(shù)據(jù)產(chǎn)品中,我們上線了一款新功能,對(duì)用戶有很大的學(xué)習(xí)成本,于是我們計(jì)劃在承接頁放一張功能全局流程圖,它既可以對(duì)新功能有一個(gè)系統(tǒng)的介紹,同時(shí)也可作為功能入口快速定位想要的模塊。但問題來了,由于功能復(fù)雜,導(dǎo)致流程圖上的信息體量太大,倘若完整展示,則會(huì)超出一屏空間,用戶就很難看清完整的功能流程。最終我們通過動(dòng)效手段,兼顧了“模塊介紹”和“流程展示”,這種展現(xiàn)形式也被業(yè)內(nèi)好評(píng),還被華為云等多家云服務(wù)廠商所借鑒,現(xiàn)在大家在很多B端產(chǎn)品中都能看到我們的影子。

 

案例3

以上兩個(gè)案例比較復(fù)雜,再舉兩個(gè)簡單的例子:B端產(chǎn)品限于專業(yè)性,表單信息通常很長,所以為了表單信息能盡可能完整展現(xiàn),我們?cè)谙吕蛘归_的瞬間,往外“借”了一部分空間,以展示更多的信息。

 

案例4

這是一個(gè)“邏輯表”,一個(gè)數(shù)據(jù)模型中通常有N個(gè)邏輯表,信息密度極大,因此我們要盡可能節(jié)約空間,所以我們?cè)诓挥绊懹脩羰褂眯实幕A(chǔ)上,把搜索框“收”了起來。

有沒有發(fā)現(xiàn)這幾個(gè)案例解決的都是交互問題,而且是直接影響用戶感知的交互細(xì)節(jié)問題。我們可以看到,在不具備動(dòng)態(tài)思維的時(shí)候,交互在面對(duì)“信息過載”這個(gè)B端繞不過去的課題時(shí),唯一的解法只有“平鋪”一招,但這招在面對(duì)復(fù)雜問題時(shí)明顯不夠用。而一旦具備動(dòng)態(tài)思維,交互設(shè)計(jì)師就可以從“時(shí)間(出現(xiàn)順序) + 空間(疊放層級(jí))”兩個(gè)維度對(duì)信息的展示進(jìn)行重組,解題能力將大幅提升。

不止是前文提到的“信息過載”… 諸如“提升操作效率”、“降低認(rèn)知成本”、“數(shù)據(jù)可視化”也全是B端體驗(yàn)中對(duì)用戶體驗(yàn)影響極大的課題,對(duì)于交互的工作,也不僅僅只有產(chǎn)品框架的梳理,還有產(chǎn)品細(xì)節(jié)的打磨,尤其是一款產(chǎn)品成長到后期,一定會(huì)圍繞體驗(yàn)細(xì)節(jié)精細(xì)化打磨,只靠“靜態(tài)平鋪”這一招恐怕遠(yuǎn)遠(yuǎn)不夠解題,而動(dòng)態(tài)思維能拓寬B端交互在細(xì)節(jié)上的解題思路,對(duì)交互而言是很重要的能力。

 

視覺創(chuàng)造價(jià)值的機(jī)會(huì)大于交互

我瘋了嗎?明明前面才說了“交互的機(jī)會(huì)大于視覺”。三魚解釋解釋:對(duì)業(yè)務(wù)而言,交互的機(jī)會(huì)往往大于視覺,但對(duì)設(shè)計(jì)師自己而言,“交互”是一種必備的但不易被證明的能力,反之“視覺”是一種錦上添花的但容易出彩的能力。

再說詳細(xì)一點(diǎn):在設(shè)計(jì)師的職場(chǎng)博弈中,“交互能力弱”有可能會(huì)成為你的短板,但“交互能力強(qiáng)”卻很難被塑造成你的長板,因?yàn)樗恼撟C成本極高,尤其是在B端復(fù)雜的業(yè)務(wù)場(chǎng)景下。與之相比,“視覺能力弱”往往不會(huì)成為一個(gè)設(shè)計(jì)師的短板,但“視覺能力強(qiáng)”則可能成為一個(gè)設(shè)計(jì)師的長版,因?yàn)樗恼撟C成本極低。不要小看論證成本,晉升答辯通常只有15-20分鐘,如果不能在極短時(shí)間內(nèi)論證清楚自己的能力(價(jià)值),就會(huì)很吃虧。所以短時(shí)間內(nèi)把自己的能力(價(jià)值)論證清楚極為重要。

根據(jù)我的經(jīng)驗(yàn),短時(shí)間內(nèi)將“交互”論證到“強(qiáng)”的難度遠(yuǎn)大于將“視覺”論證到“強(qiáng)”。所以成本最小、收益最大的方式應(yīng)該是將交互論證到“不弱”+將視覺論證到“強(qiáng)”的能力組合。

但現(xiàn)實(shí)是幾乎所有大公司的體驗(yàn)團(tuán)隊(duì),視覺設(shè)計(jì)師往往被交互設(shè)計(jì)師“壓著打”。因?yàn)椤敖换ァ笔潜貍淠芰?,“視覺”是錦上添花能力,“視覺能力弱”并不算短板,而“交互能力弱”卻是明顯的短板。在大部分設(shè)計(jì)師都談不上具備明顯長板的前提下,在職場(chǎng)博弈中,存在明顯短板的一方一定會(huì)輸,也就是說視覺一定會(huì)被交互壓著打。所以如前文所講,三魚建議:“體驗(yàn)設(shè)計(jì)師的工作一定要觸及交互部分”。

所以標(biāo)題可以完善一下:“在交互已不是短板的前提下,視覺創(chuàng)造價(jià)值的機(jī)會(huì)大于交互”。

 

三魚的做法

(這一段是題外話)既然講到這里,大概能理解三魚的做法了吧?我在站酷所發(fā)的作品,都是英文排版+動(dòng)效展示,目的就是只展現(xiàn)視覺的“強(qiáng)”,因?yàn)樗且环N觀眾只需要“看”就能感受到的、論證成本極低的能力,很適合線上場(chǎng)景。倘若有聽過三魚線下分享的同學(xué)就會(huì)發(fā)現(xiàn),同樣的作品我在線下會(huì)花很大的篇幅講出背后的交互思考,因?yàn)橐胝撟C清楚交互的“強(qiáng)”,就離不開闡述業(yè)務(wù)原理,這是需要觀眾付出“看+聽+提問互動(dòng)”的理解成本才能get到的,因此只有線下場(chǎng)景才比較適合展現(xiàn)出交互的“強(qiáng)”。

嗯,雖然前面說了交互的論證成本很大,但誰規(guī)定了“視覺”和“交互”必須要孤立論證。有機(jī)會(huì)我也分享一下體驗(yàn)設(shè)計(jì)該如何論證交互的“強(qiáng)”。

 

B端的劣勢(shì)

我不喜歡很多人鼓吹的“B端是一片藍(lán)海”,仿佛轉(zhuǎn)行B端就進(jìn)入職業(yè)發(fā)展的快車道一樣。三魚必須坦言,B端比起C端,同樣存在著極大的劣勢(shì):開發(fā)成本大就不多講了,B端產(chǎn)品往往服務(wù)于一小戳群體的工作,這些用戶群體本身數(shù)量較小,而且很多還是新興職業(yè),所以B端產(chǎn)品發(fā)展初期的用戶體量都很小。那么就帶來一個(gè)問題,一小戳用戶的收益往往短時(shí)間攤不掉研發(fā)成本,如果沒有公司戰(zhàn)略上的強(qiáng)投入,那么產(chǎn)品更新迭代將是極慢的,甚至90%的產(chǎn)品會(huì)因?yàn)槭找娌蛔?,永遠(yuǎn)停留在1.0版,也就意味著大部分B端產(chǎn)品可能連體驗(yàn)流程都無法閉環(huán),更別說打磨體驗(yàn)了。這些問題在C端不容易遇到,但在B端卻很常見。

這也就導(dǎo)致了開發(fā)資源都優(yōu)先投入到功能研發(fā)中,留給體驗(yàn)打磨的開發(fā)資源很有限,這會(huì)影響設(shè)計(jì)師的價(jià)值論證。我親眼見過一些設(shè)計(jì)師負(fù)責(zé)了很多1.0的B端項(xiàng)目,這些產(chǎn)品在幾個(gè)核心功能上線后,就停止更新迭代了,產(chǎn)品經(jīng)理和研發(fā)只在意核心功能能讓用戶用起來,至于體驗(yàn)是否流暢,流程是否閉環(huán),對(duì)他們而言并不重要。因此這些設(shè)計(jì)師忙了一年,卻沒有一個(gè)可以論證自己價(jià)值的體驗(yàn)設(shè)計(jì)故事。這在B端是一個(gè)普遍現(xiàn)象,是B端相對(duì)于C端的劣勢(shì)。那些只講B端的好,不講B端存在問題的言論是不負(fù)責(zé)的。

當(dāng)然,哪怕存在這樣的劣勢(shì),B端體驗(yàn)設(shè)計(jì)依托復(fù)雜業(yè)務(wù)所帶來的價(jià)值優(yōu)勢(shì)依然是C端無法比擬的。而B端的劣勢(shì)其實(shí)是可以克服掉的,也就是接下來我要分享的“干貨”。

 

干貨來了

先說說上次那篇文章中,我認(rèn)為通常情況下設(shè)計(jì)師要講出有價(jià)值的好故事主要靠兩點(diǎn):

1. 時(shí)+運(yùn):B端產(chǎn)品更新迭代慢,你如果有充足的耐心陪伴它成長,且它足夠好運(yùn)地成長起來了,且你也足夠好運(yùn)沒有被中途變更業(yè)務(wù),那么恭喜你總算等來了一個(gè)講出好故事的機(jī)會(huì)。但目前互聯(lián)網(wǎng)早就過了野蠻生長的時(shí)期,這種機(jī)會(huì)已經(jīng)越來越少了;

2. 權(quán)力:依靠你能調(diào)動(dòng)的資源,以體量來堆出一個(gè)好的體驗(yàn)故事,比如造輪子。好處是簡單粗暴,故事往降本提效上講業(yè)務(wù)肯定是買單的,缺點(diǎn)是輪子不能經(jīng)常造,造多了就不降本了。而且故事的效果受限于業(yè)務(wù)體量,有多大體量講多大故事,所以這種故事更多地適合大廠的管理層去講。但這似乎就把雞和蛋顛倒了,倘若設(shè)計(jì)都熬到這個(gè)位子上了,又何必來等我的“干貨”呢?

所以在過去兩者都不具備的前提下,我有一招自己的玩法。先來看一個(gè)案例:

https://www.zcool.com.cn/work/ZNTczNjg3MDg=.html

如果你把案例中的視頻看完,你大概能感受到這是一個(gè)涵蓋了產(chǎn)品框架、角色路徑、界面設(shè)計(jì)、品牌設(shè)計(jì)的還算蠻大而全的方案,雖然限于保密,對(duì)外只能看視覺,連Logo我都不敢多解釋兩句。所以我大致講講:一開始,產(chǎn)品經(jīng)理所提過來的需求僅僅只是幾個(gè)核心功能的設(shè)計(jì)需求,大概4-5頁原型圖,這時(shí)大部分設(shè)計(jì)師可能會(huì)按照原型圖把交互和視覺完善,然后產(chǎn)出設(shè)計(jì)稿的標(biāo)注和切圖,交付開發(fā)。

但三魚了解完業(yè)務(wù)之后,發(fā)現(xiàn)這個(gè)1.0的需求用戶的路徑并沒有閉環(huán),于是我繼續(xù)深入理解業(yè)務(wù),為產(chǎn)品定義了三種不同的使用角色,并根據(jù)每一種角色的訴求推導(dǎo)出場(chǎng)景和體驗(yàn)路徑,從而重新梳理了整個(gè)產(chǎn)品框架,補(bǔ)全了缺失場(chǎng)景。

然后將產(chǎn)品能力集成并可視化展現(xiàn)出來,最終交付了一套流程閉環(huán)、交互創(chuàng)新、視覺感知強(qiáng)烈的體驗(yàn)方案。

這套產(chǎn)出令業(yè)務(wù)很驚喜,也認(rèn)可了整套方案并愿意為之投入開發(fā)資源。但三魚實(shí)話告訴你,目前大半年過去了,我所提交的方案被開發(fā)上線的只有60%,因?yàn)槟壳暗挠脩趔w量實(shí)在支撐不起更多開發(fā)人力投入了,所以哪怕那40%的功能是對(duì)的,也需要很久以后才能開發(fā)上線。

但沒有關(guān)系,對(duì)我而言,我已經(jīng)得到了一個(gè)流程閉環(huán)、交互創(chuàng)新、視覺感知強(qiáng)烈、能充分反映設(shè)計(jì)價(jià)值的故事了。

這便是三魚的思路,概括下來就一句話:把1.0的需求按3.0的質(zhì)量產(chǎn)出。畢竟當(dāng)現(xiàn)實(shí)條件無法支撐你展示自己的價(jià)值,那就自己創(chuàng)造機(jī)會(huì)去展示。靠這個(gè)思路,當(dāng)別人還在耐心且不確定地等待業(yè)務(wù)慢慢成長時(shí),三魚已經(jīng)在短時(shí)間內(nèi)積累了大量優(yōu)質(zhì)故事,這也讓我的職場(chǎng)博弈占了優(yōu)勢(shì)。

這里有個(gè)問題:就是我創(chuàng)造的價(jià)值,并不是業(yè)務(wù)方當(dāng)下買單的價(jià)值,似乎與前面我所說的觀點(diǎn)有出入。

這里我要再講一個(gè)觀點(diǎn):設(shè)計(jì)對(duì)業(yè)務(wù)的價(jià)值不一定以設(shè)計(jì)師對(duì)當(dāng)前業(yè)務(wù)的價(jià)值為轉(zhuǎn)移。通俗來說,所有業(yè)務(wù)方都希望自己的產(chǎn)品是功能完善、流程閉環(huán)、體驗(yàn)舒適的,這個(gè)訴求可能會(huì)因?yàn)楫?dāng)下開發(fā)成本的短缺而被抑制,但卻是可預(yù)見的只要條件成熟業(yè)務(wù)就一定會(huì)產(chǎn)生的訴求。因此設(shè)計(jì)師主動(dòng)往前走一步的做法一定是業(yè)務(wù)方所認(rèn)可的,哪怕最后沒有開發(fā)人力落地這些設(shè)計(jì),業(yè)務(wù)方也清楚是現(xiàn)階段的業(yè)務(wù)水平所導(dǎo)致的,而不是去否定設(shè)計(jì)的價(jià)值。而對(duì)于設(shè)計(jì)師而言,只要你提供的設(shè)計(jì)方案是超預(yù)期的,總有一天會(huì)有優(yōu)質(zhì)的業(yè)務(wù)場(chǎng)景愿意為之買單 (意會(huì)) … 總之,“把1.0的需求按3.0的標(biāo)準(zhǔn)交付”是一條經(jīng)過三魚驗(yàn)證過的行之有效的手段。

以上輸出的都是認(rèn)知,認(rèn)知的提升會(huì)帶來成長的幻覺。但事實(shí)上,哪怕你知道了動(dòng)畫對(duì)交互的提升巨大,但不具備動(dòng)畫能力也是空談;哪怕你知道視覺創(chuàng)造價(jià)值的機(jī)會(huì)更大,視覺能力不夠成為你的長板也是空談;哪怕你知道把1.0的需求按3.0來產(chǎn)出收益巨大,你不具備3.0的視野也是空談… 認(rèn)知更像是臨門一腳的點(diǎn)破,手上功夫才是你的基本盤。

 

手上功夫的成長

最后聊聊成長,三魚的經(jīng)歷可能會(huì)給你一些參照吧。先附上我的培訓(xùn)班作品,這就是三魚最初的水平,那時(shí)我已是工作了兩年轉(zhuǎn)行的狀態(tài),年齡和經(jīng)驗(yàn)都很吃虧。

培訓(xùn)班作品-《愛情小管家》

但三魚運(yùn)氣還算好,趕在互聯(lián)網(wǎng)的末班車進(jìn)了大廠。這保證了我的成長環(huán)境至少是不錯(cuò)的,也更有機(jī)會(huì)接觸到一些好的產(chǎn)品、優(yōu)秀的設(shè)計(jì)師,能學(xué)到更多的東西 (說真的,當(dāng)初能進(jìn)大廠,也許有能力的加持,但更多的要?dú)w功于時(shí)代的運(yùn)氣)。

但進(jìn)了大廠也未必就踏上了快車道,大廠的競(jìng)爭很激烈,好的項(xiàng)目機(jī)會(huì)從來都是搶手貨。從培訓(xùn)班出來的我,因?yàn)闆]有工作經(jīng)驗(yàn),被分配去做廣告圖優(yōu)化,三魚先解釋一下這個(gè)工作:就是客戶在我們的產(chǎn)品中投放廣告,有些客戶投放的廣告點(diǎn)擊率并不理想,為了確??蛻舻耐茝V費(fèi)花得值 (不然人家不投了),于是我們會(huì)對(duì)一些不理想的廣告圖進(jìn)行設(shè)計(jì)優(yōu)化。對(duì)設(shè)計(jì)師來說,這些廣告圖的質(zhì)量參差不齊,且沒有源文件,優(yōu)化工作是一件繁瑣且低價(jià)值的事。這種事,很適合我這個(gè)剛轉(zhuǎn)行的菜鳥來干。下圖是一些我優(yōu)化過的廣告圖,這就是三魚在大廠一開始的主要工作。

廣告圖優(yōu)化

這對(duì)當(dāng)時(shí)的我來說已經(jīng)很滿足了,畢竟能創(chuàng)造價(jià)值、能挺過試用期三魚就謝天謝地了。于是我很認(rèn)真地完成手上的工作,還沉淀了一套廣告圖優(yōu)化“方法論”,比如把廣告圖分為電商、工具、游戲、社交等,每一種類別有特定的優(yōu)化方式,還附帶最后的數(shù)據(jù)驗(yàn)證… 嗯,這是我第一次接觸 “大廠套路”。

看我廣告圖優(yōu)化得還不錯(cuò),于是主管給我新增了一項(xiàng)任務(wù):我們團(tuán)隊(duì)每天都要在Facebook上發(fā)一條動(dòng)態(tài),每條動(dòng)態(tài)都會(huì)附一張配圖,所以每周我需要畫5張運(yùn)營配圖。

日常運(yùn)營支持

日常運(yùn)營配圖所要求的質(zhì)量并不高,倘若只是按可交差的水準(zhǔn)來產(chǎn)出設(shè)計(jì),這5張圖其實(shí)費(fèi)不了多少功夫,于是三魚決定利用富余的時(shí)間去錘煉自己的專業(yè)能力。具體來說:每周一業(yè)務(wù)方會(huì)告知本周需要繪制的5個(gè)主題,我會(huì)用一天的時(shí)間把其中4個(gè)主題快速地畫完交差,然后留一個(gè)自己最感興趣的主題,去設(shè)計(jì)平臺(tái)上學(xué)習(xí)新的風(fēng)格,并結(jié)合主題去創(chuàng)作。比如下圖的產(chǎn)品矩陣紀(jì)念日:https://www.zcool.com.cn/work/ZMTQ4MTQyMDg=.html  。就是花了心思去做的。

產(chǎn)品矩陣紀(jì)念日

再比如美食節(jié)活動(dòng):https://www.zcool.com.cn/work/ZMTUwNDk4NzY=.html  。我不僅嘗試了新的風(fēng)格,還給它加入了愛情故事。

還有一些名人名著的紀(jì)念日閃屏:https://www.zcool.com.cn/work/ZMTY3MTkzMjg=.html  。

于是我就一直用這種刻意練習(xí)的方式,把自己的手上功夫越練越扎實(shí)了。而對(duì)于業(yè)務(wù)方來說,本來預(yù)期就不高,偶爾還能收到三魚超預(yù)期的設(shè)計(jì)交付,自然是很欣喜的,于是對(duì)我的評(píng)價(jià)也很高。

隨著我的交付質(zhì)量不斷提升,業(yè)務(wù)方的預(yù)期也越來越高。一次在別的設(shè)計(jì)師的運(yùn)營事故中,業(yè)務(wù)方指名要三魚來設(shè)計(jì)。于是我站出來救了場(chǎng),這次事件過后,大家突然意識(shí)到我不是一個(gè)初入行的菜鳥了。

地球一小時(shí)

但三魚的目標(biāo)還是想往產(chǎn)品體驗(yàn)方向發(fā)展,但產(chǎn)品設(shè)計(jì)的機(jī)會(huì)是很稀缺的。但三魚隨即等來了一個(gè)機(jī)會(huì):我們的核心產(chǎn)品要進(jìn)行一次體驗(yàn)升級(jí),這種級(jí)別的項(xiàng)目只有最資深的設(shè)計(jì)師才能參與的。所以我們的主管選了三位資深設(shè)計(jì)師來比稿定方案。

三魚很積極地表示自己也想?yún)⑴c比稿,不僅表達(dá)了自己的職業(yè)規(guī)劃,還保證參與比稿不會(huì)耽誤手上的工作。由于我之前的工作中已經(jīng)積累了不錯(cuò)的口碑,主管同意了我的請(qǐng)求。

我很珍惜這樣的機(jī)會(huì),于是一口氣出了兩套方案 (都在站酷中)。

但現(xiàn)實(shí)很殘酷,大家并不認(rèn)可我作為一個(gè)設(shè)計(jì)新人的實(shí)力,我的方案在一開始的內(nèi)部評(píng)審中就被提前“斃掉”了 (其實(shí)這很正常,沒有人會(huì)相信一個(gè)新入行的設(shè)計(jì)師的實(shí)力)。不過主管考慮到我認(rèn)真的態(tài)度,雖然讓我失去了上臺(tái)提案資格,但還是把我的兩套方案作為“更多風(fēng)格探索”放在PPT的最后了…

三魚的兩套方案

但戲劇性的一幕又來了,提案的過程很不順利。可能是因?yàn)槟菚r(shí)流行扁平風(fēng),但過于千篇一律導(dǎo)致幾個(gè)大領(lǐng)導(dǎo)看膩了,反而認(rèn)為我這種帶質(zhì)感的方案讓人耳目一新。結(jié)果我的陪跑方案居然奇跡般地被采納了…

這可把三魚牛逼壞了,當(dāng)晚我把這個(gè)結(jié)果告訴小白,小白叮囑我:“這個(gè)時(shí)候很尷尬,這么重要的項(xiàng)目不可能完全交給你這個(gè)新人來負(fù)責(zé),你現(xiàn)在最好的做法是一定要低調(diào),明天去了公司別吭聲,等你的主管來找你聊,聽安排就是了,切記切記,我看你已經(jīng)飄得不行了”!

于是第二天三魚全程裝蒜,默默地等待著。果然!主管來找我了,希望我能加入到產(chǎn)品改版的項(xiàng)目中來,她會(huì)安排一位資深設(shè)計(jì)師帶著我一起做,至于我手上目前的工作,就交接給其他設(shè)計(jì)師吧。于是三魚開開心心地服從了安排。

噢對(duì),由于原來業(yè)務(wù)方對(duì)我實(shí)在太滿意了,這次的業(yè)務(wù)調(diào)整,那些業(yè)務(wù)方紛紛跑去請(qǐng)求我的主管“讓三魚再為我們畫最后一張吧…” 我也被主管戲稱為設(shè)計(jì)團(tuán)隊(duì)的“頭牌”。

寫到這里,三魚算不算靠努力與運(yùn)氣就走上快車道了?事實(shí)上還早… 目前為止我的手上功夫還僅限于PS用得不錯(cuò)罷了,其它能力為0。而能力的欠缺很快就讓我遇到了難題。

那就是:動(dòng)效設(shè)計(jì)師不干了。

以前的一些大廠會(huì)設(shè)置專門的動(dòng)效設(shè)計(jì)崗,由一位擅長動(dòng)畫軟件的同學(xué)來幫其他設(shè)計(jì)師實(shí)現(xiàn)動(dòng)畫上的創(chuàng)意演示,但這種“只能替別人實(shí)現(xiàn)創(chuàng)意”的工作模式,對(duì)動(dòng)效設(shè)計(jì)師的職業(yè)成長不利,于是越來越多動(dòng)效設(shè)計(jì)師轉(zhuǎn)行去做產(chǎn)品體驗(yàn)。

這可苦了那些不會(huì)做動(dòng)效的設(shè)計(jì)師 (包括三魚),工具類的產(chǎn)品,對(duì)動(dòng)效的要求比較高,倘若沒人替自己實(shí)現(xiàn)腦海里的動(dòng)畫創(chuàng)意,工作對(duì)接就很吃力了。

所以只好去學(xué)。三魚覺得動(dòng)效比3D還難學(xué),它難在幾乎找不到針對(duì)性的動(dòng)畫教程,那時(shí)我能從網(wǎng)上找到的動(dòng)畫教程全是教“影視后期”的??蓻]辦法,只能硬著頭皮學(xué),不然我的創(chuàng)意就不得不妥協(xié)于手上功夫了。于是三魚一路東拼西湊,艱難地把動(dòng)效學(xué)會(huì)了。

下圖是我做的第一個(gè)動(dòng)效,一開始我只會(huì)簡單的位移旋轉(zhuǎn),動(dòng)畫雖然生硬,但好在PS畫的素材質(zhì)量本身不錯(cuò)。

這是一年以后的水平,那時(shí)我已經(jīng)能3D+動(dòng)效結(jié)合著玩了。

說到3D能力,也是在這期間,我和小白一起報(bào)名了第一期的白無常C4D課程培訓(xùn)班 (三魚喜歡抱團(tuán)學(xué),可以互相監(jiān)督,一個(gè)人學(xué)很容易半途而廢),我還把學(xué)到的東西應(yīng)用到了實(shí)際工作案例中。

當(dāng)我把這兩張圖發(fā)給白無常老師看的時(shí)候,老師很詫異:“我沒有教角色建模呀”?其實(shí)圖里的熊是PS畫的,說明那時(shí)我的PS水平已經(jīng)比較強(qiáng)了。

說到PS繪畫,這種風(fēng)格受李舜影響比較大。在李舜的風(fēng)格剛出現(xiàn)的時(shí)候,我覺得很驚艷,就去學(xué)習(xí)了她的畫法 (她寫過一篇教程,感興趣的朋友可以去她的站酷找找)。下圖的IP算比較出名的了,因?yàn)檫@套作品時(shí)不時(shí)被我發(fā)現(xiàn)放在了某些淘寶店里掛羊賣狗…

那段時(shí)間是我過得最快樂的時(shí)候,我同時(shí)負(fù)責(zé)產(chǎn)品體驗(yàn)和品牌設(shè)計(jì),包容的大廠環(huán)境也給了我學(xué)習(xí)和應(yīng)用新技能的空間,一年的時(shí)間我的手上功夫突飛猛進(jìn)。

再后來去了福廠,那是三魚最痛苦、但也是成長最大的經(jīng)歷:

我遇到了一個(gè)很糟糕的主管,在福場(chǎng)的三年多時(shí)間里,三魚一方面依托平臺(tái)加速成長,一方面對(duì)抗來自主管的PUA,并最終完成了反殺。細(xì)節(jié)不多講了,說說最后的結(jié)果吧:這三年里,我的績效全是最優(yōu)(憑借著無法否定的能力和成果,三魚逼著主管給自己打了好績效),反觀這位主管,三年里有兩年拿了最差績效,最后被迫轉(zhuǎn)崗…

我在福廠的成長不僅是手上功夫,更多的成長是“認(rèn)知”,而后者對(duì)我的職業(yè)突破起了決定性作用。但這段經(jīng)歷很痛苦,如果說在百度的成長是技能上的成長,它是一個(gè)逐漸變好的過程,是愉快的,那么在福廠的經(jīng)歷更像是把人打碎以后的重塑,因?yàn)檎J(rèn)知的成長一定是伴隨著否定、懷疑、焦慮的,三魚在其中艱難地探索出了一條可能是對(duì)的的路,以后有機(jī)會(huì)再慢慢分享吧。

回想起來,三魚算幸運(yùn)的,我趕上了互聯(lián)網(wǎng)的末班車,在狼廠寬容的環(huán)境下鍛煉了能力,在福場(chǎng)如日中天的階段實(shí)現(xiàn)了個(gè)人的成長。但三魚也是不容易的,我的成長經(jīng)歷并沒有大家臆想的那么一帆風(fēng)順。大廠的競(jìng)爭非常慘烈,被打碎以后是一蹶不振還是再重塑?這么多大廠設(shè)計(jì)師,能出頭的有幾個(gè)?玩明白的又有幾個(gè)?

 

寫在最后

這篇文章真長,如果你能耐心讀完… 嗯,算你厲害。我最后再總結(jié)一下吧:

前半部分講了認(rèn)知,是三魚基于自身環(huán)境所形成的認(rèn)知,但這些認(rèn)知希望大家斟酌著看:第一,它是基于三魚的成長路徑和自身?xiàng)l件所得出的,未必適合所有人;第二,行業(yè)是不斷發(fā)展的,認(rèn)知也不會(huì)一成不變,也許一年以后這套認(rèn)知就失效了。

后半部分講了成長,當(dāng)然主要集中在專業(yè)上的成長,這也是目前大部分設(shè)計(jì)師更需要的,也是比較適合在站酷分享給大家的。

認(rèn)知可以讓你們前進(jìn)的過程中少走彎路,但是技能才是推動(dòng)你前進(jìn)的核心動(dòng)力。三魚能講的東西還有很多,后續(xù)再慢慢聊。

 

原文地址:站酷

作者:三魚先生

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》干貨遲到了,但三魚不會(huì)讓它缺席2

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



B端產(chǎn)品-BI分析工具

seo達(dá)人



(本作品所有數(shù)據(jù)均已脫敏,非真實(shí)數(shù)據(jù),知識(shí)產(chǎn)權(quán)屬快手所有,未經(jīng)許可不得轉(zhuǎn)載)


作者:三魚先生

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》B端產(chǎn)品-BI分析工具

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



數(shù)據(jù)可視化與信息可視化淺談!

seo達(dá)人


1.柱狀圖

2

適用場(chǎng)景:它的適用場(chǎng)合是二維數(shù)據(jù)集(每個(gè)數(shù)據(jù)點(diǎn)包括兩個(gè)值x和y),但只有一個(gè)維度需要比較。
優(yōu)勢(shì):柱狀圖利用柱子的高度,反映數(shù)據(jù)的差異。肉眼對(duì)高度差異很敏感,辨識(shí)效果非常好。
劣勢(shì):柱狀圖的局限在于只適用中小規(guī)模的數(shù)據(jù)集。

2.折線圖

3

適用場(chǎng)景: 折線圖適合二維的大數(shù)據(jù)集,尤其是那些趨勢(shì)比單個(gè)數(shù)據(jù)點(diǎn)更重要的場(chǎng)合。它還適合多個(gè)二維數(shù)據(jù)集的比較。
優(yōu)勢(shì):容易反應(yīng)出數(shù)據(jù)變化的趨勢(shì)。

3.餅圖

4

適用場(chǎng)景:適用簡單的占比圖,在不要求數(shù)據(jù)精細(xì)的情況下可以適用。
劣勢(shì):餅圖是一種應(yīng)該避免使用的圖表,因?yàn)槿庋蹖?duì)面積大小不敏感。

4.漏斗圖

5

適用場(chǎng)景:漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的流程分析,通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較,能夠直觀地發(fā)現(xiàn)和說明問題所在。
優(yōu)勢(shì):能夠直觀地發(fā)現(xiàn)和說明問題所在。在網(wǎng)站分析中,通常用于轉(zhuǎn)化率比較,它不僅能展示用戶從進(jìn)入網(wǎng)站到實(shí)現(xiàn)購買的最終轉(zhuǎn)化率,還可以展示每個(gè)步驟的轉(zhuǎn)化率。
劣勢(shì):單一漏斗圖無法評(píng)價(jià)網(wǎng)站某個(gè)關(guān)鍵流程中各步驟轉(zhuǎn)化率的好壞。

5.地圖

7

適用場(chǎng)景:適用于有空間位置的數(shù)據(jù)集。
優(yōu)劣勢(shì):特殊狀況下使用。

6.雷達(dá)圖

8適用場(chǎng)景:雷達(dá)圖適用于多維數(shù)據(jù)(四維以上),且每個(gè)維度必須可以排序。但是,它有一個(gè)局限,就是數(shù)據(jù)點(diǎn)最多6個(gè),否則無法辨別,因此適用場(chǎng)合有限。
劣勢(shì):需要注意的時(shí)候,用戶不熟悉雷達(dá)圖,解讀有困難。使用時(shí)盡量加上說明,減輕解讀負(fù)擔(dān)。

數(shù)據(jù)可視化使用小貼士
餅圖順序不當(dāng)

9

(最好的做法是將份額最大的那部分放在12點(diǎn)方向,順時(shí)針放置第二大份額的部分,以此類推。)

2.在線狀圖中使用虛線

10

(虛線會(huì)讓人分心,用實(shí)線搭配合適的顏色更容易區(qū)分。)

3.數(shù)據(jù)被遮蓋

11

(確保數(shù)據(jù)不會(huì)因?yàn)樵O(shè)計(jì)而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數(shù)據(jù)。)

4. 耗費(fèi)用戶更多的精力

12

(通過輔助的圖形元素來使數(shù)據(jù)更易于理解,比如在散點(diǎn)圖中增加趨勢(shì)線。)

5.柱狀過寬或過窄
13

(經(jīng)過調(diào)研,柱子的間隔最好調(diào)整為寬的1/2。)

6.?dāng)?shù)據(jù)對(duì)比困難

14

(選擇合適的圖表,讓數(shù)據(jù)對(duì)比更明顯直接。上圖的數(shù)據(jù)作用是為了比較,顯然,柱狀圖比餅圖在視覺上更易于比較。)

7.錯(cuò)誤呈現(xiàn)數(shù)據(jù)

15

(確保任何呈現(xiàn)都是準(zhǔn)確的,比如,上圖氣泡圖的面積大小應(yīng)該跟數(shù)值一樣。)

8.不要過分設(shè)計(jì)

16

(清楚標(biāo)明各個(gè)圖形表示的數(shù)據(jù),避免用與主要數(shù)據(jù)不相關(guān)的顏色,形狀干擾視覺。)

9. 數(shù)據(jù)沒有很好歸類,沒有重點(diǎn)區(qū)分

17

(將同類數(shù)據(jù)歸類,簡化色彩,幫助用戶更快理解數(shù)據(jù)。上圖的第一張沒有屬于同類型手機(jī)中不同系統(tǒng)進(jìn)行顏色上的歸類,從而減少了比較的作用。下圖就通過藍(lán)色系很好的把iPhone,Android,WP版歸為一類,很好的與iPad版,其他比較。)

10.誤導(dǎo)用戶的圖表

18

(要客觀反映真實(shí)數(shù)據(jù),縱坐標(biāo)不能被截?cái)?,否則視覺感受和實(shí)際數(shù)據(jù)相差很大。左圖的數(shù)據(jù)起始點(diǎn)被截?cái)鄰?0開始。)

信息可視化案例
信息可視化囊括了數(shù)據(jù)可視化,信息圖形,知識(shí)可視化,科學(xué)可視化,以及視覺設(shè)計(jì)方面的所有發(fā)展與進(jìn)步。下面是信息可視化的案例分享。
19
(上圖為關(guān)系網(wǎng)——基于60000封電子郵件存檔數(shù)據(jù),用不同顏色深度的線條呈現(xiàn)了地址簿中用戶和個(gè)體之間的關(guān)系,比如回復(fù)、發(fā)送、抄送。)

20
(上圖通過數(shù)據(jù)化的比較,用變形的柱狀圖等圖形,形象的展示了不同國家老師的收入水平,社會(huì)包括學(xué)生和公眾對(duì)其的尊重度。)

如何制作信息可視化?
第一步:確定表意正確明確信息圖表達(dá)內(nèi)容,確定最主要的表現(xiàn)內(nèi)容。
第二步:優(yōu)化展現(xiàn)形式內(nèi)容正確還不夠,還要易懂。我們需要在這個(gè)步驟里尋找信息圖最優(yōu)表現(xiàn)形式,讓讀者 一目了然,降低理解難度。
第三步:探索視覺風(fēng)格在探索視覺風(fēng)格時(shí)要注意抓大放小,先定下來最主要模塊的風(fēng)格,再做延展。
第四步:完善細(xì)節(jié)視覺風(fēng)格確定后,可根據(jù)需要添加、完善細(xì)節(jié)。
第五步:風(fēng)格延展“一致”的視覺設(shè)定有助于用戶理解,也能更好的提升品牌形象。所以主風(fēng)格確定后,我們需要把它延展到其它有需要的頁面上。

以上是分享了數(shù)據(jù)可視化和信息可視化相關(guān)內(nèi)容,不過信息可視化和數(shù)據(jù)可視化是兩個(gè)容易混淆的概念,基于數(shù)據(jù)生成的數(shù)據(jù)可視化和信息可視化這兩者在現(xiàn)實(shí)應(yīng)用中非常接近,并且有時(shí)能夠互相替換使用。但是這兩者其實(shí)是不同的,數(shù)據(jù)可視化是指那些用程序生成的圖形圖像,這個(gè)程序可以被應(yīng)用到很多不同的數(shù)據(jù)上。信息可視化是指為某一數(shù)據(jù)定制的圖形圖像,它往往是設(shè)計(jì)者手工定制的,只能應(yīng)用在那個(gè)數(shù)據(jù)中。信息可視化的代表特征:具體化的,自解釋性的和獨(dú)立的。為了滿足這些特征,這個(gè)圖是需要手工定制的。 并沒有任何一個(gè)可視化程序能夠基于任一數(shù)據(jù)生成這樣具體化的圖片并在上面標(biāo)注所有的解釋性文字。
數(shù)據(jù)可視化則是普適的,比如平行坐標(biāo)圖并不因?yàn)閿?shù)據(jù)的不同而改變自己的可視化設(shè)計(jì)。可視化的強(qiáng)大的普適性能夠使用戶快速應(yīng)用某種可視化技術(shù)在一些新的數(shù)據(jù)上,并且通過可視化結(jié)果圖像理解新數(shù)據(jù),與針對(duì)已知特定數(shù)據(jù)進(jìn)行信息可視化設(shè)計(jì)繪制相比,用戶更像是通過對(duì)數(shù)據(jù)進(jìn)行可視化的應(yīng)用來學(xué)習(xí)和挖掘數(shù)據(jù),而普適性的數(shù)據(jù)可視化技術(shù)本身并沒有解釋數(shù)據(jù)的功能。

(感謝數(shù)據(jù)平臺(tái)組同仁們對(duì)此文章的貢獻(xiàn),感謝魏茜璐的視覺配圖。)

文章來源:京東設(shè)計(jì)中心

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化與信息可視化淺談!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



數(shù)據(jù)可視化設(shè)計(jì)淺析與研究(一)

seo達(dá)人

一. 數(shù)據(jù)可視化歷史淵源

從人類誕生之日起,便有了信息的呈現(xiàn)形式,并伴隨著人類發(fā)展足跡不斷變遷。如今出現(xiàn)的任何信息可視化類型,并非一夜之前突現(xiàn)的新物種,幾乎都是從過去經(jīng)典的表達(dá)式中發(fā)展而來。

17000 年前

如果你問最早的信息圖表設(shè)計(jì)師是誰,很多學(xué)者認(rèn)為是遠(yuǎn)古時(shí)代的洞穴人,他們是最早用圖像描繪成日常生活比如戰(zhàn)斗,野生動(dòng)物、死亡和慶?;顒?dòng)等等。

法國發(fā)現(xiàn)的洞穴繪畫遺址-拉斯科壁畫,距今約17000年

 

公元前 3000 年

古埃及象形文字,作為那時(shí)的正式書寫系統(tǒng),開始使用符號(hào)來代表字母和概念,可追溯到公元前3000年。

 

公元前 550 年

希臘哲學(xué)家阿那克西曼德創(chuàng)造了第一個(gè)出版的世界地圖,這可以說是最早的可視化地圖了。

 

公元 950 年

歐洲人畫出了基于時(shí)間變化的折線圖,用于展示太陽,月亮等行星的位置變化趨勢(shì),開始出現(xiàn)如今的數(shù)據(jù)圖表的雛形。

 

17 世紀(jì)

統(tǒng)計(jì)圖形之父威廉·普萊費(fèi)爾,發(fā)明了我們今天經(jīng)常使用的折線圖和條形圖,也被認(rèn)為創(chuàng)建了面積和餅圖。普萊費(fèi)爾是蘇格蘭工程師和政治經(jīng)濟(jì)學(xué)家,并在1786年出版了商業(yè)和政治地圖集。

智能時(shí)代

隨著時(shí)代的發(fā)展,智能時(shí)代AR、VR 技術(shù)的興起,我們開始看多更多新穎的的數(shù)據(jù)可視化形式。

1992-2010年內(nèi)世界小型武器和彈藥的進(jìn)出口貿(mào)易數(shù)據(jù)展示

 

“里約+20”地球峰會(huì)期間的Twitter話題匯集成一顆顆大樹

 

二. 認(rèn)識(shí)主流可視化圖表

如今隨著科學(xué)技術(shù)的發(fā)展,已經(jīng)沉淀出豐富且經(jīng)典耐用的信息可視化表達(dá)。無論在傳統(tǒng)的紙質(zhì)媒體,還是如今手機(jī)、電腦,電視等各類終端的電子媒體都得以大放異彩。目前,各大可視化工具中有非常詳盡的圖表類型介紹,比如 Excel2010 的版本里面,提供了 10 類共 53 個(gè)圖表。AntV 平臺(tái)則提供了 15 類近 200 個(gè)數(shù)據(jù)圖表,現(xiàn)在我們就來普及一下基本知識(shí)。

常用可視化圖表分類

目前主流的可視化平臺(tái)把常用圖表分成九大類(來自 AntV ),分別是:比較、分布、關(guān)聯(lián)、占比、區(qū)間、流程、趨勢(shì)、時(shí)間、地圖。

1. 比較

顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積、角度和顏色來比較數(shù)值的大小,通常用于展示不同分類間的數(shù)值對(duì)比,不同時(shí)間點(diǎn)的數(shù)據(jù)對(duì)比。

典型圖表:柱狀圖、條形圖、直方圖、K 線圖、矩形樹圖等

 

2. 分布

顯示頻率,數(shù)據(jù)分散在一個(gè)區(qū)間或分組。使用圖形的位置、大小、顏色的漸變程度來表現(xiàn)數(shù)據(jù)的分布,通常用于展示連續(xù)數(shù)據(jù)上數(shù)值的分布情況。

典型圖表:散點(diǎn)圖、氣泡圖、熱力圖、箱型圖

 

3. 占比

顯示同一維度上占比關(guān)系

典型圖表:餅圖、環(huán)形圖、堆疊面積圖、堆疊柱狀圖

 

4. 關(guān)聯(lián)

顯示數(shù)據(jù)之間相互關(guān)系。 使用圖形的嵌套和位置表示數(shù)據(jù)之間的關(guān)系,通常用于表示數(shù)據(jù)之間的前后順序、父子關(guān)系以及相關(guān)性。

典型圖表:和弦圖、?;鶊D(我有點(diǎn)讀不懂)

 

5. 區(qū)間

顯示同一維度上值的上限和下限之間的差異。 使用圖形的大小和位置表示數(shù)值的上限和下限,通常用于表示數(shù)據(jù)在某一個(gè)分類(時(shí)間點(diǎn))上的最大值和最小值。

典型圖表:儀表盤、堆疊圖

 

6. 流程

顯示流程流轉(zhuǎn)和流程流量。一般流程都會(huì)呈現(xiàn)出多個(gè)環(huán)節(jié),每個(gè)環(huán)節(jié)之間會(huì)有相應(yīng)的流量關(guān)系,這類圖形可以很好的表示這些關(guān)系。

典型圖表:漏斗圖、?;鶊D

 

7. 趨勢(shì)

分析數(shù)據(jù)的變化趨勢(shì)。使用圖形的位置表現(xiàn)出數(shù)據(jù)在連續(xù)區(qū)域上的分布,通常展示數(shù)據(jù)在連續(xù)區(qū)域上的大小變化的規(guī)律。

典型圖表:折線圖、K 線圖、堆疊面積圖

 

8. 時(shí)間(個(gè)人認(rèn)為時(shí)間可以放在各大類型中作為一個(gè)維度)

顯示以時(shí)間為特定維度的數(shù)據(jù)。使用圖形的位置表現(xiàn)出數(shù)據(jù)在時(shí)間上的分布,通常用于表現(xiàn)數(shù)據(jù)在時(shí)間維度上的趨勢(shì)和變化。

 

9. 地圖

顯示地理區(qū)域上的數(shù)據(jù)。使用地圖作為背景,通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置,通常來展示數(shù)據(jù)在不同地理區(qū)域上的分布情況。

典型圖表:地圖

 

常用可視化圖表舉例分析

1) 柱狀圖

條形圖

展示多個(gè)分類的數(shù)據(jù)變化和同類別各變量之間的比較情況。使用垂直或水平的柱子顯示類別之間的數(shù)值比較。其中一個(gè)軸表示需要對(duì)比的分類維度,另一個(gè)軸代表相應(yīng)的數(shù)值。

優(yōu)點(diǎn):對(duì)比分類數(shù)據(jù)。

缺點(diǎn):分類過多則無法展示數(shù)據(jù)特點(diǎn)。

 

# 相似圖表

堆積柱狀圖:比較同類別各變量和不同類別變量總和差異。

百分比堆積柱狀圖:適合展示同類別的每個(gè)變量的比例。

 

2) 條形圖(也可歸到柱狀圖大類中)

類似柱狀圖,只不過兩根軸對(duì)調(diào)了一下。

優(yōu)點(diǎn):類別名稱過長,將有大量空白位置標(biāo)示每個(gè)類別的名稱。

缺點(diǎn):分類過多則無法展示數(shù)據(jù)特點(diǎn) 。

 

#相似圖表

堆積條形圖:比較同類別各變量和不同類別變量總和差異。

百分比堆積條形圖:適合展示同類別的每個(gè)變量的比例。

雙向柱狀圖:比較同類別的正反向數(shù)值差異。

 

3) 折線圖

折線圖

堆積面積圖

展示數(shù)據(jù)隨時(shí)間或有序類別的波動(dòng)情況的趨勢(shì)變化。

優(yōu)點(diǎn):有序的類別,比如時(shí)間。

缺點(diǎn):無序的類別無法展示數(shù)據(jù)特點(diǎn)。

 

# 相似圖表

面積圖:用面積展示數(shù)值大小,展示數(shù)量隨時(shí)間變化的趨勢(shì)。

堆積面積圖:同類別各變量和不同類別變量總和差異。

百分比堆積面積圖:比較同類別的各個(gè)變量的比例差異。

 

4) 散點(diǎn)圖(以及氣泡圖)

散點(diǎn)圖

 

氣泡圖

 

用于發(fā)現(xiàn)各變量之間的關(guān)系。

優(yōu)點(diǎn):存在大量數(shù)據(jù)點(diǎn),結(jié)果更精準(zhǔn),比如回歸分析。

缺點(diǎn):數(shù)據(jù)量小的時(shí)候會(huì)比較混亂。

 

# 相似圖表

氣泡圖:用氣泡代替散點(diǎn)圖的數(shù)值點(diǎn),面積大小代表數(shù)值大小。

 

5) 餅圖

餅圖

玫瑰圖

餅圖可以很好地幫助用戶快速了解數(shù)據(jù)的占比分配。

優(yōu)點(diǎn):了解數(shù)據(jù)的分布情況。

缺點(diǎn):分類過多,則扇形越小,無法展現(xiàn)圖表。

 

# 相似圖表

環(huán)形圖:挖空的餅圖,中間區(qū)域可以展現(xiàn)數(shù)據(jù)或者文本信息。

玫瑰餅圖:對(duì)比不同類別的數(shù)值大小。

旭日?qǐng)D:展示父子層級(jí)的不同類別數(shù)據(jù)的占比。

 

6) 詞云

詞云

 

7) 箱型圖

箱型圖

以上只是部分常用圖表樣式,更多詳細(xì)的圖標(biāo)樣式及其介紹,可前往阿里數(shù)據(jù)可視化平臺(tái) AntV 學(xué)習(xí)。

 

數(shù)據(jù)圖表使用指南

數(shù)據(jù)圖表如此繁雜多樣,到底該如何靈活運(yùn)用呢?

數(shù)據(jù)圖表專家 Andrew abela 設(shè)計(jì)了一張匯總圖,從全局出發(fā),幫助我們快速確定圖表樣式

Andrew abela 繪制的圖表選擇指南被廣泛運(yùn)用

 

這其實(shí)為我們提供了一種快速選擇數(shù)據(jù)圖表類型的思考流程,四步走:

1.分析數(shù)據(jù)源

2.確定展示的類型

3.選擇的變量類型及數(shù)量

4.選擇對(duì)應(yīng)的數(shù)據(jù)圖表

 

三. 實(shí)用的學(xué)習(xí)通道

介紹這些基本知識(shí)是遠(yuǎn)遠(yuǎn)不夠的,網(wǎng)絡(luò)上有非常多的平臺(tái)、工具和團(tuán)隊(duì)可以供我們深入學(xué)習(xí)和研究數(shù)據(jù)可視化設(shè)計(jì),以下列舉了我平時(shí)經(jīng)常光顧的學(xué)習(xí)資源。

1. 了解數(shù)據(jù)可視化設(shè)計(jì)的歷史淵源(完整版):

數(shù)據(jù)可視化圖表發(fā)展史:http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9

 

2. 各類可視化圖表的概念及用法(超詳細(xì)):

螞蟻金服可視化解決方案 AntV:https://antv.alipay.com/zh-cn/index.html

圖表示例:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

圖表用法:https://antv.alipay.com/zh-cn/vis/chart/index.html

 

3. 前端可視化圖表庫(前端可直接調(diào)用):

ECharts:http://echarts.baidu.com/index.html

AntV:https://antv.alipay.com/index.html

Google Chat:https://google-developers.appspot.com/chart/

 

4.數(shù)據(jù)分析工具:

Google Analytics: https://analytics.google.com

百度統(tǒng)計(jì):https://#baidu.com/

 

5.運(yùn)用可視化工具搭建自己的可視化圖表(可以建立自己的可視化圖表):

BDP個(gè)人版:https://me.bdp.cn/home.html

平時(shí)還可以使用 Excel 或 Numbers 整理和輸出可視化圖表

 

寫在最后

除了學(xué)習(xí)鞏固數(shù)據(jù)相關(guān)的基礎(chǔ)知識(shí)以外,更需要在日常工作學(xué)習(xí)中培養(yǎng)習(xí)慣,養(yǎng)成數(shù)據(jù)化的思維方式。

  • 1.保持對(duì)數(shù)據(jù)的敏感度
  • 2.嘗試?yán)每梢暬ぞ邉?chuàng)建圖表,鍛煉分析整理的能力
  • 3.密切關(guān)注自家產(chǎn)品線的用戶行為數(shù)據(jù),解讀各類數(shù)據(jù)指標(biāo),培養(yǎng)分析的習(xí)慣
  • 4.關(guān)注前沿技術(shù)和可視化新形式,保持開放包容的心態(tài)

好了,文章就介紹到這里,大家一起學(xué)來吧。

預(yù)告:下一篇系列文章著重介紹可視化設(shè)計(jì)的具體方法,譬如從色彩、布局、交互等方面如何設(shè)計(jì)數(shù)據(jù)圖表,歡迎持續(xù)關(guān)注。


作者:又彬

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計(jì)淺析與研究(一)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



數(shù)據(jù)可視化設(shè)計(jì)淺析與研究(二)

seo達(dá)人

第一部分: 圖表布局 

圖表的基本構(gòu)成(來源網(wǎng)易 UEDC)

 

圖表標(biāo)題

標(biāo)題一般居中或居左對(duì)齊,但是布局時(shí),需要綜合考慮副標(biāo)題、圖例甚至篩選器控件等元素的位置。

 

坐標(biāo)軸

坐標(biāo)軸包括 X 坐標(biāo)軸和 Y 坐標(biāo)軸,有時(shí)還會(huì)出現(xiàn)次坐標(biāo)軸。

1. X 軸刻度方向的改變,如果維度過多,則橫向刻度的展示范圍會(huì)非常有限,為了展示更多內(nèi)容,通常會(huì)用其他替代圖表(比如橫向柱狀圖),不能替代的情況下,可以考慮將標(biāo)注文案進(jìn)行傾斜(不鼓勵(lì))。

2. 數(shù)據(jù)類刻度值盡量轉(zhuǎn)化為千位分隔符(如 K,M,B),保持簡潔,以節(jié)省空間。坐標(biāo)軸上的最大值取值要恰當(dāng),保證圖表占據(jù) 2/3 以上,畫面更飽滿。

3. 還需考慮坐標(biāo)軸上的極值。

坐標(biāo)軸

 

圖例

離散型數(shù)據(jù)包括橫向排列和縱向排列,連續(xù)型數(shù)據(jù)包括連續(xù)圖例。

1. 所有圖表類型的排列方式要統(tǒng)一,所以要考慮整體的圖表空間是適合橫向排列,還是縱向排列。

2. 所有形式總長度超過內(nèi)容區(qū)換行或換列。

3. 雙軸圖包含了 2 種圖表類型,不同類型的圖例樣式要有所區(qū)分。

4. 連續(xù)型數(shù)據(jù)通過漸變色來展示數(shù)據(jù)大小的變化,具體漸變顏色定義在下文中有詳細(xì)介紹。

圖例

 

背景柵格

背景柵格主要用來幫助用戶快速讀取數(shù)據(jù)值,方便參考和對(duì)比。背景柵格一般有網(wǎng)格線、虛線、點(diǎn)陣、斑馬紋等。在設(shè)計(jì)柵格時(shí),應(yīng)該盡可能減少對(duì)數(shù)據(jù)的干擾,在合適的場(chǎng)景下,甚至可以去掉背景柵格。

柵格

 

Hover 態(tài)(或點(diǎn)擊態(tài))

用戶在查看某一項(xiàng)數(shù)據(jù)指標(biāo)時(shí),給出明確的反饋和提示。數(shù)據(jù)詳情多時(shí),還會(huì)通過浮窗的形式展現(xiàn)。此時(shí)該狀態(tài)下數(shù)據(jù)可以突出顯示,可以變化顏色、增加背景元素(線/面)、或者增加動(dòng)態(tài)變化等。

 

字體

數(shù)據(jù)圖表的字體一般采用無襯線體,另外需要考慮字體的辨識(shí)度,防止在顯示上產(chǎn)生歧義。多數(shù)情況下,數(shù)據(jù)圖表會(huì)運(yùn)行在不同分辨率的大小屏中,所以在文字排版上。

做到以上幾條,我們?cè)谠O(shè)計(jì)圖表時(shí)就可以避免掉絕大多數(shù)的坑,不過畢竟圖表類型這么多,在實(shí)際場(chǎng)景中也會(huì)遇到各種情況??傊羞@么幾條總的原則

1. 保持?jǐn)?shù)據(jù)圖表簡潔、清晰、易讀

2. 強(qiáng)調(diào)用戶關(guān)注的數(shù)據(jù),幫助用戶快速聚焦

3. 弱化次要元素,如柵格、圖例等

4. 刪除不必要的元素,陰影效果、酷炫動(dòng)畫

5. 合理布局圖表的間距、留白等

6. 充分考慮頁面的適配效果

7. 最好使用真實(shí)的數(shù)據(jù)進(jìn)行設(shè)計(jì)排版

 

 第二部分: 圖表配色 

考慮到圖表顏色在設(shè)計(jì)中至關(guān)重要,我把它單獨(dú)分出來討論。由于數(shù)據(jù)的復(fù)雜性和趨勢(shì)變化,配色方案需要考慮非常多的因素,比如可辨識(shí)度、舒適性,還需要考慮特殊人群(色盲色弱人士等)對(duì)顏色的可讀性等等。在配色過程中我們需要區(qū)分背景色和圖表配色。

 

背景配色

背景色一般分為深色、淺色、彩色。在很多 LED 大屏上展現(xiàn)數(shù)據(jù)時(shí),多采用深色背景,比如即將到來的天貓雙十一活動(dòng),官方數(shù)據(jù)展示基本上會(huì)用深藍(lán)色作為背景,這樣可以減少屏幕拖尾,觀看時(shí)也不會(huì)過于刺眼。深色背景中的圖表配色一般不會(huì)采用太多的色彩,且圖表也不會(huì)設(shè)計(jì)得過于復(fù)雜。

中小屏幕的背景選擇性更大,中小屏幕背景色選擇范圍就比較廣,淺色、彩色、深色均可以做出很好的設(shè)計(jì)。在 Web 端,大多數(shù)場(chǎng)景下,我們會(huì)采用淺色甚至白色作為背景,淺色背景更適合展示大量的數(shù)據(jù)信息,而且識(shí)別度更高。

 

圖表配色

圖表配色最關(guān)鍵的一點(diǎn),就是要有辨識(shí)度。

我們可以通過明度上的變化增加辨識(shí)度,也可以采用大跨度的不同色相來增加辨識(shí)度,另外這兩者也可以有機(jī)結(jié)合,常用于色彩較多的圖表中。

 

明度變化

當(dāng)我們需要使用單一色相配色時(shí),勢(shì)必要用明度差來進(jìn)行設(shè)計(jì),明度的跨度也要盡可能大才能更清晰。我們可以通過在灰度模式下配色的辨識(shí)度來判斷明度差是或否合適。

(Google Material Colors 中的 Light Blue 色卡)

需要注意的是,采用單一色相的配色種類不宜太多,建議不超過 6 種。一旦種類過多,色彩之間的明度差異勢(shì)必會(huì)變小,因而影響辨識(shí)度。

 

色相跨度變化

通過色相跨度來增加顏色辨識(shí)度也是我們常用的方式。

色環(huán)

需要的顏色較少時(shí),我們盡量避免使用相近的色相,比如同類色和相近色。盡量選擇對(duì)比色或互補(bǔ)色,這樣可以使不同屬性數(shù)據(jù)在圖表中展示更加清晰。

 

 

美國大選圖

 

所需顏色較多時(shí),建議最多不超過 12 種色相。

通常情況下人在不連續(xù)的區(qū)域內(nèi)可以分辨 6?12 種不同色相。過多的顏色對(duì)傳達(dá)數(shù)據(jù)是沒有作用的,反而會(huì)讓人產(chǎn)生迷惑。

 

三種常用的取色方法

01. 色環(huán)提取

可以采用色環(huán)中同一明度下的不同色調(diào)作為圖表顏色。前面提到的單色相內(nèi)取色,也可以在這個(gè)色環(huán)中進(jìn)行采集,此外 Google Material Colors 是一個(gè)不錯(cuò)的色板,可以結(jié)合使用。

 

02. 借鑒自然界中的色彩

自然界中有非常豐富的漸變色彩,而且被大家所熟知,這些色彩更容易給人們帶來愉悅感。

自然界中的色彩

 

在借鑒過程中,我們需要注意,比如天空經(jīng)常會(huì)出現(xiàn)紅、藍(lán)、紫的漸變色,但這顏色的明度會(huì)有其規(guī)律,通常是淺黃到深紫,但絕對(duì)不會(huì)出現(xiàn)淺紫到深黃色。還有一些自然界其他的經(jīng)驗(yàn)配色,比如淺綠色到紫藍(lán)色,淺黃色到深綠色,橙棕色到冷灰色。

 

03. 漸變與明度疊加取色

在正常漸變色的基礎(chǔ)上疊加一層只有明度變化的灰色漸變,形成既有明度差異也有色相跨度變化的配色。

 

漸變與明度疊加取色

 

漸變色應(yīng)用案例

好了,配色部分就探討到這里。除了以上關(guān)鍵內(nèi)容以外,我們平時(shí)還需要注意數(shù)據(jù)圖表的適配效果、交互細(xì)節(jié)、以及動(dòng)畫設(shè)計(jì)方面的問題,由于篇幅的關(guān)系暫不展開,以后有機(jī)會(huì)進(jìn)一步探討。

 

說在最后

我們?cè)趨⑴c此類項(xiàng)目設(shè)計(jì)時(shí),通常會(huì)通過以下的流程去思考:

1. 為誰設(shè)計(jì),用戶想要什么

2. 明確設(shè)計(jì)目標(biāo)和價(jià)值

3. 明確數(shù)據(jù)指標(biāo)

4. 選擇最合適的數(shù)據(jù)圖表

5. 規(guī)劃設(shè)計(jì),輸出方案

前三步更多會(huì)由產(chǎn)品經(jīng)理、運(yùn)營人員去思考并輸出結(jié)果,最后兩步則由我們?cè)O(shè)計(jì)師來完成,這兩步也正是這兩篇系列文章的主題所在。

在學(xué)習(xí)過程中,我們每個(gè)人可有不同的思考方式和側(cè)重點(diǎn),以我個(gè)人的角度出發(fā):能夠讀懂常見的數(shù)據(jù)可視化圖表,并從圖表中能獲取到關(guān)鍵信息。當(dāng)有一堆數(shù)據(jù)擺在面前,能根據(jù)業(yè)務(wù)目標(biāo)選擇合適的數(shù)據(jù)展示類型,并運(yùn)用設(shè)計(jì)手段完整的表達(dá)給用戶。有了這些沉淀,我就能更好的和產(chǎn)品、運(yùn)營打交道,更多的關(guān)注鏈路上游的信息,從而進(jìn)一步提升設(shè)計(jì)的產(chǎn)出質(zhì)量。

歡迎交流、批評(píng)和指正。


作者:又彬

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計(jì)淺析與研究(二)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



提升數(shù)據(jù)可視化的7個(gè)實(shí)用技巧

seo達(dá)人


1、避免使用鮮艷的顏色

明亮鮮艷的顏色就像是把所有的字母都大寫想要強(qiáng)調(diào)一樣,你的聽眾感覺你在對(duì)他們大聲推銷。而當(dāng)有很多人在大喊大叫時(shí),通常是很難集中注意力聽他在說什么。單調(diào)的顏色,反而能很好地用于數(shù)據(jù)可視化,因?yàn)樗鼈兛梢宰屇愕淖x者理解你的數(shù)據(jù),而不至于被數(shù)據(jù)淹沒。

當(dāng)你想要強(qiáng)調(diào)數(shù)據(jù)時(shí),可以使用更亮的顏色。比如你的公司與競(jìng)爭對(duì)手相比較時(shí),或者你可以在現(xiàn)有顏色基礎(chǔ)上加深顏色。

多彩的顏色效果就像把文字全部大寫一樣

 

2、避免使用餅圖

盡管它們很受歡迎,但餅圖并不是一種可視化數(shù)據(jù)的有效方法。 為什么? 因?yàn)槟愕拇竽X很難確定每塊餡餅的相對(duì)大小

Stephen Few詳細(xì)介紹了這個(gè)問題 鏈接在:

https://www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf

多使用條形圖, 它能使受眾更容易理解和比較數(shù)據(jù)的相對(duì)大小。

Tip:按降序或升序?qū)?shù)據(jù)進(jìn)行排序,能更輕松地比較數(shù)據(jù)。

餅圖不是可視化數(shù)據(jù)的有效方式, 請(qǐng)嘗試使用條形圖。

 

3、避免數(shù)據(jù)噪音

正如“數(shù)據(jù)界的達(dá)芬奇”Edward Tufte 所說,圖表上的每一點(diǎn)信息都應(yīng)該有存在的理由。

把不重要的東西減到最少或者去掉。這包括減弱或移除圖形線,改變軸線、圖形線的顏色,以及用淺灰色描繪電子表格行。使得“數(shù)據(jù)比率”可以達(dá)到一個(gè)很高的水平,聽眾會(huì)更容易明白其中的數(shù)據(jù)情況。

Tip: 如果有人評(píng)價(jià)你的圖表華而不實(shí),你只需要優(yōu)化數(shù)據(jù)比率就好了。

隱藏或減弱非數(shù)據(jù)項(xiàng)能使數(shù)據(jù)脫穎而出

 

4、使用簡單易讀的字體

有些時(shí)候,排版可以提升視覺效果,增加額外的情感和洞察力。但數(shù)據(jù)可視化不包括在內(nèi)。堅(jiān)持使用簡單的無襯線字體(通常是Excel等程序中的默認(rèn)字體)。無襯線字體即是那些文字邊緣沒有小腳的字體。

不用使用手寫體,以及其他會(huì)分散數(shù)據(jù)可視化注意力的字體

 

5、使用表格數(shù)字字體

表格間距賦予所有的數(shù)字相同的寬度,使它們排列時(shí)能彼此對(duì)齊,使比較更容易。大多數(shù)流行字體都內(nèi)置了表格。不確定字體是否正確?就看小數(shù)點(diǎn)(或任何數(shù)字)是否對(duì)齊就行。

使用一個(gè)表格數(shù)字字體,這樣每個(gè)數(shù)字間都保持對(duì)齊(像右邊的那個(gè)),比較起來更容易

 

6、使用相同細(xì)節(jié)和精度的數(shù)字

添加的細(xì)節(jié)(和數(shù)字)越多,大腦處理的時(shí)間就越長。想想你想要用你的數(shù)據(jù)傳達(dá)什么,以及最有效的方式是什么。

每一個(gè)額外的數(shù)字都需要大腦去理解

 

7、使用基礎(chǔ)圖形

一個(gè)很好的經(jīng)驗(yàn)法則是,如果你不能高效理解,你的讀者或聽眾可能也難理解。因此,堅(jiān)持使用基礎(chǔ)圖形:直方圖、條形圖、維恩圖、散點(diǎn)圖和線形圖。

譯者注:關(guān)于這些數(shù)據(jù)圖的區(qū)別以及使用方法,我這里就不作展開說了,有興趣的可以自己去網(wǎng)上翻翻。每種圖形都用它的特點(diǎn)和使用場(chǎng)景,還蠻有意思的。以下是我在網(wǎng)上搜集的圖形示例:

直方圖

 

條形圖

 

維恩圖

 

散點(diǎn)圖

 

線形圖


作者:Becca Selah

譯者:彩云Sky

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》提升數(shù)據(jù)可視化的7個(gè)實(shí)用技巧

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




大屏監(jiān)控系統(tǒng)數(shù)據(jù)可視化界面設(shè)計(jì)

seo達(dá)人


 

原文地址:站酷

作者:UXBoy

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》大屏監(jiān)控系統(tǒng)數(shù)據(jù)可視化界面設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



設(shè)計(jì)的價(jià)值是保障產(chǎn)品用戶健康度

ui設(shè)計(jì)分享達(dá)人

宜家的設(shè)計(jì)為銷售負(fù)責(zé)。比如設(shè)計(jì)一個(gè)杯子,宜家的設(shè)計(jì)師需要考慮如何更多的賣出杯子。沒錯(cuò),銷售更多的產(chǎn)品是設(shè)計(jì)師的KPI。在這樣的目標(biāo)導(dǎo)向下,設(shè)計(jì)師很容易去思考幾個(gè)問題。

  • 一定成本的杯子,用戶為什么要買我的產(chǎn)品?解決做好產(chǎn)品設(shè)計(jì)的動(dòng)力。
  • 杯子的使用場(chǎng)景和定位,是刷牙杯、還是咖啡杯,它應(yīng)該是家用的、還是在高端的商業(yè)場(chǎng)所出現(xiàn)?基于成本出發(fā),對(duì)設(shè)計(jì)、原材料和制作工藝的思考。
  • 杯子在售賣時(shí)期的陳列、互動(dòng)形式應(yīng)該是怎樣的?基于如何能售出更多,解決產(chǎn)品的流量獲取問題。
  • 杯子在使用過程中的手感、方便性。基于用戶感受和體驗(yàn),解決產(chǎn)品和用戶互動(dòng)的故事性,口碑問題。

眾所周知,宜家的產(chǎn)品是場(chǎng)景化的,總能讓人感受到設(shè)計(jì)師們的熱情、心血和心機(jī)。設(shè)計(jì)為銷售負(fù)責(zé),售出更多的產(chǎn)品確實(shí)可以作為設(shè)計(jì)有效性的驗(yàn)證方式之一,但銷售量卻不能作為設(shè)計(jì)的量化標(biāo)準(zhǔn)。

這兩者之間有很微妙的差異。我們引入一個(gè)概念叫做“數(shù)據(jù)趨勢(shì)的正向反饋”來解釋這個(gè)問題?!皵?shù)據(jù)趨勢(shì)的正向反饋”,它具備允許波動(dòng),且不為一個(gè)具象的數(shù)值服務(wù)的特征。類似下圖示:

設(shè)計(jì)為銷售負(fù)責(zé),我們可以理解為,衡量好設(shè)計(jì)的其中一個(gè)維度標(biāo)準(zhǔn)就是銷售“數(shù)據(jù)趨勢(shì)的正向反饋”,值得注意,不是銷售量的某個(gè)單一的KPI值。因?yàn)檫_(dá)成某個(gè)銷售量的KPI值有很多手段,設(shè)計(jì)策略、產(chǎn)品策略、運(yùn)營策略和營銷策略等等方式都可能完成,如果用銷售量去衡量設(shè)計(jì),會(huì)讓設(shè)計(jì)變得不夠純碎。但是,用“數(shù)據(jù)趨勢(shì)的正向反饋”來衡量設(shè)計(jì)是否有效,用戶是否認(rèn)同卻是可行的。而且,“數(shù)據(jù)趨勢(shì)的正向反饋”意味銷售量是持續(xù)增長的,哪怕有波動(dòng),哪怕有快慢,長期看能夠持續(xù)增長代表用戶是健康的。設(shè)計(jì)價(jià)值是為產(chǎn)品帶來健康用戶,或者說是保障產(chǎn)品的健康度。產(chǎn)品健康度一般看幾個(gè)值。

用戶跳出率

用戶跳出率指只訪問了入口頁面就離開的訪問量與所產(chǎn)生總訪問量的百分比。通?;ヂ?lián)網(wǎng)的平均跳出率大致是73%,如果你的產(chǎn)品跳出率超過這個(gè)值,說明用戶質(zhì)量不高。

平均訪問時(shí)長

平均訪問時(shí)長指用戶在一次訪問中,平均使用產(chǎn)品的時(shí)間。互聯(lián)網(wǎng)的平均訪問時(shí)長大致是2分40秒。

平均訪問頁數(shù)

平均訪問頁數(shù)=瀏覽量(PV)/訪問次數(shù)。互聯(lián)網(wǎng)的平均訪問頁數(shù)大致是2頁。

除此之外,產(chǎn)品還會(huì)從營收的角度看用戶支付金額、ARPU值和轉(zhuǎn)化率等等。營收指標(biāo)對(duì)與設(shè)計(jì)來說,就是需要參考的趨勢(shì)數(shù)據(jù)了。了解了這些原理,怎么做呢?我們用首頁改版為例,首先按上述要求定義用戶健康度指標(biāo)。假設(shè)首頁承載電商內(nèi)容,根據(jù)電商特性在基礎(chǔ)指標(biāo)之上,增加一個(gè)用戶在首頁的停留時(shí)長指標(biāo),這個(gè)指標(biāo)衡量用戶是否能在首頁逛起來。

依據(jù)這些指標(biāo),就可以搭建針對(duì)于當(dāng)前項(xiàng)目的用戶健康度指標(biāo),在設(shè)計(jì)過程中通過對(duì)指標(biāo)和指標(biāo)用戶的數(shù)據(jù)分析和對(duì)指標(biāo)用戶的訪談綜合得出項(xiàng)目的核心問題及解決思路。通過線上驗(yàn)證設(shè)計(jì)方案觀測(cè)數(shù)據(jù)模型的趨勢(shì)變化,以獲得最優(yōu)的設(shè)計(jì)。設(shè)計(jì)在保障產(chǎn)品用戶健康度上,是一個(gè)持續(xù)迭代的過程。

產(chǎn)品沒有最健康,只有更健康。

作者:ZA大人

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


工作中如何體現(xiàn)設(shè)計(jì)價(jià)值?

ui設(shè)計(jì)分享達(dá)人

http://www.yvirxh.cnhttp://www.yvirxh.cnhttp://www.yvirxh.cnhttp://www.yvirxh.cn/dp.htmlhttp://www.yvirxh.cnhttp://www.yvirxh.cn/web.htmlhttp://www.yvirxh.cn/Design.htmlhttp://www.yvirxh.cn/Design.htmlhttp://www.yvirxh.cn

寫在前面

一年一度的年底復(fù)盤總結(jié)大會(huì)即將開啟,期間閑聊時(shí)被問:作為設(shè)計(jì)師,日常工作中如何體現(xiàn)設(shè)計(jì)價(jià)值?你們平時(shí)做的那些不是業(yè)務(wù)需求嗎?如何體現(xiàn)設(shè)計(jì)價(jià)值呢?直白一點(diǎn):你們?cè)O(shè)計(jì)一年都沒產(chǎn)出啊?。?!我開始反思:如果平時(shí)做的業(yè)務(wù)需求不能體現(xiàn)設(shè)計(jì)價(jià)值,那么什么體現(xiàn)我的價(jià)值呢?設(shè)計(jì)價(jià)值到底用什么來衡量?


分享目錄

1、如何理解設(shè)計(jì)價(jià)值

2、設(shè)計(jì)師價(jià)值分層 

3、設(shè)計(jì)價(jià)值案例體現(xiàn)

4、設(shè)計(jì)價(jià)值具體表現(xiàn)方向

一、如何理解設(shè)計(jì)價(jià)值

很多招聘上都寫著會(huì)插畫會(huì)動(dòng)效的加分,很多職場(chǎng)人沒面試或沒應(yīng)聘上理解是不會(huì)某個(gè)技能,因此抱怨設(shè)計(jì)要學(xué)的太多了...但是注意「加分」這個(gè)詞的前提是滿足必要條件之后才去考慮的,如果公司有大量的剪輯和插畫需求,自然會(huì)招插畫師和剪輯師(我上家公司有專門的插畫師和視頻剪輯人員),所以不妨反省自己是否滿足必要條件。

前幾年大家或許可以憑借這些差異化優(yōu)勢(shì)拿到不錯(cuò)的薪水,但是寒冬之下公司更多的思考著如何活下去,更看中設(shè)計(jì)能給產(chǎn)品發(fā)展帶來什么價(jià)值



商業(yè)設(shè)計(jì)本質(zhì)上服務(wù)于業(yè)務(wù),公司需要用戶參與盈利,所以每個(gè)季度或每個(gè)月分發(fā)每個(gè)部門業(yè)務(wù)目標(biāo),項(xiàng)目團(tuán)隊(duì)根據(jù)當(dāng)前部門任務(wù)制定相應(yīng)的項(xiàng)目目標(biāo),然后再一層層分發(fā)到設(shè)計(jì),總結(jié)他們的關(guān)系如下:



因此判斷設(shè)計(jì)價(jià)值的關(guān)鍵是:是否真正地幫助業(yè)務(wù)解決問題,助力業(yè)務(wù)目標(biāo)達(dá)成。換言之,設(shè)計(jì)價(jià)值就是設(shè)計(jì)師通過設(shè)計(jì)思維/策略/方法,幫助業(yè)務(wù)創(chuàng)造的那部分價(jià)值。

  • 實(shí)現(xiàn)了哪些業(yè)務(wù)目標(biāo)
  • 解決了哪些業(yè)務(wù)問題
  • 創(chuàng)造了哪些業(yè)務(wù)價(jià)值

根據(jù)設(shè)計(jì)價(jià)值,市場(chǎng)上衍生出各種設(shè)計(jì)師頭銜,被劃分為更靠近產(chǎn)品的UXD(User Experience Design)、以及在UXD基礎(chǔ)上提升出與業(yè)務(wù)更密切的UGD(User Growth Design),最后就是更偏純視覺的VD(Visual design)。



相信大家和我一樣,在公司對(duì)設(shè)計(jì)師的要求再也不是單純界面輸出了,雖然職稱頭銜沒變,但是公司對(duì)我們的要求越來越高了,那說明你正在向體驗(yàn)型設(shè)計(jì)師或用戶增長型設(shè)計(jì)師發(fā)展。今天看了我的文章,打開格局,未來的路也會(huì)越走越寬

二、設(shè)計(jì)師價(jià)值分層

設(shè)計(jì)師的價(jià)值可以分為五層:

基礎(chǔ)價(jià)值(設(shè)計(jì)協(xié)同):重要且緊急,設(shè)計(jì)師立身之本

二級(jí)機(jī)制(優(yōu)化負(fù)向):自驅(qū)解決負(fù)向問題,量化優(yōu)化結(jié)果

三級(jí)價(jià)值(增長爆破):洞察增長爆破點(diǎn),自驅(qū)推動(dòng)增長

四級(jí)價(jià)值(L型賦能):垂直擊穿,經(jīng)驗(yàn)沉淀,實(shí)現(xiàn)L型賦能

五級(jí)價(jià)值(業(yè)務(wù)領(lǐng)軍):人人都是業(yè)務(wù)方,拓展設(shè)計(jì)師在行業(yè)和生態(tài)影響力

今天主要聊聊前三種,我相信很多人最初選設(shè)計(jì)師這個(gè)職業(yè)認(rèn)為設(shè)計(jì)不用對(duì)接太多人,做好自己的事情就OK,緊接著慢慢的在無止盡的改稿消耗了激情,開始喊出設(shè)計(jì)沒前途想轉(zhuǎn)行不好找工作等等,但是正真玩明白設(shè)計(jì)的人往往笑而不語

第 1 層:基礎(chǔ)價(jià)值

不知其然,表象復(fù)刻。設(shè)計(jì)協(xié)同最基本要求就是在拿到需求后高效又完美地實(shí)現(xiàn)落地。也就是我們剛剛?cè)胄袝r(shí)日常工作中所做的事情:產(chǎn)品給到原型、設(shè)計(jì)開始執(zhí)行、接著進(jìn)入研發(fā)、再接著走查等等,甚至很多人都沒玩明白設(shè)計(jì)系統(tǒng)有哪些,各個(gè)設(shè)備的的規(guī)范區(qū)別...
做好這個(gè)階段是設(shè)計(jì)師基本素養(yǎng),需要良好的專業(yè)能力,良好的溝通能力,并參與到產(chǎn)品的探索與構(gòu)思中來。



第 2 層:負(fù)向優(yōu)化

我之前在小紅書分享了很多關(guān)于設(shè)計(jì)優(yōu)化內(nèi)容,優(yōu)化前VS優(yōu)化后。以用戶體驗(yàn)為核心,不同場(chǎng)景不同設(shè)計(jì)。相較于基礎(chǔ)價(jià)值而言,負(fù)向優(yōu)化開始逐漸融入業(yè)務(wù)當(dāng)中,慢慢了解整個(gè)業(yè)務(wù)流程,很多小伙伴往往提出優(yōu)化方案后被認(rèn)定為優(yōu)先級(jí)不高,就是沒有針對(duì)當(dāng)前業(yè)務(wù)主要功能提出優(yōu)化



第 3 層:增長爆破

這個(gè)階段在設(shè)計(jì)師晉升中非常關(guān)鍵,領(lǐng)導(dǎo)非常看重設(shè)計(jì)是否主導(dǎo)項(xiàng)目優(yōu)化,我目前公司晉升標(biāo)準(zhǔn)是設(shè)計(jì)師除業(yè)務(wù)需求外,一年至少需要2次設(shè)計(jì)主導(dǎo)項(xiàng)目推動(dòng)。這個(gè)過程比做業(yè)務(wù)需求復(fù)雜的多,因?yàn)楫?dāng)你沒有足夠資源協(xié)助優(yōu)化時(shí),需要設(shè)計(jì)自己前期調(diào)研、設(shè)計(jì)問卷、找數(shù)據(jù)、寫產(chǎn)品文檔、畫原型圖、標(biāo)注交互規(guī)則...整個(gè)過程由你主導(dǎo)。

當(dāng)然這個(gè)階段的設(shè)計(jì)師會(huì)比上一個(gè)階段更能體現(xiàn)設(shè)計(jì)價(jià)值,并對(duì)產(chǎn)品產(chǎn)生一定的影響力。我們要把格局打開不要局限于設(shè)計(jì)本身,不是說忽略設(shè)計(jì),是基于日常設(shè)計(jì)界面去考慮設(shè)計(jì)的意義,給產(chǎn)品和業(yè)務(wù)帶來的影響。能在以用戶為中心的基礎(chǔ)上,尋找機(jī)會(huì)點(diǎn),推動(dòng)業(yè)務(wù)的增長,所以這個(gè)階段的設(shè)計(jì)也被稱為UGD(User GrowthDesign)


這時(shí)候?qū)υO(shè)計(jì)的要求更高,比如需要具備用戶洞察力,數(shù)據(jù)分析能力等,從這些維度出發(fā),去熟悉業(yè)務(wù)、分析業(yè)務(wù),尋找設(shè)計(jì)機(jī)會(huì)點(diǎn),制定設(shè)計(jì)策略,從而推動(dòng)業(yè)務(wù)。這個(gè)階段的設(shè)計(jì)師,也是市場(chǎng)最需要并且很稀缺的。



三、設(shè)計(jì)價(jià)值案例體現(xiàn)

通過一個(gè)案例我們一起討論設(shè)計(jì)價(jià)值體現(xiàn),首先看一下業(yè)務(wù)目標(biāo),設(shè)計(jì)目標(biāo)是由它推導(dǎo)而來,這個(gè)推導(dǎo)的過程并不是直觀可見的,需要我們進(jìn)行用戶調(diào)研、問卷調(diào)查、數(shù)據(jù)分析等等一系列方式去推導(dǎo),最后總結(jié)歸納出可行設(shè)計(jì)目標(biāo)。推導(dǎo)過程是整個(gè)設(shè)計(jì)過程中最重要的環(huán)節(jié),為了讓大家理解,我在網(wǎng)上查了很多案例

1、業(yè)務(wù)目標(biāo)

一般業(yè)務(wù)目標(biāo)是決策人開會(huì)共同決定的,它只是某個(gè)階段大的方向,基本可以套進(jìn)下面這個(gè)公式



以我目前工作正在執(zhí)行的項(xiàng)目為例,可以組合其中一部分作為業(yè)務(wù)目標(biāo),例如:
Q4:通過提升中介版位的曝光率引導(dǎo)中介入駐(上傳社區(qū)資料),來增加社區(qū)內(nèi)容的豐富度

阿里《五導(dǎo)家設(shè)計(jì)法》中對(duì)業(yè)務(wù)目標(biāo)和設(shè)計(jì)目標(biāo)的定義是:

1、業(yè)務(wù)目標(biāo):用[某策略]給目標(biāo)用戶帶來[某價(jià)值],以實(shí)現(xiàn)[某變現(xiàn)方式]

2、設(shè)計(jì)目標(biāo):用[某設(shè)計(jì)策略]給目標(biāo)用戶帶來[某價(jià)值],以助力[某變現(xiàn)方式]

這個(gè)剛開始理解會(huì)比較困難,因?yàn)楹芏囗?xiàng)目其實(shí)只有一個(gè)總體的目標(biāo)并不會(huì)細(xì)化到這樣的顆粒度。于是我去網(wǎng)上查了一些設(shè)計(jì)師的分析部分內(nèi)容,整理組織一下發(fā)現(xiàn)大致的信息是這樣的:



由業(yè)務(wù)方提出一個(gè)需求,這個(gè)需求背后往往伴隨著一個(gè)業(yè)務(wù)指標(biāo),設(shè)計(jì)師則需要將定量指標(biāo)拆解為有設(shè)計(jì)執(zhí)行指向的目標(biāo)。上圖中簡化XX功能的操作路徑,就需要拉出整個(gè)操作過程中的數(shù)據(jù),觀察同級(jí)功能及子級(jí)功能有什么影響,用戶是在哪一步流失的,有什么優(yōu)化途徑...,可以看出短短幾個(gè)字背后的工作遠(yuǎn)遠(yuǎn)比想象的多



2、洞悉產(chǎn)品的業(yè)務(wù)場(chǎng)景

這次設(shè)計(jì)改版也是伴隨著業(yè)務(wù)的發(fā)展而來的,為了做出貼近業(yè)務(wù)目標(biāo)的設(shè)計(jì),項(xiàng)目前期對(duì)產(chǎn)品的定位及業(yè)務(wù)底層邏輯做了深刻的理解,思考我們?yōu)槭裁匆鲞@個(gè)產(chǎn)品?用戶通過我們產(chǎn)品得到什么?為了方便理解,我從項(xiàng)目背景開始說起
項(xiàng)目背景:隨著平臺(tái)買賣租賃業(yè)務(wù)迅猛發(fā)展,用戶對(duì)于房屋周邊關(guān)注度越來越高,單個(gè)房屋詳情無法滿足用戶對(duì)整個(gè)房屋周邊的了解,所以推出社區(qū)找房平臺(tái)。產(chǎn)品主要定位是提供小區(qū)內(nèi)真實(shí)有效的房屋信息,幫助用戶省時(shí)省力的篩選出優(yōu)質(zhì)房源
問題:由于第三方合作平臺(tái)房屋資料更新不及時(shí),導(dǎo)致C端用戶(買賣租賃)去線下看房時(shí)發(fā)現(xiàn)已賣已租,漸漸地對(duì)平臺(tái)產(chǎn)生不信任,最后很大可能棄用。
解決:為了改善這一現(xiàn)狀,平臺(tái)引入「社區(qū)專家」這一概念,并通過提升中介版位的曝光引導(dǎo)中介入駐,入駐則需上傳該小區(qū)戶型圖/平面圖/內(nèi)景圖等 。也就是說中介入駐后被稱為社區(qū)專家,在APP端曝光量增加,吸引C端用戶點(diǎn)擊互動(dòng),從而提升房屋成交量的可能性(也就是業(yè)績)

這樣一來,我們就明確了現(xiàn)階段為什么要做這件事:中介通過上傳房屋信息獲得一定的曝光量;而買賣租賃用戶通過房屋信息省力省心找到符合自己預(yù)期的房源。



3、洞察目標(biāo)用戶特征

產(chǎn)品最終服務(wù)于用戶,不同產(chǎn)品面對(duì)的不同人群的需求是不一樣的,所以前期深入了解了用戶,明白用戶訴求,這樣能更好的聚焦設(shè)計(jì)策略,將產(chǎn)品的核心價(jià)值及服務(wù)價(jià)值傳遞給用戶,從而提升用戶使用體驗(yàn)
接著對(duì)此次需求目標(biāo)用戶(中介)進(jìn)行了調(diào)研分析,當(dāng)前我們的中介用戶特征具體表現(xiàn)為:年齡在45歲以下的用戶人群占73%左右,整體年齡不大,對(duì)互聯(lián)網(wǎng)接受度較高,工作業(yè)績直接與房屋成交金額掛鉤



4、梳理用戶入駐流程

社區(qū)專家入駐流程簡單的看就是上傳社區(qū)信息圖片,然而其實(shí)是一個(gè)系統(tǒng)化決策的過程,整條關(guān)鍵路徑從了解入駐優(yōu)勢(shì)(信息獲取)到怎么上傳(上傳圖片)再到上傳成功(入駐成功)經(jīng)歷了幾個(gè)關(guān)鍵節(jié)點(diǎn),開始呈現(xiàn)一個(gè)漏斗狀的情形,轉(zhuǎn)化率越來越低。
因此在產(chǎn)品設(shè)計(jì)之前,我們對(duì)用戶決策的關(guān)鍵路徑進(jìn)行了相應(yīng)的梳理:主要為入駐前、入駐中、入駐后幾個(gè)階段,同時(shí)圍繞著每個(gè)環(huán)節(jié)去強(qiáng)化用戶內(nèi)心感知,挖掘設(shè)計(jì)上的機(jī)會(huì)點(diǎn)
在這幾個(gè)階段我們主要解決的問題可以歸納以下幾點(diǎn)
1、入駐前:如何讓中介快速找到入駐入口,明確入駐優(yōu)勢(shì)
2、入駐中:如何讓用戶入駐更順暢
3、入駐后:如何提升用戶入駐后效果感知,為再次入駐做推動(dòng)



5、設(shè)計(jì)目標(biāo)推導(dǎo)

到此產(chǎn)品整體的設(shè)計(jì)思路已經(jīng)很明確了,如果前期我們沒有對(duì)業(yè)務(wù)進(jìn)行宏觀層面的拆解和分析,設(shè)計(jì)后期可能找不準(zhǔn)設(shè)計(jì)的發(fā)力點(diǎn),從而導(dǎo)致設(shè)計(jì)沒有貼合實(shí)際業(yè)務(wù)場(chǎng)景
圍繞著這些背景,經(jīng)過多次溝通最終設(shè)計(jì)和產(chǎn)品同學(xué)達(dá)成了一致,本次主要設(shè)計(jì)目標(biāo)為
1、提升用戶信息閱讀效率
2、提升用戶入駐決策效率
3、提升用戶入駐后效果感知



6、設(shè)計(jì)方案落地

在明確了設(shè)計(jì)目標(biāo)之后,最后一部分是設(shè)計(jì)落地了,正確的設(shè)計(jì)始終圍繞著產(chǎn)品策略來執(zhí)行的,并通過深耕的設(shè)計(jì)解決方案來為用戶打造優(yōu)質(zhì)的服務(wù)體驗(yàn),那么我們將從以下幾個(gè)維度來進(jìn)行視覺方案的設(shè)計(jì)

6.1、提升用戶信息閱讀效率

(1)以傳達(dá)信息內(nèi)容為主
說到權(quán)益設(shè)計(jì)師視覺常常會(huì)體現(xiàn)榮譽(yù)感,就會(huì)聯(lián)想到黑金權(quán)益對(duì)比,但是不管是什么樣的視覺表現(xiàn),最終的結(jié)果都是以清晰傳達(dá)信息內(nèi)容為主,讓用戶看的明白這個(gè)是干什么的,對(duì)他有什么好處
如果用戶看不明白,即使信息有效觸達(dá),最終會(huì)以為是廣告不明所以的關(guān)閉



當(dāng)然這中間也不僅僅是設(shè)計(jì)的問題,產(chǎn)品給的交互原型稿就有問題,整個(gè)圖就沒讓人明白這個(gè)是基礎(chǔ)權(quán)益和置頂權(quán)益的對(duì)比。設(shè)計(jì)拿到原型搞后要提前溝通,在交互原型不確定的情況下不要開始設(shè)計(jì),這個(gè)在《設(shè)計(jì)如何提升工作中話語權(quán)》有提到過,等交互評(píng)審多方達(dá)成一致后開始著手設(shè)計(jì),這樣才會(huì)事半功倍



(2)利益點(diǎn)的展示
關(guān)于用戶入駐的利益點(diǎn)運(yùn)營角度肯定是展示越多越好,但是產(chǎn)品為了減少用戶跳出率,期望查看任務(wù)是在當(dāng)前頁面用彈框承載。由于彈框承載信息有限,我們盡量想在電腦一屏內(nèi)展示完當(dāng)前任務(wù)及主要利益點(diǎn),所以在用戶能看明白的前提下不能無限增加利益點(diǎn)



(3)挽留彈框優(yōu)化
無論什么類型的彈框,必須要做到文案簡潔。不要讓用戶看半天還沒明白你要說的是什么,然后才沒辦法也無所謂的點(diǎn)了確定或取消,當(dāng)然大部分這種情況,他們都會(huì)點(diǎn)擊取消,或者右上角的關(guān)閉鍵。
而一般彈框按鈕,右邊是主操作按鈕,也就是引導(dǎo)用戶操作下一步的按鈕,這次優(yōu)化前按鈕文案不好理解,確定操作與用戶本身理解有歧義,易造成誤操作



6.2、提升用戶入駐決策效率

(1)統(tǒng)一入駐后的視覺效果
中介入駐前后狀態(tài)分為:入駐前、入駐中(審核中、未通過、已通過)、入駐后(免費(fèi)續(xù)期)。其中入駐中未通過使用警示色紅色,為了強(qiáng)化中介入駐后的視覺效果也采用了紅色,這與入駐成功的綠色不符。
在視覺上用色混淆,那么后續(xù)紅色是表示警示的同時(shí)還可表示強(qiáng)調(diào)?那么下圖中「1筆成交」用紅色是成功了還是未成功?為了避免這個(gè)問題,入駐后視覺效果統(tǒng)一為綠色,在后續(xù)色彩感知上更清晰明確,無論是設(shè)計(jì)師還是用戶都不會(huì)混淆



(2)優(yōu)化入駐路徑

主要按照流程最短,操作最少方向去優(yōu)化,1.0版本完成整套任務(wù)流程:免費(fèi)入駐 → 入駐成功 → 做任務(wù) → 免費(fèi)置頂。當(dāng)1.0第一版設(shè)計(jì)稿灰度上線后,產(chǎn)品預(yù)期是與中介達(dá)成共贏的結(jié)果,但是灰度數(shù)據(jù)結(jié)果顯示中介用戶入駐率低
在優(yōu)化前我建立了一個(gè)用戶調(diào)研群收集用戶反饋,與部分用戶電話1V1,發(fā)現(xiàn)有很大潛力去提升。比如與用戶溝通時(shí),用戶說不知道入駐成功后還需要做任務(wù);做完一個(gè)任務(wù)置頂后怎么還需要做任務(wù);再做任務(wù)有什么作用等等
①免費(fèi)入駐 → 入駐成功過程產(chǎn)生疑問,即入駐成功有權(quán)益還是做任務(wù)有權(quán)益?有什么不同?
②置頂一詞有歧義,他們理解置頂是整個(gè)流程完成,而產(chǎn)品放理解置頂是前端頁面的置頂



(3)任務(wù)彈框關(guān)閉方式
通常來說為了方便用戶關(guān)閉彈框,點(diǎn)擊蒙層或點(diǎn)擊關(guān)閉都可任務(wù)。入駐任務(wù)彈框是中介進(jìn)入后強(qiáng)制彈出,1.0版本用戶點(diǎn)擊蒙層也可關(guān)閉,在2.0版本時(shí)候新增上傳社區(qū)格局圖,需要填寫篩選格局信息,關(guān)閉篩選框最常見方式點(diǎn)擊篩選框其它區(qū)域,由于任務(wù)本來是彈框展示區(qū)域有限,點(diǎn)擊蒙層是大多數(shù)人選擇,這時(shí)候可能上傳一半就打斷了,體驗(yàn)非常不好。
處理方式:增加關(guān)閉按鈕點(diǎn)擊區(qū)域,彈框只能點(diǎn)關(guān)閉按鈕關(guān)閉,點(diǎn)擊蒙層不能關(guān)閉



6.3. APP優(yōu)化專家入口

買賣租賃用戶與中介的互動(dòng)率在一定程度上影響著中介留存以及再次入駐意向,入駐后中介用戶在APP展示上至關(guān)重要。
由于品牌色是飽和度比較高的橙色,所以前期整個(gè)頁面的可點(diǎn)擊區(qū)域基本以品牌色為主,每次強(qiáng)調(diào)都是在原視覺上更強(qiáng)。當(dāng)專家版位的視覺強(qiáng)調(diào)用橙色,視覺上可能無法凸顯;
用其輔助色藍(lán)色時(shí),存在2個(gè)問題,①藍(lán)色輔助色視覺感比較重(新建案品牌色不能隨意修改),作為按鈕時(shí)更像是一個(gè)主按鈕;②后續(xù)設(shè)計(jì)可能與其他業(yè)務(wù)線用色混淆,用戶也可能分不清2個(gè)業(yè)務(wù)之間的關(guān)系

設(shè)計(jì)側(cè)如何解決呢?

面對(duì)這樣的僵局再做優(yōu)化,就一定需要轉(zhuǎn)換思路了。跳出純頁面設(shè)計(jì)的層面去看轉(zhuǎn)化,我們到底設(shè)計(jì)什么?此時(shí)需要重新梳理模塊內(nèi)容,明確產(chǎn)品訴求是想突出什么,結(jié)合產(chǎn)品訴求重新梳理內(nèi)容優(yōu)先級(jí),以視覺維度重新輸出設(shè)計(jì)優(yōu)化。



7、數(shù)據(jù)反饋

這一個(gè)階段就是證明之前所說內(nèi)容是對(duì)的,證明你的設(shè)計(jì)正確性與有效性,并對(duì)后續(xù)的優(yōu)化做準(zhǔn)備

從入駐前中后期及APP展示在10月18號(hào)優(yōu)化上線后,中介入駐成功率明顯上升,從而影響著社區(qū)入駐率也明顯上升,APP端互動(dòng)按鈕點(diǎn)擊率也極大提升。整體來說這次改版非常成功,后續(xù)在響應(yīng)式詳情頁上也會(huì)做相應(yīng)的專家版位優(yōu)化,社區(qū)專家曝光率最大化,同時(shí)也提升C端用戶找房效率


上面說了這么多,以上五步簡單來說:

為了什么做 (問題在哪) → 要怎么做 (如何解決) → 如何才算做好了 (評(píng)估體系) → 做好了嗎 (“定性、定量”在過程中的合作方式和態(tài)度) → 還需要優(yōu)化嗎 (驗(yàn)證復(fù)盤,再次出發(fā))

四、設(shè)計(jì)價(jià)值具體表現(xiàn)方向

上面說了這么多其實(shí)想說明設(shè)計(jì)價(jià)值的本身不是局限的,它不僅僅是大多數(shù)人看到的可感知的界面,它還包含對(duì)外增值和對(duì)內(nèi)成本兩種類型:


對(duì)外增值是指價(jià)值的增加,用戶、營收、知名度等,這些都是對(duì)外增值的部分,也就是我上面從設(shè)計(jì)維度改版產(chǎn)品;對(duì)內(nèi)成本是指成本的控制,資源、效率、投產(chǎn)比等,這些都是對(duì)內(nèi)成本的部分
而這兩部分又可以被分為有形和無形



1、對(duì)外增值的有形價(jià)值

對(duì)外增值的有形價(jià)值,一般是指用戶行為數(shù)據(jù)、業(yè)務(wù)盈利數(shù)據(jù)這些,是能被直觀看見的。
如果一個(gè)決策是由你主導(dǎo)推進(jìn)的,且因?yàn)檫@個(gè)決策引起了數(shù)據(jù)的上升,這個(gè)決策就是唯一變量,它能直接證明你的價(jià)值;


但是設(shè)計(jì)不是萬能的,大多情況下設(shè)計(jì)只能通過“影響/實(shí)現(xiàn)局部用戶價(jià)值”間接助力變現(xiàn),我們只需關(guān)注可以通過設(shè)計(jì)手段參與、干預(yù)和落實(shí)的部分即可,這個(gè)就是我上面內(nèi)容項(xiàng)目復(fù)盤總結(jié)的內(nèi)容
當(dāng)然,直接證明并不一定比間接證明更有價(jià)值。更重要的是,你要情境合理、邏輯自洽。



通常我們需要關(guān)注的指標(biāo)有新增(新用戶數(shù),日周月)、傳播(傳播周期)、活躍用戶數(shù)(DAU、MAU)、留存率以及流失率,還有aarrr的海盜指標(biāo)-獲取、激活、留存、傳播、收入,這里不展開講了大家可以去搜索一下。這些數(shù)據(jù)在改版以及做新功能的時(shí)候我們經(jīng)常會(huì)用到。

2、對(duì)外增值的無形價(jià)值

對(duì)外增值的無形價(jià)值是什么呢?比如公司周年慶,設(shè)計(jì)組會(huì)承擔(dān)全部的舞美設(shè)計(jì),但是這個(gè)結(jié)果沒辦法用數(shù)據(jù)來衡量的。但是整個(gè)過程是設(shè)計(jì)全程跟進(jìn)支持,使得客戶好評(píng)高于往年,甚至還在行業(yè)內(nèi)有一定的傳播和討論,這些都是對(duì)外增值的無形價(jià)值。
也就是說除了直觀的數(shù)據(jù)目標(biāo),我們還可以從定義抽象的目標(biāo),抽象的目標(biāo)也可以衡量。

3、對(duì)內(nèi)成本的有形價(jià)值

設(shè)計(jì)組件規(guī)范可以最大化的保證設(shè)計(jì)的一致性、提升開發(fā)的效率以及方便產(chǎn)品的迭代優(yōu)化,我們就使用了這樣的公式:組件開發(fā)時(shí)間*使用次數(shù)-投入的時(shí)間成本,以此估算出組件庫帶來的工時(shí)縮減。當(dāng)然組件庫只是對(duì)內(nèi)成本價(jià)值的一種,對(duì)內(nèi)價(jià)值包含很多,比如設(shè)計(jì)原則提煉、設(shè)計(jì)語言統(tǒng)一等,這些在多個(gè)設(shè)計(jì)合作時(shí)事半功倍



大家常被到的問題:市面上開源的組件這么完善,設(shè)計(jì)師為什么花費(fèi)那么多時(shí)間重新做組件?其實(shí)它存在2個(gè)問題

3.1、業(yè)務(wù)屬性不符
雖然網(wǎng)上存在很多第三方組件比如Ant Design、TDesign等等,研發(fā)使用這些確實(shí)提升效率,但由于設(shè)計(jì)語言不同(公司不同業(yè)務(wù)屬性不同),市面上的組件不一定與自家產(chǎn)品屬性貼合,需要我們結(jié)合產(chǎn)品愿景以及業(yè)務(wù)規(guī)劃進(jìn)行重新設(shè)計(jì)。



3.2、業(yè)務(wù)特性不貼合

我們見到的很多組件只是基礎(chǔ)組件,可以保證基礎(chǔ)設(shè)計(jì)一致性,但由于業(yè)務(wù)領(lǐng)域的獨(dú)特性和多樣性,在一些專業(yè)的場(chǎng)景中有著強(qiáng)烈的業(yè)務(wù)屬性,需要我們對(duì)一些基礎(chǔ)組件進(jìn)行組合,進(jìn)行更專業(yè)的沉淀,這樣在實(shí)際使用的時(shí)候會(huì)更加高效。例如高級(jí)篩選、不同的場(chǎng)景彈框等。



4、對(duì)內(nèi)成本的無形價(jià)值

推動(dòng)產(chǎn)研設(shè)流程優(yōu)化,比如我之前寫的《設(shè)計(jì)師如何提升話語權(quán)》就是我今年上半年發(fā)現(xiàn)了協(xié)作流程的不合理,反復(fù)溝通推動(dòng)了流程的優(yōu)化。這件事讓整個(gè)團(tuán)隊(duì)有了更高效的合作,就屬于對(duì)內(nèi)成本的無形價(jià)值。
項(xiàng)目復(fù)盤對(duì)于我們?cè)O(shè)計(jì)師的能力成長的作用是巨大的。它之所是最快的學(xué)習(xí)方式,因?yàn)樗谑菍?shí)踐中的反饋,這種直觀的經(jīng)驗(yàn)沉淀最終會(huì)融入自己解決問題的知識(shí)體系架構(gòu),而這將進(jìn)一步反輔自己的職業(yè)成長。
復(fù)盤可以讓我們站在第三方角度,重新對(duì)項(xiàng)目流程進(jìn)行全面的回顧與總結(jié)。結(jié)合不同的反饋,客觀的了解當(dāng)前設(shè)計(jì)在整個(gè)業(yè)務(wù)目標(biāo)中的價(jià)值,這是對(duì)我們?cè)O(shè)計(jì)量化最佳途徑。




和大家再說遠(yuǎn)一點(diǎn),工作可能常遇到的場(chǎng)景,設(shè)計(jì)優(yōu)化推不動(dòng),無法進(jìn)行下去。得到反饋是:優(yōu)先級(jí)不高,后續(xù)有時(shí)間再優(yōu)化...這個(gè)其實(shí)在大中小廠都有這個(gè)情況,屬于設(shè)計(jì)價(jià)值的第二層體驗(yàn)優(yōu)化,它優(yōu)先級(jí)高不高,取決于這個(gè)問題是否足夠致命。


比如說這個(gè)問題是核心功能,但根本不可用,這些就是致命問題;如果核心功能可用,只是沒那么好用,也許對(duì)于你這個(gè)產(chǎn)品來說,就沒有那么致命。所以與其想著怎樣優(yōu)化體驗(yàn),不如看看是不是還有什么可以帶來增長的方式,比如擴(kuò)充下一類用戶,或者更多的生態(tài)、品類等等

另外有個(gè)例子是關(guān)于一個(gè)朋友的,這個(gè)朋友工作很拼,在懷孕的時(shí)候周末都不休息,她當(dāng)時(shí)負(fù)責(zé)2個(gè)業(yè)務(wù)中的一個(gè)很差。她調(diào)研了相關(guān)用戶,把用戶做畫像分層,也找出了可以帶來增長的方式,但是發(fā)給當(dāng)時(shí)的合作方,他和他leader都是想混混日子的類型,就應(yīng)付了一下,也沒有往上匯報(bào)。在當(dāng)時(shí),級(jí)別差兩級(jí)去溝通就很費(fèi)勁了,這家公司在績效期,也不強(qiáng)制要求給合作方評(píng)價(jià),所以問題得不到解決,這些辛苦卻換不來的成長
最后朋友就離開了,但她的性格閑不下來,而是找了一份挑戰(zhàn)更大的工作。在之后的幾份工作中,一路得到賞識(shí)和重用,充分發(fā)揮了能力。HR告訴她主管的評(píng)價(jià)是,沒有做不好的事,就算不帶設(shè)計(jì)團(tuán)隊(duì),也可以轉(zhuǎn)行帶別的團(tuán)隊(duì)甚至創(chuàng)業(yè)。
他現(xiàn)在的公司,上下級(jí)也要互相打評(píng)價(jià)。所以身為主管,本身也要真的能力強(qiáng),不然會(huì)被下屬挑戰(zhàn),所以大家的話語權(quán),就靠自己的能力和人品,簡單明了,行就上,不行就下。團(tuán)隊(duì)的同學(xué)都說在她來了之后,他們有干勁多了。他們之前也很積極提方案,但總是被說優(yōu)先級(jí)不高,其實(shí)是沒有找準(zhǔn)更值得做的項(xiàng)目。
所以建議是,首先看看是否是自己的問題,如果在和他人充分溝通后,明確問題確實(shí)不在自己身上,那你改變不了環(huán)境,就改變自己。或者你本身所在的公司挺好的只是部門不好,那就換個(gè)部門,找個(gè)級(jí)別相對(duì)弱化,專注于能力本身和項(xiàng)目本身的公司,成長會(huì)非???。

作者:貝賢設(shè)計(jì)筆記

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


日歷

鏈接

個(gè)人資料

存檔