編輯導(dǎo)語：細(xì)節(jié)設(shè)計(jì)作為產(chǎn)品的一個(gè)重要環(huán)節(jié)，也是值得我們?nèi)プ聊ニ伎嫉摹１疚姆治隽?0個(gè)案例細(xì)節(jié)，一起來看看有哪些細(xì)節(jié)是自己沒有注意到的呢。

目錄：

1. 【抖音】沉浸觀影 – 雙指放大，聚焦視頻內(nèi)容觀看更集中
2. 【Gmail郵箱】快捷刪除 – 賦予頭像選擇屬性，效率大幅提升
3. 【今日頭條】開屏緬懷 – 用愛發(fā)光，產(chǎn)品與用戶的情感綁定
4. 【態(tài)棒】表態(tài)彈幕 – 靜態(tài)頁面多內(nèi)容，曝光物品熱度
5. 【夸克】長按添加窗口 – 賦予多交互，降低操作成本
6. 【識區(qū)】上滑內(nèi)容 – 文案與振動反饋，快速引導(dǎo)學(xué)習(xí)
7. 【iPhone截圖】長按移動 – 雙指交互，互相獨(dú)立
8. 【夸克】下滑輸入 – 快速搜索，縮短用戶點(diǎn)擊路徑
9. 【iPhone信息】雙指觸發(fā) – 快速編輯批量信息
10. 【美團(tuán)外賣】天氣配圖 – 降低急躁，與用戶產(chǎn)生情感體諒

一、【抖音】沉浸觀影 – 雙指放大，聚焦視頻內(nèi)容觀看更集中

1. 使用場景

遇到要看的視頻，周圍功能圖標(biāo)遮擋對觀看效果大打折扣。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提高視頻完播率，從觀影體驗(yàn)角度出發(fā)。

設(shè)計(jì)方案：通過雙指擴(kuò)大，你會看到視頻被撐大，除了視頻內(nèi)容，圖標(biāo)以及底部Tab欄都消失了。不僅如此，頂部會有明顯的Toast提示，“松開清屏”。當(dāng)你雙指放開，進(jìn)入專注模式，可以進(jìn)行暫停、倍率、關(guān)閉等選擇。

如今短視頻充斥著人們的生活，5-30秒的內(nèi)容大多都是爽片，看完就過去了。中等視頻1-5分鐘是較為提供優(yōu)質(zhì)內(nèi)容的范疇。

以短視頻抖音來說，上下滑動的交互形式，注定首頁要常駐一堆功能入口（頂部導(dǎo)航、底部標(biāo)簽欄、作者頭像，互動圖標(biāo)，標(biāo)題內(nèi)容等）。這些多少都會干擾用戶進(jìn)行專注觀影，尤其是1分鐘以上的視頻，字幕被遮擋等觀音體驗(yàn)不佳這都會影響平臺留存以及創(chuàng)作者的完播率。

通過清屏功能，解決視頻被遮擋的問題，讓用戶專注觀音。同時(shí)雙指放大交互操作較難激活，也能避免用戶誤操作發(fā)生。即使有此概率，放大操作有一個(gè)路徑激活，當(dāng)滑動到一半以上會觸發(fā)震動反饋，提示用戶此時(shí)松開可清屏觀音。

總結(jié)：雙指放大（交互難、防止誤操作）滑動觸發(fā)（一定距離震動、及時(shí)反饋）。

二、【Gmail郵箱】快捷刪除 – 賦予頭像選擇屬性，效率大幅提升

1. 使用場景

Gmail郵箱采用獨(dú)特交互操作，并未進(jìn)行本土化設(shè)計(jì)，使用還是不太友好，例如批量編輯。雖然操作位置不一樣，但使用很方便。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升批量操作效率，節(jié)省操作時(shí)間。

設(shè)計(jì)方案：Gmail郵箱針對郵件刪除左右滑動都沒刪除功能，原來隱藏在頭像處。

用戶通過點(diǎn)擊頭像，激活選擇編輯功能，進(jìn)行郵件批量操作。

國內(nèi)選擇文件，一般采用左滑刪除（左滑-點(diǎn)擊刪除-二次確認(rèn)）、點(diǎn)編輯批量刪除（編輯-選擇-刪除），最少都需要三步才能刪除。Gmail郵箱，（點(diǎn)擊頭像-刪除）兩步完成。別看減少了一步，操作體驗(yàn)大大提升。

