2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

佚名發表於2016-01-09

【編者按】文章來自百度MUX翻譯小組,應作者要求,如文章已獲雷鋒網授權轉載,也請保留原標題。

譯者注:本文譯自UXPin出品的電子書Mobile Design Book of Trends 2015&2016中第五章Delightful Microinteraction。這本電子書結合豐富案例講述了2015-2016年間重要的移動設計趨勢,共有6個章節:靈巧的手勢操作、層級化的移動介面、雋永的字型排印、扁平化設計、愉悅的微互動、小卡片。

2015-2016最懂你的移動設計是什麼?哦,<a href=/mobile/iphone/ target=_blank class=infotextkey>iPhone</a>就可以告訴你

如果你理解和創造一個令人感到驚豔的應用,那麼它需要有一個很酷的故事和令人印象深刻的視覺設計。但其實還不夠,它需要更多——能夠與使用者建立起聯絡和讓使用者覺得這應用是有生命的。

這就是為什麼微互動存在的原因。

微互動是創造一個驚豔應用的神秘配方。使用者接觸到這些微互動的瞬間,會出現意想不到的喜悅,然而除了設計師,使用的人幾乎感受不到這些瞬間的存在。

你每天都會體驗到上百次微互動——

例如每當你關掉鬧鐘;看到訊息閃現在螢幕;提示你在玩遊戲;跳過一首歌的播放甚至在你早上上班時根據交通警報改變你的路線。

每一個微小的瞬間形成了不同的微互動。雖然你不會去思考這些細節,但每一個微互動都會影響著你是否以後繼續使用這些應用。

什麼是微互動?

微互動可以是使用者任何一次基於任務與裝置發生的接觸,使用者很少意識到大部分正常工作的微互動出現在什麼時候,是怎麼發生的,或者長什麼樣子。

正如Dan Saffer’s寫的書(高度推薦)描述,微互動幫助實現了三個特定功能:

• 快速溝通或反饋

• 操作結果視覺化


• 幫助使用者操作螢幕上的元素

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Slack)

Slack是一款集以上三個功能於一身的優秀應用。Slack讓使用者在一個封閉對話流裡進行溝通,可以新增附件,單個標記。Slack會給使用者實時更新狀態(例如標記資訊已讀狀態),還幫助使用者瀏覽周圍,使用推送訊息提醒和其他形式使使用者同步共同內容。

微互動在不同方面影響著使用者和應用功能:

• 關掉或開啟某元素

• 在任何數字媒介中進行評論

• 改變一項設定和程式

• 檢視通知或訊息

• 下拉螢幕來重新整理內容


• 與資料元素進行互動,如檢視天氣

• 完成任何單一任務

• 連線裝置,例如多玩家遊戲或使用你的筆記本電腦連線印表機

• 在網站上對圖片或影片進行分享或點贊


簡單來說微互動就是使用者的一個動作觸發了裝置的另外一個動作。每個互動設計動作是建立在以使用者為中心的設計理念,數字工具的工作和功能反映使用者的實際操作。這也是讓互動設計可以符合人類操作習慣的秘訣。

微互動真正的作用是什麼?

正如你從上面的列表所看到,其實沒有很好的結論能總結所有的微互動。微互動服務於多規則,但具體地說,它們應該創造更多互動。

當你考慮如何設計一個微互動時,不僅要思考這個具體的動作或者任務,還要清楚這個作為使用者的操作流程中一部分的微互動的作用是什麼。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Elevate)

從本質上來說,微互動應該是讓使用者的身體感覺或者做一些事情
:

• 觸控螢幕

• 高興地笑

• 學習或理解事物

• 連線其他使用者

Elevate應用使用這些操作事件來搭建遊戲形式的學習介面,使用者必須觸控螢幕才能回到問題和修改答案,頁面上漂亮的動畫可以取悅使用者。這應用的目的是為了幫助使用者訓練大腦。(設計這個圖片型遊戲是為了更好地幫助你去理解和使用語法)使用者可以分享他們的分數和結果給他們的朋友和其他使用者。這聽起來像一個很簡單的遊戲,對吧?但這些其實都是使用者期望從幾乎每一個應用看到的東西。

這些行為都是為什麼需要微互動的核心。這些小而輕的“數字時刻”被視為一種情感聯絡。微互動允許使用者感覺或接觸另外一個使用者或物件。

微互動的4個元素

最早研究微互動的是Dan Saffer。

只需google一下“微互動”,每條結果裡的相關資訊基本都會出現Dan Saffer這名字。 他寫了一本全關於微互動的書。Saffer聚焦在微互動的四個結構——這是最好的方法去理解並創造它們。

• 觸發器:啟動微互動。舉個例子,我點選了一個心型圖示去點贊一個頁面。

• 規則:在互動裡發生了什麼。使用者不能“看見”這些規則,但可以透過反饋(下一個頁面)明白這些規則。在這案例,點選心型圖示會增加這個頁面的內容到使用者的資訊流裡。

