首页
/
每日頭條
/
生活
/
交互設計綱領
交互設計綱領
更新时间:2024-05-03 04:16:18

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

交互設計綱領(2022交互設計觀察PC端)1

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

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

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

随着移動互聯網的發展,原本PC互聯網連接商業支付、購買商品、浏覽信息流等的能力已經轉移到移動端,而PC互聯網更加專注于其他領域的優勢:

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

下面是我觀察到的目前比較主流的交互設計點,與大家分享。分别是:

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

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

同時信息可以自由流轉:比如在同一Apple賬号下,Mac與IOS中複制的信息可以進行同步粘貼。備忘錄、日曆、提醒事項、錄音中的信息進行流轉,在任何一台Mac上登錄Apple賬号後都可以進行同步。

交互設計綱領(2022交互設計觀察PC端)2

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

信息流轉上,手機上暫停的視頻到網頁端繼續播放,實現了無縫切換。

交互設計綱領(2022交互設計觀察PC端)3

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

交互設計綱領(2022交互設計觀察PC端)4

二、交互更加高效

總結:精簡無關信息,關注最重要的核心任務,減少用戶跳出,沉浸式心流設計。

1. 登錄方式更加高效

許多網頁接入騰訊、阿裡的生态,支持掃碼關注公衆号/手機驗證碼即可完成注冊。省去了用戶編輯個人信息、輸入郵箱、輸入密碼等複雜的交互流程。

交互設計綱領(2022交互設計觀察PC端)5

2. 減少頁面跳轉

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

這需要做到産品的交互習慣滿足用戶使用習慣,并且交互流程滿足用戶預期。過于頻繁的彈窗打擾和頁面跳轉的等待時間都會影響用戶進入心流。

比如,例如飛書審批,審批詳情不需要跳轉,點擊卡片即左側彈出詳情頁彈窗;讓用戶可以在同一個頁面即可浏覽信息,不需要進行跳轉到新的頁面進行查看,方便用戶完成批量的審批任務。

交互設計綱領(2022交互設計觀察PC端)6

再比如:阿裡雲,開通服務的時候不需要跳轉,而是在側邊彈出訂單彈窗,方便用戶操作。

交互設計綱領(2022交互設計觀察PC端)7

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

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

釘釘宜搭:卡片畫布類産品,删除操作時,不局限于大彈窗,而是用靠近按鈕的小彈窗,使鼠标的滑動路徑更短,操作更加簡便;并且在不過多打擾用戶的前提下,完成了目标操作。

交互設計綱領(2022交互設計觀察PC端)8

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

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

很多的中後台系統中很多表單會存在大量的配置項,這些配置項是否可以簡化,讓平台變得更簡單智能?

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

其中一個解決方案是将複雜度轉交給系統,蘋果公司的黑盒理論與此互通;就是用戶不需要了解系統或功能背後的實現邏輯,隻需要關注呈現在用戶眼前的交互界面即可。

如今數據智能化處理正不斷發展,我們也看到了智能化在PC端領域的應用。

1. 剪映

剪映相比于老牌視頻編輯軟件更加簡單,提供各種在線特效模闆,來降低任務複雜度。相比傳統的PR、AE軟件需要本地存儲預設文件,或者手動編輯簡單了很多。

用戶不需要知道背後的實現的技術原理,也不需要掌握過多的特效制作、調色技巧即可完成視頻的剪輯、調色工作。

交互設計綱領(2022交互設計觀察PC端)9

2. 釘釘宜搭畫布

推薦組件功能:用戶在進行流程搭建時,不需要從左側組件區拖拽組件,而是點擊連接線中間來添加組件。

如果可以其實還可以更進一步,就是根據後台數據分析創建目标流程需要的組件,向用戶主動推薦相關組件,以此來降低用戶的創建門檻。

交互設計綱領(2022交互設計觀察PC端)10

四、更加模塊化

随着傳統業務向互聯網轉型越發普遍,線下業務流程轉到線上的需求場景越來越多,一個單一的系統不能完全滿足所有的業務場景需求,由此需要一個更加靈活模塊化的系統來針對不同的應用場景來應用不同的産品架構。

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

1. 飛書、釘釘易搭

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

交互設計綱領(2022交互設計觀察PC端)11

2. 天貓優品

阿裡的天貓優品電器店線下門店設計平台,整理了線下門店所需的16個模塊(前台、小家電中島、洗衣機、櫥窗、空調、吧台等),通過線上三維化場景直接進行可視化設計,所見即所得,并且能夠模拟現場燈光效果,根據門店現場規格,直接在三維空間裡修改,快速導出效果圖;非常高效地完成了其他門店的需求化定制。

交互設計綱領(2022交互設計觀察PC端)12

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

1. 抖音、快手網頁端

抖音網頁端的用戶體驗沿襲了手機App端的風格,用戶進入網頁的核心目的就是看短視頻打發時間,于是進入首頁即可看短視頻,不需要用戶手動選擇分類,并且手機端的用戶偏好通過用戶的賬号同步至網頁端,有了很順暢的用戶體驗。

相比快手網頁版,快手延續了常規視頻網站的交互方式,将視頻内容分為短視頻、直播、同城、長視頻、小劇場等多個類别,由用戶自主去選擇觀看的内容,内容雖然更加多元,但确實路徑過長,不夠直接。

交互設計綱領(2022交互設計觀察PC端)13

