[设计教程] 产品首页
总结28分钟视频:Steve Schoger How to Think Like a Visual Designer
![[设计教程] 产品首页](/content/images/size/w2000/2020/02/aa.jpg)
这篇文章讲什么?
总结一个 28 分钟视频: Steve Schoger How to Think Like a Visual Designer
这篇文章对谁有用?
想学设计的人
先看结果对比
顶部:设计前
![](https://1c7.me/content/images/2020/02/image-104.png)
顶部:设计后
![](https://1c7.me/content/images/2020/02/image-108.png)
视频:设计前
![](https://1c7.me/content/images/2020/02/image-105.png)
视频:设计后
![](https://1c7.me/content/images/2020/02/image-109.png)
功能介绍:设计前
![](https://1c7.me/content/images/2020/02/image-106.png)
功能介绍:设计后
![](https://1c7.me/content/images/2020/02/image-110.png)
客户评价:设计前
![](https://1c7.me/content/images/2020/02/image-107.png)
客户评价:设计后
![](https://1c7.me/content/images/2020/02/image-111.png)
详细过程
1. 探索不同布局
![](https://1c7.me/content/images/2020/02/image-112.png)
开发者喜欢居中所有东西
比如这样:
![](https://1c7.me/content/images/2020/02/image-113.png)
![](https://1c7.me/content/images/2020/02/image-114.png)
![](https://1c7.me/content/images/2020/02/image-115.png)
可以尝试左对齐
![](https://1c7.me/content/images/2020/02/image-116.png)
右边加个图:
![](https://1c7.me/content/images/2020/02/image-117.png)
或者反过来:
![](https://1c7.me/content/images/2020/02/image-118.png)
然后找了个配图:
(演讲者介绍了怎么找这样的插画)
![](https://1c7.me/content/images/2020/02/image-119.png)
第二步:选字体
![](https://1c7.me/content/images/2020/02/image-120.png)
![](https://1c7.me/content/images/2020/02/image-121.png)
选了 grphik 字体:
![](https://1c7.me/content/images/2020/02/image-122.png)
第三步:选颜色
![](https://1c7.me/content/images/2020/02/image-123.png)
演讲者推荐了自己的 Tailwind UI
![](https://1c7.me/content/images/2020/02/image-124.png)
调整下空间
![](https://1c7.me/content/images/2020/02/image-125.png)
![](https://1c7.me/content/images/2020/02/image-126.png)
第四步:
浅颜色会感觉距离近一些
深颜色会感觉距离远一些
![](https://1c7.me/content/images/2020/02/image-127.png)
![](https://1c7.me/content/images/2020/02/image-128.png)
第五步:改视频部分
![](https://1c7.me/content/images/2020/02/image-129.png)
改成了这样:
视频里 ~14:30 的部分讲了步骤和理由,我这里直接贴结果
![](https://1c7.me/content/images/2020/02/image-130.png)
05:不要在有颜色的背景上用灰色文字
![](https://1c7.me/content/images/2020/02/image-131.png)
可以取色背景颜色
![](https://1c7.me/content/images/2020/02/image-132.png)
往左上角挪一点
![](https://1c7.me/content/images/2020/02/image-133.png)
区别:灰色
![](https://1c7.me/content/images/2020/02/image-136.png)
区别:修改后
![](https://1c7.me/content/images/2020/02/image-135.png)
我看不出来有什么大变化
![](https://1c7.me/content/images/2020/02/image-134.png)
06: 重叠
![](https://1c7.me/content/images/2020/02/image-137.png)
![](https://1c7.me/content/images/2020/02/image-138.png)
接下来改"功能介绍"
目前看起来是这样的:
![](https://1c7.me/content/images/2020/02/image-139.png)
07:不要增大图标太多。
比如是图标是为了小尺寸设计的。放大了就没细节
![](https://1c7.me/content/images/2020/02/image-140.png)
先缩小图标
![](https://1c7.me/content/images/2020/02/image-141.png)
左对齐图标
![](https://1c7.me/content/images/2020/02/image-142.png)
这里推荐了一些图标
![](https://1c7.me/content/images/2020/02/image-143.png)
图标改了之后长这样:
![](https://1c7.me/content/images/2020/02/image-144.png)
分个类:
![](https://1c7.me/content/images/2020/02/image-145.png)
![](https://1c7.me/content/images/2020/02/image-146.png)
把上半部分换个布局:
![](https://1c7.me/content/images/2020/02/image-147.png)
比如这样:
![](https://1c7.me/content/images/2020/02/image-148.png)
我们可以抽一条推特上来,但是这样不太好看:
![](https://1c7.me/content/images/2020/02/image-149.png)
改改样式:
![](https://1c7.me/content/images/2020/02/image-150.png)
再改:
![](https://1c7.me/content/images/2020/02/image-151.png)
![](https://1c7.me/content/images/2020/02/image-152.png)
改下背景颜色,加个阴影:
![](https://1c7.me/content/images/2020/02/image-154.png)
接下来改"客户评价"
现在长这样:
![](https://1c7.me/content/images/2020/02/image-155.png)
加点空间
![](https://1c7.me/content/images/2020/02/image-156.png)
大小一致
![](https://1c7.me/content/images/2020/02/image-157.png)
改掉边线:
![](https://1c7.me/content/images/2020/02/image-158.png)
加个背景颜色不好看,我们继续改改:
![](https://1c7.me/content/images/2020/02/image-159.png)
13:"暗黑模式"不代表把"白色模式"的颜色进行反转
![](https://1c7.me/content/images/2020/02/image-160.png)
举个例子,看下面这个图
![](https://1c7.me/content/images/2020/02/image-161.png)
前面说过:亮会感觉近一些,暗会感觉远一些。
下图中:下面的最亮,上面的最暗。
![](https://1c7.me/content/images/2020/02/image-162.png)
如果直接颜色反转就错了:
![](https://1c7.me/content/images/2020/02/image-163.png)
所以应该这样做:
![](https://1c7.me/content/images/2020/02/image-164.png)
字改白,边线改黑:
![](https://1c7.me/content/images/2020/02/image-165.png)
头像再加个边框:
![](https://1c7.me/content/images/2020/02/image-166.png)
全文完
希望你学到了一些东西。感谢阅读。