欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

首頁(yè)

沉浸交互,APP 界面設(shè)計(jì)新視界

ui設(shè)計(jì)分享達(dá)人 系統(tǒng)UI設(shè)計(jì)文章及欣賞

 
在移動(dòng)互聯(lián)網(wǎng)蓬勃發(fā)展的今天,APP 已滲透到生活的各個(gè)角落。從日常社交到工作辦公,從休閑娛樂(lè)到學(xué)習(xí)求知,各類(lèi) APP 琳瑯滿目。在這激烈的競(jìng)爭(zhēng)中,融入沉浸交互理念的 APP 界面設(shè)計(jì),正成為吸引并留住用戶(hù)的核心競(jìng)爭(zhēng)力。

一、沉浸交互,突破傳統(tǒng)藩籬

傳統(tǒng) APP 界面設(shè)計(jì)多以功能展示為主,用戶(hù)操作時(shí)如同使用獨(dú)立工具,缺乏深度體驗(yàn)。而沉浸交互打破了這種局限,通過(guò)精心設(shè)計(jì),讓用戶(hù)仿若置身于與現(xiàn)實(shí)緊密相連又獨(dú)具特色的虛擬空間。
以一款旅行 APP 為例,打開(kāi)它不再是單調(diào)的景點(diǎn)、酒店列表,而是借助 3D 動(dòng)畫(huà)、全景展示等技術(shù),瞬間將用戶(hù) “傳送” 至目的地。滑動(dòng)屏幕,就像漫步當(dāng)?shù)亟窒铮稽c(diǎn)擊景點(diǎn),專(zhuān)業(yè)語(yǔ)音講解隨即響起,用戶(hù)從信息被動(dòng)接收者,轉(zhuǎn)變?yōu)橹鲃?dòng)參與者。

二、沉浸交互的關(guān)鍵要素

  1. 視覺(jué)沉浸:精美的界面是吸引用戶(hù)的敲門(mén)磚。高清圖片、協(xié)調(diào)的色彩搭配與流暢動(dòng)畫(huà),共同營(yíng)造出逼真且極具吸引力的視覺(jué)環(huán)境。攝影類(lèi) APP 在圖片展示時(shí)采用全屏高清,并搭配細(xì)膩光影,讓用戶(hù)仿若置身拍攝現(xiàn)場(chǎng)。
  1. 聽(tīng)覺(jué)沉浸:合適的音效能強(qiáng)化沉浸感。游戲 APP 中逼真的環(huán)境音效與緊張背景音樂(lè),能讓玩家迅速投入;冥想類(lèi) APP 里舒緩的自然音效,如潺潺流水、悠悠鳥(niǎo)鳴,幫助用戶(hù)放松身心,沉浸其中。
  1. 操作沉浸:簡(jiǎn)潔、流暢且符合用戶(hù)習(xí)慣的操作流程至關(guān)重要。短視頻 APP 用戶(hù)只需上下滑動(dòng)就能瀏覽視頻,簡(jiǎn)單便捷,無(wú)需思索操作步驟,便可沉浸于內(nèi)容海洋。

三、沉浸交互的顯著優(yōu)勢(shì)

  1. 提升用戶(hù)體驗(yàn):豐富有趣的交互體驗(yàn),大幅提高用戶(hù)滿意度與忠誠(chéng)度。
  1. 增強(qiáng)用戶(hù)粘性:用戶(hù)沉浸其中,更愿投入時(shí)間,APP 的使用時(shí)長(zhǎng)和打開(kāi)頻率隨之增加。
  1. 助力品牌塑造:獨(dú)特的交互設(shè)計(jì)使 APP 在競(jìng)品中脫穎而出,塑造鮮明品牌形象,讓用戶(hù)記憶深刻。

四、未來(lái)展望

隨著 VR、AR 等技術(shù)的成熟,沉浸交互在 APP 界面設(shè)計(jì)中的應(yīng)用將更加廣泛深入。未來(lái),我們或許能通過(guò)手機(jī)參加虛擬演唱會(huì),足不出戶(hù)游覽全球博物館。
沉浸交互為 APP 界面設(shè)計(jì)開(kāi)拓了新視野,讓 APP 從單純的工具,轉(zhuǎn)變?yōu)槌錆M無(wú)限可能的體驗(yàn)平臺(tái)。開(kāi)發(fā)者與設(shè)計(jì)師應(yīng)持續(xù)探索創(chuàng)新,將沉浸交互發(fā)揮到極致,為用戶(hù)帶來(lái)更多精彩。

蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

講講AI在B端設(shè)計(jì)上的應(yīng)用方法

ui設(shè)計(jì)分享達(dá)人 B端ui設(shè)計(jì)文章及欣賞

B 端設(shè)計(jì)領(lǐng)域的 AI 應(yīng)用
大多數(shù)同學(xué)目前對(duì) AI 應(yīng)用的認(rèn)識(shí)只有文生圖、對(duì)話、駕駛等領(lǐng)域,但 AI 應(yīng)用的場(chǎng)景遠(yuǎn)遠(yuǎn)不止它們。
和頭部的明星 AI 產(chǎn)品、模型相比,細(xì)分市場(chǎng)的 AI 應(yīng)用就非常沒(méi)有存在感了。比如使用 AI 進(jìn)行財(cái)務(wù)的審核、飲料配方的調(diào)節(jié)、工程安全的模擬等等,它可以幫助企業(yè)節(jié)約大量的人力完成工作。
概括起來(lái),就是一些可以通過(guò)計(jì)算機(jī)完成的(也不止)重復(fù)性勞動(dòng)或標(biāo)準(zhǔn)化流程,都可以引入 AI 的技術(shù)進(jìn)行降本增效。
那在 UI 設(shè)計(jì)領(lǐng)域中,這些重復(fù)性和標(biāo)準(zhǔn)化的工作內(nèi)容有嘛?
有,但是并不會(huì)像外行或者新手想象的那么多。AI 難以覆蓋的場(chǎng)景我們過(guò)去的分享探討過(guò),等等也會(huì)做進(jìn)一步的說(shuō)明,而這里我們先要探討的,就是能用 AI 實(shí)現(xiàn)的 B 端設(shè)計(jì)場(chǎng)景,具體有哪些。
我們都知道市面上現(xiàn)在有很多開(kāi)源的 B 端前端框架,各個(gè)大廠前赴后繼地對(duì)它們進(jìn)行更新和完善,里面包含了非常豐富的組件庫(kù)。
講講AI在B端設(shè)計(jì)上的應(yīng)用方法
 
 
這些組件庫(kù)不不止是 UI 的組件,也包含了前端的對(duì)應(yīng)代碼,前端工程師可以快速調(diào)用這些代碼組件而不用自己去重新寫(xiě)一遍樣式和交互。
原則上,使用現(xiàn)成的組件開(kāi)發(fā)就可以快速完成整套項(xiàng)目的前端內(nèi)容,這可以給前端工程師節(jié)省大量時(shí)間。所以即使項(xiàng)目中有完整的設(shè)計(jì)稿,前端在開(kāi)發(fā)過(guò)程中也會(huì)偷懶直接略過(guò),直接套用框架內(nèi)的組件實(shí)現(xiàn)。
這和設(shè)計(jì)師直接套用素材完成運(yùn)營(yíng)圖設(shè)計(jì)一樣,明明有現(xiàn)成的素材在那里,為什么要浪費(fèi)一大堆時(shí)間自己重新畫(huà)一遍還是用 3D 建模渲染?同理,要是組件足夠豐富,滿足項(xiàng)目的需要,設(shè)計(jì)師也可以直接復(fù)用官方的組件素材,不用自己設(shè)計(jì)。
組件化思維的運(yùn)用,就是項(xiàng)目工作標(biāo)準(zhǔn)化和重復(fù)性的根源,不僅應(yīng)用在設(shè)計(jì)領(lǐng)域,對(duì)于前、后端開(kāi)發(fā)來(lái)說(shuō)同理。
基于這種思路,催生出了一種新的 SaaS 模式 —— 低代碼 Low-Code 服務(wù)。
即通過(guò)少量的代碼,或者干脆不用代碼,僅通過(guò)可視的工具和組件實(shí)現(xiàn)軟件的開(kāi)發(fā),并完成相應(yīng)的配置和部署的工具。
這概念咋一看不就是建站工具?比如有贊、微店之類(lèi)的,用戶(hù)可以在里面直接創(chuàng)建并配置店鋪,然后以網(wǎng)頁(yè)、H5 或小程序的形式發(fā)布。
但這只是最初級(jí)的應(yīng)用,傳統(tǒng)的建站工具屬于幫你預(yù)制好了主要的參數(shù)和功能,用戶(hù)只能在這個(gè)范圍內(nèi)做少量的自定義編輯和設(shè)置。但進(jìn)階的 Low-Code,會(huì)賦予用戶(hù)更大的編輯范圍和自由度,讓用戶(hù)通過(guò)可視化的界面創(chuàng)建自己想要的產(chǎn)品和功能。
講講AI在B端設(shè)計(jì)上的應(yīng)用方法
 
 
這類(lèi)產(chǎn)品已經(jīng)衍生出一個(gè)規(guī)模不小的市場(chǎng),因?yàn)橛写罅康闹行∑髽I(yè)不想投入太多的精力和成本進(jìn)數(shù)字化平臺(tái)的搭建上,
并希望能快速創(chuàng)建不同的管理工具來(lái)匹配企業(yè)日新月異的發(fā)展需要
這里要?jiǎng)澲攸c(diǎn),對(duì)于一部分企業(yè)來(lái)說(shuō),經(jīng)營(yíng)模式和業(yè)務(wù)流程是持續(xù)迭代的,如果使用傳統(tǒng)的開(kāi)發(fā)模式那么很難跟上這種迭代。
以連鎖餐飲品牌舉例,前期只在一個(gè)城市經(jīng)營(yíng),和后期擴(kuò)張到全省或全國(guó),采購(gòu)流程和供應(yīng)鏈管理必然會(huì)持續(xù)進(jìn)行調(diào)整,提交一個(gè)采購(gòu)工單所需填寫(xiě)的字段就會(huì)發(fā)生變化,同理展示的表格、詳情頁(yè)也要跟著調(diào)整。
這類(lèi)變化往往并沒(méi)有修改界面的視覺(jué)、交互、組件,僅僅是增加和減少字段數(shù)據(jù),而用傳統(tǒng)的收集需求再輸出進(jìn)行開(kāi)發(fā)的模式效率非常低,所以它們就成為 Low-Code 的最佳應(yīng)用場(chǎng)景。業(yè)務(wù)方自己配置、修改直接上線,省掉產(chǎn)品經(jīng)理、設(shè)計(jì)師、程序員中間耗差時(shí)……
并且對(duì)于很多企業(yè)來(lái)說(shuō),只需要應(yīng)用一些非常基礎(chǔ)的功能服務(wù)和頁(yè)面類(lèi)型。比如我經(jīng)常提到的 B 端管理系統(tǒng)的四個(gè)核心頁(yè)面類(lèi)型:
講講AI在B端設(shè)計(jì)上的應(yīng)用方法
 
 
Low-Code 就是把常規(guī)需求標(biāo)準(zhǔn)化,并運(yùn)用組件化的框架,讓用戶(hù)通過(guò)簡(jiǎn)單的填寫(xiě)和編輯就能生成出想要的頁(yè)面和功能。
既然需求不復(fù)雜,功能、組件、頁(yè)面、代碼都可以標(biāo)準(zhǔn)化,那不用 AI 降本增效還有王法嘛?
所以,使用 AI 生成 B 端頁(yè)面(不是設(shè)計(jì)稿)的工具已經(jīng)在大廠內(nèi)部開(kāi)始應(yīng)用了,開(kāi)發(fā)專(zhuān)屬大模型,再把做好的組件喂給模型,用戶(hù)只要在相應(yīng)的表單內(nèi)填入需求,就可以快速生成出落地的頁(yè)面。
并且各家大廠內(nèi)部的 B 端組件庫(kù),可遠(yuǎn)遠(yuǎn)不止對(duì)外分享的這些開(kāi)源框架里包含的數(shù)量,還有很多特殊的業(yè)務(wù)組件,可以讓模型得到更好的訓(xùn)練和產(chǎn)出,比普通 Low-Code 模式更簡(jiǎn)單高效,大幅度提升企業(yè)內(nèi)部B端產(chǎn)品的落地和運(yùn)用效率。
從已經(jīng)了解到的信息中,有一部分業(yè)務(wù)部門(mén)已經(jīng)開(kāi)始進(jìn)入實(shí)踐環(huán)節(jié)了。且隨著技術(shù)的迭代,這種工具必然會(huì)越來(lái)越強(qiáng)大,功能越來(lái)越豐富。
所以,了解完這個(gè)趨勢(shì),設(shè)計(jì)師和前端工程師迎來(lái)大結(jié)局了?要被AI技術(shù)清洗了?現(xiàn)在該捧起《從0到1學(xué)習(xí)炒粉》學(xué)習(xí)了嘛?
這就是下面要討論的內(nèi)容。
B 端 AI 和設(shè)計(jì)的關(guān)聯(lián)
前面做了不少鋪墊,就是為了強(qiáng)調(diào),適用于 Low-Code 和 AI 生成的 B 端產(chǎn)品,是有前提條件的,包含下面這些要素:
  •  
    完整成熟的前后端組件庫(kù)
  •  
    需求使用基礎(chǔ)做法就能實(shí)現(xiàn)
  •  
    需要經(jīng)常變動(dòng)調(diào)整的業(yè)務(wù)需求
  •  
    對(duì)設(shè)計(jì)和交互本身要求不高
