微交互 (第二章 - 觸發(fā)器)

“你過來呀歌逢!”

—— 沈騰《羞羞的鐵拳》

觸發(fā)器巾钉,是啟動(dòng)一系列動(dòng)作的原點(diǎn);是啟動(dòng)游戲時(shí)的第一個(gè)按下的Start Button秘案;是產(chǎn)生空中美麗煙花的那一根導(dǎo)火線砰苍;是墜入愛河前看見姑娘的第一眼;是金蓮那一根砸中西門官人的木棍阱高。

觸發(fā)器赚导,就是你吸引用戶的那塊招牌(Call To Action)。Call To Action赤惊,就是

“你過來呀吼旧!”

第二章開篇,上來就是一個(gè)讓你印象深刻的案例:

上世紀(jì)90年代未舟,Antenna接了一個(gè)大活兒:為紐約地鐵自助售卡機(jī)設(shè)計(jì)用戶界面圈暗。

當(dāng)時(shí)設(shè)計(jì)公司面對(duì)的用戶群體是這樣的:在90年代中期,很少有人使用過觸摸屏機(jī)器处面,就連ATM機(jī)都很少有人用過厂置。

小腦筋動(dòng)起來菩掏,如果你面對(duì)這種情況魂角,怎么設(shè)計(jì)?

當(dāng)然是用最粗暴的手段把意圖直接輸出給用戶了智绸。地鐵卡售賣面對(duì)的用戶那是上至九十九野揪,下至剛會(huì)走,大文字+大圖形是最吼的解決方案瞧栗,保證傻子都懂斯稳。


Antenna Design公司為紐約地鐵售卡機(jī)設(shè)計(jì)的用戶界面


Antenna為紐約地鐵售卡機(jī)設(shè)計(jì)的界面,第一個(gè)界面就是簡單粗暴的一個(gè)大手迹恐,然后指著屏幕上唯一一個(gè)按鈕挣惰,旁邊寫著:猛戳開始!(仔細(xì)看看左上角第一個(gè)界面的文案,再想想什么叫洗腦)

其實(shí)憎茂,用戶點(diǎn)擊屏幕的任何地方都會(huì)激活售卡機(jī)珍语,但為了指引用戶進(jìn)行“猛戳”這個(gè)操作,Antenna設(shè)計(jì)團(tuán)隊(duì)有意進(jìn)行了視覺引導(dǎo)竖幔,還假模假式的在右上角放一個(gè)按鈕板乙,社會(huì)社會(huì)。

再回過頭來看這部售卡機(jī)的整套交互界面(如上圖)拳氢,你會(huì)發(fā)現(xiàn)募逞,自始至終每個(gè)屏幕只讓用戶做一次操作,正像Antenna的設(shè)計(jì)師說的:每個(gè)屏幕只問一個(gè)問題馋评。

之所以這么做放接,正是在當(dāng)時(shí)的情況下,要設(shè)計(jì)得讓人一看就懂栗恩。

這正是:

觸發(fā)器黃金規(guī)則之第一條:

觸發(fā)器必須讓用戶在使用情境下認(rèn)出來其是觸發(fā)器


以下內(nèi)容我只把觸發(fā)器黃金規(guī)則列出來大概解釋一下透乾,詳細(xì)內(nèi)容請購買圖靈系列的《微交互》一書進(jìn)行細(xì)品,這書真棒磕秤!

如果你玩RPG類游戲乳乌,你一定知道“技能”分兩種:一種是主動(dòng)技能(主動(dòng)點(diǎn)擊釋放技能),另一種是被動(dòng)技能(在某種條件下釋放技能)市咆。

觸發(fā)器也分兩種:

手動(dòng)觸發(fā)器(用戶主動(dòng)觸發(fā))

系統(tǒng)觸發(fā)器(系統(tǒng)被動(dòng)觸發(fā))


手動(dòng)觸發(fā)器

先說手動(dòng)觸發(fā)器:

