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

1、辦公室要變成教堂或錄音室才行

現(xiàn)在的工作越來越不受空間的限制，網(wǎng)絡(luò)那么發(fā)達(dá)，你能在任何地方辦公， 那為什么還要要求雇員來辦公室？這一點(diǎn)在提醒老板們：要讓辦公室變得像是一個(gè)教堂或者錄音室。教堂的空間和混響不僅能調(diào)整一個(gè)人的聲音，還能 夠?qū)⒍鄠€(gè)人的聲音混合起來，激發(fā)更大的效能。錄音棚則是專門用于創(chuàng)建高質(zhì)量的音軌的，既然你要求員工們要到辦公室，就要讓他們在這里獲得其他 地方?jīng)]有的工作體驗(yàn)。

2、設(shè)計(jì)更需要同理心

要真正的、深層次的去感受用戶的需求。比如你要開發(fā)一款智能手環(huán)，用以 檢測和提醒老年人的身體狀況，雖然他們需要這款產(chǎn)品，但是未必真會花錢去買它——沒人希望在自己身上時(shí)時(shí)刻刻掛著一個(gè)標(biāo)志上面寫著 “我老了 ”。所以，設(shè)身處地地去了解用戶真的十分必要。

3、廣告和市場營銷將成為設(shè)計(jì)的一部分

以前是把產(chǎn)品生產(chǎn)出來之后再去考慮營銷，現(xiàn)在則不同了，要將營銷視為設(shè) 計(jì)的一部分才行。一款成功的產(chǎn)品，一切都需要超級一致。

4、設(shè)計(jì)將更多地基于“人”運(yùn)行系統(tǒng)本身

人類基因組計(jì)劃和其他的一些研究結(jié)果讓科學(xué)家們對“人”的運(yùn)作方式有了 更深的理解。這些革新性的認(rèn)識也將被用于設(shè)計(jì)上——不管是規(guī)劃一座城市還是設(shè)計(jì)一把椅子，設(shè)計(jì)師們都可以借助這些理論來思考：什么設(shè)計(jì)能激發(fā) 人的創(chuàng)造性？如何創(chuàng)造更強(qiáng)的歸屬感？如何真正的消除干擾、引發(fā)更深層放松？

5、會有更多的工程師變成設(shè)計(jì)師

有越來越多的工程師在設(shè)計(jì)領(lǐng)域初露端倪，這在十年前幾乎不能想象。比如 Inkling 的Peter Cho，Opower 的 Deena Rosen ， Flipboard 的 Marcos Weskamp。

平面設(shè)計(jì)課程

設(shè)計(jì)基礎(chǔ)、平面設(shè)計(jì)等。
機(jī)械制圖/CAD/UG

會計(jì)全科/會計(jì)考證/會計(jì)做賬

淘寶全科（淘寶開店/淘寶美工/淘寶推廣）

電腦辦公/平面設(shè)計(jì)/PHOTOSHOP/CDR/AI

Photoshop 學(xué)習(xí)圖像處理、編輯、通道、圖層、路徑綜合運(yùn)用；圖像色彩的 校正；各種特效濾鏡的使用；特效字的制作；圖像輸出與優(yōu)化等，靈活運(yùn)用圖層風(fēng)格，流體變形及褪底和蒙板，制作出千變?nèi)f化的圖像特效。

CorelDraw **CorelDraw的全方面的設(shè)計(jì)及網(wǎng)頁功能融合到現(xiàn)有的設(shè)計(jì)方 案中，制作矢量的插圖、設(shè)計(jì)及圖像，出色地設(shè)計(jì)公司標(biāo)志、簡報(bào)、彩頁、手冊、產(chǎn)品包裝、標(biāo)識、網(wǎng)頁及其它。

Illustrator 學(xué)習(xí)圖形繪制、包裝、宣傳頁的制作，讓你更加方便地進(jìn)行 LOGO及CI設(shè)計(jì)，不到一個(gè)月，您就會成為一名真正的前|進(jìn)培訓(xùn)美術(shù)大師，在Photoshop的基礎(chǔ)上再學(xué)它如虎添翼，效率成倍提高。

讓動效不止于好看！移動APP的7種動效設(shè)計(jì)和9條設(shè)計(jì)原則

---

優(yōu)秀的設(shè)計(jì)是無形的，一個(gè)優(yōu)秀的動效能你的App變得友好而且抓人眼球，但是絕不會讓用戶分心。今天分享7個(gè)移動App 動效的設(shè)計(jì)技巧以及9條設(shè)計(jì)原則，幫你做出美觀并實(shí)用的動效！

