# 官網v2

:::info
目前還比較雜記流水，尚待整理請多包涵🥹 thanks
:::

>第一版官網3+1週(11/23~12/25)在google site產出，撇除功能頁

## google site basic info for UI
1. 上傳格式.png, .jpg, or .gif format (❌.svg)

註: media kit (*.svg, *.jpg, *.png, *.eps)

---

### 功能頁參考網站

[TESLA](https://www​.tesla​.com​/zh​_tw​/modely​/design​#overview)
[HONDA](https://www.honda-taiwan.com.tw/Auto/Calculator) (內裝配件選擇時可以複選，智慧杆除了主要三件之外的小件可參考。)
[IKEA](https://www.ikea.com/addon-app/storageone/smastad/web/latest/?range=smastad&uiPlatform=web&locale=zh-TW#/planner) （以3D模型讓客戶模擬家具在空間的分佈。不過重點是最後它能讓客戶儲存設定值，並寄送至信箱。我在想智慧杆也並非是可以直接下單的電商產品，也許網頁也能以此種方式讓客戶存取設定值，後續與公司聯絡時能更快表達自己所需要的硬體組合為何，減少溝通成本。）
[APPLE](https://www.apple.com/shop/buy-iphone/iphone-15-pro)

### 相關產品參考網站
>此區塊為UI&SiteMap主觀認為值得參考的網站。

H/W
[BrightLife](https://www.brightlifebylumca.com) (UI,清晰整潔，即使是渲染圖也清楚傳達產品和品牌。)
[TELENSA](https://www.telensa.com)（UI,較現代，在首頁以數字、數據呈現的方式讓用戶直觀理解免去閱讀大量文字。）
[FASTLANE](https://fastlane.tech/smart-poles) （UI,在首頁以卡片+九宮格陳列方式展示能提供給客戶的服務。）
[Ekin](https://ekin.com)

S/W
[AWS](https://aws.amazon.com/tw/what-is-cloud-computing/?sc_channel=EL&sc_campaign=amazonfooter) (SM,此頁面介紹aws軟體服務的優點和類型，類似介紹自身技術的概念。下方接著引出實際案例的文章，有效引導客戶對於品牌的信任。)

### 重點參考
> [重點參考網站分析](https://hackmd.io/QtB-FSRxS4uLA8GFYnkaLw)

* [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)

### Google sites templates
> [Google Sites](https://hackmd.io/v5IbLxRpQjuj7-w1pAhq6A) related note

* [Premium Google Sites Templates](https://www.templateheaven.store/google-sites-templates)
* [Google Site Wireframe Templates](https://www.templateheaven.store/google-sites-wireframe-templates)
* [Google Sites Themes](https://iindicator.github.io/Google-Sites-Themes/)
* [Free Google Sites Templates](https://www.imaketemplates.com/google-sites-templates)
* [Google Sites Templates](https://www.kirksvillewebdesign.com/google-sites/google-sites-templates/free)
* [Google Sites landing page templates](https://landingexam.com/google-sites-landing-page-templates.html)
* [google sites professionals](https://www.zimtom.com/page/main-pages/google-sites-professionals)
* [Pathways](https://www.pcni.org/home)
* [Jirvus Technologies](https://www.jivrus.com/home)
* [Protection and Control Solutions](https://www.electricpcs.com/home)
* [DrPete Technology Experts](https://www.drpete.co.uk/home)

---
### 工具
- inkscape
- figma

### 必要元素
- 品牌標誌 logo pack [Google drive](https://drive.google.com/drive/folders/17bdNAGdb83zPx16eugC6uD1AF4tj277j?usp=drive_link) (已更新完成至TB)
- 主視覺 visual
- 圖庫 gallery
- 文案 content
- 網站地圖 sitemap (Star)
- 線框圖 wireframe
---
## 主視覺
📍 簡單、科技、新創、綠色、亮一點

todo
- [x] UI style guide

- [x] 中、英字體選擇
- [x] color system
- [x] 製作mood board

## 素材
📍 檔案規格注意，以免影響網站載入速度

### 1. 圖庫
工具軟體：inkscape, ps, keyshot
現有素材：
* 方杆-[建模檔](https://drive.google.com/drive/folders/1FVBfl6RCP_pgYGy7L26k5Yv1Js-1WpcZ)、[實拍照](https://drive.google.com/drive/folders/13DatgFzCV05935l2kQXqkcNOjwXunP2X)、[渲染圖](https://drive.google.com/drive/folders/1gkqsIYG3VryNKh1lvF5CdG9V33Rw6VBa)、[mockup](https://drive.google.com/drive/folders/1yCvFREHGeoNV67QWZ6-fCxgM3OKIn4GN)
* 圓杆- [ppt畫面參考](https://drive.google.com/drive/folders/1LRpWsroLLoZlXIlXDO4oeoNLuoJs0-8w)、已向vince拿檔案等待中

todo

- [x] **協力廠商 logo**
- [x] 下載商標
- [x] 確認要放上官網的logo
- [x] 整理成.png檔

- [ ] **主要banner圖**
- [x] 獲得建模檔、渲染檔
- [x] 主視覺定調後 開始渲染與製圖

### 2. Icon
- [x] **基本Icon**
- [x] 稍待主視覺訂定＆sitemap出來再安排

💭 what i think
先做方杆再搞圓杆，可能會以建模圖+Icon為主，因為圓杆實拍照短期內不會有。所以建議整體都統一以建模圖，實積再放實拍照。

## 文案
初階段-以現有網站為主or mock content

---
## Question
>待釐清疑問區塊 ✅已解決 🔍進行中

1. ✅ 智慧杆方管跟圓管的圖都要製作嗎，或是該以哪一個為主？for主要硬體產品製圖
＝兩個都會放，都讓用戶做選擇。

2. 為確認製圖工具，需要知道我有什麼素材。

a. 現在預設的製圖流程為：跟Vince拿渲染過的3D檔➡️我自行出圖+後製(方、圓都適用)
:::spoiler b. 試用了一個免費的ai 3d模型生成網站[polycam](https://poly.cam/captures)
原本想說如果能生成模型再透過影像合成的ai，製作應該會省不少功夫，但成果不太行。他要我提供多張照片，我以咖啡鐵罐給它⬇️它生成的⬇️（只有一半的罐子lol）

3. google site RWD在平板與手機螢幕尺寸會跑版，以我現在套的html來看。
可能再請問Vian這能透過寫code改善嗎(11/24 16:00討論)
-優先順位可以先不管其他螢幕尺寸，以電腦尺寸為主。
-參考其他google site templates的語法

4.✅ 字體相關
僅三種字體可選?
➡️主題/自訂/新增樣式

5.✅ 協力廠商是否需要更新（新增或刪減）？
目前官網有以下協力廠商⬇️
TATUNG, ASUS, ASKEY, Hwacom, 經濟部標準檢驗局, 工業技術研究院,緯創（待確認）

---
## 在Google sites測試的一些小紀錄

1. Vian的code可以正常的在gs上互動⬇️
=昨天失敗的原因，沒有切換到預覽模式所以互動失敗。應更詳盡的摸索gs