如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

在本文的第二部分當(dāng)中，我們來了解一些作為設(shè)計師需要掌握的VR基礎(chǔ)概念及相關(guān)設(shè)計工具。我們不會探索的過于深入，面向設(shè)計師的職能點到為止即可。

新的空間維度與沉浸式體驗所帶來的沖擊是前所未有的。要在三維世界當(dāng)中打造令人舒適的互動體驗，你需要了解一些此前可能并未接觸過的設(shè)計與技術(shù)原則。我們的Cardboard團隊將一系列概念知識打包到了Cardboard Design Lab這款app(Android)當(dāng)中，你可以配合Cardboard沉浸到VR世界當(dāng)中進行學(xué)習(xí)。

此外還要記得觀看Alex在2015年I/O大會上做的詳細演示(Youtube)。下面我們就來從這些學(xué)習(xí)資源當(dāng)中匯總出一些知識要點。

如果你只有精力去記住兩條原則：

• 保持幀數(shù)穩(wěn)定

• 保持頭部追蹤

人們在沉浸于虛擬世界當(dāng)中的時候，會本能的對外界事件產(chǎn)生反應(yīng)。作為設(shè)計師，要考慮到環(huán)境因素的影響。

生理舒適度。眩暈癥的問題是我們必須面對的。特別是在角色加、減速的時候要特別留意。盡可能保持地平線的穩(wěn)定，以避免暈船癥狀的出現(xiàn)。

環(huán)境舒適度。人們在一些特定的虛擬環(huán)境當(dāng)中同樣會體驗到與現(xiàn)實相對應(yīng)的不適，譬如高空與恐高癥，狹小的空間引發(fā)的幽閉恐怖癥，空曠空間所造成的廣場恐懼癥等等。要注意虛擬對象的尺寸比例及互動關(guān)系。在現(xiàn)實中，如果有人向你拋來一個物體，你會本能的抓取、躲閃或是保護自己。合理利用現(xiàn)實當(dāng)中人與環(huán)境的互動規(guī)律，不要反其道而行之。

圍繞用戶的感官能力設(shè)計引導(dǎo)元素。想想游戲設(shè)計師們通常是怎樣指引玩家探索環(huán)境的：

• 通過聲音幫助玩家辨別方位

• 通過光亮為玩家指明方向

避免讓用戶感到疲勞。聽上去是再顯然不過的道理，但這確實是VR設(shè)計新手最容易犯的錯誤之一。我們在科幻電影中看過太多炫酷的人機互動方式，但你要知道其中大多數(shù)都有悖于最基本的人機工學(xué)原理；例如“少數(shù)派報告”當(dāng)中那樣的手勢操作放到現(xiàn)實當(dāng)中會很快讓人產(chǎn)生疲勞與不適。

我制作了一張簡單的示意圖，用來描述頭部在X與Y軸上運動的舒適區(qū)域。綠色代表最佳，黃色代表可以接受，紅色意味著不適。網(wǎng)絡(luò)上可以找到的一些用研報告將有助于你進一步了解這方面的話題，例如來自LeapMotion的VR Best Practices Guidelines(PDF格式，4.7M)，此外我們還將在本文結(jié)束時提供更多的資源供參考。

不當(dāng)?shù)脑O(shè)計有可能給人們造成嚴重的生理不適。聽說過“短信脖”沒？在一篇發(fā)布于Neuro and Spine Surgery的研究報告(PDF格式，314KB)當(dāng)中，我們可以了解到人們使用手機時不同的持機姿態(tài)對于頸部所產(chǎn)生的壓強變化。從自然平視狀態(tài)一直到低頭瀏覽，頸部承受的壓強提升了440%，肌肉和韌帶會變得酸痛疲勞，神經(jīng)趨于緊張，脊椎骨所承受的壓力也在增強。這些不當(dāng)?shù)氖褂梅绞缴踔量赡芙o身體帶來長期的健康問題，例如永久性神經(jīng)損傷等等。

簡而言之，這個特定的研究報告至少能告訴我們要盡可能避免長時間的低頭交互行為。

