首页

兰亭妙微ui设计公司分享:设计系统侧边导航组件:告别混乱,实现高效协同

清阳 设计资源

一、开篇:被低估的侧边导航,正在拖垮团队协作效率

兰亭妙微ui设计公司分享:在从零搭建 B 端后台管理系统的项目中,我最初选择将侧边导航封装为组件,希望解决菜单后期频繁增删改查、全局样式同步的痛点。

但落地后却发现:仅仅简单封装组件,并不能实现预期效果 —— 无法做到全局一键同步更新,展开收起状态、菜单数量、图标、文字内容也很难灵活调整。

大厂设计系统的导航组件完全可以实现这类能力,于是我翻阅大量资料排查问题,最终找到症结:组件修改没有在母组件源文件操作,副本无法同步变更

这里有一个关键认知:全局同步不等于机械复制粘贴。很多设计师的笨办法就是每一页设计稿重复复制、手动修改导航,一旦后期迭代,维护成本会成倍上涨。除组件同步之外,多端响应式适配也是 B 端导航的高频难题,背后隐藏着大量看不见的维护成本。

image.png

本文以 MasterGo 工具为例,围绕 B 端后台侧边导航,完整讲解设计系统组件搭建思路。

二、需求溯源:为什么导航必须做系统化设计

1. 日趋复杂的多端业务场景

image.png

如今设备形态越来越丰富,除传统 Web 桌面端,折叠屏手机、平板设备越来越普及。设计师不能只输出单尺寸设计稿,必须重视响应式导航的自动化适配。统一的导航结构、流畅的适配逻辑,直接决定产品整体体验。

Web 端同样对响应式能力有强需求。例如 Arco Design 将侧边菜单宽度限制在 160‑400px,支持拖拽调整导航栏宽度;小红书网页版会根据浏览器视口自动切换布局,宽屏状态侧边导航搭配五列内容,窄屏时切换为底部固定导航。

✨基础概念区分 响应式布局:依靠流式布局 + 媒体查询,一套布局适配全部设备,随屏幕实时调整元素位置、尺寸。常见实现方案:流式布局、Flex 弹性布局、Grid 网格布局、媒体查询。

  • 流式布局:使用百分比定义宽度,高度由内容自适应,元素随屏幕按比例缩放。

    image.png

  • Flex 弹性布局:一维布局模型,擅长元素对齐与空间分配;Figma 依靠 Auto Layout、

    image.png

    MasterGo 依靠自动布局换行实现。
  • Grid 网格布局:二维布局,划分行列,精准摆放元素,适合复杂页面排版。

    image.png

  • 媒体查询:CSS 能力,根据设备特征加载不同样式规则。

    image.png

自适应布局:为手机、平板、桌面等不同设备预先设计多套固定布局,检测设备后加载对应版本。实现方案包含固定布局、流体布局、弹性布局、混合布局、栅格系统。

  • 固定布局:像素定义固定宽度,特定分辨率下效果最优,常搭配媒体查询适配多设备。
  • 流体布局:百分比定义宽度,保持页面相对比例。
  • 弹性布局:依靠相对单位,跟随字号缩放元素大小。
  • 混合布局:组合多种布局方案,不同区域选用最合适的模式。
  • 栅格系统:将页面切分为均等行列网格,约束元素摆放位置。

核心差异总结

  • 响应式:一套方案,实时变化,一个布局适配所有屏幕。
  • 自适应:多套预设方案,检测切换,不同设备加载独立版本。

2. 动态导航:B 端后台的协同刚需

image.png

动态导航,即支持交互反馈与自适应变化的导航组件。针对 B 端侧边导航,普遍面临 4 大痛点:

  1. 权限管理:B 端角色体系复杂,不同用户可查看菜单不同;角色变更时,侧边栏需要实时渲染对应菜单,保证更新及时、渲染流畅。
  2. 多级菜单:后台功能繁多,导航经常出现多层级菜单。要做好展开、收起、定位能力,建议前期就采用模块化设计,方便后续新增菜单。
  3. 交互体验:菜单展开收起的过渡动画需要兼顾流畅度,保证操作响应迅速,不能出现卡顿。
  4. 主题定制:企业客户常有定制化需求,除颜色、字体,部分场景还需要改动布局、图标,要保证多套主题下导航可用性不受破坏。

2.2 设计走查:避开侧边栏高频坑点

即便使用组件库,交付后依旧需要做设计走查,从四大维度校验样式一致性,修改源组件就可以实现全局同步。B 端侧边导航常见问题:

  • 界面布局:空间利用率差,间距失调,多屏幕适配异常。
  • 色彩视觉:色彩繁杂杂乱,对比度不足,识别困难,配色违和。
  • 交互操作:同类场景交互不统一,操作热区过小,提升用户学习成本。
  • 信息呈现:菜单层级太深、分类混乱;重点功能不突出;不同分辨率下内容错位。

三、设计系统核心底层要点

1. 原子化组件设计

image.png

原子设计理论将界面拆解为最小不可拆分单元,通过拼装原子得到复杂界面,实现高复用、易维护的组件体系,分为 5 个层级:

  1. 原子 Atoms:最小基础元素,不可拆分,例如图标、文字、色值。
  2. 分子 Molecules:原子组合而成,具备独立功能,例如单个导航条目。
  3. 组织 Organisms:分子 / 原子组合成复杂模块,例如完整登录模块。
  4. 模板 Templates:搭建页面骨架,只定义结构,不填充业务数据。
  5. 页面 Pages:模板填入真实业务数据,最终交付给用户的交互页面。

概念辨析 组件化设计:将界面切分为多个独立可复用模块,范围更广。 原子化组件设计:是组件化设计进一步精细化,遵循:单一职责、高内聚低耦合、高复用、可自由组合、易维护、语义化、遵从设计规范。

拓展:原子设计由 Brad Frost 提出,相关参考资源

2. 自动化布局 Auto Layout

image.png

自动化布局依靠约束规则自动管控元素尺寸与位置,是实现响应式设计的基础。Figma、MasterGo、即时设计原生支持自动布局;新版 Sketch 也已上线该能力。

嵌套逻辑:先给最小元素设置自动布局,再把多个子组件放进父级自动布局容器,形成层级约束。

