兰亭妙微ui设计公司分享：后扁平化时代，拟物化正以轻量化的全新形态重新回到 UI 设计视野之中。

当下的 UI 行业，扁平化设计依旧是绝对主流。扁平化不仅提升了用户信息获取效率，也降低了设计师的创作门槛：界面视觉仅依靠图片素材、矢量图标、几何图形与文字完成，设计师更多精力放在内容排版，原创输出大多局限于少量图标。

这样的行业状态维持了很长一段时间。但近几年，打破纯扁平的 UI 设计元素开始不断涌现。例如曾经热度高涨的新拟态风格，各大平台都产出大量解析文章；饿了么、美团这类国民级产品，也在首页使用辨识度极强的拟物图标，在设计圈引发广泛讨论。

这里顺带聊一聊新拟态：我个人对该风格并不推崇，它更像是传统拟物的变体，在信息密度高的业务 APP 中几乎没有落地空间，大多只停留在概念飞机稿。

而大厂正式上线拟物图标，则有着完全不一样的意义。这代表这套设计逻辑经过商业项目验证，得到行业共识。当然，并非大厂使用就代表要盲目跟风。根源在于，纯扁平设计已经很难满足部分需要强视觉冲击力的页面需求。

互联网已经进入下半场，用户的注意力成为稀缺资源。产品不再只依靠功能、口碑自然获取用户；用户时间有限、应用层出不穷，被动等待用户选择已经行不通。各大产品都在争夺用户眼球：更高饱和度的配色、密集的运营活动、强弹窗提示成为常态。

在这样的行业背景下，一味追求极简留白、性冷淡风格，已经很难突出核心内容。当扁平化视觉的表现力被挖掘到极致之后，在局部引入拟物表现就成为合理选择。

但完整的重度拟物并不适合全页面铺开，它会大幅降低信息浏览效率。因此拟物大多用于局部视觉强化，提升特定模块的感知权重。最常见的场景就是 APP 首页快捷入口、分类图标、底部导航图标。

如今，即便是脱离运营大促的常态版本，这类图标也越来越多地采用非扁平的表现形式。这就变成 UI 设计师必须掌握的能力，而不再只是运营设计师的工作。除移动端 APP 以外，大屏数据可视化、车载 UI、定制系统等领域，对拟物质感的需求也在持续上涨。

不少新生代 UI 设计师几乎没有接触过拟物训练，是时候重新拾起这门设计基本功。

注意：我们学习的并非早年高度写实的重度拟物，而是经过简化抽象的轻拟物。

传统经典拟物，会完整还原物体的光影、透视、结构，甚至复刻复杂材质肌理。单看视觉精致细腻，但直接套入现代界面会

非常违和：细节冗余、制作成本极高，不利于项目迭代落地。

轻拟物就是兼顾质感与落地效率的折中方案。它保留拟物的核心 —— 光影、结构、透视，但精简轮廓复杂度，删减冗余肌理，输出概念化、高识别度的立体图形。

⚠️ 这里要区分：很多面性图标叠加渐变、模糊、投影，属于扁平化的进阶表现，不等于轻拟物，二者不能混淆。

学习拟物，对设计师综合能力提升价值巨大。它倒逼设计师夯实美术基础：形体结构、光影逻辑、色彩、透视，同时也会加深对 Photoshop 工具的理解。自从拟物不再是必修内容之后，大量 UI 设计师对 PS 掌握浮于表面，限制了创作上限与作品多样性。

轻拟物脱胎于传统拟物，核心要素只有两点：形体、光影。

一、形体表现

形体，就是图形外轮廓与内部构造。 轻拟物的形体难度要高于普通进阶面性图标：图形表意要清晰具象，不能过度抽象，但又不能堆砌繁杂细节，需要把握好平衡，非常考验设计师的经验判断力。

绘制初期，新手建议优先采用正视图，尽量避开俯视图、斜 45° 等多面透视，避免难度陡增。

二、光影表现

形体填充纯色，得到的是平面图形；赋予合理光影，图形才会拥有三维立体感，光影是拟物的灵魂。

