平面設(shè)計(jì)未來趨勢發(fā)展

01、設(shè)計(jì)能開拓新市場

企業(yè)的運(yùn)營和管理者越來越意識(shí)到，設(shè)計(jì)師們可以利用他們的才華去創(chuàng)造機(jī) 會(huì)、解決問題，甚至是開發(fā)新的市場。所以在我們這里，他們是可以游走在公司規(guī)則之外的一群人。

02、設(shè)計(jì)的界限一定會(huì)消失

在未來的五年，傳統(tǒng)的平面設(shè)計(jì)師、UI 設(shè)計(jì)師和技術(shù)人員之間的界限會(huì)逐 漸模糊、以至于消失。Jony Ive 就接管了蘋果的產(chǎn)品設(shè)計(jì)，今后這一類跨界一定會(huì)變得越來越多。這也意味著，對(duì)設(shè)計(jì)師來說跨平臺(tái)設(shè)計(jì)的能力變得 越來越重要。尋找結(jié)合點(diǎn)變得很關(guān)鍵。

03、產(chǎn)品設(shè)計(jì)會(huì)影響到使用者的空間感

一提到智能設(shè)備，人們想起的就是生產(chǎn)運(yùn)動(dòng)記錄器的 Fitbit 或是智能溫控 器制造商 Nest 。我們都知道，單單把電路板接到網(wǎng)絡(luò)里是無法創(chuàng)造出“聰明”的產(chǎn)品的。你的產(chǎn)品如何設(shè)計(jì)，將直接影響到用戶的體驗(yàn)，甚至影響到 用戶的空間感。

04、自學(xué)成才的設(shè)計(jì)師會(huì)逐漸增多

自學(xué)成才的設(shè)計(jì)師人數(shù)將超過各大院校設(shè)計(jì)專業(yè)的學(xué)生。審美和技術(shù)是在不 斷進(jìn)步的，大學(xué)里的教學(xué)課程已經(jīng)跟不上它的步伐。記住，要時(shí)刻的保持自我更新。

05、HELLO, CEO

有越來越多設(shè)計(jì)出身的人開始擔(dān)任企業(yè)的 CEO 了，這幾乎成為了一個(gè)趨勢 ，但并不是每位設(shè)計(jì)師都能成功。設(shè)計(jì)專業(yè)讓他們對(duì)產(chǎn)品有良好的判斷，但同時(shí)還需要對(duì)生意有著精準(zhǔn)、全面的理解。

平面廣告軟件應(yīng)用

課程要點(diǎn)

• 數(shù)字影像合成

  PHOTOSHOP圖像處理的基本知識(shí)和基本技能。挖掘工具背 后隱藏的技巧，運(yùn)用軟件進(jìn)行規(guī)范化的設(shè)計(jì)，深入學(xué)習(xí)實(shí)例演練影像特效，數(shù)字成像合成處理，快速處理設(shè)計(jì)中實(shí)際遇到的問題。

• 矢量與排版設(shè)計(jì)

  學(xué)習(xí)使用Coreldraw繪制各種矢量插圖、宣傳彩頁、產(chǎn)品 包裝等效果的制作技巧。

• 矢量圖形設(shè)計(jì)

  學(xué)習(xí)Illustrator圖形與界面設(shè)計(jì)的基本技能，結(jié)合 Photoshop及相關(guān)數(shù)字工具進(jìn)行各種標(biāo)志、廣告、企業(yè)形象設(shè)計(jì)等商業(yè)應(yīng)用。

• 數(shù)位排版設(shè)計(jì)

  學(xué)習(xí)數(shù)位排版Indesign使用方法與技巧，印前制作的流程 ，學(xué)習(xí)印前制作的注意事項(xiàng)。深入學(xué)習(xí)實(shí)例演練商業(yè)印刷品的版面設(shè)計(jì)與制作方法。

• AutoCAD

  建筑施工圖的識(shí)圖與規(guī)范化制圖，使用CAD快速完成平面 圖、立面圖、結(jié)點(diǎn)詳圖等規(guī)范化圖紙的制作。