而這里面最關(guān)鍵的東西,就是標(biāo)準(zhǔn)化。必須要知道在今天的 AI 的應(yīng)用發(fā)展中,要生成出符合實(shí)際工作需要的結(jié)果,絕對(duì)不是靠輸入信息以后它自己 “蒙” 出來(lái)的。為了讓結(jié)果盡可能準(zhǔn)確,那么喂給模型的數(shù)據(jù)也就要越多且越有針對(duì)性。
理論上面向 B 端的 AI 工具,只要不斷提供給他新的組件、頁(yè)面,就能拓展它可以實(shí)現(xiàn)的范圍。但不管你怎么訓(xùn)練它,都要滿足標(biāo)準(zhǔn)化的前提。
而標(biāo)準(zhǔn)化,恰恰就是國(guó)內(nèi) B 端業(yè)務(wù)的命門(mén)……
我們都知道國(guó)內(nèi) SaaS 行業(yè)現(xiàn)在發(fā)展非常的混亂,雖然在不同的細(xì)分領(lǐng)域有自己的獨(dú)角獸,比如財(cái)務(wù)領(lǐng)域的金蝶,OA 領(lǐng)域的釘釘,ERP 領(lǐng)域的用友等等。
但是這些公司就發(fā)展?fàn)顩r良好利潤(rùn)豐厚了?24年一季度的 SaaS 頭部公司業(yè)績(jī)非常蕭條,比如網(wǎng)上找到的統(tǒng)計(jì),和國(guó)外 SaaS 頭部公司的估值和利潤(rùn)形成鮮明的對(duì)比:
講講AI在B端設(shè)計(jì)上的應(yīng)用方法
 
 
為什么國(guó)內(nèi) SaaS 市場(chǎng)那么慘淡?說(shuō)到底就是在國(guó)內(nèi) B 端領(lǐng)域很難實(shí)現(xiàn)真正的標(biāo)準(zhǔn)化,而不是國(guó)內(nèi) B 端市場(chǎng)規(guī)模太小。
比如釘釘、飛書(shū)這樣的 OA 軟件已經(jīng)很成熟了,但它們的實(shí)際普及程度一點(diǎn)都不高,而中大型企業(yè)又有各種考量,現(xiàn)成的不用就熱衷于開(kāi)發(fā)一套自己的系統(tǒng),簡(jiǎn)稱(chēng)定制化。這就倒逼 SaaS 工具為了滿足更多的企業(yè)需求,拼命疊加功能,使得這些 SaaS 工具一個(gè)比一個(gè)臃腫。
而我們前面提到的 AI 生成,想要普及同樣需要面對(duì)這種困境,因?yàn)槟P筒还茉趺醋觯际腔谔囟?biāo)準(zhǔn)化下的產(chǎn)物,它可以滿足其中一部分需求,但難以滿足其它需求。尤其是國(guó)內(nèi) B 端定制化需求中,混亂、抽象、聯(lián)系復(fù)雜的問(wèn)題非常突出。
換句話說(shuō),國(guó)內(nèi) B 端市場(chǎng)的大多數(shù)系統(tǒng),是非標(biāo)準(zhǔn)化的,需要產(chǎn)品團(tuán)隊(duì)在面對(duì)這些非標(biāo)準(zhǔn)的需求下做出創(chuàng)新和適配,就必須要考慮很多抽象的因素,領(lǐng)導(dǎo)、背景、體驗(yàn)、交互、周期、難度等等。這個(gè)過(guò)程不可能由業(yè)務(wù)方自己完成,且最終導(dǎo)出的設(shè)計(jì)結(jié)果,往往會(huì)和常規(guī)方案有很大的差異。
按常規(guī)邏輯考慮的話,那有多少組件我們整理多少組件,早晚有一天不得窮盡設(shè)計(jì)師思考范圍的邊界?
且不說(shuō)獲得不同商業(yè)項(xiàng)目的業(yè)務(wù)組件有多困難,如果組件之間沒(méi)有更底層的思路去規(guī)范它們的設(shè)計(jì)和交互,那么硬湊到一起的項(xiàng)目是非常割裂的,而 AI 在短時(shí)間內(nèi)沒(méi)辦法做到真正理解交互的邏輯并根據(jù)使用場(chǎng)景做理性的推理。
所以基于一套團(tuán)隊(duì)產(chǎn)出的組件必然是有限的,它們或許可以滿足自己項(xiàng)目,但不可能滿足市面上所有項(xiàng)目的使用需求。
還有一個(gè)很關(guān)鍵的疑問(wèn),就是很多人會(huì)想,一個(gè)項(xiàng)目中的特殊組件往往只是少數(shù),我們用 AI 工具生成多數(shù)頁(yè)面,少數(shù)進(jìn)行定制和獨(dú)立開(kāi)發(fā)不就行了?
這思路在邏輯上很合理,但實(shí)踐起來(lái)的問(wèn)題非常多。舉個(gè)例子比如設(shè)計(jì)稿直接生成網(wǎng)頁(yè)這種技術(shù),從20年前我剛了解到網(wǎng)頁(yè)設(shè)計(jì)那天說(shuō)到現(xiàn)在了,這個(gè)實(shí)現(xiàn)邏輯理應(yīng)不需要 AI 的參與都能做到,中間也問(wèn)世了不少產(chǎn)品和工具,但沒(méi)有一個(gè)做成了,反而網(wǎng)頁(yè)前端工程師都成為一個(gè)獨(dú)立熱門(mén)職業(yè)了(以前是 UI 寫(xiě))。
原因就是作為商業(yè)項(xiàng)目來(lái)說(shuō),團(tuán)隊(duì)需要 “可控性”,機(jī)器生成代碼雖然容易,但是如果要修改里面的東西怎么辦?實(shí)際情況就是前端對(duì)這些外部代碼深?lèi)和唇^,因?yàn)楦钠饋?lái)太麻煩,而越大的項(xiàng)目改起來(lái)難度也越高。而且這個(gè)版本的一部分你改了,下個(gè)版本工具再生成的代碼要不要兼容你前面寫(xiě)的東西?
所以現(xiàn)在即使有設(shè)計(jì)稿直接生成代碼的工具前端也寧愿自己寫(xiě),但當(dāng)他們用到第三方框架的時(shí)候,能不動(dòng)框架里面的東西就不動(dòng)。想要理解這個(gè)感受,只要拿這些框架的組件素材用它們的組件、自動(dòng)布局形式做完一個(gè)項(xiàng)目,你們就會(huì)產(chǎn)生 —— 還不如自己重做一遍的想法。
講講AI在B端設(shè)計(jì)上的應(yīng)用方法
 
 
所以生成工具,要不然能一次性完整滿足所有需求,要不然就會(huì)因?yàn)閮扇傻娜笨谛纬芍旅钠款i。當(dāng)然,還有遠(yuǎn)比這些復(fù)雜的進(jìn)一步因素,我就不在這里展開(kāi)。
標(biāo)準(zhǔn)化無(wú)法在定制化的面前獲得優(yōu)勢(shì),這是國(guó)內(nèi) B 端行業(yè)面臨的直接困局,當(dāng)然這里有壞的影響也有好的影響。
壞的影響,就是頭部 SaaS 企業(yè)沒(méi)辦法得到快速的發(fā)展,推高整個(gè) B 端軟件業(yè)的收入水平和吸引力,AI 生成頁(yè)面這些技術(shù)適用范圍小,沒(méi)辦法真惠及全體,行業(yè)處于反復(fù)造輪子但根本沒(méi)辦法停下來(lái)。
好的影響,則是頭部的 SaaS 企業(yè)發(fā)展不起來(lái),市占率就低,它們就沒(méi)辦像 C 端市場(chǎng)一樣形成非常顯著的馬太效應(yīng),形成事實(shí)的壟斷。大家重復(fù)造輪子,那么提供的就業(yè)崗位才多,才能讓我國(guó)的炒粉行業(yè)沒(méi)有那么卷,競(jìng)爭(zhēng)沒(méi)有那么激烈(???)……
講講AI在B端設(shè)計(jì)上的應(yīng)用方法
 
 
如果你關(guān)注過(guò) B 端市場(chǎng)足夠多年,你就會(huì)明白任何企圖用一種標(biāo)準(zhǔn)、方法論直接平鋪整個(gè)行業(yè)的做法,注定是徒勞的,而無(wú)序、野蠻、熵增才是不變的主旋律。
但 AI 的作用短時(shí)間內(nèi)完全發(fā)揮不了嗎?也不是。除了前面提到的一些簡(jiǎn)單的項(xiàng)目之外,還有一個(gè)非常大的可能,就是中小模型的開(kāi)發(fā)會(huì)變得越來(lái)越容易,而基于項(xiàng)目自研的界面 AI 生成工具很有可能會(huì)普及起來(lái)。雖然它們不能隨心所欲生成任何需求的樣式,但可以完全根據(jù)業(yè)務(wù)方的實(shí)際需要進(jìn)行定制,去服務(wù)小范圍的群體。
這不代表項(xiàng)目里面就不需要設(shè)計(jì)師,符合這套項(xiàng)目的標(biāo)準(zhǔn)依舊需要設(shè)計(jì)師去制定,也需要設(shè)計(jì)師持續(xù)輸出特殊的頁(yè)面和組件。
所以,未來(lái)很長(zhǎng)一段時(shí)間內(nèi) AI 和 B 端 UI 設(shè)計(jì)師之間會(huì)是互補(bǔ)的關(guān)系,而不是替代關(guān)系。這也會(huì)對(duì)崗位要求形成進(jìn)一步的影響,所以下面是我對(duì) B 端 UI 設(shè)計(jì)師所需技能的建議:
  1.  
    進(jìn)一步提升交互能力,尤其是基于業(yè)務(wù)認(rèn)知輸出交互方案的抽象思維能力
  2.  
    進(jìn)一步鞏固項(xiàng)目設(shè)計(jì)規(guī)范的創(chuàng)建能力,深入了解規(guī)范的應(yīng)用和落地流程
  3.  
    進(jìn)一步提升全局性設(shè)計(jì)思維,能提煉核心價(jià)值觀并在項(xiàng)目中進(jìn)行應(yīng)用
  4.  
    進(jìn)一步了解編程開(kāi)發(fā)邏輯,能更好的配合前后端完成項(xiàng)目的輸出提高效率
這些能力的掌握是 B 端 UI 設(shè)計(jì)師應(yīng)對(duì)未來(lái)市場(chǎng)變化的核心競(jìng)爭(zhēng)力,也是 AI 在短時(shí)間內(nèi)絕對(duì)無(wú)法替代的東西。
不管是作為已經(jīng)入行的,還是準(zhǔn)備入行的 B 端設(shè)計(jì)新人,都不用對(duì) AI 技術(shù)在 B 端的影響太過(guò)擔(dān)心,自怨自艾,因?yàn)?/span>
如果 B 端項(xiàng)目的設(shè)計(jì)都那么簡(jiǎn)單的話,那么從前端框架普及的那一天起,B 端 UI 設(shè)計(jì)師就可以集體下崗,而不用等到 AI 應(yīng)用的那天
換個(gè)表述方式,祝大家不會(huì)菜到那么輕易就被 AI 給取代了……


作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZMTYzNzg4MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

藍(lán)藍(lán)設(shè)計(jì)(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶(hù)體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢(xún)高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢(xún)UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司用戶(hù)體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

 

以用戶(hù)為中心的交互設(shè)計(jì)思維

ui設(shè)計(jì)分享達(dá)人

聊聊關(guān)于設(shè)計(jì)思維的內(nèi)容,會(huì)從產(chǎn)品設(shè)計(jì)、體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)三個(gè)方面入手。
目前是第三篇,關(guān)于交互設(shè)計(jì)思維的內(nèi)容。到這里設(shè)計(jì)思維的內(nèi)容全部結(jié)束了。
感謝
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
以用戶(hù)為中心的交互設(shè)計(jì)思維
 
 
 


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈

ui設(shè)計(jì)分享達(dá)人

這兩年生成式ai爆發(fā)性增長(zhǎng)并且重塑數(shù)字創(chuàng)作的工具生態(tài)。從文本生成、圖像視頻生成以及模型訓(xùn)練,可以說(shuō)無(wú)法離開(kāi)ai,ai的介入讓創(chuàng)意生產(chǎn)變得前所未有的高效簡(jiǎn)單,但同時(shí)也帶來(lái)了體驗(yàn)上的困境,例如我們?cè)谑褂米詣?dòng)化生成便利的同時(shí),還能保持對(duì)創(chuàng)作過(guò)程的深層控制?比如在進(jìn)行文生圖或者線稿轉(zhuǎn)3D的流程中,我們?nèi)绻刂颇硞€(gè)部分的設(shè)計(jì)表現(xiàn),需要利用多個(gè)方法才能完成,僅僅通過(guò)提示詞的修改并無(wú)法完成,這個(gè)矛盾在之前的SD等開(kāi)源模型中非常明顯;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
 
算法模型的開(kāi)放讓設(shè)計(jì)達(dá)到了無(wú)限的可能,但更多設(shè)計(jì)師卻被迫在控制權(quán)和易用性之間做出了妥協(xié),當(dāng)重復(fù)一個(gè)流程無(wú)法生成滿意的圖象時(shí),大多情況都是基于一個(gè)“不滿意”的圖像進(jìn)行優(yōu)化,我把這個(gè)理解為用戶(hù)心理上的妥協(xié);
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
以節(jié)點(diǎn)式工作流工具ComfyUI為例,其通過(guò)可視化編程賦予用戶(hù)對(duì)Stable Diffusion生成流程的精細(xì)控制權(quán),允許自由組合模型、調(diào)節(jié)參數(shù)、插入預(yù)處理模塊,成為專(zhuān)業(yè)創(chuàng)作者的首選工具。然而,這種高度自由的設(shè)計(jì)也帶來(lái)了顯著的認(rèn)知負(fù)擔(dān):錯(cuò)綜復(fù)雜的節(jié)點(diǎn)連線、晦澀的參數(shù)術(shù)語(yǔ)、缺乏引導(dǎo)的開(kāi)放式畫(huà)布,讓0基礎(chǔ)設(shè)計(jì)望而止步;數(shù)據(jù)顯示,超過(guò)67%的新用戶(hù)在首次使用ComfyUI時(shí)因“界面混亂”而放棄進(jìn)一步探索(來(lái)源:ComfyUI社區(qū)調(diào)研)。這一現(xiàn)象揭示了生成式AI工具設(shè)計(jì)的核心矛盾——系統(tǒng)的靈活性與用戶(hù)的心智模型之間如何實(shí)現(xiàn)平衡?
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
一、核心問(wèn)題與矛盾
1、設(shè)計(jì)師對(duì)“控制權(quán)”的需求本質(zhì)
安全感需求:
用戶(hù)希望理解生成過(guò)程(分布控制、seed數(shù)值、CFG),避免黑箱帶來(lái)的不可預(yù)測(cè)性;
注:大多數(shù)AI工具(如Midjourney)像一臺(tái)自動(dòng)售貨機(jī)——輸入提示詞,隨機(jī)吐出一張圖片。用戶(hù)無(wú)法知曉AI為何生成一只三頭六臂的貓,只能反復(fù)“抽卡”直到滿意。
 
