兰亭妙微ui设计公司分享：做 UI 设计时，经常会遇到同一个产品内，多个页面视觉割裂、风格打架的问题。即便单张页面看着好看，整套界面放在一起，观感依旧杂乱，作品集呈现也大打折扣。今天结合低碳 App 的真实改版案例，分享 4 套可直接落地的界面风格统一方法论，帮你快速解决页面风格不统一的痛点。

一、先找准根源：页面风格为什么会割裂？

本次案例的原始版本里，首页头部采用扁平插画，个人中心头部却是 3D 质感图标。两个页面各自独立完成，没有对齐主视觉语言，元素表现形式完全不同，放在一套产品里就产生强烈的违和感。

很多时候界面不协调，并不是布局、排版出了问题，而是主视觉、插画质感、图标体系没有统一标准。不同页面使用两套完全不一样的视觉素材，最终造成整套产品碎片化。

解决逻辑：做整套界面，优先对齐主视觉与色彩体系，再打磨交互细节、质感表现，界面完整度才能真正提升。

实战方法 1：统一主视觉语言，对齐核心设计元素

主视觉是页面第一眼给用户的印象，整套产品必须选用同一套表现形式：要么全部用扁平插画，要么全部使用 3D 质感图形，不要插画、3D 图标混用。

在这个低碳项目中，我们舍弃首页原本的风景插画，借助 AI 生成风格统一的 3D 质感图标，首页、个人中心头部全部采用同类 3D 图形。统一视觉载体之后，两个页面的整体基调瞬间协调。

实操要点：

1. 确定项目主视觉方向：扁平 / 2.5D/3D 拟态 / 手绘插画，全项目严格遵循；
2. 头部 Banner、卡片装饰、重点模块图形，保持光影、材质、圆角风格一致；
3. 作品集改版项目，切忌东拼西凑素材，统一的视觉语言会大幅提升作品专业度。

实战方法 2：规范色彩体系，让配色干净通透

视觉统一的第二关键点，就是色彩一致性。 原始案例两个页面的主色调深浅、色相不匹配，首页头部混入脏感的黄调渐变，进一步加剧页面割裂。

优化做法：

1. 选定一个页面作为色彩基准（案例以首页主色为基准），把全产品页面的主色、辅助色统一；
2. 慎用多色叠加的复杂渐变，去除容易显脏的杂色，降低渐变饱和度，让界面更加清爽通透；
3. 组件、按钮、标签、图标，全部复用设计规范里的色值，禁止页面局部随意改色。

统一色彩之后，首页与个人中心的底色、卡片色调、按钮色值完全对齐，页面之间的割裂感大幅消除。

实战方法 3：优化交互细节，优先保障可用性

视觉好看的同时，不能忽略交互体验。改版前首页签到模块，按钮尺寸偏小，容易产生点击误触；配套文字字号过小，可读性差。

优化调整：

• 放大可点击区域，提升触控容错，避免误操作；
• 适度放大辅助文字字号，保证信息识别效率；

核心原则：先保证可用性，再追求视觉精致。不要为了画面好看，牺牲交互易用性。

实战方法 4：巧用质感细节，提升界面层次

当基础布局、色彩、主视觉全部对齐之后，可以增加统一的质感效果，进一步拔高界面精致度。 案例中为签到卡片加入磨砂毛玻璃质感，在不破坏整体统一性的前提下，强化卡片分层，柔和衬托后方的 3D 主视觉图形。

注意：质感效果切忌滥用，整套产品选用 1‑2 种质感即可；如果到处堆砌特殊效果，反而会破坏整体统一。

改版前后完整对比

改版前：首页（扁平插画）、个人中心（3D 图标）视觉语言冲突，配色杂乱，部分交互控件可用性不足。 改版后：两页全部使用 3D 质感主视觉，色彩体系统一，交互控件优化，搭配统一毛玻璃质感；整套界面简洁干净，层次分明，体验更加连贯。

总结：界面风格统一 4 条核心清单

1. 主视觉统一：全产品使用同一套设计元素，插画、3D、手绘不要混用；
2. 色彩保持一致：建立统一色板，减少杂乱渐变，保证界面干净通透；
3. 交互细节不能忽略：放大点击热区、优化字号可读性，可用性优先；
4. 质感补充层次：基础风格稳定后，适度增加毛玻璃等质感，切忌过度装饰。

转载：优设

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

兰亭妙微ui设计公司分享：图标是 UI 设计的基础基本功。很多新手急于追求创意表达，却忽略底层设计逻辑，导致作品看着花哨，实则漏洞百出。基础不扎实，再炫酷的创意也只是空中楼阁。本文结合大量正反案例，拆解图标设计里 3 个高频错误认知，帮大家少走弯路。

一、误区 1：强行把同一个元素贯穿整套图标

不少新手会陷入一个执念：希望整套图标，全部带上同一个装饰元素，让视觉看起来 “有关联”。于是生硬把符号、图形直接堆砌在每一个图标之上。

就像案例中将网球元素硬加到奖杯、球场图标中，只是简单做拼接，元素和主体语义毫无融合，观感生硬割裂。统一元素可以做系列化，但不等于粗暴硬塞。

正确思路：巧妙做语义融合，让元素成为功能的一部分。 文中碳旅行主题图标就是很好示范：叶子化身为小船的船帆、灯笼的吊坠，元素服务图形本身，而非额外外挂装饰。

给新手建议：不要上来就挑战高难度的系列元素贯穿。优先打磨造型、配色、质感基本功，把基础做到规整统一，已经非常出彩。 案例作业对比：优化前图标造型、光影、色彩调性混乱；优化之后统一质感、光影逻辑，整套图标专业度立刻提升。

