編輯導(dǎo)語：作為設(shè)計師，也需要不斷地提升自己，順應(yīng)時代的設(shè)計趨勢。本篇文章中作者結(jié)合實際經(jīng)驗為大家分享了自己觀察到的比較主流的交互設(shè)計點，感興趣的小伙伴們快來一起學(xué)習(xí)吧。

大家好呀，去年花了半年時間寫了《從用戶體驗分析》系列，獲得了還不錯的關(guān)注度，也得到了很多讀者朋友的鼓勵，這里非常感謝大家的支持。

今年2022年，我觀察到了一些非常棒的作品。我們作為設(shè)計師，也需要不斷地提升自己，順應(yīng)時代的設(shè)計趨勢。

世界變化很快，愿你保持初心，讓紛繁復(fù)雜的世界如同畫卷，在你的眼前展開。

隨著移動互聯(lián)網(wǎng)的發(fā)展，原本PC互聯(lián)網(wǎng)連接商業(yè)支付、購買商品、瀏覽信息流等的能力已經(jīng)轉(zhuǎn)移到移動端，而PC互聯(lián)網(wǎng)更加專注于其他領(lǐng)域的優(yōu)勢：

• 更大的屏幕能夠包含更多的信息，并獲得更深度的沉浸感受，如觀影、瀏覽網(wǎng)頁等。
• 通過鼠標(biāo)、鍵盤、觸控板、手繪板的連接，提供了更多的交互方式，能夠執(zhí)行更加繁雜的工作任務(wù)，如表格編輯、程序開發(fā)、視頻制作、文檔書寫、圖像制圖、3D制圖等。
• 得益于顯卡、CPU、存儲、USB插槽、顯示器等的擴(kuò)展性，在大型游戲、大型3D渲染、復(fù)雜制圖上相較于手機(jī)端依然有一定優(yōu)勢。
• 從場景（辦公場景、娛樂場景）來看，PC端移動性較差，但同時基于該特點，PC端能夠更加專注當(dāng)前任務(wù)。模塊化、多人協(xié)同、多端協(xié)同的發(fā)展正不斷地提升用戶的使用體驗。

下面是我觀察到的目前比較主流的交互設(shè)計點，與大家分享。分別是：

1. 無縫體驗
2. 交互更加高效
3. 更加智能化、降低門檻、降低門檻、降低門檻
4. 更加模塊化
5. 更加簡潔、甄別關(guān)鍵任務(wù)
6. 3D動效、大圖、帶來更深的沉浸感
7. 協(xié)同合作的興起

一、無縫體驗

典型的案例就是蘋果的Mac系統(tǒng)與Ios系統(tǒng)越發(fā)趨同，都采用了卡片化、模塊化，整個交互規(guī)范、視覺感受都一致以達(dá)到多端統(tǒng)一。

同時信息可以自由流轉(zhuǎn)：比如在同一Apple賬號下，Mac與IOS中復(fù)制的信息可以進(jìn)行同步粘貼。備忘錄、日歷、提醒事項、錄音中的信息進(jìn)行流轉(zhuǎn)，在任何一臺Mac上登錄Apple賬號后都可以進(jìn)行同步。

在國內(nèi)，B站的網(wǎng)頁端與App端的體驗也逐步趨同，框架設(shè)計上更加卡片化與扁平化。

信息流轉(zhuǎn)上，手機(jī)上暫停的視頻到網(wǎng)頁端繼續(xù)播放，實現(xiàn)了無縫切換。

淘寶首頁：從過去復(fù)雜的信息流導(dǎo)航變?yōu)楝F(xiàn)在更加簡潔的個性推薦卡片。整體體驗與淘寶手機(jī)端一致。

二、交互更加高效

總結(jié)：精簡無關(guān)信息，關(guān)注最重要的核心任務(wù)，減少用戶跳出，沉浸式心流設(shè)計。

1. 登錄方式更加高效

