首页

米勒定律:破解短时记忆密码,重塑设计逻辑

涛涛 设计管理与成长

在信息爆炸的当下,用户每天要面对成百上千条信息冲击,如何让产品信息被高效接收、记忆?67 年前,美国心理学家乔治・米勒提出的 “7±2 法则”,为现代设计提供了穿越认知迷雾的指南针。这一被称为 “米勒定律” 的理论,不仅揭示了人类短时记忆的底层规律,更成为交互设计、产品界面、信息架构的核心指导原则,至今仍深刻影响着每一个与用户体验相关的领域。

B 端设计师为何要懂技术?该懂哪些技术?

鹤鹤 设计管理与成长

对于 B 端设计师来说,“懂技术” 并非意味着要掌握编程、亲自写代码,而是要从框架层面理解特定技术的原理、运行逻辑,以及落地实现的相关限制。这从来不是 UI 设计师的专属要求,而是整个设计行业的通用专业准则 —— 设计的核心本就是解决方案的策划,任何设计最终都要通过具体的实施环节落地。就像平面设计要适配印刷标准、工业设计需契合制造工艺、室内设计要衔接施工规范,脱离落地标准的设计,终究只会变成无法落地的 “飞机稿”。兰亭妙微深耕 UI 设计与开发领域,团队设计师始终保持持续学习、稳步成长的状态,在 B 端UI设计上积累了丰富实践,相关作品案例可在我们的官方网站查看。

image.png

 
作为专业的 UI 设计师,了解技术是输出有效设计方案的核心前提。若忽视技术限制,设计稿极易因无法实现被驳回,严重拖慢项目推进效率。除此之外,对技术的认知还能帮助设计师更深度地思考设计与项目的关联,精准预判方案实现难度,优化与前端的交付对接方式。设计师与前端工程师的沟通矛盾,很大一部分根源就在于设计师对技术的不了解,输出的方案要么无法实现,要么实现成本极高,如同产品经理要求设计 “五彩斑斓的黑” 一般,忽视了对方的专业限制。懂技术与不懂技术的设计师,在项目推进效率上差距显著,这也是懂技术的设计师更具职业竞争力、更受行业认可的关键原因。
 
而对于 B 端设计师,懂技术还有着更为特殊且重要的意义:B 端领域中,有大量产品是面向技术领域提供服务的。常规 B 端服务面向无技术背景的商业用户,如仓库管理员用 ERP 查库存、职员用 OA 提交工单;但面向技术领域的 B 端产品,主要服务于企业开发环节,需程序员操作以提效降本,比如云服务供应商的产品,只有具备专业技术知识的程序员才能熟练使用。
 
云服务只是其中一个方向,区块链、数据大屏等领域的 B 端产品也均是如此,即便操作使用者是程序员,其界面设计仍需专业设计师完成。只有具备一定技术知识积累的设计师,才能精准理解这类产品的需求,而非单纯跟着产品原型画图、对设计内容一无所知。尤其近年 AI 技术快速崛起,AI 相关 B 端服务数量大幅增长,这类产品依托技术搭建,需要用户完成特定配置才能实现服务,若设计师不了解 AI 及基础技术原理,根本无法开展有效设计。如今行业新增的 “B 端 AI 设计师”,并非指用 AI 生成设计,而是指专门设计 AI 类产品、且具备一定 AI 技术认知的设计师。可见,懂技术不仅是 B 端设计师完成日常工作的基本要求,更是拓展职业边界、抓住行业新机遇的重要助力。
 

image.png

一、B 端设计师该懂哪些技术?

 
明确懂技术的重要性后,设计师需要掌握的技术知识,并非零散的编程技巧,而是能搭建起技术认知框架的核心方向,具体可总结为五类:
 
  1. 前端界面的实现逻辑
  2. 后端的功能框架和服务
  3. 前后端联调的过程
  4. 产品的部署和运维
  5. AI 的生成和处理流程
 
接下来将对每个方向的核心概念、学习价值及入门方法做简单解析,帮助设计师快速建立基础认知。

image.png

 

二、各技术方向核心解析与学习建议

 

(一)前端界面的实现逻辑

 
这是与 UI 设计师关联最紧密、距离最近的技术内容,指前端实现界面样式、交互与动画的底层逻辑,这里的前端是广义概念,涵盖网页、iOS、Android、小程序、桌面端等所有系统的用户界面。
 
