導語：交互設(shè)計以用戶體驗為基礎(chǔ)，需要考慮用戶的背景、使用經(jīng)驗以及在操作過程中的感受，在構(gòu)想及設(shè)計原型交互的時候，我們不免的可能會犯下一些錯誤，最后等到產(chǎn)品試用的時候，才意識到別扭拗“手”，那么怎樣的才可以盡量的避免這樣的問題發(fā)生呢？文章對我們設(shè)計原型及交互的時候要注意的一些問題進行了分析探討，一起來看看~

一、原型交互設(shè)計的價值

價值來源于兩方面：

1. 團隊工作流程中的價值
2. 提升產(chǎn)品的用戶體驗

1. 團隊工作流程中的價值

產(chǎn)品經(jīng)理通過將業(yè)務(wù)目標轉(zhuǎn)化為產(chǎn)品目標并按照開發(fā)的節(jié)奏，從而得到產(chǎn)品的需求，完成了產(chǎn)品需求就要開始需求評審。對于部分公司里面會設(shè)有交互設(shè)計師為產(chǎn)品分攤壓力，在此階段開始與產(chǎn)品經(jīng)理進行交涉，但是對于中小企業(yè)規(guī)模的公司，往往產(chǎn)品經(jīng)理需要全程的負責交互設(shè)計的這個階段。

產(chǎn)品原型交互設(shè)計的質(zhì)量決定后面視覺設(shè)計師是否需要重復的進行改稿，同時，也決定了在產(chǎn)品測試階段期間，可發(fā)現(xiàn)的不良體驗次數(shù)的上限，這就涉及了中間產(chǎn)品開發(fā)階段的工程師們的工作量，因此，一個優(yōu)質(zhì)的交互設(shè)計會影響整個團隊的整體運作和效率，它的價值是銜接整個團隊的一個重要部分。

2. 提升用戶體驗

原型交互涉及到的場景化思維設(shè)置，減少了用戶在軟件使用過程中的障礙，同時配合表情、文案和插畫等等情感化設(shè)計，能形象表達用戶在需求和期望得到滿足時產(chǎn)生的愉快或喜愛等情感，加深了整個產(chǎn)品在邏輯和設(shè)計的深度。

二、細節(jié)可決定成敗

細節(jié)是產(chǎn)品鷹翅上的羽毛，它牢固、繁密且有序，則產(chǎn)品便可飛升，反之，則會在廣闊市場田野中翱翔不久后，便會下墜直至跌上地面，陷入平庸。把握好了細節(jié)，有時候可以決定成敗。

1. ”距離大小“盡合理

按鈕、光標等可點擊區(qū)域在合理的范圍之內(nèi)，越大則越容易點擊。反之，可點擊區(qū)域越小，越不容易操作。 小而遠的目標區(qū)域意味著用戶需要將手指在屏幕上移動較長距離，并且為了能對準目標還需要做一系列的微調(diào)，因為目標比較小，所以耗費的時間就越長。

舉一個例子，早在2016年，錘子手機就推出“大爆炸”功能，功能剛出來的時候引起了社會的廣泛關(guān)注，一般情況在對頁面進行文字編輯工作時，我們常常會拖拽文字和移動光標，我們大多數(shù)人會優(yōu)先選擇在電腦上進行文字編輯，因為更加的方便選擇，而錘子手機這一個大爆炸的功能，革新了手機編輯文字的傳統(tǒng)方式，如下圖展示“大爆炸”前后，“大爆炸”后的頁面，文字和光標更大，更便于操作。

“大爆炸”前? ? ?“大爆炸”后

而通常我們對距離的把控主要體現(xiàn)在元件位置的擺放，像屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，即不管你移動了多遠，按鈕最終會停在屏幕的邊緣，并定位到頁面或?qū)Ш綑诘纳厦?，如下圖：

快速搜索界面? ? ?電話APP的聯(lián)系人頁

兩頁的共同點，都是語音交互按鈕，始終處于屏幕邊緣，不會被其他元素遮擋。方便用戶操作。

2. 適時“定制”得謹記

在特定的情景下，用戶需求往往是屈指可數(shù)的，特定的場景需求由特定范圍的功能去完成滿足，我們應該考慮設(shè)計在一定的情境下，給用戶盡量少的選擇，減輕用戶的決策成本。

華為手機的駕駛模式APP? ? ? ? 錘子駕駛APP

作為坐在車上，正準備發(fā)動汽車的司機來說，此刻只需要，也只可能做三件事，導航，聽歌，打電話。華為手機的駕駛模式APP，首頁有5個可點擊的操作，錘子駕駛APP只有3個，相比之下，此刻司機更傾向于使用右邊的模式進行操作，即更契合自己當時的心理需求，而左邊的頁面對于此時此刻的司機來說，有的功能完全可以不出現(xiàn)在此頁面，顯得多余。

