# 重點參考網站分析 >本次官網修改可用與未來可參考(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/)