UI設(shè)計(jì)啟動(dòng)畫(huà)面如何受歡迎

　　為什么使用啟動(dòng)畫(huà)面?在低帶寬，AOL聊天室和慢速設(shè)備的美好年代，經(jīng)常使用啟動(dòng)屏幕來(lái)“掩蓋”加載應(yīng)用程序所需的時(shí)間，而在UI可以使用時(shí)消失了。如今，隨著移動(dòng)設(shè)備變得越來(lái)越強(qiáng)大，并且應(yīng)用程序幾乎可以立即加載，啟動(dòng)屏幕似乎沒(méi)有必要了，但它們?nèi)钥捎糜谝恍┲匾康?。下?a href="http://5wd995.cn/" target="_blank">AAA教育的武老師就來(lái)為大家分享，如何讓你的啟動(dòng)畫(huà)面更受歡迎。
 

　　原因1：歡迎用戶(hù)并設(shè)置應(yīng)用內(nèi)體驗(yàn)的基調(diào)
 

　　出色的用戶(hù)體驗(yàn)從用戶(hù)打開(kāi)您的應(yīng)用程序開(kāi)始。閃屏用于為用戶(hù)設(shè)置場(chǎng)景，讓他們知道“我們知道您在這里”。
 

　　如果您要花費(fèi)時(shí)間和精力來(lái)改善應(yīng)用的感知用戶(hù)體驗(yàn)，那么最大的回報(bào)就是在用戶(hù)體驗(yàn)的早期階段花時(shí)間。
 

　　這就像到達(dá)一家餐廳—您的服務(wù)器在您坐下后經(jīng)過(guò)您的桌子，只是為了讓您知道他們一看完那張桌子，他們就會(huì)和您在一起。這是一個(gè)很小的接觸，但可以減輕用戶(hù)對(duì)其余體驗(yàn)的感知。如果最初的體驗(yàn)是積極的，那么讓用戶(hù)滿(mǎn)意就容易了。但是，如果初次體驗(yàn)是負(fù)面的，則會(huì)產(chǎn)生一種光環(huán)效應(yīng)，以一種很難恢復(fù)的方式提高他們對(duì)應(yīng)用程序其余部分的期望。
 

　　原因2：管理用戶(hù)對(duì)您應(yīng)用的看法和期望
 

　　根據(jù)作者和業(yè)務(wù)顧問(wèn)David H. Maister的說(shuō)法，用戶(hù)對(duì)服務(wù)的滿(mǎn)意程度背后的公式既簡(jiǎn)單又有效：滿(mǎn)意=感知–期望
 

　　如果用戶(hù)期望某種特定的應(yīng)用內(nèi)體驗(yàn)，但他們認(rèn)為體驗(yàn)超出期望，他們會(huì)很高興。如果他們的看法不能滿(mǎn)足他們的期望，他們將感到失望。
 

　　回到我們的餐廳類(lèi)比中，女主人可能會(huì)給您比他們期望的更長(zhǎng)的等待時(shí)間，因此當(dāng)桌子準(zhǔn)備就緒時(shí)，他們可能會(huì)超出您的期望。同樣，在門(mén)廳中安裝鏡子可能會(huì)分散食客在等候時(shí)的注意力，從而減少了他們對(duì)等候時(shí)間的感知。
 

　　啟動(dòng)畫(huà)面可以幫助您的應(yīng)用程序，網(wǎng)站或產(chǎn)品達(dá)到相同的目的。從用戶(hù)打開(kāi)應(yīng)用程序的那一刻起，啟動(dòng)畫(huà)面就可以幫助您提高感知度，從一開(kāi)始就有助于減少放棄并管理用戶(hù)的期望。
 

　　原因3：消除不可避免的加載延遲
 

　　UI用戶(hù)體驗(yàn)的意義是什么？不確定的等待總是比有限的等待更長(zhǎng)。這就是為什么雜貨店中的其他生產(chǎn)線總是運(yùn)行速度更快，以及為什么人們?cè)缭缗抨?duì)登機(jī)，即使他們知道整個(gè)航班會(huì)在同一時(shí)間到達(dá)。
 

