起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計的邊界
本文主要分析了設計中的邊界問題，設計師可以設計初期便定義好這些邊界情況的處理方式，避免后期不斷進行瑣碎的調整。
互聯網產品設計，需要頁面之間具有良好的邏輯關系，但是由于網絡、帶寬服務器穩定性等問題，會帶來意想不到的頁面崩潰。
內容類產品中，文字內容需要實時更新，有時候會出現文字溢出問題；移動設備尺寸多種多樣，在頁面適配過程中，頁面元素能夠適配，但是對于操作熱區，則需要前置考慮，避免用戶高頻出現誤操作行為……
以上這些情況相信各位PM和設計師在工作中經常會遇到，遇到之后大部分之后會當做一個BUG來處理，查漏補缺。但是實際上，這些情況都可以歸類為設計中的邊界問題或者特殊狀態。這些問題是隨著頁面邏輯相伴而生的，極易被忽略。
文章接下來就要分析一下設計中的邊界問題，設計師可以設計初期便定義好這些邊界情況的處理方式，避免后期不斷進行瑣碎的調整。
內容邊界
內容邊界可分為文字、圖片和視頻內容。其中，圖片和視頻內容往往都是呈現的核心信息，所以極少需要進行邊界化處理，更多時候需要考慮的是文字內容。
由于移動設備的橫向尺寸及小屏設備存在的限制，在橫向的字數上，按照尺寸28px來計算，加上兩側預留的邊界寬度，750尺寸的小屏手機上最多可完整顯示字數在20~22個字之間。因此，當頁面呈現過多文字內容，或者支持用戶輸入較多內容時，需要考慮文字顯示不全的問題。文字的邊界樣式，可按照瀏覽和輸入來區分。
瀏覽
用來瀏覽和讀取的文字內容，字體尺寸會依照內容權重顯示多重樣式，針對不同位置的文字，可采用折行或者截斷顯示來定義。如果截斷處理，那么后續需要有折疊/展開操作讓用戶能夠看到完整內容。如果是頁面顯示空間有限時，需要在設計前確認文案的最大數量，在前端寫死或者后臺配置時不要超過這個數值。
（feed流中的內容截斷）
輸入
用戶手動輸入文字內容時，需要有個前提就是保證用戶能夠方便識別和定位，因為字體大小一般要在20px以上。在輸入問題上需要注意的另外一點就是需要控制顯示高度，尤其是輸入位置在輸入框中時，輸入框本身往往有尺寸限制，當文字內容過多時，需要控制文字顯示高度，確定使用滑動查看更多內容，還是輸入框尺寸同步放大方式來解決。
（輸入過程中，有顯示高度限制）
操作熱區邊界
這里的熱區不是大家熟悉的拇指操作熱區，而是指有交互行為的頁面元素所占據的操作熱區，熱區操作主要與產品易用性相關。
（拇指操作熱區 來源：https://www.ui.cn/detail/170346.html）
一般而言，元素顯示區域即為熱區可滿足條件，但是更多時候頁面元素實際的操作熱區并不是元素本身尺寸，而是大于或等于元素尺寸，尤其對于形狀不規則的元素而言。畢竟用戶的手指操作與頁面之間的完全觸發需要一定的面積接觸，按鈕本身尺寸較小時，用戶可能無法流暢地進行交互操作。
有疊加或者元素之間距離過近的情況出現，這個時候熱區操作就會很困難或者極易誤操作。對于這兩種情況，需要設計上分別處理。
元素/熱區疊加
典型案例是圖片選擇頁：
（圖片選擇頁）
上圖為微信的圖片選擇頁（Android），圖片區域本身為點擊熱區，點擊后可查看大圖；右上角方形選擇按鈕，本身也支持點擊選中，如果只是按照方形按鈕作為熱區，則新按鈕區域會變得很小，而且按鈕右上角兩條邊與圖片兩邊之前的熱區點擊后可查看大圖，用戶極易誤操作。為了用戶用起來順暢且誤操作概率低，實際上方形按鈕的操作熱區可能會比實際的顯示區域要大一些。
間距過近
熱區操作除了疊加問題，還存在相鄰間距過小的問題。兩個元素之間位置考的過近時，需要判斷哪一個操作需要擴大操作熱區，保證易用性。一般而言，更加貼近屏幕邊界，或者在手勢熱區以外的區域，需要對熱區進行重點關注。
（微視-添加貼紙操作）
例如微視中的添加貼紙操作，當左側邊界滑塊在起始位置時，與左側的播放/暫停按鈕會相鄰，此時用戶拖拽滑塊時很容易誤操作而出發播放功能；此時便需要對播放按鈕的熱區進行壓縮，縮小至icon尺寸位置時更加合適。
網絡狀態與獲取服務端數據
獲取網絡狀態與服務端接口，是大部分APP都會做的事情，當這兩者出現問題時，用戶所看到的一般是頁面無法顯示或者點擊無法跳轉的情況。出現問題時前端顯示相似，但是問題引起的原因不同，設計師在處理這種情況時也要分開處理。
網絡問題
相比與接口問題，網絡不穩定或者無網絡的問題狀態更加常見，或者說這些頁面狀態也是在產品設計中不可避免的情況。網絡出問題時所波及到的頁面更廣，有時候甚至是整個產品都無法使用。依據個人經驗，作為交互設計師，永遠要想著有網絡不好沒有數據的情況，這樣就不會遺漏狀態。
當弱網或者無網狀態出現時，產品頁面無法正常顯示或者跳轉，通用的處理方式是出現toast提示或者空頁面狀態來告知用戶，這是產品友好性的一種體現，而不是將用戶晾在那里什么都做不了。
（網絡問題）
服務器接口問題
服務端接口出現問題，無法正常返回數據時，有一個前提，那就是此時的網絡是通暢的，本地的操作都可正常支持，只是與當前接口有關的操作不能正常進行。
對于頁面或者交互操作是否需要獲取后端數據，設計師需要提前了解，因為任何需要獲取數據的操作，都會對應可能無法獲取到的情況，無論是網絡問題還是接口問題。所以面對這些頁面交互，需要補充對應的無法獲取數據的反饋，一般包括靜默下載或者下載失敗邏輯、網頁端，長久無操作后重新請求登錄數據等情況。
獲取不到數據，說明網絡是通暢的，只是服務端無法返回對應的內容，所以本地給出的反饋形式可以更加多樣化，例如網頁端的404頁面，就給了設計師很多的發揮空間。
（404頁面 圖片來源：http://huaban.com/pins/1671557260/）
所以設計師在設計時，區分問題原因所在，可以讓自己的設計方案更加豐富和多樣化，而不再僅僅是給出一個toast提示而已。
時間邊界（動效300ms 500ms toast的顯示時長）
時間邊界主要針對動效樣式，包括頁面切換動效、元素顯示動效（toast）等。動效在100ms之間的樣式，給用戶到來的直觀感受可能會存在很大差別，因此如果設計師本身對于動效速率、漸變效果有很強的把控性的話，最終效果需要不斷調整；
邏輯邊界
邏輯邊界，實際上對針對邏輯閉環而言的。用戶的任何頁面操作，都對應一條條邏輯線，每條線都應該讓用戶完成一向特定的操作，實現最終的邏輯閉環。這種邏輯閉環是正向的，或者可以理解為是完成特定目標的邏輯。但是實際上產品操作還存在另外兩種特殊的，或者隱藏邏輯，即返回邏輯和退出邏輯。
返回邏輯
正向的邏輯就是用戶使用產品完成一系列的操作從而達成某個目標。但是有時候還需要逆向思維，考慮用戶的返回邏輯是否閉環。尤其是對于有一系列操作而言，返回顯得尤為重要。比如微信的發布視頻功能，如果用戶上傳的視頻超過10秒，這個時候就需要對視頻進行剪裁，剪裁結束后預覽無問題，可進入發布頁。
這里的正向流程如下：
（朋友圈發布長視頻流程）
正向流程容易理解，但是逆向流程是相對復雜的?？梢钥匆幌掠脩粼诓煌撁纥c擊『取消』或者『返回』時的頁面邏輯：
（朋友圈發布長視頻完整邏輯）
可以看到，在整個返回流程中，存在發布頁返回入口頁面的大邏輯，也存在剪裁頁面返回的小邏輯。而且小邏輯是針對具體場景設置的，有時候更加不可或缺。
由此可見，用戶回到的上一步，究竟回到哪個頁面？上一步的操作是否保留還是清空初始化？這個與頁面中存在的邏輯有關，也與用戶場景、每一步操作的目標相關，設計師需要靈活處理。
退出邏輯
這里的退出邏輯具體是指特殊狀態下的意外崩潰導致的頁面中斷現象。此時用戶的正常操作流程被打斷，APP崩潰導致退出當前頁面或者退出應用。在意外退出發生前，用戶已完成的操作結果是否緩存，緩存多久？下一次如何觸發？這些都是引申出來的一系列問題。完整的邏輯可以參考短視頻類產品。
（意外退出后再次重回原邏輯）
用戶拍攝視頻過程包含3個核心流程，拍攝、編輯、發布。在不同的流程中意外退出，頁面都會自動緩存當前內容在本地，下次啟動時會優先出現彈窗詢問，但是重新進入的邏輯略有不同，微視與快手都是在用戶有拍攝行為，進入拍攝頁面時出現彈窗提示，抖音是在用戶下一次啟動客戶端時立即出現提示。從體驗方面似乎都有合理性，更多的影響還是來自于產品策略。
另一個案例是視頻播放器。
視頻播放過程中意外退出或中斷，下一次搜索到當前視頻時，露出『續播』按鈕，強提示用戶可以繼續在上一次結束位置繼續觀看，播放器自動從推出前位置開始播放，提升產品的智能化和人性化體驗。
（播放器從退出位置開始播放）
小結
設計師在出方案時，除了正常的操作邏輯要走通意外，還需要注意這些邊界問題，只有在保證產品的可用性和易用性的前提下，才有基礎和動力去追求產品體驗優化，達到好用性和樂用性的目標。
#專欄作家#
蝦米&胖喵，微信公眾號：pangmiaodesign，人人都是產品經理專欄作家。高級交互設計師（百度/愛奇藝），夫妻搭檔，貓奴。曾做過公益產品、影音媒體產品，目前專注于企業級產品、娛樂社區產品體驗設計?！坝胸垼陀幸蝗f種美好！”
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
真的是很多異常情況都提到了啊，有木有PC版的邊界啊
目前僅輸出了移動端的問題，pc端可以作為下一個研究目標 哈哈
總結的到位，異常情況是容易被大多數產品經理忽略的問題，但恰恰是這些問題，會導致用戶對產品好感度急劇下降
是的 沒有提前預估 驗收的時候就傻眼了