---
# System prepended metadata

title: 官網v2 Style Guide in google sites
tags: [UX / UI]

---

# 官網v2 Style Guide
:::info
與以往專案不同之處在於需邊設計邊研究gs是否能實現
:::
![截圖 2023-12-04 上午11.34.48](https://hackmd.io/_uploads/B1VeFT9BT.png)



## Theme 
 * 貼上文案時，文字樣式會跟著複製源的樣式走，導致無法跟隨自訂theme且需一個一個修改。
   * 貼上後先選擇任意文字樣式，再點選回目標的文字樣式即可。
 * 行距與段落間距的差異
   * 段落間距是換行後的距離與行距不同 
 * 文字連結會有底線
   * 直接從文字樣式取消底線即可。
 * 三種按鈕(filled, outline, text) 內的文字顏色跟隨按鈕顏色無法自定義。![截圖 2023-12-04 上午11.02.00](https://hackmd.io/_uploads/BJV8Wa5Ha.png)
 * 插入圖片可超連結，用戶不須一定要點選按鈕或文字。
 * 圖案想要有樣式需先製圖後再上傳，gs不支援圖片樣式(like stroke, shadow...)
 * g.s columns 比例，日後製圖可參考
 ![截圖 2023-12-04 上午11.43.01](https://hackmd.io/_uploads/SklWoaqB6.png)
 * 關閉頁面於header，可頁面內超連結引導。
 * [Google Sites is The Best Website Builder for Micro Businesses](https://www.linkedin.com/pulse/google-sites-best-website-builder-micro-businesses-faridul-himam)
 ![image](https://hackmd.io/_uploads/SyeUs-3B6.png)

---

# Style Guide proposal
:::info
目前兩種style guide，包含色彩計畫、中英字體、ref
非最終定案，還會因應硬體產品有所變動。
歡迎留下介面色彩上的風格意見！
:::
## 1. Tech Blue
* **Color plan**
  * concept: 科技、潔淨、敏捷、專業
![Group 8](https://hackmd.io/_uploads/Hk8x5XXBT.svg =70%x)

* **Typography**
  * 中文繁體字：思源黑體 Noto sans TC
  * 英文字體：Montserrat
![Frame 25](https://hackmd.io/_uploads/ryfYQNmSa.svg =70%x)

* **Mock up**：
![截圖 2023-11-28 下午3.47.01](https://hackmd.io/_uploads/rkb1oXQST.png =50%x)
![截圖 2023-11-28 下午4.12.35](https://hackmd.io/_uploads/BJwZ2XmHp.png =50%x)
* Icon
![截圖 2023-11-29 上午10.25.22](https://hackmd.io/_uploads/r1ewbmVBa.png)
* Gradients
 ![mesh-120](https://hackmd.io/_uploads/HyN7tmNST.png =50%x)





## 2. Future Green
* **Color plan**
  * concept: 自然能源、人文、企業責任、精神
![Group 7](https://hackmd.io/_uploads/HkybmE7ra.svg =70%x)

* **Typography**
  * 中文繁體字：思源黑體 Noto sans TC
  * 英文字體：Montserrat
![Frame 271](https://hackmd.io/_uploads/SJjkQEXr6.svg =70%x)
* **Mock up**：
![截圖 2023-11-28 下午4.17.38](https://hackmd.io/_uploads/B1CZNN7Sa.png =20%x)
![截圖 2023-11-28 下午4.18.09](https://hackmd.io/_uploads/SkAbNN7BT.png =60%x)
![截圖 2023-11-28 下午3.09.08](https://hackmd.io/_uploads/Sk0Z44Xr6.png =580%x)
* Icon
![截圖 2023-11-29 上午10.23.02](https://hackmd.io/_uploads/ryejxQ4S6.png)

* Gradients
![mesh-929](https://hackmd.io/_uploads/rJsjqm4S6.png =50%x)





---

### ref.

[To 設計師：入門網頁字型指南 -5 | 一塊設計 | apo design - 設計共筆部落格](https://apodesign.tw/uiux/getting-started-with-website-font-5/)

[字體大辯論：無襯線字體還是襯線字體？](https://tw.strikingly.com/blog/posts/the-great-font-debate-sans-serif-or-serif-lets-settle-this-once-and-for-all)

### mockup tool
[palettemaker](https://palettemaker.com/app)
[subcolor](https://subcolor.github.io)
[mesh.y](https://meshgradient.in)