　　未知的焦慮使等待的時(shí)間更長(zhǎng)—用戶(hù)不確定應(yīng)用程序是否仍在加載，或者不確定加載過(guò)程將花費(fèi)多長(zhǎng)時(shí)間。即使在高級(jí)設(shè)備上，等待也常常是不可避免的-諸如加載用戶(hù)數(shù)據(jù)或通過(guò)遠(yuǎn)程服務(wù)進(jìn)行身份驗(yàn)證之類(lèi)的任務(wù)需要花費(fèi)一些時(shí)間來(lái)設(shè)置，然后用戶(hù)才能開(kāi)始與應(yīng)用程序進(jìn)行交互。
 

　　初始屏幕有助于減少等待時(shí)的用戶(hù)焦慮。它們使等待時(shí)間變得更短，使用戶(hù)確信該應(yīng)用程序仍在加載，有時(shí)會(huì)提供實(shí)時(shí)反饋，讓他們知道需要多長(zhǎng)時(shí)間。
 

　　最好的啟動(dòng)畫(huà)面可能沒(méi)有啟動(dòng)畫(huà)面
 

　　如果啟動(dòng)畫(huà)面如此有價(jià)值，為什么它們會(huì)受到如此強(qiáng)烈的反對(duì)呢?
 

　　一切都?xì)w結(jié)為摩擦。設(shè)計(jì)出一流的用戶(hù)體驗(yàn)意味著要盡可能減少摩擦，并且由于錯(cuò)誤的原因而添加防濺屏?xí)r會(huì)產(chǎn)生不必要的摩擦。
 

　　用戶(hù)不在乎發(fā)布時(shí)的品牌宣傳，但營(yíng)銷(xiāo)團(tuán)隊(duì)卻利用自己的固定受眾來(lái)推銷(xiāo)產(chǎn)品?，F(xiàn)代設(shè)備瞬間即可加載應(yīng)用程序和網(wǎng)站-啟動(dòng)畫(huà)面會(huì)在加載過(guò)程中增加看似不必要的延遲。啟動(dòng)屏幕由于錯(cuò)誤的原因而添加時(shí)經(jīng)常會(huì)增加摩擦，而沒(méi)有創(chuàng)建其他值來(lái)平衡方程。
 

　　如果確實(shí)向應(yīng)用程序或網(wǎng)站添加了初始屏幕，請(qǐng)確保牢記一些一般規(guī)則。
 

　　UI設(shè)計(jì)流程，使用啟動(dòng)畫(huà)面的最佳做法
 

　　初始屏幕具有各種形狀和大小，但幾乎所有屏幕都遵循一些常見(jiàn)的最佳做法。
 

　　保持設(shè)計(jì)簡(jiǎn)單，但不平凡
 

　　初始屏幕應(yīng)引人注目并吸引新用戶(hù)，這使他們有理由留下來(lái)。
 

　　提示
 

　　將您的靜態(tài)設(shè)計(jì)轉(zhuǎn)換為可點(diǎn)擊的原型。
 

　　使用醒目的顏色，創(chuàng)意背景圖像，原始徽標(biāo)和微妙的動(dòng)畫(huà)，使您的設(shè)計(jì)引人注目而又不至于霸道。使您的設(shè)計(jì)簡(jiǎn)單—避免添加文本，廣告或其他需要較長(zhǎng)時(shí)間來(lái)消化的設(shè)計(jì)元素。請(qǐng)勿將您的啟動(dòng)畫(huà)面用作營(yíng)銷(xiāo)廣告牌，因?yàn)樗鼤?huì)給用戶(hù)留下您以銷(xiāo)售為目標(biāo)的印象，并損害應(yīng)用程序的聲譽(yù)。
 

　　查看Mighty Networks應(yīng)用程序的啟動(dòng)屏幕-簡(jiǎn)單明了，色彩鮮艷，徽標(biāo)從背景中脫穎而出，沒(méi)有絨毛。
 

　　Mighty Networks初始屏幕簡(jiǎn)單但引人注目保持啟動(dòng)畫(huà)面盡可能短
 

　　您的啟動(dòng)屏幕應(yīng)盡快來(lái)回移動(dòng)，最好不要超過(guò)兩到三秒。不僅如此，用戶(hù)很快就會(huì)感到沮喪，尤其是如果他們每天多次打開(kāi)您的應(yīng)用程序時(shí)。
 

