---
# System prepended metadata

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

---

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

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

# 今日講課 -- 早上部分  

- 個人專題檢討  
- 團體專題  
- 海報相關   

-----

# 海報設計  

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

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

```
主題 協辦 授課 成員 
```

- 直式海報  
> ![](https://i.imgur.com/uU0KKXe.png)   
> ![](https://i.imgur.com/O0mU0OU.png)   

----

# 海報有留邊框  

- 安全邊界  
> ![](https://i.imgur.com/u8dPjpr.png)   

- 先用兩個 15mm 方塊抵在對角線  
> ![](https://i.imgur.com/CsG1KMA.png)   

- 盡量讓資訊維持在安全邊界內  
- 如果有 QR Code 不要在安全邊界上(怕裁切問題)   
> ![](https://i.imgur.com/fpfkUbC.png)   
> ![](https://i.imgur.com/OHhavVY.png)   
> 安全邊界也是格線系統   

> 海報 在 11/18 交   
> 團體的部分要出來   

-----

# 團體專題的部分 - 同學專題的民宿  

- 像一些特效, 雲 可以用 png 去做   
> ![](https://i.imgur.com/9b4AXYw.png)   
> 會來找銜接點  
> 然後考慮效能調整   

----

# 免費可授權的字型部分  

- 上 google font 找字型  
> 找不到的話可以去激燃體找  
> 看能不能商用和可授權  
> 照設計師和業主需求, 如果要下載和安裝  
> 最後一步是用外框 - 外框曲線(outline)   

# 參考資料 - 外框曲線   

[如何將AI檔的完稿文字轉外框曲線？ | 集比客製化商品部落格 (xebe.com.tw)](https://blog.xebe.com.tw/convert-text-to-outlines/)   

  
  ---
  
  # 字型授權不便宜  
  - 買斷    
  - 租   
  > 要考慮到成本考量   

----

# 文字的規則  

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

- 統一規格  
> 有沒有順序性之類的  
> ![](https://i.imgur.com/HTgspyO.png)   

- 文字可以選粗細變化的, 比較有強調性  
> ![](https://i.imgur.com/nbxPDKL.png)   

- 然後是使用者體驗的部分  
> 讓一行比較滿, 有無現代人的需求(例如 wifi)  等  

----

# 文字裝飾的部分  

- 前綴圓點可以統一規格  
> ![](https://i.imgur.com/msG5yrs.png)  
> 留白部分也要注意   

----

# 文字內框限制長度  

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

- 畫面上的置中   
> ![](https://i.imgur.com/dZEc4I4.png)   
![](https://i.imgur.com/jGTLr8U.png)

----

# footer 的部分  

- 可以調整置中位置   
> ![](https://i.imgur.com/Zv94xIy.png)  


- 調整後的樣子   
> ![](https://i.imgur.com/jGTLr8U.png)   

---

# 整體   

- 文字大小  
> ![](https://i.imgur.com/9MnzYst.png)   


----
-----

# 下午的部分   

# 同學範例 - 汽車包膜  

# 分割卡片  

- 注意視覺上的平衡  
> ![](https://i.imgur.com/O6ipOew.png)  

- 點選車子下有分頁  
> ![](https://i.imgur.com/2hE9fjm.png)  

- 門市資訊的文字和對齊位置部分  
> ![](https://i.imgur.com/lAjbocF.png)   



# 同學範例 - 左岸巷弄   

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

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

>![](https://i.imgur.com/RrjjM59.png)  
> 自由度比較高   
> 還有思考細部的地方   

----

# 吉倈早餐店  

> 參考 [美之卯](mimiu.co.jp)  
- 經典組合 - 橘色 / 咖啡色    
- 台式早餐店  
- 素色  
- 米色來自牆顏色   
- 紅色讓他跟牆面對比  

----

# 說明稿的文字位置  

- 在邊框外   

---

# Banner 選圖  

- 選跟早餐店有關的  

-----

# Nav 文字置中   

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

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

- 變得比較扎實   

----

# 關於我們  

> ![](https://i.imgur.com/9afeS7g.jpg)   
> 圖片緊實跟疏鬆的比較  
> 找緊實的搭配文字  


- 需要一個標題   
> ![](https://i.imgur.com/FGvP26i.png)   

- 空白的地方放上文案、裝飾  
> ![](https://i.imgur.com/kwlaDLs.png)   

- 也可以放上手寫字  
> ![](https://i.imgur.com/t6UvnxH.png)  

> ![](https://i.imgur.com/wOvsxoN.png)   
> 字型問題, 不太好調整  


----

# 店家介紹  

> 如果圖片解析度不夠，或是太少  
> 可以用文字裝飾  
> 極簡有極簡的裝飾風格  
> 也可以很樸素，看起來很有活力   

---

# 美味承諾  

- 文案和多了幾張圖環繞，這樣比較有效果  

---

# 精選套餐上面的菜單  
![](https://i.imgur.com/5yaUL2P.png)   

> 可以選用木紋做背景  
> 簡單樸實好裝飾  

----

# 調整精選套餐  

- 也許上個間距  


- 菜單的輪播圖   
> 喔喔~ 這種菜單的換法也不錯, 有彈出來的感覺  
> 彈出來的效果比較有層次  
> 因為飲料他一杯的顏色都不一樣  
> 但早餐顏色都差不多   
    
----

# 地圖的標題資訊  

- 和間距調整  
- 給文字  
- 和給地圖排列  

----



