首頁(yè)

響應(yīng)式UI設(shè)計(jì)中的斷點(diǎn)是什么

藍(lán)藍(lán)設(shè)計(jì)的小編

在當(dāng)今數(shù)字化的世界中,響應(yīng)式 UI設(shè)計(jì)成為了構(gòu)建優(yōu)秀用戶體驗(yàn)的關(guān)鍵要素之一。而在響應(yīng)式設(shè)計(jì)中,“斷點(diǎn)”這個(gè)概念扮演著舉足輕重的角色。

那么,究竟什么是響應(yīng)式 UI設(shè)計(jì)中的斷點(diǎn)呢?簡(jiǎn)單來(lái)說(shuō),斷點(diǎn)就是在不同屏幕尺寸和設(shè)備類(lèi)型下,為了確保頁(yè)面布局和內(nèi)容能夠合理呈現(xiàn)而設(shè)定的特定閾值。

UI設(shè)計(jì)

想象一下,我們?cè)谑褂酶鞣N各樣的設(shè)備訪問(wèn)同一個(gè)網(wǎng)站或應(yīng)用,從小小的智能手機(jī)到巨大的桌面顯示器。屏幕的尺寸和分辨率千差萬(wàn)別,如果沒(méi)有斷點(diǎn)的存在,頁(yè)面可能會(huì)在不同設(shè)備上出現(xiàn)混亂不堪的情況。

以一個(gè)常見(jiàn)的網(wǎng)頁(yè)為例,當(dāng)在小屏幕的手機(jī)上瀏覽時(shí),頁(yè)面可能會(huì)以單列布局展示內(nèi)容,以適應(yīng)狹窄的屏幕空間。但當(dāng)屏幕尺寸逐漸增大,比如到平板電腦的尺寸時(shí),就達(dá)到了一個(gè)斷點(diǎn)。此時(shí),頁(yè)面布局可能會(huì)從單列變?yōu)殡p列,以更好地利用更寬的屏幕。

斷點(diǎn)的設(shè)置并非隨意為之,而是基于對(duì)用戶行為和設(shè)備使用場(chǎng)景的深入研究。設(shè)計(jì)師需要考慮到不同設(shè)備的常見(jiàn)分辨率、用戶的操作習(xí)慣以及內(nèi)容的重要性和優(yōu)先級(jí)。

UI設(shè)計(jì)

比如說(shuō),對(duì)于一個(gè)電商網(wǎng)站,在手機(jī)端,可能重點(diǎn)展示熱門(mén)商品和搜索功能;而在大屏幕的電腦端,則可以同時(shí)展示更多的商品分類(lèi)和詳細(xì)的產(chǎn)品信息。斷點(diǎn)的作用就是在這些不同的場(chǎng)景之間實(shí)現(xiàn)平滑的過(guò)渡,讓用戶在任何設(shè)備上都能獲得良好的體驗(yàn)。

此外,斷點(diǎn)也不僅僅是關(guān)于布局的改變,還包括字體大小、圖片尺寸、按鈕大小和間距等元素的調(diào)整。在較小的屏幕上,字體可能需要適當(dāng)放大以保證可讀性;圖片可能需要壓縮以減少加載時(shí)間。

然而,斷點(diǎn)的設(shè)置也并非越多越好。過(guò)多的斷點(diǎn)可能會(huì)導(dǎo)致設(shè)計(jì)和開(kāi)發(fā)的復(fù)雜性增加,同時(shí)也可能影響頁(yè)面的性能。因此,設(shè)計(jì)師需要在滿足用戶需求和保持設(shè)計(jì)簡(jiǎn)潔之間找到一個(gè)平衡。

UI設(shè)計(jì)

在實(shí)際的響應(yīng)式 UI 設(shè)計(jì)中,常用的斷點(diǎn)通常包括手機(jī)、平板和桌面等常見(jiàn)設(shè)備的尺寸范圍。但隨著新設(shè)備的不斷涌現(xiàn),如可折疊手機(jī)和超大尺寸的平板電腦,斷點(diǎn)的設(shè)置也需要不斷地優(yōu)化和更新。

