網站制作，不(bù)可不(bù)看的(de)2018UI設計趨勢

設計師需要(yào / yāo)借助設計來(lái)抓住用戶的(de)注意力，掌握近期的(de)設計趨勢就(jiù)能更好的(de)抓住客戶的(de)心。2018年的(de)設計趨勢将繼續延續2017的(de)設計形式，同時(shí)也(yě)增加了(le／liǎo)許多新的(de)方式，接下來(lái)，我們就(jiù)看一(yī / yì ／yí)看2018年的(de)UI設計趨勢。

先來(lái)看一(yī / yì ／yí)下2018UI設計趨勢大(dà)綱：

一(yī / yì ／yí)、扁平化、極簡主義設計依然是(shì)主流

扁平化始于(yú)iphone的(de)官方UI設計規範（當然還有很多潮流也(yě)是(shì)iphone引領的(de)），後來(lái)android開始跟風，繼而(ér)所有其他(tā)産品幾乎都開始了(le／liǎo)扁平化的(de)設計。對于(yú)扁平化設計相信大(dà)家已經很熟悉了(le／liǎo)，概念的(de)核心意義是(shì)：去除冗餘、厚重和(hé / huò)繁雜的(de)裝飾效果，倡導簡單、清晰、空間、留白等，突出(chū)核心的(de)設計元素。目前很多app都開始去除多餘的(de)線條，通過間距來(lái)拉開關系；去icon化也(yě)是(shì)一(yī / yì ／yí)種趨勢，開始流行；這(zhè)些設計行爲(wéi / wèi)目的(de)都是(shì)爲(wéi / wèi)了(le／liǎo)讓用戶使用時(shí)更爲(wéi / wèi)直觀和(hé / huò)更有目的(de)性，令人(rén)滿意的(de)審美趨勢也(yě)讓極簡的(de)ui設計擁有良好的(de)用戶體驗。

二、更大(dà)、更粗的(de)字體、留白更多

相信你們很多人(rén)已經升級了(le／liǎo)iPhone新系統，随着ios11的(de)發布，新的(de)設計趨勢也(yě)随之(zhī)流行開來(lái)。如果你熟悉Material Design（以(yǐ)下簡稱MD）的(de)話，ios和(hé / huò)Android在(zài)設計上(shàng)正慢慢的(de)靠近。在(zài)扁平化設計中，文字排版影響着信息層級展示的(de)清晰與否，通過文字的(de)字号、字重、間距、顔色等對比去建立出(chū)清晰的(de)信息層級，而(ér)不(bù)用太多的(de)裝飾元素。

同樣的(de)，Airbnb也(yě)采用了(le／liǎo)粗标題設計。大(dà)标題文本包含一(yī / yì ／yí)組帶有圖片和(hé / huò)描述的(de)文字，文字之(zhī)間保持較大(dà)的(de)留白，看起來(lái)它們互不(bù)幹擾，又不(bù)會令界面看上(shàng)去顯得松散，因而(ér)帶給用戶非常輕松的(de)浏覽體驗。

（對于(yú)一(yī / yì ／yí)些國(guó)内的(de)電商App，我個(gè)人(rén)猜測采用這(zhè)種設計方式的(de)可能性較小，因爲(wéi / wèi)對于(yú)這(zhè)些應用，頁面内的(de)位置相對寸土寸金，應該不(bù)會用大(dà)字體來(lái)浪費空間）

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

1、icon圖标的(de)變化，由線轉面

自ios7開始，蘋果規範了(le／liǎo)2px的(de)線性圖标；到(dào)了(le／liǎo)ios10中，線性圖标的(de)選中狀态變成背景填充樣式；而(ér)在(zài)現在(zài)的(de)ios11中，采用了(le／liǎo)面性圖标，未選中和(hé / huò)選中狀态隻有顔色上(shàng)的(de)區分，并且圖标更加圓潤，目前這(zhè)種設計，國(guó)外的(de)app用的(de)比較多，國(guó)内還相對比較少見，采用ios10的(de)樣式較多。

