本文主要分析了設(shè)計中的邊界問題，設(shè)計師可以設(shè)計初期便定義好這些邊界情況的處理方式，避免后期不斷進行瑣碎的調(diào)整。

互聯(lián)網(wǎng)產(chǎn)品設(shè)計，需要頁面之間具有良好的邏輯關(guān)系，但是由于網(wǎng)絡(luò)、帶寬服務(wù)器穩(wěn)定性等問題，會帶來意想不到的頁面崩潰。

內(nèi)容類產(chǎn)品中，文字內(nèi)容需要實時更新，有時候會出現(xiàn)文字溢出問題；移動設(shè)備尺寸多種多樣，在頁面適配過程中，頁面元素能夠適配，但是對于操作熱區(qū)，則需要前置考慮，避免用戶高頻出現(xiàn)誤操作行為……

以上這些情況相信各位PM和設(shè)計師在工作中經(jīng)常會遇到，遇到之后大部分之后會當(dāng)做一個BUG來處理，查漏補缺。但是實際上，這些情況都可以歸類為設(shè)計中的邊界問題或者特殊狀態(tài)。這些問題是隨著頁面邏輯相伴而生的，極易被忽略。

文章接下來就要分析一下設(shè)計中的邊界問題，設(shè)計師可以設(shè)計初期便定義好這些邊界情況的處理方式，避免后期不斷進行瑣碎的調(diào)整。

內(nèi)容邊界

內(nèi)容邊界可分為文字、圖片和視頻內(nèi)容。其中，圖片和視頻內(nèi)容往往都是呈現(xiàn)的核心信息，所以極少需要進行邊界化處理，更多時候需要考慮的是文字內(nèi)容。

由于移動設(shè)備的橫向尺寸及小屏設(shè)備存在的限制，在橫向的字?jǐn)?shù)上，按照尺寸28px來計算，加上兩側(cè)預(yù)留的邊界寬度，750尺寸的小屏手機上最多可完整顯示字?jǐn)?shù)在20~22個字之間。因此，當(dāng)頁面呈現(xiàn)過多文字內(nèi)容，或者支持用戶輸入較多內(nèi)容時，需要考慮文字顯示不全的問題。文字的邊界樣式，可按照瀏覽和輸入來區(qū)分。

瀏覽

用來瀏覽和讀取的文字內(nèi)容，字體尺寸會依照內(nèi)容權(quán)重顯示多重樣式，針對不同位置的文字，可采用折行或者截斷顯示來定義。如果截斷處理，那么后續(xù)需要有折疊/展開操作讓用戶能夠看到完整內(nèi)容。如果是頁面顯示空間有限時，需要在設(shè)計前確認文案的最大數(shù)量，在前端寫死或者后臺配置時不要超過這個數(shù)值。

（feed流中的內(nèi)容截斷）

輸入

用戶手動輸入文字內(nèi)容時，需要有個前提就是保證用戶能夠方便識別和定位，因為字體大小一般要在20px以上。在輸入問題上需要注意的另外一點就是需要控制顯示高度，尤其是輸入位置在輸入框中時，輸入框本身往往有尺寸限制，當(dāng)文字內(nèi)容過多時，需要控制文字顯示高度，確定使用滑動查看更多內(nèi)容，還是輸入框尺寸同步放大方式來解決。

（輸入過程中，有顯示高度限制）

操作熱區(qū)邊界

這里的熱區(qū)不是大家熟悉的拇指操作熱區(qū)，而是指有交互行為的頁面元素所占據(jù)的操作熱區(qū)，熱區(qū)操作主要與產(chǎn)品易用性相關(guān)。

（拇指操作熱區(qū) 來源：https://www.ui.cn/detail/170346.html）

一般而言，元素顯示區(qū)域即為熱區(qū)可滿足條件，但是更多時候頁面元素實際的操作熱區(qū)并不是元素本身尺寸，而是大于或等于元素尺寸，尤其對于形狀不規(guī)則的元素而言。畢竟用戶的手指操作與頁面之間的完全觸發(fā)需要一定的面積接觸，按鈕本身尺寸較小時，用戶可能無法流暢地進行交互操作。

有疊加或者元素之間距離過近的情況出現(xiàn)，這個時候熱區(qū)操作就會很困難或者極易誤操作。對于這兩種情況，需要設(shè)計上分別處理。

元素/熱區(qū)疊加

典型案例是圖片選擇頁：

（圖片選擇頁）

