早在2015年，阿里巴巴設(shè)計(jì)高管就提到“全棧設(shè)計(jì)師”的概念，而“產(chǎn)品設(shè)計(jì)師”這個(gè)概念，更是很早就存在了，只是一直未成大氣候。隨著互聯(lián)網(wǎng)“下半場(chǎng)”的到來(lái)，產(chǎn)品設(shè)計(jì)師在行業(yè)內(nèi)的呼聲越來(lái)越高，它很可能取代UI和UE，變成它們二者的最終形態(tài)。作為一個(gè)兼UED的工作的UID，一直未對(duì)交互設(shè)計(jì)進(jìn)行系統(tǒng)性的思考。今天就來(lái)梳理下關(guān)于交互設(shè)計(jì)的一些理論和思路。

交互設(shè)計(jì)（英文Interaction Design, 縮寫(xiě)IXD)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。簡(jiǎn)而言之，交互設(shè)計(jì)的目的是幫助用戶更好的達(dá)成目標(biāo)，滿足用戶需求。

交互狀態(tài)

1. 等待

• 無(wú)線端產(chǎn)品，多從等待開(kāi)始
• 降低用戶在等待過(guò)程中的敏感性
• 若無(wú)法降低，就給予期望
• 切忌呆滯

3秒內(nèi)不能讓用戶順暢使用App，約流失75%的用戶

2. 初始

• 先打招呼，再商量，再問(wèn)用戶要什么
• 最好能知道用戶想要什么
• 不要自作聰明做決定
• 但可以給出建議

• 網(wǎng)易云音樂(lè)初始頁(yè)是類似引導(dǎo)頁(yè)的登錄界面，可達(dá)到引人入勝的效果。其次用戶也可以選擇先體驗(yàn)再登錄
• 知乎的初始頁(yè)則是主動(dòng)收集用戶需求，但也是選擇性的
• 在行一點(diǎn)則在初始頁(yè)放入新人福利，引導(dǎo)用戶進(jìn)一步使用

3. 輸入

• 輸入是一件成本極高的事情，不到萬(wàn)不得已，不要選擇輸入
• 如果一定要輸入，想辦法簡(jiǎn)化輸入步驟
• 幫助輸入

• 京東金融幫助用戶記住賬號(hào)，免輸入
• 人人貸的手勢(shì)密碼登錄
• 微信的聲音鎖登錄

• 微信的“按住說(shuō)話”，用語(yǔ)音幫助用戶輸入
• 微信的指紋支付代替密碼支付
• 微信的掃一掃登錄/付款

• 知乎首次進(jìn)入搜索頁(yè)面，出現(xiàn)熱搜、影視等推薦內(nèi)容
• 知乎搜索頁(yè)面會(huì)根據(jù)輸入關(guān)鍵詞，實(shí)時(shí)推薦相關(guān)內(nèi)容
• 知乎根據(jù)之前的搜索關(guān)鍵詞，加入搜索歷史

4. 空

• 空是件壞事情，想辦法消滅（提升產(chǎn)品硬實(shí)力)
• 如果不能消滅，那最好找到替補(bǔ)方案
• 如果替補(bǔ)方案都沒(méi)有，就鼓勵(lì)用戶不讓它空著

• 網(wǎng)易云音樂(lè)無(wú)結(jié)果沒(méi)有任何反饋，產(chǎn)品硬實(shí)力不夠（如硬實(shí)力很強(qiáng)的Google、火狐等瀏覽器包羅萬(wàn)象）
• 餓了么搜索后無(wú)結(jié)果，給用戶提供推薦商家
• 口碑在訂單空狀態(tài)下，鼓勵(lì)用戶去首頁(yè)逛逛（創(chuàng)建訂單），淘寶、天貓等電商App在購(gòu)物車空狀態(tài)同樣如此

5. 有數(shù)據(jù)

• 引導(dǎo)用戶進(jìn)行下一步操作
• 確定數(shù)據(jù)的排序原則，減少用戶挑選成本

• 毒App根據(jù)關(guān)鍵詞的關(guān)聯(lián)性排序
• 微信讀書(shū)則根據(jù)書(shū)本的閱讀用戶數(shù)排序
• 鈦媒體的排序方式，話題>瞬眼>文章

6. 過(guò)多數(shù)據(jù)

• 這不是用戶想要的
• 不必展現(xiàn)所有數(shù)據(jù)
• 收起而不是隱藏過(guò)多的數(shù)據(jù)，并給予出口
• 篩選方式，判斷用戶的在乎維度

• 知乎的篩選方式：綜合、近一周、用戶、話題、私家課、Live
• 餓了么的篩選方式：綜合、銷量最高、距離最近、其他
• 58同城選擇地區(qū)，將熱門(mén)城市展示靠前

7. 關(guān)注/沉浸

• 保證用戶關(guān)注，有興趣（留住用戶）
• 不要干擾，直到事件完成（如不要鎖屏，不要彈出無(wú)關(guān)信息）
• 如果被強(qiáng)制干擾，記得保存現(xiàn)場(chǎng)

• YouTube觀看視頻過(guò)程中，返回后依然可以以小窗口的形式看到該視頻繼續(xù)播放；
• 淘票票則提供電影預(yù)告片引人入勝
• bilibili在被打斷（如斷網(wǎng)或者有事退出），可以選擇繼續(xù)上次的播放進(jìn)度

8. 正確

• 最好的交互是讓用戶感覺(jué)不到，就繼續(xù)下一步
• 除非這是最后一步，才需給予用戶提示

