Day 8 - Figma 繪製精美 Mockup (一)

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day7 我們即將進入設計階段，這邊一樣也是使用 Figma 來進行繪製，前面如果 Wireframe 也是用 Figma 繪製，那你這邊就可以沿用好好偷懶一下(笑)，當初會使用 Figma 的其中原因也是考慮到 Mockup 會使用 Figma ，可以沿用複製調整就會更快速、省時間，下面先帶大家回顧一下前面的篇章重點，接下來進入正題。

回顧篇章
我們從
Day1、Day2 Side Project基礎認識 ▶ Day3開始發想 Side Project 主題 ▶ Day4規劃開發流程 ▶ Day5蒐集資料、確立風格 ▶ Day6、Day7繪製Wireframe ▶ Day8 Mockup 視覺稿 ...

篇幅預告
是不是開始一步一步慢慢上軌道了呢，
Day1 - Day7 ― 初期主題發想、規劃、蒐集資料
Day8 - Day10 ― Figma 繪製 Mock up、Prototype 原形設計 (Figma 教學為主)
Day11 -Day19 ― 開發前切版基礎知識、切版實作技巧、RWD、版型規劃、切版進階技巧
Day20 -Day22 ― Side Project 開發環境架構 (BS)
Day23 -Day30 ― Side Project 專案開發實作技巧 (BS、Variable、Utilities、套件)

想看實作開發的要在耐心等等，到下半部我們才會開始進入實作切版技巧的分享，再請大家耐心收看 !
進入本篇正題

進入設計階段

前面我們有提到開發流程的設計階段，當前面繪製好 Wireframe 就會開始進入設計階段，這時候首先要先蒐集資料及圖庫，並開始決定專題的色系、視覺呈現，我們會從 Wireframe 延伸，這時候會再做更進一步精細的繪製，最後成 Mockup視覺稿，這時候的設計稿就會固定下來不再變動了，所以在這階段會進行最後設計確認跟微調。

Wireframe ? Mockup ? Prototype ? 傻傻分不清楚

Wireframe ? Mockup ? Prototype ? 是不是常常這三個搞不太清楚?
不曉得差異究竟在哪邊，下面帶你基本認識，了解三者的差異

Wireframe 線框稿 ― 版面配置、灰階呈現、線條框線呈現 (草稿)
Mockup 視覺設計稿 ― 精細的規格設計、視覺呈現、配色 (上色)
Prototype 原型產品 ― 產品原型呈現 (3D/產品模擬)

下面這張圖，我們更可以清楚知道三者之差異，會先在 Wireframe 規劃好大致區塊，在 Mockup 視覺呈現，最後是模擬原型，這邊提供一個 Figma 官方的 Prototype 展示，讓大家對 Prototype 更好理解。

圖片來源: AOB

Su 專題經驗談 (Mockup 視覺設計稿)
Side project 視覺設計稿 - 汪喵你我知

這是我 Side Project 使用 Figma 繪製而成的設計稿，當初因為時間的關係，所以設計的間距並沒有特別去調整，主要是把設計稿呈現出來，但是比較符合規範的設計稿是要有設定好的間距，跟合適的字體大小，才不會開發時再去調整會比較浪費時間，不過還是給大家提供參考。

下面這張圖可以看到 視覺設計稿 其實就是 以 Wireframe 為基礎，組合素材蒐集素材，最後變成完整的 Mockup

Color 設定

• 考慮整體風格呈現，須訂定主色、副色、搭配色
• 顏色不要過多，避免過於花俏偏移主題
• 圖片挑選也需考慮整體配色進行

分享幾個好用的工具
Nipponcolors 日本色系網站(顏色柔和、舒適)

ColorZilla吸顏色吸起來 ! 看到不錯配色就可以使用這個工具

右上角點取吸取工具

點擊吸取顏色，會有色碼 # XXXXXX 就可以直接複製使用

顏色的部分其實會是 Side Project 的一大重點，因為好的配色可以帶來不同感覺，所以在配色上可以多多嘗試，前面有分享一些配色的網站及參考的網站，如果是配色苦手的你不仿可以參考那些網站，免得配成像霓虹燈就不好了。

Su 專題經驗談 (Color 配置)

這邊可以看到我的專題色系主要是以黑白灰為主，顏色上主要用三色(黑白灰)搭配的兩色(輔助)，再搭配鮮豔的圖片去做對比呈現，讓整個畫面更豐富。
字體的部分是選用有帶一點點咖啡的讓看起來會更舒適。

今天就分享到這邊，
明天會再分享 Mockup 的 Figma 教學 ，
謝謝大家收看 !