这 3 类 UI 方案，再好看也别轻易做

大部分设计工具能做的事，前端都能做到。反倒是很多前端能做到的事，设计工具做不到。

但还是有些设计方案，在前端看来很麻烦。

不是一定不能做，而是受限于架构、性能和兼容性的问题，不推荐这么做。

今天我就从这三个方面来分享一些案例。

限制一：架构

参差不齐的边距

一个页面上，最好内边距从上到下都是统一的。

习惯用自动布局，应该知道这背后的原因。如果内边距统一，你可以直接在容器上设置，例如：页面的两侧边距统一24pt。

但如果内边距不统一，你就只能在每个模块上分别设置内边距，工作量一下子翻了好几倍。

如果模块内部的内边距都不统一呢？那就更麻烦了，可能每行都要单独设置内边距……

但前端比Figma的自动布局还是要强一点的，因为即便外层容器设置的统一的内边距，内部元素依旧有办法打破它。例如：有些模块可以凸出来一点。

所以，边距可以不绝对统一，但最好有一个默认标准值。

没有规律的对齐

用自动布局的设计师就知道，所有元素必须在容器里对齐。左对齐、右对齐、居中……通通都可以，但就是要对齐。

因为如果不对齐，元素布局就没有规律可循。一旦页面尺寸发生变化，内部的元素就无法适配，只能定死在原位——这对前端来说是绝对不行的，哪怕手机端都不行（不同的手机屏幕尺寸有差异），更别提web端了（浏览器窗口变化更大）。

如果设计师不同自动布局，排布元素的时候没考虑统一的对齐规律，让元素自由散步在容器里……那么前端看起来就很头疼，只得自己想办法找个规律。

但是前端自己搞的对齐，肯定不会考虑美观性。如果后面又被设计师挑毛病，就真的挺烦的。

看看，单一个页面架构问题，就足以引发设计师和前端的矛盾了。哪怕是习惯用自动布局的设计师，都有对前端架构理解缺失的部分，更不要说大部分设计师不常用自动布局了。

限制二：性能

特殊字体

设计工具要是用特殊字体是比较简单的：下载一个字体包，双击安装，然后设计工具就能调用了。

前端也能调用准备好的字体包，但对web端而言，这些字体包是储存在服务器上的，用户进入页面后再下载调用的。

本来打开一个网页，就已经要等几秒钟了。再加上一个字体包，等待时间就更久了……所以通常不推荐web端用本地没有的字体包。

但是这个问题对原生开发的app来说问题不大，因为下载app时，可以连字体包一起下载到本地了。但是否值得为了这么个字体多占用安装包的空间，就需要考虑考虑了。

动态背景

有个背景能动的首页，是挺酷炫的。这种动态背景通常有几类实现方式：动效、动图和视频。

动效就是用代码写出来的动态，基本只适合非常简单的效果，否则就相当于拿用户的浏览器来跑游戏了——特别容易卡。

动图就是用GIF图，或者PNG图片序列来循环播放。这个做得复杂点也不太吃性能，但是它吃流量啊。以很多用户的网速，加载一张静态背景大图都要等个几秒，动态背景图相当于几十张背景大图了，加载速度可能要以分钟来计算了。

视频也是类似的问题，不过视频压缩得比动图好些，问题小一点。如果要做复杂的动图背景，首选视频。但也要让视频加载之前，页面也能看，避免影响网速慢的用户。

但如果是原生开发的app，可以预加载的话，影响就不大。很多电商app喜欢搞些酷炫的开场广告，就是要靠预加载来减少等待时间。

限制三：兼容

图层混合效果

像是加深、正片叠底之类的，在设计工具上很常用，但是对前端来说就有点麻烦。

不是说做不了，而是web端的浏览器类型太多了，各家的兼容性都不一样。即便能兼容，渲染出的效果也未必一模一样。

而且这里面的大坑就是IE和各种旧版浏览器——虽然个人电脑大多升级比较及时，但有些单位或网吧，还是有可能保留历史悠久的操作系统和浏览器的。

所以，web端尽量避免吧。

但如果是原生开发app，就要好很多。主要是没那么多版本的浏览器，只需要把iOS和Android搞定就好。

自定义滚动条

滚动条在app上默认隐藏，倒不用自定义。主要在PC端上，滚动条的存在感比较强，有自定义的需求。

尤其是Windows端，滚动条默认宽度达到17px，长得也不太好看。而macOS的滚动条只有8px左右，显得轻量多了。

设计师做方案，几乎不太把滚动条加进去的。所以看到前端页面突然出现一个滚动条，就会有点不适应。

隐藏滚动条对前端来说很好设置，但从用户习惯来看，一般是不建议隐藏滚动条的。除非是下图这种左右箭头的操控的滚动组件。

自定义滚动条原则上是可以实现的，但是不同浏览器的兼容性差别很大。像Chrome、Safari、Edge支持的代码和Firefox就不一样，IE则是根本不支持。

而且滚动条涉及到的参数也挺多的，像是整体尺寸、滑块、轨道、轨道角落、上下按钮。不同浏览器针对这些参数的兼容性，也有差别。

总之就是很麻烦，单为了颜值而定制一套，不一定划算。

总结一下

以上说的这些，并不是不能做，而是很麻烦。对于大部分小公司或大公司的边缘项目来说，不太值得费力去做。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。