萬字干貨!5大章節全面解析交互設計

更多交互設計干貨:

當我們談論交互設計(Interaction Design)時,可能有人會疑惑:在體驗設計(User Experience Design 簡稱 UX Design)為主流的今天,為什么還要關注交互設計?

其實,交互有廣義和狹義之分,廣義的交互不僅僅是指互聯網企業中的交互設計崗位,也包含從人機交互、人因工程等發展而來的大交互學科(各大院校的交互設計專業)。而用戶體驗設計和 UI 設計只是互聯網發展中形成的職業類別:

萬字干貨!5大章節全面解析交互設計

所以說,無論是體驗設計、UI 設計甚至是服務設計,它們都建立在交互設計的基礎之上。交互設計具備的學術背景和理論深度,是連接理論與實踐的橋梁,它幫助我們從執行任務的“匠人”,變成能夠深入理解背后的邏輯和目的的“設計師”。

很多同學雖然非常熟悉信息架構、任務流程和頁面搭建等工作,但他們仍然感到困惑,無法將這些內容串聯起來,也不清楚底層邏輯,就是因為他們缺乏對交互設計學科背景的深入理解。只有掌握了交互設計的學科知識,設計師才能在職業道路上走得更遠,更好地理解和應用設計原則。

今天我們就以“學科+職業”的方式,真正系統地介紹一下廣義交互設計的基礎知識。主要包括以下幾部分:

萬字干貨!5大章節全面解析交互設計

第一章 交互設計概述

1. 什么是交互?

“交互”這個詞是從 Interaction 意譯的,詞義為“相互作用”,從中文來說,即交流、互動。在人與人之間,相互的打招呼、交流,就算是最簡單的交互。那么人和機器之間的交流互動是什么樣的呢?舉個例子,如果你想給朋友發一條信息,交互過程可能是:

打開微信 → 打開對話框 → 輸入文字 → 點擊發送

在這個過程中,每一步的操作,手機都有所反饋,比如點擊微信 icon,就會進入主界面,點擊“發送”,信息就會發到對方微信,一系列的操作和反饋就構成了交互。

所以簡而言之,當人和一個對象(無論是人,機器,系統、環境等等)發生雙向的信息交流和互動,就是一種交互行為。這種交流和互動必須是雙向的,如果只有一方的信息輸出,而沒有第二方的參與,就只是信息展示而不是交流互動。來而不往非交互。比如我們平時看到的平面廣告,只是信息呈現,沒有交互性,而下面的廣告設計,就具備了交互的屬性:

交互廣告(圖片來源:廣告公司視頻截圖)

上圖是一個戒煙產品廣告,一般狀態下,畫面中的男士神態正常,當有人在附近吸煙時,畫面中的男士就開始咳嗽。這個廣告牌會根據外界的變化而呈現不同的反饋。

2. 什么是交互設計?

既然“交互”是交流、互動,那么“交互設計”簡單來說,就是設計如何交流如何互動,讓交流和互動更加自然更加順暢。

事實上,人與外物的所有交互都是交互設計的范疇,比如一個人要開門,是用門把手還是直接推,需要鑰匙還是指紋,都屬于交互設計。只是當前社會談到交互設計,往往聚焦于人與互聯網產品或智能產品的交互,所以本文也主要討論后者。所以我們之后所說的“產品”主要就是指運行在各種聯網終端(手機、電腦、Pad、電視等)上的網站、應用等產品,或者是可聯網并具有交互性的智能設備,如智能汽車,智能機器人,智能音響等。

另外從職位角度來看,交互設計專門指在互聯網產品設計過程中確定了產品功能之后、視覺設計之前這一段,主要包括功能架構的搭建、用戶流程的設計和界面元素的排布等方面,眾多的交互設計培訓班就是在做這部分的培訓。比如一個 APP 的登錄注冊,打開登錄頁是開始,登錄成功是結束,這個過程如何進行,期間遇到各種問題如何解決,就是職業交互設計的范疇。

萬字干貨!5大章節全面解析交互設計

而從學科角度來看,交互設計是定義、設計人與人造系統如何關聯的設計領域。學術角度,對于交互會有更多偏研究的內容,而不僅僅像職業交互設計師一樣去解決用戶需求,還要考慮很多基礎性的問題,比如人與環境的關系、人與人造物的關系等。

3. 交互設計的發展歷程和價值

交互設計是由 IDEO 的一位創始人比爾·摩格理吉(Bill Moggridge)在 1984 年一次設計會議上提出的。后來它逐漸綜合了人機交互,人因工程,認知心理學等領域的知識,形成了專門用于解決產品在使用和體驗方面問題的學科領域。