二、误区 2：直接照搬现实实物，缺少设计加工

AI 工具普及之后，这个问题愈发普遍：直接输入关键词，把现实物体原样生成当作图标，完全省略二次设计思考。比如直接输出真实灭火器、工地安全帽，照搬现实的尺寸、细节、材质。 这样的作品，只是实物复刻，没有设计师的主观加工，缺少设计感。

正确思路：可以参考现实实物获取灵感，但必须在造型、比例、质感上做主观调整改造。 示例药瓶，现实中瓶盖偏小；设计时放大瓶盖占比，调整轮廓圆角，再立体化输出，得到更适配 UI 的图标。

重要提醒：创新不是凭空脑补。所有的变形夸张，都需要现实实物作为参考依据，切忌脱离现实，纯靠空想瞎创作。参考实物→提炼特征→修改比例造型，才是完整设计链路。

三、误区 3：直接把完整 IP 形象拿来当图标

IP 形象和图标，是两套完全不同的设计语言，很多新手混淆二者边界。 直接把完整卡通 IP 形象（比如打篮球的小牛）直接用作图标，人物细节繁多、动作复杂，缩小之后识别度暴跌，画面幼稚臃肿。 IP 设计本身难度很高，还没吃透图标基础，强行二者融合，属于给自己叠加双重难度。

正确思路

1. 新手优先分开练习：图标归图标，IP 归 IP，先分别吃透两套逻辑，再考虑融合。
2. 如果想要增加趣味，可以做轻度拟人化：给图标本体简单加上表情，不要叠加完整人物肢体。

案例对比：露营主题图标，优化前比例失衡、色彩曝光；优化后修正形体比例，统一光影质感，仅保留简单表情点缀，兼顾趣味和图标属性。

高阶玩法：成熟的 IP 融合，是 IP 形象与功能符号深度结合（羽毛球 × 鸵鸟、场记喇叭 × 老鹰），这需要扎实的 IP 绘制功底，不适合入门练习。

转载：优设

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

兰亭妙微ui设计公司分享：iPhone Duo 正式亮相，本文不聊硬件参数，也不做选购分析。随着折叠设备市场占有率持续走高，折叠屏 UI 适配已经成为移动端设计师无法回避的课题。

近段时间，折叠新品密集发布：竖向折叠代表有 VIVO X Fold6、OPPO Find N6；大屏阔折叠阵营，也迎来华为 Pura X Max、Xiaomi 18 Fold 等新机。

过往安卓厂商虽持续迭代折叠产品，但对整个行业的带动作用相对有限。而苹果入局折叠赛道之后，局面将会彻底改变。依托苹果强大的品牌声量与用户基础，折叠屏的大众热度与市场普及度，将会迎来新一轮快速提升。

这就意味着，UI 设计师在项目前期搭建界面框架、制定设计规范阶段，就必须将折叠屏适配纳入考量，提前规划适配逻辑，避免后期返工。

转载：优设

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

兰亭妙微ui设计公司分享：随着 AI 绘图能力飞速迭代，很多界面效果它都能快速生成。但适配国内业务场景的高阶 UI 组件，AI 往往很难交出合格答卷，国外设计师直接上手也容易水土不服。

这并不是工具本身的局限，更多是国内 UI 从业者的能力缺口：如果缺少复杂组件的设计能力，很难承接进阶业务需求，也达不到大厂岗位的能力要求。本文将结合实操案例，拆解组件的基础逻辑与进阶设计方法论，帮你补齐 AI 无法替代的核心竞争力。

一、分清两类组件：标准化基建 vs 自定义创作

UI 界面里的组件可以分成两大类别：

1. 标准化基础组件：拥有成熟命名与固定范式，属于界面基建。像瓷片区、弹窗提示、动态卡片、用户列表、底部导航栏都属于这一类，设计时更多是遵循规范临摹落地。
2. 自定义特殊组件：没有统一命名、没有固定样式，例如专题活动模块、会员卡片、排行榜、横向运营列表等。

真正考验设计师能力的，就是这类无固定模板的组件设计。没有现成参考，需要自主做判断、构思与创作，也是新手进阶路上最大的难关。

 

想要提升组件设计能力，可以分成三步：

1. 收集归类：大量收集优秀组件案例，整理到 Eagle、花瓣等素材库，拓宽设计眼界；
2. 掌握基础框架：吃透组件底层排版框架，守住界面视觉下限；
3. 积累视觉细节手法：学会丰富画面表现，完成高阶创意表达。

守住视觉下限：简约基础组件设计要点

简约不等于简单，基础组件决定页面的底线效果。即便没有花哨特效，只要做好下面几点，界面就不会翻车：

• 合理完成内容元素排版，信息层级清晰；
• 把控好元素尺寸、字号，参数统一规范；
• 内外间距设置合理，留白克制有序；
• 选用高质量、风格统一的图标与图片素材。

底层逻辑：把各类元素，以正确的尺寸、间距摆放到对应位置，再搭配合适的素材。 如果基础排版、间距、尺寸没有处理到位，再堆砌特效、图形、创意，只会让页面更加混乱。

文中以山姆会员页作为修改案例：改版前页面特效繁杂，但元素尺寸混乱、间距失控。先剥离花哨样式，校准间距、字号、布局，输出简约版本。优化之后，即便不加任何装饰，页面已经达到合格水准，信息清晰整洁。

二、组件进阶设计：6 大突破方向（逆向设计思维）

