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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　最好的啟動(dòng)畫面可能沒有啟動(dòng)畫面
 

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

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

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

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

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

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

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

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

　　提示
 

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

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

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

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

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

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

　　Slack使用骨架屏幕來創(chuàng)造速度的錯(cuò)覺研究表明，與靜態(tài)初始屏幕或加載微調(diào)器相比，骨架屏幕有助于減少感知的加載時(shí)間-它們是用于管理等待時(shí)間周圍感知的出色解決方案。
 

　　減少等待的焦慮
 

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

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

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

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

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

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

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

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

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

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

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