兰亭妙微ui设计公司分享：不少团队低估了产品文案的价值，误以为文案只要没有错别字就足够。但实际上，文案是产品与用户直接对话的媒介，直接决定用户体验的好坏。

掌握下面 6 个核心原则，帮你避开 UX 文案设计的常见问题： ① 清晰简洁：表达直白易懂，降低用户阅读与理解成本 ② 可访问性：兼顾不同用户群体，做到人人都能读懂 ③ 实用性：直面用户诉求，给出准确有效的信息反馈 ④ 真实性：拒绝误导与套路，如实传递产品能力 ⑤ 一致性：全产品文案口径统一，保障跨页面体验连贯 ⑥ 品牌感：用文案传递调性，落地真实可感知的品牌形象

标签：产品文案｜UX 文案｜用户体验设计｜文案设计｜设计技巧

版本二｜拓展完整版（适合公众号 / 专栏正文，增加解读，可读性更强）

6 个核心原则，写出清晰优质的产品 UX 文案

很多产品团队对待界面文案常常比较随意，抱有一个误区：文案不出错别字即可。

但产品文案并非简单的文字堆砌，它是产品和用户之间最直接的对话窗口。晦涩、误导、前后矛盾的文字，会直接拉高用户的使用门槛，破坏整体体验。做好 UX 文案，可以参考这六大设计原则：

1. 清晰简洁 摒弃冗余修饰，语言直白通俗。让用户一眼读懂含义，不用花费额外精力揣摩文字，减轻认知负担。

2. 可访问性 考虑多元的用户人群，避免专业黑话、隐喻化表达。保证不同认知、不同背景的使用者，都能够理解文案信息。

3. 实用性 文案要解决用户实际问题。无论是提示、报错还是引导，都要提供准确有效的信息，给到用户明确的参考和行动指引。

4. 真实性 坚守信息真实，不做夸大宣传，不设置文字套路。如实告知产品的功能、限制与结果，建立用户对产品的信任感。。

5. 一致性 保持全产品口径统一：用词、语气、术语、格式在各个页面保持一致，让用户形成稳定的使用预期，体验不会割裂混乱。

6. 品牌表达 文案也是品牌的载体。不止传递功能信息，更要贴合品牌的语言调性，让抽象的品牌形象，通过文字真实落地，被用户感知。

转载：优设

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

兰亭妙微ui设计公司分享：不少设计师交付的界面，常会被甲方评价 “看着像交互线稿”。明明已经完成信息布局，只是普通文字列表卡片，无论怎么调整，总摆脱不出原型稿的朴素感。那如何给卡片列表赋予高级的视觉质感？下面结合实操案例完整拆解优化思路。

一、确立设计方向，寻找优质参考

原页面头部卡片样式单薄，视觉表现力不足。结合当下流行的设计趋势，我们选定毛玻璃质感卡片作为优化方向，搜集成熟参考，以此为基础落地质感改造。

二、分步打磨卡片细节，打造通透玻璃质感

1. 构建基础通透质感

想要实现 “上部通透、底部厚重” 的玻璃视觉，给卡片填充透明度渐变底色；同时为描边设置反向透明渐变，模拟玻璃折射带来的厚度层次，奠定毛玻璃的基础基调。

2. 叠加多层细节，强化光影与层次

• 在卡片底部叠加低饱和度的模糊蓝色图层，适度透出背景色调，强化半透明的通透特质；
• 添加柔和内阴影，塑造卡片边缘圆润的玻璃厚度感；
• 底层叠加一层低明度模糊外阴影，模拟玻璃反光，拉开卡片和背景之间的空间距离。

完成多层光影细节之后，把卡片组件放回整体界面，校验初步视觉效果。

3. 搭配适配的渐变背景

毛玻璃的轻盈质感需要合适背景来衬托。结合产品定位，选用清透的蓝调渐变作为页面背景，最大化凸显卡片半透明的材质特质。

4. 完善信息文字排版

材质效果调试完毕后，再填入业务信息，做好层级化文字排版，完成整套头部卡片设计。

