交互新人眼中的交互設(shè)計

5 評論 5818 瀏覽 950 收藏 10 分鐘

從一開始選擇做交互設(shè)計這個崗位,我就一直在思考:“交互設(shè)計究竟是什么東西”。近段時間以來參加了一些面試,每次面試都會讓我去重新思考一下這個問題。加上最近又做了一些工作,看了一些資料,對這個問題又有了一些新的認(rèn)識,所以來記錄一下。

普通大眾認(rèn)為的交互設(shè)計

交互設(shè)計作為一個新興職位,可能大部分的人都還不知道有交互設(shè)計這個崗位,不過這并不妨礙他們對于交互設(shè)計的認(rèn)知。舉個例子,他們可能會知道“搖一搖”或者“掃一掃”,并且可能每天都在用這兩種交互方式。

“搖一搖”是由微信帶起的一種風(fēng)靡全國的交互方式,通過簡單的左右晃動手機(jī),伴隨著來福槍的槍聲就可以找到同時在搖動手機(jī)的人,然后進(jìn)行陌生人社交。

“掃一掃”則是微信帶來的另外一種交互方式,通過手機(jī)攝像頭掃描二維碼,即可讀取二維碼的信息。掃一掃可以解決從其他端口到手機(jī)端的傳輸問題,比如在PC網(wǎng)頁上掃描二維碼下載東西。

其次就是微信發(fā)送圖片的那個交互方式:如果在發(fā)照片的前一段時間有發(fā)生拍照、截屏或者保存照片的行為,當(dāng)你按下添加鍵時,微信會詢問你是否是要發(fā)送該照片。

以上的交互設(shè)計的例子可能代表絕大多數(shù)人對于交互設(shè)計的認(rèn)知,雖然他們可能不明白交互設(shè)計具體在做什么,但是他們會形成這樣的刻板印象:交互設(shè)計就是優(yōu)化使用的體驗。

交互設(shè)計在產(chǎn)品設(shè)計的地位

交互設(shè)計師現(xiàn)在主要活躍在各種互聯(lián)網(wǎng)產(chǎn)品設(shè)計中。互聯(lián)網(wǎng)產(chǎn)品主要包含這些人:產(chǎn)品經(jīng)理、交互設(shè)計師、視覺設(shè)計師、開發(fā)工程師。他們在產(chǎn)品設(shè)計中的各種步驟發(fā)揮自己的作用。

產(chǎn)品經(jīng)理:讓產(chǎn)品有用。這里的有用是指讓產(chǎn)品具備某種功用,或者說滿足用戶的某種需求?;ヂ?lián)網(wǎng)的產(chǎn)品經(jīng)理無時無刻不在挖掘用戶的需求,然后設(shè)想解決方案去滿足用戶的需求。產(chǎn)品經(jīng)理定義了產(chǎn)品最基礎(chǔ)的功能,讓產(chǎn)品變得有用處。

交互設(shè)計師:讓產(chǎn)品的內(nèi)在變得好用。交互設(shè)計師是銜接產(chǎn)品經(jīng)理的下一個環(huán)節(jié),負(fù)責(zé)把產(chǎn)品經(jīng)理抽象的需求具象化成流程和界面。通過統(tǒng)籌頁面布局,使得每個頁面的表達(dá)更加詳略得當(dāng),用戶可以一眼抓住最重要的內(nèi)容。通過統(tǒng)籌操作流程,讓用戶可以高效地完成自己的任務(wù)??梢钥吹?,交互設(shè)計師的作用就是使得產(chǎn)品變得好用,而且對于這種“好用”,用戶可能可以感覺得到,但是具體卻是說不清的。所以說這種好用是內(nèi)在性的好用。

視覺設(shè)計師:讓產(chǎn)品的外在變得好用。交互設(shè)計師設(shè)計完頁面和流程之后,到用戶具體接觸到的成品還有一個步驟,那就是視覺設(shè)計師做的事情。視覺設(shè)計師把交互設(shè)計師那些粗略的界面豐富起來,通過顏色、字體、圖形、動效(交互設(shè)計師也會參與動效的設(shè)計)的潤色,使得界面變成實際產(chǎn)品中那種色彩斑斕、活靈活現(xiàn)的界面。這就是用戶可以實實在在感受到的東西,所以說這種好用是外在性的好用。

開發(fā)工程師:讓產(chǎn)品真正能用。前面產(chǎn)品經(jīng)理和設(shè)計師做了那么多工作,其實都是在做模型,真正把模型建立成真正產(chǎn)品的人是開發(fā)工程師。如果沒有開發(fā)工程師,前面做的那么多都是紙上談兵而已。所以說,開發(fā)工程師讓產(chǎn)品“能用”起來。

