首頁

設計的價值是保障產(chǎn)品用戶健康度

ui設計分享達人

宜家的設計為銷售負責。比如設計一個杯子,宜家的設計師需要考慮如何更多的賣出杯子。沒錯,銷售更多的產(chǎn)品是設計師的KPI。在這樣的目標導向下,設計師很容易去思考幾個問題。

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

眾所周知,宜家的產(chǎn)品是場景化的,總能讓人感受到設計師們的熱情、心血和心機。設計為銷售負責,售出更多的產(chǎn)品確實可以作為設計有效性的驗證方式之一,但銷售量卻不能作為設計的量化標準。

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

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

用戶跳出率

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

平均訪問時長

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

平均訪問頁數(shù)

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

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

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

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

作者:ZA大人

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

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


2023最新設計趨勢預測!酸性設計、NFT持續(xù)爆火!

ui設計分享達人

設計趨勢每年都在不斷地變化及輪回,多年前的風格技法在結(jié)合了當下的設計元素后,又會給我們展現(xiàn)出不同以往的主流時尚。

“趨勢不一定每年都會更新,但趨勢是我們設計的風向標?!?

基于對網(wǎng)絡數(shù)據(jù)的搜集及分析,我們對2023年設計趨勢做出了預測。

無論是否順應趨勢,我們都應該了解趨勢,擁抱變化,這才是我們設計師的準則。

NO.1 3D立體元素

借助當今的軟件和技術(shù),3D創(chuàng)作已經(jīng)不再被神話,越來越多的設計師開始在自己的作品中運用3D元素。





下圖是Droga5為格林威治(Greenwich)創(chuàng)作的一系列視覺設計,這組設計利用3D圖形,創(chuàng)造了更醒目的視覺效果,將格林威治宣傳為倫敦的新創(chuàng)意社區(qū)。



在手機品牌宣傳物料中,設計師將3D元素與手機進行了緊密結(jié)合,這樣的視覺樣式在市場中很快便能脫穎而出。



NO.2 酸性設計

提起“酸”,大家下意識會想到酸的味道,而所謂的酸性設計更多表現(xiàn)的是一種設計理念。

酸性設計大多畫面元素豐富,各種金屬、玻璃、流體漸變、鐳射等科技感的元素都會運用其中,這也導致這類作品十分強調(diào)藝術(shù)的視覺沖擊性。



乍一看酸性設計會給人一種混亂失調(diào)的感覺,而實際上酸性設計并不止是某一種單一的設計風格,而是一種視覺情緒的表達。當下的暗黑金屬風、二次元的可愛風、明顯的幻彩漸變風格……往往都含有酸性設計的影子。



NO.3 復古懷舊風

回看設計領(lǐng)域每一年的發(fā)展,“復古懷舊”一直是必不可少的關(guān)鍵詞。

無論是品牌形象,亦或是包裝設計,設計師們頻頻用現(xiàn)代手法詮釋復古之風。



還有傳媒集團CNET的品牌重塑,在現(xiàn)代時尚元素的基礎(chǔ)上,還融合了復古插畫,整體設計從1950-1970年代的美國新聞行業(yè)中汲取的靈感。



NO.4 藝術(shù)襯線字體

最近,襯線字體在品牌設計中的出鏡率極高。

不少網(wǎng)站的設計都是圍繞著襯線字體作為構(gòu)圖中唯一或主要的設計元素而存在。





Stradivarius是誕生于1994年的西班牙女裝品牌,與ZARA隸屬同一公司。

2022年2月初,Stradivarius推出了全新的Logo視覺,襯線字體更容易彰顯女性簡潔現(xiàn)代的氣質(zhì)外,同時兼具女性力量。



NO.5 NFT藝術(shù)

近兩年,NFT可以說是對設計、藝術(shù)、技術(shù)行業(yè)產(chǎn)生沖擊最大的新事物之一了。



NFT與平面設計聯(lián)系起來,就是我們所說的數(shù)字平面藝術(shù)。它的到來對設計師影響有很大變化,橫向能力要求有所提高,比如了解虛擬數(shù)字化設計,以及對全新審美和新三維技術(shù)有更高的要求。

以下這幅《Metafisica》便是非常熱門的NFT作品。



NO.6 超萌趣emoji

表情符號在如今是一個超越文本并能得到廣泛認知、跨越文化和多領(lǐng)域的視覺語言。



單一的枯燥圖標很難滿足多元化場景下情感的表達,于是,動態(tài)emoji圖標來了,它能帶來更強的視覺欣賞體驗。



NO.7 高飽和度撞色

高飽和度色彩是年輕的色彩,它是先天的樂天派,同時也是情感的直接表達。

可盡管“吸睛”對品牌而言十分重要,但在設計之余要注意色彩平衡,以免混用色彩,很容易引起視覺疲憊。





NO.8 極簡化設計

極簡主義杜絕一切多余的裝飾,形成獨特而簡單的視覺語言,用最簡潔的表現(xiàn)形式勾勒出產(chǎn)品最基本的形態(tài)



簡潔的圖形設計摒棄了多余的圖案、文理等裝飾樣式,為真正重要的信息創(chuàng)造了呼吸的空間。

留白,是最高級的美。



NO.9 氛圍手寫字體

將富有表現(xiàn)力的手寫字體寫在設計中,能為作品帶來不一樣的氛圍感。

隨手一寫,便是一幅“畫”!





NO.10 玻璃擬物化

2022年,我們在Dribbble或Behance中會發(fā)現(xiàn)很多設計師都開始有意識地采用“玻璃擬物化”美學的設計。相信在2023年,我們會看見更豐富的表達~

毛玻璃效果廣泛應用于UI設計之中,在摹客DT中也能快速完成。



使用玻璃擬物化設計的界面,由于毛玻璃的通透性,會呈現(xiàn)出一種虛實結(jié)合的美感。



除此以外,我們還可以看到的,這一趨勢已經(jīng)明顯轉(zhuǎn)移到了玻璃和水晶質(zhì)感上,而且以令人難以置信的用立體擬真度將圖形設計提升到了一個全新的高度。所以,2023我們也將看到更多與全息和3D趨勢相輔相成的透明質(zhì)感和逼真的玻璃背景等元素的設計。



結(jié)語

2023年的設計趨勢給我們展示了設計的無盡可能,設計師們可以創(chuàng)作出更多超乎尋常的非凡設計,為用戶營造出獨樹一幟的全新體驗。

身為設計師,我們要持續(xù)積累優(yōu)質(zhì)的設計素材,要知道設計趨勢因人而異,我們能做的就是選擇合適的風格應用在設計中,才能發(fā)揮它不可估量的價值!

作者:摹客設計云

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

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


“老字號”互聯(lián)網(wǎng)產(chǎn)品的年輕化之路

ui設計分享達人

一、項目背景

百度文庫APP是一個在線文檔分享平臺,上線已有十余年的時間,是一款名副其實的老字號互聯(lián)網(wǎng)產(chǎn)品。隨著互聯(lián)網(wǎng)的成熟以及年輕用戶的涌入,時代語境和流行文化發(fā)生了變化。年輕化設計已經(jīng)成為互聯(lián)網(wǎng)產(chǎn)品設計中不可避免的話題。在日常對用戶反饋的監(jiān)測中,我們發(fā)現(xiàn)文庫APP當時的體驗已經(jīng)不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發(fā)現(xiàn),文庫APP的視覺風格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。

