【海外學習筆記】資訊圖表是如何煉成的(二):圖標與線條

這一系列的文章,我會用三篇文章記錄自己的東北大學的三份作業的修改過程,從不同角度回答「要做好一個信息圖,需要經歷過哪些過程」的問題。
評論
評論

本文轉載自 Medium,INSIDE 獲授權刊登。作者余政彥,生於台灣屏東靠海的小農村,在台北與北京待過幾年後,他決定繼續前往波士頓探索人生。他在一些領域累積過數據處理的經驗,有著六年的經濟學背景,待過經濟研究、公關、記者等領域,目前專注於資料視覺化。

前情提要

我目前就讀於美國東北大學 (Northeastern University) 資訊設計與視覺化 (Information Design and Visualization) 專業。留學前,我學了六年的經濟學,作過經濟研究助理、公關、記者,就是沒學過設計,頂多報了一個 Simon 阿文的網路課程,還有大學的時候很愛做 PPT。這一系列的文章,我會用三篇文章記錄自己的東北大學的三份作業的修改過程,從不同角度回答「要做好一個信息圖,需要經歷過哪些過程」的問題。文章最後,附有其他同學的優秀作品推薦。

前言

本文是第二篇,也是我的第一個作業:三次旅行。會放在第二篇才來介紹,是因為這個作業最讓我頭疼,可能是剛入學還有很多不適應的地方,所以寫作業的過程不是很順利,對最後成品也不是很滿意(這才是重點 ( ఠൠఠ )),因此才放在第二篇。相較於上一篇,這篇文章底部的優秀同學作品比較多,對我而言,每一個都很值得仔細品析,都有很多值得學習的設計概念與技巧。

三次旅行

你是否想過,從你的住處到學校,會經過什麼店面?或者,如何讓別人清楚了解從你現在的住處回到家鄉,你會經歷什麼事情?又或者,讓你規劃一趟旅行,你如何清楚簡明的表達每一段路程?

這三趟旅行,構成了這個作業:我們需要清楚闡述 1 從住處到學校、2 從住處到家鄉、3 從住處到自己想要去的一個景點,這些路程中我們會經歷過什麼、會做什麼、會有什麼感受等等,一趟旅行至少需包含十個資訊。

如果是你,你會怎麼設計這三趟旅行?

第一周:畫草圖

起初,我分別用了三種不同的形式去設計這三趟旅行。

旅行一(從住處到學校),我打算用比較有趣可愛的小人去詮釋我在三個不同時間的上學狀態(慌慌張張趕早八、悠閒走去學校讀書、假日去健身房運動後再去學校讀書):

路程呈現的形式有兩種,直線式與地圖式(展現相對位置)。

旅行二(從住處到美國大峽谷),我使用地圖的方式呈現:

這邊的設計概念是我想要列出兩個不同的路程通往大峽谷,一個會經過很多大城市,另一個會是 Google 推薦的最短路程(原本還想要加上一條最少紅綠燈的路線,因為我很不愛等紅綠燈哈哈哈,但有技術上執行的困難,就作罷)。

旅行三(從住處回到家鄉),我打算呈現圖表式的信息圖,即圖中會包含許多圖標(icon)與數據:

在回我台灣的家之前,我打算去一趟北京找我在那邊的朋友,也因此,我在草稿中想要呈現出美國與中國在一些經濟數據的不同,例如生育率、空氣品質、物價等等。

畫完這三個草圖,我當時深深被自己的創意給折服 (ૢ˃ꌂ˂⁎)just kidding~對這些呈現方式蠻滿意,但殊不知我完全搞錯老師的意思,導致之後花許多時間追老師規定的進度,還因此荒廢其他課程,看了好幾次日出才勉強追上其他同學的進度…下面將解釋我到底搞錯了什麼。

第二週:第一版初稿

這裡我把上週的草稿圖在 AI 中實現。

旅行一(從住處到學校):

這邊簡化了上週草圖的設計,主要呈現了我在不同時間去學校的過程。

旅行二(從住處到美國大峽谷):

這趟旅行我使用觀光客數量、犯罪事件去呈現在其中一條路線。

旅行三(從住處回到家鄉):

這邊跟上週的草圖比較下差異更是巨大,因為原本信息圖表的概念太難執行,所以我就…放棄了。這裡我使用飛機航班數據去呈現我回家一趟所搭乘的航班,在所有航班數據中是如何的渺小。因為當時還不會寫代碼,所以我使用 RAW 這個工具去幫我視覺化數據。

