參考工具
可視化工具
圖表插件
大屏數據可視化是以大屏為主要展示載體的數據可視化設計,大屏易於在觀感上給人留下震撼印象,便於營造某些獨特氛圍,打造儀式感。原本看不見的數據可視化後,便能調動人的情緒,引發人的***鳴,傳遞企業文件和價值。
利用面積大可展示信息多的特點,通過關鍵信息大屏***享的方式可方便團隊討論和決策,所以大屏也常用來做數據分析檢測使用。大屏數據可視化目前主要有信息展示、數據分析、監控預警三類。
常見大屏類型包括16:9屏、超寬屏、折疊屏、三面屏、T字屏...
拼接大屏
大屏幾乎都是拼接屏,UI設計時不用考慮屏幕縫隙影響內容的呈現,內容不會丟失,但有可能影響視覺的表現。所以設計時可建立縫隙位置的參考線避免類似情況發生。現在企業常用的無縫隙、1.7mm縫隙、3.5mm縫隙三種拼接大屏,縫隙越小價格越貴。
顯示特點
屏幕尺寸
例如:尺寸(10500mm+24000mm+10500mm)x6000mm,像素點6144x1024,PPI為45。
例如:3x5大屏
屏幕分辨率
為了最優化展示效果,首先需要了解物理大屏長寬比,確定設計稿尺寸,其次需要清楚大屏系統的內在原理:信號源-大屏接收器-播放控制設備。
壹般情況下設計稿的分辨率多為1920x1080,同時需要要理解四個概念:
最佳展示效果
數據墨水比例原則表達的核心思想使簡潔,圖表要簡潔,數據要簡潔。大屏可視化是針對客戶場景,理解數據復雜性的基礎上,通過可視化手段,形成高度提煉的故事。
數據可視化通俗說就是用圖表講故事,人們關心的從來不是數據,數據不是重點,它只是達到目的的手段,人們關心的數據背後的意義。
調研
設計關鍵詞:科技、動態、可交互
關鍵指標是壹些概括性詞語,是對壹組或壹系列數據的統稱。壹般而言壹個指標在大屏上獨占壹塊區域,通過關鍵指標定義,就直到大屏上大概會顯示哪些以及大屏會被分為幾塊。確定關鍵指標後,根據業務需求擬定出各個指標展示的優先級(主、次、輔)。
大屏壹定是以展示數據為核心,任何炫酷表現都要建立在不影響數據的有效展示上。壹個大屏壹定會有明確的主題,推薦實用多維度拆解北極星指標法。
視覺
表現
數據
設計
確定設計稿尺寸後需要對頁面布局和劃分,對於數據的排布劃分原則:主次分明、條理清晰、註意留白。根據業務需求抽取關鍵性的指標,按照重要程度可分為主、次、輔。
布局的目的是為了讓業務指標和數據合理地展現,展現全局業務壹般分為主要指標和次要指標兩個層次,主要指標反映核心業務,次要指標用於進壹步闡述分析。推薦主次分布版式,讓信息壹目了然,也可以實用平均分布,或二者結合。
例如:監控大屏由於監控數量龐大,常常被劃分為總屏和分屏,總屏多用於展示事件狀態趨勢、風險預警、風險處理進度。分屏則多用於展示詳細的數據分析和風險事件的處理。如何排布數據需要緊密結合業務需求和用戶體驗。
大屏排版布局上需要遵循四大原則(CRAP)
可視化大屏的配色是視覺呈現的重要組成要素,配色常與行業類型、業務形態、應用場景、設計理念、營造氛圍等密切相關。
色彩搭配的原則
例如:整體背景深色系,以深藍色為主,推薦為單個元素搭配透明色,透明度設置在10%上下。
例如:
點綴:適當給元素標題、數字添加諸如邊框、圖畫等在內得點綴效果,能幫助提升整體的美觀度。
可視化數據的字體有哪些考慮呢?
規範設計:字體規範、色彩使用、界面元素、圖形圖標、界面全覽
字體不小於12號,可用於圖表標註,數據信息建議14號以上。字體不壹定只用壹種,可實用科技感強的字體。
數據可視化處理的流程是:數據采集-數據清理-數據分析-可視化數據
折線圖用於表示數據的變化和趨勢,坐標軸的不同對折線的變化幅度有很大影響。折線上下大概占2/3的位置數據表現清晰合理。
折線圖線條粗細合理,過細的折線會降低數據表現,過粗的折線會損失折線中的數據波動細節,視覺上較難精確找到折現點的相應數值。推薦使用兩個像素的線,看起來會比較合適。
結婚的時候壹個好的大屏幕可以讓人們身臨其境，大屏幕如何布置呢？妳可以將LED顯示屏放在舞臺的正中央位置,然後兩邊再裝上噴繪板,然後可以放壹些新人的合照,在儀式開始前妳可以循環的播放兩個人的合照,例如婚紗照,在儀式開始的時候可以播放婚禮前拍攝的壹些片段,在視頻當中穿插壹些文字和圖片,最後在婚禮收尾的時候可以播放提前錄制好朋友們對於新人的祝福。
大屏幕設計和APP設計的區別1)功能支持
小程序我們都知道是基於微信的應用程序,開發必須依靠微信給的接口(微信給啥就是啥),能實現的功能被大大的限制了。而且小程序上線也就2年的時候,還有壹些功能不完善。
App依靠於手機系統,可以實現復雜且多的功能,App開發已經有近10年的積累,各類控件比較完善,換句話說就是開發者能力越大,展示效果越豐富。
2)內存體積
小程序代碼提交不能超過規定大小2M,這部分程度上限制了開發的可能性。
App就不同了,沒有這部分的限制,我們更新軟件的時候經常看到幾十兆,幾百兆,甚至遊戲類的幾個G的下載體積。
3)體驗及流暢
小程序的體驗略遜於App,小程序使用時沒有那麽穩定,容易出現錯誤閃退,特別是在壹些功能復雜的應用中,雖然說小程序已經優化了很多,有時仍會出現卡頓感。
2.差異在哪裏?具體表現
1)頂部導航欄
App:可以保留導航欄,也可以去掉,可拓展性強,靈活性高。
小程序:導航欄右側有個無法去除和編輯的膠囊(titlebar),設計時也不能在導航上增加其他功能。所以在App轉小程序時,導航欄的功能要換位置或者在放在導航欄下。
實現效果也略欠缺壹些,例如微信提供原生和自定義的兩種導航欄:
(壹)原生的導航欄支持更改顏色,但字體顏色僅支持黑/白兩種;
(二)雖然自定義的導航欄可以去除原生導航欄,支持圖片通到導航欄上,但是所有頁面都需要重新調整(原先導航欄的高度沒有了,界面元素會跟著上移),而小程序不支持單個頁面修改。
這是目前最麻煩的地方,量級小的應用還可以,量級大的導致工作量大大增加。
同時,自定義導航容易帶來標題無法對齊、頁面機型不同安全區域不同、全局刷新時頁面會被整個下拉等等問題。
建議頁面多、復雜的情況,盡量減少使用自定義導航,也可以使用像馬蜂窩壹樣,導航欄背景和圖片背景銜接,效果也不錯。
2)標簽欄
App:可支持最少2個,最多5個的tab切換,圖標大小以及底部標簽欄高度可自定義。
小程序:也可支持最少2個,最多5個的tab切換,使用原生控件時,要遵從icon尺寸81*81px。
使用自定義標簽欄時,可支持加入交互效果,例如提示數量氣泡等,但是體驗相比原生差壹點,如果標簽頁是首次進入的頁面,那麽標簽欄切換會造成跳動,需要開發做規避。
建議不帶有交互的情況,盡量使用原生控件,就像站酷小程序壹樣。
3)拖動排序
App:流暢、體驗佳,例如發朋友圈時拖動照片排序。
小程序:除非必要,否則不建議使用拖動排序。圖片和列表拖動在Android機型上體驗不夠,會有卡頓的情況。
建議使用上下按鈕替換上下拖動,或者圖片排序使用標記的方式來進行排序。
4)文本省略
App:可實現日常所需的所有文字、段落效果。
小程序:文本限制行數,加省略號,並且增加全文展開方案實現有問題。無法預估到行尾位置省略。
建議通過換行增加全文展開按鈕,或者控制字數,文本末尾增加全文展開。
5)原生組件
App:可以自定義組件庫,對開發設計限制低。
小程序:部分組件是由微信創建的原生組件,有系統相機、輸入框、地圖、文本輸入...等等,原生控件使用有壹定的限制,不能在滾動、輪播、選擇器、拖動區域中使用,層級最高無法被覆蓋,可供修改的參數由微信提供。
建議在設計時以原生控件為基礎修改,不要自造控件。同時註意使用場景,以免無法實現。
6)動畫實現
App:動畫流暢、無卡頓,想要的基本都能實現。
小程序:動畫能力低於H5和App,動畫對性能消耗大,尤其是在Android機型上,卡頓有稍顯明顯。當加載代碼包時,當微信認為這個小程序占用過多的內存,會把此小程序強行退出,以保證微信的正常使用。
建議動畫精簡,盡量做減法設計。
3.總結
由於小程序本身的開發特殊性,在和App設計的會有壹些的不同之處,例如:
1.頁面多、復雜的情況,盡量減少使用自定義導航。
2.不帶有交互的情況,盡量使用原生控件。
3.使用上下按鈕替換上下拖動,或者圖片排序使用標記的方式來進行排序。
4.通過換行增加全文展開按鈕,或者控制字數,文本末尾增加全文展開。
5.在設計時以原生控件為基礎修改,不要自造控件。同時註意使用場景,以免無法實現。
6.動畫精簡,盡量做減法設計。