# 2021-11-04 UI design & Layout - mock up(2)
###### tags: `UI design & Layout` `進度筆記` `前端心得`
---
講師: 盧政憲
視覺設計 / 介面設計
# 今日講課 -- 早上部分
- 接續上次上課內容
- 製作 mock up 的數位稿
- 檢討 mock up
> Mock up 的參考資料一定要注意整理好
----
# 同學的範例
## 餐廳類型網站
- 以賣皮包的網站為例子 ↓
> 
[レザーブランド『REVEL』工場直営WEBストア](https://revel.jp/)
> 很簡約, 有淡入淡出效果
[株式会社feat | ソフトウェア開発 ハードウェア開発 評価業務 (feat-inc.com)](http://www.feat-inc.com/)
> 同學的參考網站
----
- 做說明稿的時候, 通常不會跟整個 Illustrator 的 mock up 一起做 ↓
> 因為設計稿是原始狀態
> 說明稿會另外截一張做成 A3, A4 到另外的檔案提出
> 像是截出一張你想另外說明的圖, 或是想提案的內容去補充
> 說明稿不太需要存到太大的圖片
----
- 說明稿跟設計稿分開會像是這樣 ↓
> 
----
- 中間可能可以加一些增加層次感的 icon ↓
> 
---
- icon 可以做一些變化, 增加裝飾 ↓
> 
----
- 看到餐廳, 可以開始分析 ↓
> 設計師會根據提案內容, 帶有的風格去做發想
----
- 例如是跟吃的有關係的主題↓
> 例如, 食物風格, 餐廳風格(日式)
> 日式這個主題又可以再細分, 典雅, 簡約...理性等
> 暖色 / 溫暖 → 要怎麼呈現溫暖的主題?
```
像是 red, orange, yellow...etc.
```
----
- 像是住宿 / 企業的網站 banner ↓
> 最右上方會放上提案
----
- 文字盡量可以用條列式 ↓
> 
> 格式也要一致, 例如斷行, 或是用間距去調整
> 字數可以少一點. 設定要到第幾行, 或是乾脆讓字 overflow 變成 ``...``
> 調整文字, 標題變大
> 文字變大, 有一定的文字寬度
> 
----
- 用 十二欄位的參考線下去對齊 ↓
> 
> 文字跟日期有大小上的差異
> 做大區塊的對齊
---
- 視覺上也有考量 ↓
> 向原本網站的文字閱讀, 因為標題在中間
> 會變成閱讀順序稍微有點偏離, 從中 → 左
> 
> 可以改成左邊對齊, 增加使用者體驗
> 
----
- 方塊視覺上的影響 ↓
> 
> 兩個方塊下去比, 如果畫面遠一點
> 右邊的方塊有圓角會看起來比較溫和
> 
----
> 
----
- 圖片盡量不要壓扁 ↓
> 
> 出於對業者的尊重, 和專業的考量
> 通常會裁切, 像是用剪裁遮色片
> 圖片通常一開始在企劃就規劃好
> 如果預算夠, 會請攝影師去拍
> 可以跟業主說怎麼拍比較好看
> 光影通常會一致
> 
----
- 圖片背景較深的話可以有明顯對比 ↓
> 
> 增加中間間距, 改變字體顏色比較顯眼
> 框內的東西很多比較複雜的話
> 會讓框內的東西去對齊十二欄位
> 背景再去配合框內東西調整
> 字體調整
---
- 讓空白處增加一點東西 ↓
> 
> 增加按鈕
> 
> 
> 也可以增加卡片的背景顏色區別
----
- 社群媒體的 Logo 標題可以做調整 ↓
> 
----
- 重視溝通, 專業的範例 ↓
> 
> 可以在 Logo 後面放點圖片
> 
----
- 十二欄位的參考線做出來後記得鎖上 ↓
> 不然不小心動到就會歪掉
> 通常歪調會在你想把 東西水平置中的時候發現
> 然後你所有的東西都要調整了
> 
----
- 調整卡片欄位的顏色和陰影 ↓
> 
> 有時陰影會因為顏色的關係讓邊邊不太好看
> 讓本體的陰影輕一點, 卡片有文字的地方重一點
> 
----
- 整體顏色就有深淺變化 ↓
> 
> 強調所有資訊, 改善整體比例
> 
> 文字調整, 不會太空洞
> footer 調整
----
- 最新消息的日期可以有顏色區別 ↓
> 
> 這樣文字顏色會有對比
----
- 從 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 和網頁上方的卡片欄位有銜接
> 
----
> 
----
> 
----
# 會有海報製作
- 團體專題做完後會有海報
- 有完成個人專題也可以做一張海報
---
# 素材會提早有戰略性考量提早配置
- 像可能節慶的素材會提早製作
> 這樣就會提早被用到, 大家去選的機率就比較高
----
# 之後會有履歷製作
- 常見的履歷大概長這樣 ↓
> 
> 盡量不要以制式化去投遞
> [CakeResume: 製作履歷、找工作、搜尋人才 - 從人才出發的求職平台](https://www.cakeresume.com/zh-TW)
----
- 如果是要以前端設計↓
> 
> 可以輸出成 pdf
----
- 配置也可以考慮↓
> 
> 調整背景顏色
> 第一眼就會被 Hello 吸引到
> 再來就是被 Experience 吸引
> 閱讀順序、整齊度...等
> 是很常見的履歷設計
----
- 可以上 [Pinterest](https://www.pinterest.com/) 去找找 ↓
> 排版這種東西是比較沒有智慧財產權的問題
---
- 比較難的就是裝飾影響到編排的風格
> 
> 很多設計師會用這種方式產生風格
> 加到履歷或是作品集上
----
# 下午的部分
# 早餐店類型檢討
- Logo 是黃色, 橘紅色
> 吃的主題通常比較是偏溫暖的顏色
----
- 網站地圖 - 詳細度
> 比較密集, 會太混亂
> 條列式比較好, 清楚一點
----
# 背景顏色落差很大
> 桃紅對比藍色
----
# Icon 的問題
- 圖形跑掉
- 風格要符合網站
> 
> 
- Logo 很少用這種偷工減料做法
> 描圖的話會有擴散
> 
- 參考線可以換磚紅色, 這樣比較清楚
> 
- Icon 風格是線條的
> 如果是網路上的 icon 就會是以這些 icon 的風格為主
> 調整平衡 ↓
> 
> 要修裡面的物件, 不是說載下來就可以符合需求!
> 
# Nav 去調整
> 
> hover 效果要調整
> 
> 滿版要做出來
----
# Banner 滿版的
## 小心物件不要群組到參考線
> 太陽跟雲朵會有點詭異
> 效果很難弄
> 所以可以找其他的視差網站來做效果
> [LET THE WORLD SLEEP | KITAMURA MAKURA official website (kitamura1923.com)](https://www.kitamura1923.com/)
> 
> 太陽旁邊可以除了放雲以外, 去放文字
> 早上怎麼去表現?
> 去思考這個故事要怎麼表現
> 太陽升起後大家來吃早餐?
> 還是吃了早餐後活力飽滿?
> 至少要給他一個故事
> 
> 左邊可以有菜單去連結下面菜單
> 右邊不會太空, 因為有紋理去裝飾
## 做圖案效果
> 
> 改變繪圖方式, 有高低差
> 
> 
> 左邊可以丟文字給他
## 中間 Banner 風格調整
> 
---
> 
> 這樣就會跟 Kitamura 的排版很像
> 不過風格維持在明亮活潑狀態
- 接著參考 Kitamura 丟了個實體的東西進來
> 像是早餐的蛋餅旁有飲料, 這樣就像是個素材
> 
> 結構上就會比較滿, 有很多可以發展的機會
# 參考資料 - 視差
[《滾》厲害的網站表現法. 《滾動視差》（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/)
----
# 拉參考線的小訣竅
- 東西是從左邊到右邊
> 會很容易影響到工作區域
> 可以直接把參考線丟在工作區域
> 選取工作區域工具, 點工作區域 ↓
> 
> 把參考線丟進去
----
# 故事跟精神的排版方式
- 背景顏色比較深, 可以換個顏色
> 線會向下延伸到精神區塊, 不過精神區塊比較多東西
> 
> 直接插圖片到 故事背後就可以很顯眼!
- 理念精神可以用比較飽滿的方式去排列
> 
> 這些標語都可以排列的比較飽滿
- 幫精神的標語加上氣泡特效
> 
# 產品特色的呈現
- 圖形要調整
> 
> 塊狀面積太明顯
> 氣泡截圖的問題
-----
- 把氣泡亮化 ↓
> 
----
- 將圖形重構 ↓
> 
> 中間的刻度圓形可以放大
> 左右加按鈕做 closural
- RWD 最有挑戰性的區塊
> 
> 參考一下人家搭法
-----
- 圖形旁的文字也重構 ↓
> 
-----
- 讓菜單自己刻比較好
> 
> 視覺上只放圖效果有點差
> 如果弄成八欄式會好很多
----
# 店內環境 → 服務項目 → 聯絡我們
- 聯絡我們讓人有結束話題的意思
> 可以往下擺
- 文字不要用 Enter 換行去做間距
> 增加文字間距
- 直接用線條連接
---
# 交通區塊
- 地圖換成台灣的
- 階梯的效果改成齊頭式的
- 可以參考 Uber 平台的圖片
> 如果是教育性質要注意(要寫清楚)
> 可是如果是商業性版權在外送平台, 就要避免
----
# Footer
- Go to top 通常放在中間或右邊
> 
> 同樣調整比重
-----
# 最後
- 再弄上一點裝飾
- 卡片內容要好好調整
- 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 相似的顏色來做網站設計參考
- 如果是單純的文字就改顏色也沒關係
-> 
- 也有依照 Logo 本身色彩來規劃整體網站 , 像是:
> [Organic durum wheat pasta: egg, whole, spelt, kamut pasta – Pastificio Felicetti](https://www.felicetti.it/en/)
> [札幌の洋菓子スイーツ きのとや (kinotoya.com)](https://www.kinotoya.com/)
- 或是他問你說這顏色從哪來
> 你可以跟他解釋對比色
> 或是根據 Logo 本身的顏色來做設計
----
# 同學的餐廳範例
- 圖太透會跑出去
> 
----
- 文字在邊緣容易被遺忘
> 
> 可以給陰影漸層
> 讓他不會影響整體照片
> 
----
> 縮小 Logo
> 
----
- 選單文字有一定密度才不會太鬆散
> 
-----
- 地圖跟 footer 可以有漸變暗色效果
> 
> 
---
- 調整到正中間
> 
---
- 給他對比色(洋蔥色)
> 
----
- 上下對稱
> 
> 白色遮罩
> 選單的陰影(用漸層)
> 整桌的菜色看起來比較豐滿
> 輔助 Icon 縮到一定大小
> 菜色的俯瞰視角
> 主角是肉
----
> 
> 處理大頭照邊框
> 地圖旁邊的空間
> 少一顆回到最上面的按鈕
----
# 咖啡廳範例
- 菜單跟咖啡豆可以自己刻, 處理一下
> 
---
- 這樣子已經很豐富了
> 
----
- 強調很夢幻的咖啡廳嗎?
> 
> 像是上面的 版面比較有森林的夢幻感 ↓
> 
----
- 先解決菜單跟咖啡豆!
- 在來解決森林咖啡廳要夢幻還是其他風格
- 咖啡廳很適合以圖片為主
- 塊狀切割來展示不同品項
- 或是用單色色塊底色來看是要夢幻, 咖啡, 還是色塊
----
# 文創風格網站
- 解決排版問題
> 
-----
Sign in with Wallet
Connect another wallet