總之,斷點(diǎn)是響應(yīng)式 UI 設(shè)計(jì)中的關(guān)鍵環(huán)節(jié),它使得頁(yè)面能夠在各種設(shè)備上自適應(yīng)地呈現(xiàn)出最佳效果。通過(guò)合理設(shè)置斷點(diǎn),我們能夠?yàn)橛脩籼峁┮恢隆⑹孢m和便捷的交互體驗(yàn),無(wú)論他們使用何種設(shè)備訪問(wèn)我們的產(chǎn)品。

響應(yīng)式設(shè)計(jì)在App界面中的應(yīng)用與實(shí)踐

藍(lán)藍(lán)設(shè)計(jì)的小編

在當(dāng)今數(shù)字化的時(shí)代,用戶使用的設(shè)備多種多樣,屏幕尺寸和分辨率各不相同。為了給用戶提供一致且優(yōu)質(zhì)的體驗(yàn),響應(yīng)式設(shè)計(jì)在 App 界面中扮演著至關(guān)重要的角色。

響應(yīng)式設(shè)計(jì)的核心在于能夠根據(jù)不同的設(shè)備和屏幕尺寸,自動(dòng)調(diào)整和優(yōu)化界面布局、元素大小和內(nèi)容展示。這就像是給 App 穿上了一件“智能外衣”,使其能夠完美適應(yīng)各種環(huán)境。

移動(dòng)app設(shè)計(jì) (8).png

首先,在布局方面,響應(yīng)式設(shè)計(jì)采用靈活的網(wǎng)格系統(tǒng)。例如,一個(gè)新聞資訊類(lèi) App,在大屏幕設(shè)備上可能會(huì)以多欄布局展示更多的內(nèi)容,而在小屏幕設(shè)備上則會(huì)自動(dòng)調(diào)整為單欄布局,確保文字大小適中,閱讀舒適。

圖片和多媒體元素的處理也是響應(yīng)式設(shè)計(jì)的關(guān)鍵。圖片會(huì)根據(jù)屏幕的分辨率和尺寸進(jìn)行自適應(yīng)加載,避免出現(xiàn)圖片失真或加載過(guò)慢的情況。同時(shí),視頻的播放窗口也會(huì)根據(jù)設(shè)備的橫豎屏狀態(tài)進(jìn)行自動(dòng)調(diào)整,提供最佳的觀看體驗(yàn)。

字體的大小和排版同樣會(huì)隨著屏幕的變化而動(dòng)態(tài)調(diào)整。在小屏幕上,字體會(huì)適當(dāng)增大,行間距也會(huì)加寬,以保證清晰可讀;而在大屏幕上,則可以展示更多的文字內(nèi)容,同時(shí)保持良好的視覺(jué)效果。

移動(dòng)app設(shè)計(jì) (6).png

另外,按鈕和交互元素的尺寸和位置也會(huì)進(jìn)行相應(yīng)的優(yōu)化。確保在不同設(shè)備上,用戶都能夠輕松點(diǎn)擊和操作,不會(huì)因?yàn)槠聊怀叽绲牟町惗霈F(xiàn)誤觸或操作不便的問(wèn)題。

以一款電商 App 為例,在桌面端,用戶可以看到豐富的商品分類(lèi)和詳細(xì)的產(chǎn)品介紹,購(gòu)物車(chē)和結(jié)算按鈕也清晰可見(jiàn);而在移動(dòng)端,界面會(huì)重點(diǎn)突出熱門(mén)商品和搜索功能,方便用戶快速找到心儀的商品。