国内互联网产品竞争的核心之一，是争夺用户注意力。朴素的基础组件容易平淡，运营类页面就需要打破常规，做出更抓眼球的效果。

进阶设计的底层是逆向思维：先吃透标准的设计规则，再有意识打破固有范式；前提是基础能力过关，否则你都不知道自己在打破什么规则。

一共 6 个常用进阶手法，可以单独使用，也可以组合叠加到同一个组件中：

1. 边缘轮廓的异形处理

不局限于标准直角矩形，对卡片轮廓做改造：局部增加弧度、边角切斜、边缘做凹陷、折叠缺口等，打破死板的方框感，制造形态趣味。

案例：将会员卡片外层矩形做缺口折叠造型，跳出常规卡片形态。

2. 特殊字体标题的应用

标题放弃普通系统字体，选用风格化的定制标题字、品牌 VI 字体，强化主题氛围感，让标题信息更加醒目突出。

3. 悬浮标签 / 图标元素应用

打破横平竖直的布局约束，让标签、小图标悬浮、轻微旋转，部分元素溢出卡片边界，制造视觉冲突感。

案例：开通会员按钮外侧增加气泡悬浮标签，展示 “低至 0.72 / 天” 优惠信息，不侵占按钮内部空间。

4. 镂空突出的图片元素

把图片 / 图标主体抠出，让图形突破容器边界，不再完全被矩形、圆形框死，营造更强空间层次感。

5. 渐变和图片背景应用

跳出纯色背景的局限，使用精致渐变、低透明度背景图叠加。拒绝简单双颜色粗暴过渡，也不直接硬贴摄影图；通过色彩、蒙版、透明度叠加，打造细腻的背景氛围。

6. 特殊视觉效果的添加

适度增加质感特效提升表现力：毛玻璃、玻璃拟态、轻拟物、2.5D、水晶质感、高光模糊等。

注意：特效是加分项，切忌滥用堆砌，优先保证信息可读性。

实操示例：山姆会员卡片完整进阶改造，依次叠加：异形轮廓→品牌标题字体→悬浮优惠标签→突破容器图标→渐变背景 + 底图→毛玻璃 + 轻拟物高光，完成从朴素模板到高级运营组件的完整升级。

三、高效训练方法，快速提升组件能力

想要熟练掌握以上手法，最快路径就是：收集→归类→临摹

1. 收集：广泛搜集各类优秀组件，积累素材库，见识足够多的表现形式；
2. 归类：按照组件类型、表现手法建立素材分组，建立自己的设计资料库；
3. 临摹：挑选优质案例复刻，在实操中理解布局逻辑，把技巧内化成自己的能力。

转载：优设

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

兰亭妙微ui设计公司分享：新手引导不能只停留在“教操作”的层面，更得想办法留住用户，让他们愿意一直用下去。今天就来聊聊，如何设计新手引导体验，确保产品能获得用户认可～
 
一、 5种新手引导界面模式

①欢迎提示

②分步提示

③气泡提示

④弹窗提示

⑤漫游式引导

 
二、4种新手引导类型

①强制式引导

②可选式引导

③渐进式引导

④沉浸式引导

 
三、4个新手引导设计原则

①尽快让用户get到核心功能点
②尽量减少用户负担

③鼓励用户在自己的节奏里熟悉产品

④分析使用路径，找对引导时机
 
新手引导不仅仅是介绍功能，更是帮助用户“适应”产品的过程。新手引导体验的核心目标是让用户自然学习逐步了解核心功能，不打断使用流程，更不会感到“学习过程”的负担。

转载：优设

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

兰亭妙微ui设计公司分享：临睡前拿起手机刷短视频，明明只打算看几条就休息，一晃眼一两个小时已然悄然流逝。为什么我们总是会陷入 “越刷越停不下来” 的困境？短视频产品背后，藏着一套精巧的交互心理逻辑。本文拆解 4 种极易让人沉迷的交互手段，同时探讨回归用户本心的良性设计思路。

一、让人不知不觉沉浸其中的 4 类典型交互

滑动翻页、下拉刷新、等待加载…… 很多时候我们完成这些操作几乎不需要思考。这些被精心打磨的交互机制，持续攫取用户注意力，诱导我们无节制地使用产品。

1. 无限滚动

无限滚动移除页面末尾边界，依托算法源源不断推送新内容，只要持续上滑，就永远有新的信息流呈现在眼前。

这种设计广泛应用于短视频、图文 Feed 流。它会催生用户害怕错过的心理，让人不断期待 “下一条会更有趣”。省去手动翻页的同时抹除结束节点，驱动用户不间断消费内容，时间就在无意识滑动中消耗殆尽。

2. 自动播放

看完一条视频自动接续播放下一条，表面上简化操作，省去手动点击播放的步骤。但本质上，在你尚未做出 “要不要继续观看” 的判断前，产品已经替你做好选择。

用户被动进入连续观看的循环，很难主动抽身。除此之外，视频片尾推送「更多相似内容」，也是一套拉长退出时长的设计技巧。

3. 下拉刷新

下拉刷新最早诞生于海外社交平台，初衷是便捷获取最新资讯。但如今该功能被过度运用，演化成一种行为习惯。

如同无限滚动，用户形成肌肉记忆，会反复下拉页面，期待刷新出意料之外的新鲜内容。这种不可预测的惊喜反馈，不断勾住用户反复操作，很难主动停下。

4. 点赞评论、消息通知的红点反馈

社交产品随处可见的 “99+” 徽标红点，总会勾起人的点开欲望。

