五倍直播間

Blogs - Sidebar

「工作上出錯了，不知道問題在哪」
「老闆需要我建議最佳方案，不知道從何建議起」

這些狀況對你來說熟悉嗎？

要鍛鍊這種解決問題、評估風險的能力，你就不能略過「邏輯力」。
特別是職場上的困難往往變因極多，如何梳理原委，排序優先順序，解決牽一髮而動全身的問題，正是需要發揮邏輯力的地方。

## 分辨變因屬性

把可能的變因列出來，可以幫助你整理思緒，客觀看待事情全貌。
建議把變因進一步分成「可掌握」（只與自己有關或有權解決）或「不可掌握」（與他人有關，又無法影響他人行為）。

## 排序優先度
依序檢討哪個變因對解決當前情況最有力，列為優先。但如果優先變因的「影響因子」全為不可控，那選擇優先解決它可能吃力不討好。

## 判斷影響力

找出「變因屬性」和「變因優先度」的交集。自己可掌握又排序優先的，影響力最大，應該先解決；然後是自己掌握幅度有限，但排序次優先的項目。雖然無法直接掌握，但可透過其他人事物施力，就能成為次優先的項目。無法施力又優先度低的影響力最小，可選擇最後處理。

這個步驟重要的是採取行動。

以上三個心法如果落實到實際範例上，可為：

假設 Joe 在公司內擔任專案經理，但是無法準時交付開發進度，因此被客戶客訴，老闆十分生氣。

結果來看是無法準時交付成品，但可能的變因有： 
1). 沒有即時分辨風險：客戶提出的時程與規格本來就無法合理完成，是風險很高的承諾。 
2). 沒有提前預警：工程師遇到障礙沒有或無法反應，導致無法提前告知客戶。

無論是 (1) 或是 (2)，其關鍵因素都在於有沒有辦法迅速判斷需求是否合理：不論是時程或規格的合理性，結果才導致被客訴。所以 Joe 需要即時判斷需求＆規格，團隊是否能準時交付。

要達成這一項目標，又有兩種方式： 
A). 掌握「增加判斷能力」必備知識 
B). 一律由主管審核確認 
C). 請具有該專業能力的要好同事協助判斷 

但是選擇 (B)可能會增加主管的工作負擔，並消減自己在職場上的價值。
短期要解決可以選擇 (C), 但是長期要完全治療這個狀況，則是要選擇 (A).

用這種方式來列出所有事物的關聯性與重要度，就變得很好判斷每個解決方案是否該執行。

看起來很複雜嗎？其實你只是需要多加一些判斷指標，就可以很快完成這些思考。
那麼，有沒有訓練邏輯力最有效的方式呢？

很有力的管道就是學寫程式！ 
程式語言的架構讓你可以預期要達成這些 output 需要多少 input，循線判斷影響因素，並進行除錯。不過，「寫程式」聽起來有點難，是嗎？

其實只要掌握一個要訣，學習寫程式可以是一眨眼的事情。
下一篇，我們就來告訴你那個要訣是什麼。

系列文章：

- [面試攻略(一) 初心者的三大面試攻略心法](/posts/3skills-of-interview)
- [面試攻略(二) 藏在自薦信 ( Cover letter) 裡的魔鬼](/posts/3skills-of-interview-2)
- [職涯原力：善用企劃力，為自己的生命校正](/posts/career-power-planning)
- [想當工程師？學寫程式，只有這件事最重要！](/posts/to-be-an-engineer)

post-職涯原力：解開千千結的邏輯力 / cover

職涯原力：解開千千結的邏輯力

Photo by Alvaro Reyes on Unsplash

不管你是何種職位，身處哪個業界，你都應該善用企劃力為自己的人生企劃。

所謂的企劃力，是展現解決問題、創造價值的能力。
在企劃的過程中，我們不止能釐清思緒，梳理邏輯，更能好好省視一路以來的職涯規劃是否符合你想要的。而不至於在某天晚上突然驚覺「我這幾年都在做什麼呢？我當初想做的明明是....現在卻....」

那麼，如何在人生規劃中應用企劃力呢？
以下列出三個重要的企劃力，可以為你的人生校正：

## 目標設定

長程目標舉例來說，你現在如果是25歲，可以拉到30歲，這種需花費數年才能達成的目標，可歸類為長程目標。

短程目標是為長程目標服務。
舉例：假設你希望30歲能夠在外商公司擔任數位產品的產品經理，那麼將這個目標再切細一些，便是你的短程目標。可能是： 
1.增加外文聽說讀寫的技能 
2.增加產品管理的技能，包含： 

> 1.分析需求的技能 
> 2.PDCA（ Plan, Do, Check, Act）的技能 
> 3.資訊架構的基本概念 
> 4.前端技術基礎觀念與基本技術力 
> 5.後端技術基礎觀念與基本技術力 
> 6.時程管理的概念與實戰技能 
> 7.跨文化國際團隊溝通的技能 
> 8.跨部門團隊溝通的技能 
> 9.其他：如策略規劃能力、邏輯思考能力等。 

當目標切細之後，你就知道每年應該完成怎樣的目標。現在如果 TOEIC 是660分，那麼明年希望可以提升到800分，後年可以是900分....。

短程目標是一小步一小步的前進，就像在爬山，起點在山腳下，但每一小步都縮短了你與山頂的距離。
 

## 執行方案
可能是上課或自學，又或者是直接選擇相關領域的工作來培育專業能力。依據個人需求和現階段能力進行規劃。

 

## 風險評估
指的是執行方案的風險評估。例如上述「直接選擇相關領域的工作來培育專業能力」這個選項，很有可能因為專業不足，無法得到期望薪資。在本身也有經濟壓力的狀態下，選擇在職進修反而是虧損較少的選項。

風險評估的時候，需把目前所能覓得的資源一起加入評估，才能客觀選擇適合自己的方案。
 

## 路線調整

實際進入執行方案後，有可能會因為實際執行的成果，影響到目標。譬如你原本想要今年先提升英文程度到 TOEIC 800分，但是因為工作需求，必須先進修資訊技術的基本知識，那麼計畫就必須要根據實際的狀況調整。也或者是你在進修一項技能時狀況很好，感到游刃有餘，因此決定提前進多項技能。

無論如何，計畫建議可以三個月一次回頭調整，確保自己有最多的彈性。

在忙碌的每一天，我們常常為了解決眼前事，忘記也要隨時看看長遠目標。不妨花點心思，偶爾為自己確保一個下午來好好思考人生目標，才能確定自己永遠是朝著最渴望的方向走。

人生只有一回，好好規劃，好好實踐吧！

系列文章：

- [面試攻略(一) 初心者的三大面試攻略心法](/posts/3skills-of-interview)
- [面試攻略(二) 藏在自薦信 ( Cover letter) 裡的魔鬼](/posts/3skills-of-interview-2)
- [職涯原力：解開千千結的邏輯力](/posts/career-power-logic)
- [想當工程師？學寫程式，只有這件事最重要！](/posts/to-be-an-engineer)

post-職涯原力：善用企劃力，為自己的生命校正 / cover

職涯原力：善用企劃力，為自己的生命校正

總以為世界的形狀我們早已熟悉，但到頭來卻發現並不是。
筆者每每在寫 Javascript 時，處處都會發現驚喜。
下面想舉一個曾經印象深刻的例子給大家看：

```javascript
console.log('Start');
console.log('Stop');
```
印出的結果為

```
Start
Stop
```
那中間如果加了 

```javascript
setTimeOut(()=>{
 console.log('0 sec later');
},0);
```
變成

```javascript
console.log('Start');

setTimeOut(()=>{
 console.log('0 sec later');
},0);

console.log('Stop');
```

則結果竟會變成

```
Start
Stop
0 sec later
```

疑？這是什麼令人驚訝 <del>奇葩</del> 的結果？明明在中間加入了 `0 sec later`，為什麼 console 出來的順序會是這樣？
要搞懂這個結果，就必須先來了解 Javascript 擁有的 `非同步特性`。

# 阻塞(blocking) : 如果不存在非同步？

不過，我們先來試著思考一個問題：非同步真的很重要嗎？沒有非同步的世界會怎樣呢？

`阻塞`的概念可以想成每年過年高速公路必塞車的現象，`高速公路` 可以想成等等會提到的 `Call Stack`，而`車子` 相當於 `程式`。

每跑一段程式就要花時間等待執行完畢，從 `Call Stack` 中跳走後，下一個程式才能執行，於是當前面某個程式很慢就會連帶影響之後的程式。在瀏覽器上我們會看到類似`當機`的畫面，什麼事都做不了。

想要避免造成當機的模樣，那麼我們來了解怎麼疏通高速公路吧！

# 一起來瞧瞧非同步的骨架

