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 比如
图不逾矩
-
优雅的设计会在意每一张图片的使用,你应该使用高质量的图片;图片的使用要讲规矩
-
在图片上放文字,为了让文字更清晰,可以
- 覆盖灰色的一层,以加灰背景
- 降低图片对比度,以加白背景
- 调节图片为单一颜色,以加深背景
- 给图片加 shadow
-
图片有它自己的适用大小,不要随意改变它的 scale
- 不要放大 icon,可以给它加纯色的圈圈
- 不要缩小截图,上面的文字会看不清;你可以
- 在小 screen 上截图
- 截图本身只截重点区域
- 非要截大图的话,用线条来取代小字,就没有读不清的问题了
- 也不要缩小 icon,根据实际需要重新画
-
注意用户上传的图片
- 展示的时候如果大小不一致会很乱,可以用
backgroundSize: "cover", backgroundImage: url(...);
- 图片颜色混原本的背景颜色会看上去很奇怪,这时候用内阴影或外阴影比较合适
- 展示的时候如果大小不一致会很乱,可以用
画龙点睛
- 你不必总是增加新的元素以增加设计感,修改 default 的配置就能够很好看,比如
- 将列表的子弹点换成 icon
- 给超链接加颜色和 weight,或者有眼色的粗下划线
- 改动 checkbox 和 radio button 之类元素的缺省设置
- 给一侧的边界加有色 border
- 给背景加颜色、或者低对比度的纹理和插图
- 给 empty states 加单独的设计
- 减少 border 的使用,想要区分颜色的边界,可以用 box-shadow、颜色或者间隔 (spacing)
- 不拘一格,列表不一定是单列的罗列,可以是多列的卡片;表格不一定是单排的,可以是复杂和多排多彩的;单选不一定是 radio button,可以是卡片
生生不息
生活中处处是设计,用一双设计师的眼睛看世界,反复记录与分析