如是藏經(jīng)匯網(wǎng)站UI設(shè)計(jì) 發(fā)表于:2024-04-20

UI設(shè)計(jì) | 視覺(jué)設(shè)計(jì)

01 設(shè)計(jì)方案

淺色方案

簡(jiǎn)潔、清爽,能夠讓界面看起來(lái)更為干凈、整潔,減少視覺(jué)上的干擾,使用戶(hù)更專(zhuān)注于內(nèi)容本身

深色方案

可以使界面上的內(nèi)容更加突出,提升重要信息的可視性,吸引用戶(hù)的注意力。使界面更具層次感,

02 檢索閱讀

區(qū)域和層級(jí)劃分

使用卡片和分割線層層劃分內(nèi)容簡(jiǎn)單閱讀不跳到新頁(yè)面,半屏展示

檢索區(qū)域

檢索區(qū)域的展開(kāi)和收起,更加節(jié)省空間

圖標(biāo)去文字化

(主流風(fēng)格)鼠標(biāo)懸浮狀態(tài)有功能說(shuō)明,更加簡(jiǎn)潔。

按頁(yè)閱讀

閱讀和操作區(qū)域分開(kāi),所有按鈕置頂集中排布,操作區(qū)盡量簡(jiǎn)化,閱讀時(shí)減少干擾。左側(cè)有目錄和縮略圖切換。

按列閱讀

古書(shū)按列呈現(xiàn),每一列都制成為長(zhǎng)卡片,古體字和簡(jiǎn)體字一一對(duì)應(yīng),內(nèi)容和背景區(qū)分開(kāi)且大量留白,列與列劃分明顯

03 個(gè)人中心

通過(guò)在內(nèi)容下方疊加圖片,可以打破單一的文本布局,為頁(yè)面增添視覺(jué)層次感,避免頁(yè)面顯得過(guò)于空曠。 分割線能夠?qū)⒋蠖涡畔澐譃楦〉亩温?,減少用戶(hù)的閱讀壓力。同時(shí),它還能夠突出信息,幫助用戶(hù)更快地找到所需內(nèi)容,提高閱讀效率。

04 界面欣賞