起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識2022交互設計觀察｜PC端（上篇）
編輯導語：作為設計師，也需要不斷地提升自己，順應時代的設計趨勢。本篇文章中作者結合實際經驗為大家分享了自己觀察到的比較主流的交互設計點，感興趣的小伙伴們快來一起學習吧。
大家好呀，去年花了半年時間寫了《從用戶體驗分析》系列，獲得了還不錯的關注度，也得到了很多讀者朋友的鼓勵，這里非常感謝大家的支持。
今年2022年，我觀察到了一些非常棒的作品。我們作為設計師，也需要不斷地提升自己，順應時代的設計趨勢。
世界變化很快，愿你保持初心，讓紛繁復雜的世界如同畫卷，在你的眼前展開。
隨著移動互聯網的發展，原本PC互聯網連接商業支付、購買商品、瀏覽信息流等的能力已經轉移到移動端，而PC互聯網更加專注于其他領域的優勢：
- 更大的屏幕能夠包含更多的信息，并獲得更深度的沉浸感受，如觀影、瀏覽網頁等。
- 通過鼠標、鍵盤、觸控板、手繪板的連接，提供了更多的交互方式，能夠執行更加繁雜的工作任務，如表格編輯、程序開發、視頻制作、文檔書寫、圖像制圖、3D制圖等。
- 得益于顯卡、CPU、存儲、USB插槽、顯示器等的擴展性，在大型游戲、大型3D渲染、復雜制圖上相較于手機端依然有一定優勢。
- 從場景（辦公場景、娛樂場景）來看，PC端移動性較差，但同時基于該特點，PC端能夠更加專注當前任務。模塊化、多人協同、多端協同的發展正不斷地提升用戶的使用體驗。
下面是我觀察到的目前比較主流的交互設計點，與大家分享。分別是：
- 無縫體驗
- 交互更加高效
- 更加智能化、降低門檻、降低門檻、降低門檻
- 更加模塊化
- 更加簡潔、甄別關鍵任務
- 3D動效、大圖、帶來更深的沉浸感
- 協同合作的興起
一、無縫體驗
典型的案例就是蘋果的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 協議
阿里云開通服務的時候的側邊彈出不叫“彈窗”，準確說叫“抽屜”吧。
什么時候出下篇??
期待下篇
淘寶網首頁、抖音首頁、嗶哩嗶哩網頁端將PC端與APP端的數據進行互通，并對用戶行為偏好數據進行分析，為用戶提供更加精準的信息流的同時，還使得頁面的交互更加簡單，視覺效果更加簡潔，過去依賴用戶自主選擇進行流量分發的形式將會越來越弱勢。