對于一些 UI 元素,可以自動(dòng)修剪或截?cái)喑鱿拗频奈谋?。例如,可以在顯示文本的區(qū)域中截?cái)喑鱿拗频淖址⒃谀┪蔡砑邮÷蕴枴?/div>
錯(cuò)誤是如何出現(xiàn)的。
我們應(yīng)該使用動(dòng)畫或?qū)Ρ榷葋砦脩舻淖⒁饬Α?/div>
樣式和位置。
錯(cuò)誤通知應(yīng)直觀地鏈接到問題發(fā)生的位置。
語言。
錯(cuò)誤應(yīng)該以清晰、用戶友好且品牌化的方式編寫。不惜一切代價(jià)避免“技術(shù)演講”。
明確的解決方案。
在通知用戶錯(cuò)誤之后,我們還應(yīng)該提及解決方案。這可能是一條說明,或者是其他可能對他們有幫助的內(nèi)容的鏈接。
輸入錯(cuò)誤的密碼后,該字段會(huì)左右輕微晃動(dòng)(就像有人搖頭一樣)。這會(huì)引起用戶對問題的注意,但不會(huì)顯得突兀
服務(wù)器異常、無訪問權(quán)限、 網(wǎng)絡(luò)異常(斷網(wǎng)、網(wǎng)速過慢、加載失敗、網(wǎng)絡(luò)連接失?。?、瀏覽器異常、數(shù)據(jù)出錯(cuò);
異常狀態(tài)用來提醒用戶發(fā)生了未指定的系統(tǒng)錯(cuò)誤,需要用戶了解此情況,并且提供下一步引導(dǎo)或解決建議,為用戶解釋異常狀態(tài)的原因,解決困惑,提供解決辦法,引導(dǎo)用戶繼續(xù)產(chǎn)品流程而不是關(guān)閉窗口離開
還有一種情況就是頁面內(nèi)容過多的情況,這里我們不考慮頁面展示只考慮進(jìn)入頁面的加載,大家平時(shí)估計(jì)遇到過點(diǎn)開一個(gè)列表頁面,就一直在觀看“菊花轉(zhuǎn)”(頁面內(nèi)容加載狀態(tài)),等的時(shí)間如果超過5秒可能就會(huì)產(chǎn)生焦慮了,再多點(diǎn)時(shí)間直接就和產(chǎn)品說拜拜了,那么這種極端情況一般怎么處理呢?
骨架屏是一個(gè)可選方案,也就是說不一定要有,有了會(huì)更好。
骨架屏適合頁面布局固定的頁面,目前很多APP都會(huì)使用骨架屏,常用的頁面有列表頁、詳情頁等。
一般骨架屏由開發(fā)寫,如果我們要做骨架屏,需要定義好骨架屏的樣式,讓開發(fā)照著寫,骨架屏實(shí)現(xiàn)難度我也跟開發(fā)同學(xué)咨詢過,很簡單,所以可以放心大膽用。
占位圖應(yīng)該是許多新人容易忽視的地方,提及占位圖就不得不提到加載,為了減少用戶感知加載時(shí)間,應(yīng)用加載一般會(huì)先加載文字后加載圖片,可以緩解用戶等待的焦慮情緒。
如果這么做就涉及到一個(gè)問題:原本放圖片的位置拿什么來占位?
所以就出現(xiàn)了占位圖這個(gè)東西,當(dāng)圖片還沒有加載出來的時(shí)候,使用一個(gè)占位圖進(jìn)行占位,讓用戶知道這里是有東西的
占位圖一般有帶logo的圖片和純色圖,如果是加載視頻,一般還會(huì)在圖片上做一個(gè)視頻的圖標(biāo),讓用戶知道這里是視頻。
當(dāng)一個(gè)頁面向上滾動(dòng)時(shí),頁面的元素會(huì)發(fā)生什么變化,場景的變化有導(dǎo)航欄置頂、標(biāo)簽欄置頂?shù)?,這些都是我們需要提前定義好的。
處理頁面上滑的交互是指當(dāng)用戶向上滑動(dòng)頁面時(shí)所觸發(fā)的交互效果或行為。這種交互可以增強(qiáng)用戶體驗(yàn),并使用戶更輕松地瀏覽頁面內(nèi)容。以下是一些處理頁面上滑交互的方法:
即將導(dǎo)航欄固定在頂部,其余內(nèi)容上滑,我個(gè)人比較傾向于這種方式,當(dāng)頁面比較長的時(shí)候可以讓用戶隨時(shí)可以看到導(dǎo)航欄,不僅僅是給習(xí)慣了導(dǎo)航欄的用戶增添一份安全感,更是因?yàn)楫?dāng)導(dǎo)航欄有功能入口(比如設(shè)置)的時(shí)候,用戶可以隨時(shí)看到并隨時(shí)點(diǎn)擊
這就是一種內(nèi)容遷移到導(dǎo)航欄區(qū)域的情況,這種交互方式不僅能提升用戶的操作體驗(yàn),也能提升產(chǎn)品的數(shù)據(jù),比如當(dāng)關(guān)注入口曝光更多,點(diǎn)擊關(guān)注的概率就會(huì)有一定上升。
篩選欄的固定方式也極為常見,很多地方為了用戶可以方便做切換,都會(huì)把篩選欄固定在頂部,那么這時(shí)候就需要我們對交互進(jìn)行詳細(xì)的定義。
如果此時(shí)我們需要讓篩選欄固定在頂部,那么可以這么說明:
頁面上滑時(shí),導(dǎo)航欄和篩選欄固定在頂部,其余內(nèi)容向上滑動(dòng)。
這時(shí)候有兩種情況,一種是篩選欄隨頁面一起上滑不做固定,另一種是篩選欄需要做固定。具體使用哪種需要視具體場景來定,下面說一下當(dāng)篩選欄需要固定時(shí)我們該如何描述交互。
① 當(dāng)篩選欄位置未到達(dá)頂部時(shí)
頁面整體上滑(一般情況下導(dǎo)航欄當(dāng)然始終固定在頂部)
② 當(dāng)篩選欄的位置到達(dá)導(dǎo)航欄下方時(shí)
篩選欄固定,篩選欄下方內(nèi)容繼續(xù)向上滑動(dòng)
有些設(shè)計(jì)師認(rèn)為,極端情況往往是意料之外的情況,但是實(shí)際上,絕大多數(shù)的極端情況是可以提前預(yù)測的。有兩種方法可以幫你找到極端情況:
為了創(chuàng)造出色的設(shè)計(jì),你應(yīng)當(dāng)主動(dòng)尋找極端情況。設(shè)計(jì)評審是一個(gè)非常有用的環(huán)節(jié),它可以幫助產(chǎn)品團(tuán)隊(duì)找到許多潛在的優(yōu)勢案例。在產(chǎn)品設(shè)計(jì)的早期,就應(yīng)該進(jìn)行設(shè)計(jì)評審。為了獲得更好的結(jié)果,最好邀請開發(fā)人員和其他的團(tuán)隊(duì)成員參與此類會(huì)議。
盡早在其他的團(tuán)隊(duì)成員的幫助下尋找極端情況是一種很好的辦法,但是它不能保證你會(huì)發(fā)現(xiàn)所有的問題來源。只有在真正的用戶進(jìn)行測試的時(shí)候,才能幫你了解用戶使用你的產(chǎn)品的時(shí)候所面臨的問題。同時(shí),值得一提的是,嚴(yán)格且有節(jié)制的可用性測試,用戶可能會(huì)因?yàn)榻?jīng)常被指示要做什么而很難暴露極端情況的存在。所以,最好創(chuàng)建一個(gè)讓用戶可以嘗試和探索的體系,在靈活的測試和充足的時(shí)間下,更容易找到問題。
為各種可能發(fā)生的情況進(jìn)行設(shè)計(jì)
好的設(shè)計(jì)就是注重細(xì)節(jié)。
正是這種針對每種場景進(jìn)行設(shè)計(jì)的承諾,才使出色的體驗(yàn)與普通體驗(yàn)區(qū)分開來。作為設(shè)計(jì)師,你有責(zé)任針對這些邊緣情況進(jìn)行規(guī)劃。無論您是否為它們進(jìn)行設(shè)計(jì),它們都會(huì)發(fā)生,所以最好做好準(zhǔn)備!
以上僅僅舉了幾個(gè)極端情況的例子,實(shí)際上還會(huì)有很多,若想盡量覆蓋全極端情況,在設(shè)計(jì)時(shí)可以多多思考,將自己切換成“找茬兒模式”,也可以尋求QA同學(xué)的幫助,因?yàn)樗麄冊趯懹美龝r(shí)會(huì)考慮的更多。即使努力去想可能發(fā)生的極端情況,但是有些極端情況還是可能會(huì)遺漏,到真正遇到了才知道,不過其實(shí)也說明了那些想不到的極端情況可能發(fā)生的概率更小。
總之,有些極端情況一定要處理,盡量做到給用戶一個(gè)好的體驗(yàn),但是有些情況其實(shí)并不需要投入過多精力去思考該如何提升體驗(yàn),因?yàn)楸旧砭筒皇钦5漠a(chǎn)品使用場景,只要在發(fā)生的時(shí)候保證產(chǎn)品可用性即可,因?yàn)檫€有更重要的產(chǎn)品主線體驗(yàn)需要不斷去迭代提升。