飛機航班數據: http://openflights.org/data.html#airport

RAW: http://raw.densitydesign.org/

從這三張圖可以看出,我花了相當多時間在細部的設計上面,但直到我在這週給老師看過作業後我才知道我完全搞錯老師的要求。老師要我們用一個設計方式去呈現三趟旅行。也就是說,我設計的這三種旅行,只能選一個(上週在聽老師講解時我完全忽略這個重要的訊息)。
在接受這個晴天霹靂的事實後,我趕緊沒日沒夜的去構思新的設計樣式。

第三週:決定視覺化形式

從草圖可以看出,我打算使用原先第一趟旅行的設計方式,簡化旅行的路線,著重在每一趟旅行中我會做什麼事情、會經歷過什麼景點等等。

此外,我用了經濟學中效用(utility)的概念,我想要視覺化我每一趟旅行的效用,讓人可以清楚知道這些旅行帶給我的滿意程度。

(維基小百科:一般而言,效用是指對於消費者通過消費或者享受閒暇等使自己的需求、慾望等得到的滿足的一個度量)

下圖是在當週趕出來的成果,並在上課前幾天給老師看:

圖基本上由兩種線條、三大區塊組成。 兩種線條 :直條與折線。直條的高度代表效用,即我做這件事情給我的滿足程度。折線也代表效用,但折線可以方便不同事情之間效用的比較,不會像直條那樣有事情名稱來干擾直條效用彼此之間的比較。 三大區塊 :由上而下分別是第一趟旅行(從住家到學校)、第二趟旅行(從住家到大峽谷)、第三趟旅行(從住家到家鄉),直條顏色不同代表不同路線或是交通工具。

沒日沒夜、荒廢其他課程而趕製出來的成果老師大致上滿意,除了一些細節需要調整:顏色、排版與時間條。

  • 顏色:老師提到,需要考量到色盲人士對紅綠色無法辨識。
  • 排版:整體排版較擠,每一趟旅行之間需要更多空白的空間。
  • 時間條:需要標示出每一趟旅行的起點與終點。

因為我這週在上課前幾天先給老師看過作業,所以該週上課之前,我還有時間繼續修改:

除了按照老師提到的問題去修改,我還調整了一下細節,例如把時間條變成黑色、在效用這線條上標明起點與終點。

第四周:定稿

這份作業在這周大致結束。這週調整的細節是在時間條上加上箭頭,讓時間的過程更為明顯,可以讓讀者更清楚知道這三趟旅行是從左到右進行。

加上 mockup 後,讓我這個作業的呈現形式更清楚,這份作業並不是要在手機上呈現,而是像海報那樣可以印出來掛在牆上:

在我們完成第一、二份作業後,老師要我們講出我們學到了什麼,他把我們講出來的字寫在黑板上:

我自己很喜歡這種方式,大家把自己學到的東西講出來,藉此回顧自己與其他同學到底學到了什麼、為什麼其他同學可以學到我沒有發現的東西等等。

其他同學作品:

Liuhuaying Yang 楊柳樺櫻

個人網站:spark.go4trees.com

樹(這位同學的暱稱)的作品是把三趟旅行用類似馬力歐的方式呈現,相當有趣。老師很喜歡他用一個小人從水管中跳出的設計方式。我很喜歡這個作品的顏色選用,整體視覺呈現簡潔明瞭。

Divya Srinivasan

個人網站:dvs736.wixsite.com/divyasrinivasan

Divya 的這個作品是我最喜歡的其中之一。我在想,可能 Divya 具有建築的背景,所以他的作品會比較有結構(我亂猜的哈哈哈沒跟他討論過)。我很喜歡他用圓圈去表現這三趟旅行,這也啟發了我第二個作業(上一篇文章)的設計概念。

Maeve Donohue

個人/公司網站:

Founder, Tango RI: http://www.tangori.net/

Co-founder, Buttrfly: http://buttrfly.com/

President, Nami Studios: http://namistudios.com/

Maeve 具有多年的設計經驗,所以他的作品在視覺表現上相較其他同學會更為細緻與成熟。我個人很喜歡他這個作品上面的地圖,用圓圈與顏色去呈現,效果很好。

Navarjun Grewal

個人網站:http://navarjun.com/

