看懂設(shè)計(jì)（合集）：交互設(shè)計(jì)原則在設(shè)計(jì)工作中的理解和應(yīng)用

 

菲茲定律在交互設(shè)計(jì)中的應(yīng)用是很普遍和廣泛的，有時(shí)候在我們?cè)O(shè)計(jì)界面之時(shí)，不知不覺就應(yīng)用了菲茲定律，但是我們卻未察覺。

關(guān)于菲茲定律的具體內(nèi)容，可以說(shuō)是大家耳熟能詳，甚至在學(xué)生時(shí)代就有所了解：從一個(gè)起始位置移動(dòng)到最終目標(biāo)點(diǎn)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離（D）和目標(biāo)的大?。╓），可以用數(shù)學(xué)公式表達(dá)為：

在當(dāng)今互聯(lián)網(wǎng)背景下簡(jiǎn)單來(lái)解釋說(shuō)，就是大而近的目標(biāo)區(qū)域意味著用戶用需要耗費(fèi)太大的精力即可輕易點(diǎn)擊或者關(guān)注到目標(biāo)，反之，小而遠(yuǎn)的目標(biāo)區(qū)域則意味著用戶將耗費(fèi)一些時(shí)間和動(dòng)作才能觸及到目標(biāo)。在一般情況下，讓用戶耗費(fèi)時(shí)間和動(dòng)作的操作，會(huì)使人產(chǎn)生負(fù)面的用戶體驗(yàn)。

以上說(shuō)的，其實(shí)是對(duì)菲茲定律表象的解釋，每個(gè)人在網(wǎng)上也會(huì)搜到很多類似的解 釋。當(dāng)你搜索時(shí)會(huì)發(fā)現(xiàn)，關(guān)于對(duì)菲茲定律的應(yīng)用，網(wǎng)上絕大多數(shù)的資料都是在以PC端界面作為定律的解釋，但移動(dòng)界面卻少之又少，這里面的一部分原因是菲茲定律提出的時(shí)間，一部分也是因?yàn)樵谝苿?dòng)端的設(shè)計(jì)中，菲茲定律會(huì)變得很零散和瑣碎，很難真正用幾句話來(lái)總結(jié)。

 

我在這一部分分了幾種情況，分別進(jìn)行討論，其一呢，就是fab button。在現(xiàn)有的fab button中，大家會(huì)發(fā)現(xiàn)，雖然按照正常iOS的設(shè)計(jì)規(guī)范，一般按鈕的大小都會(huì)被設(shè)計(jì)為88px，但是在設(shè)計(jì)fab button時(shí)，我們一般都會(huì)選擇大一些的尺寸，例如100px、110px、120px。

其二就是頁(yè)面內(nèi)功能按鈕的大小，我們?cè)谧鼋缑嬖O(shè)計(jì)的時(shí)候，都知道做到統(tǒng)一性，但很少去深入地想，界面統(tǒng)一的背后是在像用戶傳達(dá)一個(gè)什么意思。

舉個(gè)例子，這是【洋蔥數(shù)學(xué)】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號(hào)+密碼+按鈕（或手機(jī)號(hào)+按鈕等）的組合。

那我們來(lái)思考一個(gè)問(wèn)題：為什么在手機(jī)號(hào)只有11位已經(jīng)確定的情況下，輸入框和【下一步】按鈕還要做這么長(zhǎng)，接近通欄的一個(gè)樣式。

我試著來(lái)找到這個(gè)問(wèn)題的答案，第一個(gè)，是對(duì)于品牌設(shè)計(jì)規(guī)范的執(zhí)行，對(duì)邊距是有一定要求的，也就是我們常說(shuō)的保持頁(yè)面元素的統(tǒng)一性；第二個(gè)，即是對(duì)菲茲定律的應(yīng)用，在這個(gè)頁(yè)面中，最核心的兩個(gè)功能【輸入】和【下一步】給予他們一個(gè)足夠的大小，會(huì)讓用戶的注意力更加集中。

 

這也和設(shè)計(jì)原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來(lái)加以印證。這兩個(gè)界面是我隨手做的，對(duì)比一下即可看出優(yōu)劣。

在相關(guān)性比較強(qiáng)的功能中，拉近彼此具體，既能夠給信息一個(gè)清晰的層級(jí)，更能夠減少用戶的操作成本。

 

在研究交互界面的時(shí)候，我們總聽到一個(gè)說(shuō)法，“界面的邊界是無(wú)限的”，它當(dāng)然不是在說(shuō)界面是無(wú)限大的，對(duì)于一塊屏幕來(lái)說(shuō)，在進(jìn)行操作的時(shí)候，無(wú)論是PC的鼠標(biāo)光標(biāo)，還是移動(dòng)屏幕的手指，在操作到界面邊緣時(shí)，因?yàn)闊o(wú)法延伸，所以最精準(zhǔn)。

 

