2016年10月20日

[資源] 適合打 code 時清楚簡潔的字體選擇---Fira Code


認識 PJ 的人應該都知道,PJ 在寫 code 的時候,很重視編輯器撰寫時視覺上舒適的感受,總覺的畫面好看的編輯器打起 code 來就是比較舒服,用起來就是比較開心。

最近在網路上發現了一個免費字體 Fira Code ,一開始使用的時候,還覺得有些字體變得好像有襯線的感覺而不太習慣,但嘗試一下子之後,發現這個字體非常的清晰易讀,對於每天在碼海中的工程師們非常合適,可以來嘗試用用看!

下載網址:https://github.com/tonsky/FiraCode

目前大多數的編輯器(Atom, Brackets, VSCode)都有支援這款編輯器的連字功能(ligatures), sublime text 目前雖然還沒有支援這款編輯器的連字功能,但一樣能夠套用字型到編輯器當中。

Sublime Text 使用方式


下載並安裝

首先,到FiraCode的 Github 頁面下載字體,在下載的檔案中包含 ttf 的字型資料夾檔,打開並根據所屬的作業系統將字型檔安裝在作業系統上。

套用於 sublime

打開 Sublime Text 後進入 Preference --> Settings

這時候一般會同時開啟兩個視窗,左邊的是 Default , 右邊的是 User。


我們要在 User 的設定檔中新增一行 "font_face": "Fira Code",,如下圖中第四行所示:


存檔後,應該就可以順利將字體套用上去了。

如果你也很在意編輯器好不好看,視覺上舒不舒服的朋友們,也可以下載來試試看!

2016年10月10日

[資源] 假圖產生器 Fake Image Placeholder



再製作網頁的過程中,常常會有一些版面的位置可能是已經知道圖片的大小,但是設計師還沒有把圖切好給你,這時候空一個位置在那不僅不方便我們看整體版面的配置,在美觀上也常常給人一種未完成品的感覺。

這時候,你可以用簡單方便的假圖產生器快速生成一個圖,先把圖放在版面上,之後等實際的圖片切好之後,再把完成的圖置換上來就可以了。

假圖產生器網址:http://fakeimg.pl/

使用方式


使用方法非常的簡單,只需要在 http://fakeimg.pl/300x250/ 標住顏色的位置更改為想要的尺寸就可以了。


更改顏色

如果你覺得灰色太過單調,你可以在網址後方多帶一些參數,就可以達到換色的效果,例如: http://fakeimg.pl/440x320/282828/EAE0D0/ ,其中第一個參數是給背景色,第二個參數是給文字顏色(也可以不給),結果如下圖:


更改文字內容

同樣地,如果你想要更改文字內容,也可以透過給予參數的方式來更改,像是 http://fakeimg.pl/440x300/282828/EAE0D0/?text=PJCHENder ,或者如果不想改顏色,只想改文字的話,可以輸入 http://fakeimg.pl/440x300/?text=PJCHENder 也可以。


非常的簡單好用,利用這個簡單的小功能,從此不用在自己製作假圖,相信也將節省很多開發上的時間。

假圖產生器網址:http://fakeimg.pl/

這個功能也有開發 sublime text 的 plugin ,安裝後只要在 sublime 中打"fakeimg" 就會產生對應的連結網址了!

2016年9月29日

2016年9月21日

[解決] 微軟注音選字視窗太小,教你不用放大鏡的方法!



微軟注音是 windows 主機上內建也是最常見的輸入法,但隨著年紀的增加,選字視窗卻好像看起來越來越少,最近發現原來幾個步驟就可以調整選字視窗的大小,一起來看看怎麼做吧!

STEP 1

點選右下方輸入法的選項(ㄅ的符號的地方)。


STEP 2

在語言的地方,選擇中文(台灣)的選項。


STEP 3

接著點選「選項」。


STEP 4

接著選擇微軟注音輸入法


STEP 5

接著在點選「選項」。


STEP 6

在進階設定的地方,開啟進階設定。


STEP 7

在變更候選字窗的字型大小,選擇你希望放大的倍數。



STEP 8

當啷!大功超成拉!是不是非常實用呢!?



2016年9月7日

[技術分享] CSS中的多重選擇器(Multiple Selectors)包含空白或逗號



