兰亭妙微ui设计公司分享：作为 UI/UX 设计师，我们总追求像素级完美的页面、层次和谐的版式，希望用设计传递情绪。在 Figma、Sketch 里反复打磨每一处细节，交出满心满意的设计稿。可一旦网页上线，Windows 用户用 Chrome、Edge 打开后，效果往往大打折扣，让人无比挫败。

这类跨平台 “水土不服”，并不单纯是浏览器的小 bug，根源埋藏在 Windows 长久积累的系统设计历史包袱之中。

Windows 的界面发展史，充斥着大量妥协与遗留问题。早在 1984 年 Macintosh 发布，乔布斯就曾公开指责微软借鉴苹果字体与图形界面，评价微软 “缺少审美”；2006 年 WWDC 大会上，苹果甚至用 8 分钟逐帧对比，指出 Windows Vista 的 Aero 界面模仿 macOS 的透明特效与动画逻辑。

即便到 Windows11，套上现代化 UI 外壳，历史遗留依旧随处可见：文件管理器右键菜单还保留 Win95 的逻辑，系统弹窗混杂 Metro 与老式 Win32 控件，新旧界面强行拼接。 即便微软推出 Fluent Design 体系，宣传视频中光影、层级效果惊艳，但落地到 Edge、Office 等产品，依旧存在间距错位、动效断裂、图标老旧等现实问题。

这份长期欠下的设计债务，直接导致：在 macOS 上表现完美的网页，移植到 Windows 就出现各类适配故障，严重损伤实际用户体验。

拓展阅读：《35 年的 Windows 系统界面设计是如何演变的？》

问题一：常驻且挤占空间的原生滚动条

macOS 的滚动条克制优雅：平时自动隐藏，滚动操作时才浮现纤细半透明轨道，不侵占内容区域。

反观 Windows 原生滚动条，是一块宽厚的灰色控件，无论是否操作都持续显示，硬性占用页面宽度。尤其 B 端产品信息密度高，十几像素的滚动条宽度，可能直接挤掉一整列表格数据。 页面嵌套多个可滚动模块（表格、卡片容器）时，页面会布满大大小小滚动条，陷入 “滚动条地狱”。

它带来三类实际伤害：

1. 布局错位：设计师在 Mac 设定 1200px 内容容器，Windows 端被滚动条挤压，文字异常换行、排版崩坏；
2. 视觉破坏：极简干净的页面，被厚重滚动条打破整体氛围感；
3. 响应式干扰：写响应式断点时，还必须额外计入滚动条的宽度变量。

好在该问题可以解决，借助 CSS 自定义滚动条样式，可以模拟 macOS 的表现效果：闲置隐藏，滚动时才显示，只是需要额外增加开发成本。

问题二：字重两极分化，要么太淡要么过重

很多设计师基于 macOS 苹方字体做稿，可以自由使用细、常规、中粗、粗等多级字重，搭建清晰的文字层级。

但迁移到 Windows，主流中文字体微软雅黑，可用字重非常有限，基本只有常规、粗体两档。设计稿设定的font‑weight:500/600中粗效果，到 Windows 上要么和普通文字看不出区别，起不到强调作用；要么直接跳转到最高粗度，文字漆黑厚重，视觉压迫感极强。

底层来自两套系统截然不同的字体渲染思路：

1. macOS（Core Text）：忠于字体设计师原始字形。依靠亚像素抗锯齿，牺牲部分锐利度，优先还原曲线、字重与美感，追求视觉表现力；
2. Windows（DirectWrite/ClearType）：优先屏幕可读性。强制字形对齐像素网格，在低分屏保障文字锐利清晰，看重易读性。

最优解决方案是引入 WebFont 网络字体，浏览器下载指定字体文件，全平台统一还原设计稿的文字效果。但短板同样明显：字体文件增大页面加载体积；商用优质字体大多需要付费授权。需要结合项目预算、性能要求权衡是否采用该方案。

问题三：屏幕缩放带来的显示 “陷阱”，新笔记本反而显示更少内容

