网页设计配应用实例剖析——黄系
黄是阳光的彩，具有活泼与轻快的特点，给人十分年轻 的感觉。象征光明、希望、高贵、愉快。浅黄表示柔弱，灰黄表示病态。它的亮度最高，和其他颜配合很活泼，有温暧感，具有快乐、希望、智慧和轻快的个 性，有希望与功名等象征意义。黄也代表着土地、象征着权力，并且还具有神秘的宗教彩。

  黄的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。
  浅黄系明朗、愉快、希望、发展，它的雅致，清爽属性，较适合用于女性及化妆品类网站。
  中黄有崇高，尊贵，辉煌、注意、扩张的心理感受。
  深黄给人高贵、温和、内敛、稳重的心理感受。

  下面我们根据黄系不同属性邻近、同类的高纯度低纯度彩搭配做不同的举例分析。
→ 黄系网页例图：www.bernhardwolff
 

  黄系分析：
  黄是所有彩中明度最高的颜。上图看到HSB模式的H数值是60度，正是正黄，但RGB数值中加入了B蓝数值为51，因此降低了HSB的饱和度S为80％，但是大面积的  黄仍使得该页面彩明亮显眼。
  辅助是纯黑，非彩明度最低的颜。
  大面积显眼的正黄有黑的线条压制，黄顿时显得沉稳，页面增添内容感。
  白虽然是点睛，但由于非彩的白与黄的明度最高，因此这里似乎没有起到"点睛"的作用。

  结论：
  当鲜度、明度高的背景与前景辅助暗度低的黑在明度形成较强烈的对比时，艳度降低，较能协调视觉。
  整个页面配单纯，却也不简单，形成另一种设计风格。
黄同类网页例图：www.paralotna.pl
 

  黄同类分析
  该页面的配很单纯，是同类的黄不同明度颜，页面看起来干净、单纯。
点睛白淡黄在深黄背景下比较显眼，且在最中间位置，是整个页面中的高调部分。
  这三种黄，明度都很高，只有背景辅助明度稍低，点睛黄H相是三种颜中黄倾向最高的为57度，而60度是正黄，因此明度也是最高的，充分的发挥其点睛的作用。
  背景和前景只在相上明度上有非常微妙的变化，却也很巧妙，形成了变化较明显的空间层次感，削弱了同类易产生的单调感。点睛白让层次感更明显。

  结论：
  同类的属性使得整个页面非常和谐，可以根据不同的主题来设计配。
  可以通过明度、饱和度的不同变化来加强页面配的层次感。
→ 中黄应用网页例图： shop
 

  中黄系分析：
  背景中黄上点缀多种艳度较高的颜，都是属于跳跃的颜，渲染整个网站的热闹环境气氛，符合该网站的设计主题。
　 　从HSB数值上看，该中黄的明度和饱和度呈最高值，属于明亮耀眼的颜。辅助是黄绿和红，黄绿在中黄背景下呈冷调，轻快单薄的亮；红的 HSB数值H相上看是正红，明度稍低，这里属于厚重沉稳的颜，在中黄背景下呈现暖调；背景中黄在黄绿和红两者中这时呈中间，是很好的整 体页面视觉过渡。
  加之商品图片多种亮艳的泽混合在同一页面上，点睛白在这里起到了调和多种颜的作用，减少、透气于整个页面的多种配噪音。

  结论：
  当背景起到中间的作用时，页面少量冷暖彩搭配较容易调和。
  通常商品网站志在渲染热闹气氛，比较适合活泼跳跃、彩绚丽的配方案，但彩的调和难度较大。
黄绿调网页例图： www.jpggrupo.ar
 
  黄绿调分析：
  主调为黄绿，单纯而看，黄绿是通常的暖的起始、彩中亮度最高的黄与冷的起始、绿相结合而得，因此该颜看起来非常明快清新。
  处于辅助的非彩黑，中间的点缀是主调黄绿，很容易让人一时以为该颜就是点睛。实际主调黄绿的明度非常高，饱和度这时也很高，在明度最低的黑衬映下就异常显眼。
  背景使用略有些渐变的效果，正是黄绿和黑（灰）颜的柔和过渡，页面调和。
  点睛在这里混较多，RGB、HSB数值差距都不大，因此颜偏灰阶，仔细分析是黄绿与少许黑混合而得，起到了调和背景与辅助明度差异过大的作用。

  结论：
  点睛可以是少许耀眼的颜，也可以是少许协调于视觉的混合灰，无论是耀眼的颜还是谦逊沉稳的灰，都是不可缺少的角，有着不可替代的作用。
  整个页面配较单纯，只有三种，非彩来说分别起到黑（辅助黑）白（主黄绿）灰（点睛混合）的作用，所以页面配较有层次感，并不显得单调。
