2022互動設計觀察｜PC端（上篇）

編輯導語：作為設計師，也需要不斷地提升自己，順應時代的設計趨勢。本篇文章中作者結合實際經驗為大家分享了自己觀察到的比較主流的互動設計點，感興趣的小夥伴們快來一起學習吧。

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

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

世界變化很快，願你保持初心，讓紛繁複雜的世界如同畫卷，在你的眼前展開。

隨著移動網際網路的發展，原本PC網際網路連線商業支付、購買商品、瀏覽資訊流等的能力已經轉移到移動端，而PC網際網路更加專注於其他領域的優勢：

• 更大的螢幕能夠包含更多的資訊，並獲得更深度的沉浸感受，如觀影、瀏覽網頁等。
• 通過滑鼠、鍵盤、觸控板、手繪板的連線，提供了更多的互動方式，能夠執行更加繁雜的工作任務，如表格編輯、程式開發、影片製作、文件書寫、影象製圖、3D製圖等。
• 得益於顯示卡、CPU、儲存、USB插槽、顯示器等的擴充套件性，在大型遊戲、大型3D渲染、複雜製圖上相較於手機端依然有一定優勢。
• 從場景（辦公場景、娛樂場景）來看，PC端移動性較差，但同時基於該特點，PC端能夠更加專注當前任務。模組化、多人協同、多端協同的發展正不斷地提升使用者的使用體驗。

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

1. 無縫體驗
2. 互動更加高效
3. 更加智慧化、降低門檻、降低門檻、降低門檻
4. 更加模組化
5. 更加簡潔、甄別關鍵任務
6. 3D動效、大圖、帶來更深的沉浸感
7. 協同合作的興起

一、無縫體驗

典型的案例就是蘋果的Mac系統與Ios系統越發趨同，都採用了卡片化、模組化，整個互動規範、視覺感受都一致以達到多端統一。

同時資訊可以自由流轉：比如在同一Apple賬號下，Mac與IOS中複製的資訊可以進行同步貼上。備忘錄、日曆、提醒事項、錄音中的資訊進行流轉，在任何一臺Mac上登入Apple賬號後都可以進行同步。

在國內，B站的網頁端與App端的體驗也逐步趨同，框架設計上更加卡片化與扁平化。

資訊流轉上，手機上暫停的影片到網頁端繼續播放，實現了無縫切換。

淘寶首頁：從過去複雜的資訊流導航變為現在更加簡潔的個性推薦卡片。整體體驗與淘寶手機端一致。

二、互動更加高效

總結：精簡無關資訊，關注最重要的核心任務，減少使用者跳出，沉浸式心流設計。

1. 登入方式更加高效

許多網頁接入騰訊、阿里的生態，支援掃碼關注公眾號/手機驗證碼即可完成註冊。省去了使用者編輯個人資訊、輸入郵箱、輸入密碼等複雜的互動流程。

2. 減少頁面跳轉

心流式體驗設計是這幾年很熱門的詞，指的是通過優化使用者體驗讓使用者能夠沉浸式地高效完成目標任務。

這需要做到產品的互動習慣滿足使用者使用習慣，並且互動流程滿足使用者預期。過於頻繁的彈窗打擾和頁面跳轉的等待時間都會影響使用者進入心流。

比如，例如飛書審批，審批詳情不需要跳轉，點選卡片即左側彈出詳情頁彈窗；讓使用者可以在同一個頁面即可瀏覽資訊，不需要進行跳轉到新的頁面進行檢視，方便使用者完成批量的審批任務。

再比如：阿里雲，開通服務的時候不需要跳轉，而是在側邊彈出訂單彈窗，方便使用者操作。

3. 互動元件的易用性迭代，不再侷限於大彈窗

上面說到，頻繁的彈窗提醒也會影響使用者進入心流，使用者在對錶單、畫布中的內容進行刪除的時候，如果使用全屏二次提醒彈窗，會感到創作過程被打斷。

釘釘宜搭：卡片畫布類產品，刪除操作時，不侷限於大彈窗，而是用靠近按鈕的小彈窗，使滑鼠的滑動路徑更短，操作更加簡便；並且在不過多打擾使用者的前提下，完成了目標操作。

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

複雜性守恆定律由Larry Tesler於1986年提出，也稱泰斯勒定律。指的是“任何系統都存在其固有的複雜性，且無法被減少，只能設法調整、平衡。我們要考慮的是，怎麼樣更好地處理它，讓使用者簡單、高效地使用它”。

很多的中後臺系統中很多表單會存在大量的配置項，這些配置項是否可以簡化，讓平臺變得更簡單智慧？

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

其中一個解決方案是將複雜度轉交給系統，蘋果公司的黑盒理論與此互通；就是使用者不需要了解系統或功能背後的實現邏輯，只需要關注呈現在使用者眼前的互動介面即可。

如今資料智慧化處理正不斷髮展，我們也看到了智慧化在PC端領域的應用。

1. 剪映

剪映相比於老牌影片編輯軟體更加簡單，提供各種線上特效模板，來降低任務複雜度。相比傳統的PR、AE軟體需要本地儲存預設檔案，或者手動編輯簡單了很多。

使用者不需要知道背後的實現的技術原理，也不需要掌握過多的特效製作、調色技巧即可完成影片的剪輯、調色工作。

2. 釘釘宜搭畫布

推薦元件功能：使用者在進行流程搭建時，不需要從左側元件區拖拽元件，而是點選連線線中間來新增元件。