UI界面動效設(shè)計(jì)方法：

1. 先看看有意義的動效設(shè)計(jì)是啥樣：《設(shè)計(jì)師的必備技能！你需要學(xué)會設(shè)計(jì)有意義的動效》
2. 再來學(xué)習(xí)騰訊設(shè)計(jì)師寫的動效設(shè)計(jì)指南：《騰訊精品文！超多干貨的UI界面動效設(shè)計(jì)指南》
3. 圍觀實(shí)戰(zhàn)案例：《高手常用的六種圖標(biāo)動效設(shè)計(jì)思路（附大量實(shí)例）》
4. 做完了如何給工程師：《超實(shí)用！如何準(zhǔn)確的向工程師傳達(dá)動效設(shè)計(jì)？》
5. 軟件福利：《WINDOW黨福利！這才是適合設(shè)計(jì)師的免費(fèi)動效神器PIXATE》

為了充分利用動效，你必須了解動效在App中的定位和職責(zé)，我們一起看動效的種類吧。

視覺反饋

對于任何用戶界面來講，視覺反饋都是至關(guān)重要的。在現(xiàn)實(shí)生活中，人們和任何物體的交互都是伴隨著回應(yīng)的。

同樣地，人們期待從APP元素中得到一個(gè)類似的效果。App給的視覺，聽覺及觸覺反饋，使用戶感到他們在操控APP。同時(shí)視覺反饋有個(gè)更簡單的用途：它暗示著您的APP運(yùn)行正常。當(dāng)一個(gè)按鈕在放大或者一個(gè)被滑動圖像在朝著正確方向移動，那么很明顯，這個(gè)APP在運(yùn)行著呢，在回應(yīng)著用戶的操作。下面的例子顯示，當(dāng)用戶點(diǎn)擊屏幕以示完成任務(wù)時(shí)，包含有數(shù)據(jù)的方塊就縮小并且變成了綠色。

Tinder中使用的左劃喜歡右劃跳過被大家所熟知，而這種交互方式同樣也是一種視覺反饋。這個(gè)動畫效果已經(jīng)被我們實(shí)現(xiàn)出來放在開源庫Koloda中了。

功能改變

這種動效展示出元素在與用戶進(jìn)行交互的時(shí)候，是如何發(fā)生變化的。當(dāng)您想要闡明一個(gè)元素功能如何變化時(shí)，這種動效是**好的選擇。它經(jīng)常與按鈕，圖標(biāo)和其它小設(shè)計(jì)元素一起使用。

從**個(gè)例子中您可以看到一個(gè)圖標(biāo)從漢堡菜單變成了“X”狀，以表示按鈕的功能其實(shí)已經(jīng)發(fā)生了改變。

第二個(gè)例子中，圖標(biāo)隨著內(nèi)容的變化而變化：

空間擴(kuò)展

大部分的移動APP都有非常復(fù)雜的結(jié)構(gòu)，所以設(shè)計(jì)師的的工作就是盡可能地簡化APP的導(dǎo)航。對于這項(xiàng)任務(wù)來講，動效是極其有幫助的。如果您的動效展示出了元素被藏在哪里，那么用戶下次找起來就會很容易了。**個(gè)例子中，我們看到導(dǎo)航欄的菜單，當(dāng)用戶點(diǎn)擊按鈕時(shí)，它顛倒過來了：

下面這個(gè)例子中，我們可以看到更多選項(xiàng)是如何從屏幕底部出現(xiàn)的，這也改進(jìn)了用戶進(jìn)行選擇的流程：

元素的層次結(jié)構(gòu)及其交互

動效完美地描述了界面的各個(gè)部分并且闡明了它們之間是如何進(jìn)行交互的。動效中每個(gè)元素都有其目的和定位。比如，一個(gè)按鈕可以激活彈出菜單，那么此菜單**好從按鈕彈出而不是從屏幕側(cè)面滑出來：這樣就會給用戶顯示按下按鈕的回應(yīng)，幫助用戶理解這兩個(gè)元素（按鈕和彈出菜單）是有聯(lián)系的。

所有動效都應(yīng)該闡釋元素之間是如何聯(lián)系的。這種層次結(jié)構(gòu)和元素的互動對于一個(gè)直觀的界面來講是非常重要的。下面**個(gè)例子顯示當(dāng)按鈕被點(diǎn)擊后菜單欄出現(xiàn)，并且在用戶的眼里，菜單欄和按鈕本質(zhì)上是同樣的元素，只是變大了：

