交互—跳轉(zhuǎn)和彈窗

繼續(xù)交互練習(xí)掠剑,重在思考,深入的思考郊愧,我的思考深度還遠(yuǎn)遠(yuǎn)不夠朴译。以下內(nèi)容主要討論移動端。

這個問題在知乎有個不錯的回答属铁,把跳轉(zhuǎn)比作出入境填表动分,

換一種方式,如果她每次只給你一張表红选,你填寫完,她校對一遍姆另。錯誤馬上改正喇肋;正確馬上通過,并且后續(xù)不需再填類似的信息迹辐。一張一張表到全部通過為止蝶防。這個體驗(yàn)給你的感受是否更流暢一些?
適合單任務(wù)場景或進(jìn)程型頁面明吩。

把彈窗比作保安檢查间学,

相反,假設(shè)保安只是微笑著拿著登記本和筆,耽擱你10秒鐘填個信息低葫,他就靜悄悄地滾了详羡。你又可以很快到你同學(xué)家。你會不會覺得這個保安稍微體貼一點(diǎn)嘿悬?
彈窗更適合臨時性实柠、補(bǔ)充性或突發(fā)性的情況展示。

這位知乎的朋友說的很好善涨,在任務(wù)流程中窒盐,如果有先后邏輯關(guān)系的,使用跳轉(zhuǎn)钢拧。如果為臨時性的通知或者警告蟹漓,使用彈窗。
這是比較理想的情況源内,現(xiàn)實(shí)中的問題要更復(fù)雜一些葡粒。

1、在填色應(yīng)用中姿锭,用戶完成一張畫塔鳍,可以選擇保存退出也可以添加效果,添加效果這個步驟選擇跳轉(zhuǎn)還是彈窗呻此?分享呢轮纫?

2、外賣點(diǎn)餐應(yīng)用里焚鲜,完成交易后掌唾,系統(tǒng)提示分享好友可獲得獎勵。分享界面使用彈窗還是跳轉(zhuǎn)忿磅?

3糯彬、商城應(yīng)用,完成交易葱她,系統(tǒng)引導(dǎo)去評價(jià)撩扒,使用彈窗還是跳轉(zhuǎn)?

4吨些、購物車不像是填表搓谆,和當(dāng)前商品沒有密切的邏輯關(guān)系,但是移動端的應(yīng)用都是用了跳轉(zhuǎn)的方式豪墅?

5泉手、查看商品評價(jià)也和交易沒有必然的邏輯關(guān)系,但是他依然使用了跳轉(zhuǎn)的方式偶器,而選擇尺碼卻使用了彈窗的方式斩萌?

等等缝裤,相關(guān)的例子有很多很多,不同的模式颊郎,不同的場景憋飞,不同的業(yè)務(wù),實(shí)際情況很多是介于兩者之間的袭艺,或者根本無視交互原理的搀崭。

所以,我們只有在這樣的情況會遇到以上問題猾编,在相關(guān)任務(wù)的界面設(shè)計(jì)時瘤睹,在一個大類中,如何進(jìn)入一個支線任務(wù)答倡,或者相關(guān)的特殊任務(wù)请垛。

跳轉(zhuǎn)可能導(dǎo)致
  1. 返回原頁面的成本增加
  2. 記憶的成本增加
  3. 點(diǎn)擊跳轉(zhuǎn)按鈕的成本增加
  4. 新內(nèi)容識別的成本減少
  5. 未完成任務(wù)的負(fù)擔(dān)減少
彈窗可能導(dǎo)致
  1. 打斷任務(wù)的風(fēng)險(xiǎn)增加
  2. 記憶的成本減少
  3. 注意力的負(fù)擔(dān)增加
移動端和PC截然不同

