網頁設計教學10個要訣 - 迅速提升你的設計觸覺

除了字體外，文字粗幼、行距、字距，也十分重要！

標題

在寫標題時，你會否發現自己總是差了些東西？很多時，正正就是少了粗幼及字距，感覺就差很遠了。

標題字體通常粗一點(font-weight)，字與字之間的距離(letter-spacing)也要闊一點，感覺則很不同了！

由此可見，以上的每一個元素，都有其用處。放在一起後，你就可以一步一步說服用家購買你的產品。

行距

為了做到一目了然的效果，內文的行距便很重要了。

有行距：

沒有行距

看！一旦沒有合適行距，感覺又差很遠了。

如果你不知道什麼的行距才合適，你可以參考 medium.com上內文行距。

在以上的段落中，行與行的距離是line-height:1.58，約是1個字的高度。段與段的距離則約是2-3字的高度。

這個行距，能夠讓人閱讀得很舒適呢！

新手很容易忽略空間的重要性，因此你要注意每一個section與每一個section保持空間。絕不要害怕過多的空間，放膽地加多點空間吧！這樣讀者看起來更舒適！

專注閱讀

空間感可以讓人更專注於內文，不會因為過長而不願閱讀（too long didn’t read)。

我們來看看這兩個例子吧！

有空間：

少點空間：

你看，少了一點空間，感覺是不是有點不一樣？

網頁優美

空間感除了讓人專注閱讀外，也可以令網頁變得更elegant。

看看Andstudio的網站：（https://andstudio.com）

你看多優美！

當我沒有足夠的內容，希望用家專注單一的內文，例如是：新聞的詳細頁面，我便把網頁左右的空間拉大。這樣，整個網頁會看起來更優美，讀者看也會更專注呢！

有些看起來漂亮的網頁，多以相片組成。照片在網頁上，扮演著一個非常重要的角色。無論你的網頁設計有多好，使用不漂亮的照片，網頁也不可能漂亮。讓我們看看Airbnb網頁：

你覺得這個網頁挺漂亮呀！對嗎？

這個網站的設計，其實非常簡單。讓你覺得漂亮的，其實是網頁上的照片！因為網站的照片都很漂亮，所以你覺得整個網站，也很不錯！

那麼應該在哪裡獲得漂亮的照片呢？

你可以找個專業的攝影師為你拍攝！不然的話，你可使用stock photo（圖庫）。要付費的圖庫，我使用 shutterstock 。它基本是最齊全的了。

免費圖庫的話，我推介pexels 它的圖片既專業，又沒有版權，可以免費使用！

其他免費圖庫網站: 背景圖/免費圖庫大全 - 38個高質+免費的圖庫網站

插畫的話，我會通常會使用一些「flat design pack」，例如：envato elements

最後，如果你的圖是用作背景圖，並且在上面要放文字的話，我們通常會在圖片上加上黑色，或白色filter，讓照片上的文字更顯眼。

原圖：

有filter：

製成品：

一個出色的網頁，通常有一些動態元素，讓整個網站看起來更生動。

基本的動態元素可以分為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，讓變色時有漸變效果。

最後，你發現你的設計觸覺，真的很差的話，做網站時盡量使用Template。

找一個Template，有你需要的設計元素，然後只是更改裡面的內容，圖片等等。設計、文字大小、文字數量，甚至顏色也不要更改！以我的經驗，若你設計觸覺不好，用Template時改得愈多，便愈不漂亮。

Template:

自己網頁：

如果你的照片是漂亮的，文字數量是一致，出來的效果是會和Template一樣！