兰亭妙微ui设计公司分享：小屏幕并非筛选体验的原罪，合理的交互设计，可以在有限空间内兼顾效率与易用性。本文将从痛点、布局选型、刷新策略、优化技巧四个维度，完整拆解移动端筛选的设计思路。
移动端筛选的困境，不只是物理屏幕的尺寸限制，而是多重问题叠加带来的体验损耗：
不同的抽屉 / 浮层布局，适配不同的业务目标，没有绝对的优劣，关键看用户任务与筛选条件量级。
筛选入口放置页面顶部，符合用户自上而下的浏览习惯，和列表表头天然契合。 适合：筛选条件少、快速轻量筛选； 不足：面板高度有限，不适合条件极多的复杂筛选。
悬浮在页面内容之上，筛选按钮固定在底部热区，手指更容易触达；背景可保留原有列表内容，用户不会完全脱离上下文。 适合：绝大多数移动端列表场景，消费端、轻量 B 端都很常用； 要点：抽屉不要完全遮挡全部背景内容，保留一点页面预览。
筛选面板从屏幕侧边滑入，背景页面部分保留可见，用户可以对照原有数据做筛选决策，完整保留页面结构认知。 适合：筛选条件多，用户需要对照原始内容进行选择的场景； 不足：会占用横向屏幕空间，小屏下内容展示会受限。
把筛选面板铺满整个手机屏幕，给到充足操作空间，用户完成全部条件勾选后，点击「确定」再返回结果页。 适合：B 端企业级产品、需要一次性叠加大量筛选条件，用户目标明确、目的性强的查找场景； 不适合：边筛选边浏览结果的探索式查找模式。
选型小结： 轻量快速筛选 → 顶部 / 底部抽屉；需要对照原数据 → 侧边浮层；多条件批量勾选的 B 端业务 → 全屏筛选。
选完条件后何时拉取、更新列表数据，直接影响性能和操作体感，分为实时筛选、单项筛选、批量筛选三类模式。
每改动一个筛选项，立刻请求并刷新结果。
案例：Google Fonts，勾选、拖动滑块就即时更新内容。
移动端谨慎使用：每一次操作都触发页面重渲染，容易打断用户操作、意外退出筛选面板。 仅推荐：数据量小、性能极强，且筛选抽屉保持不关闭，后台静默更新结果的场景。大数据、B 端业务不建议采用。
关闭当前子下拉面板时，才触发结果刷新。
优势：减少无效请求，交互流畅；代价是对后端性能有一定要求。
全部筛选条件挑选完毕，用户点击面板「确定」按钮，统一提交请求，一次性刷新结果。 企业 B 端移动端首选方案。 用户可以从容浏览、叠加多个筛选条件，不会频繁触发接口请求； 局限：不适合漫无目的、边试边看的探索式浏览场景，更适配目标明确的数据查询任务。
筛选项过多时，切忌把所有选项全部平铺展示，会造成严重信息过载。
不要什么选项都塞进下拉菜单：
补充：如果数值跨度很大，滑块很难精准定位，建议增加关键数值自动吸附，同时支持手动输入数字，弥补拖拽精度缺陷。
当可选项数量多，逐个勾选效率极低。提供「全选」能力，支持「先全选，再取消少数不需要的选项」，大幅降低操作成本，打车、工单、订单类 B 端产品非常适用。
移动端以手指触控，不要照搬 PC 端细小复选框。放大选项点击区域，采用大按钮、大卡片形式，降低误触概率。
面向重度高频使用用户，支持把常用筛选组合保存为预设方案，一键调用。B 端业务中，运营、业务人员会反复使用同一套筛选规则，该功能可以显著提升效率。
很多团队会完全自定义下拉、弹窗、选择器组件，但往往会和浏览器、系统手势发生冲突，出现滚动异常、浮层错位等 bug，同时增加前端开发负担。
iOS、Android 原生控件经过大量打磨，适配系统手势、握持逻辑，用户学习成本最低。非特殊业务诉求，优先使用系统原生组件，避免重复造轮子。
移动端筛选体验的好坏，从来不取决于能塞下多少筛选项，而在于是否贴合用户真实使用场景。
做好触控点击目标、选对刷新请求逻辑、合理选用布局模式、善用系统原生能力。越理解用户的查询目标与使用习惯，筛选功能就越顺滑好用。
兰亭妙微ui设计公司分享：不少设计师做设计方案时，会把大量精力投入界面绘制与版式搭建，却忽略配图的价值。即便 UI 本身完成度很高，一旦配图选择不当，整个页面依旧容易显得廉价杂乱。配图绝非单纯的装饰元素，而是整套视觉体系中不可分割的组成部分。本文结合真实落地案例，梳理配图的评判标准、高频踩坑问题，分享 4 套可以直接复用的配图实践技巧，帮助提升设计方案的整体完整度。
选图不能单一评判图片本身的美观度，要结合页面整体环境综合考量，满足主体突出、风格统一、色彩均衡，才算得上适配页面的配图。
画面拥有明确核心主体，背景元素不宜繁杂喧宾夺主。 即便图片画质精良，倘若背景信息冗余、元素堆砌，嵌入页面后就会产生视觉噪音，干扰阅读重心。合格配图可以让主体一目了然；劣质配图会分散视线，造成页面臃肿混乱。
同一页面内的全部配图，在画面类型、构图方式、材质质感、拍摄视角、色调气质上保持协调一致。 配图风格割裂会带来强烈的违和感；统一的视觉调性，才能构建完整和谐的页面观感，这也是方案评审过程中，会被下意识捕捉到的审美细节。
适配性不只体现在图片自身，更要看置入 UI 界面之后，和周边组件的色彩兼容程度。 图片属于页面配色体系的一部分，不能孤立看待。当图片色调和界面元素互相冲突，就会打破色彩平衡，观感别扭，拉低整套设计方案的完成质量。
达到基础标准只能做到不出错，下面四类是设计工作里高频踩坑的配图类型，除非项目定位与之匹配，建议尽量规避。
AI 生成的摄影素材普遍存在模板化、脸谱化的问题，缺少现实真实质感。 套路感过重的 AI 图辨识度很高，容易让设计成果显得悬浮虚假。除非项目主题围绕 AI 展开，优先选用实拍素材或是原创绘制图像，减少 AI 配图的使用。
配图内部自带大段文字，字体粗糙简陋，类似文档直接截图粘贴的效果。 图片内部文字清晰度有限，还会和页面原生文字产生层级冲突，既阻碍信息阅读，也显得专业度不足。配图应当承担视觉载体的作用，不要用来承载文案输出。
抽象图形、趣味涂鸦在营销场景可以活跃氛围，但用于正式设计项目风险较高。 过于抽象的配图会模糊项目表达，让设计意图难以传递。仅当项目本身偏向趣味娱乐属性，才适合选用这类素材。
二次元插画、角色形象，很难和常规 UI 项目的视觉体系兼容。 如果产品赛道并非二次元方向，强行插入对应配图，会产生严重风格冲突，破坏界面整体性，降低阅读体验。
小提示：想要提升配图审美，不必局限于设计参考案例。多观察主流线上 App、小程序的商业配图，对比优劣实例，是训练选图判断力十分高效的方式。
避开常见问题之后，运用这 4 套实操方法，能够让配图成为加分项。方法均来源于成熟商业产品真实落地逻辑，并非空想概念，可以直接复用在各类设计项目。
成本最低且见效明显的手段。列表、多图模块全部采用一致底色或者同款背景，将多元内容收纳进统一视觉环境。 有效消除多张图片之间的割裂感，模块整体规整高级，十分适配商品列表、卡片流界面展示。
选用氛围感摄影素材，搭配品牌 Logo、标语，烘托品牌气质。 多用于品牌页面、首页、启动页、横幅板块，不靠繁复元素堆砌，依托光影与环境渲染项目调性，强化品牌氛围感。
使用一张大图跨区块填充，把页面中相互独立的模块在视觉上关联起来。 弱化模块之间生硬的分割边界，塑造页面视觉流动感，强化整体感，适合详情页、店铺首页这类多区块页面。
图片四周预留留白，把视觉主体收拢在画面中心；或是采用不规则镂空裁切。 留白放大主体表现力，赋予画面呼吸空间，摆脱矩形卡片的呆板感，丰富整体版式层次。
成熟品牌都会反复打磨配图，配图直接决定用户对于产品的感知。放到设计评审场景，审阅者同样会借助配图，判断设计师的审美能力与细节把控力。
与其一味搜罗炫酷参考图，不如多研究手机内真实产品的配图逻辑。从商业实例积累素材与审美认知，产出的方案才会落地务实，脱离脱离脱离空想式设计。
转载：优设
兰亭妙微ui设计公司分享：在从零搭建 B 端后台管理系统的项目中，我最初选择将侧边导航封装为组件，希望解决菜单后期频繁增删改查、全局样式同步的痛点。
但落地后却发现：仅仅简单封装组件，并不能实现预期效果 —— 无法做到全局一键同步更新，展开收起状态、菜单数量、图标、文字内容也很难灵活调整。
大厂设计系统的导航组件完全可以实现这类能力，于是我翻阅大量资料排查问题，最终找到症结：组件修改没有在母组件源文件操作，副本无法同步变更。
这里有一个关键认知：全局同步不等于机械复制粘贴。很多设计师的笨办法就是每一页设计稿重复复制、手动修改导航，一旦后期迭代，维护成本会成倍上涨。除组件同步之外，多端响应式适配也是 B 端导航的高频难题，背后隐藏着大量看不见的维护成本。
本文以 MasterGo 工具为例，围绕 B 端后台侧边导航，完整讲解设计系统组件搭建思路。
如今设备形态越来越丰富，除传统 Web 桌面端，折叠屏手机、平板设备越来越普及。设计师不能只输出单尺寸设计稿，必须重视响应式导航的自动化适配。统一的导航结构、流畅的适配逻辑，直接决定产品整体体验。
Web 端同样对响应式能力有强需求。例如 Arco Design 将侧边菜单宽度限制在 160‑400px，支持拖拽调整导航栏宽度；小红书网页版会根据浏览器视口自动切换布局，宽屏状态侧边导航搭配五列内容，窄屏时切换为底部固定导航。
✨基础概念区分 响应式布局：依靠流式布局 + 媒体查询，一套布局适配全部设备，随屏幕实时调整元素位置、尺寸。常见实现方案：流式布局、Flex 弹性布局、Grid 网格布局、媒体查询。
自适应布局：为手机、平板、桌面等不同设备预先设计多套固定布局，检测设备后加载对应版本。实现方案包含固定布局、流体布局、弹性布局、混合布局、栅格系统。
核心差异总结
动态导航，即支持交互反馈与自适应变化的导航组件。针对 B 端侧边导航，普遍面临 4 大痛点：
即便使用组件库，交付后依旧需要做设计走查，从四大维度校验样式一致性，修改源组件就可以实现全局同步。B 端侧边导航常见问题：
原子设计理论将界面拆解为最小不可拆分单元，通过拼装原子得到复杂界面，实现高复用、易维护的组件体系，分为 5 个层级：
概念辨析 组件化设计：将界面切分为多个独立可复用模块，范围更广。 原子化组件设计：是组件化设计进一步精细化，遵循：单一职责、高内聚低耦合、高复用、可自由组合、易维护、语义化、遵从设计规范。
拓展：原子设计由 Brad Frost 提出，相关参考资源
自动化布局依靠约束规则自动管控元素尺寸与位置，是实现响应式设计的基础。Figma、MasterGo、即时设计原生支持自动布局；新版 Sketch 也已上线该能力。
嵌套逻辑：先给最小元素设置自动布局，再把多个子组件放进父级自动布局容器，形成层级约束。
实操小技巧：设置约束前，先预判增删内容之后页面期望呈现的效果；也可以先建立固定容器，再开启自动布局。 举个例子：按钮高度固定，宽度跟随文字变化，则设置高度固定，左右内边距定值，水平属性设置为适应内容。页面级自动布局可以套用相同思路。
变体是同一个基础组件，修改尺寸、状态、颜色等属性生成不同形态，兼顾统一性和场景多样性，是设计系统灵活复用的关键。
通俗理解：基础组件是篮子，变体就是篮子中不同品类的蛋，按需直接取用，无需重复制作。
变体核心作用
变体设计原则
官网地址：https://www.arco.design/react/components/menu 组件分类：导航‑Menu 覆盖形态：顶部导航、深色导航、折叠内嵌菜单、悬浮菜单等；侧边菜单宽度区间 160‑400px，支持拖拽调整宽度。
基础原子图标组件 菜单折叠、展开图标，子菜单向下 / 向上 / 向右箭头图标。
变体组件划分 垂直一级菜单项、垂直收起菜单项、垂直分组、垂直二级菜单项；弹出一级 / 分组 / 二级菜单项；总菜单组件，支持切换垂直侧边、悬浮、水平顶部三种类型；每一类变体都可配置选中、悬停、禁用、子菜单展开、文本替换等属性。
设计逻辑 侧边导航由菜单条目、子菜单、图标、文本构成；整体分为展开、折叠两大模式；单条菜单包含默认、悬停、选中、禁用状态；同时支持亮色 / 暗夜主题。
B 端侧边栏大多承载 2‑3 级导航，功能模块多时建议做逻辑分组；一级导航普遍图标 + 文字，二级缩进展示文字，三级导航业务场景较少。菜单条目过多，可借助分割线、留白区分模块，高频重要菜单置顶展示。
导航规范文档：https://ant-design.antgroup.com/docs/spec/navigation-cn 布局组件文档：https://ant-design.antgroup.com/components/layout-cn
设计规范要点 侧边垂直导航扩展性更强，适合层级复杂、高频切换的后台系统；菜单数量大于 6 项优先选用侧栏导航，建议层级控制在 1‑3 级。
侧边栏采用左右分栏布局，主导航固定左侧，辅助操作放在顶部。优点是层级展示连贯，方便定位当前页面；缺点是会占用横向内容区域。同时定义完整响应式断点：xs:480px、sm:576px、md:768px、lg:992px、xl:1200px、xxl:1600px。
合理命名方便团队检索、维护组件库，大型项目建议使用前缀区分组件属性。
命名结构：
组件类型_位置层级_特性修饰词
常用关键词
示例： Nav_Side_Collapsible → 可折叠侧边导航 Nav_Top_WithSearch → 带搜索顶部导航
UserProfileuserNameuser_name；全大写蛇形MAX_LENGTH多用于常量。大厂设计规范文档高频使用。user‑profile，CSS 广泛使用。先定义整套系统底层基础 Token：
基于原子，组合出导航完整模块：
响应式模板关键要点
这篇笔记前后历时两个月完成，整理资料过程中了解到 Brad Frost 提出的亚原子设计（亚原子语义 Token），后续还会继续深入学习研究。 导航组件体系庞大，仍有不少知识点有待实践沉淀。
兰亭妙微ui设计公司分享：在 UI 组件体系中，按钮是使用频率最高的基础控件。看上去只是圆角矩形搭配文字，却承载着整套界面的交互逻辑。实际项目里不少设计师都会遇到类似困境：从专业角度判断按钮字号不宜过大，但业务方坚持放大文字，沟通过后只能妥协。一枚小小的按钮背后，藏着大量容易被忽视的细节，本文完整拆解按钮设计的知识框架与落地规范。
按钮的本质是触发即时交互行为的界面控件，并非单纯的视觉装饰。核心目的是降低用户决策成本，清晰传递 “此处可交互，点击后将发生对应行为”，主要体现在三个方面。
不同按钮对应不同行为优先级，页面内需要做好区分，避免层级混乱。
很多设计师只设计正常、点击两种样式，一套完备的按钮组件，需要覆盖交互状态与业务属性状态。
两种落地方式：一是直接置为灰色，属于行业通用做法；二是保留原有色相，降低透明度。禁用按钮视觉强度必须显著弱于可操作按钮，同时需要引导用户补齐前置条件，解除禁用限制。
页面同时出现多个高权重主按钮，会加重用户选择负担。产品追求低思考成本的体验，次要操作降级为描边按钮或文本按钮。弹窗对话框内这条规则尤为关键。
切忌使用过渡模糊的中间圆角，容易产生廉价违和的视觉感受。
按钮文案简短有力，优先使用动词，避免长句，禁止文字换行。文案过长应当优化文字表述，而不是单纯放大按钮尺寸。
按钮常用字号 12px、14px。文字占比失衡，会出现拥挤压抑或者空洞松散的问题，破坏界面精致度，这也是设计师与业务方经常产生分歧的地方。
如需增加投影，阴影色调尽量继承按钮本身色相，营造通透感。只有主按钮可以配置阴影，次按钮、文本按钮增加阴影会打乱层级，降低识别效率。
弹窗、表单模块内部，主、次按钮严格沿用组件库既定样式，不要随意修改描边、圆角、填充色，避免样式碎片化。
不要让按钮和卡片标题、标签、模块卡片外观趋同。一旦控件样式混淆，用户无法快速识别可点击区域，造成认知障碍。
暗黑模式已经成为标配，设计按钮时，同步校验亮色、暗色两套主题下的色彩对比度，保证可读性。
弹窗、确认对话框、表单提交场景，确认主按钮放置右侧，取消次要按钮放置左侧；普通业务页面可根据布局灵活调整，这也是解决团队设计分歧的实用原则。
可以参考这套尺寸逻辑：
按钮高度 = 文字行高 + Xn 按钮宽度 = 文字宽度 + Xn
n 为产品定义的基础间距单位，X 为自然数。这套逻辑同样可以复用到卡片、模块间距等组件规范搭建。
提示：按钮文字优先选用 12px、14px，避免字号过大。行业常用按钮高度：40px、36px、32px、28px、24px，可直接落地组件库。
按钮只是 UI 系统里一个很小的组件，但细节决定整体体验。无论组件体量大小，设计师不应当只输出视觉，更要思考样式背后的交互逻辑与用户心智。打磨好每一处微小细节，产品体验才能够持续提升。
转载：站酷
兰亭妙微ui设计公司分享：这张“认知偏差图谱”对 PM、UX/UE、 UI设计师 来说，简直就是一本《用户大脑操作手册》。 如果说编程是写给机器的代码，那么认知偏差就是写给人类大脑的“底层代码”。
这张图片展示的是著名的 “认知偏差这一图谱” (Cognitive Bias Codex)。这是一个系统性的知识图谱，由 Buster Benson 整理分类，John Manoogian III 设计。
核心逻辑是：人类的大脑不是为了追求“真理”或“逻辑完美”而进化的，而是为了“生存”和“效率”进化的。
这张图将180多种认知偏差归纳为人类大脑必须面对的四大核心挑战（Four Conundrums）。我们可以从这四个维度来深度解构：
世界上每秒钟发生的信息量不仅庞大，而且极其复杂，我们的大脑无法处理所有细节。
大脑必须进行过滤。它会激进地忽略绝大多数信息，只捕捉它认为重要的部分。
深度洞察： 在这一象限，所谓的“偏见”，其实是大脑的“降噪耳机”。
世界是碎片化的、模糊的。看到的信息往往是不完整的，但这让我们感到不安和困惑。
大脑是一个故事生成器。它会自动填补空白，强行寻找规律，哪怕这些规律并不存在。
深度洞察： 在这一象限，大脑是一个“编剧”，为了让世界看起来合理，它不惜虚构情节。
时间是有限的。如果我们在丛林里看到风吹草动，思考太久会被吃掉。在这个象限，速度 > 准确度。
大脑会牺牲精确性来换取自信和决断力。
深度洞察： 在这一象限，大脑是一个“赌徒”，为了不错失机会，它宁愿错判也不愿不判。
也就是存储空间有限。我们不能记住所有吃过的早餐。
记忆不是录像带，而是经过剪辑的摘要。我们只存关键帧。
深度洞察： 在这一象限，大脑是一个“吝啬的图书管理员”，它只保留它认为将来用得上的目录，而且经常把书名贴错。
对这张图的深度理解，不仅仅是背诵这些名词，而是认识到：
这些偏差在远古时代帮助人类活了下来。锚定效应帮我们快速比价，从众心理帮我们融入部落。
在现代复杂的金融、职场和社交环境中，这些原本用来“省电”和“保命”的快捷方式，变成了阻碍我们做出理性决策的Bug。
这张图的最大价值在于自省。当你下次想把所有的功劳都归于自己时，看一眼“自利偏差”；当你觉得某个投资肯定涨因为最近都在涨时，看一眼“近期偏好”。
核心价值：商业策略、定价模型、用户留存、决策避坑。
PM 往往背负着 KPI（转化率、留存率、GMV），需要从宏观层面设计产品的机制。
定价与营销策略 (利用锚定效应 & 框架效应)：
应用：
用户留存与活跃 (利用损失厌恶 & 沉没成本)：
应用：
需求挖掘与自我纠偏 (避免确认偏误)：
警惕：PM最容易犯 Confirmation Bias (确认偏误)。做用户访谈时，只听得进支持自己想法的声音。这张图提醒PM：你要寻找证伪的数据，而不是证实的数据。
核心价值：降低门槛、引导路径、减少挫败感、流程设计。
UX 的核心是“好用”，让用户不思考（Don’t make me think）。这张图告诉 UX 设计师大脑的“带宽”有限。
减少认知负荷 (应对信息过载)：
应用：
优化体验流程 (利用峰终定律)：
应用：利用 Peak-End Rule (峰终定律)。用户记不住整个流程，只记得最爽的瞬间（Peak）和结束时的感觉（End）。
实操：哪怕中间流程平淡，但在“支付成功”或“任务完成”的那一刻，要给出一个超棒的动画反馈或奖励，用户就会觉得整个体验很棒。
表单与信息架构 (利用序列位置效应)：
应用：利用 Serial Position Effect (序列位置效应)。用户倾向于记住第一个和最后一个项目。把最重要的功能放在菜单的开头或结尾，而不是中间。
核心价值：视觉焦点、信任感建立、情感化设计。
UI 需要在0.1秒内抓住用户的眼球，并传递正确的情绪。
引导视觉注意力 (利用冯·雷斯托夫效应)：
应用：利用 Von Restorff Effect (隔离效应)。在一组相似的元素中，那个“不一样”的会被记住。
实操：为什么“购买按钮”的颜色通常和背景色对比强烈？就是为了利用这个偏差，让大脑第一眼捕捉到它。
建立信任感 (利用美即好用效应)：
应用：利用 Aesthetic-Usability Effect (美即好用效应)。用户会觉得“长得好看”的界面“更好用”、“bug更少”。
实操：高级的排版和精美的插图不仅仅是为了美，是为了降低用户对系统错误的容忍度。
利用熟悉感 (利用单纯曝光效应)：
应用：利用 Mere Exposure Effect (单纯曝光效应)。人们喜欢熟悉的东西。
实操：UI 图标设计尽量遵循通用的设计规范（如放大镜代表搜索），不要为了创新而创新，陌生的图标会让用户警惕和困惑。
一句话总结：这张图展示大脑为了在这个复杂世界中生存，会通过”过滤信息、填补意义、快速反应、选择性记忆”四种方式来简化现实——这些认知捷径既是生存智慧，也是商家理解用户行为、设计消费体验的重要科学依据。
转载：人人都是产品经理
兰亭妙微ui设计公司分享：很多设计师会遇到这样的困境：明明元素都齐全，但整体界面观感粗糙廉价，想要优化却找不到切入点。本文结合真实改版案例，从头部 Banner、内容列表、全局布局三个维度，拆解一套可直接复用的界面优化方法。
Banner 是页面第一眼的视觉焦点，界面质感差，往往问题就出在这里。我们可以从图标、卡片色彩与投影两点着手调整。
原版 Banner 图标结构繁杂、色彩堆砌，阴影油腻浑浊，高饱和度投影让画面显得杂乱。 借助 AI 工具重构图标，优先选用造型简洁、轮廓明确的图形；配色做减法，以黑白为基底，搭配品牌主题色，弱化多余装饰，强化整体风格识别度，减少视觉噪音。
原始 Banner 卡片投影过重，卡片与背景边界模糊，渐变过渡生硬，卡片内容被背景吞没，文字辨识度大打折扣。
优化思路：
Banner 调整完成后，向下处理列表板块。列表常见三大弊病：图标风格割裂、卡片排版混乱、状态标识文字过小，导致信息层级模糊。
旧版列表图标色彩五花八门，质感、样式互不统一，和底部导航栏视觉语言脱节。 将全部列表图标更换为和导航栏保持一致的线面结合样式，整套界面图标体系统一，减少风格冲突，页面会瞬间变得整齐有序。
原版卡片内部字号层级过多，文字排布散乱；任务状态提示字号过小，用户很难快速识别任务进度。
优化要点：
局部细节打磨完毕，最后回归全局，解决底色、边距带来的廉价感。
原版大面积高饱和度浅绿色背景，视觉油腻，卡片和背景边界混淆。 保留头部小范围主题色渐变，主体背景切换为柔和浅灰色；头部色彩局部下沉，制造页面空间层次感，让 Banner、列表卡片从背景中 “浮” 出来，界面高级感立刻提升。
页面边距过大，内容区域被过度挤压，内容聚拢局促，缺少舒展的呼吸空间。 适度收窄页面左右边距，压缩顶部冗余空白，重新分配屏幕空间，让内容充分舒展，阅读体验更加舒适。
当你的界面看起来不够精致，不必直接推翻全部设计。可以遵循这套顺序：先打磨头部核心 Banner，再修复列表等内容组件，最后校准背景、边距等全局设定。从局部到整体逐步迭代，就可以低成本完成界面质感升级。
转载：站酷
兰亭妙微ui设计公司分享：随着跨端办公趋势不断深化，B 端业务早已不再局限于 PC 后台。手机、平板正在成为业务人员随时随地处理工作的重要载体，打破办公场景的时空束缚。但 B 端移动端绝非 PC 页面简单缩小，需要围绕移动端场景、角色、操作习惯做轻量化重构。本文将从设计认知、核心模块实操、项目落地协作三个维度，完整拆解 B 端移动 App 的设计思路与实战要点。
PC、平板、手机三端并不是简单复制，而是一套功能逐级下放的关系：屏幕尺寸越小，功能越聚焦核心，剔除复杂配置与低频操作，适配对应角色的真实工作场景。
表格
| 客户端 | 目标用户 | 功能特点 |
|---|---|---|
| PC 端 | 管理者、人事、后台运营等 | 功能完备，承载复杂业务逻辑、表单配置、全局数据分析，多用于固定工位深度办公 |
| Pad 端 | 销售、一线服务人员 | 删减复杂配置项，保留核心业务操作，适合半移动场景下查看任务、处理业务 |
| App 移动端 | 全角色通用（管理者、一线员工等） | 只保留各角色高频核心能力，做轻量化改造；使用场景碎片化：路上、现场、家中、门店内 |
以有赞美业工作台为例：手机端只保留宫格式核心入口；Pad 端在入口之外直接展示业务内容；PC 端承载完整数据看板、快捷操作与复杂管理功能。
设计启示：同样一套业务，不同终端的用户角色、使用目标完全不同，移动端设计的核心目标，是在保证操作效率的前提下兼顾可用性，而不是复刻 PC 全部能力。
B 端移动端高频页面集中在表单、列表、数据看板、工作台，下面结合行业案例拆解每个模块的设计策略。
表单由标题、必填标记、字段标签、提示文案、输入区域、操作按钮共同组成。 大部分表单追求快速完成，但部分场景需要引导用户审慎填写，例如资质审核页面、小屏适配、多语言国际化场景，这时标签布局方案就至关重要。
优势：贴合阅读习惯，适合陌生、复杂业务字段，引导用户仔细阅读内容； 劣势：长标签会拉大标签与输入框距离，拉长填写耗时。 眼动实验表明，左对齐标签填写速度最慢，适合资质认证、金融申请这类需要审慎核对信息的页面，刻意放缓用户填写节奏，降低出错概率。
变体方案：左标签‑右内容，优化长标签适配，视觉排布整齐；但标签与输入框的关联性减弱，适合选择类录入场景。
优势：阅读效率极高，标签到输入框视觉跳转仅需 50ms，比左对齐快约 10 倍；对长标签、多语言场景兼容性强； 劣势：占用更多纵向屏幕空间，适合字段数量不多的移动端页面。
选型总结：追求填写效率优先选顶对齐；需要用户仔细阅读、风险较高的业务，优先选左对齐标签。
移动端 B 端列表核心目标：快速查看信息、高效完成操作，由卡片容器、筛选器、搜索三大要素构成。
视觉差异化设计技巧： 可以参考真实线下单据的视觉语言做拟物化轻量化表达，消解纯数据页面的枯燥压迫感。例如途牛商旅复刻纸质差旅审批单线条、医鹿模拟病历钉扣样式、饿了么商家版模仿外卖小票样式，让界面和真实业务认知对齐，提升用户的理解效率。
移动端数据页面 = 核心指标统计 + 可视化图表卡片 + 筛选控件 + 明细列表。
参考经典电力公司案例：通过对比图表，向用户展示自身和周边群体的用电差异，利用对比感知驱动行为改变，最终实现整体功耗下降。这套思路同样可以迁移到 B 端产品，通过对比维度，让业务人员直观感知自身业务的好坏差距，激发优化意识。
移动端屏幕有限，图表需要做取舍：
工作台是用户进入产品的第一站，帮助用户快速掌握工作进度、直达高频功能入口，是产品体验、视觉规范的核心落地场景，千牛、飞书、医蝶谷均是典型代表。
改版实战案例 —— 医蝶谷医生工作台 旧版首页将极速问诊模块占据近 40% 首屏空间，对接单慢的新手医生不够友好；新版做业务与视觉双重优化：
医生工作具备三大特征：突发事务多、多任务并行、流程复杂（手术、查房、带教、接诊、写病历穿插进行），排班时间碎片化、无固定周期。针对该业务痛点，落地三条设计策略：
B 端设计关键启示：视觉好看只是基础，所有交互、界面优化，都必须扎根于真实业务场景与用户工作习惯，行业壁垒高的产品，前期深度用户调研必不可少。
多数 B 端移动端以 H5、RN 技术实现，便于多端复用。设计师不仅要输出视觉，更要理解前端实现逻辑，减少落地偏差，提升整体研发效率。
不要等全部视觉完成再交付，优先输出页面的底层框架线框图给到开发，研发可以先搭建页面 DOM 结构，之后再交付视觉标注，完成 CSS 样式还原，实现部分并行开发，节约项目工时。
图片资源会占用服务器存储，同时影响页面加载速度：
（1 个空格）、 （半个汉字宽度）、 （1 个汉字宽度），文本换行、间距实现需要提前和开发对齐规则。font‑weight:600，保障粗细效果和设计稿一致。
很难在一个版本完成全部规范整改。设计师需要兼具部分产品思维，对优化需求做优先级拆分，分版本迭代上线。 推荐建立排期跟进表格，记录需求描述、分类、版本、负责人、上线时间，明确状态，同步给产品、开发，持续跟进，避免规范只停留在设计稿无法落地。
兰亭妙微ui设计公司分享：2024 年，58 同城完成企业文化焕新，借此契机，产品迎来一轮全面视觉升级。项目确立四大设计原则：简单有效、美好安乐、多元融合、自然生长。这套理念不仅指导整体视觉改版，更是搭建产品与用户情感连接的内核。
在启动图标体系设计时，《道德经》中 “大方无隅” 的哲思带来重要启发：开放包容、和谐自然的内核，恰好与本次设计理念高度契合，也为整套图标体系定下创作基调。下面将从形、意、色、境、规五个维度，完整复盘 58 同城图标设计的实战全过程。
形态是图标设计的根基，不同轮廓会直接带给用户截然不同的感知。
方形代表秩序、规则与稳定，如同坚实的基石，承载产品体系的严谨；圆形象征包容、柔和与流动，传递产品面向用户的亲和姿态。 结合项目设计理念，我们将二者融合，打造方中有圆、方圆共生的基础图形语言。既保留产品的秩序感，又传递出与用户共生共存的温和气质。
58 同城业务线庞杂，每个板块都具备独有的业务特质。为此我们提炼专属业务符号，嵌入图标设计当中，强化业务辨识度，唤醒用户的业务认知，让图形不止是装饰，更是业务信息的载体。
线条风格延续方圆融合的设计基调，摒弃生硬锐利的直线，大量使用流畅弧线与曲线，贯彻和谐、自然、舒适的体验追求，统一整套图标气质。
图标是界面最直观的视觉符号，表意是否清晰，直接决定用户体验好坏。本次设计的核心目标：打造看得懂、能共情的图标体系。
坚持以用户为中心，优先选用大众具备普遍认知的物象。例如求职匹配公文包、工卡；二手车对应汽车；生活服务对应清洁工具。 这类符号无需额外解释，用户一眼就能读懂含义，降低认知成本。
在扁平化基底之上，增加适度光影与细节刻画，为图形赋予真实感与层次。既强化信息表意，也避免图标单薄空洞，让用户浏览时一目了然。
优秀的图标不止完成功能指引，更需要传递情绪价值。通过形态塑造、色彩搭配、细节打磨，给用户带来感官上的舒适愉悦，让用户在使用产品的过程中，感受到设计的温度与关怀。
色彩是图标强大的视觉武器，决定图标的吸引力与气质表达。
基于原有 58 品牌色做拓展迭代，由原先 4 种品牌色扩充为 5 套标准色，并且和各业务线做绑定适配。这套色彩体系具备开放、包容的特质，为品牌视觉注入全新活力。
将新色彩体系落地到图标当中，为不同业务图标赋予专属气质。通过色彩、图形虚实对比组合，强化风格辨识度，增加画面趣味性，让图标在繁杂界面中可以有效抓住用户视线。
作为大型平台类产品，图标不能一套样式通吃全部页面。合理划分视觉层级，梳理平台与业务的关系，避免视觉过载，打造沉浸式浏览体验。
我们把图标划分为三个层级，适配不同页面位置：
再出色的创意，离开了规范，就很难保持长期统一。完善的图标规范，保障多名设计师协作下产出风格一致，稳定整体设计质量。
输出完备的图标规范手册，覆盖设计理念、基础网格、倍率、形状符号、图形特征、场景用法等维度，作为团队统一的设计依据。同时归集全部图标资产库，方便设计师快速调用，提升协作效率。
设计好坏不能只依靠设计师主观审美。项目全程引入量化评估，收集真实用户反馈、分析线上数据，持续迭代优化，让设计决策回归用户真实体验，而不是个人喜好。
图标体量虽小，却是产品与用户之间重要的连接媒介，承载信息传递与情感共鸣双重价值。 本次项目，我们从形塑造基底、意传递信息、色赋予气质、境适配场景、规保障落地五个维度完成整套图标体系。同时依靠规范约束、用户数据验证，保障后续迭代质量。 未来，58UXD 团队也会继续延续这套设计理念，持续探索，为用户带来更有温度的设计体验。
兰亭妙微ui设计公司分享：冰墩墩 “一墩难求”、卡塔尔世界杯吉祥物拉伊卜刷屏出圈，卡通 IP 已经成为数字时代品牌连接用户的重要载体。但很多人对 IP 的认知存在误区：简单将 IP 等同于虚拟卡通形象。打造虚拟形象门槛高、投入巨大，短期很难看到商业回报，这并不是 IP 的全部真谛。
从商业角度看，IP 是具备生命力的知识产权。如同生命体，它可以拆解为外在形体与内在精神两个部分，我们可以顺着 IP 的前世、今生、未来，读懂它的底层逻辑。
IP 的源头来自日本二次元文化。在社会高压的环境之下，大众理性诉求被压抑，感性情绪亟待释放。创作者把情绪、情感寄托于漫画创作，在区别于现实世界的二维载体中完成情感宣泄，二次元就此诞生。因此 IP 从诞生之初，就承载着大众的情感表达诉求。
回看全球高收视少儿动画，无论是《猫和老鼠》《奥特曼》，还是《海贼王》《熊出没》《大力水手》，大多属于热血、英雄向的内容。核心逻辑就是制造情绪共鸣，用内容包裹情绪价值，完成和受众的情感沟通。
而 IP 真正在国内商业领域爆火，始于 2014 年。它的核心商业价值，是破解流量困局。
线上电商生态里，平台广告位资源有限，商家数量却高达数百万，流量成本持续走高。拿不到优质流量位，不少商家被迫压缩品质，市场充斥低价低质产品。
线下商业同样难逃流量困境：流量成本包含金钱、时间、选择三重成本，房租是最大支出。产品成本 1 元，往往要卖到 5 元才可以覆盖房租、人工、库存实现盈利。高倍率定价之下，却未必能给到对等的体验，催生 “高价难高质” 的行业痛点。
无论线上线下，消费者的底层诉求始终是物美价廉。流量红利消退，IP 就成为破局的关键抓手。
日本熊本县，凭借 IP 熊本熊实现城市破圈。当地政府希望借助 IP 拉动旅游、招商引资，提取熊本县城市代表的黑色，搭配极具亲和力的腮红，塑造出熊本熊这一经典角色，担任熊本县 “销售部长” 与城市代言人。
它不只是一张静态海报：熊本熊频繁出现在各类公开场合，产出表情包、壁纸、头像、人偶周边；主动制造社交事件，街头互动、趣味公关发布会、人偶线下公益行动，制造大量惊喜、故事与社交传播素材，让大众自发分享。
经典的 “熊本熊失踪” 危机公关，县长亲自下场参与喜剧化的发布会，进一步强化熊本熊和熊本县的强绑定。当形象深入人心之后，正式开启商品化授权运营。
数据印证 IP 的商业能量：2011‑2012 年，熊本熊带动观光、商品销售带来1244 亿日元经济连带效益；2014 年授权商品销售额达 643 亿日元。熊本县在日本城市好感度排名从第 18 位跃升至第 5 位，后续 IP 授权业务拓展至全球 13 个国家和地区，成为城市 IP 运营教科书级案例。
传统品牌传播，是名称、LOGO 主导的时代。一轮营销战役结束，传播就随之落幕，品牌资产很难沉淀。
IP 的出现改变了这套逻辑：它可以把所有传播获取的注意力，全部沉淀到 IP 资产包中。即便企业遭遇经营危机，IP 本身依旧具备极高的商业价值。
品牌 IP 资产金字塔揭示全新的品牌逻辑：品牌资产不再局限名称、LOGO、口碑，IP 资产正式成为品牌资产的重要组成部分。IP 可以完整承接品牌与消费者的全维度沟通：传递品牌定位主张、提升识别亲和力、承接跨界合作、衍生品开发、危机公关、线下活动授权；同时完成视觉传达、用户沟通、产品延伸、IP 授权四大板块落地，直达消费者与合作商户群体。
鲨鱼菲特作为国内新锐轻食品牌，面向追求健康生活的年轻群体，提供科学配比的健康食品。品牌选择把 IP 人格化，将品牌精神全部注入 IP 角色，让 IP 成为细分品类与品牌的代言人，传递健康积极的生活态度。
整套品牌升级分为四大系统：视觉识别系统、IP 超级符号系统、包装系统、内容营销系统。
品牌金字塔清晰锚定定位：鲨鱼菲特，500 万年轻人的健康选择；品牌人格是爱吃、勤练；价值观是质量第一、追求极致；调性是有活力、有趣、有颜值、有态度。
IP 人设深度贴合品类：鲨鱼，食物链顶端的生物，设定为挑剔的美食家。拥有强大免疫力，对食物品质高度挑剔，追求营养精准平衡。人物档案完整定义性格、能力、小缺点，形成完整角色世界观。
围绕人设搭建完整 IP 视觉识别体系：IP‑LOGO 组合、全套面部表情、GIF 表情包、主题插画场景、周边衍生品、包装物料、线下广告物料，实现全渠道统一输出。
内容时代，IP 不止是静态视觉符号。鲨鱼菲特搭建短视频内容矩阵，以 IP 形象产出科普、趣味剧情短视频；还推出免费商用定制字体，沉淀品牌文化资产，实现低成本社交裂变传播。
前二次元时代，品牌面向 85 前群体，依靠电视、互联网、平面媒体做大众媒体单向传播；品牌以静态 LOGO、大片为主要呈现方式。
进入二次元 IP 时代，沟通对象转向 95 后、00 后群体。传播方式由单向灌输，转向品牌人格化的多维交互，静态视觉与动态 IP 内容相结合，传播载体拓展为二次元内容、表情包、动画短视频。
IP 资产给企业带来四大核心价值：
IP 是移动互联网跨人群传播的高效工具。依靠表情包、头像、短视频、漫画等形式，依托趣味内容实现用户自发传播，降低传播成本。
放眼未来，品牌 IP 有三条发展路径：
完整的品牌 IP 商业生态，需要 IP 文化研究院做顶层架构，向下拆分品牌体系、IP 主题、文化体系、文化孵化器四大板块，覆盖形象规范、衍生品、主题活动、动漫影视、同人孵化、自媒体等多元业务，形成完整商业闭环。
兰亭妙微ui设计公司分享：移动端底部导航栏（Tab Bar）是 App 最核心的导航组件，大量海外成熟产品沉淀了很多可复用的设计思路。本文结合海外头部案例，拆解底部导航栏的底层逻辑与落地技巧，帮设计师理清设计思路，规避常见体验坑点。
在正式学习设计方法之前，先思考两个核心问题，做设计不要上来就直接套用 Tab Bar：
市面上微信、淘宝、美团等大量 App 都在用底部导航，但Tab Bar 并不是所有应用的标配。
像系统日历、计算器、Uber / 滴滴这类产品，就没有使用底部 Tab 栏。是否采用底部导航，要结合产品业务场景、信息架构综合判断，不要盲目跟风主流产品。
底部导航栏的核心价值，是降低用户跳转成本，实现页面之间快速切换。借助 Tab Bar，用户可以一键直达核心模块，提升整体操作效率。
明确这两个前提后，下面结合案例分享 8 个可落地的设计技巧：
底部导航栏的空间十分有限，切忌堆砌过多功能标签，造成导航臃肿混乱。优先放置用户高频访问的模块，搜索这类高频操作，非常适合收纳到底部导航，加速内容检索。
案例 Spotify Spotify 的底部导航仅保留四大核心入口：首页浏览、搜索发现、个人音乐库、会员专区。首页负责内容消费，搜索用来挖掘新歌与播客，音乐库存放收藏歌单，会员入口便于用户完成付费转化，全部都是音乐播放器场景下最高频的能力。
行业主流 App 的底部导航普遍设置 4‑5 个标签。这个数量既能覆盖核心业务，也保证按钮点击热区充足，避免标签过多导致按钮过小、误触率升高。 同时导航栏可以承载轻量状态提示，比如消息红点、数字角标，直观向用户推送状态。
案例 Pinterest Pinterest 底部仅设置 4 个标签，按钮尺寸充足，点击容错率高。消息标签搭配数字角标，实时提示未读消息；搜索常驻底部，用户可以在信息流和搜索结果之间无缝来回切换。
底部标签分为两种常用形式：图标搭配文字、纯图标。
案例：宜家 App & YouTube 宜家 App 使用纯图标导航，主页、分类、个人中心的图标符号大众认知度高，即便没有文字，用户也能快速理解含义。 反观 YouTube，导航图标表意相对抽象，如果去掉文字，用户很容易混淆功能，因此必须搭配文字说明。
导航栏文字一定要简短清晰，文字过长会挤压图标空间，还会出现文字截断、换行的问题，干扰用户识别。对于重点操作按钮，还可以去掉文字，强化视觉焦点。
案例 TikTok TikTok 底部导航标签文字全部极简化，中间发布按钮直接去除文字，放大图标视觉权重，引导用户创作，兼顾美观度与引导性。
底部导航承载着 App 最重要的模块入口，常规场景下应当常驻页面底部，滚动页面时也不隐藏。一旦导航消失，用户会失去位置锚点，无法快速切换页面。
特例：Pinterest Pinterest 滚动页面时会收起底部导航。这是特殊场景下的取舍：产品以图片流为核心，隐藏导航是为了减少遮挡，给图片留出更大展示空间。该方案属于个案，不建议通用产品直接照搬。
导航不只是用来跳转，更要告诉用户「我现在在哪」。通过选中态样式区分当前页面，避免用户迷失在产品内。常用方式：图标变色、样式填充、下划线指示等。
案例：多邻国 & Headspace 多邻国，选中 Tab 图标做色彩填充，通过视觉变化区分激活状态，让用户一眼识别当前所在板块。 Headspace 采用底部下划线跟随切换的方案，选中选项下方出现标识线条，切换 Tab 线条同步移动，位置感知明确。
导航栏设计不是一次定稿，需要数据和用户反馈持续打磨。设计师需要调研：哪些 Tab 点击频次高、哪些入口几乎无人使用，到底适配 4 个还是 5 个标签，基于真实用户行为做调整。
案例 Pinterest Pinterest 早期版本的 Tab 栏和市面产品大同小异，团队收集大量用户行为数据与反馈后，迭代优化导航结构，打磨出适配自身用户习惯的底部导航。持续迭代，是产品体验优化的关键。
底部导航栏不止承担跳转职能，还可以借助红点、状态标记，向用户推送外部变化，无需进入页面就能感知新动态。
案例 Twitter Twitter 在产生新内容时，首页图标会出现更新原点提示，唤醒用户点击查看新内容。同类的设计，也广泛应用于 YouTube、Pinterest 等海外产品。
蓝蓝设计的小编 http://www.lanlanwork.com