一位好的設(shè)計(jì)師總會(huì)考慮到方方面面的因素,一個(gè)真正讓人難忘的產(chǎn)品中UI和交互設(shè)計(jì)中的每一個(gè)元素都是至關(guān)重要的蒋荚,一個(gè)又一個(gè)的細(xì)節(jié)設(shè)計(jì)才可以讓你的產(chǎn)品脫穎而出戳稽。
什么是交互
在《交互設(shè)計(jì)沉思錄》中Jon Kolko的一句話對(duì)于交互的定義“人與產(chǎn)品、服務(wù)或系統(tǒng)之間創(chuàng)建一系列對(duì)話”。局長(zhǎng)覺(jué)得還是蠻準(zhǔn)確的惊奇。對(duì)交互本身而言互躬,其實(shí)是一系列的對(duì)話和溝通,特別是人機(jī)之間的一個(gè)交流和互動(dòng)颂郎。
UI設(shè)計(jì)師是干嘛的吼渡,局長(zhǎng)就不多說(shuō)了。
那么如何提升自己作品的質(zhì)量乓序,了解交互是很重要的一步寺酪。
作為UI設(shè)計(jì)師應(yīng)該知道的交互原理。
1.當(dāng)界面被設(shè)計(jì)得足夠美觀時(shí)替劈,用戶往往會(huì)容忍一些較為輕微寄雀、影響較小的可用性問(wèn)題。
將界面設(shè)計(jì)的足夠美觀陨献,其作用是毋庸置疑的盒犹。用戶對(duì)好看的界面中一些輕微的可用性問(wèn)題會(huì)相當(dāng)寬容。
微信讀書發(fā)現(xiàn)頁(yè)
首頁(yè)使用橫向滑動(dòng)的卡片眨业,一屏一張卡片一個(gè)主題急膀,相比較其他讀書類 APP (比如起點(diǎn)、京東讀書) 而言坛猪,這種界面的組織方式瀏覽效率不高脖阵,且浪費(fèi)大量屏幕空間,但簡(jiǎn)潔墅茉、優(yōu)雅的設(shè)計(jì)命黔,就有了讓我們多花一點(diǎn)耐心和操作成本看下去的欲望。
但是交互和視覺(jué)不是對(duì)立的就斤,設(shè)計(jì)師不應(yīng)該為了更美觀的界面就要降低用戶操作的效率悍募。
良好的視覺(jué)設(shè)計(jì)也是體驗(yàn)的一部分,只是我們需要對(duì)具體的頁(yè)面進(jìn)行評(píng)估洋机,強(qiáng)調(diào)視覺(jué)帶來(lái)的體驗(yàn)是否能超過(guò)犧牲掉的交互體驗(yàn)坠宴。
2.? 任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需要的時(shí)間,與目標(biāo)距離正相關(guān)绷旗,與目標(biāo)大小負(fù)相關(guān)喜鼓。
人們做出一個(gè)移動(dòng)指針的操作通常需要兩步:
第一步:將指針快速移動(dòng)至目標(biāo)大致所在的區(qū)域;
第二步:精細(xì)調(diào)節(jié)指針的位置以達(dá)到可點(diǎn)擊的區(qū)域衔肢;
?
綜合來(lái)看庄岖,D在第一步中起更為明顯的作用,而W則主要影響第二步角骤。
減少D的大小
最經(jīng)典的例子就是菜單隅忿,大部分APP在點(diǎn)擊這類按鈕后一定會(huì)有后續(xù)任務(wù)和操作,所以這些任務(wù)都被安排在了距離所點(diǎn)擊區(qū)域更近的菜單中。
可點(diǎn)擊的按鈕盡可能大背桐。
把頁(yè)面中按鈕做的足夠大优烧,用戶可以輕易快速點(diǎn)擊到這個(gè)使用頻率最大的按鈕。登錄按鈕也是一樣的道理链峭。
邊角的利用
這個(gè)作為比較特殊的存在畦娄,但在很多地方都可以看到。
瀏覽器右上角的按鈕熏版,Windows左下角的「開(kāi)始菜單」
為什么在如此邊緣的位置放置權(quán)重相當(dāng)高的組件或操作纷责?
在硬件設(shè)備中,邊角是指針再怎么移動(dòng)也不可能超過(guò)屏幕邊界撼短。所以再膳,對(duì)于用戶來(lái)說(shuō),邊界的操作可以相當(dāng)于「無(wú)限觸發(fā)」曲横。
這意味著對(duì)于設(shè)置在邊角的組件來(lái)說(shuō)喂柒。
W趨于無(wú)限大。這樣禾嫉,無(wú)論指針距離目標(biāo)物多遠(yuǎn)灾杰,所花費(fèi)的精力、時(shí)間都是最輕松熙参,最短暫的艳吠。
相對(duì)的,反向利用這個(gè)原理孽椰,就可以提醒用戶謹(jǐn)慎操作昭娩,又或者通過(guò)將關(guān)鍵按鈕遠(yuǎn)離視覺(jué)中心,讓用戶花費(fèi)更多時(shí)間停留在當(dāng)前頁(yè)面黍匾。
當(dāng)然栏渺,在注意用戶操作成本的同時(shí),也要平衡界面的美觀和用戶的視覺(jué)體驗(yàn)锐涯。
3.? 用戶將大部分時(shí)間花在別人家的網(wǎng)站 (產(chǎn)品) 上磕诊,而不是你的。這意味他們希望你的網(wǎng)站 (產(chǎn)品) 跟別人的有相同的操作方法和使用模式纹腌。
簡(jiǎn)單來(lái)說(shuō)就是將具有相同功能的頁(yè)面盡量保持一致霎终。不要為了追求設(shè)計(jì)而改變用戶形成的使用習(xí)慣。尤其是一些功能性特別強(qiáng)的頁(yè)面升薯,比如商品詳情頁(yè)莱褒。
不論是什么風(fēng)格的APP,甚至不論是不是電商APP覆劈,只要涉及到商品的詳情頁(yè)保礼,版式都高度相似。
同樣的在具體的icon設(shè)計(jì)中责语,也不要為了追求與眾不同而改變大家默認(rèn)語(yǔ)義的icon炮障。用戶需要的是底學(xué)習(xí)成本。
總之坤候,相同的頁(yè)面應(yīng)該與其他相同功能的頁(yè)面具有一致的使用模式胁赢;
沒(méi)有足夠的理由,不要輕易標(biāo)新立異白筹。
真正優(yōu)秀的設(shè)計(jì)智末,從功能到元素,從交互到過(guò)渡徒河,都是可靠的系馆。
作為UI設(shè)計(jì)師更需要了解到交互的重要性。