聊下你不知道的交互設(shè)計(jì):交互設(shè)計(jì)師在項(xiàng)目中是如何工作的

2 評論 5415 瀏覽 273 收藏 7 分鐘

從事交互設(shè)計(jì)3年了,經(jīng)常有朋友和同事問我“到交互到底干嘛的?”答曰:“根據(jù)用戶的需求及場景,用簡單、愉悅的方式完成任務(wù)”。但他們似乎還是不太明白。

那么交互到底是干什么的呢?那么不得不提現(xiàn)在炒得火熱的“產(chǎn)品經(jīng)理”。如果說產(chǎn)品經(jīng)理是電影的編劇,那么交互設(shè)計(jì)師則更像導(dǎo)演,通過各種展現(xiàn)方式來展現(xiàn)作者想表達(dá)的情懷。

下面由我來描述下交互設(shè)計(jì)師在項(xiàng)目中是如何工作的:

一、首先交互設(shè)計(jì)師需要解讀產(chǎn)品需求文檔,了解用戶需求,以及通過哪些功能滿足用戶的痛點(diǎn)。eg:

譬如微信要做動態(tài)部分人可見的功能。原因大概是年輕人總會有一些照片不希望讓長輩看到,職員總會有一些吐槽不希望讓領(lǐng)導(dǎo)看到。該功能保護(hù)這些群體的私密性。

二、了解需求后下一步是組織功能架構(gòu)。將對用戶具有相同效應(yīng)的功能進(jìn)行整合,分清大的模塊。

然后

根據(jù)邏輯性,操作頻度,業(yè)務(wù)重要性調(diào)整模塊子功能的層級順序。

組織功能架構(gòu)可以“任務(wù)”,“主題”,“用戶”,“隱喻”劃分。eg:

1785334-f7d540b223dffbba

微信就是典型的以主題為主的組織結(jié)構(gòu)(上圖),將具有相同屬性的功能控制在一個(gè)范圍內(nèi):

  • “微信”:主要是IM聊天、收付款、掃一掃、添加好友等社交性的功能。
  • “通訊錄”:主要是查找通訊錄中的人,管理通訊錄的人,添加好友等關(guān)于人的功能。
  • “發(fā)現(xiàn)”:主要屬于運(yùn)營提升活躍的功能,發(fā)現(xiàn)朋友的新鮮事兒,尋找新朋友,發(fā)現(xiàn)游戲及購物。
  • “我”:都是屬于“我”的內(nèi)容,我的相冊、我的錢包、我的優(yōu)惠券、我的表情、設(shè)置。

1785334-9fb980621dd5d935

而以任務(wù)為主的組織一般用在次級分類中,例如淘寶的訂單(上圖),這里我上圖就不贅述了。

三、確定框架結(jié)構(gòu)后,模擬用戶使用場景,將需求轉(zhuǎn)化成任務(wù)。eg:

就拿大家最熟悉的網(wǎng)購來說吧

1785334-3b00af7ad2032ac9

  1. 譬如逛淘寶,如果你有明確目標(biāo)可以進(jìn)行關(guān)鍵詞搜索,如果需求很模糊可能會看導(dǎo)航中的推薦版塊。
  2. 經(jīng)過價(jià)格和銷量的排序篩選后,你終于找到了中意的寶貝。
  3. 有可能還沒發(fā)工資沒有足夠的資金,只好寶貝“加入收藏夾”以便以后購買。也有可能豪爽的“立即購買”。
  4. 點(diǎn)擊立即購買后你需要確認(rèn)好你的大小和樣式及數(shù)量。
  5. 輸入的收貨信息(由于這些需要輸入的內(nèi)容比較繁瑣,所以常用收貨信息提高了效率)。
  6. 提交訂單。
  7. 選擇支付方式并支付(可能銀行卡沒錢等各種情況支付失敗)。

那么很顯然,通過任務(wù)及場景,我們可以很好的確定頁面之間的邏輯順序,頁面內(nèi)需要的內(nèi)容及功能,以及頁面可能發(fā)生的各種異常情況。

四、當(dāng)你清晰的了解場景任務(wù)后,就可以開始設(shè)計(jì)原型了,對于原型設(shè)計(jì)的依據(jù)一般來源于以下:

  1. 平臺規(guī)范(iOS&Android design guideline),了解相應(yīng)平臺中的控件,以及使用的禁忌。
  2. 通用的設(shè)計(jì)原則,例如“功能可見性”,“即時(shí)反饋”,“防呆防錯(cuò)”,“費(fèi)茨定律”(按鈕的可觸達(dá)),“7±2法則”。
  3. 對用戶的認(rèn)知和心理模型進(jìn)行研究,如果產(chǎn)品的內(nèi)容與用戶認(rèn)知不匹配,就相當(dāng)于對牛彈琴。所以必須了解用戶當(dāng)前的對產(chǎn)品的態(tài)度,對產(chǎn)品的了解程度,所擁有的知識背景。
  4. 考慮內(nèi)容的約束和限制,例如對任務(wù)失敗的反饋(網(wǎng)絡(luò)環(huán)境不好加載失?。瑢?b>內(nèi)容進(jìn)行限制(文字長度及格式),對用戶犯錯(cuò)或可能犯錯(cuò)的警告提醒,對極限情況時(shí)的頁面展示。
  5. 整齊的排版,具有隱喻意義(iphone解鎖)或有趣的動效(谷歌的加載動畫),提升產(chǎn)品的趣味性。

五、設(shè)計(jì)完原型就可以與團(tuán)隊(duì)評審并交付UI和技術(shù)開發(fā)設(shè)計(jì)了,但這些都不是我想說的。因?yàn)檎嬲匾尿?yàn)證你的設(shè)計(jì)。

在上線后多注意用戶多反饋,后臺數(shù)據(jù)中頁面的流失率,點(diǎn)擊率,轉(zhuǎn)化率,用戶的使用流程(如何使用產(chǎn)品),如果能達(dá)到預(yù)期效果那么說明設(shè)計(jì)合理,如果沒達(dá)到那可以分析原因下一版迭代,以此來驗(yàn)證自己的設(shè)計(jì)是否合理。

相信說了這么多,你對交互設(shè)計(jì)師有了一定的了解了吧?

 

作者:廚房仔,一只野生UX設(shè)計(jì)獅(微信:addgyuifhk 歡迎騷擾)

原文地址:http://www.jianshu.com/p/2e72ab0e264c

本文由 @廚房仔 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 好像你的微信加不了 ??

    來自浙江 回復(fù)
  2. 太棒了!我要向你學(xué)習(xí)!我馬上就要大四實(shí)習(xí)了,希望能從你得文章里有所感悟。感謝這寶貴分享

    來自廣西 回復(fù)