第二個(gè)例子中，一張包含信息的卡片在用戶點(diǎn)擊了之后變大，讓用戶知道這是同一個(gè)元素，**的不同是尺寸：

視覺提示

動效暗示如何與元素進(jìn)行交互。當(dāng)一款A(yù)PP的元素間有不可預(yù)估的互動模式時(shí)，動效提供視覺線索就十分必要了。在這個(gè)例子中，當(dāng)用戶打開一個(gè)博文系列時(shí)，帶有文章的卡片就從屏幕的右側(cè)出現(xiàn)，用戶就可以知道要水平地滑動來瀏覽這些卡片：

第二個(gè)例子中，用了同樣的方法，只是運(yùn)用到了社交圖標(biāo)上：

系統(tǒng)狀態(tài)

在您的APP中，總有那么幾個(gè)進(jìn)程在后臺運(yùn)行著：從服務(wù)器**數(shù)據(jù)，進(jìn)行計(jì)算等。您的任務(wù)就是讓用戶知道APP并沒有停止運(yùn)行或者崩潰掉，要讓用戶知道APP在工作著。**App表現(xiàn)出來的視覺符號的進(jìn)展給用戶一種控制感。理想狀態(tài)下，APP中的每個(gè)進(jìn)程都應(yīng)該被一個(gè)獨(dú)立的動效所伴隨。比如，當(dāng)音頻錄制正在進(jìn)行，屏幕可能要顯示一條波動的音頻軌道。實(shí)時(shí)聲波動效就可以顯示出聲音的大小。

這種動效**常見的一種類型就是下拉刷新動效：

有趣的動效

有趣的動效可以畫龍點(diǎn)睛也可以畫虎類犬。它們通常都沒有什么意義，而且會讓開發(fā)的工作變得異常復(fù)雜。但一個(gè)非常獨(dú)特的動效就可能很吸引用戶并且讓您的APP脫穎而出。這是設(shè)計(jì)師讓用戶愛上他們產(chǎn)品的一個(gè)秘密武器。獨(dú)特的動效可以助您創(chuàng)立一個(gè)識別度高的品牌。

在我們的例子中，移動的圓圈看起來非常別致并且很吸引人的注意力。沿著屏幕移動的這種效果能夠帶來愉悅感和游戲感，簡單并且有趣。

我也非常確信下拉刷新的動效如果做成正在煮菜的鍋，會給人耳目一新的感受：

在制作有趣的動效時(shí)要注意兩點(diǎn)：

1）一定保證動效不會遮蓋或者隱藏APP的功能；

2）一定不能耗時(shí)間。

設(shè)計(jì)的主要原則

我們已經(jīng)看過了動效的主要類型和功能。為了設(shè)計(jì)出真正成功的動效，請時(shí)刻牢記Walt Disney**初提出來的動畫的9條原則，這些原則可以非常有效地應(yīng)用在UI設(shè)計(jì)中。

1.?材質(zhì)

給用戶展示界面元素是由什么構(gòu)成的：輕盈的還是笨重的？死板的還是靈活的？平面的還是多維度的？你需要讓用戶對界面元素的交互模式有個(gè)基本的感覺。

2.?運(yùn)動軌跡

你需要闡明運(yùn)動的自然屬性。一般原則顯示沒有生命的機(jī)械物體的運(yùn)動軌跡通常都是直線，而有生命的物體擁有更為復(fù)雜和非直線性的運(yùn)動軌跡。您要決定您的UI要給用戶呈現(xiàn)的什么樣的印象，并且將這種屬性賦予它。

3.?時(shí)間

在設(shè)計(jì)動效時(shí)，時(shí)間是**有爭議的和**重要的考慮之一。在現(xiàn)實(shí)世界中，物體并不遵守直線運(yùn)動規(guī)則因?yàn)樗鼈冃枰獣r(shí)間來加速或者減速，使用曲線運(yùn)動規(guī)則會讓元素的移動變得更加自然。

4.?聚焦動效

要集中注意力于屏幕的某一特定區(qū)域。例如，閃爍的圖標(biāo)就會吸引用戶的注意，用戶會知道那有個(gè)提醒并去點(diǎn)擊。這種動效常用于有太多細(xì)節(jié)和元素從而無法將特殊元素區(qū)別化的界面中。