不同系统的开发语言虽有差异,但实现前端界面的核心逻辑大体一致,因此设计师只需吃透其中一种,便可触类旁通。对 B 端设计师而言,网页前端是最佳学习对象:一方面,B 端工作中接触最多的就是网页项目;另一方面,网页前端是所有前端类型中最简单、最易上手的。
image.png
 
网页前端的核心由 HTML、CSS、JS 三种语言构成:HTML 和 CSS 是搭建网页框架、定义样式的标记语言,JS 则用于实现逻辑运算与交互处理。对设计师来说,重点系统学习并动手实操HTML 和 CSS即可 —— 从程序员的视角,二者并非真正的编程语言,只是标记和样式语言,学习门槛极低,实操却能带来极大价值:既能深度理解界面的实现过程,搞清楚为何相同参数下,开发效果与设计稿会存在偏差;也能快速建立正确的前端认知,明白样式与逻辑是前端工作的两个独立部分,实现界面效果只是前端工作的一小部分。

image.png

image.png

(二)后端的功能框架和服务

 
这一方向要求设计师建立对服务器层面的认知,了解产品的运行机制,以及后端程序员的核心工作内容。这对设计师理解界面中复杂的字段、数据逻辑至关重要,部分复杂的 B 端交互设计,更是需要基于对后端服务和数据的理解才能完成。
 
设计师可从 B 端服务的框架图切入学习,B 端的 SaaS、PaaS、IaaS 类服务,均是对后端技术架构拆解后形成的产物。若遇到陌生专业名词,可借助 GPT 工具快速查询解析。同时需重点理解:后端代码的存储位置、运行方式,以及代码与数据库之间的关联逻辑,这是理解后端工作的核心基础。

image.png

(三)前后端联调的过程

 
前后端联调,即让前端程序与后端程序建立连接、实现数据传输的过程。前端与后端程序是运行在不同硬件上的独立程序,默认无任何关联,需要开发人员通过技术手段为其搭建沟通桥梁,这就像将主机与显示器、鼠标、键盘连接,才能形成一个可正常运作的整体。
 
联调的核心概念是API 接口,这是前后端程序连接的关键节点,如同主机后侧的各类插口 ——3.5mm 圆形插口、USB 插口、Type-C 插口,不同插口对应不同的 API,只有搭配适配的 “接头”,才能实现数据通信。
 
API 是项目中的核心技术点,产品经理、前后端工程师都会投入大量时间处理 API 文档、推进 API 联调,也是项目会议中的高频讨论内容,直接影响产品需求的落地。建议借助 GPT 工具对 API 进行深度解析扫盲,理解这一概念后,设计师便能听懂项目会议中大部分开发术语,避免陷入认知盲区。

image.png

 

(四)产品的部署和运维

 
前端、后端、联调知识,能支撑起一个基础的互联网产品,但随着技术发展,后端架构愈发复杂,云服务平台的产品与服务类型也随之丰富,想要理解这些复杂的后端服务,设计师必须具备一定的运维知识
 
如今的后端岗位(不含算法)主要分为两类:后端程序开发与运维。后端开发的核心是实现产品的各项功能,而运维的核心是搭建网络运行环境,将开发好的代码部署到服务器中,确保产品能正常、稳定运转。若想理解二者的分工与价值,可参考相关的 DevOps 扫盲资料,建立基础认知。
 
理解运维知识,不仅能让设计师对互联网产品的运行机制有全新认知,更能精准理解云服务、区块链等技术类 B 端产品的服务本质,知道这类产品能解决哪些实际问题。若时间充裕,建议打开大型云服务平台,查看其产品列表,对陌生的产品与服务名词逐一查询扫盲,快速积累行业知识。

image.png

 

(五)AI 的生成和处理流程

 
AI 技术的应用愈发广泛,而几乎所有 AI 应用都离不开 B 端界面的支持,紧跟时代发展,理解 AI 的生成与处理流程,是 B 端设计师的必备能力,尤其是对主攻 AI 类 B 端产品的设计师而言,这一知识更是核心刚需。
 
理解 AI 技术应用,首先要区分 AI 大模型的种类与应用方向,从外行视角,可将大模型简单分为四类:
 
  1. 计算机视觉模型:对图像进行生成、检测、分类,文生图是最常见的应用;
  2. 自然语言处理模型:对文字进行分析并返回文字结果,ChatGPT 是典型代表;
  3. 语音处理模型:实现语音识别、合成、输出,如短视频的合成人声;
  4. 多模态模型:处理图文、音视频等多种混合数据,应用于图文检索、视频总结等场景。image.pngimage.png
 