在滿足用戶的需求下，給用戶盡量少的選擇，一方面精簡了頁面，另一方面也讓用戶體會到了專業(yè)定制的感覺，提升了用戶體驗。

3. 七二法則導航“衣”

數(shù)字 7±2 法則大致上表述了普通人在頭腦最好的狀態(tài)能記憶含有7(±2)項信息塊，在記憶了 5-9 項信息后人的頭腦就開始出錯。

因此為了避免用戶在頁面上構(gòu)成要素產(chǎn)生視覺混亂，我們在設(shè)計PC端導航或者是選項卡的時候，數(shù)量盡量不要超過九個，而對于手機端，我們可以觀察大部分APP底端的導航基本上都是不超過五個。

而有的軟件因為主體功能繁多，導航不得不多設(shè)置幾項，那么可以設(shè)置“重要功能+用戶自定義編輯”的方式，將四項或五項外其它的導航菜單放在一個“更多”的導航按鈕里面。

如果導航或選項卡內(nèi)容很多，也可以用一個層級結(jié)構(gòu)來展示各段及其子段，并注意其深廣度的平衡。

4. “靠近”“聯(lián)系”相呼應

當用戶瀏覽頁面的時候，看到兩個目標區(qū)塊靠的很近，會下意識的認為它們是有關(guān)聯(lián)的，因此，我們可以在設(shè)計的時候可以將相似的、有關(guān)聯(lián)的信息盡量擺在一起，不要讓用戶迷茫，要讓他在潛意識里就知道在哪里能找到自己想要的信息。

這是一個手機設(shè)置的界面：

這個界面分區(qū)域的展示了和網(wǎng)絡(luò)有關(guān)的設(shè)置，和Smartisan OS新特性有關(guān)的設(shè)置，這樣讓用戶一目了然，能快速定位到自己想要找的設(shè)置選項。

5. 防錯機制需”應景“

軟件上大部分出現(xiàn)的“意外”都是由設(shè)計的疏忽，而不是人為操作疏忽。因此，在設(shè)計中要有必要的防錯機制。在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

填寫前? ? ?填寫后

在用戶沒有填寫完手機號碼和密碼前，底部的登錄按鈕是置灰的，不可點擊。只有兩項都填寫完整，底部的登錄按鈕才會變?yōu)榭牲c擊狀態(tài)，也就是紅色的。這就是為了防止用戶犯更多錯誤。

當用戶點擊“退出登錄”按鈕后，會出現(xiàn)的提示彈窗，需要用戶輸入賬戶密碼，才能退出登錄。 彈出框方式會增加不可逆操作的難度，當用戶因為誤操或者其它原因點擊“退出登錄”按鈕，準備退出當前狀態(tài)的時候，使用彈窗是個不錯的選擇。

6. 無必要勿增“實體”

用戶在進行購物支付訂單等等業(yè)務(wù)流程的時候，往往都需要進行多次判斷和選擇，并點擊不同區(qū)域，這個過程往往不適合過于繁瑣，我們設(shè)計的時候應該盡量去減少用戶點擊的次數(shù)，讓用戶通過更少的點擊就能找到他們想要的東西，不要讓他們找一個內(nèi)容找得很累。

錘子手機手機充值頁的選擇金額彈出框? ? ?支付寶充值中心金額的選擇頁面

錘子手機充值界面要完成整個話費充值流程，需要點擊動作三次。而支付寶的充值界面完成整個話費充值流程，只需要點擊一次。頁面流程更短，效率更高。 因此，減少用戶的點擊次數(shù)，能提升產(chǎn)品的用戶體驗。

三、結(jié)語

一個優(yōu)秀產(chǎn)品是多方面的優(yōu)秀，離不開整個團隊的協(xié)調(diào)合作，團隊的整體合作離不開細節(jié)的把握，優(yōu)秀的交互設(shè)計提升團隊效率的同時，給用戶以更好的體驗，用細節(jié)的“手臂”去擰出整個產(chǎn)品開發(fā)這塊”海綿“當中的更多時間，這些時間可以用來去做規(guī)劃和細節(jié)打磨。

工具始終是工具，我們的思想在原型交互設(shè)計的時候需要保持邏輯清楚，記住這簡單的“細節(jié)小詩”一首，這樣設(shè)計出來的產(chǎn)品也許會更具備靈魂，原型交互設(shè)計也是一門學問，有很長的路要走，把握細節(jié)，至少從現(xiàn)在開始不會算晚。

本文由 @三月寫書 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。