首頁

可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計

資深UI設(shè)計者

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

2018年如自己所愿,終于有機會可以嘗試下數(shù)據(jù)大屏的可視化設(shè)計,但是想象總歸是美好的,新手上崗第一次總是那么不太如意,陌生而又熟悉著。在做過幾次嘗試后,自己又私下里翻閱了一些關(guān)于數(shù)據(jù)大屏方面的設(shè)計文章,好的設(shè)計圖片。有很多不足,也有很多剛開始做的時候沒有注意到的點,這次整理作品,也順便把大概的設(shè)計流程整理了一下。給自己的一個復(fù)盤總結(jié),也是一次設(shè)計分享。

可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計



可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計

文章來源:UI中國

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

界面沒層次,到底哪里出了問題?

ui設(shè)計分享達人

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

剛?cè)胄械男率衷O(shè)計師容易出現(xiàn)一個問題,接到需求就開始設(shè)計,最后出現(xiàn)的界面和原型幾乎一模一樣,唯一的區(qū)別就是上了色,加了圖片和圖標(biāo),最后提交審核時老板反饋,“這個界面看上去太“平”了,你在這里加個背景色吧;這個圖標(biāo)太小,你再放大一點;這個位置你在加點裝飾……”。


這主要原因還是界面沒層次導(dǎo)致的,雖然老板對設(shè)計不太清楚,但是關(guān)于業(yè)務(wù)邏輯我們的設(shè)計稿是否表達清楚,重點是否突出這個他最清楚了。


那么如何才能提高界面層次呢?我們可以從兩個方面入手,在設(shè)計前我們需要考慮突出內(nèi)容層次的方法;在設(shè)計中需要考慮突出視覺層次的方法。


目錄


一、突出內(nèi)容層次的方法

  • 將相關(guān)聯(lián)的元素進行組合

  • 確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面

  • 確認重要內(nèi)容,將其差異化設(shè)計

二、提高視覺層次的方法

  • 利用線、面、留白將模塊進行分割

  • 利用大小、投影、背景圖突出視覺層次

  • 利用顏色對比提高視覺感受

  • 利用文字對比提高界面的可閱讀性




一、突出內(nèi)容層次的方法


當(dāng)一個界面信息量比較大時,層次感好的界面用戶進來能快速的獲得想要的信息,同時最終達到產(chǎn)品的目的。而層次感差的界面用戶看半天也不知道要做什么,看一會也就走了。因此良好的視覺層級是界面成功的關(guān)鍵。在設(shè)計前我們需要將相關(guān)聯(lián)的元素進行組合;確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面;確認重要內(nèi)容,并將其差異化設(shè)計。

1.將相關(guān)聯(lián)的元素進行組合

在設(shè)計前,產(chǎn)品原型圖已經(jīng)將我們的元素進行了分類組合,但是他們更多的是考慮邏輯、功能上的層次,而如何有一個清晰的內(nèi)容層次呢?設(shè)計師可以利用《格式塔心理學(xué)》中的接近性原則將相關(guān)聯(lián)的元素組合在一起,不相關(guān)的拉開距離,同時形成一定的規(guī)律和節(jié)奏,這樣會讓用戶閱讀起來更輕松。

       undefined     

需要注意的是,界面中的間距需要滿足一定的規(guī)律和節(jié)奏,比如模塊之間的間距大于標(biāo)題到內(nèi)容的間距;在內(nèi)容中不相關(guān)聯(lián)的內(nèi)容間距大于相關(guān)聯(lián)的間距,如下圖所示。              

?undefined     

天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容;最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。


京東金融的我的頁面用戶的資產(chǎn)信息排在最前面,他首先是遵循了用戶的瀏覽習(xí)慣,同時也是用戶想要看到的內(nèi)容,其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容,最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。

2.確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面

將相關(guān)聯(lián)的信息整理之后就需要確認模塊的優(yōu)先級了,由于用戶的瀏覽順序是自上而下的,因此我們需要將優(yōu)先級高的模塊放到前面。


那么優(yōu)先級如何判斷呢?大家可以從三個方面去考慮,第一是遵循用戶的瀏覽習(xí)慣;第二是用戶想看的內(nèi)容;第三是產(chǎn)品想要用戶看的內(nèi)容,如下圖所示。

       undefined     

天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容;最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。


京東金融的我的頁面用戶的資產(chǎn)信息排在最前面,他首先是遵循了用戶的瀏覽習(xí)慣,同時也是用戶想要看到的內(nèi)容,其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容,最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。