AI 大模型是各类 AI 应用的内核,能帮助我们完成复杂的信息处理与数据返回,省去大量开发环节,设计师可借助这一机制,将 AI 融入设计与产品工作流。比如电商新品发布,可搭建 AI 工作流:输入产品摄影图、标题、基础介绍,让 AI 优化生成封面图、商品展示图,适配不同平台生成标题,甚至扩写产品介绍、给出介绍图的生成与排版建议。
 
这类 AI 工作流的处理逻辑,可通过 COZE 等平台学习尝试,查看官方说明文档便能快速上手,能直观感受到 AI 在 B 端产品中的实际应用方式。理解 AI 的技术逻辑,不仅能让设计师精准把握 AI 产品的设计要点,更能清晰认识 AI 的优势与能力边界,避免陷入 “AI 威胁论”,抓住 AI 时代的职业发展机遇。
 

三、结语

 
对 B 端设计师而言,“懂技术” 的核心是建立技术认知框架,而非掌握某一门编程语言。以上五大方向,是从零开始理解技术的核心切入点,虽然实际项目中的技术细节远不止于此,但只要吃透这些基础内容,便能形成完整的技术认知体系,后续遇到新的技术概念、产品类型,都能做到触类旁通。
 
掌握这些技术知识,不仅能让设计师输出更具落地性的设计方案,提升项目推进效率,更能精准理解各类 B 端产品的需求本质,拓展职业边界,在云服务、AI、区块链等新兴领域找到新的职业机遇,成为更具核心竞争力的专业设计师。

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

 

image.png

设计验收全攻略:让设计方案精准落地的实用指南

鹤鹤 设计管理与成长

在设计工作的协作链条中,设计验收是确保创意方案完整落地、产品体验不打折扣的关键环节。不少设计师都曾面临这样的困境:精心打磨的设计稿与最终上线产品差距甚远,要么是和开发沟通不畅,要么是自身缺乏验收技巧,导致设计价值无法充分体现。尤其是许多中小型企业,往往忽视设计验收环节,设计师完成稿件后便不再跟进,最终出现 “设计稿≠落地产品” 的尴尬局面。其实,设计验收本质上是设计、开发、产品团队协同验证产品实现一致性的过程,更是对设计成果的存档与保障 —— 明确标注需求并同步给相关方,既能划分责任边界,也能为后续问题追溯提供依据。
 
要做好设计验收,需遵循 “准备 - 执行 - 反馈 - 优化” 的完整流程,每个环节都有其核心要点与实用方法。

一、验收准备:打好基础,掌握主动权

 
设计验收的成功,始于充分的前期准备。很多设计师误以为 “设计稿上的信息开发自然会看”,但实际协作中,清晰的标注的不仅能提升沟通效率,更能体现专业性,赢得开发团队的配合。准备阶段需重点做好两件事:

1. 细化设计标注

 
设计方案需明确标注关键信息,避免开发过程中因理解偏差导致失误。核心标注内容包括:
 
  • 视觉细节:重要模块的间距、核心颜色色值(尤其肉眼易混淆的颜色)、字体样式及大小;
  • 功能模块:核心组件的使用规则、交互逻辑说明(如按钮点击效果、弹窗触发条件);
  • 特殊要求:复用组件的适配规则、新增功能的操作路径(如桌台管理中的新增区域、批量删除等功能)。

     

 

2. 把握关键验收节点

 
验收并非等到开发完全结束才进行,选对时机能让验收更高效:
 
  • 冒烟测试阶段:进行初步简单验收,及时提醒开发关注设计要点,为后续正式验收争取话语权;
  • 完全提测阶段:开展深度细致检查,全面核查视觉、交互、内容等各维度,确保设计细节精准落地。
 

二、执行验收:分层核查,覆盖全场景

 
执行验收是核心环节,需采用 “分层验收 + 多场景验证” 的方式,确保无遗漏、无死角。验收主要分为设计模块验收和多场景 / 设备验收两大类。
 

(一)设计模块验收:按层拆解,精准核查

 
将验收内容按视觉层、交互层、内容层拆分,针对性解决不同维度的问题,同时借助实用工具提升效率。
 

