2018UI設(shè)計(jì)趨勢(shì)提前預(yù)告

設(shè)計(jì)趨勢(shì)往往會(huì)受到當(dāng)今主流媒體，技術(shù)的發(fā)展，時(shí)尚趨勢(shì)等等影響，設(shè)計(jì)趨勢(shì)一般是慢慢形成的，循序漸進(jìn)的。當(dāng)然，隨著時(shí)間的交替也會(huì)以同樣新舊交替的形式變得落后。

一、扁平化、極簡(jiǎn)主義設(shè)計(jì)依然大行其道

扁平化相信大家已經(jīng)很熟悉了，概念的核心意義是：去除冗余、厚重和繁雜的裝飾效果，倡導(dǎo)簡(jiǎn)單、清晰、空間、留白等，突出核心的設(shè)計(jì)元素。目前很多app都開(kāi)始去除多余的線條，通過(guò)間距來(lái)拉開(kāi)關(guān)系；去icon化也是一種趨勢(shì)，開(kāi)始流行；這些設(shè)計(jì)行為目的都是為了讓用戶使用時(shí)更為直觀和更有目的性，令人滿意的審美趨勢(shì)也讓極簡(jiǎn)的ui設(shè)計(jì)擁有良好的用戶體驗(yàn)。

二、更大 更粗的字體、留白更多

相信你們很多人已經(jīng)升級(jí)了iPhone新系統(tǒng)，隨著ios11的發(fā)布，新的設(shè)計(jì)趨勢(shì)也隨之流行開(kāi)來(lái)。如果你熟悉Material Design（以下簡(jiǎn)稱MD）的話，ios和Android在設(shè)計(jì)上正慢慢的靠近。在扁平化設(shè)計(jì)中，文字排版影響著信息層級(jí)展示的清晰與否，通過(guò)文字的字號(hào)、字重、間距、顏色等對(duì)比去建立出清晰的信息層級(jí)，而不用太多的裝飾元素。

同樣的，Airbnb也采用了粗標(biāo)題設(shè)計(jì)。大標(biāo)題文本包含一組帶有圖片和描述的文字，文字之間保持較大的留白，看起來(lái)它們互不干擾，又不會(huì)令界面看上去顯得松散，因而帶給用戶非常輕松的瀏覽體驗(yàn)。

（對(duì)于一些國(guó)內(nèi)的電商App，我個(gè)人猜測(cè)采用這種設(shè)計(jì)方式的可能性較小，因?yàn)閷?duì)于這些應(yīng)用，頁(yè)面內(nèi)的位置相對(duì)寸土寸金，應(yīng)該不會(huì)用大字體來(lái)浪費(fèi)空間）

三、頁(yè)面icon的3種設(shè)計(jì)趨勢(shì)

一、icon圖標(biāo)的變化，由線轉(zhuǎn)面

自ios7開(kāi)始，蘋(píng)果規(guī)范了2px的線性圖標(biāo)；到了ios10中，線性圖標(biāo)的選中狀態(tài)變成背景填充樣式；而在現(xiàn)在的ios11中，采用了面性圖標(biāo)，未選中和選中狀態(tài)只有顏色上的區(qū)分，并且圖標(biāo)更加圓潤(rùn)，目前這種設(shè)計(jì)，國(guó)外的app用的比較多，國(guó)內(nèi)還相對(duì)比較少見(jiàn)，采用ios10的樣式較多。

二、給icon圖標(biāo)加上動(dòng)效，更加有趣味

目前很多app已經(jīng)給頁(yè)面底部標(biāo)簽欄的icon加上微動(dòng)效，這類(lèi)動(dòng)效起到的是畫(huà)龍點(diǎn)睛的作用，不太會(huì)被注意，察覺(jué)到會(huì)讓用戶覺(jué)得很有趣味，比如阿里的淘寶、菜鳥(niǎo)裹裹…我覺(jué)得鵝廠的QQ做的最有意思，底部標(biāo)簽欄icon不僅有微動(dòng)效，而且icon的笑臉會(huì)自動(dòng)轉(zhuǎn)向看向被點(diǎn)擊的一側(cè)，并且長(zhǎng)按icon移動(dòng)時(shí)它也會(huì)根據(jù)手指的方向轉(zhuǎn)動(dòng)，十分有意思，符合當(dāng)下95后00后的用戶心態(tài)。

三、icon的細(xì)節(jié)刻畫(huà)越來(lái)越重要

目前icon的設(shè)計(jì)已經(jīng)不單單只滿足于簡(jiǎn)潔易懂為前提，同時(shí)細(xì)節(jié)的設(shè)計(jì)也十分重要。在色彩上可以加以漸變，線性圖標(biāo)也可以加以色彩的對(duì)比等等，會(huì)顯得icon是精心設(shè)計(jì)過(guò)的，帶給用戶的感受也會(huì)上一個(gè)檔次。

