【UI情報(bào)局】學(xué)會(huì)這3招鳖擒,讓你快速掌握最優(yōu)秀的交互設(shè)計(jì)法則溉浙!

一位好的設(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è)


圖片發(fā)自簡(jiǎn)書App


圖片發(fā)自簡(jiǎn)書App


首頁(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的大小

圖片發(fā)自簡(jiǎn)書App


圖片發(fā)自簡(jiǎn)書App

最經(jīng)典的例子就是菜單隅忿,大部分APP在點(diǎn)擊這類按鈕后一定會(huì)有后續(xù)任務(wù)和操作,所以這些任務(wù)都被安排在了距離所點(diǎn)擊區(qū)域更近的菜單中。

可點(diǎn)擊的按鈕盡可能大背桐。


圖片發(fā)自簡(jiǎn)書App


把頁(yè)面中按鈕做的足夠大优烧,用戶可以輕易快速點(diǎn)擊到這個(gè)使用頻率最大的按鈕。登錄按鈕也是一樣的道理链峭。

邊角的利用

這個(gè)作為比較特殊的存在畦娄,但在很多地方都可以看到。


圖片發(fā)自簡(jiǎn)書App



圖片發(fā)自簡(jiǎn)書App

瀏覽器右上角的按鈕熏版,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ì)師更需要了解到交互的重要性。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末顽照,一起剝皮案震驚了整個(gè)濱河市由蘑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌代兵,老刑警劉巖尼酿,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異植影,居然都是意外死亡裳擎,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門思币,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鹿响,“玉大人,你說(shuō)我怎么就攤上這事支救∏酪埃” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵各墨,是天一觀的道長(zhǎng)指孤。 經(jīng)常有香客問(wèn)我,道長(zhǎng)贬堵,這世上最難降的妖魔是什么恃轩? 我笑而不...
    開(kāi)封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮黎做,結(jié)果婚禮上叉跛,老公的妹妹穿的比我還像新娘。我一直安慰自己蒸殿,他們只是感情好筷厘,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布鸣峭。 她就那樣靜靜地躺著,像睡著了一般酥艳。 火紅的嫁衣襯著肌膚如雪摊溶。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天充石,我揣著相機(jī)與錄音莫换,去河邊找鬼。 笑死骤铃,一個(gè)胖子當(dāng)著我的面吹牛拉岁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播惰爬,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼喊暖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了撕瞧?” 一聲冷哼從身側(cè)響起哄啄,我...
    開(kāi)封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎风范,沒(méi)想到半個(gè)月后咨跌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡硼婿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年锌半,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寇漫。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡刊殉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出州胳,到底是詐尸還是另有隱情记焊,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布栓撞,位于F島的核電站遍膜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏瓤湘。R本人自食惡果不足惜瓢颅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望弛说。 院中可真熱鬧挽懦,春花似錦、人聲如沸木人。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至渔嚷,卻和暖如春蔫磨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背圃伶。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蒲列,地道東北人窒朋。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蝗岖,于是被迫代替她去往敵國(guó)和親侥猩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355