小編說學Web前端，你弄懂開發型Web前端和設計型Web前端的區別了嗎?今天千鋒廣州小編給大家梳理一下設計型Web前端做什么?都要學習什么?

想必大家也會遇到這種情況，要做一個項目，產品經理說產品原型圖已經畫好了，讓我們去找一下素材，調一下顏色，看一下像素，把這個原型圖整體裝飾美化一番，然后就把我們叫做美工。

千鋒廣州小編也很不喜歡這種稱呼也很反對這種看法，其實像我們這種前端設計師應該成為懂美術和用戶體驗的產品經理，即時是裝飾美化也要注入產品的靈魂和思想在里面。

其實設計師是在改善產品的表征，同時在把更多的產品信息傳遞給用戶，通過不同元素的排列布局把產品的核心價值傳遞給用戶。

設計師應該把自己和產品經理一樣當成需求方，而不是執行者。用設計的語言展示產品需求，使老板看起來更直觀，讓技術不用過多的看產品文檔就能明白。只有這樣，才能讓其他環節對你更加尊重，愿意傾聽你對產品的建議。

今天千鋒廣州小編就來說說前端設計的那些事兒：

什么是前端

設計就是呈現的過程，前端設計是通過色彩/構圖/等元素賦予頁面性格和特點，前端也是展現，通過色彩先抓住自己的目標人群，通過設計表現自己。

當然這僅僅是是web前端設計的一部分而已，這被成為-界面設計。WEB前端設計實際上是網頁制作 ，經過web1.0進入web2.0之后網站的前端由此發生了翻天覆地的變化，網頁不再只是承載單一的文字和圖片,它除了設計還要掌握開發技術，如：HTML、CSS和JavaScript等。

Web前端設計主要分為5個步驟：

1.看需求;

2.畫草圖;

3.設計界面;

4.前端代碼編寫;

5.兼容性調試。

當然事情并不絕對，除了必要的步驟之外還有一些細節需要去做，設計前與產品經理，視覺分析師，體驗師溝通。設計定稿后，就是和后臺程序員，測試工程師溝通，并反復調試。

扁平化VS擬物化

扁平化與擬物化，作為設計師現在必然要知道的兩個詞，那么他們本身都有什么樣的優缺點呢?

1、 什么扁平和擬物設計

扁平化設計(Flat design)完全屬于二次元，這個概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都干凈利落，沒有任何羽化，漸變，或者陰影。

而擬物設計(Skeuomorph)正好相反，他需要加入各種元素的效果，通過不同的效果組合達到模擬要呈現物件外觀的目的，以使新的外觀讓人感覺熟悉和親切。

?2、 扁平化與擬物化的優缺點

扁平化設計單獨設計起來更容易，突出內容主題，減弱各種漸變、陰影、高光等視覺效果對用戶視線的干擾，讓用戶更加專注于內容本身，并且容易統一設計風格，調整設計方案更加方便。而現在手機平板電腦“橫行”的今天，扁平化設計更能支持手勢交互，而且它占用系統空間相對較少。

擬物化設計更適合初級人員了來做，這并不表示擬物化設計簡單，而正是因為它的復雜所以更適合初級人員來做，可以讓設計人員短時間內熟悉各種效果的實現，更好掌握色彩搭配等。并且擬物化設計認知和學習成本低，更能直接的表現出想表現的事物。

相對于它們的優點多多，它們的缺點卻是一目了然。擬物化設計更傾向于視覺效果，功能實現很少。扁平化所能承載的信息量太少，會提高用戶的學習成本。

前端設計如何規范?

前端設計當然應該規范，原因是：

1、為了信息加載更快。

2、有利于后期調適和修改

3、有利項目二次開發。

4、有利于項目交接。

那么前端設計應該如何規范呢?

1、最基本的就是代碼規范，整齊、簡潔的代碼規范更方便后期調試和修改，也方便重用。

2、樣式素材歸類規范，養成好的素材歸類習慣，也是設計規范的一種。

設計師應該從什么角度考慮用戶體驗

一直以來產品的設計都是在討好用戶，或者說是讓用戶知道什么是適合他的設計，那么我們要從哪些角度讓用戶知道這些呢?總體來說大致可以分為兩種，一種是視覺上給予用戶滿足，另一種則是在流程引導上下功夫。

細致說來可以分為以下幾點：

1、 符合產品特點的視覺呈現，并把自己代入用戶場景和角色設計布局(地鐵中右手使用手機等)。

2、 突出的，利于使用的視覺交互體驗。

3、 用戶對產品功能不清晰的情況下，通過視覺表現合理的引導整個使用的流程。

千鋒廣州小編總結來說就是在視覺上引導和取悅用戶，在元素布局上讓用戶使用方便。

總結

以上是生活随笔為你收集整理的前端交接文档_开发型Web前端和设计型Web前端的区别是什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。