先简单理解苹果 Retina 视网膜逻辑：高分辨率屏幕下，系统做 2 倍渲染。1 个逻辑像素对应 4 个物理像素，文字图像放大同时保持细腻，保证内容大小合适、画面顺滑。

Windows 设备硬件生态繁杂，各家笔记本屏幕分辨率五花八门。主流 1080P 办公本，系统默认会开启 150% 推荐缩放。 经过缩放之后，屏幕实际等效可视分辨率会降低。设计师常规按照 1440px 可视宽度做网页，但是开启 150% 缩放的新笔记本，可视区域甚至达不到这个标准，能展示的内容比早年老式显示器还要少，凭空产生多余横向滚动条。

这块适配至今没有完美方案。前端通过 CSS、JS 处理 DPI 缩放，常常引发弹窗偏移、和第三方组件冲突等副作用。 部分内部项目，开发者只能线下提醒同事手动调小浏览器缩放；面向公开互联网的产品，则会检测可视窗口，弹出提示引导用户使用Ctrl+滚轮调整页面缩放，就像网易 Filmly 的处理方案，体验算不上优雅。

其他坑与设计师忠告

除上面三大核心痛点，还会遇到：跨浏览器色彩差异、Windows 专属 CSS 渲染怪异 bug 等细碎问题。

Windows 系统内部本身就充斥新旧 UI 割裂，部分组件是全新圆角毛玻璃，部分弹窗还保留老式直角控件。底层环境不一致，自然给网页适配带来重重阻碍。

因此给设计师重要提醒：千万不要觉得 Mac 预览效果完美，就代表线上效果合格。Windows 依旧占据市场大半份额，不能忽略这部分用户。

务必拿真实 Windows 设备，打开页面，测试滚动、测试系统缩放。大概率会发现很多意料之外的排版问题。Windows 端适配是网页项目绕不开的工作，提前验证修复，远好过上线之后被大量用户反馈吐槽。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

让健康服务的入口，清楚地出现在需要它的地方。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Docuverse，一组将医生发现、预约咨询与 AI 健康助手结合起来的服务设计。医生、内容和个人待办共同构成首页。
一、项目背景：为多种健康需求找到清楚入口
选择专科、查看医生、安排咨询与记录日常分别对应不同目的。Docuverse 通过分类与卡片整理这些服务，让用户先找到方向，再查看信息并进入下一步。     

图 1  服务首页与医生分类

医生分类、健康更新与预约信息在白色首页中各自成组，绿色卡片突出部分服务入口。内容虽然丰富，空间与分组仍然清楚，浏览方向从服务目录延伸到个人安排。

图 2  医生资料与预约入口

人物照片让医生有了清楚识别，姓名、价格与日程依次补充预约所需信息。资料与主要动作处在同一连续页面里，专业信息的阅读自然接向时间选择与联系。

二、设计策略：用亲和视觉组织多种服务
①信息架构：首页分配医生分类、预约与健康更新，详情页集中呈现医生资料，助手页承接具体任务。②视觉语言：白底、绿色强调与人物摄影共同建立亲近感，统一卡片维持页面秩序。

Docuverse AI Healthcare | 界面细节与设计启发     

图 3  健康助手与具体任务入口

助手页先呈现用药提醒、健身建议等任务卡片，再提供提问入口。白色空间与绿色强调延续首页语言，让 AI 助手与常规服务保持相近的使用语境。

图 4  结果展示与咨询衔接

人体示意、指标条与状态文字将结果排成可扫读的结构，下方联系医生的动作补上后续路径。这张设计示意值得观察的是图形与文字的层级，以及信息如何接向服务。

③场景化交互：医生资料靠近日程与预约动作，助手先给出用药提醒等任务入口，再承接提问；结果示意页补充联系医生的路径。界面围绕需求逐步展开，让服务之间有可理解的衔接。

