從第一性原理看界面設(shè)計(jì)的一致性

封面配圖

一致性干像,不是形式與形式保持一致帅腌,而是形式與用戶認(rèn)知保持一致。

誰(shuí)與誰(shuí)一致

設(shè)計(jì)原則都是有理可循的麻汰。很多設(shè)計(jì)原則是由人對(duì)大腦和人體工程學(xué)的認(rèn)識(shí)速客,加上實(shí)際經(jīng)驗(yàn),總結(jié)得來(lái)的什乙,例如7±2法則挽封、費(fèi)茲定律等等。設(shè)計(jì)師如果不知道對(duì)這些原則追本溯源臣镣,理解它最根本是要解決什么問(wèn)題辅愿,只是應(yīng)用,難免會(huì)偏離初衷忆某,遇到問(wèn)題点待。

下面以一致性設(shè)計(jì)原則為例,講述在應(yīng)用原則的過(guò)程中我們可能遇到的問(wèn)題弃舒,以及為什么會(huì)遇到這些問(wèn)題癞埠。

產(chǎn)品經(jīng)理A:“這個(gè)頁(yè)面的視覺(jué)焦點(diǎn)有點(diǎn)跳,還有優(yōu)化的空間嗎聋呢?”
設(shè)計(jì)師B:“因?yàn)槠渲幸粋€(gè)模塊在其他頁(yè)面也有苗踪,為了保持統(tǒng)一和可復(fù)用性,所以產(chǎn)生了你說(shuō)的問(wèn)題削锰⊥ú”
產(chǎn)品經(jīng)理A:“這三個(gè)前后頁(yè)面太像了,用戶會(huì)不會(huì)迷路捌鞣贰颅夺?”
設(shè)計(jì)師B:“不會(huì)吧,這三個(gè)頁(yè)面的內(nèi)容都是關(guān)于xx的蛹稍,前后保持一致吧黄,應(yīng)該更好理解吧∷艚悖”

通過(guò)這些對(duì)話發(fā)現(xiàn)拗慨,設(shè)計(jì)師B經(jīng)常用來(lái)闡述自己設(shè)計(jì)思路的一致性,在面對(duì)產(chǎn)品經(jīng)理A以用戶視角發(fā)起的疑問(wèn)時(shí),不能很好地解釋說(shuō)明赵抢,原則似乎“不靈了”瘫想,原因出在哪里?其實(shí)昌讲,從設(shè)計(jì)師B的說(shuō)辭可以分析出,他提出的一致性的出發(fā)點(diǎn)是存在偏差的减噪。

一致性的第一性原理

如何糾偏短绸,我將從第一性原理來(lái)重新解讀一致性。

所有設(shè)計(jì)原則的出發(fā)點(diǎn)是用戶筹裕。為了讓用戶更好地使用產(chǎn)品醋闭,我們才通過(guò)設(shè)計(jì)原則來(lái)指導(dǎo)完成好用的設(shè)計(jì)方案。它不是為了方便設(shè)計(jì)師對(duì)照原則畫(huà)界面朝卒,提高設(shè)計(jì)效率证逻,或輸出一套遵循原則的漂亮規(guī)范,或成為與產(chǎn)品經(jīng)理爭(zhēng)論時(shí)的有力依據(jù)抗斤。它是為了方便用戶囚企,讓用戶能夠理解界面中的信息時(shí)不會(huì)困難,在屏幕中操作時(shí)不會(huì)覺(jué)得麻煩瑞眼。理解了這一前提龙宏,我們?cè)俑钜粚涌矗恢滦缘降捉鉀Q了用戶什么問(wèn)題伤疙?

用戶在瀏覽界面信息時(shí)银酗,是通過(guò)大腦處理信息,這一過(guò)程和大腦的運(yùn)行機(jī)制有關(guān):人類大腦的運(yùn)行是建立在經(jīng)驗(yàn)的基礎(chǔ)上徒像。以往的記憶和認(rèn)識(shí)會(huì)影響對(duì)當(dāng)下新事物的判斷黍特,大腦會(huì)尋求新事物與已有經(jīng)驗(yàn)的聯(lián)系,將它們關(guān)聯(lián)锯蛀,一視同仁地去理解灭衷,從而降低大腦的負(fù)擔(dān)。對(duì)谬墙,人類就是這么懶今布,一致性簡(jiǎn)直就是人類大腦的福音。

綜上拭抬,從第一性原理解讀后的一致性原則為:與用戶已有的認(rèn)知保持一致部默。在此基礎(chǔ)上延伸,才有了我們常說(shuō)的那些道理:“我們要讓用戶再次看到xx時(shí)能夠很快明白它的用途造虎,才將這個(gè)元素或模塊在多處保持統(tǒng)一”傅蹂;“我們通過(guò)運(yùn)用映射物理世界的方法去設(shè)計(jì)表現(xiàn)層,為的是讓用戶更容易理解xx”等等。

所以份蝴,我們常用的一致性也沒(méi)錯(cuò)犁功,只不過(guò)是核心思想落地到具體情況的具體表現(xiàn),它是多樣的婚夫,但我們不應(yīng)該將多樣的表現(xiàn)總結(jié)為規(guī)律浸卦,去遵循,而應(yīng)該探究到本質(zhì)案糙,再?gòu)谋举|(zhì)出發(fā)限嫌,解決多樣的問(wèn)題。

