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

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

# 今日講課 -- 早上部分

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

----

# 個人專題進度的部分

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

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

- ==團體專題==
> 會進到多頁式網站, 比較複雜
> 通常內頁會比較簡潔明瞭
> 幫親朋好友設計網站
> 自己找主題, 也有人把網站重新設計加上新功能
> 以專案為主的話, 也要評估接下來的困難點

可以想像之後在團體專題中待的位置
你想做企劃, 程式, layout, 還是設計?
大家都有分工會比較好, 做自己想做的

> 個人跟團體專題的部分, 在未來面試會有幫助
> 如果你遇到跟你實力差不多的人一起面試
> 那專題部分就會很重要
> 

----

# 版塊設計

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

- 首頁很特別的公司
> 
> 視覺系網站
> 有 parallax

- 一個網站不一定要效果多, 花樣多, 但要有視覺上的體驗(美觀之類的)

視覺跟效果相輔相成, 
不能說視覺有了, 但效果卡卡的, 
也要注重使用者體驗

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

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

---

# 照片排版位置

> 
> 水平線, 垂直線, 排列的位置
> 風格呈現, 怎麼用照片的順序說故事
> 從冷冰冰的機器, 環境開始講 → 到人的互動

機器跟人的對比, 會有溫度感覺

- 大部分拍機器, 環境的色調會比較是冷色調
- 有人或動物的部分會比較暖色調, 有溫度
> 

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

會用攝影照片說故事

- 照片跟文字都可以用黑白, 雙色調呈現
> 

---

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

- 有涉谷的感覺(?)
> 
> 風格很強烈

- 不過這邊視覺拉開, 地球縮小後, 給人有期待感
> 
> 但其實沒有更進一步去定位到涉谷夜市的位置
> 或是有些故事可以發展的部分, 有點可惜

---

# 靜態圖片平移

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

---

# 展示作品當作作品

- 演示 RWD
> 
> Anagrama web site

----

# 版塊變化網站

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

---

# 很猛的宮廟網站

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

----

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

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

- 他們公司網站也做得很順
> 它的操作方式比較符合 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 和 說明稿

# 同學的說明稿範例
- 如果文字不重疊的話可以放在同一側
> 

> 

> 

- 圖片跟文字都很清楚
> 
> 左右分明

- 可以做到視覺上的強化
> 

1. 中間操作的是整體互動的重點
> 
> Icon 有點影響
> PC 的網頁的話, 文字不要太小
> 手機可以 小於 12pt
> 要告訴大家, 我們再介紹甚麼東西

例如是產業, 還是遊戲, 還是攻略之類的

> 例如在左上角的商標 Logo 旁加上你要介紹的遊戲名字
> 

2. Icon 可以找 SVG, 比較好調整顏色
> 
> 可以調整對比
> 用 SVG 寫程式也比較方便, 也可用 CDN 引入可以連結很多東西

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

---

# 補充影像描圖

- 可以對圖案做影像描圖
> 將簡單的圖片, icon 這樣做
> 不建議對 logo 這樣做
> 

- 描圖後, 可以調整轉角, 讓角度沒有圓弧
> 
> 
> 按下忽略白色後, 就會變成 SVG

- 注意的點
1. 顏色太相近會很難描
> 
> 因為影像描圖吃對比度
> 解決方法, 丟到 PS 拉高對比度

2. 不能通用於所有東西

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

> 
> 忽略白色, 展開, 就變成 SVG
> 

---

# 繼續調整 Icon

- 讓影像面積沒那麼滿
> 
> 讓 Icon 抓範圍
> 抓個八分滿
> 
> 把圖片放進去
> 

1. 用原本顏色做比較
2. 調整大小, 來達到視覺平衡
3. 把畫面拉遠看, 看 Icon 有沒有平衡
> 

4. 讓按鈕亮一點, 對比度不要太淺
> 
> 顏色不要太相近, 或太淡, 如果有遇到無障礙測試才能通過

5. 如果是在有科技感的東西, 乾脆讓它發光
> 
> 注目性會比較夠
> 
> 讓發光的按鈕跟黯淡的按鈕有對比感
> 
> 

---

# 主機調整

1. 如果丟光暈可以亮起來
2. 如果丟陰影會有浮起來的效果
> 
> 
> 讓主機浮出黑色空間
> 比較能注目, 有立體效果

---

# 讓中間螢幕背景有遮罩
- 可以凸顯按鈕
> 

- 順便拉大文字
> 達到 20pt, 提高邊距
> 
> 讓螢幕中間按鈕有跳出來效果
> 並且用陰影讓文字顯眼
> 
> 左上那個

- 讓中間圖案有浮起來效果
> 

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

----

# 總結

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

----

# 另一分頁

- 讓文字有分段感
> 
> 

- 也可以讓寬度窄一點, 比較緊實
> 

---

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

- 簡單的 banner, 以及異業合作溝通
> 
> 如果照片解析度, 調整問題, 因為成本做考量
> ↑ 會遇到可控與不可控的問題

> 
> ↑ 可控的情況, 有黃色輔助線來達到無障礙需求檢驗

> 

# 參考網站

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

----

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