自由度

三維空間為我們提供了六種運動方式，包括在X、Y、Z三個軸線上進行的旋轉(zhuǎn)與移動。

三自由度(方向追蹤)

基于手機的頭戴式VR設(shè)備，例如Cardboard或Gear VR等等，可以通過內(nèi)置的陀螺儀對三個軸線上的旋轉(zhuǎn)行為進行追蹤(3DOF)。

六自由度(方向+位置追蹤)

HTC Hive與Oculus Rift這類高端VR設(shè)備所擁有的傳感器還可以對發(fā)生在三個軸線上的位移進行追蹤(+X、-X、+Y、-Y、+Z、-Z)，從而實現(xiàn)六自由度(6DOF)。

追蹤

由一個或多個傳感器所組成的紅外追蹤系統(tǒng)使6DOF成為可能。Oculus的追蹤傳感器位于固定攝像頭上，而Vive則將其放置在了HMD(頭戴式顯示器)當(dāng)中。

Oculus與Vive的燈塔位置追蹤模式對比

輸入設(shè)備

具體的輸入設(shè)備取決于你所采用的系統(tǒng)平臺。Google Cardboard本身只有一個按鈕，相應(yīng)的交互模式僅包含簡單的“看”和點擊。HTC Vive需要兩個6DOF控制器，而Oculus則搭配了Xbox One手柄，不過最終也會進化為雙6DOF控制器“Oculus Touch”。這些輸入設(shè)備都能為用戶帶來更高級的沉浸化交互體驗。

Xbox One手柄

Oculus Touch

其他輸入模式還包括手勢追蹤等等。其中最著名的當(dāng)屬Leap Motion，你甚至可以將其搭載在HMD上配合使用。

搭載在DK2上的Leap Motion

日新月異的科技進步在不斷推進著這類設(shè)備的發(fā)展，不過目前來說，手勢追蹤技術(shù)還很不成熟，雙手與手指的細微動作帶來的潛在問題太多，使其難以成為VR的主要輸入設(shè)備。

游戲手柄雖然早已被人們所熟悉，但在VR領(lǐng)域中卻難以帶給我們高質(zhì)體驗，因為操作方式的局限會使VR創(chuàng)造出來的高自由度受到破壞，特別是在FPS(第一人稱射擊)游戲當(dāng)中，通過手柄控制前進后退和左右平移的動作時通常會給玩家?guī)順O度不適。

而另一方面，HTC Vive的6DOF控制器體驗起來確實非常棒，特別是在Tilt Brush這類app當(dāng)中。我還沒有試過Oculus Touch，不過到目前為止看到過的演示都很棒，譬如這段Oculus Toybox demo(Youtube)。

VR的交互設(shè)計模式顯然取決于你所選定的系統(tǒng)平臺及相應(yīng)的輸入設(shè)備類型。作為設(shè)計師，要盡可能去熟悉各類設(shè)備，并對它們的優(yōu)勢及功能限制有所了解。

設(shè)計工具

這顯然是個很大的話題，需要更多的專業(yè)文章甚至相關(guān)書籍才能詳盡描述。我們在本文中僅對業(yè)界最主流的一些工具進行簡要的介紹。

紙和筆

無論在什么時代都始終不離我們左右的老伙伴，方便快捷，無需花費時間精力聚焦于任何技法，在初期探索時尤為適用，能幫你迅速呈現(xiàn)想法，快速迭代，而且成本低廉。要知道，在VR領(lǐng)域，將設(shè)計流程推進到中、高保真階段所需花費的成本相比于2D界面設(shè)計來說要更加高昂。

Sketch

仍然每天都會用到，因為好用。在進入實際的VR原型階段之前，Sketch是很完美的探索工具，在導(dǎo)出和插件方面也能幫你極大的提升工作效率。

Cinema 4D