許多網(wǎng)頁接入騰訊、阿里的生態(tài)，支持掃碼關(guān)注公眾號/手機(jī)驗證碼即可完成注冊。省去了用戶編輯個人信息、輸入郵箱、輸入密碼等復(fù)雜的交互流程。

2. 減少頁面跳轉(zhuǎn)

心流式體驗設(shè)計是這幾年很熱門的詞，指的是通過優(yōu)化用戶體驗讓用戶能夠沉浸式地高效完成目標(biāo)任務(wù)。

這需要做到產(chǎn)品的交互習(xí)慣滿足用戶使用習(xí)慣，并且交互流程滿足用戶預(yù)期。過于頻繁的彈窗打擾和頁面跳轉(zhuǎn)的等待時間都會影響用戶進(jìn)入心流。

比如，例如飛書審批，審批詳情不需要跳轉(zhuǎn)，點擊卡片即左側(cè)彈出詳情頁彈窗；讓用戶可以在同一個頁面即可瀏覽信息，不需要進(jìn)行跳轉(zhuǎn)到新的頁面進(jìn)行查看，方便用戶完成批量的審批任務(wù)。

再比如：阿里云，開通服務(wù)的時候不需要跳轉(zhuǎn)，而是在側(cè)邊彈出訂單彈窗，方便用戶操作。

3. 交互組件的易用性迭代，不再局限于大彈窗

上面說到，頻繁的彈窗提醒也會影響用戶進(jìn)入心流，用戶在對表單、畫布中的內(nèi)容進(jìn)行刪除的時候，如果使用全屏二次提醒彈窗，會感到創(chuàng)作過程被打斷。

釘釘宜搭：卡片畫布類產(chǎn)品，刪除操作時，不局限于大彈窗，而是用靠近按鈕的小彈窗，使鼠標(biāo)的滑動路徑更短，操作更加簡便；并且在不過多打擾用戶的前提下，完成了目標(biāo)操作。

三、更加智能化，降低門檻、降低門檻、降低門檻

復(fù)雜性守恒定律由Larry Tesler于1986年提出，也稱泰斯勒定律。指的是“任何系統(tǒng)都存在其固有的復(fù)雜性，且無法被減少，只能設(shè)法調(diào)整、平衡。我們要考慮的是，怎么樣更好地處理它，讓用戶簡單、高效地使用它”。

很多的中后臺系統(tǒng)中很多表單會存在大量的配置項，這些配置項是否可以簡化，讓平臺變得更簡單智能？

大部分時候答案都是否定的，過度追求簡化往往容易弄巧成拙。功能邏輯易于解釋與理解才是更好的方案，當(dāng)你試圖簡化降低復(fù)雜度，可能在其他地方埋了雷。

其中一個解決方案是將復(fù)雜度轉(zhuǎn)交給系統(tǒng)，蘋果公司的黑盒理論與此互通；就是用戶不需要了解系統(tǒng)或功能背后的實現(xiàn)邏輯，只需要關(guān)注呈現(xiàn)在用戶眼前的交互界面即可。

如今數(shù)據(jù)智能化處理正不斷發(fā)展，我們也看到了智能化在PC端領(lǐng)域的應(yīng)用。

1. 剪映

剪映相比于老牌視頻編輯軟件更加簡單，提供各種在線特效模板，來降低任務(wù)復(fù)雜度。相比傳統(tǒng)的PR、AE軟件需要本地存儲預(yù)設(shè)文件，或者手動編輯簡單了很多。

用戶不需要知道背后的實現(xiàn)的技術(shù)原理，也不需要掌握過多的特效制作、調(diào)色技巧即可完成視頻的剪輯、調(diào)色工作。

2. 釘釘宜搭畫布

推薦組件功能：用戶在進(jìn)行流程搭建時，不需要從左側(cè)組件區(qū)拖拽組件，而是點擊連接線中間來添加組件。

