邵珠庆の日记 生命只有一次,你可以用它来做很多伟大的事情–Make the world a little better and easier


298月/11

网站导航设计模式指南

发布在 邵珠庆

在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式,可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式,我们将讨论它的一般特征,它的缺点,以及什么时候使用它最好。


 

顶部水平栏导航
顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。

顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。

顶部水平栏导航一般特征
导航项是文字链接,按钮形状,或者选项卡形状
水平栏导航通常直接放在邻近网站logo的地方
它通常位于折叠之上


顶部水平栏导航的缺点
顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说,这不是什么问题,但是对于有非常复杂的信息结构且有很多模块组成的网站来说,如果没有子导航的话,这并不是一个完美的主导航菜单选择。

何时使用顶部水平栏导航
顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时,这种设计模式可以支持更多的链接。

竖直/侧边栏导航
侧边栏导航的导航项被排列在一个单列,一项在一项的上面。它经常在左上角的列上,在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究,左边的竖直导航栏比右边的竖直导航表现要好。
侧边栏导航设计模式随处可见,几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一,可以适应数量很多的链接。


它可以与子导航菜单一起使用,也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。

侧边栏导航的一般特征
文字链接作为导航项很普遍(包含或不包含图标)
很少使用选项卡(除了堆叠标签导航模式)
竖直导航菜单经常含有很多链接 


 

竖直/侧边栏导航缺点

因为可以处理很多链接,当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数,取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中,以帮助用户很快地找到感兴趣的链接。

何时使用竖直/侧边栏导航
竖直导航适用于几乎所有种类的网站,尤其适合有一堆主导航链接的网站。

选项卡导航
选项卡导航可以随意设计成任何你想要的样式,从逼真的,有手感的标签到圆滑的标签,以及简单地方边的标签等。它存在于各种各样的网站里,并且可以纳入任何视觉效果。


选项卡比起其它类别的导航有一个明显的优势:它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起,因为他们曾经在笔记本或资料夹里看见选项卡,并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。

选项卡导航的一般特征
样子和功能都类似真实世界的选项卡(就像在文件夹,笔记本等中看到的一样)
一般是水平方向的但也有时是竖直的(堆叠标签) 
 

选项卡导航的缺点

选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签,图片资源以及CSS,具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况,除非它们竖直地排列(即使这样,如果太多的话它们还是看起来很不合适)。

何时使用选项卡导航
选项卡也适合几乎任何主导航,虽然它们在可以显示的链接上有限制,尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。

面包屑导航
面包屑的名字来源于Hansel和Gretel的故事,他们在沿途播撒面包屑以用来找到加家的路,这可以告诉你在网站的当前位置。这是二级导航的一种形式,辅助网站的主导航系统。


面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级,它们只需要点击相应的面包屑导航项。

面包屑的一般特征
一般格式是水平文字链接列表,通常在两项中间伴随着左箭头以指示层及关系
从不用于主导航 
 

面包屑导航的缺点

面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候,使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节,使用面包屑是得不偿失。

标签导航
标签经常被用于博客和新闻网站。它们常常被组织成一个标签云,导航项可能按字母顺序排列(通常用不同大小的链接来表示这个标签下有多少内容),或者按流行程度排列。

标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云,标签则通常包括于文章顶部或底部的元信息中,这种设计让用户更容易找到相似的内容。

标签导航的一般特征
标签是以内容为中心的网(博客和新闻站)站的一般特性
仅有文字链接
当处于标签云中时,链接通常大小各异以标识流行度
经常被包含在文章的元信息中
标签导航的缺点
人们通常把标签和博客和新闻网站联系在一起(有时候也可能是电子商务网站),所以如果你的网站与这些网站有本质的不同,它可能对你就没有帮助。标签也会给内容创作者带来一定量的工作量,因为为了使标签系统有效,每篇文章都需要打上准确的标签。

何时使用标签
如果你拥有很多主题,为内容打上关键词标记是很有利的。如果你仅有几个页面(可能你的网站是一个公司网站),可能就不需要给内容打标签了。是否结合标签云或只是将标签包含在元信息中得取决于你的设计。

