---
# System prepended metadata

title: 10/28 UI design & Layout - mock up
tags: [UI design & Layout, 進度筆記, 前端心得]

---

# 10/28 UI design & Layout - mock up   
###### tags: `UI design & Layout` `進度筆記` `前端心得`  
---

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

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

----

# 個人專題進度的部分  

- PS / AI / 程式    
> 切版的部分, 力求跟設計師的版面一樣  

- 個人專題部分 → Wireframe → Mock up → Prototype  
> 一頁式網站  

- ==團體專題==  
> 會進到多頁式網站, 比較複雜  
> 通常內頁會比較簡潔明瞭   
> 幫親朋好友設計網站  
> 自己找主題, 也有人把網站重新設計加上新功能  
> 以專案為主的話, 也要評估接下來的困難點  
```
可以想像之後在團體專題中待的位置
你想做企劃, 程式, layout, 還是設計?
大家都有分工會比較好, 做自己想做的
```

> 個人跟團體專題的部分, 在未來面試會有幫助  
> 如果你遇到跟你實力差不多的人一起面試  
> 那專題部分就會很重要  
> ![](https://i.imgur.com/s1UYfTk.png)  

----

# 版塊設計  

[版塊設計 (blockstudio.tw)](https://blockstudio.tw/)   

- 首頁很特別的公司  
> ![](https://i.imgur.com/6gZjchq.png)  
> 視覺系網站  
> 有 parallax  

- 一個網站不一定要效果多,  花樣多, 但要有視覺上的體驗(美觀之類的)  
```
視覺跟效果相輔相成, 
不能說視覺有了, 但效果卡卡的, 
也要注重使用者體驗
```

- 像是可不可的網站也有應用到視差, 和動態效果  
> [可不可熟成紅茶 KEBUKE Tea Co.](https://www.kebuke.com/)
> Recruiting...(entry and senior).  

- Maxico 網站很漂亮, 視覺效果排版很讚  
> [Anagrama | Brand Intelligence Group](https://www.anagrama.com/)  

---

# 照片排版位置  

> ![](https://i.imgur.com/343ZBNb.jpg)  
> 水平線, 垂直線, 排列的位置  
> 風格呈現, 怎麼用照片的順序說故事  
> 從冷冰冰的機器, 環境開始講 → 到人的互動
```
機器跟人的對比, 會有溫度感覺
```

- 大部分拍機器, 環境的色調會比較是冷色調  
- 有人或動物的部分會比較暖色調, 有溫度  
> ![](https://i.imgur.com/1plUZbg.jpg)

- 拍攝廠房的照片, 有視覺上的連貫性  
> ![](https://i.imgur.com/WVcm1Cg.jpg)  
> 沒有透過太多的文字去講解  
> 不過圖片很多, 用圖片去講解  
> [SHOES LIKE POTTERY - Moonstar](https://shoeslikepottery.com/)   
> 日本的網站很多蠻會講故事  
```
會用攝影照片說故事
```

- 照片跟文字都可以用黑白, 雙色調呈現  
> ![](https://i.imgur.com/iZH4bml.png)   


---

# 比較簡單的滾動式跑馬燈  

- 有涉谷的感覺(?)   
> ![](https://i.imgur.com/SLCAOTq.png)   
> 風格很強烈  

- 不過這邊視覺拉開, 地球縮小後, 給人有期待感  
> ![](https://i.imgur.com/4UJlePe.png)   
> 但其實沒有更進一步去定位到涉谷夜市的位置  
> 或是有些故事可以發展的部分, 有點可惜  

---

# 靜態圖片平移  

- 線條跑出來  
> ![](https://i.imgur.com/UkKYrOz.png)   
[下川研究室｜早稲田大学政治経済学術院　准教授 (waseda.jp)](https://www.waseda.jp/prj-foodecon/)   


---

# 展示作品當作作品  

- 演示 RWD  
> ![](https://i.imgur.com/UnH1CoD.png)   
> Anagrama web site  

----

# 版塊變化網站  

- 好幾塊一起動  
> ![](https://i.imgur.com/UWSBUCk.png)   
> [三十還真 (pili.com.tw)](http://suhuanjen30.pili.com.tw/)
> 768px 直接跳手機版樣式  
> RWD 有考慮到版塊的變化, 做調整和連結  
> 大部分提到行動版的話, 包含: 手機和平版版本  
> 小規格的版本不像電腦版這麼猛, 但是也會滿足閱讀, 瀏覽需求   

---

# 很猛的宮廟網站  

- 簡單效果很多  
> ![](https://i.imgur.com/D0cOzcd.png)   
> 讓土地公很有新潮感  
> [桃園市土地公文化館 (taoyuantudigong.org.tw)](http://www.taoyuantudigong.org.tw/main/)

----

# 用 JS 純粹控制動畫效果的網站  

> [HTWKR - How to Talk to White Kids about Racism](https://howtotalktowhitekidsaboutracism.com/)
> 純用 JS 控制, 非常流暢  

- 他們公司網站也做得很順  
![](https://i.imgur.com/5qeB3m0.png)   
> 它的操作方式比較符合 mac 的作業系統方向  
> [Hello Monday](https://www.hellomonday.com/)   

---

# 純 3D 控制的網站效果  

- 這個手勢鰻吃效能  
> [Fingerspelling with Machine Learning](https://fingerspelling.xyz/)  
> 操作方式很直覺的網站設計  

---


# 參考資料 - 額外網站介紹  

[版塊設計 (blockstudio.tw)](https://blockstudio.tw/)   

[可不可熟成紅茶 KEBUKE Tea Co.](https://www.kebuke.com/)   

[Anagrama | Brand Intelligence Group](https://www.anagrama.com/)   

[SHOES LIKE POTTERY - Moonstar](https://shoeslikepottery.com/)   

[SHIBUYA YOICHI | 渋谷夜市](https://shibuyayoichi.com/)   

[下川研究室｜早稲田大学政治経済学術院　准教授 (waseda.jp)](https://www.waseda.jp/prj-foodecon/)

[三十還真 (pili.com.tw)](http://suhuanjen30.pili.com.tw/)   

[桃園市土地公文化館 (taoyuantudigong.org.tw)](http://www.taoyuantudigong.org.tw/main/)   

[HTWKR - How to Talk to White Kids about Racism](https://howtotalktowhitekidsaboutracism.com/)  

[Hello Monday](https://www.hellomonday.com/)   

[Fingerspelling with Machine Learning](https://fingerspelling.xyz/)  

----

# 作業檢核清單有歷屆學生網站  

- 有些插件沒更新, 所以網站可能壞了~  
> 有全端, 後端, 前端作品~  
> 有網站地圖  

[瓦庫麻辣鍋 (wowcoolpot.github.io)](https://wowcoolpot.github.io/)   

[啥 ! 顛覆吧 (jeffery615040.github.io)](https://jeffery615040.github.io/)   
 
[木門咖啡 (woodendoorcafe.github.io)](https://woodendoorcafe.github.io/)   
 
[高美濕地 (gaomeigroup.github.io)](https://gaomeigroup.github.io/gaomei/)   

[P-a Shih Mesona (mesona2019.github.io)](https://mesona2019.github.io/Pa_Shih_Mesona.html)   

[台中市動物之家-首頁 (animalshelterfor4.github.io)](https://animalshelterfor4.github.io/main%20page/main_page.html)  

[遇見幸福 (meethappiness.github.io)](https://meethappiness.github.io/)  

[Document (moriprince.github.io)](https://moriprince.github.io/)   

[Jurassic World: Fallen Kingdom (diansourteam.github.io)](https://diansourteam.github.io/team/index.html)   

[山腳傳奇-首頁 (designpineapple.github.io)](https://designpineapple.github.io/index.html)   

[首頁 (springdaypart.github.io)](https://springdaypart.github.io/)   

[Ma-Ja Noodles (majanoodles.github.io)](https://majanoodles.github.io/)   

[星月天空 (sternenhimmelstar.github.io)](https://sternenhimmelstar.github.io/)   

[東成醬油 (ohgunnadaydaoyou.github.io)](https://ohgunnadaydaoyou.github.io/)   

[玖壹壹-首頁 (911-guys.github.io)](https://911-guys.github.io/index.html)   

[給我一個Temple (givemeatemple.github.io)](https://givemeatemple.github.io/)   

[山野閃靈 (leopardcatpublic.github.io)](https://leopardcatpublic.github.io/)   

[鐵支路 | 深入探索每條支線的秘站風景與故事 (teegi-road.github.io)](https://teegi-road.github.io/)  

[日新大戲院 (frozenwhale.github.io)](https://frozenwhale.github.io/sunrise/)   

----

# 下午的部分 - 看同學的 mock up 和 說明稿  

# 同學的說明稿範例   
- 如果文字不重疊的話可以放在同一側  
> ![](https://i.imgur.com/5YXWAtJ.png)  

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

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

- 圖片跟文字都很清楚  
> ![](https://i.imgur.com/kCNN9KW.png)  
> 左右分明  

- 可以做到視覺上的強化  
> ![](https://i.imgur.com/OSjum8A.png)  

1. 中間操作的是整體互動的重點  
> ![](https://i.imgur.com/0elh9Bb.png)   
> Icon 有點影響  
> PC 的網頁的話, 文字不要太小  
> 手機可以 小於 12pt   
> 要告訴大家, 我們再介紹甚麼東西  
```
例如是產業, 還是遊戲, 還是攻略之類的
```
> 例如在左上角的商標 Logo 旁加上你要介紹的遊戲名字  
> ![](https://i.imgur.com/iVyNN59.png)   


2. Icon 可以找 SVG, 比較好調整顏色  
> ![](https://i.imgur.com/qMaqjQW.png)  
> 可以調整對比  
> 用 SVG 寫程式也比較方便, 也可用 CDN 引入可以連結很多東西  

- 複習一下, 有嵌入跟沒嵌入的圖片會有很大區別  
> 有嵌入的話, 圖片會存到 Illustrator 內, ai 檔案也比較大, 好處是圖片不會不見  
> 沒有嵌入的話, 圖片會是以連結的方式跟著 ai 檔案   

---

# 補充影像描圖  

- 可以對圖案做影像描圖  
> 將簡單的圖片, icon 這樣做  
> 不建議對 logo 這樣做  
> ![](https://i.imgur.com/mGKBYv2.png)  

-  描圖後, 可以調整轉角, 讓角度沒有圓弧  
> ![](https://i.imgur.com/1UZPW8e.png)  
> ![](https://i.imgur.com/m32NwtQ.png)  
> 按下忽略白色後, 就會變成 SVG  

- 注意的點  
1. 顏色太相近會很難描  
> ![](https://i.imgur.com/OxB7dh4.png)   
> 因為影像描圖吃對比度  
> 解決方法, 丟到 PS 拉高對比度  

2. 不能通用於所有東西  

3. 太複雜的圖形會不太能描  

> ![](https://i.imgur.com/uAdyAyq.png)  
> 忽略白色, 展開, 就變成 SVG  
> ![](https://i.imgur.com/eFob4qo.png)   

---

# 繼續調整 Icon 

- 讓影像面積沒那麼滿  
> ![](https://i.imgur.com/fwoyDD4.png)  
> 讓 Icon 抓範圍  
> 抓個八分滿
> ![](https://i.imgur.com/gmyfaLO.png)  
> 把圖片放進去  
> ![](https://i.imgur.com/NEyLMOv.png)  

1. 用原本顏色做比較  
2. 調整大小, 來達到視覺平衡  
3. 把畫面拉遠看, 看 Icon 有沒有平衡  
> ![](https://i.imgur.com/XKc3jB9.png)  

4. 讓按鈕亮一點, 對比度不要太淺
> ![](https://i.imgur.com/GR0PWYK.png)  
> 顏色不要太相近, 或太淡, 如果有遇到無障礙測試才能通過  

5. 如果是在有科技感的東西, 乾脆讓它發光  
> ![](https://i.imgur.com/3sAqYPr.png)  
> 注目性會比較夠  
> ![](https://i.imgur.com/T0C6RzE.png)   
> 讓發光的按鈕跟黯淡的按鈕有對比感  
> ![](https://i.imgur.com/q0qaSOY.png)  
> ![](https://i.imgur.com/wCx1i7e.png)   

---

# 主機調整  

1. 如果丟光暈可以亮起來  
2. 如果丟陰影會有浮起來的效果  
> ![](https://i.imgur.com/DjvsgKa.png)  
> ![](https://i.imgur.com/5xiljyj.png)  
> 讓主機浮出黑色空間  
> 比較能注目, 有立體效果  

---

# 讓中間螢幕背景有遮罩  
- 可以凸顯按鈕  
> ![](https://i.imgur.com/cHOBdQ8.jpg)   

- 順便拉大文字  
> 達到 20pt, 提高邊距  
> ![](https://i.imgur.com/MWya0Vm.jpg)  
> 讓螢幕中間按鈕有跳出來效果  
> 並且用陰影讓文字顯眼  
> ![](https://i.imgur.com/QRNwEzo.jpg)  
> 左上那個  

- 讓中間圖案有浮起來效果  
> ![](https://i.imgur.com/Vijy2x2.png)  

> ==在做 mock up 可以有 hover 效果, 做點浮起來特效==  

----

# 總結  

1. Icon 做成向量圖  
2. 陰影, 畫面強化  
3. 讓東西清楚比較好辨識  
4. 可以有些有趣的東西增加效果  

----

# 另一分頁  

- 讓文字有分段感  
> ![](https://i.imgur.com/FFMAZa6.png)  
> ![](https://i.imgur.com/LSYRHlK.png)   

- 也可以讓寬度窄一點, 比較緊實  
> ![](https://i.imgur.com/WHthnMw.png)  

---

# 案例分享, 通過無障礙認證的網站  

- 簡單的 banner, 以及異業合作溝通  
> ![](https://i.imgur.com/ZX74uX1.jpg)  
> 如果照片解析度, 調整問題, 因為成本做考量 
> ↑ 會遇到可控與不可控的問題  

> ![](https://i.imgur.com/8X4WD7z.png)   
> ↑ 可控的情況, 有黃色輔助線來達到無障礙需求檢驗  

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


# 參考網站  

[日月潭觀光圈 (sunmoonlakeplus.com)](https://sunmoonlakeplus.com/)  
[客家文化發展中心全球資訊網-中文版 (hakka.gov.tw)](https://thcdc.hakka.gov.tw/)  

----

# 下次狀態    
## 檢討 Mock up  
> 企劃, wireframe, mock up 完成  
---