2018UI設計趨勢提前預告

設計趨勢往往會受到(dào)當今主流媒體，技術的(de)發展，時(shí)尚趨勢等等影響，設計趨勢一(yī / yì ／yí)般是(shì)慢慢形成的(de)，循序漸進的(de)。當然，随着時(shí)間的(de)交替也(yě)會以(yǐ)同樣新舊交替的(de)形式變得落後。

一(yī / yì ／yí)、扁平化、極簡主義設計依然大(dà)行其道(dào)

扁平化相信大(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種設計趨勢

一(yī / yì ／yí)、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)樣式較多。

二、給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)用戶心态。

三、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)孟菲斯風格設計，我個(gè)人(rén)也(yě)很喜歡，在(zài)地(dì / de)鐵站看見各大(dà)品牌挂出(chū)的(de)海報十分搶眼。該風格色彩比較鮮明、活潑、多采用高飽和(hé / huò)色彩，18年估計還會繼續流行一(yī / yì ／yí)陣。

八、交互動效一(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)欲望。

另外一(yī / yì ／yí)些網頁的(de)首頁也(yě)會放置高質量、有故事性的(de)視頻，會讓你的(de)網站與衆不(bù)同。

十、響應式設計

随着移動端的(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à)趨勢

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

衆所周知，現在(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)協作。

這(zhè)些領域對于(yú)設計師而(ér)言都是(shì)比較新穎的(de)，也(yě)是(shì)發展初期，我們需要(yào / yāo)時(shí)刻保持學習的(de)心态，提升自己的(de)競争力。