透過昨天把Wireframe畫出來，對於整個UI會用到的元件更有個底了，今天先把最基本的UI System做好，明天把每個頁面拼出來，這樣就(終於)可以開始寫程式了！！再emphasize一次...這個專案主軸是NUXT3專案練習，不是超讚超美UI/UX分享，所以是做了一個堪用的樣子而已，真正專業的UI/UX不會這樣，拜託不要鞭我這邊><...到現階段都跟NUXT3還碰不上邊，一直在摸一個 這是世上～最熟悉的陌生人(唱～)((糟糕！年齡暴露))先把根基打好，到時候寫程式&刻畫面有需求書可以參考就不會慌張了～

• 文字系統
• 顏色系統
• UIKit
• RWD
• Layout Elements
• Product Elements
• 閒聊碎碎念

文字系統

文字分成三種，以下是定義：

1. Title: 標題字，有行高，可規範文字範圍最大長寬。
2. Paragraph：內文字，有行高，可規範文字範圍最大長寬。
3. Label：單行文字

這是規劃：

• Title-l
• Title-m
• Title-s
• Paragraph-l(& blod)
• Paragraph-m(& blod)
• Paragraph-s(& blod)
• Label-l
• Label-m
• Label-s

本來想使用Figma的Plugin:typescales調整各種文字的尺寸，但每個種字型樣式只有分成大中小，所以就直接手動調整了，這是工具的截圖:

顏色系統

沒什麼設計理念，只是(好久)以前做設計時，做某個UI練習配色是紫色基底，黃色點亮，覺得滿美的，所以沒多想就把配色拿來使用。主色是紫色、黃色，然後就基本的黑白灰紅綠。

• 紫色 - 主要色/底色
• 黃色 - 畫龍點睛色(自己取一個霸氣的名字)
• 黑色 - 一般文字
• 白 - 一般背景/深色背景的文字
• 灰色 - 背景/文字
• 紅色 - 失敗/警告
• 綠色 - 成功

第一次使用Figma，有稍微爬一下教學，這邊我使用Fundation Color Generator來generate color system:

UIKit

一樣，依照前一篇的wireframe，整理出會用到的UI Kit先列出：

• 首先是icon的部分，直接使用Fontawsome：
  
  • >
  • Hamberger
  • filter
  • Member
  • Language
  • Category
  • Shopping Cart
  • Delete
  • Purchase
  • Stars
  • +
  • -
• buttons: 覺得我只用得到兩種按鈕...明天排版pages真心覺得不夠的話，會再回來update
  • Primary-黃
  • Sacondary-紫
• Set Amount (+/-): 這個kit是調整購買數量的
• more：Load更多items
• dropdown & input: 想直接套用vue-select的樣式，就不另外設計了。規劃完後，接著在Figma裡整理出來。

RWD

使用12-column grids system來做佈局：

構想的頁面結構是在每種尺寸裡都有一個content container來定義內容最大/小寬度，置中，比它寬的部分就留白。
共有三種尺寸，分別列出螢幕寬度/content container的寬度：

• Desktop(width): 1101px up / 1000px ~ 1200px
• Pad(width): 769px ~ 1100px / 700px ~ 900px
• Mobile(width):375px ~ 768px / 355px ~ 750px

LayoutElements

總共用到的Elements有以下幾種，分別也把手機排版跟電腦排版排出來：

• NavBar
• Shopping Cart
• Category
• Where I am
• Language

ProductElements

• Product Item
• Product Filter
• Reviewer
• More

閒聊碎碎念

今天差點要開天窗Ｔ＿Ｔ下班還要做這個真的太操ＸＤ要趁休假時多累積一點文章才行...
再碎念一下溫哥華的夏天好了。這邊房子很多都沒有冷氣，但說真的也沒必要；經歷今年的夏天，我的體感是夏天只有七月裡某三個禮拜，身為一個台灣人，夏天30幾度很正常，40度也不是沒看過；呀恩勾(台語)我在這邊還沒經歷到30度以上，27,8度(乾熱)開電風扇就非常夠了。從八月底開始就20度以下，出門我已經需要穿外套了。俏皮的Vancouver也開始要變回Raincouver了...啊～夏天真短...