让“认识附近的人”，先变成看得见的生活场景。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Momento，一组围绕附近发现与即时分享展开的社交 App 设计。照片、头像与活动把抽象的社交功能变成具体体验。

一、项目背景：让初次进入的用户理解连接的价值
附近的人、在线状态、生活分享和本地活动，各自承载不同期待。Momento 用连续的新手引导逐一介绍这些场景，让开始使用之前的认知过程保持轻松。

图 1  发现身边朋友的引导

照片拼贴先建立真实的社交情境，标题再点出附近发现的价值。深色空间里，人物与蓝色按钮形成清晰焦点，顶部进度与跳过入口则保留轻松进入的余地。

图 2  在线与距离的关系展示

中心头像与周围节点把附近关系画成空间图形，距离与在线的概念因此更有画面感。文字、按钮与进度延续上一屏的位置，场景在变，浏览节奏保持熟悉。

二、设计策略：用稳定框架呈现不同社交情绪
①信息架构：每屏聚焦一种行为，从发现走向分享，再过渡到活动与登录。②视觉语言：黑色与深蓝衬托人物摄影，明亮蓝色标记主动作；圆角、头像与节点图形形成一致的视觉节奏。

Momento Social | 界面细节与设计启发    

图 3  分享生活的内容预告

节点与头像继续作为主要图形，围绕分享生活展开新的叙事。与前一屏相近的构图让引导保持连贯，不同标题则为相似画面赋予清楚的功能含义。

图 4  本地活动与登录衔接

活动卡片预告进入产品后可以探索的内容，底部动作转向登录，并保留注册入口。前面的社交想象在这一屏落到开始使用，图片与动作之间的过渡十分自然。

③场景化交互：进度、跳过与下一步的位置持续出现，主要变化集中在图片和场景说明。最后一屏转入登录与注册，让前面的价值介绍接上实际入口，整段引导有明确的推进关系。

三、设计启发：新手引导也可以是一段有节奏的产品叙事
每一屏给出新的社交理由，同时保留熟悉的按钮和版式。摄影负责建立情绪，短标题负责解释用途。做社区或社交产品时，这种把功能讲成生活场景的表达，比逐项罗列模块更有画面感。

如有社交、兴趣社区类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

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

本文属于反主流视角的译文复盘，直指 UX 行业的诸多现实弊病，提醒从业者不要迷信流程、术语与数据，回归设计的本质。

本文辨析服务设计和用户体验设计的概念边界、工作范畴、工具方法，同时对比产品与服务的差异，帮助设计师理解两种学科的分工与重叠。

统一网格能让网站清楚可靠，但品牌表达也可以保留一点变化。Brecht De Ruyte近期用CSS random()探索了字体和卡片的趣味表现。兰亭妙微借这一主题，讨论高端网站设计中哪些地方适合变化、哪些地方需要稳定。配图为AI概念示意，不是原文演示截图或已上线网站。

同一组组件，有人叫“提示”，有人叫“通知”，研发又使用第三种名称，协作时就容易发生偏差。Vitaly Friedman的新文章汇集了命名资源与案例。兰亭妙微围绕B端界面设计，给出一套可从小范围开始执行的命名建议；下文示例是说明方法，不是通用强制标准。

AI生成速度越来越快，团队却未必因此减少了全部工作。NN/g近期对521名UX从业者的调查提到，受访者感受到提速，同时也担心输出可靠性等问题。以下是兰亭妙微据此提出的工作流建议：把核查、修改和交付一起计算，而不是只记录第一版生成用了多久。

设备屏幕上的界面，最终要在具体硬件和真实操作环境里工作。Qt 于10月27日介绍了面向嵌入式与HMI设计的 Clate Beta，并说明其QML交付方向。兰亭妙微结合这一动态，提出以下设计交付检查建议。文中配图为AI概念示意，不是Clate截图，也不是本司客户项目。

折叠菜单看起来只是标题旁的一枚小图标，却同时承担了告知状态、提示动作和组织内容的任务。Vitaly Friedman 的新文章讨论了不同图标与分离点击行为带来的理解差异。兰亭妙微借这一问题，整理一套面向企业官网和业务后台的评审方法；下面的场景为应用建议，并非原作者对这些产品的测试结论。

