10个精致的导航菜单欣赏及点评(2)
作者:wantfee 来源:蓝色理想 发布时间:2011-09-22 20:33:44
三、每一个元素都是有用的
想象我们从一张空白的白色文档开始设计一个页面的导航。首先添加链接文字,为了让文字颜色和白色的页面对比不过于强烈刺眼,我们决定不用黑色而使用灰色。这里我们将文字行距拉开,让留白区域更多一些,目的是让页面保持透气感和干净的感觉。
各个导航栏目如果只是文字的话看上去过于类似,所以为了让它们在保持相似性的同时而有所区别,我们给每一个栏目的左侧添加上了风格简洁的图标,选择这种风格的图标一是符合页面本身干净的感觉,另外一点的考虑是图片和文字内容的关联性。我们不打算让图标比文字还吸引眼球,所以我们让它们保持比文字还浅的灰色。白色的页面上如果仅仅放上导航内容的话感觉结构不够整齐,因为没有实际上的线条来束缚视线,所以这里我们给每一个导航栏目添加非常浅的灰色水平线和垂直水平线,这种隐隐约约的线条既可以加强排版,还不至于让页面看上去条条框框过多,阻碍视线的游走。
接下来就是鼠标悬停的效果了,这要和菜单本身的状态有较大的视觉差别,所以这里我们将文字和背景颜色更改为清爽的绿色和灰色,灰色是为了让整个页面的颜色统一,而绿色是唯一跳出整个灰色页面的颜色。这样就让页面在颜色上有了亮点,而不至于让人感觉页面上灰蒙蒙的一片。背景的材质上添加了杂色,这样看上去更加柔和,而不是光亮的冷冰冰的感觉。这基本上就是我们设计这个导航的整个考虑过程。
这样你就看到了,这里的每一个元素和细节的应用都是经过充分考虑的,而且没有一个多于的东西无缘无故的存在,这就是简洁风格的设计理念。
四、强质感的高光风格
这个例子中的导航和我上一篇日志《强质感高光风格网页欣赏及其表现手法总结》中提高的风格比较类似,技术方法也非常简单,你可以去那篇日志中下载我做好的PSD文件,学习一下如何实现这样的效果。


猜你喜欢
- 5位数日期戳读取 .mat 文件处理里面数据时,发现里面的日期数据全部都是 “5位数” 数字,很不解;后来查到可以在excel中通过设置单元
- 1.首先要绘制一个简单的条形图import numpy as npimport matplotlib.pyplot as pltfrom m
- 一、os常用方法1.获取当前路径 os.getcwd()# coding:utf-8import osif __name__ == '
- 在使用AJAX开发网站时,经常有朋友遇到乱码的问题,而且一下子难以找到解决方法。其实解决AJAX中文乱码问题很简单。1、服务端程序:<
- 前言字符串是 字符的序列 。字符串基本上就是一组单词。我几乎可以保证你在每个Python程序中都要用到字符串,所以请特别留心下面这部分的内容
- 前言&最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删改查功能,想想这也不难,就做一下试试吧。因为自己写的样式
- 在完成了应用程序架构和页面的设计后,我们可以开始探讨如何实现多种多样的普通数据到报表展现的任务。前面我们已经了解到如何在从数据访问层和业务逻
- 与其它大多数语言一样,Python 也拥有 for 循环。你到现在还未曾看到它们的唯一原因就是,Python 在其它太多的方面表现出色,通常
- php5.2新增的json功能是非常受欢迎的,但是经过测试发现, json_encode对中文的处理是有问题的, 1.不能处理GB编码,所有
- 大数据一般是在“云”上玩的,但“云”都是要钱的,而且数据上上下下的也比较麻烦。所以,在本地电脑上快速处理数据的技能还是要的。pandas在比
- 昨天在QQ群里讨论一个SQL优化的问题,语句大致如下:select A,min(B) from table group by A;--A,B
- 在使用django的modelform的时候,修改表单,图片在form表单显示的是一个链接。显示缩略图如下第一步:from django.f
- 先说下自己之前的环境(都是Linux系统,差别不大):Centos7.6NVIDIA Driver Version 440.33.01(等会
- 目录1.1 题目1.2 思路1.2.1 发送请求1.2.2 解析网页1.2.3 获取结点1.2.4 数据保存 (单线程)1.2.4 数据保存
- 本文实例讲述了Python3实现获取图片文字里中文的方法。分享给大家供大家参考,具体如下:一、运行环境(1) win10(2) pychar
- Python中,列表是可以进行修改的:赋值、删除元素、分片等等。在给列表添加元素时,有两个常见的方法:append和extend。appen
- 计算分页,嘿嘿一次搞定不用判断intNumPage = Abs(Int(-(intNumRecord/intPerPage)))  
- 这将为我们的团队节省每天重复的数据处理时间......简介如果你目前在一个数据或商业智能团队工作,你的任务之一可能是制作一些每日、每周或每月
- 安装文件准备:安装文件下载地址python-2.6.2.msihttp://www.python.org/download/wxPython
- 一、前言对于一个桌面应用来说,有时候单独一个窗口用户使用起来会不太方便,比方说写日报或者查看文件等,若是在同一窗口内,我只能做一件事,不能边