淺談工作中的互動設計文檔撰寫

fans news 發佈 2021-11-24T12:36:31+00:00

很多公司沒有交互這個崗位,其中原型圖產品經理畫了,交互邏輯動態圖是UI設計畫了,很多人就很好奇這個交互崗位是不是可有可無呢,答案肯定是必須要有的。

工作中兼任互動設計崗位2年多,平時接到需求的時候會和產品進行深入溝通,然後產出交互原型圖進行評審,確認以後輸出完整的互動設計文檔到UI設計那邊(公司UI也是我來做)。


為什麼需要寫交互文檔呢?


很多公司沒有交互這個崗位,其中原型圖產品經理畫了,交互邏輯動態圖是UI設計畫了,很多人就很好奇這個交互崗位是不是可有可無呢,答案肯定是必須要有的。


第一,互動設計師的交互文檔就想UI設計的Sketch/Figma/Photoshop源文件一樣可以保存記錄你的整個產品過程設計思路和分析的過程,互動設計文檔可以包含你的產品的項目背景、需求分析、用戶畫像、競品分析、產品數據分析、業務交互邏輯等。

這裡肯定會有人說了這不是一些產品經理做的事情嗎?沒錯現在很多產品也會做這些內容,但是有互動設計的加入來一起做會更加系統的記錄和輸出完整的內容,可以讓產品經理更加專注到挖掘商業和產品目標上去。

還有就是我們在後面設計走查的時候避免和開發扯皮,問你設計的依據啥的,這個時候可以把文檔甩他臉上。


第二、交互作為作為一個連結UI設計和產品的中間人,同時提供交互邏輯給前後端進行框架和業務搭建,同時也提供給測試進行測試用例的編寫,因此撰寫一份標準和規範的互動設計文檔這樣看來是不是很重要了。

因為我們進行文檔評審的時候,UI同學了解頁面需要給用戶傳達什麼情緒,達到什麼目的,告訴前端同學頁面跳轉的邏輯以及交互動態模塊怎麼寫,幫助後端同學預先搭建後台框架與資料庫以及業務邏輯,最後幫助測試同學進行單元測試,以及完善他們的測試用例。


第三、訓練你的撰寫能力為以後更好的跳槽作為作品集。

現在社招內卷嚴重,如果你面試互動設計崗位還是千篇一律的PDF排版或者是長圖JPG,很容易在面試官眼中直接跳過。

所以為了體現專業性我們可以學習UI設計的包裝作品集,但是不要過度了,以免讓人覺得不落地,只是一個空殼而已。PS:作品集涉及到公司機密數據的時候要進行數據脫敏處理


互動設計文檔應該放什麼內容?


這裡根據公司情況來說,一般來講,一個基礎規範互動設計文檔應該包含,文檔封面、更新日誌、設計說明文檔、業務流程圖、交互原型圖、垃圾桶等模塊,這裡可以根據自己公司情況進行增加其他內容,有些內容可以在產品文檔裡面直接複製過來。




1.文檔封面


文檔封面相當於一本書的給人的一個基本的了解,你可以知道產品名稱、版本編號、日期以及文檔負責人,除了以上信息外,你可以自行進行的添加。




2.更新日誌


更新日誌主要記錄整個文檔的疊代修改內容,讓產品、UI、開發同學快速了解本次需要做的內容。

我這裡更新日誌借鑑了產品同學文檔的內容,裡面包括日期、變更內容、所在頁面以及備註四個欄位,這裡需要提醒一下其他同學注意查看體驗問題了,我們應該把最新的內容放在最上面啊。




3.產品項目背景


產品項目背景是一個核心關鍵點,他是告訴我們為什麼做這個產品的一個北極星指標,對齊整個項目組的統一思想,時刻提醒著我們產品應該怎麼做,為團隊成員指明一個方向。


比如我第一份工作的時候,我們是做一個統計分析的工具系統的,但是隨著產品慢慢疊代,功能越來越多,老闆有一天跟產品說希望在系統中加入一個智能客服功能,本來用戶學習成本就高,如再加上去是不是整個產品有點累贅了?


有很多小公司沒有產品經理,很多需求都是銷售說的,如果你在這樣的公司要麼就換一家,要麼就發揮出自己的積極解決問題的一面,去主動和銷售溝通或者和老闆溝通了解清楚產品背景定位,努力完成這一部分,雖然自己會辛苦累一點,但是你作為一個互動設計師或者用戶體驗設計不就是一個中間人的角色嗎,你做好了也是為團隊成員後面的努力提供方向。


4.產品需求


產品需求列表記錄了產品需要做的功能點,這些功能我們一般在產品經理或者項目經理文檔中收集獲得,我們這個需要和產品經理溝通對需求的優先級進行排序分類。


我們這裡的原則是按照前面提到北極星指標來分加上KANO法則來分,P0-PN進行排序,0是優先級高的,也是產品非做不可的功能。



5.用戶畫像


通過用戶畫像來了解你的目標用戶群體特徵,可以對目標用戶進行分類、需求、動機等分析,再根據不同的用戶進行場景設計。