做光影第一步：确定统一光源方向（左上、右上、顶部等）。光源一旦定好，后续所有渐变角度、投影方向都要与之匹配；光源逻辑混乱，就会出现视觉矛盾、画面失真。

受光线影响，物体会产生亮部、高光、暗部、投影四大要素。 素描理论里还有明暗交界线、反光，轻拟物为了轻量化表达，会省略这部分复杂处理，重点把握高光与暗部即可。

高光：物体对光源的直接反射，能够强化画面层次与质感，提升视觉冲击力。 暗部：物体不受光区域，用来表现弧度与结构。实操不建议直接硬调单色深色，更推荐使用图层叠加黑白透明渐变，实现过渡柔和的明暗效果。

实战案例：KFC 首页图标改造

理论说完，我们结合真实业务场景演示轻拟物落地，解决实际设计问题。

KFC 官方 APP 首页，顶部汇聚大量业务入口，图标数量多达三十余个。单看每个图标都没有硬伤，但大量元素堆叠，页面层级模糊，重点信息被淹没。

我们的目标：选取 3 个核心入口图标做轻拟物升级，在一众扁平图标中凸显优先级，拉开视觉差异。

步骤 1：确定轮廓造型

基于原有图标进行优化，调整比例结构，优化造型细节，拆分模块并填充基础固有色。形体阶段重点把控图形比例，做到表意准确，不出现形体失调。

步骤 2：完善图形细节

在基础形体之上，补充细节，增加趣味小元素，进一步完善图形样式。

步骤 3：绘制暗部与基础投影

设定光源从右上角射入，元素叠加位置生成向下投影。借助蒙版新建图层，添加深色透明渐变，完成暗部与投影塑造，建立基础立体感。

步骤 4：添加高光，提升质感

最后叠加高光，进一步强化物体体积感，完成图标最终质感。

轻拟物标准化制作流程总结

1. 确定图形基础轮廓，校准比例，划分模块固有色
2. 补充适度细节，增加图形趣味性与拟真感
3. 利用蒙版绘制暗部，建立明暗关系与层级
4. 增加高光，强化体积，完成质感塑造

完成图标之后，替换回原始首页做对比。可以直观看到：在元素拥挤复杂的页面中，轻拟物图标可以自然脱颖而出，又不会过度浮夸割裂整体界面。

这正是轻拟物在商业项目中的核心价值：面对信息过载、视觉同质化、主次关系混乱的界面，用局部拟物，高效完成视觉层级区分。

写在最后

掌握轻拟物，相当于扩充设计师的视觉武器库，帮助我们应对越来越复杂的产品设计需求。

本文重在拆解设计思路，没有罗列软件详细操作。思路通透之后，PS、AI、Figma、Sketch、Affinity 任意工具，都可以实现同类效果。

后续有机会，会再分享更偏向传统写实拟物的硬核教程，期待可以做成视频形式。

转载：站酷

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

兰亭妙微ui设计公司分享：色彩本身没有高低好坏，只有适配与否。本篇案例用色较为张扬，意在表达思路，大家实践时，按需匹配项目调性即可。 感谢站酷平台给予创作与交流的机会。很多新人做设计，素材齐全、内容完整，但画面总显得平淡普通，缺少 “设计感”。设计感并非全靠天赋与灵感，掌握可复用的视觉手法，普通画面也能实现质感跃升。下面分享 5 个简单易上手的实操技巧：

一、元素衍生：借由本体拓展新视觉

现实物体总会产生投影、倒影，我们可以顺着物体本体形态，对影子做二次创意衍生，生成全新图形形象。

• 核心思路：本体保留原有识别度，影子做创意变形，形成画面双主体；
• 效果价值：制造叙事感与视觉冲突，打破平铺直叙，让画面自带故事氛围。

实操提示：衍生图形不能脱离本体轮廓逻辑，避免创意过度导致表意混乱。

二、负空间：让空白承载第二层信息

