 今天為大家?guī)淼氖菙祿梢暬瘧迷O計規(guī)范，談談我在設計過程中的一些經驗以及分享。 一、圖表的分類介紹以及應用范圍一提到圖表，大家腦海里浮現的，通常是柱狀圖、餅圖、趨勢圖等等。這是按照圖形等維度對圖表進行分類，經常會導致圖表的誤用。 圖表的作用，是幫助我們更好地看懂數據。選擇什么圖表，需要回答的首要問題是『我有什么數據，需要用圖表做什么』，而不是 『圖表長成什么樣』 。因此我們從數據出發(fā)，從功能角度對圖表進行分類。   二、畫面布局在實戰(zhàn)中的應用在畫面中我們經常會遇到各式各樣的屏幕分辨率，有大屏的LED屏，有平面顯示屏，數字拼接屏等等。那么具體的項目中我們如何去定義這些不同尺寸的屏幕來進行畫面布局呢？ 16:9是指顯示器的寬高比。根據人體工程學研究，發(fā)現人的兩只眼睛的視野范圍是一個長寬比例為16:9的長方形，所以電視顯示器行業(yè)根據這個的黃金比例尺寸來設計產品。   如若有其他分辨率下的屏幕，按照這個規(guī)律的基本布局，盡量使組件呈現16:9比例排布是最好的；超長分辨率下的大屏設計或者拼接很多塊顯示器的大屏可以通過具體業(yè)務內容來展示，按模塊去劃分，功能點明確即可。 此處布局只是我個人覺得比較合適的展示方式，并不代表一定是需要這么排布，還可以有很多的形式去布局。 也可能因為業(yè)務不同，版式也會有調整，不過萬變不離其中，掌握基礎要素，其他分辨率下照樣可以有很多編排形式！  三、硬件常用尺寸以及設備1. Led屏幕1）點間距不同 P3點與點之間的距離是3毫米，P4點與點之間的距離是4毫米。 2）清晰度不同 P后面那個數字越小，代表兩個燈珠之間的距離越小，清晰度越高，相對應，價格也會高，因為每平方的像素點P3比P4多很多，成像效果好。 3）最佳可視距離不同 點間距P3（3mm）的顯示屏，它的最佳可視距離是3.5~10米，點間距P4（4mm）的顯示屏，它的最佳可視距離是5~13.5米。可以根據自己的實際情況，選擇最適合的型號。 2. 拼接屏拼接的每塊小屏一般是16:9的高清屏，設計尺寸可以把上下高度設定為1080px，長度按照拼接屏的數量比例得出長度的設計尺寸。 例如3乘5的一塊大屏幕，高度3塊屏設為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長度，640乘5塊屏＝3200最后得出設計稿尺寸就是：高1080px乘寬3200px（在這里感謝我的數學老師）。 現在企業(yè)常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴。 另外大屏設計還有一個比較重要的問題就是注意拼接屏之間的縫隙，設計時千萬不能跨屏設計，不然很影響美觀。 3. 控制端目前企業(yè)用的最多的控制端為ipad控制，需要在ipad上制作出控制端頁面，一般尺寸為2048*1536，控制端大多數為按鈕操作，頁面盡量簡單明了。 四、字體字號以及畫面配色6311. 字體字號在數據可視化設計中,一般選中的字體有如下幾種:
