0605
===

講課老師：盧政憲
在公司主要負責：
視覺、界面設計

* 名詞解釋

| 設 | 計 |
|----- | ------ |
| 目標 | 如何解決 |
| 目的 | 怎麼做 |

* 介面不等於平面

| 介面 | 平面 |
|----- | ------ |
| 互動 | Layout |

:::info

業界首推的網站：
[Material Design](https://material.io/design)
材質設計
[Google Material Design 正體中文版](https://wcc723.gitbooks.io/google_design_translate/material-design-introduction.html)
* 老師強烈建議看英文版 Material Design

[Fluent Design System - Microsoft](https://www.microsoft.com/design/fluent/#/)
流暢設計 - 特效光影

[Bootstrap](https://getbootstrap.com/)
英文版
[Bootstrap](https://bootstrap.hexschool.com/)
中文版-六角學院翻譯

* Bootstrap 全世界八成以上的網站架構使用

:::

心智圖、網站地圖屬於前製階段-企劃
企劃->設計->程式

Wireframe
Layout -> 設計

[什麼是Wireframe ?](https://blog.akanelee.me/posts/159788-what-is-wireframe/)

[pinterest 搜尋 Wireframe design](https://www.pinterest.com/search/pins/?q=Wireframe%20design&rs=typed&term_meta[]=Wireframe%7Ctyped&term_meta[]=design%7Ctyped)

列舉網站：
[MORE 法狀元](https://tpmr.moj.gov.tw/)

:::info
16:9
:::
1920 * 1080 px

:::info
4:3
:::
1280 * 960 px

[只是比較會畫線- 首頁| Facebook](https://www.facebook.com/justgoodatdrawinglines/)

[網格](https://bootstrap.hexschool.com/docs/4.2/layout/grid/)

12 欄位 -> 重要資訊放在裡面


工作區域工具 shift+O
才能移動工作區

對齊工作區->水平對齊

物件->路徑->分割成網格
直欄->數量:12->間距:30->增加參考線

\職訓-109-04-台中-勞動基金會-跨裝置企業平台與資料庫整合設計班(340h@05月-07月)\07-Reference (參考資料)

有提供網址可以觀摩:
Awwwards
S5-Style

全部選取用對齊工具

均分物件 中心點來判斷物件距離
中心點一樣 大小不一樣 可以試試別的對齊工具
均分間距 在隱藏工具列中

不要從 AI 開始做 Wireframe
從手稿開始

手稿不會寫文字 打叉代表文字區塊

點點點 代表暗示性網頁
例如:課堂介紹的日本網站 BANNER 12個
就有 12 個 BANNER

## 製作網站地圖
課堂製作
由心智圖

變成
網站地圖 [29-廖啟森-Planning (企劃)-Site Map (網站地圖)](https://docs.google.com/document/d/1G2Ed4Xn8kFgDhJBq45LUw-apASX2HR86LJ1wLk_eCa4/edit?usp=sharing)

可以看一下 [0601 網站地圖](https://hackmd.io/@chiisen/HJMmdA-3L) 回想一下怎麼做

觀察 => 實踐 => 思考
^============+

:::info
平版
768 px
:::

:::info
手機
320 px
:::

###### tags: `跨裝置企業平台與資料庫整合設計班`