交互設計綱領(2022交互設計觀察PC端)14

2. 淘寶、京東首頁

再舉個例子,新版的淘寶網頁端不再像個門戶網站導航,而是通過數據分析用戶喜好來主動推薦代替用戶自己選擇。

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

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

而京東,在首頁做了複雜的流量分發設計,通過不同的頻道、不同的闆塊将用戶引流至相關的專題頁面,再進行商品浏覽。

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

交互設計綱領(2022交互設計觀察PC端)4

交互設計綱領(2022交互設計觀察PC端)16

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

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

1. 3D元素

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

法大大首頁Banner,鼠标滾輪向下滾動3D元素會相應産生變動,文案與元素一靜一動,對比明顯,也更易于用戶注意到文案信息。

交互設計綱領(2022交互設計觀察PC端)17

交互設計綱領(2022交互設計觀察PC端)18

2. 大圖、視頻

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

交互設計綱領(2022交互設計觀察PC端)19

七、協同合作興起

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

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

隻需要發送項目鍊接邀請成員即可進行項目協作,還支持多人标注、語音溝通,大大提升了工作效率。

交互設計綱領(2022交互設計觀察PC端)20

許多辦公軟件也都上線了類似的功能,比如幕布可以通過設置權限、發送鍊接或二維碼來邀請協作者共同編輯文檔,為産品的使用場景提供了更多可能。

交互設計綱領(2022交互設計觀察PC端)21

八、總結

曾鳴在《未來商業20講》裡說:“未來的互聯網世界的兩大趨勢是數據智能、網絡效應”。

這在PC端也得到了印證。

淘寶網首頁、抖音首頁、哔哩哔哩網頁端将PC端與APP端的數據進行互通,并對用戶行為偏好數據進行分析,為用戶提供更加精準的信息流的同時,還使得頁面的交互更加簡單,視覺效果更加簡潔,過去依賴用戶自主選擇進行流量分發的形式将會越來越弱勢。

在工具類産品中,利用數據智能化可以将用戶操作上的複雜度轉移給系統,從而降低用戶使用門檻,提升用戶體驗。

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

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

本文由@為美好而設計 原創發布于人人都是産品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
新車内的異味到底是怎麼回事 去除新車内異味的八個小方法
新車内的異味到底是怎麼回事 去除新車内異味的八個小方法
買來的新車裡面總會有一股難聞的味道,可能是車上皮制品或裝飾品産生的。這種異味怎麼去除呢?下面作文庫知識百科就來教大家去除車内的異味的小方法。如何診斷新車車内異味源?其實新車車裡異味重很大一部分原因是來自汽車内飾的味道,對于這類異味,它有可能是内飾材料本身引起的,也可能是生産裝配過程中使用的粘合劑的氣...
2024-05-03
選擇抽紙的六大技巧分享 從三方面鑒别抽紙質量的好壞
選擇抽紙的六大技巧分享 從三方面鑒别抽紙質量的好壞
抽紙是我們生活中常用的紙品,大家通常在選擇抽紙的時候最先關注的是品牌,但是現在市面上越來越多假冒僞劣的産品讓人十分不放心。那麼我們該怎麼選抽紙呢?下面作文庫知識百科就來給大家介紹一些選擇抽紙的技巧以及抽紙質量鑒别方法。一、選擇抽紙的技巧1、看外包裝正規廠家生産出的合格抽紙,在外包裝上一定會注明其執行...
2024-05-03
如何去除咖啡漬?去除衣服上咖啡漬的方法
如何去除咖啡漬?去除衣服上咖啡漬的方法
1、衣物上的咖啡漬,可先用洗滌液洗滌,然後加幾滴氨水再洗。若是羊毛服裝,不可使用氨水,因為氨水堿性很大,會破壞羊毛纖維表面的鱗狀結構,要改為用甘油液來洗。2、去咖啡漬,可立即用70-80%的熱水洗滌,便可除去。3、舊咖啡迹,可用甘油和蛋黃混合溶液擦拭,稍幹後用清水漂淨。或在污漬處塗上甘油,再撒上幾粒...
2024-05-03
讓浴室更加潔淨的小妙招
讓浴室更加潔淨的小妙招
讓浴室更加潔淨的小妙招讓浴室更加潔淨的小妙招去除水漬水龍頭等不鏽鋼制品和浴室鏡子上經常會留下水漬,看上去斑斑點點,将檸檬一切為二,用果肉擦拭不鏽鋼表面,再用紙巾擦拭,光潔立現!馬桶刷清潔很多時候人們都知道用馬桶刷來清潔坐便器,但卻少有人去關注馬桶刷自身的清潔,其實隻要在清潔坐便器後按一下沖水鍵将馬桶...
2024-05-03
純棉服裝怎麼保養呢?純棉服裝的保養方法
純棉服裝怎麼保養呢?純棉服裝的保養方法
1、純棉絨衣的保養與收藏:純棉絨衣、絨褲有良好的保暖性能,穿着時随身随體。運動自如,适宜作運動服裝、時裝及兒童套裝。這類服裝不要反穿或貼身穿着,以免損傷絨毛或沾上人體分泌物,使絨毛硬結,降低保暖性能。裝有羅紋領口、袖口的,穿脫時不要用力拉扯羅紋部分,以免造成領口、袖口松弛變形,影響其美觀和保暖性能。...
2024-05-03
Copyright 2023-2024 - www.tftnews.com All Rights Reserved