---
# System prepended metadata

title: ⚡️ 5/20 （四）每日任務 Day 9
tags: [UI 直播班 - 2021 春季班]

---

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

# ⚡️ 5/20 （四）每日任務 Day 9

## 本日題目：Breadcrumbs

```
Breadcrombs 又稱為麵包屑導航
使用者可以在網頁中確定自身位置以及轉移位置
麵包屑這個詞來自糖果屋這個童話故事；故事中主角們企圖依靠灑下的麪包屑找到回家的路

一共有三種類型的網頁麵包屑導航
路徑型(Path)：路徑型麵包屑是一個動態顯示使用者到達頁面經過的途徑。
位置型(Location)：位置型麵包屑是固定的，顯示了頁面在網站結構中的位置。
屬性型(Attribute)：屬性型麵包屑給出的當前頁面的分類資訊。

Breadcrumbs 常用於分類頁較多的網頁（e.g. 部落格）
今天就來試著設計一個部落格的 Breadcrumbs 吧！
```

- **請依照下方情境設計一個部落格 Breadcrumbs**
- **首頁>學習文章>職場甘苦>本日熱門**
- **任務模板**
  - 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)


---

#### Dribbble 參考連結：

[範例 1](https://dribbble.com/shots/4898605-DailyUI-Challenge-056-Breadcrumbs)

[範例 2](https://dribbble.com/shots/2729768-Breadcrumbs)

[範例 3](https://dribbble.com/shots/2472359-Daily-UI-Day-56-Breadcrumbs)

## 任務回報流程

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

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

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