于数字设计范畴当中，网页设计师们常常于macOS之上用心细致地雕琢出能叫人赞叹不已的作品，然而当这些设计被用户予以打开的时候，却常常会演化成一场视觉方面的灾难。本文深入探析了致使这一现象出现的三大关键疑难问题。在这些问题的背后，是操作系统历经长时间所累积起来的设计方面的历史包袱。

身为一名用户体验设计师，我们执着于像素层面极致的完美，钟情于和谐的版式，热衷于能引发情感的色彩。

我们耗费无法计数的小时，于Figma或者之中用心刻画每一处细节，递送出我们以之为骄傲的作品。

可是，等到这些设计最终上线了，有一位用Edge浏览器来打开其的用户出现时，我们时常会涌起一阵无力状存在的挫败感，那就是所有的一切看起来都有某种不太对劲异常感了。

这种呈现出“水土不服”状况的现象，它的根源相较于想象而言，要更为深远得多，深深扎根在了平台自身所具有的设计“历史包袱”里面。

的操作系统设计史，堪称一部“粗糙与妥协”的编年史：

早在1984年发布之际，乔布斯便公开严厉斥责微软，声称其“剽窃”了苹果的字体以及图形界面，他当时直言不讳地讲道：“他们偷了我们的东西，然而却连基本的品味都缺失无遗”；。

在2006年的WWDC上，苹果竟然花费整8分钟，一帧一帧地对比，Vista的Aero界面是怎样遵循、重现macOS的透明效果以及动画逻辑的 。

迄今为止，11有着“现代化”的外在表象，然而其内里却充斥厚重历史包袱，其中文件资源管理器的右键菜单依旧沿袭Win95的逻辑，并且系统对话框呈现出Metro与经典Win32控件相互混杂缝合的那种感觉。

更为讽刺的是，微软近些年来高调予以推出，其宣传视频当中光影呈现流动状态，深度层次令业界感到惊艳，然而实际落地的诸如Edge浏览器或者应用，却到处充斥着未对齐的间距，有着断裂的动效以及过时的图标。

左图微软宣传的界面，右图实际的界面

恰恰是这般经由长期积攒而成的设计债务，致使了一个更为切实的问题生成，当我们于macOS上所达成的精美网页设计向平台进行转移之际，常常会涌现出各种各样的适配问题，这对用户体验产生了严重的影响。

问题一：又丑又占地方的滚动条

于macOS之上，滚动条有着这般模样：它默认处于隐藏状态，不会占据任何空间，只有当用户进行滚动操作时，才会以那种纤细的、半透明的灰色线条去短暂地显示一下，接下来又毫无声息地隐匿不见，把全部的像素空间完整地交还给内容部分。

那滚动条呢，是个矩形条，又宽且呈灰色，模样好似丑陋补丁，无论你滚动与否，它都会持续显示。它这般霸道地占着网页宽度，直接对网页展示效率产生影响。特别是在我们做B端产品之际，界面信息密度原本偏大，少了那块宽度，说不定就少展示了一整列数据呢。

更加糟糕的是，在你所设计的页面之中，存在着许多能够进行独立滚动操作的小模块sketch uk，像是那种内嵌的表格，还有卡片列表，如此一来，情况就会愈发复杂离谱——只要再多嵌套上几层各类模块，你的网页之上便会布满不同大小的灰色滚动条，简直就如同处于“滚动条地狱”一般。

这并非仅仅关乎“丑”，这17像素的宽度着实是会造成布局被破坏的、具有致命性的因素，。

这种差异在实际项目中会造成多重问题：

1. 布局出现错位情况：在设计师于Mac上创建具有一定宽度的内容区域之际，用户有可能会察觉到内容遭受滚动条的挤压，进而致使出现换行以及错位的现象 。

2. 视觉污染：有着精心设计的极简界面，却被粗糙的滚动条，破坏了整体美感。

3. 响应式设计存在如此困扰，那就是，要额外去考虑滚动条宽度为响应式断点所带来的影响 。

好在这个问题还算好解决。

当下，浏览器均支持借助CSS来自定义滚动条样式，甚至于能够自行编写组件，进而营造出类似macOS那般的效果，即不滚动时便予以隐藏，唯有滚动之际才会显现。虽说如此做需要编写更多代码，然而起码能够把问题解决掉。

问题二：要不就不粗，要不就“糊你一脸”的字重

通常有着特定习惯的设计师会在Mac之上进行设计稿的创作行动，当使用“苹方”这种字体之际，他们能够以灵活的方式在细体、常规体、中粗体、粗体这般的各种字重方面展开运用，以此轻松地塑造出那种层次十分分明、视觉感受相当舒适的设计效果。

然而，当这些设计在系统上展示时，问题立刻显现。

平台最为常见那通常被提及的 “微软雅黑” 这种字体呀，存在字重选择极为有限的状况呢，基本上就只有 “常规” 以及 “粗体” 这两种而已哟。你在设计稿里精心去调整的 “中粗体” 文字呢，到了实际呈现的时候呀，要么与常规体几乎没有什么差别，完全没有突出的那种感觉；要么就会直接变成最粗的那个等级，黑乎乎的一片，仿佛是在对着用户进行 “大吼大叫” 呢。

macOS苹方和微软雅黑字重对比，来自@千古壹号

这背后的根本原因是两大操作系统底层字体渲染引擎的哲学差异：

• macOS（核心文本）：其首要目标在于忠实于字体设计师的初始形态，它借助亚像素抗锯齿技术，哪怕会牺牲些许边缘清晰度，也要尽可能去保留字形的曲线、粗细以及美感，它所追求的乃是“美”与“还原”。

