---
# System prepended metadata

title: 2021-11-04 UI design & Layout - mock up(2)
tags: [UI design & Layout, 進度筆記, 前端心得]

---

# 2021-11-04 UI design & Layout - mock up(2)   
###### tags: `UI design & Layout` `進度筆記` `前端心得`  
---

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

# 今日講課 -- 早上部分  
  
- 接續上次上課內容  
- 製作 mock up 的數位稿   
- 檢討 mock up   
> Mock up 的參考資料一定要注意整理好   

----

# 同學的範例  

## 餐廳類型網站  

- 以賣皮包的網站為例子 ↓  
> ![](https://i.imgur.com/NFXnlRD.png)   

[レザーブランド『REVEL』工場直営WEBストア](https://revel.jp/)   
> 很簡約, 有淡入淡出效果   

[株式会社feat | ソフトウェア開発 ハードウェア開発 評価業務 (feat-inc.com)](http://www.feat-inc.com/)   
> 同學的參考網站   

----

- 做說明稿的時候, 通常不會跟整個 Illustrator 的 mock up 一起做 ↓  
> 因為設計稿是原始狀態  
> 說明稿會另外截一張做成 A3, A4 到另外的檔案提出  
> 像是截出一張你想另外說明的圖, 或是想提案的內容去補充  
> 說明稿不太需要存到太大的圖片   

----

- 說明稿跟設計稿分開會像是這樣 ↓  
> ![](https://i.imgur.com/I3uOmoT.png)   

----

- 中間可能可以加一些增加層次感的 icon ↓  
> ![](https://i.imgur.com/2BhU6oY.png)   

---

- icon 可以做一些變化, 增加裝飾 ↓  
> ![](https://i.imgur.com/4r70i3V.png)   

----

- 看到餐廳, 可以開始分析 ↓  
> 設計師會根據提案內容, 帶有的風格去做發想   

----

- 例如是跟吃的有關係的主題↓  
> 例如, 食物風格, 餐廳風格(日式)
> 日式這個主題又可以再細分, 典雅, 簡約...理性等   
> 暖色 / 溫暖 → 要怎麼呈現溫暖的主題? 
```
像是 red, orange, yellow...etc.
```

----

- 像是住宿 / 企業的網站 banner ↓  
> 最右上方會放上提案   
![](https://i.imgur.com/yo6mIMc.png)  

----

- 文字盡量可以用條列式 ↓  
> ![](https://i.imgur.com/WK0MBVB.png)   
> 格式也要一致, 例如斷行, 或是用間距去調整  
> 字數可以少一點. 設定要到第幾行, 或是乾脆讓字 overflow 變成 ``...``   

> 調整文字, 標題變大  
> 文字變大, 有一定的文字寬度   
> ![](https://i.imgur.com/YX5dPyr.png)   

----

- 用 十二欄位的參考線下去對齊 ↓   
> ![](https://i.imgur.com/KAplzwT.png)   
> 文字跟日期有大小上的差異  
> 做大區塊的對齊  

---

- 視覺上也有考量 ↓  
> 向原本網站的文字閱讀, 因為標題在中間  
> 會變成閱讀順序稍微有點偏離, 從中 → 左   
> ![](https://i.imgur.com/GpeEyxo.png)   
> 可以改成左邊對齊, 增加使用者體驗  
> ![](https://i.imgur.com/str9h6y.png)   

----

- 方塊視覺上的影響 ↓  
> ![](https://i.imgur.com/QhcHbkF.png)   
> 兩個方塊下去比, 如果畫面遠一點  
> 右邊的方塊有圓角會看起來比較溫和  
> ![](https://i.imgur.com/PVj5FjG.png)   

----

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


----

- 圖片盡量不要壓扁 ↓  
> ![](https://i.imgur.com/8IKZDeB.png)  
> 出於對業者的尊重, 和專業的考量  
> 通常會裁切, 像是用剪裁遮色片  
> 圖片通常一開始在企劃就規劃好  
> 如果預算夠, 會請攝影師去拍   
> 可以跟業主說怎麼拍比較好看    
> 光影通常會一致  
> ![](https://i.imgur.com/PyqicfE.png)   

----

- 圖片背景較深的話可以有明顯對比 ↓  
> ![](https://i.imgur.com/zJWm1rF.png)   
> 增加中間間距, 改變字體顏色比較顯眼  
> 框內的東西很多比較複雜的話  
> 會讓框內的東西去對齊十二欄位  
> 背景再去配合框內東西調整  
> 字體調整   

---

- 讓空白處增加一點東西 ↓   
> ![](https://i.imgur.com/OtkDHyY.png)   
> 增加按鈕  
> ![](https://i.imgur.com/Cmj8NmQ.png)   
> ![](https://i.imgur.com/7onTQSP.png)   
> 也可以增加卡片的背景顏色區別   

----

- 社群媒體的 Logo 標題可以做調整 ↓     
> ![](https://i.imgur.com/Xuhd4qh.png)  

----

- 重視溝通, 專業的範例 ↓      
> ![](https://i.imgur.com/lWvZvNa.png)   
> 可以在 Logo 後面放點圖片   
> ![](https://i.imgur.com/iZxbEfv.png)   

----

- 十二欄位的參考線做出來後記得鎖上 ↓     
> 不然不小心動到就會歪掉  
> 通常歪調會在你想把 東西水平置中的時候發現
> 然後你所有的東西都要調整了   
> ![](https://i.imgur.com/zppsMd4.png)   

----

- 調整卡片欄位的顏色和陰影 ↓  
> ![](https://i.imgur.com/SDpl3KL.png)   
> 有時陰影會因為顏色的關係讓邊邊不太好看   
> 讓本體的陰影輕一點, 卡片有文字的地方重一點  
> ![](https://i.imgur.com/F3SVZ3s.png)   

----

- 整體顏色就有深淺變化 ↓  
> ![](https://i.imgur.com/60udL4J.png)   
> 強調所有資訊, 改善整體比例    
> ![](https://i.imgur.com/ugdNaHz.png)   
> 文字調整, 不會太空洞  
> footer 調整   

----

- 最新消息的日期可以有顏色區別 ↓  
> ![](https://i.imgur.com/OUWlUbB.png)
> 這樣文字顏色會有對比  

----

- 從 FB 引用, 跟從 blog 引用圖片會有差別 ↓  
> 怕有版權問題, 如果你素材從 業主的引用也要注意規範  
> [你被告了嗎？IG、FB 愛發文....又怕圖片侵權、版權糾紛？教你如何避免！ @ IDMStock素材圖庫的部落格 :: 痞客邦 :: (pixnet.net)](https://idmstock.pixnet.net/blog/post/17896742-ig%E3%80%81fb-%E6%84%9B%E7%99%BC%E6%96%87....%E5%8F%88%E6%80%95%E5%9C%96%E7%89%87%E4%BE%B5%E6%AC%8A%E3%80%81%E7%89%88%E6%AC%8A%E7%B3%BE%E7%B4%9B%EF%BC%9F%E6%95%99)   

----

- Footer 和店內環境提高整體對比度 ↓  
> 調整照片位置, 比較有立體感  
> 做出店內環境, 調整銜接 → 營造出照片牆  
> Footer 和網頁上方的卡片欄位有銜接  
> ![](https://i.imgur.com/dJ85v4W.png)   

----

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

----

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



----

# 會有海報製作  

- 團體專題做完後會有海報  
- 有完成個人專題也可以做一張海報   

---

# 素材會提早有戰略性考量提早配置  
- 像可能節慶的素材會提早製作  
> 這樣就會提早被用到, 大家去選的機率就比較高  

----

# 之後會有履歷製作  
- 常見的履歷大概長這樣 ↓  
> ![](https://i.imgur.com/c8TrEZx.png)   
> 盡量不要以制式化去投遞   
> [CakeResume: 製作履歷、找工作、搜尋人才 - 從人才出發的求職平台](https://www.cakeresume.com/zh-TW)   

----

- 如果是要以前端設計↓   
> ![](https://i.imgur.com/cK8QLmD.png)   
> 可以輸出成 pdf  

----

- 配置也可以考慮↓  
> ![](https://i.imgur.com/6ESboYD.png)   
> 調整背景顏色  
> 第一眼就會被 Hello 吸引到  
> 再來就是被 Experience 吸引  
> 閱讀順序、整齊度...等   
> 是很常見的履歷設計   

----

- 可以上 [Pinterest](https://www.pinterest.com/) 去找找 ↓    
> 排版這種東西是比較沒有智慧財產權的問題  

---

- 比較難的就是裝飾影響到編排的風格  
> ![](https://i.imgur.com/wJCIDHH.png)  
> 很多設計師會用這種方式產生風格  
> 加到履歷或是作品集上   

----

# 下午的部分   

# 早餐店類型檢討   

- Logo 是黃色, 橘紅色  
> 吃的主題通常比較是偏溫暖的顏色  

----

- 網站地圖 - 詳細度  
> 比較密集, 會太混亂  
> 條列式比較好, 清楚一點

----

# 背景顏色落差很大
> 桃紅對比藍色  

----

# Icon 的問題  

- 圖形跑掉  
- 風格要符合網站  
> ![](https://i.imgur.com/YIBEtB7.png)   
> ![](https://i.imgur.com/TBfPCzk.png)   

- Logo 很少用這種偷工減料做法  
> 描圖的話會有擴散  
> ![](https://i.imgur.com/anGR1HF.png)   

- 參考線可以換磚紅色, 這樣比較清楚  
> ![](https://i.imgur.com/0aTfKba.png)   

- Icon 風格是線條的  
> 如果是網路上的 icon 就會是以這些 icon 的風格為主  
> 調整平衡 ↓  
> ![](https://i.imgur.com/gwfLnL1.png)   
> 要修裡面的物件, 不是說載下來就可以符合需求!  
> ![](https://i.imgur.com/Lutr8jD.png)   

# Nav 去調整  
> ![](https://i.imgur.com/WONqGI6.png)   
> hover 效果要調整  
> ![](https://i.imgur.com/B9x37g2.png)   
> 滿版要做出來  

----

# Banner 滿版的  

## 小心物件不要群組到參考線  
> 太陽跟雲朵會有點詭異  
> 效果很難弄  
> 所以可以找其他的視差網站來做效果  
> [LET THE WORLD SLEEP | KITAMURA MAKURA official website (kitamura1923.com)](https://www.kitamura1923.com/)   
> ![](https://i.imgur.com/Yh6Sn3q.png)   
> 太陽旁邊可以除了放雲以外, 去放文字  
> 早上怎麼去表現?  
> 去思考這個故事要怎麼表現  
> 太陽升起後大家來吃早餐?  
> 還是吃了早餐後活力飽滿?  
> 至少要給他一個故事   

> ![](https://i.imgur.com/YRGusk2.png)   
> 左邊可以有菜單去連結下面菜單  
> 右邊不會太空, 因為有紋理去裝飾  

## 做圖案效果  
> ![](https://i.imgur.com/PB8Dt4Y.png)   
> 改變繪圖方式, 有高低差  
> ![](https://i.imgur.com/hfoJQxr.png)   

> ![](https://i.imgur.com/YFqiqYC.png)   
> 左邊可以丟文字給他  

## 中間 Banner 風格調整  

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

---

> ![](https://i.imgur.com/EkrnbgD.png)   
> 這樣就會跟 Kitamura 的排版很像  
> 不過風格維持在明亮活潑狀態   

- 接著參考 Kitamura 丟了個實體的東西進來  
> 像是早餐的蛋餅旁有飲料, 這樣就像是個素材  
> ![](https://i.imgur.com/kBfPC1Q.png)   
> 結構上就會比較滿, 有很多可以發展的機會  


# 參考資料 - 視差  
[《滾》厲害的網站表現法. 《滾動視差》（Parallax… | by Heko | UniMarket | Medium](https://medium.com/unimarket/%E6%BB%BE-%E5%8E%B2%E5%AE%B3%E7%9A%84%E7%B6%B2%E7%AB%99%E8%A1%A8%E7%8F%BE%E6%B3%95-1bafffb56955)   

[LET THE WORLD SLEEP | KITAMURA MAKURA official website (kitamura1923.com)](https://www.kitamura1923.com/)   

[Rand | 神谷 直広 / NAOHIRO KAMIYA (rand-d.com)](https://rand-d.com/)   

----

# 拉參考線的小訣竅  
- 東西是從左邊到右邊  
> 會很容易影響到工作區域  
> 可以直接把參考線丟在工作區域  
> 選取工作區域工具, 點工作區域 ↓  
> ![](https://i.imgur.com/1YVyupq.png)   
> 把參考線丟進去   

----

# 故事跟精神的排版方式   
 
 - 背景顏色比較深, 可以換個顏色  
 > 線會向下延伸到精神區塊, 不過精神區塊比較多東西  
 > ![](https://i.imgur.com/1OeF6n0.png)   
> 直接插圖片到 故事背後就可以很顯眼!  

- 理念精神可以用比較飽滿的方式去排列  
> ![](https://i.imgur.com/pDGIlM7.png)   
> 這些標語都可以排列的比較飽滿   

- 幫精神的標語加上氣泡特效  
> ![](https://i.imgur.com/r1xVV9t.png)   
 

# 產品特色的呈現  

- 圖形要調整  
> ![](https://i.imgur.com/4llt1Jt.png)   
> 塊狀面積太明顯  
> 氣泡截圖的問題  

-----

- 把氣泡亮化 ↓  
> ![](https://i.imgur.com/FDSqw0P.png)  

----

- 將圖形重構 ↓  
> ![](https://i.imgur.com/Ad4h44h.png)  
> 中間的刻度圓形可以放大  
> 左右加按鈕做 closural  

- RWD 最有挑戰性的區塊
> ![](https://i.imgur.com/gHKYtCt.png)   
> 參考一下人家搭法  

-----

- 圖形旁的文字也重構 ↓  
> ![](https://i.imgur.com/47maVeg.png)   

-----

- 讓菜單自己刻比較好  
> ![](https://i.imgur.com/UNtHKy8.png)  
> 視覺上只放圖效果有點差  
> 如果弄成八欄式會好很多  

----

# 店內環境 → 服務項目 → 聯絡我們  

- 聯絡我們讓人有結束話題的意思  
> 可以往下擺   

- 文字不要用 Enter 換行去做間距  
> 增加文字間距   

- 直接用線條連接  

---

# 交通區塊  

- 地圖換成台灣的  

- 階梯的效果改成齊頭式的  

- 可以參考 Uber 平台的圖片  
> 如果是教育性質要注意(要寫清楚)  
> 可是如果是商業性版權在外送平台, 就要避免  

----
# Footer   

- Go to top 通常放在中間或右邊  
> ![](https://i.imgur.com/3S3X4Jx.png)   
> 同樣調整比重  

-----

# 最後  
- 再弄上一點裝飾  
- 卡片內容要好好調整   
- RWD 再做一些變化  

- 顏色對比會比較有活潑感  
> 可參考 no.meets.ltd 網站顏色, 不過其實要看主題   

# 參考資料 - 顏色對比  
[ノーミーツ／NOMEETS](https://no.meets.ltd/)  

[海棠設計 Begonia Design - UX/UI設計團隊，打造優質體驗網站/APP數位產品 (begonia-design.com.tw)](https://begonia-design.com.tw/)   
  
  -----

# Logo 也會跟網站有一致性  
- 會找跟 Logo 相似的顏色來做網站設計參考  
- 如果是單純的文字就改顏色也沒關係  
-> ![](https://i.imgur.com/49C350W.jpg)   

- 也有依照 Logo 本身色彩來規劃整體網站  , 像是:  
> [Organic durum wheat pasta: egg, whole, spelt, kamut pasta – Pastificio Felicetti](https://www.felicetti.it/en/)  

> [札幌の洋菓子スイーツ きのとや (kinotoya.com)](https://www.kinotoya.com/)   

- 或是他問你說這顏色從哪來  
> 你可以跟他解釋對比色  
> 或是根據 Logo 本身的顏色來做設計   

----

# 同學的餐廳範例  

- 圖太透會跑出去  
> ![](https://i.imgur.com/VQ0hPbO.png)   

----

- 文字在邊緣容易被遺忘  
> ![](https://i.imgur.com/7l9RjAd.jpg)  

> 可以給陰影漸層  
> 讓他不會影響整體照片  
> ![](https://i.imgur.com/TN7YZTv.jpg)   

----

> 縮小 Logo  
> ![](https://i.imgur.com/yCvyLMY.png)   

----

- 選單文字有一定密度才不會太鬆散  
> ![](https://i.imgur.com/6BQxEBW.png)  

-----

- 地圖跟 footer 可以有漸變暗色效果  
> ![](https://i.imgur.com/t3jnHVT.png)   
> ![](https://i.imgur.com/rWZVVdv.png)   

---

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

---

- 給他對比色(洋蔥色)   
> ![](https://i.imgur.com/441rW7H.png)    



----

- 上下對稱  
> ![](https://i.imgur.com/9MdKpuR.png)   
> 白色遮罩  
> 選單的陰影(用漸層)   
> 整桌的菜色看起來比較豐滿   
> 輔助 Icon 縮到一定大小  
> 菜色的俯瞰視角  
> 主角是肉  

----

> ![](https://i.imgur.com/BKedqLF.jpg)  
> 處理大頭照邊框  
> 地圖旁邊的空間  
> 少一顆回到最上面的按鈕  

----

# 咖啡廳範例  

- 菜單跟咖啡豆可以自己刻, 處理一下  
> ![](https://i.imgur.com/Hmh2ZnK.png)

---

- 這樣子已經很豐富了  
> ![](https://i.imgur.com/Rgsy5Zc.png)   

----

- 強調很夢幻的咖啡廳嗎? 
> ![](https://i.imgur.com/stkC4Y8.png)   
> 像是上面的 版面比較有森林的夢幻感 ↓  
> ![](https://i.imgur.com/jew6tRp.png)     

----

- 先解決菜單跟咖啡豆!  
- 在來解決森林咖啡廳要夢幻還是其他風格  
- 咖啡廳很適合以圖片為主  
- 塊狀切割來展示不同品項  
- 或是用單色色塊底色來看是要夢幻, 咖啡, 還是色塊  

----

# 文創風格網站  

- 解決排版問題  
> ![](https://i.imgur.com/JKlXaDi.png)  

-----



