2022-9-1 ui設(shè)計(jì)分享達(dá)人
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，原本PC互聯(lián)網(wǎng)連接商業(yè)支付、購(gòu)買商品、瀏覽信息流等的能力已經(jīng)轉(zhuǎn)移到移動(dòng)端，而PC互聯(lián)網(wǎng)更加專注于其他領(lǐng)域的優(yōu)勢(shì)：
下面是我觀察到的目前比較主流的交互設(shè)計(jì)點(diǎn)，與大家分享。分別是：
典型的案例就是蘋果的Mac系統(tǒng)與Ios系統(tǒng)越發(fā)趨同，都采用了卡片化、模塊化，整個(gè)交互規(guī)范、視覺感受都一致以達(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è)：從過去復(fù)雜的信息流導(dǎo)航變?yōu)楝F(xiàn)在更加簡(jiǎn)潔的個(gè)性推薦卡片。整體體驗(yàn)與淘寶手機(jī)端一致。
總結(jié)：精簡(jiǎn)無(wú)關(guān)信息，關(guān)注最重要的核心任務(wù)，減少用戶跳出，沉浸式心流設(shè)計(jì)。
許多網(wǎng)頁(yè)接入騰訊、阿里的生態(tài)，支持掃碼關(guān)注公眾號(hào)/手機(jī)驗(yàn)證碼即可完成注冊(cè)。省去了用戶編輯個(gè)人信息、輸入郵箱、輸入密碼等復(fù)雜的交互流程。
心流式體驗(yàn)設(shè)計(jì)是這幾年很熱門的詞，指的是通過優(yōu)化用戶體驗(yàn)讓用戶能夠沉浸式地高效完成目標(biāo)任務(wù)。這需要做到產(chǎn)品的交互習(xí)慣滿足用戶使用習(xí)慣，并且交互流程滿足用戶預(yù)期。過于頻繁的彈窗打擾和頁(yè)面跳轉(zhuǎn)的等待時(shí)間都會(huì)影響用戶進(jìn)入心流。
比如，例如飛書審批，審批詳情不需要跳轉(zhuǎn)，點(diǎn)擊卡片即左側(cè)彈出詳情頁(yè)彈窗；讓用戶可以在同一個(gè)頁(yè)面即可瀏覽信息，不需要進(jìn)行跳轉(zhuǎn)到新的頁(yè)面進(jìn)行查看，方便用戶完成批量的審批任務(wù)。
再比如：阿里云，開通服務(wù)的時(shí)候不需要跳轉(zhuǎn)，而是在側(cè)邊彈出訂單彈窗，方便用戶操作。
上面說到，頻繁的彈窗提醒也會(huì)影響用戶進(jìn)入心流，用戶在對(duì)表單、畫布中的內(nèi)容進(jìn)行刪除的時(shí)候，如果使用全屏二次提醒彈窗，會(huì)感到創(chuàng)作過程被打斷。
釘釘宜搭：卡片畫布類產(chǎn)品，刪除操作時(shí)，不局限于大彈窗，而是用靠近按鈕的小彈窗，使鼠標(biāo)的滑動(dòng)路徑更短，操作更加簡(jiǎn)便；并且在不過多打擾用戶的前提下，完成了目標(biāo)操作。
復(fù)雜性守恒定律由Larry Tesler于1986年提出，也稱泰斯勒定律。指的是“任何系統(tǒng)都存在其固有的復(fù)雜性，且無(wú)法被減少，只能設(shè)法調(diào)整、平衡。我們要考慮的是，怎么樣更好地處理它，讓用戶簡(jiǎn)單、高效地使用它”。
很多的中后臺(tái)系統(tǒng)中很多表單會(huì)存在大量的配置項(xiàng)，這些配置項(xiàng)是否可以簡(jiǎn)化，讓平臺(tái)變得更簡(jiǎn)單智能？大部分時(shí)候答案都是否定的，過度追求簡(jiǎn)化往往容易弄巧成拙。功能邏輯易于解釋與理解才是更好的方案，當(dāng)你試圖簡(jiǎn)化降低復(fù)雜度，可能在其他地方埋了雷。
其中一個(gè)解決方案是將復(fù)雜度轉(zhuǎn)交給系統(tǒng)，蘋果公司的黑盒理論與此互通；就是用戶不需要了解系統(tǒng)或功能背后的實(shí)現(xiàn)邏輯，只需要關(guān)注呈現(xiàn)在用戶眼前的交互界面即可。如今數(shù)據(jù)智能化處理正不斷發(fā)展，我們也看到了智能化在PC端領(lǐng)域的應(yīng)用。
剪映相比于老牌視頻編輯軟件更加簡(jiǎn)單，提供各種在線特效模板，來降低任務(wù)復(fù)雜度。相比傳統(tǒng)的PR、AE軟件需要本地存儲(chǔ)預(yù)設(shè)文件，或者手動(dòng)編輯簡(jiǎn)單了很多。用戶不需要知道背后的實(shí)現(xiàn)的技術(shù)原理，也不需要掌握過多的特效制作、調(diào)色技巧即可完成視頻的剪輯、調(diào)色工作。
推薦組件功能：用戶在進(jìn)行流程搭建時(shí)，不需要從左側(cè)組件區(qū)拖拽組件，而是點(diǎn)擊連接線中間來添加組件。如果可以其實(shí)還可以更進(jìn)一步，就是根據(jù)后臺(tái)數(shù)據(jù)分析創(chuàng)建目標(biāo)流程需要的組件，向用戶主動(dòng)推薦相關(guān)組件，以此來降低用戶的創(chuàng)建門檻。
隨著傳統(tǒng)業(yè)務(wù)向互聯(lián)網(wǎng)轉(zhuǎn)型越發(fā)普遍，線下業(yè)務(wù)流程轉(zhuǎn)到線上的需求場(chǎng)景越來越多，一個(gè)單一的系統(tǒng)不能完全滿足所有的業(yè)務(wù)場(chǎng)景需求，由此需要一個(gè)更加靈活模塊化的系統(tǒng)來針對(duì)不同的應(yīng)用場(chǎng)景來應(yīng)用不同的產(chǎn)品架構(gòu)。而該系統(tǒng)中的功能框架、交互組件又可以重復(fù)利用，于是更加靈活、模塊化、可自定義配置的系統(tǒng)后臺(tái)越發(fā)受到歡迎。
飛書、釘釘易搭內(nèi)的審批流程、會(huì)議系統(tǒng)、工單系統(tǒng)都可以通過模塊化的組件進(jìn)行高效搭建，不需要代碼即可像搭積木一樣實(shí)現(xiàn)用戶的自定義需求。
阿里的天貓優(yōu)品電器店線下門店設(shè)計(jì)平臺(tái)，整理了線下門店所需的16個(gè)模塊（前臺(tái)、小家電中島、洗衣機(jī)、櫥窗、空調(diào)、吧臺(tái)等），通過線上三維化場(chǎng)景直接進(jìn)行可視化設(shè)計(jì)，所見即所得，并且能夠模擬現(xiàn)場(chǎng)燈光效果，根據(jù)門店現(xiàn)場(chǎng)規(guī)格，直接在三維空間里修改，快速導(dǎo)出效果圖;非常高效地完成了其他門店的需求化定制。
抖音網(wǎng)頁(yè)端的用戶體驗(yàn)沿襲了手機(jī)App端的風(fēng)格，用戶進(jìn)入網(wǎng)頁(yè)的核心目的就是看短視頻打發(fā)時(shí)間，于是進(jìn)入首頁(yè)即可看短視頻，不需要用戶手動(dòng)選擇分類，并且手機(jī)端的用戶偏好通過用戶的賬號(hào)同步至網(wǎng)頁(yè)端，有了很順暢的用戶體驗(yàn)。
相比快手網(wǎng)頁(yè)版，快手延續(xù)了常規(guī)視頻網(wǎng)站的交互方式，將視頻內(nèi)容分為短視頻、直播、同城、長(zhǎng)視頻、小劇場(chǎng)等多個(gè)類別，由用戶自主去選擇觀看的內(nèi)容，內(nèi)容雖然更加多元，但確實(shí)路徑過長(zhǎng)，不夠直接。
再舉個(gè)例子，新版的淘寶網(wǎng)頁(yè)端不再像個(gè)門戶網(wǎng)站導(dǎo)航，而是通過數(shù)據(jù)分析用戶喜好來主動(dòng)推薦代替用戶自己選擇。用戶來淘寶網(wǎng)頁(yè)端，其實(shí)并不是買東西，大眾用戶已經(jīng)習(xí)慣了在手機(jī)上進(jìn)行支付，到了網(wǎng)頁(yè)端反而會(huì)不適應(yīng)。用戶來到淘寶網(wǎng)頁(yè)端的更多目的就是逛，看有沒有自己想要的東西，遇到喜歡的，就點(diǎn)進(jìn)去看了。于是新版淘寶通過個(gè)性化推薦把過去復(fù)雜的活動(dòng)運(yùn)營(yíng)頁(yè)板塊、特價(jià)板塊、品類板塊替換掉了，讓用戶在網(wǎng)頁(yè)端獲得更好的“逛街”體驗(yàn)。
而京東，在首頁(yè)做了復(fù)雜的流量分發(fā)設(shè)計(jì)，通過不同的頻道、不同的板塊將用戶引流至相關(guān)的專題頁(yè)面，再進(jìn)行商品瀏覽。本質(zhì)上來說，用戶來到淘寶、來到京東的目的都是因?yàn)殚e，而淘寶的通過數(shù)據(jù)智能，大數(shù)據(jù)精準(zhǔn)推薦用戶喜歡的商品，簡(jiǎn)化了用戶的使用路徑，并且使整體頁(yè)面更加簡(jiǎn)潔。
網(wǎng)頁(yè)的官網(wǎng)、首頁(yè)承擔(dān)著產(chǎn)品介紹、流量分發(fā)、增強(qiáng)品牌印象等的職責(zé)。我觀察到越來越多產(chǎn)品官網(wǎng)都開始采用3D元素、視頻背景、大圖元素、微動(dòng)效來讓頁(yè)面呈現(xiàn)更加具有質(zhì)感和動(dòng)感。
它是由Web3D技術(shù)的發(fā)展而興起，能夠給網(wǎng)頁(yè)Banner帶來更強(qiáng)的視覺吸引力，同時(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ì)比明顯，也更易于用戶注意到文案信息。
大疆官網(wǎng)首屏采用了全畫幅大圖的形式展示熱門產(chǎn)品，下方的產(chǎn)品推薦頁(yè)自動(dòng)播放宣傳視頻，提升了頁(yè)面的視覺沖擊力，展示了其科技屬性。
疫情時(shí)期，線上辦公的需求和頻率激增，線上協(xié)作興起，許多辦公軟件都有了多人場(chǎng)景編輯功能。特別是對(duì)于復(fù)雜的項(xiàng)目，需要團(tuán)隊(duì)成員共同完成，協(xié)同合作的功能越來越受歡迎。
比如我們熟悉的figma，逐漸取代了傳統(tǒng)UI設(shè)計(jì)軟件ps、sketch等的頭部地位，其中的項(xiàng)目協(xié)同功能更是廣受歡迎。只需要發(fā)送項(xiàng)目鏈接邀請(qǐng)成員即可進(jìn)行項(xiàng)目協(xié)作，還支持多人標(biāo)注、語(yǔ)音溝通，大大提升了工作效率。
許多辦公軟件也都上線了類似的功能，比如幕布可以通過設(shè)置權(quán)限、發(fā)送鏈接或二維碼來邀請(qǐng)協(xié)作者共同編輯文檔，為產(chǎn)品的使用場(chǎng)景提供了更多可能。
曾鳴在《未來商業(yè)20講》里說：“未來的互聯(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ì)用戶行為偏好數(shù)據(jù)進(jìn)行分析，為用戶提供更加精準(zhǔn)的信息流的同時(shí)，還使得頁(yè)面的交互更加簡(jiǎn)單，視覺效果更加簡(jiǎn)潔，過去依賴用戶自主選擇進(jìn)行流量分發(fā)的形式將會(huì)越來越弱勢(shì)。
在工具類產(chǎn)品中，利用數(shù)據(jù)智能化可以將用戶操作上的復(fù)雜度轉(zhuǎn)移給系統(tǒng)，從而降低用戶使用門檻，提升用戶體驗(yàn)。與此同時(shí)，工具類平臺(tái)也越發(fā)靈活化化，通過模塊化設(shè)計(jì)來自定義搭建不同用戶的使用需求的產(chǎn)品，還能節(jié)省資源建設(shè)成本。
網(wǎng)絡(luò)效應(yīng)的部分應(yīng)用體現(xiàn)在用戶在使用工具類產(chǎn)品中，不再是孤單的個(gè)體，而是能通過線上協(xié)同，讓用戶與用戶之間能夠產(chǎn)生共同協(xié)作，共同交流，更加方便地完成任務(wù)。
作者：為美好而設(shè)計(jì)
轉(zhuǎn)載請(qǐng)注明：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com