负空间即画面留白区域，不只是单纯空余背景。我们可以对主体轮廓做镂空、裁切处理，让空白区域组合成第二层图形含义。

• 核心思路：一物双意，实体图形和负形图形同时传递信息；
• 效果价值：用极简形式制造巧思，画面简洁却富有记忆点，非常适合海报、符号类设计。

实操提示：负形轮廓要清晰可读，不能模糊暧昧，否则观众无法识别第二层含义。

三、元素结合：异构融合创造全新符号

把两个原本毫无关联，但轮廓、形态具备相似性的事物，互相融合拼接，生成一个全新复合形象。

• 核心思路：抓取两者共通轮廓特征，做形态嫁接；保留各自的特征辨识度，不是简单生硬拼贴；
• 效果价值：视觉新奇抓人，打破固有认知，适合创意海报、概念视觉，快速抓住观者注意力。

四、文字替换：局部置换实现图文共生

不一定要替换完整字体，中文设计中优先替换汉字局部笔画，用产品、图形、实物去替代文字的部分结构。

• 核心思路：文字依然可读，同时植入要表达的视觉主体，文字表意与图形表达同步完成；
• 效果价值：文案和视觉融为一体，避免图文割裂，在宣传类设计中，兼顾信息传递与创意表现。

实操提示：优先保证文字可读性，不能为了创意破坏字形识别。

五、视线引导两类手法

①方框聚焦

增加线条方框，把关键视觉对象框选，框体可以和主体做叠压、穿插，制造前后空间层级。

• 作用：强制收拢观众视线，把焦点锁定在框内内容；叠压关系强化画面层次感，告别平面感。

②元素向心

批量重复同类装饰元素，让所有元素的动势、走向统一指向画面视觉中心。

• 核心逻辑：先定好画面最重要的视觉落点，再排布重复元素由外向内汇聚；
• 作用：形成强烈视觉向心力，秩序感与动感兼备，观众目光会被自然牵引到核心主体上。

写在最后

以上 5 种手法，不是拿来就套的万能模板。技巧是工具，服务于你的主题与信息。不要为了炫技堆砌效果，根据你的表达目的，选择适配手法。 日常练习时，可以拿一张普通图片，分别尝试套用以上思路做改造，慢慢就能建立对 “设计感” 的直觉。

转载：站酷

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

在多年的 APP 设计实践中，兰亭妙微沉淀出一条朴素却屡屡被验证的经验：交互设计的核心，从来不是那些花哨的转场动画和炫目的视觉效果，而是框架是否清晰、路径是否流畅。

《交互设计精髓》中有一个精妙的比喻：用户的操作如同一条流淌的河。要做出一流的产品，就应当尊重这条河流，让它自然地向前奔涌 —— 而产品设计中最常见的 "拦河坝"，就是那些没完没了弹出来的对话框。

兰亭妙微ui设计公司分享：很多做视觉、设计相关工作的朋友，想法和画面构图都做得不错，却常常栽在配色上。你是不是也总被配色问题搞得头疼？

今天结合学员的实操改图案例，拆解 3 个落地好用的色彩逻辑。只调整配色，就能直接改善画面的协调度，整体质感瞬间提升。

01 色相呼应：告别画面割裂感

画面里出现某一个颜色，不要只让它孤零零出现。要在画面别的位置，重复出现这个色彩，一处、两处甚至多处，形成色相呼应，把整张画面的各个元素串联在一起。

举个例子：画面人物主体是黑色，带有绿色装饰细节，但背景是蓝色，文字又是白色。人物身上的黑色和环境完全脱节，悬浮在画面当中，观感割裂。

做好色相呼应，可以分三步调整：

1. 背景承接主体主色：将背景调整为黑色，大面积黑色和人物的黑色形成色彩呼应，消除主体悬浮脱节的问题。
2. 点缀色渗透到环境中：人物带有绿色细节，背景也要布置绿色元素。给人物增加绿色光晕，搭配绿色装饰球体，让画面过渡更柔和。
3. 文字色彩适配整体氛围：原本的白色文字，会把画面切割开，破坏整体感。把字体换成绿色，和人物、背景的绿色元素互相呼应。

