您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

如何設(shè)計(jì)良好的彈出框?這兒有一份周全總結(jié)!

王M爭(zhēng):最近做項(xiàng)目的時(shí)候,發(fā)現(xiàn)項(xiàng)目上對(duì)于彈出框的使用有點(diǎn)紊亂。例如,必要給用戶(hù)一個(gè)操作提醒,用彈出框來(lái)完成。用戶(hù)對(duì)這個(gè)功能不了解,加一個(gè)“查看詳情”的圖標(biāo),用戶(hù)點(diǎn)擊后跳出彈出框來(lái)給用戶(hù)展示詳情。用戶(hù)想查看這筆操作的細(xì)致記錄,照舊用一個(gè)彈出框來(lái)展示。由于要體現(xiàn)的內(nèi)容不一樣(表單,筆墨,插畫(huà)),所以彈出框的樣式不同一,設(shè)計(jì)的同等性被打破。而且彈出框出現(xiàn)的頻率過(guò)高,會(huì)對(duì)用戶(hù)的正常操作流程造成干擾。所以這篇文章我對(duì)彈出框的使用做了一些總結(jié)。

什么時(shí)候使用彈出框

在我看來(lái),項(xiàng)目上彈出框的使用出現(xiàn)紊亂,歸根結(jié)底是對(duì)彈出框使用時(shí)機(jī)的不了解。由于不知道什么情況下該使用彈出框,所以會(huì)導(dǎo)致彈出框出如今一些不應(yīng)該出現(xiàn)的地方。其實(shí)設(shè)計(jì)師在使用彈出框之前肯定要穩(wěn)重,要反復(fù)問(wèn)本身這里是否必須要使用彈出框。由于彈出框會(huì)打斷用戶(hù)當(dāng)前的操作流程,屬于比較強(qiáng)勢(shì)的干擾舉動(dòng)。

設(shè)計(jì)的包容性很強(qiáng),彈出框可以完成的功能其實(shí)可以通過(guò)其他設(shè)計(jì)元素來(lái)代替。接下來(lái)我們來(lái)看下那些彈出框的替換者們:

彈出框與開(kāi)屏廣告

目前來(lái)說(shuō),當(dāng)app進(jìn)行版本更新或者有新的功能(產(chǎn)品)上線(xiàn)的時(shí)候,通常會(huì)使用彈出框來(lái)提示用戶(hù)。

其實(shí)開(kāi)屏廣告完全可以替換彈出框,而且開(kāi)屏廣告由于空間更大,可以更好的完成宣傳功能。

彈出框與切換網(wǎng)頁(yè)

我們比較常見(jiàn)的詳情展示網(wǎng)頁(yè),這類(lèi)網(wǎng)頁(yè)可以通過(guò)彈出框也可以通過(guò)加載一個(gè)新的網(wǎng)頁(yè)來(lái)承載信息。從用戶(hù)體驗(yàn)的連貫性來(lái)說(shuō),用彈出框更好些。由于使用彈出框用戶(hù)還可以停頓在當(dāng)前網(wǎng)頁(yè),網(wǎng)頁(yè)內(nèi)容不會(huì)被刷新。而且彈出框打開(kāi)速度更快,反應(yīng)更及時(shí),更容易受到用戶(hù)的青睞。

但是彈出框可以承載的信息量是有限的,假如信息過(guò)多導(dǎo)致用戶(hù)還要在彈出框上滑動(dòng)才能看完,那么照舊以一個(gè)新的網(wǎng)頁(yè)來(lái)顯現(xiàn)更合適。

彈出框與toast

彈出框的一個(gè)重要功能就是反饋。有的反饋使用toast來(lái)體現(xiàn)更加合適,由于toast屬于一種輕量級(jí)的反饋體例,一樣平常出現(xiàn)1-2秒后會(huì)自行消散。而且toast與彈出框相比對(duì)界面的遮擋很少,不會(huì)對(duì)用戶(hù)的當(dāng)前操作產(chǎn)生很大的干擾

Toast可以出如今網(wǎng)頁(yè)中任何位置,能夠給用戶(hù)更具有指向型的提醒,這點(diǎn)是彈出框所不具備的。

其實(shí)什么時(shí)候使用彈出框,是否使用彈出框取決于你要給用戶(hù)展示的信息是否緊張。例如你在手機(jī)上買(mǎi)了一張電影票,付出失敗的效果假如用toast展示就會(huì)容易被用戶(hù)忽視。那么等到用戶(hù)到了電影院才發(fā)現(xiàn)本身購(gòu)買(mǎi)失敗,那么用戶(hù)極有可能當(dāng)場(chǎng)卸載你的產(chǎn)品。

總之,緊張的信息優(yōu)先考慮使用彈出框。

彈出框設(shè)計(jì)原則

避免筆墨過(guò)多