能力目標(biāo)：熟練掌握平面設(shè)計(jì)軟件應(yīng)用技術(shù)，掌握?qǐng)D像處理，矢量設(shè)計(jì)與排 版設(shè)計(jì)能力。

騰訊美女設(shè)計(jì)師傾囊相授：抄現(xiàn)實(shí)（**集）

---

 

這篇文章是騰訊 TGI 高級(jí)視覺設(shè)計(jì)師晉小彥 一_視覺 寫給設(shè)計(jì)師的系列文章的**篇，從四個(gè)角度全面解讀”抄現(xiàn)實(shí)”的設(shè)計(jì)方法，是作者從大量設(shè)計(jì)工作中總結(jié)的經(jīng)驗(yàn)，通篇都是滿滿當(dāng)當(dāng)?shù)母韶?！或許有一些您可能看到了，但是在聯(lián)展網(wǎng)發(fā)布的文章，作者又有新增內(nèi)容，并且后面幾集您絕對(duì)木有見過喲，絕贊揭秘！請(qǐng)關(guān)注該系列，關(guān)注該妹子吧：）

接下來的連續(xù)五周，每周都會(huì)刊登一集，童鞋們敬請(qǐng)期待唷

晉小彥（騰訊 TGI 高級(jí)視覺設(shè)計(jì)師，美女設(shè)計(jì)師一枚）：抄現(xiàn)實(shí)是我們在設(shè)計(jì)中**直接也是常用的一種方法，它顧名思意就是抄襲現(xiàn)實(shí)中存在的物體。因?yàn)槠浣Y(jié)果直接與主題相關(guān)聯(lián)，所以抄現(xiàn)實(shí)的方法可以讓視覺整體，主題突出。它將抽像的主題**實(shí)體的事物表達(dá)出來，并以之做為內(nèi)容信息的承載體，從而在**視覺上直觀的體現(xiàn)了核心內(nèi)容并突出主題。

這里所指的現(xiàn)實(shí)是任何可以被我們認(rèn)知的可視的物體

 

選擇物，是對(duì)主題視覺表現(xiàn)的選擇。主題有抽像和具像。具像的主題一般比較好把握，如棒球比賽，我們很自然的選擇棒球或球場做為主視覺。如果一些間接或者抽像的主題比如安全選擇盾牌、壓力測試選擇壓力表等，這些都需要我們發(fā)揮一定的想像。

下面我們來一起看看這一顆棒球的網(wǎng)頁變形記。

在還未翻到下一頁前，你可以想像一下，假如這個(gè)棒球是一個(gè)網(wǎng)頁，它會(huì)是什么樣的？你會(huì)保留它的哪些特征讓它看起來依然是一個(gè)棒球而非籃球，你會(huì)如何讓它的形態(tài)和內(nèi)容結(jié)合，你會(huì)如何利用它的形態(tài)關(guān)系使你的內(nèi)容更有層次。給自己一分鐘時(shí)間，不許翻頁劇透。

步驟分解

STEP 1：減法

為了不使形態(tài)干擾到網(wǎng)頁內(nèi)容的表現(xiàn)，通常情況下，我們會(huì)先對(duì)物的形態(tài)進(jìn)行簡化，使其在保留特征的同時(shí)更適合之后內(nèi)容的安置。簡化的步驟有兩個(gè)：

1.特征的提練，如案例中的棒球，它的特征有兩個(gè)，一個(gè)是圓形的輪廓代表是一個(gè)球體，另一個(gè)是紅色的縫線，代表它是一個(gè)棒球而非足球或籃球。

2.審查刪除重復(fù)的描述。特征提煉后，在保留棒球特征的情況下，我們選擇去掉其中一根縫線，為信息騰出更多可操作的空間。

 

STEP 2：分塊

分塊也便根據(jù)物的形態(tài)對(duì)網(wǎng)頁的信息內(nèi)容進(jìn)行規(guī)劃。主要有三個(gè)關(guān)鍵點(diǎn)。

