`
wx1569225609
  • 浏览: 14312 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

在网页中设计导航菜单的三个原则(附案例)

 
阅读更多

1) 别再让导航胖下去了,给导航减个肥

导航菜单重要性不言而喻。一些设计师往往使用一些繁杂的装饰来做突出。其实大可不必,通过字体、悬停效果、留白可以设计出简约、优雅的极简主义风格导航栏,看看下面的案例。

Design Instruct

  minimal navigation bar  

Sugar Rush

  Clean Navigation Bar Design  

Mmminimal

  Minimal Navigation Bar  

AD60

  Clean Navigation Menu Example  

Rhythm

  Clean navigation menu  

2) 如果有能力,为什么不试试来做响应式设计

设备种类越来越多,如何满足大部分用户的阅读需求?这就必须要使用 响应式设计了。根据屏幕尺寸来合理缩放页面,达到更好的阅读效果,这里是一些案例。

Inspire Conference

  responsive web design example  

Forefathers Group

  responsive navigation menu  

These Are Things

  responsive navigation bar examples  

Ryan O’Rourke

  navigation menu should be responsive in html5  

Stephen Caver

  responsive navigation menu example  

3) 合理放置导航,出现在该出现的地方

将导航放置何处,以何种方式展现,这都是不容忽视的,无论是水平布局还是垂直布局,都要尽量满足用户使用习惯。水平式导航菜单的好处是明显,清晰可见,大家都会知道导航条在上方,而且不是那么占据空间。而垂直的导航菜单可以兼容不同的屏幕尺寸。
  • 避免奇怪的布局
  • HTML标记要简单
  • 保持简约
  • CSS设置样式
原文地址: designzzz

转载于:https://my.oschina.net/wangchenyu/blog/1530753

分享到:
评论

相关推荐

    视觉设计网页设计:网页导航设计法则.pdf

    网页导航设计是网页设计的核心部分,它关乎用户体验和信息查找的效率。在互联网信息爆炸的今天,优秀的网页导航设计能够帮助用户快速理解他们在网站中的位置,有效地浏览和探索内容,防止用户迷失在海量信息中。从汉...

    div+css网页设计案例图片资源

    在网页设计领域,Div+CSS是一种广泛采用的技术组合,用于构建结构化且样式化的网页布局。Div(Division)是HTML中的一个容器元素,用于组织页面内容,而CSS(Cascading Style Sheets)则是用于控制这些元素外观和...

    jQuery三级下拉列表导航菜单.zip

    在网页设计中,导航菜单是不可或缺的部分,它帮助用户快速浏览和访问网站的不同部分。"jQuery三级下拉列表导航菜单"是一个实现高效、美观且交互性强的导航菜单的解决方案。这个项目利用了jQuery库,一个广泛使用的...

    CSS3波浪状弹性导航菜单.zip

    在网页设计中,导航菜单是页面布局的重要组成部分,它引导用户轻松访问网站的不同部分。"CSS3波浪状弹性导航菜单"是一个创新的设计方案,它利用了CSS3的新特性来实现动态、美观且交互性强的菜单效果。在这个压缩包中...

    js css3制作响应式导航菜单代码.zip

    在本案例中,CSS3的媒体查询(Media Queries)被用来检测浏览器窗口的宽度,并根据这个宽度应用不同的样式。媒体查询允许我们为不同的设备或视口大小定义独立的样式规则,如: ```css @media screen and (max-width...

    学生网页设计

    在网页设计中,首先要理解的是基本概念,如HTML(超文本标记语言)是网页内容的基础,CSS(层叠样式表)用于定义页面的外观和布局,而JavaScript则为网页添加交互性。这些技术通常被称为前端开发的“三大支柱”。 1...

    经典网页导航|经典网页导航

    "经典网页导航"这一主题,强调了网页设计中的一个重要概念——如何通过美观且实用的导航元素来提升用户体验。以下是对这个主题的详细阐述: 一、网页导航的重要性 网页导航是网站架构的核心,它引导用户在网站的...

    photoshop网页设计艺术

    #### 一、Photoshop简介及其在网页设计中的地位 - **定义**:Adobe Photoshop是一款由Adobe Systems开发和发行的专业级图像处理软件,它以其强大的编辑与合成功能著称。 - **应用范围**:广泛应用于广告、平面设计...

    一款三级弹出CSS导航菜单

    在网页设计与开发中,导航菜单是不可或缺的一部分,它不仅能够帮助用户快速找到所需的信息,还能提升网站的整体用户体验。本篇文章将详细解析一款三级弹出CSS导航菜单的设计思路、实现原理及代码细节。 #### 一、...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    - **响应式设计**: 利用媒体查询(Media Queries)实现不同屏幕尺寸下的布局调整,确保网页在手机、平板电脑和桌面设备上都能良好展示。 - **Flexbox与Grid布局**: Flexbox用于创建灵活且易于管理的一维布局,而Grid...

    web网页设计期末课程大作业:旅游网页主题网站设计——中国风的温泉酒店预订网(13页)HTML+CSS+JavaScript

    - **图片与多媒体应用**:在网页设计中,图片、视频、音频等多媒体元素的应用极为广泛。本案例中提到的“视频+音乐+flash”等元素的插入,可以极大地丰富用户体验。 - **JavaScript增强交互性**:通过JavaScript可以...

    网页设计报告(3).doc

    在网页设计过程中,设计师不仅需要关注视觉效果,还要充分考虑网页的可访问性、可维护性和可扩展性。网页设计是不断迭代和优化的过程,需要持续关注用户反馈并据此调整设计。通过本次实习,学生们将深化对网页设计的...

    毕设&课设&项目&实训-第三届“零杯”网页设计大赛参赛作品.zip

    在本压缩包“毕设&课设&项目&实训-第三届‘零杯’网页设计大赛参赛作品.zip”中,我们聚焦于一个特定的领域——网页设计。网页设计是一门涵盖广泛的技术与艺术相结合的学科,它涉及到用户界面、用户体验、交互设计、...

    LCD人机交互式菜单设计

    4. **菜单层次结构**:合理组织菜单层级,一般不超过三层,避免用户迷失在复杂的菜单系统中。主菜单应包含最常用的功能,子菜单用于细分其他功能。 5. **动态更新与实时反馈**:菜单内容应能动态更新,以反映设备...

    访客至上的网页设计秘笈

    在当今数字化时代,网页设计不仅是技术与艺术的结合,更是用户体验的重要组成部分。《访客至上的网页设计秘笈》这本书由Steve Krug撰写,是关于网页可用性的经典之作。本书的核心理念是“Don't Make Me Think!”...

    网页设计与制作-1期 色彩缤纷的图片网站说明文档.pdf

    本案例中,我们关注的是一个名为“色彩缤纷的图片网站”的项目,这是一个由学生刘万辉指导的作品,旨在教授和展示网页设计的基本原则和技术。 首先,作品的核心要求是创建一个具有多种功能的网页,包括用户注册和...

    很实用的二三级菜单

    在网页设计中,一级菜单通常是主菜单,显示在最顶层;二级菜单是主菜单项的子菜单,展开后显示在一级菜单下方;三级菜单则是二级菜单的进一步扩展,提供更细化的选择。这种菜单结构能够帮助用户快速定位和访问所需...

    15个精美的下拉菜单设计

    下拉菜单在网页和应用程序设计中扮演着至关重要的角色,它们是用户界面(UI)中的一个关键组件,有助于提供简洁的导航和信息架构。本文将深入探讨“15个精美的下拉菜单设计”这一主题,揭示这些设计背后的原理、技巧...

    菜单响应式web2.0网页风格ppt模板.rar

    4. PPT模板应用:在制作演示文稿时,这种模板可以为用户提供一个起点,帮助快速构建具有专业外观的页面,尤其适合展示网页设计概念或案例研究。模板可能包含预设的页面布局、颜色方案和图形元素,以符合Web2.0的视觉...

    菱形导航二级下拉菜单.zip

    在本案例中,可能会用到此方法来控制二级菜单的展开和收起速度,增强用户体验。此外,还可以利用addClass()和removeClass()方法添加或移除特定的CSS类,改变元素的样式,实现更多样化的动态效果。 五、响应式设计 ...

Global site tag (gtag.js) - Google Analytics