别让滚动条影响了你的设计「设计冷知识」！

原文：https://mp.weixin.qq.com/s/EZsmwgJ0yvCMCjH1szG3Gg

今天分享一个设计中的冷知识，主角「滚动条」，也可以叫做滑块。

咱们先来看个案例：左边是设计稿，右边是开发实现的，大家可以仔细看下差异化。

假设一排的文字最多是11个字，设计这样看貌似没毛病，那为什么开发出来最后一个文字被裁了？

当然，也有可能会出现以下这2种情况，自动换行和省略。

显然都不是我们想要的效果，这个时候，估计你心里对「前端」开始万马奔腾了！

咱们先按下暂停，还真别急着心里奔腾，有可能误会了不是，到时候多尴尬。

正确的处理方式，应该是先去找「前端」了解清楚问题的病因，他是如何实现的，这不一问就发现了问题所在。

同一个组件，设计与前端的逻辑就完全不一样。

设计：左右间距算的是16px，其中右边的16px包括了滚动条。

前端：左右间距算的也是16px，但右边的16px是与滚动条的间距。

这就导致了实现的效果与设计图对不上，然后产生了以上的问题。

那前端为啥不以设计逻辑为准？还真不行，滚动条也是一个单独的元素啊，元素与元素之间的间距在这个案例中肯定是统一的。

你看，很多设计小细节我们往往在不经意之间忽略了它！

滚动条的大小是可以随意控制的，也可以去掉滚动条、或者说隐藏滚动条。

这些都得看实际情况而定了。

设计的细节就是点线面，也是基础，是不是又get到了一个小细节？