3.確認重要內(nèi)容,將其差異化設(shè)計

在設(shè)計時我們需要知道,優(yōu)先級高的模塊不一定重要程度就高,因此我們還需要確認模塊的重要層級,同時利用背景、布局等方式進行差異化設(shè)計,用起用戶注意,如下圖所示。

       undefined     

網(wǎng)易嚴(yán)選中的新人專享禮和品牌制造商直供就采用了差異化設(shè)計,職工類模塊采用的是普通的宮格式布局,新人專享禮采用添加背景的方式,加深了模塊的縱深感,對比其他模塊更加突出。


大麥網(wǎng)中的特色模塊和其他模塊也采用了差異化設(shè)計,特色模塊采用拼圖的方式設(shè)計,其他模塊采用列表的方式進行設(shè)計,用戶進入頁面首先就能夠看到這個模塊,提高用戶接受信息的效率。


土豆視頻個人主頁的列表部分也采用了差異化設(shè)計,消息提醒、我的收藏、觀看記錄、我的緩存這四個用戶常用的功能采用宮格式布局,其他不常用的我的會員、客戶與反饋、設(shè)置采用列表式結(jié)構(gòu),這樣也能夠提高用戶操作速度。


二、提高視覺層次的方法


當(dāng)然內(nèi)容層級確定了顯然不夠,我們還需要考慮突出界面的視覺層次,這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢?在設(shè)計中,我們可以利用線、面、留白將模塊進行分割;利用大小、投影、背景圖等突出視覺層次;利用顏色對比提高視覺感受;利用文字對比提高界面的可閱讀性。

1.利用線、面、留白將模塊進行分割

大家記得在設(shè)計前我們已經(jīng)對界面中相關(guān)聯(lián)的元素進行了組合,組合之后就可以利用線、面、留白的方式,將不相關(guān)聯(lián)的元素進行分割,提高界面的視覺層次,從而提高用戶的瀏覽和操作效率。

       undefined     

線分割:是最為基礎(chǔ)的分割方式,其優(yōu)勢是占用空間小、分割感弱,多用于列表、Feed流中。需要注意的是,分割線顏色設(shè)置需要非常淺,避免模塊之間強烈的分割感,比如橘子娛樂的列表就是采用若隱若現(xiàn)的線,讓列表中的內(nèi)容更規(guī)整。


面分割:也可叫背景欄分割,其優(yōu)勢是占用空間小、可操作性高,同時能夠更好的區(qū)分不同模塊之間的關(guān)系,多用于模塊和模塊之間的分割,比如轉(zhuǎn)轉(zhuǎn)個人主頁的模塊采用面分割瀏覽性更強。


留白分割:是iOS11發(fā)布之后興起的以留白或間距的方式進行分割,其優(yōu)勢是無強烈的分割感,界面清爽,多用于比較有規(guī)律或以大圖為主的模塊之間的分割,比如轉(zhuǎn)轉(zhuǎn)主頁下方的賣二手還錢、買實惠好貨等,其內(nèi)容部分都較為規(guī)則,采用該方式較為合適。

2.利用投影、大小、背景圖突出視覺層次

為了突出界面的視覺層次,我們還可以通過投影、大小、布局等增加界面的對比,從而突出重要信息。

       undefined     

投影:是界面對比較常用的一種方式,其優(yōu)勢是提升界面的空間感,改變視覺次序,通過投影大小的變化還可營造不同的空間關(guān)系,多用于卡片風(fēng)格的設(shè)計中,比如Keep均是采用卡片風(fēng)格的設(shè)計,添加投影后讓界面視覺層次更突出了。


大小:是大眾最為熟知的對比方式,其優(yōu)勢是通過大小對比能夠很快的拉開視覺層次,同時能夠很好的引導(dǎo)用戶瀏覽路徑,比如ofo黃色的大按鈕遠遠都能看見,該頁面就一個目的掃碼用車。


背景圖:往往不如投影和大小常用,但是它的使用可以將模塊從其他樣式中年凸現(xiàn)出來,多用于banner、推薦等重要模塊中,比如美圖秀秀的推薦模塊,該模塊可以說是美圖的核心模塊。

3.利用顏色對比提高視覺感受

顏色是最容易感知到的對比方式,通過顏色我們可以明確哪些是重要信息,在使用中我們可以通過色相、明暗、飽和度上進行對比,其多用在按鈕、重要信息、導(dǎo)航、背景板中。

       undefined     

