龍泉大藏經(jīng)網(wǎng)站界面設(shè)計(jì) 發(fā)表于:2022-05-01

html前端 | 交互設(shè)計(jì) | UI設(shè)計(jì)

01 實(shí)體藏經(jīng)

沉浸式瀏覽

通過(guò)放大藏經(jīng)視圖的設(shè)計(jì)方式,創(chuàng)造一種沉浸式的瀏覽環(huán)境,用戶可以更加專注于內(nèi)容,從而增加停留在界面的時(shí)間,有助于提升瀏覽體驗(yàn)。

選擇藏經(jīng)

通過(guò)圖片選擇藏經(jīng)能夠?yàn)橛脩籼峁┲庇^、生動(dòng)的視覺(jué)體驗(yàn)。相比于純文字描述,圖片能夠更直觀地展示藏經(jīng)的封面,使用戶獲得直觀印象。

02 格式標(biāo)注

個(gè)人中心

“個(gè)人中心”包括用戶頭像及文字信息,用過(guò)情感化設(shè)計(jì)-放大頭像,避免了純文字的枯燥。

近期工作

“近期工作”以列表形式展現(xiàn),重點(diǎn)突出剩余時(shí)間和操作按鈕,引導(dǎo)用戶的視覺(jué)聚焦。

其他內(nèi)容

其他內(nèi)容包括“??敝恰薄白钚聞?dòng)態(tài)”“新聞公告”“交流分享”,四部分共同放置在頁(yè)面下方,且橫向水平等距分布,在視覺(jué)上更加和諧。

格式標(biāo)注

標(biāo)注內(nèi)容以列表的方式呈現(xiàn),按照優(yōu)先級(jí)自頂至底依次排序,方便用戶快速瀏覽和操作。列表背景使用更亮的淺色且行與行之間有間隔,引導(dǎo)用戶關(guān)注標(biāo)注信息。

標(biāo)記列表

標(biāo)記文字通常用于解釋、說(shuō)明或強(qiáng)調(diào)藏經(jīng)中的某些部分,將其放在右側(cè)可以確保用戶在閱讀藏經(jīng)的同時(shí),能夠輕松地獲取到這些額外的信息。這種布局方式也有助于減少用戶的認(rèn)知負(fù)擔(dān),提高閱讀效率。

03 注冊(cè)登錄

登錄頁(yè)使用左圖右文的排列方式,通過(guò)將圖像放置在左側(cè),文字放置在右側(cè),可以創(chuàng)建清晰的視覺(jué)層次感。然后用戶的視線可以自然地移動(dòng)到右側(cè)的文字信息上,進(jìn)一步了解登錄頁(yè)的詳細(xì)內(nèi)容。

注冊(cè)頁(yè)是登錄頁(yè)的延伸頁(yè)面,可以與登錄頁(yè)互相切換。使用古典藏經(jīng)圖案作為背景,上面疊加內(nèi)容卡片且居中分布,在整體視覺(jué)上符合產(chǎn)品調(diào)性,在操作上完善各種輸入狀態(tài)的反饋。

04 界面欣賞