搜索导航
近些年来网站检索已成为流行的导航方式。它非常适合拥有无限内容的网站(像维基百科),这种网站很难使用其它的导航。搜索也常见于博客和新闻网站,以及电子商务网站。

搜索对于清楚知道自己想要找什么的访客非常有用。但是有了搜索并不代表着就可以忽略好的信息结构。它对于保证那些不完全知道自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常重要。

搜索导航的一般特征
搜索栏通常位于头部或在侧边栏靠近顶部的地方
搜索栏经常会出现在页面布局中的辅助部分,如底部
搜索导航的缺点
搜索最大的缺点是并非所有搜索引擎都是平等的。取决于你选择的方案,你网站的搜索特性可能不能返回精确的结果或者缺失一些东西如文章元数据。搜索导航,对于大部分网站来说,应该作为次要的导航形式。搜索是用户在无法被导航到他们想找的东西的地方时的可靠选择。

何时使用搜索导航
对于具有无数页面并且有复杂信息结构的网站来说,肯定必须引入搜索功能。没有它用户可能很难通过遍历链接和多层的导航来找到他们想要的信息。搜索对于电子商务网站也非常重要,而关键的一点是电子商务网站的搜索结果要根据网站存货的多少具有相应的筛选和排序功能。

出式菜单和下拉菜单导航
出式菜单(与竖直/侧边栏导航一起使用)和下拉菜单(一般与顶部水平栏导航一起使用)是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整洁,而且使得深层章节很容易被访问。

他们通常结合水平,竖直或是选项卡导航一起使用,作为网站主导航系统的一部分。

出式菜单和下拉菜单导航的一般特征
用于多级信息结构
使用JavaScript和CSS来隐藏和显示菜单
显示在菜单中的链接是主菜单项的子项
菜单通常在鼠标悬停在上面时被激活,而有时候也可能是鼠标点击时激活


出式菜单和下拉菜单导航缺点
除非你在主导航链接边上放置一些标识(通常是箭头图标),不然访客可能不知道那有包含子导航项的下拉或出式菜单,因此使这些标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动设备上非常难用,所以要确保你的移动样式表处理了这种情况。

 

何时使用出式菜单和下拉菜单导航
如 果你想在视觉上隐藏很大的或很复杂的导航层次,出式菜单和下拉是很好的选择,因为它让用户决定他们想看见什么,以及什么时候可以看见它们。它们可以用来在 不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航,并且不需要用户首先点击打开新的页面。

分面/引导导航
分面/引导导航(也叫做分面检索或引导检索)最常见于电子商务网站。基本上来说引导导航给你提供额外的内容属性筛选。假设你在浏览一个新的LCD显示器,引导导航可能会列出大小,价格,品牌等选顶。基于这些内容属性,你可以导航到匹配你的条件的项。

引导导航在拥有巨大数量货物的大型电子商务网站中是非常宝贵的。用户通过直接搜索通常很难找到他们想要的东西,并且增加了用户漏掉一个产品的或能性。例如他们可能搜索一个灰褐色的产品,但你可能将它标记了灰色或褐色,虽然它可能就是用户想要的东西。

分面/引导导航的一般特征
最常见于电子商务网站
通常让用户对不同的特征做多次筛选
几乎总是使用文字链接,分解在不同的类别下或是下拉菜单下
常常与面包屑导航一起使用
分面/引导导航的缺点
引导导航可能会引起一些用户的迷惑。另外不能保证用户会在你预先定义的类别中查找。

何时使用分面/引导导航
分面导航对于大型电子商务网站非常有用。它方便了用户购物,提升了购物体验,并更容易找到它们真正想要的东西。它也可以用于其它目录风格的网站。

页脚导航
页脚导航通常用于次要导航,并且可能包含了主导航中没有的链接,或是包含简化的网站地图链接。

访客通常在主导航找不到他们要找的东西时会去查看页脚导航。