实操小技巧:设置约束前,先预判增删内容之后页面期望呈现的效果;也可以先建立固定容器,再开启自动布局。 举个例子:按钮高度固定,宽度跟随文字变化,则设置高度固定,左右内边距定值,水平属性设置为适应内容。页面级自动布局可以套用相同思路。

3. 变体 Variants

变体是同一个基础组件,修改尺寸、状态、颜色等属性生成不同形态,兼顾统一性和场景多样性,是设计系统灵活复用的关键。

通俗理解:基础组件是篮子,变体就是篮子中不同品类的蛋,按需直接取用,无需重复制作。

变体核心作用

  • 兼顾统一与灵活:统一底层规范,同时适配多样化业务场景;
  • 提升效率:直接调用预设变体,避免重复造轮子。

变体设计原则

  1. 一致性:全部变体遵守系统间距、圆角、字体等基础规范;
  2. 可维护性:变体集中在源组件管理,一处修改全局生效;
  3. 场景导向:只做业务真实需要的变体,拒绝无意义冗余,避免组件库臃肿。

四、标杆拆解:大厂设计系统的导航实现逻辑

image.png

1. Arco Design System 2.5.2

官网地址:https://www.arco.design/react/components/menu 组件分类:导航‑Menu 覆盖形态:顶部导航、深色导航、折叠内嵌菜单、悬浮菜单等;侧边菜单宽度区间 160‑400px,支持拖拽调整宽度。

基础原子图标组件 菜单折叠、展开图标,子菜单向下 / 向上 / 向右箭头图标。

变体组件划分 垂直一级菜单项、垂直收起菜单项、垂直分组、垂直二级菜单项;弹出一级 / 分组 / 二级菜单项;总菜单组件,支持切换垂直侧边、悬浮、水平顶部三种类型;每一类变体都可配置选中、悬停、禁用、子菜单展开、文本替换等属性。

设计逻辑 侧边导航由菜单条目、子菜单、图标、文本构成;整体分为展开、折叠两大模式;单条菜单包含默认、悬停、选中、禁用状态;同时支持亮色 / 暗夜主题。

B 端侧边栏大多承载 2‑3 级导航,功能模块多时建议做逻辑分组;一级导航普遍图标 + 文字,二级缩进展示文字,三级导航业务场景较少。菜单条目过多,可借助分割线、留白区分模块,高频重要菜单置顶展示。

2. Ant Design 5.0

image.png

导航规范文档:https://ant-design.antgroup.com/docs/spec/navigation-cn 布局组件文档:https://ant-design.antgroup.com/components/layout-cn

设计规范要点 侧边垂直导航扩展性更强,适合层级复杂、高频切换的后台系统;菜单数量大于 6 项优先选用侧栏导航,建议层级控制在 1‑3 级。

  • 顶部导航高度公式:48+8n;侧边导航宽度公式:200+8n;
  • 导航常用字号 12px、14px;
  • 组件 Sider 为侧边栏容器,嵌套在 Layout 布局内,浏览器宽度不足时支持收起。

侧边栏采用左右分栏布局,主导航固定左侧,辅助操作放在顶部。优点是层级展示连贯,方便定位当前页面;缺点是会占用横向内容区域。同时定义完整响应式断点:xs:480px、sm:576px、md:768px、lg:992px、xl:1200px、xxl:1600px。

3. 组件命名规范深度解析

合理命名方便团队检索、维护组件库,大型项目建议使用前缀区分组件属性。

3.1 前缀法则

  • Base:基础原子组件,无业务逻辑,跨项目通用;
  • Web:Web 端专属,适配浏览器交互;
  • App:移动端通用;iOS / Android 区分平台特有组件。

3.2 语义化命名模板

命名结构:组件类型_位置层级_特性修饰词

常用关键词

  • 组件类型:Nav 导航、Header 头部、Footer 底部、Sidebar 侧边栏、Card 卡片、Modal 弹窗、List 列表、Form 表单、Button 按钮
  • 位置层级:Top 顶部、Bottom 底部、Left 左侧、Sub 子级
  • 特性修饰:WithSearch 带搜索、Collapsible 可折叠、Responsive 响应式、Fixed 固定

示例: Nav_Side_Collapsible → 可折叠侧边导航 Nav_Top_WithSearch → 带搜索顶部导航

3.3 主流命名格式对比

image.png

  1. 大驼峰 PascalCase:每个单词首字母大写 UserProfile
  2. 小驼峰 camelCase:首单词小写,后续大写 userName
  3. 蛇形命名 Snake_case:下划线分隔,全部小写 user_name;全大写蛇形MAX_LENGTH多用于常量。大厂设计规范文档高频使用。
  4. 烤串命名 Kebab‑case:连字符分隔、全小写 user‑profile,CSS 广泛使用。
  5. 匈牙利命名法:前缀标记数据类型,现代 UI 组件库已较少使用。

命名四大原则

  1. 一致性:全局统一分隔符与前缀,同类组件前缀保持一致;
  2. 最小必要:拒绝冗余词汇,善用行业通用缩写;
  3. 可搜索性:命名表意清晰,规避 Widget、Util 这类模糊词汇;
  4. 对齐架构:命名与文件目录结构一一对应。

五、实战落地:从零搭建一套侧边导航设计系统

1. 前期需求分析

  1. 和业务方沟通,梳理全部业务场景,梳理业务流程,明确导航需要承载的全部模块;
  2. 梳理不同用户角色权限,明确不同身份可见的菜单范围;
  3. 基于业务输出的信息,确定导航视觉风格,开始搭建组件库。

2. 组件库分层搭建

2.1 搭建原子属性库

先定义整套系统底层基础 Token:

  • 颜色:主色、辅助色、状态色、文本色,完善色阶体系,做好语义化 Token 命名;
  • 字体:字体族、字重、字号、行高;
  • 阴影:弹窗、浮层所需阴影参数;
  • 圆角:按钮、卡片统一圆角,嵌套组件遵循同心圆原则;
  • 图标库:统一线条粗细、视觉重量,保证识别性;
  • 交互状态:定义默认、悬停、点击、选中、禁用反馈样式;
  • 布局间距:全局间距规范,统一页面留白逻辑。

2.2 拼装分子组件

基于原子,组合出导航完整模块:

① 基础导航组件
  • 导航条目 Navigation Item:核心单元,图标 + 文字;状态覆盖默认、hover、点击、激活、禁用。
  • 分组标题 Group Title:对菜单分类,仅做视觉划分,菜单数量少时可以省略。
  • 折叠展开按钮:控制子菜单分组的收起展开。
② 辅助功能组件
  • 导航搜索框:菜单数量庞大时,快速检索菜单;
  • 用户信息区:放置头像、用户名,下拉承载个人中心、退出登录;
  • 快捷操作按钮:高频功能直达入口。
③ 交互状态组件
  • 分隔线 Divider:模块分割;
  • 徽章 Badge:未读数量、消息红点;
  • Loading 骨架:菜单异步加载时占位。
④ 响应式适配组件
  • 侧边栏切换按钮(汉堡按钮):窄屏、移动端唤起抽屉导航;
  • 响应式折叠菜单:视口变小时自动转为抽屉、下拉。

2.3 构建多套响应式模板

按设备尺寸划分模板
  1. 桌面端 ≥1024px|完整展示模式 固定 / 可折叠侧边栏,完整展示图标文字分组;支持手动折叠为纯图标模式;hover 唤出子菜单。
  2. 平板端 768‑1023px|精简模式 缩小侧边栏,隐藏次要分组标题;子菜单默认收起,点击父级展开;支持手势呼出收起侧边栏。
  3. 移动端 ≤767px|抽屉 / 底部导航 默认隐藏侧边栏,点击汉堡按钮唤起抽屉弹窗;也可直接替换为底部 Tab 导航;抽屉宽度建议占屏幕 80%,增加关闭按钮,优化触控热区。
按交互逻辑划分模板
  1. 固定‑折叠切换模板:适合后台管理系统;大屏完整侧边栏,中屏折叠为图标,小屏切换抽屉。
  2. 自适应宽度模板:适合文档、博客类产品;导航栏随视口连续缩放,空间不足隐藏文字保留图标。
  3. 混合导航模板:复杂 CRM、电商后台;桌面:左侧侧边栏 + 顶部导航;平板:可收起侧边栏 + 底部高频 Tab;移动端抽屉 + 底部 Tab 联动。

响应式模板关键要点

  1. 功能优先级:移动端优先保留高频核心功能,次要入口收拢至「更多」;
  2. 交互一致性:跨设备激活态、点击反馈逻辑保持统一,降低用户学习成本;
  3. 过渡动画:展开收起增加平滑过渡,避免生硬跳转。

六、结语

这篇笔记前后历时两个月完成,整理资料过程中了解到 Brad Frost 提出的亚原子设计(亚原子语义 Token),后续还会继续深入学习研究。 导航组件体系庞大,仍有不少知识点有待实践沉淀。

 

 

 

转载:站酷

 

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

 

image.png

《设计的两面性:理性决策与感性表达》内容总结

涛涛 设计管理与成长

文章针对行业常见争议:设计到底该理性还是感性,提出不能简单理解为 “两者兼顾”,要区分设计决策过程与最终设计表达两个不同层面。

用户体验实战|兰亭妙微:启发式评估,快速定位产品体验问题

涛涛 交互设计及用户体验

很多团队做完 SUS 可用性量表,得出产品体验评分偏低,却找不到问题到底出在哪里。做真实用户测试周期长、成本高,而启发式评估,就是一套低成本、高效率的专家评审手段。兰亭妙微在政企后台、大数据可视化、小程序等大量项目中,会把启发式评估作为内部走查、改版前诊断的重要工具,依托尼尔森十大可用性原则,快速挖掘产品可用性缺陷,输出可落地的优化方案。

兰亭妙微ui设计公司分享:小按钮,大学问|一篇读懂 UI 按钮完整设计体系

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:在 UI 组件体系中,按钮是使用频率最高的基础控件。看上去只是圆角矩形搭配文字,却承载着整套界面的交互逻辑。实际项目里不少设计师都会遇到类似困境:从专业角度判断按钮字号不宜过大,但业务方坚持放大文字,沟通过后只能妥协。一枚小小的按钮背后,藏着大量容易被忽视的细节,本文完整拆解按钮设计的知识框架与落地规范。

一、按钮的核心价值:它到底承担什么作用?

按钮的本质是触发即时交互行为的界面控件,并非单纯的视觉装饰。核心目的是降低用户决策成本,清晰传递 “此处可交互,点击后将发生对应行为”,主要体现在三个方面。

 

  1. 执行功能性操作 展开收起、数值增减、下拉切换这类高频基础操作,常使用图标按钮实现。视觉上做弱化处理,把视觉重心留给页面主体信息,按钮仅承担工具属性。

    image.png

  2. 引导用户完成下一步动作 这是按钮最常见的用途。绝大多数交互页面依靠按钮承接核心行为:创建、保存、提交、确认,将产品业务流程转化为用户可感知、可点击的操作入口。

    image.png

  3. 塑造用户的使用习惯 当用户重复点击按钮获得正向反馈,就会形成使用心智。签到、领取权益等可带给用户收益的操作,可以适度强化按钮视觉权重,加深用户点击行为,培养产品使用惯性。

    image.png

二、按钮的 5 大基础类型,分清层级再使用

不同按钮对应不同行为优先级,页面内需要做好区分,避免层级混乱。

image.png

  • 主按钮:页面核心行动点,同一操作区域内只保留一个主按钮,用于凸显最高优先级操作。
  • 默认按钮(次按钮):适用于无明显强弱区分的并列操作,作为主操作的补充选项。
  • 虚线按钮:多用于新增类操作,传递唤起新建流程的语义。
  • 文本按钮:弱视觉次级操作入口,不抢夺页面主体焦点。
  • 链接按钮:专门用于外部页面跳转的交互元素。

三、完整交互状态:不止正常点击,这些状态不能漏

很多设计师只设计正常、点击两种样式,一套完备的按钮组件,需要覆盖交互状态与业务属性状态。

交互状态(桌面端 & 移动端区分)

  1. Normal|正常状态:按钮默认展示形态,页面静态下的标准样式。

    image.png

  2. Hover|悬浮状态:仅桌面端生效,鼠标悬浮提供视觉反馈,移动端不存在悬浮态,一般采用低透明度黑色叠加实现,样式可跟随产品风格调整。

    image.png

  3. Click|点击状态:鼠标点击或手指按压瞬间的反馈,触发业务动作,视觉表现加深,效果可自定义。

    image.png

  4. Disable|禁用状态:代表当前操作不可执行,常见于表单未完成填写、校验不通过场景。

    image.png

