零售門店選址評估小程序界面設(shè)計 發(fā)表于:2024-04-21

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

01 設(shè)計方案

界面中采用柔和的顏色,圓潤的線條和形狀,給人一種親切、友好的感覺。這種設(shè)計能夠降低用戶的緊張感,從而營造出一種輕松、舒適的使用環(huán)境。

界面中加入3D元素,能夠增強(qiáng)用戶界面的立體感和層次感。使用較深背景,能夠視覺對比,使得亮色元素在界面上更為突出,使用戶其快速聚焦到關(guān)鍵信息上。

02 檢索閱讀

篩選查詢

頂部為查詢區(qū)域,將篩選內(nèi)容分布在一起,方便用戶集中處理,準(zhǔn)確定位信息。

地圖操作按鈕

按鈕換膚在地圖上,“半徑”“選區(qū)”便于用戶對開店范圍的選擇,“圖例”則更側(cè)重圖標(biāo)說明性?!胺糯蟆薄翱s小”“定位”則是對顯示內(nèi)容的操作。

點位評估

頁面核心功能按鈕,使用面型按鈕放大處理。點位名稱、地址及導(dǎo)航作為具體信息以彈框形式出現(xiàn)。

03 AI視頻腳本

AI生成視頻腳本是用戶輸入相應(yīng)條件后,AI大模型通過系統(tǒng)算法生成視頻內(nèi)容。整體風(fēng)格較為科技感,因此在配色上使用藍(lán)色漸變及較重投影,符合產(chǎn)品屬性,能夠突出產(chǎn)品的創(chuàng)新性和先進(jìn)性。使用戶在使用過程中感受到強(qiáng)烈的視覺沖擊和沉浸感,這種體驗有助于增強(qiáng)用戶對產(chǎn)品的興趣。

04 盈利測算

所盈利測算功能是產(chǎn)品的主要功能,通過AI對未來開店盈虧情況進(jìn)行預(yù)測評估。本次設(shè)計主要優(yōu)化該流程的交互及視覺表現(xiàn),整個流程分為“成本結(jié)構(gòu)”“收入結(jié)構(gòu)”“經(jīng)營測算”三個階段,過程填寫情況放置在頁面頂部,一步了然。已填寫使用主題色標(biāo)注,未填寫則使用置灰顏色處理,符合用戶基本感知。按鈕使用與主色相近的漸變色。