本文翻译文章围绕米勒法则（神奇数字 7±2）展开，解释人类短时工作记忆的认知上限，同时结合序列位置效应，讲解该理论在产品设计、企业管理层面的启发。

本文介绍一套原创服务设计共创工具：双矩阵方法，适合跨学科多人工作坊，把复杂社会类服务问题结构化，把传统 3 天的工作坊压缩至半天，降低专业术语门槛，促成不同背景参与者共创共享价值方案，文章以社会护理作为实战测试领域。

让杂志般的视觉情绪，延伸到真正可用的界面。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Pinstripe 时尚探索 App 设计。摄影负责吸引目光，偏好设置、门店发现与账户内容则承接持续使用。
一、项目背景：在风格表达与寻找效率之间建立联系
用户既希望遇见有个性的内容，也需要容易理解的搜索与选择。Pinstripe 让强烈影像与简洁组件交替出现，用少量颜色串起从入门到探索的体验。     

图 1  手机号与输入状态

橙色背景包裹白色表单卡片，黑色按钮形成明确焦点。手机号输入与键盘状态被纳入同一布局，时尚氛围延续下来，眼前需要完成的动作也很清楚。

图 2  购物偏好的多选设置

购物偏好以列表展开，选中行同时改变底色并显示勾选，个性化信息变成容易回答的小问题。大块留白与黑色主按钮保持克制，选项多时仍有整齐的阅读节奏。

二、设计策略：让影像与黑白组件各有表达空间
①信息架构：入门采集购物偏好与风格，探索和账户页面继续整理内容。②视觉语言：大幅摄影营造编辑感，黑白文字与按钮建立秩序，橙色背景为引导流程补充鲜明记忆。

Pinstripe | 界面细节与设计启发

图 3  风格标签与可修改偏好

不同长度的风格名称被整理成标签网格，选中项带有可移除标记。自由的时尚词汇进入统一组件后显得有序，标签、留白和继续按钮之间也形成清楚层级。

图 4  账户 引导与活动发现

这张组合图并列展示账户、摄影引导与活动发现页面。图片主导的界面释放品牌情绪，列表界面保持简洁，同一套黑白按钮与图标把不同内容连接起来。

③场景化交互：购物偏好通过列表多选，风格偏好通过标签表达，搜索与过滤入口集中呈现。不同类型的信息采用不同选择方式，黑色主按钮始终提供清楚的继续方向。

三、设计启发：品牌情绪与操作秩序，可以在不同页面交替主导
摄影丰富的页面让人停留，简洁的表单和列表帮助完成动作。做精品零售或生活方式产品时，可以积累这种节奏：让内容释放个性，让重复组件提供熟悉感，整体体验就更容易连贯。

如有时尚零售、电商类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

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

一句需求就能生成一组页面，几轮对话就能做出可点击原型，这种速度让设计讨论变得很直观，也容易让团队太早进入制作。兰亭妙微这次阅读 NN/g 的 Tanner Kohler 关于智能代理参与软件生产的文章。它让我们重新关注一个老问题：当实现越来越快，谁来判断正在做的东西是否值得做？下面结合一个假设的企业知识库，聊聊用户体验工作在需求、验证和迭代中仍然需要承担的具体任务。

过去讨论一条用户路径，通常会画出一个人如何搜索、比较、点击和完成任务。现在，部分步骤可能由 AI 助手代劳，人只在关键时刻回来确认。兰亭妙微这次分享 NN/g 的 Raluca Budiu 关于 Experience Design 的文章：当人与代理共同参与数字系统，设计视角也需要扩展。不过，操作主体变多，不代表人的目标变得次要。以下用旅行计划与商品比较的假设场景，观察这种变化会如何落到页面上。

用 AI 整理一份资料，第一次结果看起来流畅，仔细读却发现日期不对。这时用户需要的，通常不是一句更热情的道歉，而是知道错在哪里、能不能改、之前的工作会不会丢。兰亭妙微这次分享 Tushar Deshmukh 关于算法错误与信任的文章。我们借这个问题，把注意力放到日常工具的界面上：下面的资料摘要和文件整理均为假设场景，讨论的是交互设计的补救方法，不涉及医疗、金融等专业决策。