• 反饋:讓你明白在微互動裡發生了什麼。心型圖示用顏色填充以及會跳動,伴隨著動效漸變消失的“安全地加入資訊流”訊息通知使用者發生了什麼。

• 迴圈和模式:決定微互動動作的時長和以及隨著時間如何重複和發展的。舉個例子,我們現在所描述的微互動,甚至可以提醒我們6個月前第一次點讚的頁面。

每一個互動的細節都應該告知使用者,作用是什麼。正如Saffer所說的,大多數人甚至不知道微互動有什麼用,除非在使用中出了問題。

你是否正在考慮如何反饋?

反饋是微互動迴圈中的最重要的部分。這是微互動連線使用者和介面的階段。反饋決定了微互動將究竟是如何工作的。

試想一下,你需要7點起床所以需要在你手機上設定一個鬧鐘。當鬧鐘響起來時你會做什麼?你是起床來關掉這鬧鐘嗎還是繼續再睡一會兒?

這個細小的動作告訴你應用需要什麼微互動——重新設定鬧鐘的下一次鈴響或者自動延後9分鐘再響鈴。這個在使用者和系統之間的反饋迴圈是完整的。沒有使用者的操作,它沒有被重新設定,鬧鐘的聲音永遠不會停止。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Wunderlist)

這同樣適用於核對代辦事項列表事項時,就像上面的Wunderlist應用。

當你在一項時間上打勾時就意味著這個應用應該用微互動反饋你剛剛打勾的行為。你瞬間明白哪些事項是完成的,哪些是還沒做的。

雖然這是個簡單的例子,但我們可以從中學到很多。

至少,它告訴我們,使用者想要透過應用中的微互動清楚的制定下一步,並且希望它可以隨著時間和操作很直觀地演變。

設計細節是微互動的核心

設計微互動以及怎麼處理細節將成就或破壞你的專案,互動是一個你不能忽略的重要設計元素。

但是你應該怎麼去使用它?什麼是你需要思考的?

微互動必須能透過重複使用才能驗證它的價值。有一些微互動第一次使用可能感覺新奇有趣但往後的100次使用可能會成為煩人的微互動。對於噱頭和古怪的設計一定要慎重小心。

簡單的規則。簡單的樣式,簡單的語言,簡單的顏色以及簡單的設計。不要設計出比功能還複雜的微互動。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Dark Sky)

賦予微互動人類的聲音。文案讀起來就應該像人說的話,不應該像一臺機器。

• 在複製上要多留心。你使用的文字和語言必須與此時的情景匹配。如果只使用文字,那麼需要保持文字是簡單,健談和有用的。

增加有趣但不要太瘋狂的動效。MacBook的Dock上一個彈跳的圖示可以認為是一個程式在載入,它能讓你知道這個程式正在響應但又不會妨礙到你現在的任務。

你現在設計的東西必須與其他元素保持視覺和諧。如果你的應用使用藍色為主調,那麼你設計的微互動就應該使用相同的色調,這樣才能在視覺上與你的主設計保持一致。儘管對比是很好的設計方法,但還是要謹慎地使用它。

請不要過分思考微互動。過分設計是致命的,例如簡單的文字訊息通知,只需要在螢幕上簡單地展示足夠的資訊已經很有效了,例如展現這訊息的傳送者,內容以及如何去回覆它。

仔細地考慮每一個細節。因為微互動是如此的微小,每個設計的元素都很重要。確保每一個細節,在釋出應用前確保最後一畫素也是完美的。

請考慮微互動的擴充性。它對於每個使用者每一時刻是否都是完全一樣的或者可以改變的?(考慮上面提到過的鬧鐘例子,每一次點了“再睡一會”按鈕,鬧鐘聲音會變得更大)。更細微智慧的細節會產出最棒的微互動。

將微互動合併到設計中的方法 


這裡有好多方法去思考如何將微互動融入到設計中。沒準你實際上已經設計了一段時間,但沒在微互動設計投入時間。

每一個微互動的支柱都是由精心設計過的動效組成的。(你可以從免費的電子書《互動設計和動效》中學習更多關於動效設計的知識)

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Apple)

舉一個近些年最好的微互動之一的例子。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Apple)

iOS9中的拍照應用中,增加了一個叫“生動” (live photo)的功能,當一張照片是“生動的”,它其實更像Gif一樣被記錄,有趣微互動的竅門是如何讓應用保持瞬間的痕跡。

當你拍了一張你的小狗的照片,它在照片裡伸出它的舌頭。在相簿裡照片是完全靜態的。但當你輕按照片,螢幕模糊的一剎那,它變成“活”的照片,展示你幾秒鐘狗的呆萌(甚至聲音)。Gif和影片都不是新的技術,但在這裡的混合卻使照片變得非常獨特。事實上,如果你在照片間切換,部分照片在過渡時也會有動畫。

