首頁

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

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

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

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

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

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

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

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

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

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

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

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



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

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

image.png

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

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

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

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

2024,B端篩選有啥變化?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

日歷

鏈接

個人資料

存檔