导航栏设计
① 移动端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>