1.對(duì)信息進(jìn)行消化。在充分的理解信息對(duì)之后的排版和信息調(diào)整有很大的幫助。這時(shí)也可以和需求方進(jìn)行溝通對(duì)信息進(jìn)行微調(diào)或收納。

2.在吃透信息后，我們就可以開始正式的分塊，分塊是一個(gè)逐層深入由粗到細(xì)的過程。

3.分塊完成后，我們結(jié)合造型進(jìn)行一定的信息和造型微調(diào)。

 

STEP 3：加法

進(jìn)行加法前，網(wǎng)頁大致的雛形已經(jīng)出來了，之后加法的工作主要有三個(gè)。

1.具體內(nèi)容的填充

2.氣氛和視覺的補(bǔ)充，讓整體效果更真實(shí)，如前景的人物添加始棒球的主題更明確，運(yùn)動(dòng)感更強(qiáng)。

3.特征的還原和細(xì)節(jié)補(bǔ)充。不得不承認(rèn)信息高于裝飾。在確保信息的完整性后，我們在不干擾信息呈現(xiàn)的情況下還原一些原來刪去的細(xì)節(jié)，如背景縫線的還原，選擇了低透明低飽合的淺灰色，讓棒球更真實(shí)。

當(dāng)我們?yōu)g覽這個(gè)頁面時(shí)，強(qiáng)視覺沖擊力的棒球大效果映入眼簾。簡單的視覺掃描我們便立刻了解了這個(gè)專題的核心主題。結(jié)構(gòu)清晰、主題明確，視覺強(qiáng)烈。這就是我們抄現(xiàn)實(shí)帶來的直接而有效的視覺效果。

總結(jié)：

抄現(xiàn)實(shí)的過程是利用現(xiàn)實(shí)物的原型來裝載網(wǎng)頁的信息內(nèi)容，”抄現(xiàn)實(shí)”就像舊公寓改造，倘若我們將”抄現(xiàn)實(shí)”想像成一個(gè)舊公寓改造工程，假定我們和房子原主人有著不同的生活習(xí)慣，我們就需要拆墻，重新劃分功能區(qū)，重新裝修裝飾。也正如我們”抄現(xiàn)實(shí)”的方法：減法、分塊、加法。下面我們來具體看看它們的相通之處。

 

1.減法

首先根據(jù)我們的生活需要，我們會(huì)選擇一個(gè)形態(tài)大小合適的房子。這個(gè)房子要滿足居住人的基本功能需求，整體的改造也需要核算在可操控的成本范圍，選定房子后我們可能會(huì)先拆去原先的分割的圍墻，方便我們不受限制的設(shè)計(jì)出更貼合現(xiàn)有需求的空間。網(wǎng)頁設(shè)計(jì)也是一樣，原先的細(xì)節(jié)經(jīng)常是束縛我們想像和內(nèi)容設(shè)置的枷鎖。當(dāng)然我們也不能無限制的拆墻，保留梁柱和承重墻是必需的，這也便是我們”抄現(xiàn)實(shí)”網(wǎng)頁設(shè)計(jì)方法中提到的特征，房子必需還是房子，抄襲的事物必需能被識(shí)別，這是刪減的底線?？偠灾覀儦w納為三點(diǎn)，一、選房要合適，選對(duì)房可以為后面的工作節(jié)省**大的成本。二、拆墻越干凈操作的自由度越高，同時(shí)也要考慮重建的成本。三拆墻不能毀梁柱，保留梁柱和保留物的征一樣重要，沒有了它們，不論房子還是現(xiàn)實(shí)物都將不復(fù)存在。

2.分塊

在功能劃分前，我們必需再梳理一遍自己的生活需求，這正如我們在進(jìn)行網(wǎng)頁分區(qū)前所要做的信息消化。比如我們希望一個(gè)更大的洗浴間，或者希望將客廳娛樂與臥室一體化，這時(shí)候我們可以在房子的基本大輪廓內(nèi)，結(jié)合管道的基本設(shè)置進(jìn)行空間的重新劃分。分塊的這個(gè)步驟主要是解決功能性問題。滿足功能需要才使我們一切行為變得有意義。網(wǎng)頁設(shè)計(jì)中的這些信息內(nèi)容就如同我們住家的吃喝拉撒睡，這些是**重要的。