在 HTML 中,我們有時候會對同一個標籤給予多個 Class 名稱,像是

<div class="one two"></div>

而在 CSS 裡面則可能同時選擇多個 Class,像是

.one .two{}    /*兩個 class 中有空格*/
.one.two{}     /*兩個 class 中沒有空格*/
.one, .two{}   /*兩個 class 中出現逗號*/

對於初學 CSS 的人來說,常常會搞不清楚這三者的差異,究竟這三者有什麼不同呢?

2016年8月29日

為什麼只做過一次實驗的科學研究,我們不該全然相信?

Photo credit by Dino Reichmuth CC0

隨著教育水準的提高,越來越多民眾開始對於科學文章已經能夠用更謹慎不輕易相信的態度來檢視,同時也能對於毫無根據的說法提出質疑加以反駁,甚至上網搜尋更多的資料加以求證。

然而,實際在驗證這些資訊的過程中,往往又會碰到另一個難題,以手機會不會致癌為例,在蒐集資料的時候,我們會找到證據指出「低頭族注意!美證實手機電磁波會致癌」,在詳細閱讀發現是可靠的資訊來源和實驗研究後,正當我們打算以此為結論,和其他人說明手機對於癌症的影響時,卻又突然找到另一篇同樣打著科學研究的結果聲明「最新研究:使用手機不會致癌」。

這種矛盾的情況經常發生,同樣都是科學研究卻有截然不同的結果,往往讓一般民眾無所適從,更讓想要找出客觀證據的鍵盤柯南們更不知道該相信誰。這到底是怎麼一回事呢?是科學家、媒體的問題?還是科學本質上的問題?我們又該如何看待各式各樣的科學新聞?該不該相信這些研究結果?

在這裡,我們不打算探討科學方法當中該研究是否具可證偽性、是否具備良好的操作型定義、是否考慮了相關不等同於因果關係等問題。我們先假設,這些媒體所報導的研究結果在研究方法上已經通過同儕的檢驗,也發表於相應聲望良好的期刊,沒有任何實驗和研究方法上的問題。然而,即使是完美實驗設計下所發現的研究結果,你也不應該完全相信它?因為它們大部分都只是單一的研究結果。

科學研究的重點——能否重複驗證


這裡我們要回到科學研究中很重要的一點——是否可被重複驗證。可被重複驗證指的是,其他科學家透過同樣的研究方法、實驗方式,將可以得到一樣的研究結果。一個實驗的研究結果即使對人類社會具有極大的意義或貢獻,一旦沒有辦法被其他人所重複驗證的話,也沒有辦法在科學界立足,因為這樣的結果很可能反映的只是意外或巧合所產生的結果。

舉個例子來說,你的鄰居今天運動完後在投幣機投飲料,這時候他靈機一動,冒出了一個想法「會不會重複點飲料的按扭,機器就會感應到很多次,進而掉出很多罐飲料來」,於是他就在投幣後,重複按了很多次點選飲料的按鈕,沒想到結果居然如他所料,一次掉了10瓶飲料出來。欣喜若狂的他跑回家跟親朋好友分享這個消息,告訴大家說:「我有一個驚人的發現,只要在投飲料的時候一直按該飲料的按鈕,就會掉出很多罐飲料來。」大家聽到之後,都非常興奮,於是又去告訴更多的人,就這樣這個消息很快的傳遍了整個社區。但很快的,越來越多人實際去投幣機嘗試後,發現這樣的作法根本沒效,那次之所以掉出很多飲料來,只是剛好機器故障的巧合罷了。

看出這其中的問題了嗎?單一科學研究結果的發現有些時候就有可能是巧合,就像鄰居的發現一樣,不代表就是真實或最後的結論。

發達通訊技術擾亂了知識傳播


在過去通訊設備和資訊傳播仍不像當今這麼發達的時代,科學家們當然一樣也會有些重大發現,只是這些發現不會這麼快的進入到民眾的資訊圈中,當有科學家提出某些研究結果後,對這樣結果有質疑的其他科學家們,便會去進行相同的實驗,看看能不能驗證出相同的實驗結果。在眾多科學家共同努力的情況下,我們慢慢可以得出某些理論是不是更靠近事實。這樣一個又一個的研究累積,是導引科學進步很大的動力。

