《超圖解Arduino互動設計入門》的書本封面、插圖與程式字體之Hack

本文補充說明《超圖解Arduino互動設計入門》書本裡的插圖繪製以及選用的程式碼字體。這是我替本書繪製的最後一張圖:

序言

第一次校稿時,它原本只是單純的、從電腦鍵盤敲入的黑體「序」字。我後來嘗試了八位元像素方塊、摺紙、焊接線材等不同風格,經過一番折騰之後,確定用印刷電路板風格繪製完成。

駭入Arduino!

雖然《超圖解Arduino互動設計入門》的主題是Arduino微電腦,但是我覺得第一主角應該是「手」,而非Arduino;如果我們不動手和Arduino微電腦做第一類接觸,Arduino就只是一塊上面黏了幾個黑色塑膠和小豆豆的板子。

書本封面上的插圖,我原本想要仿照米開朗基羅(Michelangelo)的《創造亞當(Creation of Adam)》名畫,上帝伸出手準備透過指尖點化亞當的生命,我們用雙手賦予Arduino微電腦知性、感應與行動力。

想歸想,光看就知道米老大很厲害,小弟畫一隻手向他致意就好。

I Hack, Therefore I Am

封面右下角的液晶顯示器模組呈現的"I Hack, Therefore I Am",改自法國哲學家笛卡兒(René Descartes)的"I Think, Therefore I Am"(我思故我在)。這裡的Hack不帶侵略性的「駭」意,而是「修正」和「改造」。

捲起袖子,開始駭入Arduino吧!

圖解之Hack

超圖解Arduino互動設計入門》採用大量的圖解說明硬體、電子元件和程式設計概念。

在撰寫本書的過程中,收到親朋好友的寶貴意見,尤其是旗標出版社編輯黃昕暐先生提供許多專業的看法,我也依照這些想法和指正,逐一調整解說方式,讓圖文內容更清楚易懂。

在校稿階段,昕暐兄也仔細對照電路圖、麵包板組裝圖和程式碼,發現了一些錯誤,我也都一一改正,真的非常感謝昕暐兄的協助!

底下是第三章「Arduino程式設計基礎」單元,3-8頁最初的圖說設計:

舊的Arduino程式設計基礎圖解

上圖左採用兩個區塊來表示Arduino的兩大程式區(函數),後來我覺得方塊圖並不足以表現程式語言中,採用大括號"{"和"}"來標示區塊的概念。

因此,我將區塊改成用上、下大括號構成的形象,並且去掉程式說明的方框:

新的Arduino程式設計基礎圖解

這是本書當中最初的電晶體解說圖,考慮到節省版面空間,我用水平方式排列圖解:

舊的電晶體概念圖解

稿件完成後,看了好幾次這張圖,總覺得哪裡不太對勁。後來想到,因為電路圖裡的電晶體元件符號的C和E腳及其電流方向,都是垂直排列的:

電晶體符號

所以我將電晶體的解說圖改成底下的形式:

新的電晶體概念圖解

版面空間之Hack

採用插畫而非實體照片的好處之一是,可以做重點強調並抿除無關緊要的瑣碎內容。底下是第十四章的「藍牙無線遙控機器昆蟲」的手機APP操作畫面圖解,我把手機傾斜,讓畫面比較活潑,同時也少佔用一點版面。中間顯示藍牙連線裝置的畫面,在真實手機的顯示畫面比較小,需要在版面上放大,可能沒辦法像插畫一樣用一張圖詮釋。

「藍牙無線遙控機器昆蟲」手機APP操作圖解

軟體操作畫面的截圖,我使用波浪線刪去不必要的部分,而非置入整張圖:

為了再節省版面,我還用Photoshop縮減視窗底部黑色的訊息窗格的高度:

Arduino軟體操作畫面的截圖

因此,本書的總頁數從最初規劃的450頁增加到616頁,絕對不是因為任意新增插圖造成的,相反地,筆者從繪製插圖到擷取軟體畫面,都在傳達完整訊息的前提下,竭盡所能地減少空間浪費。

不過,有時我也想讓版面帶點「圖」破。像附錄D第14頁,110V交流電數位調光器的麵包板電路組裝圖,原本的版面編排是這樣的:

V交流電數位調光器的麵包板電路組裝圖

我修改了組裝電路上方的Arduino微控板,請美術重新編排,讓Arduino板延伸到版面之外(這在排版裡的術語叫做「出血」,呃…整理這篇文章才發現內文一個小錯字,「100V交流電輸入」要改成「110V交流電輸入」):

V交流電數位調光器的麵包板電路組裝圖

內文和程式碼字體之Hack

一般書籍的內文字體通常採用明體(襯線字型),標題採用黑體(無襯線字型),本書的標題和內文都採用黑體字,雖然少了精心雕琢的襯線,看起來比較簡潔俐落也多了數位黑白分明的感覺。

列舉程式碼時,電腦書籍都使用無襯線等寬字型。在網頁上,因為跨平台的需求,大多使用Courier New字體。國內許多電腦書籍也都採用Courier New來編排程式碼,筆者一開始也是採用這個字體。

然而,Courier New字體中的易混淆字母與數字,並沒有顯著的差異。外觀相近的字符包括:數字0和大小寫的字母O和o、數字1和小寫字母l和i以及數字8和字母B。

我搜尋並比較了幾個知名的無襯線等寬字型,選擇的首要條件是清楚易辨,其次是免費(或者系統內建),第三是要有多種樣式選擇

Windows系統內建了Courier New和Lucida Console(此即Windows XP作業系統,惡名昭彰的藍色當機畫面所採用的字體)。Droid Sans Mono是Ascender公司替Google Android系統開發的免費Droid字體家族中的一員。

Monaco(摩洛哥)是Mac系統內建的無襯線等寬字型,底下顯示的Monaco是在Windows 7上安裝GrinGod製作的版本,可以在GrinGod.com免費下載

Courier New, Lucida Console, Droid Sans Mono和Monaco字體示範

從以上的比較可以看出,Courier New, Lucida Console和Droid Sans Mono字體裡的O, 0, o以及1和 l差異不夠明顯。此外,後面三種字體都只有一般(regular)樣式(註:Ascender公司有設計一套Droid Pro字體,裡面的Droid Sans Mono包含斜體與粗體,但它不是免費的)。

Consolas, Inconsolata和Envy Code R字體示範

Consolas是另一個由微軟發行的無襯線等寬字型,隨著Windows Vista(以及後續的系統版本)、Office 2007 及 Microsoft Visual Studio 2010發佈。Consolas比Courier New具有更高的視認性,也有粗體和斜體樣式,但是我覺得它和免費的Inconsolata(僅有一種樣式)及Envy Code R一樣,數字1和字母l很相近。

底下是Ubuntu基金會的免費Ubuntu字體家族中的Ubuntu Mono,以及Adobe公司的免費、開放原始碼Source Code Pro字體

Ubuntu Mono以及Source Code Pro字體示範

Ubuntu Mono比較狹長,我覺得這使它看起來有點拘謹,而且連字符號"-"太短了。Source Code Pro有較多的修飾,像這兩者的字母g就很不一樣。這兩組字體都有良好的視認性,不過,它們的數字0中間加了一點而非斜線,大多數人在第一時間可能有些不習慣。

等寬字型的星號"*"位置通常是x字高,Source Code Pro的"*"顯示位置則和"+"號一樣。

本書採用的程式字體是Adobe Source Code Pro,這個字體名稱取得很好(中文直譯就是「專業原始碼」字體),它不僅提供TrueType (TTF) 和比較精緻的OpenType (OTF) 格式(可在這個網址免費下載),除了一般樣式,它還有6種不同的粗細(weight,或稱為「強度」)可選,但是沒有斜體(我也用不到)。如有需要,可以到Source Code Pro字體的GitHub頁面,下載字體的原始設計檔。

底下的程式碼片段採用Courier New字體一般粗體樣式:

採用Courier New字體的程式碼片段

底下則是採用Source Code Pro字體的一般和半粗體(semi-bold)樣式:

採用Source Code Pro字體的程式碼片段

延伸閱讀

Posts created 467