那么到底為什么會出現交互設計這個領域呢?

以前的產品,其實并不需要交互設計,比如較早的洗衣機(下圖左),只需要一個開關就足夠了,但是后來,有了雙桶、半自動、全自動洗衣機,操作越來越復雜,這時就需要交互設計師去研究用戶的使用流程與操作方式,讓用戶能夠與復雜功能和平相處:

萬字干貨!5大章節全面解析交互設計

這是實體產品的例子,計算機方面,比如以前的 DOS 系統(下圖左),一個命令對應一種結果,只需要記住就行,也不需要交互設計,后來有了圖形界面(下圖右),有了鼠標,操作就變得復雜,就需要交互設計師和界面設計師來定義軟件系統。

萬字干貨!5大章節全面解析交互設計

所以說,交互設計是順應時代需求而產生的,當工程師無暇處理人與機器的交流互動問題時,交互設計師便應運而生了。

萬字干貨!5大章節全面解析交互設計

在短短 30 多年的發展中,交互設計已經涉及方方面面,從最初的網頁設計,app 設計,到智能設備、自然界面設計,甚至是服務體驗,都可以通過交互設計的方法找到解決方案。當前交互設計的研究重點已經放在了多模態(多通道)、多媒體交互,虛擬交互以及人機協同等方面。

本章總結:

本章簡單介紹了交互領域的來源和發展,隨著人與各種人造物之間的溝通互動越來越復雜,交互設計應運而生,擔負起使溝通更加順暢、自然的重任。

第二章 交互設計學科理論基礎

新學科基本不會憑空誕生,一般都是從已有學科發展過渡而來,往往是當已有學科無法解決新出現的問題時,就會在他們的基礎上誕生新的學科。而交互設計就是在工業設計、人機交互等學科的基礎上,借鑒人因工程,認知心理學等領域研究結果,逐漸融合而成的一門交叉學科。下面這幅圖基本展示了交互設計的學科結構,但并不全面:

萬字干貨!5大章節全面解析交互設計

這里由于篇幅原因,只簡單介紹與交互相關性較大的幾個領域:工業設計、人因工程、人機交互與認知心理學。

1. 工業設計

對于工業設計(Industrial Design)大家應該相對比較熟悉,很多大學都開設了工業設計專業。它與交互相關性很高,所以大量的工設畢業的學生都從事了交互設計職位(主要是薪資差別太大哈哈)。

從設計對象上來看,交互設計的對象比較偏網站、APP 之類的虛擬產品,而工業設計主要針對實體產品,比如電腦、吸塵器、交通工具之類的,所以會更多的考慮產品的外觀、材質、內部結構設計等。當然對于電視、音響等操作較為復雜的產品,工業設計師也會考慮很多人與產品交互的問題,比如電視遙控器的設計就是一個經典題目。不過交互設計的對象會更加的集約化、系統化和精細化,所以對于設計分析和方案實現方面,有了更高的要求。

萬字干貨!5大章節全面解析交互設計

工業設計與交互設計的融合(圖片來自網絡)

另外,工業設計與交互設計在很多方面都是相通的。特別是當前市面上很多智能設備,都需要工業設計師和交互設計師緊密配合才能做出即好用又好看的產品。在漫長的工業設計發展史中,涌現的很多設計思考和方法,都可以為交互設計帶來養分,比如一直以來都在討論的“形式與功能”的問題,是形式追隨功能還是功能追隨形式或是功能形式各自獨立,其實跟交互與 UI 的關系很像,歷史總是在不斷的重復。

2. 人因工程

人因工程(Ergonomics)又稱為人機工程、人體工學等,主要是探討和應用人類行為、能力本能極限和其它的特性等相關信息來設計器具、機器、設備、系統、任務、工作及其相關所屬的周遭環境,以增加生產力、安全性、舒適感和效率,進而提升人類的生活品質。

人因工程對交互設計較大的貢獻主要有兩個方面:

一是人體測量。首先是下圖所示的各種人體尺寸、活動范圍的測量,這些在實體產品中運用很廣泛。除了這些測量以外,還有對于記憶極限、注意力極限等的測量,對于交互中的可用性易用性提高都有很高的參考價值。

萬字干貨!5大章節全面解析交互設計

二是以人為中心的設計觀念。現在各個設計領域都在提倡以人為中心,其實這個理念最早是由人因工程提出的,這種理念使設計師開始關注人的操作過程、人的感受,使得各種產品都有了巨大的進步。

3. 人機交互

很多人把交互設計和人機交互(HCI,Human-computer Interaction)混為一談,其實這是不同的兩個領域。