創(chuàng)造性需求:
通過(guò)精細(xì)化的控制實(shí)現(xiàn)獨(dú)特的風(fēng)格,例如分布提示,基于大模型訓(xùn)練出來(lái)的lora,不同lora模型融合后的混合模型,這些需要付出很大的學(xué)習(xí)成本和時(shí)間才能滿足,我個(gè)人理解ai給設(shè)計(jì)師通往目標(biāo)的過(guò)程中搭建了不同的道路,但設(shè)計(jì)師如果在沒(méi)有導(dǎo)航的情況下要達(dá)到這個(gè)目標(biāo),中間可能會(huì)輾轉(zhuǎn)反側(cè),也可能一條道路就能到達(dá)目的地;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
效率需求:
自動(dòng)化設(shè)計(jì)(如MJ和國(guó)內(nèi)其他一鍵生圖的ai產(chǎn)品)可以降低設(shè)計(jì)的操作成本,但同時(shí)犧牲了可控性;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
2、comfyUI的設(shè)計(jì)矛盾
過(guò)度控制悖論:
ComfyUI試圖打破黑箱,將AI拆解成可調(diào)節(jié)的“齒輪組”(如調(diào)節(jié)“采樣器”改變畫(huà)質(zhì)、用“ControlNet”控制構(gòu)圖)。但當(dāng)用戶(hù)面對(duì)50多個(gè)參數(shù)和上百種節(jié)點(diǎn)時(shí),反而因信息過(guò)載陷入“該調(diào)哪個(gè)參數(shù)?連錯(cuò)節(jié)點(diǎn)會(huì)爆炸嗎?”的決策癱瘓。
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
過(guò)高的配置要求:
comfyUI解決了MJ帶來(lái)的黑箱效應(yīng),但同時(shí)也帶來(lái)了物質(zhì)上的門(mén)檻,設(shè)計(jì)師需要配備更高的配置或者使用第三方租用云電腦等才能運(yùn)行,否則前者就會(huì)造成漫長(zhǎng)的等待,后者則需要花費(fèi)大量的財(cái)力,對(duì)于設(shè)計(jì)師而言反而是造成了時(shí)間上的負(fù)荷;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
功能維度:
節(jié)點(diǎn)系統(tǒng)支持無(wú)限組合,但缺乏對(duì)用戶(hù)意圖的主動(dòng)理解,如自動(dòng)推薦節(jié)點(diǎn);
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
認(rèn)知維度:
參數(shù)暴露(如CFG Scale、Sampler)提供控制感,但引發(fā)“選擇過(guò)載”實(shí)際使用過(guò)程中,如果是普通玩家,無(wú)法短時(shí)間內(nèi)通過(guò)這些參數(shù)來(lái)控制結(jié)果,核心還是在于認(rèn)知門(mén)檻過(guò)高;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
交互維度:
自由連接節(jié)點(diǎn)導(dǎo)致邏輯混亂(如錯(cuò)誤連線無(wú)及時(shí)提示),增加調(diào)試成本。
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
我把ControlNet的“負(fù)面條件”打亂連接到“正面clip文本框”上,而采樣器的“負(fù)面條件”直接連接到“負(fù)面clip文本框”內(nèi),整個(gè)過(guò)程是不會(huì)出現(xiàn)任何報(bào)錯(cuò)提示,但是當(dāng)運(yùn)行調(diào)試的時(shí)候就會(huì)運(yùn)行失敗,提示ControlNet缺少負(fù)面條件,ControlNet(應(yīng)用)缺少負(fù)面條件輸出等問(wèn)題,眾所周知對(duì)于一些低配玩家,運(yùn)行一次需要等很久,等到最后發(fā)現(xiàn)生產(chǎn)出來(lái)一個(gè)“報(bào)錯(cuò)”!!!
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
二、對(duì)比分析:comfyUI和midjourney
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
當(dāng)設(shè)計(jì)師想生成“一只穿宇航服的柴犬”,Midjourney可能輸出卡通風(fēng)格或超現(xiàn)實(shí)照片,設(shè)計(jì)師只能通過(guò)追加提示詞(如“3D、黏土”)逼近目標(biāo),不停的抽卡;
(實(shí)在不想用mj了,下面的圖本地跑的,大概的意思一樣就是不停的抽卡抽卡)
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
在ComfyUI中,設(shè)計(jì)師可以強(qiáng)制指定:用FLUX模型生成基礎(chǔ)圖像,然后加載相關(guān)LoRA模型,在添加個(gè)視覺(jué)風(fēng)格遷移的模型,添加宇航服,在添加個(gè)視覺(jué)風(fēng)格模型,連接OpenPose節(jié)點(diǎn)調(diào)整柴犬姿勢(shì),最后用放大模型,放大畫(huà)質(zhì);但我就想說(shuō):我只是想畫(huà)只貓,為什么要弄這么復(fù)雜。。。
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
關(guān)鍵結(jié)論:
ComfyUI的“高可控性”吸引專(zhuān)家設(shè)計(jì)師,但普通設(shè)計(jì)師或者0基礎(chǔ)設(shè)計(jì)師因認(rèn)知負(fù)荷大多放棄使用。Midjourney通過(guò)“限制控制權(quán)”降低門(mén)檻,但設(shè)計(jì)師可能因無(wú)法干預(yù)細(xì)節(jié)感到焦慮。
三、comfyui沖突點(diǎn)和機(jī)會(huì)點(diǎn)
為什么說(shuō)這個(gè)呢,因?yàn)閏omfyui目前是趨勢(shì)ai,核心的生成邏輯包括實(shí)際應(yīng)用都已經(jīng)大于mj了,所以接下來(lái)的內(nèi)容也是圍繞comfyui拆解的;
1、參數(shù)暴露vs認(rèn)知負(fù)荷
問(wèn)題:
ComfyUI將所有參數(shù)(如LoRA權(quán)重、VAE選擇、采樣器、各種模型加載器)暴露給用戶(hù),導(dǎo)致界面信息過(guò)載。
例如:
設(shè)計(jì)師需要同時(shí)調(diào)整“提示詞權(quán)重”“采樣器類(lèi)型”“ControlNet強(qiáng)度”時(shí),易混淆參數(shù)優(yōu)先級(jí),對(duì)于這個(gè)結(jié)果的影響,是采樣器類(lèi)型問(wèn)題呢還是ControlNet的數(shù)值不對(duì)呢,最后我猜大多人過(guò)程都是一個(gè)個(gè)試一遍,最后哪個(gè)效果好用哪個(gè);
思考點(diǎn):
動(dòng)態(tài)參數(shù)分組,根據(jù)生成的目標(biāo)隱藏?zé)o關(guān)的參數(shù),比如當(dāng)輸入完成“提示詞”后,可以識(shí)別出輸入的提示詞類(lèi)型,生成一個(gè)3d風(fēng)格海報(bào),那么基于這個(gè)提示詞,就可以提前預(yù)判出跟3d風(fēng)格海報(bào)相關(guān)的參數(shù)都可以隱藏;參數(shù)依賴(lài)的可視化,通過(guò)邏輯線的方式標(biāo)記他們之間的關(guān)系,例如CFG與采樣步數(shù),通常來(lái)講CFG數(shù)值越高生成的圖越接近提示詞,但是圖像質(zhì)量會(huì)下降,采樣步數(shù)越高生成的圖質(zhì)量就越高,那么問(wèn)題來(lái)了,當(dāng)設(shè)計(jì)師調(diào)整CFG數(shù)值時(shí),是不是可以標(biāo)記或者提示設(shè)計(jì)師采樣步數(shù)的變化,以此來(lái)達(dá)到最優(yōu)解;
下方示例
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
2、自由連接vs邏輯錯(cuò)誤
問(wèn)題:
節(jié)點(diǎn)可任意連接,但缺乏邏輯校驗(yàn)?zāi)壳癱omfyUI中只是告訴設(shè)計(jì)師如果兩個(gè)節(jié)點(diǎn)本身沒(méi)有前后關(guān)系的情況下不可以連接(沒(méi)有節(jié)點(diǎn)對(duì)應(yīng)的收入口)另一種情況是兩個(gè)節(jié)點(diǎn)在一個(gè)工作流中都能起到作用,但是節(jié)點(diǎn)是多功能化的,連線的時(shí)候可以正常連接,最后運(yùn)行的時(shí)候就會(huì)出現(xiàn)某某節(jié)點(diǎn)不匹配。
例如:
設(shè)計(jì)師錯(cuò)誤連接ControlNet預(yù)處理器與VAE節(jié)點(diǎn),導(dǎo)致生成失敗且無(wú)報(bào)錯(cuò)提示。
思考點(diǎn):
實(shí)時(shí)邏輯校驗(yàn),在設(shè)計(jì)師連線時(shí)提示沖突(如“該節(jié)點(diǎn)僅接受潛空間輸入”)。
工作流自檢模式,一鍵檢測(cè)缺失節(jié)點(diǎn)(如缺少“提示詞編碼器”時(shí)提醒用戶(hù))。
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
四、設(shè)計(jì)師心理與工具的“錯(cuò)位戰(zhàn)爭(zhēng)”
生成式AI工具的設(shè)計(jì)矛盾,本質(zhì)上是人類(lèi)認(rèn)知模式與技術(shù)邏輯的沖突。以ComfyUI為例,其設(shè)計(jì)暴露了以下深層問(wèn)題:
1、“技術(shù)透明化”的認(rèn)知陷阱
ComfyUI將AI生成過(guò)程拆解為節(jié)點(diǎn),試圖通過(guò)“透明化”提升用戶(hù)信任,但普通人并不需要(也無(wú)法理解)技術(shù)細(xì)節(jié);不知道你們有沒(méi)有,當(dāng)我第一次看到“VAE解碼器”“潛在空間降噪”等節(jié)點(diǎn)時(shí),大腦會(huì)觸發(fā)“意義建構(gòu)焦慮”——“這些詞和我想要的圖片有什么關(guān)系?”
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
2、控制權(quán)的“虛假承諾”
ComfyUI看似賦予用戶(hù)完全控制權(quán),但多數(shù)參數(shù)的實(shí)際影響難以預(yù)測(cè)(如CFG值從7到8可能導(dǎo)致畫(huà)風(fēng)突變)這類(lèi)似于讓設(shè)計(jì)師駕駛一輛方向盤(pán)與輪胎無(wú)機(jī)械連接的汽車(chē),轉(zhuǎn)動(dòng)方向盤(pán)時(shí),輪胎可能隨機(jī)偏轉(zhuǎn)。設(shè)計(jì)師誤以為“控制節(jié)點(diǎn)=控制結(jié)果”,實(shí)則是“在黑暗中調(diào)整未知旋鈕”;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
3. 技術(shù)極客與大眾的“認(rèn)知斷層”
開(kāi)源社區(qū)的理想:“人人可 Hack”的民主化工具;現(xiàn)實(shí)問(wèn)題是開(kāi)發(fā)者設(shè)計(jì)節(jié)點(diǎn)時(shí)默認(rèn)用戶(hù)理解SD原理(如Latent Space、擴(kuò)散模型、euler_ancestralcai、dpmpp_2m),但普通用戶(hù)只關(guān)心“如何讓圖片更逼真”;這種斷層導(dǎo)致ComfyUI的文檔充滿技術(shù)術(shù)語(yǔ),而非用戶(hù)目標(biāo)導(dǎo)向的指南(如“修復(fù)模糊人臉”對(duì)應(yīng)哪些節(jié)點(diǎn)組合),這也是技術(shù)工具與用戶(hù)體驗(yàn)的博弈;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
五、對(duì)于comfyUI的暢想
1、適配不同能力的設(shè)計(jì)師
專(zhuān)家模式:保留完整的節(jié)點(diǎn)和參數(shù),讓這類(lèi)設(shè)計(jì)師自由編輯;
精簡(jiǎn)模式:隱藏底層參數(shù),僅僅提供目標(biāo)導(dǎo)向的選項(xiàng);
自動(dòng)化操作:根據(jù)提示詞推薦采樣器、cfg數(shù)值等組合,例如提示詞是自然語(yǔ)言,那就匹配關(guān)于flux模型的專(zhuān)屬采樣器;
AI創(chuàng)作工具的「可控性」與「用戶(hù)體驗(yàn)」博弈
 
 
2、智能節(jié)點(diǎn)推薦引擎
目標(biāo)推薦:輸入“生成賽博朋克城市”后,自動(dòng)推薦“SDXL模型+ControlNet邊緣檢測(cè)+色調(diào)調(diào)整節(jié)點(diǎn)”;行為預(yù)測(cè):分析歷史工作流,推薦高頻使用的節(jié)點(diǎn)組合(如“LoRA模型+分層提示詞”);
3、可解釋性反饋面板
參數(shù)與結(jié)果的實(shí)時(shí)性:實(shí)時(shí)顯示調(diào)整CFG值對(duì)圖像細(xì)節(jié)、對(duì)比度的量化影響。節(jié)點(diǎn)的貢獻(xiàn)度分析:生成后標(biāo)記關(guān)鍵節(jié)點(diǎn)(如“ControlNet貢獻(xiàn)度72%”),幫助用戶(hù)理解流程。
六、總結(jié):控制的幻覺(jué)與設(shè)計(jì)的謙卑
ComfyUI揭示了生成式AI時(shí)代的核心矛盾——技術(shù)的能力越強(qiáng)大,人類(lèi)越需要承認(rèn)自身認(rèn)知的局限性。工具設(shè)計(jì)不應(yīng)追求“上帝模式”,而需尋找“剛剛好的控制權(quán)”給用戶(hù)“扳手”而非“零件庫(kù)”:提供高層級(jí)調(diào)節(jié)維度(如“畫(huà)面精細(xì)度”“風(fēng)格偏離度”),隱藏底層技術(shù)參數(shù),并不是每個(gè)設(shè)計(jì)師都是工程師的角色;大多設(shè)計(jì)師的角色只是維修工;擁抱“不完美的人性”:允許用戶(hù)保留“我不知道為什么要調(diào)這個(gè),但調(diào)了就有用”的玄學(xué)操作,而非強(qiáng)迫所有人成為AI工程師。重新定義“控制”:從“絕對(duì)掌控流程”轉(zhuǎn)向“有效影響結(jié)果”,讓AI的不可預(yù)測(cè)性成為創(chuàng)意催化劑而非焦慮來(lái)源。


作者:愛(ài)吃貓的魚(yú)___
鏈接:https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

產(chǎn)品設(shè)計(jì)如何利用心理學(xué)

ui設(shè)計(jì)分享達(dá)人

產(chǎn)品設(shè)計(jì)的成功除了依賴(lài)設(shè)計(jì)方案和技術(shù)實(shí)現(xiàn),還與用戶(hù)的心理密切相關(guān)。用戶(hù)心里決定了我們用怎樣的設(shè)計(jì)策略解決問(wèn)題。我們常認(rèn)為人們做決策時(shí)是理性的,但其實(shí)用戶(hù)行為經(jīng)常是非理性,會(huì)受到情緒、習(xí)慣和社交環(huán)境的影響。了解這些心理學(xué)規(guī)律能幫助我們更好地的預(yù)測(cè)和引導(dǎo)用戶(hù)行為,優(yōu)化產(chǎn)品體驗(yàn),提高用戶(hù)的粘性、留存率和轉(zhuǎn)化率,從而產(chǎn)品商業(yè)價(jià)值最大化。
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

關(guān)于設(shè)計(jì)組件庫(kù),一些新思考

ui設(shè)計(jì)分享達(dá)人

關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
從網(wǎng)上搜索設(shè)計(jì)組件,我們能找到各種對(duì)外公開(kāi)的設(shè)計(jì)組件庫(kù),同樣還有不少或概括或詳細(xì)的文章,手把手教你“如何搭建一個(gè)好的設(shè)計(jì)組件庫(kù)”,但這些方法論很少探討面對(duì)C端組件頻繁增改、設(shè)計(jì)規(guī)范動(dòng)態(tài)調(diào)整,如何高效賦能業(yè)務(wù)設(shè)計(jì)交付的相關(guān)內(nèi)容,但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問(wèn)題。
 
