[设计教程] 订机票网站
非常好的教程,一步步改进。Steve Schoger | Refactoring UI | CSS Day 2019
![[设计教程] 订机票网站](/content/images/size/w2000/2020/02/pablo.png)
这篇文章讲什么?
讲这个视频: https://www.youtube.com/watch?v=7Z9rrryIOC4
Steve Schoger | Refactoring UI | CSS Day 2019
44分钟
基本就是我写点文字总结下视频内容。
注:写完发现图片太多了,初次加载可能有点慢。
我这个博客只是挂在 Digital Ocean 上的一个 5 美元的 Droplet。没做什么优化。
图片实在加载不出来就去看原视频吧。
这篇文章对谁有用?
- 想学设计的人
顶部:之前
![](https://1c7.me/content/images/2020/02/image-2.png)
顶部:之后
![](https://1c7.me/content/images/2020/02/image.png)
表格:之前
![](https://1c7.me/content/images/2020/02/image-4.png)
表格:之后
![](https://1c7.me/content/images/2020/02/image-46.png)
卡片:之前
![](https://1c7.me/content/images/2020/02/image-5.png)
卡片:之后
![](https://1c7.me/content/images/2020/02/image-54.png)
底部:之前
![](https://1c7.me/content/images/2020/02/image-6.png)
底部:之后
![](https://1c7.me/content/images/2020/02/image-60.png)
具体步骤
第1步:文字难以看清
(不要只看两行大标题,看底下的 Depart / Return)
![](https://1c7.me/content/images/2020/02/image-7.png)
解决办法:加个黑色背景
![](https://1c7.me/content/images/2020/02/image-8.png)
或者加个白色背景也行
![](https://1c7.me/content/images/2020/02/image-9.png)
最后定下来是蓝色
![](https://1c7.me/content/images/2020/02/image-10.png)
第二步:顶部导航条
不一定非得是个条条
![](https://1c7.me/content/images/2020/02/image-11.png)
可以改成这样:
![](https://1c7.me/content/images/2020/02/image-12.png)
第三步:改文字颜色
不要在有颜色的背景上用灰色文字
![](https://1c7.me/content/images/2020/02/image-13.png)
根据背景颜色来选一个文字颜色
![](https://1c7.me/content/images/2020/02/image-14.png)
![](https://1c7.me/content/images/2020/02/image-15.png)
改颜色之前:
![](https://1c7.me/content/images/2020/02/image-17.png)
改颜色之后:
![](https://1c7.me/content/images/2020/02/image-18.png)
第四步:改顶部的输入框
改之前:
![](https://1c7.me/content/images/2020/02/image-19.png)
先框起来
![](https://1c7.me/content/images/2020/02/image-20.png)
多给一点空间
![](https://1c7.me/content/images/2020/02/image-21.png)
输入框两行改成一行
![](https://1c7.me/content/images/2020/02/image-22.png)
输入框里加图标
![](https://1c7.me/content/images/2020/02/image-23.png)
图标太抢眼了,颜色弄浅一点
![](https://1c7.me/content/images/2020/02/image-24.png)
改掉浏览器默认的"单选按钮(radio button)"和"勾选框(input checkbox)"
![](https://1c7.me/content/images/2020/02/image-25.png)
字调小,按钮挪到右边去
![](https://1c7.me/content/images/2020/02/image-26.png)
按钮改个颜色,加个图标
![](https://1c7.me/content/images/2020/02/image-27.png)
为了下面好区分,给 Add a hotal 这一行加个背景颜色
![](https://1c7.me/content/images/2020/02/image-28.png)
背景重叠
![](https://1c7.me/content/images/2020/02/image-29.png)
这样看不清楚了,因为背景颜色都是白色。那么加个阴影
![](https://1c7.me/content/images/2020/02/image-30.png)
背景颜色也可以再改改,改之前:
![](https://1c7.me/content/images/2020/02/image-31.png)
改之后
![](https://1c7.me/content/images/2020/02/image-32.png)
第五步:来改表格
改之前:
![](https://1c7.me/content/images/2020/02/image-33.png)
希望表格能突出,那么加个背景颜色
![](https://1c7.me/content/images/2020/02/image-34.png)
表格各个地方都对齐一下
![](https://1c7.me/content/images/2020/02/image-35.png)
为了文字能对齐,可以加这个 CSS 属性
![](https://1c7.me/content/images/2020/02/image-36.png)
边线太多会让表格看起来"很忙",我们去掉边线用斑马交替背景颜色
改之前
![](https://1c7.me/content/images/2020/02/image-38.png)
改之后
![](https://1c7.me/content/images/2020/02/image-37.png)
表头也可以改一下。
改之前:
![](https://1c7.me/content/images/2020/02/image-39.png)
改之后:
![](https://1c7.me/content/images/2020/02/image-40.png)
我们可以把次要信息区分出来。
改之前:
![](https://1c7.me/content/images/2020/02/image-41.png)
改之后:(最左边还加了图标)
![](https://1c7.me/content/images/2020/02/image-42.png)
按钮颜色从蓝色改成灰色
![](https://1c7.me/content/images/2020/02/image-43.png)
表格右上方的 Explore all deals 也改一下。
改之前:
![](https://1c7.me/content/images/2020/02/image-44.png)
改之后:
![](https://1c7.me/content/images/2020/02/image-45.png)
第六步:来改卡片
改之前:
![](https://1c7.me/content/images/2020/02/image-47.png)
先把高度改一致
![](https://1c7.me/content/images/2020/02/image-48.png)
Price 和 Website 其实不用写出来,看了就知道是什么
![](https://1c7.me/content/images/2020/02/image-49.png)
再把边线去掉,突出最重要的价格
![](https://1c7.me/content/images/2020/02/image-52.png)
再把一些重要信息抽出来
![](https://1c7.me/content/images/2020/02/image-51.png)
![](https://1c7.me/content/images/2020/02/image-53.png)
第七步:改底部
改之前:
![](https://1c7.me/content/images/2020/02/image-55.png)
先加个背景颜色
![](https://1c7.me/content/images/2020/02/image-56.png)
改下蓝色背景的部分,改了之后:
![](https://1c7.me/content/images/2020/02/image-57.png)
底部链接加个标签:
![](https://1c7.me/content/images/2020/02/image-58.png)
下面加一根线:
![](https://1c7.me/content/images/2020/02/image-59.png)
全部做完了,再来做一点最后的改进
- 灰色不一定得是纯灰色
![](https://1c7.me/content/images/2020/02/image-61.png)
冷一些的 Cool Grays
![](https://1c7.me/content/images/2020/02/image-62.png)
暖一些的 Warm Grays
![](https://1c7.me/content/images/2020/02/image-63.png)
改之前:
![](https://1c7.me/content/images/2020/02/image-64.png)
改之后:(注意背景颜色变了)
![](https://1c7.me/content/images/2020/02/image-65.png)
再来改个字体
改之前:
![](https://1c7.me/content/images/2020/02/image-66.png)
改之后:
![](https://1c7.me/content/images/2020/02/image-67.png)
图片可能看不大出来,可以看视频:
https://youtu.be/7Z9rrryIOC4?t=2319
38:28
全文完
感谢阅读