2、給icon圖标加上(shàng)動效，更加有趣味

目前很多app已經給頁面底部标簽欄的(de)icon加上(shàng)微動效，這(zhè)類動效起到(dào)的(de)是(shì)畫龍點睛的(de)作用，不(bù)太會被注意，察覺到(dào)會讓用戶覺得很有趣味，比如阿裏的(de)淘寶、菜鳥裹裹…我覺得鵝廠的(de)QQ做的(de)最有意思，底部标簽欄icon不(bù)僅有微動效，而(ér)且icon的(de)笑臉會自動轉向看向被點擊的(de)一(yī / yì ／yí)側，并且長按icon移動時(shí)它也(yě)會根據手指的(de)方向轉動，十分有意思，符合當下95後00後的(de)用戶心态。

3、icon的(de)細節刻畫越來(lái)越重要(yào / yāo)

目前icon的(de)設計已經不(bù)單單隻滿足于(yú)簡潔易懂爲(wéi / wèi)前提，同時(shí)細節的(de)設計也(yě)十分重要(yào / yāo)。在(zài)色彩上(shàng)可以(yǐ)加以(yǐ)漸變，線性圖标也(yě)可以(yǐ)加以(yǐ)色彩的(de)對比等等，會顯得icon是(shì)精心設計過的(de)，帶給用戶的(de)感受也(yě)會上(shàng)一(yī / yì ／yí)個(gè)檔次。

四、卡片+投影相結合

ios11中采用了(le／liǎo)大(dà)圓角卡片設計，它不(bù)再像過去MD中的(de)小圓角那樣呆闆，大(dà)圓角讓設計更加輕快大(dà)氣。相信大(dà)家已經看到(dào)了(le／liǎo)很多卡片都使用了(le／liǎo)投影這(zhè)一(yī / yì ／yí)手法，輕微的(de)、似有似無的(de)投影，不(bù)會被用戶立即察覺，但是(shì)會給設計增加深度，形成層疊的(de)關系，更加醒目，可以(yǐ)更好的(de)抓住用戶的(de)注意力。

五、漸變色當然依舊十分流行

漸變色是(shì)今年最大(dà)的(de)趨勢之(zhī)一(yī / yì ／yí)，開始于(yú)16年，Instagram将自己的(de)logo改變成漸變色，這(zhè)一(yī / yì ／yí)趨勢便開始流行，國(guó)内的(de)app也(yě)開始效仿，目前淘寶、QQ等狀态欄就(jiù)是(shì)使用自己的(de)品牌色進行漸變。在(zài)設計漸變色的(de)時(shí)候，要(yào / yāo)做到(dào)色彩的(de)過渡柔和(hé / huò)，顔色明快，避免生硬，可以(yǐ)有效的(de)提升用戶體驗。

六、3D效果正流行

今年C4D大(dà)熱，相信大(dà)家已經感受到(dào)了(le／liǎo)，今年雙十一(yī / yì ／yí)很多商家都使用了(le／liǎo)3D效果，有的(de)還加上(shàng)了(le／liǎo)動效，可以(yǐ)讓你全方位、多角度、更加真實的(de)觀察商品。目前還不(bù)會C4D的(de)設計師們，爲(wéi / wèi)了(le／liǎo)提升你的(de)競争力，有必要(yào / yāo)學起來(lái)了(le／liǎo)，畢竟技多不(bù)壓身。

七、插畫風格也(yě)是(shì)大(dà)趨勢

插畫風格運用的(de)越來(lái)越廣泛，适用于(yú)app當中的(de)啓動頁、缺省頁、banner圖、專題頭圖、彈窗插畫、icon等等，運用時(shí)要(yào / yāo)和(hé / huò)app的(de)整體風格搭配，有趣味、富有創意的(de)插畫會讓用戶對app的(de)好感大(dà)幅提升。