建立一個微互動比拍一個影片要簡單(只需要堅持迴圈按播放鍵),也比Gif更具有沉浸感。生動照片(live photo)讓使用者回到過去再次體驗當時完整的瞬間。相簿不僅僅是個旋轉木馬,也是一個可移動的裝載人們的記憶和感覺的地方。為了重建標準相簿應用的微互動,蘋果實際上引發了改變相當大的體驗。蘋果實際引發了一次相當大的變革。

當然,這裡還有很多事情你可以在你的應用裡體現你的微互動。有兩個最常用的體現:使用通知以及點選按鈕或連結的動效。每一個方法都會促進使用率和可用性。

當你決定如何設計微互動時,你需要考慮使用者第一。背後的關鍵概念是微互動的可用性:

• 一觸碰=一個動作(例如一個分享,或者在我們前一個例子裡的觸發一個照片動效)

• 預測使用者下一步的操作。在生動照片的例子中,動態的照片過渡延續了使用者滑動照片產生的微互動。蘋果知道,人們當觸發了第一張照片時會繼續瀏覽後面的圖片,所以它保持一致性的體驗。

一旦你有了這一發現,你必須讓這個微互動幾乎看不見。我們不能反覆強調,微互動必須是感知很弱的。就像一段好的魔術,觀眾不需要看到觸發,規則,反饋和緩解的整個過程,觀眾只需要知道應用完成他們想要做的。如果你可以達到想變魔術一樣的感覺,你將會有更多機會讓使用者使用這個微互動。

下一步是什麼?

我們只是剛開始接觸微互動設計,它將會在重要性和範圍不斷增長。雖然有好多關於手機應用很好的例子,但微互動也會在穿戴式裝置或用在家庭裡的智慧裝置等小型應用裡成為最為突出的設計元素。

在小螢幕上也同樣重要,可以說在穿戴式裝置上微互動更重要,因為螢幕實在太小所以每一個互動都必須是一個單步過程。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Nike Running)

思考一下耐克跑步這個應用。不僅因為它與你手機上的其它應用進行跨界整合(例如Health和Spotify),它也在Apple Watch上提供一個完整的微互動體驗。從現場紀錄你的里程到從你的朋友那得到贊,微互動使穿戴式平臺的應用變得更加可用。

機器人將整合微互動規則。從家庭安全裝置到舒適控制清潔裝置,可互動的機器人與連線的應用程式會創造一個與迄今為止我們所看到完全幾乎不一樣的體驗,並將基於微互動而“工作”。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Cox Homelife)

家庭安全裝置和電視電纜提供商Cox是目前嘗試家庭安全系統的眾多公司之一。當你的家整合了智慧家庭安全裝置,你在看影片時燈會自動關掉。(這套系統也可以告知你的寵物正在你的家裡搗亂)

恆溫器裝置Nest也使用微互動當作工具去學習設定你習慣的溫度,使你的家變得更舒適。每一個智慧型工具都會連線你手機上的應用去提供反饋和使用它時提供更好的互動。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Google Material Design)

微互動會繼續進化並相互影響。在Google的Material Design文件裡你可以找到一些關於微互動的很好的實用建議。微互動這概念將超越功能,也會去闡述每一種元素,例如觸控,手勢甚至美學。

“響應式互動讓使用者的操作有及時的,有邏輯的,令人愉悅的螢幕反應,這有利於使用者對應用的深入探索。每一個互動都需要透過深思熟慮,也許它是異想天開的,但絕不能使人分心。我觸控了螢幕會發生什麼?那我觸控了這個圖示呢?”

微互動能更好地促進應用更好地連線物理世界。透過Beacons與使用者連線,微互動變得更普遍。

2015-2016最懂你的移動設計是什麼?哦,iPhone就可以告訴你

(例子:Target Cartwheel)

回想一下2002年的“少數派任務”這部電影,湯姆克魯斯辦演的角色在購物商城裡行走,廣告牌會根據他想要的直接推送廣告給他。這個也能在應用裡實現,在一些地方例如Target,當你到達特定位置,Target會透過定位工具來嘗試推送一些交易,優惠券或降價資訊到你的手機上。

結語

微互動是一個應用設計裡的核心成分,它影響你的使用者是否願意使用這應用,提高使用度,以及愉悅使用者。把這些放在一起,你需要設計一些瞬間那是使用者不知道,但是需要的,或使用者希望你的應用是他們日常生活中的重要組成部分。

另外,對設計有興趣的童鞋,部分資源和工具可進入原文檢視。

Via:Mobile Design Book of Trends 2015&2016

譯文僅作學習用途,如有其它用途請聯絡原作者。譯文轉載請註明:本文來自MUX原創翻譯,雷鋒網釋出,譯文作者:MUX翻譯小組

keep calm and be awesome.

推薦閱讀:

1、2015-2016年最流行的APP設計是什麼?比如,Facebook那樣的

2、2015-2016年最有影響力的移動介面設計是什麼?看看Google就知道了

相關文章