如果可以其實還可以更進(jìn)一步，就是根據(jù)后臺數(shù)據(jù)分析創(chuàng)建目標(biāo)流程需要的組件，向用戶主動推薦相關(guān)組件，以此來降低用戶的創(chuàng)建門檻。

四、更加模塊化

隨著傳統(tǒng)業(yè)務(wù)向互聯(lián)網(wǎng)轉(zhuǎn)型越發(fā)普遍，線下業(yè)務(wù)流程轉(zhuǎn)到線上的需求場景越來越多，一個單一的系統(tǒng)不能完全滿足所有的業(yè)務(wù)場景需求，由此需要一個更加靈活模塊化的系統(tǒng)來針對不同的應(yīng)用場景來應(yīng)用不同的產(chǎn)品架構(gòu)。

而該系統(tǒng)中的功能框架、交互組件又可以重復(fù)利用，于是更加靈活、模塊化、可自定義配置的系統(tǒng)后臺越發(fā)受到歡迎。

1. 飛書、釘釘易搭

飛書、釘釘易搭內(nèi)的審批流程、會議系統(tǒng)、工單系統(tǒng)都可以通過模塊化的組件進(jìn)行高效搭建，不需要代碼即可像搭積木一樣實現(xiàn)用戶的自定義需求。

2. 天貓優(yōu)品

阿里的天貓優(yōu)品電器店線下門店設(shè)計平臺，整理了線下門店所需的16個模塊（前臺、小家電中島、洗衣機(jī)、櫥窗、空調(diào)、吧臺等），通過線上三維化場景直接進(jìn)行可視化設(shè)計，所見即所得，并且能夠模擬現(xiàn)場燈光效果，根據(jù)門店現(xiàn)場規(guī)格，直接在三維空間里修改，快速導(dǎo)出效果圖;非常高效地完成了其他門店的需求化定制。

五、更加簡潔，甄別關(guān)鍵任務(wù)，路徑縮得更短

1. 抖音、快手網(wǎng)頁端

抖音網(wǎng)頁端的用戶體驗沿襲了手機(jī)App端的風(fēng)格，用戶進(jìn)入網(wǎng)頁的核心目的就是看短視頻打發(fā)時間，于是進(jìn)入首頁即可看短視頻，不需要用戶手動選擇分類，并且手機(jī)端的用戶偏好通過用戶的賬號同步至網(wǎng)頁端，有了很順暢的用戶體驗。

相比快手網(wǎng)頁版，快手延續(xù)了常規(guī)視頻網(wǎng)站的交互方式，將視頻內(nèi)容分為短視頻、直播、同城、長視頻、小劇場等多個類別，由用戶自主去選擇觀看的內(nèi)容，內(nèi)容雖然更加多元，但確實路徑過長，不夠直接。

2. 淘寶、京東首頁

再舉個例子，新版的淘寶網(wǎng)頁端不再像個門戶網(wǎng)站導(dǎo)航，而是通過數(shù)據(jù)分析用戶喜好來主動推薦代替用戶自己選擇。

用戶來淘寶網(wǎng)頁端，其實并不是買東西，大眾用戶已經(jīng)習(xí)慣了在手機(jī)上進(jìn)行支付，到了網(wǎng)頁端反而會不適應(yīng)。用戶來到淘寶網(wǎng)頁端的更多目的就是逛，看有沒有自己想要的東西，遇到喜歡的，就點進(jìn)去看了。

于是新版淘寶通過個性化推薦把過去復(fù)雜的活動運營頁板塊、特價板塊、品類板塊替換掉了，讓用戶在網(wǎng)頁端獲得更好的“逛街”體驗。

而京東，在首頁做了復(fù)雜的流量分發(fā)設(shè)計，通過不同的頻道、不同的板塊將用戶引流至相關(guān)的專題頁面，再進(jìn)行商品瀏覽。

