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

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

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

• 一、無(wú)縫體驗(yàn)
• 二、交互更加高效
• 三、更加智能化、降低門(mén)檻、降低門(mén)檻、降低門(mén)檻
• 四、更加模塊化
• 五、更加簡(jiǎn)潔、甄別關(guān)鍵任務(wù)
• 六、3D動(dòng)效、大圖、帶來(lái)更深的沉浸感
• 七、協(xié)同合作的興起

一、無(wú)縫體驗(yàn)

典型的案例就是蘋(píng)果的Mac系統(tǒng)與Ios系統(tǒng)越發(fā)趨同，都采用了卡片化、模塊化，整個(gè)交互規(guī)范、視覺(jué)感受都一致以達(dá)到多端統(tǒng)一。同時(shí)信息可以自由流轉(zhuǎn)：比如在同一Apple賬號(hào)下，Mac與IOS中復(fù)制的信息可以進(jìn)行同步粘貼。備忘錄、日歷、提醒事項(xiàng)、錄音中的信息進(jìn)行流轉(zhuǎn)，在任何一臺(tái)Mac上登錄Apple賬號(hào)后都可以進(jìn)行同步。

在國(guó)內(nèi)，B站的網(wǎng)頁(yè)端與App端的體驗(yàn)也逐步趨同，框架設(shè)計(jì)上更加卡片化與扁平化。信息流轉(zhuǎn)上，手機(jī)上暫停的視頻到網(wǎng)頁(yè)端繼續(xù)播放，實(shí)現(xiàn)了無(wú)縫切換。

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

 二、交互更加高效

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

1、登錄方式更加高效

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

2、減少頁(yè)面跳轉(zhuǎn)

心流式體驗(yàn)設(shè)計(jì)是這幾年很熱門(mén)的詞，指的是通過(guò)優(yōu)化用戶(hù)體驗(yàn)讓用戶(hù)能夠沉浸式地高效完成目標(biāo)任務(wù)。這需要做到產(chǎn)品的交互習(xí)慣滿(mǎn)足用戶(hù)使用習(xí)慣，并且交互流程滿(mǎn)足用戶(hù)預(yù)期。過(guò)于頻繁的彈窗打擾和頁(yè)面跳轉(zhuǎn)的等待時(shí)間都會(huì)影響用戶(hù)進(jìn)入心流。

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

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

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

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

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

三、更加智能化，降低門(mén)檻、降低門(mén)檻、降低門(mén)檻

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

很多的中后臺(tái)系統(tǒng)中很多表單會(huì)存在大量的配置項(xiàng)，這些配置項(xiàng)是否可以簡(jiǎn)化，讓平臺(tái)變得更簡(jiǎn)單智能？大部分時(shí)候答案都是否定的，過(guò)度追求簡(jiǎn)化往往容易弄巧成拙。功能邏輯易于解釋與理解才是更好的方案，當(dāng)你試圖簡(jiǎn)化降低復(fù)雜度，可能在其他地方埋了雷。

其中一個(gè)解決方案是將復(fù)雜度轉(zhuǎn)交給系統(tǒng)，蘋(píng)果公司的黑盒理論與此互通；就是用戶(hù)不需要了解系統(tǒng)或功能背后的實(shí)現(xiàn)邏輯，只需要關(guān)注呈現(xiàn)在用戶(hù)眼前的交互界面即可。如今數(shù)據(jù)智能化處理正不斷發(fā)展，我們也看到了智能化在PC端領(lǐng)域的應(yīng)用。

1、剪映

剪映相比于老牌視頻編輯軟件更加簡(jiǎn)單，提供各種在線特效模板，來(lái)降低任務(wù)復(fù)雜度。相比傳統(tǒng)的PR、AE軟件需要本地存儲(chǔ)預(yù)設(shè)文件，或者手動(dòng)編輯簡(jiǎn)單了很多。用戶(hù)不需要知道背后的實(shí)現(xiàn)的技術(shù)原理，也不需要掌握過(guò)多的特效制作、調(diào)色技巧即可完成視頻的剪輯、調(diào)色工作。

2、釘釘宜搭畫(huà)布

推薦組件功能：用戶(hù)在進(jìn)行流程搭建時(shí)，不需要從左側(cè)組件區(qū)拖拽組件，而是點(diǎn)擊連接線中間來(lái)添加組件。如果可以其實(shí)還可以更進(jìn)一步，就是根據(jù)后臺(tái)數(shù)據(jù)分析創(chuàng)建目標(biāo)流程需要的組件，向用戶(hù)主動(dòng)推薦相關(guān)組件，以此來(lái)降低用戶(hù)的創(chuàng)建門(mén)檻。

四、更加模塊化