我并不覺得C4D和Maya是競爭對手的關(guān)系，兩個工具都很棒，各有所長。如果你沒有3D方面的經(jīng)驗，學(xué)習(xí)曲線可能會有些陡峭。在我看來，C4D的界面、參數(shù)設(shè)定和構(gòu)建方式更合理，能幫我做更多的快速迭代，所以很喜歡用。MoGraph模塊不錯，同時還有很多好用的插件供選擇。C4D的社區(qū)很活躍，你可以找到不少高質(zhì)量的學(xué)習(xí)資源。

Maya

Maya的優(yōu)勢和不足都很明顯。一方面，它能滿足3D藝術(shù)家的所有設(shè)計需求，太多游戲和電影都經(jīng)由Maya設(shè)計制作，其強大而易用的功能可以應(yīng)對繁重的工作負荷，渲染、建模、動畫等等無所不通，同時還擁有很高的定制化能力，堪稱業(yè)界典范。多數(shù)工作室需要根據(jù)自身的特定需求來組裝定制化工具集，而Maya正是有能力將所有組件整合為一體的最佳平臺。

但另一方面，要掌握如此強大且多樣化的工具，你勢必要投入大量的時間和精力，包括幾周時間的摸索，幾個月的學(xué)習(xí)以及日復(fù)一日年復(fù)一年的練習(xí)與實踐。

Unity

一應(yīng)俱全的原型工具，你可以一邊在VR中預(yù)覽著原型一邊在Unity當(dāng)中進行調(diào)整。Unity本身是個強大的游戲引擎，社區(qū)成熟，store中的資源也很豐富(具體售價由資源作者制定)，包括簡單的3D模型、完整的項目、音頻、分析工具、著色工具、腳本、材質(zhì)紋理等等供你選擇。

Unity提供的文檔和學(xué)習(xí)平臺相當(dāng)不錯，教程質(zhì)量很高，覆蓋面也很廣。

在Unity3D中進行開發(fā)需要用到C#或JavaScript，微軟的Visual Studio套裝當(dāng)中自帶Unity工具，但不包含可視化編輯器，你需要到資源庫中自行尋找。

Unity支持所有的主流HMD，具備優(yōu)秀的跨平臺能力，內(nèi)容可以被部署到各類系統(tǒng)，包括：Windows PC、OS X、Linux、Web Player、WebGL、VR(包括Hololens)、SteamOS、iOS、Android、Windows Phone 8、Tizen、Android TV和Samsung SMART TV，以及Xbox One/360、PS4、Playstation Vita和Wii U等等。

Unity支持所有的主流3D格式，在2D游戲開發(fā)方面也很擅長。自帶的3D編輯器不算給力，但人們已經(jīng)開發(fā)了很多優(yōu)秀的插件來彌補這一點。Unity需要授權(quán)許可，但你可以在一定的功能范圍內(nèi)使用免費的個人版本。不妨去官網(wǎng)了解詳情，畢竟是當(dāng)今最主流的游戲引擎，市場占有率達到了47%。

Unreal(虛幻)引擎

作為Unity3D的直接競爭對手，Unreal同樣提供了完備的文檔及教學(xué)視頻。由于進入市場的時間相比于Unity稍晚，所以Unreal的store規(guī)模還相對較小。

Unreal的巨大優(yōu)勢在于圖形表現(xiàn)力，無論是地形、粒子、后期處理效果還是光影等等都領(lǐng)先于對手。

Unreal 4使用C++，同時搭配可視化腳本編輯器Blueprint。

我個人沒怎么使用過Unreal，難以進行更詳細的介紹。在跨平臺方面，Unreal相對較弱，目前支持Windows PC、OS X、iOS、Android、VR、Linux、SteamOS、HTML5、Xbox One和PS4。

結(jié)束語

VR還相當(dāng)年輕。作為先行者，我們需要去學(xué)習(xí)和探索的東西太多太多，這也正是我為此而興奮并最終加入VR團隊的原因。擺在我們面前的有挑戰(zhàn)，更有機遇，我們理應(yīng)盡最大的努力到這個新世界當(dāng)中進行探索，去學(xué)習(xí)、理解、創(chuàng)造、迭代，如此反復(fù)的長久保持下去。

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

關(guān)于極簡主義

