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

一個網頁,設計是非常重要的!

即使你的Programming能力很強,但若缺乏設計觸感,製造出來像中小學生作品一樣,便顯得不夠專業了,用家也不會信任你。

這篇「網頁設計教學」,我將與大家分享10個設計要訣,希望你看完後,即使沒有讀過design,也能迅速提升自己的設計觸覺!

  1. 字體
  2. 文字粗幼,行距,字距
  3. 對齊
  4. 空間
  5. 顏色
  6. 相片
  7. 對比
  8. 動態元素
  9. 訓練設計觸覺
  10. 跟足Template

準備好了沒有? 我們開始吧!

設計要訣1 - 字體

很多新手在設計網頁時,往往忽略了字體的重要。

他們只選用一款內置字體 - san serif,來建立整個網頁。

其實字體能影響用家對網頁的印象,讓人知道你的網頁是否專業。我們來看看Spotify網頁:(https://www.spotify.com )它看起來是不是很不錯?

當我一把字體換成另外一款,整個網頁給人的感覺頓時便差了很多呢!因此,字體對設計網頁而言是非常重要的。

設計網頁時,我們通常會用兩種字體:一款是給標題,一款是給內文。

標題

字體通常粗、扁,字與字之間也要保持距離。常見的英文標題字體有:

1.League Gothichttps://www.fontsquirrel.com/fonts/league-gothic

2.Robotohttps://fonts.google.com/specimen/Roboto

3.Roboto Condensedhttps://fonts.google.com/specimen/Roboto+Condensed

4. Oswaldhttps://fonts.google.com/specimen/Oswald

5.Ralewayhttps://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個要訣後,有沒有覺得自己的設計觸覺好了一點?

你也可以參考這篇教學的影片版:

希望你在閱讀這篇教學後,你的設計觸感能有所提高!

你可能也會喜歡...

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程!