Navi 是班上的 Coding 大神,他具有程式語言的背景。但除此之外,他永遠有取之不盡用之不竭的設計想法,他每一個作業都有好幾個版本,他永遠對他的作品不滿意(根據他自己表示)。這個作品還是我第一次看到,之前上課時他的作業還不是長這樣。

Antonio Solano

個人網站:http://www.antonio-solano.com/

這個作品得到了老師的高度評價,也是我個人很喜歡的一個。 Antonio 具有工業設計的背景。這個作業他呈現了他在不同旅行中他的不同感受、他做了不同的事情等等。我很喜歡他色彩的運用,還有用簡化的地圖去呈現他做不同事情時在旅途中的位置。


開發者享受 CI/CD 價值!運用 Amazon EKS 整合 GitLab 創建自動化部署

企業如何在 Amazon EKS(Elastic Kubernetes Services)上使用 GitLab 創建自動化部署,減輕人力負擔,提升專案服務運作效率?
評論
評論

所謂現代化智慧 IT,所有工程師最希望的境界,莫過於只要輕鬆點幾下設定,系統就會自動跑起來,管理者再也不用隨時待命在機台旁邊,從此工作悠哉又快樂!儘管這樣情境還沒到來,但隨著敏捷式開發的流行,除了 DevOps 人員,有越來越多開發者將 CI/CD 概念融入到工作流程當中,例如從 build code、執行 unit test、到部署應用程式。

打造第一個在 AWS 上的應用程式

上述種種反覆步驟自動化執行,也就能提昇服務品質、主動通知開發人員以減輕人力負擔,讓專案服務能持續運作。

其中,GitLab 是執行 CI/CD 常用的工具之一,也是開發者使用程式碼儲存庫的地方。為了讓 GitLab Runner 在雲端快速實踐 CI/CD,《AWS 開發者系列》透過影片分享,如何在 Amazon EKS(Elastic Kubernetes Services)上使用 GitLab 創建自動化部署。

以下節錄工作坊影音內容,幫助開發者快速理解如何運用 Amazon EKS 的高可用性且安全的叢集,將修補、部署節點、更新等關鍵任務,全部做到自動化設定。同時影片也會示範 Amazon EKS 搭配 GitLab 如何展開自動部署,幫助工程團隊實踐 CI/CD 價值。

Amazon EKS 對容器管理輕鬆簡單、維運省時省力

容器化服務越來越興盛,當容器(Container)越來越多,在複雜的微服務(Microservice)系統環境之下,運維團隊的管理成本可能相對會增加不少,為了有效調度容器部署, 導入Kubernetes 無疑是近年企業熱門的話題之一。

建構 Kubernetes Cluster 流主要可區分兩大塊,一是安排容器調度的Control Plane、另一則是容器運行時需要用到的 Worker Node。

Control Plane 裡面涵蓋有儲存狀態的 ETCD、CoController manager 、Scheduler 的調度管理、甚至是操作時進行互動的 APIServer,若是自己創建 的 Kubernetes Cluster ,需要自己安裝這些元件,後續仍需要對 Control Plane 進行相關管理、維護、升級工作。為了減少上述 Components 的繁複維護,在透過 AWS EKS 代管的 Kubernete Control Plane 部可以獲得以下三大好處。

透過 AWS 增加雲端技能 在組織發揮影響力

Amazon EKS 一鍵式部署,展現三大優勢

第一,Amazon EKS代管的 Control Plane實踐了跨AZ的高可用部署,使用者不需要擔心單一節點故障的風險。

第二,Amazon EKS 支持至少四個 Kubernetes版本,持續跟進每季 CNCF 的發佈,同時 EKS 也完全符合上游 CNCF 規範。

第三,部署 Amazon EKS 之後,可直接使用 AWS 平台上現成的服務工具,在安全性管理、網路設定方面,可以做到無縫整合。

最後 AWS 台灣解決方案架構師也提到,若想在容器環境進行 CI/CD 及應用程式的管理,可以進一步透過 IaC 整合部署 Amazon EKS 叢集,透過使用 Console、把 EKS 變成 Cloudformation 的模板、使用 AWS 所開發出來的 eksctl.io、或指令是採用 AWS CDK 可以讓開發者用自身熟悉的語言,在 AWS 平台整合 CI/CD 工具進行維運及部署 EKS。

了解 Amazon EKS 整合 GitLab ,獲得三面向價值