两种落地方式:一是直接置为灰色,属于行业通用做法;二是保留原有色相,降低透明度。禁用按钮视觉强度必须显著弱于可操作按钮,同时需要引导用户补齐前置条件,解除禁用限制。

业务属性状态

image.png

  • 常规按钮:普通正向操作,系统通用样式。
  • 危险按钮:删除、权限变更、数据销毁等高风险行为,建议搭配二次确认弹窗使用。
  • 幽灵按钮:描边样式,适配复杂背景,多用于落地页场景。
  • 加载按钮:异步请求等待阶段使用,配置加载动画,规避用户重复提交。

四、实战避坑:按钮设计 9 条准则 & 禁忌

1. 同一操作区,仅保留 1 个主按钮

image.png

页面同时出现多个高权重主按钮,会加重用户选择负担。产品追求低思考成本的体验,次要操作降级为描边按钮或文本按钮。弹窗对话框内这条规则尤为关键。

2. 圆角值匹配产品调性,拒绝盲目跟风

image.png

  • 直角:偏向严谨克制,适合企业级 B 端后台产品。
  • 小圆角:通用性最强,兼顾严谨感与柔和感,绝大多数项目优先选用。
  • 胶囊大圆角:风格属性极强,更适配年轻化产品,全局把控成本高,谨慎使用。

切忌使用过渡模糊的中间圆角,容易产生廉价违和的视觉感受。

image.png

3. 按钮文案精简,拒绝折行

image.png

按钮文案简短有力,优先使用动词,避免长句,禁止文字换行。文案过长应当优化文字表述,而不是单纯放大按钮尺寸。

4. 文字与容器比例协调

image.png

按钮常用字号 12px、14px。文字占比失衡,会出现拥挤压抑或者空洞松散的问题,破坏界面精致度,这也是设计师与业务方经常产生分歧的地方。

5. 弥散阴影,仅限主按钮使用

image.png

如需增加投影,阴影色调尽量继承按钮本身色相,营造通透感。只有主按钮可以配置阴影,次按钮、文本按钮增加阴影会打乱层级,降低识别效率。

6. 同组主次按钮样式体系统一

image.png

弹窗、表单模块内部,主、次按钮严格沿用组件库既定样式,不要随意修改描边、圆角、填充色,避免样式碎片化。

7. 和周边组件做好视觉区隔

image.png

不要让按钮和卡片标题、标签、模块卡片外观趋同。一旦控件样式混淆,用户无法快速识别可点击区域,造成认知障碍。

8. 兼顾浅色 / 暗黑模式适配

image.png

暗黑模式已经成为标配,设计按钮时,同步校验亮色、暗色两套主题下的色彩对比度,保证可读性。

9. 弹窗、提交页,主按钮放右侧

image.png

弹窗、确认对话框、表单提交场景,确认主按钮放置右侧,取消次要按钮放置左侧;普通业务页面可根据布局灵活调整,这也是解决团队设计分歧的实用原则。

五、按钮尺寸的规范思路

可以参考这套尺寸逻辑:

image.png

按钮高度 = 文字行高 + Xn 按钮宽度 = 文字宽度 + Xn

n 为产品定义的基础间距单位,X 为自然数。这套逻辑同样可以复用到卡片、模块间距等组件规范搭建。

提示:按钮文字优先选用 12px、14px,避免字号过大。行业常用按钮高度:40px、36px、32px、28px、24px,可直接落地组件库。

写在最后

按钮只是 UI 系统里一个很小的组件,但细节决定整体体验。无论组件体量大小,设计师不应当只输出视觉,更要思考样式背后的交互逻辑与用户心智。打磨好每一处微小细节,产品体验才能够持续提升。

 

 

转载:站酷

 

 

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

 

image.png

兰亭妙微ui设计公司分享:180种认知偏差如何影响用户决策?

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:这张“认知偏差图谱”对 PM、UX/UE、 UI设计师 来说,简直就是一本《用户大脑操作手册》。 如果说编程是写给机器的代码,那么认知偏差就是写给人类大脑的“底层代码”

这张图片展示的是著名的 “认知偏差这一图谱” (Cognitive Bias Codex)。这是一个系统性的知识图谱,由 Buster Benson 整理分类,John Manoogian III 设计。

核心逻辑是:人类的大脑不是为了追求“真理”或“逻辑完美”而进化的,而是为了“生存”和“效率”进化的。

这张图将180多种认知偏差归纳为人类大脑必须面对的四大核心挑战(Four Conundrums)。我们可以从这四个维度来深度解构:

第一维度:信息过载 (Too Much Information)

挑战:

世界上每秒钟发生的信息量不仅庞大,而且极其复杂,我们的大脑无法处理所有细节。

大脑的应对策略(过滤器):

大脑必须进行过滤。它会激进地忽略绝大多数信息,只捕捉它认为重要的部分。

产生的偏差逻辑:

  1. 我们只关注显眼或奇怪的事物: 比如Bizarreness effect(怪诞效应)。大脑对平庸的事物视而不见。
  2. 我们只关注变化: 比如Anchoring(锚定效应)。我们往往根据对比来判断价值,而不是事物的本质。
  3. 我们只关注证实自己信念的信息: 比如Confirmation bias(确认偏误)。为了节省能量,大脑拒绝处理那些挑战我们现有世界观的信息。
  4. 我们容易被重复的信息洗脑: 比如Availability heuristic(可得性启发法)。我们误以为刚听到的、或记忆深刻的事情就是大概率事件。

深度洞察: 在这一象限,所谓的“偏见”,其实是大脑的“降噪耳机”。

第二维度:意义匮乏 (Not Enough Meaning)

挑战:

世界是碎片化的、模糊的。看到的信息往往是不完整的,但这让我们感到不安和困惑。

大脑的应对策略(脑补):

大脑是一个故事生成器。它会自动填补空白,强行寻找规律,哪怕这些规律并不存在。

