拆解 • 表格設計 Less is more

clear-off-the-table-gif-clear-off-the-table-48.jpg

clear-off-the-table-gif-clear-off-the-table-49.jpg

上面兩張圖 Before(調整前)跟 After(調整露)差距很大,這邊文章是要回應之前的一篇文章:

表格設計 Less is more 裡面的一個 Gif 檔小影片

這個很棒的 Gif 檔小影片非常的清楚有結構!

教讀者如何移除不必要的表格結構,把複雜、不易觀看的表格調整成好看的圖表。

但是由於小影片的速度太快,於是我把 Gif 檔拆成一張一張的圖片去看,學習專家怎樣製作「簡單易懂」的圖表技巧。(利用這個 Gif 轉 Jpg 服務網站)

我想這些技巧如果學會了,除了幫助 FileMaker 的畫面安排之外,對於一般的表格設計排版,也會有很大的幫助。

大道至簡,讓我們開始移除吧

第 1 步 – 移除表格彩色部分,留下黑白灰

clear-off-the-table-gif-clear-off-the-table-3.jpg

 

第 2 步 – 移除表格直條、橫條格線clear-off-the-table-gif-clear-off-the-table-5.jpg

第 3 步 – 移除表格顏色填滿(包括 Header 跟 Body 部分)

clear-off-the-table-gif-clear-off-the-table-7.jpg

clear-off-the-table-gif-clear-off-the-table-8.jpg第 4 步 – 移除表格外框clear-off-the-table-gif-clear-off-the-table-10.jpg

第 5 步 – 移除標題加粗clear-off-the-table-gif-clear-off-the-table-12.jpg

第 6 步 – 各欄「文字」置左對齊clear-off-the-table-gif-clear-off-the-table-14.jpg

 

clear-off-the-table-gif-clear-off-the-table-15.jpg

clear-off-the-table-gif-clear-off-the-table-16.jpg

第 7 步 – 各欄「數字」置右對齊

clear-off-the-table-gif-clear-off-the-table-18.jpg

clear-off-the-table-gif-clear-off-the-table-19.jpg

clear-off-the-table-gif-clear-off-the-table-20.jpg

第 8 步 – 標題欄文字對齊內容文字(遵循原則:文字置左,數字置右)

clear-off-the-table-gif-clear-off-the-table-22.jpg

clear-off-the-table-gif-clear-off-the-table-23.jpg

第 9 步 – 調整欄寬大小(確保欄位內容之間有足夠空間)

clear-off-the-table-gif-clear-off-the-table-28.jpg

第 10 步 – 加入橫列空白,以區分出不同的資料群組

clear-off-the-table-gif-clear-off-the-table-32.jpg

第 11 步 – 某欄位使用固定的小數位數

clear-off-the-table-gif-clear-off-the-table-34.jpg

第 12 步 – 某欄位四捨五入取整數

clear-off-the-table-gif-clear-off-the-table-36.jpg

第 13 步 – 更進一步,某欄位四捨五入至千位數

clear-off-the-table-gif-clear-off-the-table-38.jpg

 

第 14 步 – 去除重複欄位內容

clear-off-the-table-gif-clear-off-the-table-40.jpg

第 15 步 – 拜託不要再使用 Calibri 字體

clear-off-the-table-gif-clear-off-the-table-42.jpg

第 16 步 – 重新強調內容文字顏色clear-off-the-table-gif-clear-off-the-table-44.jpg

完成了!

Less is more 的觀念可以讓我們的表格更「有效率、「有吸引力」、「有影響力」。

對「拆解 • 表格設計 Less is more」的想法

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s