自如首頁上的租房、服務(wù)、旅行采用對比色進行強調(diào)對比,進入頁面用戶就能夠清楚這三塊是是界面的核心功能,同時引導(dǎo)用戶關(guān)注右側(cè)的具體服務(wù)信息。


淘票票首頁中的按鈕、引導(dǎo)提示、標(biāo)簽欄選中均用了紅色進行強調(diào)對比,很容易引起用戶的注意,讓用戶看一眼就知道如何操作。


招商銀行首頁中的話題PK采用對比色進行強調(diào)對比,很容易引起用戶操作的興趣。

4.利用文字對比提高界面的可閱讀性

文字的層次感往往和字體大小和明暗有關(guān),其中字體大小是提高文字信息層級的重要手段,在文字排版中如果文字之間的層次不清晰,那么一定是大小的對比不夠,在UI中字體大小對比往往在4-8px較為適合,如下圖所示。

       undefined     

當(dāng)字體大小對比適合之后就需要通過通過字體的明暗突出主要信息,弱化次要信息,從而提高界面的可閱讀性,如下圖所示。

       undefined     

在UI設(shè)計中我們往往都設(shè)定了字體規(guī)范,這樣不僅能夠達到設(shè)計統(tǒng)一,同時也有很好的對比性,常用字號為40, 36, 32,28,24, 22(px),比如優(yōu)酷的星球頁面,通過字體大小,顏色深淺的對比,讓用戶首先看到重要信息,弱化次要信息。

            

三、總結(jié)


在界面設(shè)計中為了降低用戶的理解成本,突出重點內(nèi)容,讓用戶使用起來舒適,就需要有個清晰的內(nèi)容層次和視覺層次。

在設(shè)計前我們需要考慮將相關(guān)聯(lián)的元素進行組合;確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面;確認重要內(nèi)容,將其差異化設(shè)計。

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

 

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

用心設(shè)計

如果您想訂閱本博客內(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í)。


VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具


此外還要記得觀看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é)束時提供更多的資源供參考。


VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具


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


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

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具


自由度

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


三自由度(方向追蹤)

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


VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具


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

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


VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具


追蹤

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


VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

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


輸入設(shè)備

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

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

Xbox One手柄

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

Oculus Touch

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

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

搭載在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è)計來說要更加高昂。

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

Sketch

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

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

Cinema 4D

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

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具  VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具  VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

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%。


VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具

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。

VR設(shè)計指南(2) - 基礎(chǔ)概念與設(shè)計工具


結(jié)束語

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

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

進階高級!幫你做能落地的界面之Tab的小短線

資深UI設(shè)計者

每一個選項都是一個tab ,tab 的形式千千萬,但今天只講這種選中后下面帶橫線的。(我們給這個橫線起個名字叫做小短線吧,下文都這么叫了哈!)

今天的大綱如下:

  • tab是用來干嘛的
  • tab 的分類
  • 幾種常見的小短線
  • 小短線的注意事項一
  • 小短線的注意事項二

藍藍設(shè)計HMI界面設(shè)計文章分享之二

周周

人機交互系統(tǒng)輸出信息是有益的或者讓人分心的,要有一條明確的分界線。

  Business Insider旗下研究機構(gòu)BI Intelligence最近做出評估預(yù)測,到2020年全球范圍內(nèi)銷售的9200萬輛汽車將使用與互聯(lián)網(wǎng)連接的硬件設(shè)備。想象一下數(shù)以千萬計的車輛應(yīng)用系統(tǒng)每時每刻都在進行數(shù)據(jù)輸入輸出,將帶來怎樣的用戶交互體驗。共享數(shù)據(jù)的輔助下,行車安全性可以得到大幅度提升,提前的線路規(guī)劃策略也能夠降低燃油消耗量。系統(tǒng)是如何判斷哪些數(shù)據(jù)對駕駛者或者車載系統(tǒng)本身有所幫助,那些相關(guān)性不大的數(shù)據(jù)是否會讓行車駕駛更復(fù)雜、更麻煩、更危險?

未來汽車HMI界面設(shè)計的「四個貼士」

藍藍設(shè)計HMI界面設(shè)計文章分享之一

周周

汽車HMI設(shè)計,目的在于增強用戶的駕駛樂趣或駕駛過程中的操作體驗 ,但車用HMI更注重安全性,也需要開源發(fā)展生態(tài)。

