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

常常被團隊的工程師說你的平面設計稿無法做成網頁? 設計師和工程師常常吵架?
一個要做成網頁的平面設計稿有哪些要注意的呢? 請看此文的概略介紹。

上面有一個 ppt，如果看不到 ppt 請點網頁的平面設計稿要注意哪些事? // Speaker Deck。

內容摘要:
一、請使用 RGB 色彩模式
1.色彩模式: 不管原始稿件是什麼，通通要轉成 RGB
2.網頁色彩表示法:
– 規範的英文名稱(如 Green, Lime)
– HEX 16 進位 (如#000000)
– RGB/RGBA (如rgba(255,255,255,.5))
– ~~C60 Y50~~ 不要報 CMYK 色碼
– ~~Pantone 600 號~~ 不要報色票號碼
– ~~馬卡龍綠、Tiffany 藍、珍珠白、土豪金~~ 請講色碼，不是形容詞!

3.印刷會有色差，電子產品螢幕一樣會有色差
– 使用者螢幕沒校色
– 使用者色盲
– 濾藍光模式
– 校對時都用投影機討論
– 戶外背光情境

二、網頁常用的圖片檔案格式
– JPG
– PNG
– GIF
– SVG

大原則: 色彩鮮豔度、壓縮品質降個10%，不一定每個人都看得出來，
但是檔案太大，載入很久，每個人都看得出來!

三、請同時考慮內容超長與沒有內容(empty state)的情況
– 因狀態變更，或是不同情境、不同語系、特別多的金額或數字長度…會讓同一個區塊裡的內容長度不一，造成內容超出背景圖，跑版…等情況。
– 標題超長時如何呈現?
– 內容超長/超寬時如何呈現?
– 你畫的輸入框可以容納幾個字? 輸入 email 時會被畫面切掉嗎?
– 超寬的東西(如表格、頁籤)，在不同寬度的螢幕會如何顯示?
– 沒有資料時如何呈現?

範例1: 空的購物車表格
這種情況也是很多新手工程師易犯的錯誤，沒有內容時，畫面上也會顯示空的表頭、頁數、不能點的下一頁按鈕、空的麵包屑箭頭…
範例2: 多語系文字長度問題
同樣的字型大小，因為英文的字數較多，所以文字會超出原來的底圖。
範例3:不要拿著平面稿說「請設定寬度在可以剛好斷在一行的地方」，隨語系、使用者瀏覽器設定，每個裝置剛好能顯示一行的寬度可能大不同。

四、網頁中文字型
1.如果目標客戶都用Windows，而且頁面都是中文字…
– 只能用 Windows 內建的字體，一般的網頁中文字體: 新細明體、標楷體
– Windows Vista, 7, 8, 8.1, 10 才有的微軟正黑體

2.繁體中文與簡體中文 Windows 的內建字體:
– zh-cn: 宋体(simsun/nsimsun)、黑体(simhei)、楷体(simkai)、仿宋(simfang)
– zh-tw: 細明體/新細明體 (Mingliu/PMingliu)、標楷體(DFKai-sb)、simsun、simhei

3.要用其他字型呢?
解法A: 使用 Webfont
付費
– Justfont (繁體中文、簡體中文)
– 華康 (繁體中文)
– 文鼎iFontCloud (繁體中文)
– 造字工房 (簡體中文)
– TypeSquare (日文、繁體中文)

免費(連圖庫費/設計費都不想出的客戶，還想叫他花錢買字體?)
– Google Fonts (FREE，英文字型為主)
– Adobe Edge Web Fonts (FREE，英文字型為主)

解法B: 通通做成圖片
– SEO: 差，現階段搜尋引擎不會辨識圖片內的文字是何種語言，更不會把圖片中的文字建立索引供人搜尋。
– 高解析度裝置: 圖片看起來是糊的。除非出好幾套圖用 srcset 來切換。
– 行動裝置: 圖片縮得很小，需要一直縮放滑動看內容?

五、想想其他螢幕尺寸的使用者
1.第一屏(First Screen) 概念
2.不要只依螢幕尺寸來決定操作行為與畫面，還要依裝置的特性。
– 12.9 吋的平板 : 還是以觸控操作為主，不能有「滑鼠移入」才會顯示的東西。
– 10 吋非觸控型小筆電 : 以滑鼠操作為主，不一定要像行動版一樣間距與按鈕做很大。

3.想想電腦
– 排列組合: (常見螢幕比例 4:3、16:10、10:9) X (常見電腦螢幕尺寸 13吋~27吋)
– 視窗沒放到最大，Mac 的工具列很高，瀏覽器灌一堆工具列…

4.想想行動裝置
– 尺寸 4 吋手機 ~ 13 吋平板 都有
– 考慮「滑鼠移過去才會…./ 滑鼠移過去才知道….」的內容在行動裝置會如何顯示?

範例1-太寬的東西在行動裝置上會變怎樣?
範例2-高100%滿版圖片在實務製作上常發生的問題?
範例3-圖片上字很多的廣告圖遇到 fit screen 規則的 RWD 網頁。淘寶網，或是一些國內的商城/開店平台的商品介紹圖文，已採用電腦版與行動版分開建置的方式，讓載入速度最佳化，編排最簡易化。
範例4-responsive-background bad example

六、想想各種狀態的視覺樣式
1.介面操作元件狀態
– 作用中
– 已停用
– 不能點的
– 可以點的
– 載入中
– 處理中
– 可選取
– 已選取
– 單選
– 複選

2.超連結
– 已訪問過
– 一般連結
– 強調連結
– 滑鼠移入
– 按下連結

3.其他
– 登入前/非會員/登入後
– 操作步驟/操作未完成
– 正常運作
– 發生錯誤
– 無資料狀態
– 指引

範例: 未登入/登入前會顯示不同內容，原來的底圖就放不下了

七、避免做出難以切割的版面
1.版面是由一塊一塊的平面矩形區域構成，然後再依各種屬性去控制矩形區域。
2.對一塊一塊的東西可以控制:
– 內容置中、置左、置右、外部置中、置左、置右
– 絕對位置/相對位置/水平位置/垂直位置
– 背景圖延伸、背景圖位置
– 外框線/圓角/陰影
– 寬度/最小寬度/最大寬度
– 高度/最小高度/最大高度
– 上下左右向外留白/向內留白
– 2D 變形(旋轉、扭曲…)、3D變形
– 使用其他元素(SVG, Canvas)，做出不同的形狀。

範例1: 做一些特殊形狀時請先想想…
範例2: 只是字打一打放上去嗎? 用 Outline/Border all Elements of Site for Quick Development & Debugging 看看蘋果的產品宣傳網頁…

八、不食人間煙火
1.提案的設計稿太美好，實際使用上…
– 與實際產品或網站形象落差太大
– 後續難以維護
– 預算或科技無法實現的功能
– 合約上沒有的功能

2.有時候是溝通問題
– 設計師不夠了解客戶
– 設計師不夠了解團隊成員的能力/產品功能
– 有人沒那個屁股，硬要吃…

範例1:圖片比重佔很大的版面範例
範例2:特殊形狀的版面範例
範例3:特殊媒材(如影片背景)
範例4:維護成本高

九、不要做合約上沒有的功能
範例1.以登入畫面為例
範例2.以線上刷卡畫面為例
1.資訊流概念，以新聞列表為例，它的資訊流與程式設計流程要考慮那些東西呢…?
– 資訊: 日期、時間、標題、內文、新聞分類、封面圖、作者資訊、社群分享、點閱數
– 如果標題很長，會變兩行，還是超過多少字變點點點? 標題字數上限是?
– 封面圖是另外上架，還是直接抓取內文的圖，大小比例是?
– 沒有封面圖時，要顯示網站 logo，還是暫無圖片，還是有另外的編排?
– 新聞摘要是新聞內文過濾掉 HTML 的前 XXX 個字，還是摘要與內文分開建置? 新聞摘要要取幾個字?
– 點擊 more 會發生什麼事? 換頁? 原頁展開內容? 動畫效果?
– 點閱數計算方式? F5 就算一次/ 30 分鐘內重複 IP 的不計算/ 自動 Double 制? / 後台可以改每則的點閱數?
– 一頁顯示幾筆新聞? 排序方式是? 依發布時間? 依人氣? 依分類? 置頂功能?

2.時間/預算是否足夠?
「就跟 FB / Google / 淘寶 / XX 商城一樣的功能啊，滿常見的，套一套就好，應該不難吧!」
– 超炫效果……但是在某些裝置/瀏覽器看不到，或是花許多功夫做 fallback。
– 加入最愛/追蹤清單/商品比較/線上即時通知/即時留言
– Infinite scroll, SPA… Ajax 載入的東西常常要對 SEO 多做很多處理。
– 邊打邊列出搜尋結果/ 自動列出建議搜尋結果 / 全站全文模糊比對搜尋 / 搜尋圖片內的文字
– 自動列出相似建議項目 / 推薦項目…推薦機制或算法會自己生出來嗎?
– 更動第三方串接系統的流程與畫面…你簽約的系統有提供此功能嗎?
– 系統自動顯示即時運送進度、付款狀態…沒串接任何金物流，系統要怎麼知道貨啥時到了，啥時有進帳?

你的預算跟 FB 或 Google 一樣高嗎?
– 所以說，那個伺服器效能 / 資料庫效能 / 瀏覽器效能 / 載入時間 / 伺服器負載 / 人力成本呢?
– 讓瀏覽者可以自己上傳 / 想讓使用者保存任何資訊/ 想保存使用者的任何資訊前，請考慮資安/系統負載/空間問題，對一些不成熟的系統或技術團隊來說是非常可怕的。
– 口袋夠不夠深，找不找得到對的團隊?

十、團隊忌諱: 換了位子就換了腦袋
– 情境1
(視覺設計師常聽到的)…客戶:「交給你專業的! 怎樣做都可以」
(前端/後端工程師常聽到的)…美工: 「code 你寫的，你決定就好!」
結果做出來之後改東改西。

• 情境2
  (視覺設計師常聽到的)…客戶:「每種顏色跟字體都配一版讓我挑!」
  (前端/後端工程師常聽到的)…美工: 「通通做成可以在後台開關設定控制、模組化、熱插拔就好啦!」
• 情境3
  (視覺設計師常聽到的)…客戶:「我把照片跟文案都零散的貼在Line上面了，你再排成專刊就好，應該很快吧?」
  (前端/後端工程師常聽到的)…美工:「我圖都做給你了，照著做就好，應該很快吧?」

• 情境4
  (視覺設計師常聽到的)…客戶:「先排版面，文案跟圖片以後再補給你。」
  (前端/後端工程師常聽到的)…美工:「先寫程式，版面出來了再做調整。」

十一、其他網路文章
如何讓公司的平面設計師交出可以用的 Web 圖？ « 嫁給RD的 UI Designer
解放吧！設計圖應該跟Web實作是一致的
平面設計和網頁設計的區別 – ㄇㄞˋ點子靈感創意誌