一 先确定这一行到底执行什么动作

先把菜单项分成两类：进入页面，或展开内容。应用建议是让同一行的文字与图标表达同一个动作。如果“产品服务”文字进入介绍页，而右侧小箭头展开下级列表，用户就必须在很近的两个目标之间做判断。评审时应把两种点击分别写进交互说明，而不是只画一个静态展开态。

图1 原文引用的 DHL 移动导航示例。图片来源：Smashing Magazine；界面版权归相关权利人。

例如企业官网需要保留栏目总览时，可以在展开后的列表里设置明确的“查看全部服务”链接。这样既能继续浏览子项，也能知道如何到达汇总页。是否采用这一结构，仍应结合具体导航层级和用户任务验证。

二 用状态变化帮助用户理解结果

图标之外，还要检查内容出现的位置、标题样式与展开状态是否同步。应用建议：点开费用说明后，正文紧接标题出现，图标和辅助技术状态一起变化；收起时返回可预期的位置。若用户需要滚动查找刚出现的内容，即使图标正确，反馈也可能不足。

对多级菜单，应明确哪些层级可以同时打开。不要在用户进入第三层时悄悄收起仍需要参考的上层信息。复杂后台中的分组筛选，还要检查关闭面板后是否保留已选条件。

三 把点击范围与键盘操作一起检查

应用建议：在触摸设备上，以整行作为清晰的操作目标，并预留稳定的间距；在桌面上，检查键盘是否能进入、展开和离开该区域。图标只是提示，真正的操作控件仍需要可理解的名称、焦点样式和状态描述。

图2 原文展示的 Lens.org 折叠内容示例。图片来源：Smashing Magazine。

寻找交互设计公司或进行方案验收时，可以要求现场演示“展开、选择、返回、再次展开”四个步骤。观察内容和焦点是否留在合理位置，比仅比较箭头的线条粗细更能发现问题。

菜单设计的验收，应同时覆盖动作含义、状态反馈与操作路径。把这三件事写清楚，后续的视觉设计和开发协作才有共同依据。

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

兰亭妙微ui设计公司分享：在团队协同设计中，图标常常出现风格混乱、圆角与断点规则不统一的问题。不仅拉低产品界面质感，还会削弱品牌专业视觉形象。如果你正苦于缺少一套可落地的图标设计规范，本文可以提供完整的实战解决方案。

一、统一图标规范的价值

1. 强化品牌识别与记忆

图标是品牌视觉体系的关键组成。一套辨识度高、特征鲜明的图标，可以快速抓住用户视线，长期使用后会沉淀为用户对品牌的视觉记忆符号。

2. 传递品牌气质与价值取向

图标不只是简单图形，线条、圆角、重量感都会传递品牌气质：粗线条厚重醒目，细线条精致轻盈；大圆角柔和亲和，尖角干练锐利，借由视觉语言向用户传递品牌理念，提升用户认同感。

3. 提升品牌专业权威性

一套严谨统一的图标体系，能够直观体现产品的设计品质，建立用户信任感，在同类产品竞争中建立更好的品牌印象。

二、项目里常见的图标乱象

没有成文规范约束时，多人协作很容易产出五花八门的图标，主要有四类典型问题：

1. 图形形状不统一 含义相近的图标采用完全不同的基础造型，同类功能图标元素杂乱，界面缺乏整体协调性，直接影响用户对产品的第一印象。

   

2. 复杂度差异过大 部分图标元素繁琐，部分过于简约。复杂度失衡既破坏界面审美，小尺寸场景下还会降低图标的识别效率。

   

3. 圆角规则混乱 同类基础图形（如矩形）混用多种圆角数值，界面观感杂乱，给用户带来不必要的视觉负担，降低使用体验。

   

4. 断点、内部间隙不统一 断点有无、内部元素间隙数值随意，会破坏视觉稳定性，削弱品牌视觉的专业度。

   

乱象带来的负面影响

• 对用户：视觉体验割裂，识别成本上升；
• 对品牌：视觉输出不稳定，削弱市场竞争力；
• 对设计师：图标维护成本高，团队协作效率低下。

问题根源：缺少清晰可执行的图标设计文档，新增、修改图标时没有统一参照标准，多人输出就容易出现 “十个设计师十种图标风格”。

