設(shè)計(jì)師聊聊未來(lái)的視覺(jué)趨勢(shì)!ppt課件

1、今天我們就回到dribbble最初建站的2009年，通過(guò)以往的 作品看看這些年視覺(jué)設(shè)計(jì)都經(jīng)歷了怎樣的變遷，也審視一下這些視覺(jué)趨勢(shì)變遷背,1,后的深層原因。 不管dribbble的爭(zhēng)議有多大，低成本的發(fā)布流程，高門檻的準(zhǔn)入機(jī)制和特殊的排行算法保證了dribbble每天都,2,以高質(zhì)量的水準(zhǔn)給我們提供著大量的視覺(jué)idea，這些idea潛意識(shí)的影響著設(shè)計(jì)師，引領(lǐng)著設(shè)計(jì)風(fēng)潮的改變。各種成熟的視覺(jué)理念最初的雛形靈感,3,大多都來(lái)源于此，今天我們就回到dribbble最初建站的2009年，通過(guò)以往的 作品看看這些年視覺(jué)設(shè)計(jì)都經(jīng)歷了怎樣的變遷，也審視一下這,4,些視覺(jué)趨勢(shì)變遷背后的深層原因。查看dribbb

2、le過(guò)去8年的作品，大致可以把視覺(jué)設(shè)計(jì)的演變分為三個(gè)階段：觸屏初期的擬物化隨著iPhon,5,e4等一系列觸屏手機(jī)迅速占領(lǐng)移動(dòng)市場(chǎng)，很多用戶的認(rèn)知還停留在按鍵時(shí)代，為了能夠降低學(xué)習(xí)成本，快速的使用戶上手，擬物化的設(shè)計(jì)占據(jù)了app,6,設(shè)計(jì)的主流。利用材質(zhì)、光澤、質(zhì)感、逼真的細(xì)節(jié)、高光等手段拉近虛擬世界與真實(shí)世界的距離，有效降低了人與機(jī)器間信息傳遞的折損。擬物化設(shè)計(jì)的,7,主要有以下幾個(gè)特點(diǎn)：1. 主體設(shè)計(jì)元素使用漸變和陰影；2. 使用帶有質(zhì)感的紋理；3. 顏色更多使用飽和度較低的顏色，大量的灰色，深藍(lán)色,8,；4. 適當(dāng)使用帶有光澤的漸變來(lái)設(shè)計(jì)按鈕； Mike“最早最常見(jiàn)的擬物化，或許就是按鈕

3、了，突起的表示可以按的，凹陷的表示已經(jīng)被按了，,9,確實(shí)易懂；擬物化在當(dāng)時(shí)那個(gè)數(shù)碼設(shè)備尚未十分普及的時(shí)代，毫無(wú)疑問(wèn)效果確實(shí)不錯(cuò)，但是，數(shù)碼設(shè)備的普及+一個(gè)萬(wàn)能的手機(jī)，成了擬物化沒(méi)落的開(kāi)始,10,?！痹谶@個(gè)階段，dribbble上的作品風(fēng)格很注重設(shè)計(jì)細(xì)節(jié)，很少有反映產(chǎn)品整體設(shè)計(jì)的作品，更多的設(shè)計(jì)聚焦在按鈕、界面質(zhì)感等局部的刻畫(huà)上,11,。通過(guò)局部細(xì)節(jié)反應(yīng)整體的設(shè)計(jì)基調(diào)成為這個(gè)時(shí)代的標(biāo)志。 Eric Hoffman但是，一個(gè)先進(jìn)的設(shè)備得通過(guò)模仿古老的東西讓用戶快速理,12,解，是時(shí)代過(guò)渡中的一個(gè)不得已。舉一個(gè)例子，在未來(lái)人眼中，一個(gè)溫度計(jì)的app要特地設(shè)計(jì)成實(shí)體溫度計(jì)的樣子，一定弱爆了。所以隨著觸

4、屏設(shè)備井,13,噴一般的爆發(fā)占領(lǐng)市場(chǎng)，此時(shí)用戶體驗(yàn)的核心問(wèn)題不再是操作認(rèn)知，而是更加方便的快捷體驗(yàn)。此時(shí)為方便用戶在越來(lái)越大的屏幕中便捷使用，手勢(shì)滑動(dòng),14,等全新的交互設(shè)計(jì)加入進(jìn)來(lái)，而在一個(gè)擬物化厚重的設(shè)計(jì)中加入滑動(dòng)操作顯然違和感太強(qiáng)了。擬物高效，刻意的在交互上擬物會(huì)付出巨大的成本，有時(shí),15,候反而降低了效率。 Rogie“仔細(xì)思考事實(shí)上很多擬物化設(shè)計(jì)并沒(méi)有遵從擬物化設(shè)計(jì)的初衷。不給記事軟件加封皮會(huì)影響用戶理解嗎？日歷程,16,序有個(gè)翻頁(yè)動(dòng)畫(huà)幫助了用戶理解程序用法嗎？”為了解決擬物化帶來(lái)的困擾，設(shè)計(jì)師們開(kāi)始尋找新的設(shè)計(jì)世界觀，扁平化隨之出現(xiàn).多屏?xí)r代的扁平化扁,17,平化風(fēng)格在dribbb