红点徽章的原始作用，是提醒用户不要遗漏重要消息。但过量红点会带来无形心理负担，制造 “还有事情没有处理” 的压迫感，催生焦虑，驱使用户反复点开 App 查看消息与互动。

优化参考：部分产品已经给出解决方案，例如一键清空全部未读红点；微信支持仅接收好友互动提醒，过滤无效红点干扰。

二、交互功能的两面性：便利与 “暗黑模式” 一线之隔

交互设计的内核，是通过心理引导改变用户行为。但一旦越过边界，剥夺用户自主选择权，迫使用户进行无意义重复操作，就不再是优质体验，而属于暗黑模式（Dark pattern）—— 即刻意误导、操控用户决策的设计手段。

表格

实用设计和诱导套路的边界十分模糊。当产品一味追逐用户停留时长，疯狂推送海量相似内容，而非帮助用户主动挖掘高质量内容时，就会出现这种现象：刷了很久内容看似热闹，放下手机却毫无收获，时间白白耗费。

不少业务把播放量、点击量、在线时长作为核心考核指标，倒逼产品想方设法留住用户。但短期亮眼的数据，往往和长期用户体验互相冲突。只追求把用户 “耗在产品里”，长远会消耗用户信任，损害品牌口碑，最终反而流失用户。真正好的产品，应当着眼长期用户价值。

三、回归本心：3 条良性引导的设计原则

① 设置终点，交还用户决策主动权

可以为 Feed 流设计明确的结束节点。对比永无止境的无限滚动，拥有边界的内容流，更利于用户聚焦内容本身，提升内容可信度，让用户拥有主动退出的选择权。

② 适度反馈，拒绝过载刺激

适度反馈能够鼓励用户互动；可当消息、徽章反馈给用户带来焦虑疲惫，就应当调整设计，避免反馈泛滥。

③ 多一份真诚，少一点套路

通知、内容推荐应当以有效信息传递为核心，减少情绪化营销话术。类似 “再不看就过期”“错过就亏了” 这类套路，短期可以提升点击率，长期只会消耗用户好感，引发反感。

转载：优设

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

兰亭妙微ui设计公司分享：随着移动互联网全面普及，B 端业务早已不再局限于 PC 桌面端。如何做好 B 端产品移动化改造，真正匹配业务人员真实诉求，是很多产品与设计师需要面对的课题。本文将以门店通 —— 汽配门店管理系统为实战案例，梳理 B 端产品移动化完整设计思路与落地方法。

一、B 端产品移动化的时代背景

移动办公已经成为主流工作模式。根据艾瑞咨询相关行业报告，截至 2021 年 6 月，国内手机网民规模达 10.07 亿，占全体网民比例 99.6%。用户使用习惯的变迁，倒逼 B 端服务从桌面端向移动端延伸。

传统 PC 办公受地点、设备约束，很难满足随时随地办公的现实需求。而 B 端移动化的核心价值，就是以轻量化能力，打破时空限制，帮助企业降本增效，让业务人员可以随时随地完成工作。

但这里有一个关键认知：B 端移动端不是 PC 页面的简单缩小复刻。PC 端依靠大屏、键鼠，擅长处理复杂报表、批量配置、高复杂度业务；移动端优势在于灵活便携，适合碎片化、即时性业务。B 端移动化，应当聚焦高频的「查看信息」和「简易业务处理」，复杂权限校验、多步骤深度配置、海量报表处理，依旧留给桌面端完成。

B 端业务两大核心场景：查看与处理

抛开行业差异，绝大多数 B 端工作流程，都可以归为两类基础场景：查看信息、业务处理。

1. 查看：获取业务数据、读取业务状态，常见形式为表格、图表、数据面板、业务模型，帮助用户掌握经营、生产、销售等各类信息。
2. 处理：完成业务操作，对应增删改查、流程审批、基础配置、数据分析等动作。

以汽配门店举例：管理者查看门店经营营收数据，员工查看生产工单信息；获取信息之后，二者再根据业务需要执行对应的业务操作。

二、B 端移动化四大核心设计原则

结合门店通项目实践，我们将 B 端移动端设计拆解为 4 大原则：保持一致、聚焦核心、保证易用、个性化适配。

原则 1：保持一致 —— 多端体验协同，而非简单复制

一致性不等于直接照搬 PC 端界面框架。真正要调和的，是大屏 vs 小屏、键鼠 vs 触控、两套用户心智模型之间的矛盾，从视觉、交互、体验三个维度实现多端对齐。

1. 视觉一致：守住品牌基因 保证 Logo、品牌色、字体、文案规范统一，强化品牌感知，提升用户信任感。 门店通以黄色作为主品牌色，移动端延续这套视觉体系；业务组件采用白、浅灰作为基底，品牌色做局部点缀；保留业务功能图标，在保证识别性前提下降低设计成本。
2. 交互一致：相同场景，相同结果 遵循尼尔森可用性原则中的一致性标准：相同业务场景，操作逻辑、输出结果保持统一。 门店通订单完整流程为「开单 > 施工 > 完工 > 质检 > 结算」，无论 Web 端还是移动端，业务流转逻辑完全不变。移动端受屏幕限制，会隐藏弱化非关键字段，但订单状态文案、核心操作按钮，和 Web 端完全对齐，避免用户跨端产生认知割裂。

   

3. 体验一致：尊重平台原生操作习惯 页面结构不必强求一模一样，但要适配设备原生交互范式。 Web 端空间充足，使用侧边导航平铺全部菜单；移动端空间有限，遵循手机系统设计规范，把功能归类收纳到「更多」模块。功能归类逻辑和 Web 端保持统一，同时适配移动端用户的使用习惯。

   