产生的偏差逻辑:

  1. 我们在稀疏的数据中寻找模式: 比如Gambler’s fallacy(赌徒谬误)或Pareidolia(幻想性视错觉,如看云像人脸)。我们无法接受随机性。
  2. 我们用刻板印象填补未知: 比如Stereotyping(刻板印象)或Halo effect(光环效应)。因为了解一个人太累,不如直接给他贴标签。
  3. 我们把熟悉的人事物想得更好: 比如Out-group homogeneity bias(外群体同质性偏见)。对自己人哪怕做坏事也有苦衷,对外人则认为他们本性如此。
  4. 我们会简化数字和概率: 大脑不擅长数学,我们更喜欢简单的因果关系,而非复杂的概率分布。

深度洞察: 在这一象限,大脑是一个“编剧”,为了让世界看起来合理,它不惜虚构情节。

第三维度:需要快速行动 (Need To Act Fast)

挑战:

时间是有限的。如果我们在丛林里看到风吹草动,思考太久会被吃掉。在这个象限,速度 > 准确度。

大脑的应对策略(直觉决策):

大脑会牺牲精确性来换取自信和决断力。

产生的偏差逻辑:

  1. 为了行动,我们需要过度自信: 比如Dunning-Kruger effect(达克效应)或Overconfidence effect(过度自信效应)。如果我们知道自己多无知,可能就不敢行动了。
  2. 为了专注,我们偏向眼前的利益: 比如Hyperbolic discounting(双曲贴现)。眼前的一个苹果比下周的一箱苹果更有吸引力。
  3. 为了避免后悔,我们维持现状: 比如Sunk cost fallacy(沉没成本谬误)或IKEA effect(宜家效应)。我们不愿承认过去的投入是浪费的。
  4. 我们要显得自己很重要: 比如Spotlight effect(聚光灯效应)。我们总觉得别人在关注我们,这让我们行为更谨慎(或更冲动)。

深度洞察: 在这一象限,大脑是一个“赌徒”,为了不错失机会,它宁愿错判也不愿不判。

第四维度:该记住什么? (What Should We Remember?)

挑战:

也就是存储空间有限。我们不能记住所有吃过的早餐。

大脑的应对策略(压缩与重构):

记忆不是录像带,而是经过剪辑的摘要。我们只存关键帧。

产生的偏差逻辑:

  1. 我们事后会修改和强化记忆: 比如Misattribution of memory(记忆错误归因)。记忆是会被当下的环境篡改的。
  2. 我们只记概略,忽略细节: 比如Implicit stereotypes(隐性刻板印象)。
  3. 我们根据体验的高峰和结尾来记忆: 比如Peak-end rule(峰终定律)。一段经历好不好,全看最爽的时刻和结束的时刻,中间的过程会被忽略。
  4. 外部能存的,大脑就不存: 比如Google effect(谷歌效应)。既然能搜到,大脑就会选择遗忘。

深度洞察: 在这一象限,大脑是一个“吝啬的图书管理员”,它只保留它认为将来用得上的目录,而且经常把书名贴错。

总结:如何运用这张图?

对这张图的深度理解,不仅仅是背诵这些名词,而是认识到:

偏见是人性的出厂设置(Feature, not Bug):

这些偏差在远古时代帮助人类活了下来。锚定效应帮我们快速比价,从众心理帮我们融入部落。

现代社会的错配:

在现代复杂的金融、职场和社交环境中,这些原本用来“省电”和“保命”的快捷方式,变成了阻碍我们做出理性决策的Bug。

元认知(Meta-Cognition):

这张图的最大价值在于自省。当你下次想把所有的功劳都归于自己时,看一眼“自利偏差”;当你觉得某个投资肯定涨因为最近都在涨时,看一眼“近期偏好”。

对PM、UE、UI带来的价值是什么?

对产品经理 (PM) 的帮助

核心价值:商业策略、定价模型、用户留存、决策避坑。

PM 往往背负着 KPI(转化率、留存率、GMV),需要从宏观层面设计产品的机制。

定价与营销策略 (利用锚定效应 & 框架效应):

应用:

  • 在定价页面,利用 Anchoring (锚定效应)。先展示一个贵的“企业版”,再展示一个“超值版”,用户会觉得后者非常划算。
  • 利用 Decoy Effect (诱饵效应)。设置一个没人买的“诱饵选项”,只为了衬托主推套餐的性价比。

用户留存与活跃 (利用损失厌恶 & 沉没成本):

应用:

  • 利用 Loss Aversion (损失厌恶)。文案上,“您即将失去5折优惠”比“您将获得5折优惠”更能驱动点击。
  • 利用 Sunk Cost Fallacy (沉没成本谬误)。设计会员成长体系或积分系统,用户投入越多时间(沉没成本),越离不开平台。

需求挖掘与自我纠偏 (避免确认偏误):

警惕:PM最容易犯 Confirmation Bias (确认偏误)。做用户访谈时,只听得进支持自己想法的声音。这张图提醒PM:你要寻找证伪的数据,而不是证实的数据。

对 UX/UE 设计师 (交互/体验) 的帮助

核心价值:降低门槛、引导路径、减少挫败感、流程设计。

UX 的核心是“好用”,让用户不思考(Don’t make me think)。这张图告诉 UX 设计师大脑的“带宽”有限。

减少认知负荷 (应对信息过载):

应用:

  • 对抗 Choice Overload (选择过载)。不要给用户太多选项(席克定律),选项越多,用户越可能放弃选择。
  • 利用 Default Effect (默认选项效应)。人类是懒惰的,把最希望用户选的项设为“默认勾选”(如下载安装包时默认勾选“同意协议”)。

优化体验流程 (利用峰终定律):

应用:利用 Peak-End Rule (峰终定律)。用户记不住整个流程,只记得最爽的瞬间(Peak)和结束时的感觉(End)。

实操:哪怕中间流程平淡,但在“支付成功”或“任务完成”的那一刻,要给出一个超棒的动画反馈或奖励,用户就会觉得整个体验很棒。

表单与信息架构 (利用序列位置效应):

应用:利用 Serial Position Effect (序列位置效应)。用户倾向于记住第一个和最后一个项目。把最重要的功能放在菜单的开头或结尾,而不是中间。

对 UI 设计师 (视觉) 的帮助

核心价值:视觉焦点、信任感建立、情感化设计。