搜索是一個(gè)“牽一發(fā)而動(dòng)全身”的業(yè)務(wù),每一個(gè)微小的設(shè)計(jì)細(xì)節(jié)都有可能影響各個(gè)業(yè)務(wù)的數(shù)據(jù)指標(biāo),一個(gè)“好的設(shè)計(jì)組件庫(kù)”需要以一種潛移默化的方式讓設(shè)計(jì)師掌握設(shè)計(jì)規(guī)范,完成合規(guī)的設(shè)計(jì),從這個(gè)角度而言它應(yīng)該比較
「好懂」
 
而作為服務(wù)于整個(gè)設(shè)計(jì)團(tuán)隊(duì)的公用設(shè)計(jì)組件庫(kù),面對(duì)每月數(shù)以萬(wàn)計(jì)的調(diào)用次數(shù),它必須保障最基本的易用性,應(yīng)該非常
「好用」
 
同時(shí),面對(duì)頻繁迭代,“好的設(shè)計(jì)組件”還需要保持最快的更新速度,為各個(gè)橫向團(tuán)隊(duì)提供正確的樣式,從這個(gè)角度來(lái)說(shuō)它還要
「好維護(hù)」
 
因此,
「好懂、好用、好維護(hù)」
是搜索設(shè)計(jì)語(yǔ)境下,對(duì)一個(gè)“好的設(shè)計(jì)組件”的定義。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
接下來(lái),我們將從這三個(gè)「好」入手,分享搜索設(shè)計(jì)組件庫(kù)在升級(jí)過(guò)程中的一些思考,希望能和大家共同探討。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
“萬(wàn)丈高樓平地起”,我們先來(lái)說(shuō)說(shuō)如何從零開(kāi)始構(gòu)建一個(gè)既符合設(shè)計(jì)規(guī)范又易于理解的設(shè)計(jì)組件。
 
首先,在搭建組件時(shí),我們可以考慮采用
多層嵌套
的方式,即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過(guò)程中的重復(fù)操作,甚至還能在解綁組件時(shí),通過(guò)選中內(nèi)部的子組件圖層進(jìn)行解綁,大大簡(jiǎn)化了搭建和使用雙方的操作流程。
 
在多層嵌套的思路下,我們可以進(jìn)一步用
“底層靈活、上層收斂”
來(lái)指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣,能夠支持大部分的狀態(tài)切換,而在上層組件搭建的過(guò)程中顯性地加強(qiáng)規(guī)范的指引(如規(guī)范中不允許使用的樣式不對(duì)外展示),以降低超出規(guī)范設(shè)計(jì)的可能。
 
具體的搭建流程可以大致分為三步:
場(chǎng)景收集和分析、搭建基本變體組、拓展高階變體組
 
我們將通過(guò)視頻組件搭建的生動(dòng)案例,具體介紹如何依據(jù)“底層靈活、上層收斂”原則來(lái)搭建組件庫(kù),使得組件本身既足夠靈活,又能起到足夠的約束作用。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
在著手搭建某類(lèi)組件時(shí),我們首先通過(guò)規(guī)范確認(rèn)和場(chǎng)景遍歷,廣泛收集各類(lèi)變體。隨后,從我們能想到的所有維度出發(fā),對(duì)這些變體進(jìn)行細(xì)致定義。這樣,我們就能得到一張?jiān)敱M描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等,而第一行則羅列出各種維度,如寬度、比例等。通過(guò)這種方法,我們可以將原本零散、雜亂的組件變體描述,系統(tǒng)地歸納整理成一張清晰明了的表格。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
表格通過(guò)不同維度來(lái)唯一確定一個(gè)變體,這些維度可大致分為兩個(gè)特性和一個(gè)共性。共性指的是所有變體在這一維度上均保持一致,常見(jiàn)特性則涵蓋了最常見(jiàn)的分類(lèi)性質(zhì),如寬度、高度、數(shù)量和優(yōu)先級(jí)等,而業(yè)務(wù)特性則與具體業(yè)務(wù)緊密相關(guān)。
 
在搭建組件時(shí),我們可以遵循
「共性-常見(jiàn)特性-業(yè)務(wù)特性」
順序,這樣的順序有助于降低理解成本,因?yàn)樽罘闲闹堑姆诸?lèi)被置于外層,同時(shí)底層的組件又保持了足夠的靈活性,便于切換各種變量。對(duì)于業(yè)務(wù)特性,我們可以根據(jù)實(shí)際情況靈活處理,既可以將其作為基本組件的延展,也可以不將其納入組件范疇。
 
以視頻組件為例,我們從表格中獲取的信息如下:
 
  •  
    視頻尺寸及其組合是最符合用戶(hù)心智的變體選擇;
  •  
    播放狀態(tài)是所有變體的共有性質(zhì);
  •  
    自動(dòng)播放情況與業(yè)務(wù)相關(guān),但不一定需要在組件庫(kù)中呈現(xiàn);
  •  
    高階組件僅涉及少部分尺寸的組件,應(yīng)在完成基本組件搭建后再進(jìn)行。
 
據(jù)此,我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級(jí):
 
  1.  
    播放狀態(tài)作為共性,應(yīng)首先搭建;
  2.  
    基本組件尺寸和組合是最符合用戶(hù)心智的變體選擇,應(yīng)緊隨其后;
  3.  
    高階組件在完成基本組件搭建后再進(jìn)行。
 
值得注意的是,“封面槽位”是“播放狀態(tài)”中的一個(gè)圖層。根據(jù)“底層靈活、上層收斂”的原則,我們將其插入到搭建播放狀態(tài)之前。因此,視頻組件的最終搭建流程為:
 
  1.  
    封面槽位;
  2.  
    播放狀態(tài);
  3.  
    基本組件尺寸和組合;
  4.  
    高階組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
完成對(duì)視頻組件搭建的分析,我們就可以有條不紊地開(kāi)始搭建組件了。先搭建基本組件視頻組件,再用基本組件搭建高階組件。這一步驟雖然為大家所熟知,但仍需格外注意,如配置項(xiàng)的設(shè)置要力求合理,也可以融入設(shè)計(jì)規(guī)范和使用規(guī)范,同時(shí)還應(yīng)將一些搭建過(guò)程中的零散組件集中收納避免被調(diào)用。關(guān)于這些具體的注意事項(xiàng),我們將在后續(xù)部分進(jìn)行詳細(xì)闡述。
 
至此我們完成了組件搭建的基本流程,一個(gè)達(dá)到及格線的視頻組件就誕生了。據(jù)統(tǒng)計(jì),優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點(diǎn)擊操作!
 
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
完成了一個(gè)基本組件的搭建后,我們可以轉(zhuǎn)換視角,從使用的角度來(lái)審視并檢查這個(gè)組件。
 
我們期望,從插入組件變體、切換組件配置,再到最后的解綁組件,整個(gè)流程都能縱享絲滑且穩(wěn)定可靠,確保業(yè)務(wù)設(shè)計(jì)師在使用過(guò)程中獲得最佳體驗(yàn)。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
我們可以一步步來(lái)審視組件的使用過(guò)程。首先是插入組件,據(jù)觀察,通常有三種方式,①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對(duì)應(yīng)組件并插入;②通過(guò)查閱設(shè)計(jì)規(guī)范,鎖定所需的變體后復(fù)制粘貼;③選中一個(gè)不需要的組件,通過(guò)右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。很明顯,在這個(gè)過(guò)程中依賴(lài)的是組件的精準(zhǔn)搜索和快速定位。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
為了提升搜索精度,我們可以從組件命名入手,采用中、英、數(shù)字結(jié)合的方式,實(shí)現(xiàn)模糊匹配;也可以在發(fā)布時(shí)隱藏不希望被調(diào)用的組件,以減少無(wú)用的搜索結(jié)果。如果組件是采用前文提到的“多層嵌套”方式搭建的,我們可以添加“Preferred”子組件,這樣在切換時(shí)會(huì)優(yōu)先展示這些子組件,這個(gè)功能在切換圖標(biāo)時(shí)尤為實(shí)用。
 
對(duì)于習(xí)慣邊查閱設(shè)計(jì)規(guī)范邊使用組件的設(shè)計(jì)師,我們?cè)黾恿烁鄬?shí)際使用的正誤案例,這些案例直觀展示了組件變體的正確選擇和使用方式,進(jìn)一步降低了規(guī)范的理解成本,有效輔助設(shè)計(jì)決策。同時(shí),我們專(zhuān)門(mén)維護(hù)了一個(gè)固定區(qū)域,用于平鋪展示所有組件變體。為了確保能夠輕松點(diǎn)選,我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計(jì)師一目了然地看到所有變體,從而快速選擇所需的組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
在組件配置階段,有三項(xiàng)注意點(diǎn)能讓組件更加易用,即“重視組件的可視化效果、設(shè)置高效易用的配置項(xiàng)、貼心地保存修改”。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
考慮到C端組件的多樣性和用戶(hù)的使用習(xí)慣,我們應(yīng)避免使用過(guò)于復(fù)雜的分組方式。相反,應(yīng)更注重組件的樣式展示,并盡量簡(jiǎn)化組件的層級(jí)結(jié)構(gòu)。這樣,設(shè)計(jì)師在使用時(shí)能夠更直觀地看到組件的外觀,而無(wú)需深入復(fù)雜的層級(jí)去查找。
 
另外值得注意的是,F(xiàn)igma會(huì)默認(rèn)用組件集合中最左上角的組件生成預(yù)覽樣式,因此應(yīng)當(dāng)把視覺(jué)上最有代表性的變體放在左上角,這個(gè)效果在切換變體(Swap instance)時(shí)很重要,因?yàn)槟壳霸谠撁姘逯袥](méi)法查看組件細(xì)節(jié),只能靠縮略圖和名稱(chēng)來(lái)推測(cè)是哪個(gè)組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
其次對(duì)于配置項(xiàng)的設(shè)置也大有講究,業(yè)界有組件庫(kù)為了實(shí)現(xiàn)C2D2C,從源頭上將設(shè)計(jì)組件和前端組件的配置項(xiàng)打平,這是不錯(cuò)的思路,但有可能會(huì)提升設(shè)計(jì)側(cè)的理解成本。針對(duì)搜索業(yè)務(wù)的特殊語(yǔ)境,我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項(xiàng),將所有允許自定義的配置盡可能外露,并清晰地說(shuō)明修改限制,如字?jǐn)?shù)限定、選項(xiàng)個(gè)數(shù)等,這樣能夠在使用的過(guò)程中強(qiáng)化業(yè)務(wù)設(shè)計(jì)師對(duì)規(guī)范的掌握。
 
另一個(gè)常常被忽視的關(guān)鍵點(diǎn)是選項(xiàng)和配置的排序問(wèn)題。為了提高瀏覽和選擇的效率,建議對(duì)選項(xiàng)和選項(xiàng)之間,以及外層的不同配置項(xiàng),都按照一定的邏輯順序進(jìn)行排序。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
最后一點(diǎn),我們稱(chēng)之為
“貼心地保存修改”
機(jī)制,這個(gè)針對(duì)的是文字修改的場(chǎng)景。
 
在實(shí)際操作中,使用一個(gè)組件可能需要對(duì)多個(gè)配置項(xiàng)進(jìn)行修改。有時(shí)在修改完文字內(nèi)容后再去調(diào)整其他配置時(shí),已修改的文字會(huì)被重置。這時(shí)文本屬性(text property)的設(shè)置就顯得尤為重要,它能夠記憶并保存修改過(guò)的文字內(nèi)容,從而免于重復(fù)輸入。
 
還有一些情況是,某個(gè)組件變體實(shí)際上并沒(méi)有與某個(gè)值相對(duì)應(yīng)的組件(盡管Figma機(jī)制允許選擇該值),用戶(hù)切換后就會(huì)發(fā)現(xiàn)組件完全變了,只能撤回。為了避免這類(lèi)情況,建議使用另外的標(biāo)記來(lái)表明組件某個(gè)設(shè)置項(xiàng)是不可切換的。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
完成了組件的搭建和檢查,接下來(lái)讓我們聚焦于組件的日常維護(hù)。
 
這一環(huán)節(jié)可以從兩個(gè)維度展開(kāi),一是依托中臺(tái)的日常數(shù)據(jù)監(jiān)控進(jìn)行維護(hù),二是通過(guò)團(tuán)隊(duì)內(nèi)部的緊密協(xié)同機(jī)制來(lái)保障。后者更多側(cè)重協(xié)作流程和機(jī)制上的建設(shè),在本文中我們不做更多展開(kāi),重點(diǎn)討論前者。
 
數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑:View libraries-Analytics),看板中展示了各個(gè)組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù),這些數(shù)據(jù)不直接反映組件的優(yōu)劣,但如果我們觀測(cè)到某個(gè)組件解綁率偏高,我們會(huì)考慮直接把它
作為模板
而不是創(chuàng)建成組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 
總結(jié)
 
以上是百度搜索設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)組件庫(kù)升級(jí)過(guò)程中的心得分享,包括搜索業(yè)務(wù)對(duì)于“好的設(shè)計(jì)組件”的訴求,以及一些搭建和優(yōu)化組件的實(shí)用思路,核心是探討如何從組件庫(kù)建設(shè)的角度入手,成功助力團(tuán)隊(duì)提升設(shè)計(jì)資產(chǎn)消費(fèi)效率。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究

ui設(shè)計(jì)分享達(dá)人

前言
    Banner,這一設(shè)計(jì)元素對(duì)于我們?cè)O(shè)計(jì)師而言早已經(jīng)是司空見(jiàn)慣,其核心往往聚焦于視覺(jué)表現(xiàn)的層面,也是成為UI設(shè)計(jì)師重要能力play中的一環(huán)。今天要寫(xiě)的,并非Banner在視覺(jué)藝術(shù)上的探索,而是其在UI場(chǎng)景中布局樣式的深度剖析。
    Banner圖作為產(chǎn)品中的一項(xiàng)基礎(chǔ)功能,其存在已是常態(tài)。在視覺(jué)創(chuàng)意的追求之外,UI層面的樣式布局也在不斷尋求突破與創(chuàng)新。
 
目錄
一、Banner 視覺(jué)層表現(xiàn)
二、Banner 布局樣式
三、總結(jié)
 