1. 视觉层验收:聚焦静态呈现细节

 
视觉层是开发最易出错的环节,主要核查字体、颜色、图标、间距等静态元素的还原度。推荐使用这些工具辅助验收:
 
  • 字体验证:用「什么字体 Whatfont」快速核查页面字体是否与设计一致,尤其适用于多字体场景;
  • image.png
  • 颜色提取:CSS Peepe(部分功能付费)或 Smart Color Picker and Palettes 可生成网页色板,对比设计色值是否准确;

    image.png

  • 图标与资源:通过图片助手快速提取页面图标、图片资源,直观校验是否与设计稿一致;image.png
  • 整体对比:免费工具 Copiexl 或可视化效果更强的 Pixelay Compare Design to Web,可直接拖拽对比设计稿与网页,直观呈现差异。

    image.png

2. 交互层验收:关注动态逻辑流畅度

 
交互层验收围绕页面跳转、加载状态、内容通知等动态模块展开,核心是确保交互逻辑符合设计预期。由于交互过程具有动态性,建议优先验收核心流程,再核查次要流程,同时借助工具记录:
 
  • 录屏工具:Screennity、Vidline 可精准记录交互过程,方便向开发清晰反馈问题;image.png
  • 替代方案:若无需专业录屏,可利用会议软件开线上会议录屏,或用 OBS 进行本地录屏,满足基础需求。
 

3. 内容层验收:保障信息准确适配

 
内容层重点关注文案准确性、多语言适配性及极端数据展示效果(如长文本、空状态等)。传统反复创建测试数据的方式效率低下,推荐使用网页编辑(WebEdit)插件,直接在页面上修改静态数据,快速校验不同场景下的内容展示效果。
image.png

(二)多场景 / 设备验收:确保全环境适配

 
产品通常需覆盖多设备、多浏览器,验收时需兼顾不同场景,避免出现适配问题:
 
  • 桌面端适配:准备 Mac 和 Win 双系统(无实物可安装 Parallels Desktop、VMware Fusion 虚拟机),同时用 Window Resizer、Responsive Viewer 生成多分辨率方案,核查不同尺寸下的页面表现;
  • image.png
  • 移动端验收:安卓设备可借助 QtScrcpy 实现电脑远程操控,支持高分辨率录屏,配合鼠标标注问题位置,高效闭环;iOS 设备可利用 Mac 自带镜像功能,搭配录屏工具完成验收;微信小程序可直接使用电脑版快速核查;

    image.png

     

  • 浏览器兼容:重点测试主流浏览器(Chrome、Safari、Edge 等),确保页面在不同浏览器中表现一致。

    image.png

 

三、验收反馈:清晰沟通,推动问题解决

 
验收发现问题后,高效反馈是推动整改的关键。反馈时需注意两点:
 

1. 选择合适的记录工具

 
优先使用团队常用的项目协同工具(如 Jira、Trello、ONES)跟踪问题;若团队无相关工具,可使用经实践验证的验收表格,清晰记录问题详情。
 

2. 精准描述问题

 
避免模糊主观的表述,采用具体、可执行的描述方式。例如,不说 “颜色不够黑”,而明确 “颜色色值需修改为 #222”;不说 “间距不合适”,而说明 “模块间距应调整为 16px”,减少沟通成本。
 

四、验收核心:建立机制,灵活妥协

 
设计验收的终极目标是平衡设计还原与项目落地,并非追求绝对完美。实际工作中,需把握两个核心原则:
 

1. 建立周期性复查机制

 
部分页面修改后可能引发连锁反应,因此验收并非一次性任务。建议团队每半年对系统进行一次全面复查,周期性排查潜在问题,确保产品长期稳定运行。
 

2. 科学妥协,明确优化节点

 
开发工作往往任务繁重,设计师无需追求 “十全十美” 的还原度。可在非核心功能上适当妥协,但需明确后续优化时间节点。例如:“本次迭代优先修改标注的关键问题,其余优化项纳入下个小版本统一处理”,既兼顾项目进度,又保障设计质量。
 
设计验收既是对设计成果的把关,也是跨团队协作的考验。通过规范准备流程、分层精准验收、清晰高效反馈,再加上灵活的协作策略,就能最大限度缩小设计稿与落地产品的差距,让设计价值真正体现在用户体验中。
 

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

 

image.png

激进式创新:设计师突破边界的八大核心策略

涛涛 设计管理与成长

