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

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

# 今日講課 -- 早上部分

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

-----

# 海報設計

> 

> 

主題 協辦 授課 成員 

- 直式海報
> 
> 

----

# 海報有留邊框

- 安全邊界
> 

- 先用兩個 15mm 方塊抵在對角線
> 

- 盡量讓資訊維持在安全邊界內
- 如果有 QR Code 不要在安全邊界上(怕裁切問題)
> 
> 
> 安全邊界也是格線系統

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

-----

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

- 像一些特效, 雲 可以用 png 去做
> 
> 會來找銜接點
> 然後考慮效能調整

----

# 免費可授權的字型部分

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

# 參考資料 - 外框曲線

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

---

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

----

# 文字的規則

> 

- 統一規格
> 有沒有順序性之類的
> 

- 文字可以選粗細變化的, 比較有強調性
> 

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

----

# 文字裝飾的部分

- 前綴圓點可以統一規格
> 
> 留白部分也要注意

----

# 文字內框限制長度

> 

- 畫面上的置中
> 

----

# footer 的部分

- 可以調整置中位置
> 

- 調整後的樣子
> 

---

# 整體

- 文字大小
> 

----
-----

# 下午的部分

# 同學範例 - 汽車包膜

# 分割卡片

- 注意視覺上的平衡
> 

- 點選車子下有分頁
> 

- 門市資訊的文字和對齊位置部分
> 

# 同學範例 - 左岸巷弄

> 

> 

>
> 自由度比較高
> 還有思考細部的地方

----

# 吉倈早餐店

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

----

# 說明稿的文字位置

- 在邊框外

---

# Banner 選圖

- 選跟早餐店有關的

-----

# Nav 文字置中

> 

> 

- 變得比較扎實

----

# 關於我們

> 
> 圖片緊實跟疏鬆的比較
> 找緊實的搭配文字

- 需要一個標題
> 

- 空白的地方放上文案、裝飾
> 

- 也可以放上手寫字
> 

> 
> 字型問題, 不太好調整

----

# 店家介紹

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

---

# 美味承諾

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

---

# 精選套餐上面的菜單

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

----

# 調整精選套餐

- 也許上個間距

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

----

# 地圖的標題資訊

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

----