教你幾條設(shè)計(jì)定律

我們是做設(shè)計(jì),并不是做藝術(shù)铭腕。我們是為用戶服務(wù)银择,而不是天馬行空的表達(dá)自己的個(gè)性。設(shè)計(jì)中存在一些條條框框累舷,一些設(shè)計(jì)定律浩考,去規(guī)范我們的設(shè)計(jì),更好的為用戶服務(wù)被盈。今天就分享一些常見的設(shè)計(jì)定律吧~對交互設(shè)計(jì)很有幫助

席克定律

主要內(nèi)容:當(dāng)選項(xiàng)增加時(shí)析孽,下決心(做選擇)的時(shí)間也會增加。

公式:?T=a+b log2(n)??


席克定律

T=做出決定的反應(yīng)時(shí)間只怎,a=與做決定無關(guān)的總時(shí)間(前期認(rèn)知和觀察時(shí)間)袜瞬,b=對選項(xiàng)認(rèn)知的處理時(shí)間(一般為0.155s),n=備選項(xiàng)的數(shù)量(選項(xiàng)越多身堡,用戶做決定的時(shí)間越長)邓尤。

在設(shè)計(jì)中的應(yīng)用:

1.減少用戶決策時(shí)間

一個(gè)頁面最好突出一個(gè)重點(diǎn),讓用戶快速理解和完成任務(wù)贴谎。避免頁面上出現(xiàn)其他干擾汞扎。

舉個(gè)支付寶的登錄例子,新版支付寶的界面更加強(qiáng)調(diào)登錄擅这,因?yàn)閷τ谑褂弥Ц秾毜挠脩魜碚f都是有賬號的澈魄,他們更想要的是登錄,而不是注冊仲翎。要同時(shí)強(qiáng)調(diào)登錄注冊在用戶第一次打開這個(gè)app時(shí)出現(xiàn)比較好痹扇。


突出重點(diǎn)

2.降低點(diǎn)擊出錯(cuò)效率

對于用戶來說铛漓,選錯(cuò)是一項(xiàng)很焦慮的事情,所以降低用戶點(diǎn)擊出錯(cuò)是很好的一個(gè)預(yù)防效果帘营。比如負(fù)向按鈕票渠,都會進(jìn)行二次確認(rèn)逐哈。還有就是淘寶商城里沒有的商品和大小芬迄,用戶是無法點(diǎn)擊的。?


降低點(diǎn)擊出錯(cuò)效率(二次確認(rèn))


降低點(diǎn)擊出錯(cuò)效率(沒有的碼不能選)

3.提高效率

將重要的功能突出昂秃,減少用戶去尋找的時(shí)間禀梳。舉個(gè)例子,天天用的支付寶肠骆,將重要功能收款算途、付款功能放在顯眼的地方,而且改變背景色蚀腿,突出此功能嘴瓤。


提高效率(突出重要功能)

4.提升操作體驗(yàn)

這就需要交互設(shè)計(jì)師去了解用戶的需求,提升用戶的體驗(yàn)莉钙。我們在做設(shè)計(jì)的時(shí)候廓脆,應(yīng)該多多為用戶的使用情景著想,白天與夜晚使用的情況磁玉,在不同界面用戶想達(dá)到怎樣的目的停忿,都需要我們?nèi)ニ伎肌Ee個(gè)例子蚊伞,當(dāng)用戶使用支付寶充話費(fèi)的時(shí)候席赂,在充話費(fèi)的界面里,用戶目的很簡單-充話費(fèi)时迫。那么用戶需要輸入充值金額颅停,這時(shí)我們就需要思考,用戶時(shí)想一個(gè)一個(gè)滑動選項(xiàng)來選擇充值的數(shù)額呢掠拳,還是想更加快速的選擇給定的數(shù)值癞揉。。碳想。當(dāng)然是怎樣快速怎樣來吧~


直接選擇
慢慢滑動(不好意思沒有找到滑動的充值頁面)



菲茨定律

內(nèi)容:從一個(gè)起始位置移動到一個(gè)最終目標(biāo)所需要的時(shí)間烧董。

公式:T = a + b log2(D/W+1)

菲茨定律

D代表距離,W代表目標(biāo)大小胧奔,T代表所需時(shí)間逊移,a、b為常數(shù)

***目標(biāo)大小越大龙填,所用時(shí)間越短胳泉。

***距離越短拐叉,所用時(shí)間越短。

在設(shè)計(jì)中的應(yīng)用:

1.目標(biāo)W越大扇商,所用時(shí)間越短凤瘦。主要應(yīng)用在可點(diǎn)擊對象上。按鈕等可點(diǎn)擊對象需要合理的大小尺寸案铺。


小按鈕
大按鈕


2.當(dāng)前手指與目標(biāo)位置的距離越短蔬芥,用時(shí)越短。在手機(jī)屏幕中有分觸摸熱區(qū)與非熱區(qū)控汉。熱區(qū)就是指用戶手指能輕松觸摸到的地方笔诵。大家想想淘寶詳情頁面的購買按鈕為什么會放在離大拇指最近的地方?姑子?乎婿?


距離越近用時(shí)越短


錯(cuò)誤案例,浪費(fèi)大量寶貴空間



