如何設(shè)計(jì)網(wǎng)站功能菜單
發(fā)表日期:2019/1/21 13:55:53 文章編輯:瑩晨建站 瀏覽次數(shù):2315
如何設(shè)計(jì)網(wǎng)站功能菜單
有人來到你的網(wǎng)站,這是一個(gè)成功的第一步。現(xiàn)在你需要將它們放在想要的位置,否則它們可能會(huì)反彈。擁有一個(gè)好的菜單將有助于防止人們?cè)谒麄兿胍咝У牡胤将@得反彈。
雖然菜單起初可能看起來很復(fù)雜,但有效設(shè)計(jì)有三個(gè)關(guān)鍵要素:位置、清晰度和可用性。
菜單位置
與實(shí)體房地產(chǎn)一樣,虛擬房地產(chǎn)中最重要的設(shè)計(jì)元素是位置,位置,位置。找到您的菜單是設(shè)置可用網(wǎng)站的第一步。
菜單的設(shè)計(jì)慣例是它們位于頁面頂部,標(biāo)題下方或左側(cè)邊欄中。找到頁面右側(cè)的菜單可以看作有點(diǎn)不同尋常和大膽?;蛘咚梢员灰暈闊o能。主要的區(qū)別在于這個(gè)人是否有洞察力地破壞了這些約定。
菜單通常位于頁面頂部或左側(cè)邊欄中,因?yàn)檫@些區(qū)域是讀者給予更多“重量”的區(qū)域。只有當(dāng)您希望為頁面內(nèi)容而不是導(dǎo)航提供更多“權(quán)重”時(shí),才可以在右側(cè)邊欄中放置菜單。
菜單元素的放置至關(guān)重要。在頂部菜單上,第一個(gè)和最后一個(gè)元素應(yīng)該是最重要的,因?yàn)榇蠖鄶?shù)讀者都會(huì)關(guān)注它們。雖然中間特征也會(huì)受到一些關(guān)注,但大多數(shù)讀者都會(huì)傾向于外在元素。
邊欄組件應(yīng)從最重要到最不重要的順序排序。通過垂直排列,讀者優(yōu)先考慮最后一個(gè)元素。這是菜單應(yīng)位于左側(cè)邊欄的另一個(gè)原因,因?yàn)檫@是大多數(shù)讀者尋找主要內(nèi)容的第一個(gè)地方。
菜單清晰度
網(wǎng)站設(shè)計(jì)應(yīng)盡可能提供最佳用戶體驗(yàn)。這從導(dǎo)航開始。對(duì)于用戶來說,每個(gè)站點(diǎn)元素應(yīng)該是顯而易見的,如何與它們進(jìn)行交互以及它們的作用。
簡潔是網(wǎng)站清晰度的重要元素。讀者傾向于掃描太長的標(biāo)簽。確保某些重要內(nèi)容不僅標(biāo)記清晰,而且盡可能簡要說明,以保持清晰。
請(qǐng)記住,簡潔并不總是等同于清晰度。如果不能從上下文線索中收集標(biāo)簽的含義,那么你將失去讀者。語境化很重要。拼寫出一切都會(huì)浪費(fèi)空間,并給讀者一種印象,即你認(rèn)為他們看起來太愚蠢了。盡可能簡短,但要盡可能清楚。
如果必須犧牲另一個(gè)元素,那么簡潔就是下一步。永遠(yuǎn)不應(yīng)該犧牲清晰度。雖然缺乏簡潔可能會(huì)刺激讀者,但它不會(huì)像不明確的標(biāo)簽?zāi)菢邮柽h(yuǎn)他們。
菜單可用性
雖然可用性是最后實(shí)現(xiàn)的元素,但它絕不是不重要的。如果一個(gè)菜單無法使用,那就更糟糕了。
小型網(wǎng)站的菜單有最清晰的設(shè)計(jì)原則。建議隱藏向下滾動(dòng)元素后面的鏈接。用戶將單擊元素以下載完整的選項(xiàng)菜單,輕松單擊鏈接。這使得網(wǎng)站易于導(dǎo)航。
對(duì)于較大的網(wǎng)站,有幾種選擇,其中沒有一種本質(zhì)上比其他任何選擇都差。如果您有大類信息的登錄頁面,則可以使用為小型網(wǎng)站設(shè)計(jì)菜單的原則。每個(gè)鏈接都會(huì)將讀者帶到一個(gè)單獨(dú)的登錄頁面,然后引導(dǎo)他們獲取更具體的信息。此技術(shù)可能需要更廣泛的頂級(jí)菜單以及著陸頁上更具體的左側(cè)邊欄菜單。
下拉菜單應(yīng)該只有一個(gè)級(jí)別。不要強(qiáng)制用戶滾動(dòng)菜單或嘗試查看主菜單類別中的所有子類別。著陸頁對(duì)此非常有用,因?yàn)樗鼈兪鼓軌驅(qū)⒂脩舭l(fā)送到仍具有自己菜單的較小類別頁面。
在設(shè)計(jì)與類別元素的用戶交互時(shí),可以輕松地與它們進(jìn)行交互。不要讓懸停菜單的元素太小以至于光標(biāo)很容易從菜單中滑落,迫使用戶再次嘗試導(dǎo)航。雖然它使編程更復(fù)雜,但懸停導(dǎo)航問題的解決方案還包括可點(diǎn)擊元素,以便用戶可以選擇如何與菜單進(jìn)行交互。延遲懸停菜單的關(guān)閉也可以解決交互問題,“懸停效果”也是如此,這給人留下了懸停元素被壓低的印象。
使下拉菜單不透明,或大部分都是如此,因此菜單元素不會(huì)與背景元素混淆。圖片上的半透明菜單可以很好地工作。不要使用完全半透明的菜單或在文本上使用半透明菜單; 你的菜單將成為一個(gè)難以理解的混亂。還要確保工具提示不包含菜單元素。一個(gè)模糊的選擇比沒有選擇更糟糕。
設(shè)計(jì)好菜單后,請(qǐng)?jiān)谡麄€(gè)網(wǎng)站中保持一致。確保您在所有頁面上保留主菜單,并且當(dāng)您在登錄頁面上有輔助菜單時(shí),請(qǐng)保持設(shè)計(jì)元素不變,這樣您的讀者就不必調(diào)整到全新的菜單。
-
訪客離開網(wǎng)站的原因
日期:2019-10-24 瀏覽次數(shù):2395
-
網(wǎng)站維護(hù)的具體步驟有哪些
日期:2019-10-24 瀏覽次數(shù):2333
-
了解跨瀏覽器兼容的網(wǎng)站
日期:2019-10-24 瀏覽次數(shù):2360
-
以正確的方式使用號(hào)召性用語
日期:2019-10-24 瀏覽次數(shù):2400
-
如何避免CSS中的常見錯(cuò)誤?
日期:2019-10-24 瀏覽次數(shù):2220
-
免費(fèi)SSL證書申請(qǐng)網(wǎng)站topssl.cn上線
日期:2024-09-23 瀏覽次數(shù):1089
-
如何在北京順義尋找一個(gè)踏實(shí)的網(wǎng)站建設(shè)公司
日期:2023-08-10 瀏覽次數(shù):4142
-
順義網(wǎng)站建設(shè):北京順義網(wǎng)站建設(shè)的優(yōu)點(diǎn)
日期:2023-05-25 瀏覽次數(shù):4565
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):3425
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):3606
-
網(wǎng)站營銷的錯(cuò)誤以及如何避免它們
日期:2019-03-08 瀏覽次數(shù):2330
-
設(shè)計(jì)專業(yè)銷售網(wǎng)站的基本要素是什么
日期:2021-09-03 瀏覽次數(shù):1489
-
網(wǎng)站優(yōu)化六大項(xiàng)目介紹,兩分鐘簡單搞懂什么是網(wǎng)站優(yōu)化!
日期:2019-09-20 瀏覽次數(shù):3427
-
為什么移動(dòng)應(yīng)用對(duì)您的業(yè)務(wù)增長至關(guān)重要
日期:2019-06-18 瀏覽次數(shù):2053
-
為什么選擇模板上的自定義網(wǎng)站設(shè)計(jì)和開發(fā)服務(wù)
日期:2019-04-28 瀏覽次數(shù):2193