觸發(fā)器黃金規(guī)則之第二條:

保證觸發(fā)器每次都觸發(fā)相同的動(dòng)作

比如:我每次回家打開水龍頭汉操,不能今天是龍頭出水,明天換馬桶出水蒙兰,后天改蓮蓬頭呲水磷瘤。雖然設(shè)計(jì)師期望每天帶給我驚喜,但對(duì)我來說這TM可能是驚嚇搜变。

觸發(fā)器黃金規(guī)則之第三條:

提前展示數(shù)據(jù)

比如:你家淋浴都有冷和熱兩個(gè)檔位吧采缚?但是你不會(huì)“以身試水”,你會(huì)先看開關(guān)上冷/熱標(biāo)記挠他,然后驕傲的切換到合適的檔位扳抽,做到想洗就洗,洗的漂亮殖侵。而這個(gè)冷/熱標(biāo)記贸呢,就是提前告知你開關(guān)(觸發(fā)器)作用的數(shù)據(jù)。


控件

觸發(fā)器黃金規(guī)則之第四條:

不要破壞視覺使用情境

這里要插一句拢军,觸發(fā)器的構(gòu)成:控件楞陷、控件狀態(tài)、控件標(biāo)識(shí)茉唉。比如:商場的門(控件)固蛾,只能從外面推開(狀態(tài))结执,那么門外面就有“推”的標(biāo)志(標(biāo)識(shí))。

“不要破壞視覺使用情境”艾凯,就是用戶要知道這扇門是從外面開昌犹,而不是從外面開。

這條規(guī)則反過來用览芳,其實(shí)是喜劇的一種表現(xiàn)方式斜姥,就是“錯(cuò)位”,破壞了鞋子的使用情景沧竟。

90年代喜劇電視劇《糊涂偵探》铸敏,男主角的標(biāo)志性動(dòng)作就是用皮鞋打電話。


觸發(fā)器黃金規(guī)則之第五條:

用得越多的觸發(fā)器悟泵,越要引人注目杈笔。

比如:現(xiàn)在看你手中的鍵盤,最大的空格糕非,其次是回車蒙具。而最不容易按的按鈕是“開關(guān)/睡眠”按鈕。因?yàn)榭崭癖货遘k的次數(shù)最多朽肥,所以它的長度做到左右手都能按到禁筏。而且空格最為最常用的按鍵,它沒有任何標(biāo)識(shí)衡招,比其他按鍵更容易辨認(rèn)篱昔。(書中的引文:“只具備一種特征的目標(biāo)比具備多種特征的目標(biāo)更容易找到”)

觸發(fā)器黃金規(guī)則之第六條:

不要引起用戶對(duì)使用情景的錯(cuò)覺。

這條和第四條有點(diǎn)差別始腾,比如:

第四條:這有一扇滑動(dòng)門州刽,進(jìn)屋需要“向右拉門”。但如果門上貼著“推”浪箭,就是破壞視覺使用情境穗椅。

第六條:這有一扇滑動(dòng)門,進(jìn)屋需要“向右拉門”奶栖。但如果門上有個(gè)“→”匹表,用戶誤認(rèn)為是自動(dòng)門,就是引起用戶對(duì)使用情景的錯(cuò)覺驼抹。

關(guān)于觸發(fā)器的最后一點(diǎn)是:展示重要的桑孩,隱藏次要的拜鹤。(書里還是提到很多知識(shí)點(diǎn)框冀,比如不可見的觸發(fā)器,自己看吧敏簿。)


控件狀態(tài)

這里不直接說名稱明也,列舉幾種情況宣虾,思考一下怎么表現(xiàn):

這有一個(gè)按鈕

這有一個(gè)按鈕,顯示“99%”

這有一個(gè)按鈕温数,鼠標(biāo)滑過時(shí)顯示“爆炸”

這有一個(gè)按鈕绣硝,灰色的