頭像本身就是附加的內(nèi)容視圖，按國內(nèi)通欄都是點(diǎn)擊進(jìn)入詳情，會不會浪費(fèi)了更能多交互可能。按照這個(gè)思路，探索自家產(chǎn)品可優(yōu)化的交互鏈路。

三、【今日頭條】開屏緬懷 – 用愛發(fā)光，產(chǎn)品與用戶的情感綁定

1. 使用場景

航空事件打擊太大，如何給予用戶緬懷窗口。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升產(chǎn)品情感，讓用戶感受到產(chǎn)品的感性一面。

設(shè)計(jì)方案：在開屏頁提供入口，確保在線用戶打開應(yīng)用時(shí)都能看到?！包c(diǎn)亮緬懷”與用戶共鳴，上劃進(jìn)行互動評論。

開屏一般都是各大平臺廣告營收的重要組成部分，如此重要位置，在當(dāng)天放置緬懷頁面。如此體現(xiàn)今日頭條的人文情懷，流量與情感是相通的，只有了解用戶、了解痛點(diǎn)，才能做出好的產(chǎn)品。

四、【態(tài)棒】表態(tài)彈幕 – 靜態(tài)頁面多內(nèi)容，曝光物品熱度

1. 使用場景

電商頁都快到達(dá)設(shè)計(jì)的盡頭了，還能怎樣提高商品熱度。

2.設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升產(chǎn)品互動感受，促使用戶購買率上升。

設(shè)計(jì)方案：常規(guī)電商頁都是靜態(tài)展示內(nèi)容，態(tài)棒推出特有的“印象彈幕”，在靜態(tài)圖片之上加入動態(tài)彈幕，即使用戶無操作，也會展示更多內(nèi)容，提高更能多內(nèi)容的呈現(xiàn)。

把類似視頻彈幕功能植入到電商頁中，多少會提高商品的互動和曝光，但也需考慮商品圖的簡約性，如果都是促銷文案精美排版的照片注定會存在彈幕干擾，影響用戶瀏覽商品。

所以態(tài)棒目前的清爽商品圖適合“表態(tài)”當(dāng)前彈幕展示，目前還是很看好這款產(chǎn)品的設(shè)計(jì)，加油。

五、【夸克】長按添加窗口 – 賦予多交互，降低操作成本

1. 使用場景

新增窗口常規(guī)需要點(diǎn)擊窗口-添加新窗口。還可以怎樣提高效率！

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：縮短交互路徑，提升更多操作可能。

設(shè)計(jì)方案：長按底部第二個(gè)Tab，你會看到上方由1-2-3頁面的交互動畫。通過底部窗口數(shù)字可以知道增加了一個(gè)新窗口。

原本需要兩步點(diǎn)擊操作才能完成的功能，用長按交互來二次賦予相同功能，給予手勢操作更多可能，一向極簡的夸克，同樣用極簡的交互為用戶提供服務(wù)，值得大家學(xué)習(xí)。

六、【識區(qū)】上滑內(nèi)容 – 文案與振動反饋，快速引導(dǎo)學(xué)習(xí)

1. 使用場景

字節(jié)新產(chǎn)品，識區(qū)文章的上下切換如何更符合用戶理解。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升上下切換的理解成本，防止誤操作發(fā)生。

設(shè)計(jì)方案：在識區(qū)內(nèi)閱讀完一篇文章，通過上劃進(jìn)行切換下一篇文章。為防止誤操作，剛上滑時(shí)會顯示“上滑查看下條內(nèi)容”。當(dāng)滑到一定節(jié)點(diǎn)會給予震動反饋，文案顯示“松手查看”表示激活下一篇文章。

與上面（1）抖音手勢類似，同樣在移動路徑中激活功能，目的都是降低誤操作發(fā)生。此方法同樣適用于長按滑動的交互頁面中。

七、【iPhone截圖】長按移動 – 雙指交互，互相獨(dú)立

1. 使用場景

截屏目的為了在第三方平臺發(fā)布，或者郵件反饋bug等情況，如何提高添加效率。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：縮短交互路徑，優(yōu)化iPhone特有功能。