经过色相呼应调整之后，画面各个元素色彩互相关联，整体协调度会明显变好。

02 色相层级：色调统一，同时突出主体

还有一种高频问题：主体色彩和环境脱节。如果简单粗暴直接把背景改成和主体一模一样的颜色，色彩是统一了，但主体会被背景吞没，看不清视觉重点，这时候就要用到色相层级。

色相层级，就是在同一组同类色内部，依靠色相、明度的细微变化，制造出强、中、弱不同的视觉力度，拉开画面主次关系。

拿橙色调举例：在同类色中，柠檬黄视觉冲击力最强，黄色次之，橙红色最弱，三者天然形成视觉层级。

如果整体想要橙色氛围，既想要色调统一，又要主体能够凸显，可以这样处理：背景选用偏暗的橙红色，主体向黄色、柠檬黄做渐变过渡。

背景和主体同属一个色彩体系，整体氛围和谐；同时色彩层次拉开，主体可以清晰跳脱出来，兼顾氛围感与画面层次。

03 色相数量：控制色彩，避开花哨杂乱

有些图拆开看每个局部都没问题，但整体看着花哨吵闹，质感上不去，大多是画面颜色种类太多导致的。

就像案例原图，一共堆砌了 6 种完全不一样的色相，各色之间互不关联，视觉信息过载，看着很累。

修改的核心思路就是控制色相的总数量：

1. 天空、地面的色相互相靠近，只用明暗区分层次，不再新增多余颜色；
2. 月亮的黄色融入背景渐变，减弱月亮和天空强烈的色彩对抗；
3. 文字颜色向背景色调靠拢，和环境形成色彩呼应。

修改之后，画面色相精简到 3 种，画面干净克制，观感舒服很多。

配色从来不是凭感觉挑选好看的颜色，而是一套有方法可循的逻辑： 色相呼应：色彩不要孤立存在，多处复用，解决画面割裂； 色相层级：同类色打造强弱对比，兼顾色调统一和主体突出； 色相数量：把控画面色相数量，拒绝色彩堆砌带来的杂乱感。

掌握这三个配色小技巧，可以帮你避开日常作图里大部分色彩雷区。

转载：站酷

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

全文速览

兰亭妙微ui设计公司分享：苹果首款折叠机型 iPhone Duo 正式登场。硬件形态之外，真正带来变革的是 iOS 交互逻辑的迭代：iOS 不再默认把所有 iPhone 都定义为「顶部导航 + 底部标签栏」的传统竖屏设备。在 iPhone Duo 上，标签栏、工具栏、操作控件迁移至拇指更易触及的屏幕右侧，释放纵向滚动空间，为折叠形态下的内容展示创造更多可能性。

一、快速读懂 iPhone Duo

iPhone Duo 采用书本式内折方案，搭载两块比例一致的超视网膜 XDR 显示屏：

• 5.4 英寸外屏：设备闭合状态，主打单手便捷操作；
• 7.6 英寸内屏：完全展开使用，也是迄今为止尺寸最大的 iPhone 屏幕。

iOS 针对双屏硬件完成交互更新：原本分布在屏幕底部的界面控件，迁移至屏幕侧边，无论设备处于闭合还是展开，最大化留给内容的显示面积。

苹果的设计立场十分清晰：它依旧是一台 iPhone，成熟的 iOS 设计模式仍然有效。真正的改变在于：布局需要兼容多套屏幕尺寸，在内外屏切换过程维持体验连贯，同时保证各类控件在折叠不同状态下，都能够被轻松触碰。

二、未适配应用的真实痛点

目前绝大多数 App 可以直接在 iPhone Duo 上运行，但大量应用尚未针对折叠特性做专门适配，暴露出兼容模式的诸多短板：

不少 App 直接将传统竖版 iPhone 界面居中放置在大屏内，屏幕两侧填充黑边。

• 在外屏：内容整体靠左，右侧大片屏幕空间被白白浪费；
• 在内屏：用户拥有更大尺寸的屏幕，却有近半显示区域无法被利用。

