Viz teardown | Race to Alaska

VT的第2次，阿拉斯加划船賽（原文鏈接，點這裡）

這個作品有三個頁面，先拆其中一個頁面 ↓

概覽可以看出，有4個圖表，其它部分都是配飾

拆掉它們

咱們側重研究布局，至於圖表做法，以後再研究

弄掉主要視圖，如下是蠻清爽的格局了，一個一個來搞定它們

在繼續拆之前，先來明確一個布局的知識點

我們來創建一個新的儀錶板

分別拖入四種對象

空白

文本

圖片

容器

它們四個對應的位置如下

我們來看看四個不同的對象中，點擊滑鼠右鍵有什麼區別

它們共同的功能是

通過右鍵點擊對象可以擴展選取它們所在的容器

除此之外：

空白：沒有可編輯項目

圖片：更換圖片、鏈接URL

文本：編輯文本、設置格式

容器：容器編輯項

注意，只有文本是可以修改背景顏色的

容器也可以修改背景顏色

所以，在對象上點擊右鍵，可以初步判斷該對象是哪種類型

比如，如下就是一個浮動的圖片

菜單有圖片的編輯項

浮動選項是選中的

第二個特點是：

只有容器的邊框是藍色的

其它對象是灰色的

再進一步做個測試：

在容器中添加幾個對象

文本、空白、文本

此時在中間空白對象上點擊右鍵

注意對比前面提到的，單獨的空白對象，二者的區別：

單獨的空白對象：只有「浮動」一個功能選項

處於容器中的對象：除了「浮動」，還有高度調整選項

這樣，我們回到Viz中，通過如下圖的右鍵信息，可以知道

該空白對象處於一個大的容器中

通過選擇「選擇布局容器」

可以擴大定位它們的容器

通過使用此方法，可以快速的看透全文的布局

這是viz的初始狀態

這是定位各種容器的結果

看到了吧，要構建一個合適的儀錶板，架構的設計也是很重要的

對於快速了解儀錶板的結構，還有一個方法，就是布局工具欄

如下，切換到布局的工具欄

在布局工具欄中，可以看到當前儀錶板視圖的全部元素

如下，就是頁面中的4個浮動的文本框

至於其它的文本對象，是附屬在下面「平鋪」的容器中

這4個浮動的文本對象，對應著如下四處

看完零散的文本對象，來看下邊容器的部署方法

點擊下拉箭頭，展開二級對象，可以看到

二級容器再細分為兩個水平容器

先來研究上邊的這個水平容器，展開箭頭

在2級容器內，又加入3級的垂直容器

別嫌煩，看似複雜，對於後期的對象整理極其重要！

3級容器內部再部署了4個對象

水平

水平

平鋪

空白

對應儀錶板可以看到它們對應的對象是什麼

水平：放置logo，和標題文字

水平：圖片，放置一條分割線

平鋪：文字

空白：空白，用來與下半部分留有間隔

註：第一篇VT里，發現了另一個常用來設置分割線的方法（鏈接）

如下是頂端logo行的結構設計

放置的圖片jpg

中間的標題文字

右端的留白

如下

其它儀錶板位置的結構就不一一介紹了，只要方法掌握，你們自己就可以去探索去學習別人的優秀排版方式了

別再說你不會設計好看的儀錶板了

框架設計

為了捋順思路，重頭來梳理一下儀錶板的設計框架

1 確定上下結構

2 在二級容器中再根據內容細分結構

3 三級容器中再次細分到內容

4 第二行內容，此處為放置水平線

5 第三行，文字

6 第四行為留白

7 下半部分，涉及留白和文字

留白部分空間是留給浮動的4個主要圖表

換個視角看拆解

1 留白是留給這4個圖表

2 這是該viz涉及的全部

3 這是圖片部分

總結

上一篇VT1重點，浮動的布局技巧

這一篇VT2重點，全面的布局的設計思路

等著VT3吧

更新記錄：

2017-8-25 發布

Peace！