簡單說來,人機交互主要是為交互設計提供技術支持,比如多點觸控、手勢交互等,都是人機交互的學科范疇,比如下圖是清華某人機交互研究所發布的“懸空打字”技術。它研究人與機器之間進行信息傳遞的理論、技術和設備,既包括技術研究(包括算法、硬件技術等),也包括心理學研究;而交互設計,是屬于設計中的一個領域,是一種實踐方法,通常為了解決特定使用場景下特定人群的使用過程中,人與機器(或軟件、網站)如何更方便簡單地“對話”的問題。

懸空打字技術(來自清華大學)

當然兩者也有比較大的交匯,比如人機交互研究中發現的一般規律可以指導交互設計或提供參照,人機交互研究中還包括對交互設計方法論的研究,而交互設計實踐中遇到的挑戰和難題也能夠促發新的人機交互研究。

4. 認知心理學

在介紹交互設計的定義時,我們提到它是“定義、設計人與人造系統如何關聯的設計領域”,如何關聯當然很重要,但在讓他們更好的關聯之前,我們需要深入的了解自身。而在交互設計領域,我們不可能專門研究人,所以就可以直接運用相關的研究結果了。在大量的研究人的領域中,認知心理學是跟我們的設計息息相關的學科,因為人與人造系統要很好的關聯,必須綜合運用人的感知系統。下面從幾個最基礎的方面進行簡單的介紹:

① 感知融合

感知融合是指人對外界的感知與反饋是系統性的過程,這個系統由視覺、聽覺、觸覺、前廳感覺(運動和重力覺)、整體位置及軀體感覺等等一起組成,它們在反饋機制的作用下互相制約,互相協調,從而使人可以在日常生活中能夠感知事物和適應環境變化。所以在設計過程中,對于視覺、聽覺、觸覺等感知系統進行綜合考慮,不能孤立的看待。

萬字干貨!5大章節全面解析交互設計

人的信息處理工作系統(感知融合)

② 視覺

人類接收信息 80%是通過視覺,而交互設計產品,整個交互過程基本都要緊密依賴于人的視覺系統,所以了解視覺系統就非常有必要了。視覺系統具有主動性、動態建構等特點。視覺認知分為色彩認知、運動認知、形狀認知、控件認知等方面。這些認知特點與界面設計都有很大的相關性,比如其中的形狀認知包括相似性、接近性、連續性、簡潔性和完整性等特點。而且很多設計原則都是從人類視覺特點中來的,在這里不做展開,以后有機會專門做介紹。

舉個簡單的例子:

萬字干貨!5大章節全面解析交互設計

某平臺購物車改版前后對比

上圖左邊是某購物平臺的舊版購物車,右邊是新版,他們為什么要做這樣的改進呢?我們可以看到左圖中元素與元素之間間距都差不多,我們無法較快的區分信息的歸屬,比如滿贈的商品是屬于上面的商品還是下面的;而右圖中間距進行了調整,可以一眼就能分辨出贈品是屬于上面的產品。

可能有的同學這時會說:“這不是很基礎的 UI 原則嘛,跟人的視覺有啥關系?”,其實主要就是因為人的視覺有之前提到的接近性的特點,所以才會有這樣的原則。什么是接近性呢?請看下面這張圖:

萬字干貨!5大章節全面解析交互設計

視覺接近性原理

左邊的九個菱形,橫向間距小,豎向間距大,所以人眼會認為每一排是一個整體;右邊圖里,橫向間距大,豎向間距小,所以人眼會認為每一列是一個整體。這就是人眼睛看事物做判斷的特點,各種設計都需要遵循這些特點。所以去學習那些別人總結出來的設計原則,不如直達根本,了解認知學理論,你也可以創造出自己的設計原則!

③ 注意

除了視覺之外,認知學里還有一塊非常重要,就是注意。有句話說,現代互聯網之戰基本上就是注意力之戰,那打好這場仗,必然得了解人的注意是怎么回事。

簡單說來,人的注意有三個特點:

一是選擇性:注意是主動選擇的過程,也就是說,人要是把注意力集中在某個地方,需要主動做出選擇,不像聽覺和嗅覺,可以被動接受。所以,在設計過程中,需要通過一些方法,讓重點內容成為被注意對象。比如在新消息到達時,通過彈窗、小紅點等形式提示用戶,就是典型的影響用戶注意選擇的方法。

二是集中性:正在集中精力所在的最多只能有一個實體,無論它是一個對象、一個特征、一個記憶還是一個概念。因為這個特點,在設計中就應該避免過多干擾注意的內容,盡量讓用戶集中注意在重點內容、重點任務上。

三是注意分配:雖然集中精力所在只能有一個,但整體的注意資源還是可以得到有限度的分配。但也取決于并行活動的性質、復雜程度以及熟練程度。比如左手畫圓右手畫方,是很難做到的,但是同時走路并看手機,就沒有問題,主要就是因為走路這個動作我們非常熟練,只需要分配很少的注意力資源。所以在設計過程中,需要關注用戶同時進行的任務,是不是會對注意造成壓力,合理進行注意管理。

萬字干貨!5大章節全面解析交互設計

上圖是 Evernote 從 2008 年到 2020 年的 UI 設計變化史,這里我們可以很明顯的看出一個趨勢,就是簡單化和扁平化,那為什么會有這種趨勢呢,只是因為人們的審美發生了變化嗎,肯定不是這么簡單。

早年間,蘋果手機將屏幕分辨率一下子提升了不少,這讓眾多手癢的設計師們終于有了發揮余地(以前那種可以看到一個個像素的屏幕實在沒啥可做的),所以他們對于圖標和界面無所不用其極,描繪的美輪美奐。當然,一開始之所以這樣,另外一個原因也是為了沿用現實中的心智模式,讓用戶可以在屏幕上迅速理解,但是這兩者之間的成分,我覺得還是前者更多。然后到了一定的階段,人們發現這些精美的圖標和控件很大程度上吸引了用戶的注意力,真正重要的東西反而不容易看到,當然也是物極必反吧,終于在 iOS7 當中,蘋果徹底做了大革新,全部扁平化,提出內容至上的原則,其實就是對于注意力資源的重新考慮。

④ 記憶

在人的認知系統中,記憶也是一個神奇的東西。

人的記憶分為短期記憶和長期記憶。短期記憶也稱工作記憶,是為了完成任務而臨時儲存的信息。工作記憶的容量有限,大約是 7±2,即我們能夠同時記住的互不相關的東西的數量在 5~9 之間。此外,工作記憶還非常不穩定,如果我們將注意轉移到新事物上,之前工作記憶中的內容就可能遺失。所以在設計中,需要考慮用戶的記憶壓力,盡量避免過多過長的記憶。

⑤ 習慣

《上癮》中關于習慣是這么說的:“所謂習慣,就是’在情境暗示下產生的無意識行為’,使我們幾乎不假思索就做出的舉動。如今,我們習以為常的那些產品和服務正在改變我們的一舉一動,而這,真是產品設計者的初衷。”

產品設計者的初衷一定是要改變用戶的習慣嗎?到底應該引導用戶習慣還是順從用戶習慣呢?其實都不一定,要視情況而定。比如手機設計從物理鍵盤到觸摸屏,大勢所趨,需要引導習慣;而觸摸屏上鍵盤的字母排布,就需要順從用戶習慣了。

萬字干貨!5大章節全面解析交互設計

本章總結:

本章介紹了交互設計的學科理論基礎,我們不但需要掌握流程圖、線框圖等工作實踐技能,也要了解這些底層的源頭性知識,這樣才能知其然也知其所以然。

第三章 交互設計的基本流程與方法

一道菜怎么做,有它的菜譜,菜譜告訴了我們做菜的流程和方法。比如打開西紅柿炒蛋的菜譜,就可以發現這道菜最重要的流程就是先炒好雞蛋拿出來,然后炒西紅柿,再把雞蛋放進去。而方法就是比較常規的切菜、打蛋和攪拌了。其實交互設計也是有“譜”的~

那說到設計的流程,很多同學都可以脫口而出很多著名流程了,比如英國設計協會的“雙鉆模型”、谷歌的“設計沖刺”、阿里的“五導家”等等,都是屬于方法輪類型的流程,較為抽象。而“信息架構 → 用戶流程 → 線框圖設計 → 原型制作”之類的,就屬于實操類型的流程,直白但沒什么內涵。至于設計的方法,更是五花八門,什么KANO模型、用戶體驗地圖、奧卡姆剃刀之類。

這時候,對于有選擇困難癥的同學就會非常難受了,到底哪家流程最強呢?以及那么多方法,應該什么時候使用呢?

對于誰最強的問題,筆者也沒有答案,不過通過我深入分析和思考,發現設計流程其實都有共通點,而且根本不用那么復雜,歸根結底,對于完成設計最重要的其實永遠都只有三步:

前期研究 → 設計輸出 → 驗證迭代

而那些五花八門的方法,都可以對應到每個階段當中。可以說,這三個步驟適用于一切設計,不光是互聯網行業的交互設計、UI 設計,也包括平面、建筑、室內、環境,只要是設計師存在的地方,都可以使用這三個步驟做設計。

有的同學可能會懷疑了,這也太簡單了吧?其實只是看著簡單,要真的做好的話,每一步都需要好幾年去鍛煉!

1. 前期研究

這一步是很多初學者容易忽略并且做不好的,他們喜歡上來就先畫圖,就算知道要做研究,也不知道如何入手。

那到底研究些啥呢,通俗點來講,前期研究主要就是明白你到底在干啥。門衛有三個哲學問題:你是誰,從哪來,到哪去。研究也有三個哲學問題:要解決什么問題,為什么有這個問題,用什么途徑去解決。

所以這一步主要就是了解背景以及定義問題,不然我們做設計就會非常盲目,最后做出來才發現并沒有解決問題,那設計方案就是廢物。舉個例子,如果你給一部電影做海報,那前期研究這一步就得好好了解這部電影講了什么,如何通過一張海報體現電影的精髓,而且這些你不能私下思索,得跟電影出品方深入溝通,看他們想表達什么,喜歡什么樣的風格等等,如果你自己的理解跟他們的相同,那皆大歡喜,如果不同,那就要按照他們的意思來,畢竟是商業設計嘛。所以這里面門門道道還是很多的。

如果是交互設計,在這一步就得深入了解項目的出發點,落腳點和方向。比如:“公司為什么做這個項目,能帶來什么價值?市場上同類產品表現如何?這款產品是為哪些用戶解決什么問題?”如果是改版項目,還需要了解當前版本數據表現如何,用戶反饋如何,有什么樣的問題等等。

前期研究的方法:

前期研究的方法很多,而且大多是從別的領域拿來的。比如用來了解外部環境的“PEST 模型”,就是從商學領域拿來的。還有用來分析用戶需求的“KANO 模型”,用來了解已有用戶體驗問題的“用戶體驗地圖”等,都是不錯的工具,大家可以根據研究目的選擇合適的方法。以下是 Nielsen Norman Group 總結的用研方法(注意這里只是用戶研究方法,并不是包含所有前期研究方法):

萬字干貨!5大章節全面解析交互設計

用研方法(來自Nielsen Norman Group)

前期研究的產出:

前期研究主要解決業務目標和設計目標的問題,所以產出并沒有固定的模式。如果是新項目,可以是市場分析報告,競品分析報告,商業機會分析,用戶研究報告等等。如果是改版項目,可以是數據分析報告,產品問題總結等。

2. 設計輸出

這一步應該最好理解。當第一個階段完成,我們知道了要干什么,往哪個方向走,所以現在就可以真正開始做設計了。具體來說,對于交互領域,這一步主要包括信息架構設計,流程設計和界面設計。

設計輸出的方法:

交互設計的一大堆方法中,大多都是用在這一階段的。比如“卡片分類法”,就專門是為了解決信息架構的,還有常見的“任務分析法”、“場景分析法”,主要就是為了解決流程的問題,而大家熟知的“F 型視覺模型”、“費茨定律”等,就是為了更好的做好界面設計。

設計輸出的產出:

這里的產出大家都比較熟悉,做完信息架構會產出腦圖或者樹狀圖,來體現產品框架;用戶流程圖就可以用來展示操作流程;線框圖可以表現用戶具體見到的產品形態與交互方式。根據不同項目的不同需要,還可以產出頁面流程圖、可交互的原型等等。

萬字干貨!5大章節全面解析交互設計

頁面流程圖(圖片來自網絡)

需要注意的是,在此階段,可能產生不同的設計方案,可以通過下一階段比較取舍。

3. 驗證迭代

雖然經過系統的分析找到了問題,并根據正確的設計方法實現了功能,但是并不能保證當前的方案已經完美,好的產品都是慢慢打磨出來的。

所以這一步就需要對于之前的設計方案進行客觀性的驗證,看是否符合用戶需求與業務需求,是否能夠解決第一步中定義的問題。一般有兩種驗證場景:

  1. 開發前驗證:進入開發階段前的方案測試,可以通過讓目標用戶使用原型或者觀看設計稿的方式,盡早暴露方案中的問題并修正;
  2. 上線后驗證:產品上線后,收集反饋數據、用戶行為數據等,與舊版本或之前的預期、目標做對比,及時發現問題并修復。

比如某個 APP,我們做了兩個版本,一個是首頁底下有 TAB Bar,分為四個標簽,就像微信一樣,用戶可以方便的到達四個主要板塊;另一種是抽屜模式,用戶可以點擊左上角的按鈕,向右打開導航。在沒有真實使用者的情況下,我們可能很難判斷那個方案更好,所以我們就可以用兩套原型做用戶測試,看用戶在使用過程中的體驗與反饋,根據測試結果決定使用哪個方案。

驗證迭代的方法:

一般使用可用性測試、任務場景分析、數據分析或 A/B 測試等方法,看用戶在實際使用過程中產生了什么問題,然后快速迭代,使產品逐漸完善。

驗證迭代的產出:

此階段產出可用性測試報告,用戶反饋報告等。為進一步改進產品提供方向。

之前也說了,好的產品是打磨出來的,所以驗證迭代看似是最后一步,但其實是永無止境的,除非產品徹底下線了。所以這一步不叫設計驗證,而叫驗證迭代,就是告訴大家驗證之后是不斷的迭代過程,不斷重復“研究 → 設計 → 驗證”的過程。
下圖是這三個階段的總結:

萬字干貨!5大章節全面解析交互設計

有的同學可能會問,這三個步驟哪個最重要呢?看似第二步最實在,可能大部分人覺得它最重要,但細細思考, 它們的重要程度是一樣的,如果做不好第一步,你的第二步就是缺乏依據的;如果做不好第二步,那第一步再好也只是紙上談兵;如果做不好第三步,那產品就失去了進步的可能,也就意味了馬上會被市場淘汰。所以負責任的說,這三個步驟,做不好任何一步,基本都會出現問題,畢竟已經是最簡化的流程了。

另外,從整體上看,這三個環節在不同類型的項目中又會有不同的內容。比如改版項目,前期研究側重舊版本的數據分析、用戶研究和市場上優秀競品的優勢分析等,而對于新產品項目,就會更加注重一些宏觀的分析,比如市場價值、商業價值等分析。

萬字干貨!5大章節全面解析交互設計

本章總結:

本章介紹交互設計的基礎流程,前期研究、設計輸入、驗證迭代的步驟可以應用在各個設計門類,不僅僅是交互設計領域。

第四章 交互設計基本原則

1. 關于設計原則

提到“原則”這個詞,大家就會想到,“我是一個有原則的人”,“那個人毫無原則”之類的,那這個原則是什么呢?說白了就是“做事的準則”,一個有原則的人是有底線的,不突破底線就是他的原則,這種人比較可靠,值得信賴,而沒有原則的人就比較可怕,你無法確定他會做出什么事。

所以在設計中,原則也非常重要,不按照原則進行的設計就是耍流氓。那么設計要遵循什么原則呢?

2. 已有的著名設計原則

已經對互聯網設計有所了解的同學應該早都接觸了挺多設計原則,這里幫大家羅列下比較有影響力的 3 個(僅做羅列,具體解釋請自行百度):

萬字干貨!5大章節全面解析交互設計

有的同學說,這 15 年前的老原則還能用嗎?其實這些都沒有過時,因為這些原則很好的遵循了“以用戶為中心”的基本點,雖然我們的產品一直在更新換代,早已不是當年的模樣,但是用戶還是一樣的用戶,所以這些原則在今天依然是體驗設計的最基本原則,無論你的產品是手機、PC、大屏觸控甚至是智能硬件,都全部適用。

3. 最核心的設計原則

在說原則之前,想先簡單說一下很多同學常有的誤區。很多關于設計原則的文章或解答中都會提到菲茨定律、席克定律、格式塔原理、7±2 法則等,其實這些并不能稱為設計原則。我們之前說了,原則是“你需要遵守的基本準則”,而菲茨定律這些只是闡述人機交互的規律和特點,主要是幫助大家進行設計決策的。

在這里,我幫助大家提煉出最核心的幾點,這幾個做到了,你的設計方案肯定能保障基礎的用戶體驗。

原則一:易于理解,不讓用戶思考

提到易于理解,就需要先說一下這幾個概念:

  1. 運作模型:又稱為實現模型,是指機器實現某一功能的真實過程。
  2. 表現模型:又稱為設計模型,是設計師對于運作模型的改造和表達。
  3. 心理模型:是用戶對于事物的普遍性認知。

萬字干貨!5大章節全面解析交互設計

為了讓用戶易于理解產品,設計師的設計模型(Design Models)應該盡量接近用戶的心理模型(Mental Models)。這個概念是由交互設計之父阿蘭·庫珀(Alan Cooper)在《交互設計精髓》這本書里提出的。

