---
# System prepended metadata

title: 重點參考網站分析
tags: [UX / UI]

---

# 重點參考網站分析

>本次官網修改可用與未來可參考(do more)之UX設計細節整理

* [**hapco**](https://www.hapco.com/catalogs/)
* [**Lumca**](https://www.brightlifebylumca.com/city-challenges/)
*  [**shuffle smart pole**](https://www.schreder.com/en/enhanced-pages/shuffle-smart-pole)
---

 ## 1. Header (Top navigation bar)
* 透過圖像辨識目標
產品名稱或非大眾所熟悉的產品，以圖片搭配文字的呈現方式能讓使用者更快找到所需。
![截圖 2023-11-29 上午11.28.21](https://hackmd.io/_uploads/rk5VeN4B6.png =70%x)

  e.g.與車輛型號、代號相比起來圖片更易於理解。![截圖 2023-11-29 下午12.14.50](https://hackmd.io/_uploads/Bkqa9N4Sa.png)





## 2. **Footer**
* Testimonials or Awards（圖最右）
  * Highlighting accolades in the footer can be a good tactic when building authority and credibility.
![截圖 2023-11-29 下午12.21.02](https://hackmd.io/_uploads/S1n834EH6.png)
     
* Sitemap Footers
  * 大型網站最適用
  * 缺少sticky header or scroll to top可利用sitemap footer來避免使用者迷路   
     ![截圖 2023-11-29 下午1.43.38](https://hackmd.io/_uploads/Syv31LVrT.png)











---

### Study
[Breaking down Amazon’s mega dropdown](https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown)
[用 hover 取代 click 來開啟選單並不是一個好設計](https://jason-memo.dev/posts/replacing-click-with-hover-interaction-is-not-a-good-design/)
[How to Implement Sitemap Footers to Keep Users Going?](https://www.interaction-design.org/literature/article/how-to-implement-sitemap-footers-to-keep-users-going)
[Footers 101: Design Patterns and When to Use Each](https://www.nngroup.com/articles/footers/)