四、卡片+投影相結(jié)合

ios11中采用了大圓角卡片設(shè)計(jì)，它不再像過(guò)去MD中的小圓角那樣呆板，大圓角讓設(shè)計(jì)更加輕快大氣。相信大家已經(jīng)看到了很多卡片都使用了投影這一手法，輕微的、似有似無(wú)的投影，不會(huì)被用戶立即察覺(jué)，但是會(huì)給設(shè)計(jì)增加深度，形成層疊的關(guān)系，更加醒目，可以更好的抓住用戶的注意力。

五、漸變色當(dāng)然依舊十分流行

漸變色是今年最大的趨勢(shì)之一，開(kāi)始于16年，Instagram將自己的logo改變成漸變色，這一趨勢(shì)便開(kāi)始流行，國(guó)內(nèi)的app也開(kāi)始效仿，目前淘寶、QQ等狀態(tài)欄就是使用自己的品牌色進(jìn)行漸變。在設(shè)計(jì)漸變色的時(shí)候，要做到色彩的過(guò)渡柔和，顏色明快，避免生硬，可以有效的提升用戶體驗(yàn)。

六、3D效果正流行

今年C4D大熱，相信大家已經(jīng)感受到了，今年雙十一很多商家都使用了3D效果，有的還加上了動(dòng)效，可以讓你全方位、多角度、更加真實(shí)的觀察商品。目前還不會(huì)C4D的設(shè)計(jì)師們，為了提升你的競(jìng)爭(zhēng)力，有必要學(xué)起來(lái)了，畢竟技多不壓身。

七、插畫(huà)風(fēng)格也是大趨勢(shì)

插畫(huà)風(fēng)格運(yùn)用的越來(lái)越廣泛，適用于app當(dāng)中的啟動(dòng)頁(yè)、缺省頁(yè)、banner圖、專(zhuān)題頭圖、彈窗插畫(huà)、icon等等，運(yùn)用時(shí)要和app的整體風(fēng)格搭配，有趣味、富有創(chuàng)意的插畫(huà)會(huì)讓用戶對(duì)app的好感大幅提升。

btw，今年比較流行的孟菲斯風(fēng)格設(shè)計(jì)，我個(gè)人也很喜歡，在地鐵站看見(jiàn)各大品牌掛出的海報(bào)十分搶眼。該風(fēng)格色彩比較鮮明、活潑、多采用高飽和色彩，18年估計(jì)還會(huì)繼續(xù)流行一陣。

八、交互動(dòng)效一直很重要

交互動(dòng)效越來(lái)越多的使用在ui設(shè)計(jì)中，它對(duì)于產(chǎn)品設(shè)計(jì)的作用包含：傳遞層級(jí)和狀態(tài)信息，好的動(dòng)效應(yīng)該是隱形的，以提高可用性為前提，提升體驗(yàn)為目的。它的幾點(diǎn)特性：快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺(jué)效果。

九、動(dòng)態(tài)視頻的應(yīng)用

1.啟動(dòng)頁(yè)的小視頻

一般小視頻使用在啟動(dòng)頁(yè)多用于第一次打開(kāi)app的場(chǎng)景，對(duì)用戶的代入感較強(qiáng)，能夠很好的感染用戶的情緒，但是視頻時(shí)間不宜過(guò)長(zhǎng)。

2.由動(dòng)態(tài)圖片轉(zhuǎn)變成動(dòng)態(tài)視頻

自16年開(kāi)始流行的動(dòng)態(tài)圖片，即：cinemagraph，17年也流行了一陣，一般常見(jiàn)于微信配圖，核心是圖片中有少量的動(dòng)態(tài)元素，仿佛賦予圖片生命，比較唯美和貼近現(xiàn)實(shí)。

為了吸引更多用戶的注意力，手機(jī)banner設(shè)計(jì)上采用了動(dòng)態(tài)視頻進(jìn)行展現(xiàn)，另外淘寶商品詳情頁(yè)也會(huì)放置動(dòng)態(tài)視頻效果，方便360度的查看商品，刺激你剁手的欲望。

另外一些網(wǎng)頁(yè)的首頁(yè)也會(huì)放置高質(zhì)量、有故事性的視頻，會(huì)讓你的網(wǎng)站與眾不同。

十、響應(yīng)式設(shè)計(jì)

隨著移動(dòng)端的增長(zhǎng)，手機(jī)已經(jīng)超越了pc機(jī)作為日常瀏覽網(wǎng)站的第一選擇，Google推出的MD響應(yīng)式柵格系統(tǒng)，由于人力成本過(guò)高，國(guó)內(nèi)大部分網(wǎng)頁(yè)都沒(méi)有做，國(guó)外采用響應(yīng)式設(shè)計(jì)的網(wǎng)站有：Youtube、Spotify、Behance...國(guó)內(nèi)的有京東、騰訊視頻等。這種響應(yīng)式設(shè)計(jì)確實(shí)比較復(fù)雜，但是這個(gè)趨勢(shì)會(huì)一直繼續(xù)下去，對(duì)于產(chǎn)品、公司而言，還是需要量力而行的進(jìn)行升級(jí)。