這也是我們看絕大多數(shù)fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。

除此之外，還有在很多安卓手機(jī)中，卸載app時(shí)會(huì)讓用戶把要卸載的app拖拽到屏幕上邊緣的區(qū)域進(jìn)行卸載，這樣相比給一個(gè)【X】按鈕，會(huì)更加精準(zhǔn)，而且拖拽的操作也會(huì)給用戶更多思考的空間和時(shí)間，減少誤操作的概率。

在進(jìn)行刪除等負(fù)向操作時(shí)，很多app會(huì)把確認(rèn)刪除等操作做得離你的上一步操作區(qū)域更遠(yuǎn)，或者讓確認(rèn)按鈕更加不明顯，這是在幫助用戶，或者說(shuō)希望用戶在做負(fù)向操作時(shí)，有更多的思考空間和時(shí)間，規(guī)避誤操作的影響。

 

 

 

復(fù)雜性守恒定律是拉里·泰斯勒在1984年提出，泰斯勒先生因?yàn)樽钤缭陔娔X中應(yīng)用剪切、復(fù)制、粘貼的概念，也被稱為“復(fù)制粘貼之父”，在2020年2月17日辭世。

復(fù)雜性守恒定律的內(nèi)容：“每個(gè)事物都具有其固有的復(fù)雜性，無(wú)法簡(jiǎn)化。”

 

關(guān)于復(fù)雜性守恒定律的定義，無(wú)論復(fù)雜的還是簡(jiǎn)單的，在網(wǎng)上我們可以搜到很多，這里就不過(guò)多闡述，大致內(nèi)容都相差無(wú)幾。

 

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，復(fù)雜性守恒定律的內(nèi)容也可相應(yīng)的引申為：“每個(gè)應(yīng)用都有其內(nèi)在的、無(wú)法簡(jiǎn)化的復(fù)雜性。”

所謂“復(fù)雜性”，即是這個(gè)應(yīng)用或流程中的核心部分。例如：電商app的瀏覽、下單、付款；登錄的輸入賬號(hào)密碼（或驗(yàn)證碼）等，這個(gè)流程是無(wú)法再繼續(xù)簡(jiǎn)化下去的，如果簡(jiǎn)化，將失去應(yīng)用或流程的核心意義。

在遭遇所謂的復(fù)雜性功能或流程時(shí)，或者說(shuō)我們?cè)谠O(shè)計(jì)產(chǎn)品功能和使用路徑時(shí)，應(yīng)考慮的是，在保證其核心意義的基礎(chǔ)上，把“復(fù)雜性降到最低”。

不要過(guò)度簡(jiǎn)化。

 

那么復(fù)雜性守恒定律在APP設(shè)計(jì)中又是如何應(yīng)用的呢？

 

引入第三方賬號(hào)登錄，減少注冊(cè)賬號(hào)的復(fù)雜步驟

注冊(cè)登錄的流程和步驟發(fā)展至今，已經(jīng)非常簡(jiǎn)化了，基本都是輸入手機(jī)號(hào)、密碼或驗(yàn)證碼來(lái)進(jìn)行登錄注冊(cè)，這一流程基本處在不可再簡(jiǎn)化的階段，那么合理地引入第三方賬號(hào)登錄或注冊(cè)，將大大減少在這一流程上所要耗費(fèi)的步驟和時(shí)間。

 

記憶上次登錄方式，減少登錄步驟

記憶上次登錄方式這種功能，在移動(dòng)應(yīng)用中還是不常見的，多用在某平臺(tái)旗下軟件之中，比如騰訊旗下的各種軟件，很多都有記憶登錄方式來(lái)方便用戶登錄軟件。

搜索時(shí)輸入字符后同步聯(lián)想搜索結(jié)果

這條很好理解，在進(jìn)行搜索操作時(shí)，同步進(jìn)行關(guān)鍵字或詞的聯(lián)想，將大概率節(jié)省用戶輸入動(dòng)作和搜索時(shí)間，提升用戶體驗(yàn)。

高頻次輸入行為給予快捷選項(xiàng)

這種方式多用在陌生人社交app中，尤其是招聘app。在交流意向不明顯的時(shí)候，快捷回復(fù)的使用頻次相當(dāng)高（我簡(jiǎn)直是快捷回復(fù)達(dá)人~）

信息和功能歸類展示