UI 需要在0.1秒内抓住用户的眼球,并传递正确的情绪。

引导视觉注意力 (利用冯·雷斯托夫效应):

应用:利用 Von Restorff Effect (隔离效应)。在一组相似的元素中,那个“不一样”的会被记住。

实操:为什么“购买按钮”的颜色通常和背景色对比强烈?就是为了利用这个偏差,让大脑第一眼捕捉到它。

建立信任感 (利用美即好用效应):

应用:利用 Aesthetic-Usability Effect (美即好用效应)。用户会觉得“长得好看”的界面“更好用”、“bug更少”。

实操:高级的排版和精美的插图不仅仅是为了美,是为了降低用户对系统错误的容忍度。

利用熟悉感 (利用单纯曝光效应):

应用:利用 Mere Exposure Effect (单纯曝光效应)。人们喜欢熟悉的东西。

实操:UI 图标设计尽量遵循通用的设计规范(如放大镜代表搜索),不要为了创新而创新,陌生的图标会让用户警惕和困惑。

一句话总结:这张图展示大脑为了在这个复杂世界中生存,会通过”过滤信息、填补意义、快速反应、选择性记忆”四种方式来简化现实——这些认知捷径既是生存智慧,也是商家理解用户行为、设计消费体验的重要科学依据。

 

转载:人人都是产品经理

 

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

 

image.png

 

Ledgerix AI智能财务产品UI/UX设计深度解析

丽洁 系统UI设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。
 
导读
从首页的价值主张、数据仪表盘到移动端的全局掌控,构建连续的商业决策闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。
鎴睆2026-08-31 涓嬪崍6.41.49.png

一、产品定位:先回答系统替谁解决什么问题

Ledgerix并没有把自己限制为一款简单的记账工具或财务报表生成器,而是试图建立覆盖数据简化、洞察挖掘与未来预测的企业财务操作系统。桌面端承担全局洞察与深度分析,移动端承接随时随地的数据监控,AI则被安排在简化复杂数据、生成关键指标解释等决策点。其核心价值主张清晰明确:“Smarter Financial Decisions. Powered by AI.”(更明智的财务决策,由AI驱动),旨在帮助小企业从繁杂的数据中解放出来,掌控财务未来。

二、信息架构:把功能转译为用户的决策顺序

信息架构围绕“宏观财务状况—关键指标趋势—具体业务细节”展开。
  • 全局层:首页以醒目的总营收数字(如 $1,651,045,139)为视觉锚点,确立信任感;
  • 分析层:收入趋势图、月度支出、销售预测被组织为核心分析模块;
  • 执行层:具体的会计科目、客户查询和团队分享功能作为辅助工具存在。
    这种分层既照顾了管理者对“大数”的关注,也保留了财务人员下钻分析的需求。鎴睆2026-08-31 涓嬪崍6.45.37.png

三、关键交互:从浏览报表走向即时洞察

交互亮点在于把静态数据转译为动态反馈。
  • 自然语言查询:界面底部的搜索框不仅仅是搜索,更是一个AI对话框("Ask anything or search"),允许用户用自然语言提问(如截图中的 "What is our gross margin?"),直接获取分析结果,而非在菜单中翻找。
  • 可视化反馈:图表中的悬浮提示框不仅显示数值,还带有绿色的增长百分比标签,直接将数据变化转化为业务含义。
  • 跨端一致性:从桌面端到平板再到手机,核心数据卡片(如Forecast, Monthly Expenses)保持布局逻辑一致,确保用户在切换设备时认知负荷最小化。

四、视觉系统:品牌表达必须承担专业语义

大面积的白色背景建立清晰、理性与现代化的SaaS感,薄荷绿(Mint Green)作为核心操作色,在黑白灰的数据海洋中保持清晰焦点,引导用户点击“Get Started”或查看正向增长指标;黑色仅用于强调关键数字和导航栏,形成具有层级感的视觉流。卡片式设计、极简线条图表和留白处理,让复杂的金融数据不至于显得压抑,同时保持了专业度与科技感的平衡。

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是AI的嵌入式设计:AI不是一个独立的聊天机器人窗口,而是融入到了搜索栏和数据解读中,成为辅助决策的底层能力。对设计团队而言,要重点维护数据可视化的清晰度,使用户能一眼识别出“收入”、“支出”与“预测”的区别,利用颜色和大小的对比来引导视觉动线,而非仅仅为了美观。
鎴睆2026-08-31 涓嬪崍6.45.52.png

六、专业审视:仍需补齐的体验边界

现有方案的主要风险是数据展示的密度与隐私感
  • 在大屏上展示极其精确到个位数的巨额数字($1,651,045,139)虽然震撼,但在实际B端场景中可能需要支持自定义精度或脱敏显示。
  • AI生成的建议(如底部的问答)需要增加数据来源的引用或置信度提示,避免用户对AI产生的“幻觉”数据盲目信任。
  • 移动端虽然展示了核心数据,但对于复杂的财务报表编辑功能似乎有所阉割,需明确移动端的权限边界。
结语:设计的最终判断标准是业务与使用价值
Ledgerix展示了AI财务产品从“记录工具”走向“决策顾问”的路径:以清晰的仪表盘建立全局观,以AI交互降低分析门槛,以跨端体验维持掌控感。真正决定产品竞争力的,不是界面上有多少图表,而是能否让用户在最短时间内,基于数据做出正确的商业判断。
 

体验设计如何突破瓶颈|兰亭妙微:设计师进阶,不止打磨界面执行能力

涛涛 用户研究

很多体验设计师长期困在执行层,日复一日输出界面、改需求,专业绘图能力过硬,但很难向上进阶。市面上流传大量设计师能力等级表,把初级、中级、高级能力一条条罗列,兰亭妙微结合政企 B 端、数字化产品大量项目实战认为,能力清单只能作为参考,现实中设计师能力往往长短不一,不会完全按表格标准化成长。真正的进阶,不只是把本专业做熟练,更要向上拓展上游能力,站在产品、业务视角思考问题,才能拉开设计师之间的差距。结合团队内部人才培养经验,我们梳理六大可落地的进阶能力方向。

UI 设计底层逻辑|兰亭妙微:4 个必须吃透的设计心理学,让界面真正读懂用户

涛涛 设计思维

