---
# System prepended metadata

title: UI 設計參考網站
tags: [教學文件]

---

###### tags: `教學文件`
# UI 設計參考網站


# 後台設計
https://preview.keenthemes.com/metronic/demo2/index.html


# header 設計

http://wpbingosite.com/wordpress/cariana/home-1/

- logo的設計要注意：
   1. 圖片要清楚，不要使用css 放大圖片，要用正常尺寸
   2. 使用svg圖片檔案格式

- 選單要顯示所在位址
- 如果是電商，要有購物車
- 選單太多項目，要記得分類，從資訊架構去分類
- 選單有固定的功能，往上滑或是往下滑會顯示


### 其他網站

- [WordPress Blog Themes - Magazine Themes | ThemeForest](https://themeforest.net/category/wordpress/blog-magazine)
- [Vidio - Video Manager WordPress theme Preview - ThemeForest](https://preview.themeforest.net/item/vidio-video-manager-wordpress-theme/full_screen_preview/27614165?_ga=2.102460609.1585058033.1622531619-855231248.1613180785)
- [Admin Templates - Dashboard Templates | ThemeForest](https://themeforest.net/category/site-templates/admin-templates)
- [Metronic - Bootstrap 4/5 HTML, VueJS, React, Angular 11 & Laravel Admin Dashboard Theme Preview - ThemeForest](https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469)
- [Metronic Live preview | Keenthemes](https://preview.keenthemes.com/metronic/demo2/index.html)

- [MyMedi - Responsive WooCommerce WordPress Theme Preview - ThemeForest](https://preview.themeforest.net/item/mymedi-responsive-woocommerce-wordpress-theme/full_screen_preview/29160146?_ga=2.189800427.1174285847.1622528508-855231248.1613180785)
- [Maxi - Gutenberg Magazine & News Theme Preview - ThemeForest](https://preview.themeforest.net/item/maxi-news-magazine-theme/full_screen_preview/12645893?_ga=2.225279066.1174285847.1622528508-855231248.1613180785)


- [Cariana - WooCommerce Lookbook Fashion Theme Preview - ThemeForest](http://preview.themeforest.net/item/cariana-woocommerce-lookbook-theme/full_screen_preview/21305534?_ga=2.34967649.1174285847.1622528508-855231248.1613180785)
- [Scoda. - Multipurpose One Page HTML5 Template](https://scoda.mocutasorin.com/creative-agency)

- [Nike 官方商店。Nike TW](https://www.nike.com/tw/)
- [MAC 官方網站：專業彩妝品牌｜MAC 線上購物](https://www.maccosmetics.com.tw/?cm_mmc=sem-_-2020-_-hp-_-rsa&utm_medium=paid_search&utm_source=google&utm_campaign=generic-general&utm_content=rsa_202008&utm_term=online&gclid=CjwKCAjwtdeFBhBAEiwAKOIy54gdejaSsGUKnf-nwTOFbpnpHKH8Sa-JcEphKkLKc6jwAeqsdtja0xoCXE8QAvD_BwE)
