---
# System prepended metadata

title: 2021-11-18 UI design & Layout - Team project & poster discussion
tags: [UI design & Layout, 進度筆記, 前端心得]

---


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

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

# 今日講課 -- 早上部分  

- 海報製作

----

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

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

By 文傑
```
----


# 團體專題海報  

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

- 自己拍可能有肖像的問題  
> ![](https://i.imgur.com/1NhIJse.png)   

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

----

- 腳步的方向性引導去人那 ↓  
> ![](https://i.imgur.com/CtDnIsE.png)   
> 可以把目光帶上去   
> 有方向性的東西, 可以做為導向   

- 如果畫面覺得太空, 可以放上碗, 玩具之類的 ↓  
> ![](https://i.imgur.com/RM6L3X9.png)   

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

- 印刷 CMYK   
> 四色黑  
> 相加總和要低於 280   
> ![](https://i.imgur.com/XrkMmhm.png)  
> 印刷的時候花四個顏色的墨水   

- 左邊是單色黑, 右邊的的黑帶一點灰 ↓    
![](https://i.imgur.com/0HJLwhJ.png)   
> 純黑的話, 印刷出來會是死黑   
> 97% 的黑帶有點灰就不會看起來比較死   

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

- 字的話也能應用黑帶有灰   
> ![](https://i.imgur.com/mnoiz7f.png)   


- 存 PDF 的方式 ↓   
> ![](https://i.imgur.com/ZIIpFVG.png)   
> 確定存的工作區範圍  
> 預設長這樣 ↓  
> ![](https://i.imgur.com/LRnLckR.png)   
````
可以把保留 Illustrator 的編輯能力關掉
這是可以保留回 ai 編輯的選項
````
```
從頂層圖層建立 Acrobat 圖層關掉 
不需要紀錄圖層, 可以減少容量
```
```
可以保留內嵌頁面縮圖
```

- 壓縮的選項 ↓   
> ![](https://i.imgur.com/tSfz6JS.png)   

----

- 做的時候注意標籤有沒有變成 pdf ↓   
> ![](https://i.imgur.com/09mHUeu.png)  
> 變成 pdf 關掉重開  

----

- Mock up 的部分  
> ![](https://i.imgur.com/1C8Tsy0.png)   
> 一般專案上設計師通常不會特別幫工程師量寬高  
> 會把時間拿去處理頁面, 出圖   
> 工程師直接抓整數   

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

- 邊框調整  
> ![](https://i.imgur.com/Ng2YVlk.png)   


----

# 下午的部分  

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

# 同學的範例 - 飯店~  

---

> ![](https://i.imgur.com/UMulRkL.png)   
> 整體規格置中  
> 可以思考 QR code 進入海報   
>  QR Code 用黑白色, 是因為對比度高  
>  要注意對比色有沒有跑掉   
>  ![](https://i.imgur.com/AUChttD.png)


----

> ![](https://i.imgur.com/lGxcYTn.png)   
> 把網址送下去了~   

----

# 同學的海報範例 - 八里   

> ![](https://i.imgur.com/CKPze8B.png)   
> 調整文字  
> 透明度  
> 道路和更動腳踏車的方向  
> 主要標題  
> 背景素描素材放大換方向  
> Mock up 圖片調整   

-----

# 同學的 Mock - up - 八里   

# 標籤的東西  
- 通常在左邊  
- 字體要選對比, 例如白  
> ![](https://i.imgur.com/cxEsqKI.png)   

----

# 卡片下面不用太長  

> ![](https://i.imgur.com/BIgV0o1.png)   

- 調整到正中間 ↓  
> ![](https://i.imgur.com/Cl3BWng.png)   



----

# 早餐店 - 海報    

- 分析問題點  
- 文字部分 ↓
> ![](https://i.imgur.com/BwfxtQk.png)  
- Mock up 部分 ↓    
> ![](https://i.imgur.com/t3tnd6I.png)   

- 文字部分 ↓   
> ![](https://i.imgur.com/VwfjBH1.png)   

-----

- 調整三明治位置  
> ![](https://i.imgur.com/OYhOKtt.png)   

----

- 對齊漢堡位置  
> ![](https://i.imgur.com/Nw0NgjL.png)   

-----

- 對齊 Mock up 空間  
> ![](https://i.imgur.com/XgjKaeC.png)  

---

- 調整標題文字  
> ![](https://i.imgur.com/OBUAQs2.png)   

----

- 調整 Good morning  
> ![](https://i.imgur.com/nNgj0x0.png)    

----

- 調整漢堡位置  
> ![](https://i.imgur.com/49naYzc.png)

----

- 調整留白  
> ![](https://i.imgur.com/ZIN4GRR.png)   

----

- 大致調整狀況  
> ![](https://i.imgur.com/Zty0xGL.png)  

---

# 早餐店 v3 版 Mockup

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

----

> ![](https://i.imgur.com/IRC2iXD.png)   
> 調上去 ↑    

---

> ![](https://i.imgur.com/r0HpnRH.png)   
> 有背景比較豐富 ↑  

---

> 這塊很不錯  
> ![](https://i.imgur.com/9ulGtwQ.png)   

----

## 地圖   
> Line 很好看  
> 地圖的深度差一點  
> ![](https://i.imgur.com/wnBY49s.png)   
> ↓ 暖色系  
> ![](https://i.imgur.com/1vS0RN1.png)   

----

## Footer  

> ![](https://i.imgur.com/mGVYeqL.png)  
> 


----

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

----

# RWD  

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

-----

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

----