UI 设计极简教程 Part 3
· 阅读需 5 分钟
如何设计优雅的 UI?答:小处落笔、主次分明、布局清爽、文字易读、色彩丰富、层次自然、图不逾矩、画龙点睛、生生不息。
层次自然
-
为什么有些元素看起来凹凸有致?因为它们有自然的 shadow 效果。然而这真的值得你花上几个小时的时间去 tweak 吗?
-
当元素在 z-axis 上提起来靠近用户的时候,会得到更多的注意力,也是 shadow 实现的
-
高阶的 shadow 使用法甚至会有两个 shadow,一个是环境光产生的 shadow,一个是直射光产生的 shadow
-
flat design 也可以有层次感,一是用颜色,较亮的颜色看上去比较近,较暗的颜色看上去比较远;二是用垂直 offset 无 blur 的纯色的 shadow 比如
box-shadow: 0 4px 0 hsl(220,8%, 80%);
-
覆盖元素以产生层次感
- 比如使用负数的 margin 比如
margin-bottom: -72px;
以覆盖两个背景元素,甚至覆盖三个元素margin: -72px 0 -72px 0;
- 类似地图片也可以覆盖两个背景区域,但是为了让图片更明晰,可以加上纯色的 border 区分一下
- 比如使用负数的 margin 比如