正常1080P情況下，由于甲方大多數為政府機構，文字要求會比一般的要求大一點，一般都是選擇最小16px。字號不是固定的，人是活的，規(guī)范是由人制定的，切勿迷信規(guī)范。  2. 配色法則以及顏色選用運用配色631法則，將配色定義為主色60%，輔助色30%，對比色10%去貫穿整套界面。文字的顏色通過重要、普通、次要去分配，是帶有色彩傾向豐富頁面視覺。 在數據可視化設計中，由于大屏是偏暗的，所以需要選擇高飽和度的色彩，并且需要選擇統(tǒng)一的顏色，保持畫面協調。 有時候會遇到客戶需要高飽和度的顏色并且多個顏色的時候，在選用時盡量選用飽和度不要太高的顏色，不然畫面會很不協調，也就是所說的晃眼。  在設計過程中盡量選用深色背景作為畫面主背景，這個可以解決大屏因為色差問題，對整體頁面的影響，用戶也比較容易忽略拼縫中的存在的跨屏感。同時深色背景時更容易突出主體，畫面效果更好，更能體現流光、粒子、發(fā)光等酷炫效果。 同時，大屏由于有色差，盡量不要使用漸變色。如若需要使用需要到達現場，根據大屏反饋的色差，現場調整，但還是推薦盡量使用純色。 五、畫面飽滿以及頁面裝飾點線面1. 畫面如何飽滿1）字體的飽滿 將字體處理后，空白面積減少，整體更飽滿了些。  2）文字的飽滿 正常情況下為使閱讀更方便，標題間距給-10%~20%為佳。  通常數字會比漢字小，為使基線對齊，數字與漢字需分開設置字號。  主副標題字號比例過大過小會導致界面不平衡，建議主標題是副標題的1.5倍。 3）關系的飽滿 當A=B時，圖標和文字的關系會混淆，這種情況下要滿足B>A，用間距分層次。 采用黃金分割0.618值。也就是橫向21個小方塊，豎向13個小方塊。此時，最優(yōu)雅的板式是A＞B的間距，1＞2＞3的間距。 4）圖標的飽滿 2. 頁面如何裝飾會更豐富我們在設計的過程中，經常會因為畫面不夠飽滿頁面太空，收到客戶的吐槽。下面就講講如何通過點線面來豐富畫面，使畫面更豐富更有層次感。
在畫面添加裝飾的情況下需要給畫面留足位置。數據可視化大屏本身面積就比較大，合理運用畫面以及拼接屏縫隙添加裝飾線，可以更好的減輕拼縫所帶來的影響。 裝飾線的添加還可以在后期豐富畫面動效，科技感十足。在頁面中添加裝飾線在我看來，非常的有意義，既可以豐富畫面，又可以完善動效，一舉兩得。 在裝飾線添加這一塊，推薦大家多去看看國外的可視化設計，那些幾乎將點線面構成發(fā)揮到了極致。 六、畫面動效以及素材靈感收集1. 動效制作：C4D+AE在很多設計項目中會用到很多酷炫的科技模型，比如汽車、人物、地球模型等等。我們可以運用C4D來進行主視覺建模，再通過AE進行動效輸出。 有的人可能會問在導入數據之后可能由于數據量不大的原因，動態(tài)效果不是很明顯。在這種情況下，咱們可以把不變的數據量，做成AE動效，可以把動效導成json文件直接發(fā)給前端，能很大程度上保障畫面動態(tài)效果。 2. 素材靈感收集1）Behance 在Behance上有很多國外的設計師，他們的數據可視化設計做的都非常漂亮，極具代表性風格。 我們可以通過Behance搜索HUD 即可搜出來一大堆精美的高清原尺寸設計圖，同時可以把這些作品保存到自己情緒版中，非常的方便。 2）Pinterest 從“書簽”這個角度出發(fā)，我們可以發(fā)現其實Pinterest的本質就是一張張精美絕倫的圖片書簽。每一個在Pinterest上的圖片其實都是一個個網頁上所提取濃縮而成的書簽。 Pinterest對圖片的關注是最用心的，去除了其他的各種干擾，Pinterest只注重圖片的呈現。 而且Pinterest有個非常獨特的功能，就是他能夠自動篩選同類型圖片，并且精準度非常高。 本文由 @AYONG_BDR 原創(chuàng)發(fā)布于人人都是產品經理。 題圖來自 Unsplash，基于CC0協議 |
|
|