btw，今年比較流行的(de)孟菲斯風格設計，在(zài)地(dì / de)鐵站看見各大(dà)品牌挂出(chū)的(de)海報十分搶眼。該風格色彩比較鮮明、活潑、多采用高飽和(hé / huò)色彩，18年估計還會繼續流行一(yī / yì ／yí)段時(shí)間。

八、交互動效一(yī / yì ／yí)直很重要(yào / yāo)

交互動效越來(lái)越多的(de)使用在(zài)ui設計中，它對于(yú)産品設計的(de)作用包含：傳遞層級和(hé / huò)狀态信息，好的(de)動效應該是(shì)隐形的(de)，以(yǐ)提高可用性爲(wéi / wèi)前提，提升體驗爲(wéi / wèi)目的(de)。它的(de)幾點特性：快速且流暢、恰到(dào)好處的(de)反饋、提升操作感受、提供良好的(de)視覺效果。

九、動态視頻的(de)應用

1、啓動頁的(de)小視頻

一(yī / yì ／yí)般小視頻使用在(zài)啓動頁多用于(yú)第一(yī / yì ／yí)次打開app的(de)場景，對用戶的(de)代入感較強，能夠很好的(de)感染用戶的(de)情緒，但是(shì)視頻時(shí)間不(bù)宜過長。

2、由動态圖片轉變成動态視頻

自16年開始流行的(de)動态圖片，即：cinemagraph，17年也(yě)流行了(le／liǎo)一(yī / yì ／yí)陣，一(yī / yì ／yí)般常見于(yú)微信配圖，核心是(shì)圖片中有少量的(de)動态元素，仿佛賦予圖片生命，比較唯美和(hé / huò)貼近現實。

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

另外一(yī / yì ／yí)些網頁的(de)首頁也(yě)會放置高質量、有故事性的(de)視頻，會讓你的(de)網站與衆不(bù)同。一(yī / yì ／yí)般訪客看到(dào)這(zhè)樣的(de)設計，第一(yī / yì ／yí)感覺就(jiù)是(shì)這(zhè)家公司有實力、高大(dà)上(shàng)，真可謂裝逼最高境界！

十、響應式設計

響應式設計的(de)流行由來(lái)已久了(le／liǎo)，這(zhè)種根據設備分辨率自動變形的(de)功能，現在(zài)看來(lái)一(yī / yì ／yí)樣很酷有沒有？随着移動端的(de)增長，手機已經超越了(le／liǎo)pc機作爲(wéi / wèi)日常浏覽網站的(de)第一(yī / yì ／yí)選擇，Google推出(chū)的(de)MD響應式栅格系統，由于(yú)人(rén)力成本過高，國(guó)内大(dà)部分網頁都沒有做，國(guó)外采用響應式設計的(de)網站有：Youtube、Spotify、Behance...國(guó)内的(de)有京東、騰訊視頻等。這(zhè)種響應式設計确實比較複雜，但是(shì)這(zhè)個(gè)趨勢會一(yī / yì ／yí)直繼續下去，對于(yú)産品、公司而(ér)言，還是(shì)需要(yào / yāo)量力而(ér)行的(de)進行升級。

十一(yī / yì ／yí)、VR/AR/VUI是(shì)未來(lái)的(de)大(dà)趨勢

衆所周知，現在(zài)VR（虛拟現實）和(hé / huò)AR（增強現實）大(dà)火，它倆的(de)核心都是(shì)計算機視覺。VR目前在(zài)娛樂領域被使用，而(ér)AR将會真正影響我們的(de)工作和(hé / huò)生活，多用于(yú)多媒體、市場營銷、教育等方面。

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

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

總體來(lái)說(shuō)，這(zhè)些領域對于(yú)設計是(shì)而(ér)言都是(shì)比較新穎的(de)，所以(yǐ)設計師們要(yào / yāo)時(shí)刻保持學習的(de)心态，跟上(shàng)時(shí)代的(de)步伐，設計出(chū)交互性強的(de)産品。