三、图标设计核心原则：5 秒识别原则

用户应当在 5 秒内读懂图标代表的功能含义，以此为核心延伸出 5 个设计要点：

1. 直观性：图形表意直白，无需额外文字解释，例如放大镜代表搜索；
2. 简洁性：剔除冗余细节，保障小尺寸下依旧清晰可读；
3. 一致性：同类功能使用相似图形语言，帮助用户建立图标‑功能的记忆联想；
4. 可识别性：在不同背景、不同使用场景中，都可以被快速分辨；
5. 反馈性：交互状态要有图形变化反馈，例如线性切换面性，提示用户操作生效。

四、图标规范实战探索与设定

1. 圆角体系设计

• 先确定整体视觉风格：本案例选择中性柔和的圆角语言，避开尖角的硬朗感，同时拒绝超大圆角带来的过度活泼，追求精致平衡的气质。

  

• 建立数值规则：采用倍增的理性数值体系（1‑2‑4‑8‑16‑32），用数学严谨性约束圆角，同时剔除多余的圆角档位。

  

• 严格保持全局一致：整套图标体系中圆角大小、形态统一；迭代过程持续收敛，特殊场景才允许例外。

  

2. 断点规则

断点风格要做到 “要么全部断点，要么全部不断点”。 本次方案最终放弃断点式图标：尽管设置拐点圆角、端点直角可以优化封闭图形观感，但图标表意形态丰富，断点位置、间隔很难做到全局统一，落地维护难度高。

3. 元素大小与视觉平衡

图标评判优先看视觉大小，而非画布物理尺寸。 先以物理网格对齐，出现视觉偏差时，可以适度调整图形形态补偿视觉错觉，实现视觉重量均衡；叠加附属小元素（加号、标签等），也要收敛统一尺寸档位。

4. 形意统一优化

• 表意同类，外形同源：含义相近的图标复用同一套基础图形框架再做延展，例如文档类、用户类图标，多版本迭代对比选出和整体风格适配的方案。
• 迭代优化图形：针对识别弱、观感差的图标做多版方案对比，兼顾美观与识别效率。

  

五、落地输出规范

1. 栅格与关键线 Key‑line

• 基础画布：24×24px 栅格；

  

• 安全容错区：主体图形控制在 23×23px，特殊图形可突破；

  

• 关键线：定义矩形、圆形、三角形等基础形状的参考边界，图标路径对齐关键线，采用居中描边绘制。

  

2. 常用尺寸档位

优先推荐：36px、24px、12px；备选补充：32px、20px、16px、8px，适配不同业务场景。

3. 线段、端点、间距规则

1. 拐点与端点：拐点圆角，端点直角；特殊圆点端点，圆点直径略大于线宽，优先 3px，特殊场景使用 2.5/3.5/4.5px，尽量少用。

   

2. 内部间距底线：图标内部元素间隙不小于基础线宽 2px，避免图形拥挤粘连。

   

   

3. 圆角档位映射

   

   • 直角：R0 → 外圆角 2x，内圆角 1x
   • 弱圆角：R1 → 外圆角 4x，内圆角 1x
   • 标准圆角：R3 → 外圆角 8x，内圆角 4x
4. 封闭与非封闭图形：闭合曲线图标可直接填充转换为面性图标；非闭合图形做面态时，附属小元素需要增加圆形底，保证显示效果。

   

4. 文件命名规范

• 线性图标：含义_状态(_circle)
• 面性填充图标：含义_状态(_circle)_filled

六、总结：规范不是一成不变的死文档

1. 重视团队协作：图标规范推导收敛是复杂工作，设计师既要严格遵循现有规则，遇到不适配业务的场景，也要主动反馈，持续完善文档。
2. 保持迭代意识：规范需要随业务持续迭代，在项目实践中验证、调整、补充。
3. 细节服务一致性：圆角、断点、间距、栅格等细节规则，最终目的都是为整套图标体系实现视觉统一。

转载：优设

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