淘寶的商品詳情頁面泽疆,點(diǎn)擊購物車時刨啸,PC端只是一個側(cè)邊彈窗履恩,而移動端則跳轉(zhuǎn);查看評價(jià)倔既,PC端甚至沒有跳轉(zhuǎn)和彈窗恕曲,只是用了標(biāo)簽,而移動端則需要跳轉(zhuǎn)渤涌。雖然交互原理處處通用佩谣,但是交互的具體實(shí)現(xiàn)依賴于所處的硬件平臺。
在更大的屏幕下实蓬,PC有足夠的空間容納更多的組件茸俭,隨著技術(shù)的成熟和瀏覽器的升級,越來越多的交互式組件出現(xiàn)安皱,比如可切換的標(biāo)簽欄调鬓、可伸縮的折疊式菜單、鼠標(biāo)懸停的懸浮窗口酌伊√谖眩可見,PC有足夠多的方法來容納支線任務(wù)的進(jìn)行居砖,而移動端則被迫使用跳轉(zhuǎn)和彈窗來消化內(nèi)容“溢出”燕锥。
也因此,PC的交互流程邏輯更加合理一些悯蝉,移動端需要考慮的因素更多一些。

回到原來的問題

以下問題只針對移動端

Q:在填色應(yīng)用中托慨,用戶完成一張畫鼻由,可以選擇保存退出也可以添加效果,添加效果這個步驟使用跳轉(zhuǎn)還是彈窗?分享呢蕉世?
A:兩種做法都有應(yīng)用使用蔼紧。首先排除在原圖上顯示,因?yàn)樵瓐D是需要保留的狠轻,用戶可以在原圖的基礎(chǔ)上添加各種效果奸例。重點(diǎn)在于:把添加效果看成是附加操作還是任務(wù)最后的一環(huán)。從功能來說向楼,添加效果確實(shí)是極為重要的一步查吊,不應(yīng)該作為附屬步驟。不過湖蜕,嚴(yán)格來說逻卖,填色完成,畫作即完成昭抒,效果實(shí)際上是濾鏡的作用评也,濾鏡對畫作本身只起到“潤色”效果,不會改變畫作本身灭返。另外盗迟,畫作可以保存,任何時候都可以使用濾鏡上色熙含,時效性很靈活罚缕。綜合兩點(diǎn),應(yīng)該使用彈窗婆芦。分享同理怕磨。

Artboard 3.png

Q:外賣點(diǎn)餐應(yīng)用里,完成交易后消约,系統(tǒng)提示分享好友可獲得獎勵肠鲫。分享界面使用彈窗還是跳轉(zhuǎn)?
A:和填色一樣或粮,同樣是最后一步导饲,并非必要步驟,理應(yīng)使用彈窗氯材。不同的是渣锦,分享給好友主要是為了推廣APP,屬于運(yùn)營的手段氢哮,并非用戶喜愛的功能袋毙,點(diǎn)擊率不會樂觀。加上完成交易后冗尤,大部分用戶立即關(guān)閉應(yīng)用听盖,應(yīng)主動把握最后的機(jī)會胀溺。結(jié)合這兩點(diǎn),應(yīng)大膽使用主動彈窗皆看,參考美團(tuán)外賣仓坞。

Q:商城應(yīng)用,完成交易腰吟,系統(tǒng)引導(dǎo)去評價(jià)无埃,使用彈窗還是跳轉(zhuǎn)?
A:評論是在完成以后的事情毛雇,用戶可以不評價(jià)嫉称,評價(jià)屬于一個附加內(nèi)容,理應(yīng)使用彈窗禾乘。但是從評價(jià)的內(nèi)容考慮(淘寶)澎埠,包括評論文字、上傳照片始藕、好中差評蒲稳、3個打分星級、匿名評價(jià)等繁多的選項(xiàng)伍派〗可見,淘寶是比較看中評價(jià)這塊的诉植。一個彈窗難以承載這么多的控件祥国,因此選擇跳轉(zhuǎn)。

Artboard 2.png

