即將成為主流的2015—2016交互體驗趨勢
五月份最重量級的交互設(shè)計文!今年百度的設(shè)計師們從體驗角度出發(fā),結(jié)合大量現(xiàn)有報告和資料,尋找那些已經(jīng)嶄露頭角,并且會在今年形成一定規(guī)模的交互體驗趨勢。與去年不同的是,文中同時給出了這些趨勢的應用場景,絕對值得深入閱讀 >>>
移動產(chǎn)品篇:
2015年移動應用數(shù)量增長依然強勁,但是移動交互體驗卻在發(fā)生著變化。較之去年層出不窮的新穎形式,今年交互體驗趨勢中,更多的是某一個方面的體驗優(yōu)化與深耕,而較少有創(chuàng)造性的引領(lǐng)者出現(xiàn)。這說明移動應用在市場在“爆發(fā)”后進入了一個新的階段。這與智能機市場趨于飽和、手機屏幕尺寸增長與用戶對應用的認知提升有著密不可分的關(guān)聯(lián)。
一、多媒體搜索實用化(Extensive Usage of Multimedia Search )
隨著技術(shù)的不斷突破,搜索的輸入方式不在僅僅局限于文本搜索,多媒體搜索在搜索結(jié)果質(zhì)量以及精準度上了有了明顯的進步,創(chuàng)造了從娛樂向?qū)嵱玫倪^渡。在很多移動場景下,多媒體搜索較文本搜索有著不可替代的優(yōu)勢。通過《百度移動趨勢報告2015》研究發(fā)現(xiàn),移動互聯(lián)網(wǎng)下一代主力軍(零零后)對多媒體搜索的接受度更高。另外數(shù)據(jù)流量方面,4G增長迅猛也給多媒體搜索實用化提供了必要條件。
Camfind可以通過拍照物體進行搜索,準確的識別出搜索對象的顏色,質(zhì)地,以及屬性。并提供相關(guān)圖片與相關(guān)搜索結(jié)果。

Google的語音識別已經(jīng)成為其搜索的主要形式之一,在很多私人場景中的應用較高,并且其語音轉(zhuǎn)化成文本的精準度也有了很大的提升。

應用場景:文本輸入成本過高,沒有能力文本輸入,或無法用文本描述搜索對象的場景 。
二、場景化前置,服務觸達增強(More Entries Proposed Contextually)
根據(jù)TalkingData發(fā)布的《2014移動互聯(lián)網(wǎng)數(shù)據(jù)報告》中的數(shù)據(jù),全國平均每部移動設(shè)備上安裝34款應用,平均打開20款。大量應用帶來的競爭,促使更多應用希望通過入口前置,提高使用頻率,增強易用性。但是在入口前置的方式中,只有部分提高了便捷性,更多的只是增加了用戶的使用負擔與負面情緒。而適合場景的前置則會顯得尤為貼心,減少用戶干擾,增強產(chǎn)品粘性與人文關(guān)懷。
網(wǎng)易云音樂將“上一首”、“收藏”、“刪除” 等快捷功能都前置到了鎖屏界面。為那些想快速操作的用戶帶來極大的便利。同時這些功能也可以收起至“菜單”,可謂是非常的貼心的設(shè)計。高德地圖將手機導航界面前置到了鎖屏,解決了走路用手機導航時需要頻繁解鎖的不便。

IOS系統(tǒng)的鎖屏界面,會根據(jù)用戶的地理位置以及周邊信息推薦可能需要的應用,例如用戶在招商銀行附近打開鎖屏界面,屏幕右下角會出現(xiàn)招商銀行應用的快捷入口。