下面舉兩個(gè)實(shí)際工作中應(yīng)用一致性和選擇不用一致性的例子时捌。
應(yīng)用一致性的例子:背景是顧客在餐廳就餐后怒医,用手機(jī)掃描桌臺(tái)上美團(tuán)點(diǎn)評(píng)提供的二維碼即可查看訂單直接支付,如果商家提供會(huì)員服務(wù)且顧客還不是商家會(huì)員奢讨,即可看到申請(qǐng)成為會(huì)員的入口稚叹,如下左圖,如果顧客已是會(huì)員拿诸,則看到的是右圖扒袖。

支付訂單頁(yè)的會(huì)員模塊位置保持一致

這里的一致性體現(xiàn)在前后頁(yè)面會(huì)員模塊的位置上,都位于頁(yè)面的頭部亩码,與商家信息在一塊兒僚稿。原因是,顧客從商家信息下方的申請(qǐng)入口完成申請(qǐng)流程后蟀伸,重新進(jìn)入支付訂單頁(yè)時(shí)蚀同,想確認(rèn)自己是否已是會(huì)員,這時(shí)啊掏,根據(jù)之前已有的認(rèn)知蠢络,會(huì)先入為主地從頭部的商家信息附近開(kāi)始尋找,故將會(huì)員標(biāo)識(shí)也與商家信息放一塊兒迟蜜,與用戶的認(rèn)知保持一致刹孔。

再來(lái)看一個(gè)選擇不用一致性的例子:背景是顧客在餐廳就餐后選擇美團(tuán)智能POS機(jī)進(jìn)行支付,并且該顧客支付時(shí)使用了會(huì)員余額娜睛,剩下的零頭使用了微信支付髓霞,如下左圖是顧客完成支付后手機(jī)上的支付結(jié)果頁(yè),右圖是商家完成收款后POS機(jī)上的收款結(jié)果頁(yè)畦戒。

顧客支付結(jié)果頁(yè)和商家收款結(jié)果頁(yè)的金額要不一致

這里的不一致體現(xiàn)在頁(yè)面頭部重點(diǎn)展示的金額上方库。大家一定會(huì)疑問(wèn),同一筆消費(fèi)的支付結(jié)果頁(yè)障斋,為什么要展示不一樣的金額呢纵潦?同樣的金額難道不也會(huì)讓顧客和商家達(dá)成某種一致嗎徐鹤?通過(guò)詢問(wèn)商家的想法發(fā)現(xiàn),商家更關(guān)注訂單的總金額邀层,因?yàn)檫@才是他們實(shí)際得到的收益返敬,并且在對(duì)賬時(shí)也需要訂單總金額才能對(duì)平。反觀顧客寥院,作為注重優(yōu)惠的消費(fèi)者自然更在意自已實(shí)際付了多少劲赠,有沒(méi)有多付或者少付,并且秸谢,顯示減去各種優(yōu)惠的實(shí)付金額经磅,在心理感受上也有撈了大便宜的快感。由此可見(jiàn)钮追,一致性在這里,并沒(méi)有認(rèn)知上的重合阿迈,也就沒(méi)有必要遵循了元媚。

延伸思考

除了一致性原則,很多其他設(shè)計(jì)原則苗沧,甚至設(shè)計(jì)工具和設(shè)計(jì)方法都可以用第一性原理的思路去剖析:做可用性測(cè)試的本來(lái)目的是什么刊棕?用戶場(chǎng)景分析究竟為的是什么?HEART模型是怎么來(lái)的又可以衍生出什么待逞?馬斯洛需求層次理論的本質(zhì)是什么甥角?

相信通過(guò)第一性原理的層層剖析后,你會(huì)對(duì)這些平時(shí)常用的知識(shí)產(chǎn)生全新的認(rèn)識(shí)识樱。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嗤无,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子怜庸,更是在濱河造成了極大的恐慌当犯,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,324評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件割疾,死亡現(xiàn)場(chǎng)離奇詭異嚎卫,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)宏榕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)拓诸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人麻昼,你說(shuō)我怎么就攤上這事奠支。” “怎么了抚芦?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,328評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵胚宦,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng)枢劝,這世上最難降的妖魔是什么井联? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,147評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮您旁,結(jié)果婚禮上烙常,老公的妹妹穿的比我還像新娘。我一直安慰自己鹤盒,他們只是感情好蚕脏,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,160評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著侦锯,像睡著了一般驼鞭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尺碰,一...
    開(kāi)封第一講書(shū)人閱讀 51,115評(píng)論 1 296
  • 那天挣棕,我揣著相機(jī)與錄音,去河邊找鬼亲桥。 笑死洛心,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的题篷。 我是一名探鬼主播词身,決...
    沈念sama閱讀 40,025評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼番枚!你這毒婦竟也來(lái)了法严?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,867評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤葫笼,失蹤者是張志新(化名)和其女友劉穎渐夸,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體渔欢,經(jīng)...
    沈念sama閱讀 45,307評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡墓塌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,528評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了奥额。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片苫幢。...
    茶點(diǎn)故事閱讀 39,688評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖垫挨,靈堂內(nèi)的尸體忽然破棺而出韩肝,到底是詐尸還是另有隱情,我是刑警寧澤九榔,帶...
    沈念sama閱讀 35,409評(píng)論 5 343
  • 正文 年R本政府宣布哀峻,位于F島的核電站涡相,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏剩蟀。R本人自食惡果不足惜催蝗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,001評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望育特。 院中可真熱鬧丙号,春花似錦、人聲如沸缰冤。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,657評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)棉浸。三九已至怀薛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間迷郑,已是汗流浹背枝恋。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,811評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留三热,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,685評(píng)論 2 368
  • 正文 我出身青樓三幻,卻偏偏與公主長(zhǎng)得像就漾,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子念搬,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,573評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容