创新,是打破现状的核心动力,而激进式创新更像是一场颠覆行业格局的革命。它不同于渐进式创新的稳步迭代,依赖革命性技术与创新商业模式的双重驱动,既能催生 iPhone 电容触屏这样的技术变革,也能成就 Uber、Airbnb 这样的商业重构。对于设计师而言,掌握激进式创新的思维方法,便是拥有了撬动产品与行业突破的钥匙。本文将从创新启动、过程推进、决策落地三个维度,拆解八大核心策略,助力设计师打造灵感永动机。

商业化设计实战指南:设计师如何从 “执行者” 跃升 “价值创造者”

涛涛 设计管理与成长

在互联网行业从流量红利走向价值深耕的今天,设计师的角色早已不是单纯的 “界面美化师”。当 ChatGPT、AI 设计工具重塑行业生态,当产品盈利目标日益明确,商业化设计成为衡量设计师核心价值的关键标尺。很多设计师困惑于 “如何平衡用户体验与商业目标”“怎样让设计直接助力变现”,其实答案藏在对商业逻辑的理解、用户需求的洞察和设计策略的落地中。本文结合实战经验,拆解商业化设计的核心逻辑与落地方法,帮你实现从 “被动接需求” 到 “主动创价值” 的进阶。

3 年 UI 设计深耕:从 “会做图” 到 “懂用户” 的进阶心法

涛涛 设计管理与成长

作为一名在 UI 设计领域摸爬滚打 3 年的设计师,我至今仍清晰记得刚入行时的困惑:明明掌握了 PS、Figma 等工具,能画出符合审美规范的界面,却总被产品经理质疑 “不符合用户习惯”,被开发吐槽 “落地难度太大”。直到经历了数十个项目的打磨,踩过无数次坑,才逐渐明白:UI 设计从来不是 “好看的像素堆砌”,而是兼顾美学、用户体验与商业价值的系统工程。今天,就和大家分享我从 “工具操作者” 成长为 “解决方案提供者” 的进阶心得。

从入门到资深:UI/UX 设计师的成长进阶指南

涛涛 设计管理与成长

在数字化浪潮席卷全球的今天,UI/UX 设计已成为连接产品与用户的核心桥梁,优秀的 UI/UX 设计师不仅能打造出视觉惊艳的界面,更能通过优化体验解决用户痛点,为产品创造核心价值。但从零基础小白到独当一面的资深设计师,并非一蹴而就的坦途,而是一场需要系统学习、持续实践与深度思考的修行。本文结合行业经验与成长规律,拆解 UI/UX 设计师的 7 大进阶步骤,助力从业者稳步提升。

HMI 异形仪表设计指南:从灵感到落地的全流程

涛涛 设计管理与成长

在汽车智能化浪潮下,HMI(人机交互界面)中的仪表设计早已突破传统圆形、矩形的局限,异形仪表凭借独特的视觉张力和个性化表达,成为提升座舱科技感与用户体验的关键。设计一款兼具美感与实用性的异形仪表,并非天马行空的创意迸发,而是从灵感捕捉到细节打磨的系统化过程。本文将结合情绪图应用逻辑,拆解异形仪表的完整设计路径,为设计师提供可落地的实操框架。

拒绝数字鸿沟:5 个适老化设计细节,让老人不再被产品抛弃

涛涛 设计管理与成长

随着老龄化社会的深度推进,越来越多的老年人开始主动拥抱数字生活,手机打车、线上购物、视频聊天已逐渐成为他们日常的一部分。然而,复杂的操作流程、晦涩的界面设计却成为横亘在老人与数字产品之间的 “无形鸿沟”—— 字体太小看不清、按钮太多找不到、操作步骤绕不清、反馈提示不明确,这些看似微小的问题,却让许多老人在数字世界里屡屡碰壁,甚至被迫放弃使用。

告别千篇一律!卡片设计的创新玩法与实用指南

涛涛 设计管理与成长

在界面设计中,卡片是兼具实用性与美观性的核心元素,无论是 APP 界面、网页布局还是营销海报,都能看到它的身影。但随着同质化设计越来越普遍,想要让卡片在众多作品中脱颖而出,就需要在掌握基础逻辑的同时,打破常规思维。本文将从卡片的核心类型、基础设计原则出发,分享 4 个打造亮点卡片的实用方法,帮你让设计更具吸引力。

日历

链接

个人资料

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

存档