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