国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

內(nèi)容邊界

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

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

瀏覽

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

（feed流中的內(nèi)容截?cái)啵?/p>

輸入

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

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

操作熱區(qū)邊界

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

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

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

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

元素/熱區(qū)疊加

典型案例是圖片選擇頁：

（圖片選擇頁）

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

間距過近

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

（微視-添加貼紙操作）

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

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

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

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

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

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

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

服務(wù)器接口問題

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

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

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

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

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

時(shí)間邊界（動(dòng)效300ms 500ms toast的顯示時(shí)長(zhǎng)）

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

邏輯邊界

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

返回邏輯

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

這里的正向流程如下：

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

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

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

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

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

退出邏輯

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

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

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

另一個(gè)案例是視頻播放器。

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

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

小結(jié)

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

#專欄作家#

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

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

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