一、Banner視覺(jué)層表現(xiàn)
    作為界面視覺(jué)焦點(diǎn),Banner通常以可交互的輪播組件形式呈現(xiàn),這種動(dòng)態(tài)展示方式已成為現(xiàn)在產(chǎn)品的重要導(dǎo)航模式之一。它不僅是信息傳遞的載體,也是平臺(tái)與用戶(hù)對(duì)話的窗口,承載著活動(dòng)推廣、品牌宣發(fā)等核心內(nèi)容的展示使命。 在提升用戶(hù)注意力的設(shè)計(jì)探索中,Banner的視覺(jué)表現(xiàn)手法持續(xù)演進(jìn)。從設(shè)計(jì)維度來(lái)看,我們不僅要在創(chuàng)意構(gòu)思、版式布局、色彩搭配等基礎(chǔ)層面下功夫,更需在表現(xiàn)形式上尋求突破。
    基于動(dòng)態(tài)復(fù)雜度,我將Banner的表現(xiàn)形式歸納為四個(gè)層級(jí):從基礎(chǔ)的靜態(tài)圖像,到輕量級(jí)的GIF動(dòng)畫(huà),再到沉浸式的視頻背景,直至最具空間感的分層效果,每種形式都對(duì)應(yīng)著不同的設(shè)計(jì)目標(biāo)和用戶(hù)體驗(yàn)。
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
1.1靜態(tài)
    在眾多Banner表現(xiàn)形式中,靜態(tài)輪播圖因其高效的設(shè)計(jì)實(shí)現(xiàn)和便捷的技術(shù)支持而成為多數(shù)產(chǎn)品最普遍的選擇。
    這類(lèi)Banner采用靜態(tài)圖片作為視覺(jué)載體,根據(jù)產(chǎn)品需求可分為兩種基礎(chǔ)模式:?jiǎn)我划?huà)面呈現(xiàn)的簡(jiǎn)約風(fēng)格,以及多畫(huà)面輪播的交互形式。其中,多圖輪播既支持自動(dòng)播放的時(shí)間軸切換,也允許用戶(hù)通過(guò)手勢(shì)滑動(dòng)進(jìn)行自主瀏覽,在保持視覺(jué)簡(jiǎn)潔性的同時(shí)增加了交互維度。這種設(shè)計(jì)平衡了視覺(jué)效果與功能實(shí)用性,所以會(huì)成為多數(shù)產(chǎn)品的首選方案。
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
1.2動(dòng)態(tài)
    動(dòng)態(tài)Banner以生動(dòng)的表現(xiàn)力,在吸引用戶(hù)注意力方面展現(xiàn)出顯著優(yōu)勢(shì)。通過(guò)關(guān)鍵元素的微妙動(dòng)畫(huà)和CTA按鈕的交互反饋,能夠有效引導(dǎo)用戶(hù)視線,強(qiáng)化信息層級(jí)。
  在動(dòng)態(tài)Banner的應(yīng)用中,單圖形式往往更受青睞。雖然動(dòng)態(tài)效果能提升視覺(jué)吸引力,但過(guò)度使用可能導(dǎo)致"視覺(jué)噪音",反而分散用戶(hù)注意力,降低核心信息的傳達(dá)效率。
    面對(duì)信息過(guò)載的數(shù)字環(huán)境。微交互動(dòng)畫(huà)作為一種優(yōu)雅的解決方案,在功能引導(dǎo)和視覺(jué)敘事兩個(gè)維度都發(fā)揮著重要作用,也已經(jīng)成為界面設(shè)計(jì)中不可或缺的設(shè)計(jì)語(yǔ)言。
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
1.3視頻
    視頻廣告作為一種成熟的營(yíng)銷(xiāo)媒介,在短視頻文化盛行的當(dāng)下,已逐步融入Banner輪播體系。這類(lèi)視頻Banner通常占據(jù)首屏黃金位置,配合明確的倒計(jì)時(shí)提示和便捷的關(guān)閉選項(xiàng),為用戶(hù)提供可控的觀看體驗(yàn)。為減少對(duì)用戶(hù)的干擾,視頻默認(rèn)采用靜音播放模式,這種貼心的設(shè)計(jì)選擇體現(xiàn)了以用戶(hù)為中心的設(shè)計(jì)理念。
    在特定垂直領(lǐng)域,如影視類(lèi)平臺(tái),我們也能觀察到多視頻輪播的創(chuàng)新應(yīng)用。這種相對(duì)小眾的呈現(xiàn)方式,往往與平臺(tái)的內(nèi)容屬性高度契合,為特定用戶(hù)群體提供沉浸式的瀏覽體驗(yàn)。這種差異化的設(shè)計(jì)策略,展現(xiàn)了產(chǎn)品設(shè)計(jì)中對(duì)場(chǎng)景化需求的深入思考。
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
1.4分層
    在追求差異化體驗(yàn)的設(shè)計(jì)浪潮中,輪播廣告正在突破傳統(tǒng)平面展示的局限。分層視覺(jué)設(shè)計(jì)以其獨(dú)特的空間感和動(dòng)態(tài)層次,為Banner設(shè)計(jì)注入了新的活力。這種創(chuàng)新表現(xiàn)形式包含多層次的視覺(jué)構(gòu)建:從基礎(chǔ)的內(nèi)容層疊加視覺(jué),到更具空間感的3D翻轉(zhuǎn)效果,再到前景與背景的智能分離運(yùn)動(dòng),每種方式都在重新定義用戶(hù)與廣告內(nèi)容的交互方式。
    基于視覺(jué)層次的運(yùn)動(dòng)差異,設(shè)計(jì)出引人入勝的視覺(jué)敘事,能夠有效的提升用戶(hù)參與度以及更具沉浸感和記憶點(diǎn)廣告體驗(yàn)。
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
小結(jié)
    Banner的視覺(jué)創(chuàng)新是提升內(nèi)容吸引力的關(guān)鍵驅(qū)動(dòng)力。
    每一種新的視覺(jué)語(yǔ)言都是我們與用戶(hù)對(duì)話的新方式,是提升信息傳達(dá)效率的重要途徑。在競(jìng)爭(zhēng)激烈的市場(chǎng)環(huán)境中,差異化的表現(xiàn)形式往往能成為抓住用戶(hù)注意力的制勝法寶,這也是為什么我們要不斷突破常規(guī),尋求更具感染力的視覺(jué)解決方案。
 
二、Banner布局樣式
    在確定Banner的視覺(jué)表現(xiàn)手法后,就得深入研究其在界面布局中的空間關(guān)系。布局樣式的多樣性源于多個(gè)設(shè)計(jì)維度的考量:從Banner的寬高比例、尺寸規(guī)格,到其與頁(yè)面結(jié)構(gòu)的整合方式(通欄或分欄),再到其與周?chē)氐囊曈X(jué)關(guān)系(獨(dú)立呈現(xiàn)或背景融合)等。
    就通欄與分欄布局而言,這種結(jié)構(gòu)性選擇直接影響B(tài)anner的視覺(jué)占比。雖然直覺(jué)告訴我們更大的Banner更具吸引力,但優(yōu)秀的設(shè)計(jì)需要平衡信息層級(jí)與視覺(jué)舒適度。Banner的布局不應(yīng)是孤立的決策,而應(yīng)該與整體界面風(fēng)格和諧統(tǒng)一,既要突出又要融入,在視覺(jué)沖擊力和界面協(xié)調(diào)性之間找到最佳平衡點(diǎn)。這種全局性的設(shè)計(jì)思維,正是打造優(yōu)質(zhì)用戶(hù)體驗(yàn)的關(guān)鍵點(diǎn)所在。
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
    在處理深色系頭部界面時(shí),我們常采用Banner與背景層疊的設(shè)計(jì)策略。這種手法通過(guò)建立視覺(jué)深度,創(chuàng)造出富有層次的空間感。背景色的處理有兩種方式:一是采用固定色值保持統(tǒng)一性,二是根據(jù)輪播圖主色調(diào)動(dòng)態(tài)調(diào)整,后者能實(shí)現(xiàn)更自然的視覺(jué)過(guò)渡,提升整體設(shè)計(jì)的融合度與空間縱深感。
    在Banner比例方面,選擇直接影響高度控制,需要根據(jù)界面內(nèi)容密度靈活調(diào)整。除了基于內(nèi)容需求的自定義方案,許多人會(huì)采用數(shù)學(xué)比例系統(tǒng)進(jìn)行規(guī)范化設(shè)計(jì)。其中,基于斐波那契數(shù)列推導(dǎo)出的8:5、8:3等比例關(guān)系,因其視覺(jué)舒適度而被廣泛采用。在實(shí)際應(yīng)用中,我更傾向于選擇能被4整除的數(shù)值,既符合開(kāi)發(fā)規(guī)范,又能確保在不同設(shè)備上的適配性。
Banner布局在用戶(hù)界面中的設(shè)計(jì)樣式研究
 
 
以經(jīng)驗(yàn)作為基石,而不是限制,特殊情況特殊對(duì)待,就像配合前端工程師調(diào)整設(shè)計(jì)圖樣式一樣,靈活運(yùn)用。
 
三、總結(jié)
    Banner作為頁(yè)面中的常見(jiàn)元素,與其說(shuō)是對(duì)布局樣式的探索,不如說(shuō)是對(duì)用戶(hù)體驗(yàn)的深度挖掘。每一次布局創(chuàng)新都是對(duì)用戶(hù)與頁(yè)面互動(dòng)方式的重新思考。
    一個(gè)恰到好處的留白、一次精準(zhǔn)的視覺(jué)引導(dǎo)、一個(gè)流暢的交互過(guò)渡,這些細(xì)微之處都可能成為提升產(chǎn)品體驗(yàn)的關(guān)鍵。 當(dāng)我們能夠系統(tǒng)性地把控每個(gè)設(shè)計(jì)細(xì)節(jié),將用戶(hù)需求轉(zhuǎn)化為優(yōu)雅的解決方案時(shí),就能做出真正打動(dòng)人心的頁(yè)面設(shè)計(jì)。


作者:Syic
鏈接:https://www.zcool.com.cn/article/ZMTY1MTk1Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

界面設(shè)計(jì)中【浮標(biāo)】的思考與探索

ui設(shè)計(jì)分享達(dá)人

界面設(shè)計(jì)中【浮標(biāo)】的思考與探索
結(jié)合設(shè)計(jì)原則與“智能伴學(xué)助手”項(xiàng)目應(yīng)用浮標(biāo)實(shí)踐展開(kāi)
-------------
 
目錄:
背景
浮標(biāo)的本質(zhì)與價(jià)值
浮標(biāo)設(shè)計(jì)
一、功能定位與場(chǎng)景適配
二、視覺(jué)與交互設(shè)計(jì)
三、技術(shù)實(shí)現(xiàn)優(yōu)化
四、無(wú)障礙與倫理考量
五、創(chuàng)新方向探索
結(jié)語(yǔ)
 
-------------
背景:
在教育類(lèi)移動(dòng)端中接入了大模型AI智能應(yīng)用,為保證這個(gè)應(yīng)用入口可長(zhǎng)期保持并隨時(shí)可見(jiàn),提高使用率,為用戶(hù)提供便利。筆者通過(guò)“智能伴學(xué)助手”浮標(biāo)實(shí)踐應(yīng)用,對(duì)后續(xù)制作浮標(biāo)在界面設(shè)計(jì)中思考與探索。
 
浮標(biāo)的本質(zhì)與價(jià)值
1)空間維度突破  
作為界面中的「第三層空間」,浮標(biāo)通過(guò)視覺(jué)懸浮感打破平面限制(如iOS 的3D視差效果); 在信息過(guò)載時(shí)代,提供「隨時(shí)在場(chǎng)」的核心功能入口(如美團(tuán)外賣(mài)的懸浮購(gòu)物車(chē),左右動(dòng)效:進(jìn)縮)。
「第三層空間」并「隨時(shí)在場(chǎng)」,也是很好的廣告位和優(yōu)惠營(yíng)銷(xiāo),一些浮標(biāo)的“小巧思”。
「第三層空間」并「隨時(shí)在場(chǎng)」,也是很好的廣告位和優(yōu)惠營(yíng)銷(xiāo),一些浮標(biāo)的“小巧思”。
 
2) 認(rèn)知心理學(xué)應(yīng)用
利用格式塔原則中的「閉合性」設(shè)計(jì)半透明遮罩,暗示可交互區(qū)域;通過(guò)菲茨定律優(yōu)化點(diǎn)擊熱區(qū),圓形浮標(biāo)直徑建議≥48dp(Android 規(guī)范)。
 
 ---------------------
浮標(biāo)設(shè)計(jì)
就項(xiàng)目中“智能伴學(xué)助手”為例,一個(gè)教育類(lèi)的應(yīng)用入口,結(jié)合功能定位、用戶(hù)體驗(yàn)與技術(shù)實(shí)現(xiàn)浮標(biāo)在界面中的作用。通常浮標(biāo)是一個(gè)懸浮的按鈕或圖標(biāo),用于快速訪問(wèn)某些功能,從多個(gè)維度探索其在移動(dòng)端界面中的合理呈現(xiàn)方式:
 
 
一、功能定位與場(chǎng)景適配
 
浮標(biāo)的設(shè)計(jì)規(guī)范:
比如尺寸、顏色、位置。通用的設(shè)計(jì)規(guī)范,教學(xué)工具類(lèi)App的界面設(shè)計(jì),可能涉及圖標(biāo)和布局。
1)尺寸與網(wǎng)格系統(tǒng)
 ◇ 圖標(biāo)尺寸需適配不同屏幕分辨率,常見(jiàn)規(guī)范包括128x128px、96x96px、64x64px等,需根據(jù)界面層級(jí)選擇合適尺寸。
◇ 尺寸一般用1:1比較好或者成倍數(shù),先做大再導(dǎo)出所需要的不同大小比例。
◇ 使用網(wǎng)格系統(tǒng)(如微軟Fluent的24px基礎(chǔ)網(wǎng)格)確保視覺(jué)一致性,留出安全邊距(如2px內(nèi)邊距)避免元素溢出。
2)造型與風(fēng)格
◇ 遵循簡(jiǎn)約易懂原則,優(yōu)先采用象形圖或表意符號(hào)增強(qiáng)識(shí)別性。
◇ 保持系列圖標(biāo)風(fēng)格統(tǒng)一,包括線條粗細(xì)(建議1.5px)、圓角弧度(微軟Fluent定義大/中/小三級(jí)圓角)及視覺(jué)平衡。
3)適配性
◇ 導(dǎo)出格式需與開(kāi)發(fā)協(xié)作,推薦PNG序列或SVGA文件以兼顧清晰度與性能。
◇自適應(yīng)考慮不同平臺(tái)的顯示情況。
 
核心功能聚合:
語(yǔ)言學(xué)習(xí)工具類(lèi)界面將高頻功能(如首頁(yè)入口、作業(yè)評(píng)論、學(xué)習(xí)提問(wèn))通過(guò)浮標(biāo)動(dòng)態(tài)整合,支持長(zhǎng)按展開(kāi)二級(jí)菜單或滑動(dòng)切換功能模式,吸附于屏幕邊緣。
根據(jù)學(xué)習(xí)階段智能變化:
課前(預(yù)習(xí)):浮標(biāo)展示課程試學(xué)入口或?qū)W習(xí)目標(biāo)設(shè)定;
課中(口語(yǔ)輸出):提供實(shí)時(shí)筆記懸浮窗或標(biāo)記工具;
課后(點(diǎn)評(píng)):將課后作業(yè)及鞏固語(yǔ)言習(xí)得情況的評(píng)價(jià)和自我精進(jìn)。
(外語(yǔ)語(yǔ)言口語(yǔ)學(xué)習(xí)一般模式:盲聽(tīng),然后根據(jù)自己的話復(fù)述,理解語(yǔ)言并有效使用語(yǔ)言)
  
