網頁設計教學 10個要訣 - 迅速提升你的設計觸覺
一個網頁，設計是非常重要的！
即使你的Programming能力很強，但若缺乏設計觸感，製造出來像中小學生作品一樣，便顯得不夠專業了，用家也不會信任你。
這篇「網頁設計教學」，我將與大家分享10個設計要訣，希望你看完後，即使沒有讀過design，也能迅速提升自己的設計觸覺！
字體
文字粗幼，行距，字距
對齊空間
顏色
相片
對比
動態元素
訓練設計觸覺
跟足Template
準備好了沒有? 我們開始吧!
設計要訣1 - 字體
很多新手在設計網頁時，往往忽略了字體的重要。
他們只選用一款內置字體 - san serif，來建立整個網頁。
其實字體能影響用家對網頁的印象，讓人知道你的網頁是否專業。我們來看看Spotify網頁：(https://www.spotify.com )它看起來是不是很不錯？
text
當我一把字體換成另外一款，整個網頁給人的感覺頓時便差了很多呢！因此，字體對設計網頁而言是非常重要的。
設計網頁時，我們通常會用兩種字體：一款是給標題，一款是給內文。
標題
字體通常粗、扁，字與字之間也要保持距離。常見的英文標題字體有：
1.League Gothic（https://www.fontsquirrel.com/fonts/league-gothic）
2.Roboto（https://fonts.google.com/specimen/Roboto）
3.Roboto Condensed（https://fonts.google.com/specimen/Roboto+Condensed）
4. Oswald（https://fonts.google.com/specimen/Oswald）
5.Raleway（https://fonts.google.com/specimen/Raleway)
內文
字體以易讀，易看為首要原則。常見的英文內文字體是Open Sans。（https://fonts.google.com/specimen/Open+Sans)
對比
「對比」是平面設計中的一個非常重要的概念。利用對比，我們可以把用家的視角，集中到某個我們想他們看到的位置。
在這裡，內文字體簡單易讀，標題字體則較粗較扁，放在一起便可形成對比。透過利用字體的對比，我們可讓讀者把注意力放到標題上，再讓他們細看內文。
中文字體
如果是中文字的話應該怎麼選擇字體？由於中文字庫太大，我們不可像英文般，隨心所欲地上載自己需要的字體到網頁上。
因此，你可使用Google Font上有限的中文字體，如：Noto Sans TC。（https://fonts.google.com/specimen/Noto+Sans+TCs/)
利用粗幼的配合 ，標題粗一點，內文幼一點，也可以做到不錯的對比效果。
設計要訣2 - 文字粗幼，行距，字距
除了字體外，文字粗幼、行距、字距，也十分重要！
標題
在寫標題時，你會否發現自己總是差了些東西？很多時，正正就是少了粗幼及字距，感覺就差很遠了。
標題字體通常粗一點(font-weight)，字與字之間的距離(letter-spacing)也要闊一點，感覺則很不同了！
由此可見，以上的每一個元素，都有其用處。放在一起後，你就可以一步一步說服用家購買你的產品。
行距
為了做到一目了然的效果，內文的行距便很重要了。
有行距：
沒有行距
看！一旦沒有合適行距，感覺又差很遠了。
如果你不知道什麼的行距才合適，你可以參考 medium.com上內文行距。
在以上的段落中，行與行的距離是line-height:1.58，約是1個字的高度。段與段的距離則約是2-3字的高度。
這個行距，能夠讓人閱讀得很舒適呢！
設計要訣3 - 對齊
接下來，「對齊」也是一個非常重要的概念，讓你的文章看來連貫、一置。試試幻想，網頁上有兩條隱形的直線。你的內容通常會整齊地放在線內。
線內的內文通常可以置左，置中，置右，或justify，但一定要注意全文保持一置性！
設計要訣4 - 空間
新手很容易忽略空間的重要性，因此你要注意每一個section與每一個section保持空間。絕不要害怕過多的空間，放膽地加多點空間吧！這樣讀者看起來更舒適！
專注閱讀
空間感可以讓人更專注於內文，不會因為過長而不願閱讀（too long didn’t read)。
我們來看看這兩個例子吧！
有空間：
少點空間：
你看，少了一點空間，感覺是不是有點不一樣？
網頁優美
空間感除了讓人專注閱讀外，也可以令網頁變得更elegant。
看看Andstudio的網站：（https://andstudio.com）
你看多優美！
當我沒有足夠的內容，希望用家專注單一的內文，例如是：新聞的詳細頁面，我便把網頁左右的空間拉大。這樣，整個網頁會看起來更優美，讀者看也會更專注呢！
設計要訣5 - 顏色
我們也可注意顏色的運用。不同的顏色，帶給人不一樣的感覺。
主色
通常，網站有一個主色。這個主色通常是Logo的主要顏色。
比方說，Airbnb的這個網站，它的Logo主色是粉紅色。因此，網站的主色便是粉紅色。
Airbnb 主頁：（http://airbnb.com）
你看！它的主要按鍵、一些小元素等，都以主色（粉紅色）為中心。
輔助色
除了主色外，我們還使用輔助色，讓網站看起來更豐富。輔助色以1-3種便足夠，過多的輔助色反讓網站感覺混亂。我們繼續看看Airbnb的例子吧！
在上述的例子，airbnb這個網站，綠色、黑色及白色便是輔助色。然而，你應該如何選擇輔助色呢？
第一個方法，我們可借助color wheel這個網站。當你選擇了base color後，便可點擊左方的triad, complementary, Analogous等，便可尋找輔助色。
另外一個方法，當然是看看好的設計師使用怎樣的顏色配搭，然後再作參考！你可以在google搜尋color palette best ，也可以找到不同網站的顏色配搭。
你便會看到50個漂亮網站的顏色配搭，非常有參考價值！
設計要訣6 - 相片
有些看起來漂亮的網頁，多以相片組成。照片在網頁上，扮演著一個非常重要的角色。無論你的網頁設計有多好，使用不漂亮的照片，網頁也不可能漂亮。讓我們看看Airbnb網頁：
你覺得這個網頁挺漂亮呀！對嗎？
這個網站的設計，其實非常簡單。讓你覺得漂亮的，其實是網頁上的照片！因為網站的照片都很漂亮，所以你覺得整個網站，也很不錯！
那麼應該在哪裡獲得漂亮的照片呢？
你可以找個專業的攝影師為你拍攝！不然的話，你可使用stock photo（圖庫）。要付費的圖庫，我使用 shutterstock 。它基本是最齊全的了。
免費圖庫的話，我推介pexels 它的圖片既專業，又沒有版權，可以免費使用！
其他免費圖庫網站: 背景圖/免費圖庫大全 - 38個高質+免費的圖庫網站
插畫的話，我會通常會使用一些「flat design pack」，例如：envato elements
最後，如果你的圖是用作背景圖，並且在上面要放文字的話，我們通常會在圖片上加上黑色，或白色filter，讓照片上的文字更顯眼。
原圖：
有filter：
製成品：
設計要訣7 - 對比
在「字體」部分，我已說明對比是設計中，一個非常重要的概念。利用對比，我們可以把用家的視角，更容易集中到某個我們想他們看到的位置。
比方說，粗，大標題與幼，較細內文的對比，讓讀者更容易注意標題。
除了粗幼、大小的對比，顏色也是帶出對比的一個重要元素。
設計師想這個「Start」的按鍵更加讓人注目，因此使用了藍色底色。
設計要訣8 - 動態元素
一個出色的網頁，通常有一些動態元素，讓整個網站看起來更生動。
基本的動態元素可以分為3種：
Page Load 動畫
Page Scroll 動畫
Mouse 互動
1. Page Load 動畫
Page Load 動畫就是在你輸入網址後，由空白一片，到完全顯示你網站的過程。你可參考asiaone.com
我非常不喜歡Page Load 動畫只有Loading Bar的網頁，因為如果Load的時間太久，用家便會不耐煩地離開網站。
如果只有Loading Bar的話，我建議你不要使用Page Load 動畫。寫得好的網頁，是不會出現這種情況，我們會先顯示容易Load的元素，讓用家沒有等待的感覺。
2. Page Scroll 動畫
Page Scroll 動畫就是當你Scroll你的網頁時，網頁的元素以不同的形式所呈現。
我喜歡比較簡潔，慢一點的Page Scroll 動畫，例如Fade In, Fade in + Slide Up 等等。
3.Mouse 互動
Mouse 互動就是跟據你滑鼠（Mouse) 的動作，作出相應的動畫。最常見到的，就是Mouseover，按鍵變色。
這個變色也有穚妙。好的編程師通常會在變色時加上一個transistion，例如：transition: all 0.3s ease，讓變色時有漸變效果。
設計要訣9 - 訓練設計觸覺
大家學習了以上8個要訣後，有沒有覺得自己的設計觸覺好了一點？
想訓練個人設計觸覺，就是要多看一些好的設計，仔細研究它們每一個細節，Pay attention to every details！以下的網頁，收集了一些設計漂亮的網頁，大家可以多看看呀！
1. behance.net
這個一定要看，就像設計師的Facebook，十分常用。
除了網頁設計外，它還有很多其他不同的設計，例如Logo，平面設計等等。
2.Awwwards
它是網頁設計界的權威，有很多漂亮的作品。
3.Landingfolio
它收集了很多Landing Page的設計，也做得很不錯！
相信大家只要多看漂亮的作品，想想設計師為何要這樣做的話，你的設計觸感也會有進步的！
設計要訣10 - 跟足Template
最後，你發現你的設計觸覺，真的很差的話，做網站時盡量使用Template。
找一個Template，有你需要的設計元素，然後只是更改裡面的內容，圖片等等。設計、文字大小、文字數量，甚至顏色也不要更改！以我的經驗，若你設計觸覺不好，用Template時改得愈多，便愈不漂亮。
Template:
自己網頁：
如果你的照片是漂亮的，文字數量是一致，出來的效果是會和Template一樣！
結語
大家學習了以上10個要訣後，有沒有覺得自己的設計觸覺好了一點？
你也可以參考這篇教學的影片版:
希望你在閱讀這篇教學後，你的設計觸感能有所提高！
原文：網頁設計教學
10個要訣 - 迅速提升你的設計觸覺
即使你的Programming能力很強，但若缺乏設計觸感，製造出來像中小學生作品一樣，便顯得不夠專業了，用家也不會信任你。
這篇「網頁設計教學」，我將與大家分享10個設計要訣，希望你看完後，即使沒有讀過design，也能迅速提升自己的設計觸覺！
字體
文字粗幼，行距，字距
對齊空間
顏色
相片
對比
動態元素
訓練設計觸覺
跟足Template
準備好了沒有? 我們開始吧!
設計要訣1 - 字體
很多新手在設計網頁時，往往忽略了字體的重要。
他們只選用一款內置字體 - san serif，來建立整個網頁。
其實字體能影響用家對網頁的印象，讓人知道你的網頁是否專業。我們來看看Spotify網頁：(https://www.spotify.com )它看起來是不是很不錯？
text
當我一把字體換成另外一款，整個網頁給人的感覺頓時便差了很多呢！因此，字體對設計網頁而言是非常重要的。
設計網頁時，我們通常會用兩種字體：一款是給標題，一款是給內文。
標題
字體通常粗、扁，字與字之間也要保持距離。常見的英文標題字體有：
1.League Gothic（https://www.fontsquirrel.com/fonts/league-gothic）
2.Roboto（https://fonts.google.com/specimen/Roboto）
3.Roboto Condensed（https://fonts.google.com/specimen/Roboto+Condensed）
4. Oswald（https://fonts.google.com/specimen/Oswald）
5.Raleway（https://fonts.google.com/specimen/Raleway)
內文
字體以易讀，易看為首要原則。常見的英文內文字體是Open Sans。（https://fonts.google.com/specimen/Open+Sans)
對比
「對比」是平面設計中的一個非常重要的概念。利用對比，我們可以把用家的視角，集中到某個我們想他們看到的位置。
在這裡，內文字體簡單易讀，標題字體則較粗較扁，放在一起便可形成對比。透過利用字體的對比，我們可讓讀者把注意力放到標題上，再讓他們細看內文。
中文字體
如果是中文字的話應該怎麼選擇字體？由於中文字庫太大，我們不可像英文般，隨心所欲地上載自己需要的字體到網頁上。
因此，你可使用Google Font上有限的中文字體，如：Noto Sans TC。（https://fonts.google.com/specimen/Noto+Sans+TCs/)
利用粗幼的配合 ，標題粗一點，內文幼一點，也可以做到不錯的對比效果。
設計要訣2 - 文字粗幼，行距，字距
除了字體外，文字粗幼、行距、字距，也十分重要！
標題
在寫標題時，你會否發現自己總是差了些東西？很多時，正正就是少了粗幼及字距，感覺就差很遠了。
標題字體通常粗一點(font-weight)，字與字之間的距離(letter-spacing)也要闊一點，感覺則很不同了！
由此可見，以上的每一個元素，都有其用處。放在一起後，你就可以一步一步說服用家購買你的產品。
行距
為了做到一目了然的效果，內文的行距便很重要了。
有行距：
沒有行距
看！一旦沒有合適行距，感覺又差很遠了。
如果你不知道什麼的行距才合適，你可以參考 medium.com上內文行距。
在以上的段落中，行與行的距離是line-height:1.58，約是1個字的高度。段與段的距離則約是2-3字的高度。
這個行距，能夠讓人閱讀得很舒適呢！
設計要訣3 - 對齊
接下來，「對齊」也是一個非常重要的概念，讓你的文章看來連貫、一置。試試幻想，網頁上有兩條隱形的直線。你的內容通常會整齊地放在線內。
線內的內文通常可以置左，置中，置右，或justify，但一定要注意全文保持一置性！
設計要訣4 - 空間
新手很容易忽略空間的重要性，因此你要注意每一個section與每一個section保持空間。絕不要害怕過多的空間，放膽地加多點空間吧！這樣讀者看起來更舒適！
專注閱讀
空間感可以讓人更專注於內文，不會因為過長而不願閱讀（too long didn’t read)。
我們來看看這兩個例子吧！
有空間：
少點空間：
你看，少了一點空間，感覺是不是有點不一樣？
網頁優美
空間感除了讓人專注閱讀外，也可以令網頁變得更elegant。
看看Andstudio的網站：（https://andstudio.com）
你看多優美！
當我沒有足夠的內容，希望用家專注單一的內文，例如是：新聞的詳細頁面，我便把網頁左右的空間拉大。這樣，整個網頁會看起來更優美，讀者看也會更專注呢！
設計要訣5 - 顏色
我們也可注意顏色的運用。不同的顏色，帶給人不一樣的感覺。
主色
通常，網站有一個主色。這個主色通常是Logo的主要顏色。
比方說，Airbnb的這個網站，它的Logo主色是粉紅色。因此，網站的主色便是粉紅色。
Airbnb 主頁：（http://airbnb.com）
你看！它的主要按鍵、一些小元素等，都以主色（粉紅色）為中心。
輔助色
除了主色外，我們還使用輔助色，讓網站看起來更豐富。輔助色以1-3種便足夠，過多的輔助色反讓網站感覺混亂。我們繼續看看Airbnb的例子吧！
在上述的例子，airbnb這個網站，綠色、黑色及白色便是輔助色。然而，你應該如何選擇輔助色呢？
第一個方法，我們可借助color wheel這個網站。當你選擇了base color後，便可點擊左方的triad, complementary, Analogous等，便可尋找輔助色。
另外一個方法，當然是看看好的設計師使用怎樣的顏色配搭，然後再作參考！你可以在google搜尋color palette best ，也可以找到不同網站的顏色配搭。
你便會看到50個漂亮網站的顏色配搭，非常有參考價值！
設計要訣6 - 相片
有些看起來漂亮的網頁，多以相片組成。照片在網頁上，扮演著一個非常重要的角色。無論你的網頁設計有多好，使用不漂亮的照片，網頁也不可能漂亮。讓我們看看Airbnb網頁：
你覺得這個網頁挺漂亮呀！對嗎？
這個網站的設計，其實非常簡單。讓你覺得漂亮的，其實是網頁上的照片！因為網站的照片都很漂亮，所以你覺得整個網站，也很不錯！
那麼應該在哪裡獲得漂亮的照片呢？
你可以找個專業的攝影師為你拍攝！不然的話，你可使用stock photo（圖庫）。要付費的圖庫，我使用 shutterstock 。它基本是最齊全的了。
免費圖庫的話，我推介pexels 它的圖片既專業，又沒有版權，可以免費使用！
其他免費圖庫網站: 背景圖/免費圖庫大全 - 38個高質+免費的圖庫網站
插畫的話，我會通常會使用一些「flat design pack」，例如：envato elements
最後，如果你的圖是用作背景圖，並且在上面要放文字的話，我們通常會在圖片上加上黑色，或白色filter，讓照片上的文字更顯眼。
原圖：
有filter：
製成品：
設計要訣7 - 對比
在「字體」部分，我已說明對比是設計中，一個非常重要的概念。利用對比，我們可以把用家的視角，更容易集中到某個我們想他們看到的位置。
比方說，粗，大標題與幼，較細內文的對比，讓讀者更容易注意標題。
除了粗幼、大小的對比，顏色也是帶出對比的一個重要元素。
設計師想這個「Start」的按鍵更加讓人注目，因此使用了藍色底色。
設計要訣8 - 動態元素
一個出色的網頁，通常有一些動態元素，讓整個網站看起來更生動。
基本的動態元素可以分為3種：
Page Load 動畫
Page Scroll 動畫
Mouse 互動
1. Page Load 動畫
Page Load 動畫就是在你輸入網址後，由空白一片，到完全顯示你網站的過程。你可參考asiaone.com
我非常不喜歡Page Load 動畫只有Loading Bar的網頁，因為如果Load的時間太久，用家便會不耐煩地離開網站。
如果只有Loading Bar的話，我建議你不要使用Page Load 動畫。寫得好的網頁，是不會出現這種情況，我們會先顯示容易Load的元素，讓用家沒有等待的感覺。
2. Page Scroll 動畫
Page Scroll 動畫就是當你Scroll你的網頁時，網頁的元素以不同的形式所呈現。
我喜歡比較簡潔，慢一點的Page Scroll 動畫，例如Fade In, Fade in + Slide Up 等等。
3.Mouse 互動
Mouse 互動就是跟據你滑鼠（Mouse) 的動作，作出相應的動畫。最常見到的，就是Mouseover，按鍵變色。
這個變色也有穚妙。好的編程師通常會在變色時加上一個transistion，例如：transition: all 0.3s ease，讓變色時有漸變效果。
設計要訣9 - 訓練設計觸覺
大家學習了以上8個要訣後，有沒有覺得自己的設計觸覺好了一點？
想訓練個人設計觸覺，就是要多看一些好的設計，仔細研究它們每一個細節，Pay attention to every details！以下的網頁，收集了一些設計漂亮的網頁，大家可以多看看呀！
1. behance.net
這個一定要看，就像設計師的Facebook，十分常用。
除了網頁設計外，它還有很多其他不同的設計，例如Logo，平面設計等等。
2.Awwwards
它是網頁設計界的權威，有很多漂亮的作品。
3.Landingfolio
它收集了很多Landing Page的設計，也做得很不錯！
相信大家只要多看漂亮的作品，想想設計師為何要這樣做的話，你的設計觸感也會有進步的！
設計要訣10 - 跟足Template
最後，你發現你的設計觸覺，真的很差的話，做網站時盡量使用Template。
找一個Template，有你需要的設計元素，然後只是更改裡面的內容，圖片等等。設計、文字大小、文字數量，甚至顏色也不要更改！以我的經驗，若你設計觸覺不好，用Template時改得愈多，便愈不漂亮。
Template:
自己網頁：
如果你的照片是漂亮的，文字數量是一致，出來的效果是會和Template一樣！
結語
大家學習了以上10個要訣後，有沒有覺得自己的設計觸覺好了一點？
你也可以參考這篇教學的影片版:
希望你在閱讀這篇教學後，你的設計觸感能有所提高！
原文：網頁設計教學
10個要訣 - 迅速提升你的設計觸覺