上圖為微信的圖片選擇頁（Android），圖片區(qū)域本身為點擊熱區(qū)，點擊后可查看大圖；右上角方形選擇按鈕，本身也支持點擊選中，如果只是按照方形按鈕作為熱區(qū)，則新按鈕區(qū)域會變得很小，而且按鈕右上角兩條邊與圖片兩邊之前的熱區(qū)點擊后可查看大圖，用戶極易誤操作。為了用戶用起來順暢且誤操作概率低，實際上方形按鈕的操作熱區(qū)可能會比實際的顯示區(qū)域要大一些。

間距過近

熱區(qū)操作除了疊加問題，還存在相鄰間距過小的問題。兩個元素之間位置考的過近時，需要判斷哪一個操作需要擴大操作熱區(qū)，保證易用性。一般而言，更加貼近屏幕邊界，或者在手勢熱區(qū)以外的區(qū)域，需要對熱區(qū)進行重點關(guān)注。

（微視-添加貼紙操作）

例如微視中的添加貼紙操作，當(dāng)左側(cè)邊界滑塊在起始位置時，與左側(cè)的播放/暫停按鈕會相鄰，此時用戶拖拽滑塊時很容易誤操作而出發(fā)播放功能；此時便需要對播放按鈕的熱區(qū)進行壓縮，縮小至icon尺寸位置時更加合適。

網(wǎng)絡(luò)狀態(tài)與獲取服務(wù)端數(shù)據(jù)

獲取網(wǎng)絡(luò)狀態(tài)與服務(wù)端接口，是大部分APP都會做的事情，當(dāng)這兩者出現(xiàn)問題時，用戶所看到的一般是頁面無法顯示或者點擊無法跳轉(zhuǎn)的情況。出現(xiàn)問題時前端顯示相似，但是問題引起的原因不同，設(shè)計師在處理這種情況時也要分開處理。

網(wǎng)絡(luò)問題

相比與接口問題，網(wǎng)絡(luò)不穩(wěn)定或者無網(wǎng)絡(luò)的問題狀態(tài)更加常見，或者說這些頁面狀態(tài)也是在產(chǎn)品設(shè)計中不可避免的情況。網(wǎng)絡(luò)出問題時所波及到的頁面更廣，有時候甚至是整個產(chǎn)品都無法使用。依據(jù)個人經(jīng)驗，作為交互設(shè)計師，永遠要想著有網(wǎng)絡(luò)不好沒有數(shù)據(jù)的情況，這樣就不會遺漏狀態(tài)。

當(dāng)弱網(wǎng)或者無網(wǎng)狀態(tài)出現(xiàn)時，產(chǎn)品頁面無法正常顯示或者跳轉(zhuǎn)，通用的處理方式是出現(xiàn)toast提示或者空頁面狀態(tài)來告知用戶，這是產(chǎn)品友好性的一種體現(xiàn)，而不是將用戶晾在那里什么都做不了。

（網(wǎng)絡(luò)問題）

服務(wù)器接口問題

服務(wù)端接口出現(xiàn)問題，無法正常返回數(shù)據(jù)時，有一個前提，那就是此時的網(wǎng)絡(luò)是通暢的，本地的操作都可正常支持，只是與當(dāng)前接口有關(guān)的操作不能正常進行。

對于頁面或者交互操作是否需要獲取后端數(shù)據(jù)，設(shè)計師需要提前了解，因為任何需要獲取數(shù)據(jù)的操作，都會對應(yīng)可能無法獲取到的情況，無論是網(wǎng)絡(luò)問題還是接口問題。所以面對這些頁面交互，需要補充對應(yīng)的無法獲取數(shù)據(jù)的反饋，一般包括靜默下載或者下載失敗邏輯、網(wǎng)頁端，長久無操作后重新請求登錄數(shù)據(jù)等情況。

獲取不到數(shù)據(jù)，說明網(wǎng)絡(luò)是通暢的，只是服務(wù)端無法返回對應(yīng)的內(nèi)容，所以本地給出的反饋形式可以更加多樣化，例如網(wǎng)頁端的404頁面，就給了設(shè)計師很多的發(fā)揮空間。

（404頁面 圖片來源：http://huaban.com/pins/1671557260/）

所以設(shè)計師在設(shè)計時，區(qū)分問題原因所在，可以讓自己的設(shè)計方案更加豐富和多樣化，而不再僅僅是給出一個toast提示而已。

時間邊界（動效300ms 500ms toast的顯示時長）

