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

2017-11-19

CSS, HTML

Symbols count in article: 3k Reading time: 12 mins.

網站設計基礎

網站設計介紹

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

字體

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

像專家一樣使用顏色

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

使用圖片

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

使用 Icon

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

Spacing 和版面編排

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

使用者體驗介紹

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

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

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

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

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

殺手級的網站

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

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

讓七步驟付諸行動

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

第一個開發步驟

- resources
    - CSS
toc: true
        -img
    - js
    - img
    - data
- vendors
    - CSS
toc: true
    - js
    - fonts
- index.html

下載 Normalize.css，放到 vendors/css
修改 index.html

<!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>

修改 resources/css/style.css，text-rendering 用最完美的方式讓字體載入

* {
    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

三個響應式的方法
- Fluid Grid：所有的版面編排元素都使用相對單位，像是百分比而不是像是像素這種絕對單位
- Flexible Images：也是使用相對單位
- Media Queries：允許我們在不同瀏覽器寬度選擇不同的 CSS 樣式規格
把 grid.css 放到 vendors/css
響應式設計官方網站
在 index.html 引入 grid.css <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
在 style.css 新增 row

.row {
    max-width: 1140px;
    margin: 0 auto;
}

在 index.html 最外層包上 row

1
2
3

<div class="row">
    <h1>Omnifood</h1>
</div>

在 index.html 新增 header

<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>

在 style.css 加入以下

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;
}

選擇相近顏色的工具
在 style.css 的 h1 做修改

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
}

在 index.html 的 h1 加 <br> 斷行，且在 button 加上兩個 attribute

<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>

在 style.css 新增 button 樣式，link 是連結，visited 是被點擊過的連結，hover 是滑鼠放到該元素上的動作，active 則是點擊該元素的動作

.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;
}

在 index.html 的 body 下面新增 navigation

<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>

在 style.css 新增 navigation 樣式

.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;
}

在 style.css 加上一些註解，註解的樣式如下

1
2
3

/* ----------------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------------- */

Study Note

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

網站設計基礎

網站設計介紹

字體

像專家一樣使用顏色

使用圖片

使用 Icon

Spacing 和版面編排

使用者體驗介紹

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

殺手級的網站

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

讓七步驟付諸行動

第一個開發步驟

為響應式設計設置 fluid grid

建立 header