# 网页UI设计技巧
# 使用字体的颜色与粗细来区分等级
而不一定是大小
# 颜色
- 字体颜色在一个区块内控制在2-3种
- 使用深色（而不是黑色）来显示首要内容，例如文章标题
- 使用更浅的灰色来显示辅助文本，例如页脚的版权信息，备注
# 粗细
- 大多数文本使用正常字体粗细（400/500，取决于字体）
- 重点强调的文本使用更粗一些的字体（600/700）
- 不要使用400以下的字体粗细，其只在大号字体下才有明显的效果
标题
明天回家浪，还有Produce 48看！
得记得早起...赶火车
标题
明天回家浪，还有Produce 48看！
得记得早起...赶火车
# 不要在彩色背景上使用灰色字体
在白色背景下使用浅灰色显示一些次要文本是不错的选择，因为其降低了显示对比度，从而达到在视觉上让文本的呈现次要等级的效果。在彩色背景下，应该使用接近背景色的文字颜色达到降低对比度的效果。
方案一：降低白色字体的透明度 - 适当减低字的透明度，让背景稍微渗透字体，达到弱化的效果且不会与背景色冲突
方案二：（优选）手动选择接近背景色的字体颜色，调整饱和度与明度直到适合为止
Title
UI Design
Title
UI Design
Title
UI Design
# 设置阴影偏移
与其使用大块的阴影模糊去强调盒子，不如使用垂直方向上的偏移量。它看起来会更加自然，因为它模拟的是灯光从上往下照射在物体上的投射，更接近现实场景。（同样适用于input）
# 边框并不是分割区域的唯一选择
当需要分割两个区块时，边框不是唯一的选择，有时过多的边框会让页面看起来很杂乱，可以尝试如下方式：
- 使用盒子阴影
- 使用不同的背景色
- 不同区块元素采用不同的间距
UI Design
UI Design
UI Design
UI Design
# 使用鲜明的边框为平淡的设计增添色彩
像这样
如果没有左边的线条，可能看起来很无趣了
UI Design
UI Design
← 阴影的使用