作為誕生在這個(gè)信息爆炸的時(shí)代的設(shè)計(jì)師，是不是經(jīng)常為以下問題想到頭禿：“如何高效地傳遞信息？”、“如何巧妙地引導(dǎo)用戶使用新功能？”、“如何讓自家產(chǎn)品脫穎而出并被記??？”...本期我們就從交互創(chuàng)新、信息可視化、趣味設(shè)計(jì)及點(diǎn)贊設(shè)計(jì)中的小心機(jī)這四個(gè)方向?yàn)榇蠹艺砹烁鞔驛pp的優(yōu)秀案例分析，讓我們一起從這些成熟的設(shè)計(jì)方案中學(xué)習(xí)設(shè)計(jì)思路，汲取靈感。一起來(lái)看看吧～

#02

(資料圖片)

案例分享

1.交互創(chuàng)新-讓產(chǎn)品更便捷

交互是用戶與產(chǎn)品交流互動(dòng)的雙向過(guò)程，需要站在以人為本的角度為用戶考慮，從不同的角度提升用戶的使用體驗(yàn)。在移動(dòng)應(yīng)用中，自然交互是設(shè)計(jì)師常用的方式之一，通過(guò)手勢(shì)交互、語(yǔ)音交互等自然的交互形式，讓用戶更加自然便捷地使用產(chǎn)品；除自然交互外，情感化設(shè)計(jì)是與用戶建立情感連接的重要角色，關(guān)注用戶的真實(shí)訴求能夠在用戶的情感體驗(yàn)上積極反饋，在頁(yè)面布局、交互引導(dǎo)、觸覺反饋等方式讓用戶感受到被重視，提供更智能高效的用戶體驗(yàn)。

極有家-買家秀的手勢(shì)交互

在線上購(gòu)物時(shí)，買家秀是大家進(jìn)行下單決策的重要參考依據(jù)，極有家將【買家秀模塊】新增到商品效果圖的后面，并展示多條圖文評(píng)價(jià)，在用戶查看完商品圖片后可以直接橫滑查看評(píng)價(jià)，運(yùn)用手勢(shì)交互方便用戶對(duì)比，為用戶提供更加便捷高效的購(gòu)物體驗(yàn)。

淘寶-商品詳情頁(yè)信息展示

淘寶的商品詳情頁(yè)改版了，將用戶更關(guān)心的商品材質(zhì)、規(guī)格、款式、尺寸等信息前置，在首屏露出完整的商品信息，并采用了信息可視化的方式更高效精準(zhǔn)地告知用戶商品的信息，有效幫助用戶選購(gòu)商品，助力用戶決策。

95分-賣閑置功能引導(dǎo)

首次在網(wǎng)上出售閑置物品時(shí)，上傳符合要求的物品和細(xì)節(jié)圖是決定其他用戶購(gòu)買與否的重要因素。在95分里使用賣閑置功能里的自己拍圖賣時(shí)，通過(guò)實(shí)物示例、虛線框、小tips等提示引導(dǎo)用戶對(duì)閑置物品進(jìn)行詳細(xì)拍攝，用可視化的方式為用戶提供了人性化的引導(dǎo)，降低用戶的操作門檻，提升用戶體驗(yàn)的同時(shí)也提高了上架的通過(guò)效率。

2.信息可視化-讓信息獲取更高效

“可視化并不僅僅是一種工具，而更像是一種媒介，能最大化幫助我們挖掘數(shù)字背后的信息，讓數(shù)據(jù)‘開口’講故事?！?/p>

信息可視化通過(guò)直觀且易理解的呈現(xiàn)方式，提升用戶體驗(yàn)和決策的效果。讓我們結(jié)合實(shí)際案例了解如何將可視化設(shè)計(jì)應(yīng)用于UI設(shè)計(jì)中，為用戶帶來(lái)更好的體驗(yàn)吧~

麥當(dāng)勞-點(diǎn)餐動(dòng)畫 & 積分兌換設(shè)計(jì)

麥當(dāng)勞的設(shè)計(jì)咱是得夸一夸。在App里點(diǎn)套餐更換搭配的時(shí)候，會(huì)有動(dòng)效進(jìn)行及時(shí)反饋，不論是列表里食物選中態(tài)的背景框移動(dòng)，還是食物從列表里飛到頭圖進(jìn)行對(duì)應(yīng)的替換，流暢的視覺動(dòng)線指引讓點(diǎn)餐體驗(yàn)Up！Up！

在積分兌換的設(shè)計(jì)中， 等價(jià)的商品會(huì)用實(shí)物圖的形式在餐盤上展示，還原了實(shí)際用餐場(chǎng)景，誘惑十足。切換時(shí)，結(jié)合商品的變化及積分的階梯遞增，更直觀的表現(xiàn)差異，也更好地提升用戶集積分的積極性。（不說(shuō)了，麥門信徒這就一天三頓麥當(dāng)當(dāng)）

高德-風(fēng)景路線動(dòng)效提示

高德地圖步行導(dǎo)航到風(fēng)景優(yōu)美的路段時(shí)，會(huì)在路線上用氣泡標(biāo)注風(fēng)景區(qū)，并有動(dòng)效提示用戶該路段風(fēng)景優(yōu)美，可悉心觀賞。在充足的信息可視化的同時(shí)也兼顧情感化的設(shè)計(jì)，細(xì)心又貼心~

3.趣味設(shè)計(jì)-讓產(chǎn)品變好玩