二、由內(nèi)而外,打造年輕化感知

通過對年輕市場進行洞察,我們發(fā)現(xiàn)年輕用戶對產(chǎn)品的需求是多維度的。不僅對產(chǎn)品的“顏值”有高要求,他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高,也更愿意去探索產(chǎn)品新的玩法,與產(chǎn)品進行沉浸的情感互動。

所以此次年輕化改版不能只是對“產(chǎn)品的外表”進行升級,要從視覺、體驗進行全方位、多維度的年輕化升級。由內(nèi)而外的打造年輕化感知。



三、“老字號”互聯(lián)網(wǎng)產(chǎn)品的煥新之路

2.1 視覺升級-更好看















2.2 體驗升級-更好用









寫在最后

從UI設計誕生初期,設計師在屏幕上模擬現(xiàn)實世界的交互方式,用擬物化的設計風格幫助用戶熟悉UI界面操作。到現(xiàn)在用戶對移動屏幕越來越熟悉,設計師們可以在產(chǎn)品設計中去嘗試更多的可能性。產(chǎn)品與用戶共同成長才是年輕化設計的意義。

未來,我們也會保持好奇心和探索欲,不斷打磨產(chǎn)品體驗,與用戶共同成長。

作者:百度MEUX

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

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

如何有效提升產(chǎn)研效率和質(zhì)量

ui設計分享達人

前言

互聯(lián)網(wǎng)瞬息萬變,在產(chǎn)品不斷更迭的過程中,我們經(jīng)常說要保證產(chǎn)品設計的一致性和質(zhì)量,提升產(chǎn)研鏈路的效率。但現(xiàn)實情況是:產(chǎn)研團隊長期面對的是產(chǎn)品越來越復雜,體量越來越大,一個個復雜的產(chǎn)品下包含N個業(yè)務線,N個業(yè)務團隊,甚至還有外部合作的業(yè)務,每個迭代都要面對數(shù)以百計的功能上線,經(jīng)常容易出現(xiàn)各種相同但不一致的功能,上線質(zhì)量參差不齊,執(zhí)行者也容易陷入日復一日的需求海洋而沒有更多精力去挖掘更有價值的事情。


所以如何解決團隊效率和產(chǎn)品質(zhì)量問題?我們的解法是抽象體系化的解決方案:設計模式化和代碼化,設計從原子到全局進行統(tǒng)一和優(yōu)化,并形成系統(tǒng)化的設計指導,由開發(fā)進行模式代碼化,提供靈活可配置的規(guī)則。以此,設計有更系統(tǒng)化的設計原則,整體的統(tǒng)一性和體驗有保障,設計和開發(fā)周期也可以縮減,甚至大部分日常需求可直接由產(chǎn)品對接開發(fā)直接上線。



目錄

  • 一、什么是系統(tǒng)化解決方案,什么樣的團隊適合做
  • 二、如何輸出、推進設計解決方案
  • 三、解決方案的管理和發(fā)展

(一)什么是系統(tǒng)化解決方案,什么樣的團隊適合做

1.1 什么是系統(tǒng)化解決方案?

大多數(shù)日常需求大多是從單點出發(fā),當點變多變復雜了,就容易出現(xiàn)上述說到的現(xiàn)狀問題。所以解決方案需要基于業(yè)務全盤進行設計抽象:從元素——組件——區(qū)塊——頁面——功能流程沉淀設計規(guī)則并代碼化,來靈活提供拼裝N個不同頁面的機制,幫助團隊更系統(tǒng)化的進行產(chǎn)品設計。從組成內(nèi)容不難看出,解決方案是需要建立在基礎(chǔ)組件基礎(chǔ)上,與基礎(chǔ)組件、復雜組件、行為模式共同組成設計系統(tǒng)的【功能模式】部分。





1.2 什么樣的團隊適合做

解決方案是一套相對穩(wěn)定的設計機制,所以在產(chǎn)品初期或團隊建立初期,產(chǎn)品可能經(jīng)常會調(diào)整的情況下,并不適合做。初期可以借助成熟的設計系統(tǒng)來減少投入成本。而到成長期可以根據(jù)業(yè)務的發(fā)展梳理基礎(chǔ)元素、組件,選擇性的建立部分穩(wěn)定且利用率高的解決方案,并持續(xù)發(fā)展,保證解決方案可以起到指導和提效的作用。隨著產(chǎn)品或團隊逐漸成熟,解決方案也應該隨著一起成長,相互影響相互作用。


(二)如何輸出、推進設計解決方案

2.1 由大到小的進行信息拆解

1)對產(chǎn)品頁面(尤其是重點功能)進行盤點,劃分頁面類型:比如列表、表單、詳情、dashboard;

2)對頁面中的內(nèi)容進行區(qū)塊歸類

3)對區(qū)塊中的信息進行拆解



這三個過程下來,對于問題、規(guī)則、規(guī)律都會有一定的概念。以一個后臺系統(tǒng)為例

1、頁面大類主要是:列表、表單、詳情。

2、其中列表的內(nèi)容大致區(qū)塊分為:頁面標題區(qū)、列表操作、列表篩選、列表內(nèi)容,到這個階段已經(jīng)可以發(fā)現(xiàn),相同區(qū)塊位置就存在不穩(wěn)定,在后臺系統(tǒng)中可能影響面不會非常大,但對于內(nèi)容復雜繁多的工具或C端界面就會容易出現(xiàn)找不到的情況。

3、不同區(qū)塊的內(nèi)容拆解,同樣也會發(fā)現(xiàn)一些細節(jié)問題,比如篩選的樣式、規(guī)則不一致,列表操作的方式、位置、樣式、交互不一致等等



2.2、抽象、重組:從布局——區(qū)塊——組件——設計規(guī)則

從第一步全盤的信息拆解和歸納, 已經(jīng)發(fā)現(xiàn)問題, 這一階段主要2點:第一是如何通過設計規(guī)則來避免同樣的問題產(chǎn)生,第二是如何通過簡單的規(guī)則重組減少多人合作記憶復雜度。思路類似于設計一個界面,首先得有一個布局劃分,不同的區(qū)塊要放些內(nèi)容,再到區(qū)塊里的細節(jié)內(nèi)容規(guī)則,從而抽象出由布局到區(qū)塊的設計規(guī)則和可復用的組件。

以前面說的列表為例

1) 區(qū)塊主要是4類,明顯的問題是區(qū)塊位置不穩(wěn)定,所以在布局結(jié)構(gòu)上,需要定義1-2個穩(wěn)定的可配置的布局框架來適應不同的內(nèi)容



2)不同區(qū)塊梳理組成內(nèi)容,內(nèi)容細則



3)標記出可組件化的內(nèi)容及規(guī)則



4)提煉整個過程中通用的設計規(guī)則,作為全局的指導。如:國際化、排版規(guī)則、超限規(guī)則、適配規(guī)則、文案規(guī)則等等。

通過布局——區(qū)塊——組件——設計規(guī)則,可以靈活的進行頁面拼搭



2.3 落地代碼庫 