響應(yīng)式設(shè)計(jì)不僅提升了用戶體驗(yàn),還帶來(lái)了諸多實(shí)際的好處。它減少了開(kāi)發(fā)和維護(hù)多個(gè)版本 App 的成本和工作量,提高了開(kāi)發(fā)效率。同時(shí),也有助于提升 App 的品牌形象和用戶滿意度。

相關(guān)數(shù)據(jù)顯示,采用響應(yīng)式設(shè)計(jì)的 App 能夠吸引更多的用戶,并且用戶的留存率和活躍度也更高。專家們也一致認(rèn)為,響應(yīng)式設(shè)計(jì)是未來(lái) App 發(fā)展的必然趨勢(shì)。

然而,實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)并非一蹴而就,需要設(shè)計(jì)師和開(kāi)發(fā)人員充分考慮各種設(shè)備的特點(diǎn)和用戶行為,進(jìn)行精心的規(guī)劃和測(cè)試。

移動(dòng)APP設(shè)計(jì) (5).png

總之,響應(yīng)式設(shè)計(jì)在 App 界面中的應(yīng)用與實(shí)踐,是為了滿足用戶在不同設(shè)備上的需求,提供無(wú)縫、流暢和一致的體驗(yàn)。它是 App 設(shè)計(jì)領(lǐng)域的一項(xiàng)重要?jiǎng)?chuàng)新,為用戶帶來(lái)了極大的便利,也為開(kāi)發(fā)者帶來(lái)了更多的機(jī)遇和挑戰(zhàn)。就如同為 App 打造了一把萬(wàn)能鑰匙,能夠輕松開(kāi)啟不同設(shè)備上的精彩世界,讓用戶隨時(shí)隨地都能享受到優(yōu)質(zhì)的服務(wù)。

移動(dòng)端UI設(shè)計(jì)的工具有哪些

藍(lán)藍(lán)設(shè)計(jì)的小編

在當(dāng)今數(shù)字化的時(shí)代,移動(dòng)端 UI 設(shè)計(jì)的重要性日益凸顯。優(yōu)秀的移動(dòng)端UI設(shè)計(jì)能夠極大地提升用戶體驗(yàn),增強(qiáng)產(chǎn)品的競(jìng)爭(zhēng)力。而要實(shí)現(xiàn)出色的設(shè)計(jì),選擇合適的工具至關(guān)重要。

移動(dòng)端UI設(shè)計(jì)

首先,不得不提的是 Sketch。它是一款專為UI設(shè)計(jì)而生的矢量圖形工具,在 Mac 系統(tǒng)上表現(xiàn)出色。Sketch 提供了豐富的繪圖工具和功能,支持多層級(jí)編輯,能夠輕松創(chuàng)建各種復(fù)雜的圖形和界面元素。其強(qiáng)大的文本處理能力和導(dǎo)出選項(xiàng),使得設(shè)計(jì)師可以高效地完成設(shè)計(jì)并輸出高質(zhì)量的切圖。

Adobe XD 也是一款備受青睞的工具。它支持跨平臺(tái)使用,無(wú)論是 Windows 還是 Mac 系統(tǒng)都能運(yùn)行。XD 具備強(qiáng)大的交互設(shè)計(jì)功能,能夠方便地創(chuàng)建原型和進(jìn)行交互效果的演示。同時(shí),它還支持團(tuán)隊(duì)協(xié)作,讓多個(gè)設(shè)計(jì)師可以同時(shí)在一個(gè)項(xiàng)目上工作,提高了工作效率。

Figma 則是一款基于云端的 UI 設(shè)計(jì)工具,具有實(shí)時(shí)協(xié)作的獨(dú)特優(yōu)勢(shì)。多個(gè)設(shè)計(jì)師可以同時(shí)在線編輯同一個(gè)文件,并且修改內(nèi)容能夠?qū)崟r(shí)同步。這對(duì)于團(tuán)隊(duì)合作來(lái)說(shuō)非常便捷,大大減少了溝通成本和文件傳遞的麻煩。

移動(dòng)端UI設(shè)計(jì)

