新媒體視覺(jué)設(shè)計(jì)第2章新媒體視覺(jué)設(shè)計(jì)準(zhǔn)備工作課件

1、第2章 新媒體視覺(jué)設(shè)計(jì)準(zhǔn)備工作 明確用戶需求分析競(jìng)爭(zhēng)對(duì)手CONTENTS目錄2.12.22.32.4完成設(shè)計(jì)草案確定設(shè)計(jì)風(fēng)格 新媒體視覺(jué)設(shè)計(jì)的準(zhǔn)備工作分析用戶需求，可以明確設(shè)計(jì)方向；分析競(jìng)爭(zhēng)對(duì)手，可以取長(zhǎng)補(bǔ)短，避免同質(zhì)化；在此基礎(chǔ)上，確定符合目標(biāo)用戶需求，但不與競(jìng)爭(zhēng)對(duì)手重復(fù)的設(shè)計(jì)理念，然后，利用情緒板工具，完成設(shè)計(jì)草案。 2.1 明確用戶需求 2.1 明確用戶需求一個(gè)用戶說(shuō)，我現(xiàn)在需要一個(gè)饅頭。這時(shí)最好的方法并不是給用戶一個(gè)饅頭，因?yàn)槲覀冎肋@里用戶真正的需求是“用戶餓了，想吃東西”，這個(gè)時(shí)候如果你提供一個(gè)雞腿給用戶，大部分用戶都會(huì)更加高興。簡(jiǎn)約至上 2.1 明確用戶需求在明確用戶需求時(shí)，可以

2、借助 KANO 模型，KANO 模型是東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)發(fā)明的對(duì)用戶需求分類和優(yōu)先排序的有用工具，以分析用戶需求對(duì)用戶滿意的影響為基礎(chǔ)，體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系。 根據(jù)不同類型的質(zhì)量特性與顧客滿意度之間的關(guān)系，狩野教授將產(chǎn)品服務(wù)的質(zhì)量特性分為五類：基本(必備)型需求Must-be Quality/Basic Quality期望（意愿）型需求One-dimensional Quality/Performance Quality興奮（魅力）型需求Attractive Quality/Excitement Quality無(wú)差異型需求Indiffere

3、nt Quality/Neutral Quality反向（逆向）型需求Reverse Quality 2.1 明確用戶需求用戶并不知道自己真正的需求，一旦我們能夠提供超出用戶預(yù)期的設(shè)計(jì)，就會(huì)大大增加用戶滿意度。 2.2 分析競(jìng)爭(zhēng)對(duì)手 2.2 分析競(jìng)爭(zhēng)對(duì)手競(jìng)品分析，顧名思義就是對(duì)競(jìng)爭(zhēng)對(duì)手的產(chǎn)品進(jìn)行分析，因?yàn)楫a(chǎn)品的內(nèi)容極其相似，所以如果是市場(chǎng)上已有的產(chǎn)品，就可以分析相似的設(shè)計(jì)、相似的產(chǎn)品。這里的競(jìng)品分析指的是視覺(jué)上的競(jìng)品分析，競(jìng)品分析會(huì)使設(shè)計(jì)方向更有理論依據(jù)、不偏不倚。 2.2 分析競(jìng)爭(zhēng)對(duì)手在獲取競(jìng)品的時(shí)候，可以利用新榜（）中的新媒體（包括微信、微博、頭條等各大主流新媒體平臺(tái)）排行榜，查看本行業(yè)排

4、名靠前的新媒體品牌如何進(jìn)行視覺(jué)設(shè)計(jì)（如圖 2-2 所示），然后，可以在設(shè)計(jì)理念、色彩、插圖、字體、有無(wú)動(dòng)態(tài)效果等不同維度尋找差異化。 2.3 確定設(shè)計(jì)風(fēng)格 2.3 確定設(shè)計(jì)風(fēng)格設(shè)計(jì)風(fēng)格是設(shè)計(jì)師在構(gòu)思過(guò)程中所確立的主導(dǎo)思想，它賦予了設(shè)計(jì)內(nèi)涵和風(fēng)格特點(diǎn)。合適的設(shè)計(jì)風(fēng)格至關(guān)重要，它不僅是設(shè)計(jì)的精髓所在，而且能令作品具有個(gè)性化、專業(yè)化和與眾不同的效果。藝術(shù)家 Marco Marilungo 用漫畫的形式將人類藝術(shù)史上最主要的 16 種風(fēng)格生動(dòng)形象地展現(xiàn)了出來(lái)。 2.3 確定設(shè)計(jì)風(fēng)格這 16 種風(fēng)格中的一部分在新媒體視覺(jué)設(shè)計(jì)中應(yīng)用非常廣泛，比如現(xiàn)實(shí)主義、印象主義、立體主義、波普藝術(shù)、極簡(jiǎn)藝術(shù)等，而另一些

