設計和 F2E 的切圖與切版

收到讀者來信,這位讀者是 F2E,發現設計師的切圖和 F2E 的切版似乎不太一樣,所以寫信給我。另外問切圖有什麼樣的流程和注意事項…不知道要怎麼詳細說明,其實還滿想回他一句「多被RD罵幾次就會了啊」…orz

切版/切圖

切版、切圖這兩個詞都有人混著講,兩者其實指不同件事。

對設計師來講,切圖指的是 「把圖從 Mockup 裡以可被 RD 運用的方式切出來」
但對前端來說,切版指的是 「對設計圖做版面劃分和規劃的行為」。比如 import、include 等等。

要混著講也是可以啦,同個詞放在不同職位身上會有不同含義也很正常,比如 RD 的 Design Pattern 和 UI 的 Design Pattern 就完全是兩回事。

但不管是切版或是切圖,麻煩在做 Mockup 前、完成 Mockup 要開始切的時候,F2E 和設計都坐下來花點時間,拿 Wireframe 討論一下要怎麼做圖和切圖好嗎? 有經驗的 F2E 和設計都會先討論過再開工以減少錯誤,沒經驗的不更該好好問清楚要怎麼做才能互相配合?

切圖的工具

如果設計師會自己做網頁,哪怕是 Dreamweaver 圖像介面拉一拉,對切圖多少都會有點概念。當然能手刻 HTML CSS 更好。

如果你是 F2E,要面對平面設計師切出來的圖,請參考:如何讓公司的平面設計師交出可以用的 Web 圖? 然後快點去拜拜或天天扶老太太過馬路求人品爆發。

切圖的流程每位設計師都不太一樣,但產出物會是相同的(不然 RD 怎麼套圖?)。市面上有很多工具可加快工作效率,我自己是 愛用切圖神器:Slicy ,有的設計師習慣使用 免費切圖神器:Cut&Slice me

另外推一套 Photoshop 外掛:DevRocket ,除切圖外,還可以做Mockup、Demo 圖。

很多繪圖軟體內建切圖功能,像新版的 Photoshop、SketchAffinity 等等,挑自己順手的就好了,沒有什麼強硬的規定一定要用什麼方式切圖。

切圖的方式

依製圖習慣不同、切圖工具不同、專案需求不同,會有完全不同的切圖方式。但製圖遠比切圖更重要,在 Mockup 這一步沒做好,圖切得爛理所當然。

網頁

切圖前請先問清楚這個專案是否需要:

  1. @2x
  2. SVG
  3. Responsive
  4. 單一圖檔重覆使用…等等

其實這問題應該在畫 Mockup 前就要問清楚了,這 3 個需求會影響做圖方式。如果這 3 點都沒有就輕鬆啦,如果這三個都中獎了就要更注意 PSD 檔製作,該向量就向量、該對準參考線 Grid 的要對準。同一圖檔若會在許多地方出現,請轉智慧型圖層。

App

iOS 和 Android 切法不同,如果要一套 Mockup 切給兩個平台用,記得 iOS 切一次,另存新檔後再切 Android。有備份有保祐。

  1. @2x、@3x
  2. 9-patch
  3. 切 PDF…等等

比較容易出錯的的切圖應該會出在這 3 點上。參考 工作清單:切圖 ,一時間看不懂沒關係,被 RD 退件幾次罵幾次就會了。

切圖前設計的注意事項

這問題其實在問「Mockup 怎麼做」,範圍太大了很難詳細說明,列幾篇文章出來當延伸閱讀吧。圖切得爛只是設計師不知道怎麼做沒經驗,教他幾次就好了(學不乖、不肯學的例外)。Mockup 做得爛、製圖習慣不好才是真正難治療的黑洞。

Mockup

工作清單:Mockup
PSD 製作禮儀

Web Grid

Grid 的運用:PS外掛
Fixed Grid System詳解

APP

iOS 解析度製圖設定
iPhone 6 及 Plus 製圖建議
iOS 支援向量切圖
iOS、Android 字級單位

希望這篇文給所有想轉行的平面設計師一點方向:網頁設計師基本功

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close