【工作】圖面排版vs直接切版

Chenyu Yang
Sep 1, 2018 · 4 min read
free image from www.pexels.com

在無數個網頁設計工作經驗裡,時常需要與不同人配合執行專案,
大家都希望工作執行有效率,能夠早早打完收工最好,
而最近工作上遇到以下"問題"(或者說是"議題"較為恰當),
自己思考過後也有了結論,隨手記錄一下。

網頁開發過程中,有產出wireframe討論,大家對於功能有共識之後,終於可以進行開發階段…
身為50%設計師與50%前端工程師的我,接下來要進行的工作流程會是,
1.審視wireframe(以XD製作),看使用經驗上是否還有思考未周全的地方。
2.以wireframe為基礎,帶入視覺設計描一份prototype(以PS製作)。
3.再以prototype為成品目標,進行html/css撰寫。
4.後續工程師接手,套資料庫、檢測…等

幾年來的流程大致上都是這樣,只是依工時急緩或專案工作分配不同,各步驟間會有取捨(偷工)的部分。

但最近前輩建議我,在wireframe確認後,可以直接進編輯器刻web,避免重工。跳過視覺產出,對我來說,有點衝擊了過往的做事方法,想反駁卻不知道問題出在哪?

試著直接進入網頁編輯軟體,開始敲打版面,發現自己會不知從何開始,恩…那就照wireframe刻吧!
刻出來之後,版面當然醜到不行,自己這關都無法通過,於是又花了很多時間反覆修正樣式。

後續的反覆修正樣式所花的時間,與圖面排版要花的時間,很難量化比較,但若以成品來看,少了PS的輔助,自己覺得視覺上的細節差很多,例如邊框要用多粗細、配色、是否要陰影…等。

而且重工的問題其實是可以解決的,
以套件、表格…等區塊來說,排版時不用花太多時間琢磨,因為排完後成品也不見得會長一模模一樣樣,不如把時間多花在大架構的版面樣式上。
實作且比較過後,我終於能對前輩提出駁回(阿~也只是腦內小劇場演一下)

回歸正題,在網頁製作過程中,圖面排版是否可以跳過,進到直接切版的步驟?
我的結論是,再怎麼樣都還是要保有視覺產出,可以依案件情況不同有所精簡,但不能完全省略!
站在前輩立場來看,我可以理解會覺得有重工、浪費時間的地方,就連我自己身兼設計師跟前端工作,也常常想:"這區塊等切網頁再來排好了,這顏色等進網頁再來調好了~" 以過往接案經驗,校稿不可能出半調子圖面給客戶看,所以還是要排好排滿。但如果是現在軟體case,大多是公司內部討論,不需要直接對客戶,有些工的確就能省下來。

原本不知道如何反駁,也因為這次思考過程,而更加了解自己在做每個步驟之於工作流程的用意(之前被操到像機器人後就不知道怎麼思考了0.0)

● wireframe用來確認功能流程,講求快速產出,用於討論(這步驟希望自己以後能做到既快又好)。
● 接下來用PS(或任何其他排版工具)製作精描圖面的過程,也同時是在思考版面該怎麼排。雖然看似無意義把版面移來移去,顏色調來調去,只要調到一個正確的位置、顏色,所謂的感覺對了~版面就大致確立了。
● 設計師畢竟是視覺動物,什麼東西都要經過圖面才能理解,看著一堆程式碼很難想像產出的整體畫面長甚麼樣子。
● 現在的繪圖軟體功能越來越強大,排好版面也可以一併把圖檔、CSS都產出,只是需要多點心思在圖檔命名上,多一份工在前面,也同時少一份工在後面。

想到之前上班看到同事閉目養神,他說他是在思考程式怎麼寫(笑),其實每個人都有自己習慣的做事方法對吧!
話雖這麼說,我也不希望自己落入一個舒適圈就動不了,遇到新方法或觀念還是想嘗試看看,最後再選擇自己順手有效率的方法來實施就是~

你也跟我有一樣困擾嗎?或是有不同見解,歡迎留言跟我交流交流~ (我也想知道早點打完收工的秘訣!!)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade