當我們談論交互設計(Interaction Design)時,可能有人會疑惑:在體驗設計(User Experience Design 簡稱UX Design)為主流的今天,為什么還要關注交互設計?
其實,交互有廣義和狹義之分,
廣義的交互不僅僅是指互聯(lián)網企業(yè)中的交互設計崗位,也包含從人機交互、人因工程等發(fā)展而來的大交互學科
(各大院校的交互設計專業(yè))。而用戶體驗設計和UI設計只是互聯(lián)網發(fā)展中形成的職業(yè)類別:
所以說,無論是體驗設計、UI設計甚至是服務設計,它們都建立在交互設計的基礎之上。交互設計具備的學術背景和理論深度,是連接理論與實踐的橋梁,它幫助我們從執(zhí)行任務的“匠人”,變成能夠深入理解背后的邏輯和目的的“設計師”。
很多同學雖然非常熟悉信息架構、任務流程和頁面搭建等工作,但他們仍然感到困惑,無法將這些內容串聯(lián)起來,也不清楚底層邏輯,就是因為他們缺乏對交互設計學科背景的深入理解。只有掌握了交互設計的學科知識,設計師才能在職業(yè)道路上走得更遠,更好地理解和應用設計原則。
今天我們就以“學科+職業(yè)”的方式,真正系統(tǒng)地介紹一下廣義交互設計的基礎知識。主要包括以下幾部分:
“交互”這個詞是從Interaction意譯的,詞義為“相互作用”,從中文來說,即交流、互動。在人與人之間,相互的打招呼、交流,就算是最簡單的交互。那么人和機器之間的交流互動是什么樣的呢?舉個例子,如果你想給朋友發(fā)一條信息,交互過程可能是:
打開微信 → 打開對話框 → 輸入文字 → 點擊發(fā)送
在這個過程中,每一步的操作,手機都有所反饋,比如點擊微信icon,就會進入主界面,點擊“發(fā)送”,信息就會發(fā)到對方微信,一系列的操作和反饋就構成了交互。
所以簡而言之,當人和一件事物(無論是人,機器,系統(tǒng)、環(huán)境等等)發(fā)生
雙向的信息交流和互動
,就是一種交互行為。這種交流和互動必須是雙向的,如果只有一方的信息輸出,而沒有第二方的參與,就只是信息展示而不是交流互動。來而不往非交互。比如我們平時看到的平面廣告,只是信息呈現,沒有交互性,而下面的廣告設計,就具備了交互的屬性:
上圖是一個戒煙產品廣告,一般狀態(tài)下,畫面中的男士神態(tài)正常,當有人在附近吸煙時,畫面中的男士就開始咳嗽。這個廣告牌會根據外界的變化而呈現不同的反饋。
既然“交互”是交流、互動,那么“交互設計”簡單來說,就是設計如何交流如何互動,讓交流和互動更加自然更加順暢。
交互設計有廣義和狹義之分。從廣義上說,人與外物的所有交互都是交互設計的范疇,比如一個人要開門,是用門把手還是直接推,需要鑰匙還是指紋,這屬于廣義的交互設計。而狹義的交互設計,就是特指人與互聯(lián)網產品或智能產品的交互,在這里主要討論后者。所以我們之后所說的“產品”主要就是指運行在各種聯(lián)網終端(手機、電腦、Pad、電視等)上的網站、應用等產品,或者是可聯(lián)網并具有交互性的智能設備,如智能汽車,智能機器人,智能音響等。
另外從職位角度來看,交互設計專門指在互聯(lián)網產品設計過程中確定了產品功能之后、視覺設計之前這一段,主要包括功能架構的搭建、用戶流程的設計和界面元素的排布等方面,眾多的交互設計培訓班就是在做這部分的培訓。比如一個APP的登錄注冊,打開登錄頁是開始,登錄成功是結束,這個過程如何進行,期間遇到各種問題如何解決,就是職業(yè)交互設計的范疇。
而從學科角度來看,交互設計是
定義、設計人與人造系統(tǒng)如何關聯(lián)的設計領域
。學術角度,對于交互會有更多偏研究的內容,而不僅僅像職業(yè)交互設計師一樣去解決用戶需求,還要考慮很多基礎性的問題,比如人與環(huán)境的關系、人與人造物的關系等。
交互設計是由IDEO的一位創(chuàng)始人比爾·摩格理吉(Bill Moggridge)在1984年一次設計會議上提出的。后來它逐漸綜合了人機交互,人因工程,認知心理學等領域的知識,形成了專門用于解決產品在使用和體驗方面問題的學科領域。
以前的產品,其實并不需要交互設計,比如較早的洗衣機(下圖左),只需要一個開關就足夠了,但是后來,有了雙桶、半自動、全自動洗衣機,操作越來越復雜,這時就需要交互設計師去研究用戶的使用流程與操作方式,
讓用戶能夠與復雜功能和平相處
:
這是實體產品的例子,計算機方面,比如以前的DOS系統(tǒng)(下圖左),一個命令對應一種結果,只需要記住就行,也不需要交互設計,后來有了
圖形界面(下圖右),有了鼠標,操作就變得復雜,就需要交互設計師和界面設計師來定義軟件系統(tǒng)。
所以說,
交互設計是順應時代需求而產生的
,當工程師無暇處理人與機器的交流互動問題時,交互設計師便應運而生了。
在短短30多年的發(fā)展中,交互設計已經涉及方方面面,從最初的網頁設計,app設計,到智能設備、自然界面設計,甚至是服務體驗,都可以通過交互設計的方法找到解決方案。當前交互設計的研究重點已經放在了多模態(tài)(多通道)、多媒體交互,虛擬交互以及人機協(xié)同等方面。
新學科基本不會憑空誕生,一般都是從已有學科發(fā)展過渡而來,
往往是當已有學科無法解決新出現的問題時,就會在他們的基礎上誕生新的學科
。而交互設計就是在工業(yè)設計、人機交互等學科的基礎上,借鑒人因工程,認知心理學等領域研究結果,逐漸融合而成的一門交叉學科。下面這幅圖基本展示了交互設計的學科結構,但并不全面:
這里由于篇幅原因,只簡單介紹與交互相關性較大的幾個領域:工業(yè)設計、人因工程、人機交互與認知心理學。
對于工業(yè)設計(Industrial Design)大家應該相對比較熟悉,很多大學都開設了工業(yè)設計專業(yè)。它與交互相關性很高,所以大量的工設畢業(yè)的學生都從事了交互設計職位(主要是薪資差別太大哈哈)。
從設計對象上來看,交互設計的對象比較偏網站、APP之類的虛擬產品,而工業(yè)設計主要針對實體產品,比如電腦、吸塵器、交通工具之類的,所以會更多的考慮產品的外觀、材質、內部結構設計等。當然對于電視、音響等操作較為復雜的產品,工業(yè)設計師也會考慮很多人與產品交互的問題,比如電視遙控器的設計就是一個經典題目。不過交互設計的對象會更加的集約化、系統(tǒng)化和精細化,所以對于設計分析和方案實現方面,有了更高的要求。
另外,工業(yè)設計與交互設計在很多方面都是相通的。特別是當前市面上很多智能設備,都需要工業(yè)設計師和交互設計師緊密配合才能做出即好用又好看的產品。在漫長的工業(yè)設計發(fā)展史中,涌現的很多設計思考和方法,都可以為交互設計帶來養(yǎng)分,比如一直以來都在討論的“形式與功能”的問題,是形式追隨功能還是功能追隨形式或是功能形式各自獨立,其實跟交互與UI的關系很像,歷史總是在不斷的重復。
人因工程(Ergonomics)又稱為人機工程、人體工學等,主要是探討和應用人類行為、能力本能極限和其它的特性等相關信息來設計器具、機器、設備、系統(tǒng)、任務、工作及其相關所屬的周遭環(huán)境,以增加生產力、安全性、舒適感和效率,進而提升人類的生活品質。
一是人體測量。
首先是下圖所示的各種人體尺寸、活動范圍的測量,這些在實體產品中運用很廣泛。除了這些測量以外,還有對于記憶極限、注意力極限等的測量,對于交互中的可用性易用性提高都有很高的參考價值。
二是以人為中心的設計觀念。
現在各個設計領域都在提倡以人為中心,其實這個理念最早是由人因工程提出的,這種理念使設計師開始關注人的操作過程、人的感受,使得各種產品都有了巨大的進步。
很多人把交互設計和人機交互混為一談,其實這是不同的兩個領域。
簡單說來,
人機交互主要是為交互設計提供技術支持
,比如多點觸控、手勢交互等,都是人機交互的學科范疇。它研究人與機器之間進行信息傳遞的理論、技術和設備,既包括技術研究(包括算法、硬件技術等),也包括心理學研究;而
交互設計相對來說,是屬于設計中的一個領域,是一種實踐方法,
通常為了解決特定使用場景下特定人群的使用過程中,人與機器(或軟件、網站)如何更方便簡單地「對話」的問題。
當然兩者也有比較大的交匯,比如人機交互研究中發(fā)現的一般規(guī)律可以指導交互設計或提供參照,人機交互研究中還包括對交互設計方法論的研究,而交互設計實踐中遇到的挑戰(zhàn)和難題也能夠促發(fā)新的人機交互研究。
在介紹交互設計的定義時,我們提到它是“定義、設計人與人造系統(tǒng)如何關聯(lián)的設計領域”,如何關聯(lián)當然很重要,但在讓他們更好的關聯(lián)之前,我們需要深入的了解自身。而在交互設計領域,我們不可能專門研究人,所以就可以直接運用相關的研究結果了。在大量的研究人的領域中,認知心理學是跟我們的設計息息相關的學科,因為人與人造系統(tǒng)要很好的關聯(lián),必須綜合運用人的感知系統(tǒng)。下面從幾個最基礎的方面進行簡單的介紹:
感知融合是指人對外界的感知與反饋是系統(tǒng)性的過程,這個系統(tǒng)由視覺、聽覺、觸覺、前廳感覺(運動和重力覺)、整體位置及軀體感覺等等一起組成,它們在反饋機制的作用下互相制約,互相協(xié)調,從而使人可以在日常生活中能夠感知事物和適應環(huán)境變化。所以
在設計過程中,對于視覺、聽覺、觸覺等感知系統(tǒng)進行綜合考慮,不能孤立的看待
。
人類接收信息80%是通過視覺,而交互設計產品,整個交互過程基本都要緊密依賴于人的視覺系統(tǒng),所以了解視覺系統(tǒng)就非常有必要了。視覺系統(tǒng)具有主動性、動態(tài)建構等特點。視覺認知分為色彩認知、運動認知、形狀認知、控件認知等方面。這些認知特點與界面設計都有很大的相關性,比如其中的形狀認知包括相似性、接近性、連續(xù)性、簡潔性和完整性等特點。而且很多設計原則都是從人類視覺特點中來的,在這里不做展開,以后有機會專門做介紹。
上圖左邊是某購物平臺的舊版購物車,右邊是新版,他們?yōu)槭裁匆鲞@樣的改進呢?我們可以看到左圖中元素與元素之間間距都差不多,我們無法較快的區(qū)分信息的歸屬,比如滿贈的商品是屬于上面的商品還是下面的;而右圖中間距進行了調整,可以一眼就能分辨出贈品是屬于上面的產品。
可能有的同學這時會說:“這不是很基礎的UI原則嘛,跟人的視覺有啥關系?”,其實主要就是因為人的視覺有之前提到的接近性的特點,所以才會有這樣的原則。什么是接近性呢?請看下面這張圖:
左邊的九個菱形,橫向間距小,豎向間距大,所以人眼會認為每一排是一個整體;右邊圖里,橫向間距大,豎向間距小,所以人眼會認為每一列是一個整體。這就是人眼睛看事物做判斷的特點,各種設計都需要遵循這些特點。所以去學習那些別人總結出來的設計原則,不如直達根本,了解認知學理論,你也可以創(chuàng)造出自己的設計原則!
除了視覺之外,認知學里還有一塊非常重要,就是注意。有句話說,
現代互聯(lián)網之戰(zhàn)基本上就是注意力之戰(zhàn)
,那打好這場仗,必然得了解人的注意是怎么回事。
一是選擇性:
注意是主動選擇的過程,也就是說,人要是把注意力集中在某個地方,需要主動做出選擇,不像聽覺和嗅覺,可以被動接受。所以,在設計過程中,需要通過一些方法,讓重點內容成為被注意對象。比如在新消息到達時,通過彈窗、小紅點等形式提示用戶,就是典型的影響用戶注意選擇的方法。
二是集中性:
正在集中精力所在的最多只能有一個實體,無論它是一個對象、一個特征、一個記憶還是一個概念。因為這個特點,在設計中就應該避免過多干擾注意的內容,盡量讓用戶集中注意在重點內容、重點任務上。
三是注意分配:
雖然集中精力所在只能有一個,但整體的注意資源還是可以得到有限度的分配。但也取決于并行活動的性質、復雜程度以及熟練程度。比如左手畫圓右手畫方,是很難做到的,但是同時走路并看手機,就沒有問題,主要就是因為走路這個動作我們非常熟練,只需要分配很少的注意力資源。所以在設計過程中,需要關注用戶同時進行的任務,是不是會對注意造成壓力,合理進行注意管理。
上圖是Evernote從2008年到2020年的UI設計變化史,這里我們可以很明顯的看出一個趨勢,就是簡單化和扁平化,那為什么會有這種趨勢呢,只是因為人們的審美發(fā)生了變化嗎,肯定不是這么簡單。
早年間,蘋果手機將屏幕分辨率一下子提升了不少,這讓眾多手癢的設計師們終于有了發(fā)揮余地(以前那種可以看到一個個像素的屏幕實在沒啥可做的),所以他們對于圖標和界面無所不用其極,描繪的美輪美奐。當然,一開始之所以這樣,另外一個原因也是為了沿用現實中的心智模式,讓用戶可以在屏幕上迅速理解,但是這兩者之間的成分,我覺得還是前者更多。然后到了一定的階段,人們發(fā)現這些精美的圖標和控件很大程度上吸引了用戶的注意力,真正重要的東西反而不容易看到,當然也是物極必反吧,終于在iOS7當中,蘋果徹底做了大革新,全部扁平化,提出內容至上的原則,其實就是對于注意力資源的重新考慮。
在人的認知系統(tǒng)中,記憶也是一個神奇的東西。
人的記憶分為短期記憶和長期記憶。短期記憶也稱工作記憶,是為了完成任務而臨時儲存的信息。工作記憶的容量有限,大約是7±2,即我們能夠同時記住的互不相關的東西的數量在5~9之間。此外,工作記憶還非常不穩(wěn)定,如果我們將注意轉移到新事物上,之前工作記憶中的內容就可能遺失。所以在設計中,需要考慮用戶的記憶壓力,盡量避免過多過長的記憶。
《上癮》中關于習慣是這么說的:“所謂習慣,就是’在情境暗示下產生的無意識行為’,使我們幾乎不假思索就做出的舉動。如今,我們習以為常的那些產品和服務正在改變我們的一舉一動,而這,真是產品設計者的初衷。”
產品設計者的初衷一定是要改變用戶的習慣嗎?到底應該引導用戶習慣還是順從用戶習慣呢?其實都不一定,要視情況而定。比如手機設計從物理鍵盤到觸摸屏,大勢所趨,需要引導習慣;而觸摸屏上鍵盤的字母排布,就需要順從用戶習慣了。
第一部分和第二部分介紹了什么是交互設計,以及這門學科出現的原因和發(fā)展歷程,然后介紹了它的一些學科理論基礎,因為篇幅原因,這里只是點到為止。要是想深入了解,還是需要自己深入到相關學科中,不但可以拓寬視野,也能夠對交互有更加深入的理解。
作者:覺之設計鏈接:https://www.zcool.com.cn/article/ZMTY0MTU0OA==.html來源:站酷著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。