網(wǎng)站制作，不可不看的2018UI設(shè)計趨勢

設(shè)計師需要借助設(shè)計來抓住用戶的注意力，掌握近期的設(shè)計趨勢就能更好的抓住客戶的心。2018年的設(shè)計趨勢將繼續(xù)延續(xù)2017的設(shè)計形式，同時也增加了許多新的方式，接下來，我們就看一看2018年的UI設(shè)計趨勢。

先來看一下2018UI設(shè)計趨勢大綱：

一、扁平化、極簡主義設(shè)計依然是主流

扁平化始于iphone的官方UI設(shè)計規(guī)范（當(dāng)然還有很多潮流也是iphone引領(lǐng)的），后來android開始跟風(fēng)，繼而所有其他產(chǎn)品幾乎都開始了扁平化的設(shè)計。對于扁平化設(shè)計相信大家已經(jīng)很熟悉了，概念的核心意義是：去除冗余、厚重和繁雜的裝飾效果，倡導(dǎo)簡單、清晰、空間、留白等，突出核心的設(shè)計元素。目前很多app都開始去除多余的線條，通過間距來拉開關(guān)系；去icon化也是一種趨勢，開始流行；這些設(shè)計行為目的都是為了讓用戶使用時更為直觀和更有目的性，令人滿意的審美趨勢也讓極簡的ui設(shè)計擁有良好的用戶體驗。

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

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

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

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

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

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

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

2、給icon圖標(biāo)加上動效，更加有趣味

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

3、icon的細(xì)節(jié)刻畫越來越重要

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

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

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

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

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

六、3D效果正流行

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

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

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

btw，今年比較流行的孟菲斯風(fēng)格設(shè)計，在地鐵站看見各大品牌掛出的海報十分搶眼。該風(fēng)格色彩比較鮮明、活潑、多采用高飽和色彩，18年估計還會繼續(xù)流行一段時間。

八、交互動效一直很重要

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

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

1、啟動頁的小視頻

一般小視頻使用在啟動頁多用于第一次打開app的場景，對用戶的代入感較強，能夠很好的感染用戶的情緒，但是視頻時間不宜過長。

2、由動態(tài)圖片轉(zhuǎn)變成動態(tài)視頻

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

為了吸引更多用戶的注意力，手機banner設(shè)計上采用了動態(tài)視頻進(jìn)行展現(xiàn)，另外淘寶商品詳情頁也會放置動態(tài)視頻效果，方便360度的查看商品，刺激你剁手的欲望。同時動態(tài)視頻配合banner的js轉(zhuǎn)場效果，可能讓訪客更加能夠沉浸在網(wǎng)站的體驗中。

另外一些網(wǎng)頁的首頁也會放置高質(zhì)量、有故事性的視頻，會讓你的網(wǎng)站與眾不同。一般訪客看到這樣的設(shè)計，第一感覺就是這家公司有實力、高大上，真可謂裝逼最高境界！

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

響應(yīng)式設(shè)計的流行由來已久了，這種根據(jù)設(shè)備分辨率自動變形的功能，現(xiàn)在看來一樣很酷有沒有？隨著移動端的增長，手機已經(jīng)超越了pc機作為日常瀏覽網(wǎng)站的第一選擇，Google推出的MD響應(yīng)式柵格系統(tǒng)，由于人力成本過高，國內(nèi)大部分網(wǎng)頁都沒有做，國外采用響應(yīng)式設(shè)計的網(wǎng)站有：Youtube、Spotify、Behance...國內(nèi)的有京東、騰訊視頻等。這種響應(yīng)式設(shè)計確實比較復(fù)雜，但是這個趨勢會一直繼續(xù)下去，對于產(chǎn)品、公司而言，還是需要量力而行的進(jìn)行升級。

十一、VR/AR/VUI是未來的大趨勢

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

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

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

總體來說，這些領(lǐng)域?qū)τ谠O(shè)計是而言都是比較新穎的，所以設(shè)計師們要時刻保持學(xué)習(xí)的心態(tài)，跟上時代的步伐，設(shè)計出交互性強的產(chǎn)品。