交互設(shè)計(jì)|產(chǎn)品細(xì)節(jié)體驗(yàn)筆記

2022-4-2    周周

一、【微信】公號(hào)字體,多種字號(hào)適合不同人群閱讀


1. 使用場(chǎng)景


公眾號(hào)文章根據(jù)作者編輯選擇字體,往往會(huì)出現(xiàn)不同文章字體、字號(hào)、行間距都不同。過小字號(hào),對(duì)于閱讀者來說,影響閱讀體驗(yàn)。



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


設(shè)計(jì)目標(biāo):解決用戶閱讀文章時(shí),因作者寫作設(shè)置導(dǎo)致用戶閱讀識(shí)別難的問題,提高閱讀效率,看清內(nèi)容,舒緩眼部識(shí)別壓力。


設(shè)計(jì)方案:在文章右上角更多中提供調(diào)整字體功能,提供7個(gè)字號(hào)大小,滿足小中老用戶和各場(chǎng)景中不同用戶閱讀識(shí)別的容易性,提高閱讀效率體驗(yàn)。




二、【嗶哩嗶哩】視頻旋轉(zhuǎn),可多種展示形式


1. 使用場(chǎng)景


部分用戶有方向鎖定設(shè)置,防止手機(jī)旋轉(zhuǎn)時(shí)改變顯示方向。可少數(shù)情況需要旋轉(zhuǎn)視頻,但并不想解開豎向顯示。



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


設(shè)計(jì)目標(biāo):解決視頻四種方向顯示效果,滿足多場(chǎng)景下用戶旋轉(zhuǎn)視頻觀看的使用體驗(yàn)。


設(shè)計(jì)方案:在全屏模式下,通過雙指放大縮小、旋轉(zhuǎn),可對(duì)視頻內(nèi)容進(jìn)行操作,放大縮小在小尺寸手機(jī)中查看更多局部細(xì)節(jié),旋轉(zhuǎn)尤其針對(duì)豎屏幕瀏覽用戶,四周黑幕更好提升視頻沉浸感,減少推薦視頻、評(píng)論等信息干擾,有效降噪提高觀看體驗(yàn)。不過雙指操作的交互手勢(shì)還是有一定學(xué)習(xí)成本,沒有引導(dǎo)流程還是很難被發(fā)現(xiàn)。




三、【淘寶】粘貼地址,高效解決方案提高填寫效率


1. 使用場(chǎng)景


別人發(fā)來收獲地址,還需要在添加地址頁復(fù)制內(nèi)容進(jìn)行二次操作。



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


設(shè)計(jì)目標(biāo):減少用戶添加收貨地址鏈路,提高快速添加效率,添加完即走,高效操作體驗(yàn)。


設(shè)計(jì)方案:用戶在微信等第三方平臺(tái)復(fù)制收貨地址后,只需要打開淘寶添加收貨地址按鈕即可自動(dòng)識(shí)別粘貼板中的信息,以彈窗形式呈現(xiàn)在用戶面前,無需用戶再復(fù)制到對(duì)應(yīng)列表中操作,減少一個(gè)環(huán)節(jié)從而帶來高效操作體驗(yàn) ,提高用戶使用友好度。




四、【百度網(wǎng)盤】長(zhǎng)按多選,提高多選編輯效率


1. 使用場(chǎng)景


當(dāng)進(jìn)行多文件編輯時(shí)不能一次多選只能點(diǎn)擊對(duì)應(yīng)類內(nèi)容盡心逐一選擇,極大增加編輯成本。



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


設(shè)計(jì)目標(biāo):解決編輯多文件點(diǎn)擊操作過于頻繁,帶來操作成本提升,產(chǎn)生編輯體驗(yàn)不見從而影響用戶手機(jī)使用網(wǎng)盤頻率。


設(shè)計(jì)方案:參考iPhone信息多選消息的交互設(shè)計(jì),當(dāng)用戶多選或選擇一列內(nèi)容時(shí),可通過長(zhǎng)按列表,向下滑動(dòng)經(jīng)過的內(nèi)容都將被選中,中間遇到不選內(nèi)容可跳過或一次全選后逐一進(jìn)行取消操作。比挨個(gè)逐一選中效率要有大的提升,提升用戶操作體驗(yàn)。




五、【印象筆記】PDF預(yù)覽,左滑小圖更快更好定位內(nèi)容


1. 使用場(chǎng)景


手機(jī)看PDF文件不是看不到總頁數(shù)就是不能快速準(zhǔn)確定位固定頁面,只能通過一只滑動(dòng)來盡心預(yù)覽。



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


設(shè)計(jì)目標(biāo):解決查看PDF文件無法定位頁面問題,提高用戶查看PDF文件的友好瀏覽體驗(yàn),提高用戶使用粘性。


設(shè)計(jì)方案:在全屏PDF預(yù)覽模式下,通過貼左側(cè)屏幕從左向右劃定,呼出PDF目錄或者說是縮略圖,一屏可顯示多張頁面,通過點(diǎn)擊對(duì)應(yīng)頁面可快速切換到當(dāng)前定位頁面。很好的解決了PDF文件內(nèi)容預(yù)覽以及定位具體頁面的問題,提升用戶使用好感度,從而提高用戶使用產(chǎn)品的頻率。