格式塔原理

這個(gè)原理街佑,相信大家都不陌生谢翎。格式塔是指“整體”,“完形”的意思沐旨。

原理有:接近性原理森逮;相似性原理;連續(xù)性原理希俩;封閉性原理吊宋;對稱性原理;主體/背景原理颜武;共同命運(yùn)原理璃搜。

1.接近性原理:物體之間的相對距離會影響我們感知它是否以及如何組織在一起×凵希互相靠近(相對于其它物體)的物體看起來屬于一組这吻,而那些距離較遠(yuǎn)的則自動劃為組外。


本來是獨(dú)立的圓點(diǎn)篙议,會被我們分為四行唾糯、四列

在設(shè)計(jì)中的應(yīng)用:單個(gè)視覺元素之間無限接近,視覺上會形成一個(gè)較大的整體鬼贱。距離近的單個(gè)視覺元素會融為一個(gè)整體移怯。我們將功能相同的元素挨近一點(diǎn),相近信息的關(guān)聯(lián)也更緊密这难。功能不同的元素分離一點(diǎn)舟误,加以區(qū)別。


親密性大的挨近一點(diǎn)姻乓,親密性不大的隔遠(yuǎn)一點(diǎn)


2.相似性原理:如果其它因素相同嵌溢,那么相似的物體看起來歸屬于一組眯牧。我們的眼睛很容易關(guān)注那些外表相似的物體,且不管它們的位置是不是相鄰赖草,總是把它們聯(lián)系起來学少。

在設(shè)計(jì)中的應(yīng)用:在設(shè)計(jì)工程中,我們可以通過形狀秧骑、大小版确、色彩去將相似元素中的個(gè)別元素突顯出來,達(dá)到突出的作用腿堤。


通過色彩將其從相似元素突顯出來阀坏。

3.連續(xù)性原理:視覺傾向于感知連續(xù)的形式而不是離散的碎片如暖。

在設(shè)計(jì)中的應(yīng)用:人的視覺有追隨一個(gè)方向的延續(xù)笆檀,以便把元素聯(lián)接在一起,使它們看來是連續(xù)向著特定的方向盒至。


人們會聯(lián)想到從一個(gè)點(diǎn)連接延伸到另外一個(gè)點(diǎn)酗洒,聯(lián)想出一條路徑

4.封閉性原理:視覺系統(tǒng)自動嘗試將敞開的圖形關(guān)閉起來,從而將其感知為完整的物體而不是分散的碎片枷遂。封閉原理與連續(xù)性原理有一些區(qū)別樱衷,大家不要混淆了。封閉強(qiáng)調(diào)整體性酒唉,連續(xù)強(qiáng)調(diào)聯(lián)想過程矩桂。

在設(shè)計(jì)中的應(yīng)用:將簡單元素進(jìn)行圖形完整化處理。在設(shè)計(jì)中最常見的就是“負(fù)形閉合”痪伦。畫面中的負(fù)形(留白)會形成用戶熟悉的形象侄榴,被當(dāng)做整體感知。


負(fù)形閉合會有整體感知的效果


人們會看成封閉的圓


斷點(diǎn)圖標(biāo)也會被看成完整的圖

ok网沾,就寫到這里啦癞蚕,做設(shè)計(jì)還是有很多思考與學(xué)問的,這些定律只是其中的一小點(diǎn)辉哥,大家有興趣可以去多看看桦山,多搜索。突然覺得好的設(shè)計(jì)師醋旦,心理學(xué)一定特別棒恒水。大家加油吧,說不定以后還能算算命饲齐、看看風(fēng)水之類的哈哈~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末钉凌,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子箩张,更是在濱河造成了極大的恐慌甩骏,老刑警劉巖窗市,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異饮笛,居然都是意外死亡咨察,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進(jìn)店門福青,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摄狱,“玉大人,你說我怎么就攤上這事无午∶揭郏” “怎么了?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵宪迟,是天一觀的道長酣衷。 經(jīng)常有香客問我,道長次泽,這世上最難降的妖魔是什么穿仪? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮意荤,結(jié)果婚禮上啊片,老公的妹妹穿的比我還像新娘。我一直安慰自己玖像,他們只是感情好紫谷,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著捐寥,像睡著了一般笤昨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上上真,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天咬腋,我揣著相機(jī)與錄音,去河邊找鬼睡互。 笑死根竿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的就珠。 我是一名探鬼主播寇壳,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼妻怎!你這毒婦竟也來了壳炎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎匿辩,沒想到半個(gè)月后腰耙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡铲球,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年挺庞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稼病。...
    茶點(diǎn)故事閱讀 39,953評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡选侨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出然走,到底是詐尸還是另有隱情援制,我是刑警寧澤,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布芍瑞,位于F島的核電站晨仑,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏啄巧。R本人自食惡果不足惜寻歧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望秩仆。 院中可真熱鬧,春花似錦猾封、人聲如沸澄耍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽齐莲。三九已至,卻和暖如春磷箕,著一層夾襖步出監(jiān)牢的瞬間选酗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工岳枷, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芒填,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓空繁,卻偏偏與公主長得像殿衰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子盛泡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評論 2 355