學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、用戶對產品功能不清晰的情況下，通過視覺表現合理的引導整個使用的流程。
總結來說就是在視覺上引導和取悅用戶，在元素布局上讓用戶使用方便。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/129021.html
標籤：非技術區
上一篇：萌新求帶