　　如果您的應(yīng)用加載時(shí)間超過(guò)幾秒鐘，請(qǐng)嘗試用“骨架屏幕”替換初始屏幕。骨架屏幕(如下面的Slack中的示例)使用可視占位符顯示應(yīng)用程序或網(wǎng)站正在加載時(shí)最終UI的提示，從而通過(guò)創(chuàng)建額外速度的錯(cuò)覺(jué)來(lái)幫助增強(qiáng)動(dòng)力和熟悉度。提升用戶(hù)體驗(yàn)。
 

　　Slack使用骨架屏幕來(lái)創(chuàng)造速度的錯(cuò)覺(jué)研究表明，與靜態(tài)初始屏幕或加載微調(diào)器相比，骨架屏幕有助于減少感知的加載時(shí)間-它們是用于管理等待時(shí)間周?chē)兄某錾鉀Q方案。
 

　　減少等待的焦慮
 

　　如果您的應(yīng)用需要很長(zhǎng)時(shí)間才能加載，那么就進(jìn)度提供反饋至關(guān)重要。如果您的網(wǎng)站或應(yīng)用程序沒(méi)有通知用戶(hù)它仍在加載中，則他們可能認(rèn)為未收到他們的請(qǐng)求，或者更糟的是，該應(yīng)用程序已完全崩潰，因此放棄了您的應(yīng)用程序。

　　讓用戶(hù)滿(mǎn)意，讓他們知道事情正在發(fā)生。使用進(jìn)度條或動(dòng)畫(huà)之類(lèi)的視覺(jué)指示器使用戶(hù)了解您的應(yīng)用進(jìn)度，并減少放棄。這就是要提升用戶(hù)體驗(yàn)。
 

　　即使是一個(gè)簡(jiǎn)單的加載指示器(例如Nest的指示器)也可以幫助用戶(hù)保持了解情況微調(diào)框和其他開(kāi)放式負(fù)載指示器可在較短的延遲時(shí)間內(nèi)很好地工作，但有時(shí)可能使等待的感覺(jué)變得更長(zhǎng)，因此，如果您的應(yīng)用程序需要花費(fèi)一些時(shí)間來(lái)加載，請(qǐng)盡量避免使用它們。
 

　　為您的設(shè)計(jì)增添些許樂(lè)趣
 

　　UI設(shè)計(jì)原則，如果您無(wú)法避免出現(xiàn)啟動(dòng)畫(huà)面，請(qǐng)確保將檸檬變成美味的UX檸檬水。初始屏幕是讓用戶(hù)滿(mǎn)意并為您的應(yīng)用程序注入個(gè)性的絕好機(jī)會(huì)。
 

　　不要太重視您的設(shè)計(jì)，但也不要太過(guò)分。用戶(hù)可能會(huì)第一次欣賞到這種有趣的動(dòng)畫(huà)(例如Zocdoc應(yīng)用程序中的以下示例)，但是在每次會(huì)話中強(qiáng)迫他們坐下來(lái)，可能會(huì)令人沮喪。
 

　　Zocdoc在其啟動(dòng)畫(huà)面上通過(guò)簡(jiǎn)單的動(dòng)畫(huà)添加了一種奇想相反，請(qǐng)嘗試僅在首次啟動(dòng)時(shí)顯示歡迎動(dòng)畫(huà)，然后在后續(xù)會(huì)話中顯示一個(gè)更簡(jiǎn)單的替代方法(或完全跳過(guò)啟動(dòng)屏幕)。
 

　　如何創(chuàng)建啟動(dòng)畫(huà)面
 

　　如果您仍在設(shè)計(jì)應(yīng)用程序，還可以在InVision原型中添加啟動(dòng)屏幕或加載屏幕。加載原型時(shí)會(huì)出現(xiàn)加載屏幕，然后自動(dòng)切換到為原型選擇的開(kāi)始屏幕。
 

　　InVision使您可以輕松地將初始屏幕添加到原型中要將加載屏幕添加到InVision原型，請(qǐng)單擊原型上的第一個(gè)插槽以設(shè)置加載圖像。該文件必須為PNG格式，并且大小正確以適合設(shè)備。顯示加載屏幕的時(shí)間長(zhǎng)度取決于原型加載所需的時(shí)間，因此您甚至可能看不到小型原型的屏幕。這是指向有關(guān)在InVision中設(shè)置自己的加載屏幕的詳細(xì)說(shuō)明的鏈接。

         啟動(dòng)畫(huà)面就是門(mén)面，也一樣要重視，以上內(nèi)容你學(xué)會(huì)了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育。