5、因?yàn)檫^(guò)于抽象，在新媒體視覺(jué)設(shè)計(jì)中相對(duì)少見，比如抽象主義、非正式藝術(shù)、觀念主義等。伴隨著新技術(shù)的誕生和社會(huì)文化的發(fā)展，新媒體視覺(jué)設(shè)計(jì)實(shí)踐中還誕生了一些全新的設(shè)計(jì)風(fēng)格，比如蒸汽波藝術(shù)、三維渲染藝術(shù)等等。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析現(xiàn)實(shí)主義關(guān)注還原現(xiàn)實(shí)，一般具有極強(qiáng)的逼真程度，所以也可以稱之為寫實(shí)風(fēng)格，寫實(shí)風(fēng)格關(guān)注細(xì)節(jié)，非常重視細(xì)節(jié)的還原程度。比如錘子手機(jī)的 UI 設(shè)計(jì)采用的就是寫實(shí)風(fēng)格，非常精美：1. 現(xiàn)實(shí)主義（寫實(shí)風(fēng)格） 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析為了保持統(tǒng)一的設(shè)計(jì)理念和嚴(yán)苛的美學(xué)標(biāo)準(zhǔn)，甚至重新繪制了以扁平化風(fēng)格為主的第三方應(yīng)用圖標(biāo)：1. 現(xiàn)實(shí)主義（寫實(shí)風(fēng)格） 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐

6、解析20 世紀(jì) 60 年代，在包豪斯運(yùn)動(dòng)的影響下，極簡(jiǎn)主義開始出現(xiàn)，現(xiàn)在，極簡(jiǎn)主義已成為當(dāng)今主流的藝術(shù)風(fēng)格之一。極簡(jiǎn)主義風(fēng)格以簡(jiǎn)單到極致為追求，感官上簡(jiǎn)約整潔，品味和思想上更為優(yōu)雅。極簡(jiǎn)主義關(guān)鍵詞是理性、簡(jiǎn)潔、干凈。極簡(jiǎn)主義設(shè)計(jì)的風(fēng)格包括摒棄復(fù)雜，只使用基本元素、大量留白、色彩、字體都很簡(jiǎn)單。2. 極簡(jiǎn)主義 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析2. 極簡(jiǎn)主義 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析旅行類公眾號(hào)“24HOURS”、營(yíng)銷類公眾號(hào)“休克文案”、情感類公眾號(hào)“我要 WhatYouNeed”等都是采用極簡(jiǎn)風(fēng)格的設(shè)計(jì)?；瘖y品牌 HomeFacialPro 的公眾號(hào)也非常好地詮釋了極簡(jiǎn)主義的設(shè)計(jì)風(fēng)格，和品

7、牌簡(jiǎn)單、有效的定位非常契合。2. 極簡(jiǎn)主義 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析3. 印象主義（像素藝術(shù)）大多數(shù)人接觸到“像素化”圖像應(yīng)該要追溯到玩小霸王游戲機(jī)那個(gè)年代了。但其實(shí)如果把“像素化”放在藝術(shù)領(lǐng)域去講，最早可以追溯到 19 世紀(jì) 80 年代的點(diǎn)彩派。點(diǎn)彩派不用輪廓線劃分形象，而用點(diǎn)狀的小筆觸，通過(guò)合乎科學(xué)的光色規(guī)律的并置，讓無(wú)數(shù)小色點(diǎn)在觀者視覺(jué)中混合，從而構(gòu)成色點(diǎn)組成的形象。之后的藝術(shù)家用電腦繪制類似的圖像被稱為像素藝術(shù)。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析3. 印象主義（像素藝術(shù)）美妝類公眾號(hào)鯨魚顏習(xí)會(huì)在封面設(shè)計(jì)時(shí)，部分采用了像素風(fēng)格。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析4. 波譜藝術(shù)波普藝術(shù)在