完成全部调整后，对比优化前后效果，可以直观看到：卡片不再是单调的信息容器，材质光影、空间层次全部拉满，摆脱交互稿感。

写在最后

以上就是毛玻璃风格卡片列表的完整实操技巧，善用渐变、多层阴影与半透明属性，就能快速为普通卡片提升设计表现力。

转载：优设

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

兰亭妙微ui设计公司分享：看似简单的投影，背后藏着大量容易被忽略的细节。

在界面设计中，投影的应用越来越普遍，不管是商业项目，还是 Dribbble 上的概念作品，随处可见各式各样的阴影效果。用好投影，是 UI 设计师必须掌握的核心视觉能力。可即便设计软件的可调参数并不复杂，依旧有很多设计师无法借助投影提升作品质感。本篇将从原理出发，完整讲透 UI 投影的设计逻辑与实操方法。

一、有光，才有影

光影是绘画、摄影的底层基础。

如果没有系统了解光影知识，很容易陷入认知误区：误以为投影只是把物体轮廓直接复刻投射到另一个平面，一个光源只生成单一的影子。但现实世界的投影，虚实层次并不均匀，明暗也存在丰富变化。

光学原理中，不透明物体遮挡光源，影子分为本影与半影（伪本影可合并理解）。本影是阴影最深处，颜色最深；外围逐步变淡、向外弥散的部分，就是半影。

现实环境的光源普遍存在散射特性，光线照射物体时会产生多角度漫射光。重叠最多的光线区域形成本影，光线的极限切线区域，则生成半影。

物体、光源、承接阴影的平面，三者之间距离发生改变，本影、半影占比也会随之变化。反过来，我们可以依靠本影、半影的形态，直接读取画面的空间信息：阴影范围越大、半影占比越高，代表物体悬浮高度越高。

同时，投影也会直接交代光源方向。光源在左侧，阴影就向右侧延展；观察阴影的朝向，就能反推主光源位置与光照强度。

除此之外，投影还能传递更多三维线索：判断元素是贴于平面，还是悬浮空中，感知物体自身的厚度。我们的大脑早已习惯这套现实世界的视觉逻辑，会下意识根据阴影解读界面层级。一旦投影违背光影规律，界面就会产生违和感，直接拉低整体质感。

二、从拟物到 Material Design：投影的回归

扁平化盛行的阶段，投影曾一度被大量舍弃，很多人将它视作拟物风格的遗留，担心使用阴影会让设计显得过时复古。

直到 Material Design 推出，谷歌引入了Z 轴的概念：给二维界面赋予虚拟三维空间，元素可以定义和底层平面的垂直距离，而投影，就是用来表达 Z 轴高度的视觉语言。元素 XY 坐标不变，Z 轴数值越大，代表离底层平面越远，悬浮感越强，这份立体感受全部来自投影的暗示。

谷歌官方的 UI 组件参数并非随意设定。拆解源文件可以发现，MD 的阴影由两层叠加而成，对应现实的本影与半影，也常被称作上层阴影（top shadow）、底层阴影（bottom shadow）。

这里有一个关键细节：投影深浅和物体悬浮高度属于非线性关系，阴影由中心向边缘衰减速度逐步加快。但绝大多数设计软件自带投影，只支持线性衰减；在常用平面工具中，只有 Photoshop 可以借助「等高线」功能，复现这种真实的非线性阴影衰减效果。

除了黑白灰阴影，当下设计里彩色投影也十分常见，摄影创作同样会用彩色阴影烘托氛围。但彩色投影不完全是单纯阴影效果，还混杂折射、漫反射色光。做简化理解：可以看作光线穿透半透明物体，投射出带有物体固有色的影子，就像撑开一把绿色遮阳伞，伞下空间会笼罩一层淡淡的绿色。

核心原则：优秀的投影，是能让你感知到它的存在，却不会抢夺视觉焦点。

三、投影实操：常规与非常规效果

设计软件自带投影功能，本质是在元素底层复制一份相同轮廓的图形，通过 XY 轴控制偏移，模糊参数实现弥散效果。 物理规律：物体距离承载平面越近，阴影偏移量越小，模糊程度越低；悬浮越高，阴影偏移、模糊数值越大。

3.1 常规投影（卡片 / 组件悬浮）

假设光源来自顶部，参考 Material Design 双层阴影思路搭建效果：

• 第一层：XY 偏移为 0，仅设置模糊，透明度压低，对应柔和弥散的上层阴影；
• 第二层：保持同等模糊，增加 Y 轴向下偏移，透明度适当提高，对应底层实体阴影。

  

直接照搬 MD 原始参数，很容易让界面显得脏乱拥挤。非 Material 体系的设计，需要整体降低阴影透明度。纯黑色做阴影，透明度建议不超过 20%，常规区间 5%‑15%。

除了直接调用图层投影，也可以手动复制图层做高斯模糊实现双层阴影：把底层阴影单独拎出来，适当缩小轮廓再向下位移，效果会更加贴近真实光影。

想要彩色投影，直接修改阴影颜色即可；不同色相视觉刺激强度不一样，需要对应微调透明度。如果阴影效果偏弱，可以提高元素 Z 轴（悬浮高度），放大阴影的偏移与模糊。

如果是渐变、图片类元素，手动复制图层的优势会进一步体现：底层阴影图层不填充纯色，直接复用原图或者渐变，再做模糊、透明度处理，得到更通透的彩色投影。

3.2 非常规创意投影

我们不必局限于顶光垂直照射的模式，可以改变光源与平面夹角，模拟更多真实光照场景。

当光源角度压低，阴影会被拉长，投射到物体下方的地面上；搭配透视地面，就可以实现长投影效果。也可以模拟聚光灯，得到轮廓收缩变形的阴影。

还可以模拟实体形变，例如卡片边角翘起，对应位置阴影会随之改变形态。

把现实生活里观察到的光影逻辑迁移到设计中，可以极大丰富视觉表达，这类投影同样适用于作品集样机包装。很多样机高级的氛围感，正是依靠这套自定义阴影逻辑；如果只使用软件自带单层投影，最终效果会显得单薄生硬。

四、重要的落地提醒

设计稿中调试完成的阴影，交付开发时务必注意：Android、iOS 平台的阴影渲染逻辑，和 Figma、PS 等设计软件输出效果并不完全对等，参数不能直接照搬，需要设计师和开发协同调试适配。

转载：站酷

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

兰亭妙微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。

兰亭妙微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。

兰亭妙微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。

兰亭妙微ui设计公司分享很多 UI 设计师都会有这样的困惑：软件操作、绘图技法勤加练习就能快速上手，但同样看优秀作品，别人总能看透背后的巧思，自己却只能看到表层视觉效果。

设计能力的分水岭，往往就在于设计思维。软件技法可以依靠重复训练短期内快速补齐，但设计思维需要长期积累熏陶，更要掌握正确的学习方法。现实里不少设计师从业五到十年，输出的作品依旧平庸，核心问题并非手绘或者软件功底不足，而是设计思维的缺失。

提升设计思维一个高效路径，就是深度体验、拆解优秀产品案例，读懂优秀设计师的解决思路与细节处理手法，把别人的思考转化成自己的专业能力。今天就结合多款 App 实例，从十个细节场景拆解 UI 设计巧思，希望能给大家带来启发。

案例体验目录

1. 巧思化的返回交互设计
2. 支持尺寸切换的弹性布局
3. 回归本质的减法设计
4. 品牌动态化烘托节日氛围
5. IP 插画填充界面底部区域
6. 下拉刷新的红包趣味动效
7. 涂鸦插画打造差异化流程页
8. 充满温度的情感化闪屏
9. 双层含义的图标翻转动效
10. 生肖主题图标节日化改造

一、巧思化的返回交互设计

常规页面返回，大多采用箭头图标、“返回” 文字这类标准化组件。