實際上極簡主義這個詞在人類活動的各個領(lǐng)域中都被地使用著，Merriam-Webster 詞典種對于它的解釋是“在音樂、文學(xué)和設(shè)計領(lǐng)域中以極其平衡簡潔而著稱的一種風(fēng)格或技術(shù)”。極簡主義正在被越來越多的領(lǐng)域所接納，其核心的特征是簡約而富有意義。

作為一種視覺設(shè)計的新方向，極簡主義在20世紀60年代的紐約很受歡迎，當(dāng)時的新老藝術(shù)家正在探索將抽象幾何元素融入繪畫和雕塑藝術(shù)。相應(yīng)的，極簡主義在當(dāng)時的諸如包豪斯運動、建構(gòu)主義運動中，留下了濃墨重彩的一筆。在涉及視覺藝術(shù)的不同領(lǐng)域，極簡主義的核心原則基本都是優(yōu)雅地保留關(guān)鍵性的、引起觀者注意力的部分。線條、形狀、色彩、留白、構(gòu)圖等一切元素都被有效地組織起來。今天我們在生活的各個領(lǐng)域都可以看得到極簡主義的影子：建筑、藝術(shù)、攝影、文學(xué)、音樂、UI設(shè)計，甚至食物。

如何搭建數(shù)據(jù)可視化系統(tǒng)，用豐富的設(shè)計語言清晰表達復(fù)雜和龐大數(shù)據(jù)，并形成鮮明的設(shè)計風(fēng)格？我們把數(shù)據(jù)可視化的元素進行拆分并建立相應(yīng)的規(guī)范體系。

圖表設(shè)計

1. 圖表基本類型

六種基本圖表涵蓋了大部分圖表使用場景，也是做數(shù)據(jù)可視化最常用的圖表類型：

柱狀圖   分類照片照片什么照片什么什么項目之間的比較;

餅圖   構(gòu)成即部分占總體的比例;

折線圖   隨時間變化的趨勢;

條形圖   分類照片照片什么照片什么什么項目之間的比較;

散點圖   相關(guān)性或分布關(guān)系;

地圖   區(qū)域之間的分類照片照片什么照片什么什么比較。

基本圖表類型都有通用的樣式，不過多的展開講解我們更多的考慮如何選擇常用圖表來呈現(xiàn)數(shù)據(jù)，達到數(shù)據(jù)可視化的目標基本方法：

首先讓我們看看設(shè)計師面對的商業(yè)變化有哪些？ 縱觀中國互聯(lián)網(wǎng)飛速發(fā)展二十年來看，我們大致經(jīng)歷過三個時期，從PC時代到移動互聯(lián)網(wǎng)時代，到我們正在降臨的物聯(lián)網(wǎng)時代。 在三個典型的不同時期，都有不同互聯(lián)網(wǎng)商業(yè)產(chǎn)品，構(gòu)建了相應(yīng)的用戶體驗。

上篇文章簡單的介紹了數(shù)據(jù)可視化的基礎(chǔ)，將數(shù)據(jù)進行設(shè)計可視化后，可以讓我們有一種全新的方式去認識數(shù)據(jù)，改變對數(shù)據(jù)的呈現(xiàn)和思考方式。那現(xiàn)在就讓開始做一份數(shù)據(jù)的可視化表，一步步的來看下我們?nèi)绾潍@取數(shù)據(jù)，以及如何進行可視化的展示。

在上章內(nèi)容中，提到了關(guān)于【數(shù)據(jù)可視化迭代過程】的步驟，這也能看出整個過程包含的步驟，大致有：

1. 確定主題 - 2．?dāng)?shù)據(jù)獲得 - 3.圖表選擇（表達）- 4圖表繪制

當(dāng)然了我們也可以看到可視化是要一個不斷迭代的過程，步驟之間都需要多次的迭代修改的。

確定主題

這肯定是第一步了，在做數(shù)據(jù)可視化的時候，首先你要明了你要做什么，想要從數(shù)據(jù)獲中取什么信息，有了目標才能明確的往下做。