10 thoughts on “《超圖解Arduino互動設計入門》的書本封面、插圖與程式字體之Hack

  1. 趙大師,您好!
    非常欣賞您的大作。專業、美觀、詼諧! 電子專業的書籍還可以如此令人賞心悅目,閱讀時還會不時莞爾(例如那支吸著珍珠奶茶的配角),不自主留言讚賞一下。我在大學教授管理專業,為了引導對工科有興趣的國中兒子建立電子電路的基礎,開始閱讀一些電子電路的書,之前從MAKE雜誌得知Arduino這種東西,原本買了一本書,看了幾回便放回書架上,上回帶兒子北上逛Maker Farie時發現您的大作便買了一本愛不釋手。由衷希望未來還有相關書籍出版(例如APP),在下一定是您的頭號粉絲。對於被現今大學生的學習態度打敗的我,若有以此方式撰寫之大專商管用書,鐵定能幫助重拾教學信心!

    1. James老師:

      非常感謝您喜歡這本書籍!我想我需要好好管理自己,不要在書本裡面出現小錯誤~阿蝙最近只喝奶茶,不加珍珠粉圓了。

      thanks!
      jeffrey

  2. 感謝大大無私的分享(好像怪怪的~)。

    書有買,看完了(應該算是重點瀏覽完了-文字部份;程式碼只看有用到、感興趣的單元)
    網站也有持續follow,本來只是想繼續暗中follow就好,但看到原來這麼用心,忍不住想鼓勵一下。
    其實買書前就已經先從Cooper Maa那知道有Arduino這東西。一開始覺得它很囉嗦(高階語言;對洋人來說高階,不懂洋文的人不見得高階,反而要懂兩種語言。)
    後來買了烘豆機,意外發現烘豆程式Artisan,可搭配TC4 Shield的硬體,就是搭Arduino使用的。
    又發現露天從對岸來的實驗板價格相較於Microchip,8051等相當合理,非常適合hobbyist。
    為了無痛製作成品,於是參考Cooper Maa的教學文章,做了Roastlogger搭Max31855的版本,粗淺地分享在Mobile01,就上面Website貼的連結。
    然後讀了書,因為不是本科系的,有不少豁然開朗的感覺。感謝!內容由淺入深且易懂(原來有這麼多考量~)。

    感覺小零件多運費,還有拿烙鐵真是困擾的事~哈。
    想做、想買的很多,下班又沒動力。

    現在想做的,應該都卡在零件,暫時不需要求救(軟體都有人Open source,只要搭硬體微調就好)~。
    把AC Dimmer線路加進RoasterLogger烘豆監控程式的硬體,去控制烘豆機熱源,今天又想到,比了價格,想了自己的時間,很想乾脆買現成的TC4 Shield。
    Retro Adapter:是一個採用AVR V-USB,製作USB轉搖桿的專案。因為3.6V Zener取得SMD零件,USB接頭又不好銲。我把國產的AVR ASP燒錄器ATmega8拆下來,飛線接Arduino測試電腦端沒問題,在考慮要先測搖桿和Arduino的連線,還是要直接買銲好MicroUSB接頭的轉接板,再來規劃其他接線問題。
    夜市彈珠檯:買了小型木制彈珠檯工藝材料,做好了;想加入亂數決定要打哪幾排,及7段顯示計分功能。因為開孔太累,想用非接觸式的,看上Tcrt5000,實際小鋼珠反射效果可能還是要先測試才知道。因為是想做給別人玩,IO數又多,所以很想用TM1638模組或考慮Max7219掃瞄,整體性好些,線路也不會太醜。

    1. hi xhining:

      我平常喝的咖啡是用玻璃罐裝的即溶咖啡加上鮮乳,看了你分享的咖啡烘豆機,覺得很新奇,也能隱約感覺到你提引出咖啡豆蘊含的香氣與風味的用心,加上利用Arduino監控,很讚!

      也感謝分享烘豆程式ArtisanTC4 Shield控制板

      thanks,
      jeffrey

  3. 您好,请问大陆怎么才能买到这本书。或者有无电子版出售?
    盼回复,谢谢~

  4. 请问书中这种蓝白灰风格的插图是用什么软件画的,看起来很立体,如果用adobe illustrator画应该很麻烦,你使用其他软件画的吗

    1. 其实工具只要用得顺手,用什么软件不是那么重要。这些图都是用Adobe Flash画的(注:Flash在2015年末更名为Animate CC),谢谢。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top