想必大家也會(huì)遇到這種情況，要做一個(gè)項(xiàng)目，產(chǎn)品經(jīng)理說產(chǎn)品原型圖已經(jīng)畫好了，讓我們?nèi)フ乙幌滤夭模{(diào)一下顏色，看一下像素，把這個(gè)原型圖整體裝飾美化一番，然后就把我們叫做美工。我很不喜歡這種稱呼也很反對(duì)這種看法，其實(shí)像我們這種前端設(shè)計(jì)師應(yīng)該成為懂美術(shù)和用戶體驗(yàn)的產(chǎn)品經(jīng)理，即時(shí)是裝飾美化也要注入產(chǎn)品的靈魂和思想在里面。

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

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

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

而擬物化正好相反，

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

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

扁平化設(shè)計(jì)單獨(dú)設(shè)計(jì)起來更容易，突出內(nèi)容主題，減弱各種漸變、陰影、高光等視覺效果對(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í)人員了來做，這并不表示擬物化設(shè)計(jì)簡(jiǎn)單，而正是因?yàn)樗膹?fù)雜所以更適合初級(jí)人員來做，可以讓設(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ì)更傾向于視覺效果，功能實(shí)現(xiàn)很少。扁平化所能承載的信息量太少，會(huì)提高用戶的學(xué)習(xí)成本。

三、前端設(shè)計(jì)應(yīng)不應(yīng)該規(guī)范？如何規(guī)范？

這個(gè)問題拋出來就被群友吐槽說：“如果不該規(guī)范，那要第二個(gè)問題干嘛？”。好吧就當(dāng)主持人提了一個(gè)弱智問題吧…

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

１、為了信息加載更快。

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

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

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

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

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

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

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

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

細(xì)致說來可以分為以下幾點(diǎn)：

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

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

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

總結(jié)來說就是在視覺上引導(dǎo)和取悅用戶，在元素布局上讓用戶使用方便。

五、前端設(shè)計(jì)如何成為產(chǎn)品經(jīng)理？

看到這里的時(shí)候各位看官請(qǐng)不要著急噴我，這一問題僅針對(duì)想要從設(shè)計(jì)轉(zhuǎn)行產(chǎn)品的各位同學(xué)，如果還是對(duì)前端設(shè)計(jì)很是熱愛的同學(xué)可以自動(dòng)忽視，造成不便盡請(qǐng)諒解。

言盡于此，歸入正題。

要想轉(zhuǎn)行首先設(shè)計(jì)師應(yīng)該把自己和產(chǎn)品經(jīng)理一樣當(dāng)成需求方，而不是執(zhí)行者。這點(diǎn)至關(guān)重要，設(shè)計(jì)人員和產(chǎn)品經(jīng)理最大的不同是思維，因?yàn)樵谧鍪碌臅r(shí)候角色不同，思維模式必然不同，也就是之前說到的需求方和執(zhí)行者，一個(gè)是被動(dòng)接收信息，一個(gè)是主動(dòng)推送（或者說發(fā)起）信息。只有從根本上轉(zhuǎn)變了思維才能開始這場(chǎng)蛻變、

設(shè)計(jì)師轉(zhuǎn)為產(chǎn)品還是有其優(yōu)勢(shì)的，畢竟用設(shè)計(jì)的語(yǔ)言展示產(chǎn)品需求，使老板看起來更直觀，讓技術(shù)不用過多的看產(chǎn)品文檔就能明白。因?yàn)榍岸烁嗟臅r(shí)間用在頁(yè)面設(shè)計(jì)上，對(duì)布局這類了解更深，對(duì)用戶體驗(yàn)要強(qiáng)與在職的部分產(chǎn)品經(jīng)理。

而短板也很明顯，設(shè)計(jì)師更多在意的是界面方面，而產(chǎn)品跟多的要分析業(yè)務(wù)流程、商業(yè)化、功能邏輯這些。工作是分工很明確，但是轉(zhuǎn)職的時(shí)候欠缺的地方也是很明確的，如何轉(zhuǎn)？答案就在欠缺的那一部分。

在不拋棄自己優(yōu)勢(shì)的情況下，由表現(xiàn)形式逆推理至業(yè)務(wù)邏輯，這是我對(duì)設(shè)計(jì)轉(zhuǎn)產(chǎn)品的同學(xué)們的一點(diǎn)建議。

特別鳴謝，提綱提供者：唐-PT-成都、小驢-交互-杭州兩位同學(xué)的精心撰寫，以及唐-PT-成都的討論主持。

另，標(biāo)注：

此文檔為人人都是產(chǎn)品經(jīng)理社區(qū)3群討論總結(jié)，由喵了咪編輯整理，轉(zhuǎn)載請(qǐng)注明原文鏈接。

感謝各位童鞋參加討論（排名不分先后）：

師妹-學(xué)習(xí)-杭州、鑫-設(shè)計(jì)師-北京、喵了咪-PA-北京、唐-PT-成都、sharon-PM-北京、有關(guān)部門-PM-上海、李玄月-PM-杭州、博雅—PM-深圳、香水-UI-滬、兔子-PM-南京、暄顏-產(chǎn)品-杭州、咖啡-設(shè)計(jì)-上海、妖孽-學(xué)習(xí)-北京、絕跡-助理-貴陽(yáng)、DT-PM-北京、騎狼d羊-PM-成都、小濕D-打雜-廈門、keiven-專員-廣州、夏陽(yáng)-UI-深圳、米拉-產(chǎn)品-浙江、待業(yè)-pm-深圳、三點(diǎn)-PM-川都、Jesse-學(xué)生－上海、大肚熊-PM-常州、zumin-產(chǎn)品-北京、Thik-PM-深圳。