原则 2：聚焦核心，做信息重构与层级强化

移动化切忌全盘搬运 Web 端功能。需要回归移动端真实使用场景，筛选高频核心能力，做信息重构。

① 信息重构：精简单页信息量

PC 大屏可以平铺全部字段，移动端用户很少主动翻阅屏幕之外的内容。核心信息必须做到一屏可见。

• 非必要字段折叠收纳，放在「更多信息」内，减少页面信息噪音；
• 字段数量过多时，使用步骤条拆分长表单，分步完成操作。

门店通表单录入场景，将次要信息折叠收起，避免表单过长带来的视觉压力，简化填写流程，提升操作效率。

② 信息突出：建立清晰信息层级

筛选完信息之后，还要区分信息优先级。利用字号、颜色、权重，把用户最关心的内容凸显出来。 以订单详情页为例：Web 端可以平铺全部字段；移动端优先强化订单状态、订单金额、核心车辆信息，次要信息弱化展示，降低用户信息获取成本。

原则 3：保证易用，适配移动场景的特殊条件

移动办公常常伴随单手操作、环境嘈杂、网络不稳定等现实情况，设计需要充分包容这些极端场景，从操作、输入、反馈三方面优化体验。

① 操作便捷，适配单手触控

根据移动设备握持行为研究，手机底部与中部是拇指舒适操作区。重要操作按钮、高频控件，尽量放置在拇指可轻松触及的区域；把低频危险操作放在难触达的顶部区域。

② 尽可能减少手动输入

手机虚拟键盘输入效率远低于键鼠，设计要尽可能降低打字输入。 可以采用这些方案：扫码录入、选择器、滑块、步进器、关键词模糊联想匹配，用点选、扫描替代手动打字，减少输入负担。

③ 及时响应与状态反馈

用户操作后需要得到明确反馈，理想情况下操作反馈控制在 100ms 以内。移动场景还要考虑弱网、加载卡顿问题。

• 过渡反馈：骨架屏、加载动画，缓解用户等待焦虑；
• 结果反馈：Toast 提示告知操作成功失败；高危操作使用弹窗二次确认；
• 兜底状态：设计空页面、异常缺省组件，应对无数据、网络异常等场景。

原则 4：个性化设计，匹配不同角色用户

B 端产品一个设备往往对应多角色账号，管理者、一线员工关注的数据、功能完全不一样，需要做权限与使用习惯的个性化。

1. 内容个性化：按角色权限分发数据 门店通首页数据面板，根据账号权限展示不同指标：

   

• 门店管理者：查看营收、结算金额等经营类指标；
• 一线员工：只展示进厂、出厂、工单等生产类数据； 员工个人中心还可以查看个人绩效、提成统计，做到千人千面。

2. 行为个性化：支持用户自定义配置 面向付费门店，开放首页九宫格功能入口编辑权限。不同岗位员工，可以把自己高频使用的功能置顶，调整功能排序，适配个人工作习惯，进一步提升工作效率。

   

三、拓展：发挥移动端独有优势，补充 PC 端短板

移动端除复刻业务能力之外，还可以利用手机硬件、生态能力，补足桌面端的局限。

1. 硬件能力拓展

充分调用手机摄像头、GPS、蓝牙、推送、相册等硬件能力：

• 扫描车牌，自动识别车辆档案；
• 拍照上传施工、接车过程照片留存业务凭证；
• Push 推送，实时推送新订单、工单变更提醒。 这些能力是 PC 端很难便捷实现的。

2. 生态联动拓展

打通软硬件与第三方生态，实现场景联动：

• 硬件：连接蓝牙打印机，现场完成电子签字、单据打印；
• 软件生态：系统消息推送、微信公众号、小程序联动；顾客可以通过小程序查看车辆施工进度，接收保养提醒。

写在最后

B 端移动化不是把 PC 功能照搬到手机上，核心是取舍与适配：分清哪些业务适合移动端，哪些依旧留给 PC；在多端保持业务逻辑统一的前提下，针对小屏触控场景重构信息与交互；同时善用手机硬件与生态，创造桌面端无法实现的业务价值。

转载：优设

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

兰亭妙微ui设计公司分享：随着跨设备办公成为主流，B 端业务系统早已不再局限 PC 网页。手机、平板打破办公时空限制，业务人员可以随时随地处理审批、查看数据、完成业务操作。但B 端移动端不等于 PC 页面简单缩小，不能直接把 PC 端复杂功能全盘搬运到小屏设备。

本文将从设计认知、模块实操、项目落地三个维度，结合表单、列表、数据看板、工作台与医疗行业实战案例，完整讲解 B 端移动 App 该如何设计。

一、建立设计认知：认清多端能力差异

PC、Pad、App 三者是一套功能逐级下放的关系：屏幕尺寸越小，功能越要做减法，只保留角色的核心业务能力，剥离复杂配置、低频操作。

表格

以有赞美业工作台为例：

• 手机端：仅保留宫格形式核心功能入口；
• Pad 端：除功能入口外，直接展示待办业务内容；
• PC 端：完整呈现经营图表、批量操作、高级配置等全套管理能力。

不同终端，使用者角色、使用场景完全不同。PC 多是店长坐班管理店铺；Pad 给到前台员工接待使用；手机端则随时随地可用，家里、路上、门店都可能操作。移动端设计的核心命题，就是在有限屏幕下平衡操作效率与可用性。