体验喵喵记账 App 时发现了很有想象力的处理：把 “门” 作为返回的意象，进入子页面时，画面呈现开门动画；点击返回上一级，就触发关门动效。用开门、关门的隐喻，具象化表达页面的进入与退出，跳出了传统返回控件的固有形式，提供了全新的交互解法。

二、支持尺寸切换的弹性布局

用户的浏览习惯各不相同，布局的灵活度，已经成为提升体验的重要一环。

藏书馆 App 的书库分类页面，支持一键切换展示尺寸。切换后书籍封面、配套文字会同步完成缩放适配，适配不同用户的阅读浏览偏好，用布局弹性优化整体产品体验。

三、回归本质的减法设计表达

如今互联网产品功能越做越繁杂，叠加大量商业模块，界面信息过载，很容易让用户眼花缭乱。

美团外卖柜小程序的设计就践行了少即是多。核心存取功能清晰直白，没有多余装饰元素干扰操作，指引简洁易懂。很多时候好体验来源于做减法，盲目堆砌功能模块，反而会加重用户的操作负担。

四、品牌动态化烘托节日氛围

节日主题设计是拉近品牌和用户距离的重要手段，实现形式也丰富多样。

夸克 App 会对品牌 LOGO 做节日动态化改造，春节版本将 LOGO 与新春主题结合，动效过渡顺滑自然，氛围感十足。夸克常会用品牌动态演绎节日、专题活动，把主题元素和品牌本体融合得十分细腻。

五、IP 插画填充界面底部区域

页面滚动到底部时，常规做法是放置版权信息、品牌名称等文本内容。

我要做计划 App 另辟蹊径，页面底部使用品牌 IP 插画做收尾。插画和产品整体插画风格高度统一，消解页面的枯燥感，增添趣味，也强化了产品独有的视觉个性。

六、下拉刷新的红包趣味动效

“下拉二层楼” 已经是很成熟的产品设计模式，不少产品会在下拉刷新上做趣味化创新。

美团外卖首页下拉刷新，会触发红包动效：下拉距离不同，红包的金额视觉效果随之增减。把普通的刷新行为和营销玩法结合，趣味性抓住用户注意力，引导用户进入二层楼参与活动，有效提升用户参与意愿。

七、涂鸦插画打造差异化流程页

行业设计同质化愈发严重，越来越多产品借助插画塑造自身辨识度。

我要做计划 App 整体采用涂鸦插画风格，就连计划完善流程页面，也沿用这套涂鸦语言。统一的风格强化产品记忆点，弱化流程页的枯燥感，引导用户完成计划填写。

八、充满温度的情感化闪屏设计

闪屏主要分为品牌展示、营销广告两大类型，也有品牌 + 广告结合的混合形式。除去直白的广告投放，IP 形象、故事插画是情感化闪屏的两大载体。

喜马拉雅就做了很有意思的尝试：启动页使用品牌 IP 动态形象，每次打开 App 看到的画面都不完全相同，灵动俏皮，让产品开场多了一份人情味。

九、双层含义的图标翻转动效

图标动效已经非常普及，多数动效只是美化外观，图标的功能释义不会发生变化。

盒马 App 春节版本的金刚区图标，使用翻转动画。图标正反两面承载两层含义：一面保留原有功能识别，翻转之后呈现节日主题寓意，为图标动效提供了全新思路。

十、生肖主题图标节日化改造

春节生肖主题广泛应用于各类产品，图标是落地主题最高频的载体，覆盖 App 图标、金刚区、底部 Tab、功能图标等位置。

常见改造方式有嵌入节日文案、融入生肖元素、叠加春节装饰，风格上多偏向立体质感，配色选取年味浓烈的色调，快速传递节日氛围。

小结

设计思维不是凭空而来的天赋，它扎根于自身专业积累，更来自大量案例观察与深度拆解。不要只停留在 “好看” 的表层感受，多去思考：设计师为什么这么做？解决了什么问题？可以借鉴什么思路。长期坚持，就能把案例养分转化为自己的设计思维。

转载：站酷

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