　→ 黄邻近网页例图：www.leerbanen.nl
 
  黄邻近配（黄+红）分析：
　 　选取的上图三组里HSB数值的B明度虽然都有些变化，但S饱和度分毫没有受到影响，仍都呈最高值100％，因此页面配异常耀眼。好在其间有少量不同 明度饱和度的红系块做压制，页面显得沉稳许多，页面彩层次也丰富了许多，块面交织设计富有节奏韵律美，却也有雀跃的感觉。
  页面照片人物也经过了双调处理，与页面彩风格一致。
  整个页面属于明暗反差较大的调，所以页面响亮明快，极赋视觉冲击力、感染力。

  结论：
  耀眼的颜有深块压制，也是很好的调和方法。
  该页面里的不少小块混合了暗灰，因此页面饱和度刺激程度得到少许降低并调和。
  同类系、类似系不同纯度明度的深浅变化搭配，增添现代美感。
高纯度黄邻近应用网页例图：www.mudbubble
 
  高纯度黄邻近配（黄+红）分析：
  全页选取的几个彩组合是高纯度高明度的邻近正黄、淡黄（这里的淡黄不是指浅黄，而是彩颜料里的称呼。）、中黄及正红。
　 　我们知道，黄是彩系里明度最高的耀眼，HSB数值H相60度是正黄，特性越高明度越高。H相度往60度前是接近红，而红明度相较于黄 低，背景HSB数值H相为48度，往红靠近，因此度较深，呈现为中黄。使用中黄背景正是烘托突出前景的淡黄。淡黄的前景上设计少许中黄带 进入，页面的彩层次感生动了不少。
  另一个辅助红HSB数值的H相是0度，显示正红且高纯度高亮度，放在最显眼的标志广告区域，实现视觉引导作用，主次感增强了。
  白也是辅助三之一，在顶部面积较大的使用，使整个页面的纯度缓和了许多，起到提亮并拉开空间的作用。
  点睛用于导航栏，提示导航区域的醒目与重要性。

  结论：
  高纯度高明度的颜调子耀眼响亮，通常对视觉的刺激程度较大。
  邻近由正黄到最后的正红是轮表的协调过渡，因此页面调和。
  邻近与同类一样，是调和，但较同类更生动更多变化。
→ 黄低纯度配应用网页例图：www.luckystarcafe
 
  低纯度黄配（黄+蓝）分析：
  该页面是属于纯度较低的多组配页面，配难度似乎较大，但是按主调、辅助、点睛来细细分析就会发现容易多了。
  主调的中黄，从RGB数值B明度48来看，提高了明度，RGB数值的变化HSB也相应变化，该调纯度降低，黄的耀眼特性相应缓和。
　 　该页面辅助比较多，这里选了主要的三种浅黄、浅蓝、棕红，明度纯度不同的变化来分析。浅黄的RGB三个数值接近，因此呈现偏灰的柔和状态。正蓝 的RGB数值R为0，G为255，B为255，该蓝RGB数值上看，混合了R红11，G的绿数值较低，B蓝的数值较高，因此饱和度降低，颜呈浅 调。棕红的RGB的三数值上看，R的数值最高为124，加入了对比G绿67，因此颜变暗发乌，调入了适量B蓝24，因此该颜饱和度亮度降 低，也是该页面沉稳的主要调，牵制艳度较高的几种颜。
  点睛的HSB数值H相为356度，几乎呈正红，只是调入了少许B蓝18，因此颜在明度上稍偏暗。另一点睛白的作用除了提亮整个页面，同时也突出标志图像。
  标志是红，下面的绿是红的对比，目的是突出标志的作用，同时也是黄与蓝的中间视觉过渡。

  结论：
  多种辅助份量相当冷暖搭配时，有饱和度稍低的主调牢牢把握住，整个页面容易调和。
  由于页面颜较丰富，点睛在这里起到拉开各个彩层次的作用，明确主次角。

  本部分小节：

  ● 黄是彩系里明度最高的耀眼颜，尤其是HSB数值H相为60度正黄时，它的特性越明显。由于黄的特性，在页面配的时候可适当添加明度较深的颜，阶层拉开，并起到协调刺眼的艳度作用。黄饱和度、明度的不同变化传达不同的意义和作用。
页面设计风格  ● 无论是高纯度低纯度还是多彩的页面配，白起到关键的作用。
  ● 点睛不一定就是非常显眼的颜，也有起到调和整体页面配的作用。
  ● 中间通常被大面积的使用为主调、辅助，是调和辅助（有可能是同时几种）与点睛（有可能是几种）的彩，是调和、调和方法的关键。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。