本質(zhì)上來說，用戶來到淘寶、來到京東的目的都是因為閑，而淘寶的通過數(shù)據(jù)智能，大數(shù)據(jù)精準(zhǔn)推薦用戶喜歡的商品，簡化了用戶的使用路徑，并且使整體頁面更加簡潔。

六、微動效、大圖、3D元素帶來更加深的視覺刺激

網(wǎng)頁的官網(wǎng)、首頁承擔(dān)著產(chǎn)品介紹、流量分發(fā)、增強(qiáng)品牌印象等的職責(zé)。我觀察到越來越多產(chǎn)品官網(wǎng)都開始采用3D元素、視頻背景、大圖元素、微動效來讓頁面呈現(xiàn)更加具有質(zhì)感和動感。

1. 3D元素

它是由Web3D技術(shù)的發(fā)展而興起，能夠給網(wǎng)頁Banner帶來更強(qiáng)的視覺吸引力，同時也強(qiáng)化了公司融合了AI技術(shù)的品牌印象。如法大大官網(wǎng)、騰訊云、阿里云的首頁Banner展示。

法大大首頁Banner，鼠標(biāo)滾輪向下滾動3D元素會相應(yīng)產(chǎn)生變動，文案與元素一靜一動，對比明顯，也更易于用戶注意到文案信息。

2. 大圖、視頻

大疆官網(wǎng)首屏采用了全畫幅大圖的形式展示熱門產(chǎn)品，下方的產(chǎn)品推薦頁自動播放宣傳視頻，提升了頁面的視覺沖擊力，展示了其科技屬性。

七、協(xié)同合作興起

疫情時期，線上辦公的需求和頻率激增，線上協(xié)作興起，許多辦公軟件都有了多人場景編輯功能。特別是對于復(fù)雜的項目，需要團(tuán)隊成員共同完成，協(xié)同合作的功能越來越受歡迎。

比如我們熟悉的figma，逐漸取代了傳統(tǒng)UI設(shè)計軟件ps、sketch等的頭部地位，其中的項目協(xié)同功能更是廣受歡迎。

只需要發(fā)送項目鏈接邀請成員即可進(jìn)行項目協(xié)作，還支持多人標(biāo)注、語音溝通，大大提升了工作效率。

許多辦公軟件也都上線了類似的功能，比如幕布可以通過設(shè)置權(quán)限、發(fā)送鏈接或二維碼來邀請協(xié)作者共同編輯文檔，為產(chǎn)品的使用場景提供了更多可能。

八、總結(jié)

曾鳴在《未來商業(yè)20講》里說：“未來的互聯(lián)網(wǎng)世界的兩大趨勢是數(shù)據(jù)智能、網(wǎng)絡(luò)效應(yīng)”。

這在PC端也得到了印證。

淘寶網(wǎng)首頁、抖音首頁、嗶哩嗶哩網(wǎng)頁端將PC端與APP端的數(shù)據(jù)進(jìn)行互通，并對用戶行為偏好數(shù)據(jù)進(jìn)行分析，為用戶提供更加精準(zhǔn)的信息流的同時，還使得頁面的交互更加簡單，視覺效果更加簡潔，過去依賴用戶自主選擇進(jìn)行流量分發(fā)的形式將會越來越弱勢。

在工具類產(chǎn)品中，利用數(shù)據(jù)智能化可以將用戶操作上的復(fù)雜度轉(zhuǎn)移給系統(tǒng)，從而降低用戶使用門檻，提升用戶體驗。

與此同時，工具類平臺也越發(fā)靈活化化，通過模塊化設(shè)計來自定義搭建不同用戶的使用需求的產(chǎn)品，還能節(jié)省資源建設(shè)成本。

網(wǎng)絡(luò)效應(yīng)的部分應(yīng)用體現(xiàn)在用戶在使用工具類產(chǎn)品中，不再是孤單的個體，而是能通過線上協(xié)同，讓用戶與用戶之間能夠產(chǎn)生共同協(xié)作，共同交流，更加方便地完成任務(wù)。

本文由@為美好而設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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