那我們這次還是來做關(guān)于空氣質(zhì)量PM2.5的數(shù)據(jù)展示，了解歷年來PM2.5的實際情況和發(fā)展趨勢。

信息圖

信息圖本身是一個合成詞，由信息和圖兩個詞組成多稱之為（Infographics或Infographics Graphics），在40年代的時候就開始出現(xiàn)，使用在報紙及新聞類雜志方面，其中杰出的代表阿根廷的信息圖先驅(qū)Alejandro Malofiej，在1993年西班牙設(shè)立了以他為名的主要針對信息圖表設(shè)計的Malofiej獎。

在報紙、雜志等紙質(zhì)媒體中，為了讓讀者感到新奇且直觀容易的理解，運用了大量的信息圖解的表現(xiàn)。

如下圖所示：

今天，大數(shù)據(jù)已無所不在，并且正被越來越廣泛的被應(yīng)用到歷史，政治，科學(xué)，經(jīng)濟，商業(yè)甚至滲透到我們生活的方方面面中，獲取的渠道也越來越便利。通過本系列的前面幾篇文章，我們已經(jīng)了解了數(shù)據(jù)可視化的必要性，而目前市面上也已經(jīng)具備了非常多成熟的BI繪制工具，如畫面，QlikView的的和魔鏡等等。雖然這些工具正在變得越來越自動化，然而，隨著大數(shù)據(jù)時代的來臨，信息每天都在以爆炸式的速度增長，其復(fù)雜性也越來越高;其次，隨著越來越多科學(xué)可視化的需求產(chǎn)生，地圖，3D物理結(jié)構(gòu)等技術(shù)將會被更加廣泛的使用。所以，當(dāng)人類的認知能力越發(fā)受到傳統(tǒng)可視化形式的限制時，隱藏在大數(shù)據(jù)背后的價值就難以發(fā)揮出來，如果因為展示形式的限制導(dǎo)致數(shù)據(jù)的可讀性和及時性降低，從而影響用戶的理解和決策的快速實施，那么，數(shù)據(jù)可視化將失 其價值。

然而，所幸的是，技術(shù)的快速發(fā)展和不斷變化的認知框架正在為人類打開新的視野，促使藝術(shù)與技術(shù)相結(jié)合而產(chǎn)生新型的數(shù)據(jù)可視化形式。

2017年3月一年一度的設(shè)計盛事《設(shè)計上?！吩谏虾Ｕ褂[中心拉開帷幕，從各國自帶品牌和文化屬性的作品中，依然不難瞥見未來設(shè)計的前沿趨勢和走向。其中由yang
design設(shè)計咨詢公司發(fā)布的一年一度2017-2018設(shè)計趨勢報告從材質(zhì)，用色，以及人群角度提煉出了當(dāng)代四大設(shè)計趨勢。2017年3月一年一度的設(shè)計盛事《設(shè)計上海》在上海展覽中心拉開帷幕，從各國自帶品牌和文化屬性的作品中，依然不難瞥見未來設(shè)計的前沿趨勢和走向。其中由yang
design設(shè)計咨詢公司發(fā)布的一年一度2017-2018設(shè)計趨勢報告從材質(zhì)，用色，以及人群角度提煉出了當(dāng)代四大設(shè)計趨勢。

如果要深究近期網(wǎng)頁設(shè)計趨勢的變化，這些變化更多是關(guān)于用戶模式，色彩和排版設(shè)計的。但是不論是其中哪種，都牽涉到一些微妙的設(shè)計技巧和復(fù)雜的影響因素，將它們納入6月的設(shè)計趨勢，似乎略有不足。在過去一個月所出現(xiàn)的新網(wǎng)頁設(shè)計作品當(dāng)中，最顯著的設(shè)計趨勢還是體現(xiàn)在一些設(shè)計元素上，風(fēng)格獨特的底部導(dǎo)航，自由隨性的Box元素，裝飾性極強的豎線元素。

近期如果你在糾結(jié)怎么設(shè)計網(wǎng)頁的話，這些設(shè)計趨勢可以用來看看~