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

C8f411867882d122213cf3a14c03898e?s=47 jiimmysu
November 02, 2015

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

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

C8f411867882d122213cf3a14c03898e?s=128

jiimmysu

November 02, 2015
Tweet

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