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

本文从心态、工作方式、职业选择、个人成长角度，列出 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设计公司分享：作为 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设计公司分享：粗野主义（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。

兰亭妙微ui设计公司分享：退票、扣款、售后协商这类涉及金钱损益的页面，很容易出现用户误判金额，造成不必要损失的问题。结合真实机票退票事故案例，拆解金额敏感场景的交互设计思路，总结 5 条可复用设计原则，帮用户在执行操作前，清晰看懂金钱变化与潜在后果。

案例背景：一次引发争议的机票退票事件

曾有一则新闻：用户完成机票退订后，发现实际仅到账四百余元，才知晓退票被扣除了上万元票款。用户原本把页面展示的退款金额，错当成退票手续费，完全没有意识到这是自己最终到手的全部钱款。

事后平台为用户做了补偿，同时迭代产品，新增退款金额过低场景的二次确认弹窗。但这件事暴露出金额类界面普遍存在的设计痛点： 很多界面只是机械罗列规则条文，却没能让用户在短暂浏览中快速读懂金钱损益；不能简单把问题归咎于 “用户没仔细读条款”，设计师要思考，如何通过界面表达，降低用户误操作风险。

核心设计方法：5 条金额敏感界面设计准则

1. 匹配用户心智：区分损失心智与收益心智

金额信息存在两种表达方式：展示最终到手（收益心智）、展示将要扣除（损失心智）。 当操作会带来大额损失时，用户的关注点是 “我会亏掉多少钱”，也就是损失心智。如果界面只强调能退回多少，就极易产生认知偏差。

设计做法：

• 退票、扣费类高损失风险场景，优先突出扣除金额，而不是只展示最终退款；
• 在购票阶段就直白写明退票扣款数额，不要只用模糊描述如 “仅部分税费可退”；
• 抓住用户毫秒级的注意力窗口，把对决策最重要的信息做成认知钩子，避免被当成无效信息忽略。

示例优化：把订票页模糊提示「仅部分税费可退」，改写为明确金额提示「退票将扣除 XX 元」；退票申请页面视觉重点从 “预计退款” 切换到 “需扣款项”。

2. 高损失风险操作，提交前做有效的二次风险确认

弹窗不能滥用，但涉及用户财产损失时，二次确认是防范误操作的关键，要注意 3 个要点：

1. 标题中立具象，拒绝模糊主观判断 不要使用 “退款金额较少” 这类主观定性话术，直接写明会扣除 / 收取的具体金额，界面只提供客观信息，把判断权交还用户。
2. 削减信息噪音，只保留当前决策必要内容 弹窗属于侵入式交互，信息冗余、术语冗长会让用户产生厌烦，习惯性直接点确认，弹窗就彻底失去风险拦截作用。

• 非必要信息不要塞进弹窗；
• 复杂内容做格式化、分段处理；
• 条件化展示提示：只给使用了对应服务的用户弹出相关提醒，不要对全体用户展示无关文本。

3. 按钮文案写清行为，摒弃 “确认 / 继续” 这类模糊词汇 按钮要描述点击之后会发生什么，例如：「确认退票（到账 ¥430）」「暂不退票」，而不是笼统的确认、继续，降低误点概率。

3. 减少信息噪音，分层披露信息

不要一股脑堆砌全部规则。标题、正文只保留会影响当下决策的关键信息；复杂条款折叠、分层展示，不要干扰核心金额阅读。

4. 文案保持中立客观，少做主观判断

避免 “金额较小” 等主观评价，只陈述客观数字事实，由用户自己权衡要不要继续操作。

5. 按钮文案改写，清晰描述操作结果

规避 “确认”“继续” 等语义模糊按钮，使用结果导向的操作文案，明确告诉用户点击按钮会触发的行为。

核心设计理念：优秀的金额敏感界面，目标不是让用户通读全部规则，而是让用户在点击操作前，看懂金额变化与操作后果。

业务优化实证：售后退款协商页面改造

业务中有一类场景：商家和用户协商调低退款金额。旧版本弹窗只简单提示 “同意后将退款 XX 元”，大量用户因为没有感知到退款被缩减，误点击同意，相关客诉长期位居售后前十。

优化方案：弹窗完整说明变更逻辑，点明 “无需退回货品，但退款将降低至 XX 元，原金额 XXX 元”。改版后该类误操作投诉基本消失，验证了明确金额表达对体验的正向价值。

延伸思考

这套设计逻辑不局限于退款、扣费的金融场景。但凡需要用户做出重要决策的界面，都可以复用这套思路：对齐用户当下心智、精简干扰信息、客观呈现关键后果、操作按钮表意明确，以此减少用户理解偏差与误操作。

转载：优设

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