也就是說,過去科學是先有實驗結果,並且在科學界裡經過了重覆驗證、檢驗的過程,累積了一段時間,成為比較可靠的知識後,才會傳播到人群上來。科學不是一篇研究結果就可以成為定理,提出一個結果之後會被其他的科學家質疑,甚至提出了相反的研究結果,經過長時間的驗證無誤後,才會變成一個可被接受的理論。

然而,在資訊傳播快速、媒體發達的今天,只要有一個新的研究結果產生,就會立刻傳入民眾的生活圈中,科學知識常常尚未經過重覆驗證和檢驗的階段就直接進入了人群知識當中,這些研究結果雖然是以科學方法進行,卻仍不一定是最終的結論。

這些以科學方法所得到的結果,實際上在科學界常常仍結論未定,但卻因為它常是驚人的、有趣的、令人振奮的,進而在媒體或書籍中被大量的刊登引用,這些單一研究結果在重覆的曝光之下,常常被當成了正確無誤的知識。後來即使科學家們發現這樣的結果並沒辦法得到重複驗證,媒體或許早已對這個議題沒有那麼大的興趣,而錯誤的結果也就這樣被人們所相信著。這樣的情形最常出現在和人有關的醫學或心理學的研究上,但實際上,和人有關的研究卻往往又是最難找到定論的。

單一研究結果的不可信之處


我們都知道在各式各樣的廣告中,最有影響力的往往是某某人的使用經驗分享。這種故事型的、使用者案例的模式往往是最有說服力的論點。想想,賣減重藥的藥商如果跟你說,這個藥吃了之後,35%的人會瘦1公斤、25%的人瘦2公斤、20%的人沒有效果、15%的人變重了1公斤,相信你一定不會想要買這樣的藥。但藥商如果告訴你說,隔壁鄰居李小姐也有來買這顆藥,你看她吃了之後不到幾個月身材變得更苗條,小腹都不見了,你一聽到這裡,回想到鄰居李小姐的身材確實變瘦了,立馬就掏出荷包來希望能夠和她一樣減重成功。

就是因為單一研究結果在論述上非常具有吸引力和說服力,再加上科學方法的加持,很多人都認為透過科學方法得到的研究結果一定可信,所以很多的新聞或書籍也都喜歡引用這樣單一的研究結果當作具體的論點來吸引大家的注意。這麼做其實並沒有不對,站在作者的角度看,他為了讓大家接受他的論述,進而使用這樣的寫作方式;但身為讀者的我們,應該更審慎的看待這些引用的資料,即使打著「某某科學研究結果發現⋯⋯」或者「某某科學家找了28個男性、22個女性,將他們分配到實驗組和控制組,發現到⋯⋯」這樣的論述仍不一定是正確可信的結論。

除了上述所提,我們對於單一研究結果不可全然相信外,大家可能都看過綜藝節目中類似的傳話遊戲,第一個人聽完題目之後往後傳,最後一個人只要把他所聽到的答案念出來就可以,在傳遞的過程則會穿插外國藝人,或者戴上播放大音量的耳機來增加遊戲的困難度。我們可以看到訊息在傳遞的過程中,是怎麼將原本的訊息一次又一次的轉化、扭曲,最終變成了四不像的結果,答題者最後則往往透過所獲得的有限資訊和自己的腦補將答案拼湊出來。

你分享的科學新聞正確嗎?


科學新聞的傳遞常常也像綜藝節目般,除了訊息本身在轉傳時就可能發生錯誤外,在加上語言的差異性、新聞的時效性,有些時候記者可能只讀了原始文章的標題、摘要就撰寫出一篇新聞稿來,或者是透過外國媒體的報導,將所取得的第三手資訊轉發,就在這樣訊息傳遞的過程當中,錯誤解讀原始資訊的情形相當常見。除此之外,許多科學新聞報導為了吸引民眾目光常會將標題撰寫的相當聳動、引起焦慮、有趣、或者充滿希望的感覺,藉此更提高該文章點擊率和社群分享數。這些也都是我們在閱讀這些科學新聞時,需要特別留意的部分。

在這裡,我們並非指稱科學知識或科學方法不可信,事實上,它仍然算是我們逼近真理的最好方法;然而,有問題的是,認為透過科學方法所產生的單一研究結果都是正確無誤的知識,而忽略了科學很重要的累積、重覆再驗證的過程。