區(qū)分通用層和業(yè)務層,通用層落地到通用模板市場,利用腳手架生產(chǎn)新頁面。業(yè)務層面的落地則是基于通用庫封裝具備業(yè)務屬性(如:業(yè)務主題、業(yè)務數(shù)據(jù)、業(yè)務拓展方案)的業(yè)務庫來生產(chǎn)新頁面。

目前群核設計團隊建立了一套平臺通用的解決方案,適用于所有中后臺產(chǎn)品。業(yè)務屬性比較強的產(chǎn)品也基于通用解決方案封裝業(yè)務層面的解決方案,同樣的思路也應用在不同體系的工具場景中。整體實踐下來,產(chǎn)研效率提升近50%,甚至完全解放了一條業(yè)務線的設計資源。產(chǎn)品體驗的一致性、上線質(zhì)量也有明顯的提升



三、解決方案的管理和發(fā)展

解決方案作為設計系統(tǒng)的一部分,與設計系統(tǒng)一同管理,業(yè)務設計師使用系統(tǒng)來輸出,反饋問題或需求給系統(tǒng),有系統(tǒng)設計師判斷可行性,周期性的管理,及時更新并在內(nèi)部互通,促進互相成長和發(fā)展。

解決方案與設計系統(tǒng)的發(fā)展有一點不同的是解決方案有更多業(yè)務化的內(nèi)容,業(yè)務團隊根據(jù)業(yè)務迭代維護解決方案。當業(yè)務的方案達到通用級別,則列入到通用庫。



這些方法和思路也并不限制行業(yè)或產(chǎn)品類型,僅是在我們當前服務的產(chǎn)品體系下總結(jié)的方法。當然解決方案并不能解決所有問題,只是希望在提供更系統(tǒng)化的設計方法和模式的同時能減少重復工作提升效率,讓產(chǎn)研團隊有更多的精力和時間投入更有價值的事情。

作者:酷家樂UED

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

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



工作中如何體現(xiàn)設計價值?

ui設計分享達人

http://sillybuy.comhttp://sillybuy.comhttp://sillybuy.comhttp://sillybuy.com/dp.htmlhttp://sillybuy.comhttp://sillybuy.com/web.htmlhttp://sillybuy.com/Design.htmlhttp://sillybuy.com/Design.htmlhttp://sillybuy.com

寫在前面

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


分享目錄

1、如何理解設計價值

2、設計師價值分層 

3、設計價值案例體現(xiàn)

4、設計價值具體表現(xiàn)方向

一、如何理解設計價值

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

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



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



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

  • 實現(xiàn)了哪些業(yè)務目標
  • 解決了哪些業(yè)務問題
  • 創(chuàng)造了哪些業(yè)務價值

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



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

二、設計師價值分層

設計師的價值可以分為五層:

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

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

三級價值(增長爆破):洞察增長爆破點,自驅(qū)推動增長

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

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

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

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

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



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

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



第 3 層:增長爆破

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

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


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



三、設計價值案例體現(xiàn)

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

1、業(yè)務目標

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



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

阿里《五導家設計法》中對業(yè)務目標和設計目標的定義是:

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

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

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



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



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

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

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



3、洞察目標用戶特征

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



4、梳理用戶入駐流程

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



5、設計目標推導

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



6、設計方案落地

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

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

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



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



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



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



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

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



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

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



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



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

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

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

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



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

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

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


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

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

四、設計價值具體表現(xiàn)方向

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


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



1、對外增值的有形價值

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


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



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

2、對外增值的無形價值

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

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

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



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

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



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

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



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

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




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


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

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

作者:貝賢設計筆記

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

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


數(shù)據(jù)可視化在移動端的應用

seo達人

1.應用場景

數(shù)據(jù)可視化在移動端的主要體現(xiàn)是“數(shù)據(jù)圖表”,我們最常用的數(shù)據(jù)設計組件就是:柱狀圖、折線圖、環(huán)形圖等,它們簡單易懂,容易被用戶接受。它們常常出現(xiàn)在與我們生活息息相關(guān)的產(chǎn)品當中,例如健身 app 中使用圖表記錄我們體重的變化;效率工具型的 app 記錄分析你在某一件事情的花費的時間;金融理財展示股市中某一支股票的價格走勢等等。

 

2.數(shù)據(jù)可視化的特點

數(shù)據(jù)可視化屬于一種理性思維,產(chǎn)品通過圖表可以向用戶清晰的反應用戶在每一個項目中所花費的時間和精力,用戶可以通過數(shù)據(jù)可視化的圖表形式快速了解到其中的信息?,F(xiàn)在iOS 和 Android 平臺暫時沒有推出在數(shù)據(jù)可視化的設計規(guī)范,但是大家只要按照平臺的基本規(guī)范設計,相信都能設計出美觀、大方數(shù)據(jù)圖表。如果大家對數(shù)據(jù)可視化有興趣,這里向大家推薦 ANtv(https://antv.alipay.com/zh-cn/index.html)螞蟻數(shù)據(jù)可視化團隊,ANtv 是國內(nèi)在數(shù)據(jù)可視化發(fā)展最完善的團隊之一。 

 

3.使用原則

在數(shù)據(jù)可視化設計的時候我們首先要注意的是盡量避免使用“復雜”的數(shù)據(jù)表現(xiàn)形式,針對于普通用戶我們要始終堅持 – 簡單易懂的原則。其次在選擇數(shù)據(jù)表現(xiàn)形式的時候一定要考慮到是否適用于目標數(shù)據(jù),如果不能清晰的向用戶清晰的傳遞出數(shù)據(jù)背后的信息,那么建議你重新進行分析,更換數(shù)據(jù)表現(xiàn)形式。在我們經(jīng)常使用的數(shù)據(jù)圖表中,柱狀圖擅長數(shù)值比較;折線圖擅長做數(shù)據(jù)趨勢展示;餅圖和環(huán)形圖適用于各類數(shù)據(jù)比例比較。這里我們需要注意的是折線適用于具有連貫關(guān)系數(shù)據(jù)緯度進行比較,而柱狀圖則不需要。我們以不同蔬菜的價格比較和單個蔬菜價格趨勢為例,例如當我們在比較各種蔬菜的價格的時候,由于各品類蔬菜沒有任何連貫性的邏輯關(guān)系,所以折線圖不合適,而柱狀圖則能清晰的表達蔬菜之間價格比對。
蔬菜品種之間沒有任何連續(xù)性,所以不適合用折線圖來表示;而單個蔬菜的價格走勢是通過具有連續(xù)性的“時間”緯度進行比較的,所以趨勢圖選擇折線圖更加合適。
餅圖不適用于分類過多的數(shù)據(jù)展示,隨著數(shù)據(jù)種類的增加切片的數(shù)量也隨之增加,每個切片的大小過于相似,無法達到數(shù)據(jù)對比的目的。
相對PC,手機屏幕展示的區(qū)域有限,不適宜展現(xiàn)數(shù)據(jù)緯度過多的數(shù)據(jù)。假設我們遇到數(shù)據(jù)緯度眾多的數(shù)據(jù),我們可以通過橫軸交互來增加數(shù)據(jù)展示區(qū)域。
我們還可以對數(shù)據(jù)進行梳理清洗,通過增加交互步驟減少用戶的記憶負擔,分段查看數(shù)據(jù)。例如燈塔專業(yè)版中的行業(yè)數(shù)據(jù)將電影行業(yè)中涵蓋的信息分成票房、影片數(shù)、影院數(shù)、銀幕數(shù)等維度進行分析。

 

4.場景分析

柱狀圖

柱狀圖擅長對不同類型的數(shù)據(jù)進行數(shù)值比較,柱狀圖之間的條目相對獨立,數(shù)據(jù)之間不需要有邏輯的關(guān)聯(lián)性。我們常用的柱狀圖分為橫向柱狀圖和縱向柱狀圖,如下圖:
兩者的區(qū)別在于縱向柱狀圖帶有一定的邏輯關(guān)系,可用于 TOP 排名,數(shù)值越大的位置越靠上。例如 iOS 系統(tǒng)中會記錄你最常使用的 App 形成縱向柱狀圖,并按照使用 App 的時長大小進行一次排列。

 

橫向柱狀圖

橫向柱狀圖只需在以 X 軸為基線通過對比柱形圖的長短就可以進行數(shù)據(jù)比較,因其簡潔、直白的設計形式深受用戶們的喜愛,應用領(lǐng)域極廣,是我們最常見到的圖表形式之一。例如在支付寶中會顯示用戶每月的消費,并能通過橫軸交互查看更多數(shù)據(jù)。

 

縱向柱狀圖

縱向柱狀圖以 Y 軸為基線通過對比柱形圖的長短就可以進行數(shù)據(jù)比較,縱向柱狀圖區(qū)別于橫向柱狀圖的地方在于:在具有一定關(guān)聯(lián)性的數(shù)據(jù)種類進行比較的時候,可以通過數(shù)值的大小依次排列顯示明確數(shù)據(jù)等級關(guān)系。例如網(wǎng)易有錢中會按照你消費的品類數(shù)值的大小進行排布,讓用戶明確知道自己在那一方面消費最多,并且依靠 Y 軸交互我們可以向下滑動查看更多數(shù)據(jù)信息。

 

折線圖

折線圖通過線鏈接橫向相鄰數(shù)據(jù)的數(shù)據(jù)表現(xiàn)形式,通常相鄰數(shù)據(jù)之間都有一定的邏輯關(guān)系,一般以時間屬性為主,表達一定周期之內(nèi)的趨勢走向。
折線圖在金融領(lǐng)域的產(chǎn)品應用極其廣泛,“折線圖+漲幅數(shù)據(jù)”無疑是吸引用戶理財?shù)睦?。這時折線圖不單單代表數(shù)據(jù),在用戶心中已經(jīng)成為一種標志。
當然折線圖最重要還是記錄段時間之內(nèi)的趨勢變化,例如微信運動中記錄用戶每天的運動量,用戶可以根據(jù)折線圖反饋的信息來調(diào)整自己的運動計劃。

 

