對于許多公司和品牌而言，使用帶有含義的動物logo，能非常準(zhǔn)確的傳遞品牌信息！比如說豹子的敏捷，獅子的勇猛，長頸鹿的優(yōu)雅，獨角獸的神秘等等！這種品牌意識在其徽標(biāo)中使用動物象征來策劃。根據(jù)所選動物的類型，品牌是強大，快速，奢華，關(guān)懷，神秘和許多其他情感。
在我們設(shè)計UI有所疑惑時，可以參照以下標(biāo)準(zhǔn)做法。
這些做法并非一成不變—我只是列舉出這些方法，相信它們可以對你的日常UI設(shè)計工作有所幫助。
我們需要記住一點，設(shè)計其實就是跳出框框思考，這意味著，有些時候我們要打破陳規(guī)。所以，對我的建議也不要全盤接受。
圖中的像素值是密度像素值的三四倍
密度像素是屏幕上每一英寸所包含的像素個數(shù)，簡稱PPI（Pixels Per Inch）。dp（density-independent pixel）是密度獨立像素，也寫作dip（也有device-independent pixel之說，設(shè)備獨立像素）。
設(shè)計界面時，建議大家基于設(shè)備的密度像素，而不是像素。這樣可以保證我們設(shè)計出的圖標(biāo)素材比例適當(dāng)，適應(yīng)不同尺寸的設(shè)備。
舉個例子，假如我們以密度獨立像素dp為單位，設(shè)計了一個 200 x 50的按鍵，那么這個按鍵在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸則為400 x 100像素，即原尺寸的兩倍。
因為有些屏幕的單位英寸的像素數(shù)量要比其他屏幕多，即ppi分辨率大，為了保證設(shè)計的圖標(biāo)在不同分辨率的屏幕上都一樣大，設(shè)計師通常只是設(shè)計一個尺寸，導(dǎo)出2x、3x、4x的尺寸。
iPhone XS Max的屏幕尺寸是414 x 896。但這里的單位并不是像素，而是點的個數(shù)。論像素，則是1242 x 2688 px。知道了這些，給iPhone XS Max做設(shè)計時，我會以414 x 896個點為尺寸做設(shè)計，而后導(dǎo)出3x的圖標(biāo)素材。
為什么UI設(shè)計的間距都是8的倍數(shù)而不是5的倍數(shù)呢？這里有一個簡單的解釋—如果一個設(shè)備是1.5x的分辨率，我們就沒法導(dǎo)出一個奇數(shù)。
另外，現(xiàn)代主流的屏幕尺寸都是以8為單位，以8的倍數(shù)做設(shè)計可以很好地適應(yīng)這些屏幕。
以8的倍數(shù)設(shè)計可以保證設(shè)計的一致性。基于這種慣例，大家在進(jìn)行設(shè)計工作時不用再猜測間距的數(shù)值，每個圖標(biāo)都可以完美地與其他圖標(biāo)對齊。
有關(guān)這個話題的更全面探討，請參考Bryn Jackson的文章《八像素網(wǎng)格設(shè)計》。
我們在設(shè)計的過程中應(yīng)該時常將自己抽離出來，審視界面中這些作為元素“容器”的線和框是否讓界面顯得過于雜亂，是否應(yīng)該予以保留。通常這些用以區(qū)隔界面內(nèi)容的線和框可以被邊界留白代替。
我們設(shè)計的大部分元素都存在于線框里，簡單清除掉這些“容器”可以讓界面看起來不那么擁擠—給元素更多呼吸的空間。
善用對比度不僅僅是為了讓用戶的注意力集中于重要的信息，更是為了使產(chǎn)品更容易訪問/使用。
設(shè)計產(chǎn)品就好比建設(shè)像圖書館、學(xué)校一類的公共場所，它的適用對象需要涵蓋每一個人，包括失明、色盲和視障用戶。
Web內(nèi)容無障礙指南（WCAG）要求文本或文本圖像的對比度至少為4.5：1。
為了保證設(shè)計達(dá)到該標(biāo)準(zhǔn)，我們可以下載Stark這款插件來檢查設(shè)計是否是無障礙的。
為什么有些圖標(biāo)元素會被公認(rèn)為標(biāo)準(zhǔn)？原因有多種。
假如你把一個按鈕設(shè)計成圓形，那么當(dāng)我們需要一個（字?jǐn)?shù)較多的）“Start Free Trial”按鈕時，它就會不必要地占用界面中豎直方向上的空間。
另外，用戶期待的是與其他產(chǎn)品相似的體驗。如果你設(shè)計的網(wǎng)站、APP或軟件與用戶的既有習(xí)慣相悖，那么這樣的體驗是不直觀的，用戶很可能會因此受挫。
故而，在我們發(fā)揮創(chuàng)造力的時候，最好以現(xiàn)有的設(shè)計規(guī)范為基準(zhǔn)和前提。不要重新設(shè)計輪子。
每一種顏色都有自己的視覺重量，我們可以通過借助顏色的視覺重量來建立內(nèi)容的視覺層次，用顏色的深淺來呈現(xiàn)內(nèi)容的重要性的層級。
善用顏色視覺重量的秘訣是，一個更為重要的元素，應(yīng)該有更重的視覺顏色，以便用戶快速瀏覽網(wǎng)頁，區(qū)分重要和不重要的信息。
大字號、粗體的信息會首先被用戶注意到，而后他們會關(guān)注其下的輔助性信息。
通常，設(shè)計界面會控制使用的字體數(shù)目，兩種不同的字體就應(yīng)足夠—這不是說你不能使用更多字體，只是你需要充分的理由。通常來講，僅用兩種字體會更好。
設(shè)計界面時要善用字體家族。
使用字體家族意味著我們可以使用同一字體的不同變體。字體家族的存在就是為了字體的不同變體可以更和諧地被放在一起，讓設(shè)計在保持多變性的同時兼顧一致性。
選擇字體時，盡量選擇那些有多種重量（如標(biāo)準(zhǔn)、適中、粗體、特粗）和樣式的（如長體、寬體、斜體）的字體家族（譯者注：作者此處所述選字體經(jīng)驗的適用對象主要為英文字體。）。這樣既會給設(shè)計留出可探索的空間，也不會增加額外的字體種類。
讓用戶去認(rèn)知產(chǎn)品是產(chǎn)品設(shè)計中所推崇的，因為，我們?yōu)槭裁匆層脩粼谑褂玫倪^程中去思考呢？
結(jié)賬頁面、電子郵箱、搜索歷史、返回按鈕等都是很好的建立了用戶認(rèn)知的例子。
在好的設(shè)計中，結(jié)賬頁面是不需要讓用戶記住他們所要購買的物品的。用戶應(yīng)該可以清楚地從界面中確認(rèn)他要購買的物品，而非通過回憶來想起。
在Gmail郵箱中，我瞟一眼就可以知道哪些是已讀郵件，哪些是未讀郵件，這個過程不需要過腦子。同理，我登錄到自己的亞馬遜賬戶后，可以迅速地從上次購物時中斷的地方繼續(xù)開始購物—因為它顯示了我最近瀏覽過的物品。
設(shè)計時，應(yīng)讓元素、功能、選項明顯可見，最小化用戶的記憶負(fù)荷。用戶無需自己在操作的步驟中記住信息。系統(tǒng)的操作說明應(yīng)該在需要時很容易看到或查到。
—Nielson Norman Group（尼爾森諾曼集團(tuán)，人機交互和用戶體驗咨詢公司，唐·諾曼是創(chuàng)始人之一）
作為用戶，速度和效率是最重要的。用戶使用一個應(yīng)用程序，是為了解決某個特定的問題。
我要速度。
— Ricky Bobby（電影《塔拉迪加之夜：瑞奇鮑比的民謠》主角、賽車手）
如果將一張支票通過手機存入銀行賬戶這個體驗是非常讓人享受的，那固然很好，但作為設(shè)計師，千萬不要讓你的創(chuàng)造力阻礙用戶實現(xiàn)他們的目標(biāo)。
關(guān)于動畫和微交互的一條經(jīng)驗就是，如果某個體驗只是無謂地增加了時間，那么這不是在改善用戶體驗。
如果加入的動畫帶有目的性，則可以改善用戶體驗；但是如果增加的只是不必要的分散注意力的元素或用戶操作，那么用戶體驗不會變得更好。
Dribble上有很多著陸頁的設(shè)計—當(dāng)用戶向下滾動鼠標(biāo)時，動畫隨之展開。通常，這些設(shè)計展現(xiàn)出過火的動畫效果，每個元素都在淡入淡出，動來動去，而幾乎不關(guān)注體驗本身。當(dāng)太多事情同時在界面上發(fā)生時，用戶很難知道到底哪些信息是應(yīng)該關(guān)注的，這等同于浪費用戶寶貴的時間。
這位Dribble用戶，非常抱歉把你揪了出來:/
無數(shù)研究表明，界面中動畫的最佳時間在200到500毫秒之間，這個數(shù)字是由大腦的特征決定的。任何短于100毫秒的動畫都是一晃而過，人眼根本無法識別；而超過一秒的動畫會帶給人無聊和延遲的感覺。
—《UX微動畫設(shè)計指南》
所以，如果你要在界面中使用動畫，那么給它一個明確的目的，并且不要讓用戶等待超過500毫秒。在2019年的今天，惹惱你的用戶只需要1毫秒。
每次我們想要增加額外的信息到界面中時，例如按鈕、文字、照片、動畫、插圖等等，它們就會跟相關(guān)的信息進(jìn)行競爭。如果一頁上有太多東西，那么某些元素的重要程度就會被削減。
谷歌搜索首頁就是典范。這個設(shè)計將全部的注意力放在了搜索這個主要功能上，沒有把用戶淹沒在不必要的信息海洋里。
對不起了雅虎，在這必須把你當(dāng)做不好的案例展示
最后，分享給大家一句我最愛的設(shè)計箴言：
臻于完美之時，不是加無可加，而是減無可減。
文章來源：UXRen
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
在大數(shù)據(jù)時代，數(shù)字化轉(zhuǎn)型已經(jīng)成為行業(yè)迫切的需求。2016-2018年金融、醫(yī)療、政府、安全等行業(yè)在大數(shù)據(jù)方向上的投入持續(xù)增加，大數(shù)據(jù)可視化的需求呈現(xiàn)爆發(fā)式增長，相關(guān)產(chǎn)品也紛紛推出：阿里 DataV 的「雙十一的天貓可視化大屏」、360的數(shù)博會企業(yè)安全大屏、帆軟的 BI系統(tǒng)。面對井噴式的市場需求和部門業(yè)務(wù)在 To G、To B 的拓展需求，需要快速儲備大數(shù)據(jù)可視化的能力，作為一個 To C 的設(shè)計團(tuán)隊面臨的挑戰(zhàn)和責(zé)任都是巨大的。（編者注：由于本文動圖太大，將近100M，為了不影響移動端讀者的閱讀體驗，本文圖片都是靜態(tài)截圖，動圖文章鏈接戳：https://docs.qq.com/doc）
在過去一年中，潘洛斯（Penrose）團(tuán)隊參與了「靈鯤」態(tài)勢感知系統(tǒng)、「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)等14個大數(shù)據(jù)可視化產(chǎn)品的設(shè)計。隨著產(chǎn)品不斷的探索和迭代，積累了一些行之有效的大數(shù)據(jù)可視化設(shè)計的心得和方法?；凇胳`鯤」這個案例，分享一下我們在大數(shù)據(jù)可視化方向的設(shè)計和思考，希望能夠給對大數(shù)據(jù)可視化感興趣的同學(xué)提供一些思路。
「靈鯤」是 MIG 安全云部門與潘洛斯（Penrose）團(tuán)隊合作的，基于潘洛斯大數(shù)據(jù)可視化引擎衍生出的一款金融風(fēng)險監(jiān)控可視化產(chǎn)品。應(yīng)北京與深圳金融辦的需求，搭建靈鯤金融風(fēng)險態(tài)勢感知系統(tǒng)，實現(xiàn)事中風(fēng)險控制，減少網(wǎng)絡(luò)欺詐損失。
著手設(shè)計之前，我們需要了解：大數(shù)據(jù)市場規(guī)模和各行業(yè)投入有多大， 政企客戶的大數(shù)據(jù)可視化產(chǎn)品的痛點是什么？對比深耕多年的競品，我們設(shè)計的突破口在哪？——挖掘我們的機遇和發(fā)力點。
數(shù)據(jù)顯示，2017年中國大數(shù)據(jù)產(chǎn)業(yè)規(guī)模為4700億元。隨著一系列政策的出臺，大數(shù)據(jù)國家戰(zhàn)略正在加速落地，大數(shù)據(jù)行業(yè)將持續(xù)增長，預(yù)計2018年中國大數(shù)據(jù)產(chǎn)業(yè)規(guī)模將達(dá)到6200億元，增幅達(dá)32%。需求層面，預(yù)計2020年大數(shù)據(jù)應(yīng)用市場需求中，僅政府需求就占比35%，另外包括醫(yī)療、交通、金融等多個行業(yè)在大數(shù)據(jù)和信息化建設(shè)投入也將持續(xù)增加。
除了旺盛的需求以外，我們還注意到很多政企內(nèi)部數(shù)據(jù)基礎(chǔ)很好，以宜昌為例，宜昌智慧辦匯集了來自32個部門、60個系統(tǒng)的大量詳盡的實施城市數(shù)據(jù)。與這些政企單位合作，易形成行業(yè)燈塔，便于規(guī)模復(fù)制。另外，針對大數(shù)據(jù)可視化，目前政企已不滿足于「面子工程」，更多的希望大數(shù)據(jù)可視化與 AI 結(jié)合，呈現(xiàn)更復(fù)雜多樣的數(shù)據(jù)，以輔助決策。
基于以上的市場潛在規(guī)模的考察和典型客戶研究，在進(jìn)行「靈鯤」產(chǎn)品能力規(guī)劃時，我們主要考慮以下三類使用場景： 政府機構(gòu)決策、展會展臺及參觀視察。
在金融局等相關(guān)政府機構(gòu)的日常工作中，決策層和相關(guān)工作人員會基于實時金融平臺數(shù)據(jù)，針對日常事務(wù)或緊急事件進(jìn)行決策管理，監(jiān)控大廳也就應(yīng)運而生?；谶@種工作方式，我們可以發(fā)現(xiàn)潘洛斯的產(chǎn)品特性非常契合監(jiān)控大廳的使用場景。在監(jiān)控大廳中，用戶是通過兩種不同的信息界面進(jìn)行工作的，分別是綜合數(shù)據(jù)可視化大屏（總屏）以及工作人員獨立使用的電腦屏幕（分屏）。其中，在總屏上，呈現(xiàn)的內(nèi)容通常是一些對于決策者來說至關(guān)重要的信息：正在發(fā)生的事件的狀態(tài)和可能趨勢（發(fā)生了什么）、值得注意的風(fēng)險（需要團(tuán)隊做什么）以及風(fēng)險的處理進(jìn)度（團(tuán)隊做的怎么樣）；而在分屏上，主要為工作人員提供數(shù)據(jù)分析及風(fēng)險事件處理功能，幫助團(tuán)隊對事件迅速作出響應(yīng)，協(xié)作。
不同于工作場景，靈鯤產(chǎn)品在展會中展臺的主要受眾是參會人士，除了一般民眾外，更有價值的觀眾主要來自于媒體和潛在客戶等。所以在這個場景中展示的內(nèi)容與實際工作中的數(shù)據(jù)可視化內(nèi)容有一定的區(qū)別，更多的是對產(chǎn)品能力的展示、產(chǎn)品的宣傳以及社會價值的呈現(xiàn)。如何直觀的呈現(xiàn)產(chǎn)品的能力，并使觀眾快速獲得有價值的信息并留下深刻印象非常重要。這也決定了在這個場景中，用戶不僅包括觀眾，也包括演講者。我們需要考慮如何通過控制端讓講演者而流暢的完成產(chǎn)品介紹。
在金融局等政府機構(gòu)，經(jīng)常會有上級領(lǐng)導(dǎo)視察參觀的接待活動。這些來訪的貴賓往往希望了解關(guān)于機構(gòu)更全面和具體的信息，包括但不限于工作流程、工作成績等，所以我們認(rèn)為這個場景綜合了以上兩種場景的主要特點。這里的用戶包括來訪人員，演示人員以及工作人員，展示的內(nèi)容也往往不局限于金融風(fēng)險大數(shù)據(jù)的可視化，還會包括工作方式和流程本身。
通過對阿里 DataV，AntV、360、帆軟的大數(shù)據(jù)可視化產(chǎn)品的體驗，我們從產(chǎn)品呈現(xiàn)、產(chǎn)品體驗、產(chǎn)品技術(shù)、部署方式和商業(yè)模式幾個維度的橫向?qū)Ρ?。阿里的技術(shù)對可視化效果的局限性很大，優(yōu)點是產(chǎn)品實現(xiàn)模板化、系統(tǒng)實時可交互，用戶可以快速搭建自己的可視化產(chǎn)品；360產(chǎn)品可視化呈現(xiàn)3D化，數(shù)據(jù)呈現(xiàn)效果和數(shù)據(jù)感知度較2D更優(yōu)，但是系統(tǒng)非實時可交互，而且搭建周期長，成本較高；帆軟的可視化是傳統(tǒng)報表型，可視化效果呈現(xiàn)缺乏競爭力。
經(jīng)過對比，我們不難發(fā)現(xiàn)3D化數(shù)據(jù)呈現(xiàn)能力和數(shù)據(jù)感知度是最高的。但是局限于目前的技術(shù)，項目成本高、研發(fā)周期長、難以滿足業(yè)務(wù)的發(fā)展速度。
基于市場需求和競品分析，我們從以下三個方面分別分析了產(chǎn)品的機會和突破點：
基于對靈鯤態(tài)勢感知系統(tǒng)的使用場景、用戶需求以及機會點的考慮，我們規(guī)劃了未來產(chǎn)品的整體架構(gòu)，包括大屏端、云端、客戶管理端、小屏端以及虛屏端。大屏端基于本地端引擎進(jìn)行大數(shù)據(jù)可視化呈現(xiàn)?？蛻艄芾矶税▓蟊砗团渲霉芾淼裙ぞ撸瑤椭脩暨M(jìn)行分析數(shù)據(jù)和策略管理。小屏端主要考慮操作控制和移動辦公等移動使用場景，提供大屏控制、移動審批、監(jiān)管、公眾號等功能。以上三個端由云端拉取和更新數(shù)據(jù)。虛屏則提供差異化的大數(shù)據(jù)可視化體驗，如增強現(xiàn)實等新奇有趣的玩法。由于大屏端在我們的規(guī)劃里是態(tài)勢感知系統(tǒng)的核心，且落地到合作方的模塊，以下分享的內(nèi)容將主要圍繞大屏的內(nèi)容設(shè)計展開，未來如果產(chǎn)品規(guī)劃中的其他模塊陸續(xù)上線，我們再做分享。
本地端引擎
早期我們設(shè)計的「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)在對外在大屏上展示主要是通過 web 端的方式去實現(xiàn)，雖然適配性尚可，但很多設(shè)計效果無法完全還原。我們也嘗試性用 webGL 和 three.js 的方式把設(shè)計效果再做進(jìn)一步提升，但迫于研發(fā)周期和實際性能的壓力，最后也只能作罷。中期我們嘗試使用3D工具輸出視頻的方式做過一些過渡，輸出效果是沒有問題，但如果在展會上遇到媒體采訪，事情就會變得異常尷尬。媒體會詢問展示內(nèi)容的真實性，數(shù)據(jù)的實效性，甚至采訪的時候需要停留在某一個畫面，我方參會人員配合起來非常麻煩。后來我們也研究過競品使用的工具，例如 Ventuz，工具最終輸出的效果是不錯，但是界面、操作極其復(fù)雜，相關(guān)教程和素材在網(wǎng)絡(luò)上極少，授權(quán)費用也相當(dāng)昂貴。最終經(jīng)過我們內(nèi)部商討和研究，也請教了一些 IEG 專家的意見，決定使用游戲引擎作為本地端的顯示引擎。
Unity 和 Unreal 我們也糾結(jié)過許久，甚至 Unity 上我們也出過可交互的 Demo，但最終選擇了 Unreal 的原因主要有以下幾個點：
色彩基調(diào)
為了打造靈鯤產(chǎn)品的可視化，在競品中脫穎而出，我們從產(chǎn)品功能、用戶、愿景三個維度發(fā)散，提煉出設(shè)計指南的關(guān)鍵詞：智能、直觀、未來，塑造獨特的大數(shù)據(jù)可視化風(fēng)格體系。
靈鯤金融態(tài)勢感知系統(tǒng)內(nèi)容架構(gòu)分為數(shù)據(jù)維度和場景維度，數(shù)據(jù)是核心，場景是大數(shù)據(jù)呈現(xiàn)的承載體；場景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個性；數(shù)據(jù)色彩使用透明、發(fā)光、具有未來感的高亮色，和場景形成強對比，使數(shù)據(jù)更為突顯、更具吸引力；為了強化客戶對于風(fēng)險的感知，通過顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險等級，更直觀的傳達(dá)數(shù)據(jù)的含義。如：高風(fēng)險的使用紅色，紅色讓人聯(lián)想到危險、警報。
呈現(xiàn)方式
在現(xiàn)有的產(chǎn)品和傳統(tǒng)認(rèn)知中，大數(shù)據(jù)產(chǎn)品內(nèi)容是各種樣式的圖形和圖表，主要以平面為主。我們從游戲、科幻電影中收集了一輪大數(shù)據(jù)可視化內(nèi)容相關(guān)的案例，從視覺維度上看，主要有這幾個特點：一、具有很強的空間感，支持多種數(shù)據(jù)同屏呈現(xiàn)，可交叉分析對比，承載性強；二、高精度的模型和材質(zhì)，豐富的粒子、動效，更加貼近現(xiàn)實的光影呈現(xiàn)；三、互動性強，可交互，實時演算。
從大數(shù)據(jù)可視化的內(nèi)容維度上看，梳理的3D架構(gòu)，主要包括：數(shù)據(jù)維度>基礎(chǔ)建設(shè)>交通運輸>行政分區(qū)>自然條件。
數(shù)據(jù)維度層是最核心的部分，位于場景上方最突出的位置，能夠更清晰的展示風(fēng)險數(shù)據(jù)的分布、量級；行政區(qū)域和交通層是城市場景最基礎(chǔ)的數(shù)據(jù)維度，方便用戶進(jìn)行區(qū)域的數(shù)據(jù)對比和分析；基礎(chǔ)建設(shè)層包括城市的建筑、標(biāo)志性建筑、照明、橋梁、等，還原城市獨特風(fēng)貌；通過突出城市的標(biāo)志性建筑，強化城市、區(qū)域的識別性，輔助數(shù)據(jù)傳達(dá)；自然條件層包括地形、河流、植被、展示真實的環(huán)境特征，用戶更有代入感。
△ 北京場景
△ 鳥瞰視角、漫游視角自由切換，滿足全局、街道、建筑的不同顆粒度的數(shù)據(jù)呈現(xiàn)，方便用戶進(jìn)行縱向的數(shù)據(jù)對比。
△ 場景整體風(fēng)格圖
數(shù)據(jù)表現(xiàn)
靈鯤的3D數(shù)據(jù)樣式有柱狀圖和散點圖。如何把司空見慣的數(shù)據(jù)樣式，設(shè)計出產(chǎn)品的個性，是我們重點要解決的問題。為了體現(xiàn)大數(shù)據(jù)的力量感，使用科幻電影中的聚合能量、發(fā)光的能量石作為柱狀圖的主圖形；同時把數(shù)據(jù)采集、融合、分析的過程具象為動態(tài)粒子網(wǎng)絡(luò)，作為輔助圖形。數(shù)據(jù)圖形和結(jié)構(gòu)中都融合了品牌 DNA 的三角圖形，數(shù)據(jù)樣式更具有品牌的個性。
△ 柱狀圖
△ 散點圖
預(yù)見未來的功能創(chuàng)新
時間線：3D的維度基礎(chǔ)上，我們增加了時間的維度，通過拖動時間線查看不同時間點的數(shù)據(jù)的變化趨勢，由此對未來數(shù)據(jù)進(jìn)行預(yù)測。為了強化用戶對于時間感知，設(shè)計了白天和晚上兩種風(fēng)格，白天和夜晚隨著時間變化而變化。
天氣系統(tǒng)：天氣是未來數(shù)據(jù)分析極其重要的一個因子，它會直接影響交通（例如人流、物流、航空）、醫(yī)療(例如疾病傳播、醫(yī)院就診）等領(lǐng)域。所以我們設(shè)計了通用的天氣系統(tǒng)組件，呈現(xiàn)實時天氣情況，以輔助用戶進(jìn)行數(shù)據(jù)分析。
控制端：符合大屏使用場景和用戶操作習(xí)慣，同時小屏控制端支持更復(fù)雜更精準(zhǔn)的操作。
組件庫搭建
為了提升產(chǎn)品搭建的效率，降低了研發(fā)周期和成本，產(chǎn)品功能模塊實現(xiàn)了組件化，分為3D場景組件、3D數(shù)據(jù)組件、2D數(shù)據(jù)組件。任何一位設(shè)計師都可以根據(jù)產(chǎn)品需求，搭配組件模塊，快速搭建大數(shù)據(jù)可視化產(chǎn)品。
數(shù)據(jù)內(nèi)容的包裝
通過該產(chǎn)品，一方面能夠輔助金融局等政府機構(gòu)領(lǐng)導(dǎo)把控整體金融平臺風(fēng)險、輔助做出平臺整改指導(dǎo)決策意見，展示金融工作成績；另一方面體現(xiàn)出騰訊大數(shù)據(jù)能力和公司的社會責(zé)任；最后，通過從更長遠(yuǎn)的眼光去包裝產(chǎn)品，打造智慧監(jiān)管標(biāo)桿產(chǎn)品，從而推動與政府客戶更深入廣泛的合作。具體內(nèi)容通過以下兩條線進(jìn)行組織：
橫線：各個監(jiān)管維度
靈鯤金融風(fēng)險態(tài)勢感知系統(tǒng)專注于呈現(xiàn)金融風(fēng)險數(shù)據(jù)的呈現(xiàn)，主要分為公司層面和用戶層面，綜合體現(xiàn)潛在的風(fēng)險趨勢和實際影響的范圍。除了靈鯤用于監(jiān)管金融數(shù)據(jù)，整個監(jiān)管平臺還負(fù)責(zé)展示包括政治、生態(tài)、電信、消費在內(nèi)的多個監(jiān)管維度，這些維度與金融監(jiān)管維度為同一個內(nèi)容層級。我們考慮到騰訊的大數(shù)據(jù)能力可以幫助更多城市綜合管理者了解整個網(wǎng)絡(luò)社會的全局性風(fēng)險，所以每個維度都是智慧監(jiān)管必不可少的一部分，并且每個維度之間的橫向交叉對比能夠使智慧監(jiān)管平臺發(fā)揮出更大的社會價值。
縱線：監(jiān)管顆粒度
靈鯤系統(tǒng)中觀眾可以從全局?jǐn)?shù)據(jù)一直下鉆到個體數(shù)據(jù)，實現(xiàn)不同顆粒度的監(jiān)管目的。
具體來講，全國的安全風(fēng)險最終是以加權(quán)平均后的指數(shù)形式體現(xiàn)出來；再到具體的省份和城市，內(nèi)容細(xì)化到具體風(fēng)險事件的發(fā)生情況，如電信安全監(jiān)管維度，呈現(xiàn)電信詐騙使用的偽基站的位置，以及發(fā)送詐騙短信的數(shù)量等；最后細(xì)化到城市中的機構(gòu)和建筑，呈現(xiàn)具體機構(gòu)的運行情況和具體高風(fēng)險企業(yè)所在建筑進(jìn)行實時監(jiān)控。
https://v.qq.com/x/page/d0742kep4k1.html
潘洛斯團(tuán)隊是基于 DNA 設(shè)計中心下的大數(shù)據(jù)可視化團(tuán)隊，成員來自于 MIG 安全和醫(yī)療部門，早期專注于 To C 端的產(chǎn)品設(shè)計，過去一年里隨著公司戰(zhàn)略的變化和部門業(yè)務(wù)方向的變化，我們逐漸開始把產(chǎn)品設(shè)計的重心和思考放在了 To B、To G 領(lǐng)域，不斷做著嘗試和探索。以前做 To C 的時候我們關(guān)注的更多是 DAU、轉(zhuǎn)化率、日活、滿意度這些和產(chǎn)品體驗相關(guān)聯(lián)的指標(biāo)，滿足絕大多數(shù)互聯(lián)網(wǎng)用戶的訴求是我們首要去解決的問題?，F(xiàn)在做 To B、To G 領(lǐng)域的設(shè)計，我們更多思考的是如何包裝我們現(xiàn)有的業(yè)務(wù)能力，能夠通過更加簡單、直接、有效的方式觸達(dá)給我們的客戶，讓他們更容易理解像騰訊這樣擁有海量數(shù)據(jù)和算法能力的互聯(lián)網(wǎng)公司如何幫助他們進(jìn)一步提升他們的業(yè)務(wù)效率和產(chǎn)出，給這個社會創(chuàng)造更多的價值，這也是騰訊多年來想要承擔(dān)的社會責(zé)任之一。
文章來源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
2018年如自己所愿，終于有機會可以嘗試下數(shù)據(jù)大屏的可視化設(shè)計，但是想象總歸是美好的，新手上崗第一次總是那么不太如意，陌生而又熟悉著。在做過幾次嘗試后，自己又私下里翻閱了一些關(guān)于數(shù)據(jù)大屏方面的設(shè)計文章，好的設(shè)計圖片。有很多不足，也有很多剛開始做的時候沒有注意到的點，這次整理作品，也順便把大概的設(shè)計流程整理了一下。給自己的一個復(fù)盤總結(jié)，也是一次設(shè)計分享。
文章來源：UI中國
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
剛?cè)胄械男率衷O(shè)計師容易出現(xiàn)一個問題，接到需求就開始設(shè)計，最后出現(xiàn)的界面和原型幾乎一模一樣，唯一的區(qū)別就是上了色，加了圖片和圖標(biāo)，最后提交審核時老板反饋，“這個界面看上去太“平”了，你在這里加個背景色吧；這個圖標(biāo)太小，你再放大一點；這個位置你在加點裝飾……”。
這主要原因還是界面沒層次導(dǎo)致的，雖然老板對設(shè)計不太清楚，但是關(guān)于業(yè)務(wù)邏輯我們的設(shè)計稿是否表達(dá)清楚，重點是否突出這個他最清楚了。
那么如何才能提高界面層次呢？我們可以從兩個方面入手，在設(shè)計前我們需要考慮突出內(nèi)容層次的方法；在設(shè)計中需要考慮突出視覺層次的方法。
目錄
一、突出內(nèi)容層次的方法
將相關(guān)聯(lián)的元素進(jìn)行組合
確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面
確認(rèn)重要內(nèi)容，將其差異化設(shè)計
二、提高視覺層次的方法
利用線、面、留白將模塊進(jìn)行分割
利用大小、投影、背景圖突出視覺層次
利用顏色對比提高視覺感受
利用文字對比提高界面的可閱讀性
一、突出內(nèi)容層次的方法
當(dāng)一個界面信息量比較大時，層次感好的界面用戶進(jìn)來能快速的獲得想要的信息，同時最終達(dá)到產(chǎn)品的目的。而層次感差的界面用戶看半天也不知道要做什么，看一會也就走了。因此良好的視覺層級是界面成功的關(guān)鍵。在設(shè)計前我們需要將相關(guān)聯(lián)的元素進(jìn)行組合；確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面；確認(rèn)重要內(nèi)容，并將其差異化設(shè)計。
1.將相關(guān)聯(lián)的元素進(jìn)行組合
在設(shè)計前，產(chǎn)品原型圖已經(jīng)將我們的元素進(jìn)行了分類組合，但是他們更多的是考慮邏輯、功能上的層次，而如何有一個清晰的內(nèi)容層次呢？設(shè)計師可以利用《格式塔心理學(xué)》中的接近性原則將相關(guān)聯(lián)的元素組合在一起，不相關(guān)的拉開距離，同時形成一定的規(guī)律和節(jié)奏，這樣會讓用戶閱讀起來更輕松。
需要注意的是，界面中的間距需要滿足一定的規(guī)律和節(jié)奏，比如模塊之間的間距大于標(biāo)題到內(nèi)容的間距；在內(nèi)容中不相關(guān)聯(lián)的內(nèi)容間距大于相關(guān)聯(lián)的間距，如下圖所示。
?
天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容；最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。
京東金融的我的頁面用戶的資產(chǎn)信息排在最前面，他首先是遵循了用戶的瀏覽習(xí)慣，同時也是用戶想要看到的內(nèi)容，其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容，最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。
2.確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面
將相關(guān)聯(lián)的信息整理之后就需要確認(rèn)模塊的優(yōu)先級了，由于用戶的瀏覽順序是自上而下的，因此我們需要將優(yōu)先級高的模塊放到前面。
那么優(yōu)先級如何判斷呢？大家可以從三個方面去考慮，第一是遵循用戶的瀏覽習(xí)慣；第二是用戶想看的內(nèi)容；第三是產(chǎn)品想要用戶看的內(nèi)容，如下圖所示。
天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容；最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。
京東金融的我的頁面用戶的資產(chǎn)信息排在最前面，他首先是遵循了用戶的瀏覽習(xí)慣，同時也是用戶想要看到的內(nèi)容，其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容，最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。
3.確認(rèn)重要內(nèi)容，將其差異化設(shè)計
在設(shè)計時我們需要知道，優(yōu)先級高的模塊不一定重要程度就高，因此我們還需要確認(rèn)模塊的重要層級，同時利用背景、布局等方式進(jìn)行差異化設(shè)計，用起用戶注意，如下圖所示。
網(wǎng)易嚴(yán)選中的新人專享禮和品牌制造商直供就采用了差異化設(shè)計，職工類模塊采用的是普通的宮格式布局，新人專享禮采用添加背景的方式，加深了模塊的縱深感，對比其他模塊更加突出。
大麥網(wǎng)中的特色模塊和其他模塊也采用了差異化設(shè)計，特色模塊采用拼圖的方式設(shè)計，其他模塊采用列表的方式進(jìn)行設(shè)計，用戶進(jìn)入頁面首先就能夠看到這個模塊，提高用戶接受信息的效率。
土豆視頻個人主頁的列表部分也采用了差異化設(shè)計，消息提醒、我的收藏、觀看記錄、我的緩存這四個用戶常用的功能采用宮格式布局，其他不常用的我的會員、客戶與反饋、設(shè)置采用列表式結(jié)構(gòu)，這樣也能夠提高用戶操作速度。
二、提高視覺層次的方法
當(dāng)然內(nèi)容層級確定了顯然不夠，我們還需要考慮突出界面的視覺層次，這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢？在設(shè)計中，我們可以利用線、面、留白將模塊進(jìn)行分割；利用大小、投影、背景圖等突出視覺層次；利用顏色對比提高視覺感受；利用文字對比提高界面的可閱讀性。
1.利用線、面、留白將模塊進(jìn)行分割
大家記得在設(shè)計前我們已經(jīng)對界面中相關(guān)聯(lián)的元素進(jìn)行了組合，組合之后就可以利用線、面、留白的方式，將不相關(guān)聯(lián)的元素進(jìn)行分割，提高界面的視覺層次，從而提高用戶的瀏覽和操作效率。
線分割：是最為基礎(chǔ)的分割方式，其優(yōu)勢是占用空間小、分割感弱，多用于列表、Feed流中。需要注意的是，分割線顏色設(shè)置需要非常淺，避免模塊之間強烈的分割感，比如橘子娛樂的列表就是采用若隱若現(xiàn)的線，讓列表中的內(nèi)容更規(guī)整。
面分割：也可叫背景欄分割，其優(yōu)勢是占用空間小、可操作性高，同時能夠更好的區(qū)分不同模塊之間的關(guān)系，多用于模塊和模塊之間的分割，比如轉(zhuǎn)轉(zhuǎn)個人主頁的模塊采用面分割瀏覽性更強。
留白分割：是iOS11發(fā)布之后興起的以留白或間距的方式進(jìn)行分割，其優(yōu)勢是無強烈的分割感，界面清爽，多用于比較有規(guī)律或以大圖為主的模塊之間的分割，比如轉(zhuǎn)轉(zhuǎn)主頁下方的賣二手還錢、買實惠好貨等，其內(nèi)容部分都較為規(guī)則，采用該方式較為合適。
2.利用投影、大小、背景圖突出視覺層次
為了突出界面的視覺層次，我們還可以通過投影、大小、布局等增加界面的對比，從而突出重要信息。
投影：是界面對比較常用的一種方式，其優(yōu)勢是提升界面的空間感，改變視覺次序，通過投影大小的變化還可營造不同的空間關(guān)系，多用于卡片風(fēng)格的設(shè)計中，比如Keep均是采用卡片風(fēng)格的設(shè)計，添加投影后讓界面視覺層次更突出了。
大?。?/strong>是大眾最為熟知的對比方式，其優(yōu)勢是通過大小對比能夠很快的拉開視覺層次，同時能夠很好的引導(dǎo)用戶瀏覽路徑，比如ofo黃色的大按鈕遠(yuǎn)遠(yuǎn)都能看見，該頁面就一個目的掃碼用車。
背景圖：往往不如投影和大小常用，但是它的使用可以將模塊從其他樣式中年凸現(xiàn)出來，多用于banner、推薦等重要模塊中，比如美圖秀秀的推薦模塊，該模塊可以說是美圖的核心模塊。
3.利用顏色對比提高視覺感受
顏色是最容易感知到的對比方式，通過顏色我們可以明確哪些是重要信息，在使用中我們可以通過色相、明暗、飽和度上進(jìn)行對比，其多用在按鈕、重要信息、導(dǎo)航、背景板中。
自如首頁上的租房、服務(wù)、旅行采用對比色進(jìn)行強調(diào)對比，進(jìn)入頁面用戶就能夠清楚這三塊是是界面的核心功能，同時引導(dǎo)用戶關(guān)注右側(cè)的具體服務(wù)信息。
淘票票首頁中的按鈕、引導(dǎo)提示、標(biāo)簽欄選中均用了紅色進(jìn)行強調(diào)對比，很容易引起用戶的注意，讓用戶看一眼就知道如何操作。
招商銀行首頁中的話題PK采用對比色進(jìn)行強調(diào)對比，很容易引起用戶操作的興趣。
4.利用文字對比提高界面的可閱讀性
文字的層次感往往和字體大小和明暗有關(guān)，其中字體大小是提高文字信息層級的重要手段，在文字排版中如果文字之間的層次不清晰，那么一定是大小的對比不夠，在UI中字體大小對比往往在4-8px較為適合，如下圖所示。
當(dāng)字體大小對比適合之后就需要通過通過字體的明暗突出主要信息，弱化次要信息，從而提高界面的可閱讀性，如下圖所示。
在UI設(shè)計中我們往往都設(shè)定了字體規(guī)范，這樣不僅能夠達(dá)到設(shè)計統(tǒng)一，同時也有很好的對比性，常用字號為40, 36, 32,28,24, 22(px)，比如優(yōu)酷的星球頁面，通過字體大小，顏色深淺的對比，讓用戶首先看到重要信息，弱化次要信息。
三、總結(jié)
在界面設(shè)計中為了降低用戶的理解成本，突出重點內(nèi)容，讓用戶使用起來舒適，就需要有個清晰的內(nèi)容層次和視覺層次。
在設(shè)計前我們需要考慮將相關(guān)聯(lián)的元素進(jìn)行組合；確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面；確認(rèn)重要內(nèi)容，將其差異化設(shè)計。
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
在本文的第二部分當(dāng)中，我們來了解一些作為設(shè)計師需要掌握的VR基礎(chǔ)概念及相關(guān)設(shè)計工具。我們不會探索的過于深入，面向設(shè)計師的職能點到為止即可。
新的空間維度與沉浸式體驗所帶來的沖擊是前所未有的。要在三維世界當(dāng)中打造令人舒適的互動體驗，你需要了解一些此前可能并未接觸過的設(shè)計與技術(shù)原則。我們的Cardboard團(tuán)隊將一系列概念知識打包到了Cardboard Design Lab這款app(Android)當(dāng)中，你可以配合Cardboard沉浸到VR世界當(dāng)中進(jìn)行學(xué)習(xí)。
此外還要記得觀看Alex在2015年I/O大會上做的詳細(xì)演示(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)實中，如果有人向你拋來一個物體，你會本能的抓取、躲閃或是保護(hù)自己。合理利用現(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ò)上可以找到的一些用研報告將有助于你進(jìn)一步了解這方面的話題，例如來自LeapMotion的VR Best Practices Guidelines(PDF格式，4.7M)，此外我們還將在本文結(jié)束時提供更多的資源供參考。
不當(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)損傷等等。
簡而言之，這個特定的研究報告至少能告訴我們要盡可能避免長時間的低頭交互行為。
三維空間為我們提供了六種運動方式，包括在X、Y、Z三個軸線上進(jìn)行的旋轉(zhuǎn)與移動。
基于手機的頭戴式VR設(shè)備，例如Cardboard或Gear VR等等，可以通過內(nèi)置的陀螺儀對三個軸線上的旋轉(zhuǎn)行為進(jìn)行追蹤(3DOF)。
HTC Hive與Oculus Rift這類高端VR設(shè)備所擁有的傳感器還可以對發(fā)生在三個軸線上的位移進(jìn)行追蹤(+X、-X、+Y、-Y、+Z、-Z)，從而實現(xiàn)六自由度(6DOF)。
由一個或多個傳感器所組成的紅外追蹤系統(tǒng)使6DOF成為可能。Oculus的追蹤傳感器位于固定攝像頭上，而Vive則將其放置在了HMD(頭戴式顯示器)當(dāng)中。
Oculus與Vive的燈塔位置追蹤模式對比
具體的輸入設(shè)備取決于你所采用的系統(tǒng)平臺。Google Cardboard本身只有一個按鈕，相應(yīng)的交互模式僅包含簡單的“看”和點擊。HTC Vive需要兩個6DOF控制器，而Oculus則搭配了Xbox One手柄，不過最終也會進(jìn)化為雙6DOF控制器“Oculus Touch”。這些輸入設(shè)備都能為用戶帶來更高級的沉浸化交互體驗。
Xbox One手柄
Oculus Touch
其他輸入模式還包括手勢追蹤等等。其中最著名的當(dāng)屬Leap Motion，你甚至可以將其搭載在HMD上配合使用。
搭載在DK2上的Leap Motion
日新月異的科技進(jìn)步在不斷推進(jìn)著這類設(shè)備的發(fā)展，不過目前來說，手勢追蹤技術(shù)還很不成熟，雙手與手指的細(xì)微動作帶來的潛在問題太多，使其難以成為VR的主要輸入設(shè)備。
游戲手柄雖然早已被人們所熟悉，但在VR領(lǐng)域中卻難以帶給我們高質(zhì)體驗，因為操作方式的局限會使VR創(chuàng)造出來的高自由度受到破壞，特別是在FPS(第一人稱射擊)游戲當(dāng)中，通過手柄控制前進(jìn)后退和左右平移的動作時通常會給玩家?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)勢及功能限制有所了解。
這顯然是個很大的話題，需要更多的專業(yè)文章甚至相關(guān)書籍才能詳盡描述。我們在本文中僅對業(yè)界最主流的一些工具進(jìn)行簡要的介紹。
無論在什么時代都始終不離我們左右的老伙伴，方便快捷，無需花費時間精力聚焦于任何技法，在初期探索時尤為適用，能幫你迅速呈現(xiàn)想法，快速迭代，而且成本低廉。要知道，在VR領(lǐng)域，將設(shè)計流程推進(jìn)到中、高保真階段所需花費的成本相比于2D界面設(shè)計來說要更加高昂。
仍然每天都會用到，因為好用。在進(jìn)入實際的VR原型階段之前，Sketch是很完美的探索工具，在導(dǎo)出和插件方面也能幫你極大的提升工作效率。
我并不覺得C4D和Maya是競爭對手的關(guān)系，兩個工具都很棒，各有所長。如果你沒有3D方面的經(jīng)驗，學(xué)習(xí)曲線可能會有些陡峭。在我看來，C4D的界面、參數(shù)設(shè)定和構(gòu)建方式更合理，能幫我做更多的快速迭代，所以很喜歡用。MoGraph模塊不錯，同時還有很多好用的插件供選擇。C4D的社區(qū)很活躍，你可以找到不少高質(zhì)量的學(xué)習(xí)資源。
Maya的優(yōu)勢和不足都很明顯。一方面，它能滿足3D藝術(shù)家的所有設(shè)計需求，太多游戲和電影都經(jīng)由Maya設(shè)計制作，其強大而易用的功能可以應(yīng)對繁重的工作負(fù)荷，渲染、建模、動畫等等無所不通，同時還擁有很高的定制化能力，堪稱業(yè)界典范。多數(shù)工作室需要根據(jù)自身的特定需求來組裝定制化工具集，而Maya正是有能力將所有組件整合為一體的最佳平臺。
但另一方面，要掌握如此強大且多樣化的工具，你勢必要投入大量的時間和精力，包括幾周時間的摸索，幾個月的學(xué)習(xí)以及日復(fù)一日年復(fù)一年的練習(xí)與實踐。
一應(yīng)俱全的原型工具，你可以一邊在VR中預(yù)覽著原型一邊在Unity當(dāng)中進(jìn)行調(diào)整。Unity本身是個強大的游戲引擎，社區(qū)成熟，store中的資源也很豐富(具體售價由資源作者制定)，包括簡單的3D模型、完整的項目、音頻、分析工具、著色工具、腳本、材質(zhì)紋理等等供你選擇。
Unity提供的文檔和學(xué)習(xí)平臺相當(dāng)不錯，教程質(zhì)量很高，覆蓋面也很廣。
在Unity3D中進(jìn)行開發(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)今最主流的游戲引擎，市場占有率達(dá)到了47%。
作為Unity3D的直接競爭對手，Unreal同樣提供了完備的文檔及教學(xué)視頻。由于進(jìn)入市場的時間相比于Unity稍晚，所以Unreal的store規(guī)模還相對較小。
Unreal的巨大優(yōu)勢在于圖形表現(xiàn)力，無論是地形、粒子、后期處理效果還是光影等等都領(lǐng)先于對手。
Unreal 4使用C++，同時搭配可視化腳本編輯器Blueprint。
我個人沒怎么使用過Unreal，難以進(jìn)行更詳細(xì)的介紹。在跨平臺方面，Unreal相對較弱，目前支持Windows PC、OS X、iOS、Android、VR、Linux、SteamOS、HTML5、Xbox One和PS4。
VR還相當(dāng)年輕。作為先行者，我們需要去學(xué)習(xí)和探索的東西太多太多，這也正是我為此而興奮并最終加入VR團(tuán)隊的原因。擺在我們面前的有挑戰(zhàn)，更有機遇，我們理應(yīng)盡最大的努力到這個新世界當(dāng)中進(jìn)行探索，去學(xué)習(xí)、理解、創(chuàng)造、迭代，如此反復(fù)的長久保持下去。
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個選項都是一個tab ，tab 的形式千千萬，但今天只講這種選中后下面帶橫線的。（我們給這個橫線起個名字叫做小短線吧，下文都這么叫了哈！）
今天的大綱如下：
人機交互系統(tǒng)輸出信息是有益的或者讓人分心的，要有一條明確的分界線。
Business Insider旗下研究機構(gòu)BI Intelligence最近做出評估預(yù)測，到2020年全球范圍內(nèi)銷售的9200萬輛汽車將使用與互聯(lián)網(wǎng)連接的硬件設(shè)備。想象一下數(shù)以千萬計的車輛應(yīng)用系統(tǒng)每時每刻都在進(jìn)行數(shù)據(jù)輸入輸出，將帶來怎樣的用戶交互體驗。共享數(shù)據(jù)的輔助下，行車安全性可以得到大幅度提升，提前的線路規(guī)劃策略也能夠降低燃油消耗量。系統(tǒng)是如何判斷哪些數(shù)據(jù)對駕駛者或者車載系統(tǒng)本身有所幫助，那些相關(guān)性不大的數(shù)據(jù)是否會讓行車駕駛更復(fù)雜、更麻煩、更危險?
汽車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è)置、藍(lán)牙免提設(shè)置、空調(diào)及音響的設(shè)置。
最近在做產(chǎn)品的會員中心改版設(shè)計，有一些關(guān)于會員體系相關(guān)設(shè)計的思考及分析，紀(jì)錄并分享一下。
大多數(shù)產(chǎn)品在滿足用戶的基礎(chǔ)需求上，會推出付費會員功能，以滿足用戶更高需求的同時，達(dá)到商業(yè)層面的收支平衡。那么，會員中心應(yīng)該怎么做，才能讓用戶感受到自己花的錢很值呢？
分享一個經(jīng)典案例：《騰訊ISUX丨通過優(yōu)化，我們將QQ會員付費用戶數(shù)提高了5倍！》
設(shè)計前，先明確會員中心的設(shè)計目的是什么？
1. 會員尊享感（讓用戶感知到付費值得，花了錢就是爺，滿足一部分用戶的虛榮心）
2. 功能特權(quán)對比（通過特權(quán)的對比，讓用戶選擇更高的等級會員）
3. 突顯核心特權(quán)功能（突出核心功能，抓住用戶訴求點，提升用戶購買決策）
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com