在國(guó)產(chǎn)app中，很多功能都會(huì)放在個(gè)人中心的頁(yè)面中，一個(gè)頁(yè)面當(dāng)中甚至有十幾、二十幾個(gè)功能，在業(yè)務(wù)和功能的必要性影響下，它們不能由設(shè)計(jì)者的意志進(jìn)行刪除或隱藏，那么將層級(jí)相同的信息分別歸類展示，將在一定程度上提升用戶體驗(yàn)。

頁(yè)面排不開的功能信息進(jìn)行收納隱藏

在三四年前的移動(dòng)互聯(lián)網(wǎng)時(shí)期，漢堡包菜單一度很流行，它可以將那些重要但是使用頻次又相對(duì)較低的功能收納起來(lái)。這種方式現(xiàn)在很多app仍在采用。除此之外，微信的添加好友、掃一掃、建群聊等功能，也都收納在右上角的（+）按鈕中。

但是如今有很多對(duì)漢堡包菜單的討伐聲，所以在使用漢堡包菜單時(shí)，我們需要思考地更多。關(guān)于漢堡包菜單的討論，有興趣的可以私聊我~

 

對(duì)于不同業(yè)務(wù)，很多公司在進(jìn)行app設(shè)計(jì)時(shí)，為了更好地服務(wù)用戶，也為了給app減重，采取的方式是進(jìn)行拆分，比如滴滴、一起作業(yè)等等。

1.合理縮短用戶使用路徑

2.將復(fù)雜信息進(jìn)行歸類整理

3.將復(fù)雜信息進(jìn)行收納隱藏

4.對(duì)功能進(jìn)行拆分

 

除此之外還需注意，在為流程和功能做減法時(shí)，時(shí)刻注意不可過(guò)度簡(jiǎn)化。

 

 

 

簡(jiǎn)單來(lái)說(shuō)，席克定律所說(shuō)的就是：你所面對(duì)的選擇越多，做選擇的時(shí)間就越長(zhǎng)。引申到移動(dòng)產(chǎn)品之中，核心即是，在視覺和交互層面上做出的設(shè)計(jì)，要引導(dǎo)或者幫助用戶更容易做出選擇。

 

這里其實(shí)簡(jiǎn)單來(lái)說(shuō)，可以分為兩種情況。第一，用戶應(yīng)該會(huì)做出什么選擇；第二，我們希望用戶做出什么選擇。

 

我們分別來(lái)說(shuō)，第一點(diǎn)，用戶應(yīng)該會(huì)做出什么選擇。

一般來(lái)說(shuō)，最理想的狀態(tài)時(shí)，從用戶開始操作到結(jié)束操作，能夠走完一段完整的路徑。這其實(shí)既是產(chǎn)品設(shè)計(jì)者的期望，同時(shí)也是用戶所希望的。舉個(gè)例子，閑魚的購(gòu)買流程中，用明顯的顏色定義了下一步操作的按鈕，明顯的層級(jí)關(guān)系，幫助了用戶一步一步做出購(gòu)買選擇，當(dāng)然這是理想狀態(tài)，在閑魚這樣的電商APP中，打斷用戶路徑的因素多為商品因素。

作為設(shè)計(jì)者，在這個(gè)路徑上的作用，就是幫助用戶來(lái)完成用戶希望完成步驟，讓盡可能地讓其他干擾元素都為主要流程讓步。所以閑魚選擇將想要-購(gòu)買-下單這一流程中的按鈕設(shè)計(jì)得很突出。

除此之外，在無(wú)法避免選擇時(shí)，為用戶提供默認(rèn)選擇項(xiàng)，或清晰地選擇項(xiàng)分類，也會(huì)為用戶減少選擇時(shí)間。

例如：飛豬等旅行類APP，在選擇地點(diǎn)時(shí)，會(huì)提供當(dāng)前城市的默認(rèn)選項(xiàng)，很大概率減少用戶在該選項(xiàng)上花費(fèi)的時(shí)間，另外在選擇地點(diǎn)時(shí)，會(huì)根據(jù)熱門程度，提供熱門城市的分類，同樣很可能幫助到用戶快速選擇到自己想要的信息。

 

還有一點(diǎn)，可能是我們?cè)谄綍r(shí)會(huì)忽略的小細(xì)節(jié)，就是，設(shè)計(jì)要遵循用戶習(xí)慣。當(dāng)涉及到表單時(shí)，單選和多選的傳統(tǒng)樣式已經(jīng)十分深入人心，用戶不需要過(guò)多地思考即可識(shí)別出什么是單選，什么是多選，所以在這種情況下，就不要做多余的設(shè)計(jì)，遵循習(xí)慣即可。

 

 