應用場景:使用場景明確,需要頻繁操作的應用??稍阪i屏界面、通知欄等位置加入場景化前置。
三、操作極致簡化,核心效率提升(Minimalism of Interaction)
互聯(lián)網(wǎng)終端多樣化,使用場景復雜化,使得用戶的操作越來越碎片,而且缺乏耐心。去繁就簡,縮短流程成為了不可避免的趨勢。與此同時,用戶對主流的交互方式的認知程度有了增強,對常規(guī)的交互流程的信任度也有了較大提高,一些兩年前看似激進的簡化方式,現(xiàn)在并不會給用戶帶來過多的認知成本。
Blink將多媒體社交的過程極度簡化,進行圖片內(nèi)容社交時,將”選擇發(fā)送對象”,“創(chuàng)作發(fā)送內(nèi)容”,以及“發(fā)送”三個動作,均由“點擊聯(lián)系人”一個觸發(fā)事件完成。進行視頻社交時,只需長按聯(lián)系人,之后后松手即可完成整個過程。

Chrome將窗口的“關(guān)閉”、“新建”融入到了“刷新“動作中,一個下拉動作的變形包含三種操作形式。避開了在多窗口中進出的繁瑣流程。

應用場景:操作步驟多且操作頻繁的流程簡化。如多媒體社交、支付等。
四、信息結(jié)構(gòu)輕量化,減少負擔(Lightweight of Information Structure)
大屏空間下內(nèi)容承載更為復雜。在直觀的扁平化視覺設(shè)計的背后,信息結(jié)構(gòu)扁平化更為重要。出現(xiàn)了信息結(jié)構(gòu)的輕量、清晰化趨勢。輕盈的信息結(jié)構(gòu)不僅可以強化內(nèi)容本身,還能夠減少用戶對信息結(jié)構(gòu)和邏輯的理解成本,縮短用戶到達信息的距離。
百度手機助手在瀏覽應用詳情的核心、高頻路徑中,通過半層彈層模式為整體框架和瀏覽行為“減負”,盡量避免了頁面級的跳轉(zhuǎn),同時降低了用戶瀏覽行為的負擔感,使操作體驗更加輕盈自然。

UniqDay做為 “小而美”的功能型應用,在產(chǎn)品設(shè)計之初會更多考慮到用戶的學習成本和接受度。UniqDay就是通過輕量化的結(jié)構(gòu)設(shè)計讓用戶在第一次使用的時候就記住它。對于倒數(shù)日的添加、編輯設(shè)計,UniqDay都巧妙的通過彈層或平移方式幫助用戶理解當前所處的位置,使核心模塊穩(wěn)定在用戶的視線內(nèi),減少頁面級的跳轉(zhuǎn)。

EMO突破了傳統(tǒng)的框架布局,極端強化了核心功能。這種沉浸式體驗設(shè)計是結(jié)構(gòu)輕量化、扁平化極端的表現(xiàn),使得用戶更專注于根據(jù)心情聽歌的功能與呈現(xiàn)內(nèi)容本身,而不被其他的操作路徑打斷。

應用場景:為信息層級較多、頁面跳轉(zhuǎn)較多的應用減負,或著功能較簡單的垂類應用。
五、動效表現(xiàn)更具功能指向性,跨越成本收益鴻溝
2014年底Android5.0 Lollipop、iOS8兩大移動終端系統(tǒng)的發(fā)布,流暢的動效逐漸成為一個應用或系統(tǒng)中的“標配”。目前動效的使用出現(xiàn)了對于設(shè)計與情感的過度消費。需要讓其發(fā)揮更多指向性和功能性的作用。通過指向性、提示性等動效自然映射抽象語言,更加直觀的體現(xiàn)出界面、信息之間的層級和邏輯關(guān)系,讓應用更加簡單易懂,簡化用戶引導流程,降低用戶學習成本,甚至帶給用戶驚喜。
Android5.0 Lollipop系統(tǒng)依賴于Material design設(shè)計語言對卡片化設(shè)計的定義,做出了教科書般的量子動效設(shè)計案例。系統(tǒng)上使用大量擬物化,指向性明確動效來引導用戶,體現(xiàn)頁面層級邏輯。

Yep!采用流暢的位移和變形動效,讓用戶理解搜索流程(選擇一個活動-發(fā)送邀請-等待想做相同事情的其他用戶匹配-搜索結(jié)果)的交互機制,使流程更平滑,更具自解釋性。

