1. 程式人生 > >事非宜,勿輕諾;苟輕諾,進退錯。

事非宜,勿輕諾;苟輕諾,進退錯。

設計圖尺寸計算方法
單塊螢幕解析度(一般為1920x1080),根據橫排和豎排數目換算比例,根據主流顯示器解析度1920x1080,得到一個縮放值。將得到的縮放值賦予文件的body的scale屬性,這樣就可以在可視區域最大範圍內看到頁面整體的效果了。當然如果是長寬比過大,則需要以寬獲取縮放值。

大屏設計注意點

  1. 字型
    字型過大或過小都會影響人的視覺,尤其是在大面積文字區。一般大面積的文字區是為了增強識別性,在兼顧整體效果的情況下應減小字號並增大行間距,以免帶來視覺疲勞。

  2. 配色
    一般為暗色背景,藍色系大家用的比較多,統計圖飽和度和明度可以高些,一些線條可以使用高明度低飽和度的熒光色。另外和螢幕顯示也有很大關係,如果顯示器顯示的不夠鮮豔,可以適當提高飽和度。

  3. 佈局
    重點突出,詳略得當。

  4. 觀感
    多屏組裝會產生縫隙,因此應儘量避免使用會受到影響的元素。

  5. 特效
    有時為了追求更炫的效果,會新增一些對比度高的效果,比如在較暗背景下提亮某個點或區域,使整體富有層次感。

  6. 動畫
    主要是為了提升視覺效果,既能提升層次感,又能增強視圖表現力。

  7. 互動
    互動是為了增強使用者體驗。

一般情況下,只需要對設計圖做還原就可以了,但是如果遇到一些比較坑的情況,比如顯示器擴充套件不正確導致頁面被拉伸或壓縮,這時候就需要對此做應變處理。先得到被拉伸/壓縮的比例,對整體檢視做壓縮/拉伸處理,再由其拉伸/壓縮。使用瀏覽器的全屏功能,放棄物理全屏。以犧牲效果來達到效果。記住一點:變形針對檢視的所有元素,區域性變形可能會引起更難接受的效果,最好是針對body使用變形,這樣既能保證效果,又能在顯示器正常的情況下不做修改直接使用。

優點:供應商和開發改動較小,能比較快的解決問題。
缺點:全屏功能成雞肋,且不知道被拉伸比例的情況下只能靠猜和嘗試獲取被拉伸比例的近似值。

資料視覺化的幾種型別

統計資料視覺化:用於對統計資料進行展示、分析。統計資料一般都是以資料庫表的形式提供,常見的統計視覺化類庫有
HighCharts、ECharts、G2、Chart.js 等等,都是用於展示、分析統計資料。
關係資料視覺化:主要表現為節點和邊的關係,比如流程圖、網路圖、UML 圖、力導圖等。常見的關係視覺化類庫有
mxGraph、JointJS、GoJS、G6 等。
地理空間資料視覺化:地理空間通常特指真實的人類生活空間,地理空間資料描述了一個物件在空間中的位置。在移動網際網路時代,移動裝置和感測器的廣泛使用使得每時每刻都產生著海量的地理空間資料。常見類庫如
Leaflet、Turf、Polymaps 等等,最近 Uber 開源的 deck.gl 也屬於此類。 還有時間序列資料視覺化(如
timeline)、文字資料視覺化(如 worldcloud)等等。

Web 的視覺化技術

• SVG:可縮放向量圖形(Scalable Vector
Graphics),是基於可擴充套件標記語言(標準通用標記語言的子集)用於描述二維向量圖形的一種圖形格式。d3.js(Data-Driven
Documents,nvd3.js、dc.js、c3.js) • Canvas 2D:Canvas 通過 JavaScript 來繪製
2D 圖形,通過逐畫素來進行渲染。 • Canvas 3D WebGL:WebGL(Web Graphic Library)是一個
JavaScript API,用於在任何相容的 Web 瀏覽器中渲染 3D 圖形。WebGL 程式由用 JavaScript
編寫的控制程式碼和用 OpenGL 著色語言(GLSL)編寫的著色器程式碼構成,這種語言類似於 C 或 C++,可在 GPU
上執行。three.js基礎繪相簿。