2024-5-6 資深UI設(shè)計(jì)者
本篇旨在簡明扼要地向大家介紹交互設(shè)計(jì)中的一些原則,幫助大家理解和真正在工作中應(yīng)用
菲茲定律在交互設(shè)計(jì)中的應(yīng)用是很普遍和廣泛的,有時候在我們設(shè)計(jì)界面之時,不知不覺就應(yīng)用了菲茲定律,但是我們卻未察覺。
關(guān)于菲茲定律的具體內(nèi)容,可以說是大家耳熟能詳,甚至在學(xué)生時代就有所了解:從一個起始位置移動到最終目標(biāo)點(diǎn)所需的時間由兩個參數(shù)來決定,到目標(biāo)的距離(D)和目標(biāo)的大?。╓),可以用數(shù)學(xué)公式表達(dá)為:
在當(dāng)今互聯(lián)網(wǎng)背景下簡單來解釋說,就是大而近的目標(biāo)區(qū)域意味著用戶用需要耗費(fèi)太大的精力即可輕易點(diǎn)擊或者關(guān)注到目標(biāo),反之,小而遠(yuǎn)的目標(biāo)區(qū)域則意味著用戶將耗費(fèi)一些時間和動作才能觸及到目標(biāo)。在一般情況下,讓用戶耗費(fèi)時間和動作的操作,會使人產(chǎn)生負(fù)面的用戶體驗(yàn)。
以上說的,其實(shí)是對菲茲定律表象的解釋,每個人在網(wǎng)上也會搜到很多類似的解 釋。當(dāng)你搜索時會發(fā)現(xiàn),關(guān)于對菲茲定律的應(yīng)用,網(wǎng)上絕大多數(shù)的資料都是在以PC端界面作為定律的解釋,但移動界面卻少之又少,這里面的一部分原因是菲茲定律提出的時間,一部分也是因?yàn)樵谝苿佣说脑O(shè)計(jì)中,菲茲定律會變得很零散和瑣碎,很難真正用幾句話來總結(jié)。
我在這一部分分了幾種情況,分別進(jìn)行討論,其一呢,就是fab button。在現(xiàn)有的fab button中,大家會發(fā)現(xiàn),雖然按照正常iOS的設(shè)計(jì)規(guī)范,一般按鈕的大小都會被設(shè)計(jì)為88px,但是在設(shè)計(jì)fab button時,我們一般都會選擇大一些的尺寸,例如100px、110px、120px。
其二就是頁面內(nèi)功能按鈕的大小,我們在做界面設(shè)計(jì)的時候,都知道做到統(tǒng)一性,但很少去深入地想,界面統(tǒng)一的背后是在像用戶傳達(dá)一個什么意思。
舉個例子,這是【洋蔥數(shù)學(xué)】和【360家庭防火墻】的登錄界面,市面上的登錄界面大多大同小異,基本組成就是賬號+密碼+按鈕(或手機(jī)號+按鈕等)的組合。
那我們來思考一個問題:為什么在手機(jī)號只有11位已經(jīng)確定的情況下,輸入框和【下一步】按鈕還要做這么長,接近通欄的一個樣式。
我試著來找到這個問題的答案,第一個,是對于品牌設(shè)計(jì)規(guī)范的執(zhí)行,對邊距是有一定要求的,也就是我們常說的保持頁面元素的統(tǒng)一性;第二個,即是對菲茲定律的應(yīng)用,在這個頁面中,最核心的兩個功能【輸入】和【下一步】給予他們一個足夠的大小,會讓用戶的注意力更加集中。
這也和設(shè)計(jì)原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來加以印證。這兩個界面是我隨手做的,對比一下即可看出優(yōu)劣。
在相關(guān)性比較強(qiáng)的功能中,拉近彼此具體,既能夠給信息一個清晰的層級,更能夠減少用戶的操作成本。
在研究交互界面的時候,我們總聽到一個說法,“界面的邊界是無限的”,它當(dāng)然不是在說界面是無限大的,對于一塊屏幕來說,在進(jìn)行操作的時候,無論是PC的鼠標(biāo)光標(biāo),還是移動屏幕的手指,在操作到界面邊緣時,因?yàn)闊o法延伸,所以最精準(zhǔn)。
這也是我們看絕大多數(shù)fab button彈出的菜單是在界面邊緣,而不是在界面中央的原因。
除此之外,還有在很多安卓手機(jī)中,卸載app時會讓用戶把要卸載的app拖拽到屏幕上邊緣的區(qū)域進(jìn)行卸載,這樣相比給一個【X】按鈕,會更加精準(zhǔn),而且拖拽的操作也會給用戶更多思考的空間和時間,減少誤操作的概率。
在進(jìn)行刪除等負(fù)向操作時,很多app會把確認(rèn)刪除等操作做得離你的上一步操作區(qū)域更遠(yuǎn),或者讓確認(rèn)按鈕更加不明顯,這是在幫助用戶,或者說希望用戶在做負(fù)向操作時,有更多的思考空間和時間,規(guī)避誤操作的影響。
復(fù)雜性守恒定律是拉里·泰斯勒在1984年提出,泰斯勒先生因?yàn)樽钤缭陔娔X中應(yīng)用剪切、復(fù)制、粘貼的概念,也被稱為“復(fù)制粘貼之父”,在2020年2月17日辭世。
復(fù)雜性守恒定律的內(nèi)容:“每個事物都具有其固有的復(fù)雜性,無法簡化。”
關(guān)于復(fù)雜性守恒定律的定義,無論復(fù)雜的還是簡單的,在網(wǎng)上我們可以搜到很多,這里就不過多闡述,大致內(nèi)容都相差無幾。
在移動互聯(lián)網(wǎng)時代,復(fù)雜性守恒定律的內(nèi)容也可相應(yīng)的引申為:“每個應(yīng)用都有其內(nèi)在的、無法簡化的復(fù)雜性。”
所謂“復(fù)雜性”,即是這個應(yīng)用或流程中的核心部分。例如:電商app的瀏覽、下單、付款;登錄的輸入賬號密碼(或驗(yàn)證碼)等,這個流程是無法再繼續(xù)簡化下去的,如果簡化,將失去應(yīng)用或流程的核心意義。
在遭遇所謂的復(fù)雜性功能或流程時,或者說我們在設(shè)計(jì)產(chǎn)品功能和使用路徑時,應(yīng)考慮的是,在保證其核心意義的基礎(chǔ)上,把“復(fù)雜性降到最低”。
不要過度簡化。
那么復(fù)雜性守恒定律在APP設(shè)計(jì)中又是如何應(yīng)用的呢?
引入第三方賬號登錄,減少注冊賬號的復(fù)雜步驟
注冊登錄的流程和步驟發(fā)展至今,已經(jīng)非常簡化了,基本都是輸入手機(jī)號、密碼或驗(yàn)證碼來進(jìn)行登錄注冊,這一流程基本處在不可再簡化的階段,那么合理地引入第三方賬號登錄或注冊,將大大減少在這一流程上所要耗費(fèi)的步驟和時間。
記憶上次登錄方式,減少登錄步驟
記憶上次登錄方式這種功能,在移動應(yīng)用中還是不常見的,多用在某平臺旗下軟件之中,比如騰訊旗下的各種軟件,很多都有記憶登錄方式來方便用戶登錄軟件。
搜索時輸入字符后同步聯(lián)想搜索結(jié)果
這條很好理解,在進(jìn)行搜索操作時,同步進(jìn)行關(guān)鍵字或詞的聯(lián)想,將大概率節(jié)省用戶輸入動作和搜索時間,提升用戶體驗(yàn)。
高頻次輸入行為給予快捷選項(xiàng)
這種方式多用在陌生人社交app中,尤其是招聘app。在交流意向不明顯的時候,快捷回復(fù)的使用頻次相當(dāng)高(我簡直是快捷回復(fù)達(dá)人~)
信息和功能歸類展示
在國產(chǎn)app中,很多功能都會放在個人中心的頁面中,一個頁面當(dāng)中甚至有十幾、二十幾個功能,在業(yè)務(wù)和功能的必要性影響下,它們不能由設(shè)計(jì)者的意志進(jìn)行刪除或隱藏,那么將層級相同的信息分別歸類展示,將在一定程度上提升用戶體驗(yàn)。
頁面排不開的功能信息進(jìn)行收納隱藏
在三四年前的移動互聯(lián)網(wǎng)時期,漢堡包菜單一度很流行,它可以將那些重要但是使用頻次又相對較低的功能收納起來。這種方式現(xiàn)在很多app仍在采用。除此之外,微信的添加好友、掃一掃、建群聊等功能,也都收納在右上角的(+)按鈕中。
但是如今有很多對漢堡包菜單的討伐聲,所以在使用漢堡包菜單時,我們需要思考地更多。關(guān)于漢堡包菜單的討論,有興趣的可以私聊我~
對于不同業(yè)務(wù),很多公司在進(jìn)行app設(shè)計(jì)時,為了更好地服務(wù)用戶,也為了給app減重,采取的方式是進(jìn)行拆分,比如滴滴、一起作業(yè)等等。
1.合理縮短用戶使用路徑
2.將復(fù)雜信息進(jìn)行歸類整理
3.將復(fù)雜信息進(jìn)行收納隱藏
4.對功能進(jìn)行拆分
除此之外還需注意,在為流程和功能做減法時,時刻注意不可過度簡化。
簡單來說,席克定律所說的就是:你所面對的選擇越多,做選擇的時間就越長。引申到移動產(chǎn)品之中,核心即是,在視覺和交互層面上做出的設(shè)計(jì),要引導(dǎo)或者幫助用戶更容易做出選擇。
這里其實(shí)簡單來說,可以分為兩種情況。第一,用戶應(yīng)該會做出什么選擇;第二,我們希望用戶做出什么選擇。
我們分別來說,第一點(diǎn),用戶應(yīng)該會做出什么選擇。
一般來說,最理想的狀態(tài)時,從用戶開始操作到結(jié)束操作,能夠走完一段完整的路徑。這其實(shí)既是產(chǎn)品設(shè)計(jì)者的期望,同時也是用戶所希望的。舉個例子,閑魚的購買流程中,用明顯的顏色定義了下一步操作的按鈕,明顯的層級關(guān)系,幫助了用戶一步一步做出購買選擇,當(dāng)然這是理想狀態(tài),在閑魚這樣的電商APP中,打斷用戶路徑的因素多為商品因素。
作為設(shè)計(jì)者,在這個路徑上的作用,就是幫助用戶來完成用戶希望完成步驟,讓盡可能地讓其他干擾元素都為主要流程讓步。所以閑魚選擇將想要-購買-下單這一流程中的按鈕設(shè)計(jì)得很突出。
除此之外,在無法避免選擇時,為用戶提供默認(rèn)選擇項(xiàng),或清晰地選擇項(xiàng)分類,也會為用戶減少選擇時間。
例如:飛豬等旅行類APP,在選擇地點(diǎn)時,會提供當(dāng)前城市的默認(rèn)選項(xiàng),很大概率減少用戶在該選項(xiàng)上花費(fèi)的時間,另外在選擇地點(diǎn)時,會根據(jù)熱門程度,提供熱門城市的分類,同樣很可能幫助到用戶快速選擇到自己想要的信息。
還有一點(diǎn),可能是我們在平時會忽略的小細(xì)節(jié),就是,設(shè)計(jì)要遵循用戶習(xí)慣。當(dāng)涉及到表單時,單選和多選的傳統(tǒng)樣式已經(jīng)十分深入人心,用戶不需要過多地思考即可識別出什么是單選,什么是多選,所以在這種情況下,就不要做多余的設(shè)計(jì),遵循習(xí)慣即可。
第二點(diǎn),我們希望用戶做出什么選擇。
這其實(shí)不難理解,在業(yè)務(wù)的包裹下,我們并不是在所有方面都要滿足用戶的需要,當(dāng)用戶想要做的選擇與我們希望的方向背道而馳,那么我們就需要在他做選擇時,給出一點(diǎn)干擾,讓這個負(fù)向的選擇不那么容易進(jìn)行。拿APP獲取權(quán)限舉例,我們希望APP能夠獲得用戶手機(jī)的更多權(quán)限,例如位置、通訊錄、消息推送等等,但是一般情況下,用戶的第一反應(yīng)一定是對自己信息的保護(hù),多半會第一時間拒絕這樣的請求,所以我們一般會把“同意”按鈕設(shè)計(jì)地十分明顯并且容易點(diǎn)擊,把“不同意”設(shè)計(jì)地小而弱。
1.對用戶行為進(jìn)行預(yù)測,并把對應(yīng)操作的權(quán)重提高,例如使用突出的顏色、樣式、大小等
2.對選項(xiàng)或信息進(jìn)行分類,并盡可能提供默認(rèn)選項(xiàng)
3.弱化負(fù)向選項(xiàng),對用戶選擇做出干擾
米勒定律是我們作為設(shè)計(jì)嘗嘗聽到和用到的一個定律,即7±2法則。
心理學(xué)家喬治·米勒發(fā)現(xiàn)了人在短時記憶時,一旦信息超出了7±2這個范圍,就會容易出現(xiàn)錯誤。
在交互設(shè)計(jì)當(dāng)中,這個法則會更多地應(yīng)用在信息分層和排序、功能排列等,這里應(yīng)用的原則一般是,在組織信息或功能時不要超過9個,最理想的是控制在5個之內(nèi)。
將同類的信息提取并重新劃分,這樣就會更加容易記憶,上圖我將一些散亂的信息按照衣、食、住、行進(jìn)行重新歸類,信息就變得清晰起來了。
在APP中,米勒定律的應(yīng)用是極其廣泛的,在一個界面中,幾乎每一處都遵循著這一定律。
在數(shù)字類的展示時,我們一般會將例如手機(jī)號、銀行卡號、金額等進(jìn)行分段,方便識別、確認(rèn)和記憶。
一般APP的tab bar圖標(biāo)都不會超過5個,而在進(jìn)行收納菜單設(shè)計(jì)時,也最好將菜單內(nèi)功能數(shù)量控制在5個以內(nèi)。
很多時候我們可能無法再進(jìn)行數(shù)量的減少,那么可以選擇將同類型的信息進(jìn)行歸類,再分別展示,也能夠在一定程度上提升用戶體驗(yàn)。
1.數(shù)字分段展示
2.菜單數(shù)量控制
3.信息分類劃分再展示
鄰近性原則在定義上與親密性原則很類似,在界面中彼此靠近的元素通常會被視為一組。相對應(yīng)的,彼此疏遠(yuǎn)的元素會被視為兩類不同信息。
這一點(diǎn)和米勒定律其實(shí)有一定重復(fù)性,在功能數(shù)量很多時,進(jìn)行分類展示,有助于提升用戶體驗(yàn)。
在信息比較大、文字比較多的頁面中,將同類信息和不同信息利用間距的控制區(qū)分開,可以有效地使頁面層級更清晰,幫助用戶更好地瀏覽信息。
1.同類功能歸為一組
2.不同類信息控制間距
和絕大多數(shù)交互設(shè)計(jì)原則一樣,防錯原則最初也并不是為了交互設(shè)計(jì)而產(chǎn)生的,但是,發(fā)展至今,防錯原則確實(shí)交互設(shè)計(jì)中十分重要的一個原則。
防錯原則的含義是:大部分的意外都是由設(shè)計(jì)的疏忽,而不是人為操作疏忽。通過改變設(shè)計(jì)可以把過失降到最低。
在移動互聯(lián)網(wǎng)鼎盛的今天,防錯原則已經(jīng)被應(yīng)用得相當(dāng)廣泛和熟練,我們可以把犯錯原則簡單理解為:在設(shè)計(jì)一個功能或流程時,我們要通過一些反饋來讓用戶知道,他的哪些操作時可以繼續(xù)進(jìn)行的,哪些操作時錯誤的無法繼續(xù)的。看似有點(diǎn)復(fù)雜,但其實(shí)通過案例我們可以瞬間理解它是如何來應(yīng)用的。
操作之前的防錯提醒
很多時候我們會因?yàn)橐恍┰?,對產(chǎn)品中的某些功能進(jìn)行限制,或者當(dāng)用戶進(jìn)行某些不可逆的負(fù)向操作時,對用戶進(jìn)行容易感知的提醒。比如在社交軟件中,個人簡介或文字發(fā)布的字?jǐn)?shù)限制,需要有限制提示等。
對用戶的操作進(jìn)行實(shí)時的反饋,能讓用戶及時觀測到自己的操作是否在APP允許的規(guī)則內(nèi)。
對于已經(jīng)發(fā)生的結(jié)果,有些APP會給予用戶“反悔”的機(jī)會,使用戶在操作后可以挽回上次的錯誤。
比起其他的交互設(shè)計(jì)定律,奧卡姆剃刀原理更像是一個思考方式,而不像一個實(shí)操性很強(qiáng)的設(shè)計(jì)方法。所以這一條,如果給大家舉例子,可能會舉很多例子,我們手機(jī)里的APP,很多都應(yīng)用著這一原理。
當(dāng)我們在設(shè)計(jì)界面之時,在保證核心信息展示完全的情況下,盡量不去設(shè)計(jì)很多其他東西來干擾用戶,比如我們很少見到登錄注冊界面還放著運(yùn)營廣告,很少見到瀑布流界面還摻雜著十字交互等等。這些都是奧卡姆剃刀原理的應(yīng)用。
如果想舉例子,那可以舉出一萬種。
我的理解:在面對一種問題時,優(yōu)先選擇優(yōu)化用戶使用路徑、優(yōu)化交互方式,而不是選擇增加新的功能。
它可以簡單地被理解為:“如無必要、勿增實(shí)體”。
我把奧卡姆剃刀原理放在最后一條來說,其實(shí)想表達(dá)的是,在交互設(shè)計(jì)當(dāng)中,很多定律、原則是很宏觀而且被廣泛使用的,它們比起實(shí)用的方法,更像是提供給設(shè)計(jì)師一個思考模型,讓我們按照某個思路來做設(shè)計(jì),它們可能會被應(yīng)用在各種不同的場景當(dāng)中。
在上面的這些方法論和設(shè)計(jì)原則中,大家可能也會發(fā)現(xiàn),在展示案例時,有一些是重復(fù)出現(xiàn)的,其實(shí)這種重復(fù)性還有很多很多,可見,每一個單獨(dú)被總結(jié)出來的設(shè)計(jì)原則,并不是相互獨(dú)立的存在,它們可能會互斥,也可能會相融。
一個成熟的設(shè)計(jì)師并不是要把這些方法論奉為圣經(jīng),在不斷的學(xué)習(xí)和工作中,我們要學(xué)會在合適的場景應(yīng)用合適法則。
這個世界上,沒有什么是一成不變的。
我也只是一名普通的設(shè)計(jì)師,寫這篇文章的初衷也只是為自己的所學(xué)做一個記錄,其實(shí)這算不得什么真本事,拾人牙慧罷了。如果它能夠讓你了解到更多的交互知識,能夠理解方法論的作用,甚至能夠有應(yīng)用的思路,那就是我的額外所得,十分開心。
藍(lán)藍(lán)設(shè)計(jì)(tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com