有了用戶畫像作為支撐,能避免一些設計過程的設計師自以為是的因素,比如我們目標用戶是一群中年人,文化程度不是很高,這個時候字體是不是應該設置大一點,顏色飽和度稍微不要這麼鮮艷,文案應該更加簡潔明了等。


當然,如果是小公司可沒這麼多時間跟你做用戶畫像,用戶調研之類的。所以沒有更快的方法大致了解或者獲取用戶信息呢?這裡我分享一個不錯的免費獲取行業數據的地方,艾瑞數據,打開選擇自己領域的產品類型,可以看到一些免費數據,當然也有收費內容。



6.競品分析

所謂知己知彼百戰百勝,對你的對手了解得越深可以更好的快速了解產品業務、行業的用戶使用習慣等,也是快速得到產品需求的方式之一,我們在做交互原型的時候也可以作為借鑑的素材。



7.信息架構


信息架構屬於用戶體驗五要素的結構層,信息架構能夠很好的了解整個產品的脈絡,也是對產品一次歸類設計,可以發現產品功能點是否有遺漏,同時也可以通過產品大體信息架構來觀察產品是否合理。


(這裡個人吐槽一下有些產品的架構層很深,比如支付寶取消免密支付,其目的就是故意刁難用戶讓用戶打退堂鼓,一個簡單的操作需要你進入到N個頁面操作而且又是彈窗又是警告之類的。我相信產品經理不是不知道,可能是為了KPI吧。)



8.數據分析


數據分析是互動設計必不可少的一項技能,也是檢驗設計師成果的重要指標。如果缺少數據分析單憑個人主觀因素,你很難說服別人這個設計的好壞,畢竟誰不會吹噓自己的作品呢。

一般數據分析可以通過數值進行對比,前提是你產品進行了埋點或者接入第三方統計,這樣你可以進入後台是否上升、下降、還是持平等,改版是否有效果,對於初期的產品來說可以關注一下DAU(日活躍數)、MAU(月活躍數)、以及跳出率等,因為這些數據的增減影響到整個產品是否能活下去,所以要及時查看數據發現異常馬上和產品經理反饋溝通,避免惡化下去。市面上第三方統計數據平台有神策數據、Growing IO、百度統計等。



9.業務流程圖


繪製業務流程圖目的就是梳理並分析優化業務流程, 同時也是給開發和測試看的一個邏輯交互圖,如果不繪製開發可能在某個環節就會有遺漏,到時候測試檢查或者線上發現就問題大了。


比如我做的協會入會這個:入會申請選擇會員類型填寫資料註冊成功管理員收到信息查看內容資料審核通過,這一些流程。如果遺漏了其中一環就會特別麻煩。


如果你的產品經理比較認真,他會直接給你現場的業務流程圖,如果碰到公司沒有產品經理的話,就需要自己去問用戶,或者問需求方的人。這裡需要主要多去聽、多去問、做出來以後再去確認,這樣出現遺漏的點會降低很多。



10.交互原型圖

這是上面所有內容的精華進行總結提煉得到的一個原型圖,我相信大家平時工作都非常熟悉了,這裡分享一下原型圖容易犯錯的點。


1.像我剛從UI設計轉交互畫原型圖的時候喜歡畫的精緻,這個是特別不好的習慣,容易干擾UI同學的設計,而且對於UI同學來說你這是有點搶他們飯碗的意思啊 開個玩笑,這樣只會顯得不專業,所以頁面儘量採用黑白灰配色,而且原型圖大概表達出產品功能點、頁面跳轉邏輯、交互內容說明情況等,其他的交給UI設計發揮特長。


2.如果涉及到多平台(iOS、Andriod、PC端),除非產品功能特別多,一般都放在一個設計文檔中,不需要來回切換查看,評審也會遺漏。


3.創建自己的組件庫,這個我作為UI設計就很明白,現在很多設計團隊都會搭建產品的組件庫,組件庫的強大就是可以重複利用,提高工作效率。至於拿什麼工具搭建根據公司協作來決定。




11.垃圾桶

垃圾桶的好處也是我慢慢才發現的,這是一個可以保留飛機稿的地方也是一個可以有後悔藥的地方,這個地方可以收藏你當時的設計思想、也可以避免產品覺得還是以前某個方案比較合適的時候。


總結

說了這麼多,每個部分的需要點都說到了有些是可以不做的,文檔也不是絕對的規範,每個公司交互職責都有各自的屬性,所以我這裡總結了自己在公司的經驗。


總之我們回到設計的本質是什麼,是服務好你的用戶,(最近夢想改造家第八季就有一個設計師,沒有把客戶的需求放在第一位,完全按照自己的經驗拿著客戶的錢來完成自己的藝術品,所以這樣的人根本不符合設計師這樣稱呼。)是把複雜的事情做簡單,所以我希望有一天我能成為一名優秀的互動設計師,把產品做好,把體驗做好,希望看到這裡的人一起共同進步。

關鍵字: