首頁

B端UI設(shè)計(jì)秘籍:運(yùn)用金字塔模型,構(gòu)建高效信息架構(gòu),提升用戶體驗(yàn)與效率

藍(lán)藍(lán)小助手 B端ui設(shè)計(jì)文章及欣賞

在B端產(chǎn)品信息架構(gòu)設(shè)計(jì)中,金字塔模型的價(jià)值在于其能夠幫助我們系統(tǒng)地梳理和呈現(xiàn)復(fù)雜的信息體系。通過將信息按照重要性、使用頻率等因素進(jìn)行分層,我們可以確保用戶能夠迅速找到所需信息,同時(shí)避免在海量數(shù)據(jù)中迷失方向。此外,金字塔模型還能夠引導(dǎo)我們關(guān)注信息的內(nèi)在邏輯和關(guān)聯(lián)性,從而構(gòu)建出更加合理、高效的信息結(jié)構(gòu)。

網(wǎng)頁元素設(shè)計(jì)規(guī)則研究

藍(lán)藍(lán)小助手 網(wǎng)站設(shè)計(jì)文章及欣賞

通過以上的實(shí)際應(yīng)用和案例分析,我們可以看到刪格系統(tǒng)和響應(yīng)式設(shè)計(jì)的結(jié)合在B端網(wǎng)頁設(shè)計(jì)中的重要性和實(shí)用性。這種結(jié)合方式能夠兼顧頁面的整體結(jié)構(gòu)和內(nèi)容的自適應(yīng)顯示,為用戶提供更加舒適、便捷的瀏覽體驗(yàn)。因此,設(shè)計(jì)師在實(shí)際項(xiàng)目中可以考慮充分融合這兩種設(shè)計(jì)方法,以創(chuàng)造出更加出色的網(wǎng)頁設(shè)計(jì)作品。

B端設(shè)計(jì)——柵格系統(tǒng)與布局方式

藍(lán)藍(lán)小助手 B端ui設(shè)計(jì)文章及欣賞

通過以上的實(shí)際應(yīng)用和案例分析,我們可以看到刪格系統(tǒng)和響應(yīng)式設(shè)計(jì)的結(jié)合在B端網(wǎng)頁設(shè)計(jì)中的重要性和實(shí)用性。這種結(jié)合方式能夠兼顧頁面的整體結(jié)構(gòu)和內(nèi)容的自適應(yīng)顯示,為用戶提供更加舒適、便捷的瀏覽體驗(yàn)。因此,設(shè)計(jì)師在實(shí)際項(xiàng)目中可以考慮充分融合這兩種設(shè)計(jì)方法,以創(chuàng)造出更加出色的網(wǎng)頁設(shè)計(jì)作品。

善用 AIGC工具|一個(gè)UI案例帶你進(jìn)階使用

藍(lán)藍(lán)小助手 行業(yè)趨勢(shì)

第一章:人物一致性的多種方法
本段簡(jiǎn)介:
利用文生圖+AI 模特圖生成風(fēng)格統(tǒng)一的人物系列圖,利用產(chǎn)出的圖片通過圖生圖做到風(fēng)格轉(zhuǎn)換,以及 AI擴(kuò)圖
相關(guān)地址:
Q版一鍵同款:https://www.whee.com/ai/text-to-image?id=165330&styleModelId=3848%2C3635&editorMode=advanced
AI模特圖地址 :https://www.whee.com/ai/image-model
AI擴(kuò)圖地址:https://www.whee.com/ai/image-extend
 
善用 AIGC工具(第二彈)|一個(gè)UI案例帶你進(jìn)階使用
 
 
第二章:畫面控制-利用邊緣檢測(cè)做可控圖標(biāo)
本段簡(jiǎn)介:
學(xué)會(huì)畫面控制-邊緣檢測(cè),引導(dǎo)圖基本概念(第四章會(huì)重復(fù)說明一下),如何生成可控圖標(biāo)以及優(yōu)化效果
同款鏈接:
圖標(biāo):https://www.whee.com/ai/text-to-image?id=164318&styleModelId=4229&editorMode=advanced(可自行替換引導(dǎo)圖和風(fēng)格模型)
 
善用 AIGC工具(第二彈)|一個(gè)UI案例帶你進(jìn)階使用
 
 
第三章:排行榜頁-融圖思路(生成-融入)
視頻上傳限制,第三章與第四章已合并到一起,可在第四章后查看
同款鏈接:
https://www.whee.com/ai/text-to-image?id=163933&styleModelId=3848&editorMode=advanced
善用 AIGC工具(第二彈)|一個(gè)UI案例帶你進(jìn)階使用
 
 
第四章:融合控制-光影字和二維碼
??本節(jié)視頻內(nèi)容包含第三到第四部分的詳細(xì)操作,以及第四部分光影字和二維碼一些詳細(xì)講解(入常見的問題和利用融合控制的進(jìn)階玩法)
本段簡(jiǎn)介:
畫面控制 -融合控制的應(yīng)用(光影字與圖片二維碼)
同款鏈接:
光影字1:https://www.whee.com/ai/text-to-image?id=164316&styleModelId=3848&editorMode=advanced
光影字2:https://www.whee.com/ai/text-to-image?id=168538&styleModelId=3848&editorMode=advanced
視頻中的融合控制進(jìn)階玩法:https://www.whee.com/ai/text-to-image?id=168500&styleModelId=3848&editorMode=advanced
空間站二維碼:https://www.whee.com/ai/text-to-image?id=168900&styleModelId=3848&editorMode=advanced
絨線二維碼:https://www.whee.com/ai/text-to-image?id=168916&editorMode=advanced
 
 
善用 AIGC工具(第二彈)|一個(gè)UI案例帶你進(jìn)階使用
 
 
結(jié)尾
在看完教程之后,大家是否躍躍欲試了呢,除了生成典型的光影圖,“融合控制”工具還可以作用于其他各種各樣的場(chǎng)景之中,大家可以前往 WHEE多多嘗試,實(shí)驗(yàn)起來!
 



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

image.png藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率?

藍(lán)藍(lán)小助手 設(shè)計(jì)管理與成長(zhǎng)

設(shè)計(jì)師在驗(yàn)收過程中容易遇到的一個(gè)比較頭疼的問題就是,技術(shù)和產(chǎn)品小伙伴可能因?yàn)轫?xiàng)目上線時(shí)間緊,覺得視覺還原和頁面交互體驗(yàn)上的問題不重要不給予修改,優(yōu)先保障功能上線。
除了這些原因,設(shè)計(jì)師也在檢討總結(jié),自己有哪些做的不足的地方,所以 以上文檔也是對(duì)接下來工作的優(yōu)化方案。設(shè)計(jì)還原度也是日??己酥唬枰蠹抑匾?,好的產(chǎn)品要嚴(yán)格把控精心打磨。

2024,B端篩選有啥變化?

藍(lán)藍(lán)小助手 B端ui設(shè)計(jì)文章及欣賞

關(guān)于篩選,我認(rèn)為更多是需要設(shè)計(jì)師在組件層面上做更多的了解,然后再進(jìn)行拓展。
在產(chǎn)品初期,我們需要使用表單篩選來盡可能滿足產(chǎn)品的通用性,讓整個(gè)項(xiàng)目能夠快速上線。
在產(chǎn)品成長(zhǎng)期,我們就可以對(duì)表單進(jìn)行更多特殊樣式的定制,比如外露指標(biāo),以優(yōu)化表單篩選所帶來的不足。
在產(chǎn)品成熟期,就可以使用更多更為復(fù)雜的篩選來滿足產(chǎn)品的上限,以獲得更多的可能性。
當(dāng)然,不同產(chǎn)品的情況可能還是會(huì)有所不同,因此這里只能提供一個(gè)建議,大家還是需要根據(jù)自己的情況來做出相應(yīng)的調(diào)整。
因?yàn)樾枨笤谧?,組件在變,不變的是你的思考~

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

藍(lán)藍(lán)小助手 設(shè)計(jì)管理與成長(zhǎng)

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

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

藍(lán)藍(lán)小助手 圖標(biāo)設(shè)計(jì)文章及欣賞

陰影設(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ī)且有效的視覺處理方法。

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

藍(lán)藍(lán)小助手 圖標(biāo)設(shè)計(jì)文章及欣賞

俗話說:“細(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ì)越來越多,設(shè)計(jì)輸出也會(huì)因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。

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

藍(lán)藍(lán)小助手 B端ui設(shè)計(jì)文章及欣賞

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

日歷

鏈接

個(gè)人資料

存檔