--- # System prepended metadata title: 10/19 UI design & Layout - wireframe practice tags: [UI design & Layout, 進度筆記, 前端心得] --- # 10/19 UI design & Layout - wireframe practice ###### tags: `UI design & Layout` `進度筆記` `前端心得` --- 講師: 盧政憲 視覺設計 / 介面設計 # 今日講課 -- 早上部分 - 接續上次上課內容 - 製作 wireframe 的數位稿 - 檢討 wireframe ---- # Wiframe 的製作流程 - 通常等到一個畫面的完成度 8~9 成 - 才會去作平板版, 手機板的 wireframe - 通常設計師也會開始構想其他版本的配置 ![](https://i.imgur.com/3q0twlG.png) - 把 wireframe 往下做 - 因為 Illustrator 有版本差異, 不像 photoshop - 存檔有個需要注意的點, 要降轉 Illustrator 的版本 ![](https://i.imgur.com/BzVyi7C.png) - 印刷會用到 CS5 - 記得降轉成 CC 檔案名稱(舊版) 上傳 - 沒把檔案降轉的話, 舊版本的 Illustrator 會出點意外 ---- # 同學的整個畫面式的範例 # 資料夾結構 - 交接檔案的時候怎麼確保圖片存在 - 新增一個 06 素材資料夾位置, 放圖片的素材 - 要記得圖片跟著檔案跑 - 盡量把圖片作乾淨, 弄到適合合成的狀態 - 像這樣: > ![](https://i.imgur.com/u07dkHN.png) > ![](https://i.imgur.com/5EAVe9A.png) > 設計稿最終階段沒有文字 > 說明稿才有文字 --- ## 研究一下圖塊 > ![](https://i.imgur.com/zV2f1zi.png) > 圖片大小, px 可以抓整數之類的? > 十二欄位在抓的時候不會抓 1140px > 可以讓圖片, 有放大縮小的變動 ---- ## 加入參考線 > ![](https://i.imgur.com/qmhIKSi.png) > 解散群組加入參考線 ---- ## icon 放的位置 > ![](https://i.imgur.com/AZYVc1K.png) > 判斷 icon 的位置, 多少 px 都會下去調整 > ![](https://i.imgur.com/a7GCTsC.png) > > > 47px 這種可以直接進到 50px > 每個圖塊都會做做個整數比較好切版(layout) > ![](https://i.imgur.com/WDmHmrq.png) > 要抓位置 --- ## 瀏覽器選單的位置 - 這邊高度抓 1080px > ![](https://i.imgur.com/jyZlxuv.png) > 高度抓的時候要注意一下, 970px, 1080px 之類的 --- ## 版權聲明生成 > ![](https://i.imgur.com/iHuFo05.png) > 記得宣告版權聲明 > 常見的會寫加入年份, 作者, 協力者 ![](https://i.imgur.com/tj21WKU.png) > 加入教育聲明, 例如教學用途, 學習用途 - 版權做法 > ![](https://i.imgur.com/LZzgWVW.png) > 文字底部 touch 後往上推 20px --- ## 圖片作法 > 增加透明度 > 例如以這台 psv 來看, 暗化的效果配透明度蠻好的 > ![](https://i.imgur.com/GYPJ8rI.png) - 圖片移動 > ![](https://i.imgur.com/yZZwiM8.png) > 可以點圖片後按下 enter 移動圖片 --- ## 彈跳視窗的作法 - 像是左上圖片, 推出來一點 > ![](https://i.imgur.com/QZzQjtQ.png) > 背景調, 增加一點對比和立體感 - 像滑到最下面, 要空出 150px 的高度 > ![](https://i.imgur.com/cPEyJva.png) ### 標題做法 - 文字不要變形 > 加入 h1, h2, h3 > ![](https://i.imgur.com/L39PmfK.png) > 不在這裏面的數字不代表不能用(可能比較不漂亮) - 控制文字的視窗 > ![](https://i.imgur.com/Vwjp0Hs.png) > 水平縮放和垂直縮放等, 兩個都是 100% > 這樣可以檢查文字有沒有變形 > Illustrator's value can't tell the lie. ## 增加控制 - 增加按鈕的顏色鮮明對比 > ![](https://i.imgur.com/EnTD1Gc.png) > 記得按鈕也要對齊到十二欄 - 記得按鈕的高度要取整數 > ![](https://i.imgur.com/Enc0oul.png) > 像這樣就太擠 > 按鈕自訂完後後面也好弄上 ## 輪播區塊不要拉太開 > ![](https://i.imgur.com/nbGRHQe.png) > 也要有實際間距 > 按鈕的點點也要拉開一點 > ![](https://i.imgur.com/fknn5iP.png) > 記得都是實際間距 ## 所見及所得(不太一樣) - 不太像是這樣 - 不過圖片跟內文有文字附在一起的話 - 想一下怎麼排 > ![](https://i.imgur.com/9zqkXla.png) > ![](https://i.imgur.com/JLQ6P1e.png) > ![](https://i.imgur.com/Ygm3A86.png) > 比較不希望按下 XX 的按鈕, 立即購買應該比較有 income > ![](https://i.imgur.com/IhRoSxu.png) ## 滿版畫面 - 彈跳視窗 > 裁切 > ![](https://i.imgur.com/pHUbVM7.png) > 分開所有的視窗(版面) > 提個說明稿(提案) > 轉成 jpeg(工作區域, 你要提案的工作區域) > 例如 02, 03 就是 2-3, ![](https://i.imgur.com/A0cFeHs.png) - 一般網頁用, 就可以用 72 dpi > 如果是展示稿, 可以存成 150 dpi > ![](https://i.imgur.com/iRZhXLk.png) ## 提案稿 - 比例抓八分滿, 適當放大縮小 > ![](https://i.imgur.com/yUqlNP3.png) > ![](https://i.imgur.com/CwouaSQ.png) --- # 參考資料: [網頁設計中的版權宣告(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 相簿 - 例如 導覽列要怎麼做 - 你要怎麼跟業主用白話文說 > ![](https://i.imgur.com/TV0hZqx.png) > ![](https://i.imgur.com/DTQp26q.png) --- # 下午的部分 ==要邊框的情況== - 單純不想要有顏色 > ![](https://i.imgur.com/0pxIuWC.png) - 過去的框線圖, 是以框線為主(無色塊) > ![](https://i.imgur.com/t86l0xm.png) --- # 說明稿 - 展示給業主, 工程師, 其他人員 > ![](https://i.imgur.com/aOhP5C9.png) > 旁邊有說明文字 > 中間的圖可以是 mockup, 或 wireframe > 看完整性(業主), 或是提案部分 --- # Prototype - 特別的部分 - 他可以算是 mockup 也可以算是 wireframe > 可以把步驟連結, 透過連連看, 點了整個網站 > ![](https://i.imgur.com/m1bEHkl.png) > 可以模擬整個網站 > 可以了解潛在問題和使用者體驗 - 可能會有這種狀況 ``` wireframe(這階段就有 prototype) 或是在 wireframe 之後就有 proitotype ``` --- # UI flow - 可以看到頁面的操作流程 - 例如, 購物車之後的步驟 ``` 可能操作流程一路到購物結算畫面 ``` > 通常是整個流程 > 而且在手機居多, 因為手機很吃重 UX > 網站也是可以作 UI flow > ![](https://i.imgur.com/qxmqFhS.png) --- # mock up 完整的一張網站的視覺設計 - 做到好的狀況 - 可以開始執行程式的部分 > ![](https://i.imgur.com/O6X3Rn3.png) > wireframe 和 mock up 都有文字 > 不過 wireframe 就可以開始放文字了 > 如果你不確定, 可以做出假文字 > 不過如果你做怎樣形式的網站就應該用相對應的語言 > wireframe 不會有圖片 > 照片, 裝飾, 底色色彩會放到 mock up 去做 > 只要 wireframe 沒有太大問題, 後面的問題也應該不會太大 --- # 內外距的問題 - 裡面有內外距的問題 > ![](https://i.imgur.com/JKN0tB9.png) > ![](https://i.imgur.com/EwwzW63.png) - 副標題配上內容通常都是一樣的間距 > 通常都是一個間距一直用 ![](https://i.imgur.com/c6BO24P.png) --- ## ==外面的距離不會小於裡面的距離== - 裡面的東西會越來越小 - 像是間距, 反之外面的東西則很大 > ![](https://i.imgur.com/hbIzi9o.png) > 設計品都會有類似的概念 --- ## 特殊狀況 - > 在意整體狀況的問題 > ![](https://i.imgur.com/PITC574.png) > ![](https://i.imgur.com/RVK3m9F.png) > 這會請工程師注意到(有些細節) > 為了美觀永不妥協 ---- # 同學的長條式網站 ## 畫面上的凝聚性 > ![](https://i.imgur.com/V2iVvPi.png) > 遵守 ==外面的距離不會小於裡面的距離== --- ## 文字上的對比 - 可以善用旋轉工具 > ![](https://i.imgur.com/IcMKoTW.png) --- ## 對位置記得以欄位為主 > ![](https://i.imgur.com/tqIW1QX.png) --- ## 滿版顏色 > ![](https://i.imgur.com/6IDu1JV.png) ---- ## 給他淺淺的底色 - 呼吸的顏色 > 心境上的變化(?) > 帶點希望 > ![](https://i.imgur.com/0kwMxXP.png) > 讓他有背景顏色上的轉換 > > 轉換顏色, 可以有點情緒轉折 > > ![](https://i.imgur.com/r8EA6wU.png) > > 比較不會整條白到底 --- # 如果螢幕是 1920 x 1080 - 可以按兩下 f, 進入全螢幕 - 用放大鏡拉寬度 - 可以去看整個頁面的問題 > ![](https://i.imgur.com/ddERuO7.png) > 如果十二欄位沒辦法符合需求的時候 > 可以跳脫十二欄位! ---- # 字體選擇 ==例如參考 google font== - 思源黑 - 思源宋 - 也可以用日文字(漢字數量少, 判斷有沒有符合用字需求 ) ![](https://i.imgur.com/J2qYewi.png) > 或是 JF - 台灣特有 > 粉圓體 > ![](https://i.imgur.com/M2jojmf.png) > Open 粉圓 > 跟思源宋有點類似概念 ---- # 全英文網站 - 標題跟區塊的關聯性 > ![](https://i.imgur.com/I6mgVhy.png) > 文字也要注意 > 內文對齊欄位 --- - 圖片對齊問題 > 現代網站常有返回到頁首的按鈕 > ![](https://i.imgur.com/DZDKISt.png) --- # 如果版本有差異 - 就算有差 50% > 業主可能不買單 > 因為可能在他們眼中看起來都一樣 > ![](https://i.imgur.com/aVMThIc.png) --- # 特別的做法 > ![](https://i.imgur.com/Ss7U4Hm.png) ---- # 下一個階段 - 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)