科學新聞之所以能夠在社會媒體上快速傳播,常常因為這些新聞能夠引發人們的情緒,這些科學新聞經常是有趣的、驚人的、帶給人希望的、讓人絕望的。因此,在面對這些科學新知,我們除了應該先用原有的知識來判斷這個新聞的可信度外,更重要的是,如果是單一研究結果,我們更應該對於這樣的結果保持保留的態度,不要輕易地掉入了非黑即白,不是正面就是反面的二分思考模式當中,多用機率的角度看待各式各樣的研究結果或結論。我們可以把這樣的結果當成一個假設,繼續追蹤類似的消息,同時留待更多科學家協助我們對該結論進行重複檢驗。



本文章同步刊登於 thenewslens 關鍵評論<為什麼只做過一次實驗的科學研究,我們不該全然相信?

2016年8月9日

[心得] 如何成為一名優秀的設計師:羅子雄



每當我們看到一些美妙設計的時候,
很多人心裡面會有一種衝動,
這種衝動會讓你們想去創造一些東西,
創造一些美妙的事物,
這些東西讓你想成為一名設計師
─ 羅子雄@TEDxChongqing。


這是錘子科技設計總監羅子雄 2015 年在重慶的演講〈如何成為一名優秀的設計師〉,最近在 FB 上的曝光度非常高,短短的18分鐘,非常推薦,在這裡和大家分享個人聽完後的筆記和心得。

蛻變


學習設計是一個不斷進步的過程,我們沒辦法一蹴可及,沒辦法一下子就要求自己達到完美,更實際的是,你所認為的完美和別人所認為的完美可能不同;現在你所認為的完美,和幾年後你所認為的完美可能也不一樣,所以我們要追求的是持續的進步和成長

羅子雄和大家分享,想要成為一名優秀設計師的三個重點 ─ 看‧做‧想。



蛻變或許是每個設計師都會經過的階段,演講中羅子雄和大家分享98年時第一個網頁設計作品:


然而,透過不斷的看‧做‧想,如今打造出非常具質感的多種設計作品:



從「看」 到「看 2.0」


在開始著手設計前,很重要的是要能夠分辨設計的好壞?了解什麼是好的設計?什麼是糟糕的設計。其中,審美觀的培養是最簡單也是最難的,簡單的是它只需要透過你的眼睛去觀看,去觀察;困難的是它需要不斷持續地累積,觀看大量的優秀作品。

透過網際網路,我們可以輕易地接觸全世界優秀的設計作品,像是behance, pinterest, dribbble, fwa, 等等。我們可以透過大量的瀏覽來提升我們的審美觀。


「那麼,我們怎麼樣知道自己審美觀真的提高了呢?」

不知道你有沒有過類似的經驗,在某個時期收集了很多自己認為美的、好看的設計,也常常可能是自己的作品,過了一陣子後,你回過頭看當時的作品時,突然覺得當時設計的東西(或是收集的作品)好像沒那麼好看了,這時候就代表你的審美觀有了進一步的提升。

從單純的「看」到「看 2.0」,最重要的是不只是去看你專業領域內的作品,如果你是前端工程師,那麼你也應該接觸平面設計、動畫設計、工業設計、甚至是室內設計,如此才能讓自己的設計和思維不被侷限在你所處的領域當中。


從「做」 到「做 2.0」


當我們具備基本的審美觀,能夠判斷好作品和糟糕的作品之後,下一步我們要做的就是 ─ 動手。

工欲善其事必先利其器,實際開始動手前,我們要知道如何使用工具。在資訊發達的現在,如果你想學 PhotoShop ,只要上網搜尋就可以找到很多免費的教學文章或影片,在這麼多學習的資源中,羅子雄建議大家,千萬不要看單純教如何操作軟體的影片,因為看完影片之後,你依然不知道如何去創造出一個完整的作品,所以他建議初學者要看的是基礎實例教學。

好的教程應該是要讓你不僅可以學到相關的軟體操作技能,還會學到如何創造一個完整的作品。


那麼,在自學的過程中碰到問題該怎麼辦呢?