人機交互(Human–Machine Interaction,簡稱HMI),是一門研究系統(tǒng)與用戶之間的交互關(guān)系的學(xué)問。系統(tǒng)可以是各種各樣的機器,也可以是計算機化的系統(tǒng)和軟件。所以應(yīng)用于汽車的HMI可以實現(xiàn)人與車之間的對話功能。車主可通過該系統(tǒng),輕松把握車輛狀態(tài)信息、定速巡航設(shè)置、藍牙免提設(shè)置、空調(diào)及音響的設(shè)置。

會員中心如何設(shè)計,用戶才會買單?

資深UI設(shè)計者

最近在做產(chǎn)品的會員中心改版設(shè)計,有一些關(guān)于會員體系相關(guān)設(shè)計的思考及分析,紀(jì)錄并分享一下。

大多數(shù)產(chǎn)品在滿足用戶的基礎(chǔ)需求上,會推出付費會員功能,以滿足用戶更高需求的同時,達到商業(yè)層面的收支平衡。那么,會員中心應(yīng)該怎么做,才能讓用戶感受到自己花的錢很值呢?

分享一個經(jīng)典案例:《騰訊ISUX丨通過優(yōu)化,我們將QQ會員付費用戶數(shù)提高了5倍!》

設(shè)計前,先明確會員中心的設(shè)計目的是什么?

1. 會員尊享感(讓用戶感知到付費值得,花了錢就是爺,滿足一部分用戶的虛榮心)

2. 功能特權(quán)對比(通過特權(quán)的對比,讓用戶選擇更高的等級會員)

3. 突顯核心特權(quán)功能(突出核心功能,抓住用戶訴求點,提升用戶購買決策)

新手科普文!每個設(shè)計師都該懂的柵格系統(tǒng)基礎(chǔ)六要素

資深UI設(shè)計者

以前有很長一段時間,我一直搞不明白到底什么是柵格,聽過很多解釋之后還是云里霧里的,后來發(fā)現(xiàn)有很多小伙伴也都有這樣的疑問,所以決定分享一下自己對柵格系統(tǒng)的理解。

首先我們必須要對柵格系統(tǒng)有一個基本的認知,我將這四個字拆分開成“柵格”和“系統(tǒng)”兩個詞來分別解釋。

關(guān)于柵格

柵格是由網(wǎng)格演變而來的另一種說法,都是一個意思——格子,所以不要覺得柵格有多高深復(fù)雜,如果把他描述成格子,你還覺得它有多難理解嗎?

其實我們都是柵格專家,因為在我們幾歲的時候,就已經(jīng)接觸了很多柵格,比如方格本:


實例教學(xué)!25個幫你運用好極簡風(fēng)格的設(shè)計方法

資深UI設(shè)計者

@喪心病狂十六夜貓 :在過去的幾年中我們時常會聽見別人說“極簡風(fēng)格(英: Minimalism)”這個詞,但這究竟是什么,我們又該怎么使用呢?這一次,就讓我們一起來看看極簡風(fēng)格具體的使用方法與參考案例吧。

極簡風(fēng)格,就是將設(shè)計省略到最小限度,只留下真正引人注意的內(nèi)容,這樣一種表現(xiàn)風(fēng)格。通過極簡風(fēng)格,可以將設(shè)計的意圖與目的更準(zhǔn)確的傳達出來。

極簡風(fēng)格看起來很簡單,但完成作品也是需要大量的練習(xí)和長時間的制作的。


這5個思路,能讓你的線上廣告更加吸引人

資深UI設(shè)計者

現(xiàn)如今的設(shè)計師大都是多面手,雖然各有擅長,但是通常會涉足不同的設(shè)計領(lǐng)域。網(wǎng)頁設(shè)計師偶爾也會設(shè)計幾個宣傳用的折頁,UI設(shè)計師偶爾做幾張海報。

雖然絕大多數(shù)的設(shè)計項目都遵循著相同的設(shè)計理論,并且都要做的足夠好看,但是不同的設(shè)計產(chǎn)品的成敗,決定性的因素并不相同。廣告設(shè)計就是如此。通常廣告位所預(yù)留的空間就不大,容錯率并不高,而借助這小小的一塊地方,你只有一次機會去打動你的目標(biāo)用戶。那么你要如何地設(shè)計出有用的廣告呢?今天的文章,為你分享5個可供你參考的思路。

設(shè)計重要,但是出發(fā)點和想法更重要,有的時候,好的思路是成功的一半。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