# 10/19 UI design & Layout - wireframe practice
###### tags: `UI design & Layout` `進度筆記` `前端心得`
---

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

# 今日講課 -- 早上部分

- 接續上次上課內容
- 製作 wireframe 的數位稿
- 檢討 wireframe

----

# Wiframe 的製作流程

- 通常等到一個畫面的完成度 8~9 成
- 才會去作平板版, 手機板的 wireframe
- 通常設計師也會開始構想其他版本的配置


- 把 wireframe 往下做
- 因為 Illustrator 有版本差異, 不像 photoshop
- 存檔有個需要注意的點, 要降轉 Illustrator 的版本


- 印刷會用到 CS5
- 記得降轉成 CC 檔案名稱(舊版) 上傳
- 沒把檔案降轉的話, 舊版本的 Illustrator 會出點意外

----

# 同學的整個畫面式的範例

# 資料夾結構

- 交接檔案的時候怎麼確保圖片存在
- 新增一個 06 素材資料夾位置, 放圖片的素材
- 要記得圖片跟著檔案跑
- 盡量把圖片作乾淨, 弄到適合合成的狀態

- 像這樣:
> 
> 
> 設計稿最終階段沒有文字
> 說明稿才有文字

---

## 研究一下圖塊
> 
> 圖片大小, px 可以抓整數之類的?
> 十二欄位在抓的時候不會抓 1140px
> 可以讓圖片, 有放大縮小的變動

----

## 加入參考線
> 
> 解散群組加入參考線

----

## icon 放的位置
> 
> 判斷 icon 的位置, 多少 px 都會下去調整
> 
>
>
> 47px 這種可以直接進到 50px
> 每個圖塊都會做做個整數比較好切版(layout)
> 
> 要抓位置

---

## 瀏覽器選單的位置
- 這邊高度抓 1080px
> 
> 高度抓的時候要注意一下, 970px, 1080px 之類的

---

## 版權聲明生成
> 
> 記得宣告版權聲明
> 常見的會寫加入年份, 作者, 協力者
> 加入教育聲明, 例如教學用途, 學習用途

- 版權做法
> 
> 文字底部 touch 後往上推 20px

---

## 圖片作法
> 增加透明度
> 例如以這台 psv 來看, 暗化的效果配透明度蠻好的
> 

- 圖片移動
> 
> 可以點圖片後按下 enter 移動圖片

---

## 彈跳視窗的作法

- 像是左上圖片, 推出來一點
> 
> 背景調, 增加一點對比和立體感

- 像滑到最下面, 要空出 150px 的高度
> 

### 標題做法
- 文字不要變形
> 加入 h1, h2, h3
> 
> 不在這裏面的數字不代表不能用(可能比較不漂亮)

- 控制文字的視窗
> 
> 水平縮放和垂直縮放等, 兩個都是 100%
> 這樣可以檢查文字有沒有變形
> Illustrator's value can't tell the lie.

## 增加控制
- 增加按鈕的顏色鮮明對比
> 
> 記得按鈕也要對齊到十二欄

- 記得按鈕的高度要取整數
> 
> 像這樣就太擠
> 按鈕自訂完後後面也好弄上

## 輪播區塊不要拉太開

> 
> 也要有實際間距
> 按鈕的點點也要拉開一點
> 
> 記得都是實際間距

## 所見及所得(不太一樣)
- 不太像是這樣
- 不過圖片跟內文有文字附在一起的話
- 想一下怎麼排

> 
> 
> 
> 比較不希望按下 XX 的按鈕, 立即購買應該比較有 income
> 

## 滿版畫面

- 彈跳視窗
> 裁切
> 
> 分開所有的視窗(版面)
> 提個說明稿(提案)
> 轉成 jpeg(工作區域, 你要提案的工作區域)
> 例如 02, 03 就是 2-3,


- 一般網頁用, 就可以用 72 dpi
> 如果是展示稿, 可以存成 150 dpi
> 

## 提案稿
- 比例抓八分滿, 適當放大縮小
> 
> 

---

# 參考資料:

[網頁設計中的版權宣告(Copyright©)應該怎麼寫？ (cadiis.com.tw)](https://www.cadiis.com.tw/blog/how-to-write-copyright)

[\[教學\]如何用語法保護網頁文章著作權__(1) 附加版權宣告＠WFU BLOG](https://www.wfublog.com/2012/06/protect-copyright-1.html)

----

# 今天做完後 - 做 mockup = 說明稿

- 做完 mock up 後, 相當於 說明稿

==wireframe 做完後也可以試著做說明稿==
- 做完說明稿後, 打上學號姓名, 丟 line 相簿

- 例如 導覽列要怎麼做
- 你要怎麼跟業主用白話文說
> 
> 

---

# 下午的部分

==要邊框的情況==

- 單純不想要有顏色
> 

- 過去的框線圖, 是以框線為主(無色塊)
> 

---

# 說明稿
- 展示給業主, 工程師, 其他人員
> 
> 旁邊有說明文字
> 中間的圖可以是 mockup, 或 wireframe
> 看完整性(業主), 或是提案部分

---

# Prototype
- 特別的部分
- 他可以算是 mockup 也可以算是 wireframe
> 可以把步驟連結, 透過連連看, 點了整個網站
> 
> 可以模擬整個網站
> 可以了解潛在問題和使用者體驗

- 可能會有這種狀況

wireframe(這階段就有 prototype) 或是在 wireframe 之後就有 proitotype

---

# UI flow
- 可以看到頁面的操作流程
- 例如, 購物車之後的步驟

可能操作流程一路到購物結算畫面

> 通常是整個流程
> 而且在手機居多, 因為手機很吃重 UX
> 網站也是可以作 UI flow
> 

---

# mock up 完整的一張網站的視覺設計
- 做到好的狀況
- 可以開始執行程式的部分
> 
> wireframe 和 mock up 都有文字
> 不過 wireframe 就可以開始放文字了
> 如果你不確定, 可以做出假文字
> 不過如果你做怎樣形式的網站就應該用相對應的語言

> wireframe 不會有圖片
> 照片, 裝飾, 底色色彩會放到 mock up 去做
> 只要 wireframe 沒有太大問題, 後面的問題也應該不會太大

---

# 內外距的問題

- 裡面有內外距的問題
> 

> 

- 副標題配上內容通常都是一樣的間距
> 通常都是一個間距一直用

---

## ==外面的距離不會小於裡面的距離==
- 裡面的東西會越來越小
- 像是間距, 反之外面的東西則很大
> 
> 設計品都會有類似的概念

---

## 特殊狀況
- > 在意整體狀況的問題
> 
> 
> 這會請工程師注意到(有些細節)
> 為了美觀永不妥協

----

# 同學的長條式網站

## 畫面上的凝聚性
> 
> 遵守 ==外面的距離不會小於裡面的距離==

---

## 文字上的對比
- 可以善用旋轉工具
> 

---

## 對位置記得以欄位為主
> 

---

## 滿版顏色

> 

----

## 給他淺淺的底色
- 呼吸的顏色
> 心境上的變化(?)
> 帶點希望
> 
> 讓他有背景顏色上的轉換
> > 轉換顏色, 可以有點情緒轉折
> > 
> > 比較不會整條白到底

---

# 如果螢幕是 1920 x 1080
- 可以按兩下 f, 進入全螢幕
- 用放大鏡拉寬度
- 可以去看整個頁面的問題
> 
> 如果十二欄位沒辦法符合需求的時候
> 可以跳脫十二欄位!

----

# 字體選擇

==例如參考 google font==

- 思源黑
- 思源宋
- 也可以用日文字(漢字數量少, 判斷有沒有符合用字需求 )
> 或是 JF

- 台灣特有
> 粉圓體
> 
> Open 粉圓
> 跟思源宋有點類似概念

----

# 全英文網站
- 標題跟區塊的關聯性
> 
> 文字也要注意
> 內文對齊欄位

---

- 圖片對齊問題
> 現代網站常有返回到頁首的按鈕
> 

---

# 如果版本有差異

- 就算有差 50%
> 業主可能不買單
> 因為可能在他們眼中看起來都一樣
> 

---

# 特別的做法
> 

----

# 下一個階段
- Wireframe 做完可以開始做 Mock up

---

# 參考資料 - 網站版權聲明

[網頁設計不變的趨勢，使用者體驗優先 | 威亞網頁設計 (weya.com.tw)](https://www.weya.com.tw/design/web-design-trends)

[網站版權聲明之正確寫法 @ 網頁設計 大亂鬥 :: 痞客邦 :: (pixnet.net)](https://nkdesign.pixnet.net/blog/post/25694364)

[網站版權聲明之正確寫法 @ 網頁設計 大亂鬥 :: 痞客邦 :: (pixnet.net)](https://nkdesign.pixnet.net/blog/post/25694364-%E7%B6%B2%E7%AB%99%E7%89%88%E6%AC%8A%E8%81%B2%E6%98%8E%E4%B9%8B%E6%AD%A3%E7%A2%BA%E5%AF%AB%E6%B3%95-)

[網頁設計中的版權宣告(Copyright©)應該怎麼寫？ (cadiis.com.tw)](https://www.cadiis.com.tw/blog/how-to-write-copyright)

[版尾的版權宣告(Copyright©)該如何寫才正確 | 梅問題．教學網 (minwt.com)](https://www.minwt.com/webdesign-dev/html/18311.html)

[版權聲明和版權符號的使用 (eferrit.com)](https://zhtw.eferrit.com/%E7%89%88%E6%AC%8A%E8%81%B2%E6%98%8E%E5%92%8C%E7%89%88%E6%AC%8A%E7%AC%A6%E8%99%9F%E7%9A%84%E4%BD%BF%E7%94%A8/)

[\[教學\]如何用語法保護網頁文章著作權__(1) 附加版權宣告＠WFU BLOG](https://www.wfublog.com/2012/06/protect-copyright-1.html)

https://ethics-p.moe.edu.tw/newuser/3/

[萬宏國際法律事務所 (myriadlex.com)](https://www.myriadlex.com/news/news21062201.html)

[著作權聲明怎麼寫_網站版權聲明如何寫_馬鞍山知識產權網 (masipo.org.cn)](https://www.masipo.org.cn/big5/chanquan_43576)

[網站頁面底部的著作權（版權）宣告應該怎麼寫？ \- IT閱讀 (itread01.com)](https://www.itread01.com/content/1550495000.html)