十一、VR/AR/VUI是未來(lái)的大趨勢(shì)

很多人將2016年稱為VR元年，新年伊始資本投資接踵而至，不管是國(guó)際化的大公司，還是仍在四處路演尋求天使投資的創(chuàng)業(yè)團(tuán)隊(duì)，紛紛投入到了 VR 立項(xiàng)的大軍之中。可僅隔半年，一股裁員倒閉的陰云開(kāi)始籠罩 VR 行業(yè)。在這一年里，我們并未看到真正具有實(shí)際消費(fèi)價(jià)值的 VR 產(chǎn)品出現(xiàn)。
　　而與 VR 是讓人在虛擬世界中感受真實(shí)的角度不同，AR 技術(shù)讓人們?cè)谡鎸?shí)世界中感受虛擬。對(duì)于普通的消費(fèi)者來(lái)說(shuō)，可以使用身邊的數(shù)字設(shè)備，在真實(shí)世界中感受不一樣的精彩。還記得Pokemon Go 這個(gè)在真實(shí)世界中抓精靈寵物的手機(jī)游戲么？正是 AR 技術(shù)的運(yùn)用，讓全世界的人為之癡迷瘋狂。彭博社刊文稱，蘋(píng)果計(jì)劃在未來(lái)型號(hào)的iPhone X中采用全新激光傳感器，能繪制用戶周?chē)h(huán)境的3D地圖，并將這些信息應(yīng)用在增強(qiáng)現(xiàn)實(shí)應(yīng)用中。
　　AR在移動(dòng)設(shè)備上的應(yīng)用場(chǎng)景大大超過(guò)了需要額外設(shè)備配合的VR在移動(dòng)端的應(yīng)用可行性，VR的普及仍需時(shí)日。
　　農(nóng)歷新年前夕，支付寶在新版本更新中，推出了“AR 實(shí)景紅包”，融合基于地理信息定位的 LBS，增強(qiáng)顯示技術(shù)的 AR，以及火爆多年的紅白概念，迅速提升了傳統(tǒng)線上紅包的互動(dòng)性和趣味性。
　　技術(shù)愈發(fā)展愈加復(fù)雜，就越能預(yù)測(cè)需求解決問(wèn)題。但是對(duì)于普通消費(fèi)人群來(lái)說(shuō)，技術(shù)將會(huì)更加悄無(wú)聲息的融入日常生活。你所享受的每一個(gè)新產(chǎn)品或者新服務(wù)，背后都有著龐大的技術(shù)基礎(chǔ)支持?；?a href="/tags/dashuju_118_1.html" class="innerlink">大數(shù)據(jù)和機(jī)器學(xué)習(xí)，你的淘寶將會(huì)為你推薦更符合你的需求的產(chǎn)品，更符合你審美和喜好的搭配；你的音樂(lè)播放器會(huì)播放更符合你心情和偏好的音樂(lè)。感知體驗(yàn)會(huì)逐漸替代屏幕交互體驗(yàn)，交互是依舊存在，但是，那塊屏幕，可能并不是真實(shí)存在的，我們更可以通過(guò)聲音、觸摸等與設(shè)備進(jìn)行互動(dòng)。

眾所周知，現(xiàn)在VR（虛擬現(xiàn)實(shí)）和AR（增強(qiáng)現(xiàn)實(shí)）大火，它倆的核心都是計(jì)算機(jī)視覺(jué)。VR目前在娛樂(lè)領(lǐng)域被使用，而AR將會(huì)真正影響我們的工作和生活，多用于多媒體、市場(chǎng)營(yíng)銷(xiāo)、教育等方面。

17年春節(jié)支付寶的VR找紅包，美圖秀秀等拍照軟件的功能普及，這類(lèi)交互方式都是對(duì)用戶的代入感比較強(qiáng)烈，體驗(yàn)感較好。

從Siri、Amazon echo、Google home、小冰等等的發(fā)展來(lái)看，VUI（語(yǔ)音用戶界面）與GUI不同，屬于一個(gè)新領(lǐng)域，將基于“對(duì)話”進(jìn)行設(shè)計(jì)，呈現(xiàn)給用戶的主要是說(shuō)和聽(tīng)。VUI是最自然也是最省事的交互方式，但是不會(huì)完全取代GUI，而是更好的協(xié)作。

這些領(lǐng)域?qū)τ谠O(shè)計(jì)師而言都是比較新穎的，也是發(fā)展初期，我們需要時(shí)刻保持學(xué)習(xí)的心態(tài)，提升自己的競(jìng)爭(zhēng)力。