15商城网站布局与编排(六)

第第页它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。(1)侧边栏导航的一般特征。①文字链接作为导航项很普遍(包含或不包含图标)；②很少使用选项卡(除了堆叠标签导航模式)；③竖直导航菜单经常含有很多链接。(2)竖直/侧边栏导航缺点。因为可以处理很多链接，当竖直菜单太长时有时可能使用户厌烦。尝试限制你引人的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。(3)何时使用竖直/侧边栏导航。竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。.选项卡导航。选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳人任何视觉效果。_泄399依时V满1DQ0减20。再送20Q元券满i_泄399依时V满1DQ0减20。再送20Q元券满i湍.格5WB狂欢2天,HIGHT爆全场竺任比■炉~苗#眼?就X>tWEqb™ffl-选项卡比起其他类别的导航有一个明显的优势:它们对用户有积极的心理效应人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。⑴选项卡导航的一般特征。①样子和功能都类似真实世界的选项卡(就像在文件夹，笔记本等中看到的一样）;②一般是水平方向的但也有时是竖直的（堆叠标签）。（2）选项卡导航的缺点。选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列（即使这样，如果太多的话它们还是看起来很不合适）。（3）何时使用选项卡导航。选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的洗项。.飞出式菜单和下拉菜单导航。飞出式菜单（与竖直/侧边栏导航一起使用）和下拉菜单（一般与顶部水平栏导航一起使用）是构建良好导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问.隼中大促「士手提包尚天簿嗨鲜生天猫会员电器诚天强超市精选市场尹二年中足,天痛美唳宜方亶考互膜他们通（1）飞出式菜单和下拉菜单导航的一般特征。①用于多级信息结构;②使用女翔内衣男黄屋潮户外女鞋度鞋/霜包B分。W.'--D3丐工4JL；隼中大促「士手提包尚天簿嗨鲜生天猫会员电器诚天强超市精选市场尹二年中足,天痛美唳宜方亶考互膜他们通（1）飞出式菜单和下拉菜单导航的一般特征。①用于多级信息结构;②使用女翔内衣男黄屋潮户外女鞋度鞋/霜包B分。W.'--D3丐工4JL；15京品牌合奏项卡导航一起使用，作为网站主导航系统的一和显示菜单;③显示在菜单中的链接是主菜单项的子项;④菜10单通常在鼠标悬停在上面时被激活，而有时候也可能是在鼠标点击时激活。（2）飞出式菜单和下拉菜单导航缺点。除非你在主导航链接边上放置一些标识（通常是箭头图标），不然访客可能不知道那有包含子导航项的下拉或飞出式菜单，因此使这些标识很明显是非常重要的。同时飞出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。（3）何时使用飞出式菜单和下拉菜单导航。如果你想在视觉上隐藏很大的或很复杂的导航层次，飞出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什

么，以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。5.页脚导航。页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接.ILL；；,..J」产勺〜，EE，l=h品'h，%l.i—时尚酒翦书意生壬层动户蟀美苦、施茶禽珥君京嘉定程V撕/曲1u一■隹承丽港手理时彩夹克平魄断建伴闲衰胞生翡护住布雷弱肉i粽他后1B帖村移科洞若牛仔以泡才湎昌盟磋名布鞋卫衷逅瞬克瓢！番.叱值田堪可降西灯饰牛仔谯风毛科坦衿香赧号里弟乐科可铳取两陛黑土扑肝饰品蝌输卜卫港国青西装卫衣虎戒正装可制班登山但超乩手去去P座加旦洗护承日床牍哈处『泅抱M』海阳茶休雨舞比里基浦条羽毛雄黄宪卒防虫某钺右跖袖子天猫保障新手帚助一支防式j”在无期由忠也货■电雷4卅-小怯傀侬打(■LOC^^ffilS®-开国安同宝iBj^^Q,^fl或访客通常在主导航找不到他们要找的东西时会去查看页脚导航。,|3^CShjj^dljtfldS.*卜1=百J±「卜”+(1)页脚导航的一般特征。①页脚导航通常用于放置其他地方都没有的导航项;②通常使用文字链接，偶尔带有图标;③通常链接指向不是那么关键的页面。(2)页脚导航的缺点。如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导航形式。(3)何时使用页脚导航。绝大多数网站都有这样那样的页脚导航，即使它只是重复其他地方的链接。应考虑什么放在这里有用，以及你的访客可能最想找什么。(四)如何设计网页导航的栏目内容｛板书｝多姿多彩的导航方式，可以满足用户浏览时视觉上的感官体验和操作上的交互体验，但在导航栏目内容的设计上，不应只是网站内容的简单分类，而应该是体现网站独特的风格和理念。导航栏目内容应该能够精准的引导用户，迅速找到目标内容。例如:淘宝商城以“品牌”、“特色”作为内容标题，突出“淘”的特色;当当网主导航采用中规中矩的商品类别作栏目内容，下方增加水平栏副导航按特色服务进行分类;亚马逊干脆取消顶部水平栏导航，只使用左侧竖直飞出式菜单导航，顶部水平栏导航的位置被搜索栏的大片空白占据，方便目的性强的直接用户，体现网站特色;凡客则使用与当当网类似的方式，主导航采用特色热销商品，副导航使用总体的商品类别。大多数网站使用不只一种导航设计模式。例如一个网站可能会用顶部水平栏导航作为主导航系统，并使用竖直/侧边栏导航系统来辅助它，同时还用页脚导航来作冗余，增加页面的便利度。当选择你的导航系统基于的导航设计模式时，你必须选择支持你的信息结构以及网站特性的方案。导航是网站设计的重要部分，它的效果必须有坚实的基础。首页轮播｛板书｝（一）为什么要使用焦点图｛板书｝焦点图可以更好的提升用户体验.观赏性。大多数网站一般都是由静态的文字和图片组成，而焦点图的滚动轮播能有效的帮助网站实现动静结合的效果，给用户一种视觉上的满足。.内容推荐。由于动静结合的方式，可以吸引到用户的眼球，网站很容易将当下高质量的内容直接推送给目标用户，能够更好的留住有效用户。.用户引导。焦点图类型的广告、新上线商品的介绍、促销活动的宣传都可以将用户直接引导至最终商品。（二）怎样选择吸引眼球的焦点图｛板书｝首先，在视觉上，焦点图的使用应注意以下几点:.颜色鲜活明亮，具有视觉冲击力，第一印象很重要。.图片需具有一定内涵，可引起联想或思考。.选择与标题内容相关及有视觉吸引力的底图。.美女图具有一定的杀伤力，但除女性网站外，选择使用美女图时需慎重。.标题意境，选择适合的创意图片来搭配。其次，在内容的选择上，应注意以下几点:.用户需要的内容—符合网站定位的内容，且用户关注度较高的内容，都符合焦点图的选择。.网站当下想要传递的内容—网站有明确立场的针对性内容;新上线功能和活动，商业性质的推荐等。焦点图不仅是内容推荐与展示的窗口，更是一个引导用户的通道，引导的目标可能是内容，也可能是其他网站当下的需要。（三）焦点图中的文字很关键｛板书｝.标题以2一3行组合为宜，主标题、副标题及引子的摆放应对比突出。.文字处于图片的黄金分割位置，视觉效果最佳。.字体不要超过两种、不使用描边。.布局合理，避免失衡引起的阅读歧义。.突出重点内容，排列错落有致，中英文搭配体现现代风格和国际性。.元素搭配上应在符合规律的基础上尽量大胆创新。（四）焦点图的尺寸要适宜｛板书｝.焦点图使用的图片应单独制作，不可与商品信息公用，以免造成比例失调，影响了用户感官体验。.根据需要焦点图可以放置在导航栏以上或以下的位置，宽度可以是网站的宽度，也可以是网站宽度的70%（符合黄金分割）。.焦点图的高度，尽可能与宽度成黄金比例;焦点图的底边应该在屏幕高度的黄金分割线上，这样可以显示出焦点图下面的内容，引导用户浏览。.焦点图是为了引起用户注意，大尺寸会出现余白过大的问题，可以根据需要相关内容的推荐放置在一张焦点图内。（五）常用的商城网站焦点图有哪些｛板书｝商城网站的促销方式多种多样，推荐商品种类繁多，到底什么类型的图片经常被使用在焦点图中呢?通过分析众多商城网站，得出以下关键词:包邮、满减、品牌、秒杀、1元、美女、免费送、限时、永久、VIP、节日等。（六）焦点图是怎样制成的｛板书｝焦点图是由多张宣传图片组成，自动轮换显示的特殊宣传手段，动的画面更能吸引注意力。那么，动的焦点图是怎么制作的呢?一般来说，有如下三种方法:GIF动画。虽然GIF图的制作方便，兼容性强，但不便于添加或删减内容，动画效果表现有限。FLASH动画。FLASH动画的表现丰富多彩，但使用时需要获得支持，兼容

性不强;FLASH动画自成一体，独立于网页的其他元素，略显不直观。3.JAVA程序控制。随着技术的成熟发展，更多的网页采用Div+CSS的方式进行制作。同时，JAVA程序也逐渐被应用在网页中。当下htm15和CSS3的普及，也使JAVA程序更多更好地被应用。作焦点图，可以直接使用JAVA程序的