小編說(shuō)學(xué)Web前端，你弄懂開(kāi)發(fā)型Web前端和設(shè)計(jì)型Web前端的區(qū)別了嗎?今天千鋒廣州小編給大家梳理一下設(shè)計(jì)型Web前端做什么?都要學(xué)習(xí)什么?

想必大家也會(huì)遇到這種情況，要做一個(gè)項(xiàng)目，產(chǎn)品經(jīng)理說(shuō)產(chǎn)品原型圖已經(jīng)畫好了，讓我們?nèi)フ乙幌滤夭?#xff0c;調(diào)一下顏色，看一下像素，把這個(gè)原型圖整體裝飾美化一番，然后就把我們叫做美工。

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

其實(shí)設(shè)計(jì)師是在改善產(chǎn)品的表征，同時(shí)在把更多的產(chǎn)品信息傳遞給用戶，通過(guò)不同元素的排列布局把產(chǎn)品的核心價(jià)值傳遞給用戶。

設(shè)計(jì)師應(yīng)該把自己和產(chǎn)品經(jīng)理一樣當(dāng)成需求方，而不是執(zhí)行者。用設(shè)計(jì)的語(yǔ)言展示產(chǎn)品需求，使老板看起來(lái)更直觀，讓技術(shù)不用過(guò)多的看產(chǎn)品文檔就能明白。只有這樣，才能讓其他環(huán)節(jié)對(duì)你更加尊重，愿意傾聽(tīng)你對(duì)產(chǎn)品的建議。

今天千鋒廣州小編就來(lái)說(shuō)說(shuō)前端設(shè)計(jì)的那些事兒：

什么是前端

設(shè)計(jì)就是呈現(xiàn)的過(guò)程，前端設(shè)計(jì)是通過(guò)色彩/構(gòu)圖/等元素賦予頁(yè)面性格和特點(diǎn)，前端也是展現(xiàn)，通過(guò)色彩先抓住自己的目標(biāo)人群，通過(guò)設(shè)計(jì)表現(xiàn)自己。

當(dāng)然這僅僅是是web前端設(shè)計(jì)的一部分而已，這被成為-界面設(shè)計(jì)。WEB前端設(shè)計(jì)實(shí)際上是網(wǎng)頁(yè)制作 ，經(jīng)過(guò)web1.0進(jìn)入web2.0之后網(wǎng)站的前端由此發(fā)生了翻天覆地的變化，網(wǎng)頁(yè)不再只是承載單一的文字和圖片,它除了設(shè)計(jì)還要掌握開(kāi)發(fā)技術(shù)，如：HTML、CSS和JavaScript等。

Web前端設(shè)計(jì)主要分為5個(gè)步驟：

1.看需求;

2.畫草圖;

3.設(shè)計(jì)界面;

4.前端代碼編寫;

5.兼容性調(diào)試。

當(dāng)然事情并不絕對(duì)，除了必要的步驟之外還有一些細(xì)節(jié)需要去做，設(shè)計(jì)前與產(chǎn)品經(jīng)理，視覺(jué)分析師，體驗(yàn)師溝通。設(shè)計(jì)定稿后，就是和后臺(tái)程序員，測(cè)試工程師溝通，并反復(fù)調(diào)試。

扁平化VS擬物化

扁平化與擬物化，作為設(shè)計(jì)師現(xiàn)在必然要知道的兩個(gè)詞，那么他們本身都有什么樣的優(yōu)缺點(diǎn)呢?

1、 什么扁平和擬物設(shè)計(jì)

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

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

?2、 扁平化與擬物化的優(yōu)缺點(diǎn)

扁平化設(shè)計(jì)單獨(dú)設(shè)計(jì)起來(lái)更容易，突出內(nèi)容主題，減弱各種漸變、陰影、高光等視覺(jué)效果對(duì)用戶視線的干擾，讓用戶更加專注于內(nèi)容本身，并且容易統(tǒng)一設(shè)計(jì)風(fēng)格，調(diào)整設(shè)計(jì)方案更加方便。而現(xiàn)在手機(jī)平板電腦“橫行”的今天，扁平化設(shè)計(jì)更能支持手勢(shì)交互，而且它占用系統(tǒng)空間相對(duì)較少。

擬物化設(shè)計(jì)更適合初級(jí)人員了來(lái)做，這并不表示擬物化設(shè)計(jì)簡(jiǎn)單，而正是因?yàn)樗膹?fù)雜所以更適合初級(jí)人員來(lái)做，可以讓設(shè)計(jì)人員短時(shí)間內(nèi)熟悉各種效果的實(shí)現(xiàn)，更好掌握色彩搭配等。并且擬物化設(shè)計(jì)認(rèn)知和學(xué)習(xí)成本低，更能直接的表現(xiàn)出想表現(xiàn)的事物。

相對(duì)于它們的優(yōu)點(diǎn)多多，它們的缺點(diǎn)卻是一目了然。擬物化設(shè)計(jì)更傾向于視覺(jué)效果，功能實(shí)現(xiàn)很少。扁平化所能承載的信息量太少，會(huì)提高用戶的學(xué)習(xí)成本。

前端設(shè)計(jì)如何規(guī)范?

前端設(shè)計(jì)當(dāng)然應(yīng)該規(guī)范，原因是：

1、為了信息加載更快。

2、有利于后期調(diào)適和修改

3、有利項(xiàng)目二次開(kāi)發(fā)。

4、有利于項(xiàng)目交接。

那么前端設(shè)計(jì)應(yīng)該如何規(guī)范呢?

1、最基本的就是代碼規(guī)范，整齊、簡(jiǎn)潔的代碼規(guī)范更方便后期調(diào)試和修改，也方便重用。

2、樣式素材歸類規(guī)范，養(yǎng)成好的素材歸類習(xí)慣，也是設(shè)計(jì)規(guī)范的一種。

設(shè)計(jì)師應(yīng)該從什么角度考慮用戶體驗(yàn)

一直以來(lái)產(chǎn)品的設(shè)計(jì)都是在討好用戶，或者說(shuō)是讓用戶知道什么是適合他的設(shè)計(jì)，那么我們要從哪些角度讓用戶知道這些呢?總體來(lái)說(shuō)大致可以分為兩種，一種是視覺(jué)上給予用戶滿足，另一種則是在流程引導(dǎo)上下功夫。

細(xì)致說(shuō)來(lái)可以分為以下幾點(diǎn)：

1、 符合產(chǎn)品特點(diǎn)的視覺(jué)呈現(xiàn)，并把自己代入用戶場(chǎng)景和角色設(shè)計(jì)布局(地鐵中右手使用手機(jī)等)。

2、 突出的，利于使用的視覺(jué)交互體驗(yàn)。

3、 用戶對(duì)產(chǎn)品功能不清晰的情況下，通過(guò)視覺(jué)表現(xiàn)合理的引導(dǎo)整個(gè)使用的流程。

千鋒廣州小編總結(jié)來(lái)說(shuō)就是在視覺(jué)上引導(dǎo)和取悅用戶，在元素布局上讓用戶使用方便。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。