在理想狀態下,心理模型與設計模型相吻合。但實際上,用戶和設計人員之間的交流只能通過系統本身來進行。比如設計一款門把手,如果將它設計成逆時針轉打開房門的設定,那就和用戶的心理模型相違背了,這就是設計模型與用戶模型的不符,最終導致用戶無法使用產品。設計人員必須保證產品的各個方面都與正確的概念模型保持一致。

原則二:容錯性

人與機器,就像是在交流、溝通一樣,人向機器發出指令,機器給予人回應。

當設計師根據人們的心理模型來設計產品時,大體上是可以以人們普遍接受的習慣,使產品可以與人進行流暢的交互。而當人的指令沒有得到機器恰當的回復的時候,也就是出現錯誤信息的時候,同樣需要設計師進行恰當的設計,讓機器做出使人能夠明白的回應,以方便人們繼續進行操作,最終達成目標。這便是容錯機制。容錯包括預防與解決。

預防是指在用戶進行提交操作之前,就對可能得錯誤進行提示,減少因為操作錯誤造成的損失。比如下圖的登錄頁面,密碼一欄底下提前明確提示設置密碼的要求,而不是點擊“創建賬號”后才提示。

萬字干貨!5大章節全面解析交互設計

設置密碼前明確提示密碼要求進行防錯(圖片來自網絡)

還有一些平臺的注冊流程中,在用戶輸入了昵稱后,就立馬展示“該昵稱已被占用”,提醒用戶及時修改;微信轉賬中,如果金額較大,需要驗證對方姓名,這些也屬于預防錯誤。

而解決是指當出現錯誤之后的解決方案。比如當用戶誤刪了東西,可以通過回收站進行恢復,這就是一種出現錯誤之后的解決途徑。

原則三:一致性

心理模型和容錯性主要是基于某些設計點,而對于產品的整體,需要遵循一致性的原則。從視覺的角度,整體的一致可以使產品更加統一,形成品牌感;從交互方面,一致性可以減少用戶的理解成本,提高易用性。總體來說一致性表現在以下三個方面:

視覺一致性

  1. 色彩一致性(主色、輔色、點綴色、字體色等)
  2. 風格一致性(扁平、投影、擬物、動效等風格表現)
  3. 屬性一致性(字體、圖標、圖片等)

行為一致性

  1. 操作一致性(刪除、滑動、點擊、刷新、上傳、發布等操作)
  2. 平臺一致性(安卓和 iOS 的不同的操作習慣)

感知一致性

  1. 位置一致性(比如類似模塊的相同按鈕位置相似)
  2. 文本一致性(提示語、操作提示、功能按鈕、編輯提示)

原則四:可控性

人類對于自主控制的需求是與生俱來的。著名的心理學家亞伯拉罕-馬斯洛(Abraham Maslow)的需求層次理論中指出,人類最基本的需求是生理上的需求,即健康,食物和睡眠。為了滿足這些需求,人類需要大量的可控性,掌控我們生活的環境以獲取足夠的食物;自我約束的控制以避免疾病等。這種習性映射到產品使用過程中也是一樣,用戶希望產品被自己掌控。

那如何讓用戶在使用產品的過程中有更多掌控的感覺?主要是靠及時的操作反饋和狀態反饋。交互設計師需要考慮到用戶操作流程中的各種狀態,及時反饋給用戶,提高產品的可控性。總的來說主要就是“知道現在是什么狀況”,“知道下一步怎么做”。

本章總結:

本章主要介紹了交互設計的基本原則,從比較著名的原則到提煉的 4 個重點原則,大家可以多體會,融入到工作當中,盡量避免設計中的低級錯誤。

第五章 交互設計未來趨勢

過去的人機交互是通過鍵鼠、觸摸等的基礎交互方式,近些年,語音、手勢、眼動等多模態交互在各個領域都有了長足的發展,未來,人機交互的發展主要從以下 5 個方面展開:

1. 人工智能介入人機交互,省去復雜環節

人工智能的介入正在徹底改變人機交互的面貌。AI 技術通過學習用戶的行為模式和偏好,能夠預測用戶需求,從而簡化交互流程,減少不必要的步驟。這種智能化的交互方式不僅提升了用戶體驗,還提高了效率。例如,智能助手可以根據用戶的日程自動設置提醒,或者根據用戶的閱讀習慣推薦文章。

AI 的自然語言處理能力使得機器能夠理解復雜的人類語言,使得交流更加直觀和自然。此外,AI 還能夠通過圖像識別技術,為用戶提供更加個性化的交互方式,如通過面部表情了解用戶情緒,提供場景化服務等。智能家居技術通過計算機程序和網絡技術將家庭設備連接到互聯網上,實現家庭設備的自動化控制和遠程控制。

智能家居系統(來自 Grenton)