JS 的主要特點有兩個：

- `Single Thread (單線程)`
- `Synchronous (同步)`

說明 Javascript `一次只執行一件事，程式會逐行執行` 。

那為什麼在網頁我們仍可以處理像是滑鼠點擊之類看起來「一次處理很多事件」的非同步 ( asynchronous ) 事件而不會阻塞<del>塞車</del>呢？原因是當 Javascript 在 V8 Engine 執行時，其實也會執行瀏覽器提供的 API ( Web APIs，這裡已經不是在 V8 Engine 的範疇 )，前文提及的滑鼠點擊 (`click` ）即屬於 Web APIs。

> Web APIs 讓我們可以非同步執行程式，
也就是說 JS 本身並無法非同步執行，
需要借助 Web APIs 才能達到非同步的效果。

那非同步是怎麼運作的呢？

首先，要先了解下面四點的定義：

## Call Stack

Call Stack 本身為 Stack，
Stack 是資料結構的一種，會遵守 LIFO (Last In, First Out) 的原則。

Call Stack 會繼承 Stack 原本的特性，即「最後被 call 的 function 會在最上層，
而執行完後會最先從該 stack 離開（pop off）」。

而 Javascript 是 Single Thread, 所以只會有一個 Call Stack。

![post-無痛理解 JS | 非同步怎麼運作？/ stack](//images.ctfassets.net/8er52l3j5u76/5ZfokcpOHfsEAztzpp5FNp/bb3e6f5acbb21146c9869398ac207a39/stack.png)
> 圖片來源 / [wiki - Stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type))

## Web APIs

瀏覽器提供的 API，例如常被使用的 setTimeout。
setTimeout 是瀏覽器所提供的計時器，常常搭配 callback function 使用。

## Task Queue

又可以稱作 `Callback Queue`，
放在 `Web APIs` 的 `function` 在執行完後，會到 Task Queue 待命。
（e.g. `setTimeOut` 在秒數執行完後，會移至 Task Queue）

## Event Loop

偵測到 Call Stack 為空時，
把在 Task Queue 裡等待的第一個 `callback` `function` 放到 `stack` 中去執行。

好啦！解說到此，應該可以理解下面這張圖：

> Web APIs function 執行路線圖

![post-無痛理解 JS | 非同步怎麼運作？/ pic-1](//images.ctfassets.net/8er52l3j5u76/7pw1IKpcx5FVqt6eZWv7ko/8ec69bf3d116f547f2ee50b5a26e1eea/pic1.png)

### 非同步可以解決的事

非同步的設計是讓需要執行較久時間的程式能夠移到別的地方去執行，
不要阻塞到 Main Thread(Call Stack)，
讓程式能夠暢通在 Call Stack 上執行。

### 舉個實例，以前面提的滑鼠點擊為例

```javascript
console.log('Started.')

$.on('button', 'click', function onClick () {
 console.log('Buttton Clicked!')
})

console.log('Done.')
```

- `Started` console 會執行，會先進入 `Call Stack` 中，再來執行滑鼠事件 `click` function，最後執行 console `Done`

- `click` 為 `Web APIs`，所以之後會從 `Call Stack` 脫離到 `Web APIs`

- 滑鼠點擊後，callback 就會到 `Task Queue` 中。`Event Loop` 在偵測 `Call Stack` 為空時，便會把 callback 放到 `Call Stack` 中去執行， `onClick` 這個 function 就會執行

![post-無痛理解 JS | 非同步怎麼運作？/ pic-2](//images.ctfassets.net/8er52l3j5u76/1nsHqQQLGIG6ocMGshWvf0/05d51e6c040feaa9d8a66ebe5b433717/pic2.png)

所以我們可以理解為在點擊滑鼠時，
onClick function 並不會立即執行，
會先到 Task Queue 中等待，
直到成為 Queue 中第一位且 Stack 為空時才會執行！ 

![](https://i.imgur.com/r5GRuQc.gif)

> 操作自 [Loupe - by Philip Roberts](http://latentflip.com/loupe/?code=Y29uc29sZS5sb2coJ1N0YXJ0ZWQuJykKCiQub24oJ2J1dHRvbicsICdjbGljaycsIGZ1bmN0aW9uIG9uQ2xpY2sgKCkgewogIGNvbnNvbGUubG9nKCdCdXR0dG9uIENsaWNrZWQhJykKfSkKCmNvbnNvbGUubG9nKCdEb25lLicp!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)： Loupe 是一個由 Philip 做的視覺化工具，對瞭解 Javascript function 執行流程很有幫助

以上為 JS 如何在 `Single Thread` 下實現看似擁有 `Multi Thread` 的效果。

# 再來幾個例子

筆者在學習這個概念查找資料時，發現了一場精彩[演講](https://www.youtube.com/watch?v=8aGhZQkoFbQ&index=42&list=WL&t=32s)：`What the heck is the event loop anyway?` 講解頗為精闢，於是下面擇幾個非同步相關例子與讀者分享。

## 非同步的 AJAX Request

Philip Roberts 曾在 JSConf 舉使用屬於 WebAPIs 的 [AJAX](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX) 抓取資料的例子：

```javascript
console.log('Hi')

$.get('url', function cb(data) {
 console.log(data)
})

console.log('JSConfEU')
```
因為 AJAX 為 `WebAPIs` 其中一種，所以並不在 Javascript Runtime 中。

- console `Hi` 會先執行，再來 AJAX 執行請求，這時 callback 移到了 `Web APIs` ，然後 console `JSConfEU` 緊接著執行

- AJAX 發出的 request 回應後（success 或 error），callback function 會移到 `Task Queue` 中 

- `Event Loop` 在偵測 `Call Stack` 為空時且 AJAX callback 在 `Task Queue` 的第一位時，就會把 callback 丟到 `Call Stack` 中執行

所以執行結果為：

```
Hi
JSConfEU
data(類型可能為 xml、html、text、script、json）
```

![post-無痛理解 JS | 非同步怎麼運作？ / pic-3](//images.ctfassets.net/8er52l3j5u76/7hFOCzZNRJhZAHqLAzp0he/9ca003b02c1e41b3701443777a3d4df8/pic3.png)

非同步讓 AJAX 從 sever 抓取資料到 client 的時間，`可以讓 Javascript 並行(非同步)做別的事`，減少阻塞程式運行的機率。

## setTimeOut 不是真的就在那幾秒之後執行 callback function

```javascript
setTimeout(function timeout() {
 console.log('5sec later?')
}, 5000)
```

> 點我看 Loupe [視覺化](http://latentflip.com/loupe/?code=c2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coJzVzZWMgbGF0ZXI%2FJykKfSwgNTAwMCk%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)

這會怎麼執行呢？

- `setTimeOut` 是屬於 `WebAPIs`，在執行 `setTimeOut` 時，會從 `Call Stack` 跳出至 `WebAPIs` 執行
- `callback function` 經過 5 秒後會跳至 `Callback Queue` 
- 等待最後跳至 `Call Stack` 被執行

這整個過程中，其實已經花費不只 5 秒，也就是說 `setTimeOut` 只能保證`最小執行時間是 5 秒`，但並不能說 `執行時間是 5 秒`。

## Callback Queue 阻塞：scroll event

scroll 屬於 `WebAPIs`中 `Events` 的一種，一般在捲動滑鼠時，短時間內會頻繁的送出 scroll 的 event，造成 DOM 節點不斷的重新運算， `Callback Queue` 阻塞，滑動的頁面會非常的遲緩。

要解決這個問題，lodash 有提供 [throttle](https://lodash.com/docs/4.17.15#throttle) 跟 [debounce](https://lodash.com/docs/4.17.15#debounce) 兩種 method 可以快速方便解決。

# 結語

講到這裡，我們可以理解文章開頭所舉的例子了吧！
> 點我看 Loupe [視覺化](http://latentflip.com/loupe/?code=Y29uc29sZS5sb2coJ1N0YXJ0Jyk7CnNldFRpbWVvdXQoZnVuY3Rpb24gdGltZW91dCgpIHsKY29uc29sZS5sb2coJzBzZWMgbGF0ZXInKQp9LCAwKQpjb25zb2xlLmxvZygnU3RvcCcpOwoK!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)

我們也可以清楚的知道 Javascript 如何非同步運作，達成同時具有同步以及非同步的特性。正因為如此，Javacript 是一個極為靈活彈性的語言，能夠悠遊於前端與後端，無往不利！

#### 參考資料： 

- [Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014 @ JSConf](https://www.youtube.com/watch?v=8aGhZQkoFbQ&index=42&list=WL&t=32s)
- [[筆記] 理解 JavaScript 中的事件循環、堆疊、佇列和併發模式](https://pjchender.blogspot.com/2017/08/javascript-learn-event-loop-stack-queue.html)

---

> 👩‍🏫 __課務小幫手：__
> 
> ✨ 想掌握 JavaScript 觀念和原理嗎？
>
> 我們有開設 📒 [JavaScript / jQuery 前端開發入門實戰](https://5xruby.tw/courses/javascript) 課程唷 ❤️️
>

post-無痛理解 JS | 非同步怎麼運作？/ cover

無痛理解 JS | 非同步怎麼運作？

Cover Letter ，又稱自薦信，是左右投履歷時面試官第一個接觸你印象的重要工具。
教求職者寫履歷的文章很多，教寫自薦信的相對卻少了不少。其實自薦信對於是否能獲得面試邀約至關重要，五倍紅寶石今天就來幫你揭秘，為什麼自薦信如此重要。

自薦信正如同你在認識新朋友時，給對方的第一印象。他是履歷的精華版，必須要一眼就讓要約面試的人資對你產生好奇。

常見的自薦信錯誤如下：
## 1.太過求職者角度出發

![post-面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼 / sample-2](//images.ctfassets.net/8er52l3j5u76/3KjkNCrMpJMPk3mJIYXjkn/58259de28ea3cf67cfcded987da4afc3/sample.png)

撰文時只著重於自己的感覺：「有興趣」「很好玩」，會給人資一種「訊息與本職缺無關」的感覺。要表達對本職缺熱情的時候，不要忘記加上「對這個職務的不可或缺性」，才能抓住人資的眼球，願意點開你的履歷，用更多時間來認識你，甚至發出面試邀請。
 

## 太短或太長

對人資來說，一天會收到的履歷從幾十封到上百封都有可能。太短的自薦信無法讓人印象深刻，而太長的自薦信則是為人資增加閱讀的困難。若再合併下一點的問題，就很容易讓人資直接跳過。記住，自薦信最長也請落在300字，如果沒有辦法在30秒內朗讀完，那就是太長的自薦信。
 

## 自薦內容與職缺需求沒有直接相關

這裡我們用幾個合格範例和危險範例來說明：
 
 
《範例一》
> 目前任職OOOO，累積 2 年 B2C 、 B2B 電商行銷經驗。負責經營的渠道平均成長率最低可達 OO% 以上（詳情請見中文履歷或作品集）。除此之外我對 OOO（求職公司的領域）也有著極大的興趣。除了額外進修了本領域的知識外，也希望能有機會瞭解 OOO（求職公司的產品）。甚至期許自己能發揮所長，將這個產品（求職公司的領域及產品）推廣給跟我一樣有這種需求的初學者。
> 由於有平台端的行銷經驗，對產品安排宣傳、規劃廣告預算，甚至是使用 HTML 編輯 EDM 等，我相信我皆能在短時間內掌握這些工作內容。也希望有機會面試貴公司的「 OOOO 」一職，與貴公司一同打造最棒的服務，成為本產業的領航者。

以上這個範例，非常具體寫出他的專長以及與本職缺相關的興趣。且文章不會過長，很好閱讀。
 
 
《範例二》
> 主管您好，我叫 OOO，過去有超過三年的時間都在教授語言。大學的寒暑假期間做過許多行銷業務的工作，如：販售商品、展擔任銷售人員、資訊公司業務。對於科技新知一直都非常有興趣，貴公司是一個非常棒的環境能夠讓我學習。我願意發揮所長在貴公司擔任 OOO 一職，謝謝

人資心裡話：謝謝你願意發揮所長，可是我還沒有看到你的所長...
 
 
如果沒有相關經歷，切勿在自薦信裡曝露弱點，而是應該在自薦信裡提出為什麼你（雖然經歷不足），卻是最有潛力成為本職缺的適任者。可以主打你的人格特質，畢竟認真又積極的工作態度，再加上勤奮，沒有公司會不喜歡。
 
 
《範例三》
![post-面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼 / sample-2](//images.ctfassets.net/8er52l3j5u76/47RpiMcQHodNRs4L3CfTee/09dfd332de7fca59a45657ef6ca37a0e/sample2.png)
這種訊息雖然看似罐頭，卻用普世認可的成功價值當釣鉤引起人資好奇：「該求職者如何讓公司的收穫大於在他身上的投資？」因而點開了履歷。
 
 
《範例四》
有些人試圖加入一些創意，反其道而行：
> 關於OOO職位，我認為應有以下能力： 
> 一、文書作業能力 
> （下略300字，說明自己擁有的證照與文書作業能力） 
> 二、溝通協調能力 
> （下略二百字，說明如何溝通協調） 
> 三、積極求知、學習能力 
> （下略一百五十字，說明他的學習能力） 
> 四、團隊合作能力 
> （下略一百字，說明團隊合作學習能力） 
> 五、加分的英文能力 
> （下略五十字）
> 六、保持冷靜的能力
> （下略五十字）

這樣雖然也能吸引人資「喔？我來看看你的想法吧！」但因為落落長，簡直把自傳帶到自薦信裡來，也是需要盡量避免的。且如果人資不同意你提出的見解，也很容易造成「應該不適合」的先入為主觀念。

總而言之，自薦信磨的是「化繁為簡」、「抓重點」的功力，有些面試官也會從自薦信來判斷求職者的人格特質如何。不妨為每個機會各寫幾個版本，一方面磨練功力，一方面測試看看成效吧！

系列文章：

- [面試攻略(一) 初心者的三大面試攻略心法](/posts/3skills-of-interview)
- [職涯原力：善用企劃力，為自己的生命校正](/posts/career-power-planning)
- [職涯原力：解開千千結的邏輯力](/posts/career-power-logic)
- [想當工程師？學寫程式，只有這件事最重要！](/posts/to-be-an-engineer)

post-面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼 / cover

面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼

本文章同步刊載於[高見龍](https://kaochenlong.com/2020/03/24/equipments-for-video-recording-and-live-streaming/)的個人 blog。

網紅、Youtuber 當道，連我家讀小學的小朋友都請我幫他開通 Youtube 帳號，他說想要拍遊戲影片上傳（給誰看？）。就連我們自己做教學，也經常收到「請問你們的課程會有線上版本嗎？」的詢問，這表示「線上」這件事需求量只有增加沒有減少。

除了寫程式之外，我目前主要的工作是教學，線上課程跟線下教學都有，偶爾有校園演講及企業內訓。而這一波肺炎疫情的確也衝擊了我們線下實體課程，原本已經報名的同學有些人因不想冒險出門而取消報名，我相信這也讓更多同業想把教學的管道轉變到線上。

首先，要跟各位說的是，並不是請講師坐在電腦前面，接上麥克風跟鏡頭再打開軟體開直播就叫做「線上課程」了，實際上「線上課程」跟「直播教學」除了在製作的流程上稍有不同外，難度也有所不同。

台灣的學生本來就不太喜歡也不太習慣問問題，有經驗的講師通常可以在現場根據同學們的表情或肢體反應，得知道同學們是不是有卡關，但變成影片課程或線上直播之後，這個難度大大增加了，不僅同學可能更不會問問題，講師也沒辦法第一時間抓到誰有問題。但我想本文主要先介紹硬體設備篇，下一篇介紹軟體時再順便跟大家分享這方面的心得。

以下跟大家介紹我目前（或曾經）使用的硬體，但在往下看之前，請記得把重點放在「教學的內容」上。對於大部份的線上課程來說，即使聲音、影像沒那麼完美，只要畫面看得清楚、聲音聽起來不要太大聲或太小聲或是聽起來破破的，對「教學」這件事來說影響並不大。不要一昧的追求高檔設備，如果有夠水準的教學內容，即使只是用手機附的耳麥，或是直接用手機錄音再後製合上去也沒問題（事實上效果沒想像中的差）。

聲明：

1. 本文沒有廠商業配，以下提到的設備都是自己正在或曾經使用過的，但廠商如果想要給我錢，我會很樂意把錢捐給動物保護協會。
2. 因為我不是專業的音響設備達人，所以內文也不一定是客觀的評測或數據，而是我曾經或目前正在使用的設備。

## 聲音

### 麥克風

麥克風常聽到的種類，主要有「電容式」與「動圈式」這兩種分類，實際的的運作原理我就不特別探討（其實我也不懂），網路上應該可查到許多更深入的介紹文章。這兩種麥克風我都使用過，並沒有好壞的分別，而是用途不同。

「電容式」的麥克風靈敏度高，Gain 值不用開太高就能收到音。「[Yeti 雪怪](https://bluemic.com.tw/yeti/)」就是一隻電容式的麥克風，價位大概 5,000 ~ 6,000 之間，以麥克風來說不算太便宜但也不算太貴。而且因為是 USB 接頭，所以只要接到電腦就能使用，相當方便，早期的課程影片我都是用它錄的，效果還不錯。

然而，也正因為靈敏度較高，這表示相對容易收到不想要的環境音，例如冷氣或是電風扇運轉的聲音。把冷氣或電風扇關掉也是個選項，我也曾為了效果好一點而這樣做，只是如果在空氣不流通的地方或是天氣悶熱的時候就比較麻煩一點。不過還好雪怪有「心型指向」的收音，對麥克風正面的音源收得滿清楚的，只要環境音不要太明顯，後製的時候都還是能用軟體處理掉。

相對的，「動圈式」麥克風的靈敏度比較低，所以環境音比較不會那麼明顯。跟電容式麥克風比起來，我個人認為動圈式麥克風的音色顯得較為柔潤，也讓人的聲音更飽滿圓潤，或者說更好聽（我一直想要有像廣播電台的廣播員那樣的好聲音）。

動圈式麥克風，我選擇的是 [SHURE SM58](https://www.shure.com/en-US/products/microphones/sm58)：

![post-線上直播與錄製線上課程 - 硬體篇 / shure-sm58](//images.ctfassets.net/8er52l3j5u76/17d87HFzhEFvWtLjA4jJJc/db1bc282b0c7f89ea8a8126df968400f/shure-sm58.jpg)

價格大概台幣 3,000 左右，跟那些隨隨便便就破萬的高檔麥克風比起來，SM58 的價格算是相當親民。我後期錄製課程還有直播的時候都是用它，因為我的聲音頻率算是比較高而且聲音聽起來比較扁（就不是那種渾厚的嗓音啦），改用這隻麥克風之後，聽起來真的是比較好聽一點（自以為）。但整體來看，就以它的表現以及它的價位來說，我相當滿意。

不過要注意的是，SHURE SM58 的接頭是 XLR 的，也就是大家常說的 Cannon 頭，所以沒辦法像 USB 接頭直接接到電腦使用，通常會需要再接個外部的混音器或是有 XLR 錄音介面卡才能使用。

### 麥克風架

因為我在錄製課程的過程常常需要空出雙手敲打鍵盤，所以有個麥克風架就很重要了。常見的麥克風架有直接放在桌上的，也有懸臂式的，我兩個都有試過，桌上型的使用簡單，而懸臂式的因為沒有直接與桌面接觸，所以比較不會讓麥克風收到因為敲打鍵盤而讓桌子與鍵盤之間發出「咚咚咚」的撞擊聲（不是鍵盤聲）。

如果我是要做廣播錄音間或錄 Podcast，我會選擇懸臂式，因為它比較容易調整角度，但就以我自己錄製課程來說，我需要看著電腦螢幕，它懸在空間可能會剛好擋著我的視線。至於哪個比較不佔空間，我覺得這得先定義什麼叫「佔空間」，對我來說，一個立在桌上的跟一個懸在空中、要用的時候再拉下來，我覺得立在桌上的比較「不佔空間」，所以最後我就隨便在 PCHome 上選了一隻看起來底盤夠重的來用，目前仍然服役中。

那前面提到的桌面撞擊聲怎辦？後來想想，有鍵盤的敲打聲有 live coding 的真實感，其次好像這個聲響也不是那麼大聲，所以就這樣了。

### 防噴罩

在使用麥克風錄音的時候，有些字的發音比較容易有「噴氣音」，例如「PHP」的「P」或是「破壞」的「破」，因為在發這些音的時候從嘴巴產生的氣流比較大，容易在錄製的過程中產生「爆音」，產生的爆音即使在後製軟體裡也不容易處理掉。

所以常會在專業的錄音間看到歌手們跟麥克風之間還會卡一層像網子之類的東西，主要就是希望可以透過它減少噴氣音造成的爆音。（防噴罩也可以減少因為口水直接噴進麥克風而造成麥克風零件壽命縮短）。防噴罩常見的有尼龍製也有金屬製，我兩個都用過，我比較偏好金屬製，因為如果把手放在防噴罩後方，還是可以感受到氣流通過，但是被金屬網稍稍改變方向，比較不會直接灌進麥克風；相對尼龍製的防噴罩是「過濾」或「減低」氣流，所以我個人覺得錄出來的聲音聽起來有一點點悶悶的（但也沒很明顯就是）。

但不管是金屬製或是尼龍製，重點是它在我跟螢幕中間常會擋到視線，我覺得這樣有點礙事，所以後來就兩種都沒用。除了我在講話的時候有意識控制自己的噴氣音之外，也會把麥克風稍微側一個角度，讓講話時的氣流不會直接灌到麥克風裡造成爆音。

### 無線麥克風

如果是在電腦前面錄製課程，不管是電容式或動圈式麥克風，只要是有線麥克風就足夠了，但如果是現場授課或是在現場訪問其它來賓或學員但不想讓麥克風入鏡，無線麥克風就比一般有線麥克風更適合，也就是大家常會說的「小蜜蜂」麥克風。

無線麥克風我們使用的是 [Saramonic UwMic9](https://www.saramonic.com.tw/shop/wireless/saramonic-uwmic9/)

![post-線上直播與錄製線上課程 - 硬體篇 / saramonic-uwmic9](//images.ctfassets.net/8er52l3j5u76/3itBs0TJDv2TE3JzubqyET/cacb8d478e65ba24475fc05440b0fa35/saramonic-uwmic9.jpg)

由於我們的教室偶爾會有社群活動，所以我們在教室放了一組一對二的，而我自己家裡放了一組一對一的，使用機會不多，但如果有要在戶外拍攝就會派上用場。

另外，有專業的推坑朋友曾經建議我可試試槍型的指向麥克風，但就我們實際使用情境來說，可以別在身上的「小蜜蜂」會更適合一些。

### 混音器 Mixer

在最早錄課程的時候，我真的以為只要麥克風透過 USB 接口接到電腦，然後軟體開下去就可以錄了...嗯，是也可以錄沒錯啦，我當時也的確就是這樣錄，直到後來加了一台混音器之後才發現新世界。

我用混音器是 [YAMAHA AG03](https://tw.yamaha.com/zh/products/music_production/interfaces/ag_series/ag03.html)：

![post-線上直播與錄製線上課程 - 硬體篇 / yamaha-ag03](//images.ctfassets.net/8er52l3j5u76/6Hscn4MCItDoWKtcgVSfHZ/eea962d016db9800a93dbfe6279ae835/yamaha-ag03.jpg)

AG03 的價格大概是台幣 6,000 塊，另外有一個 AG06 型號，有兩個 XLR 接頭，其它的功能差不多，但價格稍微高一些，所以如果你只有一個 XLR 接頭設備的需求，AG03 應該是很夠用的。

它的面板單純，至少它的推桿數跟旋鈕數量不會多到太誇張。XLR 接頭剛好可以接我的 SM58 麥克風，上面也有可以接耳機或喇叭，在聲量太小的時候可以把推桿跟 Gain 值調高（不過調太高也容易收到雜音）。

同時它也可透過 USB 介面收到電腦來的聲音，所以如果電腦在播放背景配樂或是音效也能直接一併收進去。這個電腦來的音效有個旋鈕可調整混入的電腦音量大小，例如在直播開場等待時可把音量開大聲，準備開始時可以慢慢把音量轉小聲或關掉，相當方便，有機會後續我再另外拍影片操作一次給大家看。

另外，這款混音器有給電容式麥克風用的幻象電源，不過因為我後來都改用 SM58，所以也用不上它。

### 監聽設備

在後製線上課程的時候，為了不吵到旁邊的人，在剪片時常會戴上耳機。我自己平常工作時會戴著 QC-35（最近在外面會用 AirPods），戴上抗噪耳機的確很安靜，但就剪片來說反而不是好事，因為線上課程的觀眾不一定有抗噪耳機。為了避免我在課程製作過程與觀看者的感受差太多，我找了監聽耳機來解決這個問題。

監聽耳機跟一般耳機的差別：一般耳機為了滿足消費者，所以在輸出聲音的時候會做一些修飾或美化，讓聲音聽起來更好聽，而監聽耳機則是儘量不做修飾，比較能聽到「原始的聲音」。

因為我的頭比較大，所以頭戴式的耳機不太好挑，最後我選了鐵三角的 [ATH-M20x](https://www.audio-technica.com.tw/proddetail.php?id=717) 監聽耳機：

![post-線上直播與錄製線上課程 - 硬體篇 / ath-m20x](//images.ctfassets.net/8er52l3j5u76/uy5gd1F7lzx57ujV5E4xq/37b048240c0fd1e8a178da5e9fa37f2f/ath-m20x.jpg)

價位大概在 2,000 台幣左右。舒服感是比不上平常在戴的 QC-35，但這就不強求了。

監聽設備除了監聽耳機之外也有監聽喇叭。為什麼有耳機不夠還要喇叭？因為耳機是貼在耳朵上，跟讓聲音透過空氣傳輸之後的樣子可能有些不同（老實說我這木耳聽不出來什麼差別），專業音樂製作人可能還需要使用監聽喇叭來聽聽效果。

現在在自己家裡服役的是好多年前買的便宜喇叭（應該是幾百塊台幣），本來也想敗一組監聽喇叭，但掙扎到現在都還沒下手，主要是因為監聽喇叭的價位隨便就破萬之外，就以我只是要做線上課程的用途來說，大部份的學員應該都是戴著耳機收聽，這樣光是使用監聽耳機進行後製應該就很足夠。

我曾經發生過錄了快一小時的課程影片，結果才發現麥克風沒開，只好整段重錄。所以如果各位有看過我後期錄製的線上課程或直播，就會發現我現在大多會戴著耳機講話，主要原因就是可以即時聽到收音的音量，錄課程的時候比較不用擔心收音問題，同時在直播的時候也不用一直問觀眾有沒有聽到聲音。

## 影像

在錄製影片課程的時候，講師要不要露臉是個問題。這並沒有標準答案，如果是錄製寫程式的過程，因為有編輯器的 live coding 的畫面，所以倒還好（露臉的講師反而有時候還會不小心擋到畫面）；但如果錄製的課程只是靜態的投影片，可能比較容易讓收看的人覺得悶而容易睡著。

但不管如何，我都會露臉，畢竟教學是我主要的工作，站上台在人前講話這件事也沒什麼好逃避的，趁這個機會多少訓練一下也不錯。

我的筆電（Macbook Pro）雖然有內建鏡頭，但它被綁死在筆電上，遠近跟角度都不太好橋，雖然我也想過用更專業的 DV 來拍，但想想其實我並不是要賣臉（也不是靠臉吃飯的），即使解析度沒那麼好倒也不是什麼問題，所以最後我是選用羅技的 [C930e](https://www.logitech.com/zh-tw/product/c930e-webcam) Webcam，價錢大概 3,500  ~ 4,000 台幣之間，它的設計可以讓我不需要另外準備腳架，直接就掛在電腦螢幕上還能調整角度：

![post-線上直播與錄製線上課程 - 硬體篇 / logitech-c930e](//images.ctfassets.net/8er52l3j5u76/6uQFF412fVYDFbCLHDIyGe/21e0bc57a8da8f7755b2ed599620cab0/logitech-c930e.jpg)

這台本身也有麥克風可以收音，但因為通常 Webcam 的擺放位置比較遠，加上我已經有其它麥克風，所以就沒用它收音了。它有附一個鏡頭的蓋子，平常沒用的時候可以蓋起來，可以防塵還能避免不小心開到直播然後就播出不該看的東西出去了。

## 其它外掛設備

基本上以線上課程錄製來說，聲音跟影像的應該就上面這些設備就已經足夠了，但我們還另外加了一些外掛設備，讓畫面跟操作流程更好一些。

### 燈光

我錄製課程的地方（公司及家裡），燈光原先都不是為了錄製課程而設計的，所以可能會有太亮或太暗的問題，為了解決這個問題，我們在公司擺了一台俗稱的「網美燈」（全名是樂華 ROWA RL-288A 環形 LED 補光燈）：

![post-線上直播與錄製線上課程 - 硬體篇 / rowa-rl-288a](//images.ctfassets.net/8er52l3j5u76/12yckLcphtLR1TjsA5CA9c/c84abdf94bc0eee2fabfbb509a747ac4/rowa-rl-288a.jpg)

加購腳架大概 5,000 台幣，原本想說可以在講者的瞳孔有個漂亮的圈圈，但因為我有戴眼鏡，所以沒辦法漂亮的呈現，反而會在眼鏡上造成環形燈的反光。

而我在家裡擺了另一組補光設備，型號是 [Viltrox VL-200T](http://viltrox.com/en/index.php?m=index&a=show&cid=152&id=197)：

![post-線上直播與錄製線上課程 - 硬體篇 / viltrox-vl-200t](//images.ctfassets.net/8er52l3j5u76/41PksU6P94JKEsMeeU26zF/d9f6b983dcab94065a16b9f23b9d581c/viltrox-vl-200t.jpg)

最後入手價格忘了（Amazon 上應該可以查到），這是跟網紅講師 Amos 一起團購的。一套 2 組燈，分別放在我座位左右的斜前方。

而且它有附遙控器，我不需要站起來就能控制燈光的開關、亮度跟色溫，挺方便的。

![post-線上直播與錄製線上課程 - 硬體篇 / viltrox-vl-200t-remote](//images.ctfassets.net/8er52l3j5u76/4teUhaRXLdBvMztSUgl6Qx/7f72d11bf5eb197834115426cd7096fb/viltrox-vl-200t-remote.jpg)

整體來說，如果錄製的影片講師有露臉的話，有適當的補光，畫面看起來會好一些。(看看我比較早期的影片整個臉都死白）

### 直播輔助設備

在錄製課程或直播的過程中偶爾會需要切換軟體（投影片、瀏覽器、終端機、編輯器畫面等等），或是偶爾想要播放音效或背景音樂，在以前都是手動切換或是播放，直到幾個星期前才入手一台很多遊戲實況主都有在用的「直播神器」，就是 elgato 的 [Stream Deck](https://www.elgato.com/en/gaming/stream-deck)：

![post-線上直播與錄製線上課程 - 硬體篇 / stream-deck](//images.ctfassets.net/8er52l3j5u76/4NtAuAdxDPGbeIq7ooOHTX/bec1b74e52922cceffbf29ad369f2a1d/stream-deck-1.jpg)

我用的是 15 顆按鈕的，價格大概是 5,000 台幣，但 15 顆按鈕其實已經相當足夠，32 顆版本對我來說反而太花，會讓我有選擇障礙。

一開始我想說這個大概就是硬體版的按鍵精靈之類的東西（的確也是沒錯），但實際用了才發現這可讓我省不少事，不只不會切換畫面（我相信大家應該不會想在直播的時候不小心切到聊天軟體的畫面...），而且還能很快的播放設定好的背景跟音效，有點相見恨晚的感覺。

![post-線上直播與錄製線上課程 - 硬體篇 / stream-deck2](//images.ctfassets.net/8er52l3j5u76/2ttxQvOwTIWwWAJMVSyVOS/38e81343ed433f81eb611c2ad67c6b6d/stream-deck-2.jpg)

我下回也可再拍段影片跟大家介紹（推坑）會比較有感。雖然大家說這是直播神器，但在現場教學也相當方便，所以現在我在公司跟家裡各放一台，免得帶來帶去，而且也讓我們的講師使用。

## 錄音環境

前面介紹了這麼多，其實漏了一個很重要但可能不容易改善的環節，就是錄音環境。有再高檔的麥克風，如果在糟糕的環境底下，錄出來的品質也會大打折扣。

如果原本就有安靜的錄音環境，那很好，但如果沒有的話呢？密閉且靜止的車子也許是個不錯的選項，但可能要注意電源還有穩定度的問題，千萬不要邊開車邊錄，安全第一。

如果沒有車子，可以試著把家裡的衣櫃，把錄音設備放在裡面然後對著它講話，因為麥克風的週圍都是布料，所以收音效果挺好的。我自己試過，其實這效果挺好的，但因為我的衣櫃不大，所以在裡面要再放電腦或是其它螢幕就沒辦法了。

或是，也可考慮找一些隔音板或隔音棉在錄音設備週圍隔一個小空間出來也是一種做法，生命總是能自己找到出口。

## 小結

不管使用的設備高檔或入門，請記得把重點放在「內容」上，即使用一般等級的筆記型電腦內建的麥克風跟鏡頭，或即使是一隻已經用了三、五年的智慧型手機搭配用自拍棒，都可以錄出好的內容，不要追求高檔設備，你並不是要弄一間專業的錄音工作室。

能夠錄出好的內容的設備，那就是好設備。

下一篇，再來跟大家分享我在直播或錄製影片時所使用的軟體以及心得。

--待續--


post-線上直播與錄製線上課程 - 硬體篇/cover

線上直播與錄製線上課程 - 硬體篇

相信大家都聽過這種話：

學長姐或老師說，第一份工作最重要，會決定未來職涯。因此職場新鮮人在面試時很容易緊張，給自己過多的壓力。

也有人在給求職者的面試建議說，履歷得精準扼要，才能夠獲得面試的門票，但對沒有經驗的社會新鮮人來說，可以講的內容已經不多，再「簡」下去自己看了也怕，面試時反而無法有自信地表現。

關於面試技巧，在網路世界總是眾說紛紜，沒有準則，不知道參考誰才好。

究竟在找工作或轉職時該用什麼技巧來為自己面試加分？
五倍紅寶石程式教育機構綜合多年經驗，歸納出三點攻略心法，分享給剛入社會，或準備轉職、在新領域從零開始的你，為求職者揭開面試官心理，幫你在面試中順利晉級。
 

## 心法一：給面試官「可投資」的想像

當面試官請新手來面試，他們某種程度就是願意投資，願意培育新鮮人。

新手沒有實戰經驗很正常，所以面試官將更看重過去的學習曲線，以及面試中未來表現出積極規劃自己的成長慾望。

比如說，假設你今天應徵的職位是網頁設計師，面試官就會想知道你過去在學或私人生活上，是否都有主動加入網頁設計專業相關的規劃？甚至延伸一點，因為經驗只能靠時間累積，而你是否願意去進修累積知識，表達強化技能的學習意願？

學習主動性代表熱情，而熱情代表成長更可預期。

所以沒有面試官不喜歡願意進修的員工，願意進修不只代表該員工的工作表現比別人更可能從 A 到 A+，更展現對工作負責的態度。

### 在面試時，請多多提到你將如何努力去補足經驗的不足，給面試官更多信心，讓他們覺得你就值得投資！
 

## 心法二：展現可「移動」的能力

工作上有許多超乎專業技能之外，但跟專業同等重要的能力，例如抗壓度、邏輯性、協調性。

這種能力與人格特質有關，大都由性格決定能力強弱。但常能決定一個人在組織裡的地位，以及升遷時是否能卡到更好的位置。這些能力還有一個特點：各行各業各種位置都適用。

### 對於缺乏實戰經歷的新人來說，不妨好好思考如何讓面試官感受到你人格特質的強大，讓面試官能想像你加入團隊後，如何讓團隊產生正面化學效應。

譬如過去在學校或其他工作時，如何化解團隊意見矛盾，如何排解挫折與摩擦，這些都是在面試時能讓面試官對你人格特質更有信心的回答。

面試跟戀愛很像，如果你覺得跟這個人在一起有機會變得更好更快樂，你又怎能不被對方吸引呢？
 

## 善用「問題」搜集情報

工作不只為生活，更為如何讓你的人生活出自己想要的樣子。

為了找到無論組織文化或職位發展都最符合你需求的工作，善用問題，不但能抓到更多面試官沒說的資訊，也能讓面試官留下深刻的印象，覺得你對工作的積極熱情和其他面試者不同。

讓人印象深刻的問題有什麼呢？

舉例來說：

* 「未來三年公司的發展目標」：問這個問題會讓面試官覺得你有遠見，願意放眼未來，和公司一起思考如何達成遠大目標。不論身處任何位置，對主管來說，員工是為了要幫助主管達成任務，所以讓對方感覺到你願意為他的使命努力，會是一大加分。

* 「這個職位未來發展的可能性」：這個問題面試者該為自己而問。在新領域求職時，往往因為經驗不夠，很難知道自己『想要』什麼，但判斷什麼『不要』則相對簡單。用問題去釐清你的『要』以及『不要』吧！如能釐清有多想要 / 或是不要這個職缺，你職涯的下一步將會更清晰。你也可以藉此判斷這個職位公司怎麼看待，該如何適應，是否符合生涯規劃。

* 「過去這個職缺都是什麼特質的人呢？」：這個問題有助你判斷該職缺需要的能力。如果面試官的答案讓你發現這個能力是你正要培養 / 已經具備的，就能用這個問題借力使力！假設面試官的回答和你期待的 / 擁有的不同，你也將更能判斷自己還有什麼進步空間。然後下一步，就用心法二去解！

面試是一個互相了解的過程，即便你身為新手，自覺實戰經歷不夠，也要勇於問問題，善用聰明的問題幫自己加分。每次面試都是讓你升級的機會，勇敢去試，勇敢發問，勇敢讓面試官記住你吧！

系列文章：

- [面試攻略(二) 藏在自薦信 ( Cover letter) 裡的魔鬼](/posts/3skills-of-interview-2)
- [職涯原力：善用企劃力，為自己的生命校正](/posts/career-power-planning)
- [職涯原力：解開千千結的邏輯力](/posts/career-power-logic)
- [想當工程師？學寫程式，只有這件事最重要！](/posts/to-be-an-engineer)

post-面試攻略(一) 初心者的三大面試攻略心法 / cover

面試攻略(一) 初心者的三大面試攻略心法

> 圖片來源：Steve Johnson

 

## 前言
> 色彩可以區分出品牌的獨特性、資訊的層級性，抑或是影響使用者瀏覽的感受。
> 此篇文章將分享色彩的重要性、如何學習配色。

 

### 為什麼色彩這件事很重要？

接續上一篇[如何著手設計你的第一個網站？](https://5xruby.tw/posts/design-first-website/)我們談到該如何想像你的客戶、蒐集靈感等，這一篇將會更近一步的談**『色彩』**這件事。
如果你是非設計本科或是正在轉職成設計師的新人，應該很難想像設計或藝術相關科系為什麼會將**『色彩原理』**獨立成一門課，甚至有專門研究**色彩**的公司。
打開你最常使用的 APP ，想像他們的介面只有黑線像 Wireframe 沒有任何顏色，只有黑和白、線和文字，那會是蠻令人崩潰的事。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / none color](//images.ctfassets.net/8er52l3j5u76/1u7cZwSAnMqWYnHiLOaMaL/d0d21f11c35b72658102fc45c720dcb8/none_color.jpg)

>在沒有色彩之前，這時我們可以留意到線條的粗細、文字的大小、多寡、留白等，但加上色彩後，它就變得有個性、獨特而活潑的。
這也是我們接下來要談的，該如何適當的配色，使得畫面有趣、具有品牌獨特性。

 

 

## 第一步 | 色彩意象，顏色也是有感覺的？
色彩意象，就像是深藍色想到的是憂鬱、沈穩、經典的，而黃色則是活潑、年輕的、充滿活力的這樣的描述；但這些描述不是絕對，有時也會因為配色或環境、時間而有所不同，像是紫色在過去是象徵帝王的顏色，因為過去紫色較難採集和生產的顏色，所以只在貴族或帝王的服飾才能使用；但在現代紫色卻有不同的意象，像是前衛、流行、大膽的。 [註1]

抑或是電影『[藍色是最溫暖的顏色](https://zh.wikipedia.org/wiki/%E9%98%BF%E9%BB%9B%E5%B0%94%E7%9A%84%E7%94%9F%E6%B4%BB) 』跳脫了一般人認為藍色是冷的、憂鬱、沈靜的意象，對女主角來說藍色是最溫暖的顏色。

這些都說明了顏色在不同的情境、時間、文化脈絡下，會有截然不同的意象。所以千萬不要和設計師說：我要一個<del>憂鬱的紅色或藍色</del>。

設計師只能盡力營造出憂鬱的氛圍，但不一定會使用藍色，也許是黑色也不一定，再者**沒有一個色彩意象是絕對**，意思是上述對於色彩意象的描述如：藍色是憂鬱、黃色是活潑等，是一個大部分的人同樣擁有的感受，你可以透過不同顏色配色、情境等方式，營造出完全不同的意象。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / blue and yellow](//images.ctfassets.net/8er52l3j5u76/2YDmKJdO5zYoUempltvM5y/61886c9b729ea10f5f75f7780b3728de/blue_and_yellow.jpg)

 
 

## 第二步 | 如何選擇適合的顏色？
當你已經知道顏色是具有畫面、感覺的，那麼究竟我們要怎麼選色呢？或配色呢？
你將要設計的網站或 APP 他是哪類的產品？他的目標族群是誰？有他的企業品牌色嗎？

一般來說，如果是設計企業的官網、APP 或延伸產品，通常會沿用企業的品牌色去加深使用者對品牌的形象，讓使用者在不同的情境下，接觸到產品都能連結到品牌，常見的例子有 foodpanda ( APP 主色到司機的外送袋)、Starbucks 的深綠色、LINE 的亮綠色等等；這些品牌只單純描述文字，你的腦中或多或少都會有品牌的 Logo 形象，這些都是品牌顏色使用的成功案例。
但你應該也會想到某些品牌，很難描述他的品牌色，像是 Google / Microsoft 這樣多色系的品牌，通常象徵著多元、創造、豐富的，無法用單一顏色涵蓋品牌的特性。

因此，如果你在設計時已經有品牌的產品，請先確認品牌的主色、輔色的使用規範，然後在設計時加入，以維持品牌一制性，至於這些顏色應該怎麼使用，將在下一個步驟介紹。

如果，你是一個 Side Project 或是你將創造一個新的品牌，可以嘗試以下這幾個步驟：

#### 1. **定義你的網站或假設你的 Side Project 是給哪些使用者？**
這部分可以回到[上一篇文章](https://5xruby.tw/posts/design-first-website/)將想到的形容詞、圖像畫面寫下來。他的使用者是男生？女生？年輕族群？小資族？還是青少年？

#### 2. **你想要給使用者什麼樣的感覺？**
依據上面想到的形容詞和畫面，我們可以深入地想像，我想要給這些使用者什麼樣的感覺？是活潑的？專業的？還是熱情的？

#### 3. **蒐集這些感覺讓你聯想到的圖、電影或畫面**
這算是我在做品牌設計或網站顏色定調一個很重要流程，如果我不確定畫面的氛圍、形象，要怎麼營造，我會想著我看過什麼樣的電影、影集或品牌給我一樣的感覺？他們的顏色氛圍是什麼？

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / The Grand Budapest Hotel Colors](//images.ctfassets.net/8er52l3j5u76/2egHkqT0Xhoesr1wxm8xSn/8c5883cbb28b0df359c2f5590af7ccb7/The_Grand_Budapest_Hotel_Colors.jpg)
> [歡迎來到布達佩斯大飯店 (The Grand Budapest Hotel)](https://www.imdb.com/title/tt2278388/?ref_=tt_mv) 中的場景因為和諧的配色和構圖，像是使用粉色系或高飽和色系，以及對稱構圖、 使得每個鏡頭都有一種精緻感。



![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Ready Player One](//images.ctfassets.net/8er52l3j5u76/3TGzb0kAtTz1wlWd8QJNNg/7da2ee9f582361bddd2586a869eac253/Ready_Player_One.jpg)
> 相較於布達佩斯大飯店，[一級玩家 (Ready Player One)](https://www.imdb.com/title/tt1677720/?ref_=ttmi_tt) 大量使用[賽博龐克 (Cyberpunk)](https://zh.wikipedia.org/wiki/%E8%B5%9B%E5%8D%9A%E6%9C%8B%E5%85%8B) 風格的配色，這樣的配色具有科技、前衛、未來感。

 

除了電影外，也可以透過 [Pinteset](https://www.pinterest.com/) 或 Google 搜尋你想到的設計作品或藝術作品，為什麼這些作品給你這些感覺呢？試著觀察他們的配色和主色。
或者你也可以瀏覽下面這些色彩部落格，作者將照片歸類出顏色，下次你也可以嘗試將你蒐集的照片歸類出配色！

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Color Palette](//images.ctfassets.net/8er52l3j5u76/3IMPeqBkzmSxbTS2JIKS7p/4bb3750f533e5c5bd467618d94df8b20/Color_Palette.jpg)

* [Design Seeds](https://www.design-seeds.com/blog/)
* [Ave Mateiu](https://avemateiu.com/color-palettes/)
* [Pinterest | Color Palette](https://www.pinterest.com/search/pins/?rs=ac&len=2&q=color%20palette&eq=color&etslf=4930&term_meta[]=color%7Cautocomplete%7C1&term_meta[]=palette%7Cautocomplete%7C1)

 
 

## 第三步｜主色、輔助色，是什麼呀？我該如何配色？
當你確立好你想要的顏色，接下來就是配色！
配色在色彩學當中是相當重要的一環，生活上也經常會使用到，像是衣服的配色、室內裝潢的配色等。

#### 首先決定主色！
主色顧名思義就是「主要的顏色」他是代表品牌的顏色，可能是單一個顏色、雙主色或漸層色，如果你沒有品牌色彩的話，翻翻前一步你蒐集到最多的顏色是什麼？這個顏色符合你所想要表現的感覺嗎？
有的話將它找出來吧！決定他是主色。

#### 還有輔色！
輔色又作「輔助色」，輔助色的存在是為在讓主色與品牌更完整的顏色，是屬於次要的、一般性的。單色、多色、灰階色、彩色都有可能。

輔助色可以引導使用者區分出主要和次要的資訊，除了讓品牌形象完整外，也讓使用者瀏覽時具有層級性。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Starbucks color](//images.ctfassets.net/8er52l3j5u76/7fcccBp08zo3cq9PxWzKrt/b1fa8286125082ee18fa745e085bb0c2/Starbucks_color.jpg)
> 關於品牌色彩應用，可以參考 [Starbucks 提供的品牌視覺規範](https://creative.starbucks.com/) ，這邊可以看到 Starbucks 如何將品牌色運用在網站、店面、產品上。

更詳盡的色彩意象、色彩專有術語，可以參考：[設計配色完整攻略：色彩意義、色彩理論、色彩心理學讓您一次擁有！](https://www.shutterstock.com/zh-Hant/blog/complete-guide-color-in-design)

 

 

## 第四步｜先別急著上色！使用灰階稿引導你。
當你已經決定了主色和輔色時，這時你可能會有超過 3 個以上的顏色，那麼你該怎麼決定哪些顏色應該大量使用？哪些顏色又應該減量使用？

 

### 1. 使用灰階稿區分資訊、視覺重心。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Add colors step-1](//images.ctfassets.net/8er52l3j5u76/4XqlLGq3t1fO40E6DpqCmb/fce50dc23674a46cbb9fc4d4e628f3ec/Add_colors_step-1.jpg)
>你可以先將網站的其中一頁或 App 其中一頁，先製作灰階稿，依據資料的重要性，重要到一般資訊，區分出三至五個層級，分別先用不同深淺的灰色排版。

 

### 2. 加入顏色與圖片

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Add colors step-2](//images.ctfassets.net/8er52l3j5u76/3np2Zd2cTfVCn4mOiG3NmS/8d94e276065a3f000f2bbfa31b8d91ae/Add_colors_step-2.jpg)

>這時你可能會意識到，有些區塊加上主色可能反而不好閱讀，抑或是反而太多主色導致無法區分主要或次要性；接著我們再適時的拿掉主色換成深灰色或黑色呢？

 

### 3. 重複試驗到完成

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Add colors step-3](//images.ctfassets.net/8er52l3j5u76/24VjSEK1h8BZZr8J1uWA0w/b2e1213cdaab52b7d0d8efae64b042ac/Add_colors_step-3.jpg)

> 經由這樣一步一步的嘗試、修改，你將會多種的配色可能；盡可能的想像這樣的配色主要和次要的資訊是可以區分出來的嗎？是否符合這個品牌、是否符合你想要營造的氛圍？

 

#### 會不會有例外的規範顏色？
屬於例外的規範，可能是需要考慮像是 `狀態性` 的顏色，像是表示警告、禁用等狀態顏色呢?

這邊可以參考 [Bootstrap](https://getbootstrap.com/docs/4.4/components/buttons/) / [Tailwind](https://www.tailwindcss.cn/components/alerts) 的按鈕或狀態顏色設定，這是一般常用的顏色設定，你可以依據你的品牌做調整，讓這些顏色出現在你的網站或 APP 時不至於突兀。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Bootstrap alert color](//images.ctfassets.net/8er52l3j5u76/2J4GqkwO6KqwTld5a6JlJi/f2fc2cfcb7c86b56767b06dec6102919/Bootstrap_alert_color.jpg)
> 仔細想想我們常見的 `狀態結果顯示` 代表顏色，是不是也在生活中也有相同象徵？

 
 

## 第五步｜多練習、嘗試，配色沒有絕對的公式和規範。
在你嘗試第一次配色，可能會花很多時間都覺得哪邊怪怪的，這是很正常的，因為配色沒有一套絕對的公式、答案。
你可以先從一個畫面或是一張卡片進行小範圍的配色，再嘗試多個畫面；過程中你可能會想要所有顏色都使用，也有可能使用太少顏色導致畫面留白太多或過於呆板，但只要多嘗試、多蒐集靈感、多看，就能對配色越來越上手。

這邊分享我常用的選色或配色工具：

1. [Color Hunt](https://colorhunt.co/) ：很多美麗的配色。
2. [WebGradients](https://webgradients.com/) : 將漸層色建立成色票，可複製 CSS 並有 Sketch / Photoshop 外掛。
3. [Gradient Backgrounds](https://cssgradient.io/gradient-backgrounds/) : 漸層色工具集。
4. [Nippon Colors - 日本の伝統色](https://nipponcolors.com/#mizu) : 日本傳統色。
5. [HTML color codes](https://htmlcolorcodes.com/) : 可線上選色產生色碼。
6. [Adobe Color](https://color.adobe.com/zh/trends) : 可在探索連結內看到網友建立的配色外，也可以在趨勢看到色彩的流行趨勢。
7. [Awsmcolor | Instagram](https://www.instagram.com/awsmcolor/) ：配色分享。
8. [colours.cafe | Instagram](https://www.instagram.com/colours.cafe/) ：配色分享。

---
最後，謝謝你/妳的閱讀，如果對於上述配色有任何問題或是你有自己的配色流程、蒐集顏色的方式，都歡迎在以下留言！ :)

 

相關連結：

- 註1: [【色彩，原來如此】魔幻神秘又奢華！皇室御用色—紫色的故事](https://www.beautimode.com/article/content/84595/)

post-網站當中的色彩學｜如何選擇網站的顏色定調？/ cover

網站當中的色彩學｜如何選擇網站的顏色定調？

你有看過深色的便條紙嗎？

坊間好像比較少看到深色系的便條紙耶，雖然還是有，但大多數的便條紙都是以提醒效果比較好的、較醒目的亮色、淺色系為主，又或者是因為藍、黑、紅色的原子筆（文字顏色預設：黑）比較通用的緣故？總之，便條紙的顏色我要自己決定！！ <del>(任性)</del>

既然要自己決定背景色，那麼如何自動搭配較適合的文字顏色便是關鍵，試想如果選擇黑底又配上預設的黑字，大概要用全選反白或是開 DevTools 才能一探究竟了，如果要手動更改文字顏色又覺得好麻煩...本篇文章主要透過便條紙的自動配色，來介紹 SASS 的一些應用。

> Photo by AbsolutVision on Unsplash

## 首先，刻出一個基本的便條紙樣式

以下就背景色、文字、button 底色的搭配設定相關的部分來說明：

```html
// HTML
<div class="memo memo--bg-black">
 <header class="header">
 <a class="btn-change-bg-color btn"></a>
 <a class="btn-close btn">&nbsp;</a>
 </header>
 <div class="content">
 </div>
</div>
```

```scss
// CSS
$primary-color: #000;
$text-color: #fff;

.memo--bg-black {
 color: $text-color;
 background-color: $primary-color;

 .header {
 border-bottom: 1px solid $text-color;

 .btn-close {
 background-color: lighten($primary-color, 20%);

 &:before, &:after {
 background-color: $text-color;
 }

 &:hover {
 cursor: pointer;
 background-color: $text-color;

 &:before, &:after {
 background-color: lighten($primary-color, 20%);
 }
 }
 }

 .btn-change-bg-color {
 background-color: lighten($primary-color, 20%);

 &:hover {
 color: lighten($primary-color, 20%);
 background-color: $text-color;
 }
 }
 }

 .content {
 @include textarea($primary-color, $text-color);
 }
}

```

目前看起來的 memo 會是這樣：

![post-用 Sass 玩出自己的 Memo Style / memo-sample](//images.ctfassets.net/8er52l3j5u76/3p1RngNPF34eX0uQMFCkx8/05e472e854b7904f19bac02901dba8cd/memo-sample.png)

## 實作過程

接下來，就是我們要透過選擇背景顏色，自動產生適合文字顏色的實作過程：
 

### Step.1 - 決定基本文字顏色
1. 用來搭配深色背景的白色 `#fff`
2. 用來搭配亮色背景的深灰色 `#333`
 

### Step.2 - @function、@if、@else
1. 定義一個 `@function`，將背景色當做參數傳入
2. 在 `@function` 裡，以 CSS 的 lightness 數值為基準，再用 `@if`、`@else` 去判斷，`@return` 回傳符合條件的文字色碼

```scss
@function set-text-color($bg-color) {
 @if(lightness($bg-color) > 50) {
 @return #333;
 } @else {
 @return #fff;
 }
}

//使用方式：
background-color: $primary-color;
color: set-text-color($primary-color);

```
 

### Step.3 - @mixin
1. 重複的動作一次都會做 2 個：設定背景色、設定文字顏色
2. 使用 `@mixin` 將他們包在一起吧

```scss
@mixin set-background($bg-color) {
 background-color: $bg-color;
 color: set-text-color($bg-color);
}

//使用方式：
@include set-background($primary-color);
```
 

### Step.4 - 調整 button 的底色
1. button 底色設定為 $primary-color 再提高亮度 20%
2. 如果 $primary-color 本身亮度就很高的話，就將 button 底色改為降低亮度 10%
3. 將 `.btn-close` 以及 `.btn-change-bg-color` 關於顏色設定的部分歸納為同一個 class `.btn`，在 HTML 的部分要記得補上這個 class 哦

```scss
@function set-btn-bg($bg-color) {
 @if (lightness($bg-color) > 50) {
 @return darken($bg-color, 10%);
 } @else {
 @return lighten($bg-color, 20%);
 }
}

@mixin set-button($bg-color) {
 background-color: set-btn-bg($bg-color);

 &:before, &:after {
 background-color: set-text-color($bg-color);
 }

 &:hover {
 background-color: set-text-color($bg-color);

 &:before, &:after {
 background-color: set-btn-bg($bg-color);
 }
 }
}
```
其他區塊的背景跟文字設定，跟上述的整理方式差不多，就不再贅述。 
到這邊為止，我的 `.memo--bg-black` 的內容修改過後如下：

```scss
.memo--bg-black {
 @include set-background($primary-color);

 .header {
 .btn {
 @include set-button($primary-color);
 }
 }

 .content {
 @include textarea($primary-color);
 }
}
```

其他透過 `@function`、`@mixin` 設定跟顏色有關的部分：

```scss
@function set-text-color($bg-color) {
 @if(lightness($bg-color) > 50) {
 @return #333;
 } @else {
 @return #fff;
 }
}

@function set-btn-bg($bg-color) {
 @if (lightness($bg-color) > 50) {
 @return darken($bg-color, 10%);
 } @else {
 @return lighten($bg-color, 20%);
 }
}

@mixin set-background($bg-color) {
 background-color: $bg-color;
 color: set-text-color($bg-color);
}

@mixin set-button($bg-color) {
 background-color: set-btn-bg($bg-color);

 &:before, &:after {
 background-color: set-text-color($bg-color);
 }

 &:hover {
 background-color: set-text-color($bg-color);
 color: $bg-color;

 &:before, &:after {
 background-color: $bg-color;
 }
 }
}

@mixin textarea($primary-color) {
 @include set-background($primary-color);
}
```
 

### Step.5 - @each
 到這邊，基本上只要把 $primary-color 指定為其他顏色，就可以看到我們要的效果：**只要改變底色，其他地方顏色配置就會自動完成！** 
 以上都是以黑色背景的 `.memo--bg-black` 做範例，接下來的步驟就是要產生更多的 class：

1. 將自己喜歡的顏色個別用變數去指定
2. 定義一個 map，以 name: value 的格式指定顏色名稱及相對應的變數
3. 運用 `@each`，將顏色變數們的名字透過處理變成 class name，並且將對應的顏色變數傳入 `@function`

```scss
// 1. 用變數指向顏色色碼
$color-white: #fff;
$color-red: #F50057;
$color-cyan: #18FFFF;
$color-yellow: #FFEE58;
$color-green: #69F0AE;
$color-purple: #6A1B9A;
$color-black: #000;
$color-gray: #ccc;

// 2. 定義一個 map，以 name: value 的格式指定顏色名稱及相對應的變數
$theme: (
 white: $color-white,
 red: $color-red,
 cyan: $color-cyan,
 yellow: $color-yellow,
 green: $color-green,
 purple: $color-purple,
 black: $color-black,
 gray: $color-gray
);

// 3. 使用 @each 遍歷 map 裡的所有元素，將 $theme 的 name 及 value 使用在 class 的命名以及函數套用
@each $color, $value in $theme {
 .memo--bg-#{$color} {
 @include set-background($value);

 .header {
 .btn {
 @include set-button($value);
 }
 }

 .content {
 @include textarea($value);
 }
 }
}

```
 

### Step.6 - 套用
 這時候就可以把 `.memo--bg-black` 換成其他的 class 了，看看轉譯後的 CSS，多了 `.memo--bg-purple`、 `.memo--bg-cyan` ...等等的 class 可以套用了呢，之後要增加這個 memo 的顏色設定 class 的話，基本上只需要在 map 裡增加 name 跟 value ，像是 `pink: #ffc0cb` 就可以囉，但如果先用變數指定色碼的話會更有利於管理哦

最後，把剛才設定的 memo 都列出來吧：

![post-用 Sass 玩出自己的 Memo Style / memo-total](//images.ctfassets.net/8er52l3j5u76/SQDU1oj6VOeuq2sr4ILmn/70ba998f04dcc0b0fde68712c449c25a/memo-total.png)

五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

職涯原力：解開千千結的邏輯力

職涯原力：善用企劃力，為自己的生命校正

無痛理解 JS | 非同步怎麼運作？

面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼

線上直播與錄製線上課程 - 硬體篇

面試攻略(一) 初心者的三大面試攻略心法

網站當中的色彩學｜如何選擇網站的顏色定調？

用 Sass 玩出自己的 Memo Style

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款