導航欄設計
① 移動端UI交互設計中如何設計導航菜單
在設計移動端菜單時，我們有太多需要考慮的問題，前面我們通過《移動端設計時在何種環境下使用何種菜單?》介紹了什麼時候適合用直觀菜單、什麼時候適合使用隱藏菜單，若遇到用戶不足又通過什麼途經來彌補功能的不足，接下來由南昌APP開發公司百恆網路UI設計師向大家進一步介紹菜單的細節問題例如：圖標的形狀用那種更適合、是用文字還是圖形說明等細節問題。
圖形規格
設計者需要根據內容的重要程度使用不同規格的圖形：圖形越大越容易吸引 用戶的目光。但屏幕上的其他元素也扮演著重要角色：如果界面非常簡潔，設計 者不需要始終強調圖形部分。
值得注意的是，如果存在次要菜單的話，應該讓主菜單的表現形式與之匹 配。次要菜單的外觀應當相對質朴、平實，避免過分吸引用戶的注意。
提示用戶當前所處位置
在更接近慣例的菜單設計中，提示用戶當前所處位置是一項很好的功能，但我 們經常會見到這種情況：「抽屜菜單」沒有提示用戶當前處在哪個頁面、哪個欄目。 提示當前所在位置，能夠幫助用戶在虛擬空間中定位，在大腦中暢游交互世界。
使用說明文字還是圖標?
標注說明文字是最簡單明了的方法。但有時屏幕空間非常寶貴，設計者可以 考慮使用圖標代表眾所周知的功能。用戶很容易學會使用並記住常用的功能圖 標，比如「首頁」「信息提示」「個人信息」「用戶賬號」「搜索」等功能，完全不 必使用說明文字。
而且，用戶重復使用的頻率越高，越容易記住圖標的意義。
在菜單里標注說明文字永遠比標注圖標更易於理解，更能啟發用戶。但是， 說明文字占據空間較大，在多種語言版本並存的移動應用中更是如此。
一切取決於設計者希望推薦各個欄目的積極程度：如果默認欄目最重要，而 相對來說，用戶不常搜索其他附屬欄目，那麼設計者必須通過菜單展現這一情況。
最後不要忘記，說明文字與圖標可以混合使用。說明文字與圖標絕非對立的 兩面，二者結合使用或許能達到絕佳效果。設計者最好使用眾人皆知的圖標代表 一些常用功能，因為用戶理解這些圖標的含義。設計者還可以搭配說明文字，強 化圖標的建議能力 。
過渡與轉化
在設計菜單時，設計者還需要考慮到當用戶調取菜單時，應該如何將其呈現出 來。此時，動畫發揮了重要作用：動畫可以在用戶的腦海中重現整個系統的運行模 式。系統在虛擬空間中呈現一組頁面，頁面按一定方向連續運動，形成動畫效果。
② 網頁導航欄模塊設計CSS控制默認第一個LI背影
像上面那種，就是定義ACTIVE屬性，使其A的背影帶色，每個頁植入對應的ACTIVE，比如，首頁只植入在第一個LI，第二個頁只植入第二個LI。。。另外定義LI屬性，使其HOVER的背影跟ACTIVE的背影色一樣，這樣子移動滑鼠時對應的LI就顯示背影色，點擊後的背影色也不變。
③ UI設計網頁時，導航欄尺寸規格一般是多少
目前ios的尺寸都是_@2x，除了plus需要注意導航欄60PX，底部標簽欄148PX，尺寸需要_@3X也就是1.5倍計算。
④ 如何設計一個導航資料庫
一張表就夠了。
create table nav{
id int(11),
parent int(11) ,
title char(20),
url char(100)
}
這樣就夠了，其中parent記錄的是上級導航的id。parent為0的話，表示一級菜單。
查找回一級菜單的語答句：
select * from nav where parent=0;
查找某個菜單的下一級菜單是：
select * from nav where parent=某個菜單的id。
2、當然是在載入的時候就把所有的菜單導航都獲取出來呀。原因就在於資料庫訪問次數的問題，如果你一次性載入，只需要載入一次。如果在用戶每次移到菜單上時去載入資料庫，那每一次操作就要載入一次，你的網站流量一上，資料庫就很容易掛掉。
⑤ 網站導航欄如何設計才有利於SEO優化
1）、網站導航包含關鍵詞
通常來講，網站導航一般都會包含核心關鍵詞與長尾關鍵詞，為了使得頁面看著簡潔美觀，通常只是選擇某個關鍵詞替代，而利用Title標簽，表達完整的關鍵詞。
當然，這里值得提醒的是，有的企業站點為了增加某個關鍵詞的密度，而把關鍵詞放在網站導航上，而去掉超鏈接，這雖然是一種策略，但略有作弊嫌疑。
2）、網站導航合理利用H2-H3標簽
除了特殊的SEO單頁優化，會出現多個H1標簽，一般正常的網站每個獨立頁面基本上只包含1個獨立H1，所以在導航條設計的時候，你需要合理的分配標簽H2-H3，給相應的欄目，從而提高重視度。
3）、避免內容頁面與網站導航關鍵詞沖突
站內錨文本是每個SEO人員，都會設置的，但這里大家經常忽略一個小細節，通常而言，搜索引擎，習慣只記錄某個鏈接的出現的錨文本關鍵詞。
基於搜索引擎的抓取順序，從上到下，從左到右，如果在導航條出現的關鍵詞，就盡量不要在內容頁面，給這個鏈接同樣的錨文本，你可以採用語義相關的詞。
4）、利用導航突破關鍵詞排名
如果你在SEO行業有一段時間，你會發現一個問題，某個關鍵詞熱度高的詞，怎樣做排名都無法提升，這個時候，其實你可以充分利用，網站導航的高權重，將該內容頁面，寫入網站導航。
通常來講，一定時間後，你的關鍵詞排名會有一定改善。
5) 、盡量不要使用圖片做網址導航
如果必須使用圖片作為網站的導航鏈接，就要對圖片進行SEO(搜索引擎優化)(搜索引擎優化)優化，以圖片鏈接指向頁面的主要關鍵詞(KEY)作為ALT內容，另外在圖片的周圍布置文字鏈接作為輔助。建議你最好使用文字，圖片也是不得已而為之。
⑥ 導航欄設計用什麼控制項
大多數ios應用都是以標簽欄加導航欄的形式呈現，一般根控制器都是UIToolbar，然後再以UINavigationController為子控制器，然後再加入UIViewController。為什麼要這樣？因為不同的標簽欄的項一般對應不同的功能，那麼導航欄的標題一般就不同。如果所有導航欄都一樣，那你就隨便設置根控制器。
主要代碼：AppDelegate.h中
@class cscControllerOne;
@class
cscControllerTwo;
@class cscControllerThree;
@class
cscControllerFour;
@interface cscAppDelegate : UIResponder
{
cscControllerOne *oneRootView;
cscControllerTwo *twoRootView;
cscControllerThree
*threeRootView;
cscControllerFour
*fourRootView;
UITabBarController
*tabBarController;
UINavigationController
*unc1;
UINavigationController *unc2;
UINavigationController *unc3;
UINavigationController
*unc4;
}
⑦ 網頁導航欄的設計方式有哪些
導航欄的設計方式有很多種，通過專業的PS設計軟體，可以結合自己的靈感設計，網上有很多可以做為參考或欣賞。
⑧ 建設網站中的導航欄在設計時有哪些常見的樣式
分享幾個常見的導航設計：
1、滑出導航
滑出式導航是現在很流行的一種，當用戶打開頁面時，第一眼看到的是主要的內容而非菜單，給用戶更好的第一印象。響應式全屏滑出導航也可以給人愉悅的體驗。
2、全屏導航
全屏導航設計對內容有強調作用，用戶可以更加便捷地切換到不同的頁面，讓內容成為更加觸手可及的東西。如果設計的夠合理，用戶會在無意識間充分運用起它的導航功能。
3、單頁滾動導航
對於不含有大量內容的網站而言，單頁式的導航的效果非常不錯。這樣的網站只需要簡單的向下滾動操作，內容就會持續不斷地到你的眼前。
4、垂直導航
垂直導航最流行的有兩種排版方式，一種是隱藏式的導航菜單，需要的時候點擊顯示。另外一種是固定的側邊欄來展示菜單。它為網站設計提供了一種新的視覺體驗。
導航如何使用，還是要結合你的項目的具體特徵來決定的。
⑨ 網頁設計導航條
下面的代碼，你去看看，不好用再說。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
<!--
body {
background-color: #0099FF;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
border-bottom-style: none;
border-bottom-color: #ed9f9f;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-top-color: #ed9f9f;
border-right-color: #ed9f9f;
border-left-color: #ed9f9f;
float: left;
}
#navigation li a {
text-decoration: none;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 12px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #711515;
border-left-color: #711515;
border-top-style: none;
border-bottom-style: none;
width: 50px;
text-align: center;
margin: 0px;
}
#navigation li a:link, #navigation li a:visited {
color: #FFFFFF;
background-color: #c11136;
}
#navigation li a:hover {
color: #ffff00;
background-color: #990020;
}
#navigation ul li:hover ul,#navigation ul a:hover ul {
visibility: visible;
}
#navigation ul ul {
visibility: hidden;
}
#navigation ul ul li {
clear: both;
}
#navigation ul ul li a {
border: 1px solid #CCCCCC;
}
#navigation ul ul li a:link, #navigation ul ul li a:visited {
color: #000000;
background-color: #FFCC66;
}
#navigation ul ul li a:hover {
color: #006699;
background-color: #99CC00;
}
.nav {
border: 1px solid #0099CC;
position: absolute;
width: 357px;
left: 112px;
top: 34px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
}
.nav li {
float: left;
}
.nav li a {
border: 1px solid #FF3333;
display: block;
padding: 5px;
background-color: #FFCC33;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">產品展示</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">聯系電話</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介紹</a></li>
</ul>
</div>
</body>
</html>