5、le上最初的出現(xiàn)來(lái)源于一批設(shè)計(jì)師對(duì)Metro UI這種風(fēng)格的大膽嘗試，利用的是人類最直觀的認(rèn)識(shí)文字，你不用去,18,想到底哪個(gè)圖標(biāo)是首頁(yè)，他就給你用大字體寫(xiě)著“首頁(yè)”！這也成了扁平化設(shè)計(jì)中的一個(gè)關(guān)鍵，更加注重對(duì)于內(nèi)容本身設(shè)計(jì)的突出，去掉對(duì)多余設(shè)計(jì)細(xì)節(jié),19,的干擾，直面內(nèi)容本身。扁平化設(shè)計(jì)的特點(diǎn)：1.更多的使用多彩的顏色嘗試，提升純度，明度和飽和度。2.除去冗余、厚重和繁雜的裝飾效果，不使,20,用紋理和圖案；3.在設(shè)計(jì)元素上，強(qiáng)調(diào)抽象、極簡(jiǎn)和符號(hào)化；4.多屏設(shè)備更多使用各種手勢(shì)提升操作的便捷性； Nancy Nguyen“,21,不得不提從扁平化中衍生出的卡片設(shè)計(jì)在扁平化時(shí)代占據(jù)的重要位置，

6、在保持扁平的同時(shí)保證內(nèi)容信息分割清晰，最重要的是卡片化設(shè)計(jì)在多屏?xí)r代幾乎,22,是解決多端統(tǒng)一唯一的方法?！?Cosmin Capitanu扁平化設(shè)計(jì)不僅極大的提升了用戶對(duì)于內(nèi)容的閱讀效率和操作便捷性，也對(duì)設(shè)計(jì),23,師本身帶來(lái)了巨大的改變。在擬物化時(shí)代為刻畫(huà)一個(gè)界面的質(zhì)感可能需要耗費(fèi)巨大的成本，相應(yīng)修改成本也會(huì)翻倍。但是扁平化極大的簡(jiǎn)化了這個(gè)過(guò)程（,24,“sketch”們的成功也是抓住了這個(gè)時(shí)代的設(shè)計(jì)特點(diǎn)），設(shè)計(jì)師的精力從對(duì)細(xì)節(jié)的刻畫(huà)轉(zhuǎn)移到內(nèi)容本身和整體架構(gòu)設(shè)計(jì)；這期間dribbble,25,的界面設(shè)計(jì)風(fēng)格不但從之前的細(xì)節(jié)刻畫(huà)轉(zhuǎn)變成了整體呈現(xiàn)（dribbble還為此開(kāi)始專門支持附件上傳功能

7、），還增加了一個(gè)獨(dú)特的新物種：gif,26,動(dòng)圖（此處換動(dòng)圖，因?yàn)閣ord不支持動(dòng)圖，所以先放上鏈接） Zee Young Creativedash設(shè)計(jì)師們不在去比拼細(xì)節(jié),27,，而是專注于界面設(shè)計(jì)的整體體驗(yàn)；早在擬物化時(shí)代，就已經(jīng)產(chǎn)生了虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)的概念，隨著科技的進(jìn)步，VR等設(shè)備開(kāi)始逐漸進(jìn)入人們的視線,28,，在一個(gè)3d的世界里扁平的呈現(xiàn)方式顯然是乏力的，dribbble上的設(shè)計(jì)師們開(kāi)始在扁平設(shè)計(jì)中增加空間的概念。虛擬世界的空間多元化201,29,5年3月2日巴塞羅拉世界移動(dòng)通信大會(huì)（2015）舉行期間，HTC發(fā)布消息，HTC和VALVE合作推出了第一款消費(fèi)級(jí)vr頭顯。2016年,3

8、0,Oculus Rift也推出了消費(fèi)者版本。身為游戲巨頭的sony也不甘落后隨后推出了自己的VR設(shè)備。再加上之前增強(qiáng)現(xiàn)實(shí)的google,31,glass 以及微軟對(duì)Hololens的研發(fā)。未來(lái)的移動(dòng)體驗(yàn)趨勢(shì)都瞄向了頭戴虛擬設(shè)備。在這樣的背景下dribbble上的設(shè)計(jì)也在悄然發(fā),32,生了微妙的變化。當(dāng)下最新的設(shè)計(jì)趨勢(shì)和特點(diǎn)：1.顏色在原有多彩的基礎(chǔ)上增加更多柔和的漸變，以體現(xiàn)空間中動(dòng)感；2.空間+大字體標(biāo)題設(shè)計(jì)，利,33,用空間和字體來(lái)代替原有的卡片概念；3.重新回歸的投影，全新的彩色投影更佳強(qiáng)調(diào)主體內(nèi)容與空間中的流動(dòng)的關(guān)系；4.增加更多的微交互，強(qiáng)調(diào)內(nèi),34,容在空間中的無(wú)縫變化； Paperpillar團(tuán)隊(duì)空間中與用戶間的距離決定了操作的優(yōu)先級(jí)，這也就是我們?cè)诳苹秒娪俺？匆?jiàn)的那種畫(huà)面,35,，鋼鐵俠中出現(xiàn)的那些設(shè)計(jì)不過(guò)只是一些交互框架和骨骼?？偨Y(jié)：雖然大家表面上看dribbble的視覺(jué)設(shè)計(jì)潮流更多是像一種流行趨勢(shì),大家,36,一時(shí)間為了一種風(fēng)格會(huì)蜂擁而上，而流行趨勢(shì)“三十年河?xùn)|三十年河西”