[交互設(shè)計]輔助信息/操作的4個交互模式

在后臺型的系統(tǒng)中,因為復(fù)雜的交互和錯綜復(fù)雜的信息關(guān)聯(lián)性,常常在一個核心任務(wù)流中需要插入輔助操作,或者展示重要的但不是主流程中必須要的輔助信息。那么下面介紹四種常用到的關(guān)于處理輔助操作和展示輔助信息的交互模式。

一、氣泡

在頁面中很快地給用戶提供輕量級的信息和操作

輕量級的,一般在頁面中,有少量信息由于空間的原因,或者為了信息的簡潔清晰,采取部分展示,隱藏冗余信息的做法;還有一些使用場景是為了隱藏必要的但是非重要的輔助信息;也常常用在對一個操作或者元素的簡短解釋。

通過鼠標(biāo)移到特定的區(qū)域,或者點擊該區(qū)域,從而觸發(fā)相關(guān)的信息展示或操作。此方式僅限于非常少量的信息展示,以及非常簡單的交互操作。

二、對話框

指引用戶操作,展示少量的細(xì)節(jié)詳情,進行比較輕量級的操作

在后臺型的系統(tǒng)中,對話框被使用的頻率非常高。原因是因為對話框用戶觸發(fā)和關(guān)閉的成本較低,沒有上下文/前后頁面切換和加載的成本,不會讓你覺得進入了一個新的頁面。用戶可以在一個頁面的大量條目中,快速來回切換查看多個條目的詳細(xì)信息,從而減少因為新開頁面或跳轉(zhuǎn)至其他地方帶來的適應(yīng)成本。

然而在彈出框中,一般不建議有復(fù)雜的交互以及大信息量展示。同時避免在一個彈出框中,又出現(xiàn)一個彈層。

三、抽屜式彈層

介于彈出框與新開頁面之間的一個過渡方式

作為普通對話框的一個擴展形式,可視區(qū)相對普通對話框更大,可以承載比彈出框更多信息的展示以及更加復(fù)雜的操作,而相對新開一個頁面來得輕量和低成本。

四、獨立頁面

承載任何復(fù)雜的交互和最大量的信息,更加專注于當(dāng)下

在后臺型產(chǎn)品中,「使用效率」在交互中被放置在一個很重要的位置。我們常常為了效率,恨不得把所有信息和復(fù)雜操作都通過彈窗來實現(xiàn),因為觸發(fā)成本低,避免用戶在產(chǎn)品使用中在多頁面中來回切換。

然而,如果一個交互太復(fù)雜,需要許多步才能完成,并且操作比較重要和謹(jǐn)慎,那么它需要一個足以承載它復(fù)雜程度的頁面來顯示。因為用戶需要在這個場景下停留時間很久,彈框的輕量級的特性反而會讓用戶有不安全感,并且用戶容易誤操作使得任務(wù)中斷,而一個普通的頁面反而更能讓用戶專注在當(dāng)前。

因此我們不必排斥通過新頁面來作為輔助手段,當(dāng)用戶沒有明確的需求要在多個事項中頻繁查看或來回跳轉(zhuǎn)時,那么新開一個頁面用來展示明細(xì),讓用戶更加專注于當(dāng)前的操作,會是一個不錯的選擇。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,324評論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,660評論 4 61
  • 畫面里他擎著蒲公英的樣子天真無邪,小心吹到風(fēng)里又用手接住,在弄丟之前呵護良久。對面的女孩也著了大紅鑲邊的袍子,華美...
    鈺貓閱讀 545評論 0 50
  • “Hi,張先生,您的濃郁摩卡好了,謝謝!”無論是在杭州西湖旁,還是佛山嶺南天地的星巴克,咖啡做好后總會聽到同樣的話...
    博文約禮Jason張閱讀 615評論 0 2
  • 精釀啤酒是個很有趣、很值得玩味的領(lǐng)域?,F(xiàn)代精釀啤酒以各式麥芽、酒花、酵母、香料為基礎(chǔ)做排列組合,排出的結(jié)果有千千萬...
    大連IT張三好閱讀 11,189評論 0 5

友情鏈接更多精彩內(nèi)容