如果可以其實還可以更進一步，就是根據後臺資料分析建立目標流程需要的元件，向用戶主動推薦相關元件，以此來降低使用者的建立門檻。

四、更加模組化

隨著傳統業務向網際網路轉型越發普遍，線下業務流程轉到線上的需求場景越來越多，一個單一的系統不能完全滿足所有的業務場景需求，由此需要一個更加靈活模組化的系統來針對不同的應用場景來應用不同的產品架構。

而該系統中的功能框架、互動元件又可以重複利用，於是更加靈活、模組化、可自定義配置的系統後臺越發受到歡迎。

1. 飛書、釘釘易搭

飛書、釘釘易搭內的審批流程、會議系統、工單系統都可以通過模組化的元件進行高效搭建，不需要程式碼即可像搭積木一樣實現使用者的自定義需求。

2. 天貓優品

阿里的天貓優品電器店線下門店設計平臺，整理了線下門店所需的16個模組（前臺、小家電中島、洗衣機、櫥窗、空調、吧檯等），通過線上三維化場景直接進行視覺化設計，所見即所得，並且能夠模擬現場燈光效果，根據門店現場規格，直接在三維空間裡修改，快速匯出效果圖;非常高效地完成了其他門店的需求化定製。

五、更加簡潔，甄別關鍵任務，路徑縮得更短

1. 抖音、快手網頁端

抖音網頁端的使用者體驗沿襲了手機App端的風格，使用者進入網頁的核心目的就是看短影片打發時間，於是進入首頁即可看短影片，不需要使用者手動選擇分類，並且手機端的使用者偏好通過使用者的賬號同步至網頁端，有了很順暢的使用者體驗。

相比快手網頁版，快手延續了常規影片網站的互動方式，將影片內容分為短影片、直播、同城、長影片、小劇場等多個類別，由使用者自主去選擇觀看的內容，內容雖然更加多元，但確實路徑過長，不夠直接。

2. 淘寶、京東首頁

再舉個例子，新版的淘寶網頁端不再像個入口網站導航，而是通過資料分析使用者喜好來主動推薦代替使用者自己選擇。

使用者來淘寶網頁端，其實並不是買東西，大眾使用者已經習慣了在手機上進行支付，到了網頁端反而會不適應。使用者來到淘寶網頁端的更多目的就是逛，看有沒有自己想要的東西，遇到喜歡的，就點進去看了。

於是新版淘寶通過個性化推薦把過去複雜的活動運營頁板塊、特價板塊、品類板塊替換掉了，讓使用者在網頁端獲得更好的“逛街”體驗。

而京東，在首頁做了複雜的流量分發設計，通過不同的頻道、不同的板塊將使用者引流至相關的專題頁面，再進行商品瀏覽。

本質上來說，使用者來到淘寶、來到京東的目的都是因為閒，而淘寶的通過資料智慧，大資料精準推薦使用者喜歡的商品，簡化了使用者的使用路徑，並且使整體頁面更加簡潔。

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

網頁的官網、首頁承擔著產品介紹、流量分發、增強品牌印象等的職責。我觀察到越來越多產品官網都開始採用3D元素、影片背景、大圖元素、微動效來讓頁面呈現更加具有質感和動感。

1. 3D元素

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

法大大首頁Banner，滑鼠滾輪向下滾動3D元素會相應產生變動，文案與元素一靜一動，對比明顯，也更易於使用者注意到文案資訊。

2. 大圖、影片

大疆官網首屏採用了全畫幅大圖的形式展示熱門產品，下方的產品推薦頁自動播放宣傳影片，提升了頁面的視覺衝擊力，展示了其科技屬性。

七、協同合作興起

疫情時期，線上辦公的需求和頻率激增，線上協作興起，許多辦公軟體都有了多人場景編輯功能。特別是對於複雜的專案，需要團隊成員共同完成，協同合作的功能越來越受歡迎。

比如我們熟悉的figma，逐漸取代了傳統UI設計軟體ps、sketch等的頭部地位，其中的專案協同功能更是廣受歡迎。

只需要傳送專案連結邀請成員即可進行專案協作，還支援多人標註、語音溝通，大大提升了工作效率。

許多辦公軟體也都上線了類似的功能，比如幕布可以通過設定許可權、傳送連結或二維碼來邀請協作者共同編輯文件，為產品的使用場景提供了更多可能。

八、總結

曾鳴在《未來商業20講》裡說：“未來的網際網路世界的兩大趨勢是資料智慧、網路效應”。

這在PC端也得到了印證。

淘寶網首頁、抖音首頁、嗶哩嗶哩網頁端將PC端與APP端的資料進行互通，並對使用者行為偏好資料進行分析，為使用者提供更加精準的資訊流的同時，還使得頁面的互動更加簡單，視覺效果更加簡潔，過去依賴使用者自主選擇進行流量分發的形式將會越來越弱勢。

在工具類產品中，利用資料智慧化可以將使用者操作上的複雜度轉移給系統，從而降低使用者使用門檻，提升使用者體驗。

與此同時，工具類平臺也越發靈活化化，通過模組化設計來自定義搭建不同使用者的使用需求的產品，還能節省資源建設成本。

網路效應的部分應用體現在使用者在使用工具類產品中，不再是孤單的個體，而是能通過線上協同，讓使用者與使用者之間能夠產生共同協作，共同交流，更加方便地完成任務。

本文由@為美好而設計 原創釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議