這有一個(gè)按鈕,按下時(shí)變形狀了

這有一個(gè)按鈕撑刺,按一下鹉胖,下去了。再按一下够傍,上來了甫菠。

這有一個(gè)按鈕,按下會(huì)顯示倒計(jì)時(shí)冕屯。


標(biāo)簽

觸發(fā)器黃金規(guī)則之第七條:

僅在觸發(fā)器本身無法提供相應(yīng)信息的情況下再使用標(biāo)簽寂诱。

簡而言之,能用視覺表達(dá)安聘,就別逼逼痰洒。

如果非得加文字、注釋來說明觸發(fā)器的作用浴韭,那么就要站在用戶的角度來寫這些文案丘喻。

比如:“您是否確定退出當(dāng)前頁面?”

可以寫成:“現(xiàn)在退出念颈?”

請說人話仓犬。


系統(tǒng)觸發(fā)器

此處一句話:何時(shí)觸發(fā),觸發(fā)頻率舍肠,可以手動(dòng)設(shè)置搀继。

比如:每周五早上8:00的鬧鐘,能不能在這周五早上不響翠语。因?yàn)橹芩耐砩衔乙s會(huì)叽躯。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市肌括,隨后出現(xiàn)的幾起案子点骑,更是在濱河造成了極大的恐慌,老刑警劉巖谍夭,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件黑滴,死亡現(xiàn)場離奇詭異,居然都是意外死亡紧索,警方通過查閱死者的電腦和手機(jī)袁辈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來珠漂,“玉大人晚缩,你說我怎么就攤上這事尾膊。” “怎么了荞彼?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵冈敛,是天一觀的道長。 經(jīng)常有香客問我鸣皂,道長抓谴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任寞缝,我火速辦了婚禮齐邦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘第租。我一直安慰自己措拇,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布慎宾。 她就那樣靜靜地躺著丐吓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪趟据。 梳的紋絲不亂的頭發(fā)上券犁,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音汹碱,去河邊找鬼粘衬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛咳促,可吹牛的內(nèi)容都是我干的稚新。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼跪腹,長吁一口氣:“原來是場噩夢啊……” “哼褂删!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起冲茸,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤屯阀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后轴术,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體难衰,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年逗栽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了盖袭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖苍凛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情兵志,我是刑警寧澤醇蝴,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站想罕,受9級(jí)特大地震影響悠栓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜按价,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一惭适、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧楼镐,春花似錦癞志、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至秉宿,卻和暖如春戒突,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背描睦。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國打工膊存, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人忱叭。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓隔崎,卻偏偏與公主長得像,于是被迫代替她去往敵國和親韵丑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子仍稀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

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

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,988評(píng)論 3 119
  • 如果你有過面試經(jīng)歷埂息,你一定有遇到過這樣的問題:說說你的缺點(diǎn)是什么技潘。很多人把握不好,就栽在這條題上千康。太實(shí)在享幽,把自己的...
    Z小姐不吐不快閱讀 1,045評(píng)論 0 0
  • 剛才刷朋友圈豪椿,忽然看到有人轉(zhuǎn)載岳曉亮老師的這句話“教育可以有痛苦奔坟,不可以有傷害”真是大贊携栋,因?yàn)檫@正是我想說,卻一直...
    漠子閱讀 373評(píng)論 0 1
  • 4月12日 晴 自從媽媽從廣州回來向挖,橙子就有人帶了,這樣我就可以方便出門了炕舵,早上的時(shí)間就是幫客戶分析數(shù)據(jù)...
    颶風(fēng)霞霞閱讀 304評(píng)論 0 0
  • 小區(qū)門口有兩家修理攤何之,主要經(jīng)營電子配鑰匙,修補(bǔ)鞋子咽筋,更換拉鏈溶推,單車維修等業(yè)務(wù)。原來還兼維修雨傘和手表奸攻,只是現(xiàn)在傘便...
    劉炳清閱讀 263評(píng)論 0 1