導(dǎo)讀：優(yōu)秀UX細(xì)節(jié)創(chuàng)新設(shè)計(jì)讓用戶感到方便、貼心、可靠、安全、愉悅。UX細(xì)節(jié)創(chuàng)新設(shè)計(jì)并非都來(lái)自一剎那的靈光乍現(xiàn)， 創(chuàng)新能力也不是少數(shù)人只可意會(huì)不可言傳的一種天賦，優(yōu)秀的UX細(xì)節(jié)創(chuàng)新設(shè)計(jì)其實(shí)有章可循，創(chuàng)新能力是可以通過(guò)后天培養(yǎng)提升的。本文作者對(duì)UX細(xì)節(jié)設(shè)計(jì)中的界面干擾進(jìn)行了分析，希望對(duì)你有幫助。

在特定的操作使用環(huán)境下，一項(xiàng)功能會(huì)被同一個(gè)界面中其他的UI元素所干擾，在設(shè)計(jì)細(xì)節(jié)時(shí)，避免這些因素的干擾，即可優(yōu)化使用體驗(yàn)。此類細(xì)節(jié)創(chuàng)新的關(guān)鍵心法有兩條：

其一，交互設(shè)計(jì)要有區(qū)塊，區(qū)塊結(jié)構(gòu)清晰，各元素互不干擾，這種互不干擾也可能是動(dòng)態(tài)的，即用戶不進(jìn)行什么操作時(shí)，各個(gè)元素不相干擾，但是執(zhí)行某項(xiàng)操作時(shí)，其他功能可能對(duì)其形成干擾，此時(shí)需要做的細(xì)節(jié)創(chuàng)新就是消除此類干擾或者將干擾的影響降到最低；

其二，各功能模塊之間是有主次之分，對(duì)于重要的功能突出顯示（例如更大的操作面積、更方便的操作路徑、更突出的顏色字號(hào)等），但這種主次也應(yīng)該是動(dòng)態(tài)的，隨著場(chǎng)景變化，各功能優(yōu)先級(jí)也會(huì)發(fā)生變化，此時(shí)就要做到需要功能突出的時(shí)候突出顯示、不需要突出的時(shí)候淡化顯示。

一、設(shè)計(jì)案例

1）MIUI

當(dāng)我們使用手機(jī)時(shí)，從一個(gè)較亮的環(huán)境轉(zhuǎn)到一個(gè)較暗的環(huán)境，屏幕會(huì)一下子顯得太亮、太刺眼，需要調(diào)節(jié)屏幕亮度，一般情況下的習(xí)慣操作是退出當(dāng)前App，找到系統(tǒng)設(shè)置，調(diào)節(jié)屏幕亮度，然后再打開(kāi)剛剛在使用的App， 可這時(shí)很可能發(fā)現(xiàn)亮度調(diào)節(jié)并沒(méi)有達(dá)到自己預(yù)期的效果，又不得不再重復(fù)一遍以上操作。

MIUI的亮度調(diào)節(jié)功能考慮到了這一場(chǎng)景，MIUI系統(tǒng)中，可以直接下拉出系統(tǒng)工具欄，工具欄下方有一個(gè)亮度調(diào)節(jié)條，可直接調(diào)節(jié)屏幕亮度，用戶滑動(dòng)調(diào)節(jié)亮度時(shí)，會(huì)隱藏整個(gè)工具框亮度調(diào)節(jié)條以外其他所有功能按鍵，直接以當(dāng)前界面為背景調(diào)節(jié)亮度，亮度調(diào)節(jié)效果所見(jiàn)即所得！

MIUI調(diào)節(jié)亮度時(shí)會(huì)直接以當(dāng)前操作界面為背景進(jìn)行調(diào)節(jié)

2）優(yōu)酷

在用網(wǎng)頁(yè)觀看視頻時(shí)，偶爾也會(huì)想看看視頻的相關(guān)評(píng)論，將網(wǎng)頁(yè)往下拉查看評(píng)論，此時(shí)，要么暫停視頻以免錯(cuò)過(guò)精彩內(nèi)容，要么不暫停視頻只聽(tīng)聲音，保持視頻的正常播放。能不能有既可以多評(píng)論，又不影響看視頻的設(shè)計(jì)方案？嗯，當(dāng)然有，使用彈幕！但畢竟還有一部分用戶并不習(xí)慣使用彈幕。

在YouTube、優(yōu)酷網(wǎng)頁(yè)上，用戶將播放器滾動(dòng)出瀏覽器可視范圍之外后，頁(yè)面上會(huì)保留一個(gè)小的播放窗口，一直懸浮在右下角，這樣既方便查看評(píng)論， 又不影響觀看進(jìn)度。

優(yōu)酷上播放視頻時(shí)，滾動(dòng)到頁(yè)面下方查看評(píng)論等其他信息時(shí)，會(huì)有一個(gè)懸浮播放窗口繼續(xù)播放視頻內(nèi)容

3）iPhone

恰當(dāng)?shù)墓δ懿季忠嗄軌驗(yàn)橛脩魩?lái)更好的操作體驗(yàn)。例如，使用iPhone 的3D Touch功能時(shí)，用手指重按App圖標(biāo)后，彈出的功能菜單會(huì)根據(jù)圖標(biāo)在屏幕上的位置自動(dòng)調(diào)整為向上或向下展開(kāi)，此時(shí)菜單中功能項(xiàng)的順序則會(huì)根據(jù)菜單展開(kāi)的方向自動(dòng)做相應(yīng)調(diào)整，以確保最靠近手指的一項(xiàng)始終為菜單中的第一個(gè)功能（通常是設(shè)計(jì)者認(rèn)為用戶最常用到的功能）。

iPhone 3D Touch的功菜單，會(huì)根據(jù)出現(xiàn)在圖標(biāo)上下方的定位自動(dòng)調(diào)整功能項(xiàng)的順序

4）iOS

iOS 7及以后版本有一個(gè)潤(rùn)物細(xì)無(wú)聲的細(xì)節(jié)設(shè)計(jì)：在非鎖屏狀態(tài)下， iPhone 頂部狀態(tài)信息欄（信號(hào)、運(yùn)營(yíng)商、信號(hào)類型、時(shí)間、屏幕旋轉(zhuǎn)、藍(lán)牙、鬧鐘、定位、電量等）是要比鎖屏狀態(tài)下小的在非鎖屏狀態(tài)下，時(shí)間信息顯示在頂部狀態(tài)信息欄正中間，而在鎖屏狀態(tài)下，時(shí)間信息在屏幕最顯眼位置放大顯示，還追加了日期（包括公歷和農(nóng)歷）、星期信息。

這樣用戶在鎖屏狀態(tài)下就可方便地查看時(shí)間、日期、信號(hào)、信號(hào)類型、定位、電量等信息，其中時(shí)間信息最為一目了然。

仔細(xì)觀察，iPhone在鎖屏和非鎖屏狀態(tài)下，頂部狀態(tài)信息欄的大小是不一樣的。

作者：文哲，微信公眾號(hào)：偉大的小細(xì)節(jié)，《偉大的小細(xì)節(jié)》作者。

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

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議