設(shè)計(jì)方案：當(dāng)截屏后，左下角會顯示縮略圖，如果你只是左滑移出那就太浪費(fèi)了。

最近我發(fā)現(xiàn)這個(gè)交互功能，通過長按縮略圖激活移動功能，然后通過另一只手切換到第三方編輯平臺，當(dāng)縮略圖右上角顯示＋，表示此位置可以放置截圖，松開手指，自動貼入編輯頁中。

目前我常用的備忘錄以及郵箱都可以使用，其他還沒嘗試，感興趣的小伙伴可以體驗(yàn)一下。

它就像是兩個(gè)大腦，互相獨(dú)立。軟件可以一心二用，但人腦不可以。這也是軟件吸引用戶使用的一點(diǎn)。

八、【夸克】下滑輸入 – 快速搜索，縮短用戶點(diǎn)擊路徑

1. 使用場景

點(diǎn)擊夸克搜索框時(shí)，多少會因?yàn)橛|發(fā)區(qū)域過高較難點(diǎn)擊。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升搜索框易觸達(dá)性，優(yōu)化用戶使用體驗(yàn)。

設(shè)計(jì)方案：常規(guī)點(diǎn)擊來選擇搜索框，偶然發(fā)現(xiàn)通過屏幕下滑同樣也能激活搜索框。

首頁下滑，能看到交互軌跡，此交互貼合產(chǎn)品的極簡風(fēng)格，同樣通過手勢交互，給予多種觸達(dá)入口。便于用戶特殊場景下的使用體驗(yàn)，是設(shè)計(jì)提升體驗(yàn)的優(yōu)化點(diǎn)。

九、【iPhone信息】雙指觸發(fā) – 快速編輯批量信息

1. 使用場景

iphone向來就是以體驗(yàn)驅(qū)動的公司。如何快速編輯信息，看看iphone怎么做的。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：通過手勢交互提升短信編輯的易用性操作。

設(shè)計(jì)方案：左右雙指并列向下滑動，瞬間激活選擇按鈕，所到之處均已選擇。激活編輯面板可以單指在左邊選擇按鈕處滑動批量選擇。

無意間發(fā)現(xiàn)的交互方式，優(yōu)化并縮短了交互路徑，同時(shí)雙指滑動觸發(fā)難度較大，能防止一般誤操作的發(fā)生，雖然功能較為隱藏，但并不影響正常用戶；常規(guī)操作使用。

又一個(gè)手勢交互提升用戶體驗(yàn)的設(shè)計(jì)亮點(diǎn)。

十、【美團(tuán)外賣】天氣配圖 – 降低急躁，與用戶產(chǎn)生情感體諒

1. 使用場景

惡劣天氣外賣配送延遲，遇到差評的情況。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決惡劣天氣外賣小哥萬一延誤收到差評的問題。通過天氣感知降低差評率發(fā)生。

設(shè)計(jì)方案：當(dāng)點(diǎn)外賣時(shí)，美圖外賣右下角會出來當(dāng)前天氣情況，提前告知用戶因天氣帶來的不可控因素。當(dāng)點(diǎn)擊進(jìn)入，能看到玻璃外模糊的外賣騎手，以及霧蒙蒙的水蒸氣。

家里暖，外面冷，強(qiáng)差異，易體諒。

雖然產(chǎn)品都需要精美的設(shè)計(jì)，但有時(shí)會物極必反。一些場景下，精美的插畫設(shè)計(jì)未必有照片更能激發(fā)用戶共鳴感。

所以，好的設(shè)計(jì)并不只是設(shè)計(jì)本身，而是能與用戶產(chǎn)生情感共鳴的設(shè)計(jì)，無論表現(xiàn)手法是什么，能產(chǎn)生共鳴就是好的設(shè)計(jì)。

十一、結(jié)語

設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。

認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

本期產(chǎn)品細(xì)節(jié)分析結(jié)束，我們下期再見！

#專欄作家#

碳水Sir；微信公眾號：草蓉三石，人人都是產(chǎn)品經(jīng)理專欄作家。One More產(chǎn)品設(shè)計(jì)負(fù)責(zé)人，擅長設(shè)計(jì)細(xì)節(jié)洞察分析。

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

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