Photoshop 雖然不是專門(mén)為 UI 設(shè)計(jì)開(kāi)發(fā)的,但仍然是許多設(shè)計(jì)師常用的工具之一。它擁有強(qiáng)大的圖像處理能力,對(duì)于處理復(fù)雜的圖像效果和圖形編輯非常有用。不過(guò),在 UI 設(shè)計(jì)的效率方面,可能不如專門(mén)的 UI 設(shè)計(jì)工具。

Illustrator 則在繪制矢量圖形方面表現(xiàn)出色,常用于創(chuàng)建圖標(biāo)、插畫(huà)等元素。與其他工具結(jié)合使用,可以為 UI 設(shè)計(jì)增添更多的創(chuàng)意和個(gè)性。

此外,還有 InVision Studio,它不僅能進(jìn)行界面設(shè)計(jì),還能將設(shè)計(jì)轉(zhuǎn)化為可交互的原型,方便進(jìn)行測(cè)試和演示。

還有一些專門(mén)用于制作動(dòng)效的工具,如 Principle 和 After Effects。Principle 操作相對(duì)簡(jiǎn)單,適合制作一些簡(jiǎn)單而流暢的交互動(dòng)效;After Effects 則功能強(qiáng)大,能夠?qū)崿F(xiàn)復(fù)雜精美的動(dòng)畫(huà)效果,但學(xué)習(xí)成本相對(duì)較高。

值得一提的是,隨著技術(shù)的發(fā)展,一些在線工具如 Canva 也逐漸受到關(guān)注。Canva 提供了大量的模板和素材,對(duì)于初學(xué)者或者需要快速出圖的情況非常實(shí)用。

移動(dòng)端UI設(shè)計(jì)

不同的工具都有其特點(diǎn)和優(yōu)勢(shì),設(shè)計(jì)師可以根據(jù)項(xiàng)目需求、個(gè)人習(xí)慣和團(tuán)隊(duì)協(xié)作的要求來(lái)選擇合適的工具。

據(jù)相關(guān)調(diào)查數(shù)據(jù)顯示,熟練掌握多種 UI 設(shè)計(jì)工具的設(shè)計(jì)師,在工作中能夠更加靈活應(yīng)對(duì)各種設(shè)計(jì)需求,其作品的質(zhì)量和效率也往往更高。專家建議,設(shè)計(jì)師應(yīng)該不斷學(xué)習(xí)和嘗試新的工具,以適應(yīng)不斷變化的設(shè)計(jì)環(huán)境。

總之,移動(dòng)端 UI 設(shè)計(jì)的工具豐富多樣,選擇適合自己的工具組合,能夠幫助設(shè)計(jì)師更好地發(fā)揮創(chuàng)意,打造出令人驚艷的移動(dòng)端界面。

如何在不同移動(dòng)平臺(tái)上實(shí)現(xiàn)UI設(shè)計(jì)的一致性

藍(lán)藍(lán)設(shè)計(jì)的小編

在如今移動(dòng)互聯(lián)網(wǎng)高度發(fā)達(dá)的時(shí)代,我們的生活被各種各樣的移動(dòng)應(yīng)用所充斥。然而,不同移動(dòng)平臺(tái)上的應(yīng)用 UI 設(shè)計(jì)往往存在差異,這給用戶帶來(lái)了不便,也影響了品牌形象的統(tǒng)一性。那么,如何在不同移動(dòng)平臺(tái)上實(shí)現(xiàn)UI設(shè)計(jì)的一致性呢?

B端彈窗設(shè)計(jì)中的11大法則

藍(lán)藍(lán)小助手

