目錄
【抖音】沉浸觀影– 雙指放大,聚焦視頻內容觀看更集中
【Gmail郵箱】快捷刪除– 賦予頭像選擇屬性,效率大幅提升
【今日頭條】開屏緬懷– 用愛發光,產品與用戶的情感綁定
【態棒】表態彈幕– 靜態頁面多內容,曝光物品熱度
【夸克】長按添加窗口– 賦予多交互,降低操作成本
【識區】上滑內容– 文案與振動反饋,快速引導學習
【iPhone截圖】長按移動– 雙指交互,互相獨立
【夸克】下滑輸入– 快速搜索,縮短用戶點擊路徑
【iPhone信息】雙指觸發– 快速編輯批量信息
【美團外賣】天氣配圖– 降低急躁,與用戶產生情感體諒
#01
抖音-沉浸觀影
雙指放大,聚焦視頻內容觀看更集中1.使用場景
遇到要看的視頻,周圍功能圖標遮擋對觀看效果大打折扣。
2.設計思考
設計目標:提高視頻完播率,從觀影體驗角度出發。
設計方案:通過雙指擴大,你會看到視頻被撐大,除了視頻內容,圖標以及底部Tab欄都消失了。不僅如此,頂部會有明顯的Toast提示,「鬆開清屏」。當你雙指放開,進入專注模式,可以進行暫停、倍率、關閉等選擇。
如今短視頻充斥着人們的生活,5-30秒的內容大多都是爽片,看完就過去了。中等視頻1-5分鐘是較為提供優質內容的範疇。
以短視頻抖音來說,上下滑動的交互形式,註定首頁要常駐一堆功能入口(頂部導航、底部標籤欄、作者頭像,互動圖標,標題內容等)。這些多少都會干擾用戶進行專注觀影,尤其是1分鐘以上的視頻,字幕被遮擋等觀音體驗不佳這都會影響平台留存以及創作者的完播率。
通過清屏功能,解決視頻被遮擋的問題,讓用戶專注觀影。同時雙指放大交互操作較難激活,也能避免用戶誤操作發生。即使有此概率,放大操作有一個路徑激活,當滑動到一半以上會觸發震動反饋,提示用戶此時鬆開可清屏觀音。
總結:雙指放大(交互難、防止誤操作)滑動觸發(一定距離震動、及時反饋)。
#02
Gmail郵箱 - 快捷刪除、賦予頭像選擇屬性,效率大幅提升
1.使用場景
Gmail郵箱採用獨特交互操作,並未進行本土化設計,使用還是不太友好,例如批量編輯。雖然操作位置不一樣,但使用很方便。
2.設計思考
設計目標:提升批量操作效率,節省操作時間。
設計方案:Gmail郵箱針對郵件刪除左右滑動都沒刪除功能,原來隱藏在頭像處。
用戶通過點擊頭像,激活選擇編輯功能,進行郵件批量操作。
國內選擇文件,一般採用左滑刪除(左滑-點擊刪除-二次確認)、點編輯批量刪除(編輯-選擇-刪除),最少都需要三步才能刪除。Gmail郵箱,(點擊頭像-刪除)兩步完成。別看減少了一步,操作體驗大大提升。
頭像本身就是附加的內容視圖,按國內通欄都是點擊進入詳情,會不會浪費了更能多交互可能。按照這個思路,探索自家產品可優化的交互鏈路。
#03
36kr公眾號-置灰頭圖
東航失事,我們都在沉痛哀悼1.使用場景
航空事件打擊太大,如何給予用戶緬懷窗口。
2.設計思考
設計目標:提升產品情感,讓用戶感受到產品的感性一面。
設計方案:在開屏頁提供入口,確保在線用戶打開應用時都能看到。「點亮緬懷」與用戶共鳴,上划進行互動評論。
開屏一般都是各大平台廣告營收的重要組成部分,如此重要位置,在當天放置緬懷頁面。如此體現今日頭條的人文情懷,流量與情感是相通的,只有了解用戶、了解痛點,才能做出好的產品。
#04
1.使用場景
電商頁都快到達設計的盡頭了,還能怎樣提高商品熱度。
2.設計思考
設計目標:提升產品互動感受,促使用戶購買率上升。
設計方案:常規電商頁都是靜態展示內容,態棒推出特有的「印象彈幕」,在靜態圖片之上加入動態彈幕,即使用戶無操作,也會展示更多內容,提高更能多內容的呈現。
把類似視頻彈幕功能植入到電商頁中,多少會提高商品的互動和曝光,但也需考慮商品圖的簡約性,如果都是促銷文案精美排版的照片註定會存在彈幕干擾,影響用戶瀏覽商品。
所以態棒目前的清爽商品圖適合「表態」當前彈幕展示,目前還是很看好這款產品的設計,加油。
#05
1.使用場景
新增窗口常規需要點擊窗口-添加新窗口。還可以怎樣提高效率!
2.設計思考
設計目標:縮短交互路徑,提升更多操作可能。
設計方案:長按底部第二個Tab,你會看到上方由1-2-3頁面的交互動畫。通過底部窗口數字可以知道增加了一個新窗口。
原本需要兩步點擊操作才能完成的功能,用長按交互來二次賦予相同功能,給予手勢操作更多可能,一向極簡的夸克,同樣用極簡的交互為用戶提供服務,值得大家學習。
#06
1.使用場景
字節新產品,識區文章的上下切換如何更符合用戶理解。
2.設計思考
設計目標:提升上下切換的理解成本,防止誤操作發生。
設計方案:在識區內閱讀完一篇文章,通過上划進行切換下一篇文章。為防止誤操作,剛上滑時會顯示「上滑查看下條內容」。當滑到一定節點會給予震動反饋,文案顯示「鬆手查看」表示激活下一篇文章。
與上面(1)抖音手勢類似,同樣在移動路徑中激活功能,目的都是降低誤操作發生。此方法同樣適用於長按滑動的交互頁面中。
#07
iPhone截圖 - 長按移動,雙指交互,互相獨立
1.使用場景
截屏目的為了在第三方平台發布,或者郵件反饋bug等情況,如何提高添加效率。
2.設計思考
設計目標:縮短交互路徑,優化iPhone特有功能。
設計方案:當截屏後,左下角會顯示縮略圖,如果你只是左滑移出那就太浪費了。
最近我發現這個交互功能,通過長按縮略圖激活移動功能,然後通過另一隻手切換到第三方編輯平台,當縮略圖右上角顯示+,表示此位置可以放置截圖,鬆開手指,自動貼入編輯頁中。
目前我常用的備忘錄以及郵箱都可以使用,其他還沒嘗試,感興趣的小夥伴可以體驗一下。
它就像是兩個大腦,互相獨立。軟件可以一心二用,但人腦不可以。這也是軟件吸引用戶使用的一點。
#08
1.使用場景
點擊夸克搜索框時,多少會因為觸發區域過高較難點擊。
2.設計思考
設計目標:提升搜索框易觸達性,優化用戶使用體驗。
設計方案:常規點擊來選擇搜索框,偶然發現通過屏幕下滑同樣也能激活搜索框。
首頁下滑,能看到交互軌跡,此交互貼合產品的極簡風格,同樣通過手勢交互,給予多種觸達入口。便於用戶特殊場景下的使用體驗,是設計提升體驗的優化點。
#09
1.使用場景
iphone向來就是以體驗驅動的公司。如何快速編輯信息,看看iphone怎麼做的。
2.設計思考
設計目標:通過手勢交互提升短信編輯的易用性操作。
設計方案:左右雙指並列向下滑動,瞬間激活選擇按鈕,所到之處均已選擇。激活編輯面板可以單指在左邊選擇按鈕處滑動批量選擇。
無意間發現的交互方式,優化並縮短了交互路徑,同時雙指滑動觸發難度較大,能防止一般誤操作的發生,雖然功能較為隱藏,但並不影響正常用戶;常規操作使用。
又一個手勢交互提升用戶體驗的設計亮點。
#10
1.使用場景
惡劣天氣外賣配送延遲,遇到差評的情況。
2.設計思考
設計目標:解決惡劣天氣外賣小哥萬一延誤收到差評的問題。通過天氣感知降低差評率發生。
設計方案:當點外賣時,美圖外賣右下角會出來當前天氣情況,提前告知用戶因天氣帶來的不可控因素。當點擊進入,能看到玻璃外模糊的外賣騎手,以及霧蒙蒙的水蒸氣。
家裡暖,外面冷,強差異,易體諒。
雖然產品都需要精美的設計,但有時會物極必反。一些場景下,精美的插畫設計未必有照片更能激發用戶共鳴感。
所以,好的設計並不只是設計本身,而是能與用戶產生情感共鳴的設計,無論表現手法是什麼,能產生共鳴就是好的設計。
#11
結語
設計師要有發現美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設計師所追求的。認真記錄產品細節,了解背後的思考,也是不斷提升自己邏輯思維和表達能力的一種方式。
本期產品細節分析結束,我們下期再見!
- 相關推薦-
- 往期精選好文-
超全面!圖標動效設計思路梳理
教你K最少的幀,做最靚的仔
5分鐘快速製作彈跳加載動畫(新增視頻教程)
動畫小技巧 | 簡單幾步做個情感化圖標動效
全網最全 !一次搞懂MG動畫中無限循環的煙霧動畫
一次玩轉小球拖尾動畫
這個神腳本1個頂過去5個,腿不酸,腰不疼,一口氣K五個動畫!
如果對你有幫助, 請轉發、點讚、在看、收藏一鍵四連