具體到交互設計上,對于輸入和操作各個環節,AI 都將逐步重塑。例如空調交互,以前都是手動控制空調的溫度、風速、風向等,以后這些操作都將由 AI 代勞,需要人參與的大概只剩下最初的溫度喜好設置。

對于設計師來說,我們可以多了解人工智能的能力,一方面是通過 AI 輔助設計,另一方面也可以把 AI 融入到產品中。

2. 語音、眼動、手勢等自然交互方式更加普及

自然交互方式的普及標志著人機交互領域的一大進步。這些交互方式模仿人類的自然行為,使得與技術的互動變得更加直觀和無縫。

語音識別技術的進步使得用戶可以通過簡單的口頭指令來控制設備,而無需觸摸屏幕或按鈕。眼動追蹤技術允許用戶通過注視來選擇選項或導航界面,這對于行動不便的用戶尤其有用。

手勢識別技術則通過捕捉用戶的肢體動作來執行命令,為用戶提供了一種全新的非接觸式交互方式。隨著這些技術的成熟和普及,人機交互將變得更加自然和直觀,減少用戶的認知負擔,提高交互的效率和愉悅感。

萬字干貨!5大章節全面解析交互設計

Vision Pro(來自Apple)

對于設計師來說,需要對語音交互基礎規范、VR/AR 基礎交互規范等非常熟悉,未來的設計一定會是多模態的。

3. 多設備協同交互

隨著智能設備的普及,我們正步入一個多設備協同交互的新時代。在這個新時代中,手機、電腦、電視、智能手表、智能家居等設備不再是孤立的個體,而是通過先進的技術相互連接和協同工作,形成一個無縫的智能生態系統。這種協同不僅提高了效率,也極大地豐富了用戶的交互體驗。

多設備協同意味著數據的共享,用戶的個人偏好、設置和應用狀態可以在所有設備間同步,使得個性化體驗得以跨設備延續;另外用戶可以在不同設備間無縫切換,例如,在手機上編輯的文檔可以在電腦上繼續編輯,無需手動傳輸文件。這種連續性體驗讓用戶的工作和娛樂更加流暢;在多設備協同的環境中,用戶可以根據當前的場景和需求選擇最合適的設備來完成任務。例如,在家中可以通過電視大屏享受視頻內容,而在外出時則可以通過手機繼續觀看。

萬字干貨!5大章節全面解析交互設計

圖:豐富的多終端設備(來自華為)

在這種情況下,設計師需要對各個終端的特性、場景、用戶特點非常熟悉,才能做出真正符合用戶需求且流暢的交互體驗。

4. 包容性設計

包容性設計(Inclusive Design)是一種以用戶為中心的設計哲學,它強調為所有人設計產品和服務,無論他們的年齡、能力、文化背景或其他差異。這種設計方法不僅關注主流用戶群體,還特別考慮到邊緣用戶的需求,如老年人、殘疾人等。

通過包容性設計,技術變得更加易于訪問和使用,確保每個人都能享受到技術帶來的便利。例如,通過提供可調整的字體大小、高對比度模式和語音控制功能,應用程序可以為視力不佳或運動障礙的用戶提供更好的體驗。包容性設計不僅是一種道德責任,也是商業上的必要,因為它擴大了潛在用戶的基礎,并提高了產品的市場競爭力。

隨著社會的進步,政府與民眾將對這一塊越來越重視,包容性設計的知識與技能將成為所有設計師的基礎能力。

萬字干貨!5大章節全面解析交互設計

圖:支付寶長輩模式

5. 意念交互的進一步發展

腦機接口(BCI)技術是人機交互領域的一個前沿領域,它允許用戶通過腦電波直接與計算機或其他設備通信。這種技術的發展預示著意念交互的可能性,即用戶可以僅憑思考來控制設備。

BCI 技術在醫療領域已經展現出巨大的潛力。2024 年初,馬斯克的腦機接口公司 Neuralink 首次公開展示了第一位接受腦機芯片植入的人體試驗對象。在直播中,我們看到 29 歲的諾蘭·阿博夫僅憑意念就能在電腦上移動光標下國際象棋(下圖)。

萬字干貨!5大章節全面解析交互設計

用意念下國際象棋(來自Neuralink線上直播)

隨著技術的進一步發展,BCI 可能會被應用于更廣泛的領域,包括游戲、教育和日常工作。意念交互的實現將極大地擴展人機交互的邊界,為用戶提供前所未有的控制和交互體驗。想象一下,只需要頭腦中的想象就可以操控任何設備,那得有多酷~

(全文完)

收藏 76
點贊 32

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。