除了 Google 之外,我們可以試著把一個看似複雜的問題開始拆解成許多單純的小問題。例如,如果你看到了一個很有質感的網站,想要試著模仿練習,一開始你可能完全不知道該如何切入,這時候,你可以開始切割問題,把大問題拆成小問題。可以將完整的網站切成導覽列、sidebar、banner等等的小部分,在切成小問題之後,我們比較能夠思考它是怎麼做出來的。

如果你仍然覺得無法解決,就繼續試著拆分,一直拆分到你覺得可以通過短時間的學習和練習,把這個問題解決掉。

從「做」到「做 2.0」,我們不只是模仿,而是可以根據自己喜歡的事物進行 redesign ,或者是透過參加競賽來挑戰自己的能力。

將 facebook 進行 redesign



從「想」到「想 2.0」


接著,從觀察到的設計作品中開始思考,這個作品為什麼要這樣設計?為什麼要這樣創作?許多看似理所當然背後其實都有其設計的理由

為什麼要在電話的ICON外加上圓角方框框起來?

為什麼這個圓角矩形的像素要是23px呢?

在從「想」到「想 2.0」的過程中,我們從單純的「模仿」開始思考,從別人的作品得到「借鑑」後進行「改進」。

好的設計師拷貝,偉大的設計師偷
從模仿、借鑑到改進

最後我們也可以根據不同的元素進行「組合」,例如,當講者把彩虹、低像素的圖像和貓進行組合後...


就組合成了「彩紅貓」!?



從入門到專業 ─ 找對方法持續地練習


想要從入門到專業別無他法,我們須要持續不斷的練習,而10000小時的練習將近是5年的時間。

人們眼中的天才之所以卓越非凡,並非天資超人一等,而是付出了持續不斷的努力。一萬小時的淬煉是任何人從平凡變成超凡的必要條件。─瑪律科姆·格拉德威爾。



2016年8月1日

前端工程師必備 — 最實用的 Chrome 套件集合(chrome extension)

前端工程師必備 — 最實用的 Chrome 套件集合

在這一次的分享中,我們整理了12個前端工程師最常使用到的 google chrome 擴充功能,有些是幫我們一覽他人網頁的架構,有些是幫助我們掌握網站元素的細節,有些則是讓我們的作品更容易和他人分享與溝通,快點一起來看看吧!




type sample

透過 Type Sample 可以快速檢視網頁上所使用的字型和字體大小。

下載連結:https://goo.gl/CB89CT

---

範例網站:http://pala.tw/begin-to-learn-python/




FontFace Ninja

FontFace Ninja 和 Type Sample 使用上很相似,除了可以檢視字體、字型之外,亦可以看到文字的行高、字距;但實際測試的時候,微軟正黑體只會顯示”Regular”。

下載連結:https://goo.gl/UNPrcd

---

範例網站:http://pala.tw/begin-to-learn-python/




PageRuler

在製作網頁的過程中,我們常常會需要掌握某些元素的長度、寬度、位置等細節,透過PageRuler這個擴充功能,可以非常簡單的測量元素區塊的大小。

下載連結:https://goo.gl/RGZvB6

---

範例網站:http://www.hexschool.com/




Dimensions

乍看之下會覺得和剛剛介紹的 PageRuler 很接近,雖然它們兩個都能測量長寬,但使用方式截然不同。

PageRuler 是透過選取的方式,選擇自己想要測量的區塊;而 Dimensions 則是會自動去偵測網頁中元素和元素間的距離,但有時候自動偵測到的並不見得你想直接測量的。

下載連結:https://goo.gl/2vlT3n
---

範例網站:https://theinitium.com/




Re:view


在開發 RWD 網頁時,最麻煩的地方往往在於要測試不同瀏覽器、不同裝置間顯示的樣子,透過 Re:view  將可以快速的達到這樣的效果。

Re: view 它會在一個網頁上,同時且同步顯示不同裝置上的檢視樣貌,也就是說,只需要滑動一個頁面,全部的頁面都會跟著滑動。

另外,它分成 BreakPoints View 和 Device Wall 兩種檢視模式。在 BreakPoints View 中,它會檢視該網頁具有哪些 BreakPoints 並依此呈現不同視窗大小;透過 Device Wall 則是可以檢視該網頁在不同手機裝置時會顯示的樣貌。