Q:購物車不像是填表晾腔,和當(dāng)前商品沒有密切的邏輯關(guān)系舌稀,但是移動端的應(yīng)用都是用了跳轉(zhuǎn)的方式?
A:和評分一樣灼擂,購物車需要承載的內(nèi)容很多壁查,在移動端使用跳轉(zhuǎn)更加合理。如果使用彈窗剔应,界面變得混亂復(fù)雜睡腿,失去彈窗的意義。(反而增加負(fù)擔(dān))

Q:查看商品評價(jià)也和交易沒有必然的邏輯關(guān)系峻贮,但是他依然使用了跳轉(zhuǎn)的方式席怪,而選擇尺碼卻使用了彈窗的方式?(淘寶移動端)
A:即使不考慮復(fù)雜的控件纤控,評論內(nèi)容屬于文字和圖片混排界面挂捻,使用彈窗會變得難以閱讀,應(yīng)該使用跳轉(zhuǎn)船万。有一個案例细层,在iPhone系統(tǒng)更新提示的彈窗有大段的條款惜辑,一般來說很少人會認(rèn)真看那個大段的文字。
選擇尺碼主要根據(jù)購物心理來理解疫赎,買衣服的時候,尺碼和顏色也是考量的因素碎节,在反復(fù)確認(rèn)有適合的尺碼后捧搞,才下單購買,符合一般的購物心理狮荔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末胎撇,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子殖氏,更是在濱河造成了極大的恐慌晚树,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雅采,死亡現(xiàn)場離奇詭異爵憎,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)婚瓜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門宝鼓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人巴刻,你說我怎么就攤上這事愚铡。” “怎么了胡陪?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵沥寥,是天一觀的道長。 經(jīng)常有香客問我柠座,道長邑雅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任愚隧,我火速辦了婚禮蒂阱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘狂塘。我一直安慰自己录煤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布荞胡。 她就那樣靜靜地躺著妈踊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪泪漂。 梳的紋絲不亂的頭發(fā)上廊营,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天歪泳,我揣著相機(jī)與錄音,去河邊找鬼露筒。 笑死呐伞,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的慎式。 我是一名探鬼主播伶氢,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼瘪吏!你這毒婦竟也來了癣防?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤掌眠,失蹤者是張志新(化名)和其女友劉穎蕾盯,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蓝丙,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡级遭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了迅腔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片装畅。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖沧烈,靈堂內(nèi)的尸體忽然破棺而出掠兄,到底是詐尸還是另有隱情,我是刑警寧澤锌雀,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布蚂夕,位于F島的核電站,受9級特大地震影響腋逆,放射性物質(zhì)發(fā)生泄漏婿牍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一惩歉、第九天 我趴在偏房一處隱蔽的房頂上張望等脂。 院中可真熱鬧,春花似錦撑蚌、人聲如沸上遥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽粉楚。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間模软,已是汗流浹背伟骨。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留燃异,地道東北人携狭。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像回俐,于是被迫代替她去往敵國和親暑中。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,115評論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫鲫剿、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評論 4 62
  • 從前的時光慢,相交就是一輩子殴俱。從前的時光慢政冻,相愛倏忽就白頭。 《我的前半生》熱播线欲,很多人才開始知道亦舒明场。還有小姑娘...
    端平閱讀 374評論 0 0
  • 突然不喜歡張小嫻,因?yàn)橄肫鹚囊槐緯罘幔度齻€a罩杯的女人》苦锨,女主是小三,想起最后她在年老色衰的森妻面前脫了衣服...
    焰之外閱讀 864評論 1 3
  • 8趴泌、25覺察日記:復(fù)訓(xùn)第一天舟舒,期待多多,敞開就多多嗜憔!今天做臣服練習(xí)秃励,對父母的感受已經(jīng)一百八十度大轉(zhuǎn)變。我看到了他們...
    嘟嘟媽媽2727閱讀 128評論 0 0