網頁的平面設計稿 要注意哪些事?

常常被團隊的工程師說你的平面設計稿無法做成網頁? 設計師和工程師常常吵架? 一個要做成網頁的平面設計稿有哪些要注意的呢? 請看此文。
http://jimmysu.logdown.com/posts/307504-graphic-design-to-webdesign

Transcript

1. 網頁的平面設計稿 要注意哪些事? su1205su@gmail.com
2. 目錄  一、請使用 RGB 色彩模式  二、網頁常用的圖片檔案格式  三、請同時考慮內容超長與沒有內容的情況  四、網頁中文字型  五、想想其他螢幕尺寸的使用者  六、想想各種狀態的視覺樣式  七、避免做出難以切割的版面  八、不食人間煙火  九、不要做合約上沒有的功能  十、團隊忌諱: 換了位子就換了腦袋  十一、其他網路文章
3. 一、請使用 RGB 色彩模式  色彩模式: 不管原始稿件是什麼，通通要轉成 RGB  檔案格式: JPG / GIF / PNG  網頁顏色表示法:  規範的英文名稱(如 Green, Lime)  HEX 16 進位 (如#000000)  RGB/RGBA (如rgba(255,255,255,.5))  C60 Y50 不要報 CMYK 色碼  Pantone 600 號 不要報色票號碼  馬卡龍綠、Tiffany 藍、珍珠白、土豪金 請講色碼，不是形容詞!  印刷會有色差，電子產品螢幕一樣會有色差  使用者螢幕沒校色/使用者色盲/濾藍光模式/都用投影機討論/戶外背光
4. 二、網頁常用的圖片檔案格式  JPG  不需要透明的全彩圖片、漸層色圖片  PNG  圖形中有半透明區塊時使用 PNG (如雲朵、煙霧…)  單色檔案  透明圖形  GIF (色彩量256色，很難把漸層顯示得漂亮)  動畫圖  256色內全透明圖檔  SVG  網頁上需要用到向量影像呈現的地方，如小圖示，logo，特殊符號或圖形 色彩鮮豔度、壓縮品質降個10%，不一定每個人都看得出來， 但是檔案太大，載入很久，每個人都看得出來!
5. 三、請同時考慮內容超長與沒有內容的情況  因狀態變更，或是不同情境、不同語系、特別多的金額或數字長度… 會讓同一個區塊裡的內容長度不一，造成內容超出背景圖，跑版…等情況。  標題超長時如何呈現?  內容超長/超寬時如何呈現?  你畫的輸入框可以容納幾個字? 輸入 email 時會被畫面切掉嗎?  超寬的東西(如表格、頁籤)，在不同寬度的螢幕會如何顯示?  沒有資料時如何呈現?
6.  未處理空內容  這種情況也是很多新手工程師易犯的錯誤，沒有內容時，畫面上也會顯示空的表頭、 頁數、不能點的下一頁按鈕、空的麵包屑箭頭… 三、請同時考慮內容超長/沒有內容的情況-範例
7. 三、請同時考慮內容超長/沒有內容的情況-範例  同樣的字型大小，因為英文的字數較多，所以文字會超出原來的底圖。  若程式架構無法依多語系顯示不同樣式，就要考慮把字縮小，或是把底圖加大， 或是…。
8.  不要拿著平面稿說「請設定寬度在可以剛好斷在一行的地方」  網頁語法只有 永不換行/英文單字換行/強制斷字換行…  隨語系、使用者瀏覽器設定，每個裝置剛好能顯示一行的寬度可能大不同。 三、請同時考慮內容超長/沒有內容的情況-範例
9. 四、網頁中文字型  只能用 Windows 內建的字體， 一般的網頁中文字體:  Windows XP 沒有微軟正黑體， Windows Vista, 7, 8, 8.1, 10 才有 如果目標客戶都用Windows，而且頁面都是中文字… 繁體中文與簡體中文 Windows 的內建字體: zh-cn: 宋体(simsun/nsimsun)、黑体(simhei)、楷体(simkai)、仿宋(simfang) zh-tw: 細明體/新細明體 (Mingliu/PMingliu)、標楷體(DFKai-sb)、simsun、simhei
10.  解法A: 使用 Webfont  付費  Justfont (繁體中文、簡體中文)  華康 (繁體中文)  文鼎iFontCloud (繁體中文)  造字工房 (簡體中文)  TypeSquare (日文、繁體中文)  免費(連圖庫費/設計費都不想出的客戶，還想叫他花錢買字體?)  Google Fonts (FREE，英文字型為主)  Adobe Edge Web Fonts (FREE，英文字型為主)  解法B: 通通做成圖片  SEO: 差，現階段搜尋引擎不會辨識圖片內的文字是何種語言，更不會把圖片中的文字 建立索引供人搜尋。  高解析度裝置: 圖片看起來是糊的。除非出好幾套圖用 srcset 來切換。  行動裝置: 圖片縮得很小，需要一直縮放滑動看內容? 四、網頁中文字型-要用其他字型呢?
11. 五、想想其他螢幕尺寸的使用者  第一屏(First Screen) 概念  不要只依螢幕尺寸來決定操作行為與畫面，還要依裝置的特性。 12.9 吋的平板 : 還是以觸控操作為主，不能有「滑鼠移入」才會顯示的東西。 vs. 10 吋非觸控型小筆電 : 以滑鼠操作為主，不一定要像行動版一樣間距與按鈕做很大。  想想電腦  排列組合: (常見螢幕比例 4:3、16:10、10:9) X (常見電腦螢幕尺寸 13吋~27吋)  視窗沒放到最大，Mac 的工具列很高，瀏覽器灌一堆工具列…  想想行動裝置  尺寸 4 吋手機 ~ 13 吋平板 都有  考慮「滑鼠移過去才會…./ 滑鼠移過去才知道….」的內容在行動裝置會如何顯示?
12. 五、想想其他螢幕尺寸的使用者
13. 五、想想其他螢幕尺寸的使用者  內容排得太寬，如產品比較表，時刻表、購物明細、產品規格表、頁籤… 小螢幕時會顯示得很可怕! 價錢如果有6位數時會怎麼顯示呢? 這東西在小小的手機上是怎麼顯示的呢? 去看看各大新聞網的行動網站吧!
14. 五、想想其他螢幕尺寸的使用者 設計師: 網頁要做得跟圖一模一樣。 螢幕比例較扁時 (背景圖寬100%，靠上對齊) 產品底部跟slogan被切掉。 螢幕比例較扁時 (背景圖寬100%，靠下對齊) 產品上半部被切掉。 螢幕比例偏4:3/16:10 (圖片寬100%，垂直置中) 背景圖複雜，無法使用重複 圖形，造成上下出現瑕疵。 螢幕比例偏4:3/16:10 (圖片高100%，垂直置中) 圖片左右兩邊被切掉 你有想過這些狀況嗎? 沒有，你只想到你自己。 此為簡化示意圖，實際上請考慮OH YES是一堆複雜圖形+重要文案，中央產品圖則是做成PNG會檔案超大的狀況。
15. 五、想想其他螢幕尺寸的使用者  圖片上的字太多，手機版網頁使用 Fit Screen 規則時效果非常差。  淘寶網，或是一些國內的商城/開店平台的商品介紹圖文， 已採用電腦版與行動版分開建置的方式， 讓載入速度最佳化，編排最簡易化。 圖片來源: https://placekitten.com/
16. 五、想想其他螢幕尺寸的使用者 http://static.elliotjaystocks.com/responsive-background-images/examples/problem1.html 圖片寬100%等比例縮放 文字區塊寬50% Duang!
17. 五、想想可能會調整裝置設定的使用者  使用者調整瀏覽器的「最小字型大小」或其他縮放設定.. 摘要跑到下面去了 區塊設固定高度， 結果字被切掉了
18. 六、想想各種狀態的視覺樣式  超連結  已訪問過  一般連結  強調連結  滑鼠移入  按下連結  介面操作元件狀態  作用中  已停用  不能點的  可以點的  載入中  處理中  可選取  已選取  單選  複選  其他  登入前/非會員/登入後  操作步驟/操作未完成  正常運作  發生錯誤  無資料狀態  指引 登入/註冊」 Mary Elizabeth Winstead 小姐 您好! 會員中心 / 訂單查詢 / 登出 未登入/登入前會顯示不同內容，原來的底圖就放不下了
19. 現出你的原形吧! Outline/Border all Elements of Site for Quick Development & Debugging http://blog.creatingdrew.com/javascript-bookmarklet-outlineborder-all-elements/ 七、避免做出難以切割的版面 版面是由一塊一塊的平面矩形區域構成， 然後再依各種屬性去控制矩形區域。
20. 七、避免做出難以切割的版面  版面是由一塊一塊的平面矩形區域構成，然後再依各種屬性去控制矩形區域。  對一塊一塊的東西可以控制:  內容置中、置左、置右、外部置中、置左、置右  絕對位置/相對位置/水平位置/垂直位置  背景圖延伸、背景圖位置  外框線/圓角/陰影  寬度/最小寬度/最大寬度  高度/最小高度/最大高度  上下左右向外留白/向內留白  2D 變形(旋轉、扭曲…)、3D變形  使用其他元素(SVG, Canvas)，做出不同的形狀。  有時要使用障眼法，看起來不是矩形，操作起來也不像矩形，但實際上還是矩形。
21. 七、避免做出難以切割的版面 作一些特殊形狀時請先想想… 黑色:透明 PNG 圖片 紅色:圖片實際上所佔的範圍 所以無法從鏤空的地方，用滑鼠點選/選取的最下面的貓咪。
22. 八、不食人間煙火  提案的設計稿太美好，實際使用上…  與實際產品或網站形象落差太大  後續難以維護  預算或科技無法實現的功能  合約上沒有的功能  有時候是溝通問題  設計師不夠了解客戶  設計師不夠了解團隊成員的能力/產品功能 http://www.teamjimmyjoe.com/2014/02/close-enough-20-pics/
23. 八、不食人間煙火-範例 http://www.templatemonster.com/wordpress-themes/53263.html 圖片比重佔很大的版面範例 客戶:「圖很難配，以前的版面還比較好用。」 「我有些圖是白的，字也是白的，怎麼辦呢?」 http://www.templatemonster.com/landing-page-template/57639.html 特殊形狀的版面範例 客戶:「這種形狀很難挑照片耶，都會被切到」 「我可以每個月換成不同的形狀嗎?」
24. 八、不食人間煙火-範例 特殊媒材(如影片背景) 客戶:「花大錢拍了影片，可是卻要把它弄 得暗不明顯的放在背景?」 客戶: 「我們的伺服器在國外不太夠力耶， 影片還沒載入完成，瀏覽者就離開了」 http://themeforest.net/item/modules-creative-multipurpose- wordpress-theme/13202743 維護成本高 客戶: 「我們的產品實際上是每個都不 一樣大的喔! 而且還要一張張先去背， 有夠麻煩!」 http://www.templatemonster.com/opencart-templates/55697.html
25. 九、不要做合約上沒有的功能 - 以登入畫面為例 用手機號碼+簡訊驗證碼登入? 所以我說，你的簡訊發送系統呢? 用暱稱/手機號碼登入? 會不會有人的暱稱叫 DROP Table members 有人的手機號碼叫「3345678晚上不要打」呢 是把帳密保存在使用者本機， 還是其他機制? 有幾百個國家的電話格式與 驗證機制要做? 用APP掃條碼登入? 第三方帳號串接? 台灣:FB/Google+/Y! 中國大陸:QQ/Wechat/sina 國外:Twitter, …
26. 為什麼不能這樣做?  串接的XX銀行線上刷卡/ XX金 流，不提供自訂樣式功能，或 是其他的程式控制流程。  客戶跟金流服務簽訂的只是基 本方案合約，沒有提供交易以 外的功能。  把卡號資料、交易過程在自己 的網站內進行，安全風險非常 大，除非客戶有那麼高的預算 把整個流程做好、做滿。 100 days of ui #4 – credit card payment 九、不要做合約上沒有的功能 - 以刷卡畫面為例
27. 九、不要做合約上沒有的功能-資訊流概念  資訊: 日期、時間、標題、內文、新聞分類、封面圖、作者資訊、社群分享、點閱數  如果標題很長，會變兩行，還是超過多少字變點點點? 標題字數上限是?  封面圖是另外上架，還是直接抓取內文的圖，大小比例是?  沒有封面圖時，要顯示網站 logo，還是暫無圖片，還是有另外的編排?  新聞摘要是新聞內文過濾掉 HTML 的前 XXX 個字，還是摘要與內文分開建置? 新聞摘要要取幾個字?  點擊 more 會發生什麼事? 換頁? 原頁展開內容? 動畫效果?  點閱數計算方式? F5 就算一次/ 30 分鐘內重複 IP 的不計算/ 自動 Double 制? / 後台可以改每則的點閱數?  一頁顯示幾筆新聞? 排序方式是? 依發布時間? 依人氣? 依分類? 置頂功能? Ex.這是一個新聞列表，他的資訊流與程式設計流程要考慮那些東西呢…?
28. 九、不要做合約上沒有的功能-資訊流概念 - 時間/預算是否足夠?  「就跟 FB / Google / 淘寶 / XX 商城一樣的功能啊，滿常見的，套一套就好，應該不難吧!」  超炫效果……但是在某些裝置/瀏覽器看不到，或是花許多功夫做 fallback。  加入最愛/追蹤清單/商品比較/線上即時通知/即時留言  Infinite scroll, SPA… Ajax 載入的東西常常要對 SEO 多做很多處理。  邊打邊列出搜尋結果/ 自動列出建議搜尋結果 / 全站全文模糊比對搜尋 / 搜尋圖片內的文字  自動列出相似建議項目 / 推薦項目…推薦機制或算法會自己生出來嗎?  更動第三方串接系統的流程與畫面…你簽約的系統有提供此功能嗎?  系統自動顯示即時運送進度、付款狀態…沒串接任何金物流，系統要怎麼知道貨啥時到了，啥時有進帳?  你的預算跟 FB 或 Google 一樣高嗎?  所以說，那個伺服器效能 / 資料庫效能 / 瀏覽器效能 / 載入時間 / 伺服器負載 / 人力成本呢?  讓瀏覽者可以自己上傳 / 想讓使用者保存任何資訊/ 想保存使用者的任何資訊前， 請考慮資安/系統負載/空間問題，對一些不成熟的系統或技術團隊來說是非常可怕的。  口袋夠不夠深，找不找得到對的團隊?
29. 十、團隊忌諱: 換了位子就換了腦袋 視覺設計師常聽到的… 前端/後端工程師常聽到的… 情境1 客戶:「交給你專業的! 怎樣做都可以」 結果做出來之後改東改西。 美工: 「code 你寫的，你決定就好!」 結果做出來之後改東改西。 情境2 客戶: 「每種顏色跟字體都配一版讓我挑!」 美工: 「通通做成可以在後台開關設定控 制、模組化、熱插拔就好啦!」 情境3 客戶: 「我把照片跟文案都零散的貼在Line上 面了，你再排成專刊就好，應該很快吧?」 美工: 「我圖都做給你了，照著做就好， 應該很快吧?」 情境4 客戶: 「先排版面，文案跟圖片以後再補給你。」 美工: 「先寫程式，版面出來了再做調整。」
30. 其他網路相關文章  如何讓公司的平面設計師交出可以用的 Web 圖？ « 嫁給RD的 UI Designer  解放吧！設計圖應該跟Web實作是一致的  平面設計和網頁設計的區別 - ㄇㄞˋ點子靈感創意誌