<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          醫療院感可視化

          ui設計分享達人


          可視化是利用計算機圖形學和圖像處理技術,將數據轉換成圖形或圖像在屏幕上顯示出來,再進行交互處理的理論、方法和技術。面對醫療行業,如何將行業數據,轉化為視覺可視化中的點線面,是在這個項目中需要思考的問題。


          本文將帶來設計師在醫療院感可視化項目中的設計過程及思考,講述如何在業務場景下對數據進行抽取表達。通過可視化打破傳統院感系統的表單呈現,使院感場景具備互動性、觀賞性,滿足不同角色的使用需求。同時院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析,從而控制院感發生和預防。

          本項目以浙江省建德市第一人民醫院為案例,地理數據以建德醫院坐標為準。



          項目背景
          院感是什么?院感為醫院感染,入院48小時內都有可能感染到院感細菌。在醫院里有專門的院感醫生職位,對醫院感染進行有效的預防與控制。而傳統院感管理的工作流:醫護人員及院感醫生 > 院感系統分析疑似病例 > 得出結論預防或治療。這種偏人工的方式數據獲取方式,無法更的獲取院感發生的原因、定位、以及未來的院感預測。


          P1 因此我們通過對醫院數據的整理,抽離出影響院感的數據,將院感發生、發展、管控、治療、預測全流程進行整合。


          P2 通過醫院>樓層>人員三個層面,空間和時間兩個維度對院感展示。打破傳統院感系統的表單呈現,使院感場景具備互動性、觀賞性,滿足不同角色的使用需求:如院長的展示性需求。院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析,從而控制院感發生和預防。


          P3 同時在這樣的設計場景下,可以覆蓋的醫療業務場景和數據單位也會更多元,具有一定的商業化價值。


          P4 設計流程
          整個項目的設計流程可以分為4個階段:信息收集、可視化、線上搭建、效果調試。在此項目實踐中,重點投入在前三大部分。


          P5 Part1信息收集
          我們基于項目背景,梳理要展現的數據指標,對整體業務場景進行故事腳本的規劃(即如何展現前期的數據收集,并把其串聯在整體業務場景中),設定動作攝像機語言,同時也需要了解最終呈現的硬件設備與使用環境。


          P6 Part2可視化

          1.交互信息框架
          首先梳理院感的信息框架和交互方式。


          整個大屏分為院樓層,呈現整體院感數據的統計;樓層屏,作為重點病區的監測預測;個人屏,分析病例回溯病程,從而預測院感。三屏之間相互跳轉, 交互演示方式從醫院的外部跳轉內部結構、再到患者的個人維度,三屏都分別展示相關的數據指標。


          P7 2.視覺風格
          在大屏視效風格探索上,期初的目標是希望可以打造不一樣行業視覺語言,所以選擇不同于以往的設計大屏風格,選擇白色的風格,符合大家對醫護行業的認知。但到中期發現,在硬件設備上展示發是過曝的。因此對設計風格進行調整改為X光片的風格,色系上偏冷綠的感覺。這是在這個項目中的試錯經驗之一。


          P8 3.建模設計
          在可視化部分中遇到的難點:建筑模型的高還原。下圖為建德第一人民醫院實拍圖。在大屏項目中,必須真實還原地理位置。而在此醫院沒有清晰的CAD圖紙提供的;在Google的衛星地圖下也沒有的建筑結構的,所以我在建模的過程中,是踩了坑的,先盲畫了一版,但是精細度不夠,過于粗糙。


          P9 因此我反復看得到的資料,通過在確定地理氛圍內,去豐富場景。這樣的好處是使業務場景更加豐富,包括擴展到院外的車流數據,為業務場景提供更多可能性 當然后期也搖到了建筑內部的消防圖,根據消防圖繪制內部結構。


          P10 4.數據面板
          對可視化組件的組件進行設計:時間篩選、數據統計、占比關系、趨勢分析。設計之前也參考了很多概念版的可視化設計,希望在院感屏上可以呈現一種科技概念的感覺。



          P11 Part3線上搭建
          1.獲取地理數據
          這部分是非常耗時的,datav是數據驅動的可視化產品,在搭建部分,是全程依靠datav平臺的。
          首先需要明確地理數據,通過高德數據通過點線成面,可以作為場景定位,也就是物理模型的經緯度數據 后面還原數據效果,造虛擬數據,是非常依賴于這個坐標數據的。
          119.291724 , 29.472365
          這是建德醫院的坐標,醫院在地圖上的數據是很簡化的,顆粒度很大,具體位置無法顯示。

          P12 因此我們需要建立與地理數據綁定的建模,先對位置。

          P13 在這個過程中我發現,如果最開始沒有對準位置,也不用緊張,可以在DATAV平臺增加hook數據過濾器,解決地理數據與世界坐標無法對齊的問題。

          2.線上場景還原
          根據對確定過位置模型進行烘焙還原。這個過程中遇到了一些不知名的原因烘焙失敗,原因可能是命名有中文/位置數據錯誤/模型塊面復雜等,遇到這樣的問題就需要重新從頭檢查烘焙流程每一步。

          P14  3.數據維度展示還原
          這一步我們需要把前期做好的數據可視化效果,還原到線上模型中。在這一步我遇到的問題是因建德醫院內部具體結構的缺失,使一些可視化效果無法精準匹配到模型上。所以設計過程中只能依賴于在對的地理位置上豐富的場景內造數據,這個過程是比較吃力的。


          P15 這個問題的解決辦法是通過開發工具和導出的結構俯視圖,對位置,然后轉化出LEGO的數據



          P16 在數據效果還原的過程中,也發現我在前期設計的數據效果,不能全部實現,有些是依賴于開發的 。這時可以通過其他組件效果代替嘗試,比如熱力的效果用粒子放大,通過參數調節得到熱力 再比如局部房間的掃管,通過設計部分多次烘焙模型,不斷疊加掃光層,得到房間監測的效果
          P17 設計小結
          綜合以上的經驗,院感可視化從設計到落地,整體結構應該是這樣從物理基礎坐標的獲取、到場景搭建、再到數據展示的過程。在這個過程中會用到DATAV、C4D、數據庫、簡單的代碼等技術來實現。

          P18 這個項目雖然這只是醫療行業中一個小的業務場景,但我們的業務數據提取及可視化設計思路,他不僅限于醫療行業,同時也可以成為場館類大屏解決方案的一部分,是具有一定商業化價值的。同時在這過程中沉淀下來的人體結構模型,和一些設計經驗,是可以復用到對應行業解決方案中,達到提效。

          轉自:

          實戰經驗!可視化大屏設計案例全方位復盤!

          資深UI設計者

          隨著大數據產業的蓬勃發展,很多企業都開始應用數據可視化。所以數據可視化設計,絕對是熱門的設計之一。很多 UI 設計師突然會接到公司數據可視化設計的需求,如果不了解數據可視化設計,肯定是一頭霧水,不知從何入手。本文結合最近設計案例,分享大屏可視化設計過程中遇到的一些問題以及設計思路,供大家一起交流與學習。

          >

          △ 最終動態效果圖

          案例分解

          首先放的是項目改版前的頁面:

          1. 需求介紹

          某某應用云,分為五大云平臺模塊:云端綜合調度、數據查詢通道、數據應用處理、數據存儲管理、管理運行維護。每個大模塊下?有若干個子系統。

          可視化?屏首頁需要展示的內容包括:

          • 全局數據:云平臺的數據總量,以及 4 個重要關注數據項,2 個次要關注數據項;
          • 云平臺的五?大模塊:云端綜合調度、數據查詢通道、數據應用處理理、數據存儲管理、管理運行維護(只有兩個 tab 切換鏈接);
          • 搜索功能:搜索類型分為 6 個,默認選中「綜合」類型進行搜索;
          • 重點關注數據信息按指標分多維度展示:原始圖上的維度包括指標、地圖、地域排名、部?排名、類別;
          • 云導航:展示場景在公司展廳,材質為 Led 拼接屏,設計尺寸為 1920×1080。

          2. 需求分析

          分析大屏可視化的一些共性:

          • 屏幕大:大屏一般都是多屏拼接,整體屏幕面積大。
          • 觀距遠:用戶需要遠處觀看屏幕,要保證數據文字清晰可見。
          • 交互弱:通過電腦已經無法滿足大屏交互需求,現在也有部分開始采用 ipad、手機、激光筆等方式。
          • 視覺強:背景色多采用重色,襯托凸顯數據,更好地為觀者傳達數據信息。
          • 一屏一內容:一屏內容,說明一件主要事情,統計好它的相關數據,避免其他的干擾。

          結合大屏的一些共性特點針對看到的線上舊版本設計,分析存在的問題。

          • 布局混亂,導致視覺不平衡,看不出頁面層次。
          • 藍色為主色調,黃色點綴顏色顯得比較單一沒有規則。
          • 圖表比較單一,不能有效傳達數據信息。

          3. 布局

          整合數據,分析出主要數據、次要數據、總量數據、細分數據、各數據的維度等等。首先優化頁面布局,可以先在紙上畫一畫,然后腦子里有大概思路以后再用電腦繪制,如下圖:

          采用柵格化對稱布局,讓整體視覺左右平衡。

          4. 風格

          一提到數據可視化大家往往能想到科技、數據、藍色等一些普遍關鍵詞。

          了解到客戶是想做一個科技感強、炫酷的視覺效果??梢栽诰W上找一些效果圖或是自己曾經做過的案例供客戶選擇,確定一個大致的風格,然后結合具體的業務場景進行設計。

          5. 顏色

          顏色上結合產品使用場景,以及整個產品調性還是以藍色為主,背景選用深色調,讓視覺更好聚焦,內容部分采用比較透亮的藍色系,保證內容與背景有一定的對比關系,便于業務信息傳達。

          6. 主體地圖

          地圖為大屏的主要展示內容,首先分析展示的目的是為了看清各個城市間的不同分布情況,和城市數據的匯集效果。

          如圖:

          改版前:地圖過于單薄,沒有立體感,太平缺乏層次,顏色黃色不符合產品調性。

          改版后:主色調改為科技藍,在原有地圖上增加外發光和多層陰影疊加,增加地圖的立體感,地圖上增加科技線條上升的效果代表每個城市數據變化的提升,地圖背景采用比較弱化的轉動線條圓形,襯托地圖主體,使得畫面更加豐富。

          7. 地圖效果的實現方法

          首先用 ps 拉框助手新建一個山東的地圖(拉框助手的使用獲取方法可以參照上篇文章)。

          完成后會得到一個叫 map 文件夾的地圖分層文件,如圖所示。這里需要對每個城市的顏色進行調整,為了區分每個城市之間的數據不同關系。

          調整完塊之間的顏色后,就需要給地圖整體增加立體效果。

          首先,是整體給地圖加了一個描邊和外發光。描邊是為了強化地圖邊緣,外發光是為了地圖與背景有一個區分。

          其次為了增加地圖立體感,需要給地圖增加多層陰影疊加的效果。復制現有形狀層,拼合成一個山東省的地圖,如下圖:

          最后,把拼合好的圖層移動到 map 文件夾下面,陰影可以添加多層,這里針對每一層進行不同顏色大小的調整,就是下面的這種效果了,地圖的體積厚度感也就出來了。這里只是提供一個大概的思路,大家可以多去嘗試。

          整體地圖效果調整完成后,就是給地圖增加些紋理,和上升線條這些細節上的效果了。紋理可以用圖案疊加,或者找一張紋理圖剪切蒙版實現,最后再添加上升線條的效果,地圖的效果就完成了。

          最后加上線條上升的動態效果:

          8. 數據圖表拆分

          在選定數據圖表之前,首先要確定圖表之間的關系,可以從以下四個維度進行思考分析:

          • 聯系:數據之間的相關性;
          • 分布:指標里的數據主要集中在什么范圍、表現出怎樣的規律;
          • 比較:數據之間存在何種差異、差異主要體現在哪些方面;
          • 構成:指標里的數據都由哪幾部分組成、每部分占比如何。

          可以參照下面這個圖:

          △ 圖片來自于網絡,侵刪

          當確定好分析維度后,事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。

          傳統的圖表比如 echarts 圖表在視覺上展示可能不是很美觀好看,可根據選擇的圖表在其基礎之上進行美化設計,總之選定圖表最重要的兩個點就是:易理解、可實現。

          易理解:就是要考慮最終用戶,可視化結果應該是一看就懂,不需要思考和過度理解,因而選定圖表時要理性,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。

          可實現:主要是跟開發前期溝通好實現方式,一般都采用開源組件庫的居多,比如 echarts 組件庫,我們設計的圖形圖表,要開發能夠實現。實際工作中,一些可視化效果開發用代碼寫很容易實現,效果也不錯,但這些效果設計師用 Ps/Ai/Ae 這些工具模擬時會發現比較困難。同樣的,某些效果設計師用設計工具可以輕易實現,但開發要用代碼落地卻非常困難,所以大屏設計中跟開發常溝通非常重要,我們需要明確哪些地方設計師可以盡情發揮,哪些地方需要謹慎設計。一個項目總有周期與預算限制,不會無限期的修改迭代,所以設計師在這里需要抓住重點,有取舍,不鉆牛角尖、死磕不放。

          案例中在圖表選擇上,強化科技感元素,條形圖打破傳統條形圖的展示形式,采用電池晶格的展示形式,在保持圖表功能的同時更加凸顯科技感。

          從頁面的整體看,已經有兩處用到了條形圖、柱狀圖,如果這里還是條形圖,那么頁面看起來會很單調,圖表也沒有表現出多樣性,所以現在設計要體現圖表的多樣性也能夠有排名的直觀呈現。以下圖表采用科技圓盤的形式,運用科技線條的上升狀態代表排名的先后順序,所有圖表都采用數據降序來展示排名更加直觀。

          改版前的圖標樣式比較單一,改版后針對每組數據不同的對比形式,采用比較貼合的圖表進行展示,篇幅原因就不一一做展示了。

          附上最終視覺效果圖:

          總結

          大屏設計需要注意的點:

          • 需求分析:對需求進行梳理,分清數據間的主次關系以及對比指標,跟客戶溝通清楚細節。
          • 確認布局:布局上根據數據主次關系,采用柵格化布局(可以在紙上畫一下理清思路)。
          • 情緒板定義設計關鍵詞,確定風格。找參考圖給客戶確認大致的設計方向。
          • 顏色貼合業務。
          • 圖表易理解可實現。

          以上是我對數據可視化大屏的案例總結,希望能幫助到你。除此之外還有很多地方沒有涉及到,包括具體設計的操作方式、選取圖形元素的具體方法,以及在各種大屏中所需要的相對應的組件等,在龐大的可視化大屏設計系統中,還有很多值得學習參考和優化的知識,歡迎溝通交流,大家一起努力。

          文章來源:優設   

          數據可視化設計師如何建立靈感庫?

          ui設計分享達人

           


          一、前言

           

          與其他相對成熟的設計領域(UI、插畫等)相比,數據可視化尚顯小眾,在一個細分、小眾、不成熟的領域里做設計,“怎么去找靈感”確實是一些小伙伴經常遇到的問題。本文以本人工作經驗為基礎,系統性分析了該問題及對應的解決方法,并將其整理成文與大家分享,這在數據可視化行業內尚屬首次。當然了,本文雖面向數據可視化設計師群體,但其中的方法是通用的,運用在其他設計領域也完全事半功倍。

           

          二、本文結構概覽


          本文圍繞“搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新” 五大塊展開。下圖向展示了這篇文章的知識結構,大家可根據思維導圖,選擇自己感興趣的部分閱讀,也可把這張圖作為知識卡片收藏,幫助自己梳理建立靈感庫的思路和方法。


            

          三、靈感庫建立的基礎


          靈感庫的建立大體上分主動與被動兩種。主動,是我們有意識的收集、整理相關作品素材形成靈感庫的過程;被動,指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因為后者更不可控,影響因素較多,比如你所處的圈子、社交網絡使用習慣等都會影響被動獲取的質量。所以今天,我跟大家分享的主要是第一種主動建立靈感庫的方法,而這個方法的核心我把它歸納為兩個字 :搜索。

           

          搜索是現在這個時代我們主動獲取信息的最主要手段,每天我們通過各類關鍵詞在各類APP上獲取各樣的服務、產品和資源。靈感的主動收集就是一個通過關鍵詞搜索,然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實就是我們能不能用好搜索。不同的搜索方法、渠道、關鍵詞極大的影響著我們獲取到的信息的質量,這也是本篇文章為何一搜索核心展開的原因。

           

          如下圖所示,同樣的關鍵詞在不同的搜索渠道,得到的內容質量是不一樣的。

           

           

          四、靈感庫建立的第一步:搜什么?

           


          互聯網很大,如果沒有明確的目標,找靈感的過程就跟刷抖音一樣,恍恍惚惚幾個小時,好像點了不少贊,收藏了不少干貨,回頭看其實并沒有什么特別有價值的東西,所以找靈感要有目標,有KPI才行,有目標就有標準,有標準才有方向和效率。



          如上圖所示,我對數據可視化這個行業術語做了分析和拆解,這樣做的目的是為之后搜索關鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關內容時,思路總是局限在“可視化”這個關鍵詞上,但是直接使用這個關鍵詞搜索,大多數時候并不能找到我們心里預期的結果,或者搜索多次后,看到的都是之前見過的作品,很難突破邊界,獲取更多新的靈感。造成的這個結果的原因顯而易見,就是關鍵詞的匱乏,不知道搜什么。而對“大屏數據可視化”進行解析之發現,以往的搜索,我們只使用了四個方向里的其中一個,其它三個方向并沒有很好的利用?,F在,我們以每個方向上的核心關鍵詞為基礎,去豐富它的下一級關鍵詞,這樣就會像枝椏新生一樣,在各個節點延伸出豐富的詞匯。



          媒介就是數據可視化設計最終落地在什么平臺,一般來講,大屏數據可視化設計落地的媒介當然就是大屏了,以它為核心做關鍵詞的發散,可以產生其它幾個二級關鍵詞


          數據類型是主要數據的特征或來源,不同的數據類型,在可視化設計時有不同的視覺特征。比如地理信息的數據可視化,一般會與道路、河流、人造建筑、某區域內地標等一起出現,會有豐富的3D場景、動效,而圖表信息相對較少;報表類信息的數據可視化,則主要以更好的展示報表內大量數據為主,所以強調信息的層級、主次,設計的目標是要減少用戶認知負擔、引起用戶閱讀興趣,促進數據內容的有效傳達,因而會較少使用動畫,其次,因數據較多,也很難對應到某個具體的物理場景,故3D模型等也較少使用。

           

          所以以數據類型為核心,拓展的二級關鍵詞會讓搜索結果更精準,更有針對性。


          設計風格就是視覺設計整體上給人的想象和感受,好的設計就跟一個人一樣,一定是有自己鮮明的個性和氣質,能夠引起人的共鳴和向往的,唯有如此,設計才能吸引人,從而影響人,并最終傳遞自己的觀點給觀者。所以設計風格的定義是視覺設計中最重要的一環,也是最需要靈感和創造力的部分。

           

          作為數據可視化設計師,我們想要找到的參考是那些具有數據可視化風格的作品,但這些作品本身并不一定是在講數據可視化的內容,只要作品某部分的設計有我們想要的那種“感覺”,就可以了,而這個作品可能是某段影片、某個動效、某種圖形、某個元素或聲音?;谶@樣的思路,我歸納了一些具有數據可視化風格但不一定都是數據可視化作品的關鍵詞。這就是一個特別有意思的點,我門想要找到某個內容,但當我們用最貼切它的那個名字去找時,卻不一定能找到最能代表它風格的作品。所以當我們跳出數據可視化這樣一個具體的點,而從更抽象的設計風格這個層面去看待它的時候,就能更好的的發散思維、拿到了更多好的關鍵詞,找到更多的刺激點。



          以設計風格為例,我們從它的節點上找到任意一個關鍵詞:SCI-FI,然后搜索這個關鍵詞,我們看看搜索到的結果。

           


          業務場景簡單理解就是在什么情況下要解決什么問題,它是數據可視化的落腳點,也是數據可視化的商業價值所在。每個公司或團隊,都會有自己專注的業務方向,所以在工作中找這方面的靈感,從業務場景入手效果最好。



          簡單回顧下,通過上部分文章的分析,我們從媒介、數據類型、設計風格、業務場景四個方面形成了一個數據可視化的關鍵詞的矩陣。這個矩陣是建立靈感庫的基礎,之后我們每當我們有新的關鍵詞要加入,或者有效果不好的關鍵詞需要剔除,只需修改、迭代這個關鍵詞矩陣即可。有了這個關鍵詞矩陣后,我們如何利用它完成一次基于實際需求的靈感搜集?下面給大家舉個小栗子來看一下怎么用。

           

          一句話描述業務需求

          首先用盡可能簡短的一句話描述業務方訴求。

          一句話描述業務訴求后,我們把業務需求帶到關鍵詞矩陣中,就會獲得如下圖的結果:

           

          可以看到,帶入需求后,按樹狀結構去匹配與需求相吻合的關鍵詞,就可拿到明確的搜索指引目錄,然后我們按搜索指引,開始靈感收集即可。

           

          這里有個小小的點,就是為什么要盡可能用簡短的一句話來描述業務方訴求,

           

          1、這樣做可以把那些優先級低的干擾因素都過濾掉,留下真正核心的訴求,越是能簡短的概括,越能真正把握需求的核心。我個人一直以來與業務方溝通需求后,都會嘗試用一句話概括,若需求方認可,開始設計工作;不認可,則繼續溝通。

           

          2、對于數據可視化設計師來講,明確自己在工作流中的角色、承擔的責任、要解決的問題以及最終交付怎樣的產出尤為重要,因為只有清楚了這些,這樣我們才能有效分配自己的時間、確定跟上下游的協作策略,避免盲目的沒有KPI的設計。

           

           

          五、靈感庫建立的第二步:去哪兒搜?


          合適的關鍵詞是第一步,它保證了我們搜索結果的有效性,而去哪兒搜決定了我們搜索結果的質量。如下圖,針對數據可視化設計師,我對“去哪兒搜”這個問題按我自己的從業經驗做了梳理。

           

          從我的歸納里大家可以發現,我把數據可視化設計師的靈感來源分為了四大塊(其它行業的設計也大體上就這四塊),分別是:設計網站、產品或服務提供方、獨立設計師或工作室、視頻網站。

           

          第一部分:設計網站

           

          設計網站部分列出的都是設計師們都熟悉的幾個站點,在之前,大多數靈感的收集都可在花瓣完成,但花瓣最近幾次改版之后,已經沒有以前那么好用了。對數據可視化方面的素材搜索,個人經驗下,強烈推薦大家去behance,雖然behance訪問方面也面臨一些困難,但是,但凡你想真的了解一些好的設計,這個網站,是你一定要想辦法去經常逛逛的。至于為啥不推薦其它幾個網站,倒并不是說其它網站不能用,只是搜索的結果相對局限。針對這塊的具體分析,我會在文末的Q&A里進行。

           

           

          第二部分:產品或服務提供方

           

          我們知道,任何商業設計,一定是有一個業務或應用場景來支撐的,一定程度上設計就是在圍繞業務場景提供視覺、交互、用戶體驗、品牌等方面的解決方案,也就是說設計是服務于業務場景的,反過來講,服務于這個業務場景的就只有設計師么?當然不是。在市場條件下,服務的提供方除了像設計師這樣的個體外,更多的是我們熟悉的另一個機構(組織),這個組織的名字叫“公司”。公司把大量專業的人員組織在一起,通過優勢互補、強力協作,提供服務、解決需求方問題。對于數據可視化設計來講,企業當然也參與其中。所以我們找靈感去服務提供方也是一個的方法。企業要證明自己的實力、要讓潛在客戶了解自己,必然會花大量的資源做營銷做推廣,而最常見的推廣的落腳點就是企業官網。很多做數據可視化的公司,會在官網展示一些能體現自己業務特點、業務實力的案例,而這些案例就是這些企業最好的數據可視化設計作品了,沒有人會在自己的臉上放垃圾上去,對不? 所以但凡有案例展示的官網,案列基本都是最典型最好的設計,所以從這些案例中找靈感,也是一個有意思且有效的方法和途徑。

           

          阿里DataV


          Hightopo



           Tob.Design



          第三部分:獨立設計師或工作室

          獨立設計師一般給人的感覺是什么呢?就是在自己垂直的領域內牛逼,近乎神一樣的存在。獨立設計師要能順利“獨立”,當然是在設計能力、個人品牌建設、客戶維護、運營管理等方面都有比較硬核的水準,所以這部分設計師作品一般不會差。而工作室一般都是一個或者幾個知名設計師組成的團隊,在管理方面更“公司化”一些,這樣的工作產出也會比較穩定,水平較高。就可視化(包括類可視化)領域來講,個人比較認可和喜歡的工作室有以下幾個(歡迎大家評論里補充,或參與文末問卷調查),Ta們的作品風格鮮明,找靈感也是不錯的參考

           

          dennisschafer



          huds+guis


          以上對于“去哪兒搜”的分析,我相信可以給大家很好的啟發:我們設計師尋找好的作品并不一定要通過設計相關網站進行,你看大家都能看到的東西,即使有突破,那也是大家所熟悉的樣子,你只有從圈子里跳出去,看80%的人看不到的東西,你的靈感才有機會與眾不同,標新立異。



           

           

          六、靈感庫建立的第三步:怎么搜?


          前面兩部分,我們介紹了搜什么(關鍵詞的定義),去哪兒搜(合適的素材來源),接下來以behance為例跟大家聊聊怎么搜,介紹一些具體的方法。我們的目標是盡可能少的點擊搜索按鈕,且盡可能多的找到符合自己預期的有質量的作品。要做到這點,首先我改掉自己以往的不好的搜索習慣。

           

          我知道我很多小伙伴都是輸入一個關鍵詞,然后看結果頁,沒有滿意的就換一個關鍵詞繼續,這樣做很低效,容易漏掉結果頁中符合你預期的好作品,并且也容易造成關鍵詞的浪費,通過第一部分關鍵詞矩陣的介紹,大家都知道,關鍵詞是被定位推導而來的,若不停的換關鍵詞,很快就會出現關鍵詞用完了但是依然沒有找到好靈感的囧局,所以榨干每一個關鍵詞是搜索的重要手段,具體怎么做到這一點,我個人有以下思路給大家參考:

           

          1、直搜關鍵詞:快速瀏覽、標記自己感興趣的項目,稍后再做整理


          通過這個結果頁面我們看到,搜索結果包含“所有結果、項目、人物、情緒板”四個選項,默認顯示所有結果,但這個意義不大,重點在項目跟情緒板。

           

          項目

          切換到項目標簽,項目標簽下展示的都是完整的項目作品,這是可以快速瀏覽,看到感興趣的內容就把它標記到新的頁面,等所有瀏覽查看結束后再細看每個項目,并對項目做進一步的分類和整理。

           

          項目標簽下提供的篩選項很實用,分類依據推薦“好評最多+本月”的組合,以月為單位既可選到大家都比較認可的新作品也避免了因數據波動造成部分作品質量差的情況?!耙巡哒埂鳖愃普究峄騏I中國的首頁推薦,是被官方編輯認可和推薦的作品,一般都會有很高的質量,但時間上可能會比較舊。


           

          在篩選器里面,有另一個比較實用的功能叫做“按色彩篩選”,如果客戶或者業務方對主色調有要求,就可以通過色彩的篩選,找到更符合我們業務需求的相關作品借鑒,或者設計師自己對某類顏色的搭配總是調整不好,也可以通過篩選,看看其它同行是如何處理這類色彩的,這也是一個有針對性訓練和學習的方法。


           

          情緒版

          情緒版就是花瓣里的畫板,它是其Ta設計師采集的同類主題的作品合集,用法也跟花瓣一模一樣,唯一的不同是花瓣可以采集站外的內容到畫板,而behance只能采集站內的內容,其余兩者完全一致。

           

           

          情緒版默認是按時間的先后順序排列的,所以可以通過篩選項,將排列順序調整為“關注人數最多”,正常來講,關注人數越多的情緒版收集的作品質量也越高。

           

           

          2、利用作品標簽聚合同一主題作品,并集中瀏覽

          我們知道,像站酷、UI中國等平臺,用戶上傳作品時,都需要給作品添加一些標簽,這些標簽的作用就是幫助網站做人工的作品分類,我們點擊某一標簽就能看到使用了同一標簽的所有作品,可以說標簽是比搜索關鍵詞的內容檢索手段。每一個作品下,都顯示了作者上傳作品時填寫的標簽,通過點擊這些標簽我們將搜索結果引入到了另一個更純粹有效的內容領域。

           

          更有趣的是,標簽同樣支持項目、情緒版這兩個層面的進一步分類,同時也支持之前介紹過得分類篩選功能。也就是說,在最開始搜索時找準一個關鍵詞,之后通過情緒板、作品標簽等方式就能關聯起來海量的內容。

           


          3、按圖索驥:Ta推薦的作品

          通過前兩步,我們已找到了一些比較不錯的作品,而優秀作品的背后當然是優秀的設計師或團隊。所以點進作者的主頁看,一般都會有驚喜的。除了能看到作者自己的作品外,我想說的是另一個標簽“好評”,好評這個標簽其實體現了作者的審美和職業方向,如果作者本人在領域內已經足夠專業,那么能被Ta欣賞和點贊的作品大概率也不會差,所以好評這個按鈕,是借助行業大咖的手幫我們做了一次作品的篩選和收集,點這個標簽進去大多數時候是不會讓你失望的,一般都驚喜滿滿。


          4、Ta關注的設計師:順藤摸瓜,串起一個行業的大咖

          在今天,每個設計師離自己領域里最頂尖的大咖,只隔著3.75個人,通過點擊作者的“正在關注”,你可以看到設計師本人還關注了行業里的哪些設計師,通過這樣的操作3到4次,你會發現總有那么幾個人,會在這個略顯復雜的網絡中被不同的大咖同時關注,那么Ta就是這個行業里比較頂尖的人才了。

           

          在“正在關注”下面會顯示作者所在團隊,因為好多項目其實一個人是很難完成的,大都是好幾個設計師協作的結果,所以如果你找到的這個設計師作品足夠牛逼,那說明他的團隊也是很不錯的,順便關注一波就好。

           

          當你習慣這樣摸瓜,一段時間后這個行業里幾乎的大咖就都在你的關注列表里了,做到這一步后你就會有一個新的收獲,這點我們后面再聊。


           


          七、搜索結果的整理與優化


          利用前面的搜索方式,我們已經找到了不少較為滿意的作品,接下來我們需要再對這些作品做簡單的篩選整理,把真正符合我們需求的作品整理出來。

           

          我習慣用網站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網站的情緒板我把它看作是一個各個終端通用的網盤。behance提供了兩個收藏作品的功能:點贊與保存到情緒版。站酷跟ui中國也有同樣的功能。

           

          點贊的作品,會統一收集到個人主頁“點贊”標簽下,所有作品按時間排列,比較亂,所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板,由于情緒板是可以分享和被搜索的,所以使用情緒板整理靈感,不僅方便了自己,也益于同行。目前來看,情緒板在behance這個產品中已經跟花瓣中的畫板非常像了,不僅可以采集一個完整的作品到情緒板,也可以采集作品中某個單獨的圖片或視頻到情緒板,這樣的靈活性跟花瓣完全一致,且behance將情緒板被放到了用戶非常容易觸達的位置,所以在大家的共同努力下,各類情緒板會越來越豐富,這個功能也會更有價值。



          八、資源的自我更新與迭代


          資源的自我更新

          經常玩抖音的小伙伴都知道,抖音會根據你的點贊、瀏覽等行為,為你推薦符合個人口味的視頻,而這樣的推薦功能在behance也有,behance會根據你點贊收藏的作品、你關注的人,給你推薦相應作品,并且推薦作品是直接顯示在首頁的,每次打開behance,你都會在網站最直觀的位置看到behance為你推薦的內容,這里的內容大體上分為兩類,一類是你關注的設計師的作品更新,另一部分基于已經關注的作者推薦相似的作品給你,就我個人使用體驗來講,推薦還是相當準確的。

           

          behance的推薦功能是資源自我更新的一個重要手段,你關注的同一領域作者越多,收藏的作品越多,它的推薦就越準確,這樣就節省了一些資源搜索的時間成本。要想獲得好的推薦結果,我建議你的behance上只關注一個領域的作者和作品,以我自己為例,我只關注數據可視化方向的作者和作品,雖然我也喜歡攝影、插畫等,但我主業是數據可視化,所以為了提高首頁推薦作品質量,其它兩類我會去500px等更垂直的網站瀏覽,而不會在behance上關注。當然,網站只是個工具,你也可以有自己的用法,與我而言,我關注的核心是效率。

           


          資源的迭代

          如果把我們收藏的內容比作是云盤里的資源,那么資源并不是越多越好,無論哪種類型的內容,當內容很多的時候找起來都會比較麻煩的。我們需要堅持做一些工作來不斷減少資源的數量提高資源的質量,少而精是最好的狀態,如此我們就不需要花很多時間去找某個內容,而已有的內容又都能很好的滿足需求。要做到這點,我們需要給資源做迭代,所謂迭代就是去掉舊的過時的內容,添加新的更好的。每隔一段時間,回來翻一翻自己之前收藏的作品,會發現有些作品自己已經看不上了,因為在做靈感收集的過程中,我們的審美會自然有所提高,當輸入的作品樣本越來越多,我們對作品評價的維度也會更多,之前那些覺得好的作品,現在看來也就會有缺陷和不滿,這是一個很正向的結果,成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品,添加更符合自己當前審美的作品到各個情緒版。

           

          迭代還意味著我們需要對那些情緒版的標簽做維護,對那些命名跟內容不大匹配的情緒板,要及時更新更恰當的命名。同時,也要對情緒板內容的類別做維護,比如動畫、視頻類素材最好不要跟圖片類素材放一起,因為列表的封面圖并不能體現作品詳情里是否包含視頻等內容,所以作品很多時找起來就比較麻煩,按內容的不同類型把內容分別收納進不同的情緒版可以給我們后續的應用節省不少時間。


           

           

          九、Q&A


          1、behance在國內訪問受限,為何要以它為例做靈感收集的方法介紹?

           

          首先,Behance國內訪問不暢,并不影響它是世界范圍最優秀的設計師聚集平臺的事實。對于數據可視化而言,并不是一個新興的領域,在國外早已有之,并且相對成熟,而國內相關作品、經驗尚少,所以從獲取知識的角度來看,behance上你能獲取到的數據可視化相關作品或內容,不管是數量還是質量上,都要比國內的好。

           

          其次,正如文章剛開始我說的那樣,文中介紹的方法對國內的大部分設計網站同樣適用,尤其是關鍵詞的定義、標簽的使用、收藏及情緒板(畫板)的使用技巧。綜上,我當然是要介紹“更好”的靈感獲取網站給大家,而不是揪著大家熟悉的聊。

           

          2、我自己也收集研究了不少優秀作品,為何做的時候還是不知道如何下手?


          毋庸置疑,優秀的作品建立在良好的審美基礎之上,好的作品看多了審美自然會有提升,但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個問題,一個是刻意練習的度沒到,另一個是不會分析別人好的作品。刻意練習聽名字就知道是什么意思,而作品分析就是我們要知道一個作品之所以讓人眼前一亮,它“亮”在什么地方,就是要具體到細節,我們越是能夠細致的指出那些讓你覺得好的點,就越能模仿和借鑒,之后再輔以大量的刻意練習,才會有效果明顯的提升。那么到底如何去拆解、分析一個數據可視化作品?有幾步?有哪些方面?怎么做?如何應用?這一系列問題留待下篇文章繼續聊。當然了,下篇文章能否順利發出,還是看大家是否喜歡和支持!

           轉自:站酷-BYMD 

          數據可視化設計師如何建立靈感庫?

          資深UI設計者

          與其他相對成熟的設計領域(UI、插畫等)相比,數據可視化尚顯小眾,在一個細分、小眾、不成熟的領域里做設計,「怎么去找靈感」確實是一些小伙伴經常遇到的問題。本文以本人工作經驗為基礎,系統性分析了該問題及對應的解決方法,并將其整理成文與大家分享,這在數據可視化行業內尚屬首次。當然了,本文雖面向數據可視化設計師群體,但其中的方法是通用的,運用在其他設計領域也完全事半功倍。

          本文結構概覽

          本文圍繞「搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新」 五大板塊展開。

          靈感庫建立的基礎

          靈感庫的建立大體上分主動與被動兩種。主動,是我們有意識地收集、整理相關作品素材形成靈感庫的過程;被動,指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因為后者更不可控,影響因素較多,比如你所處的圈子、社交網絡使用習慣等都會影響被動獲取的質量。所以今天,我跟大家分享的主要是第一種主動建立靈感庫的方法,而這個方法的核心我把它歸納為兩個字 :搜索。

          搜索是現在這個時代我們主動獲取信息的最主要手段,每天我們通過各類關鍵詞在各類 APP 上獲取各樣的服務、產品和資源。靈感的主動收集就是一個通過關鍵詞搜索,然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實就是我們能不能用好搜索。不同的搜索方法、渠道、關鍵詞極大地影響著我們獲取到的信息質量,這也是本篇文章為何以搜索核心展開的原因。

          如下圖所示,同樣的關鍵詞在不同的搜索渠道,得到的內容質量是不一樣的。

          靈感庫建立的第一步:搜什么?

          互聯網很大,如果沒有明確的目標,找靈感的過程就跟刷抖音一樣,恍恍惚惚幾個小時,好像點了不少贊,收藏了不少干貨,回頭看其實并沒有什么特別有價值的東西,所以找靈感要有目標,有 KPI 才行,有目標就有標準,有標準才有方向和效率。

          如上圖所示,我對數據可視化這個行業術語做了分析和拆解,這樣做的目的是為之后搜索關鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關內容時,思路總是局限在「可視化」這個關鍵詞上,但是直接使用這個關鍵詞搜索,大多數時候并不能找到我們心理預期的結果,或者搜索多次后,看到的都是之前見過的作品,很難突破邊界,獲取更多新的靈感。造成的這個結果的原因顯而易見,就是關鍵詞的匱乏,不知道搜什么。而對「大屏數據可視化」進行解析之發現,以往的搜索,我們只使用了四個方向里的其中一個,其它三個方向并沒有很好的利用?,F在,我們以每個方向上的核心關鍵詞為基礎,去豐富它的下一級關鍵詞,這樣就會像枝芽新生一樣,在各個節點延伸出豐富的詞匯。

          媒介就是指數據可視化設計最終落地在什么平臺,一般來講,大屏數據可視化設計落地的媒介當然就是大屏了,以它為核心做關鍵詞的發散,可以產生其它幾個二級關鍵詞。

          數據類型是主要數據的特征或來源,不同的數據類型,在可視化設計時有不同的視覺特征。比如地理信息的數據可視化,一般會與道路、河流、人造建筑、某區域內地標等一起出現,會有豐富的 3D 場景、動效,而圖表信息相對較少;報表類信息的數據可視化,則主要以更好地展示報表內大量數據為主,所以強調信息的層級、主次,設計的目標是要減少用戶認知負擔、引起用戶閱讀興趣,促進數據內容的有效傳達,因而會較少使用動畫,其次,因數據較多,也很難對應到某個具體的物理場景,故 3D 模型等也較少使用。

          所以以數據類型為核心,拓展的二級關鍵詞會讓搜索結果更精準,更有針對性。

          設計風格就是視覺設計整體上給人的想象和感受,好的設計就跟一個人一樣,一定是有自己鮮明的個性和氣質,能夠引起人的共鳴和向往,唯有如此,設計才能吸引人,從而影響人,并最終傳遞自己的觀點給觀者。所以設計風格的定義是視覺設計中最重要的一環,也是最需要靈感和創造力的部分。

          作為數據可視化設計師,我們想要找到的參考是那些具有數據可視化風格的作品,但這些作品本身并不一定是在講數據可視化的內容,只要作品某部分的設計有我們想要的那種「感覺」,就可以了,而這個作品可能是某段影片、某個動效、某種圖形、某個元素或聲音。基于這樣的思路,我歸納了一些具有數據可視化風格但不一定都是數據可視化作品的關鍵詞。這就是一個特別有意思的點,我們想要找到某個內容,但當我們用最貼切它的那個名字去找時,卻不一定能找到最能代表它風格的作品。所以當我們跳出數據可視化這樣一個具體的點,而從更抽象的設計風格這個層面去看待它的時候,就能更好地發散思維、拿到了更多好的關鍵詞,找到更多的刺激點。

          以設計風格為例,我們從它的節點上找到任意一個關鍵詞:SCI-FI,然后搜索這個關鍵詞,我們看看搜索到的結果。

          業務場景簡單理解就是在什么情況下要解決什么問題,它是數據可視化的落腳點,也是數據可視化的商業價值所在。每個公司或團隊,都會有自己專注的業務方向,所以在工作中找這方面的靈感,從業務場景入手效果最好。

          簡單回顧下,通過上部分文章的分析,我們從媒介、數據類型、設計風格、業務場景四個方面形成了一個數據可視化的關鍵詞的矩陣。這個矩陣是建立靈感庫的基礎,之后每當我們有新的關鍵詞要加入,或者有效果不好的關鍵詞需要剔除,只需修改、迭代這個關鍵詞矩陣即可。有了這個關鍵詞矩陣后,我們如何利用它完成一次基于實際需求的靈感搜集?下面給大家舉個小例子來看一下怎么用。

          一句話描述業務需求

          首先用盡可能簡短的一句話描述業務方訴求。

          一句話描述業務訴求后,我們把業務需求帶到關鍵詞矩陣中,就會獲得如下圖的結果:

          可以看到,帶入需求后,按樹狀結構去匹配與需求相吻合的關鍵詞,就可拿到明確的搜索指引目錄,然后我們按搜索指引,開始靈感收集即可。

          這里有個小小的點,就是為什么要盡可能用簡短的一句話來描述業務方訴求,

          • 這樣做可以把那些優先級低的干擾因素都過濾掉,留下真正核心的訴求,越是能簡短的概括,越能真正把握需求的核心。我個人一直以來與業務方溝通需求后,都會嘗試用一句話概括,若需求方認可,開始設計工作;不認可,則繼續溝通。
          • 對于數據可視化設計師來講,明確自己在工作流中的角色、承擔的責任、要解決的問題以及最終交付怎樣的產出尤為重要,因為只有清楚了這些,我們才能有效分配自己的時間、確定跟上下游的協作策略,避免盲目地沒有 KPI 的設計。

          靈感庫建立的第二步:去哪兒搜?

          合適的關鍵詞是第一步,它保證了我們搜索結果的有效性,而去哪兒搜決定了我們搜索結果的質量。如下圖,針對數據可視化設計師,我對「去哪兒搜」這個問題按我自己的從業經驗做了梳理。

          從我的歸納里大家可以發現,我把數據可視化設計師的靈感來源分為了四大塊(其它行業的設計也大體上就這四塊),分別是:設計網站、產品或服務提供方、獨立設計師或工作室、視頻網站。

          第一部分:設計網站

          設計網站部分列出的都是設計師們都熟悉的幾個站點,在之前,大多數靈感的收集都可在花瓣完成,但花瓣最近幾次改版之后,已經沒有以前那么好用了。對數據可視化方面的素材搜索,個人經驗上,強烈推薦大家去 behance,雖然 behance 訪問方面也面臨一些困難,但是,但凡你想真的了解一些好的設計,這個網站,是你一定要想辦法去經常逛逛的。至于為啥不推薦其它幾個網站,倒并不是說其它網站不能用,只是搜索的結果相對局限。針對這塊的具體分析,我會在文末的 Q&A 里進行。

          第二部分:產品或服務提供方

          我們知道,任何商業設計,一定是有一個業務或應用場景來支撐的,一定程度上設計就是在圍繞業務場景提供視覺、交互、用戶體驗、品牌等方面的解決方案,也就是說設計是服務于業務場景的,反過來講,服務于這個業務場景的就只有設計師么?當然不是。在市場條件下,服務的提供方除了像設計師這樣的個體外,更多的是我們熟悉的另一個機構(組織),這個組織的名字叫「公司」。公司把大量專業的人員組織在一起,通過優勢互補、強力協作,提供服務、解決需求方問題。對于數據可視化設計來講,企業當然也參與其中。所以我們找靈感去服務提供方也是一個的方法。企業要證明自己的實力、要讓潛在客戶了解自己,必然會花大量的資源做營銷做推廣,而最常見的推廣的落腳點就是企業官網。很多做數據可視化的公司,會在官網展示一些能體現自己業務特點、業務實力的案例,而這些案例就是這些企業最好的數據可視化設計作品了,沒有人會在自己的臉上放垃圾上去,對不? 所以但凡有案例展示的官網,案例基本都是最典型最好的設計,所以從這些案例中找靈感,也是一個有意思且有效的方法和途徑。

          △ 阿里DataV

          △ Hightopo

          △ Tob.Design

          第三部分:獨立設計師或工作室

          獨立設計師一般給人的感覺是什么呢?就是在自己垂直的領域內牛逼,近乎神一樣的存在。獨立設計師要能順利「獨立」,當然是在設計能力、個人品牌建設、客戶維護、運營管理等方面都有比較硬核的水準,所以這部分設計師作品一般不會差。而工作室一般都是一個或者幾個知名設計師組成的團隊,在管理方面更「公司化」一些,這樣的工作產出也會比較穩定,水平較高。就可視化(包括類可視化)領域來講,個人比較認可和喜歡的工作室有以下幾個(歡迎大家評論里補充,或參與文末問卷調查),Ta 們的作品風格鮮明,找靈感也是不錯的參考

          △ dennisschafer

          △ huds+guis

          以上對于「去哪兒搜」的分析,我相信可以給大家很好的啟發:我們設計師尋找好的作品并不一定要通過設計相關網站進行,你看大家都能看到的東西,即使有突破,那也是大家所熟悉的樣子,你只有從圈子里跳出去,看 80% 的人看不到的東西,你的靈感才有機會與眾不同,標新立異。

          靈感庫建立的第三步:怎么搜?

          前面兩部分,我們介紹了搜什么(關鍵詞的定義),去哪兒搜(合適的素材來源),接下來以 behance 為例跟大家聊聊怎么搜,介紹一些具體的方法。我們的目標是盡可能少的點擊搜索按鈕,且盡可能多的找到符合自己預期的有質量的作品。要做到這點,首先我改掉自己以往的不好的搜索習慣。

          我知道很多小伙伴都是輸入一個關鍵詞,然后看結果頁,沒有滿意的就換一個關鍵詞繼續,這樣做很低效,容易漏掉結果頁中符合你預期的好作品,并且也容易造成關鍵詞的浪費,通過第一部分關鍵詞矩陣的介紹,大家都知道,關鍵詞是被定位推導而來的,若不停的換關鍵詞,很快就會出現關鍵詞用完了但是依然沒有找到好靈感的囧局,所以榨干每一個關鍵詞是搜索的重要手段,具體怎么做到這一點,我個人有以下思路給大家參考:

          1. 直搜關鍵詞

          快速瀏覽、標記自己感興趣的項目,稍后再做整理

          通過這個結果頁面我們看到,搜索結果包含「所有結果、項目、人物、情緒板」四個選項,默認顯示所有結果,但這個意義不大,重點在項目跟情緒板。

          項目

          切換到項目標簽,項目標簽下展示的都是完整的項目作品,這是可以快速瀏覽,看到感興趣的內容就把它標記到新的頁面,等所有瀏覽查看結束后再細看每個項目,并對項目做進一步的分類和整理。

          項目標簽下提供的篩選項很實用,分類依據推薦「好評最多+本月」的組合,以月為單位既可選到大家都比較認可的新作品也避免了因數據波動造成部分作品質量差的情況?!敢巡哒埂诡愃普究峄?UI 中國的首頁推薦,是被官方編輯認可和推薦的作品,一般都會有很高的質量,但時間上可能會比較久遠。

          在篩選器里面,有另一個比較實用的功能叫做「按色彩篩選」,如果客戶或者業務方對主色調有要求,就可以通過色彩的篩選,找到更符合我們業務需求的相關作品借鑒,或者設計師自己對某類顏色的搭配總是調整不好,也可以通過篩選,看看其它同行是如何處理這類色彩的,這也是一個有針對性訓練和學習的方法。

          情緒版

          情緒版就是花瓣里的畫板,它是其 Ta 設計師采集的同類主題的作品合集,用法也跟花瓣一模一樣,唯一的不同是花瓣可以采集站外的內容到畫板,而behance 只能采集站內的內容,其余兩者完全一致。

          情緒版默認是按時間的先后順序排列,所以可以通過篩選項,將排列順序調整為「關注人數最多」,正常來講,關注人數越多的情緒版收集的作品質量也越高。

          2. 利用作品標簽聚合同一主題作品,并集中瀏覽

          我們知道,像站酷、UI 中國等平臺,用戶上傳作品時,都需要給作品添加一些標簽,這些標簽的作用就是幫助網站做人工的作品分類,我們點擊某一標簽就能看到使用了同一標簽的所有作品,可以說標簽是比搜索關鍵詞的內容檢索手段。每一個作品下,都顯示了作者上傳作品時填寫的標簽,通過點擊這些標簽我們將搜索結果引入到了另一個更純粹有效的內容領域。

          更有趣的是,標簽同樣支持項目、情緒版這兩個層面的進一步分類,同時也支持之前介紹過得分類篩選功能。也就是說,在最開始搜索時找準一個關鍵詞,之后通過情緒板、作品標簽等方式就能關聯起來海量的內容。

          3. 按圖索驥:Ta推薦的作品

          通過前兩步,我們已找到了一些比較不錯的作品,而優秀作品的背后當然是優秀的設計師或團隊。所以點進作者的主頁看,一般都會有驚喜的。除了能看到作者自己的作品外,我想說的是另一個標簽「好評」,好評這個標簽其實體現了作者的審美和職業方向,如果作者本人在領域內已經足夠專業,那么能被 Ta 欣賞和點贊的作品大概率也不會差,所以好評這個按鈕,是借助行業大咖的手幫我們做了一次作品的篩選和收集,點這個標簽進去大多數時候是不會讓你失望的,一般都驚喜滿滿。

          4. Ta關注的設計師:順藤摸瓜,串起一個行業的大咖

          在今天,每個設計師離自己領域里最頂尖的大咖,只隔著 3.75 個人,通過點擊作者的「正在關注」,你可以看到設計師本人還關注了行業里的哪些設計師,通過這樣的操作 3 到 4 次,你會發現總有那么幾個人,會在這個略顯復雜的網絡中被不同的大咖同時關注,那么 Ta 就是這個行業里比較頂尖的人才了。

          在「正在關注」下面會顯示作者所在團隊,因為好多項目其實一個人是很難完成的,大都是好幾個設計師協作的結果,所以如果你找到的這個設計師作品足夠牛逼,那說明他的團隊也是很不錯的,順便關注一波就好。

          當你習慣這樣摸瓜,一段時間后這個行業里幾乎的大咖就都在你的關注列表里了,做到這一步后你就會有一個新的收獲,這點我們后面再聊。

          搜索結果的整理與優化

          利用前面的搜索方式,我們已經找到了不少較為滿意的作品,接下來我們需要再對這些作品做簡單的篩選整理,把真正符合我們需求的作品整理出來。

          我習慣用網站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網站的情緒板我把它看作是一個各個終端通用的網盤。behance 提供了兩個收藏作品的功能:點贊與保存到情緒版。站酷跟 ui 中國也有同樣的功能。

          點贊的作品,會統一收集到個人主頁「點贊」標簽下,所有作品按時間排列,比較亂,所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板,由于情緒板是可以分享和被搜索的,所以使用情緒板整理靈感,不僅方便了自己,也益于同行。目前來看,情緒板在 behance 這個產品中已經跟花瓣中的畫板非常像了,不僅可以采集一個完整的作品到情緒板,也可以采集作品中某個單獨的圖片或視頻到情緒板,這樣的靈活性跟花瓣完全一致,且 behance 將情緒板被放到了用戶非常容易觸達的位置,所以在大家的共同努力下,各類情緒板會越來越豐富,這個功能也會更有價值。

          資源的自我更新與迭代

          1. 資源的自我更新

          經常玩抖音的小伙伴都知道,抖音會根據你的點贊、瀏覽等行為,為你推薦符合個人口味的視頻,而這樣的推薦功能在 behance 也有,behance 會根據你點贊收藏的作品、你關注的人,給你推薦相應作品,并且推薦作品是直接顯示在首頁的,每次打開 behance,你都會在網站最直觀的位置看到 behance 為你推薦的內容,這里的內容大體上分為兩類,一類是你關注的設計師的作品更新,另一部分基于已經關注的作者推薦相似的作品給你,就我個人使用體驗來講,推薦還是相當準確的。

          behance 的推薦功能是資源自我更新的一個重要手段,你關注的同一領域作者越多,收藏的作品越多,它的推薦就越準確,這樣就節省了一些資源搜索的時間成本。要想獲得好的推薦結果,我建議你的 behance 上只關注一個領域的作者和作品,以我自己為例,我只關注數據可視化方向的作者和作品,雖然我也喜歡攝影、插畫等,但我主業是數據可視化,所以為了提高首頁推薦作品質量,其它兩類我會去 500px 等更垂直的網站瀏覽,而不會在 behance 上關注。當然,網站只是個工具,你也可以有自己的用法,于我而言,我關注的核心是效率。

          2. 資源的迭代

          如果把我們收藏的內容比作是云盤里的資源,那么資源并不是越多越好,無論哪種類型的內容,當內容很多的時候找起來都會比較麻煩的。我們需要堅持做一些工作來不斷減少資源的數量提高資源的質量,少而精是最好的狀態,如此我們就不需要花很多時間去找某個內容,而已有的內容又都能很好的滿足需求。要做到這點,我們需要給資源做迭代,所謂迭代就是去掉舊的過時的內容,添加新的更好的。每隔一段時間,回來翻一翻自己之前收藏的作品,會發現有些作品自己已經看不上了,因為在做靈感收集的過程中,我們的審美會自然有所提高,當輸入的作品樣本越來越多,我們對作品評價的維度也會更多,之前那些覺得好的作品,現在看來也就會有缺陷和不滿,這是一個很正向的結果,成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品,添加更符合自己當前審美的作品到各個情緒版。

          迭代還意味著我們需要對那些情緒版的標簽做維護,對那些命名跟內容不大匹配的情緒板,要及時更新更恰當的命名。同時,也要對情緒板內容的類別做維護,比如動畫、視頻類素材最好不要跟圖片類素材放一起,因為列表的封面圖并不能體現作品詳情里是否包含視頻等內容,所以作品很多時找起來就比較麻煩,按內容的不同類型把內容分別收納進不同的情緒版可以給我們后續的應用節省不少時間。

          總結

          1. behance在國內訪問受限,為何要以它為例做靈感收集的方法介紹?

          首先,Behance 國內訪問不暢,并不影響它是世界范圍最優秀的設計師聚集平臺的事實。對于數據可視化而言,并不是一個新興的領域,在國外早已有之,并且相對成熟,而國內相關作品、經驗尚少,所以從獲取知識的角度來看,behance 上你能獲取到的數據可視化相關作品或內容,不管是數量還是質量上,都要比國內的好。

          其次,正如文章剛開始我說的那樣,文中介紹的方法對國內的大部分設計網站同樣適用,尤其是關鍵詞的定義、標簽的使用、收藏及情緒板(畫板)的使用技巧。綜上,我當然是要介紹「更好」的靈感獲取網站給大家,而不是揪著大家熟悉的聊。

          2. 我自己也收集研究了不少優秀作品,為何做的時候還是不知道如何下手?

          毋庸置疑,優秀的作品建立在良好的審美基礎之上,好的作品看多了審美自然會有提升,但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個問題,一個是刻意練習的度沒到,另一個是不會分析別人好的作品??桃饩毩暵犆志椭朗鞘裁匆馑?,而作品分析就是我們要知道一個作品之所以讓人眼前一亮,它「亮」在什么地方,就是要具體到細節,我們越是能夠細致的指出那些讓你覺得好的點,就越能模仿和借鑒,之后再輔以大量的刻意練習,才會有效果明顯的提升。

          文章來源:優設

          如何做好數據可視化設計?

          資深UI設計者

          本文的英文原標題是「10 Rules of Dashboard Design」,其中 Dashboard 如果翻譯成儀表盤的話,總覺得不大容易理解,所以我在這里把它翻譯為數據可視化。數據展示方面的設計,相信大家會經常用到,這篇文章有很多簡單直接,立馬就能用上的干貨,一起來學習吧!

          為什么數據可視化設計非常重要?

          數據可視化的目的是以一種用戶更容易理解的形式呈現復雜信息。

          一個優秀的數據可視化界面包含以下幾個關鍵要素:

          • 清晰:一個好的數據可視化界面一定是能夠清晰的展現用戶所需要的信息。當用戶看到界面內容時,應該能在 5 秒內了解到它的用途,而不是花費至少幾分鐘才能理解各個數據的含義。
          • 有意義: 一個有用的數據可視化界面上的每一條信息都應該是有意義的。這些有意義的信息能準確傳達設計師想要表達的內容。每一條數據的背后,用戶都是可以讀懂的。
          • 一致性:優秀的數據可視化界面,會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局,結構和內容。
          • 簡單: 復雜的界面違背了數據可視化設計的初衷。如果一個信息呈現不夠簡單直接,那么肯定是在設計上出現了問題。

          如何設計一個數據可視化界面?

          數據可視化界面設計最重要的步驟是需要了解目標用戶是誰,能為他們提供什么價值。了解目標受眾的知識背景和理解水平能幫助你做出對他們有價值的設計。

          在了解目標用戶時,有必要了解受眾感興趣的數據類型。

          「專注于用戶的需求,更容易產生他們喜歡使用的結果?!?

          目標用戶級別可能會在一級和另一級之間變化,這是一個挑戰性的點。與其他任何設計項目一樣,可以細分受眾并將信息相應地分為基本內容和高級內容。

          在界面中表示一組信息有多種方法,選擇正確的數據指標是設計數據可視化的另一個關鍵元素。這也與目標用戶的偏好有關,即他們希望看到什么樣的信息。

          「根據需要設計數據可視化界面,為不同的業務使用不同類型的展示方式?!?

          下面是為目標用戶設計數據可視化界面時需要考慮的一些重要規則。

          1. 區分層級

          一個常見的錯誤就是設計師沒有對信息區分層級,所有的內容看起來都一樣重要。

          可以嘗試使用組件的大小和位置來區分數據的層次結構。

          • 通過定義信息層級,讓用戶清楚什么是最重要的
          • 在左上角顯示更重要的信息,沿著對角線方向,信息的重要程度應該依次減弱,右下角的信息重要性最弱
          • 還可以將信息劃分為不同類別,并在不同的視圖中顯示它們

          2. 簡單易懂

          數據可視化的真正目的是用一種更方便理解,更簡單的形式來傳達復雜信息。

          • 不要放一些大多數用戶都難以理解的信息
          • 使用更少的列來顯示信息
          • 刪除冗余內容來減少混亂

          3. 一致性

          使用一致性布局設計的數據可視化界面看起來更好。

          • 為了使界面更容易閱讀,可以在信息組之間使用類似的可視化效果。
          • 把相關的信息放的更近一些
          • 對相關內容進行可視化分組

          4. 臨近原則

          在界面中把相近的信息放在一起可以幫助用戶快速理解。

          • 把相關的信息放的更近一些
          • 不要將相關信息分散在界面上
          • 對相關內容進行可視化分組

          想更深入了解接近原則,看這篇:

          5. 對齊

          可視化組件元素需要在視覺上對齊,并保持視覺平衡。

          • 將可視化組件元素在視覺上進行對齊,可以將界面組織的更好
          • 嘗試將組件元素進行網格布局設計
          • 不對齊的界面會給用戶帶來糟糕的體驗

          6. 留白

          留白是為了讓界面有呼吸感,它使得用戶在使用你的界面時能夠有喘息的空間。

          • 當用戶查看需要的信息時,界面中的留白能夠吸引用戶的目光,提升用戶體驗。
          • 減少留白會使用戶的界面變得混亂
          • 使用留白能對信息進行可視化分組

          △ 留白太少簡直就是在鼓勵你的用戶盡快離開

          7. 顏色

          使用有效的配色方案來吸引用戶的注意力,幫助他們輕松地瀏覽信息。

          • 仔細選擇顏色,目標是使內容易于閱讀
          • 使用大對比度來顯示背景上的視覺元素

          △ 避免使用低對比度和低效的漸變

          8. 字體

          標準字體是可視化界面中的最佳字體,除非有特別的理由,一般不要用其他字體。

          • 使用標準字體,因為它們更容易閱讀和掃描
          • 特別和美術字體可能看起來不錯,但很難理解
          • 避免所有的大寫字母文字,因為它很難閱讀,人類的大腦需要時間來消化它。
          • 使用合適的字體大小和風格,有效地傳達信息

          △ 不要使用影響可讀性的字體

          9. 數字排版

          顯示精度超過要求的數字使它們難以閱讀和理解。

          • 必要時使用整數,因為長數字會使用戶混淆
          • 省去不必要的信息
          • 讓用戶能夠容易地比較簡單的差異細節

          10. 標簽

          使用能夠快速有效地向用戶傳達所需信息的標簽。

          • 避免使用帶旋轉的標簽,因為很難閱讀
          • 盡可能的使用標準的縮寫

          △ 避免旋轉標簽

          總結

          數據可視化旨在節省時間和精力,將復雜和抽象的數據以更簡單的形式表示,目的是以用戶能夠理解的方式將關鍵信息傳達給他們,確保自己理解用戶所需,并給他們需要的信息。

          文章來源:優設

          雙11大屏——情緒的超級機器

          資深UI設計者

          雙11所帶來的巨大能量與共振,需要一塊巨大的屏幕來承載這份共情——這并不是一條統計數據,抑或一張圖表就可以完成的。

          數據大屏的設計有什么不同?

          數據大屏的設計,并非是傳統意義上的設計師或產品經理就能完成的。它需要將藝術家、科學家與企業家的能力集于一身,需要擁有對動態數據的把握能力、對產業經濟與供應鏈的結構方法、對社會議題的捕捉與構造,以及宏觀的視野和細致入微的匠人用心??梢暬尡涞臄祿a生溫度。


          1.雙11為什么需要數據大屏?


          數據大屏是一個凝聚情緒的超級機器。

          數據大屏不講述傳奇,它就是傳奇本身。



          在這塊巨幕上,數據是公開透明的,它的變化在實時的體現著每一筆消費的數字。每個人都能看到,也會被傳遞到全世界每個角落。雙11所帶來的巨大能量與共振,我們需要一塊巨大的屏幕來承載這份共情——這并不是一則新聞播報、一條統計數據,抑或一張圖表就可以完成的。在這樣一個狂歡的日子里,手機、個人電腦、電視機這些面向個人的設備,全都需要融入到這個巨型的超級情緒機器之中。


          2.導演、故事與設計


          從宣傳與商業作戰的角度講,數據大屏需要兼顧故事性和震撼性兩重特點。通過故事腳本與內容框架的設計,讓觀眾層層抽絲撥繭,從表層的情緒,看到內核的戰略。


          1. 內容規劃:故事與腳本設計

          2019數據大屏的內容框架大致分為三個層次。


          情緒層:GMV的節節攀升滿足了媒體不斷推升的情緒高潮。在日益蕭條的國際環境中,中國的經濟仍能屢創新高,每一位在雙11買買買的中國人背后是一種愛國主義與中國信心的體現。


          業務層:阿里的自我表達。阿里經濟體在城市中繼續深化的服務我們的消費者,數據成為城市可持續發展的新資源;而商業操作系統隨著數字經濟時代的到來,開始系統的服務我們的品牌與商家,在新的時代續寫“讓天下沒有難做的生意”。


          戰略層:企業與國家發展同行。阿里的改變,反射了社會關系和社會結構。點擊購物車就能買到全世界的東西,而對于國內市場,精準的人群定位、產業帶的建設都讓拉動內需變成一個大眾都能參與的事情。


          2. 情緒規劃:情緒鏈路與鏡頭設計

          依據數據表現,雙11當天的情緒高潮會集中0點和24點前后。24小時內,情緒的跌宕起伏,媒體向世界專遞著這種情緒?,F場,根據數據和情緒的變化,我們開始導演數據大屏在不同的時間段出現的鏡頭:GMV的彎道超車緊張窒息,晚飯過后是觀看城市夜經濟的最佳時機,還有“買遍全球的購物車”、“小鎮青年”等進20個鏡頭。


          3. 核心理念:新商業文明是中國的彎道超車

          為什么是彎道超車?

          大航海時代是貿易全球化的開端,也是當代中國繼續擴大開放,用一帶一路、進博會等等新模式,承接人類當今世界發展的新格局所在?;ヂ摼W與移動互聯時代的到來,讓中國得以彎道超車占據世界領先地位,而隨之到來的數字經濟時代正式開始了人類歷史上的新商業文明。馬老師說:打造新商業文明的時機已經到來。數字時代是我們面臨的最大機遇,這個新時代最大的風險就是錯失機會。



          我們將這個核心理念融入GMV大屏的設計,正如逍遙子所說的那樣“消費不是商業的終點,通過消費者來提升生產端生產契機,優化生產決策?!睘榇耍覀儗а萘诵律虡I文明的數據大戲:GMV屏中的賽道,3個鏡頭穿越了大航海時代、互聯網時代,數字經濟時代彎道超車的新商業文明,快進了商業文明的發展。

          11.11當天的數據也被融入其中,賽道上奔跑著餓了么、盒馬配送線和菜鳥的物流線,空中飄散的氣泡是實時產生的交易熱力。


          △2019雙11數據大屏-GMV彎道超車&3個視角切換


          3.雙11數據大屏設計概覽


          1. GMV:11剁手鑄就中國信心

          2019年,即使是在國際經濟大環境衰退的今天,阿里的雙11仍舊創造了新的商業奇跡:2684億人民幣的GMV的背后,是中國人為了家庭與自己而歡樂剁手,也是中國消費者面對全球大環境下對中國的強大信心。從2009年的電商大促,到11年后的全球狂歡節,阿里伴隨著中國經濟海洋的形成而不斷掀起巨浪。李克強總理就曾經用雙11的銷售數據,來解答那些對中國經濟感到不解的人們,讓他們瞬間懂得中國經濟是汪洋大海。


          △2019雙11數據大屏-歷年GMV增速


          2. 全球化:買遍全球的購物車

          中國經濟與中國消費者的貢獻,是對全球經濟的貢獻。消費者購物車里藏著美好生活的愿景,打開了世界消費的新空間。天貓國際把來自全球78個國家和地區的品牌和商品帶進中國,滿足消費者的品質消費需求。買遍全球的購物車,更為世界經濟增長貢獻拉動力。越來越多國際品牌青睞中國市場,通過天貓國際滿足中國消費者的需求。


          △2019雙11數據大屏-全球化


          3. 服務夜生活點亮城市夜經濟地圖

          隨著政策的推動,全國經濟進入夜生活消費時代,大量的城市開始準備成為一座座不夜城。在這個新的消費增長領域,新商品、新商機、新消費模式、新空間與新玩法都層出不窮。在未來,理解夜晚的中國,或許比理解白天的中國更為重要。


          △2019雙11數據大屏-杭州經濟體服務網絡


          △2019雙11數據大屏-天貓商超網絡


          △2019雙11數據大屏-杭州城市夜生活


          4. 相信不起眼的改變:小鎮青年與那些你不知道的族群

          14億的中國人口、巨大的地域差異與文化差異意味著,每一種類型的消費人群都是海量的,都擁有現有經濟理論所無法囊括的巨大潛力。小鎮青年、銀發一族、95后作為新消費崛起的代表族群,正悄悄改變著社會的消費結構。通過數據我們清晰看到:族群的喜好千差萬別,數字化的新消費使得商家能針對消費者需求創造新供給。


          △2019雙11數據大屏-新人群,新消費


          5. 品牌榜:千里江山圖

          天貓創造的價值是真正支持品牌的數字化轉型,不僅僅贏得今天的業務,更在于決勝未來。國潮席卷而來,智能商業魅力無限,全球供應鏈在動蕩與智能化中全面轉身。全方位重構產品創新、品牌建設,強化天貓與品牌之間的合作,這便是我們想在雙11這天展現的萬里品牌江山畫卷。


          △2019雙11數據大屏-品牌榜


          4.結束語


          當GMV越來越逼近2684億人民幣時,炸裂感給每個人的沖擊是:中國又誕生了一個新的奇跡!即使在全球經濟放緩的今天,中國人民對于天貓雙11全球狂歡節的熱情絲毫不減。在這背后,是數字經濟時代下的阿里巴巴,向新商業文明邁進了一大步。

          文章來源:站酷

          智能電視UI設計基本原則

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          之前一直在做移動端的 UI 設計,在進入小米后,開始接觸電視端的 UI 設計,目前在負責小米電視商城。經過一個電視端項目后,自己做了一些關于電視 UI 的總結以及設計方法原則。

          電視 UI 算得上是一個偏冷門的界面設計,因為它的交互比較特殊,同時有一些限制,比如交互限制,焦點原則等等。以下就自己的項目經驗為電視 UI 設計原則做一個總結。

          智能電視的特性

          對于現在家庭智能電視而言,技術在不斷的進步,但是其飽和度和對比度有的還是很強,還會遇到大紅碰到大紫的色塊對比。但是信息變得簡約了,都是以 tab 導航為主,下面是幾個卡片信息瀑布流顯示。語音提示很重要,會隨著焦點的移動發出提示聲響,提示用戶電視焦點的移動狀態。

          小米電視商城全新改版,在接到需求后,一定要模擬用戶來體驗一下購物流程還有用電視購物的環境,環境應該是固定的,那就是在家里。電視和手機購物體驗是不一樣的,電視是要用遙控器來控制,所以每一步的操作流程都很珍貴,如果界面跳轉太多,會給用戶一種煩躁的感覺,所以盡量同一層級的信息要在同一界面填寫完畢,避免二次跳轉。

          第二點說的就是焦點問題,焦點不能層次不齊,跳動太大會引起視覺不適。以小米電視商城詳情為例,焦點盡量在同一水平線上,同行的焦點移動,視覺感受上會舒服很多。

          設計尺寸

          智能電視的分辨率和大家平常在 app 看電影的時候差不多,如上圖所示,目前 1080p 最常見,2k 和 4k 基本都是資源類節目。設計尺寸以小米電視為例,通常做 1920*1080 的視覺稿就可以了,開發會適配比 1920*1080 小的電視屏幕,這樣下來,如果小分辨率的電視沒問題了,大的分辨率也就沒問題了。

          我們知道在設計 app 的時候,都有左右間距的控制,移動端一般常見的控制在 28px 或者 32px,電視端因為是大屏設計,所以預留的空間也要大一些,基本左右留出 120px,上面留出 90px 就可以了。一般我設計的時候左右是固定的 120px,上面可以隨設計內容來自定義,90px 或者 100px,都是可以的,只要視覺舒服即可。

          焦點在電視端 UI 設計里顯得尤為重要,因為它就是你的視覺焦點,焦點會隨著遙控器上下左右確認而改變。焦點的設計不能是扁平的,因為那樣不能夠提醒用戶焦點狀態的位置,焦點的設計應該是放大的、夸張的、可以帶邊框,也可以使用投影外發光的方式來設計,確保能夠給用戶足夠的清晰位置。

          焦點放大我這里建議放大 1.1 倍或者 1.2 倍就可以了,再大就顯得過于大了。

          交互設計

          如上圖所示,我在設計焦點的時候,就用了放大+外邊框的形式,這樣焦點移動起來可以讓用戶足夠看到位置所在。電視端的交互也是很簡單的,基本屬于十字交互,即自上而下,從左到右的交互方式。紅色剪頭屬于禁區,所有的電視交互,沒有斜 45 度的交互,這樣是錯誤的。

          大家可以看到,在 app 里,常見的彈窗和浮窗可以壓蓋在可點擊功能上,比如美團的紅包,愛奇藝的一鍵關注,即使是這樣,也不會影響功能的正常使用。但是電視端的設計,如果兩個可點擊功能壓蓋在一起,焦點是無法獲取的,因為它沒法判斷你想要選的那個功能,所以在電視上,一定要將兩個功能分開來布局最為合適。

          露出屏外的內容,和移動端設計是一樣的。如果有多個卡片內容,我們需要將露出屏外的那張卡片做一些邊界化處理,控制好間距,也就是說我們要將一個完整的卡片漏出來一些,讓用戶知道,后面還有內容;反之,用戶可能不知道后面還有內容,就不會按遙控器右鍵查看了。

          電視端 UI 設計忌諱控件隱藏,比如上圖,如果有很多文字的時候,左邊的設計是錯誤的,因為隱藏了 button 按鈕。改為右邊的設計是比較好的,我們可以選擇焦點選中文字給一個彈窗狀態或者其它,將 button 功能位露出來,如果一個界面可選功能位較少,我們設計的時候盡量在第一屏展示。如果實在不行,可以選擇吸底吸邊來設計。

          視覺設計

          顏色的選擇運用是重中之重,因為這個會直接影響到用戶的視覺體驗。因為用戶環境大多數是晚上的時候回去看電視,分開燈和關燈的情況,開燈的情況其實還好。如果關燈,顏色太刺眼的話,飽和度較高的顏色會直接影響到眼睛,這個危害是很大的,而且不一樣顏色的色塊,會增加用戶的視覺負擔,這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。

          電視 UI 設計中,白色謹慎使用。因為白色過多實在是太刺眼了,我們可以選中較為灰一些的接近白色的顏色來代替。

          背景的運用這里也建議使用深色的背景,原因和上述講的一樣,還有一個就是深色背景可以更好地襯托出界面的主要內容。反之如果用淺色的背景,有的卡片如果需求方要求設計成淺色,那么這樣淺色的背景+淺色的卡片疊在一起,主要內容就特別難區分了。

          我們在設計電視端 UI 的時候,要真實的先去體驗一下特殊的場景,電視端每個 tab 是一個頻道,每個頻道的設計風格也是不同的,比如少兒頻道,購物頻道和電影電視劇頻道,設計風格肯定不同,體驗模擬流程可以讓我們更快地了解電視特性。

          字體的選擇默認思源黑體,因為這個字體是開源字體,可以免費使用,沒有版權之分,以上列入的字體是小米電視商城改版的字號,具體的字體和間距可以根據自己的設計需求變化。

          關于字體的選擇,當然你也可以選用其它字體,或者一些特殊字體,好看的字體,但是這樣的話,字體包應該會很大,會影響一些加載速度。

          字體顏色的選擇盡量用白色或者亮色,深色背景上選用白色是最好的,這樣更易于閱讀。

          字體的粗細大小,這里標題建議加粗選擇,其余選擇常規字體就好,避免太粗或者太細的字體。

          更好的智能家居體驗

          電視的設計只是其中的一部分,未來我們的電視可能比現在的體驗更加好,比如會出現實景商城,單一的圖片形式已經不能滿足我們對購物的需求,一些視頻類,動效類的體驗會更加合適。想讓電視擁有好的體驗并不是一件簡單的事情,想必大家已經從諸多「電視盒子」上體驗到了這一點。我們曾經熟悉的電視已經發生改變,而我們適應的手機、平板和電腦和新的電視還有著巨大的差別,我們需要忘掉之前熟悉的模式,未來五年、十年、甚至更久。電視、電燈、冰箱洗衣機等智能家具的體驗,正是我們設計師需要在未來幾年所做的事情,這很重要。

          小米電視商城全新改版是我接觸的第一個電視端 UI 設計項目,第一期的優化還有很多不足,根據項目經驗總結了上面的規范。以上的基本設計規范掌握后,那么做電視 UI 基本問題不大,大的錯誤肯定不會有了,但是每個公司的設計規范肯定也有所差別。電視端的設計是個偏冷門的 UI 設計,多掌握一些另類項目經驗也是設計師必備的技能。

          文章來源:優設網

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合