六、【淘寶】回憶殺,情感綁定與用戶產(chǎn)生共鳴


1. 使用場(chǎng)景


一年一度年底總結(jié)開始了,淘寶把用戶最初購買時(shí)間和總購買筆數(shù)等多個(gè)數(shù)據(jù)以H5方式給用戶做總結(jié)匯報(bào)。



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


設(shè)計(jì)目標(biāo):加強(qiáng)用戶情感綁定,提高使用淘寶的粘性。


設(shè)計(jì)方案:用戶通過瀏覽淘寶時(shí)隨機(jī)彈出或搜索框輸入淘寶回憶錄,觸發(fā)H5內(nèi)容彈出方式來給用戶展示回憶錄,詳細(xì)的展示用戶與淘寶的相互經(jīng)歷。讓消費(fèi)者直觀感受到淘寶對(duì)每位用戶的貼心服務(wù),認(rèn)真做產(chǎn)品認(rèn)真服務(wù)用戶的態(tài)度。




七、【豆瓣】隱藏彩蛋,業(yè)務(wù)與體驗(yàn)完美結(jié)合


1. 使用場(chǎng)景


用戶搜索特定電影時(shí)會(huì)展示氣泡雨畫面,并且把電影中具有記憶符號(hào)的物品呈現(xiàn)給用戶。



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


設(shè)計(jì)目標(biāo):解決業(yè)務(wù)展示曝光少得不到轉(zhuǎn)換,防止用戶對(duì)廣告產(chǎn)生抵觸情緒。


設(shè)計(jì)方案:用戶在搜索電影名稱有廣告合作時(shí),展示氣泡雨畫面并且會(huì)有電影中的物品展示出來,與用戶產(chǎn)生情記憶,并激發(fā)點(diǎn)擊欲,提高廣告曝光和點(diǎn)擊提升,助力廣告營收變現(xiàn)增長(zhǎng)。減少用戶對(duì)廣告本身的抵觸,從而改善廣告負(fù)面體驗(yàn)。




八、【微信讀書】勛章激勵(lì),排名與榮譽(yù)合二為一


1. 使用場(chǎng)景


閱讀給予勛章本身可以帶給用戶榮譽(yù)感,當(dāng)獲得勛章時(shí),每一枚勛章上面都有NO.幾,按照獲得此勛章順序給用戶顯示出來。



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


設(shè)計(jì)目標(biāo):用勛章排名激勵(lì)用戶發(fā)表內(nèi)容,提高社區(qū)活躍度,增加用戶粘性。


設(shè)計(jì)方案:設(shè)計(jì)勛章機(jī)制,當(dāng)用戶獲得勛章時(shí),給予用戶明確提示,你是獲得此勛章的第幾位書友,來激發(fā)用戶成就感以及發(fā)布內(nèi)容的動(dòng)機(jī),在原有勛章榮譽(yù)感的同時(shí)再給予排名顯示,雙重刺激,來激發(fā)用戶閱讀評(píng)論等創(chuàng)作UGC內(nèi)容欲望。




九、【飛書】自定義標(biāo)簽欄,助力辦公效率提升


1. 使用場(chǎng)景


同樣是辦公類產(chǎn)品,在TAB欄中給用戶更自由的可編輯選擇功能,最少可顯示1個(gè)標(biāo)簽,最多5個(gè)標(biāo)簽。



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


設(shè)計(jì)目標(biāo):解決用戶功能使用選擇,把不常用功能隱藏在更多浮層中,降低視覺干擾,提升辦公效率。


設(shè)計(jì)方案:在底部TAB欄右側(cè),點(diǎn)擊更多標(biāo)簽,會(huì)顯示二級(jí)標(biāo)簽功能,可以選擇編輯,通過隱藏拖拽等交互手勢(shì)自定義調(diào)整位置,保存后。首頁TAB欄中就是依據(jù)個(gè)人使用習(xí)慣的功能位置分布,大大提高用戶操作效率。相比「釘釘」,用戶自定義選擇更高,更好的提升用戶操作體驗(yàn)。




十、【去哪兒旅行】狀態(tài)可見性,點(diǎn)擊過后的提示表現(xiàn)


1. 使用場(chǎng)景


每當(dāng)節(jié)假日選擇交通時(shí),常常會(huì)重復(fù)在幾個(gè)時(shí)段中來回切換查看座位信息等詳細(xì)內(nèi)容。



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


設(shè)計(jì)目標(biāo):解決用戶進(jìn)入返回后狀態(tài)未知問題,根據(jù)尼爾森十大可用性測(cè)試中狀態(tài)可見性原則,通過設(shè)計(jì)手段為用戶提升使用體驗(yàn)。


設(shè)計(jì)方案:在選擇車次頁面中, 用戶點(diǎn)擊操作過的模塊,都給予淺黃色卡片樣式與未選過的模塊形成鮮明對(duì)比,給用戶直觀展示操作過的模塊,始終讓用戶了解之前的操作,從而明確下一步操作內(nèi)容,防止多次重復(fù)操作,提升用戶體驗(yàn)。


文章來源:站酷 作者:碳水Sir

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