8、 20 世紀(jì) 50 年代中期誕生于英國(guó)，它反對(duì)一切虛無(wú)主義思想，通過(guò)塑造那些夸張的、視覺(jué)感強(qiáng)的、比現(xiàn)實(shí)生活更典型的形象來(lái)表達(dá)一種實(shí)實(shí)在在的寫實(shí)主義。和孟菲斯風(fēng)格的起源類似，都是因?yàn)榍嗄晁囆g(shù)家們對(duì)于風(fēng)格單調(diào)、冷漠、抽象的現(xiàn)代主義感到厭倦、反感，渴望從希望有新的設(shè)計(jì)風(fēng)格表現(xiàn)自我，于是在英國(guó)青年設(shè)計(jì)家中出現(xiàn)了波普設(shè)計(jì)運(yùn)動(dòng)。所以波普藝術(shù)和孟菲斯有很多的相似性，比如注重形式主義、色彩飽和度高而且顏色豐富、主要的表現(xiàn)形式是圖形。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析4. 波譜藝術(shù)情感大號(hào)“我走路帶風(fēng)”采用的就是波普風(fēng)格的設(shè)計(jì)，非常有趣： 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析5. 孟菲斯藝術(shù)孟菲斯藝術(shù)風(fēng)格最早形成于 1

9、981 年，是由一群意大利籍家具設(shè)計(jì)師探索出來(lái)的一種裝飾藝術(shù)的設(shè)計(jì)風(fēng)格。他們反對(duì)單調(diào)冷峻的現(xiàn)代主義，提倡裝飾，強(qiáng)調(diào)手工藝方法制作的產(chǎn)品，并積極從波普藝術(shù)、東方藝術(shù)、非洲拉美的傳統(tǒng)藝術(shù)中尋求靈感。孟菲斯藝術(shù)風(fēng)格在色彩上，常常打破配色規(guī)律，喜歡用一些靚麗、純度高、大膽、對(duì)比強(qiáng)烈的配色。在排版上，元素之間沒(méi)有過(guò)多的聯(lián)系，但是要做到“形散神不散”，構(gòu)圖上一定要保持平衡。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析5. 孟菲斯藝術(shù)孟菲斯藝術(shù)風(fēng)格另一個(gè)很明顯的特點(diǎn)，就是運(yùn)用大量的幾何元素。規(guī)則的幾何圖形有圓形、三角形、矩形、圓環(huán)、波浪線、網(wǎng)格、斜杠等等，不規(guī)則的幾何圖形也是由點(diǎn)、線、面拼貼而成。知乎、陌陌、有道翻譯官

10、等知名互聯(lián)網(wǎng)企業(yè)在廣告中都嘗試過(guò)孟菲斯藝術(shù)風(fēng)格。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析故障藝術(shù)的流行和進(jìn)入學(xué)術(shù)討論大概是在 2010 年以后，是指利用事物形成的故障，進(jìn)行藝術(shù)加工，使這種故障缺陷反而成為一種藝術(shù)品，具有特殊的美感。故障藝術(shù)最常見的就是電視機(jī)、電腦出現(xiàn)問(wèn)題后產(chǎn)生的破碎、有缺陷、顏色失真的圖像。6. 故障藝術(shù)媒體藝術(shù)之父白南淮創(chuàng)作的故障藝術(shù)風(fēng)格的作品 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析故障藝術(shù)在國(guó)內(nèi)的走紅主要?dú)w功于抖音。抖音爆紅后，許多設(shè)計(jì)師開始關(guān)注并模仿這種風(fēng)格，導(dǎo)致故障風(fēng)的設(shè)計(jì)泛濫。6. 故障藝術(shù) 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析6. 故障藝術(shù) 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析故障藝術(shù)的制作

11、非常簡(jiǎn)單，使用 PhotoMosh 等一鍵生成故障藝術(shù)的工具，直接把圖片拖拽進(jìn)工具即可。6. 故障藝術(shù) 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析插畫風(fēng)格在設(shè)計(jì)領(lǐng)域的應(yīng)用非常廣泛，包括扁平插畫、手繪插畫、MBE 插畫（由法國(guó)設(shè)計(jì)師 MBE 于 2015 年年底在 Dribbble 網(wǎng)站上發(fā)布而走紅、立體插畫等多種不同的表現(xiàn)形式。7. 插畫風(fēng)格 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析7. 插畫風(fēng)格許多公眾號(hào)的視覺(jué)設(shè)計(jì)都采用了插畫風(fēng)格，特別是主打年輕人和女性群體的公眾號(hào)。比如，公眾號(hào)行動(dòng)派采用了扁平化插畫風(fēng)格。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析7. 插畫風(fēng)格公眾號(hào)咪蒙、UC校園、姜汁滿頭等采用了手繪插畫風(fēng)格： 2.3

