交互思維僅是一種被動技能,被動技能的觸發(fā)是無意識,且根據(jù)經(jīng)驗的加持而產(chǎn)生疊加傷害效果的。跟主動觸發(fā)技能不同,它沒有實際可見的按鍵給予玩家控制。但是根據(jù)技能等級的提升,傷害效果也是持續(xù)增加的。
比如場景分析、競品分析、用戶調(diào)研等,都是實際可見的方法論,通過反復(fù)操練逐步提升熟練度。但是交互思維是不可見的,它隱含于設(shè)計師輸出物的內(nèi)在表現(xiàn)上,如合理性、商業(yè)性、可用性等等。它不僅是設(shè)計師自身經(jīng)驗的表現(xiàn),也是體現(xiàn)設(shè)計師綜合能力的重要模塊。
它具體指什么?如何提升?
關(guān)于「交互思維」
1989 年,Gillian Crampton-Smith 創(chuàng)建交互設(shè)計教育的初始名為「計算機相關(guān)的設(shè)計」,后來改名為「交互設(shè)計」。
所以早期人們聊到的交互設(shè)計,更多的是與計算機有關(guān)的,比如系統(tǒng)或設(shè)備。但是隨著交互設(shè)計這個概念的普及,其應(yīng)用范圍也被擴(kuò)展,包括「視覺設(shè)計」領(lǐng)域。
區(qū)別無非是這個過程是從有用性,可用性和情感因素等方面來優(yōu)先評估設(shè)計質(zhì)量,而不單單是「審美效果」層面。
有經(jīng)歷的朋友應(yīng)該經(jīng)常與業(yè)務(wù)人員因為視覺界面的「不同效果」而發(fā)生爭執(zhí),原因基本可以概括為各自對界面或圖片所傳達(dá)的意思有不同的理解。
從這點可以看出,用戶界面或視覺產(chǎn)出物本身也是為了達(dá)到某種目的的自然體現(xiàn),而這種通過設(shè)計手段解決問題的過程,本身就是一種「交互設(shè)計」—— 對信息進(jìn)行內(nèi)容分布,傳遞給目標(biāo)用戶。
所以任何商業(yè)視覺產(chǎn)出物,都能算作是交互設(shè)計的一種結(jié)果,包括這些視覺可見,與人產(chǎn)生「信息交流」的產(chǎn)出物。從這點可以看出,視覺設(shè)計師本身是具備「交互思維」的。
從表面上理解,它們是 A 和 B 之間發(fā)生的互動行為,他們可以是人與人,也可以是人與物。
比如,你出門買早飯,「告訴」對方要什么,對方接收到你的信息并將你需要的餐點拿給你,這就是一個完整的交互過程。
或者不同視覺設(shè)計師針對同一個功能所設(shè)計出的不同界面,也是各自對功能的不同理解,以至于所呈現(xiàn)出不同的效果圖。
所以一般設(shè)計師,包括商業(yè)視覺設(shè)計師或 UI 等等,在工作過程中產(chǎn)出的作品一定是包含「交互思維」的。只是不自知,也沒有建立系統(tǒng)性認(rèn)知。
舉個極端例子,如下圖:
兩張海報都在傳達(dá)各自的意思。
雖然每張海報都是不同設(shè)計師設(shè)計出來的,但是他們都有各自的目的。比如英勇無畏、心懷祖國、懷抱世界等等。
所以各位看到「交互思維」目前在任何領(lǐng)域都成了不可以避免的話題。餐飲、服飾、出行等等。唯一區(qū)別在于顯意識和無意識,有些人知道自己具備,有些人不知道罷了。
但是不能說交互設(shè)計就是用戶界面設(shè)計,甚至是視覺設(shè)計。它只是幫助設(shè)計師在信息呈現(xiàn)的結(jié)果上,表達(dá)出一種合理化的趨勢,而不僅僅是自嗨。
所以要具備「交互思維」,首先要明確設(shè)計的目的。
如何提升?
這里給出怎么提升的方法。
開頭說到,「交互思維」是被動技能,原因是不可見,但有實際效果。
是什么意思呢?就是具備交互思維的設(shè)計師,在工作中所呈現(xiàn)的內(nèi)容結(jié)果,是有思考過程的。比如視覺稿可讀性高,信息接受度強,符合用戶審美等等。如果是純粹的藝術(shù)作品,是不具備這些特點的。
包括產(chǎn)品設(shè)計中,一個功能首先要能用、好用,好不好看是次要的。對于交互設(shè)計來說,解決問題才是最優(yōu)先的。但是放眼任何行業(yè)「解決問題」都是核心,包括視覺設(shè)計。
所以延伸出來,解答這個問題的第一層意思:交互思維,應(yīng)該是幫助視覺設(shè)計師解決信息傳遞的問題的。
要做到這個程度,已經(jīng)不單是技法的提升了,它是設(shè)計師綜合能力的體現(xiàn)。
除了視覺設(shè)計師本身具備的「美學(xué)知識」外,交互思維還應(yīng)該從以下兩大領(lǐng)域出發(fā)進(jìn)行學(xué)習(xí):
人——心理學(xué)、社會學(xué)、人類學(xué);
機——計算機、工設(shè);
學(xué)這些的目的是,讓設(shè)計師在遵循自身的設(shè)計理念外,再從計算機以及人的角度出發(fā),去思考問題。
意為:通過對人(用戶)的了解,幫助他們解決機器(產(chǎn)品、圖片等)的使用/理解難題,解決手段是設(shè)計。
所以「交互思維」的提升,就是讓人與物或人與人之間,更流暢的進(jìn)行「對話」。
無論是視覺稿還是其他內(nèi)容,設(shè)計師要多問自己:用戶在看這張圖時,他了解到哪些信息,他會怎么做,他的感受如何。
這就是所謂「交互思維」的提升。你的設(shè)計稿越易理解,被業(yè)務(wù)方可接受的機會也越高。
除了對上面提到的三大領(lǐng)域的學(xué)習(xí)之外,平時看文章,看案例要多問為什么,以及怎么樣能更好。來提升自己思考問題的方式,對問題的解法進(jìn)行多角度的訓(xùn)練。
案例補充
用銀行卡從自動取款機(ATM)里取出現(xiàn)金,用戶實現(xiàn)這個目標(biāo)的過程,也是在用戶界面的支持下解決這個問題的過程。在這個過程中,用戶要正確完成如下的一系列動作:
插入卡片
輸入密碼
按“快速取款”按鈕
按“確定”按鈕
取出現(xiàn)金
拿出銀行卡
拿出回執(zhí)
一般設(shè)計師在設(shè)計這個操作界面的思路就是界面本身,比如插入卡片提示界面。具備「交互思維」的設(shè)計師除了針對于界面本身進(jìn)行設(shè)計外,還需要思考用戶是否知道「卡片插入」的入口,是否要基于明示,或者「輸入密碼」完密碼,是否有等待提示,等待提示的內(nèi)容應(yīng)該是什么?數(shù)字?文案?
又或者是用戶取出現(xiàn)金后,是否在界面上提示用戶取走銀行卡,如何提示?是在一個界面里簡單拔卡圖片,還是通過圖片加文字的結(jié)合說明?等等。
這些不僅僅是產(chǎn)品或交互思考的問題,視覺設(shè)計師也應(yīng)該思考其原因。
雖然部分視覺設(shè)計師認(rèn)為不需要思考,只需要根據(jù)產(chǎn)品的原型出圖,安安靜靜做一個美工就可以。但其實在作圖的過程中,這些問題早就已經(jīng)呈現(xiàn)在設(shè)計師的腦海里了,否則「插入卡片」的提示是如何設(shè)計出來的?填色?得了吧~~
這個世界上本沒有「美工」,只是自嘲的人多了,也就有了「美工」。
案例:關(guān)于「我的模塊的」深度解析
接下來,通過「我的」或者叫「個人中心」模塊來進(jìn)行設(shè)計的解析。
因為「我的」模塊面對的角色不同,產(chǎn)品的業(yè)務(wù)不同,所呈現(xiàn)的設(shè)計類型也會不一樣。所以我們今天取其精華,拿其中三個主要思考點來與各位聊聊該模塊的設(shè)計邏輯,分別為:
用戶的個人信息;
主動產(chǎn)生的信息;
共性信息;
下面來一一說明。
用戶個人信息
一種情況下,在「我的」或「個人中心」里的內(nèi)容都是用戶私有的,各位可以將其理解為一個錢包,用戶能在自己的錢包里放各種屬于他的東西,如電影票_打折券_現(xiàn)金_銀行卡_鑰匙/會員卡等等。它就像是一個人的私人領(lǐng)地,只要是個人的東西,都可以有序、合理地存儲于其中。
各位可以看到,在 ins,個人信息包括昵稱、頭像、介紹、粉絲、關(guān)注、圖片。其中圖片內(nèi)容占據(jù)了絕大部分版塊,因為 ins 本身就是圖片社交產(chǎn)品(現(xiàn)在也有小視頻了),所以著重突出顯示關(guān)于該產(chǎn)品最核心的內(nèi)容。但是個人信息永遠(yuǎn)會占一頭。
而微信,就是最傳統(tǒng)的列表形式,除了頭像,昵稱以及微信號外,就是功能的展示。而像二維碼、性別、地址等內(nèi)容都收藏在「基本信息」里面。
這里將信息明確的分為兩大塊,分別是個人基本信息,以及產(chǎn)品的功能信息。
a.從個人信息判斷產(chǎn)品屬性
各位注意,我這里說的個人信息不等于基本信息,而是屬于用戶在產(chǎn)品中的所有相關(guān)信息,也包括功能信息。
所以可以從上述簡短的描述中看到,一款產(chǎn)品的屬性是可以從「信息分類」里做初步判斷的。如,我個人的基本信息之外,還有功能排列的展示循序、邏輯,它們之間隱含了整個產(chǎn)品業(yè)務(wù)方向的核心點,或者說目前階段產(chǎn)品戰(zhàn)略的發(fā)力點。
也就從上述內(nèi)容中得以了解,「我的」模塊除了個人基本信息,還有功能信息。
順著這條思路,我們繼續(xù)往下拆解。
用戶主動產(chǎn)生的信息
同理,信息可以是私人內(nèi)容,也可以是跟用戶本身相關(guān)的功能內(nèi)容。但這些信息必須是用戶主動產(chǎn)生的信息,而不是泛信息,比如新聞是泛信息,新聞本身不會出現(xiàn)在「我的」模塊里面。但是用戶對新聞的評論或點贊會促使這篇新聞被包含于賬號體系中,因為評論是用戶主動產(chǎn)生的,所以新聞就依附于評論存在于用戶的體系里了。
包括知乎這類知識問答型產(chǎn)品,也是同上邏輯。
比如:
用戶在知乎所關(guān)注的內(nèi)容只會出現(xiàn)在首頁的「關(guān)注」模塊里,它不可能主動出現(xiàn)在「我的」模塊中,只有我主動對其評論、點贊,才有可能出現(xiàn)在我個人的動態(tài)信息流里。
就如上圖所示,我在首頁對這個魔術(shù)貼做了點贊操作,以至于讓其出現(xiàn)在「我的」模塊當(dāng)中。
知乎甚至通過一個 tab 欄來承載這些用戶主動產(chǎn)生的不同類別的所有信息,這是一個產(chǎn)品的屬性所產(chǎn)生的結(jié)果。
再來看騰訊新聞,也是一樣:
同樣利用不同 icon 的子模塊,來承載用戶主動產(chǎn)生的不同信息。也是同樣地道理。
b.模塊的設(shè)計能進(jìn)一步了解產(chǎn)品屬性
各位看到,「我的」模塊因為不同產(chǎn)品的不同業(yè)務(wù),所設(shè)計的形態(tài)也是不一樣,包括展示形式、呈現(xiàn)內(nèi)容、分類方式等。知乎和騰訊新聞都會展示用戶主動產(chǎn)生的信息,但是所展示的方式又不一樣,從這點可以判斷它們想要突出的核心點。
如知乎本身是一個重問答弱社交的內(nèi)容型產(chǎn)品,但為了提升用戶的成就感,其關(guān)注量與點贊量會在上部突出顯示,而自己產(chǎn)出的信息,會在下方分類展示。如果你是去看別人知乎的個人頁面,也會看到類似的展示形式。
因為你首先是關(guān)注這個人,以及這個人被認(rèn)可的程度,然后才是他產(chǎn)生的內(nèi)容。這個排列循序是有跡可循的,這就是所謂的除了個人基本信息外,通過功能信息的布局形式,分析產(chǎn)品的核心內(nèi)容。
之后,再來聊最重要的一點,也就是企業(yè)與用戶的共性信息。
共性信息
由上面兩段內(nèi)容可知,信息之所以可以放在「我的」模塊里,是因為這個信息要么是屬于用戶本身的基本信息,要么是用戶主動產(chǎn)生的功能信息。否則其余一切都不應(yīng)該在「我的」模塊中顯示。
但也有例外:如,會員,活動等非常規(guī)性功能。
假設(shè)你不是會員,但是在「我的」界面中展示會員開通的引導(dǎo)也是現(xiàn)在大部分產(chǎn)品在做的事情。因為它不僅在引導(dǎo)用戶去產(chǎn)生信息,而且還能給企業(yè)產(chǎn)生直接價值,同時給到用戶更優(yōu)質(zhì)的內(nèi)容。
也就是說,如果是有價值的共性信息,那么就可以在「我的」模塊里展示,因為它的最終結(jié)果也會是個人的。但是這類信息不能雜,要突出核心,否則就跟做產(chǎn)品一樣,把所有功能放在一個頁面里,混亂,就是這個道理。
如「QQ 音樂」這款產(chǎn)品,不僅在誘導(dǎo)用戶辦理會員,同時還在頭像附近展示綠鉆豪華版的標(biāo)識。它成了一種用戶身份的象征,與產(chǎn)品以及用戶個人都息息相關(guān),以至于成了特殊性較強的可置于「我的」模塊中的「信息」。
而后還有延展出其他的內(nèi)容,包括一些活動,也以這樣的形式植入于「我的」模塊里,所以才會有越來越豐富的所謂「個人中心」的出現(xiàn)。
但是各位要記住,一款產(chǎn)品的屬性與「我的」模塊是緊密相連的,不能隨意加入各類信息,就跟我上面提到的幾個例子類似,我們是可以通過對「我的」模塊的設(shè)計分析,來了解一款產(chǎn)品的,我下面給大家拆解一個例子。
案例解析
從上面聊的這三塊內(nèi)容可以得知一款產(chǎn)品的屬性,以及其現(xiàn)階段的發(fā)展方向。
分別指示為:
1.個人信息:查看「我的」模塊的內(nèi)容分類,判斷產(chǎn)品大致方向;
2.主動產(chǎn)生的信息:了解產(chǎn)品希望用戶關(guān)注的主要功能信息,并予以反饋;
3.共性信息:明白該產(chǎn)品目前希望推廣的內(nèi)容,以及它與產(chǎn)品核心功能的直接關(guān)系;
然后通過上面三個點,我們來分析一款產(chǎn)品。
寫這篇文章的時候準(zhǔn)備清理一下手機里的軟件,正好在卸載「即刻」之前,把它的界面截了個圖,所以就以「即刻」做例子來解析好了。
如圖,可以看出「即刻」在關(guān)于「我的」模塊中的設(shè)計還是中規(guī)中矩的:
1.首先明確用戶的個人信息,以及主動產(chǎn)生的信息,如創(chuàng)建的圈子,加入的圈子等等;
2.而后是羅列自己加入的圈子的信息動態(tài),也就可以確定這也是「即刻」這塊產(chǎn)品在做的核心模塊了;
3.最后羅列的「免流量」,意在引導(dǎo)用戶在刷信息的同時,能給平臺產(chǎn)生價值,同時也給用戶帶來福利。
所以很清晰,「即刻」就是在平臺以圈子為前提的條件下,讓用戶去接受信息。所以回過頭看「即刻」的首頁,頂部除了搜索就是圈子的推薦了,包括下面的內(nèi)容,也是以圈子為主,內(nèi)容為輔的展示形式。與「我的」模塊內(nèi)容一致。
由此看出「即刻」的定位很明確 —— 找到自己人。所以無論從首頁的設(shè)計還是「我的」模塊的內(nèi)容展示,都可以知道其以圈子為主的發(fā)展模式。類似于把豆瓣的小組功能提出來專門做了一個產(chǎn)品,且更具針對性。
通過「我的」模塊的分析,以及首頁內(nèi)容的呈現(xiàn)方式,我們就可以知道一款產(chǎn)品的設(shè)計思路與發(fā)展方向。雖然我這里只是簡單的聊了一部分,但是我相信各位深入研究自己公司的產(chǎn)品后,會發(fā)現(xiàn)還有更多內(nèi)容可以探索。
甚至通過判斷「我的」模塊的新增內(nèi)容,分析產(chǎn)品之后的主要發(fā)力點,如一些平臺會突然在「我的」模塊中上線「商城」的功能模塊,意欲何為?相信各位知曉如何去進(jìn)一步分析產(chǎn)品了吧。
小結(jié)
各位平時自己在分析的過程中,甚至可以通過草圖的方式將內(nèi)容詳細(xì)羅列出來,判斷產(chǎn)品的功能,在架構(gòu)布局上是否合理。如圖:
通過上圖內(nèi)容,各位在做產(chǎn)品功能的時候,就能將功能信息合理地進(jìn)行分類,層次也會更加分明。
當(dāng)然,「我的」模塊的設(shè)計思考遠(yuǎn)不止于此,我只是通過這三個點來跟各位簡單聊聊,目的是希望能帶給各位不一樣的思考。
但是各位在工作經(jīng)驗上的差異,教育文化背景的區(qū)別,所處業(yè)務(wù)屬性的不同,所設(shè)計出來的功能信息也會有較大差別。所以除了提升自己的專業(yè)能力之外,各位還要學(xué)習(xí)專業(yè)之外的內(nèi)容,更好的做好產(chǎn)品設(shè)計。
作者微信公眾號:呆呆U理
全站高品質(zhì)素材免費下載!