下載連結:https://goo.gl/FOcWkv

---

範例網站:http://www.hexschool.com/




CSS3 Generator

由於 CSS3 中新增了相當多語法,像是文字陰影、邊框弧度、邊框陰影、漸層、動畫等等效果,有時候還需要透過不同的前綴詞來支援不同的瀏覽器,因此,有一個視覺化的 CSS3 語法產生器是非常實用的。

透過 CSS3 Generator ,除了可以直接以視覺化的介面調整想要的樣式外,還幫你把所需要的前綴詞一併加入。

下載連結:https://goo.gl/XAUl4Q





Stylebot 很像是 chrome 開發者工具中 CSS 的視覺化介面版,和 Chrome 開發者工具一樣,可以透過滑鼠點選頁面上的元素,然後透過介面去調整其中的 CSS 屬性;如果你不習慣使用 GUI 介面,想要直接透過 CSS 語法的方式加以編輯該元素,也可以選擇進階模式來達到這樣的效果。

下載連結:https://goo.gl/lMTX3I
---

範例網站:http://www.hexschool.com/




Wappalyzer

Wappalyzer 當我們看到一個有質感的網站時,身為前端工程師,總是想一探究竟它背後所使用的技術。透過 Wappalyzer 就可以打開背後的黑盒子,從前端看到後端(不就看光光了,我們可以檢視它所使用的伺服器,所使用到的框架、套件,記錄分析網站流量所使用到的工具,一目了然。

下載連結:https://goo.gl/YKjcY
---

範例網站:http://www.thenewslens.com/




Awesome Screenshot

有時候為了和其他設計師溝通,我們必須要把整個網站的頁面擷取下來,你過去是怎麼擷取的呢?是東截一塊、西截一塊,最後再拼拼湊湊的拼回原貌嗎?
透過 Awesome Screenshot ,可以非常容易地把整個網站的頁面給擷取下來。

在 Awesome Screenshot 中,支援整站頁面截圖、可視頁面截圖、選擇區域截圖,另外,它也支援在該頁面上進行註解或簡單的編輯,快來試試看吧。

下載連結:https://goo.gl/GEF1no

---

範例網站:https://www.awesomescreenshot.com/




goo.gl URL Shortener

goo.gl URL Shortener 這個外掛雖然只是做到一般縮網址的效果,但是卻異常的輕巧好用,有時候在完成某些頁面後,想要傳給客戶看,這時候可以使用這個縮網址工具,直接複製貼上就可以了。

另外,它背後其實是透過 google short URL 的縮網址功能,所以它也支援可以檢視有多少流量和裝置是來自此縮網址。

下載連結:https://goo.gl/ygGS6





前端工程師常常會需要和後端介接一些資料,而最常使用的資料格式就是 JSON 。這款 JSONView 顧名思義就是當它讀取到網頁是屬於 JSON 資料時,會自動重新格式為易讀的排版樣式,同時附帶有除錯的功能。

下載連結:https://goo.gl/oVzEUV
---

範例網站:http://www.w3schools.com/website/customers_mysql.php





Web Server for Chrome

某些功能可能會需要本機伺服器的情況下才能正常顯示,透過 Web Server for Chrome 這款應用,我們只需要將寫好的網站以資料夾的方式拉入這款套件當中就可以建立起本機端的伺服器。

另外,如果將 “Accessible on local network” 和 “Also on Internet” 的按鈕打勾,如此,就可以將這個網址分享給同網路連線的使用者一同檢視這個網頁,在開發和溝通上都變得更方便。

下載連結:https://goo.gl/xl5z9P




本次分享中部分擴充功能參考自 “Chrome 網頁除錯功能大解密” ,若想進一步學習和 google chrome 相關開發者除錯工具,或者對於部分的 chrome 擴充功能在操作上有不太清楚的地方,都推薦可參考此免費課程。

免費課程網站:https://goo.gl/lW6ahy






在這次的分享中,是否仍有些你常常使用卻被我們忽略掉的漏網之魚呢?歡迎你透過留言推薦讓我們知道,我們將繼續擴充這個相簿,讓更多開發者在進行開發的過程中享受開發的便利與樂趣。





如果你喜歡我們的內容,歡迎在相簿中 tag 同樣有興趣的好友們,與他們一起分享,一起討論,一起求進步。

若對於當中的 chrome 擴充功能有不清楚操作的地方,也歡迎留言一同討論喔!

2016年7月31日

[心得] 我的第一堂付費簡報課 — 精準設計簡報實戰技巧

精準設計簡報實戰技巧


在台灣,有越來越多「老師」、「教練」或者是工作坊都是以教學簡報製作和講演技巧為核心出發,而且這類的演講或工作坊大多都非常昂貴(用昂貴來形容真的不誇張...),也因為這些課程常常不是我所能夠負擔的,因此大部分在學習的時候我都是透過網路資源自己吸收學習。在看過了這麼多教學文章、教學影片之後,到目前為止我最推薦的絕對是「簡報藝術烘焙坊」的 Bill 彭毅弘。

為什麼我這麼喜歡簡報藝術烘焙坊


我幾乎把他放在網路上的所有教學文章(部落格)和教學影片(10分鐘學簡報系列)都看過了,為什麼我這麼喜歡他推出的課程呢?

很重要的一點是 Bill 的教學不打高空,而且說明的很有架構,操作步驟的講解很清楚。有些簡報老師可能花會很多時間在講「心法」,講的都比較概念性或原則性,聽來聽去你大概知道個概念,可是實際上往往還是不會做或無法應用,但是 Bill 的教學(至少我看到的線上教學)常常是概念和實際的技術都會一起說明,他會說明原則性的內容,讓你可以把這樣的概念延伸到其他投影片加以應用,同時也會實際以簡報軟體操作教學。

以下圖為例,這是 Bill 在課程中常用到的圖。他會告訴我們修改投影片可以從顏色和形狀這兩個角度加以切入,以達到減少雜訊,清楚呈現重點的目的,接著他就會以實際的範例說明如何達到這樣的效果。

圖片來源:簡報藝術烘焙坊

因此,當我在 hahow 中發現 Bill 有開設這堂「精準設計簡報實戰技巧」,而且課程售價只要$700時(預購只要$500),就給它報名下去了,因為實在是比外面的工作坊便宜上超多倍啊!這不只是我第一個付費的簡報課,同時也是我第一堂在 hahow 開課的課程。

課程內容


課程內容維持 Bill 老師一貫的風格 — 簡潔、連貫、清楚。上完整堂課,我最想問老師的是(說不定很多人也想問) — 教學課程到底是怎麼錄的,怎麼可以這麼一氣呵成!因為影片中同時錄了人像、投影片、還有螢幕操作,可是這幾個影片間幾乎讓你看不出來有剪接的感覺,整個轉場的效果會讓你上課的時候覺得是一體成形。也因為如此,我就這樣一集接一集的看下去,一不小心...就看完了(還剩下尚未上線的部分)。

在這堂課程中,不會從最最最基礎的 PowerPoint 開始上起,而是從很多實用的部分直接開始說明,讓你很快就可以套用到自己的簡報製作當中,其中基礎的像是自訂快速存取工具列、投影片的母片設定、格式的複製設定、快速進行對齊和均分。


另外,對於投影片中常用的遮罩效果也做了非常清楚的說明,從最基本的遮罩的製作,一直到用進階「合併圖案」中減去或交集的方式都講解的非常清楚:
課程片段截圖:利用遮罩可以達到的三個目的。

如果你是對於扁平化圖片的簡報設計有興趣,課程中也提供 Noun Project Icon 的使用方式;或者也可以透過簡單的幾何圖形,搭配「合併圖案」中聯集的技巧,達到自製 ICON 的成果:

課程片段截圖:利用合併圖案自製ICON。

另外,連 Office365 中最新的轉化功能,也做了相當清楚的解釋和實際案例示範,看得過程中,真的是讓人對於這個轉化功能的效果感到驚呼連連:

課程片段截圖:透過office365最新轉化功能可達到的目的。

總結


總體來說,我覺得這是一堂CP值相當高的課程,可以學到很多實用的觀念和技巧,同時價格又很划算,非常推薦想要提升簡報設計能力的人學習。

最開心的是,據 Bill 老師所說:「上架只是里程碑而已,未來我們更會持續更新課程」,就讓我們一起期待未來更多老師分享的課程上架吧!