3.加法

與分塊解決的功能性問題相比較起來，加法解決的則是填充和裝飾的問題。在做完分區(qū)并完善好了基礎(chǔ)裝修之后，我們就可以陸續(xù)將我們的生活用品搬進(jìn)房子，配置家電、沙發(fā)什么的。這也正如我們網(wǎng)頁設(shè)計(jì)中的內(nèi)容填充。如果時(shí)間和金錢充裕我們可以購買符合自己個(gè)性的裝飾物，調(diào)整燈光氣氛等，讓我們的生活環(huán)境看起來更有情趣也正如使我們的網(wǎng)頁看起來更生動(dòng)一樣。它是一種錦上添花，它可以為你的視覺加分，但切忌過于繁重而影響到了功能的使用，必竟家不是博物館，網(wǎng)頁信息傳播才是**重要的。

一個(gè)主題，我們可以有多種的聯(lián)想，并呈現(xiàn)出不同的設(shè)計(jì)表現(xiàn)。關(guān)于春節(jié)的聯(lián)想有很多，歡聚、團(tuán)圓、紅包、鞭炮、禮花、祝福。制作前，我們的設(shè)計(jì)結(jié)果有著多種的可能性。下面我們看看三個(gè)關(guān)于春節(jié)的案例，它們選擇了不同的抄襲對(duì)像，為我們呈現(xiàn)了不同的春節(jié)視覺。

這是一個(gè)春節(jié)活動(dòng)大盤點(diǎn)主題頁面，頁面由六個(gè)活動(dòng)組成，每個(gè)活動(dòng)只呈現(xiàn)其活動(dòng)名稱和時(shí)間，內(nèi)容并不多。這里作者引用了春節(jié)團(tuán)圓的聯(lián)想，選擇了團(tuán)圓桌來作為抄襲對(duì)像。每個(gè)活動(dòng)為圓桌上的一個(gè)成員席位。紅黃色的桌子和藍(lán)色的紋理背景，讓顏色飽滿，年味兒十足。

1. 減法：減法不僅僅包括細(xì)節(jié)上的刪減，也包括角度變換和視覺替代，這些都依據(jù)實(shí)際網(wǎng)頁的信息量而定。這個(gè)案例改變了圓桌的日常視覺角度，轉(zhuǎn)以俯視的角度替代，俯視角度給內(nèi)容擺放留下足夠空間，并能以**均衡的方式呈現(xiàn)六個(gè)席位的活動(dòng)信息。

2. 分塊：圓桌分為六個(gè)成員席，每個(gè)席位代表一個(gè)活動(dòng)。主SLOGAN視覺安置在圓桌中間的轉(zhuǎn)盤上，其它的按鈕和補(bǔ)充說明信息置于圓桌之外的區(qū)域。

3. 加法：在基礎(chǔ)內(nèi)容填充完整后，作者在桌上加入了筷子，進(jìn)入按鈕使用醬碟來裝載。近景模糊的綠葉加入，使畫面有了前后的景深關(guān)系，也讓紅綠色彩的搭配更加飽滿。

這是一個(gè)DNF的黑鉆推廣、訂制和續(xù)費(fèi)的頁面，黑鉆是針對(duì)DNF的VIP用戶開設(shè)的游戲特權(quán)圖標(biāo)，在這里，作者選擇了黑鉆的形態(tài)作為整體的網(wǎng)頁視覺載體。主題明確而直觀。

1. 減法：在選定黑鉆為專題的抄襲物后，作者開始**減法刪去黑鉆的立體切面光澤，保留了鉆石的外輪廓和黑色。把”黑”和”鉆”有效的提煉出來。

2. 分塊：根據(jù)頁面內(nèi)容和黑鉆的輪廓線，作者**與其外形相平行吻合的斜線進(jìn)行分區(qū)，在這個(gè)部分我們可以看到作者對(duì)右側(cè)表格的精巧優(yōu)化