應用場景:該趨勢將普遍適用于應用的場景轉(zhuǎn)換、提示,以及復雜信息層級表現(xiàn)
六、HTML 5互動內(nèi)容廣泛應用,持續(xù)豐富產(chǎn)品表現(xiàn)
2014年10月W3C宣布HTML5定稿。HTML5技術(shù)的發(fā)展引發(fā)了互動形式的創(chuàng)新:可以看到包括搖一搖、3D視圖等形態(tài)的廣泛使用。同時,可以看到2014年主打故事類場景、產(chǎn)品情懷等HTML5的設(shè)計,集中引爆移動互聯(lián)網(wǎng)傳播,并將在未來帶來持續(xù)的浪潮。
大眾點評的《我們之間就一個字》,主打文字方式的閱讀表現(xiàn)。以差異化的音效、動效營造出不同的故事場景氛圍,利用文字巧妙勾勒出不同主題的文字故事,通篇無人物角色卻處處引發(fā)用戶自身聯(lián)想,多維度的促使用戶產(chǎn)生情感共鳴。

《夢幻水晶球的世界》,細膩視覺畫面呈現(xiàn)給用戶一個美妙的視覺故事場景。而3D視圖旋轉(zhuǎn)等動效讓用戶可以將視角拉近看細節(jié)或推遠看全局,像語言故事一樣展開故事脈絡(luò),引發(fā)用戶好奇心并吸引用戶參與。

應用場景:強調(diào)品牌影響力的運營活動,適合情感化設(shè)計。
七、卡片化在多終端持續(xù)發(fā)揮優(yōu)勢,成就經(jīng)典設(shè)計模型
卡片化內(nèi)容呈現(xiàn)打破了原有的模式:內(nèi)容至上,去除一切干擾。是目前應用比較廣泛的以一種設(shè)計模式。在用戶需要瀏覽大量信息的場景下,提高了內(nèi)容的呈現(xiàn)效率。同時卡片化在多平臺網(wǎng)站設(shè)計,以及多種屏幕尺寸適配方面依然具有非常明顯的優(yōu)勢。
手機app的內(nèi)容展現(xiàn)就采用了卡片化的形式,在信息展現(xiàn)上非常突出,同時針對不同尺寸的設(shè)備界面展現(xiàn)效果都很贊。

在最新發(fā)布的apple watch應用中,卡片化的設(shè)計應用也很頻繁。在下面這個手機百度的界面中,卡片化的設(shè)計能夠把團購的重要信息一覽無遺的展現(xiàn)出來。手機百度中地理位置服務也采用了卡片化的設(shè)計,保證不同的卡片組合及內(nèi)容展現(xiàn)均能突出服務內(nèi)容。。

應用場景:需要展現(xiàn)較大量信息的應用,跨平臺應用等
八、大屏操作優(yōu)化普及,塑造高效體驗
現(xiàn)如今,大屏手機已經(jīng)隨處可見。更大的屏幕可以展現(xiàn)更多的內(nèi)容,優(yōu)勢不可比擬。根據(jù)《IDC世界智能設(shè)備跟蹤報告》分析,大屏設(shè)備市場份額會持續(xù)上升。用戶也越來越以開放的心態(tài)接受大屏手機。
屏幕越來越大,我們的手則不然。對于4英寸以上的大屏手機,用戶的操作體驗并不盡如人意。由于屏幕過大帶來的操作不便利亟待解決,“為大屏設(shè)計”應運而生。通過優(yōu)化界面結(jié)構(gòu),增加手勢操作,以及適配單手操作布局,可以幫助用戶解放雙手,在大屏下更加自由便捷的進行操作。
1、重點功能底部聚焦:
根據(jù)情況將“功能”或“導航”等原本在頂部導航欄的按鈕下移到界面底部,確保用戶在單手操作時可以在易于操控的區(qū)域內(nèi),縮短操作路徑,降低點擊成本。輕單、KEEP、MONO等內(nèi)容類的應用將主要功能按鍵設(shè)計在屏幕底端,不僅提升了操作的可觸達性,同時突出了內(nèi)容,改善了閱讀瀏覽體驗。