時間邊界主要針對動效樣式，包括頁面切換動效、元素顯示動效（toast）等。動效在100ms之間的樣式，給用戶到來的直觀感受可能會存在很大差別，因此如果設(shè)計師本身對于動效速率、漸變效果有很強的把控性的話，最終效果需要不斷調(diào)整；

邏輯邊界

邏輯邊界，實際上對針對邏輯閉環(huán)而言的。用戶的任何頁面操作，都對應(yīng)一條條邏輯線，每條線都應(yīng)該讓用戶完成一向特定的操作，實現(xiàn)最終的邏輯閉環(huán)。這種邏輯閉環(huán)是正向的，或者可以理解為是完成特定目標(biāo)的邏輯。但是實際上產(chǎn)品操作還存在另外兩種特殊的，或者隱藏邏輯，即返回邏輯和退出邏輯。

返回邏輯

正向的邏輯就是用戶使用產(chǎn)品完成一系列的操作從而達成某個目標(biāo)。但是有時候還需要逆向思維，考慮用戶的返回邏輯是否閉環(huán)。尤其是對于有一系列操作而言，返回顯得尤為重要。比如微信的發(fā)布視頻功能，如果用戶上傳的視頻超過10秒，這個時候就需要對視頻進行剪裁，剪裁結(jié)束后預(yù)覽無問題，可進入發(fā)布頁。

這里的正向流程如下：

（朋友圈發(fā)布長視頻流程）

正向流程容易理解，但是逆向流程是相對復(fù)雜的?？梢钥匆幌掠脩粼诓煌撁纥c擊『取消』或者『返回』時的頁面邏輯：

（朋友圈發(fā)布長視頻完整邏輯）

可以看到，在整個返回流程中，存在發(fā)布頁返回入口頁面的大邏輯，也存在剪裁頁面返回的小邏輯。而且小邏輯是針對具體場景設(shè)置的，有時候更加不可或缺。

由此可見，用戶回到的上一步，究竟回到哪個頁面？上一步的操作是否保留還是清空初始化？這個與頁面中存在的邏輯有關(guān)，也與用戶場景、每一步操作的目標(biāo)相關(guān)，設(shè)計師需要靈活處理。

退出邏輯

這里的退出邏輯具體是指特殊狀態(tài)下的意外崩潰導(dǎo)致的頁面中斷現(xiàn)象。此時用戶的正常操作流程被打斷，APP崩潰導(dǎo)致退出當(dāng)前頁面或者退出應(yīng)用。在意外退出發(fā)生前，用戶已完成的操作結(jié)果是否緩存，緩存多久？下一次如何觸發(fā)？這些都是引申出來的一系列問題。完整的邏輯可以參考短視頻類產(chǎn)品。

（意外退出后再次重回原邏輯）

用戶拍攝視頻過程包含3個核心流程，拍攝、編輯、發(fā)布。在不同的流程中意外退出，頁面都會自動緩存當(dāng)前內(nèi)容在本地，下次啟動時會優(yōu)先出現(xiàn)彈窗詢問，但是重新進入的邏輯略有不同，微視與快手都是在用戶有拍攝行為，進入拍攝頁面時出現(xiàn)彈窗提示，抖音是在用戶下一次啟動客戶端時立即出現(xiàn)提示。從體驗方面似乎都有合理性，更多的影響還是來自于產(chǎn)品策略。

另一個案例是視頻播放器。

視頻播放過程中意外退出或中斷，下一次搜索到當(dāng)前視頻時，露出『續(xù)播』按鈕，強提示用戶可以繼續(xù)在上一次結(jié)束位置繼續(xù)觀看，播放器自動從推出前位置開始播放，提升產(chǎn)品的智能化和人性化體驗。

（播放器從退出位置開始播放）

小結(jié)

設(shè)計師在出方案時，除了正常的操作邏輯要走通意外，還需要注意這些邊界問題，只有在保證產(chǎn)品的可用性和易用性的前提下，才有基礎(chǔ)和動力去追求產(chǎn)品體驗優(yōu)化，達到好用性和樂用性的目標(biāo)。

#專欄作家#

蝦米&胖喵，微信公眾號：pangmiaodesign，人人都是產(chǎn)品經(jīng)理專欄作家。高級交互設(shè)計師（百度/愛奇藝），夫妻搭檔，貓奴。曾做過公益產(chǎn)品、影音媒體產(chǎn)品，目前專注于企業(yè)級產(chǎn)品、娛樂社區(qū)產(chǎn)品體驗設(shè)計?！坝胸?，就有一萬種美好！”

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議