編輯導(dǎo)語：在產(chǎn)品設(shè)計中，什么是才是“創(chuàng)新”的設(shè)計？值得注意的是，創(chuàng)新的目的不再于一味地求新，而在于更切合實(shí)際，讓設(shè)計可以應(yīng)用于問題解決上。本篇文章里，作者結(jié)合實(shí)際案例，對如何做“創(chuàng)新”設(shè)計一事做了總結(jié)，一起來看一下。

一、創(chuàng)新是什么？

創(chuàng)新的目的是為了更好地解決問題，我們通過提出有別于常規(guī)的思路或方法，用以滿足某方面的需求，并以此為基礎(chǔ)進(jìn)行改進(jìn)，最終獲得一定的增益效果。

二、誤區(qū)有哪些？

創(chuàng)新不在于花樣翻新，標(biāo)新立異，而在于實(shí)事求是地發(fā)現(xiàn)問題、解決問題。

給大家舉個例子：“就好比過中秋，今天不能再吃五仁月餅了，稍有創(chuàng)新意識的人會賣蛋黃蓮蓉餡兒的月餅，一旦哈根達(dá)斯賣了冰激凌月餅就是創(chuàng)新，但仍回歸母體。再創(chuàng)新也必須是圓的，做三角形的就不是月餅了，這就是人類符號系統(tǒng)的穩(wěn)定之處，也是它的神奇之處?！币昧_振宇演講。

關(guān)于月餅初衷是基于人們對于月亮的祭拜和對于團(tuán)圓、美滿的向往，所以才選用的圓形，如果改變月餅的形狀則改變了創(chuàng)作月餅的本質(zhì)和特性，使其成為了普通的糕點(diǎn)。

三、創(chuàng)新應(yīng)當(dāng)回歸設(shè)計本質(zhì)

以3D大屏的設(shè)計為例，就是對于原始圖表數(shù)據(jù)傳達(dá)的一種創(chuàng)新，讓用戶對于數(shù)據(jù)的了解能夠更直觀更精準(zhǔn)。

四、數(shù)據(jù)大屏設(shè)計

1. 背景

此次項目的核心背景是面向政府與企業(yè)提供多維度數(shù)據(jù)處理服務(wù)，協(xié)助用戶快速認(rèn)知數(shù)據(jù)（表現(xiàn)產(chǎn)品的潛力與價值）；和實(shí)時數(shù)據(jù)監(jiān)控，可以通過數(shù)據(jù)的實(shí)時變化，迅速做出反應(yīng)（發(fā)現(xiàn)機(jī)會點(diǎn)與異常問題）。

2. 目標(biāo)

為了更好的形成統(tǒng)一目標(biāo)并達(dá)成一致戰(zhàn)線，我們梳理了產(chǎn)品和設(shè)計的目標(biāo)：數(shù)據(jù)識別、更好賣、更科技、更容易理解。

3. 設(shè)計方法

我們在設(shè)計的過程中嘗試強(qiáng)化信息傳達(dá)+跨領(lǐng)域的結(jié)合（也就是虛擬世界+現(xiàn)實(shí)生活的結(jié)合）。

4. 設(shè)計步驟

在設(shè)計的初期，先要進(jìn)行設(shè)備和使用環(huán)境的調(diào)研，以保證我們達(dá)到最完美的還原效果：

大屏硬件設(shè)備是設(shè)計展示的主要載體，項目方提供硬件設(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，以上公示來源于網(wǎng)絡(luò)）。

使用環(huán)境：在室內(nèi)（全封閉式或半封閉式結(jié)構(gòu)，可能會受光線的變化影響）。

根據(jù)上述調(diào)研結(jié)論的基礎(chǔ)上我們可以得出設(shè)計思路：合適匹配的圖表+真實(shí)有故事性的場景+高明度、高飽和度的顏色（確保在有強(qiáng)光情況下的識別度）。

進(jìn)入到具體設(shè)計階段：

盡量具有58職教特色且高明度高飽和度的品牌色，在乙方?jīng)]有明確的顏色要求時，可以形成隱形的品牌透傳。在輔助色方面也是以鄰近色為主，這樣可以保證整體大屏氛圍的搭建較為和諧。

由于大屏設(shè)備采用多塊屏幕拼接而成，所以采用深色系為背景的話，不會出現(xiàn)屏幕拼接縫隙、也不會覺得刺眼，并且更好地讓視覺聚焦在數(shù)據(jù)上。

加上屏幕分辨率的原因，字體本身的粗細(xì)變化和明度變化是很難被識別的，所以字體顏色盡量避免使用灰色，相反純白色可以將文字與背景、數(shù)據(jù)相分離，讓頁面的結(jié)構(gòu)感更強(qiáng)。

以青島可視化大屏為例，我們利用3D技術(shù)真實(shí)地還原了人員在全國流動的場景，用3D工具構(gòu)建了地球模型，用線條流光的動效來展示人員從某地向某地流動的情況（動效、建模采用的軟件為：Blender）。

以上數(shù)據(jù)僅為示例

為了達(dá)到最完美的效果，我們也做了很多的嘗試，不斷的優(yōu)化模型的動效的效果、動效時間以及模型的材質(zhì)。

為了更加方便、直觀地向用戶傳達(dá)數(shù)據(jù)，在背景設(shè)計上面做了降噪處理，去掉了多余的線和邊框，更加方便用戶來閱讀。

以上數(shù)據(jù)僅為示例

在制作數(shù)據(jù)可視化大屏的項目中不斷地摸索，發(fā)現(xiàn)能夠體現(xiàn)未來、智能、科技的關(guān)鍵詞中就包含芯片和AI科技，所以可以將這兩方面作為設(shè)計突破口。

那么如何讓數(shù)據(jù)瀏覽得更清晰呢？

我們梳理了四個層級，背景層、背景動效層、數(shù)據(jù)動效層，核心數(shù)據(jù)層，不斷地優(yōu)化動效的出場順序，首先以3D的動效模型概括了數(shù)據(jù)的變化情況，吸引用戶眼球，之后配合精準(zhǔn)數(shù)據(jù)的出現(xiàn)，讓用戶完成了一次生動且精準(zhǔn)的數(shù)據(jù)瀏覽。

在落地的過程中探索了多種動效展示方法，視頻加圖片；Three.js；雪碧圖；Verge3D；虛擬引擎等，但有一些額外因素的影響，為了更好地還原效果，最終我們采用的是視頻加圖片的方案。當(dāng)然如果想要經(jīng)過程序開發(fā)，并支持用戶交互操作的話，還需要搭配虛擬引擎的使用（Unity或UE4）。

五、總結(jié)

在大屏的設(shè)計中，我們沒有改變數(shù)據(jù)可視化的初衷，在設(shè)計里面摒棄了復(fù)雜的裝飾性元素，通過色彩的明弱對比、3D虛擬現(xiàn)實(shí)的相互結(jié)合，以及大幅的運(yùn)鏡動效，有效地提高了文字的識別性和數(shù)據(jù)變化的明確性，回歸到設(shè)計本質(zhì)——這就是創(chuàng)新。

作者：環(huán)鐵藝術(shù)家；微信公眾號：58UXD

本文由 @58UXD 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Pexels，基于CC0協(xié)議。