實在是非常非常的鬱悶,美工,我真的不得不說。
緣於近期一個項目,找個2個美工,基本都是首頁效果圖設計得不錯,其他頁面稍次,但基本還能接收。等到轉HTML了,開始問題一籮筐了:CSS不熟,DIV不熟,FRAMESET不懂,圖切的不到位,無法實現...最後還只能自己搞了,更不能奢侈他們能做JS的動態交互了。
這裏要討論幾個問題:
首先是美工的職責,美工到底要做多少東西?總結一下前端設計有以下一些步驟:
1、設計
2、畫圖
3、切圖
4、轉HTML
5、DIV+CSS
6、JS+CSS的Widgets(滾動公告,ToolTip等)
...剩下的就是跟後端動態代碼的整合,至此整個Web前端纔算完成。
設計:“你們要設計好啊,我按你們的設計畫啊!”,囧
畫圖:“我是按你們的要求畫的,你上面沒說要畫成什麼樣”,囧
切圖:“怎麼我的表格頭是一個靜態圖片?!”“因爲表格線無法做成樣式”,囧
轉HMTL:...算了,我自己來吧
DIV...
JS...
前端開發就分爲美工和UI工程師實現的,美工就是實現界面圖案的設計,UI工程師就是負責具體HTML界面與交互的實現,包括HTML,CSS,JavaScript等,只有分清這幾個才達到想要的效果。
美工一般做1,2
前端做3,4,5,6
分得更細一點,1還可以拆分爲 交互設計 + 視覺設計, 分別由交互設計師和視覺設計師完成
能從1做到6的人才很難得,即便有,也很難在這6個方面都做得很好
1 Taglib學習成本高
2 Taglib破壞了界面美工開發
對於學習成本,我是不以爲然,一個tag就那麼一點點東西,稍微看2個小時
就能夠搞清楚,對於已經瞭解Tag的人來說,學習一個新Tag時間不會很長。
而關於美工與程序員的配合,我另外有些不同看法
1 美工mm和程序員之間應該增加1個層
大多數公司是直接由美工作好界面然後由程序員在界面基礎上寫代碼。
這就要求美工或者程序員的某一方,必須精通HTML/CSS/Script等前端技術
這如果沒有1~2年的作靜態界面經驗是無法勝任的。
我認爲這之間應該有個人專門負責前端的切圖,調整CSS,寫HTML代碼,
製作Script,調整字符等等這些事情。 這時很有必要的。
讓美工mm直接看代碼肯定會頭大
但如果讓這個人學習Taglib,或許會有不錯的效果。
這樣,程序員只管後臺的開發,美工只管畫圖,這個前端程序員來負責美術設計
和程序設計之間的配合。
2 嘗試將美術設計和程序設計再次分離。
在我現在的項目中,有一個換膚的功能需求。雖然還沒有開發,但是已經有部分想法。
我的想法是:界面中,不出現任何關於顏色,字體,圖片,寬度等等的信息。只用CSS來控制。
如<Table class="data"><tr><td ></td></tr></table>
當然,這要求對CSS有比較深入的瞭解。這對我來說是不成問題的。
這樣,我們可以按照程序需要顯示的結構,先做出一個靜態的乾淨HTML
即僅使用CSS控制顯示方式的HTML
然後,程序員在這html基礎上作JSP,美工在這html基礎上作圖。
最後,美工mm只需要提交一個css和若干圖片即可,而不需要對jsp頁面有任何修改。
CSS的有效和重複使用,使這種方式的核心。舉個例子。下面這個table
<Table class="dataTable">
<tr>
<td class="dateMenu"></td>
<td class="dataOperate'></td>
</tr>
</table>
如何更歡皮膚?
我只需要import不同的CSS即可。CSS中定義
.dataTable {}
.dataTable .dataMenu {}
.dataTable .dataOperate {}
注意上面的空格,這是表示繼承關係。即只有.dataTable下面的.dataMenu會有效果
這很類似面向對象的設計。因此,我可以通過這樣的一個dataTable,控制表格的所有樣式。
嘿嘿,這方面等過些天我再研究一下會寫篇文章。
我們公司開發的是一套純面向IE的系統,不用考慮其他的瀏覽器。
因此,哪怕是使用CSS進行絕對定爲也是可行的。
比如現在的MovableType這樣的blog,就是完全用CSS定位而不是Table
因此,我認爲,如果工作安排得好,使用Taglib是可以帶來效率的提高的