首頁(yè)入口、作業(yè)評(píng)論、學(xué)習(xí)提問(wèn)通過(guò)浮標(biāo)智能解答點(diǎn)評(píng),通過(guò)二級(jí)頁(yè)面展開(kāi)細(xì)則
首頁(yè)入口、作業(yè)評(píng)論、學(xué)習(xí)提問(wèn)通過(guò)浮標(biāo)智能解答點(diǎn)評(píng),通過(guò)二級(jí)頁(yè)面展開(kāi)細(xì)則
 
二、視覺(jué)與交互設(shè)計(jì)
 
以”智能伴學(xué)助手“為例,浮標(biāo)主色是藍(lán)色,企業(yè)主題色也是藍(lán)色,而”智能伴學(xué)助手“浮標(biāo)使用背景一般也以藍(lán)色為主,App主題色也是藍(lán)色,多場(chǎng)景使用適配藍(lán)色背景的靜態(tài)浮標(biāo),又要使浮標(biāo)可以在背景中脫穎而出,在其過(guò)程中嘗試藍(lán)+藍(lán)搭配的存在局限性,本身藍(lán)色系較統(tǒng)一。
在同為藍(lán)色后,產(chǎn)生不同「空間」,通過(guò)將界面元素分層(如前景圖標(biāo)與背景圖像),營(yíng)造深度感。在浮標(biāo)進(jìn)行描邊隔層,現(xiàn)在很多表情包就是這種模式操作。
微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)計(jì),強(qiáng)調(diào)了用戶(hù)需求分析、界面簡(jiǎn)潔和交互設(shè)計(jì),這可能對(duì)浮標(biāo)的功能定位有幫助。智能伴學(xué)助手來(lái)浮標(biāo)快速訪問(wèn)。在不同背景下的浮標(biāo)呈現(xiàn)視覺(jué)形式,只要點(diǎn)擊即可進(jìn)入應(yīng)用。
微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)計(jì),強(qiáng)調(diào)了用戶(hù)需求分析、界面簡(jiǎn)潔和交互設(shè)計(jì),這可能對(duì)浮標(biāo)的功能定位有幫助。智能伴學(xué)助手來(lái)浮標(biāo)快速訪問(wèn)。在不同背景下的浮標(biāo)呈現(xiàn)視覺(jué)形式,只要點(diǎn)擊即可進(jìn)入應(yīng)用。
 
思考與探索:
浮標(biāo)需要特色,用戶(hù)在使用過(guò)程中視覺(jué)明顯,提高交互。
浮標(biāo)既顯眼又不干擾學(xué)習(xí),所以需要平衡可見(jiàn)性和沉浸感。
浮標(biāo)可以移動(dòng),用戶(hù)可以根據(jù)需要調(diào)整位置,避免遮擋內(nèi)容。
現(xiàn)浮標(biāo)是靜態(tài)的,如何嘗試動(dòng)態(tài)浮標(biāo),與用戶(hù)有更好的交互體驗(yàn),參與感。
顏色和動(dòng)效方面,冷色調(diào)營(yíng)造學(xué)習(xí)氛圍,浮標(biāo)可以用品牌色,如藍(lán)色或綠色,加上微動(dòng)效吸引注意。樣式用了藍(lán)色圓形浮標(biāo),可能適合教育類(lèi)應(yīng)用,賦予科技感設(shè)計(jì)。
不同狀態(tài)或者不同頁(yè)面下的浮標(biāo)呈現(xiàn)方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮標(biāo)呈現(xiàn),在不同頁(yè)面呈現(xiàn)一“系列”
白色背景或者透明背景下的浮標(biāo)呈現(xiàn),在不同頁(yè)面呈現(xiàn)一“系列”
 
藍(lán)色背景下或者在統(tǒng)一色系下浮標(biāo)視覺(jué)”糊“,可用白邊的形式將背景和浮標(biāo)的”空間“區(qū)分開(kāi)
藍(lán)色背景下或者在統(tǒng)一色系下浮標(biāo)視覺(jué)”糊“,可用白邊的形式將背景和浮標(biāo)的”空間“區(qū)分開(kāi)
 
思考與探索:
配色方案
1)主色選擇
明亮色系:如紅色、橙色、黃色等,能快速吸引用戶(hù)注意,適用于促銷(xiāo)活動(dòng)入口。
品牌色融合:在特殊場(chǎng)景中融入品牌LOGO或主色,代表企業(yè)形象和IP,增強(qiáng)品牌認(rèn)知。
2)色彩心理學(xué)應(yīng)用
藍(lán)色:傳遞信任感,適合金融或工具類(lèi)應(yīng)用。
黑金/黑黃組合:營(yíng)造神秘或高端感,常見(jiàn)于娛樂(lè)或奢侈品領(lǐng)域。
紫色+粉紅:適用于美容、女性向產(chǎn)品,傳遞溫柔與創(chuàng)意。
控制色彩平衡,用戶(hù)色彩感官可適應(yīng)。
3)對(duì)比與背景
使用中性色(如米色、白色)作為背景,提升信息可讀性。
避免沖突色搭配(如藍(lán)色用于食品類(lèi)浮標(biāo)易抑制食欲)。
 
思考與探索:
個(gè)性化推薦和交互設(shè)計(jì),可以結(jié)合AI預(yù)測(cè)用戶(hù)行為,動(dòng)態(tài)調(diào)整浮標(biāo)的出現(xiàn)時(shí)機(jī),比如在需要提醒作業(yè)時(shí)顯示。主色選用品牌色(如教育藍(lán)/科技紫)強(qiáng)化識(shí)別性。
 
如何設(shè)計(jì)浮標(biāo)會(huì)更好?
如何設(shè)計(jì)浮標(biāo)會(huì)更好?
 
 
創(chuàng)新交互模式思考探索:
1)壓力感知交互  
?安卓壓感屏實(shí)現(xiàn)「輕按預(yù)覽/重按觸發(fā)」分層交互(如華為懸浮球壓感菜單);配合觸覺(jué)反饋(Haptic Engine)增強(qiáng)操作確認(rèn)感。
2)動(dòng)態(tài)語(yǔ)義變形
-生物擬態(tài)動(dòng)畫(huà):
?呼吸感懸浮:模擬水母游動(dòng)節(jié)奏(振幅0.5-1.2px,頻率0.8Hz)  ;
?點(diǎn)擊時(shí)觸發(fā)粒子擴(kuò)散動(dòng)畫(huà)(模擬知識(shí)傳遞意象);
?拖拽時(shí)產(chǎn)生彈性形變(阻尼系數(shù)0.6-0.8),邊緣碰撞后回彈。
- 根據(jù)場(chǎng)景智能改變形態(tài):  
? 閱讀類(lèi)App中展開(kāi)為「書(shū)簽浮標(biāo)+進(jìn)度條」復(fù)合控件  ;
? 音樂(lè)播放器浮標(biāo)可拉伸成波形可視化界面。
 通過(guò)多模態(tài)反饋,聽(tīng)覺(jué),視覺(jué),觸覺(jué)多種情感交互。
3) 空間布局策略:
?默認(rèn)位置:置于屏幕右下側(cè)(符合右手持機(jī)習(xí)慣),預(yù)留10%邊距防止誤觸;
?智能避讓?zhuān)和ㄟ^(guò)內(nèi)容識(shí)別算法,在視頻播放或文本輸入時(shí)自動(dòng)偏移避開(kāi)核心內(nèi)容區(qū)域;
?AR場(chǎng)景中的空間投影浮標(biāo)(如IKEA Place家具預(yù)覽浮窗)。
位置多為屏幕右下側(cè)
位置多為屏幕右下側(cè)
 
 三、技術(shù)實(shí)現(xiàn)優(yōu)化
 
1)跨端一致性
  •  
    使用React等框架封裝可復(fù)用浮標(biāo)組件,通過(guò)響應(yīng)式設(shè)計(jì)適配不同設(shè)備尺寸(如折疊屏展開(kāi)態(tài)需重新計(jì)算定位錨點(diǎn));
  •  
    采用SVGA格式實(shí)現(xiàn)高性能動(dòng)效,控制幀率在30fps以?xún)?nèi)以降低功耗。
2)AI驅(qū)動(dòng)個(gè)性化
  •  
     基于LSTM模型預(yù)測(cè)用戶(hù)行為: 檢測(cè)到長(zhǎng)時(shí)間未操作時(shí),浮標(biāo)縮小并展示激勵(lì)標(biāo)語(yǔ); 識(shí)別到錯(cuò)題高峰時(shí)段,主動(dòng)彈出知識(shí)點(diǎn)講解入口;
  •  
     支持語(yǔ)音指令交互(如“浮標(biāo)移到左上角”)。
 
四、無(wú)障礙與倫理考量
 
1)包容性設(shè)計(jì)
◇為色弱用戶(hù)提供高對(duì)比度模式(浮標(biāo)輪廓增加動(dòng)態(tài)描邊,對(duì)比度≥4.5:1);
◇支持頭部追蹤控制浮標(biāo)移動(dòng)(iOS Switch Control技術(shù)適配)。
2)防沉迷機(jī)制(適合未成年類(lèi)App)
◇連續(xù)使用1小時(shí)后,浮標(biāo)漸變灰色并觸發(fā)休息提醒;
◇家長(zhǎng)端可遠(yuǎn)程設(shè)置浮標(biāo)功能禁用時(shí)段。(未成年學(xué)習(xí)類(lèi)工具考慮優(yōu)化)
 
五、創(chuàng)新方向探索
 
1)多模態(tài)融合:
◇AR場(chǎng)景中浮標(biāo)投射為3D虛擬助手,支持手勢(shì)交互與空間定位;
◇結(jié)合眼動(dòng)追蹤技術(shù),實(shí)現(xiàn)注視區(qū)域自動(dòng)呼出上下文菜單。
2)情感化表達(dá):
◇根據(jù)學(xué)習(xí)成就解鎖浮標(biāo)皮膚(如連續(xù)打卡7天變?yōu)楠?jiǎng)杯形態(tài));
◇錯(cuò)誤率過(guò)高時(shí),浮標(biāo)呈現(xiàn)“鼓勵(lì)模式”(配色變暖+微震動(dòng)反饋)。
學(xué)習(xí)類(lèi)智能伴學(xué)助手的浮標(biāo)既能作為高效的功能樞紐,又可成為情感化學(xué)習(xí)伴侶。實(shí)際落地時(shí)建議結(jié)合A/B測(cè)試持續(xù)優(yōu)化,例如對(duì)比分析「固定浮標(biāo)」與「場(chǎng)景自適應(yīng)浮標(biāo)」的點(diǎn)擊轉(zhuǎn)化率差異。
 
----------------
 
結(jié)語(yǔ):
浮標(biāo)不應(yīng)僅是功能載體,更應(yīng)成為:  
- 空間敘事者:通過(guò)動(dòng)態(tài)變化講述產(chǎn)品故事;
- 情感連接器:建立用戶(hù)與數(shù)字世界的溫度觸點(diǎn);
- 場(chǎng)景預(yù)言家:預(yù)判需求并提供恰到好處的服務(wù)。
 
設(shè)計(jì)師需在「顯性?xún)r(jià)值」與「隱形干擾」間找到精妙平衡,讓浮標(biāo)成為提升體驗(yàn)的優(yōu)雅解決方案而非視覺(jué)負(fù)擔(dān)。未來(lái)可探索腦機(jī)接口的意念控制浮標(biāo)、量子動(dòng)畫(huà)渲染等突破性方向。
技術(shù)實(shí)現(xiàn)上,探究代碼示例展示了如何控制浮標(biāo)的移動(dòng),確保不超出屏幕,這可以作為技術(shù)參考應(yīng)用實(shí)際案例中。同時(shí),性能優(yōu)化方面,使用SVGA格式或減少幀數(shù),可能對(duì)動(dòng)效設(shè)計(jì)有幫助。
浮標(biāo)設(shè)計(jì)需要結(jié)合功能定位、用戶(hù)行為、視覺(jué)設(shè)計(jì)、交互體驗(yàn)和技術(shù)實(shí)現(xiàn),可多進(jìn)行參考不同案例,搜索現(xiàn)有項(xiàng)目,對(duì)比借鑒然后對(duì)新型B端界面有所創(chuàng)新,確保既實(shí)用又不干擾用戶(hù)。
還可以利用Ai創(chuàng)新思維,設(shè)計(jì)師可以更快速、高效地生成多種設(shè)計(jì)方案,結(jié)合項(xiàng)目開(kāi)發(fā)滿足消費(fèi)者對(duì)個(gè)性化、時(shí)尚化的需求。
 


作者:啊海包船打魚(yú)
鏈接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

 

用好「用戶(hù)行為分析」讓體驗(yàn)起飛

ui設(shè)計(jì)分享達(dá)人

用戶(hù)行為分析-如何開(kāi)始搭建
體驗(yàn)或交互設(shè)計(jì)知曉用戶(hù)行為分析有什么用?
答:
我們所處的行業(yè)下,各類(lèi)產(chǎn)品變得成熟精細(xì),大家開(kāi)始拼細(xì)節(jié)卷服務(wù),市場(chǎng)競(jìng)爭(zhēng)激烈。對(duì)于產(chǎn)品的各種優(yōu)化改版也就開(kāi)始變得謹(jǐn)慎,往往需要經(jīng)過(guò)用戶(hù)研究或是數(shù)據(jù)分析等工作來(lái)驗(yàn)證或決策,不再是由設(shè)計(jì)師或產(chǎn)品經(jīng)理憑借過(guò)往經(jīng)驗(yàn)辦事或?qū)?biāo)競(jìng)品照抄了,恰好用戶(hù)行為分析就是用戶(hù)洞察中具有代表性的一項(xiàng);
 
體驗(yàn)或交互設(shè)計(jì)為什么要掌握這些呢?
答:
回歸到用戶(hù)體驗(yàn)相關(guān)設(shè)計(jì),本身就是一項(xiàng)細(xì)致活兒,處處需要用戶(hù)研究或數(shù)據(jù)洞察來(lái)輔助設(shè)計(jì)工作,了解其相關(guān)甚至熟悉搭建分析,從職能發(fā)展趨勢(shì)來(lái)看,可能是遲早的事;
 