二、核心模块实操：四大高频页面设计要点

B 端移动端最核心的四类页面：表单、列表、数据页、工作台，几乎覆盖绝大多数业务场景。

2.1 B 端移动端表单设计

B 端表单核心作用是数据录入，基础组成包含：标题、标签、必填标记、提示说明、输入区、操作按钮。

表单设计存在两种相反诉求：多数场景希望用户快速完成填写；资质审核、认证类场景，则需要引导用户审慎仔细填写。同时还要适配小屏幕空间约束、多语言国际化场景。

表单标签对齐方式，直接影响填写效率，眼动实验可以给到明确参考：

① 左对齐标签（左标签‑左内容）

优势：符合阅读习惯，适合陌生、复杂业务字段； 劣势：填写速度最慢，用户眼动跳转次数多； 适用：资质认证、金融申请，需要用户仔细阅读每一项内容的页面。

变体：左标签‑右内容。优化长标签空间适配，视觉整齐，但标签与输入框关联感减弱，更适合选择类录入。

② 顶对齐标签（标签位于输入框上方）

优势：阅读填写效率极高，眼动实验显示标签到输入框定位仅需 50 毫秒；对长文本、多语言国际化友好； 劣势：占用纵向屏幕空间； 适用：追求快速填写，字段数量不多的业务表单。

实践提示：不要固定一套对齐方案全局复用，根据业务目的做选型。

2.2 B 端移动端列表设计

列表用于信息浏览、检索、快速操作，基础构成：卡片容器、搜索、筛选。

• 卡片：移动端优先使用卡片组件，可以承载丰富信息与操作，适配多端适配；
• 筛选：帮助用户在海量业务数据快速过滤，降低信息查找成本；
• 搜索：支持关键词直达目标条目。

列表视觉差异化：向真实业务场景借鉴

可以借鉴现实纸质单据的视觉语言，缓解纯数据页面的冰冷感。 例如途牛商旅复刻纸质差旅审批单线条样式；医鹿模拟病历本装订细节；饿了么商家版模仿外卖小票样式。把真实业务载体的视觉特征迁移到界面，让业务人员更容易理解。

2.3 B 端移动端数据页设计

移动端数据页面 = 核心指标统计 + 可视化图表卡片 + 筛选器 + 明细列表。 数据统计一般采用「主指标 + 辅助指标」结构；图表则把抽象数字图形化，降低理解成本。

激励性数据设计

国外电力公司曾做过经典案例：向用户推送对比邻居用电情况的条形图表，仅仅通过数据对比可视化，就实现用户平均用电量下降 2%。 核心思路：不只是陈列数字，通过对比参照，传递业务状态，引导用户行为。

移动端图表取舍

手机屏幕狭小，图表要做取舍：

• 直角折线：数据精准，适合需要精确读数场景；
• 平滑曲线：弱化细节误差，降低用户认知负担，侧重感知趋势；

移动端很多看板场景，优先传递趋势感知，而非绝对精准读数，可以简化 Y 轴刻度，换取更好视觉体验。

2.4 B 端工作台：产品价值的门面

工作台是用户进入产品后的首页，承担快速掌握工作进度、直达业务功能的作用，是产品体验与视觉体系的核心阵地。

以医蝶谷医生端改版为例： 业务层面 旧版首屏大比重给到极速问诊抢单，对于接单慢的新手医生体验不友好；改版收起抢单模块，把问诊待办整合首页，所有医生打开首页即可直观掌握工作任务。

视觉层面 弱化工具图标强视觉，减少干扰，把视觉重心留给待办、消息等高价值业务信息。

工作台设计不能只堆功能入口，要回归角色真实工作流，优先展示用户当下最关心的业务信息。

实战案例：医疗医生端排班设计

医生工作特征：突发事务多、工作多线并行、任务复杂（手术、查房、接诊、写病历），排班往往不是固定周循环，存在大量碎片化、不连续时段。针对该业务特征，设计落地三条策略：

1. 优化层级，提升屏幕利用率 列表采用顶对齐布局，压缩无任务空白时间轴，无需反复滑动，首屏即可看到晚间排期。
2. 色彩标签传递信息，克制视觉元素 放弃复杂业务图标，使用轻量化颜色标签区分不同问诊类型，提升查找效率。
3. 简化操作路径，减少步骤损耗 优化前添加 3 段不连续排班，需要 12 步操作；优化后压缩至 4 步完成，大幅降低操作负担。

B 端设计必须扎根行业真实工作场景，行业壁垒越强，越需要深度调研业务角色，而不是套用通用组件模板。

三、从设计到落地：设计师与开发协作避坑

B 端移动大多基于 H5、RN 技术实现多端复用，设计输出时，不能只交付视觉稿，还要考虑技术实现、性能、规范落地。

3.1 搭建页面框架，实现并行开发

不必等全部视觉完成再交付。先输出页面框架线框图，开发先行搭建 DOM 页面骨架；后续再交付视觉标注完成 CSS 样式还原，有效缩短项目周期。

3.2 图片资源优化，降低服务器与带宽压力

1. 素材尽量多处复用，减少新增图片资源；
2. 大图分层切图：把人像、主体元素和背景拆分，实测可以减少 50% 图片体积，同时支持跨页面复用；

图片越多、体积越大，用户加载越慢，服务器存储成本越高。

3.3 H5 环境常见坑点，提前和前端对齐约定