还有一部分应用虽然填满屏幕，但依旧固守旧版交互习惯：底部标签栏悬浮于内容之上，核心操作控件集中在页面顶部，完全没有利用 Duo「侧边控件」的全新交互逻辑。

这正是适配工作的价值所在。如果缺少针对性优化，iPhone Duo 就只是把旧版 iPhone UI 强行套进新硬件，无法发挥折叠设备的体验优势。

三、以尺寸为核心，而非折叠姿态做设计

用户握持 iPhone Duo 的方式丰富多样：闭合、完全展开、书本式半折、桌面立放……

设计师不必为每一种折叠角度单独定制一套界面。苹果给出的核心思路，依托Size Classes（尺寸类）完成响应式布局：

1. 闭合外屏 → 紧凑宽度 Compact Width
2. 展开内屏 → 常规宽度 Regular Width

依靠这两套基础尺寸，就可以覆盖全部折叠姿态的布局逻辑，规避大量冗余页面开发。

系统自带邮件 App 就是典型范本：外屏呈现简洁的单栏浏览；展开内屏之后，升级为列表‑详情双栏并排，信息层级更加丰富，整套体验连贯统一。

折叠屏设计追求的，是一套连续自适应的完整体验，而不是两块屏幕靠铰链生硬拼接成两个独立 App。

四、控件右移：iOS 交互的重大转向

这是本次迭代最值得设计师重视的 UX 变革。

iPhone Duo 外屏相比传统 iPhone，更宽、纵向高度更短。系统将工具栏、标签栏、导航控件统一挪至屏幕右侧。一方面释放纵向内容区域，另一方面把高频操作放在右手拇指舒适可达的范围；设备展开之后，这套侧边控件逻辑继续沿用，保障内外屏切换时交互认知不会断裂。

过去十年 iPhone 已经形成根深蒂固的习惯：顶部导航 + 底部标签栏。而 iPhone Duo 正在打破这套固有范式，带来几点关键设计提醒：

1. 安全区域的权重进一步提升，界面可用空间不再对称；
2. 工具栏布局需要重新权衡：哪些控件常驻显示，哪些收纳进更多选项；
3. 控件尽量靠近它所作用的内容，不要简单粗暴全部堆到侧边；
4. 保留用户熟悉的交互记忆，不要让用户每一次折叠开合，都要重新学习界面。

在分屏场景中，该原则尤为关键：左分栏的操作控件留在左侧区域，右分栏操作按钮放在右边缘。

适配与未适配，是两种截然不同的体验：前者让 UI 顺应硬件与人的握持习惯；后者则是界面在和硬件形态互相 “对抗”。

五、设计师落地适配的实操步骤

评审 iPhone Duo 适配方案，不要一上来就绘制五六种折叠姿态的高保真界面，可以按照这个优先级推进：

1. 盘点现有界面控件：梳理当前放在顶部、底部的全部操作按钮，评估迁移至侧边之后会产生哪些连锁变化；
2. 区分紧凑 / 常规两套尺寸差异：思考在内屏的宽屏环境下，可以增加哪些信息层级、提升信息密度；
3. 规避铰链折痕区域：设备半折状态，核心交互控件避开中间铰链位置；
4. 最后探索折叠特有场景：多任务、双屏联动、铰链动效等增值特性。

很多未适配 App 体验糟糕，问题往往不在于缺少炫酷铰链动画，而是仍在用传统直板 iPhone 的思维，去设计折叠设备。

转载：站酷

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

米勒法则，也就是常说的 7±2 法则，是交互设计中经常被引用，却也极易被误用的经典心理学理论。兰亭妙微在 B 端后台、移动端项目评审中发现，很多设计师只记住 “5‑9 个” 这个数字，却忽略理论本源，生硬套用到导航、标签栏，造成理解偏差。