12、新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析8. 賽博朋克風(fēng)格賽博朋克是科幻小說(shuō)的一個(gè)分支，有著強(qiáng)烈的反烏托邦和悲觀主義色彩。今天賽博朋克經(jīng)常以隱喻義出現(xiàn)，反映了人們對(duì)于大公司企業(yè)、政府腐敗及社會(huì)疏離現(xiàn)象的擔(dān)憂。一些賽博朋克作家試圖通過(guò)他們的作品，警示人們社會(huì)依照如今的趨勢(shì)將來(lái)可能的樣子。因此，賽博朋克作品寫作的目的是號(hào)召人們來(lái)改變社會(huì)。賽博朋克風(fēng)格以藍(lán)、紫、青等冷色調(diào)為主色調(diào)，霓虹燈光感效果和故障藝術(shù)風(fēng)為輔助（圖像的失真、錯(cuò)位、破碎等），有時(shí)還可以加一些異常的現(xiàn)象比如180 度翻轉(zhuǎn)的建筑，還有復(fù)古風(fēng)和未來(lái)風(fēng)并存。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析8. 賽博朋克風(fēng)格常見的元素有黑客、數(shù)字空間、虛擬現(xiàn)實(shí)、人工智能、控制

13、論與電腦生化、都市擴(kuò)張與貧民窟、大型企業(yè)、基因工程、毒品和生化、恐怖主義。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析9. 蒸汽波藝術(shù)蒸汽波風(fēng)格興起于 2010 年初期，是一種受賽博朋克影響的網(wǎng)絡(luò)線上藝術(shù)，主要采用拼接的方式制作，用于拼接的元素主要來(lái)自 80、90 年代流行文化的產(chǎn)物，比如，Windows95 的界面、老版的 IE 瀏覽器、石膏雕塑等。 2.3 新媒體視覺(jué)設(shè)計(jì)實(shí)踐解析9. 蒸汽波藝術(shù)人人車在春節(jié)前夕推出了一支 H5，故事的內(nèi)容可以歸納為一個(gè)青年在春節(jié)被親戚盤問(wèn)，最終選擇尬舞唱歌讓親戚別擔(dān)心。除了故事內(nèi)容外，H5 的風(fēng)格則比較特殊，一開始的親戚對(duì)峙采用了故障藝術(shù)風(fēng)格游的游戲交互，后面的 MV

14、 則充滿粗顆粒、復(fù)古科技的熱鬧。 H5 整體采用賽博朋克式蒸汽波風(fēng)格，超現(xiàn)實(shí)的畫面風(fēng)格對(duì)撞現(xiàn)實(shí)的春節(jié)親戚，形成了一種奪人眼球的對(duì)撞感。H5 開頭用故障藝術(shù)的動(dòng)效、電腦對(duì)話框與第一視角鏡頭，做足虛擬現(xiàn)實(shí)結(jié)合的游戲感氛圍。MV 部分男主搭配音樂(lè)唱跳，背景拼貼復(fù)古的霓虹、游戲像素、迷幻萬(wàn)花筒、粗顆粒畫質(zhì)視頻。短短一分多鐘，唱了整整 20 個(gè)“別擔(dān)心”，還搭配了極其洗腦的推掌動(dòng)作與鼓點(diǎn)節(jié)奏。 2.4 完成設(shè)計(jì)草案 2.4 完成設(shè)計(jì)草案完成設(shè)計(jì)草案設(shè)計(jì)草案時(shí)，可以運(yùn)用情緒板方法。它誕生于 20 世紀(jì)的非信息時(shí)代，參與者被要求從日常的報(bào)紙雜志中挑選出符合某種心情意境的圖片，剪下來(lái)粘貼在一起。現(xiàn)在的設(shè)計(jì)中，也會(huì)運(yùn)用到這類方法。 2.4 完成設(shè)計(jì)草案 2.4 完成設(shè)計(jì)草案第一步要確定設(shè)計(jì)