设计稿里每一行文字都刚好，每张卡片都有数据，按钮点击后总能进入下一页。真正上线以后，长名称、等待、权限和失败才一起出现。兰亭妙微这次阅读 Pavel Bukengolts 的设计协作文章，关注其中关于设计意图在交付中流失的讨论。它提醒我们，视觉稿只是沟通的一部分。以下用一个假设的资料管理产品展开：如果要和交互设计公司或研发团队一起把方案做实，哪些细节值得在交付前讲清楚？

打开一款企业软件，最先映入眼帘的往往是表格、筛选器和状态标签。它们需要准确，也容易让第一次使用的人感到拘谨。兰亭妙微这次分享 Roman Yakovlev 关于 B2B SaaS 吉祥物设计的文章：作者以 TitanApps 和 Coupler.io 的探索，讨论角色如何帮助技术产品建立更鲜明的表达。这个话题很适合带回 B端界面设计里继续想一想。不过，亲和力不能只靠放上一只可爱的动物。下面结合几个假设界面场景，聊聊角色的位置、分寸，以及它怎样和真正的任务配合。

兰亭妙微ui设计公司分享：一套完整的 Web 设计语言库，由设计价值观、设计法则、布局、视觉、数据可视化、动效六大模块共同构成。本文聚焦布局模块（后续还会覆盖视觉、数据可视化）展开完整拆解。

本文参考 Ant Design、Element Design、Google Design 等成熟业界设计体系，结合官网展示类、商城交易类、后台功能类、工具组件类等多种已上线 Web 产品实践总结而来。 部分内容来源于早期项目 1.0 版本，受互联网产品快速迭代影响，个别内容仍有待验证与迭代，欢迎各位读者交流指正。

Web 布局体系将分为四大核心板块：框架布局、页面层级、栅格系统、Web 页面适配。

提示：全文体量较大，建议收藏分段阅读。将相关知识点整合为一篇，是为了保证知识体系完整性，避免内容碎片化。版权归属原项目所有。

一、框架布局

框架布局是整个 Web 页面的骨架基底。只有确定页面框架之后，才可以进一步落地统一视觉、功能交互、业务流程。本章节围绕设计原则、基础布局、扩展布局、懒加载策略四个维度讲解。

1. 框架布局设计原则

1. 一致性：保证全站布局结构、视觉范式统一，降低用户认知成本，提升使用舒适度。
2. 逻辑性：页面信息分类、模块组织遵循业务逻辑，模块之间结构关系清晰通顺。
3. 可扩展性：无论业务简单或复杂，布局框架支持业务迭代，可灵活扩充、调整结构。
4. 可预测性：选用用户熟悉、可识别的布局范式，贯穿产品全体验链路，合理引导用户行为。

2. 基础布局

基础布局包含上下布局、左右布局、T 型布局，结构简洁，是 Web 产品中最高频的布局方案。

1. 上下布局 页面上方为导航模块，下方承载主内容区。导航栏宽度会约束导航条目数量与文字长度。 适用：导航条目少、页面纵向内容长的网站，是 Web 最通用的框架布局。
2. 左右布局 页面左侧放置全局导航，右侧为主内容区域。导航常驻可视区域，页面切换感知强。 适用：业务结构相对简单的网站。
3. T 型布局 广泛应用于资讯、社交文章类产品。顶部设置全局导航承接全部一级入口；内容区域继续二次切分，分为侧边菜单栏 + 主内容区，侧边栏可居左也可居右。

3. 扩展布局

扩展布局是基础布局的进阶形态，分为C 型布局、口型布局，适合信息密度高、功能复杂的系统。

1. C 型布局 T 型布局的延伸，同时融合水平导航与垂直侧边导航，清晰区分高频业务操作和次要辅助操作。 适用：模块繁多、逻辑复杂的后台管理系统。
2. 口型布局 C 型布局进一步拓展，在页面两侧同时增设侧边栏，最大化利用屏幕版面，可承载海量信息与功能。 缺点：页面信息密度高，灵活性偏弱，容易产生拥挤感。 适用：工具类、资讯类高密度页面。

4. 懒加载