页脚导航的一般特征
页脚导航通常用于放置其它地方都没有的导航项
通常使用文字链接,偶尔带有图标
通常链接指向不是那么关键的页面
页脚导航的缺点
如果你的页面很长,没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面,页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导般形式。

何时使用页脚导航
绝大多数网站都有这样那样的页脚导航,即使它只是重复其它地方的链接。考虑什么放在那有用,以及你的访客可能最想找什么。

结论
大 多数网站使用不只一种导航设计模式。例如一个网站可能会用顶部水平栏导航作为主导航系统,并使用竖直/侧边栏导航系统来辅助它,同时还用页脚导航来作冗 余,增加页面的便利度。当选择你的导航系统基于的导航设计模式时,你必须选择支持你的信息结构以及网站特性的方案。导航是网站设计的重要部分,它的效果必 须有坚实的基础设计。

75月/11

75个最佳Web设计资源,强烈推荐!

发布在 邵珠庆

字体

Typography Resources

- 60 套公司用设计字体 [Smashing Magazine]

- 20 套免费手写字体与资源 [Fuel Your Creativity]

- 50 套专业Web设计与印刷用字体 [Noupe]

- 15 套漂亮的高质量免费字体 [Smashing Magazine]

- 21 套来自 DeviantArt 的艺术字体 [Designflavr]

- 设计专业人士使用的7套最佳字体 [Just Creative design ]

- 45 套符合现代设计趋势的免费漂亮字体 [Six Revisions]

css

- 50 个强大的 CSS 实用工具 [Smashing Magazine]

- 30 套 CSS 小炒资料 [All Web design Resources]

- CSS 编辑器评测 [Smashing Magazine]

- CSS 高手的 10 个原则 [NETTUTS]

- 2008 最佳 CSS 设计 中文 ) [Web Designer Wall]

- 40 个 CSS 生成器 [All Web design Resources]

- 重置你的CSS [Six Revisions]

- 实现干净代码的12条定律 中文 ) [Smashing Magazine]

Logo 设计

Logo Design Resources

- 81 个最佳 Logo 设计资源 [Logo design Love]

- 最佳Logo设计资源 [Just Creative design ]

- 105 个Logo设计资源 [Elite By design ]

- 35 个令人目眩的黑白 Logo [Siah design ]

- 50 套能够带来启发的 Logo [Fuel Your Creativity]

- 2008 年 33 个不俗的 Logo 重设计 [Smashing Apps]

- 30 个精彩的矢量 Logo 设计 [VECTORTUTS]

- 10 个成功的 Logo 设计 [Logo design Love]

图标

Icons

- 2008年50套最漂亮的图标 [Noupe]

- 40 套漂亮的免费图标 [Six Revisions]

- 22 套全新高品质免费图标 [Elite By design ]

- 40 套超漂亮的图标 [Noupe]

设计启发

Inspiration Resources

- 50 个漂亮的博客设计 [Smashing Magazine]

- 40 个有创意的按钮 [PSDTUTS]

- 60 个非常 Cool 非常有创意的 404 页面 [Hongkiat]

- 30 个漂亮的 Web 设计例子 [Six Revisions]

- 2008年40个具有启发性的 Web 设计 [CrazyLeaf design Blog]

- 50 个漂亮的导航菜单 [Vandelay Website design ]

- Web 设计中的57个矢量字符 [CSSLeak]

- 50 个漂亮的,有创意的展示类站点设计 [Smashing Magazine]

- 40 个漂亮的暗色系 CSS 设计 [Toxel]

- 40 个漂亮的手画 Web 设计 [CSSBuilt]

- 79 个精彩的专辑封面 [Inspiredology]

- 40 套有创意的名片设计 [Toxel]

- 纹理与图样设计展示 [Smashing Magazine]

- 54 幅令人灵魂出窍的数字画 [PSDTUTS]

- 50 个出色的博客页脚设计 [Hongkiat]

- 24 个漂亮的,有创意的网站 Header 设计 [Toxel]