在多端并行开发的项目中，直接把 PC 端方案照搬至移动端，或是将移动端逻辑套用到后台系统，很容易出现可用性问题。兰亭妙微在政企后台、多端 App 项目实践中发现，不少设计师会混淆两端设计逻辑。即便业务需求完全一致，受屏幕、输入方式、使用环境、网络条件的影响，PC 端与移动端也需要做差异化适配。

兰亭妙微ui设计公司分享：做移动端 UI，你是不是经常遇到这些问题：瓷片区被产品反馈不够精致；同屏模块堆砌，页面杂乱无章；用户看不清核心入口，找不到重点。

瓷片区作为 App 高频使用的运营卡片位，视觉表现直接影响页面质感与信息传达效率。下面分享 4 套可直接复用的设计思路，帮你快速优化瓷片区表现。

一、差异化排版：打造页面视觉节奏

多个瓷片区同时展示时，如果全部采用尺寸均等的机械横排布局，很容易造成视觉乏味，信息层级模糊。

实操思路：挑选 1‑2 个核心高频功能做尺寸放大，让模块形成大‑中‑小的差异化排布。利用尺寸权重区分优先级，既强化信息层级，又赋予页面呼吸感与节奏感，避免模块 “千篇一律”。

二、倾斜与异形：塑造卡片记忆点

基础排版落地之后，如果想要让卡片跳出常规矩形，强化辨识度，可以使用倾斜、异形两种手法。

1. 倾斜处理：将卡片相邻两条边做倾斜变形，打破四平八稳的阅读视线，有效抓取用户注意力。
2. 异形造型：跳出标准矩形，用不规则图形提升感官刺激。

   

   • 贴合行业属性定制造型：例如快递产品可采用邮票轮廓；

     

   • 复用品牌符号：例如马蜂窝使用品牌标志性六边形蜂窝造型，强化品牌基因。

     

提示：异形、倾斜属于加分样式，切忌大面积滥用，避免干扰信息可读性。

三、破界设计：制造视觉张力

想要瓷片区更吸睛，可以使用破界（破型）手法。核心逻辑是适度打破容器边界，营造元素 “呼之欲出” 的张力。

两种实现方式：

1. 直接突破卡片外边界，冲击力强；

   

2. 在卡片容器内部做局部破型，不打乱整体栅格布局，兼顾秩序感与设计感，更适合多数业务场景。

   

四、分层设计，构建多层次空间感

通过分层叠加，在有限卡片区域营造空间纵深感，兼顾功能可用性与视觉表现力。我们可以拆解为背景层、中间层、内容层三层来搭建：

1. 背景层（底层）：只需要和页面底色做出区分即可，不宜过于花哨，避免抢主体风头。

   

2. 中间层：放置装饰视觉元素，制造视觉兴趣点，初步牵引用户视线。

   

3. 内容层（顶层）：承载标题、说明、入口等核心信息，保证信息层级清晰可读。

   

完成三层搭建后，还可以结合上面提到的倾斜、异形技巧，对卡片外形做二次加工，衍生出更多风格的瓷片区方案。

总结复盘

瓷片区精致化 4 个核心要点： ① 排版差异化：核心模块放大，构建 “大‑中‑小” 的节奏布局，拒绝全部等分； ② 造型差异化：运用倾斜、异形，结合品牌与行业特征提升卡片辨识度； ③ 破界制造张力：适度使用破型效果，分外部破界、内部破界两种方式按需选用； ④ 分层营造空间：背景层‑中间层‑内容层三层结构，兼顾美观与信息可读性。

转载：站酷

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

兰亭妙微ui设计公司分享要不要学习开发相关知识，是 B 端设计师圈内一个高频，同时又值得认真思辨的问题。我的答案很明确：需要。

下面就围绕这个话题展开聊聊，B 端设计师为什么要具备技术认知。

为什么 B 端设计师需要懂技术

