京東作為一家國(guó)內(nèi)大型電商平臺(tái),其網(wǎng)站UI設(shè)計(jì)一直強(qiáng)調(diào)用戶體驗(yàn)。其中,京東的底部導(dǎo)航欄的樣式設(shè)計(jì)也是非常精美的。
.footer { background-color: #213869; color: #fff; height: 60px; display: flex; justify-content: space-between; padding: 0 20px; } .footer-item a { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 12px; line-height: 18px; padding-top: 6px; text-decoration: none; } .footer-item a:hover { color: #f65c50; } .footer-item img { width: 20px; height: 20px; margin-bottom: 4px; }
通過(guò)以上代碼片段,我們可以看到京東底部導(dǎo)航欄使用了深藍(lán)色為背景色,并采用了白色的字體色調(diào),整體效果較為高級(jí)。
底部導(dǎo)航欄的鏈接字體大小為12px,采用彎曲的布局,通過(guò)標(biāo)簽設(shè)置鏈接,從而避免了強(qiáng)行設(shè)置字體樣式的問(wèn)題。同時(shí),該布局結(jié)構(gòu)也使得用戶可以快速地發(fā)現(xiàn)并點(diǎn)擊想要的導(dǎo)航鏈接。
當(dāng)鼠標(biāo)放在鏈接上時(shí),字體會(huì)變成京東的品牌色調(diào)紅色,呈現(xiàn)出一種交互的效果,增加了用戶的體驗(yàn)感。
綜上所述,京東底部導(dǎo)航欄樣式設(shè)計(jì)非常出色,在遵循了用戶操作習(xí)慣和視覺(jué)心理學(xué)原理的基礎(chǔ)上,進(jìn)一步提升了用戶的體驗(yàn)和網(wǎng)站的品牌形象。