彈出框的另一個(gè)重要功能就是用戶(hù)指導(dǎo),我們都知道用戶(hù)指導(dǎo)本質(zhì)上就是讓用戶(hù)更好的了解產(chǎn)品。假如想詮釋一個(gè)事物,最有力的武器就是筆墨,但是我們不能過(guò)度依靠筆墨。

由于對(duì)于用戶(hù)來(lái)說(shuō)他們不盼望在使用過(guò)程中看到筆墨過(guò)多的指導(dǎo)提醒,他們盼望在短時(shí)間內(nèi)就可以了解整個(gè)指導(dǎo)的要告知用戶(hù)的內(nèi)容。這個(gè)就意味著我們要削減筆墨的使用,或者說(shuō)要精簡(jiǎn)筆墨。由于人類(lèi)對(duì)于筆墨的閱讀速度要遠(yuǎn)低于對(duì)于圖像的“閱讀速度”。我們?cè)诮o用戶(hù)筆墨提醒的時(shí)候肯定要記住搭配其他的視覺(jué)元素。

例如,用戶(hù)指導(dǎo)彈出框中我們會(huì)加入一些手勢(shì)、箭頭,使得指導(dǎo)更具有指向型。還有的彈出框指導(dǎo)會(huì)增長(zhǎng)一些插畫(huà),整個(gè)網(wǎng)頁(yè)風(fēng)格變的活潑起來(lái),刺激了用戶(hù)的閱讀欲望。

定位目標(biāo)用戶(hù)群和使用場(chǎng)景

設(shè)計(jì)師在進(jìn)行彈出框設(shè)計(jì)過(guò)程中,要考慮目標(biāo)用戶(hù)群和使用場(chǎng)景。以目標(biāo)用戶(hù)群為例,假如你的用戶(hù)大多數(shù)年齡都比較大,那么彈出框采用淺色背景可能更加合適,由于內(nèi)容更加的直觀。而年輕用戶(hù)更傾向于深色背景的彈出框,由于更加天然和時(shí)尚。假如我們可以正確的定位到目標(biāo)用戶(hù)群為兒童用戶(hù),那么我們?cè)趶棾隹虮尘吧咸砑右恍┎瀹?huà)元素。

使用場(chǎng)景涵蓋的范圍比較廣,包括使用的時(shí)間,使用時(shí)的網(wǎng)絡(luò)狀況,生理狀況和使用設(shè)備。這些都是我們?cè)谶M(jìn)行彈出框設(shè)計(jì)的時(shí)候必要考慮的題目。

以咕咚為例,一樣平常來(lái)說(shuō)大部分用戶(hù)對(duì)配速穩(wěn)固性和快慢分析這兩個(gè)概念,都有大致的理解。為了保險(xiǎn)起見(jiàn),設(shè)計(jì)師在這里照舊加了一個(gè)點(diǎn)擊查看詳情的圖標(biāo)。在這里設(shè)計(jì)師摒棄了使用彈出框,在我看來(lái)是一個(gè)特別很是明智的選擇。由于用戶(hù)使用咕咚的情況多數(shù)是在戶(hù)外,沒(méi)有wifi。假如用戶(hù)不樂(lè)意打開(kāi)流量的話(huà),這個(gè)彈出框就加載不出來(lái),如許就會(huì)影響產(chǎn)品的離線(xiàn)體驗(yàn)。

而且使用彈出框會(huì)隱瞞當(dāng)前網(wǎng)頁(yè)信息,比如我想理解配速穩(wěn)固性,但是彈出框遮擋了我的配速區(qū)間,如許的設(shè)計(jì)很容易被用戶(hù)吐槽。

總結(jié)

設(shè)計(jì)是一個(gè)你學(xué)的越多就糾結(jié)的行業(yè),這是一個(gè)很好的征象。糾結(jié)的根本緣故原由是由于我們?cè)谒伎?,在平衡不同設(shè)計(jì)方案之間利弊。自力思考的風(fēng)俗和態(tài)度應(yīng)該是一個(gè)合格設(shè)計(jì)師的基本素養(yǎng),或許有的時(shí)候思考到最后我們也無(wú)法得出一個(gè)令本身寫(xiě)意的方案,但是這個(gè)思考的過(guò)程對(duì)于你來(lái)說(shuō)比得到那個(gè)答案可能更加緊張。

迎接關(guān)注作者的微信公眾號(hào):「王M爭(zhēng)」



     

    [教程作者:互聯(lián)網(wǎng)]
    免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
    本文地址:http://m.irelandcustomcontracting.com/tutorial/di3817.html
    如何“欣賞作品”才能事半功倍?來(lái)看高手的方法!
    如何把設(shè)計(jì)技巧融入進(jìn)用戶(hù)體驗(yàn)?來(lái)看高手的方法!
    圖趣網(wǎng)微信
    建議反饋
    ×