餅狀圖

餅狀圖是通過將一個圓餅按照分類的占比劃分成多個區(qū)塊,整個圓餅代表數(shù)據(jù)的總量,每個區(qū)塊(圓弧)表示該分類占總體的比例大小,所有區(qū)塊(圓?。┑募雍偷扔?100%。
現(xiàn)在 App 較少用到餅狀圖而更多的采用環(huán)形圖,因為餅狀圖和環(huán)形圖兩者有異曲同工之妙,都是應用于表示不同分類的占比情況,通過弧度(角度)大小來對比各種分類。但相對于餅狀圖,環(huán)形圖的空間利用率更高。

 

環(huán)形圖

由兩個及兩個以上大小不一的餅圖疊在一起,挖去中間的部分所構(gòu)成的圖形。通過弧長來比較各類數(shù)據(jù)的占比大小。
在燈塔專業(yè)版中通過環(huán)形圖能夠準確的表達出各個電影所占總場次的比例。

 

5.畫重點

1.在數(shù)據(jù)可視化的設計當中我們要是始終堅持“簡單易懂”的原則,選擇最合適的數(shù)據(jù)表達形式
2.柱狀圖擅長數(shù)值比較;折線圖擅長做數(shù)據(jù)趨勢展示;餅圖和環(huán)形圖適用于各類數(shù)據(jù)比例比較。
3.在有限的移動端的顯示區(qū)域,我們可以借助于 XY 軸交互手段和對數(shù)據(jù)進行梳理增加交互步驟分段查看更多數(shù)據(jù)。 

 


作者:姜正

轉(zhuǎn)載請注明:學UI網(wǎng)》數(shù)據(jù)可視化在移動端的應用

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司





數(shù)據(jù)可視化大屏設計經(jīng)驗分享【高級篇】

seo達人

案例解析

下圖是我們優(yōu)秀的技術(shù)人員利用模版直接布局出來的頁面,也可以理解為需求頁面,接下里就需要我根據(jù)頁面的內(nèi)容重新定義風格設計。

原圖

 

當我看到這個頁面,首先要知道他是干什么的?功能是什么?是純數(shù)據(jù)展示還是監(jiān)測預警?通過這些了解基本就能知道有沒有交互行為,有交互和沒交互在數(shù)據(jù)可視化的設計思路上會有很多不同,還有功能不一樣設計方向也會不一樣。

其次要分析出主次數(shù)據(jù)總分數(shù)據(jù),還要剖析目前圖表運用的合理性和大屏的設計比例尺寸等等,最終可以通過分析對頁面有個合理的布局展示。

通過分析對頁面重新布局,如下圖:

重新布局圖

 

最終設計稿

 

數(shù)據(jù)可視化頁面設計,如果頁面中有一個非常搶眼的主視覺圖,那么一般對其他的元素不會過度的設計,如果都是搶視覺的元素整個頁面太“花枝招展”了。

上圖左右兩邊的圖表只是簡單的呈現(xiàn)出來,這樣整體視覺上更有呼吸感,有張力,如果每個圖表都加上邊框,頁面就會顯得局促,常見的3D地理城市,主視覺為3D模型,輔助元素一般都不過度修飾。

 

1、關(guān)于板式風格元素

主題風格構(gòu)思階段:

既然是“首都國際機場”那么用3D地球來展示最佳不過了,3D地球無疑是一個重磅視覺元素,飛機圍繞地球往返飛行形成光線,這樣看上去頁面會有很多線條。

設計講究“你中有我,我中有你”所以這個頁面可以設定為以“線條”主題,盡可能的用纖細的效果設計其他元素,例如頁面中纖細的條形圖、柱狀圖、環(huán)形圖這樣的設計就能體現(xiàn)出元素間的關(guān)聯(lián)性,整體能達到一種視覺平衡和諧。

在思考用3D地球來設計時,我是提前跟開發(fā)溝通過,知道可以落地實現(xiàn),然后才著手開始設計,所以工作中有拿不準的設計,要即時跟開發(fā)溝通。

 

元素設計階段:

標題設計

 

左邊的標題中規(guī)中矩看起來比較死板,不太符合這個產(chǎn)品頁面整體調(diào)性,右邊的標題用了斜體和輕微的漸變色,能夠渲染頁面飛機動感的氛圍,所以右邊的設計形式更合適。

但不是說所有產(chǎn)品標題都應該用斜體漸變色,要根據(jù)產(chǎn)品而定,例如政府類產(chǎn)品更多是要體現(xiàn)莊嚴的氛圍,中規(guī)中矩的形式就更為合適。

天氣、空氣質(zhì)量、時間元素

 

天氣溫度、空氣質(zhì)量、時間是一定要加上的,原因是飛機在戶外飛行肯定會關(guān)注天氣,而對于北京機場來說關(guān)注空氣質(zhì)量也尤為重要,再說說時間,既然是機場實時數(shù)據(jù),那么當下的時間對比實時數(shù)據(jù)就非常有意義,所以時間要體現(xiàn)出來。

 

2、關(guān)于圖表設計

圖表一改版:

總航班量圖表截圖

 

上面圖表雖然可以表達清楚全部數(shù)據(jù),但圖表包含航班總數(shù)量,這樣的展現(xiàn)方式視覺上表現(xiàn)弱,同時不能夠直觀表達總量里面包含延誤航班和取消航班。

改版后

 

改版后從“出港量”“進港量”兩個維度出發(fā),合并同類項:

出港量包含:出港延誤航班、出港取消航班

進港量包含:進港延誤航班、進港取消航班

用大字號重點突出進出總航班量,然后在下面分別羅列延誤航班數(shù)量、取消航班數(shù)量,這樣數(shù)據(jù)之間的關(guān)系表達就很清晰,一看就明白,同時兩個維度各個數(shù)據(jù)也可以互相比較。

 

用色說明:

延誤航班用黃色,黃色情緒映射為等待,延誤即等待;

取消航班用紅色,紅色情緒映射為停止,取消即停止。

 

圖表二改版:

問題圖表

 

上圖環(huán)形圖其實用的并不恰當,環(huán)形圖更適合總量的各個百分比呈現(xiàn),標題“今日前五延誤進港機場”其實想表現(xiàn)前五名城市的延誤進港排名,排名用條形圖最為直觀。

但從頁面的整體看一下,已經(jīng)有兩處用到了條形圖,柱狀圖,如果這里還是條形圖,那么頁面看起來會很單調(diào),圖表也沒有表現(xiàn)的多樣性,所以現(xiàn)在設計要體現(xiàn)圖表的多樣性也能夠有排名的直觀呈現(xiàn)。

改版后圖表

 

修改后依舊采用環(huán)形圖,把排名由高到低用注釋的形式呈現(xiàn),倆者都能兼顧,這樣的設計思考方式就是設計思維,設計師既要考慮視覺,也要考慮功能目的,善于在兩者之間找到平衡。

 

3、標題和文案優(yōu)化

第一處修改:

問題標題

上圖左右兩個標題唯一的區(qū)別就是一個是“進”字,一個是“出”字,這兩個字如果不仔細看很難一眼出左右的區(qū)別,所以我們在設計標題的時候,一定要提煉關(guān)鍵詞,把可以作為明顯區(qū)別的關(guān)鍵詞置前。

調(diào)整后標題

 

調(diào)整后的標題把重點區(qū)別的關(guān)鍵詞置前,觀者能夠快速識別。

 

第二處修改:

問題標題和數(shù)據(jù)格式問題

 

此圖表數(shù)據(jù)體現(xiàn)是延誤航班數(shù)據(jù),所以標題的關(guān)鍵詞應該是“延誤”,延誤放在標題中間沒能起到快速識別數(shù)據(jù)類型作用。

再者就是圖表上的數(shù)據(jù)格式錯誤,航班數(shù)量不該有小數(shù)點,因為航班數(shù)都是整數(shù)呈現(xiàn)。

調(diào)整后

 

調(diào)整后關(guān)鍵詞置前“延誤進出港機場-今日前五”用橫杠隔開“今日前五”能夠過度信息,更直觀。

 

4、3D效果技法

3D地球效果:

原圖上進出港途中詳情是上下分開的:

開始想用進出港切換的方式呈現(xiàn),就是一個大地球,一個小的縮略圖,可以點擊切換,也可以自動輪播大小切。

初稿

 

后考慮到此產(chǎn)品是沒有任何交互操作的,這里設計交互行為是不合理的,所以要換一種形式。

定稿(數(shù)據(jù)15分鐘刷新一次)

 

調(diào)整后讓兩個數(shù)據(jù)都呈現(xiàn)在地球上,用兩種不同光線顏色表示進出港班次。

青色:北京擴散的方向代表出港

藍色:聚焦北京的方向代表進港

如果細心查看頁面會發(fā)現(xiàn),所有關(guān)于進港的都是青色,例如進港總航班量、進港人數(shù)、即將進港航班;同樣關(guān)于出港的都是藍色,目的就是要建立觀者顏色對數(shù)據(jù)類型的認知。

 

3D地球技法教程:

3D地球動畫效果,純用C4D軟件完成:

  • 1、地球用一個世界地圖貼圖
  • 2、地球的凹凸效果用了材質(zhì)的置換和凹凸
  • 3、小飛機動畫用的是對齊曲線動畫
  • 4、國家之間樣條生成用的是插件 LON—LAT Connection
  • 5、光線粒子用的是插件 X-Particles

下面我們一一介紹:

首先找一張世界地圖,這里稱為“球皮”,ps調(diào)整色調(diào),滿意為止。

調(diào)色球皮

 

把球皮放入材質(zhì),表面的凹凸效果用置換和凹凸。

材質(zhì)設置

 

小飛機動畫用的是對齊曲線動畫,打關(guān)鍵幀轉(zhuǎn)一圈,記得勾選切線,不然飛機會橫的飛。

飛機繞地球動畫

 

國家之間樣條生成用的是插件 LON—LAT Connection,這一步很關(guān)鍵,插件使用很簡單就是選擇:洲-國家-城市~洲-國家-城市,tab切換有設置可以設置樣條曲線的高度弧度等。

城市鏈接樣條設置

 

最后就是用插件 X-Particles 渲染光線粒子效果,光線效果利用毛發(fā)渲染,第一條光線走完凍結(jié),后面小光線依次循環(huán)發(fā)射。
光線渲染

 

上面教程說的很籠統(tǒng),有基礎(chǔ)的同學肯定會明白,接下來我們來看如何開發(fā)落地。

 

3D地球效果開發(fā)落地:

首先我們要知道一個網(wǎng)站Echartsj 里面有個3D路徑圖,看下圖:

Echartsj網(wǎng)站截圖

 

上圖兩個地球路徑圖組件,都可以實現(xiàn)我們的效果,只需要我們把色調(diào)調(diào)整好的“球皮”給到開發(fā)人員,替換組件里面的圖片即可,組件生成的地球原理是一樣的,也是由一張圖包裹成球,地球數(shù)據(jù)光線顏色可更改,把色值給開發(fā)人員即可。

 

案例總結(jié):

1、數(shù)據(jù)可視化設計,首先了解功能,分析數(shù)據(jù)之間的關(guān)系

2、構(gòu)思主題,圍繞主題設計其他元素,特殊效果跟開發(fā)溝通

3、分析數(shù)據(jù),合理選用圖表,對圖表能靈活運用

4、不要忽視文案的設計,提取關(guān)鍵詞

5、加強技法,了解數(shù)據(jù)可視化設計網(wǎng)站

 

最后

數(shù)據(jù)可視化大屏設計,對視覺表現(xiàn)、數(shù)據(jù)的合理呈現(xiàn)有一定的要求,這兩點都是由設計師為主導,所以設計前根據(jù)產(chǎn)品定義風格,了解數(shù)據(jù)之間的關(guān)系非常重要,切記不要太依賴原型圖。


作者:吳星辰

轉(zhuǎn)載請注明:學UI網(wǎng)》數(shù)據(jù)可視化大屏設計經(jīng)驗分享【高級篇】

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



后臺數(shù)據(jù)可視化界面設計的10條經(jīng)驗法則

seo達人

寫在前面:本文的英文原標題是“10 Rules of Dashboard Design”,其中Dashboard如果翻譯成儀表盤的話,總覺得不大容易理解,所以我在這里把它翻譯為數(shù)據(jù)可視化。數(shù)據(jù)展示方面的設計,相信大家會經(jīng)常用到,這篇文章有很多簡單直接,立馬就能用上的干貨,一起來學習吧!

 

為什么數(shù)據(jù)可視化設計非常重要?

數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復雜信息。
一個優(yōu)秀的數(shù)據(jù)可視化界面包含以下幾個關(guān)鍵要素:
清晰: 一個好的數(shù)據(jù)可視化界面一定是能夠清晰的展現(xiàn)用戶所需要的信息。當用戶看到界面內(nèi)容時,應該能在5秒內(nèi)了解到它的用途,而不是花費至少幾分鐘才能理解各個數(shù)據(jù)的含義。
有意義: 一個有用的數(shù)據(jù)可視化界面上的每一條信息都應該是有意義的。這些有意義的信息能準確傳達設計師想要表達的內(nèi)容。每一條數(shù)據(jù)的背后,用戶應該都是可以讀懂的。
一致性:優(yōu)秀的數(shù)據(jù)可視化界面,會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局,結(jié)構(gòu)和內(nèi)容。
簡單: 復雜的界面違背了數(shù)據(jù)可視化設計的初衷。如果一個信息呈現(xiàn)不夠簡單直接,那么肯定是在設計上出現(xiàn)了問題。

 

如何設計一個數(shù)據(jù)可視化界面?

數(shù)據(jù)可視化界面設計最重要的步驟是需要了解目標用戶是誰,能為他們提供什么價值。了解目標受眾的知識背景和理解水平能幫助你做出對他們有價值的設計。
在了解目標用戶時,有必要了解受眾感興趣的數(shù)據(jù)類型。
“專注于用戶的需求,更容易產(chǎn)生他們喜歡使用的結(jié)果?!?/section>
目標用戶級別可能會在一級和另一級之間變化,這是一個挑戰(zhàn)性的點。與其他任何設計項目一樣,可以細分受眾并將信息相應地分為基本內(nèi)容和高級內(nèi)容。
在界面中表示一組信息有多種方法,選擇正確的數(shù)據(jù)指標是設計數(shù)據(jù)可視化的另一個關(guān)鍵元素。這也與目標用戶的偏好有關(guān),即他們希望看到什么樣的信息。
“根據(jù)需要設計數(shù)據(jù)可視化界面,為不同的業(yè)務使用不同類型的展示方式?!?/section>
下面是為目標用戶設計數(shù)據(jù)可視化界面時需要考慮的一些重要規(guī)則。

 

1. 區(qū)分層級

一個非常常見的錯誤就是設計師沒有對信息區(qū)分層級,所有的內(nèi)容看起來都一樣重要。
可以嘗試使用組件的大小和位置來區(qū)分數(shù)據(jù)的層次結(jié)構(gòu)。
  • 通過定義信息層級,讓用戶清楚什么是最重要的
  • 在左上角顯示更重要的信息,沿著對角線方向,信息的重要程度應該依次減弱,右下角的信息重要性最弱
  • 還可以將信息劃分為不同類別,并在不同的視圖中顯示它們

 

2.簡單易懂

數(shù)據(jù)可視化的真正目的是用一種更方便理解,更簡單的形式來傳達復雜信息。
  • 不要放一些大多數(shù)用戶都難以理解的信息
  • 使用更少的列來顯示信息
  • 刪除冗余內(nèi)容來減少混亂

 

3. 一致性

使用一致性布局設計的數(shù)據(jù)可視化界面看起來更好。
  • 為了使界面更容易閱讀,可以在信息組之間使用類似的可視化效果。
  • 把相關(guān)的信息放的更近一些
  • 對相關(guān)內(nèi)容進行可視化分組

 

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。
  • 把相關(guān)的信息放的更近一些
  • 不要將相關(guān)信息分散在界面上
  • 對相關(guān)內(nèi)容進行可視化分組

 

5. 對齊

可視化組件元素需要在視覺上對齊,并保持視覺平衡。
  • 將可視化組件元素在視覺上進行對齊,可以將界面組織的更好
  • 嘗試將組件元素進行網(wǎng)格布局設計
  • 不對齊的界面會給用戶帶來糟糕的體驗

 

6. 留白

留白是為了讓界面有呼吸感,它使得用戶在使用你的界面時能夠有出喘息的空間。
  • 當用戶查看需要的信息時,界面中的留白能夠吸引用戶的目光,提升用戶體驗。
  • 減少留白會使用戶的界面變得混亂
  • 使用留白能對信息進行可視化分組
留白太少簡直就是在鼓勵你的用戶盡快離開

 

7. 顏色

使用有效的配色方案來吸引用戶的注意力,幫助他們輕松地瀏覽信息。
  • 仔細選擇顏色,目標是使內(nèi)容易于閱讀。
  • 使用大對比度來顯示背景上的視覺元素。
避免使用低對比度和低效的漸變

 

8. 字體

標準字體是可視化界面中的最佳字體,除非有特別的理由,一般不要用其他字體。
  • 使用標準字體,因為它們更容易閱讀和掃描。
  • 特別和美術(shù)字體可能看起來不錯,但很難理解
  • 避免所有的大寫字母文字,因為它很難閱讀,人類的大腦需要時間來消化它。
  • 使用合適的字體大小和風格,有效地傳達信息。
不要使用影響可讀性的字體

 

9. 數(shù)字排版

顯示精度超過要求的數(shù)字使它們難以閱讀和理解。
  • 必要時使用整數(shù),因為長數(shù)字會使用戶混淆
  • 省去不必要的信息
  • 讓用戶能夠容易地比較簡單的差異細節(jié)

 

10. 標簽

使用能夠快速有效地向用戶傳達所需信息的標簽。
  • 避免使用帶旋轉(zhuǎn)的標簽,因為很難閱讀
  • 盡可能的使用標準的縮寫
避免旋轉(zhuǎn)標簽

 

總結(jié)

數(shù)據(jù)可視化旨在節(jié)省時間和精力,將復雜和抽象的數(shù)據(jù)以更簡單的形式表示,目的是以用戶能夠理解的方式將關(guān)鍵信息傳達給他們,確保自己理解用戶所需,并給他們需要的信息。

 


作者:Saadia Minhas

譯者:彩云sky

轉(zhuǎn)載請注明:學UI網(wǎng)》后臺數(shù)據(jù)可視化界面設計的10條經(jīng)驗法則

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




數(shù)據(jù)可視化設計 – 3D粒子模型科技感動效【進階教程】

seo達人


調(diào)研給大家看的效果圖
上圖是調(diào)研給大家看的效果圖,這種效果常常在科幻大片中看到,是FUI風格較常見的設計元素,實際上可視化設計也常用真實的形象和三維場景,助力數(shù)據(jù)解釋。
如下圖,之前設計的產(chǎn)品“軍人心理指標采集系統(tǒng)”,功能上是呈現(xiàn)人的生理指標數(shù)據(jù),界面中人的形象,就能直觀的把人體,如腦電、心率等各部位對應的數(shù)據(jù)展示清楚。
3D動畫使用場景
不多說了開干!
接下來我們用兩種方式實現(xiàn)這種效果

 

方法一: 

用到的軟件為:C4D+AE
首先得有模型,C4D自帶了一些模型,網(wǎng)上也可以找到很多模型,我常在“CG模型網(wǎng)”找模型,模型最好找C4D格式或者通用obj格式,其他軟件格式需要轉(zhuǎn)格式,當然如果有建模能力可以自己建模,下面用一個帥氣的跑車為例講解。
第一步:找到需要的模型在C4D軟件中打開;

 

第二步:使用晶格,把模型置入晶格下面,調(diào)整晶格對象屬性中的數(shù)值,使模型看起來是線框展示,調(diào)整的半徑尺寸需要呈現(xiàn)細絲狀,太粗略顯笨重;

 

 

第三步:打關(guān)鍵幀制作動畫讓跑車原地打轉(zhuǎn)一圈360度,需要注意的是坐標點位置的調(diào)整,例如模型旋轉(zhuǎn)一圈,坐標最好在模型中心位置;

 

第四步:設置緩動曲線,我們要實現(xiàn)的效果勻速運動循環(huán)播放更為貫通,默認會有緩入緩出,所以需要調(diào)整,右擊指定的關(guān)鍵幀區(qū)域,找到顯示函數(shù)曲線,彈窗里點擊“線性”直角圖標;

 

 

第五步:設置輸出參數(shù)尺寸、幀頻、幀范圍,幀頻設置需要在不影響流暢度的情況下,可以稍小一些,這樣后面落地的文件也就不會太大,然后設置保存參數(shù),選擇PNG勾選Alpha通道,抗鋸齒選項中可以為“最佳”;

 

 

第六步:渲染序列幀;

 

 

最后一步:把序列幀倒入AE,在AE中設置顏色、時間、加特效等;

 

 
 

方法二: 

用到的軟件為:AE粒子插件 Trapcode-Form
 
新建合成-新建純色圖層-找到Form拖給純色圖層,選擇模型-開啟3D圖層-打關(guān)鍵幀;

 

 

 

AE通過改變粒子屬性(頂點、邊、面、體積)可以變化不同樣式,下圖切換為“頂點”后呈現(xiàn)的跑車樣式。

 

 

如果覺得這樣旋轉(zhuǎn)很單調(diào),還找一些HUD添加效果,如下圖所示:

 

兩種方法的優(yōu)缺點總結(jié):
C4D導出序列幀方式雖然步驟多,但在模型的特殊要求上更為靈活,可隨時修改模型,可局部晶格化。
AE的優(yōu)勢是有不同的樣式可挑選,步驟簡單,但如果設備不給力稍大的模型會很消耗設備資源,導致卡頓。
下面再分享幾個其他模型效果,槍的效果是Form模型設置中“面”的效果。

 

 

如何落地?在之前的《B端新零售產(chǎn)品》文章詳細講解過,文末有文章鏈接,文章中出現(xiàn)的模型送給大家,供大家練習,公號后臺回復“模型”即可獲取。
 
 

最后  

數(shù)據(jù)可視化設計的核心還是數(shù)據(jù)的有效呈現(xiàn),視覺上的美觀炫酷要與數(shù)據(jù)呈現(xiàn)契合,做到美觀性與實用性相輔相成,3D效果固然炫酷,但不能為了加而加,影響數(shù)據(jù)呈現(xiàn),有的產(chǎn)品并非適合,讓炫酷的視覺效果助力數(shù)據(jù)可視化,才是設計師應該追求的。


作者:吳星辰

轉(zhuǎn)載請注明:學UI網(wǎng)》數(shù)據(jù)可視化設計 – 3D粒子模型科技感動效【進階教程】

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



電商大屏 – 數(shù)據(jù)可視化設計經(jīng)驗分享!

seo達人

案例解析-業(yè)務指標分析

本期的大屏案例為“北京市電商消費大數(shù)據(jù)”,主要呈現(xiàn)某電商平臺618購物節(jié)的信息數(shù)據(jù)。

如銷售總金額、區(qū)域銷售排行、男女比例、年齡分布、品牌銷售排行、歷史銷售趨勢等等。

先看圖,下圖為最終的設計稿:

設計任何產(chǎn)品首先要做的就是了解業(yè)務和需求分析,本次的案例需求非常簡單明了,只需做各指標數(shù)據(jù)的展示。

從需求上可以分析得出,大屏是純數(shù)據(jù)展示類,所以不需要有交互行為。

 

無交互的圖表設計要點

無交互的大屏展示,在圖表設計上,需要按沒有交互的形式設計。

例如不能因為數(shù)據(jù)過多,而隱藏一些通過交互才能看到的數(shù)據(jù)。

對于一組無法展示全的數(shù)據(jù),可以只提煉最重要的指標數(shù)據(jù)進行展示,也可以通過動畫形式,播放展示等等。

 

實時數(shù)據(jù)和事后數(shù)據(jù)的區(qū)別

本案例提供的是618購物節(jié)事后的數(shù)據(jù),所以在大屏的設計上可以根據(jù)真實的數(shù)據(jù)來設計呈現(xiàn)。

事后數(shù)據(jù)呈現(xiàn),在設計上可以根據(jù)真實的數(shù)據(jù)來定義圖表,例如可以根據(jù)數(shù)據(jù)大小長度,精準的定義設計空間。

實時數(shù)據(jù)顧名思義指的就是數(shù)據(jù)在實時傳輸,產(chǎn)生了數(shù)據(jù)就要立即展示出來,從業(yè)務角度上可能要做其他的設計預案。

例如異常數(shù)據(jù)的處理,有突破性的數(shù)據(jù)是否設計動畫營造一種儀式感,就像天貓雙11的千億彩蛋。

 

案例解析-風格與用色

定義視覺風格

定義大屏設計風格,首先要分析行業(yè)的屬性特征,然后通過情緒板等方法定義視覺調(diào)性。

例如公安系統(tǒng)通常運用嚴謹冷靜的藍色調(diào);能源、教育、醫(yī)療行業(yè)的主色調(diào),一般使用能代表環(huán)保、未來、健康的綠色調(diào)。

 

電商、新零售行業(yè)需要烘托購物熱鬧的場景,所以靚麗的暖色調(diào)更為合適。

過于冰冷理性的色調(diào),并不是電商產(chǎn)品所追求的調(diào)性,更不符合觀者對購物場景的心理認知。

但是由于可視化大屏的面積過大,主色調(diào)不論什么顏色,背景色通常要用暗色系,以減少對觀者視覺上的沖擊。

深色背景能夠有效烘托暖色調(diào)的可視化元素,起到對比、聚焦視覺的作用。

暖色調(diào)元素可以烘托購物特征的氛圍,如紅色、橙色、紫色、都是有效的色調(diào),但如果都是暖色元素較容易視覺疲勞。

所以暖色中搭配一定比例的冷色,能夠緩解視覺上的不適感。

冷暖色在大屏設計中的搭配有很多技法,下面我們來解析色彩搭配。

 

色彩解析

首先分析色環(huán)圖,了解一下色彩知識,30度為同類色、60度為鄰近色、120度對比色、180度互補色。

電商大屏冷色元素通常選用藍色系色調(diào),通過上圖對色環(huán)的認識,來看下藍色與色環(huán)圖上的暖色都呈現(xiàn)什么關(guān)系。

  • 同類色:在色環(huán)上成30度,特點是色相比較接近,如紅色類的朱紅、大紅、玫瑰紅都屬同類色關(guān)系。
  • 鄰近色:在色環(huán)上成60度,鄰近色的搭配會使畫面和諧統(tǒng)一,呈現(xiàn)一種你中有我,我中有你的感覺。
  • 對比色:在色環(huán)上成120度,是構(gòu)成明顯色彩效果的色組,視覺上會有一種藍的更藍,紅的更紅。
  • 互補色:在色環(huán)上成180度,是對比最強的色組,兩個顏色放在一起會引起強烈的對比,會給人強烈的排斥感。

 

大面積用色技法

從以上的色彩分析來看,電商大屏若呈現(xiàn)大面積的暖色調(diào),再搭配大面積藍色調(diào)會呈現(xiàn)對比色或互補色,形成強烈對比。

所以本期案例選擇藍色的鄰近色,紫紅色進行搭配,這樣不僅能夠烘托電商的屬性特征。

還能在大面積使用紫紅色的同時保持畫面和諧統(tǒng)一,因為紫紅色同時包含藍色和紅色兩種色調(diào)。

藍色搭配紫紅色其實就是,實現(xiàn)了你中有我,我中有你的感覺。

下面我們對比一下,如果把本期分享的大屏案例,換成正紅色體會一下感覺。

不難發(fā)現(xiàn)強烈對比效果會有一種不適感,所以大面積的暖色,一定要使用跟其他元素能夠融入的鄰近色。

 

小面積使用對比色的技法

如果是小面積的使用,就會有很多的可能性,例如下圖阿里DataV電商類數(shù)據(jù)可視化產(chǎn)品的模版。

都只是在標題處使用紅色烘托電商大屏的調(diào)性, 內(nèi)容區(qū)并沒有過多的使用紅色,所以各種元素間,并沒有形成強烈的對比。

但從兩張圖的對比來看,第二張?zhí)幚淼谋鹊谝粡堃呒壱恍屑毧磿l(fā)現(xiàn),第二張背景色偏紫色。