很多设计师做 UI,把重心放在视觉美感、配色、图标打磨上,却忽略了用户的认知心理。好看不等于好用,真正优秀的用户体验,本质是顺应人的认知习惯,降低用户思考与操作负担。深耕政企 B 端、数据可视化、各类 App 界面设计多年的兰亭妙微,结合大量商业项目实践,拆解 4 个高频实用的设计心理学原理,把理论落地到真实界面设计工作当中。

兰亭妙微ui设计公司分享:界面粗糙难下手?三步快速完成界面精致度升级

清阳 移动端UI设计文章及欣赏

兰亭妙微ui设计公司分享:很多设计师会遇到这样的困境:明明元素都齐全,但整体界面观感粗糙廉价,想要优化却找不到切入点。本文结合真实改版案例,从头部 Banner、内容列表、全局布局三个维度,拆解一套可直接复用的界面优化方法。

一、优化视觉重心:Banner 模块

image.png

Banner 是页面第一眼的视觉焦点,界面质感差,往往问题就出在这里。我们可以从图标卡片色彩与投影两点着手调整。

image.png

1. 简化图标造型,统一色彩语言

原版 Banner 图标结构繁杂、色彩堆砌,阴影油腻浑浊,高饱和度投影让画面显得杂乱。 借助 AI 工具重构图标,优先选用造型简洁、轮廓明确的图形;配色做减法,以黑白为基底,搭配品牌主题色,弱化多余装饰,强化整体风格识别度,减少视觉噪音。

2. 调整卡片色彩,克制使用投影

image.png

原始 Banner 卡片投影过重,卡片与背景边界模糊,渐变过渡生硬,卡片内容被背景吞没,文字辨识度大打折扣。

优化思路:

  1. 去掉冗余投影,提升卡片与背景的色彩对比度;
  2. 重新调整渐变明暗分布,让文字信息优先突出,保证内容清晰可读。

    image.png

二、梳理内容模块:列表区域优化

 

Banner 调整完成后,向下处理列表板块。列表常见三大弊病:图标风格割裂、卡片排版混乱、状态标识文字过小,导致信息层级模糊。

1. 统一图标视觉风格image.png

旧版列表图标色彩五花八门,质感、样式互不统一,和底部导航栏视觉语言脱节。 将全部列表图标更换为和导航栏保持一致的线面结合样式,整套界面图标体系统一,减少风格冲突,页面会瞬间变得整齐有序。

2. 规范卡片排版,强化状态信息

image.png

原版卡片内部字号层级过多,文字排布散乱;任务状态提示字号过小,用户很难快速识别任务进度。

优化要点:

  • 规范字号体系,控制卡片内字体层级数量;
  • 对齐各类文本,平衡卡片内部布局;
  • 放大状态标签,保证「已完成」「进行中」等状态清晰易读。

三、校准全局观感:整体布局调整

image.png

局部细节打磨完毕,最后回归全局,解决底色、边距带来的廉价感。

1. 改良背景色调,拉开页面层级

原版大面积高饱和度浅绿色背景,视觉油腻,卡片和背景边界混淆。 保留头部小范围主题色渐变,主体背景切换为柔和浅灰色;头部色彩局部下沉,制造页面空间层次感,让 Banner、列表卡片从背景中 “浮” 出来,界面高级感立刻提升。

2. 修正页边距,找回页面呼吸感

image.png

页面边距过大,内容区域被过度挤压,内容聚拢局促,缺少舒展的呼吸空间。 适度收窄页面左右边距,压缩顶部冗余空白,重新分配屏幕空间,让内容充分舒展,阅读体验更加舒适。

写在最后

当你的界面看起来不够精致,不必直接推翻全部设计。可以遵循这套顺序:先打磨头部核心 Banner,再修复列表等内容组件,最后校准背景、边距等全局设定。从局部到整体逐步迭代,就可以低成本完成界面质感升级。

 

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:从理论到落地:详解 B 端移动 App 设计方法论

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:随着跨端办公趋势不断深化,B 端业务早已不再局限于 PC 后台。手机、平板正在成为业务人员随时随地处理工作的重要载体,打破办公场景的时空束缚。但 B 端移动端绝非 PC 页面简单缩小,需要围绕移动端场景、角色、操作习惯做轻量化重构。本文将从设计认知、核心模块实操、项目落地协作三个维度,完整拆解 B 端移动 App 的设计思路与实战要点。

一、建立认知:理清多端差异,找准移动端定位

PC、平板、手机三端并不是简单复制,而是一套功能逐级下放的关系:屏幕尺寸越小,功能越聚焦核心,剔除复杂配置与低频操作,适配对应角色的真实工作场景。

表格

image.png

客户端 目标用户 功能特点
PC 端 管理者、人事、后台运营等 功能完备,承载复杂业务逻辑、表单配置、全局数据分析,多用于固定工位深度办公
Pad 端 销售、一线服务人员 删减复杂配置项,保留核心业务操作,适合半移动场景下查看任务、处理业务
App 移动端 全角色通用(管理者、一线员工等) 只保留各角色高频核心能力,做轻量化改造;使用场景碎片化:路上、现场、家中、门店内

以有赞美业工作台为例:手机端只保留宫格式核心入口;Pad 端在入口之外直接展示业务内容;PC 端承载完整数据看板、快捷操作与复杂管理功能。

设计启示:同样一套业务,不同终端的用户角色、使用目标完全不同,移动端设计的核心目标,是在保证操作效率的前提下兼顾可用性,而不是复刻 PC 全部能力。

二、核心模块实操:表单、列表、数据页、工作台四大组件设计

B 端移动端高频页面集中在表单、列表、数据看板、工作台,下面结合行业案例拆解每个模块的设计策略。

2.1 B 端移动端表单设计

image.png

表单由标题、必填标记、字段标签、提示文案、输入区域、操作按钮共同组成。 大部分表单追求快速完成,但部分场景需要引导用户审慎填写,例如资质审核页面、小屏适配、多语言国际化场景,这时标签布局方案就至关重要。

1)左对齐标签(左标签‑左内容)

image.png

优势:贴合阅读习惯,适合陌生、复杂业务字段,引导用户仔细阅读内容; 劣势:长标签会拉大标签与输入框距离,拉长填写耗时。 眼动实验表明,左对齐标签填写速度最慢,适合资质认证、金融申请这类需要审慎核对信息的页面,刻意放缓用户填写节奏,降低出错概率。

