起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)社交產(chǎn)品方法論（七）：交互設(shè)計(jì)的二三事
一個(gè)完整的交互稿該考慮哪些因素？如何評(píng)判一個(gè)交互設(shè)計(jì)是否優(yōu)秀？帶著這2個(gè)疑問(wèn)，請(qǐng)聽(tīng)我為您慢慢分享。
交互設(shè)計(jì)稿作為銜接設(shè)計(jì)和開(kāi)發(fā)的橋梁，在產(chǎn)品設(shè)計(jì)中的作用舉足輕重。對(duì)開(kāi)發(fā)，承接的是邏輯的完整性。對(duì)設(shè)計(jì)，承接的是體驗(yàn)的優(yōu)越性。需求分析、用戶調(diào)研、競(jìng)品分析和數(shù)據(jù)分析的落腳點(diǎn)都需要一份完整的交互設(shè)計(jì)文檔來(lái)實(shí)現(xiàn)。
一份完整的交互設(shè)計(jì)文檔該如何實(shí)現(xiàn)？
我們可以分為四個(gè)步驟：
第一步：明確優(yōu)秀設(shè)計(jì)標(biāo)準(zhǔn)
要想做出優(yōu)秀的設(shè)計(jì)，首先得明確優(yōu)秀的設(shè)計(jì)是什么樣的。知道美，才能追求美。因此，多玩優(yōu)秀的產(chǎn)品對(duì)我們提升設(shè)計(jì)標(biāo)準(zhǔn)大有裨益。詳情可參考“社交產(chǎn)品方法論（二）：體驗(yàn)一款產(chǎn)品的正確姿勢(shì)”。
若將優(yōu)秀交互設(shè)計(jì)的標(biāo)準(zhǔn)提煉出來(lái)，我們可以分為：“可用性”和“創(chuàng)新性”兩個(gè)標(biāo)準(zhǔn)。
“可用性”標(biāo)準(zhǔn)我們可以參考Luke Miller在《用戶體驗(yàn)方法論》中提出的LEMES原則，即：
- Learnability（易學(xué)）
- Efficiency（高效）
- Memorability（易記）
- Errors（糾錯(cuò)）
- Satisfaction（滿意度）
“創(chuàng)新性”標(biāo)準(zhǔn)我們可以參考“社交產(chǎn)品方法論（四）：需求設(shè)計(jì)背后的邏輯”一文中提到的“4整合+1關(guān)注”：
- 整合競(jìng)品優(yōu)點(diǎn)
- 整合熱門(mén)功能
- 整合多個(gè)操作步驟
- 整合多個(gè)用戶群
- 關(guān)注細(xì)節(jié)
明確優(yōu)秀設(shè)計(jì)的標(biāo)準(zhǔn)一是可以幫助我們查漏補(bǔ)缺，二是可以幫助我們立長(zhǎng)志，朝著目標(biāo)不斷努力。
第二步：梳理清楚功能邏輯
在明確需求后，部分人可能會(huì)立即著手于交互稿的輸出。這樣往往會(huì)導(dǎo)致交互稿出現(xiàn)很多邏輯漏洞，更妥當(dāng)?shù)淖龇ㄊ牵?/p>
- 梳理業(yè)務(wù)流程圖；
- 明確需求出現(xiàn)的所有場(chǎng)景；
- 確定核心體驗(yàn)。
梳理業(yè)務(wù)流程圖可以幫助我們站在開(kāi)發(fā)角度，確定功能涉及到數(shù)據(jù)上的增刪改差，包括單頁(yè)面和多頁(yè)面間的數(shù)據(jù)流向。通過(guò)和開(kāi)發(fā)溝通業(yè)務(wù)流程圖，提前將技術(shù)問(wèn)題梳理清楚，避免功能設(shè)計(jì)后技術(shù)實(shí)現(xiàn)困難或根本實(shí)現(xiàn)不了。
明確需求出現(xiàn)的所有場(chǎng)景需要我們運(yùn)用邏輯思維窮盡需求可能發(fā)生的所有情況，這是一個(gè)非?？简?yàn)邏輯完整性的過(guò)程，我們可以通過(guò)腦圖軟件幫助我們遍歷場(chǎng)景。當(dāng)然，我們最終大概率仍會(huì)有疏漏的地方，這時(shí)需要我們和測(cè)試同學(xué)密切配合，力求將需求覆蓋所有場(chǎng)景。
確定核心體驗(yàn)幫助我們明確“重點(diǎn)”。一個(gè)功能，往往只有1，2個(gè)設(shè)計(jì)點(diǎn)是最重要的。明確重點(diǎn)有利于我們有目標(biāo)的學(xué)習(xí)競(jìng)品優(yōu)點(diǎn)，同時(shí)針對(duì)性的優(yōu)化核心體驗(yàn)?？酥迫缥⑿?，在移動(dòng)互聯(lián)網(wǎng)“供給遠(yuǎn)大于需求”的時(shí)代，大而全遠(yuǎn)不如小而精。
如我們需要設(shè)計(jì)一個(gè)“廣場(chǎng)”功能，F(xiàn)eed流排版、瀏覽方式、點(diǎn)贊、分享、評(píng)論等都只是輔助性體驗(yàn)。核心體驗(yàn)就一個(gè)——“內(nèi)容”。
廣場(chǎng)是否能持續(xù)產(chǎn)生符合“產(chǎn)品調(diào)性”的內(nèi)容，內(nèi)容不具有消費(fèi)性，其他的再花哨也白搭。因此我們前期的設(shè)計(jì)重點(diǎn)應(yīng)該是“內(nèi)容如何初始化”，“如何激勵(lì)內(nèi)容生產(chǎn)者”，以及“如何篩選符合產(chǎn)品調(diào)性的內(nèi)容”。
第三步：面向?qū)ο蠓治龉δ軐傩?/b>
如何輸出一份完整的交互稿，筆者的個(gè)人經(jīng)驗(yàn)是學(xué)習(xí)開(kāi)發(fā)思維。使用面向?qū)ο笏枷敕治龉δ軐傩?，幫助我們最大限度的避免疏漏，步驟如下：
- 枚舉功能的所有屬性；
- 確定修改屬性的交互事件；
- 確定修改后的屬性。
比如我們要設(shè)計(jì)一個(gè)排行榜功能，其涉及的面向?qū)ο蠓治鏊悸反笾氯缦拢?/p>
面向?qū)ο蠓治鏊悸?/p>
第四步：輸出符合設(shè)計(jì)規(guī)范的文檔
符合設(shè)計(jì)規(guī)范的交互稿一是視覺(jué)美觀，讓人賞心悅目，提升產(chǎn)品期望。二是體現(xiàn)我們的專(zhuān)業(yè)性，在產(chǎn)品設(shè)計(jì)上掌握主導(dǎo)權(quán)。因此強(qiáng)烈推薦沒(méi)有設(shè)計(jì)基礎(chǔ)的同學(xué)可以抽空研究下設(shè)計(jì)規(guī)范。
邏輯上的規(guī)范我們可以參考 Don Norman 的交互設(shè)計(jì)6原則：
- Affordance（預(yù)設(shè)用途）；
- Signifier（視覺(jué)指示）；
- Constraint（限制）；
- Mapping（匹配）；
- Feedback（反饋）；
- Conceptual model（心智模型）。
視覺(jué)上的規(guī)范我們可以參考 Robbin Williams 《寫(xiě)給大家看的設(shè)計(jì)書(shū)》提到的設(shè)計(jì)原則。筆者常用的設(shè)計(jì)屬性有：位置、大小、字號(hào)、顏色、間距、層級(jí)、一致性。
原型交互稿完成后，我們除了需要用設(shè)計(jì)標(biāo)準(zhǔn)自驗(yàn)有哪些可以改進(jìn)的地方外，還有些細(xì)節(jié)需要留意。
一是“特殊性”的處理，常見(jiàn)的有：
- 字符截?cái)啵?/li>
- 頁(yè)面空狀態(tài)；
- 長(zhǎng)屏（主要是iPhoneX）和短屏的適配；
- Android和IOS的差異。
二是配合設(shè)計(jì)和開(kāi)發(fā)的業(yè)務(wù)梳理：
- 所有文案的梳理；
- 所有動(dòng)效邏輯的梳理；
- 所有音頻的梳理；
- 復(fù)雜業(yè)務(wù)邏輯的梳理；
- 視覺(jué)設(shè)計(jì)師所需的頁(yè)面流程圖梳理。
綜上，交互設(shè)計(jì)的邏輯圖如下：
交互設(shè)計(jì)邏輯圖
舉個(gè)筆者最近設(shè)計(jì)的案例：語(yǔ)音房APP房主邀請(qǐng)上麥。
第一步：明確優(yōu)秀設(shè)計(jì)標(biāo)準(zhǔn)
抽象的定義我們根據(jù)LEMES整理如下：
- 該功能是否易學(xué)；
- 該功能操作是否高效；
- 該功能操作是否易記；
- 該功能是否糾正錯(cuò)誤操作；
- 該功能是否讓用戶滿意。
優(yōu)秀競(jìng)品體驗(yàn)我們可以以“全面K歌”和“TT語(yǔ)音”兩款I(lǐng)OS排名靠前的產(chǎn)品為標(biāo)桿。
第二步：梳理清楚功能邏輯
首先我們繪制出業(yè)務(wù)流程圖。
業(yè)務(wù)流程圖
其次，使用腦圖梳理一下該功能出現(xiàn)的各種場(chǎng)景。
功能可能出現(xiàn)的場(chǎng)景
共7種場(chǎng)景，整理如下：
- 場(chǎng)景1：房主邀請(qǐng)不在座位上的玩家上指定座位；
- 場(chǎng)景2：房主邀請(qǐng)?jiān)谧簧贤婕疑喜煌淖唬?/li>
- 場(chǎng)景3：房主邀請(qǐng)?jiān)谧簧贤婕疑舷嗤淖唬?/li>
- 場(chǎng)景4：房主連續(xù)邀請(qǐng)?jiān)谧簧贤婕疑舷嗤淖唬?/li>
- 場(chǎng)景5：房主連續(xù)邀請(qǐng)?jiān)谧簧贤婕疑喜煌淖唬?/li>
- 場(chǎng)景6：房主連續(xù)邀請(qǐng)不在座位上的玩家上相同的座位；
- 場(chǎng)景7：房主連續(xù)邀請(qǐng)不在座位上的玩家上不同的座位。
核心體驗(yàn)是房主邀請(qǐng)不在座位上的玩家上指定座位（場(chǎng)景1），在不影響其他場(chǎng)景體驗(yàn)的情況下，重點(diǎn)設(shè)計(jì)該場(chǎng)景體驗(yàn)。我們期望用戶可以在無(wú)任何指導(dǎo)的情況下，以最簡(jiǎn)便的方式享受到流暢的體驗(yàn)。
對(duì)于場(chǎng)景1，為保證被邀請(qǐng)玩家的隱私，被邀請(qǐng)方需要確認(rèn)后才會(huì)上麥，保證其聲音不會(huì)在未經(jīng)許可的情況暴露在公共場(chǎng)合。為方便邀請(qǐng)玩家快速選擇上麥玩家，我們提供搜索框，同時(shí)支持昵稱(chēng)和備注名查詢。
場(chǎng)景2類(lèi)似于場(chǎng)景1，優(yōu)化方案是將麥上玩家按順序優(yōu)先顯示在選擇上麥玩家的列表上。場(chǎng)景3屬于無(wú)意義操作，我們不予支持，選擇上麥玩家列表上不顯示座位上玩家。針對(duì)場(chǎng)景4,5,6,7，為避免用戶連續(xù)收到邀請(qǐng)干擾，我們?cè)O(shè)計(jì)為邀請(qǐng)方不受限制隨意邀請(qǐng)，但被邀請(qǐng)方在指定時(shí)間閾值內(nèi)只會(huì)收到一條邀請(qǐng)。
第三步：面向?qū)ο蠓治龉δ軐傩?/b>
該功能面向?qū)ο蠓治龅哪X圖如下：
面向?qū)ο蠓治瞿X圖
第四步：輸出符合設(shè)計(jì)規(guī)范的文檔
“特殊性”的處理，我們需要做的有：
- 字符截?cái)?，用戶名上?個(gè)字；
- 頁(yè)面空狀態(tài)，房間無(wú)人時(shí)選擇上麥玩家的空狀態(tài)，搜索玩家結(jié)果為空時(shí)的狀態(tài)。
綜上，輸出的頁(yè)面流程圖如下：
頁(yè)面流程圖
最后，補(bǔ)充下邀請(qǐng)失敗場(chǎng)景的toast文案：
- 官方上麥黑名單場(chǎng)景，“邀請(qǐng)失敗，該玩家已被禁止上麥”；
- 玩家不在房間場(chǎng)景，“邀請(qǐng)失敗，該玩家不在房間”；
- 老版本場(chǎng)景，“邀請(qǐng)失敗，該玩家版本過(guò)低”。
小結(jié)
交互設(shè)計(jì)所涉及的領(lǐng)域非常廣，從心理學(xué)到人機(jī)工程，需要我們孜孜不倦，持續(xù)積累。理論上多讀優(yōu)秀書(shū)籍和文章，實(shí)踐上多學(xué)習(xí)優(yōu)秀產(chǎn)品和多復(fù)盤(pán)自身設(shè)計(jì)。長(zhǎng)期堅(jiān)持下來(lái)，我們的交互設(shè)計(jì)能力一定能有長(zhǎng)足的提升。
盡請(qǐng)關(guān)注下一篇：社交產(chǎn)品方法論（八）：數(shù)據(jù)分析的二三事。
相關(guān)閱讀
社交產(chǎn)品方法論（一）：自上而下的思考產(chǎn)品
社交產(chǎn)品方法論（二）：體驗(yàn)一款產(chǎn)品的正確姿勢(shì)
社交產(chǎn)品方法論（四）：需求背后設(shè)計(jì)的邏輯
社交產(chǎn)品方法論（五）：用戶調(diào)研的二三事
社交產(chǎn)品方法論（六）：競(jìng)品分析的二三事
作者：小強(qiáng)Joey，一個(gè)努力ing的社交產(chǎn)品經(jīng)理。
本文由 @小強(qiáng)Joey 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