懒加载是长页面图片的延迟加载策略：图片仅滚动进入可视区域时才发起资源请求，有效加快页面首屏速度，减轻服务器压力。 加载过程中使用骨架屏（灰色占位）作为过渡反馈。

在电商等图片密集的长页面中，如果一次性加载全部图片资源，极易出现长时间白屏、页面闪烁，极端情况会造成页面崩溃，严重破坏用户体验，懒加载就是解决这类场景的重要手段。

二、页面层级

页面层级用于定义页面元素的堆叠顺序、归属层级与组合规范。 从底层到顶层固定顺序：背景层 Background → 内容层 Content → 全局控制层 Global control → 蒙版层 Mask → 弹出层 Pop‑up。 下文以结构最复杂的口型布局作为演示案例。

1. 背景层｜最底层

永久处于页面最底部，一般使用中性底色，目的是衬托上层的内容与导航。 分为纯色背景与装饰图片背景两类：

• 纯色常用中性色：#ffffff、#fafafa、#f5f5f5
• 图片背景：图形、纹理、装饰插画组成，用于美化页面、引导视觉流向。

2. 内容层｜业务核心层

业务关联性最强，也是页面复杂度最高的层级，位于背景层之上。 承载用户需要获取的核心业务信息，以及配套操作，例如表单录入、数据列表、详情展示、信息说明等。

3. 全局控制层

置于内容层上方，承担全站导航、全局操控能力，包含顶部导航、菜单栏、侧边栏等组件。

4. 蒙版层

不会独立使用，配合弹出层出现；标准样式为半透明黑色遮罩 rgba(0,0,0,0.5)。 作用：锁定下层页面的全部交互，视觉聚焦弹窗，引导用户完成当前操作。

5. 弹出层｜最高优先级

临时浮层，优先级最高，承载临时任务，典型代表是对话框组件。 以弹窗、抽屉滑出形式唤起；蒙版会禁用底层页面交互，用于需要强聚焦的分支任务流程。

三、栅格系统

栅格系统为页面排版、尺寸设定提供标准化参考，让设计具备秩序感。 合理运用栅格，可以降低设计决策成本、提升团队协作效率，保障视觉还原质量，同时实现响应式布局。

分为四个部分：栅格基础概念、模块划分、间距系统、布局适配规则。

① 关于栅格

• 轻量简单项目：12 栅格即可满足需求；
• 业务庞大、信息分组复杂的中台项目：推荐 24 栅格，实现更细粒度划分。

栅格两大基础单元：

• Column（列）：业务内容的容器；
• Gutter（水槽 / 槽）：控制列与列之间留白间距。

公式：列宽 + 水槽间距 + 页面左右边距 = 页面总宽度 内容区域宽度 = N 个列宽度 + (N‑1) 个水槽宽度

以上下布局的 24 栅格为例：水槽 Gutter 为固定值；浏览器缩放时，列宽会弹性变化，水槽间距保持不变。12 栅格逻辑可以同理推导。

② 模块

模块指页面内的业务区块，可以是一段文本、一张图片或组合组件。

注意：装饰性背景元素不属于业务模块，不需要严格遵守栅格约束。

以 12 栅格举例，模块既可以均分 2/3/4/6/12 份，也支持非对称比例（1:2:1、1:3:2、2:3:3、1:2、3:1 等），设计师根据业务场景自由组合。

③ 间距系统

栅格不仅管控排版，同时规范页面内全部元素对齐与留白，以此保障页面韵律与一致性。

桌面端主流屏幕尺寸大多可以被 8 整除，行业普遍采用8 为最小原子单位，采用 8n 规则定义模块尺寸与间距。

• 2、4、6：粒度太小，容易造成页面元素细碎，节奏感差；
• 10：步长过大，间距跳跃感明显； 因此 8n 是普适性最优方案。

④ 关于适配

定义三个关键概念：

• Fixed固定宽度：尺寸写死，不受浏览器窗口影响；
• Auto自适应宽度：跟随浏览器窗口自动伸缩；
• Min最小宽度，限制页面收缩下限。

基础布局适配规则

1. 上下布局 分为固定宽度、全屏宽度两种模式。

• 固定宽度：内容区 Fixed 建议设置1200px，适配绝大多数屏幕，两侧 Auto 区域自动留白；
• 全屏宽度：需要设置内容区 Min 最小边距，避免内容贴边被裁切。

2. 左右布局、T 型布局 侧边导航 / 菜单栏为 Fixed 固定宽度；中间主内容区为 Auto 自适应。

扩展布局适配规则

C 型布局、口型布局：两侧导航栏、侧边栏均采用 Fixed 固定，中间内容区 Auto 自适应。

四、Web 页面适配

本章节讲解响应式、断点（中断点）、布局类型、流动布局模块处理、自适应五大内容。

① 响应式 Responsive

一套代码，兼容多终端。

适用场景：展示官网、交互简单、迭代频率低的产品，维护成本更低。

实现响应式两个必要条件：

1. 布局具备规律性，依托弹性网格，尽量用百分比替代固定像素；
2. 图片资源支持弹性缩放，不写死图片宽高。

栅格系统，正是实现响应式网页的底层基础。

② 中断点（断点 Breakpoint）

断点即页面尺寸临界阈值：浏览器窗口收缩到该数值，页面布局规则需要发生变化，适配新的视口。

断点的设置，需要结合业务内容、主流设备分辨率、用户规模、研发成本综合判断；当现有布局无法良好展示内容，就应该设置断点。

参考业界标准：Material Design、Bootstrap 断点体系。

断点越多适配效果越细腻，但开发成本随之提升；资源有限的项目，选取少量核心断点即可。

③ 布局类型

按照页面缩放行为，分为固定布局、流动布局、混合布局三类。

1. 固定布局 列宽、水槽全部固定，设置 PC 端常用最小宽度（一般1200px）。

   

• 窗口大于最小宽度：内容居中，左右留白；
• 窗口小于最小宽度：页面不再收缩，底部出现横向滚动条。

2. 流动布局 浏览器窗口缩小时，元素自动变窄、文本自动换行；只有抵达断点阈值，才会变更整体布局结构。 适合仪表盘、编辑器、图文、数据可视化页面；对用户而言，内容弹性收缩，优于单纯增减显示条目。

   

3. 混合布局 固定布局 + 流动布局结合。最典型例子：后台系统 Dashboard，侧边栏 Fixed 固定，右侧内容区 Auto 流动。 不同维度使用不同缩放规则，部分区域固定、部分区域弹性伸缩。 适用后台系统、工具界面。

   

④ 流动布局下的模块处理策略

响应式不等于简单整体等比缩放。需要基于内容优先级灵活调整模块，一共 5 种处理手段：

1. 挤压‑拉伸 模块跟随视口挤压拉伸；适合文本、按钮、输入框、纯色背景，拉伸不会产生形态损坏的元素。

   

2. 左右‑上下 PC 端左右排布，窄屏转为上下堆叠；适合图文列表、主内容 + 侧边推荐等双栏排版。

   

3. 删减‑增加 小屏幕下舍弃次要内容（广告、次要快捷入口、附属推荐链接），保留核心业务主线。 移动端可视区域狭小，优先保障核心任务体验。

   

4. 变换位置 不删除模块，调整模块顺序；PC 端侧边次要模块，移动端移动至页面底部；多栏转为单栏。

   

模块上下顺序由业务优先级决定，优先级越高越靠页面上方。

5. 隐藏‑展开 内容收起，通过弹窗 / 独立页面呼出。典型场景：PC 顶部导航，窄屏幕收纳进汉堡菜单，点击展开。

   

⑤ 自适应 Adaptive

不同终端，维护独立的页面与代码。

通过检测视口尺寸、设备特征，调用对应版本页面。 适用场景：电商、交互复杂、用户量大的产品；可以针对设备深度定制交互与功能，体验上限更高，但维护成本更高。

结语

布局是 Web 设计语言库的地基，从宏观页面框架、元素堆叠层级，到微观栅格间距、跨端适配，层层约束共同保障整套产品体验统一。后续可以结合视觉规范、数据可视化规范，完成完整设计语言库搭建。

转载：优设

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

兰亭妙微ui设计公司分享：图标是 UI 界面里至关重要的视觉符号，充当用户的视觉向导，帮助用户快速识别、导航、理解界面操作。好的图标，兼顾可用性、无障碍体验与品牌调性；而设计糟糕的图标，会造成理解障碍，直接拉低产品整体用户体验。