5.?跟隨和重疊

跟隨是一個(gè)動作的終止部分。物體不會迅速地停止或者開始移動，每個(gè)運(yùn)動都可以被拆解為每個(gè)部分按照各自速率移動的細(xì)小動作。例如，當(dāng)您扔個(gè)球，在球出手后，您的手也依然在移動。

重疊意味著在**個(gè)動作結(jié)束前開始的第二個(gè)動作，這樣可以吸引用戶的注意力，因?yàn)閮蓚€(gè)動作之間并沒有一段靜止期。

6.?次要?jiǎng)有?/b>

次要?jiǎng)有г瓌t類似于跟隨和重疊原則。簡要地講，主要?jiǎng)有Э杀淮我獎(jiǎng)有О殡S。次要?jiǎng)有巩嬅娓由鷦樱绻徊恍⌒木蜁鹩脩舨槐匾姆稚瘛?

7.?緩入和緩出

緩入/緩出是設(shè)計(jì)的基礎(chǔ)原則，尤其是在移動開發(fā)UI動效，和普通的動畫制作中同等重要。雖然易于理解，但此原則卻常常容易被忽略。緩入/緩出原則是來自于現(xiàn)實(shí)世界中物體不可能立刻開始或者立刻停止運(yùn)動的事實(shí)。任何物體都需要一定的時(shí)間用來加速或者減速。當(dāng)你使用緩入/緩出原則來設(shè)計(jì)動效時(shí)，將會導(dǎo)出非常真實(shí)的運(yùn)動模式。

8.預(yù)期

預(yù)期原則適用于提示性視覺元素。在動效展現(xiàn)之前，我們給用戶點(diǎn)時(shí)間讓他們預(yù)測一些要發(fā)生的事情。完成預(yù)期其中一種方法就是使用我們上述的緩入原則。物體朝特定方向移動也可以給出預(yù)期視覺提示：例如，一疊卡片出現(xiàn)在屏幕上，你可以讓這疊卡片**上面的一張卡傾斜，那么用戶就可以推測出這些卡片可以移動。

9.?韻律

動效中的韻律和音樂與舞蹈中的韻律有著同樣的功能；它使動效結(jié)構(gòu)化。使用韻律可以使動效更加自然。

10.夸張

夸張的表現(xiàn)方法常常會被用到，但它并不是那么容易被闡釋，因?yàn)樗腔诒豢鋸埢念A(yù)期動作或效果。它可以幫助吸引額外的注意力到特殊元素上。

在這篇文章中，我們探討了動效的類型，以及設(shè)計(jì)動效的原則。希望能幫助你創(chuàng)造出獨(dú)特有效的動效。

這里有需要您記住的且非常重要的5點(diǎn)：

1. 記住誰是您的目標(biāo)用戶，并且設(shè)計(jì)您的原型方案去解決他們的問題；

2. 請確保您的動效的每個(gè)元素都具有其背后的基本原因（為什么是這樣？為什么會是如此？為什么這個(gè)時(shí)間點(diǎn)？）；

3. 為了使您的產(chǎn)品有特色，努力模仿自然界的運(yùn)動模式來創(chuàng)造自然的動效；

4. 在項(xiàng)目的任何階段，都要隨時(shí)與開發(fā)人員保持溝通；

5. 做出好的動效，記得分享哦

譯者評：原文作者說“任何動效的主要任務(wù)都是向用戶闡釋APP的邏輯?！笔堑?，任何動效其實(shí)都是為產(chǎn)品所服務(wù)的，他是要完成自己存在的使命的。所以請讓動效的每一幀都得有它的道理，那樣的動效設(shè)計(jì)才算是成功的，在動效設(shè)計(jì)中切忌為了炫而炫，為了動效而動效。

歡迎關(guān)注作者微信公眾號：

原文地址：yalantis
譯者：孫夢超

【聯(lián)展網(wǎng) 原創(chuàng)文章 】

================關(guān)于聯(lián)展網(wǎng)================
“聯(lián)展網(wǎng)“是國內(nèi)人氣**高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：****全的設(shè)計(jì)師圖書導(dǎo)航：/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的@優(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)航：

相關(guān)推薦：

---

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

上一篇：張家港平面設(shè)計(jì)發(fā)展_張家港平面設(shè)計(jì)培訓(xùn) 下一篇：蘇州平面設(shè)計(jì)師培訓(xùn)_蘇州平面設(shè)計(jì)培訓(xùn)