首先厘清一个误区：B 端设计师 “懂技术”，不等于要熟练写代码、做开发，亲手完成程序编写。 而是站在宏观框架层面，理解产品的技术原理、运行逻辑，以及实现层面的各类约束条件站酷(ZC...。

这并不是 UI 设计师独有的能力要求，而是整个设计行业通用的专业素养。设计本质是输出一套可落地的解决方案，最终都要通过对应的工艺、技术实施，才能转化为真实产出。

• 平面设计，要懂印刷工艺；
• 工业设计，要懂制造加工；
• 室内设计，要懂现场施工。

每个领域的落地环节，都有自身的标准与限制。无视现实条件做出来的方案，很难被真正实现。就像汽车设计师，想要设计风阻低、安全性高的车型，就必须掌握空气动力学、材料学知识，不能只凭想象力画图。

这种脱离技术现实、只追求视觉效果，无法落地的方案，业内我们称之为飞机稿。

想要成为专业的 B 端 UI 设计师，建立基础的技术认知，是产出有效方案的重要前提。如果完全不了解实现边界，大量设计稿会因为技术不可行被打回修改，直接拉低整个项目的推进效率。

除了保障方案能够落地之外，技术认知还能帮助设计师建立全局视角，更好理解设计与整个项目之间的关系：预判方案的实现成本与难度，优化和前端工程师的交付、协作流程。

不少团队里设计师与前端矛盾频发，很大一部分根源就来自信息差。设计师输出的方案，要么技术上很难实现，要么实现代价极高，就如同产品经理提出要做 “五彩斑斓的黑”，完全无视客观约束。

懂技术和不懂技术的 B 端设计师，在项目协作中的工作效率会拉开明显差距，这也是具备技术认知的设计师，更具备职场竞争力、更受团队欢迎的核心原因。

而对于 B 端赛道，懂技术还有一层更特殊的价值：大量 B 端产品，本身就是面向技术人群提供服务。

多数普通 B 端产品，面向普通企业业务人员即可上手，比如仓库管理员使用 ERP 管理库存，企业员工在 OA 系统提交审批工单。 但还有一类 B 端产品，目标用户本身就是开发人员，用来提升研发工作效率，云服务就是非常典型的代表。

云服务只是其中一个方向，市面上面向技术从业者的 B 端产品数量庞大。产品由程序员操作使用，但界面体验依旧需要设计师完成。只有具备基础技术认知，设计师才能读懂业务需求，做好产品设计，而不是单纯对着产品原型机械画图，却不理解设计背后的业务意义。

伴随着 AI 行业快速崛起，AI 类 B 端产品持续爆发，而这类产品大多建立在技术能力之上，需要用户完成配置、搭建工作流来完成业务。 如果对 AI 底层逻辑一无所知，很难驾驭这类产品的设计。现在行业提到的 B 端 AI 设计师，不是指会用 AI 生成效果图，而是专门设计 AI 类 B 端系统，需要具备基础 AI 技术认知。

除 AI 之外，区块链、数据大屏等细分 B 端领域，同样对设计师有类似要求。 所以掌握基础技术认知，不只是完成日常工作的基础，更是拓宽自身职业可能性的重要助力。

B 端设计师，需要弄懂哪些技术？

明白了学习技术的意义，接下来看具体要掌握哪些方向，我把核心内容整理为五大模块：

1. 前端界面的实现逻辑
2. 后端的功能框架与服务
3. 前后端联调的完整过程
4. 产品部署与运维基础
5. AI 生成与业务处理流程

受篇幅限制，这里不会做教科书式的完整教学，只讲解每个模块的核心价值，以及入门学习思路。

前端界面的实现逻辑

前端实现界面样式、交互、动画的底层逻辑，是和 UI 设计师关系最紧密的部分。这里的前端是广义概念，涵盖网页端、iOS、Android、小程序、桌面客户端等多端界面。

不同终端开发语言不一样，但界面实现的底层思路相通。对于 B 端设计师，优先学习网页前端性价比最高：一方面 B 端项目绝大多数以网页为载体；另一方面网页前端入门门槛最低，最容易上手。

网页前端三大核心组成：HTML、CSS、JS。 HTML 搭建网页结构框架，CSS 负责视觉样式，JS 处理交互运算逻辑。 对设计师来说，重点吃透 HTML + CSS，建议尽量动手实操。站在开发视角，二者属于标记、样式语言，并非复杂编程语言，学习门槛不高。

动手实操，能帮你直观理解界面是如何被渲染出来，也能搞懂为什么参数完全一致，还原效果却和设计稿存在偏差。同时建立正确认知：界面视觉还原，仅仅只是前端工作很小的一部分，样式和业务逻辑是两套完全独立的内容。

后端的功能框架和服务

其次要建立对后端的基础认知：服务器层面产品如何运行，后端工程师主要承担哪些工作。

B 端页面充斥大量字段、复杂数据联动，想要做好交互设计，离不开对后端、数据逻辑的理解。大家可以先了解 SaaS、PaaS、IaaS 这些 B 端常见服务分类，理解架构层面的差异。遇到陌生名词可以借助 AI 工具辅助扫盲。

同时要搞懂后端代码存储、运行机制，以及它和数据库之间的关联关系。

前后端联调的过程

前端、后端是两套独立运行的程序，分别部署在不同硬件环境，本身互相隔离。前后端联调，就是建立二者的数据通信通道，完成数据交互。

可以打个通俗比方：你单独买了主机、显示器、键鼠、耳机，想要整套设备协同工作，就需要通过 USB、蓝牙、音频接口把硬件互相连接起来。

联调里最重要的概念就是 API 接口，它就是前后端通信的 “插口”。就像机箱背后各式各样的接口，Type‑C、USB、音频圆孔，不同接口需要匹配对应的接头，才能完成信号传输。

API 是项目高频讨论的技术点，直接影响需求方案。弄懂 API 之后，开会就能听懂大部分开发术语，不再一头雾水。对于 API 的深入理解，推荐借助 AI 工具做拓展学习。

产品的部署和运维

前面的前端、后端、联调，可以搭建出一个基础互联网产品。真实商业环境下后端体系十分复杂，也催生了云服务丰富的产品矩阵。想要读懂这类技术型 B 端产品，需要具备基础运维常识。

后端岗位大致可以分为两块：后端开发、运维。后端开发负责编写业务功能；运维负责搭建运行环境，保障代码在服务器稳定运行。

想深入可以阅读 DevOps 相关科普文章。有条件的话，可以打开主流云服务平台，浏览产品列表，逐个查阅陌生名词做扫盲，能快速建立对云服务产品的体感。

AI 的生成和处理流程

AI 已经深度渗透各行各业，大量 AI 能力都依托 B 端系统落地。作为设计师，需要跟上行业变化，理解 AI 产品的运行逻辑。

从应用层面，大模型大致分为四类：

• 计算机视觉模型：图像生成、检测、分类，代表场景文生图；
• 自然语言处理模型：文本理解、文本生成，代表工具 ChatGPT；
• 语音处理模型：语音识别、语音合成；
• 多模态模型：同时处理图文音视频混合数据，比如图文检索、视频内容总结。

大模型作为底层内核，接收输入、输出处理后的数据，以此帮我们完成复杂任务，搭建自动化业务工作流。

举个例子：电商上新，可以搭建自动化工作流。输入产品实拍图、标题、商品文案，AI 自动生成多套商品封面、详情图，适配不同平台的标题文案，输出详情排版建议。

类似的自动化工作流，现在大量应用在各类 B 端系统中。大家可以上手体验 Coze 这类平台，阅读官方文档，直观感受 AI 工作流的搭建逻辑。

理解 AI 的能力边界与优势，才不会被各类 AI 焦虑裹挟，把握住职业发展机会。

写在最后

本文介绍的是一套基础技术认知框架，真实项目中还有更多细碎知识点。掌握以上内容，就可以做到举一反三，面对陌生技术概念也能快速理解。

再次强调：所谓设计师懂技术，不等于要精通一门编程语言，而是建立完整的技术认知框架。

如果本篇反馈不错，后续会继续输出更多技术科普内容。关于如何把技术认知落地到设计、交互实战，会在内部课程做更加细致的拆解分享。

下篇再见～

转载：站酷

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