?項(xiàng)目總結(jié)|創(chuàng)新回歸設(shè)計(jì)本質(zhì)
編輯導(dǎo)語(yǔ):在產(chǎn)品設(shè)計(jì)中,什么是才是“創(chuàng)新”的設(shè)計(jì)?值得注意的是,創(chuàng)新的目的不再于一味地求新,而在于更切合實(shí)際,讓設(shè)計(jì)可以應(yīng)用于問(wèn)題解決上。本篇文章里,作者結(jié)合實(shí)際案例,對(duì)如何做“創(chuàng)新”設(shè)計(jì)一事做了總結(jié),一起來(lái)看一下。
一、創(chuàng)新是什么?
創(chuàng)新的目的是為了更好地解決問(wèn)題,我們通過(guò)提出有別于常規(guī)的思路或方法,用以滿足某方面的需求,并以此為基礎(chǔ)進(jìn)行改進(jìn),最終獲得一定的增益效果。
二、誤區(qū)有哪些?
創(chuàng)新不在于花樣翻新,標(biāo)新立異,而在于實(shí)事求是地發(fā)現(xiàn)問(wèn)題、解決問(wèn)題。
給大家舉個(gè)例子:“就好比過(guò)中秋,今天不能再吃五仁月餅了,稍有創(chuàng)新意識(shí)的人會(huì)賣蛋黃蓮蓉餡兒的月餅,一旦哈根達(dá)斯賣了冰激凌月餅就是創(chuàng)新,但仍回歸母體。再創(chuàng)新也必須是圓的,做三角形的就不是月餅了,這就是人類符號(hào)系統(tǒng)的穩(wěn)定之處,也是它的神奇之處?!币昧_振宇演講。
關(guān)于月餅初衷是基于人們對(duì)于月亮的祭拜和對(duì)于團(tuán)圓、美滿的向往,所以才選用的圓形,如果改變?cè)嘛灥男螤顒t改變了創(chuàng)作月餅的本質(zhì)和特性,使其成為了普通的糕點(diǎn)。
三、創(chuàng)新應(yīng)當(dāng)回歸設(shè)計(jì)本質(zhì)
以3D大屏的設(shè)計(jì)為例,就是對(duì)于原始圖表數(shù)據(jù)傳達(dá)的一種創(chuàng)新,讓用戶對(duì)于數(shù)據(jù)的了解能夠更直觀更精準(zhǔn)。
四、數(shù)據(jù)大屏設(shè)計(jì)
1. 背景
此次項(xiàng)目的核心背景是面向政府與企業(yè)提供多維度數(shù)據(jù)處理服務(wù),協(xié)助用戶快速認(rèn)知數(shù)據(jù)(表現(xiàn)產(chǎn)品的潛力與價(jià)值);和實(shí)時(shí)數(shù)據(jù)監(jiān)控,可以通過(guò)數(shù)據(jù)的實(shí)時(shí)變化,迅速做出反應(yīng)(發(fā)現(xiàn)機(jī)會(huì)點(diǎn)與異常問(wèn)題)。
2. 目標(biāo)
為了更好的形成統(tǒng)一目標(biāo)并達(dá)成一致戰(zhàn)線,我們梳理了產(chǎn)品和設(shè)計(jì)的目標(biāo):數(shù)據(jù)識(shí)別、更好賣、更科技、更容易理解。
3. 設(shè)計(jì)方法
我們?cè)谠O(shè)計(jì)的過(guò)程中嘗試強(qiáng)化信息傳達(dá)+跨領(lǐng)域的結(jié)合(也就是虛擬世界+現(xiàn)實(shí)生活的結(jié)合)。
4. 設(shè)計(jì)步驟
在設(shè)計(jì)的初期,先要進(jìn)行設(shè)備和使用環(huán)境的調(diào)研,以保證我們達(dá)到最完美的還原效果:
大屏硬件設(shè)備是設(shè)計(jì)展示的主要載體,項(xiàng)目方提供硬件設(shè)備信息:
P4全彩(P后面的數(shù)值越小像素密度越高,LED的圖像顯示越清晰),尺寸為5.12*2.88米,像素間距為4mm,屬于普通的高清全彩顯示屏,根據(jù)像素間距和尺寸可以算出,最小視距為4米,最佳視距為12米(最小觀看距離:LED顯示屏可視距離=像素點(diǎn)間距(mm)*1000/1000;最合適距離的觀看距離:LED顯示屏最佳視距=像素點(diǎn)間距(mm)*3000/1000,以上公示來(lái)源于網(wǎng)絡(luò))。
使用環(huán)境:在室內(nèi)(全封閉式或半封閉式結(jié)構(gòu),可能會(huì)受光線的變化影響)。
根據(jù)上述調(diào)研結(jié)論的基礎(chǔ)上我們可以得出設(shè)計(jì)思路:合適匹配的圖表+真實(shí)有故事性的場(chǎng)景+高明度、高飽和度的顏色(確保在有強(qiáng)光情況下的識(shí)別度)。
進(jìn)入到具體設(shè)計(jì)階段:
盡量具有58職教特色且高明度高飽和度的品牌色,在乙方?jīng)]有明確的顏色要求時(shí),可以形成隱形的品牌透?jìng)?/strong>。在輔助色方面也是以鄰近色為主,這樣可以保證整體大屏氛圍的搭建較為和諧。
由于大屏設(shè)備采用多塊屏幕拼接而成,所以采用深色系為背景的話,不會(huì)出現(xiàn)屏幕拼接縫隙、也不會(huì)覺(jué)得刺眼,并且更好地讓視覺(jué)聚焦在數(shù)據(jù)上。
加上屏幕分辨率的原因,字體本身的粗細(xì)變化和明度變化是很難被識(shí)別的,所以字體顏色盡量避免使用灰色,相反純白色可以將文字與背景、數(shù)據(jù)相分離,讓頁(yè)面的結(jié)構(gòu)感更強(qiáng)。
以青島可視化大屏為例,我們利用3D技術(shù)真實(shí)地還原了人員在全國(guó)流動(dòng)的場(chǎng)景,用3D工具構(gòu)建了地球模型,用線條流光的動(dòng)效來(lái)展示人員從某地向某地流動(dòng)的情況(動(dòng)效、建模采用的軟件為:Blender)。
以上數(shù)據(jù)僅為示例
為了達(dá)到最完美的效果,我們也做了很多的嘗試,不斷的優(yōu)化模型的動(dòng)效的效果、動(dòng)效時(shí)間以及模型的材質(zhì)。
為了更加方便、直觀地向用戶傳達(dá)數(shù)據(jù),在背景設(shè)計(jì)上面做了降噪處理,去掉了多余的線和邊框,更加方便用戶來(lái)閱讀。
以上數(shù)據(jù)僅為示例
在制作數(shù)據(jù)可視化大屏的項(xiàng)目中不斷地摸索,發(fā)現(xiàn)能夠體現(xiàn)未來(lái)、智能、科技的關(guān)鍵詞中就包含芯片和AI科技,所以可以將這兩方面作為設(shè)計(jì)突破口。
那么如何讓數(shù)據(jù)瀏覽得更清晰呢?
我們梳理了四個(gè)層級(jí),背景層、背景動(dòng)效層、數(shù)據(jù)動(dòng)效層,核心數(shù)據(jù)層,不斷地優(yōu)化動(dòng)效的出場(chǎng)順序,首先以3D的動(dòng)效模型概括了數(shù)據(jù)的變化情況,吸引用戶眼球,之后配合精準(zhǔn)數(shù)據(jù)的出現(xiàn),讓用戶完成了一次生動(dòng)且精準(zhǔn)的數(shù)據(jù)瀏覽。
在落地的過(guò)程中探索了多種動(dòng)效展示方法,視頻加圖片;Three.js;雪碧圖;Verge3D;虛擬引擎等,但有一些額外因素的影響,為了更好地還原效果,最終我們采用的是視頻加圖片的方案。當(dāng)然如果想要經(jīng)過(guò)程序開(kāi)發(fā),并支持用戶交互操作的話,還需要搭配虛擬引擎的使用(Unity或UE4)。
五、總結(jié)
在大屏的設(shè)計(jì)中,我們沒(méi)有改變數(shù)據(jù)可視化的初衷,在設(shè)計(jì)里面摒棄了復(fù)雜的裝飾性元素,通過(guò)色彩的明弱對(duì)比、3D虛擬現(xiàn)實(shí)的相互結(jié)合,以及大幅的運(yùn)鏡動(dòng)效,有效地提高了文字的識(shí)別性和數(shù)據(jù)變化的明確性,回歸到設(shè)計(jì)本質(zhì)——這就是創(chuàng)新。
作者:環(huán)鐵藝術(shù)家;微信公眾號(hào):58UXD
本文由 @58UXD 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Pexels,基于CC0協(xié)議。
做了個(gè)三角形的月餅是什么呢?不允許?回歸母體是便于大家快速認(rèn)知和從記憶深處想起這個(gè)事情,老羅好像也沒(méi)理解啊
模型跟動(dòng)效做的是一流的。但是,最大的問(wèn)題卻在UI上:數(shù)據(jù)板塊沒(méi)明顯的視覺(jué)分割,導(dǎo)致全部的數(shù)據(jù)都粘在一個(gè)“平面”上!更別提“前后空間感”(建議學(xué)習(xí)一下大型3D游戲的UI設(shè)計(jì)觀念);
看完文章里項(xiàng)目總結(jié)的例子,淺淺理解到了創(chuàng)新回歸設(shè)計(jì)本質(zhì)、摒棄復(fù)雜提高效率和精確度這個(gè)道理