2、更多手勢操作,滑動代替點擊:
以iOS用戶為例,常規(guī)返回按鍵多設(shè)定在屏幕左上角,對于大屏用戶來說是不易觸及的點擊盲區(qū)。而Storehouse配合手勢操作輔助,右滑退出界面,帶來了極大便利性,滑動代替點擊退出的用戶習慣也逐步養(yǎng)成。PEEK是一個以手勢為主導的應用,通過手勢變化進行相應操作,大膽的舍棄了功能按鍵。

3、單手模式,縮小操作區(qū)域:
由于單手操作需求的普遍性,無論是客戶端產(chǎn)品還是系統(tǒng)平臺都做出了相應適應單手操作的解決方案。用戶在特定場景下通過簡易觸發(fā)方式進入單手模式,縮小操控范圍,將其控制在頁面中下部手指易于觸及的區(qū)域。iOS系統(tǒng)雙擊Home鍵以及錘子手機的下拉懸停,都是在系統(tǒng)層級的交互解決方案。產(chǎn)品層級中,百度輸入法創(chuàng)新設(shè)計了可自主調(diào)節(jié)位置和大小的輸入面板,得到了很好的用戶反饋。

應用場景:平臺類、工具類等,需要單手操作頻率較高的應用
九、情感化權(quán)限請求,轉(zhuǎn)化能力陡升
部分iOS應用在初次使用過程中,會因為功能服務依賴,向用戶請求調(diào)用系統(tǒng)功能的權(quán)限,如獲取地理位置、訪問相機等。請求方式通常為對話框詢問,直接但唐突。通常用戶應對這一場景做出的拒絕行為,導致關(guān)聯(lián)功能服務的體驗損失,進而會導致流水用戶。而在新手引導中強調(diào)權(quán)限請求的“前置化”則會有效解決這一問題。通過情感化手段傳遞服務價值,使得用戶理解調(diào)用的目的,會有效提升用戶信任感進而提高授權(quán)轉(zhuǎn)化率。
Looksery產(chǎn)品在調(diào)用iOS系統(tǒng)相機請求之前,通過情感化圖標和詢問式語言,向用戶傳達了調(diào)起相機的作用,讓用戶了解調(diào)用目的,使授權(quán)轉(zhuǎn)化率得到很大的提高。

Gogobot產(chǎn)品在獲取用戶地理位置之前,描述對應使用場景及其必要性,滿足用戶對開放此權(quán)限的心理預期,提升授權(quán)轉(zhuǎn)化率。

應用場景:適用于需要請求系統(tǒng)權(quán)限的應用,尤其是對其強依賴的應用
總體來講,移動應用體驗在未來的一年內(nèi),會在各自的領(lǐng)域細化與深耕,將體驗向更加極致的方向推進。同時,屏幕尺寸、用戶認知積累,以及產(chǎn)品市場的變化,給用戶體驗提升提供了更加有利的條件。這些變化希望能夠被設(shè)計師們掌握利用,創(chuàng)造更優(yōu)秀的體驗。
相關(guān)文章

15 個為編程初學者準備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章,我們將分享15個可以學習編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習,希望對你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對單位,一般用于pc端網(wǎng)頁開發(fā),因為是絕對單位所以在移動端上的使用體驗并不是很好,rem它是描述相對于當前根元素字體尺寸,是相對單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點,選擇適合的壓縮工具為將來做項目開發(fā)使用是一件很重要的事情?。≡谶@介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進程的,有瀏覽器主進程,網(wǎng)絡(luò)進程,渲染進程,插件進程等,在將html,css,javascript解析成一個頁面的時候,就需要多個進程的分工合作2023-05-01
- 本文為大家整理了常用的文件對應的MIME類型,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語言、跨平臺進行文本轉(zhuǎn)換、處理的要求2021-11-27前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-12-02
這篇文章主要介紹了告別硬編碼讓你的前端表格自動計算,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-27