3. 加法：空間分塊和進(jìn)行內(nèi)容的填充完成后，作者加入了左側(cè)低胸手持紅酒杯的游戲人物以及寫實(shí)的黑鉆，將黑鉆的尊貴的身份交待完整，底部的人物圖形的小提示和右下方的寶箱圖片對(duì)多余的空間進(jìn)行了填充也讓頁面更加完整和深動(dòng)。

《劍靈》武神塔介紹專題

 

 

需求分析

1.主題

是武神就上100層，”武神塔”是劍靈游戲測試新版本中推出的一個(gè)特色內(nèi)容，它是一個(gè)比武場，由底層到高層，難度逐層增加。頁面的內(nèi)容主要分為三部分，視頻、武神塔副本的介紹，以及七層塔中的BOSS和掉落的寶貝的介紹。需求方希望內(nèi)容的呈現(xiàn)能夠結(jié)合武神塔的造型進(jìn)行表現(xiàn)。

2.排版預(yù)想

為了更好的表現(xiàn)主題并結(jié)合塔的造型，我們選擇使用抄現(xiàn)實(shí)的方法，并計(jì)劃利用塔的造型來裝下這些信息。但如果將塔的造型與內(nèi)容相結(jié)合我們將面臨三個(gè)問題。一，保留哪些塔的特征；二，文字內(nèi)容放在哪；三，如何梳理幾塊內(nèi)容的層次。

3.現(xiàn)有素材

大概理清思路后，我們來看看現(xiàn)有的素材，都說巧婦難為無米之炊，坦若著實(shí)無米，那那那就得自己種！開個(gè)玩笑，不過對(duì)于網(wǎng)頁設(shè)計(jì)來說，真正對(duì)到槍口上的素材并不多，許多時(shí)候咱都得變著法子玩。

武神塔

一張武神塔的外景，拿到素材的時(shí)候它的像素并不高，只能暫時(shí)考慮作為背景的一小部分，如果要將內(nèi)容放置在塔內(nèi)的話，這個(gè)素材的編輯難度比較大。

另外還有兩張武神塔的內(nèi)景截圖，圖片質(zhì)量不錯(cuò)，但似乎對(duì)這個(gè)創(chuàng)意起不了太大的幫助。但姑且先留著。

BOSS

這是每層塔內(nèi)的BOSS截圖，與此類似的這套圖一共有七張，這是游戲過程中的截圖，所以人物偏小，質(zhì)量也不如原畫和正式輸出的3D模型高。而這些個(gè)BOSS又是內(nèi)容中必需給玩家呈現(xiàn)的，所以如何揚(yáng)長避短這又是一個(gè)難題。

人物

劍靈現(xiàn)有的游戲素材大致可以分為三種：3D、2D、GIF的惡搞Q版小動(dòng)畫。

3D是一個(gè)很寫實(shí)的風(fēng)格，如果將其與具體的塔造型結(jié)合并還要盛放信息內(nèi)容的話，那需要繪制出與其匹配的精度，一方面操作難度比較大，另一方面也不利于信息的呈現(xiàn)和查閱，由于過分寫實(shí)，版式的局限性也比較大。

2D的素材相對(duì)于3D來說相對(duì)更概念化一些，但是要繪制出與其匹配精度的塔也是有一定困難的，而且對(duì)于一個(gè)小版本介紹專題來說時(shí)間也比較有限。

第三類，是劍靈的一個(gè)有愛化表現(xiàn)素材，是一些周邊的GIF表現(xiàn)，繪制簡潔，表現(xiàn)力強(qiáng)，也比較具有情感化。繪制出與之匹配的精度的塔的造型也相對(duì)比較容易。確實(shí)算是個(gè)不錯(cuò)的方向。

4.總結(jié)

**對(duì)主題、內(nèi)容、素材的了解，我們就有了大概的構(gòu)思。

我們將**一個(gè)簡潔的塔造型去承載整個(gè)信息內(nèi)容，并配合以Q版有愛的小動(dòng)畫形像視覺活躍氣氛。