第二點(diǎn)，我們希望用戶做出什么選擇。

這其實(shí)不難理解，在業(yè)務(wù)的包裹下，我們并不是在所有方面都要滿足用戶的需要，當(dāng)用戶想要做的選擇與我們希望的方向背道而馳，那么我們就需要在他做選擇時(shí)，給出一點(diǎn)干擾，讓這個(gè)負(fù)向的選擇不那么容易進(jìn)行。拿APP獲取權(quán)限舉例，我們希望APP能夠獲得用戶手機(jī)的更多權(quán)限，例如位置、通訊錄、消息推送等等，但是一般情況下，用戶的第一反應(yīng)一定是對(duì)自己信息的保護(hù)，多半會(huì)第一時(shí)間拒絕這樣的請(qǐng)求，所以我們一般會(huì)把“同意”按鈕設(shè)計(jì)地十分明顯并且容易點(diǎn)擊，把“不同意”設(shè)計(jì)地小而弱。

 

1.對(duì)用戶行為進(jìn)行預(yù)測(cè)，并把對(duì)應(yīng)操作的權(quán)重提高，例如使用突出的顏色、樣式、大小等

2.對(duì)選項(xiàng)或信息進(jìn)行分類，并盡可能提供默認(rèn)選項(xiàng)

3.弱化負(fù)向選項(xiàng)，對(duì)用戶選擇做出干擾

 

 

 

米勒定律是我們作為設(shè)計(jì)嘗嘗聽到和用到的一個(gè)定律，即7±2法則。

心理學(xué)家喬治·米勒發(fā)現(xiàn)了人在短時(shí)記憶時(shí)，一旦信息超出了7±2這個(gè)范圍，就會(huì)容易出現(xiàn)錯(cuò)誤。

在交互設(shè)計(jì)當(dāng)中，這個(gè)法則會(huì)更多地應(yīng)用在信息分層和排序、功能排列等，這里應(yīng)用的原則一般是，在組織信息或功能時(shí)不要超過(guò)9個(gè)，最理想的是控制在5個(gè)之內(nèi)。

將同類的信息提取并重新劃分，這樣就會(huì)更加容易記憶，上圖我將一些散亂的信息按照衣、食、住、行進(jìn)行重新歸類，信息就變得清晰起來(lái)了。

在APP中，米勒定律的應(yīng)用是極其廣泛的，在一個(gè)界面中，幾乎每一處都遵循著這一定律。

 

在數(shù)字類的展示時(shí)，我們一般會(huì)將例如手機(jī)號(hào)、銀行卡號(hào)、金額等進(jìn)行分段，方便識(shí)別、確認(rèn)和記憶。

 

一般APP的tab bar圖標(biāo)都不會(huì)超過(guò)5個(gè)，而在進(jìn)行收納菜單設(shè)計(jì)時(shí)，也最好將菜單內(nèi)功能數(shù)量控制在5個(gè)以內(nèi)。

 

很多時(shí)候我們可能無(wú)法再進(jìn)行數(shù)量的減少，那么可以選擇將同類型的信息進(jìn)行歸類，再分別展示，也能夠在一定程度上提升用戶體驗(yàn)。

 

1.數(shù)字分段展示

2.菜單數(shù)量控制

3.信息分類劃分再展示

 

 

 

鄰近性原則在定義上與親密性原則很類似，在界面中彼此靠近的元素通常會(huì)被視為一組。相對(duì)應(yīng)的，彼此疏遠(yuǎn)的元素會(huì)被視為兩類不同信息。

 

這一點(diǎn)和米勒定律其實(shí)有一定重復(fù)性，在功能數(shù)量很多時(shí)，進(jìn)行分類展示，有助于提升用戶體驗(yàn)。

 

在信息比較大、文字比較多的頁(yè)面中，將同類信息和不同信息利用間距的控制區(qū)分開，可以有效地使頁(yè)面層級(jí)更清晰，幫助用戶更好地瀏覽信息。

 

1.同類功能歸為一組

2.不同類信息控制間距

 

 

 

和絕大多數(shù)交互設(shè)計(jì)原則一樣，防錯(cuò)原則最初也并不是為了交互設(shè)計(jì)而產(chǎn)生的，但是，發(fā)展至今，防錯(cuò)原則確實(shí)交互設(shè)計(jì)中十分重要的一個(gè)原則。

 

防錯(cuò)原則的含義是：大部分的意外都是由設(shè)計(jì)的疏忽,而不是人為操作疏忽。通過(guò)改變?cè)O(shè)計(jì)可以把過(guò)失降到最低。

 

