---
tags: UI 直播班 - 2021 春季班
---

# ⚡️ 5/18 （二）每日任務 Day 7

## 本日題目：Header

使用者進入網頁看到的第一眼便是 Header 頁首
Header 的設計重點有兩個：
1. 讓使用者一眼明白這個網頁的主題、所在位置
2. 引導與刺激使用者繼續瀏覽你的網站，而非直接關閉

Header 通常會包含 Logo、網頁首圖、頁面選單、引導文字、引導按鈕
挑選一張符合網頁風格的圖片，並依照網頁標準色修改元件色彩相當重要
尤其要注意圖片解析度與文字壓在上面的辨識度
你不會想點開網頁看到一張既模糊又變形的圖片的（笑

今天，我們來嘗試製作一個線上展覽的 Header 吧！

- **請依照下方情境設計一個 Header**

- 設計重點：**圖片與網頁標準色的搭配**
- **主題：藝術展覽網頁**
- 需含有：Logo、網頁首圖、導覽列、標題文字、引導按鈕
- **內容資訊限制：**
- Logo 名稱：HexExhibition
- 網頁首圖請前往 [Unsplash](https://unsplash.com/) 搜尋關鍵字（e.g. art），並依照下方快速篩選教學查找圖片
- 導覽列請包含：展覽活動、藝術新聞、藝文影音、線上藝廊
- 標題文字：（大標）金角線上設計展、（小標）日期自定
- 引導按鈕：購買票券、詳細資訊

- 參考範例：


- **任務模板**
- dribbble 上傳的作品尺寸有固定尺寸，建議可以先下載[任務模板](https://firebasestorage.googleapis.com/v0/b/homework-tools.appspot.com/o/ui-training%2F20215%2F37WWX-Daily%20UI%20-%20dribbble%20template.xd?alt=media&token=e26755e4-5af0-4aa7-ad94-02354057c86a)

---

### Unsplash 快速篩選教學

1. 篩選圖片方向為 Landscape


2. 篩選想要的圖片色系


---

#### Dribbble 參考連結：

[範例 1](https://dribbble.com/shots/10039183-Vazze-Website-Header)

[範例 2](https://dribbble.com/shots/15216392-B2B-CleanTech-Company-Landing-Page-Exploration)

[範例 3](https://dribbble.com/shots/15121319-Plants-Shop)

## 任務回報流程

請同學依照下方步驟回報任務:

> **初次回報請先至 [Dribbble](https://dribbble.com/) 註冊會員**

1. 將完成的作業整理並上傳至 Dribbble
2. 將 Dribbble 連結貼至 Slack 的每日任務回報區
3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/VyvpcJzzQy6yz8bRucvqLg?view)