所以即使你目前用不上用戶(hù)行為分析相關(guān),也不要急著關(guān)掉文章,先簡(jiǎn)單了解一下吧,說(shuō)不定你會(huì)有興趣呢,說(shuō)不定不久后剛好用上呢?
 
 
用戶(hù)行為分析能干啥
用戶(hù)行為分析是數(shù)據(jù)分析的一個(gè)重要領(lǐng)域,特別是在數(shù)字化服務(wù)行業(yè)中,主要目的是通過(guò)深入研究用戶(hù)群體的流量動(dòng)向以及操作行為特征等,來(lái)了解用戶(hù)與產(chǎn)品間的關(guān)系、效果、趨勢(shì),以幫助我們優(yōu)化產(chǎn)品設(shè)計(jì)、提升用戶(hù)體驗(yàn)并驅(qū)動(dòng)業(yè)務(wù)決策。
說(shuō)人話就是:
監(jiān)測(cè)用戶(hù)在產(chǎn)品上做出了哪些行為、是否符合預(yù)期、有什么特征、問(wèn)題在哪里,然后看看產(chǎn)品上需要做些什么調(diào)整或迎合用戶(hù)的特征偏好來(lái)決策啥的。
 
用戶(hù)行為分析有啥優(yōu)勢(shì)
具備一定的客觀性與真實(shí)性
被動(dòng)采集的行為數(shù)據(jù)有時(shí)候比用戶(hù)口述反饋的信息要更真實(shí)有效,一方面更加直接,另一方面也少了些用戶(hù)心理設(shè)防(霍桑效應(yīng));
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
具備一定的代表性與準(zhǔn)確性
由于是群體性的大數(shù)據(jù),所以更有代表性,并且是即時(shí)的數(shù)據(jù)記錄,不容易記混記錯(cuò),準(zhǔn)確性也更好;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
具備可持續(xù)性與可追溯性
通過(guò)數(shù)字化技術(shù)實(shí)現(xiàn),可以伴隨產(chǎn)品發(fā)展持續(xù)的采集數(shù)據(jù),可以較為方便的調(diào)取過(guò)往數(shù)據(jù)進(jìn)行比對(duì)追溯分析;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
具備一定的AI不可代替性
用戶(hù)行為的背后依舊是人文心理等方面的內(nèi)容分析或業(yè)務(wù)場(chǎng)景化決策,往往離不開(kāi)人工的加持介入;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
實(shí)施構(gòu)建的流程
以下是對(duì)用戶(hù)行為分析的工作流圖解,由于不同企業(yè)的訴求有差異,以下工作流僅代表大部分用作交流;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
 
關(guān)鍵節(jié)點(diǎn)拆解說(shuō)明
此次主要聊聊基礎(chǔ)的上手運(yùn)用與注意事項(xiàng),不涉及過(guò)深或難以理解的部分,如果說(shuō)用戶(hù)行為分析可以到達(dá)高等數(shù)學(xué)的程度,那么此次就講講加減乘除好了,師父領(lǐng)進(jìn)門(mén),修行靠個(gè)人,各位看客請(qǐng)上座!
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
目標(biāo)需求拆解
1、什么時(shí)候開(kāi)始?
首先你的產(chǎn)品得有流量,然后得有一個(gè)關(guān)乎到用戶(hù)行為的目標(biāo),例如想看看用戶(hù)流量分布、了解功能使用頻率、任務(wù)執(zhí)行的漏斗關(guān)系、用戶(hù)行為偏好、用戶(hù)數(shù)據(jù)畫(huà)像構(gòu)建等,這個(gè)時(shí)候就可以考慮開(kāi)始了,不然就可能南轅北轍費(fèi)力不討好。
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
2、界定一個(gè)范圍?
首先構(gòu)建一套完善的用戶(hù)行為分析系統(tǒng)并持續(xù)的維護(hù)與應(yīng)用并不是一個(gè)輕松的事情,所以最好是針對(duì)性構(gòu)建+多迭代,不要上來(lái)就想著做全盤(pán)搭建,表面的工作或問(wèn)題往往可能只是浮冰,逐步的深入后問(wèn)題會(huì)越來(lái)越多,個(gè)人深有體會(huì)!
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
3、由上而下,找準(zhǔn)路線?
通過(guò)業(yè)務(wù)目標(biāo)向下拆解,一般上層目標(biāo)無(wú)非是商業(yè)轉(zhuǎn)化、用戶(hù)活躍留存、任務(wù)通過(guò)率這些,向下拆解則是通過(guò)業(yè)務(wù)目標(biāo)去鎖定核心的業(yè)務(wù)場(chǎng)景或任務(wù)線路,這些核心的頁(yè)面、場(chǎng)景或是任務(wù)線路,就是你前期可以界定的一個(gè)范圍,后續(xù)的重點(diǎn)工作則是將核心功能的入口或路徑窮舉出來(lái),避免數(shù)據(jù)對(duì)不上或找不到異常源頭的情況。
在我的認(rèn)知里,用戶(hù)行為分析建設(shè)不是一錘子買(mǎi)賣(mài),步伐走小一點(diǎn),基礎(chǔ)搭好一些,以后的迭代建設(shè)或維護(hù)也會(huì)輕松許多;
概括一下就是,不要追求全面,靠攏業(yè)務(wù)價(jià)值,關(guān)聯(lián)上指標(biāo)或者核心業(yè)務(wù)場(chǎng)景即可;
之前網(wǎng)上看到有大佬給了一個(gè)建設(shè)思路,這里搬來(lái)大家參考一下;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
帶你認(rèn)識(shí)不一樣的埋點(diǎn)
數(shù)據(jù)埋點(diǎn)技術(shù)已經(jīng)很成熟了,甚至有很多第三方的埋點(diǎn)+分析的服務(wù),以及采集用戶(hù)行為數(shù)據(jù)的不僅僅只有埋點(diǎn)技術(shù)方案,哪怕你做一個(gè)錄屏技術(shù)都可以,只不過(guò)從數(shù)字化產(chǎn)品視角出發(fā),埋點(diǎn)技術(shù)更有性?xún)r(jià)比,以及符合用戶(hù)隱私權(quán)益,所以這里專(zhuān)門(mén)講一下“埋點(diǎn)”這個(gè)老技術(shù),熟悉的大佬們可以跳過(guò)埋點(diǎn)這部分。
1、埋點(diǎn)是什么
數(shù)字化應(yīng)用大多有個(gè)特征,就是需要用戶(hù)進(jìn)行界面交互,有交互就有行為動(dòng)作發(fā)生,而
數(shù)據(jù)埋點(diǎn)
就是將用戶(hù)在
界面交互
時(shí)產(chǎn)生的
各種類(lèi)型
監(jiān)控日志
上報(bào)到產(chǎn)品后臺(tái)去,這樣業(yè)務(wù)團(tuán)隊(duì)就可以知道到用戶(hù)在不同頁(yè)面或業(yè)務(wù)場(chǎng)景下操作了什么,去往過(guò)哪些頁(yè)面,當(dāng)結(jié)合業(yè)務(wù)后臺(tái)的訂單等數(shù)據(jù)時(shí),就可以還原出更加清晰的用戶(hù)行為全貌。
 
通常這些埋點(diǎn)會(huì)分為
“頁(yè)面訪問(wèn)(PV、UV)、區(qū)塊曝光(區(qū)域、時(shí)長(zhǎng))、按鈕操作(動(dòng)作、狀態(tài))”
三大類(lèi)型,并
攜帶交互元素和操作者的各類(lèi)特征信息參數(shù)
,便于我們知曉更多的場(chǎng)景細(xì)節(jié)與用戶(hù)情況,例如知曉這個(gè)【免費(fèi)試用】按鈕是對(duì)應(yīng)了那個(gè)產(chǎn)品?點(diǎn)擊的用戶(hù)是否已開(kāi)通這個(gè)產(chǎn)品?這個(gè)用戶(hù)是否為付費(fèi)用戶(hù)?是否個(gè)人還是商家類(lèi)型?用戶(hù)從那個(gè)渠道進(jìn)來(lái)的等,而且這些植入在產(chǎn)品代碼中的埋點(diǎn)可以不間斷持續(xù)的采集和配套產(chǎn)品迭代進(jìn)行維護(hù),可以幫助業(yè)務(wù)團(tuán)隊(duì)獲取大量有效數(shù)據(jù)用作業(yè)務(wù)分析決策。
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
2、什么時(shí)候派上用場(chǎng)
這些數(shù)據(jù)埋點(diǎn)主要是為業(yè)務(wù)目標(biāo)的洞察分析服務(wù),也就是說(shuō)業(yè)務(wù)目標(biāo)中需要采集用戶(hù)行為數(shù)據(jù)時(shí),埋點(diǎn)就要派上用場(chǎng)了,相比傳統(tǒng)的業(yè)務(wù)日志,埋點(diǎn)可以收集到更加全面的界面交互的行為數(shù)據(jù),能夠簡(jiǎn)易的還原出一套線上用戶(hù)的使用情景,而不僅限于一些業(yè)務(wù)后臺(tái)就能統(tǒng)計(jì)出的轉(zhuǎn)化率或基礎(chǔ)數(shù)據(jù)等;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
并且埋點(diǎn)數(shù)據(jù)可以與業(yè)務(wù)數(shù)據(jù)分開(kāi)存儲(chǔ)運(yùn)維,這意味著埋點(diǎn)數(shù)據(jù)可以更迅速的根據(jù)設(shè)定的指標(biāo)公式統(tǒng)計(jì)出期望的數(shù)據(jù)或視圖,并且不會(huì)干擾業(yè)務(wù)訪問(wèn)的性能質(zhì)量,因此產(chǎn)品迭代后的新老數(shù)據(jù)對(duì)比、營(yíng)銷(xiāo)活動(dòng)的效果評(píng)估、用戶(hù)行為的特征偏好識(shí)別等,數(shù)據(jù)埋點(diǎn)都以可以派上用場(chǎng)的。
 
3、怎么提埋點(diǎn)需求?
首先埋點(diǎn)需求沒(méi)有固定的文檔格式,其次不同埋點(diǎn)服務(wù)平臺(tái)的要求也有差異,就移動(dòng)端來(lái)講,很多服務(wù)商已經(jīng)支持可視化埋點(diǎn)、全埋點(diǎn)、無(wú)埋點(diǎn)服務(wù),可以實(shí)現(xiàn)自動(dòng)識(shí)別交互元素并進(jìn)行埋點(diǎn)操作,大大減少了開(kāi)發(fā)工作量,那么再聊回埋點(diǎn)需求怎么提。
 
核心結(jié)論就是由上而下,通過(guò)業(yè)務(wù)目標(biāo)或核心指標(biāo)進(jìn)行拆解,然后關(guān)聯(lián)到核心的任務(wù)流程上,對(duì)于一個(gè)頁(yè)面或一套流程沒(méi)有必要進(jìn)行全篇埋點(diǎn),技巧我概括為以下幾點(diǎn);
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
埋點(diǎn)需求的主要內(nèi)容基本包含以下,根據(jù)業(yè)務(wù)或埋點(diǎn)平臺(tái)的差異,可以自行調(diào)整;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
4、業(yè)務(wù)擴(kuò)參怎么一回事兒
擴(kuò)參即擴(kuò)展參數(shù),指在當(dāng)前用戶(hù)界面中可以請(qǐng)求到的業(yè)務(wù)數(shù)據(jù),并將這些業(yè)務(wù)數(shù)據(jù)綁定到埋點(diǎn)日志中一并上報(bào)給埋點(diǎn)數(shù)據(jù)后臺(tái),通常為一些用戶(hù)屬性參數(shù)、業(yè)務(wù)屬性參數(shù)、設(shè)備屬性參數(shù)、網(wǎng)絡(luò)環(huán)境參數(shù),這樣我們就可以通過(guò)這些額外的參數(shù)進(jìn)行數(shù)據(jù)分析或是過(guò)濾,舉個(gè)典型案例;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
 
數(shù)據(jù)治理是做什么
為什么要治理?
簡(jiǎn)單說(shuō)就是提升數(shù)據(jù)質(zhì)量與準(zhǔn)確性,在龐大的一套數(shù)據(jù)中,我們需要弄清楚數(shù)據(jù)之間的映射關(guān)系,即不同的數(shù)據(jù)參數(shù)代表了什么元素什么動(dòng)作什么含義,數(shù)據(jù)是否有缺漏或冗余、報(bào)錯(cuò)漏報(bào)亂報(bào)、是否有無(wú)效的臟數(shù)據(jù)(例如內(nèi)部的測(cè)試數(shù)據(jù)或腳本爬蟲(chóng)等帶來(lái)的數(shù)據(jù)),如果我們不去將這些數(shù)據(jù)進(jìn)行治理,則統(tǒng)計(jì)出的數(shù)據(jù)指標(biāo)特征或趨勢(shì)都將不可靠,無(wú)法被商業(yè)應(yīng)用。
簡(jiǎn)單講就是元數(shù)據(jù)沒(méi)治理準(zhǔn)確,得到的數(shù)據(jù)指標(biāo)也就失去了實(shí)用價(jià)值。
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
怎么去治理?
本質(zhì)是查缺補(bǔ)漏將無(wú)效的數(shù)據(jù)過(guò)濾掉或糾錯(cuò)
,再把數(shù)據(jù)涵義映射成具體的指標(biāo)或描述,用作進(jìn)一步的指標(biāo)計(jì)算與分析,如果數(shù)據(jù)又多又雜,你會(huì)發(fā)覺(jué)這一步要你老命,例如埋點(diǎn)就需要逐個(gè)查詢(xún)?cè)悸顸c(diǎn)的位置、觸發(fā)條件、埋點(diǎn)用途、埋點(diǎn)含義甚至與關(guān)聯(lián)業(yè)務(wù)數(shù)據(jù)的關(guān)系校對(duì)等。
不過(guò)還好,
一般來(lái)講這些工作都是數(shù)據(jù)建模(BI)相關(guān)人員去負(fù)責(zé)的
作為應(yīng)用層的我們,更多的是能夠根據(jù)業(yè)務(wù)目標(biāo)提出埋點(diǎn)需求、提出指標(biāo)與數(shù)據(jù)報(bào)表需求,以及通過(guò)數(shù)據(jù)核算或查看數(shù)據(jù)趨勢(shì)等手段找出異常讓 BI 修復(fù)
,所以這里就不展開(kāi)埋點(diǎn)數(shù)據(jù)治理的方法了。
 
數(shù)據(jù)維護(hù)不易
就埋點(diǎn)監(jiān)控用戶(hù)行為的方式來(lái)講,除了平時(shí)的治理與報(bào)表問(wèn)題修復(fù),每次迭代改版還要做好相關(guān)埋點(diǎn)信息的管理與維護(hù)更新,保證不出錯(cuò),不影響關(guān)聯(lián)指標(biāo),甚至是線上用戶(hù)偏好的推薦算法等應(yīng)用,特別是數(shù)據(jù)規(guī)模越來(lái)越大后,又密切關(guān)聯(lián)著業(yè)務(wù)決策時(shí),數(shù)據(jù)更不容出錯(cuò),且要求準(zhǔn)確。
 
