香港YouTuber排名2022 - 全港20大訂閲數Youtuber
這篇「香港YouTuber排名2022」將會為你介紹全港 20個最多訂閲的 Youtuber,並且預算這些 Youtuber的單月廣告收入,讓你對這一行業有更深的認識。
一個網頁,設計是非常重要的!
即使你的Programming能力很強,但若缺乏設計觸感,製造出來像中小學生作品一樣,便顯得不夠專業了,用家也不會信任你。
這篇「網頁設計教學」,我將與大家分享10個設計要訣,希望你看完後,即使沒有讀過design,也能迅速提升自己的設計觸覺!
準備好了沒有? 我們開始吧!
很多新手在設計網頁時,往往忽略了字體的重要。
他們只選用一款內置字體 - san serif,來建立整個網頁。
其實字體能影響用家對網頁的印象,讓人知道你的網頁是否專業。我們來看看Spotify網頁:(https://www.spotify.com )它看起來是不是很不錯?
當我一把字體換成另外一款,整個網頁給人的感覺頓時便差了很多呢!因此,字體對設計網頁而言是非常重要的。
設計網頁時,我們通常會用兩種字體:一款是給標題,一款是給內文。
標題
字體通常粗、扁,字與字之間也要保持距離。常見的英文標題字體有:
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/)
利用粗幼的配合 ,標題粗一點,內文幼一點,也可以做到不錯的對比效果。
除了字體外,文字粗幼、行距、字距,也十分重要!
標題
在寫標題時,你會否發現自己總是差了些東西?很多時,正正就是少了粗幼及字距,感覺就差很遠了。
標題字體通常粗一點(font-weight),字與字之間的距離(letter-spacing)也要闊一點,感覺則很不同了!
由此可見,以上的每一個元素,都有其用處。放在一起後,你就可以一步一步說服用家購買你的產品。
行距
為了做到一目了然的效果,內文的行距便很重要了。
有行距:
沒有行距
看!一旦沒有合適行距,感覺又差很遠了。
如果你不知道什麼的行距才合適,你可以參考 medium.com上內文行距。
在以上的段落中,行與行的距離是line-height:1.58,約是1個字的高度。段與段的距離則約是2-3字的高度。
這個行距,能夠讓人閱讀得很舒適呢!
接下來,「對齊」也是一個非常重要的概念,讓你的文章看來連貫、一置。試試幻想,網頁上有兩條隱形的直線。你的內容通常會整齊地放在線內。
線內的內文通常可以置左,置中,置右,或justify,但一定要注意全文保持一置性!
新手很容易忽略空間的重要性,因此你要注意每一個section與每一個section保持空間。絕不要害怕過多的空間,放膽地加多點空間吧!這樣讀者看起來更舒適!
專注閱讀
空間感可以讓人更專注於內文,不會因為過長而不願閱讀(too long didn’t read)。
我們來看看這兩個例子吧!
有空間:
少點空間:
你看,少了一點空間,感覺是不是有點不一樣?
網頁優美
空間感除了讓人專注閱讀外,也可以令網頁變得更elegant。
看看Andstudio的網站:(https://andstudio.com)
你看多優美!
當我沒有足夠的內容,希望用家專注單一的內文,例如是:新聞的詳細頁面,我便把網頁左右的空間拉大。這樣,整個網頁會看起來更優美,讀者看也會更專注呢!
我們也可注意顏色的運用。不同的顏色,帶給人不一樣的感覺。
主色
通常,網站有一個主色。這個主色通常是Logo的主要顏色。
比方說,Airbnb的這個網站,它的Logo主色是粉紅色。因此,網站的主色便是粉紅色。
Airbnb 主頁:(http://airbnb.com)
你看!它的主要按鍵、一些小元素等,都以主色(粉紅色)為中心。
輔助色
除了主色外,我們還使用輔助色,讓網站看起來更豐富。輔助色以1-3種便足夠,過多的輔助色反讓網站感覺混亂。我們繼續看看Airbnb的例子吧!
在上述的例子,airbnb這個網站,綠色、黑色及白色便是輔助色。然而,你應該如何選擇輔助色呢?
第一個方法,我們可借助color wheel這個網站。當你選擇了base color後,便可點擊左方的triad, complementary, Analogous等,便可尋找輔助色。
另外一個方法,當然是看看好的設計師使用怎樣的顏色配搭,然後再作參考!你可以在google搜尋color palette best ,也可以找到不同網站的顏色配搭。
你便會看到50個漂亮網站的顏色配搭,非常有參考價值!
有些看起來漂亮的網頁,多以相片組成。照片在網頁上,扮演著一個非常重要的角色。無論你的網頁設計有多好,使用不漂亮的照片,網頁也不可能漂亮。讓我們看看Airbnb網頁:
你覺得這個網頁挺漂亮呀!對嗎?
這個網站的設計,其實非常簡單。讓你覺得漂亮的,其實是網頁上的照片!因為網站的照片都很漂亮,所以你覺得整個網站,也很不錯!
那麼應該在哪裡獲得漂亮的照片呢?
你可以找個專業的攝影師為你拍攝!不然的話,你可使用stock photo(圖庫)。要付費的圖庫,我使用 shutterstock 。它基本是最齊全的了。
免費圖庫的話,我推介pexels 它的圖片既專業,又沒有版權,可以免費使用!
其他免費圖庫網站: 背景圖/免費圖庫大全 - 38個高質+免費的圖庫網站
插畫的話,我會通常會使用一些「flat design pack」,例如:envato elements
最後,如果你的圖是用作背景圖,並且在上面要放文字的話,我們通常會在圖片上加上黑色,或白色filter,讓照片上的文字更顯眼。
原圖:
有filter:
製成品:
在「字體」部分,我已說明對比是設計中,一個非常重要的概念。利用對比,我們可以把用家的視角,更容易集中到某個我們想他們看到的位置。
比方說,粗,大標題與幼,較細內文的對比,讓讀者更容易注意標題。
除了粗幼、大小的對比,顏色也是帶出對比的一個重要元素。
設計師想這個「Start」的按鍵更加讓人注目,因此使用了藍色底色。
一個出色的網頁,通常有一些動態元素,讓整個網站看起來更生動。
基本的動態元素可以分為3種:
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,讓變色時有漸變效果。
大家學習了以上8個要訣後,有沒有覺得自己的設計觸覺好了一點?
想訓練個人設計觸覺,就是要多看一些好的設計,仔細研究它們每一個細節,Pay attention to every details!以下的網頁,收集了一些設計漂亮的網頁,大家可以多看看呀!
1. behance.net
這個一定要看,就像設計師的Facebook,十分常用。
除了網頁設計外,它還有很多其他不同的設計,例如Logo,平面設計等等。
它是網頁設計界的權威,有很多漂亮的作品。
它收集了很多Landing Page的設計,也做得很不錯!
相信大家只要多看漂亮的作品,想想設計師為何要這樣做的話,你的設計觸感也會有進步的!
最後,你發現你的設計觸覺,真的很差的話,做網站時盡量使用Template。
找一個Template,有你需要的設計元素,然後只是更改裡面的內容,圖片等等。設計、文字大小、文字數量,甚至顏色也不要更改!以我的經驗,若你設計觸覺不好,用Template時改得愈多,便愈不漂亮。
Template:
自己網頁:
如果你的照片是漂亮的,文字數量是一致,出來的效果是會和Template一樣!
大家學習了以上10個要訣後,有沒有覺得自己的設計觸覺好了一點?
你也可以參考這篇教學的影片版:
希望你在閱讀這篇教學後,你的設計觸感能有所提高!
這篇「香港YouTuber排名2022」將會為你介紹全港 20個最多訂閲的 Youtuber,並且預算這些 Youtuber的單月廣告收入,讓你對這一行業有更深的認識。
這篇「網上創業(idea+例子) - 90後的半退休生活」文章,我將會教你只用HK$4,000,由零開始,step by step,透過科網去網上創業。
免費參加【網頁開發入門CRASH COURSE】線上課程!