對開發者而言,想把 Amazon EKS 整合到 CI/CD 工具之一的 GitLab 平台上,可以看到那些實際的優勢?

在 DevOps 開發者示範工作坊當中,GitLab 資深解決方案架構師指出,GitLab 使用到 Kubernetes 技術,主要有三種搭配方法,包含 GitLab Server、GitLab Runner、以及創建 Deployment Environment。

本次示範教學會主要聚焦在 GitLab Runner 如何採取 Auto-scaled 方式進行 Build、Test、Package Apps;以及在 Deployment Environment 運用 Kubernetes 技術,做到 Auto Deploy、Review App。

正因為 Amazon EKS 能夠在 DevOps 過程提供所需要的彈性計算資源,幫助開發者在 GitLab 平台上面獲得以下三個層次的優勢:

  • 在 GitLab 內建的部署工作流程當中,自動生成整套 CI/CD 最佳實踐腳本。
  • Review App 過程,從 Merge Request 中可直接訪問應用程式 /App 的 UI 介面,並且根據 Git branch 名稱、專案名稱,自動生成 Review App 的 URL,以及在 Merge 前的最後防線進行 Approval 檢查。
  • 加速 CI/CD 流水線,GitLab Runner 運行時候還可藉由 Amazon EKS Cluster 進行 Auto-scaled 的支援。

Amazon EKS 整合 GitLab ,需要兩大流程

影片最後,GitLab 資深解決方案架構師示範如何把 Amazon EKS 整合至 GitLab 執行 Auto Deploy,主要可分為兩大區塊流程,第一部分聚焦在 Amazon EKS cluster 的設置,第二部分則執行 Auto Deploy 設置。

第一塊可拆分為四個階段,首先教學怎麼創建 EC2 節點的 EKS cluster,第二階段示範把 EKS Cluster 連接到開發者的 GitLab Instance、Group 或 Project,下一步則使用 Cluster Management Project Template 創建一個 Cluster Management Project,以及最後一階段透過 Cluster Management Project 自帶的 Helm Chart,安裝在 Cluster 所需要的內建 App。

第二塊執行 Auto Deploy 設置,針對需要部署的 App 創建一個 GitLab Project,接著再把 gitlab-ci.yml 添加到 Project,並從 Web IDE 選擇及導入 Auto Deploy 的 CI 模版,讓 GitLab 自動生成最佳實踐的整套流水線。

幫助開發者更了解 Amazon EKS 整合 GitLab 的 QA 系列

Q:使用 Amazon EKS 之後,如何更有效率或優化資源去配置 Worker Node 的機器數量,以及如何有效空管開發維運的成本?

A:Kubernetes 除了本身有 HPA(Horizontal Pod Autoscaling)可根據使用程度自動調整資源流量,另外也能延伸使用 AWS Auto Scaling 方案,針對可擴展資源去設定自動擴展管理。另外在成本管控,雖然 Amazon EKS 會收取額外管理費用,但可透過 AWS 平台的 Calculato r計算每個 EKS 的價格,你會發現自動化部署及管理的費用,相對工程師人力的成本更加便宜。

Q:越來越多客戶考慮把現有 Application 變成容器部署,大多是爲了加快部署的效率,那麼變成容器模式之後,對 CI/CD 的工作流程有什麽影響嗎?

A:運用容器技術最直接的效果,可以讓應用程式的環境更一致化,例如 testing 環節、stage production,讓容器避開一些差異問題。至於 CD 部分要 delivery 一些 usage 不太一樣的時候,容器會幫忙做配置,所以 CI/CD 對容器的效益是相輔相成的。

Q: 客戶在開發流程漸漸會把 Infrastructure 變成代碼或文檔,是不是可以把程式碼跟現有的應用程式的 CI/CD 流水線整合在一起,達到一套完整的 CI/CD 部署流程?

A:觀察目前市場作法,主要分成兩個階段去做整體部署。如果規模比較小的團隊,會把 Infrastructure 代碼跟 App 代碼分開,在管理上會比較靈活;如果企業規模比較大,會有另外一個 Infrastructure 團隊來控制部署事情,這種情况之下,APP 的項目會生成一個 APP package,主要做到 delivery 這個階段爲止。而 Infrastructure 的項目會指定把需要版本的文檔,部署到他們的 Kubernetes Cluster。

填寫表單 找到適合的快速上雲服務與工具!