下面这 8 条原则，可以帮你产出高效、专业的 UI 图标。

1. 保证图标清晰简洁，做到一眼可识别

图标要做到瞬间传递功能含义，过度复杂的造型会增加用户认知负担，简洁才是可用性的基础。

界面浏览时用户大多快速扫视，图标必须具备瞬时识别能力。尽量删减多余装饰，只保留核心表意细节，避免繁杂元素干扰阅读。 优先选用大众已形成共识的通用符号：放大镜代表搜索、垃圾桶代表删除。以垃圾桶图标为例，它本身表意足够直白，非特殊业务场景，无需额外叠加火焰、警示标识等多余元素。

2. 坚守视觉一致性，统一整套图标语言

一致性是图标体系的灵魂。同一产品下全套图标，必须保持统一的风格、尺寸、色彩体系。

风格割裂的图标会破坏界面整体和谐，带给用户混乱的感受。建议输出图标风格规范文档，统一网格系统、尺寸大小、圆角弧度、线条粗细、配色方案。 谷歌 Material Design 图标就是典型范例，统一的描边粗细与圆角规则，构建出完整连贯的视觉语言。

3. 适配多尺寸场景，大小屏幕都要锐利

图标会在移动端、桌面端、小尺寸标签、大展示图形等不同场景复用，无论放大缩小，都要保证辨识度。

优先采用 SVG 矢量格式，实现无损缩放；设计阶段规避极小尺寸下会糊掉的细碎细节。完成后务必多分辨率预览测试，保障缩到微型尺寸依旧清晰可读。经过优化的笔触，能让小尺寸图标也维持良好识别效果。

4. 遵循平台原生设计规范

iOS、Android、Windows 各平台，都拥有自己成熟的设计语言与图标使用惯例，遵循平台规范，能降低用户的学习成本，操作直觉更强。

设计前查阅官方文档：苹果 Human Interface Guidelines、谷歌 Material Design。 举个例子：iOS 的「分享」图标是方框加向上箭头，而安卓平台则使用三点互联样式。贴合平台习惯，用户上手会更加自然。

5. 兼顾无障碍，做到普适可用

图标需要服务全部用户，包含色弱、色盲等特殊人群。

非通用符号建议配套文字标签说明；图标与背景之间保证充足对比度；切忌单纯依靠颜色传递信息，要结合形状、文字多重表达，降低理解门槛。搭配文字标签，能够显著提升图标信息传递效率。

6. 落地用户测试，验证图标真实表意

设计师主观觉得易懂的符号，普通用户未必能读懂，可用性测试可以检验图标的直觉性与实际效果。

开展可用性调研，记录用户识别、解读图标的真实反馈；可以通过 A/B 测试对比多版方案，再基于反馈迭代优化。

NN group 把图标能力拆成两个关键维度：

• 图标识别度：用户能否辨认图形本身（例如五角星图形，能不能看出是星星）
• 图标释义度：在业务场景中，用户能否读懂符号代表的功能含义（星星在这里代表收藏，还是评分）

7. 贴合品牌视觉基因，强化产品记忆

图标是品牌视觉的一部分，应当承接品牌气质，加深用户品牌印象。

图标配色、造型、风格，需要和产品 VI、字体、插图等整套 UI 元素协调统一。不要直接套用和品牌调性冲突的通用图标，否则界面会产生割裂感。 Slack 的图标就沿用品牌标志性紫色，搭配圆润的造型，品牌体验高度统一。

8. 兼顾性能，控制图标加载成本

图标不能只看视觉效果，还要保障网页、APP 加载效率，未做优化的图标会拖慢加载速度，损耗体验。

优先选用 SVG 矢量格式，兼顾缩放能力与小体积；如果使用 PNG 等位图，务必做无损压缩；精简多余细节，控制文件体积。

写在最后

图标看着小巧，却深刻影响整个界面的体验。不必追求花哨的造型，把这 8 条准则落地，平衡清晰、统一、适配、无障碍、品牌与性能，就能做出专业好用的定制图标。

转载：优设

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