三、设计启发：服务丰富时，清楚的分工也能带来安心感
分类帮助定位，人物资料补充认识，主按钮给出行动方向。做健康或其他专业服务产品时，值得积累的是这种把复杂服务转成易识别入口的组织方式。图中的健康指标属于界面示意，赏析重点在信息呈现。

如有医疗健康、在线预约类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

本篇聚焦设计规划：从需求到设计草图完整实操链路，讲解信息架构、导航、任务流程、原型输出、设计验证全套落地方法，兼顾理性架构规划与感性情感化设计。

本文从心态、工作方式、职业选择、个人成长角度，列出 UX 设计师应当舍弃的 13 种思维与行为习惯，不只讲专业技能，更多关注设计师职业心态与自我成长。

后台界面经常不是画完就结束。表格字段会调整，按钮的权限条件会变化，讨论过的取舍也可能隔几周又被重新问起。Figma在10月15日介绍了Specs，尝试把文字说明、画布上的设计和协作讨论放在一起。比起把它当成又一个写文档的入口，我们更在意设计决定怎样留在相关页面旁边。这篇借官方配图作为阅读入口，再用假设的设备管理后台聊聊说明与界面一起维护的方法。

设备界面在演示中运行得很顺，进入真实环境以后却可能遇到连接中断、任务暂停、参数尚未保存等变化。这些情况如果在交付时只靠一句口头说明，设计和实现就容易出现不同理解。Qt Group在10月23日的文章中讨论了明确规格与可检查结果的重要性。我们把这个话题延伸到Qt设备界面交付，用一套假设的实验室任务终端分享设计观察。配图全部是AI概念示意，不是Qt官方案例或已实现的产品。

仓储调度页面常常同时放着库存、订单、车辆和异常提醒，信息很多，使用者打开页面却未必知道先处理哪一项。10月6日，dpopstudio用WareApp设计套件介绍了仓储与发运界面的组织方式。这次借它的真实UI配图，分享我们对任务、状态和上下文的观察，并补充一张AI调度界面示意。文中的仓库任务均为说明设计判断而设想的场景，不是对这套模板或已上线系统的实测。

表格页面的难点，通常从放进真实内容以后才开始显现：名称有长有短，状态不止两种，筛选以后还要继续处理。dpopstudio在10月20日分享了Datchs后台的布局与状态设计，配图可以作为观察信息密度的入口。这里不沿用文中的效率数字或固定尺寸结论，而是结合假设的企业客户管理任务，分享几种值得带回设计评审的问题。其中的表格操作示意为另行生成的AI概念图。

同一套医疗后台，资料整理人员在追补附件，审核人员在核对内容，管理员在处理权限。如果首页给所有人同样的菜单，重要任务就容易埋进许多入口里。Anna Nazarevska在11月2日的文章中，把角色差异放回责任和决定的后果来讨论。这个切入点值得分享。下面以一套假设的医院材料审核系统为例，聊聊我们的界面设计观察；配图为AI概念示意，不对应原作者项目，也不涉及诊疗判断。

一、什么是网页设计中的粗野主义？

兰亭妙微ui设计公司分享：粗野主义（Brutalism）起源于建筑领域，是一种崇尚原始粗粝、反传统审美的设计风格，优先强调功能价值，弱化装饰表达，常常运用极具张力的排版、非对称布局与高冲突对比色彩。

“Brutalism” 一词源自法语 béton brut，释义为裸露混凝土 / 清水混凝土，指代不加修饰、直接外露的混凝土材质表面。该概念最早用来描述 20 世纪 40‑50 年代兴起于英国的建筑流派。粗野主义建筑以裸露的混凝土结构、硬朗几何形体、保留材料原生质感为标志性特征，在 50 至 70 年代风靡全球。

粗野主义本身是偏向原始、极简的设计取向，重功能大于形式美感，在布局与 UI 处理上常常近乎极简。它是对视觉表达大胆又反常规的演绎，很难被条条框框完全定义 —— 它的内核本就是打破固有范式。

和很多设计潮流一样，粗野主义是对前代风格的反叛：意在挣脱过去繁复浮华的设计枷锁。