每層塔的內(nèi)容安置在獨(dú)立的單層塔中，并**七層塔的組合構(gòu)成一個(gè)高聳入云的塔型

在選定方向的同時(shí)也帶來一個(gè)問題，簡約的風(fēng)格和必需出現(xiàn)的BOSS截圖風(fēng)格如何匹配？精度和風(fēng)格之間的差異都會(huì)造成視覺的不統(tǒng)一。如果一時(shí)找不到答案，我們暫時(shí)把這個(gè)問題放在腦子的待處理區(qū)。策略從來不是萬全的，在大方向確定之后，許多細(xì)節(jié)的問題是在設(shè)計(jì)中一步步變法求解的。當(dāng)然，這個(gè)方法并不是**好的，但卻是我們經(jīng)常遇到的情況，天時(shí)地利，情投意合的情況是少有的，如果要求以萬全的策略才開工，那時(shí)間和環(huán)境都是不允許的，就像那句話怎么說來著，愛情就像一條河,誰不是摸著石頭過河呢?所以在大方向確定后，我們就開始嘗試動(dòng)手了。

 

設(shè)計(jì)分解

 

STEP 1 減法

游戲中，武神塔擁有它復(fù)雜的飛檐造型和層次豐富的質(zhì)感紋理，每層有大小不一的拱門。為了能給信息內(nèi)容足夠的空間，我們將復(fù)雜的飛檐造型進(jìn)行歸納，并暫時(shí)去掉了拱門，這樣我們也比較明確了信息內(nèi)容的位置。

 

STEP 2 分塊

接下來我們就需要開始對(duì)內(nèi)容進(jìn)行分塊，我們知道內(nèi)容大致分為三塊，視頻、副本介紹、七層塔。由于七層塔的數(shù)量較多，為了能使它與介紹和視頻內(nèi)容有區(qū)別并保持七層的統(tǒng)一性，我們將它們進(jìn)行顏色的區(qū)分。并在位置上依照塔的物理順序，由下而上從一層到七層。由于內(nèi)容較長，每層塔可以做成收納的形式，以便控制長度。

 

STEP 3 加法

將拱門重新安置在分層塔的左側(cè)，用來安放每層比武塔的主BOSS，要主視覺的塔頂加入主視覺調(diào)節(jié)氣氛，在背景加入其它的建筑造型。并將主視覺的內(nèi)容塔置于一個(gè)高聳入云的角度，體現(xiàn)了”是武神就上100層”的概念高度。

 

回頭說說先前留下的那個(gè)風(fēng)格匹配的顧慮。如何降低寫實(shí)的游戲內(nèi)截圖與相對(duì)簡約風(fēng)格畫面的沖突感。瀏覽截圖我們發(fā)現(xiàn)，它們都是塔內(nèi)的場景，并且基本上是平視的角度，于是便在畫面上開了一道立體的門，將場景安置在門后，一致的視角可以增強(qiáng)畫面的統(tǒng)一感。門的微寫實(shí)表現(xiàn)對(duì)截圖和塔的兩種風(fēng)格進(jìn)行了中間過渡，減弱了二者沖突感。

 

網(wǎng)頁設(shè)計(jì)圖

 

 

 

 

 

作者：晉小彥 微博：一_視覺 （騰訊 TGI 高級(jí)視覺設(shè)計(jì)師）

 
================關(guān)于聯(lián)展網(wǎng)================
“聯(lián)展網(wǎng)“是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬的@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、**頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 的全拼
您也可以**掃描下方二維碼快速添加：

 

相關(guān)推薦：

---

蘇州平面設(shè)計(jì)培訓(xùn)   蘇州平面設(shè)計(jì)培訓(xùn)班   蘇州平面設(shè)計(jì)培訓(xùn)機(jī)構(gòu)

上一篇：太倉關(guān)于平面設(shè)計(jì)_太倉平面設(shè)計(jì)培訓(xùn) 下一篇：張家港設(shè)計(jì)有哪些培訓(xùn)班_張家港平面設(shè)計(jì)培訓(xùn)