三大分析內(nèi)容產(chǎn)出
1、內(nèi)容產(chǎn)出的先后
在用戶(hù)行為分析內(nèi)容構(gòu)建的過(guò)程中,除非是有特定場(chǎng)景特定訴求,通常個(gè)人認(rèn)為都是先出指標(biāo)、再完善行為鏈路、再逐步豐滿用戶(hù)畫(huà)像的一個(gè)過(guò)程,原因如下;
  1.  
    通常先接到的都是一些核心指標(biāo),例如轉(zhuǎn)化率、留存率、活躍度等,同時(shí)這些指標(biāo)也是上層最先關(guān)注到的;
  2.  
    接著就是完善不同場(chǎng)景或任務(wù)路徑相關(guān),幫助洞察微觀視角下的體驗(yàn)障礙或用戶(hù)偏好等,產(chǎn)出流量統(tǒng)計(jì)、流程漏斗等,起到業(yè)務(wù)體驗(yàn)的洞察改善決策作用;
  3.  
    用戶(hù)畫(huà)像的數(shù)據(jù)本身就沒(méi)那么好收集,并且是一個(gè)逐步完善和被業(yè)務(wù)決策應(yīng)用的過(guò)程,所以一開(kāi)始不會(huì)直接奔著用戶(hù)畫(huà)像構(gòu)建開(kāi)始;
 
2、基礎(chǔ)指標(biāo)構(gòu)建
所謂指標(biāo)可以理解成是產(chǎn)品某項(xiàng)業(yè)務(wù)的成績(jī),例如我是賣(mài)包子的,那么我的指標(biāo)大概率就是每天賣(mài)出去多少包子、利潤(rùn)有多少、哪款包子銷(xiāo)量高,根據(jù)這些信息我就可以知道我平時(shí)應(yīng)該準(zhǔn)備多少包子、哪些品類(lèi)的包子需要多做一些、我靠賣(mài)包子能賺多少錢(qián)。
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
指標(biāo)構(gòu)建的原理
實(shí)際上指標(biāo)的構(gòu)建邏輯可以很簡(jiǎn)單,例如A占B的百分比、ABC的總和、連續(xù)多天A占B的變化等,很多加減乘除的算法就能搞定,主要是能拿到真實(shí)數(shù)據(jù),不然我懷疑你在做爛賬......
 
常見(jiàn)指標(biāo):
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
3、行為鏈路分析
用戶(hù)行為路徑是一種數(shù)字化的旅行地圖,相比較傳統(tǒng)服務(wù)的旅行地圖,場(chǎng)景會(huì)更純粹、意圖更準(zhǔn)確、數(shù)據(jù)采集更便捷,主要作用有以下幾點(diǎn);
  •  
    分析用戶(hù)在產(chǎn)品中的活動(dòng)范圍或頁(yè)面路徑的關(guān)系,可以幫助了解用戶(hù)活躍分布,流量走向等情況;
  •  
    識(shí)別在任務(wù)或流程漏斗中的卡點(diǎn)或跳失情況,幫助優(yōu)化流程體驗(yàn)或提升轉(zhuǎn)化率等指標(biāo);
  •  
    通過(guò)用戶(hù)的互動(dòng)方式或路徑特征來(lái)進(jìn)行用戶(hù)分類(lèi)或偏好分析預(yù)測(cè)等,用于內(nèi)容推薦算法或精準(zhǔn)營(yíng)銷(xiāo);
 
這些行為我們可以大致分為瀏覽、消費(fèi)、互動(dòng)三大類(lèi),根據(jù)不同的業(yè)務(wù)類(lèi)型,可以選擇性采集和分析相關(guān)數(shù)據(jù),例如電商產(chǎn)品就比較關(guān)注用戶(hù)的瀏覽與消費(fèi)行為,常見(jiàn)的有商品瀏覽、添加購(gòu)物車(chē)到下單;
而社交應(yīng)用就更關(guān)注用戶(hù)的互動(dòng)行為,如不同類(lèi)型的內(nèi)容訪問(wèn)、評(píng)論點(diǎn)贊、關(guān)注收藏分享等;
這些數(shù)據(jù)最終可能由可視化的數(shù)據(jù)報(bào)表呈現(xiàn)出來(lái),以便于業(yè)務(wù)團(tuán)隊(duì)快捷的找到數(shù)據(jù)問(wèn)題或特征,如常見(jiàn)的漏斗圖、桑基圖、雷達(dá)圖、樹(shù)狀圖、散點(diǎn)圖、決策樹(shù)等;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
小話題延展
最近在UXRen的一場(chǎng)分享會(huì)中,聽(tīng)羅浩講了體驗(yàn)營(yíng)銷(xiāo)的話題,雖然是關(guān)于用戶(hù)研究在職能崗位上挖掘新的商業(yè)能力的內(nèi)容,但是其中有一段是關(guān)于如何在旅行地圖中挖掘新的營(yíng)銷(xiāo)觸點(diǎn),有一些體會(huì),這里結(jié)合用戶(hù)行為鏈路分析簡(jiǎn)單聊一下;
背景與問(wèn)題:
產(chǎn)品功能與業(yè)務(wù)增多,引流渠道多樣化,不同渠道流量的撬動(dòng)關(guān)鍵是什么,核心場(chǎng)景具備哪些能力,哪些渠道的流量能吃掉,這些流量所處的觸點(diǎn)或場(chǎng)景能支持什么,用戶(hù)意圖是什么,產(chǎn)品能力能滿足什么,產(chǎn)品發(fā)展可以支持哪些?如何分流或匹配各類(lèi)流量的意圖,并提供路徑分發(fā),這些用戶(hù)流量數(shù)據(jù)有何趨勢(shì)或特征,是否能與場(chǎng)景或觸點(diǎn)進(jìn)行根因分析,是否沉淀行為或偏好模型?
行為路徑的重點(diǎn):
在于觀察不同觸點(diǎn)下的客戶(hù)意圖,展開(kāi)業(yè)務(wù)所能觸及的部分或新的機(jī)會(huì),并匹配合適的關(guān)鍵路徑,以提升轉(zhuǎn)化或用戶(hù)粘性等,然后做數(shù)據(jù)回歸分析,抓取有效的用戶(hù)特征信息,并應(yīng)用到產(chǎn)品的內(nèi)容推薦或外部引流投放信息優(yōu)化上。
流程過(guò)程:
觸點(diǎn)展開(kāi)與機(jī)會(huì)洞察,觸點(diǎn)場(chǎng)景——意圖識(shí)別——結(jié)果匹配(關(guān)鍵路徑)——(根因回歸)畫(huà)像更新——算法推薦——廣告優(yōu)化
這一套下來(lái),是不是感覺(jué)有點(diǎn)兒似成相識(shí)?后來(lái)一想這不就是一套用戶(hù)增長(zhǎng)的設(shè)計(jì)思路嘛。
這一套下來(lái),是不是感覺(jué)有點(diǎn)兒似成相識(shí)?后來(lái)一想這不就是一套用戶(hù)增長(zhǎng)的設(shè)計(jì)思路嘛。
 
 
4、用戶(hù)數(shù)據(jù)畫(huà)像
主要是幫助了解和理解用戶(hù),使得我們可以劃分用戶(hù)群體和識(shí)別偏好特征,最終以提供精準(zhǔn)營(yíng)銷(xiāo)或是洞察用戶(hù)訴求來(lái)迭代改善產(chǎn)品。
其中偏好特征我們還可以根據(jù)業(yè)務(wù)屬性細(xì)分為興趣偏好、行為偏好、消費(fèi)偏好等,并為不同偏好特征的群體提供個(gè)性化的內(nèi)容服務(wù),例如常見(jiàn)的內(nèi)容標(biāo)簽標(biāo)記,通過(guò)識(shí)別用戶(hù)常看內(nèi)容的標(biāo)簽,來(lái)推薦類(lèi)似的標(biāo)簽的內(nèi)容或是有潛在興趣的標(biāo)簽內(nèi)容來(lái)抓住用戶(hù)的興趣。
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
 
常見(jiàn)畫(huà)像指標(biāo)構(gòu)建
這些指標(biāo)會(huì)通過(guò)用戶(hù)行為、設(shè)備信息、個(gè)人資料的完善來(lái)逐步獲取,主要可以了解到用戶(hù)的地域分布、年齡與性別分布、設(shè)備與活躍度情況,相應(yīng)的數(shù)據(jù)在業(yè)務(wù)后臺(tái)基本上都能夠獲取到,只需要將某個(gè)時(shí)間分區(qū)的數(shù)據(jù)拉出來(lái),經(jīng)過(guò)Excel之類(lèi)的軟件把數(shù)據(jù)加工一下,就能夠獲取到相關(guān)數(shù)據(jù)視圖。
如果將多個(gè)數(shù)據(jù)指標(biāo)結(jié)合起來(lái)分析,便可以獲取一些復(fù)合型數(shù)據(jù)指標(biāo),例如哪些年齡段的用戶(hù)群體消費(fèi)能力更強(qiáng)、活躍度更高、不同教育背景的興趣愛(ài)好是否有一定的關(guān)聯(lián)性等等;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
進(jìn)階畫(huà)像指標(biāo)構(gòu)建
進(jìn)階的數(shù)據(jù)畫(huà)像會(huì)完善更多的用戶(hù)特征信息,便于業(yè)務(wù)團(tuán)隊(duì)找到用戶(hù)群體的特征,做進(jìn)一步的精細(xì)化運(yùn)營(yíng)或內(nèi)容推薦,常見(jiàn)的畫(huà)像指標(biāo)如下;
此外就是在收集用戶(hù)數(shù)據(jù)的過(guò)程中,保證用戶(hù)隱私安全、合法性和安全性。
此外就是在收集用戶(hù)數(shù)據(jù)的過(guò)程中,保證用戶(hù)隱私安全、合法性和安全性。
 
用戶(hù)分層模型應(yīng)用
當(dāng)我們采集到一定的用戶(hù)數(shù)據(jù)后,就可以在數(shù)據(jù)畫(huà)像的構(gòu)建階段進(jìn)一步完成用戶(hù)分層工作,這一步是為了將用戶(hù)分類(lèi),因?yàn)椴煌脩?hù)群的目的是有差異的,例如閑逛、精準(zhǔn)采購(gòu)、參與活動(dòng)的等等,以提供差異化的服務(wù)做精準(zhǔn)營(yíng)銷(xiāo)、識(shí)別用戶(hù)群體特征做業(yè)務(wù)策略決策、或是優(yōu)化產(chǎn)品體驗(yàn)相關(guān),不過(guò)當(dāng)你的用戶(hù)規(guī)模尚小,運(yùn)營(yíng)模式簡(jiǎn)單,你也不用迫切去進(jìn)行用戶(hù)分層相關(guān),因?yàn)槭找娌淮蟆?/div>
那么通常都有哪些用戶(hù)分層模型呢?其實(shí)你并不陌生,一些給你列舉了一些;
用好「用戶(hù)行為分析」讓體驗(yàn)起飛【構(gòu)建篇】
 
 
分析結(jié)論到應(yīng)用
相信你也發(fā)現(xiàn)了,用戶(hù)行為分析的構(gòu)建與產(chǎn)出并不只是行為鏈路的數(shù)據(jù),同時(shí)會(huì)包攬很多其他的有價(jià)值的指標(biāo)與數(shù)據(jù),所以不要被用戶(hù)行為四個(gè)字迷惑,或許你此刻正需要構(gòu)建相關(guān)數(shù)據(jù)。
 
當(dāng)你準(zhǔn)備構(gòu)建或整理用戶(hù)行為分析前,記得目標(biāo)或問(wèn)題先行,針對(duì)性采集數(shù)據(jù)或建設(shè)指標(biāo),在你有了相對(duì)準(zhǔn)確或清晰易懂的數(shù)據(jù)后,那些數(shù)據(jù)報(bào)表或圖表根本難不倒你,說(shuō)白了無(wú)非是將純純的一堆數(shù)據(jù)換了形式展示,如果你數(shù)據(jù)可視化的形式與應(yīng)用不夠了解,你可以看看AntV官網(wǎng)的介紹說(shuō)明了解一下,其實(shí)你也不用每個(gè)都研究個(gè)遍,實(shí)用的就那么幾個(gè),酷炫是要代價(jià)的,報(bào)表搭建平臺(tái)支不支持、Excel支不支持、時(shí)間精力夠不夠研發(fā)給你整,都是問(wèn)題~
 
 
此篇最后!
你可能疑問(wèn)沒(méi)有完整的教程手把手教你啊,其實(shí)不然,構(gòu)建的前提、流程、要點(diǎn)、建設(shè)方向均在此篇中交代過(guò),當(dāng)你按照這套流程框架去做,基本上不會(huì)有啥大問(wèn)題,一般來(lái)講這些內(nèi)容也夠用,至于選用哪些數(shù)據(jù)埋點(diǎn)平臺(tái)、數(shù)據(jù)分析平臺(tái)、報(bào)表搭建平臺(tái)、視自家公司情況而定吧。
也不要擔(dān)心在數(shù)據(jù)報(bào)表搭建或分析的過(guò)程中,你搞不定,是不是你執(zhí)行先不說(shuō),多問(wèn)問(wèn)百度或平臺(tái)客服總能解決,如果就是覺(jué)得很難上手,那么大概率是工具你不熟,或者工具不好用。
 
 


作者:泡泡_PAO
鏈接:https://www.zcool.com.cn/article/ZMTYyOTMxNg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

藍(lán)藍(lán)設(shè)計(jì)(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶(hù)體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢(xún)高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢(xún)UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司用戶(hù)體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

 

日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 把美女屁股眼扒开图片 | 给我免费观看的视频在线播放 | 从后面撕开老师的丝袜动态图 | 人人干国产| 国产美女极品免费视频 | 香蕉精品高清在线观看视频 | 欧美精品v日韩精品v国产精品 | 亚洲香蕉伊在人在线观看9 亚洲系列国产系列 | 亚洲国产情侣一区二区三区 | 亚洲 综合 自拍 精品 在线 | 久久se精品一区二区国产 | 亚洲第一区在线观看 | 天天av天天翘天天综合网 | 床戏小说| 五月色综合婷婷综合俺来也 | 国产青草亚洲香蕉精品久久 | 日本高免费观看在线播放 | 欧美影院一区二区 | 日韩精品欧美激情国产一区 | 色偷偷伊人 | 九九精品成人免费国产片 | 日韩一区三区 | 国产免费一区二区三区 | 国产大乳美女挤奶视频 | 四川女人偷人真实视频 | 久久精品国产亚洲AV热无遮挡 | 日本加勒比在线播放 | 国产伦精品一区二区三区免费观看 | 日本免费高清在线观看播放 | 暖暖高清日本在线 | 四虎免费在线观看 | 大伊香蕉在线精品不卡视频 | 日韩视频一区二区 | 国产91一区二区在线播放不卡 | chinesemature丰满成熟 | 日本精品久久久久中文字幕 1 | 亚洲黄色天堂 | 91久久国产成人免费观看资源 | 青青在线观看 | 久久九九久精品国产尤物 | 国产成人综合亚洲亚洲欧美 |