交互設(shè)計的三要素

交互設(shè)計師的作用在于讓產(chǎn)品變得好用、易用。這其中交互設(shè)計師需要進(jìn)行大量的思考,其中思考的主要內(nèi)容就是根據(jù)三要素來進(jìn)行的。

用戶

交互設(shè)計的服務(wù)對象是用戶,我們根據(jù)用戶來指定相對應(yīng)的交互流程和界面。所以這要求交互設(shè)計師要具備同理心,換句話說,交互設(shè)計要經(jīng)常進(jìn)行換位思考,站在用戶的角度去思考問題。去設(shè)想用戶會怎么做,然后根據(jù)用戶的心理模型去進(jìn)行相應(yīng)的設(shè)計共組。

需求

交互設(shè)計是承接產(chǎn)品經(jīng)理的工作的,產(chǎn)品經(jīng)理會提供一系列的需求。交互設(shè)計師需要根據(jù)需求來進(jìn)行設(shè)計,所以交互設(shè)計的第二個要素是需求。從這點可以看到,交互設(shè)計師需要平衡用戶和產(chǎn)品經(jīng)理這兩個角色的訴求,這一點是很考驗交互設(shè)計師的能力的。

場景

有了用戶,有了需求,接下來就是要設(shè)想用戶的使用場景。交互設(shè)計師做的每個設(shè)計都是基于用戶場景來進(jìn)行的,所以場景至關(guān)重要。如果要在三要素里面挑選一個最重要的要素,我覺得應(yīng)該就是場景的。場景實際上包含有“人、物、動作”三個維度,在一定程度上可以說包含有前面兩個要素。

交互設(shè)計的產(chǎn)出

與其他職位不同,交互設(shè)計師的主要工作其實是思考,思考各個流程和頁面,做反而是比較小的部分。這是,說到底每個職位最終都要看自己的成果說話,所以交互設(shè)計師的產(chǎn)出究竟是什么呢?

頁面:交互設(shè)計產(chǎn)出物之一就是界面,不過這里的界面只是線框圖界面,線框圖就是簡單的線條和方框構(gòu)成的圖,主要是定義的是界面上的元素有哪些?位置要怎么擺放?大小對比是怎么樣?

804591-595db55fc85fa486

線框圖[2]

流程:交互設(shè)計的第二項產(chǎn)出是流程,可以是流程圖,也可以是界面的流程。

流程圖[4]

流程圖[4]

頁面流程[3]

頁面流程[3]

信息架構(gòu):交互設(shè)計師還有一項很重要的事情是梳理產(chǎn)品的信息架構(gòu)。當(dāng)產(chǎn)品的內(nèi)容和功能變得很大很大的時候,就需要這一步驟。好的信息架構(gòu)可以讓用戶快速找到自己想要的東西。信息架構(gòu)梳理的最終產(chǎn)出就是思維導(dǎo)圖。

信息架構(gòu)

信息架構(gòu)

交互方式:交互方式還有一項工作是構(gòu)思交互方式,主要是交互動作的觸發(fā)方式。比如上文的“搖一搖”和“掃一掃”。同樣的還有下拉刷新、瀑布流等,這些都是屬于交互方式的創(chuàng)新,不是一般的交互設(shè)計師是能做的。

從當(dāng)初選擇做交互設(shè)計師到現(xiàn)在做第二份實習(xí)工作,對于交互的理解也在逐漸加深,也越發(fā)覺得當(dāng)初的選擇沒有選錯。期待我能在交互設(shè)計這條路上越走越遠(yuǎn)吧。

參考資料

[1]張小龍2011年華中科大演講實錄:“搖一搖”源于性暗示和性驅(qū)動-虎嗅網(wǎng)

[2]20個出色的移動線框圖設(shè)計工具 – 站長之家?

[3]9步開發(fā)出一款iPhone 應(yīng)用?

[4]解析流程圖與線框圖的幾種分類 – 網(wǎng)頁設(shè)計

 

本文由 @yqqyzy?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 交互本來就是從產(chǎn)品經(jīng)理這個崗位中分離出來的,細(xì)分之后交互設(shè)計這個職位還在逐漸完善,所以會有這種感覺吧

    來自廣東 回復(fù)
    1. 那你覺得產(chǎn)品經(jīng)理的產(chǎn)出應(yīng)該是什么

      來自北京 回復(fù)
    2. 需求文檔,大概的功能原型?

      來自江蘇 回復(fù)
  2. 1圖的工具是AXURE嗎

    來自廣東 回復(fù)
    1. 應(yīng)該不是喲,我也是隨手找的圖

      來自廣東 回復(fù)