9. 錯(cuò)誤

• 直接幫助用戶修正錯(cuò)誤
• 告訴用戶錯(cuò)在哪，越明確越好
• 給用戶指明修正錯(cuò)誤的方式

• UC瀏覽器在百度搜索，可及時(shí)糾正文字錯(cuò)誤
• 簡(jiǎn)書(shū)登錄提示手機(jī)號(hào)碼格式不正確
• 用未注冊(cè)過(guò)的手機(jī)號(hào)登錄時(shí)，提示用戶注冊(cè)

10. 待確認(rèn)

• 無(wú)法返回，可能是誤操作，需要確認(rèn)
• 涉及到金錢(qián)
• 確認(rèn)文案清晰明了

11. 結(jié)束

• 絕不等同于：請(qǐng)你關(guān)了我 ?
• 繼續(xù)引導(dǎo)用戶下一步操作
• 呆滯狀態(tài)，間接告訴用戶操作已結(jié)束

12. 中斷

• 因?yàn)橐馔馇闆r，操作被迫終止
• 保存現(xiàn)場(chǎng)，讓用戶繼續(xù)上一步操作
• 意外崩潰采用定時(shí)保存方式，以降低用戶損失

交互設(shè)計(jì)定律

1. 奧卡姆剃刀原理

在設(shè)計(jì)上的應(yīng)用，則表現(xiàn)為：不必要的元素會(huì)導(dǎo)致設(shè)計(jì)效率降低，并增加不可預(yù)期的后果。所以去掉不必要的干擾元素，保證頁(yè)面純粹、簡(jiǎn)潔。

2. 席克定律

席克定律多應(yīng)用于軟件/網(wǎng)站界面的菜單及子菜單的設(shè)計(jì)中，在移動(dòng)設(shè)備中也比較適用。例如比起 2 個(gè)菜單，每個(gè)菜單有 5 項(xiàng)，用戶會(huì)更快得從有 10 項(xiàng)的 1 個(gè)菜單中做出選擇。

3. 菲茲定律

1、我們想要更容易點(diǎn)擊到控件，就應(yīng)該放在屏幕的邊緣或角落里。讓常用的控件更大，更容易辨別;

2、使用屏幕的邊緣和角落，讓控件有效擴(kuò)大，永遠(yuǎn)不要把控件放在離屏幕邊緣或角落1px遠(yuǎn)的地方;

3、邊緣之外的地方，也可以算作目標(biāo)點(diǎn)的面積，這樣一來(lái)，目標(biāo)的面積就被無(wú)限的放大了，也更方便用戶操作。

4. 神奇數(shù)字 7±2 法則

1、web導(dǎo)航或選項(xiàng)卡盡量不要超過(guò)9個(gè)，移動(dòng)應(yīng)用交互設(shè)計(jì)上，選項(xiàng)卡不會(huì)超過(guò) 5 個(gè)。

2、如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)層級(jí)結(jié)構(gòu)來(lái)展示各段及其子段，并注意其深廣度的平衡。

3、把大塊整段的信息分割成各個(gè)小段，并顯著標(biāo)記每個(gè)信息段和子段，以便清晰的確認(rèn)各自的內(nèi)容。（如iPhone手機(jī)號(hào)：XXX XXXX XXXX）

交互手勢(shì)

看圖真的很多，這里就說(shuō)說(shuō)移動(dòng)端常用的幾種

1. 點(diǎn)擊

• 常用于從一個(gè)頁(yè)面過(guò)渡到下一個(gè)頁(yè)面（如：點(diǎn)擊icon、butten等）
• 切換某種功能（如：設(shè)置里的開(kāi)關(guān)）
• 點(diǎn)擊預(yù)覽（如：微信朋友圈圖片）
• 點(diǎn)擊選擇
• ...

2. 滑動(dòng)

• 上下滑動(dòng)瀏覽信息/內(nèi)容（如微信朋友圈）
• 左滑刪除（微信消息）
• iOS端左滑返回上一級(jí)
• 滑動(dòng)切換元素（如知乎iOS端上下滑動(dòng)切換答案，Android左右滑動(dòng)切換答案）
• ...

3. 拖拽

• 微信拖拽呼出小程序
• 往下拖拽加載刷新（如淘寶主頁(yè)）
• iOS端向上拖拽到一定高度關(guān)閉后臺(tái)App
• 向下滑退出照片預(yù)覽（如微信朋友圈照片）
• 拖拽調(diào)整順序
• ...

4. 長(zhǎng)按

• Android端長(zhǎng)按刪除消息/App
• iOS端長(zhǎng)按刪除App
• 長(zhǎng)按保存/分享/更多...
• 長(zhǎng)按拍小視頻
• ...

5. 雙擊

• iOS端雙擊Home鍵，呼出所有后臺(tái)程序
• ...

6. 輕掃

• Android端三指輕掃拍照/截屏/刪除
• ...

7. 捏合

• 預(yù)覽照片捏合放大縮?。ㄈ缥⑿排笥讶φ掌?/span>
• ...

8. 搖晃

• 微信搖一搖（人、歌曲、電視、領(lǐng)紅包）
• ...
• 
  

9. 3D Touch

• iPhone控制中心的icon用力按壓均可呼出其頁(yè)面
• iPhone桌面用力按壓任意一個(gè)App圖標(biāo)會(huì)彈出一層半透明菜單，里面包含了該應(yīng)用下的一些快捷操作
• ...

來(lái)源網(wǎng)絡(luò)