让字体在屏幕像素点那儿尽可能清晰地显示，这是它的核心理念，它会强制把字形跟像素网格对齐，特别是在中低分辨率的屏幕之上，优先确保文字的锐利度以及易读性，它所追求的是“清晰”还有“锐利” 。

对此确实有解决方案，最直接的就是采用（网络字体）。

这种办法使得用户浏览器在临时状态下下载特定指定的字体那个文件用于对网页进行渲染，其好处在于不管处于何种平台，均可达成高达百分之100的对设计稿字体效果的原样还原，然而其缺点也是极为显著的，其一，额外添加的字体那个文件会致使网页加载时长有所增加，其二，诸多具备高质量的字体是需要支付费用的，商业用途的授权价格是颇为高额的，所以说，是否采用，是需要依据项目的重要程度以及预算状况来做出决定的。

问题三：一放大，新电脑不如旧电脑的“倍率”魔法

这里得先简单说说苹果的“视网膜（）”技术。

苹果公司所生产的电脑，其屏幕分辨率能够达到4K，要是采用传统的UI渲染方式呢，在这种情况下，默认12px大小的字体，于苹果电脑之上呈现出来就会特别小，鉴于此呀，苹果公司采取了新举措，它把所有UI元素放大了4倍，将4K显示器当作1080P来进行渲染，如此一来，原本12px的字体看上去就如同48px那般大，原本的1个像素变成了4个像素，这样做就能够使得边缘变得更为细腻、更为平滑，进而看上去也就更加清晰了 。

也有着想要去学习的想法，然而它的状况是愈发错综复杂的多了，这是由于电脑乃是各个不同厂商依靠自身力量制造而成，屏幕分辨率呈现出各种各样、纷繁复杂的形态。当下正活跃于市面上的最为主要流行的办公笔记本产品，其分辨率为1920乘以1080 。从表面听起来似乎还算可以，可是系统却会在默认状态之下给予使用者一个比例为150%的所谓“推荐缩放缩放”。

经如此这般缩放之后，你屏幕实际可显示的内容，便等同于1280*720的分辨率啦。

这是什么概念？

我们身为设计师，为实现兼容绝大多数用户的目的，通常会采用1440*900的尺寸去设计网页。然而，你这最新的笔记本，在默认设置的状况下，就连我们所设计的标准宽度都无法完整显示，所能看到的内容竟然还比不上20年前的“大头”显示器，你说这能不气人吗？

150%的缩放比例，相较于100%，少显示了大量内容，在原本不该出现滚动条的地方，此刻都出现了滚动条。

得以解决的办法是存在的，然而均颇为别扭。对于前端而言，能够运用一些CSS亦或是JS的相应方案去实施页面缩放，可是这般的方式常常会出现问题，举例来说，弹窗的位置会出现偏移的状况，又或是会与你所引入的某些第三方插件产生冲突 。

网上能搜出非常多有关默认缩放的问题

起初，有一个内部项目，参与的用户数量并不多，之前我负责该项目，无奈之下，对于此情况，我逐个跑到同事们的工位那里，亲手将他们浏览器的缩放比例调整到百分之八十 。

倘若要是那种公开上线的项目，我仅仅能够在网页之上添加一个判断，要是检测发觉用户的屏幕可用宽度不足够1440，那就弹出一个小提示，建议他“按住Ctrl并且滚动鼠标滚轮”以便达到缩小页面之目的。你瞧瞧，这是多么的不优雅呀。

比如说，网易的网站，当检测到用户进行了修改缩放操作之后，就会采用红色横幅的方式，去建议用户对缩放作出修改，并且还会十分贴心地，告知用户怎样才能够恢复到最佳观看状态。

案例详情：

https://www.uisdc.com//.html

其他问题和最后的忠告

除去上面所说的这三大“天坑”，网页于平台的适配情况，另外有可能遭遇一些零零散散的问题，比如说呀，不同的浏览器针对于颜色管理有差异，进而致使出现色差，又或者是存在一些只有处在特定浏览器上面才将会呈现的怪怪的CSS渲染Bug 。

究其根本，这些问题的源头所在，乃是微软于设计方面所秉持的“不拘小节”传统。你瞧，在11版本当中，存在这样的情况，有的区域右键菜单呈现为全新的圆角毛玻璃样式，而有的区域却又转变为旧有的直角菜单样式，这般设计层面的割裂之感以及不统一状况，在系统的各个角落均有体现。鉴于其自身处于此种状态，理所当然地无法为我们这些开发者与设计师营造出一个稳定且精致的底层环境。

因此，最后的这一忠告便是：各位身为设计师的朋友们，千万、千万不要觉得你的网页在Mac上面看着是完美无缺的，进而就觉得一切都没问题了。仍然是要正视现实状况的。那些为用户所占据了大半的市场，你是不能够因为它呈现出来的样子是丑的，就不去管它的。

不得不去寻觅一台真切的电脑，将你的网页予以打开瞧一瞧，进行滚动一番操作，再开展缩放一回举动。坚信我，你必定会发觉某些意料之外让人惊喜万分的状况出现sketch uk，那肯定是奇特之举，是未曾料想到的“惊喜”。

在平台开展适配工作，这成为了无法跨过的一项必经过程难点阶段内容，尽早去对其面对，总归比分进合击上线之后遭受用户进行吐槽这种情况要更加令事事情情处于好的状态之中。

如有侵权请联系删除！