- 富有灵感的 PDF 杂志设计 [Smashing Magazine]

教程

Tutorials

- 41 个最好的 Photoshop 效果教程 [Hongkiat]

- 30 个漂亮的 Photoshop 文字效果教程 [Six Revisions]

- 70 个 Photoshop 美容教程 [Smashing Magazine]

- 50 个很棒的 Photoshop 教程 [PSDTUTS]

- 30 个 Fireworks 教程 [Arbent]

- Adobe Fireworks 教程与下载 [Smashing Magazine]

- 40 个 Wacom 数字画板教程 [DesignM.ag]

- 50 个出色的 AJAX 教程 [Smashing Magazine]

- 50 个富有创意的 Photoshop 文字效果教程 [PSDTUTS]

- 23 个不可思议的 Photoshop 教程 [Elite By design ]

- Adobe Illustrator 教程 [Smashing Magazine]

Photoshop 资源下载

Photoshop Downloads

- Photoshop Custom Shapes 集 [Smashing Magazine]

- 20 个 Photoshop 印刷作品与画笔资源 [PSDTUTS]

- 75 个超高分辨率 Photoshop 画笔 [Elite By design ]

- 50 个不可或缺的 Photoshop 画笔 [Smashing Magazine]

- 200 套 Photoshop 画笔 [You the Designer]

- 50 套免费的 Photoshop Pattern [Emma Alvarez]

- 55 套免费的画笔与矢量图 [Web Resources Depot]

- 40 套 Photoshop 万圣节主题画笔 [PSDFan]

wordpress

WordPress Resources

- 100 出色的 WordPress 免费主题 [Smashing Magazine]

- 30 个最实用的 WordPress 技巧 [Hongkiat]

- 45 套免费的 WordPress 网格布局主题 [WPZOOM]

- 45 套必须要看到 WordPress 主题 [Noupe]

- 20 套 WordPress 公司网站主题 [Blogsessive]

- 24 套高质量免费 WordPress 主题 [Toxel]

- 21 套令人耳目一新的免费Wordpress主题 [Smashing Apps]

- 50 套漂亮的免费 WordPress 主题 [Six Revisions]

- 10 个寻找免费 WordPress 主题的地方 [UPrinting]

- 50 个最好的 WordPress 主题 [CrazyLeaf design Blog]

- 10 个 WordPress 实用 RSS 技巧 [Smashing Magazine]

- 45 个出色的免费 WordPress 主题 [DzineBlog]

257月/10

网页配色实例:Web设计色彩速查表

发布在 邵珠庆

一直希望自己对Web设计的色彩把握的更好些,所以手头上就备了一份图片版的配色表,对色彩的搭配有了很多的提高,今天发现了这套非常完整的Web版设计色彩速查表,相比图片版的来说就更容易实时学习了。