在移動(dòng)互聯(lián)網(wǎng)鼎盛的今天，防錯(cuò)原則已經(jīng)被應(yīng)用得相當(dāng)廣泛和熟練，我們可以把犯錯(cuò)原則簡(jiǎn)單理解為：在設(shè)計(jì)一個(gè)功能或流程時(shí)，我們要通過(guò)一些反饋來(lái)讓用戶知道，他的哪些操作時(shí)可以繼續(xù)進(jìn)行的，哪些操作時(shí)錯(cuò)誤的無(wú)法繼續(xù)的?？此朴悬c(diǎn)復(fù)雜，但其實(shí)通過(guò)案例我們可以瞬間理解它是如何來(lái)應(yīng)用的。

 

操作之前的防錯(cuò)提醒

很多時(shí)候我們會(huì)因?yàn)橐恍┰?，?duì)產(chǎn)品中的某些功能進(jìn)行限制，或者當(dāng)用戶進(jìn)行某些不可逆的負(fù)向操作時(shí)，對(duì)用戶進(jìn)行容易感知的提醒。比如在社交軟件中，個(gè)人簡(jiǎn)介或文字發(fā)布的字?jǐn)?shù)限制，需要有限制提示等。

 

對(duì)用戶的操作進(jìn)行實(shí)時(shí)的反饋，能讓用戶及時(shí)觀測(cè)到自己的操作是否在APP允許的規(guī)則內(nèi)。

 

對(duì)于已經(jīng)發(fā)生的結(jié)果，有些APP會(huì)給予用戶“反悔”的機(jī)會(huì)，使用戶在操作后可以挽回上次的錯(cuò)誤。

 

 

比起其他的交互設(shè)計(jì)定律，奧卡姆剃刀原理更像是一個(gè)思考方式，而不像一個(gè)實(shí)操性很強(qiáng)的設(shè)計(jì)方法。所以這一條，如果給大家舉例子，可能會(huì)舉很多例子，我們手機(jī)里的APP，很多都應(yīng)用著這一原理。

當(dāng)我們?cè)谠O(shè)計(jì)界面之時(shí)，在保證核心信息展示完全的情況下，盡量不去設(shè)計(jì)很多其他東西來(lái)干擾用戶，比如我們很少見到登錄注冊(cè)界面還放著運(yùn)營(yíng)廣告，很少見到瀑布流界面還摻雜著十字交互等等。這些都是奧卡姆剃刀原理的應(yīng)用。

如果想舉例子，那可以舉出一萬(wàn)種。

 

我的理解：在面對(duì)一種問(wèn)題時(shí)，優(yōu)先選擇優(yōu)化用戶使用路徑、優(yōu)化交互方式，而不是選擇增加新的功能。

 

它可以簡(jiǎn)單地被理解為：“如無(wú)必要、勿增實(shí)體”。

 

 

我把奧卡姆剃刀原理放在最后一條來(lái)說(shuō)，其實(shí)想表達(dá)的是，在交互設(shè)計(jì)當(dāng)中，很多定律、原則是很宏觀而且被廣泛使用的，它們比起實(shí)用的方法，更像是提供給設(shè)計(jì)師一個(gè)思考模型，讓我們按照某個(gè)思路來(lái)做設(shè)計(jì)，它們可能會(huì)被應(yīng)用在各種不同的場(chǎng)景當(dāng)中。

 

在上面的這些方法論和設(shè)計(jì)原則中，大家可能也會(huì)發(fā)現(xiàn)，在展示案例時(shí)，有一些是重復(fù)出現(xiàn)的，其實(shí)這種重復(fù)性還有很多很多，可見，每一個(gè)單獨(dú)被總結(jié)出來(lái)的設(shè)計(jì)原則，并不是相互獨(dú)立的存在，它們可能會(huì)互斥，也可能會(huì)相融。

 

一個(gè)成熟的設(shè)計(jì)師并不是要把這些方法論奉為圣經(jīng)，在不斷的學(xué)習(xí)和工作中，我們要學(xué)會(huì)在合適的場(chǎng)景應(yīng)用合適法則。

 

這個(gè)世界上，沒有什么是一成不變的。

 

我也只是一名普通的設(shè)計(jì)師，寫這篇文章的初衷也只是為自己的所學(xué)做一個(gè)記錄，其實(shí)這算不得什么真本事，拾人牙慧罷了。如果它能夠讓你了解到更多的交互知識(shí)，能夠理解方法論的作用，甚至能夠有應(yīng)用的思路，那就是我的額外所得，十分開心。

 

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 

作者：靈感大王NinE
鏈接：https://www.zcool.com.cn/article/ZMTExMzkxMg==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。