紅紫為鄰近色,這樣標題的紅色和背景就形成了較為和諧的過渡,而第一張暗藍色的背景跟標題對比強烈,略顯生硬。

 

反面案例解析

舉個反面案例,看下圖最大的問題就是過度烘托了主題主題氛圍,導致整個畫面太過艷麗,沒有細節(jié)。

更不用說數(shù)據(jù)的清晰展示了,這已經(jīng)違背了大屏可視化設計,以數(shù)據(jù)信息展示為核心的設計理念。

圖片來源網(wǎng)絡(反面案例)

想象一下大屏的使用場景,這樣一個艷麗的大屏掛在墻上,看多了心情會變得焦躁,同樣的道理,沒有人會把家里的墻大面積刷成紅色一樣。

大屏設計用色調(diào)烘托主題本身很好,但對于艷麗的暖色調(diào),要適當搭配一定比例的鄰近色和對比色。

這樣能大大緩解觀者的視覺疲勞,展示出細節(jié),大屏看起來色彩也會更豐富有觀賞性。

 

案例中標題和總數(shù)據(jù)為什么使用黃色?

因為黃色和藍色、紫紅色對比性更強烈,黃色跟藍色在色環(huán)上成180度是互補色,有最強烈的對比性。

黃色與紫紅色在色環(huán)上成120度是對比色,同樣有強烈的對比性,同時黃色也跟暗色調(diào)的背景形成了鮮明的對比。

