設(shè)計(jì)閑話 #2: 桌面端與移動(dòng)端視覺動(dòng)線

桌面端網(wǎng)頁(yè)的視覺軌跡

我們對(duì)這些來自眼動(dòng)儀的監(jiān)測(cè)圖片不陌生叔营,用戶在瀏覽桌面端網(wǎng)頁(yè)時(shí)屋彪,視覺軌跡呈字母 "F" 型。而由于移動(dòng)端設(shè)備屏幕小绒尊,用戶能抓取到整個(gè)頁(yè)面的內(nèi)容畜挥,在移動(dòng)端頁(yè)面下,視覺軌跡則呈字母 "L" 型婴谱,位于右上角的信息較容易忽略蟹但。這來自騰訊 CDC 實(shí)習(xí)期間導(dǎo)師的分享。

當(dāng)用戶處于一個(gè)業(yè)務(wù)/功能流程中谭羔,往往需要經(jīng)歷多個(gè)頁(yè)面的交互操作华糖,進(jìn)行瀏覽、填寫信息等瘟裸,例如注冊(cè)缅阳、預(yù)約、功能引導(dǎo)或購(gòu)物流程。不少應(yīng)用將「下一步」的 action button 放在頂部 menu bar/app bar 的右側(cè)十办。如果在這些場(chǎng)景下秀撇,action button 放在內(nèi)容尾部或頁(yè)面底部,則符合移動(dòng)端頁(yè)面 "L" 型視覺動(dòng)線向族。

Action button 位于頂部 menu bar/app bar 右側(cè)的例子呵燕,左:Apple Store,中:Apple Music件相,右:Notify
Action button 放在內(nèi)容尾部或頁(yè)面底部的例子再扭,左:微眾銀行,中:Snapchat夜矗,右:Pinterest

對(duì)比兩者泛范,后者操作起來更流暢、一氣呵成紊撕,而前者還需要稍費(fèi)心神去尋找一下按鈕的位置(雖然影響不大)罢荡,使視覺動(dòng)線大致呈 "r" 型。如果你說对扶,我就是想用戶不要太輕易觸發(fā)按鈕而提交內(nèi)容造成誤操作(這里討論的是業(yè)務(wù)/功能流程的場(chǎng)景区赵,而不是例如文章編輯頁(yè)面的長(zhǎng)時(shí)間駐留的場(chǎng)景),這不是按鈕位置的問題而是選項(xiàng)/表單設(shè)計(jì)的問題浪南,而且本身也需要考慮是否讓用戶能容易返回上一步或執(zhí)行撤銷操作笼才。當(dāng)然,還要根據(jù)實(shí)際的頁(yè)面信息數(shù)量進(jìn)行考慮決策络凿。

另外骡送,如果 action button 位于頁(yè)面底部,對(duì)于 iPhone 和部分 Android Phone 還發(fā)揮了費(fèi)茲法則的優(yōu)勢(shì)絮记。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末摔踱,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子到千,更是在濱河造成了極大的恐慌,老刑警劉巖赴穗,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件憔四,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡般眉,警方通過查閱死者的電腦和手機(jī)了赵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來甸赃,“玉大人柿汛,你說我怎么就攤上這事。” “怎么了络断?”我有些...
    開封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵裁替,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我貌笨,道長(zhǎng)弱判,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任锥惋,我火速辦了婚禮昌腰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘膀跌。我一直安慰自己遭商,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開白布捅伤。 她就那樣靜靜地躺著劫流,像睡著了一般。 火紅的嫁衣襯著肌膚如雪暑认。 梳的紋絲不亂的頭發(fā)上困介,一...
    開封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音蘸际,去河邊找鬼座哩。 笑死,一個(gè)胖子當(dāng)著我的面吹牛粮彤,可吹牛的內(nèi)容都是我干的根穷。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼导坟,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼屿良!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起惫周,我...
    開封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤尘惧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后递递,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喷橙,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年登舞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了贰逾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡菠秒,死狀恐怖疙剑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤言缤,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布嚼蚀,位于F島的核電站,受9級(jí)特大地震影響轧简,放射性物質(zhì)發(fā)生泄漏驰坊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一哮独、第九天 我趴在偏房一處隱蔽的房頂上張望拳芙。 院中可真熱鬧,春花似錦皮璧、人聲如沸舟扎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)睹限。三九已至,卻和暖如春讯檐,著一層夾襖步出監(jiān)牢的瞬間羡疗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工别洪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留叨恨,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓挖垛,卻偏偏與公主長(zhǎng)得像痒钝,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子痢毒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

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