本部落格已搬家
點此前往新部落格

新主機測試中...

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

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

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:
一、請使用 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
付費

免費(連圖庫費/設計費都不想出的客戶,還想叫他花錢買字體?)

  • 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實作是一致的
平面設計和網頁設計的區別 - ㄇㄞˋ點子靈感創意誌


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


Comments 轉載文章請留言說一聲

comments powered by Disqus