HTML5+CSS3 快速學習自我挑戰 Day2


網站設計基礎

網站設計介紹

  1. 設計師創造網頁的樣式和感覺,開發者則根據設計師的樣稿使用 HTML、CSS、JavaScript 建立網頁

字體

  1. 字體是一種藝術和排列技術,讓書面語言可閱讀且美觀
  2. 對 body text 使用 15px - 20px 的字體大小
  3. 對 Headlines 使用大的字體
  4. 使用 120% - 150% 的行距 (Line Spacing)
  5. 每行 45 到 90 字
  6. 使用正確的字體
    • Sans-serif:中立、乾淨、簡單、現代化網站
    • Serif:傳統目的、說故事、長篇幅的閱讀
  7. Google Fonts
  8. 在 Google Fonts 裡面很棒的 Sans-serif 字體:Open Sans、Lato、Raleway、Monsterrat、PT Sans
  9. 在 Google Fonts 裡面很棒的 Serif 字體:Cardo、Merriweather、PT Serif
  10. 如何選擇字體?
    • 對網站選擇一個反映你想要得視覺和感覺的字體
    • 決定:Sans-serif 或 Serif?
    • 使用好字體
    • 只使用那一種 typeface

像專家一樣使用顏色

  1. 只使用一種基底顏色 (Base Color),Base Color 就是除了黑色、白色和灰色階的顏色
  2. 如果想要使用更多顏色,請使用工具
    • Flat UI colors 是一種幫助選擇 Base Color 的好工具
    • Color Wheel Tool 可以幫助混合多種顏色,可以使用 Adobe Color CC
  3. 使用顏色來吸引注意力
  4. 絕不要在設計使用黑色
  5. 明智地選擇顏色
    • 紅色:力量、熱情、力氣、興奮,亮色系更有活力、暗色系更有力量且優雅
    • 橘色:可以吸引注意力但不會壓過紅色,它代表鼓舞和創意,橘色還跟友善、信心和勇氣有關聯
    • 黃色:是一種有活力且給予一種快樂和生動活潑的感覺,它還跟好奇心、智慧和明亮…等等有關聯
    • 綠色:是一種和諧、自然、生活和健康的顏色,它還時常跟錢有關聯,在設計裡面,綠色還可以有平衡和協調的效果
    • 藍色:代表耐心、和平、信任和穩定,它是特別有吸引力的顏色,尤其是對男生,它跟專業、信任和榮譽,這也是為什麼大型的 Socail Media 都使用藍色
    • 紫色:傳統上跟權力、高貴和富有有關連,在設計裡面,紫色可以給予一種智慧、高貴、奢華和神秘的感覺
    • 粉紅色:表達浪漫、主動、關心、和平和感情…等等
    • 咖啡色:代表放鬆和信心,它本身表示質樸、自然、持久、舒適和依賴感

使用圖片

  1. 在圖片上直接放置文字
    • 這種做法只有在圖片很黑且文字是白色的時候有用,否則在圖片和文字之間會沒有足夠的對比
  2. 覆蓋圖片 (Overlay the Image)
    • 使用顏色漸層也可以達到驚人的效果
  3. 把文字放在 Box 裡面
    • 白色加上一些透明度可以做到,也可以把 Box 弄成黑色或是其它顏色
    • 只要保持創意就可以了
  4. 模糊圖片 (Blur the Image)
    • 文字要在所有螢幕解析度底下,保持在圖片模糊的部分
  5. The Floor Fade
    • 從上到下的漸層褪色的技術,幾乎沒有注意到,但是仍然可以改善閱讀性
    • 如果想要在圖片下方放置文字,這是一種很好的方法

使用 Icon

  1. 如果正確使用的話,可以提供非常好的使用者體驗;反之,如果用不好的話,會造成使用者的困惑
  2. 使用 Icon 來做條列式的功能/步驟
  3. 對動作和連結使用 Icons
    • Icons 應該要可辨識
    • Label Your Icons (就是在圖標後方放置文字)
  4. Icons 不應該成為焦點
  5. 盡可能使用 ICON FONTS

Spacing 和版面編排

  1. White Space 就是創建乾淨和簡單的關鍵
  2. 使用 White Space
    • 在元素之間放置 White Space
    • 在元素群組之間放置 White Space
    • 在網站區塊之間放置 White Space
    • 但是不要太誇張
  3. 定義階層
    • White Space 描述了在網頁元素之間的隱形關係
    • 定義你想要讓觀眾先看到哪個部分
    • 建立一個對應內容訊息的 Flow,它導引使用者從一個元素到下一個元素
    • 使用 White Space 來建立 Flow

使用者體驗介紹

  1. 使用者體驗是一個產品的介紹,看起來如何和感覺
  2. 使用者體驗是和這一個產品的整體經驗,它包含使用者介面,但是也要有整個產品的全面觀
  3. 引用賈伯斯,功能是最重要的

It’s not just what it looks like and feels like. Design is how it works
- Steve Jobs

  1. 可以把使用者體驗想成使用者目標和商業目標,使用者體驗設計師需要整理這些目標,當使用者達到他們的目的之後,商業也會受益,舉例來說,一個網站如果提供免費的電子書來交換使用者的 Email,使用者的目標就是學習電子書的內容,而你的目標就是取得使用者的 Email,所以你就可以在之後賣東西給他們,最後,你要確定你的設計可以做最好的工作來達到這兩個目標

獲取靈感:令人驚嘆的網站設計的秘密材料

  1. 使用其它網站當作靈感,來看其他領導設計師們怎麼做正確的事情
    • 收集你喜歡的設計
    • 試圖了解關於它們的每一樣東西
    • 為什麼它們看起來很好?
    • 這些網站有什麼共通點?
    • 如何使用 HTML 和 CSS 來建立?
  2. 像藝術家一般的竊取

殺手級的網站

七步驟完成完整有功能的網站

  1. 定義你的專案
    • 確認專案目標
    • 確認你的客群
    • 在心裡用你的目標和客群來設計
  2. 規劃全部
    • 規劃內容:文字、圖片、影片、Icons…等等
    • 開始思考視覺分層結構 (Visail Hierarchy)
    • 定義導覽列 (Navigation)
    • 如果是比較大型的專案,要定義網站架構
  3. 在設計之前,畫出 Ideas 的草稿
    • 獲得靈感和思考你的設計
    • 把 ideas 從腦中拿出來:在設計之前,畫出 Ideas 的草稿
    • 盡可能的畫出更多草稿,但是不要把花太多時間把它弄得太完美
    • 在沒有任何想要建立的 ideas 之前,不要開始設計
  4. 設計和開發你的網站
    • 使用 Guidelines 和 Tips 設計你的網站
    • 使用 HTML 和 CSS:在瀏覽器設計
    • 使用草稿、內容和從 123 步驟做的計畫性的決定
    • 這一步驟是建立網站最大的一步驟,但是:所有的步驟都很重要
  5. 還沒完成 - 優化
    • 優化表現:網站速度
    • 搜尋引擎優化 (SEO)
  6. 發佈你得傑作
    • 所有你需要的就是開啟一個網站伺服器,它可以 host 你的網站且傳送到全世界
  7. 網站維護
    • 發佈不是最後的事情
    • 觀察你的使用者表現和在必要的情況下修改你的網站
    • 定期更新你的內容:blog

讓七步驟付諸行動

  1. 步驟一:
    • 專案目標:顯示 Omnifood 做的事情,如何運作和他們所營業的地點,然後讓人註冊申請訂閱項目
    • 客群:沒有時間煮飯或不喜歡煮飯的忙碌人
  2. 步驟二:
    • 單頁網頁內容包含 Omnifood 提供的資訊和簡單的 navigation (導覽列)
    • 內容:Omnifood 提供的文字文件和套圖
    • Navigation (導覽列):也是由 Omnifood 提供的文字文件
  3. 步驟三:畫草稿
  4. 步驟四:
    • 顏色:橘色
    • 字體:LATO,字體有半圓角,給這個字型溫暖的感覺,當使用強壯的結構會提供穩定和嚴謹,根據這個字體的設計師,這個字體是男性也是女性,嚴謹但友善,且有夏天的感覺

第一個開發步驟

  1. 新增以下目錄結構
1
2
3
4
5
6
7
8
9
10
11
12
13
- resources
- CSS
toc: true
-img
- js
- img
- data
- vendors
- CSS
toc: true
- js
- fonts
- index.html
  1. 下載 Normalize.css,放到 vendors/css
  2. 修改 index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/normalize.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<h1>Omnifood</h1>
</body>
</html>
  1. 修改 resources/css/style.css,text-rendering 用最完美的方式讓字體載入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}

為響應式設計設置 fluid grid

  1. 三個響應式的方法
    • Fluid Grid:所有的版面編排元素都使用相對單位,像是百分比而不是像是像素這種絕對單位
    • Flexible Images:也是使用相對單位
    • Media Queries:允許我們在不同瀏覽器寬度選擇不同的 CSS 樣式規格
  2. 把 grid.css 放到 vendors/css
  3. 響應式設計官方網站
  4. 在 index.html 引入 grid.css <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
  5. 在 style.css 新增 row
1
2
3
4
.row {
max-width: 1140px;
margin: 0 auto;
}
  1. 在 index.html 最外層包上 row
1
2
3
<div class="row">
<h1>Omnifood</h1>
</div>

建立 header

  1. 在 index.html 新增 header
1
2
3
4
5
6
7
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
<a href="#">I'm hungry</a>
<a href="#">Show me more</a>
</div>
</header>
  1. 在 style.css 加入以下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
header {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg) center;
background-size: cover;
height: 100vh;
}

.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

h1 {
margin: 0;
}
  1. 選擇相近顏色的工具
  2. 在 style.css 的 h1 做修改
1
2
3
4
5
6
7
8
9
10
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
  1. 在 index.html 的 h1 加 <br> 斷行,且在 button 加上兩個 attribute
1
2
3
4
5
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
  1. 在 style.css 新增 button 樣式,link 是連結,visited 是被點擊過的連結,hover 是滑鼠放到該元素上的動作,active 則是點擊該元素的動作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}

.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}

.btn:hover,
.btn:active {
background-color: #cf6d17;
}

.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
}

.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
  1. 在 index.html 的 body 下面新增 navigation
1
2
3
4
5
6
7
8
9
10
11
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li><a href="#">Food delivery</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Our cities</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
  1. 在 style.css 新增 navigation 樣式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}

.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}

.main-nav li {
display: inline-block;
margin-left: 40px;
}

.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
  1. 在 style.css 加上一些註解,註解的樣式如下
1
2
3
/* ----------------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------------- */
Share