B端彈窗設(shè)計(jì)中的11大法則:一、? ?彈窗的定義。二、? ?彈窗的由來(lái)。三、? ?彈窗的分類(lèi)。四、? ?我眼中的彈窗分類(lèi)。五、? ?模態(tài)彈窗和非模態(tài)彈窗的區(qū)別。六、? ?彈窗的尺寸。七、? ?彈窗的使用場(chǎng)景。八、? ?彈窗使用的注意事項(xiàng)。九、? ?動(dòng)態(tài)彈窗。十、? ?彈窗樣式的多樣性。十一、彈窗中的按鈕文案。

超全面陰影設(shè)計(jì)指南

藍(lán)藍(lán)小助手

陰影設(shè)計(jì)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色,它不僅能夠增強(qiáng)設(shè)計(jì)的立體感和層次感,還能有效地引導(dǎo)用戶的注意力,提升用戶體驗(yàn)。
陰影向左:
當(dāng)元素(如導(dǎo)航欄、抽屜組件或固定表格欄)位于屏幕右側(cè)時(shí),向左的陰影能夠突出這些元素,并暗示它們是可交互或可擴(kuò)展的。
陰影向右:
對(duì)于位于屏幕左側(cè)的元素(如導(dǎo)航欄、抽屜組件或固定表格欄),向右的陰影能夠吸引用戶的注意力,并強(qiáng)調(diào)這些元素的存在和重要性。
陰影向下:
陰影向下通常用于組件內(nèi)部或組件本身,以營(yíng)造立體感和層次感,這是界面設(shè)計(jì)中比較常規(guī)且有效的視覺(jué)處理方法。

UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)

藍(lán)藍(lán)小助手

俗話說(shuō):“細(xì)節(jié)決定成敗”,細(xì)節(jié)的把控至關(guān)重要,這也是設(shè)計(jì)師能力的代表。隨著項(xiàng)目經(jīng)驗(yàn)的積累和專業(yè)能力的成熟,我們對(duì)于設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的沉淀也會(huì)越來(lái)越多,設(shè)計(jì)輸出也會(huì)因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。

B端設(shè)計(jì)案例修改

藍(lán)藍(lán)小助手

眾所周知,B 端設(shè)計(jì)更注重交互邏輯思維,設(shè)計(jì)解決方案的出發(fā)點(diǎn)需要建立在提升產(chǎn)品體驗(yàn)層面。一個(gè)很小的需求也需要更成熟的思考,這個(gè)思考過(guò)程如果有更多的集思廣益定能探索出更好的設(shè)計(jì),提升操作體驗(yàn)度。

聊聊對(duì)設(shè)計(jì)和品牌的一些新看法

藍(lán)藍(lán)小助手

設(shè)計(jì)的審美大多數(shù)是依照市場(chǎng)的改變而變化的,市場(chǎng)選擇的東西要試著去相信,可以參考,不表示要一比一的模仿,加入自己的想法和理解,也許能有新的東西出來(lái)。接到委托之后先具體化的溝通,理解需求,復(fù)述你的理解,讓對(duì)方同屏,之后再進(jìn)行更具體的論述,能減少之后的許多麻煩。

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

藍(lán)藍(lán)小助手

我們今天討論的,就是 AI 在 B 端設(shè)計(jì)方向的應(yīng)用方法,以及我們應(yīng)該如何應(yīng)對(duì)。
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)的,用戶可以在里面直接創(chuàng)建并配置店鋪,然后以網(wǎng)頁(yè)、H5 或小程序的形式發(fā)布。
但這只是最初級(jí)的應(yīng)用,傳統(tǒng)的建站工具屬于幫你預(yù)制好了主要的參數(shù)和功能,用戶只能在這個(gè)范圍內(nèi)做少量的自定義編輯和設(shè)置。但進(jìn)階的 Low-Code,會(huì)賦予用戶更大的編輯范圍和自由度,讓用戶通過(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)用組件化的框架,讓用戶通過(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ā)專屬大模型,再把做好的組件喂給模型,用戶只要在相應(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)稱定制化。這就倒逼 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)?/div>
如果 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)注明出處。

image.png

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

image.png

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(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è)人資料

存檔