2018 UI＋交互 流行趨勢匯總
關注我們，送電子書
一、UI設計趨勢
設計趨勢往往會受到當今主流媒體，技術的發展，時尚趨勢等等影響，設計趨勢一般是慢慢形成的，循序漸進的。當然，隨著時間的交替也會以同樣新舊交替的形式變得落後。2018年的設計趨勢將繼續延續2017的設計形式，同時也增加了許多新的方式，下面我們就一起來扯一扯。
先來看一下整體目錄：
一、扁平化、極簡主義設計依然是主流
扁平化相信大家已經很熟悉了，概念的核心意義是：去除冗餘、厚重和繁雜的裝飾效果，倡導簡單、清晰、空間、留白等，突出核心的設計元素。目前很多app都開始去除多餘的線條，通過間距來拉開關係；去icon化也是一種趨勢，開始流行；這些設計行為目的都是為了讓用戶使用時更為直觀和更有目的性，令人滿意的審美趨勢也讓極簡的ui設計擁有良好的用戶體驗。
二、更大 更粗的字體、留白更多
相信你們很多人已經升級了iPhone新系統，隨著ios11的發布，新的設計趨勢也隨之流行開來。如果你熟悉Material Design（以下簡稱MD）的話，ios和Android在設計上正慢慢的靠近。在扁平化設計中，文字排版影響著信息層級展示的清晰與否，通過文字的字型大小、字重、間距、顏色等對比去建立出清晰的信息層級，而不用太多的裝飾元素。
同樣的，Airbnb也採用了粗標題設計。大標題文本包含一組帶有圖片和描述的文字，文字之間保持較大的留白，看起來它們互不干擾，又不會令界面看上去顯得鬆散，因而帶給用戶非常輕鬆的瀏覽體驗。
（對於一些國內的電商App，我個人猜測採用這種設計方式的可能性較小，因為對於這些應用，頁面內的位置相對寸土寸金，應該不會用大字體來浪費空間）
三、頁面icon的3種設計趨勢
1.icon圖標的變化，由線轉面
自ios7開始，蘋果規範了2px的線性圖標；到了ios10中，線性圖標的選中狀態變成背景填充樣式；而在現在的ios11中，採用了面性圖標，未選中和選中狀態只有顏色上的區分，並且圖標更加圓潤，目前這種設計，國外的app用的比較多，國內還相對比較少見，採用ios10的樣式較多。
2.給icon圖標加上動效，更加有趣味
目前很多app已經給頁面底部標籤欄的icon加上微動效，這類動效起到的是畫龍點睛的作用，不太會被注意，察覺到會讓用戶覺得很有趣味，比如阿里的淘寶、菜鳥裹裹…我覺得鵝廠的QQ做的最有意思，底部標籤欄icon不僅有微動效，而且icon的笑臉會自動轉向看向被點擊的一側，並且長按icon移動時它也會根據手指的方向轉動，十分有意思，符合當下95後00後的用戶心態。
3.icon的細節刻畫越來越重要
目前icon的設計已經不單單只滿足於簡潔易懂為前提，同時細節的設計也十分重要。在色彩上可以加以漸變，線性圖標也可以加以色彩的對比等等，會顯得icon是精心設計過的，帶給用戶的感受也會上一個檔次。
四、卡片 投影相結合
ios11中採用了大圓角卡片設計，它不再像過去MD中的小圓角那樣呆板，大圓角讓設計更加輕快大氣。相信大家已經看到了很多卡片都使用了投影這一手法，輕微的、似有似無的投影，不會被用戶立即察覺，但是會給設計增加深度，形成層疊的關係，更加醒目，可以更好的抓住用戶的注意力。
五、漸變色當然依舊十分流行
漸變色是今年最大的趨勢之一，開始於16年，Instagram將自己的logo改變成漸變色，這一趨勢便開始流行，國內的app也開始效仿，目前淘寶、QQ等狀態欄就是使用自己的品牌色進行漸變。在設計漸變色的時候，要做到色彩的過渡柔和，顏色明快，避免生硬，可以有效的提升用戶體驗。
六、3D效果正流行
今年C4D大熱，相信大家已經感受到了，今年雙十一很多商家都使用了3D效果，有的還加上了動效，可以讓你全方位、多角度、更加真實的觀察商品。目前還不會C4D的設計師們，為了提升你的競爭力，有必要學起來了，畢竟技多不壓身。
七、插畫風格也是大趨勢
插畫風格運用的越來越廣泛，適用於app當中的啟動頁、預設頁、banner圖、專題頭圖、彈窗插畫、icon等等，運用時要和app的整體風格搭配，有趣味、富有創意的插畫會讓用戶對app的好感大幅提升。
btw，今年比較流行的孟菲斯風格設計，我個人也很喜歡，在地鐵站看見各大品牌掛出的海報十分搶眼。該風格色彩比較鮮明、活潑、多採用高飽和色彩，18年估計還會繼續流行一陣。
八、交互動效一直很重要
交互動效越來越多的使用在ui設計中，它對於產品設計的作用包含：傳遞層級和狀態信息，好的動效應該是隱形的，以提高可用性為前提，提升體驗為目的。它的幾點特性：快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果。
九、動態視頻的應用
1.啟動頁的小視頻
一般小視頻使用在啟動頁多用於第一次打開app的場景，對用戶的代入感較強，能夠很好的感染用戶的情緒，但是視頻時間不宜過長。
2.由動態圖片轉變成動態視頻
為了吸引更多用戶的注意力，手機banner設計上採用了動態視頻進行展現，另外淘寶商品詳情頁也會放置動態視頻效果，方便360度的查看商品，刺激你剁手的慾望。
另外一些網頁的首頁也會放置高質量、有故事性的視頻，會讓你的網站與眾不同。
十、響應式設計
隨著移動端的增長，手機已經超越了pc機作為日常瀏覽網站的第一選擇，Google推出的MD響應式柵格系統，由於人力成本過高，國內大部分網頁都沒有做，國外採用響應式設計的網站有：Youtube、Spotify、Behance…國內的有京東、騰訊視頻等。這種響應式設計確實比較複雜，但是這個趨勢會一直繼續下去，對於產品、公司而言，還是需要量力而行的進行升級。
十一、VR/AR/VUI是未來的大趨勢
眾所周知，現在VR（虛擬現實）和AR（增強現實）大火，它倆的核心都是計算機視覺。VR目前在娛樂領域被使用，而AR將會真正影響我們的工作和生活，多用於多媒體、市場營銷、教育等方面。
17年春節支付寶的VR找紅包，美圖秀秀等拍照軟體的功能普及，這類交互方式都是對用戶的代入感比較強烈，體驗感較好。
從Siri、Amazon echo、Google home、小冰等等的發展來看，VUI（語音用戶界面）與GUI不同，屬於一個新領域，將基於「對話」進行設計，呈現給用戶的主要是說和聽。VUI是最自然也是最省事的交互方式，但是不會完全取代GUI，而是更好的協作。
這些領域對於設計師而言都是比較新穎的，也是發展初期，我們需要時刻保持學習的心態，提升自己的競爭力。
二、UI設計趨勢
全感官體驗
All-sense experience
趨勢簡述
人有五感，強化體驗記憶的最有效方式就是五感相結合。看見、聽見信息已成為體驗常態，而更真切的感知信息是用戶體驗升級的客觀訴求，全感官體驗能更好的打造「身臨其境的沉浸式」體驗印象。2018年我們將會看到更多以虛擬+實體組合的全感官體驗方式，用戶在交互過程中獲取更多維的與真實場景匹配的信息反饋（聽覺、嗅覺、觸覺等），加深對信息的理解和體驗記憶。
運用案例
全感官體驗目前在遊戲領域有了較為廣泛的探索。《星艦指揮官》一改沿用十幾年的滑鼠，鍵盤遊戲方式，直接以語音驅動進行遊戲，同時搭配VR眼鏡，真實模擬了指揮官的科幻工作場景，用戶可以使用更隨意更生活的語句，來實現更多控制動作。
星艦指揮官語音控制遊戲
全感官體驗在虛擬現實場景中應用也很多。如Hardlight Suit力反饋背心主打觸覺模擬為主的全維度身體感知，這款裝備配有16個振動點和觸覺感測器，能夠為用戶提供沉浸其中的虛擬現實體驗；VRgluv能讓我們感受到與任何目標交互的不同方式，通過力覺反饋技術，對手指的模擬動作以及觸感進行真實的還原，這樣無論是棒球、射擊還是射箭，甚至是手指輕划過頭髮絲，都可以獲得身臨其境的沉浸感。
Hardlight Suit力反饋背心
VRgluv
不止於「屏」
Not be limited to the screen
趨勢簡述
人與設備的交互本質上是與信息的交互，信息的載體本就可以不止於屏。人達成目標的交互介質有更多屏幕外的拓展，更多「類屏幕產品」或者無屏幕產品出現，運用投影、語音、AR/VR等技術，實現人與設備之間的互動。不止於屏這一趨勢拓展了用戶的可交互空間，豐富了互動場景，使用戶可以隨時隨地獲取信息獲得服務。
運用案例
Sony Xperia Touch便攜投影可實現投影在任何平面，並把這個平面變成可觸控的「屏幕」。通過感應探頭，你可以在平面上翻動網頁、打王者榮耀、切水果等等，所有的操作都如此方便、流暢。
SONYXperia Touch
Google Assistant可以通過自然的語音交互來幫用戶找歌曲播放、找新聞、打電話等等，並且就像一個朋友一樣，只要正常地交流就可以。
Google Assistant
Vuzix Blade打破了原來人們對AR眼鏡笨重的印象，外型輕薄，和太陽眼鏡一般。用戶可以通過眼鏡上的觸摸板來查看天氣、打電話、查看消息等等，也可以通過語音來控制。
Vuzix Blade
擬人化／情感化
Personification/ Emotionalization
古希臘哲學家泰勒斯說過「萬物有靈」，人機交互體驗是一種人機共生的狀態，可以看到現在乃至未來，無論是智能設備，機器語音交互將被賦予更多「靈性」。
1.有「情感溫度」的設備
Device comes with Emotion and Warmth
趨勢簡述
越來越多的硬體產品在設計過程中不僅具備滿足用戶需求的基本功能點，更多開始考慮產品的擬人化和情感化。機器從一個呆板的服務工具，逐漸變成一個有情感溫度的陪伴者或服務者。擬人化和情感化的運用從產品的外觀、材質、顏色、形象和交互方式（語音、撫摸等）等維度一改用戶對硬體產品冰冷僵硬的認知，使其更加貼合使用場景降低用戶的心理戒備，產生更多的情感互動。
運用案例
新一代Sony aibo機器狗有著更加形象逼真的外型，它會像真正的小狗一樣搖搖尾巴、彎彎腿做一系列動作，宛如一隻真正惹人憐愛的小狗。aibo還採用新的AI技術，學習周圍的環境，具有更強的適應性，和主人有更多情感化的互動。
aibo機器狗
My Special Aflac Duck是一隻毛絨絨具有「心跳」、「呼吸」，能夠搖頭，甚至可以跳舞的鴨子，它旨在給予兒童癌症患者安撫和陪伴。藉助觸摸感測器當孩子撫摸它時會有相應的反應，孩子們還可以把不同的情緒卡片（如快樂、悲傷等）插入鴨子胸前，這樣它會作出不同的動作、發出不同的聲音。這隻鴨子的感測器還可以和化療PICC線連接，陪伴孩子一起治療。
My Special Aflac Duck
Luka，一隻擁有靈動大眼睛的貓頭鷹是給孩子準備的繪本閱讀機器人。繪本放在它的面前，他就可以快速識別繪本，翻動繪本就可以自動閱讀給孩子聽。此外，Luka還會和孩子互動，發出笑聲，會撒嬌，還會根據不同的狀態作出不同表情。
Luka
2.更自然的語音交互
Voice Interaction in more Natural Way
趨勢簡述
想必你對Siri，在線客服這類語音交互並不陌生，那你是否發現現在和你會話的另一端變的越來越「有趣」？在這個「有趣角色」的幫助下，獲取信息、獲得服務的效率大大提高。更注重對話的場景、角色、上下文關聯性；會話的結構、語法、辭彙更加貼合人與人的交流模式是語音交互發展的趨勢。例如，機器不需要被反覆喚醒，更聰明地進行多輪會話，同時，通過AI技術逐漸學習人類溝通過程中的模糊語義，和人更自然的交流。更自然的語音交互能有效降低用戶的學習門檻，降低用戶對於機器設備的抵觸，促使設備更順暢的融入用戶真實使用場景。
運用案例
李彥宏說：「日常生活當中人和人進行交流的時候，不會拉著手才能說話，也不會每說一句話都叫一次對方的名字。」手機百度語音版採用了免喚醒詞語音交互，能夠不間斷聆聽用戶的語音輸入信號，並識別，只需打開語音播報內容模式，直接發出指令如「下一條」「大聲一點」便可操控，無需每次都喚醒，使人與機器更自然地交流。
手機百度(語音版)
Nomi車載智能系統，通過機器學習，逐漸能夠識別模糊的語義命令。如：給我們拍個合影，Nomi可以自動喚起拍照功能，當和Nomi說車快沒油了，它便會導航到最近的加油站，而不再需要輸入「幫我查最近的加油站」這樣機械的命令。
Nomi車載智能系統
天貓精靈支持類似朋友間的對話，比如「來個開心的音樂」，「今天天氣怎麼樣」，「明天呢」，這種前後相連的簡單對話更貼合真實的用戶場景。
天貓精靈
人工智慧個性化
AI-based Personalized Recommendation
趨勢簡述
個性化推薦已經發展數年，大數據和雲計算的技術日趨成熟，更加精準、更加智能、與個體個性化需求相匹配的人工智慧將成為趨勢。產品在先前做推薦、關聯的基礎上，更多的趨向認知、聯想、預測等模式。個性化的人工智慧在深入理解用戶畫像和痛點的基礎上，將更好地掃除顧慮、建立用戶信任、形成「你最懂我」的用戶認知，有效提高用戶決策效率，製造體驗驚喜，提升產品的用戶粘性，更有效的促成商業目標的達成。
運用案例
過去，基於數據的推薦，主要以篩選內容、關聯內容為主。現在Netflix的個性化推薦系統針對同樣的電影海報資源，會分析每個用戶的喜好，以匹配個人喜好的視覺風格將電影海報展示在用戶面前，增強用戶的看片意願。
Netflix根據個人喜好對同一電影海報做不同風格展示
過去，投資理財用戶一般需要面對大量數字和K線進行複雜的分析判斷，現在招商銀行摩羯智投通過機器學習演算法提供理財服務，智能量化、甄選產品、風險監控，為用戶決策提供了更加便捷的方式。
招商銀行摩羯智投
市面上在線教學多數是依據固定的課程大綱進行學習，Summit Public Schools 個性化學習計劃平台強調「以學生為中心」，探索式的學習模式。一方面，給學生更多關於其學習的速度和方向的命令，隨時為學生提供其需要的學習資源，另一方面，使教師的行為更像是「教練」，他們通過學術標準監測學生是否按照他們的要求學習。
Summit Public Schools
更高效更低成本的交互方式
More efficient and lower-cost interaction
趨勢簡述
隨著生物識別、語言識別、網路提速、硬體升級等技術的發展，機器對人類的意圖、事物的理解、複雜問題的認知越來越深入，更高效更低成本的交互方式將使學習成本降低，操作和反饋的效率更高，一定程度上縮短了體驗路徑、解放了雙手雙眼。不斷強大的機器輔助能力，有效解放用戶的大腦，使人更好的聚焦決策和創意。例如，生物識別技術精度的大幅提升，使支付等身份認證環節前所未有的安全、快捷且便利；語音交互因其可以在同一時間處理多項任務的特性，正在場景化的體驗中發揮出巨大的優勢；工具類AI幫助用戶解決了繁瑣的數據分析、處理等操作，使其可以專註於溝通交流、創意創作。
運用案例
2017年，vivo展示了為全面屏智能手機設計的屏下指紋技術，取名為clear ID。這一技術識別速度快，連濕手也可以解鎖，解鎖更便捷；三星S8採用先進的虹膜識別技術來解鎖手機，當你拿起三星S8手機，注視屏幕上的兩個圓，手機會掃描你的虹膜，從而識別用戶身份，簡單高效；iphoneX採用了新的身份認證——FaceID，通過手機「齊劉海」的原深感攝像頭的掃描來感知用戶的面部特徵，記住用戶的臉部信息並快速識別。
藉助圖片識別，我們不僅可以快速知道所查詢對象的描述信息，而且還能知道它是什麼樣的。Microsoft Seeing AI可以利用人工智慧的力量，識別、描述所拍的事物，進行認知、理解、轉述。人工智慧可以認出圖中是什麼，還可以對其進行描述，甚至對場景進行敘述，這一應用可幫助視覺障礙人群理解這個世界。
Seeing AI
在設計工具領域，設計一張海報，傳統的方式需要藉助商業圖庫，花費大量時間和人力來做素材篩選的工作；後來隨著技術發展，提供了以圖搜索的方式，提高了篩選效率；未來，大數據+人工智慧輔助創作將會廣泛普及，讓人能夠把更多的精力聚焦在創意上。Adobe Sensei提供基於雲平台的數據服務，圖片的查找和篩選會根據設計者的需要實時關聯、幫助發現和搜索素材，基於大數據進行建模，預測設計方案，更加高效的輔助創作。
Adobe Sensei
線上線下自然無縫融合
Online-Merging-Offline Service Experience
趨勢簡述
用戶達成目標，獲得需求滿足的過程本就是基於某一特定場景進行的，用戶只關注自己的目標能否更快、更好的實現，並不會過多考慮實現方式本身。因此，圍繞解決用戶問題這一目標，設計將不再僅聚焦單一觸點，糾結線上和線下的邊界，更多考慮基於場景的、整體的、系統化的閉環服務體驗，通盤考慮用戶產生意願-進行決策-採取行動-達成目標全鏈路涉及的人工觸點、物理觸點和數字觸點，實現線上線下多觸點自然無縫融合，給用戶達成目標帶來更多的便捷性、易達成感和驚喜感。線上線下數據打通，大數據驅動，AR、VR給多觸點自然無縫融合提供了強有力的技術支持。
運用案例
Amazon GO帶給用戶一種智慧購物體驗。線上賬戶和線下購買行為在入口處自動綁定，並利用攝像機人臉識別確定身份；在線下購買過程中，通過攝像機識別手勢、麥克風判斷位置，結合貨架上的紅外線感測器、壓力感應裝置、荷載感測器確定消費者真正購買的商品，同步到線上購物車；離店後，線上賬戶自動結賬，購物完成。
實景GO通過對「家」場景的3D實景復刻，消費者逛天貓時可以一站式選齊電視、沙發、空調、冰箱、衣櫃甚至鮮花、衣架等居家常用的電器家居用品，無需按照類目一一挑選，免去以往漫長挑選、搭配的過程。
虛擬試衣鏡，用戶走到鏡子前被掃描識別後，鏡子內會直接變幻出另一個虛擬用戶，通過對臉型、身高、體重、髮型、膚色甚至身材細節的調整，無限貼近用戶本人，點擊就可快速試「穿」各種陳列在虛擬貨架上的服裝。在智能新零售環境里，當用戶打開購物app，她只會看到符合自己身材，和自己消費需求最貼合的服裝，極大增強購買意願，有效降低決策成本，縮短決策路徑。
虛擬試衣
想獲得關於交互設計的點點滴滴
TAG:設計謎 |