隨著傳統(tǒng)業(yè)務(wù)向互聯(lián)網(wǎng)轉(zhuǎn)型越發(fā)普遍，線下業(yè)務(wù)流程轉(zhuǎn)到線上的需求場(chǎng)景越來(lái)越多，一個(gè)單一的系統(tǒng)不能完全滿(mǎn)足所有的業(yè)務(wù)場(chǎng)景需求，由此需要一個(gè)更加靈活模塊化的系統(tǒng)來(lái)針對(duì)不同的應(yīng)用場(chǎng)景來(lái)應(yīng)用不同的產(chǎn)品架構(gòu)。而該系統(tǒng)中的功能框架、交互組件又可以重復(fù)利用，于是更加靈活、模塊化、可自定義配置的系統(tǒng)后臺(tái)越發(fā)受到歡迎。

1、飛書(shū)、釘釘易搭

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

2、天貓優(yōu)品

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

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

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

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

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

2、淘寶、京東首頁(yè)

再舉個(gè)例子，新版的淘寶網(wǎng)頁(yè)端不再像個(gè)門(mén)戶(hù)網(wǎng)站導(dǎo)航，而是通過(guò)數(shù)據(jù)分析用戶(hù)喜好來(lái)主動(dòng)推薦代替用戶(hù)自己選擇。用戶(hù)來(lái)淘寶網(wǎng)頁(yè)端，其實(shí)并不是買(mǎi)東西，大眾用戶(hù)已經(jīng)習(xí)慣了在手機(jī)上進(jìn)行支付，到了網(wǎng)頁(yè)端反而會(huì)不適應(yīng)。用戶(hù)來(lái)到淘寶網(wǎng)頁(yè)端的更多目的就是逛，看有沒(méi)有自己想要的東西，遇到喜歡的，就點(diǎn)進(jìn)去看了。于是新版淘寶通過(guò)個(gè)性化推薦把過(guò)去復(fù)雜的活動(dòng)運(yùn)營(yíng)頁(yè)板塊、特價(jià)板塊、品類(lèi)板塊替換掉了，讓用戶(hù)在網(wǎng)頁(yè)端獲得更好的“逛街”體驗(yàn)。

而京東，在首頁(yè)做了復(fù)雜的流量分發(fā)設(shè)計(jì)，通過(guò)不同的頻道、不同的板塊將用戶(hù)引流至相關(guān)的專(zhuān)題頁(yè)面，再進(jìn)行商品瀏覽。本質(zhì)上來(lái)說(shuō)，用戶(hù)來(lái)到淘寶、來(lái)到京東的目的都是因?yàn)殚e，而淘寶的通過(guò)數(shù)據(jù)智能，大數(shù)據(jù)精準(zhǔn)推薦用戶(hù)喜歡的商品，簡(jiǎn)化了用戶(hù)的使用路徑，并且使整體頁(yè)面更加簡(jiǎn)潔。

六、微動(dòng)效、大圖、3D元素帶來(lái)更加深的視覺(jué)刺激

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

1、3D元素

它是由Web3D技術(shù)的發(fā)展而興起，能夠給網(wǎng)頁(yè)Banner帶來(lái)更強(qiáng)的視覺(jué)吸引力，同時(shí)也強(qiáng)化了公司融合了AI技術(shù)的品牌印象。如法大大官網(wǎng)、騰訊云、阿里云的首頁(yè)Banner展示。法大大首頁(yè)Banner，鼠標(biāo)滾輪向下滾動(dòng)3D元素會(huì)相應(yīng)產(chǎn)生變動(dòng)，文案與元素一靜一動(dòng)，對(duì)比明顯，也更易于用戶(hù)注意到文案信息。

2、大圖、視頻

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

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

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

比如我們熟悉的figma，逐漸取代了傳統(tǒng)UI設(shè)計(jì)軟件ps、sketch等的頭部地位，其中的項(xiàng)目協(xié)同功能更是廣受歡迎。只需要發(fā)送項(xiàng)目鏈接邀請(qǐng)成員即可進(jìn)行項(xiàng)目協(xié)作，還支持多人標(biāo)注、語(yǔ)音溝通，大大提升了工作效率。

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

總結(jié)

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

這在PC端也得到了印證。淘寶網(wǎng)首頁(yè)、抖音首頁(yè)、嗶哩嗶哩網(wǎng)頁(yè)端將PC端與APP端的數(shù)據(jù)進(jìn)行互通，并對(duì)用戶(hù)行為偏好數(shù)據(jù)進(jìn)行分析，為用戶(hù)提供更加精準(zhǔn)的信息流的同時(shí)，還使得頁(yè)面的交互更加簡(jiǎn)單，視覺(jué)效果更加簡(jiǎn)潔，過(guò)去依賴(lài)用戶(hù)自主選擇進(jìn)行流量分發(fā)的形式將會(huì)越來(lái)越弱勢(shì)。

在工具類(lèi)產(chǎn)品中，利用數(shù)據(jù)智能化可以將用戶(hù)操作上的復(fù)雜度轉(zhuǎn)移給系統(tǒng)，從而降低用戶(hù)使用門(mén)檻，提升用戶(hù)體驗(yàn)。與此同時(shí)，工具類(lèi)平臺(tái)也越發(fā)靈活化化，通過(guò)模塊化設(shè)計(jì)來(lái)自定義搭建不同用戶(hù)的使用需求的產(chǎn)品，還能節(jié)省資源建設(shè)成本。

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

作者：為美好而設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司