网页基本元素打造及色彩搭配

 

一 元素基本打造

按钮的外观形态

:尽可能看起来比较饱满(矩形,圆角矩形,圆形,椭圆)

按钮的尺寸

:按钮的高度是文字高度的2倍

上下空余边距,左右空余边距

 

按钮底色尽量不使用纯色(使用颜色时需要将明度降低使用),按钮颜色要和背景色成强对比,按钮文字颜色和按钮颜色强对比。

按钮的状态

:正常,鼠标经过,点击。

颜色及字体的应用

字体:一般使用微软雅黑或新宋体(无),不要使用其他的字体;

新宋体:样式改为 无。大小是12或14pt, 14pt的时候可以使用加粗

微软雅黑:大于或等于14pt,使用样式为平滑或锐利;字体的可识别度高,易读性强;

二 颜色的对比:用于设计中层级的体现;


强对比:图形颜色与文字颜色的饱和度差值为70-100之间;用于突出文字或者权重较高(重要)的内容;

弱对比:图形颜色与文字颜色的饱和度差值为0-30之间,用于丰富背景或某一层级使用;

强对比:在配色中,明度或饱和度只要有一项为强对比,整体就为强对比;

中对比:中弱对比(30-45) 中强对比(55-70)比较重要的内容使用

三 体积(渐变)类按钮

黄色:黄色不适合降低明度使用,本身为亮色,如果需要变暗,需要加入红色方向;

蓝色:蓝色本身为暗色,即使明度为100时,依然为暗色;要想变亮,需要加入青色;

绿色:如果使用时,最好将绿色色相偏黄色使用(黄绿)

图形配色:渐变颜色为弱对比;

文字与图形:强对比

色彩调整:对比可以直接改字或底图颜色,或者加入新的层次,增强对比

光源的确定:根据用户习惯,确定光源

  1. 人们的习惯光源在上方
  2. 光源位置为90° 120° 和60°。一个网站中光源只有一个

四 光效制作具体步骤

  1. 用渐变工具(白色+径向)在画布上建立一个图层拖拽;

  1. 用选框工具(M),删除一半的渐变;
  2. 向上移动1像素,反选(ctrl+shift+I);
  3. 用橡皮工具(E),透明度调整为50%,擦除像素;
  4. 将图层的混合模式改为 叠加

凹入效果:背光方式

  1. 光源为90°,上方为暗色,下方亮;

2上方有内阴影(暗色+正片叠底),下方要有投影(亮色+叠加

3按钮上文字的颜色必须必须暗(亮色靠前,暗色靠后


4 凸起和凹入的效果,颜色避免使用纯黑或者纯白。

五 扁平化设计风格特点

扁平化颜色特点:简洁明快,活泼生动

针对人群:90后 00后的性格气质。
扁平化代表的生活理念:简单,轻松的生活状态。符合更多年龄层的需求,30-40年龄层。

六 关于按钮视觉级别


如果同屏内出现两个或者两个以上按钮,可以把不重要的按钮进行视觉降级.

视觉降级方法1:将该按钮底色调整为,和背景成弱对比。

视觉降级方法2:将按钮的填充色改为无,转为描边填色。
背景与前景颜色的选择技巧:

前景:主题文字,重要图形内容。用色上:和背景应该成强对比。

背景:包括装饰图案,渐变颜色。用色上:应该各自成弱对比

TIPS: 000 黑 333深灰 666稍浅 999更浅 CCC最浅(适合表现辅助线条,或者背景颜色)

选项卡:实现功能是在相同级别板块内容间进行切换。

当前选项卡应该在颜色或者形状上进行突出,非当前选项卡,应该进行相应的弱化处理。

不同功能页面设计时的风格区别


不同功能页面相互切换时,页面的风格版式颜色,尽量要使用较大区别的设计。

面包屑的相关知识

用来代表用户所处的页面层级。通常表现形式为 首页>二级页>三级页….

Author: wenzhongxiang

发表评论

电子邮件地址不会被公开。 必填项已用*标注