兰亭妙微ui设计公司分享：信息聚合类 App 首页承载海量入口、活动与内容，很难走极简路线。尤其国内互联网产品，首页需要抢夺用户注意力；作品集当中，平淡寡淡的首页也很难脱颖而出。但视觉丰富不等于杂乱堆砌，花哨要有章法，热闹更要讲节奏。本文结合大量线上案例，拆解移动端首页的全局规划逻辑与主流视觉处理手段。

一、首页全局视觉规划：建立页面节奏感

很多首页最后视觉失控，并不是初始方案很差，而是持续迭代中，运营模块、营销组件被孤立添加，只关注单个组件好不好看，忽略页面整体关系，最终打破整体平衡。

错误做法：一上来就埋头抠图标、卡片细节 正确思路：优先做全局规划，管控全页各个模块的视觉权重，搭建完整的视觉节奏。

1. 视觉强度从上至下衰减

首页首屏是权重最高的区域，页面越往下，信息优先级越低。对应的视觉冲击力，也应当跟随浏览路径逐步减弱。 强视觉、高饱和度、重运营的模块，尽量收敛在首屏上半区；如果下半页出现大量强刺激元素，会抢夺视线，违背用户自上而下的浏览习惯。

衰减并非一条笔直下降的直线，而是起伏变化的曲线节奏： 高强度模块之间，一定要用弱视觉模块做缓冲过渡，强弱交替排布，这就是平面设计的对比原则，也是决定首页设计成败的核心要点。

2. 管控三类视觉素材：UI 组件、运营物料、内容图片

完整首页输出，不能只考虑 UI 控件本身，运营 banner、营销插图、业务配图都需要纳入管控，三者共同决定页面最终观感。

1. 运营素材：营销活动图不能孤立设计，必须服从页面整体强弱节奏，避免局部过于突兀；
2. 业务图片（商品图 / 内容图）：图片本身自带视觉重量，如果不加管控，会打乱已经规划好的页面节奏。

实操技巧：对配图做分级管理。一部分模块使用白底 / 浅底干净素材，一部分模块允许使用带环境背景的丰富图片，以此调节页面的视觉起伏，让图片融入整体界面。

注：具体配色、风格、创意表现，需要结合产品定位与品牌规范做落地，不在本文展开。

二、移动端首页 6 类主流视觉处理方案

在做好全局节奏的前提下，可以通过下面 6 种常用手法，给页面增加视觉表现力，大部分聚合类 App 首页都可以看到这些实践。

1. 顶部氛围背景

页面头部用品牌色做渐变、弥散渐变，快速烘托产品氛围，支持深色、浅色两种基底。

搭配规则：如果头部用深色强氛围背景，紧随其后的模块就用简约浅色底；头部为浅色，则后续模块可以适当加强视觉表现，形成反差。

2. 功能快速入口

常规形态是「图标 + 文字」，插画、3D 图标本身不等于过度花哨，依旧可以做到精致简约。 想要提升入口视觉权重，可以将入口卡片化：扩大点击热区，给卡片叠加背景色、背景图，常见于本地生活、小程序业务。

3. 瓷片区布局

瓷片区本身就是卡片矩阵，最简单的强化方式就是给卡片配置差异化背景色。 不要做尺寸完全均等的平铺排布，通过卡片大小错落、内部排版区分，让瓷片区富有层次，避免呆板。

4. 卡片边框强化

普通卡片想要突出重点内容，可以借助外框做视觉加持，三种常用手段：异形裁切边缘、彩色装饰边框、特殊样式标题。 依靠外壳提升模块存在感，即使内部内容偏平淡，整体模块也能获得足够关注度。

5. 优惠福利组件

福利、优惠券模块自带营销属性，视觉强度跟随业务权重动态调整：

• 低权重：浅底色，只高亮金额数字；
• 高权重：使用高饱和红、橙底色，完整强化整个卡片，强化营销感知。

6. 底部导航栏

底部 tab 整体不宜过度抢眼，但可以做局部强调。 重点业务 tab（首页、发布按钮），使用特殊图形、独立底色做差异化突出，既增加细节，又不会让底部导航整体抢夺页面主体内容的注意力。

写在最后

丰富的视觉手法只是工具，切忌一味叠加效果。所有样式都要回到全局视角校验，服从页面的节奏规划。 后续还会继续输出更多移动端组件落地技巧，大家可以留言说出你想要了解的设计话题。

转载：优设

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