所以對于關(guān)鍵指標數(shù)據(jù)和標題,需要重點突出的元素,可以用對比強烈的色調(diào)做突出效果。

 

案例解析-設計要點 

打造儀式感

設計要點要從需求出發(fā),例如需求中有一項關(guān)鍵的業(yè)務指標要突出,朝陽區(qū)消費占全市75%。

所有區(qū)中朝陽的消費是No1,所以從這點考慮可以使用全區(qū)地圖來展示,并且打造朝陽區(qū)第一名的儀式感。

 

打造驚喜感

產(chǎn)品設計中給觀者驚喜感,無疑是好的體驗,本次案例通過增加了兩道光線動畫,打造微妙的驚喜感。

這樣的設計給大屏增添了動感,看起來更富有生機,兩道光線滑向總數(shù)據(jù)指標,會有一種數(shù)據(jù)傳輸?shù)母杏X。

同時也像滿天繁星的夜空中,劃過的流星一樣,給人帶來一種悸動的體驗。

 

3D圖表的設計要點

3D圖表有很強的視覺表現(xiàn)力,是突出重要指標的重要手段之一,但3D圖表在數(shù)據(jù)可視化設計中,一直是有爭議的存在。

有人認為由于3D的透視關(guān)系,會導致數(shù)據(jù)呈現(xiàn)的不客觀。

