在了解事物發(fā)展動向前，我從三個方面作為切入點，即從對過去藝術(shù)設(shè)計發(fā)展的分析找到到規(guī)律，對現(xiàn)在 UI 發(fā)展的分析找到不足 ，從而預(yù)判未來趨勢。
準(zhǔn)確預(yù)判行業(yè)趨勢，是一件很難的事，所以這次趨勢淺析僅為個人一家之言，分析表皮淺薄，各位看官權(quán)當(dāng)茶余飯后故事看吧。
我們先看「趨勢」的字面意思：事物發(fā)展的方向，表示一種向尚不明確的或只是模糊地制定的遙遠(yuǎn)的目標(biāo)持續(xù)發(fā)展的總的運(yùn)動。今天跟大家要聊的就是 UI設(shè)計發(fā)展的動向。
在了解事物發(fā)展動向前，我從三個方面作為切入點，即從對過去藝術(shù)設(shè)計發(fā)展的分析找到到規(guī)律，對現(xiàn)在 UI 發(fā)展的分析找到不足 ，從而預(yù)判未來趨勢。
一、近現(xiàn)代藝術(shù)設(shè)計發(fā)展
1. 近代藝術(shù)發(fā)展
近代藝術(shù)發(fā)展主要由幾大設(shè)計潮流引領(lǐng)，依次關(guān)系為：古典時期、巴洛克洛可可時期、新古典主義時期。
古典時期
其藝術(shù)風(fēng)格嚴(yán)謹(jǐn)寫實，追求構(gòu)圖的均衡與完整，強(qiáng)調(diào)理性而輕視情感，純潔、典雅、和諧、穩(wěn)重。
巴洛克洛可可時期
巴洛克：風(fēng)格多變、動感、不規(guī)則，宏大、奢華；洛可可：精致、小巧、嫵媚、浮華、矯揉造作。不再純潔，開始反對古典主義教條。
新古典主義時期
藝術(shù)形式是對巴洛克洛可可藝術(shù)的反對，重新追慕古典、追求內(nèi)涵，強(qiáng)調(diào)理性、構(gòu)圖的完整，追求以簡練的形式表現(xiàn)高雅的氣質(zhì)。
2. 現(xiàn)代設(shè)計發(fā)展
現(xiàn)代設(shè)計發(fā)展主要有幾大節(jié)點：工藝美術(shù)運(yùn)動、現(xiàn)代主義和后現(xiàn)代主義。
19世紀(jì)下半葉，起源于英國的一場設(shè)計改良運(yùn)動，進(jìn)入現(xiàn)代以后；工業(yè)革命以后大批量工業(yè)化生產(chǎn)導(dǎo)致設(shè)計水準(zhǔn)急劇下降，設(shè)計師實在看不下去，發(fā)起工藝美術(shù)運(yùn)動，為什么從工業(yè)美術(shù)運(yùn)動講起呢？因為它是現(xiàn)代設(shè)計的開端，承上啟下，對后世影響深遠(yuǎn).
工藝美術(shù)運(yùn)動
藝術(shù)特點強(qiáng)調(diào)手工藝生產(chǎn)，反對機(jī)械化生產(chǎn)，反對矯揉造作和其他各種古典、傳統(tǒng)的復(fù)興風(fēng)格，提倡中世紀(jì)風(fēng)格，主張設(shè)計誠實，講究簡單、樸實、風(fēng)格良好，提倡自然主義風(fēng)格和東方風(fēng)格。
現(xiàn)代主義
打破傳統(tǒng)，打破設(shè)計為權(quán)貴服務(wù)的立場，設(shè)計民主化，形式上提倡非裝飾的簡單幾何造型，極簡化設(shè)計，主張少即是多，形式追隨功能，主張理性設(shè)計。
后現(xiàn)代主義
主張多元化設(shè)計，不規(guī)則化，用藝術(shù)表達(dá)多種思維方式，少則厭煩，反理性主義，重形式，強(qiáng)調(diào)歷史文脈依托。
通過對以上設(shè)計潮流更替分析，我們發(fā)現(xiàn)藝術(shù)發(fā)展其實是一個繼承、否定、再發(fā)展的過程。剛開始以模仿寫實為主，模仿寫實發(fā)展到極致后，自然就會有人摒棄、反對，逐漸開始尋求突破，形成一股新的潮流，但當(dāng)這種新的潮流成為主流后（以前被看做非主流）；自然就會有人站出來反對這種潮流，然后繼承再發(fā)展。
二、現(xiàn)今UI設(shè)計發(fā)展
進(jìn)入21世紀(jì)，隨著社會發(fā)展技術(shù)進(jìn)步，信息軟件行業(yè)逐漸興起，這里要感謝喬幫主給我們飯碗，正是蘋果的設(shè)計讓全球開始重視用戶體驗重視 UI設(shè)計，以前大家都叫美工。
1. 擬物化設(shè)計
早期 UI設(shè)計都是擬物化設(shè)計 ，其風(fēng)格特點：模擬真實物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等，交互也模擬現(xiàn)實中的交互方式，學(xué)習(xí)成本低，傳達(dá)豐富的人性化感情。缺點：擬物化本身就是約束，會限制功能本身的設(shè)計。
2. 扁平化設(shè)計
大家看擬物化設(shè)計是不是很像古典主義跟工業(yè)革命剛開始那會，喜歡模擬真實，講究設(shè)計誠實。但是慢慢人們審美疲勞，那么肯定會有一種設(shè)計潮流，汲取它精華再起來反對這種設(shè)計，那就是扁平化設(shè)計，我們現(xiàn)在大環(huán)境就處在這個設(shè)計潮流中。
扁平化有很多優(yōu)點：去掉界面冗余的裝飾效果，「信息」本身重新作為核心被凸顯出來，設(shè)計元素強(qiáng)調(diào)抽象、極簡、符號化，設(shè)計更簡約, 條例清晰；缺點：需要一定學(xué)習(xí)成本，傳達(dá)的感情不豐富，甚至過于冰冷。
如：最早用扁平化設(shè)計的之一，就是微軟的芒果 MetroUI；大家看過于扁平效果并不是太好，扁平化設(shè)計很像現(xiàn)代主義，推崇極簡，冷冰冰，所以我們要問兩個問題：
扁平化就應(yīng)該僅僅是扁平嗎？
扁平化之后應(yīng)該是什么化？
3. 3大設(shè)計語言
在回答這兩個問題之前，我們先分析下最具代表性的三大系統(tǒng)最新的設(shè)計語言，設(shè)計理念很重要，大部分設(shè)計趨勢都是通過這些理念推動。
Material Design
中文名：材料設(shè)計語言，是由 Google 推出的全新的設(shè)計語言，引入電子紙張隱喻，以前我們用紙張獲取信息，現(xiàn)在用設(shè)備，其實都是電子紙張，谷歌對紙張重新進(jìn)行了闡述，在扁平之外，增加了很多新特性，如：https://v.qq.com/x/page/m0131l1zvvo.html
陰影和層級：用陰影的深度來表達(dá)層級，并且有多個層級。
Z軸理念：場景立體化而不再局限于平面，增加信息縱深。
觸摸波紋，流暢動畫：有意義的動畫指示。
卡片設(shè)計，自適應(yīng)布局：應(yīng)用卡片的設(shè)計理念對布局嚴(yán)格規(guī)范，而且布局可以靈活的自適應(yīng)到任何設(shè)備中。
iOS
由于 iOS 12 沒有太大的設(shè)計更新，我們主要看 iOS 11，應(yīng)用大量的圓角卡片式設(shè)計，大面積的背景圖，效果沖擊力更強(qiáng)，點擊欲望也更強(qiáng)了，頁面加入超大標(biāo)題欄字體，這跟以前的小字號細(xì)字體有很大的區(qū)別，陰影也是比較高級的大陰影。
圓角卡片，大標(biāo)題，大陰影：透氣的大圖片背景，清晰的文字閱讀層級。
線性元素向面性進(jìn)化：線形圖標(biāo)改變成了面形，陰影替代描邊，不單單是圖標(biāo)，現(xiàn)在碎片信息越來越多，越來越需要歸納；零碎的線逐漸要往更整體的面過度。
Fluent Design System
微軟去年推出的設(shè)計語言中文名：流暢設(shè)計體系，集各家所長，在 UI 美學(xué)上它更是大有進(jìn)步，系統(tǒng)包含以上五大核心元素：光線、深度、動效、材質(zhì)和縮放。
光線Light：通過光線的運(yùn)營，界面更有質(zhì)感，更加未來感。
深度Depth：運(yùn)用深度理念，可以構(gòu)造出很多視覺效果，如視差、前后變換、空間運(yùn)動等。
動效Motion：不言而喻，動效使頁面更加流暢，也更具觀賞性。
材質(zhì)Material：在界面中賦予材質(zhì)，如毛玻璃、亞克力這樣的高層次的組合效果，使整個頁面很高級。
縮放Scale：Fluent Design System 主要目的是一次設(shè)計，就可以用于 0D（只有語音）、1D（Surface Dial）、2D（UI）、3D（VR/AR）的種種情況；所以伸縮性比其他 UI設(shè)計語言都要更重要，尤其是在 VR/AR 設(shè)備上，未來應(yīng)用潛力巨大。
按照 Fluent Design System 這種設(shè)計理念設(shè)計的 UI 界面，效果確實很棒！
三、現(xiàn)今趨勢：扁平化就應(yīng)該僅僅是扁平嗎？
現(xiàn)在回答前文的第一個問題，通過對三大系統(tǒng)的分析 ，我們發(fā)現(xiàn)各大互聯(lián)網(wǎng)公司都不再拘泥于扁平，都在嘗試新的設(shè)計形式去反對扁平，這些反對形式，也是現(xiàn)在最盛行的設(shè)計趨勢。下面我們看看有哪些形式：
1. 縱深
如果讓一張頁面不再扁平，我覺得最快最直接方法就是增加縱深，把重要信息凸顯出來。增加縱深的常用手段：
大陰影
越來越多的設(shè)計師為卡片、按鈕增加大陰影，來突出層級。
三維立體
打破扁平，增加立體，三維元素在界面中越來越多的得到運(yùn)用。
2. 動視
動效視差越來越被設(shè)計師所重視。
轉(zhuǎn)場動畫
實用動畫，詮釋功能；觀賞動畫，緩沖用戶等待焦慮。
重力視差
視差動畫結(jié)合重力感應(yīng)，讓用戶身臨其境。
3. 材質(zhì)
通過不同材質(zhì)的運(yùn)用，打破扁平，蘋果毛玻璃，微軟亞克力材質(zhì)，相信未來也會有更多材質(zhì)加入。
4. 層次
極賦視覺層次感的頁面設(shè)計不僅極具設(shè)計美感，取悅用戶身心，而且還建立了清晰直觀的視覺層級，方便用戶簡單快速的識別和讀取需要的頁面內(nèi)容，從而提升用戶體驗，降低跳出率。
大小對比
元素尺寸越大，越突出，越容易吸引用戶的注意；不過尺寸大小也要有度，控制在用戶能夠接受的范圍內(nèi)，Airbnb 和蘋果大字號運(yùn)用就比較得當(dāng)。
色彩對比
利用顏色的強(qiáng)烈對比，突出頁面層級。
適當(dāng)間距留白
留白的巧妙運(yùn)用，能夠非常有效地突出頁面信息。而頁面內(nèi)部元素之間，保持適當(dāng)?shù)拈g距，讓彼此之間的相互聯(lián)系而不「擁擠雜亂」，也是吸引用戶注意的不錯策略。
四、未來趨勢：扁平化之后應(yīng)該是什么化？
回答這個問題前，我覺得大家有必要先暢想一下未來的生活方式和社會形勢，我們先看個短片。
https://v.qq.com/x/page/i01586jf3it.html
通過短片我們發(fā)現(xiàn)，未來科技的迅速發(fā)展人們設(shè)計審美更加提高，隨處都是屏幕，信息更加繁雜，動效得到普及，人文關(guān)懷愈加重要，各種技術(shù)的普及，更多設(shè)計形式出現(xiàn)，全息投影也會加以運(yùn)用。
所以我們暫且把扁平化后的設(shè)計潮流取名為：后扁平化&多媒體化。
那么它有什么風(fēng)格特點呢？個人認(rèn)為會有如下幾點：
扁平化仍將主宰，但更加抽象簡約
信息為主
人文關(guān)懷
動效普及
多元化設(shè)計
虛擬全息三維投影運(yùn)用
以上為本人對于 UI設(shè)計趨勢的一些感悟的分享，分析不夠全面也不夠深刻，歡迎大家留言一起探討
0
喜歡他，就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計網(wǎng)（CNDESIGN）會員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有，任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處，作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計網(wǎng)