1. 空格占位符 （1 个空格）、 （半个汉字宽度）、 （1 个汉字宽度），文本换行间距，不能单纯靠 margin/padding，需要提前对齐规则。
2. 字重还原问题 PingFang 字体中 Medium（500）在 Web/H5 环境渲染失效，和常规字重几乎看不出区别。团队约定：设计稿 Medium，代码统一写font‑weight:600，保障粗细效果一致。

3.4 设计规范如何推动落地

很难依靠一个版本把全部规范整改完毕。设计师要具备项目管理思维：

• 将规范需求拆分、评估优先级，分版本迭代上线；
• 使用排期跟踪表格，记录需求、负责人、版本、上线时间，同步 PM 与研发，持续跟进落地。

写在最后

B 端移动 App，不是 PC 端的缩小版。 优秀的 B 端移动端设计，始于对业务角色真实工作场景的理解，中间依托表单、列表、图表、工作台等组件合理选型，最后还要兼顾技术实现、性能、规范迭代，才能真正给到业务人员高效好用的工具。

转载：优设

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

兰亭妙微ui设计公司分享：做 UI 设计时，我们常会绘制一些看不见的透明背景框辅助排版。即便你没有主动做过这类操作，打开成熟项目的源文件，也总能发现它们的踪迹。

这个知识点看着不起眼，却是落地项目里至关重要的底层能力。不少学员都曾为此困惑，本文就系统拆解 UI 背景框的设计逻辑与实操方法。

一、UI 里的隐形边框，从何而来？

UI 设计不等同于纯平面创作，它属于软件工程的一环，必须遵循标准化制图规范，才能保障设计方案顺利交付开发。

制图规范不是设计师凭空制定，而是由前端的实现逻辑决定。想要吃透 UI 制图规则，就要先理解前端基础工作逻辑。

前端工程师负责实现用户可见的界面与交互效果，设计师输出的稿件，就是前端开发最核心的参考依据，二者需要高频协作交付成果。不同开发平台语言各不相同，但界面渲染的底层逻辑高度统一，我把它概括为：矩形堆叠布局模式。

简单来说：整个软件界面，是无数矩形模块排列、嵌套、拼接组装出来的。所有视觉元素，都要先收纳进矩形容器内，再完成页面拼装；排版对齐的依据是容器边界，而非图形本身的外形轮廓。

网页端这类容器叫 Div，移动端称之为 View，名称有差异，但核心作用一致。前端会为容器定义宽高、定位等参数，完成界面布局。容器支持多层嵌套：子元素装入父容器，父容器再归入更高层级的容器，层层构建完整页面。

UI 四大基础元素：形状、文本、图标、图片，全部拥有对应的容器边界：

• 形状：例如带圆角的色块组件，外层会包裹一层无圆角的父级矩形容器；
• 文本：文本本身自带矩形容器，文本框区域就是它的占位边界；
• 图标：哪怕图形轮廓不规则，排版时也会套入固定尺寸矩形容器；
• 图片：本身就是矩形资源，需要置入图片容器完成渲染展示。

元素完成之后，再通过父容器完成分组。譬如卡片内部，把上方信息区、左下模块、右下模块分别编组，合并为完整信息模块；信息模块搭配左侧图片模块，组成单张商品卡片；多张卡片再组合，生成完整的卡片列表。

有 Figma 使用经验的同学会发现：这和我们搭建组件的流程一模一样。Figma 的图层编组、Frame 框架、Auto Layout 自动布局，本质都是在模拟前端真实的布局逻辑。

当然设计工具和开发实现不会 100% 对等，但设计稿的结构越贴近前端容器逻辑，还原度越高，开发成本越低；反之则容易出现视觉偏差，增加沟通改稿成本。

这就是为什么我们要在稿子里绘制这些看不见的矩形背景框：对齐开发逻辑，缩小设计与落地之间的鸿沟。

二、背景框该如何设置？

理解了来源，接下来讲落地规则，我们从底层基础元素，向上延伸到父级模块。

1. 基础元素：文本与图标的背景框规则

形状和图片本身自带矩形边界，无需额外处理，重点关注文本、图标两类元素。

文本

文本的占位容器由排版模式和行高共同决定。对应 Figma 文本 Layout 三种模式：自动延展、固定宽度、固定尺寸。

实际开发中，只有极短文本适合自动向右延展；绝大多数场景，都要给文本设置固定宽高约束。举个例子，商品标题字数不可控，如果不限制容器宽度，文字会无限横向延展，破坏页面布局，因此必须设置固定宽度。

另外很多新手会踩坑：为了视觉对齐，强行把行高设置成和字号相等。这是错误做法。单行文本里，行高决定文本容器的整体高度，容器天然会在文字上下留出留白。不管文字本身轮廓多大，设计和前端对齐，都以文本容器边界为准，而不是文字笔画本身。

图标

图标的容器逻辑，可以类比汉字的田字格。 同样字号下，汉字 “一” 外形扁，“囊” 笔画繁复，但二者占位空间完全一致，不会因为字形大小改变排版位置。图标同理，同规格图标，必须统一外层矩形容器尺寸，排版对齐参考容器边框，不能按照图标图形本身轮廓去对齐。

2. 父级模块：固定尺寸 vs 自适应尺寸

父容器分为两大类型：固定尺寸模块、自适应尺寸模块。

固定尺寸模块

在设计之初宽高就已经确定，典型代表：顶部标题栏、工具栏、底部导航、操作栏。

尺寸大多参考官方组件规范。即便不直接复用官方组件，功能相近的模块，也尽量沿用既定数值，避免随意新增尺寸。这是行业沉淀下来的共识，保障整套产品视觉体系统一。

