网页基本元素打造及色彩搭配
一 元素基本打造
按钮的外观形态
：尽可能看起来比较饱满（矩形，圆角矩形，圆形，椭圆）
按钮的尺寸
：按钮的高度是文字高度的2倍
上下空余边距，左右空余边距
按钮底色尽量不使用纯色（使用颜色时需要将明度降低使用），按钮颜色要和背景色成强对比，按钮文字颜色和按钮颜色强对比。
按钮的状态
：正常，鼠标经过，点击。
颜色及字体的应用
字体：一般使用微软雅黑或新宋体（无），不要使用其他的字体；
新宋体：样式改为 无。大小是12或14pt， 14pt的时候可以使用加粗；
微软雅黑：大于或等于14pt，使用样式为平滑或锐利；字体的可识别度高，易读性强；
二 颜色的对比：用于设计中层级的体现；
强对比：图形颜色与文字颜色的饱和度差值为70-100之间；用于突出文字或者权重较高（重要）的内容；
弱对比：图形颜色与文字颜色的饱和度差值为0-30之间，用于丰富背景或某一层级使用；
强对比：在配色中，明度或饱和度只要有一项为强对比，整体就为强对比；
中对比：中弱对比（30-45） 中强对比（55-70）比较重要的内容使用
三 体积（渐变）类按钮
黄色：黄色不适合降低明度使用，本身为亮色，如果需要变暗，需要加入红色方向；
蓝色：蓝色本身为暗色，即使明度为100时，依然为暗色；要想变亮，需要加入青色；
绿色：如果使用时，最好将绿色色相偏黄色使用（黄绿）
图形配色：渐变颜色为弱对比；
文字与图形：强对比
色彩调整：对比可以直接改字或底图颜色，或者加入新的层次，增强对比
光源的确定：根据用户习惯，确定光源
-
人们的习惯光源在上方；
-
光源位置为90° 120° 和60°。一个网站中光源只有一个
四 光效制作具体步骤
-
用渐变工具（白色+径向）在画布上建立一个图层拖拽；
-
用选框工具（M），删除一半的渐变；
-
向上移动1像素，反选（ctrl+shift+I）;
-
用橡皮工具（E），透明度调整为50%，擦除像素；
-
将图层的混合模式改为 叠加
凹入效果：背光方式
-
光源为90°，上方为暗色,下方亮；
2上方有内阴影（暗色+正片叠底），下方要有投影（亮色+叠加）
3按钮上文字的颜色必须必须暗（亮色靠前，暗色靠后
）
4 凸起和凹入的效果，颜色避免使用纯黑或者纯白。
五 扁平化设计风格特点
扁平化颜色特点：简洁明快，活泼生动
针对人群：90后 00后的性格气质。
扁平化代表的生活理念：简单，轻松的生活状态。符合更多年龄层的需求，30-40年龄层。
六 关于按钮视觉级别
：
如果同屏内出现两个或者两个以上按钮，可以把不重要的按钮进行视觉降级.
视觉降级方法1：将该按钮底色调整为，和背景成弱对比。
视觉降级方法2：将按钮的填充色改为无，转为描边填色。
背景与前景颜色的选择技巧：
前景：主题文字，重要图形内容。用色上：和背景应该成强对比。
背景：包括装饰图案，渐变颜色。用色上：应该各自成弱对比
TIPS： 000 黑 333深灰 666稍浅 999更浅 CCC最浅（适合表现辅助线条，或者背景颜色）
选项卡：实现功能是在相同级别板块内容间进行切换。
当前选项卡应该在颜色或者形状上进行突出，非当前选项卡，应该进行相应的弱化处理。
不同功能页面设计时的风格区别
：
不同功能页面相互切换时，页面的风格版式颜色，尽量要使用较大区别的设计。
面包屑的相关知识
：用来代表用户所处的页面层级。通常表现形式为 首页>二级页>三级页….