变体方案:左标签‑右内容,优化长标签适配,视觉排布整齐;但标签与输入框的关联性减弱,适合选择类录入场景。image.png

2)顶对齐标签

image.png

优势:阅读效率极高,标签到输入框视觉跳转仅需 50ms,比左对齐快约 10 倍;对长标签、多语言场景兼容性强; 劣势:占用更多纵向屏幕空间,适合字段数量不多的移动端页面。

选型总结:追求填写效率优先选顶对齐;需要用户仔细阅读、风险较高的业务,优先选左对齐标签

2.2 B 端移动端列表设计

image.png

移动端 B 端列表核心目标:快速查看信息、高效完成操作,由卡片容器、筛选器、搜索三大要素构成。

  1. 卡片:移动端优先卡片式布局,承载多元信息与交互,适配多端展示,强化信息区分;分为长卡片(如饿了么商家版订单)、短卡片(如 58 同城商家版招标信息),根据信息密度选型。
  2. 筛选:帮助用户在海量业务数据中快速定位,减少手动翻找成本。
  3. 搜索:支持关键词直达目标条目。

视觉差异化设计技巧: 可以参考真实线下单据的视觉语言做拟物化轻量化表达,消解纯数据页面的枯燥压迫感。例如途牛商旅复刻纸质差旅审批单线条、医鹿模拟病历钉扣样式、饿了么商家版模仿外卖小票样式,让界面和真实业务认知对齐,提升用户的理解效率。

image.png

image.png

2.3 B 端移动端数据页设计

image.png

移动端数据页面 = 核心指标统计 + 可视化图表卡片 + 筛选控件 + 明细列表。

  • 指标统计:提炼业务核心指标,采用主指标 + 辅助指标的组合展示;
  • 可视化图表:做到 “一图胜千言”,把海量抽象数据转化为直观图形。

1)激励性数据设计

image.png

参考经典电力公司案例:通过对比图表,向用户展示自身和周边群体的用电差异,利用对比感知驱动行为改变,最终实现整体功耗下降。这套思路同样可以迁移到 B 端产品,通过对比维度,让业务人员直观感知自身业务的好坏差距,激发优化意识。

2)移动端图表取舍

image.png

移动端屏幕有限,图表需要做取舍:

  • 直角折线:数据精度高;平滑曲线:降低认知负担,视觉更柔和;
  • 部分业务场景可以弱化坐标轴、简化刻度,牺牲部分绝对精度,强化趋势感知,适合首页概览类图表,追求趋势感知而非精准读数(如淘特商家版生意参谋)。

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

image.png

工作台是用户进入产品的第一站,帮助用户快速掌握工作进度、直达高频功能入口,是产品体验、视觉规范的核心落地场景,千牛、飞书、医蝶谷均是典型代表。

改版实战案例 —— 医蝶谷医生工作台 旧版首页将极速问诊模块占据近 40% 首屏空间,对接单慢的新手医生不够友好;新版做业务与视觉双重优化:

image.png

  1. 业务策略:将极速问诊模块收起,把问诊 Tab 整合到首页,首屏优先展示待办任务,医生打开 App 就能直观掌握当日工作,提升抢单门槛合理性。
  2. 视觉策略:弱化功能图标饱和度,减少视觉干扰,把用户注意力引导到待办、消息等高价值业务信息上,而非花哨的图标样式。

实战案例:医疗医生端音视频排班设计

image.png

医生工作具备三大特征:突发事务多、多任务并行、流程复杂(手术、查房、带教、接诊、写病历穿插进行),排班时间碎片化、无固定周期。针对该业务痛点,落地三条设计策略:

  1. 优化层级,提升屏幕利用率 将时间标签置顶,调整卡片内信息权重;自动收缩无任务的时间段,无需向下长距离滑动,首屏就能够看到全天完整排班。
  2. 色彩标签传递信息,克制视觉元素 放弃复用 C 端业务图标,改用简约色彩标签区分不同问诊类型,快速识别排班类型。
  3. 简化操作路径,降低操作成本 优化前添加一组时段需要 4 步,设置 3 段不连续排班要操作 12 次;优化后单条时段仅需 3 步,3 段不连续排班 4 步即可完成,大幅降低高频排班的操作负担。

B 端设计关键启示:视觉好看只是基础,所有交互、界面优化,都必须扎根于真实业务场景与用户工作习惯,行业壁垒高的产品,前期深度用户调研必不可少。

三、落地协作:设计师如何与开发配合,推动规范落地

多数 B 端移动端以 H5、RN 技术实现,便于多端复用。设计师不仅要输出视觉,更要理解前端实现逻辑,减少落地偏差,提升整体研发效率。

3.1 提升开发效率:框架先行,分层交付

不要等全部视觉完成再交付,优先输出页面的底层框架线框图给到开发,研发可以先搭建页面 DOM 结构,之后再交付视觉标注,完成 CSS 样式还原,实现部分并行开发,节约项目工时。

3.2 性能优化:图片资源策略,降低服务器与带宽压力

图片资源会占用服务器存储,同时影响页面加载速度:

  1. 提高图片复用率,同一份素材多处复用;
  2. 大图分层切图:将人物、主体元素从背景中拆分独立输出,实测可将图片体积减少约 50%,同时支持不同页面复用主体素材。

3.3 关注 H5 环境下容易踩坑的细节

  1. 空格占位符  (1 个空格)、 (半个汉字宽度)、 (1 个汉字宽度),文本换行、间距实现需要提前和开发对齐规则。
  2. 字重还原问题 PingFang 字体的 Medium (500) 在 Web/H5 环境下还原效果差,和常规字重几乎看不出差异。需要和前端提前约定:设计稿中 Medium 中黑体,代码直接写font‑weight:600,保障粗细效果和设计稿一致。

3.4 循序渐进推动设计规范落地

image.png

很难在一个版本完成全部规范整改。设计师需要兼具部分产品思维,对优化需求做优先级拆分,分版本迭代上线。 推荐建立排期跟进表格,记录需求描述、分类、版本、负责人、上线时间,明确状态,同步给产品、开发,持续跟进,避免规范只停留在设计稿无法落地。

 

转载:优设

 

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

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档