固定容器还有一个核心价值：作为子元素对齐基准。比如设计顶部标题栏后，栏内所有元素，直接依托这个容器做顶对齐、垂直居中，而不是靠元素之间的间距去推算位置。

自适应尺寸模块

UI 项目里占比更高，容器大小由内部内容决定。 比如动态内容卡片，内部可能嵌入图片、视频、多行文案，内容长度不可预知，卡片高度就不能写死，要跟随内容自动伸缩。

还有一类场景：模块功能确定，但内部内容还没设计完成，无法预先定义容器大小。面对复杂信息模块，我们一般先完成内部元素排布，再叠加内外边距，反推容器最终尺寸。

重点提醒：容器不一定需要填充背景色。无底色模块、列表组件，同样需要绘制隐形矩形容器做排版基准，不能直接拿最上层、最下层元素的边缘来计算间距。

页面就是组件不断拼装的结果。合理搭建背景框容器，能够提升组件质量，优化排版效率，保证视觉一致性，也是搭建项目组件库的重要基础。至于 Figma 选用 Frame 框架，还是普通编组 + 矩形图层实现，属于个人习惯，并非核心问题。

转载：优设

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

兰亭妙微ui设计公司分享：UI 设计里，图标是界面信息传递的核心载体。很多设计师会直接套用图标库、依赖 AI 生成图标，但想要做出一套风格统一、适配业务、可落地交付的图标，就必须吃透底层绘制参数与设计规范。本文基于 Material Design 体系，整理一套可直接上手的图标设计完整参数，帮你避开图标绘制常见坑。

一、UI 图标三大核心分类

界面设计偏向排版布局，重在元素组合，入门门槛较低；而图标设计属于图形创作，需要手动绘制图形，学习曲线更陡峭。不同类型图标，设计逻辑、绘制技法差异巨大，首先分清图标类型，才能选对对应的规范。

UI 图标主要分为启动图标、工具图标、装饰图标三类：

1. 启动图标：应用入口标识，也就是手机桌面 App 图标。一般由背景底板 + 图形主体构成，主体可以是品牌 Logo、图形符号、插画、特殊字体等，不同操作系统有各自严格的尺寸与裁切规范。

   

2. 工具图标：产品内部高频使用的功能符号，例如关闭、收藏、点赞、设置、播放等，以线性、面性样式为主，是 UI 设计师必须掌握的基础能力。

   

3. 装饰图标：用于烘托页面氛围，提升视觉表现力，常使用 3D、毛玻璃、插画、拟物等复杂视觉效果，多用于空状态、运营活动页面。

   

学习建议：遵循由易到难，优先吃透工具图标，再进阶学习装饰图标、启动图标。

为什么不能只靠图标库与 AI 生成图标？

不少新人会有疑问：网上现成图标库资源丰富，AI 也能快速出图，为什么还要手动绘制图标？

1. 图标库存在同质化，无法匹配品牌需求 开源图标库被大量项目复用，辨识度过高，很难贴合产品独有的品牌调性；项目中还经常出现库内没有的定制图标，现成素材无法覆盖全部业务场景。

   

2. AI 生成图标落地缺陷明显 AI 擅长复杂创意图形，但基础功能图标往往细节崩坏；并且输出大多为位图，很难得到干净可用的矢量源文件，无法给到开发进行迭代交付。

   

真实项目中，定制图标需求是常态，素材库与 AI 只能作为辅助，掌握手绘图标能力，才能从容应对多变的业务需求。

二、工具图标核心设计规范

提示：工具图标规范属于行业参考建议，并非强制约束。不同设计系统会有各自的标准，下面以接受度最高的 Material Design 规范作为基准讲解。

1. 画布、内间距与格线系统

画布尺寸

常用画布区间：12‑48px，优先选用 4 的倍数；24px 是工具图标最通用画布尺寸，项目可根据组件场景定义多套图标尺寸。

内间距（出血边距）

作用：给图形预留呼吸空间，避免图形撑满画布，视觉上拥挤失衡，类似写字不能写满田字格。

• 24px 画布：内间距 2px，有效绘图区域 20px
• 小于 24px 画布：内间距 1px
• 大于 24px 画布：内间距 3‑4px

   

视觉基准格线系统

格线由圆形、正方形、垂直矩形、水平矩形组成，用于统一整套图标视觉重量，避免图标大小观感参差不齐。 以 24px 画布举例：

• 圆形：20px（与绘图有效区域一致）
• 正方形：18px
• 垂直矩形：16×20px
• 水平矩形：20×16px

其他画布尺寸，可按照这套比例逻辑，等比缩放建立专属格线。绘制图标时，参考格线校验图形大小，保证整套图标视觉均衡。

2. 图形核心参数速查表

✅ 线性图标

1. 描边粗细：1 / 1.25 / 1.5 / 1.75 / 2px；以 0.25px 作为递进档位，不必局限整数，解决线条要么过粗、要么过细的痛点。
2. 描边位置：统一居中描边 描边分为外描边、居中描边、内描边。内、外描边仅适合闭合路径，图标大量存在非闭合路径，全局居中描边兼容性最好。
3. 外圆角：0.5‑4px；整套图标圆角档位保持统一，保证外轮廓圆润感一致。
4. 内圆角（阴角）：0‑0.5px；内侧转角优先锐角，最多给到 0.5px 圆角，禁止和外部圆角数值相同，否则图形结构会臃肿变形。

✅ 面性图标

镂空线条：1‑4px，直接取整数设置。镂空属于反向挖空，视觉感受和普通描边不一样，不要直接套用线性图标的描边参数。

转载：优设

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