網頁設計一般包含整站網頁視覺方案,提供PSD或PNG格式的主要頁面預覽圖,高級一點的還會給出標準配色表,風格設計指南(內含一般性風格設計規格:設計理念,留白間距,按鈕樣式,使用場景)等附件。大公司一般還有交互設計師,主要關注人機界面的易用性和用戶友好性。
前端開發簡單來說就是負責將網頁設計和互動設計的方案轉換為可工作的Html + Css + js文件。
在互聯網行業中, 網頁設計和前端開發是項目中的不同環節。
網頁設計一般指交互設計和視覺設計, 他們負責將商業需求轉化為 Web 解決方案, 最終產物是交互稿和視覺稿, 分別用于說明網頁的外觀和 actions. 而前端開發則是通過交互稿, 視覺稿, 將預期的效果實現出來, 最終產物是 HTML Demo, 包括 HTML, CSS, Javascript 代碼。(但據三點共圓所知, 有些公司的 CSS 和 Javascript 開發也是分開的, 比如騰訊。)
前端開發,需要涉及ajax交互,需要改變頁面顯示,復雜的ajax應用需要涉及很多模塊的劃分、業務邏輯的考慮,在ajax應用越來越成熟強大的今天,很多過去后端處理的業務邏輯工作也慢慢放在了用戶的瀏覽器上來完成,這些工作也就交給前端工程師來做了。
如果根據明確分工的話,前端開發不包含ui設計部分,主要工作在于切圖、制作靜態頁面、制作特效、jq、ajax、與后臺程序結合部分。
大家所認為的前端開發工作主要在于UI設計和用戶體驗。三點共圓向客戶提供的前端開發內容包括:UI設計,axure交互文檔,靜態頁面制作,css3 動畫和jq動畫。最終提供的成品文件包括:img、css、js、html、icon、font。至于與后臺程序結合的工作則可以不負責。
最后給大家聊聊在學習Web前端中的一些建議和方法。
在CSS布局時需要注意的一個問題是很多同學缺乏對頁面布局進行整體分析,不能夠從宏觀上對頁面中盒子間的嵌套關系進行把握,就急于動手去做,導致頁面中各元素間的關系很混亂,容易出現盒子在浮動時錯位等情況。建議大家在布局時采用“自頂向下,逐步細化”的思想,先用幾個盒子將頁面從整體上劃分,然后逐步在盒子中繼續嵌套盒子。
“君子生非異也,善假于物也”,在學習的過程中還要多瀏覽一些優秀的網站,善于分析借鑒其設計思路和布局方法,見多方能識廣,進而才可以融會貫通,取他人之長為我所用。
同時還要善于使用Firebug這個利器。Firebug一方面可以在我們學習過程中幫助我們調試自己的頁面,另一方面我們可以使用Firebug方便地查看、分析別人網站的源代碼,“偷”也是一種技能!
隨著移動互聯網熱潮的到來,移動開發越來越受到大家的追捧,響應式布局、微網站等需求量不斷增加,也是我們Web前端未來的發展方向之一,學有余力的同學可以多多關注。最后祝愿大家能在Web前端開發道路上走出一片更寬更廣的天地!