████ 粉红(#ffb3a7),即浅红色。别称:妃色 杨妃色 湘妃色 妃红色
████ 妃色 妃红色(#ed5736):古同“绯”,粉红色。杨妃色 湘妃色 粉红皆同义。
████ 品红(#f00056):比大红浅的红色(quester注:这里的“品红”估计是指的“一品红”,是基于大红色系的,和现在我们印刷用色的“品红M100”不是一个概念)

████ 桃红(#f47983),桃花的颜色,比粉红略鲜润的颜色。 (quester注:不大于M70的色彩,有时可加入适量黄色)
████ 海棠红(#db5a6b),淡紫红色、较桃红色深一些,是非常妩媚娇艳的颜色。
████ 石榴红(#f20c00):石榴花的颜色,高色度和纯度的红色。
████ 樱桃色(#c93756):鲜红色

████ 银红(#f05654):银朱和粉红色颜料配成的颜色。多用来形容有光泽的各种红色,尤指有光泽浅红。
████ 大红(#ff2121):正红色,三原色中的红,传统的中国红,又称绛色 (quester注:RGB 色中的 R255 系列明度)
████ 绛紫(#8c4356):紫中略带红的颜色
████ 绯红(#c83c23):艳丽的深红

████ 胭脂(#9d2933):1,女子装扮时用的胭脂的颜色。2,国画暗红色颜料
████ 朱红(#ff4c00):朱砂的颜色,比大红活泼,也称铅朱 朱色 丹色 (quester注:在YM对等的情况下,适量减少红色的成分就是该色的色彩系列感觉)
████ 丹(#ff4e20):丹砂的鲜艳红色
████ 彤(#f35336):赤色

████ 茜色(#cb3a56):茜草染的色彩,呈深红色
████ 火红(#ff2d51):火焰的红色,赤色
████ 赫赤(#c91f37):深红,火红。泛指赤色、火红色。
████ 嫣红(#ef7a82):鲜艳的红色
████ 洋红:色橘红(#ff0097) (quester注:这个色彩方向不太对,通常洋红指的是倾向于M100系列的红色,应该削弱黄色成分。)

████ 炎(#ff3300):引申为红色。
████ 赤(#c3272b):本义火的颜色,即红色
████ 绾(#a98175):绛色;浅绛色。
████ 枣红(#c32136):即深红 (quester注:色相不变,是深浅变化)

████ 檀(#b36d61):浅红色,浅绛色。
████ 殷红(#be002f):发黑的红色。
████ 酡红(#dc3023):像饮酒后脸上泛现的红色,泛指脸红
████ 酡颜(#f9906f):饮酒脸红的样子。亦泛指脸红色

████ 鹅黄(#fff143):淡黄色 (quester注:鹅嘴的颜色,高明度微偏红黄色)
████ 鸭黄(#faff72):小鸭毛的黄色
████ 樱草色(#eaff56):淡黄色
████ 杏黄(#ffa631):成熟杏子的黄色 (quester注:Y100 M20~30 感觉的色彩,比较常用且有浓郁中国味道)

████ 杏红(#ff8c31):成熟杏子偏红色的一种颜色
████ 橘黄(#ff8936):柑橘的黄色。
████ 橙黄(#ffa400):同上。 (quester注:Y100 M50 感觉的色彩,现代感比较强。广告上用得较多)
████ 橘红(#ff7500):柑橘皮所呈现的红色。

████ 姜黄(#ffc773):中药名。别名黄姜。为姜科植物姜黄的根茎。又指人脸色不正,呈黄白色
████ 缃色(#f0c239):浅黄色。
████ 橙色(#fa8c35):界于红色和黄色之间的混合色。
████ 茶色(#b35c44):一种比栗色稍红的棕橙色至浅棕色
████ 驼色(#a88462):一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色

████ 昏黄(#c89b40):形容天色、灯光等呈幽暗的黄色
████ 栗色(#60281e):栗壳的颜色。即紫黑色
████ 棕色:棕毛的颜色,即褐色。1,在红色和黄色之间的任何一种颜色2,适中的暗淡和适度的浅黑。
████ 棕绿(#827100):绿中泛棕色的一种颜色。
████ 棕黑(#7c4b00):深棕色。

████ 棕红(#9b4400):红褐色。
████ 棕黄(#ae7000):浅褐色。
████ 赭(#9c5333):赤红如赭土的颜料,古人用以饰面
████ 赭色(#955539):红色、赤红色。
████ 琥珀(#ca6924):

████ 褐色(#6e511e): 黄黑色
████ 枯黄(#d3b17d):干枯焦黄
████ 黄栌(#e29c45):一种落叶灌木,花黄绿色,叶子秋天变成红色。木材黄色可做染料。
████ 秋色(#896c39):1,中常橄榄棕色,它比一般橄榄棕色稍暗,且稍稍绿些。2,古以秋为金,其色白,故代指白色。
████ 秋香色(#d9b611):浅橄榄色 浅黄绿色。 (quester注:直接在Y中掺入k10~30可得到不同浓淡的该类色彩)

████ 嫩绿(#bddd22):像刚长出的嫩叶的浅绿色
████ 柳黄(#c9dd22):像柳树芽那样的浅黄色
████ 柳绿(#afdd22):柳叶的青绿色
████ 竹青(#789262):竹子的绿色

████ 葱黄(#a3d900):黄绿色,嫩黄色
████ 葱绿(#9ed900):1,浅绿又略显微黄的颜色2,草木青翠的样子
████ 葱青(#0eb83a):淡淡的青绿色
████ 葱倩(#0eb83a):青绿色
████ 青葱(#0aa344):翠绿色,形容植物浓绿

████ 油绿(#00bc12):光润而浓绿的颜色。以上几种绿色都是明亮可爱的色彩。
████ 绿沈(#0c8918)(沉) :深绿
████ 碧色(#1bd1a5):1,青绿色。2,青白色,浅蓝色。
████ 碧绿(#2add9c):鲜艳的青绿色

████ 青碧(#48c0a3):鲜艳的青蓝色
████ 翡翠色(#3de1ad):1,翡翠鸟羽毛的青绿色。2,翡翠宝石的颜色。 (quester注:C-Y≥30 的系列色彩,多与白色配合以体现清新明丽感觉,与黑色配合效果不好:该色个性柔弱,会被黑色牵制)
████ 草绿(#40de5a):绿而略黄的颜色。
████ 青色(#00e09e):1,一类带绿的蓝色,中等深浅,高度饱和。3,本义是蓝色。4,一般指深绿色。5,也指黑色。6,四色印刷中的一色。2,特指三补色中的一色。

████ 青翠(#00e079):鲜绿

████ 青白(#c0ebd7):白而发青,尤指脸没有血色
████ 鸭卵青(#e0eee8):淡青灰色,极淡的青绿色
████ 蟹壳青(#bbcdc5):深灰绿色

████ 鸦青(#424c50):鸦羽的颜色。即黑而带有紫绿光的颜色。
████ 绿色(#00e500):1,在光谱中介于蓝与黄之间的那种颜色。2,本义:青中带黄的颜色。3,引申为黑色,如绿鬓:乌黑而光亮的鬓发。代指为青春年少的容颜。 (quester注:现代色彩研究中,把绿色提高到了一个重要的位置,和其它红黄兰三原色并列研究,称做“心理原色”之一)
████ 豆绿(#9ed048):浅黄绿色
████ 豆青(#96ce54):浅青绿色

████ 石青(#7bcfa6):淡灰绿色
████ 玉色(#2edfa3):玉的颜色,高雅的淡绿、淡青色
████ 缥(#7fecad):绿色而微白
████ 艾绿(#a4e2c6):艾草的颜色。偏苍白的绿色。
████ 松柏绿(#21a675):经冬松柏叶的深绿

████ 松花绿(#057748):亦作“松花”、“松绿”。偏黑的深绿色,墨绿。
████ 松花色(#bce672):浅黄绿色。(松树花粉的颜色)《红楼梦》中提及松花配桃红为娇艳 ██ ██

████ 蓝(#44cef6):三原色的一种。像晴天天空的颜色 (quester注:这里的蓝色指的不是RGB色彩中的B,而是CMY色彩中的C)

████ 靛青(#177cb0):也叫“蓝靛”。用蓼蓝叶泡水调和与石灰沉淀所得的蓝色染料。呈深蓝绿色 (quester注:靛,发音dian四声,有些地方将蓝墨水称为“靛水”或者“兰靛水”)
████ 靛蓝(#065279):由植物(例如靛蓝或菘蓝属植物)得到的蓝色染料
████ 碧蓝(#3eede7):青蓝色
████ 蔚蓝(#70f3ff):类似晴朗天空的颜色的一种蓝色

████ 宝蓝(#4b5cc4):鲜艳明亮的蓝色 (quester注:英文中为 RoyalBlue 即皇家蓝色,是皇室选用的色彩,多和小面积纯黄色(金色)配合使用。)
████ 蓝灰色(#a1afc9):一种近于灰略带蓝的深灰色
████ 藏青(#2e4e7e):蓝而近黑
████ 藏蓝(#3b2e7e):蓝里略透红色

████ 黛(#4a4266):青黑色的颜料。古代女子用以画眉。
████ 黛螺(#4a4266):绘画或画眉所使用的青黑色颜料,代指女子眉妩。
████ 黛色(#4a4266):青黑色。
████ 黛绿(#426666):墨绿。
████ 黛蓝(#425066):深蓝色

████ 黛紫(#574266):深紫色
████ 紫色(#8d4bbb):蓝和红组成的颜色。古人以紫为祥瑞的颜色。代指与帝王、皇宫有关的事物。
████ 紫酱(#815463):浑浊的紫色
████ 酱紫(#815476):紫中略带红的颜色
████ 紫檀(#4c221b):檀木的颜色,也称乌檀色 乌木色

████ 绀青 绀紫(#003371):纯度较低的深紫色
████ 紫棠(#56004f):黑红色
████ 青莲(#801dae):偏蓝的紫色
████ 群青(#4c8dae):深蓝色
████ 雪青(#b0a4e3):浅蓝紫色

████ 丁香色(#cca4e3):紫丁香的颜色,浅浅的紫色,很娇柔淡雅的色彩
████ 藕色(#edd1d8):浅灰而略带红的颜色
████ 藕荷色(#e4c6d0):浅紫而略带红的颜色

████ 苍色(#75878a):即各种颜色掺入黑色后的颜色,如苍翠(#519a73)████ 苍黄(#a29b7c)████ 苍青(#7397ab)████ 苍黑(#395260)████ 苍白(#d1d9e0)████ (quester注:准确的说是掺入不同灰度级别的灰色)

████ 水色(#88ada6):水红(#f3d3e7)████ 水绿(#d4f2e7)████ 水蓝(#d2f0f4)████ 淡青(#d3e0f3)████ 湖蓝(#30dff3)████ 湖绿(#25f8cb)████ 皆是浅色。

████ 深色淡色(#ffffff):颜色深的或浅的,不再一一列出。

████ 精白(#ffffff):纯白,洁白,净白,粉白。
████ 象牙白(#fffbf0):乳白色
████ 雪白(#f0fcff):如雪般洁白

████ 月白(#d6ecf0):淡蓝色
████ 缟(#f2ecde):白色
████ 素(#e0f0e9):白色,无色
████ 荼白(#f3f9f1):如荼之白色
████ 霜色(#e9f1f6):白霜的颜色。

▓▓▓▓ 花白(#c2ccd0):白色和黑色混杂的。斑白的 夹杂有灰色的白
████ 鱼肚白(#fcefe8):似鱼腹部的颜色,多指黎明时东方的天色颜色 (quester注:M5 Y5)
████ 莹白(#e3f9fd):晶莹洁白
████ 灰色(#808080):黑色和白色混和成的一种颜色

████ 牙色(#eedeb0):与象牙相似的淡黄色 (quester注:暖白)
████ 铅白(#f0f0f4):铅粉的白色。铅粉,国画颜料,日久易氧化“返铅”变黑。铅粉在古时用以搽脸的化妆品。 (quester注:冷白)

████ 玄色(#622a1d):赤黑色,黑中带红的颜色,又泛指黑色
████ 玄青(#3d3b4f):深黑色

████ 乌色(#725e82):暗而呈黑的颜色
████ 乌黑(#392f41):深黑;漆黑
████ 漆黑(#161823):非常黑的
████ 墨色(#50616d):即黑色
████ 墨灰(#758a99):即黑灰

████ 黑色(#000000):亮度最低的非彩色的或消色差的物体的颜色;最暗的灰色;与白色截然不同的消色差的颜色;被认为特别属于那些既不能反射、又不能透过能使人感觉到的微小入射光的物体,任何亮度很低的物体颜色。
████ 缁色(#493131):帛黑色
████ 煤黑象牙黑(#312520):都是黑,不过有冷暖之分。
████ 黧(#5d513c):黑中带黄的颜色
████ 黎(#75664d):黑中带黄似黎草色

████ 黝(#6b6882):本义为淡黑色或微青黑色。
████ 黝黑(#665757):(皮肤暴露在太阳光下而晒成的) 青黑色
████ 黯(#41555d):深黑色、泛指黑色
████ 赤金(#f2be45):足金的颜色

████ 金色(#eacd76):平均为深黄色带光泽的颜色
████ 银白(#e9e7ef):带银光的白色
████ 铜绿(#549688) ████ 乌金(#a78e44) ████ 老银(#bacac6):金属氧化后的色彩

附带:

国画用色

████ 银朱(#bf242a):呈暗粉色。
████ 胭脂(#9d2933):色暗红。用红蓝花、茜草、紫梗三种植物制成的颜料,年代久则有褪色的现象。
████ 朱砂(#ff461f):色朱红。用以画花卉、禽鸟羽毛。 (quester注:黄色成分微高于红色成分,色艳丽,需注意与背景色调和,多数情况下不大面积使用。)

████ 朱膘(#f36838):色橘红。明度比朱砂高,彩度比朱砂低。用以画花卉。
████ 赭石(#845a33):色红褐。用以画山石、树干、老枝叶。
████ 石青(#1685a9):色青,依深浅分为-头青、二青、三青。用以画叶或山石。
████ 石绿(#16a951):依深浅分为-头绿、二绿、三绿。用以画山石、树干、叶、点苔等。
████ 白粉(#fff2df):亦称胡粉,色白,有蛤粉和铅粉两种。用以画白花、鸟,或调配其他颜料使用。

████ 花青(#003472):色藏青。用以画枝叶、山石、水波等。用蓼蓝或大蓝的叶子制成蓝靛,再提炼出来的青色颜料,蓝绿色或藏蓝色。用途相当广,可调藤黄成草绿或嫩绿色。广花,颜料。即广东产的花青。 (quester注:微含红色成分,故与黄色调和后生成的绿色较为沉着)
████ 藤黄(#ffb61e):色明黄。用以画花卉、枝叶。藤黄:明黄色。南方热带林中的海藤树,常绿乔木,茎高达二十米,从其树皮凿孔,流出黄色树脂,以竹筒承接,干透可作国画颜料。 (quester注:亦含微量红色成分,有毒。和黑色配合时甚为醒目,多为危险警示色彩)
████ 赭石色(#845a33):暗棕色矿物,用做颜料
████ 雌黄(#ffc64b):矿物名。成分是三硫化二砷(As2S3)橙黄色,半透明,可用来制颜料。古人用雌黄来涂改文字,因此称乱改文字、乱发议论为“妄下雌黄”,称不顾事实、随口乱说为“信口雌黄”。

████ 雄黄(#e9bb1d):中药名。为含硫化砷的矿石。别名石黄、黄石。
████ 石黄(#e9bb1d):国画颜料,即雄黄。
████ 洋红(#ff4777):色橘红。用以画花卉。

古典文学常见词

鎏金:中国传统的一种镀金方法,把溶解在水银里的金子涂刷在银胎或铜胎器物上。

飞金 泥金 洒金:用金粉或金属粉制成的金色涂料,用来装饰笺纸或调和在油漆中涂饰器物。洒金一说是指带斑点的图案。
描金:为使器物美观而在其上用金银粉勾图、描绘作为装饰。

花黄:古代妇女的面饰。用金黄色纸剪成星月花鸟等形贴在额上,或在额上涂点黄色。
撒花:织物上的碎花图案。
云斑:在颜色比较淡的或半透明的材料上的暗黑的或无光泽的条纹或斑点(如在大理石上)。
云母纹:像云母断面及砂子闪烁光泽的纹理。

注: 在原文中,是没有把每个色彩的色彩值写上的,我感觉这样用起来会很不方便,用取色器获取的颜色也可能不准确,就在每个颜色名称后面一一标注了。