[设计教程] 优秀界面的科学 | The Science of Great UI
24分钟的视频
![[设计教程] 优秀界面的科学 | The Science of Great UI](/content/images/size/w2000/2020/02/--2020-02-0212.20.30.jpg)
这篇文章写什么
总结这个 Youtube 视频: The Science of Great UI (24分钟)
阅读大概耗时:5分钟
这篇文章对谁有用?
想学设计的人
内容预览(00:58)
![](https://1c7.me/content/images/2020/02/image-69.png)
Emphasis(重点)
下面这个表格,文字和边框宽度是一样的,没有重点
![](https://1c7.me/content/images/2020/02/image-70.png)
![](https://1c7.me/content/images/2020/02/image-71.png)
我们试下重点放在不同地方:文字/边框
![](https://1c7.me/content/images/2020/02/image-72.png)
显然最下面这个是最好看清楚的
![](https://1c7.me/content/images/2020/02/image-73.png)
结论:
![](https://1c7.me/content/images/2020/02/image-74.png)
第二部分: 对比与可读性
![](https://1c7.me/content/images/2020/02/image-75.png)
以下两行文字里,哪个容易看清楚?
![](https://1c7.me/content/images/2020/02/image-76.png)
如果我们把 Saturation 调低,效果如下:
![](https://1c7.me/content/images/2020/02/image-77.png)
结论:文字和背景需要有高对比度
第三部分:临近与布局
![](https://1c7.me/content/images/2020/02/image-78.png)
30楼的电梯按钮是左边的还是右边的?
![](https://1c7.me/content/images/2020/02/image-79.png)
你可能觉得这图片放太大了,那么我们后退一步来看:
![](https://1c7.me/content/images/2020/02/image-80.png)
再来看看下面这个路牌
哪个方向去 Ft Worth?
![](https://1c7.me/content/images/2020/02/image-81.png)
四种解决方法:
![](https://1c7.me/content/images/2020/02/image-82.png)
原版和新版对比如下:
![](https://1c7.me/content/images/2020/02/image-85.png)
结论:
![](https://1c7.me/content/images/2020/02/image-84.png)
第四部分:
![](https://1c7.me/content/images/2020/02/image-86.png)
边框应该距离文字多远?
这样?
![](https://1c7.me/content/images/2020/02/image-87.png)
还是这样?
![](https://1c7.me/content/images/2020/02/image-88.png)
反正我们知道答案肯定不是这两种。是之间。
![](https://1c7.me/content/images/2020/02/image-89.png)
一种比较好的方法是字间距的1.5倍:
![](https://1c7.me/content/images/2020/02/image-90.png)
完整版如下图:
![](https://1c7.me/content/images/2020/02/image-91.png)
接下来看表格的边框宽度。
以下你喜欢哪个?
![](https://1c7.me/content/images/2020/02/image-92.png)
现在再问你:从这两个里面选呢?
![](https://1c7.me/content/images/2020/02/image-93.png)
结论:边框应该细,对比度应该低
![](https://1c7.me/content/images/2020/02/image-94.png)
第五部分
![](https://1c7.me/content/images/2020/02/image-95.png)
以下哪个图标看起来大一些?
![](https://1c7.me/content/images/2020/02/image-96.png)
结论:小图标比如 16x16 的就用圆角的图标(右边的)
![](https://1c7.me/content/images/2020/02/image-97.png)
来看下按钮,空的还是填充的好?
![](https://1c7.me/content/images/2020/02/image-98.png)
来分析一下
![](https://1c7.me/content/images/2020/02/image-99.png)
结论:填充的按钮更好
![](https://1c7.me/content/images/2020/02/image-100.png)
![](https://1c7.me/content/images/2020/02/image-101.png)
最终结论
![](https://1c7.me/content/images/2020/02/image-102.png)
懒得翻译,自己看吧
全文完
感谢阅读