# 2021-11-18 UI design & Layout - Team project & poster discussion
###### tags: `UI design & Layout` `進度筆記` `前端心得`
---

講師: 盧政憲
視覺設計 / 介面設計

# 今日講課 -- 早上部分

- 海報製作

----

海報的PSD檔 放在 個人專題 跟 團體專題的 資料夾裡 

11 號資料夾 放 海報完成稿的 PDF 檔

By 文傑

----

# 團體專題海報

# 同學範例 - 寵物主題咖啡廳
- 人

- 自己拍可能有肖像的問題
> 

- 素材網找的可能就會特別注意拍的位置

----

- 腳步的方向性引導去人那 ↓
> 
> 可以把目光帶上去
> 有方向性的東西, 可以做為導向

- 如果畫面覺得太空, 可以放上碗, 玩具之類的 ↓
> 

- 螢幕 RGB 是色光
> 單色黑
> 光會越加越亮
> RGB 三色混合疊加得到白色
> 印刷的時候只花一個顏色的

- 印刷 CMYK
> 四色黑
> 相加總和要低於 280
> 
> 印刷的時候花四個顏色的墨水

- 左邊是單色黑, 右邊的的黑帶一點灰 ↓
> 純黑的話, 印刷出來會是死黑
> 97% 的黑帶有點灰就不會看起來比較死

通常印刷的時候會先調整成單色黑  
送印刷廠的話會越注意四色黑的問題

- 字的話也能應用黑帶有灰
> 

- 存 PDF 的方式 ↓
> 
> 確定存的工作區範圍
> 預設長這樣 ↓
> 

可以把保留 Illustrator 的編輯能力關掉
這是可以保留回 ai 編輯的選項

從頂層圖層建立 Acrobat 圖層關掉 
不需要紀錄圖層, 可以減少容量

可以保留內嵌頁面縮圖

- 壓縮的選項 ↓
> 

----

- 做的時候注意標籤有沒有變成 pdf ↓
> 
> 變成 pdf 關掉重開

----

- Mock up 的部分
> 
> 一般專案上設計師通常不會特別幫工程師量寬高
> 會把時間拿去處理頁面, 出圖
> 工程師直接抓整數

出去可能會遇到
Adobe XD
Figma
mac: schedule
有工具可以直接量邊

- 邊框調整
> 

----

# 下午的部分

# 用 Canvas 的部分
- 這是線上製作海報、名片等, 各種文宣用品的工具

# 同學的範例 - 飯店~

---

> 
> 整體規格置中
> 可以思考 QR code 進入海報
> QR Code 用黑白色, 是因為對比度高
> 要注意對比色有沒有跑掉
> 

----

> 
> 把網址送下去了~

----

# 同學的海報範例 - 八里

> 
> 調整文字
> 透明度
> 道路和更動腳踏車的方向
> 主要標題
> 背景素描素材放大換方向
> Mock up 圖片調整

-----

# 同學的 Mock - up - 八里

# 標籤的東西
- 通常在左邊
- 字體要選對比, 例如白
> 

----

# 卡片下面不用太長

> 

- 調整到正中間 ↓
> 

----

# 早餐店 - 海報

- 分析問題點
- 文字部分 ↓
> 
- Mock up 部分 ↓
> 

- 文字部分 ↓
> 

-----

- 調整三明治位置
> 

----

- 對齊漢堡位置
> 

-----

- 對齊 Mock up 空間
> 

---

- 調整標題文字
> 

----

- 調整 Good morning
> 

----

- 調整漢堡位置
> 

----

- 調整留白
> 

----

- 大致調整狀況
> 

---

# 早餐店 v3 版 Mockup

- 主要改了葉子(被截斷), good morning
- 地圖深度(暖色)
- footer icon 置中, 然後間距調整

----

> 
> 調上去 ↑

---

> 
> 有背景比較豐富 ↑

---

> 這塊很不錯
> 

----

## 地圖
> Line 很好看
> 地圖的深度差一點
> 
> ↓ 暖色系
> 

----

## Footer

> 
>

----

## 字體間距小於行距
> 只有這邊要處理

----

# RWD

1. 截圖丟 Line / 手機 看
2. 用瀏覽器開發工具看
3. 不要怕很長, 因為四線道變成一線道, 所以會超長
4. 文字間距問題(字盡量不要去縮)
5. 等比縮小的東西用在圖片、裝飾

-----

- 白色的線條拿掉
- 灰色往上移
- 中間三塊可以放大

----