其實從設計角度可以解決不客觀問題,比如我們案例中的3D柱狀圖,由于柱形的厚度。

導致出現(xiàn)兩條頂端線,視覺上很難分清頂端在哪里,對指向Y軸刻度數(shù)值的體現(xiàn)的就不明確。

這種情況就需要在柱狀圖上標記出數(shù)據(jù)值,這樣畫面不僅有了3D圖表的視覺表現(xiàn),同時也不影響數(shù)據(jù)的展示。

 

增強觀者認知

增強觀者對元素的認知,可以大大提高閱讀效率,比如圖文形式通常比文字視覺上更突出。

案例中“最受歡迎品牌”就可以加上品牌logo增強對類別的認知。

條形圖通常按序排列,從大到小,或從小到大,但如果有“其他”這項分類一般都要放到最后。

因為“其他”通常是所有分類中最不關(guān)注的數(shù)據(jù),關(guān)注的數(shù)據(jù)都會直接展示出來。

如果“其他”分類也按有序排列,就會有格格不入的感覺。

 

后語 

電商大屏通常要烘托一種熱鬧的場景,對配色的準確把握,大面積色調(diào)的使用需要和諧過渡,同時要善于運用對比色,突出元素。

多思考設計與業(yè)務的表現(xiàn)關(guān)系,善于從設計思維出發(fā)打造儀式感、驚喜感,增加產(chǎn)品價值。

 

作者:吳星辰

轉(zhuǎn)載請注明:學UI網(wǎng)》電商大屏 – 數(shù)據(jù)可視化設計經(jīng)驗分享!

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


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


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