[设计教程] 订机票网站

这篇文章讲什么?

讲这个视频: https://www.youtube.com/watch?v=7Z9rrryIOC4
Steve Schoger | Refactoring UI | CSS Day 2019
44分钟

基本就是我写点文字总结下视频内容。

注:写完发现图片太多了,初次加载可能有点慢。
我这个博客只是挂在 Digital Ocean 上的一个 5 美元的 Droplet。没做什么优化。
图片实在加载不出来就去看原视频吧。

这篇文章对谁有用?

  • 想学设计的人

顶部:之前

顶部:之后

表格:之前

表格:之后

卡片:之前

卡片:之后

底部:之前

底部:之后

具体步骤

第1步:文字难以看清

(不要只看两行大标题,看底下的 Depart / Return)

解决办法:加个黑色背景

或者加个白色背景也行

最后定下来是蓝色

第二步:顶部导航条

不一定非得是个条条

可以改成这样:

第三步:改文字颜色

不要在有颜色的背景上用灰色文字

根据背景颜色来选一个文字颜色

改颜色之前:

改颜色之后:

第四步:改顶部的输入框

改之前:

先框起来

多给一点空间

输入框两行改成一行

输入框里加图标

图标太抢眼了,颜色弄浅一点

改掉浏览器默认的"单选按钮(radio button)"和"勾选框(input checkbox)"

字调小,按钮挪到右边去

按钮改个颜色,加个图标

为了下面好区分,给 Add a hotal 这一行加个背景颜色

背景重叠

这样看不清楚了,因为背景颜色都是白色。那么加个阴影

背景颜色也可以再改改,改之前:

改之后

第五步:来改表格

改之前:

希望表格能突出,那么加个背景颜色

表格各个地方都对齐一下

为了文字能对齐,可以加这个 CSS 属性

边线太多会让表格看起来"很忙",我们去掉边线用斑马交替背景颜色

改之前

改之后

表头也可以改一下。
改之前:

改之后:

我们可以把次要信息区分出来。
改之前:

改之后:(最左边还加了图标)

按钮颜色从蓝色改成灰色

表格右上方的 Explore all deals 也改一下。
改之前:

改之后:

第六步:来改卡片

改之前:

先把高度改一致

Price 和 Website 其实不用写出来,看了就知道是什么

再把边线去掉,突出最重要的价格

再把一些重要信息抽出来

第七步:改底部

改之前:

先加个背景颜色

改下蓝色背景的部分,改了之后:

底部链接加个标签:

下面加一根线:

全部做完了,再来做一点最后的改进

  1. 灰色不一定得是纯灰色

冷一些的 Cool Grays

暖一些的 Warm Grays

改之前:

改之后:(注意背景颜色变了)

再来改个字体

改之前:

改之后:

图片可能看不大出来,可以看视频:
https://youtu.be/7Z9rrryIOC4?t=2319
38:28

全文完

感谢阅读