二、粗野主义为何会在网页设计领域兴起？

互联网早期网页优先满足基础功能与内容输出，简陋原生的 HTML 页面、90 年代大胆直白的网页审美，在精神内核上，恰好呼应粗野主义建筑暴露结构、追求实用的特质。

随着行业发展，现代主流网页大多走向布局规整、重视用户体验、考究色彩美学的成熟范式。但审美与需求本就多元，当主流设计占据主流，也为粗野主义的生长留出了空间。

有观点认为：主流网页精致顺滑的视觉体验，容易构建一层美化后的假象，掩盖网站背后潜在的立场与目的。粗野主义网页的流行，某种程度上寄托了大众对互联网透明化、表达直白化的期待。如同粗野主义建筑坦然展露建筑材料与社会思考，这类网站希望自身底层逻辑与真实意图可以被用户一眼看见。

三、粗野主义网页设计核心特征

1. 打破常规的色彩搭配

建筑领域的粗野主义偏爱灰、黑、棕这类冷静沉郁的色调；而网页端的粗野主义与之不同，敢于使用刺眼、相互碰撞的配色，刻意背离通用网页色彩理论与主流审美。

“我们不必强迫眼睛所见的一切都趋于完美。”

2. 反标准化导航与信息层级

常规 UI/UX 设计，会搭建清晰的信息层级、遵循通用导航逻辑，降低用户认知负担，提升浏览效率。粗野主义则反其道而行，采用非常规导航模式，以粗犷直白的方式呈现信息。

3. 回归原始粗粝的设计内核

从排版布局到色彩方案，粗野主义网页刻意保留未经打磨的原生质感。设计灵感溯源至中期粗野主义建筑：不刻意修饰，坦然展现混凝土原生肌理。

它复刻了互联网早期未经过度美化的网页样貌，是对当下主流网页审美取向的逆向表达：舍弃多余装饰，直面事物粗粝真实的本质。

4. 富有辨识度的重复图形与图案

粗野主义网页经常运用重复图形纹样，或是独特的二维、三维造型，塑造强烈辨识度。很多图形灵感直接取自粗野主义建筑，是对其标志性几何语言的继承与转译。

5. 强烈的视觉冲击与压迫感

经典粗野主义建筑体量庞大，裸露的清水混凝土、冷峻几何结构，带来巨兽般的压迫力量。这种感受被移植到网页当中，表现得更加自由奔放。对比主流网页追求温润舒适的体验，粗野主义网页自带叛逆、疏离的独特气质。

四、粗野主义网页参考灵感站点

1. Brutalist Websites（brutalistwebsites.com） 站点如其名，专门收录粗野主义网页案例，页面仅保留简短介绍与案例集合。

   

“粗野主义带着粗粝质感，不在意是否显得轻松舒适；它可以看作年轻一代，对当代网页设计轻薄、乐观、浮华风气的一种反抗。”——Brutalist Websites

2. Awwwards・brutalism 合集（Awwwards/collections/brutalism/） 知名网页奖项与灵感平台 Awwwards 专门整理的粗野主义专题合集，收录作品在设计完成度、交互动画上表现更为出彩。

   

总结

粗野主义网页不等于放弃设计，而是把网站的 “骨架” 直接袒露出来：使用基础原生的排版、按钮与链接，剥离冗余装饰。其初衷，是让用户直观读懂网站结构与目的，减少包装带来的误导，把重心归还到内容与功能本身。

这份 “粗糙” 是一种设计态度，承载着独特气质与反叛精神。它敢于对抗主流审美，接纳 “不完美”，借由原始感传递真实与自我表达。

设计风潮本就是周而复始的循环。粗野主义发展至今，不断结合时代文化催生出新变体，例如新粗野主义、后现代粗野主义、工业粗野主义、赛博粗野主义等。它们承袭粗野主义重视原始力量与功能优先的内核，再融合其他审美诉求，演化出丰富多元的分支风格。后续我们会继续展开聊聊这些衍生流派。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。