在KANO模型中，需求分為基本型需求、期望值需求和魅力型需求等，在產(chǎn)品可以滿足產(chǎn)品的基本需求后，融入契合產(chǎn)品調(diào)性的趣味化設(shè)計(jì)能夠極大地滿足用戶的魅力需求。這種不會(huì)被用戶過(guò)分期望的趣味設(shè)計(jì)，能夠作為產(chǎn)品與用戶的情感紐帶，顯著地提升用戶對(duì)產(chǎn)品的好感和滿意度。

航旅縱橫-飛行狀態(tài)設(shè)置

乘坐高鐵飛機(jī)出行時(shí)，除了座位的位置、座椅舒適度之外，鄰座往往也是影響旅行體驗(yàn)的因素之一。航旅縱橫飛機(jī)選座時(shí)支持選擇飛行狀態(tài)，包含“帶娃”“社?！薄吧缈帧钡榷喾N個(gè)性化狀態(tài)，以可視化手段幫助乘客選座時(shí)有了更多維度的參考，提升選座體驗(yàn)同時(shí)增加了趣味性和社交性。（OS：真是i人出行的一大福音?。?/p>

閑魚-海鮮市場(chǎng)趣味標(biāo)簽

閑魚的海鮮市場(chǎng)集中了最新的交易熱點(diǎn)和交易形式，讓更多人分享閑置交易的樂趣。話題切換的標(biāo)簽設(shè)計(jì)結(jié)合了相對(duì)應(yīng)的動(dòng)效Icon，生動(dòng)幽默，情感化同時(shí)營(yíng)造了輕松的發(fā)帖交易氛圍。

有道詞典-蜘蛛俠沉浸式電影彩蛋

提升用戶搜索熱門詞匯的體驗(yàn)感和趣味性，越來(lái)越多的產(chǎn)品會(huì)選擇在熱門搜索場(chǎng)景埋藏小彩蛋，動(dòng)效的呈現(xiàn)方式也越來(lái)越豐富和沉浸。在有道詞典中輸入“蜘蛛俠”能夠觸發(fā)彩蛋，動(dòng)效設(shè)計(jì)結(jié)合手機(jī)屏幕碎裂的效果帶給用戶身臨其境的感受。

4.點(diǎn)贊設(shè)計(jì)中的小心機(jī)

“點(diǎn)贊”是移動(dòng)互聯(lián)網(wǎng)時(shí)代熱門的交互方式，能夠快速簡(jiǎn)單地表達(dá)對(duì)內(nèi)容的認(rèn)可和贊同，同時(shí)滿足用戶被關(guān)注被認(rèn)同的精神需求?！包c(diǎn)贊”已經(jīng)成為了社交網(wǎng)絡(luò)的必要功能，很多優(yōu)秀的產(chǎn)品也在逐步探索創(chuàng)新，通過(guò)更加趣味性的設(shè)計(jì)、更具氛圍感的效果及更生動(dòng)有趣的動(dòng)效來(lái)傳遞用戶的贊賞與反饋，鼓勵(lì)用戶進(jìn)行更多的點(diǎn)贊社交。

收獲滿屏儀式感氛圍-小宇宙公告點(diǎn)贊

小宇宙的節(jié)目公告發(fā)布后，訂閱節(jié)目的聽眾會(huì)收到一條提醒通知，可以通過(guò)公告下方的點(diǎn)贊、愛心、歡呼等進(jìn)行互動(dòng)，全屏的動(dòng)效可愛有趣，點(diǎn)擊后很有儀式氛圍感。

點(diǎn)贊的個(gè)性多樣化表達(dá)-小宇宙&即刻

點(diǎn)贊使用單一的大拇指或愛心形象難以承載除喜愛以外的情緒，因此使用更多的個(gè)性化手段來(lái)表達(dá)個(gè)人對(duì)作者觀點(diǎn)的認(rèn)同、包容和鼓勵(lì)成為了越來(lái)越多產(chǎn)品的設(shè)計(jì)思路。小宇宙的點(diǎn)贊圖標(biāo)根據(jù)用戶發(fā)布內(nèi)容語(yǔ)義的不同生成不同形狀的icon，除了常規(guī)的愛心圖標(biāo)，還會(huì)出現(xiàn)笑臉、靈光乍現(xiàn)等有意思的icon。

即刻會(huì)根據(jù)用戶發(fā)布的動(dòng)態(tài)內(nèi)容和添加的標(biāo)簽，設(shè)計(jì)不同的點(diǎn)贊樣式，同時(shí)能夠幫助對(duì)應(yīng)帖子涉及的活動(dòng)進(jìn)行曝光。

#03

結(jié)語(yǔ)

以上就是本期的全部?jī)?nèi)容啦！在學(xué)習(xí)這些優(yōu)秀案例的同時(shí)是不是也有被這些精巧又有趣的設(shè)計(jì)激勵(lì)到！愿我們?cè)谏钊胩剿饔迷O(shè)計(jì)解決復(fù)雜問題的過(guò)程中，也都大膽發(fā)揮創(chuàng)意，期待見到大家的有趣優(yōu)秀的設(shè)計(jì)作品！Day day up??！

愿我們的努力為你帶來(lái)更好的體驗(yàn)。

智行ZXD

*文中配圖來(lái)源于各APP內(nèi)截圖，侵刪

下周一ZoeYZ直播分析一下關(guān)于UI轉(zhuǎn)UX/交互的話題，感興趣的一定要預(yù)約，不然很容易錯(cuò)過(guò)的哦：

關(guān)鍵詞：