北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

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

• 移动端：作为核心载体，承接高频的情绪打卡、日记书写与AI对话，强调私密性与便捷性。
• Web端/官网：承担品牌信任构建与服务介绍，通过生动的视觉语言降低用户对“心理治疗”的防御心理。
• 核心价值：通过拟人化的AI伴侣（猫头鹰形象），将抽象的心理健康服务具象化、亲切化，解决传统心理应用门槛高、难以坚持的问题。

二、信息架构：把功能转译为用户的自我关怀顺序

• 感知层：首页以“Daily mood log”（每日情绪日志）为第一优先级，通过简单的表情选择降低启动门槛。
• 行动层：将“Journal”（日记）、“Specialist”（专家预约）、“Health Overview”（健康概览）组织为可进入的任务模块。
• 反馈层：通过“Freud Score”等趣味化指标和趋势图，让用户看到长期的心理状态变化。
  这种分层既照顾了用户当下的情绪宣泄需求，也保留了专业干预的入口。

三、关键交互：从机械记录走向情感连接

• IP角色互动：界面中的猫头鹰形象不仅仅是装饰，它出现在加载页、空状态和对话场景中，作为AI伴侣的化身，提供情感反馈。
• 可视化情绪：情绪记录不是简单的文字，而是通过色彩鲜明的表情图标和动态曲线展示，让不可见的情绪变得可见。
• 服务预约：在移动端直接展示专家头像、擅长领域（如Specialist THT）和时间段，将复杂的咨询预约流程简化为类似电商购物的流畅体验。

四、视觉系统：品牌表达必须承担疗愈语义

• 色彩心理学：大面积使用薄荷绿、天青色等低饱和度自然色系，建立平静、放松的基调；紫色作为品牌色（猫头鹰、按钮），增添了一丝神秘与智慧感，同时保持温暖。
• 插画风格：采用圆润、柔和的2.5D插画风格，无论是飞翔的猫头鹰还是温馨的小屋，都传递出“包容”与“希望”的语义。
• 字体与图形：圆角卡片、粗圆体标题（Bold Creative）强化了亲和力，消除了尖锐感带来的心理压力。

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

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

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

• 移动端：作为核心载体，承接球场上的实时记录、GPS测距与赛后复盘，强调在户外强光下的可读性与操作的便捷性。
• 品牌层：通过高度抽象的符号系统，传递“精准、清晰、现代”的价值观，解决传统高尔夫应用界面老旧、数据杂乱的问题。
• 核心价值：将复杂的高尔夫运动数据转化为直观的表现洞察，帮助球员从“凭感觉打球”转向“数据驱动决策”。

二、信息架构：把功能转译为球员的击球顺序

• 启动层：App图标与启动页（Splash Screen）采用高饱和度的黄绿色调，在视觉上直接关联草地与活力，建立鲜明的品牌识别。
• 功能层：底部导航栏简洁明了，核心功能（如搜索球场、开始回合）被置于拇指热区；Dashboard（仪表盘）作为数据汇总页，承载了长期的表现趋势。
• 视觉层级：Logo设计采用几何化的三圆点结构，既像高尔夫球，又像挥杆的人体动态，这种极简的图形语言贯穿了整个UI界面，降低了认知负荷。

三、关键交互：从机械记录走向流畅体验

• 拟物与扁平的结合：启动页中的3D Logo质感细腻，具有实体球的光泽感，而进入界面后迅速转为扁平化设计，保证了信息读取的效率。
• 色彩心理学应用：大面积的绿色背景不仅仅是装饰，它模拟了真实球场的视觉环境，让用户在打开App的瞬间就能进入“打球”的心流状态。
• 符号化导航：底部的搜索与菜单按钮采用了圆润的胶囊形设计，配合高对比度的图标，确保用户在移动中或戴手套时也能准确点击。

四、视觉系统：品牌表达必须承担运动语义

• 色彩策略：主色调选用了接近果岭草皮的鲜绿色，搭配明亮的黄色作为点缀（如Logo中心、App图标背景），形成强烈的视觉冲击力，象征能量与专注。
• 字体与图形：Logo的几何构建过程（如第一张图所示的节点与连线）展示了设计的严谨性，这种“工程感”暗示了产品在数据分析方面的专业性。
• 跨端一致性：从手机桌面图标到App内部界面，再到品牌宣传物料，视觉语言高度统一，强化了“Smarter Golf Performance”的品牌承诺。

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

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

结语：设计的最终判断标准是业务与使用价值

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

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

• 桌面端/平板端：承担全局洞察与复杂决策，如多航司对比、长航线规划与商务舱选座，主要面向高频差旅人士与追求效率的用户。
• 移动端：承接高频执行与即时反馈，如登机口变更通知、电子登机牌展示与快速改签，强调在移动场景下的单手操作便捷性。
• 核心价值：通过“Book. Fly. Repeat.”的极简理念，将繁琐的购票流程压缩为“3次点击”，解决传统航空应用中信息过载、决策链路长的问题。

二、信息架构：把功能转译为旅客的出行节奏

• 全局层：首页以巨大的出发地/目的地代码（如 JFK ⇌ MXP）为视觉锚点，确立行程的核心上下文；搜索栏置于顶部中央，支持快捷键（⌘ + Space），符合桌面端高效操作习惯。
• 执行层：将“Upcoming Flight”（即将开始的航班）卡片化，突出时间与舱位；“Hot Propositions”（热门推荐）则以列表形式展示，便于快速比价。
• 沉浸层：右侧或独立页面的“Select Seats”（选座）模块，将抽象的座位图转化为可视化的机舱模型，让用户在预订阶段就能预演飞行体验。

三、关键交互：从填写表单走向可视化决策

• 动态航路图：不仅仅是静态地图，而是通过光点移动、虚线轨迹和实时距离计算（Distance to arrival），让“正在飞行”的状态变得可感知。
• 即时反馈闭环：在选座环节，用户点击座位后，底部的结算栏（Checkout）实时更新价格与座位号，无需跳转页面即可完成确认，极大缩短了决策路径。
• 拟物化票据：电子登机牌采用了带有撕裂线设计的拟物风格，配合二维码与关键信息（Gate, Seat, Class），既保留了传统票据的仪式感，又具备数字化的便捷性。

四、视觉系统：品牌表达必须承担高端与科技感

• 色彩语义：深邃的墨绿色背景（#006A4F）奠定了高端、稳重的基调，象征夜空与深海；高饱和度的荧光绿（#8EFEEE）作为核心操作色，用于指引路径与选中状态；橙色（#FF6803）仅用于强调价格或紧急状态，形成强烈的视觉层级。
• 光影质感：界面大量运用了微弱的顶光与磨砂玻璃效果（Glassmorphism），模拟机舱内的氛围灯效，让数据卡片仿佛悬浮于深色背景之上，增强了界面的通透感与层次感。
• 字体排印：采用大字号的无衬线字体展示机场代码（如 CDG, HND），利用字重对比区分信息层级，确保用户在余光扫视时也能瞬间获取关键信息。

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

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

结语：设计的最终判断标准是业务与使用价值

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

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

• 移动端 App：作为核心数据载体，承接高频的试纸扫描、结果解读与周期追踪，强调“5分钟出结果”的便捷性。
• Web 端/官网：承担品牌信任构建与深度教育，通过详尽的 FAQ、原理图解（如激素曲线）和价值观展示，解决用户对“在家测激素”准确性的疑虑。
• 核心价值：通过“硬件+软件”的结合，将复杂的医疗级激素检测（雌激素、促黄体生成素、孕酮）转化为可视化的生育洞察，帮助用户从“盲目猜测”转向“数据驱动备孕”。

二、信息架构：把功能转译为备孕的科学逻辑

• 感知层：App 首页以“Fertility Chart”（生育图表）为视觉锚点，通过三条不同颜色的曲线直观展示激素变化趋势，确立数据的科学性。
• 执行层：将“Scan”（扫描）按钮置于底部导航栏中心，作为最高优先级操作；官网则通过分步图解（Dip, Attach, Insert, Get results）降低硬件使用门槛。
• 认知层：通过“Why measure Progesterone?”（为什么要测孕酮？）等科普模块，解释数据背后的医学意义，建立用户对产品专业度的信任。

三、关键交互：从枯燥读数走向可视化洞察

• 动态曲线图：不仅仅是展示数字，而是通过平滑的贝塞尔曲线和色彩填充区域，清晰界定“易孕期”、“排卵日”与“黄体期”，让不可见的生理周期变得可见。
• 即时反馈闭环：在扫描环节，App 界面模拟了试纸插入的物理动作，并在几秒内给出明确的“Peak”（峰值）或“High”（高）状态提示，减少用户的等待焦虑。
• 引导式流程：官网的“How it works”部分采用卡片式分步引导，配合实物照片，让用户在购买前就能预演完整的使用体验。

四、视觉系统：品牌表达必须承担科学与关怀的双重语义

• 色彩心理学应用：主色调采用低饱和度的淡紫色与青绿色。紫色通常与女性健康、神秘感相关，而青绿色则传递医疗、科技与冷静的信号。两者的结合既保留了女性产品的柔美，又确立了医疗器械的专业感。
• 留白与呼吸感：界面大量使用白色背景与圆角卡片，配合柔和的阴影，营造出干净、无菌但不刺眼的视觉体验，符合备孕人群追求安心、平静的心理需求。
• 字体层级：关键数据（如激素数值、日期）使用粗体强调，而解释性文字则使用细体，确保用户在焦虑状态下也能快速抓取核心信息。

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

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

结语：设计的最终判断标准是信任与希望

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

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

• 硬件端（手环）：作为极简的数据采集与状态展示终端，强调“一眼即懂”的直观性，通过独特的环形光效反馈身体状态。
• 移动端 App：承接深度数据分析与 AI 交互，不仅展示“发生了什么”，更通过 Proactive AI 解释“这意味着什么”以及“接下来该做什么”。
• 核心价值：通过“Закрыть три кольца”（闭合三个圆环）的游戏化机制，将复杂的健康管理简化为直观的平衡任务，解决用户面对海量健康数据时的焦虑与迷茫。

二、信息架构：把功能转译为身体的平衡逻辑

• 全局层（首页）：摒弃了传统的列表式布局，采用巨大的液态球体（Liquid Sphere）作为视觉锚点。这个球体不仅是品牌 Logo 的延伸，更是用户当日整体健康状态的拟物化表达。下方直接列出三大核心指标（卡路里、运动时长、睡眠时长），层级极高。
• 执行层（详情页）：在活动和睡眠详情页，顶部采用周视图时间轴，中部为核心仪表盘（如圆环进度），底部为具体的“ подсказка”（提示/建议）卡片。这种布局让用户先看到结果，再根据兴趣下钻查看细节。
• 信任层（营销页）：通过 EQA Labs 板块，展示“-9 cm”、“-7.4 kg”等真实实验数据，将抽象的健康概念转化为可量化的科学成果。

三、关键交互：从被动记录走向主动对话

• Proactive AI 交互：首页的 AI 助手不是等待指令的机器人，而是主动发起对话的教练。例如界面显示的“3天内你已经燃烧了240g脂肪，继续保持！”，这种基于数据的即时正向反馈，比单纯的图表更能激励用户。
• 液态隐喻：App 中的球体设计不仅仅是装饰，它模拟了水的张力与流动，暗示了健康是一种动态平衡。点击球体或与其互动，可能触发更深度的状态解析，这种交互充满了探索感。
• 硬件光效同步：手环上的光环颜色（橙、绿、紫）与 App 内的主题色严格对应，实现了从手腕到屏幕的无缝视觉流转。

四、视觉系统：科技与自然的深度融合

• 色彩语义：
  • 橙色代表营养/热量，唤起食欲与能量的联想；
  • 绿色代表活动/生命力，象征运动与燃烧；
  • 紫色代表睡眠/恢复，传递宁静与深邃的感觉。
    这种色彩编码贯穿了硬件光效、App 图表和营销物料，形成了极强的品牌记忆点。
• 材质表达：大量使用了玻璃、水滴、流光等材质元素。特别是那个透明的、内部仿佛有液体流动的球体，打破了传统科技产品硬朗的线条感，赋予了品牌一种“有机科技”的独特气质。
• 排版：大字号的标题与纤细的数据字体形成对比，既保证了信息的易读性，又维持了画面的呼吸感。

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

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

• 认知负荷：对于新用户来说，那个液态球体具体代表什么？是综合得分还是某种抽象状态？如果缺乏明确的图例说明，可能会造成理解障碍。
• 数据密度：虽然首页极其简洁，但在详情页中，如何平衡“美观的仪表盘”与“精确的数据读取”是一个挑战。例如睡眠相位图虽然好看，但专业用户可能更需要精确的分钟数统计。
• 建议：在保持美感的同时，增加辅助性的文字标签或图例；在 AI 对话中增加“为什么给我这个建议”的解释入口，增强系统的透明度。

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

兰亭妙微ui设计公司分享：做 UI 设计时，经常会遇到同一个产品内，多个页面视觉割裂、风格打架的问题。即便单张页面看着好看，整套界面放在一起，观感依旧杂乱，作品集呈现也大打折扣。今天结合低碳 App 的真实改版案例，分享 4 套可直接落地的界面风格统一方法论，帮你快速解决页面风格不统一的痛点。

一、先找准根源：页面风格为什么会割裂？

本次案例的原始版本里，首页头部采用扁平插画，个人中心头部却是 3D 质感图标。两个页面各自独立完成，没有对齐主视觉语言，元素表现形式完全不同，放在一套产品里就产生强烈的违和感。

很多时候界面不协调，并不是布局、排版出了问题，而是主视觉、插画质感、图标体系没有统一标准。不同页面使用两套完全不一样的视觉素材，最终造成整套产品碎片化。

解决逻辑：做整套界面，优先对齐主视觉与色彩体系，再打磨交互细节、质感表现，界面完整度才能真正提升。

实战方法 1：统一主视觉语言，对齐核心设计元素

主视觉是页面第一眼给用户的印象，整套产品必须选用同一套表现形式：要么全部用扁平插画，要么全部使用 3D 质感图形，不要插画、3D 图标混用。

在这个低碳项目中，我们舍弃首页原本的风景插画，借助 AI 生成风格统一的 3D 质感图标，首页、个人中心头部全部采用同类 3D 图形。统一视觉载体之后，两个页面的整体基调瞬间协调。

实操要点：

1. 确定项目主视觉方向：扁平 / 2.5D/3D 拟态 / 手绘插画，全项目严格遵循；
2. 头部 Banner、卡片装饰、重点模块图形，保持光影、材质、圆角风格一致；
3. 作品集改版项目，切忌东拼西凑素材，统一的视觉语言会大幅提升作品专业度。

实战方法 2：规范色彩体系，让配色干净通透

视觉统一的第二关键点，就是色彩一致性。 原始案例两个页面的主色调深浅、色相不匹配，首页头部混入脏感的黄调渐变，进一步加剧页面割裂。

优化做法：

1. 选定一个页面作为色彩基准（案例以首页主色为基准），把全产品页面的主色、辅助色统一；
2. 慎用多色叠加的复杂渐变，去除容易显脏的杂色，降低渐变饱和度，让界面更加清爽通透；
3. 组件、按钮、标签、图标，全部复用设计规范里的色值，禁止页面局部随意改色。

统一色彩之后，首页与个人中心的底色、卡片色调、按钮色值完全对齐，页面之间的割裂感大幅消除。

实战方法 3：优化交互细节，优先保障可用性

视觉好看的同时，不能忽略交互体验。改版前首页签到模块，按钮尺寸偏小，容易产生点击误触；配套文字字号过小，可读性差。

优化调整：

• 放大可点击区域，提升触控容错，避免误操作；
• 适度放大辅助文字字号，保证信息识别效率；

核心原则：先保证可用性，再追求视觉精致。不要为了画面好看，牺牲交互易用性。

实战方法 4：巧用质感细节，提升界面层次

当基础布局、色彩、主视觉全部对齐之后，可以增加统一的质感效果，进一步拔高界面精致度。 案例中为签到卡片加入磨砂毛玻璃质感，在不破坏整体统一性的前提下，强化卡片分层，柔和衬托后方的 3D 主视觉图形。

注意：质感效果切忌滥用，整套产品选用 1‑2 种质感即可；如果到处堆砌特殊效果，反而会破坏整体统一。

改版前后完整对比

改版前：首页（扁平插画）、个人中心（3D 图标）视觉语言冲突，配色杂乱，部分交互控件可用性不足。 改版后：两页全部使用 3D 质感主视觉，色彩体系统一，交互控件优化，搭配统一毛玻璃质感；整套界面简洁干净，层次分明，体验更加连贯。

总结：界面风格统一 4 条核心清单

1. 主视觉统一：全产品使用同一套设计元素，插画、3D、手绘不要混用；
2. 色彩保持一致：建立统一色板，减少杂乱渐变，保证界面干净通透；
3. 交互细节不能忽略：放大点击热区、优化字号可读性，可用性优先；
4. 质感补充层次：基础风格稳定后，适度增加毛玻璃等质感，切忌过度装饰。

转载：优设

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

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

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

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

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

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

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

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

优化思路：

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

   

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

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

1. 统一图标视觉风格

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

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

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

优化要点：

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

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

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

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

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

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

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

写在最后

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

转载：站酷

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

兰亭妙微ui设计公司分享：2024 年，58 同城完成企业文化焕新，借此契机，产品迎来一轮全面视觉升级。项目确立四大设计原则：简单有效、美好安乐、多元融合、自然生长。这套理念不仅指导整体视觉改版，更是搭建产品与用户情感连接的内核。

在启动图标体系设计时，《道德经》中 “大方无隅” 的哲思带来重要启发：开放包容、和谐自然的内核，恰好与本次设计理念高度契合，也为整套图标体系定下创作基调。下面将从形、意、色、境、规五个维度，完整复盘 58 同城图标设计的实战全过程。

一、形｜方圆之间，容纳万千表达

形态是图标设计的根基，不同轮廓会直接带给用户截然不同的感知。

1. 确立基础形态

方形代表秩序、规则与稳定，如同坚实的基石，承载产品体系的严谨；圆形象征包容、柔和与流动，传递产品面向用户的亲和姿态。 结合项目设计理念，我们将二者融合，打造方中有圆、方圆共生的基础图形语言。既保留产品的秩序感，又传递出与用户共生共存的温和气质。

2. 业务符号的融入

58 同城业务线庞杂，每个板块都具备独有的业务特质。为此我们提炼专属业务符号，嵌入图标设计当中，强化业务辨识度，唤醒用户的业务认知，让图形不止是装饰，更是业务信息的载体。

3. 线条语言的取舍

线条风格延续方圆融合的设计基调，摒弃生硬锐利的直线，大量使用流畅弧线与曲线，贯彻和谐、自然、舒适的体验追求，统一整套图标气质。

二、意｜兼顾功能传递与情感共鸣

图标是界面最直观的视觉符号，表意是否清晰，直接决定用户体验好坏。本次设计的核心目标：打造看得懂、能共情的图标体系。

1. 选用大众共识视觉符号

坚持以用户为中心，优先选用大众具备普遍认知的物象。例如求职匹配公文包、工卡；二手车对应汽车；生活服务对应清洁工具。 这类符号无需额外解释，用户一眼就能读懂含义，降低认知成本。

2. 适度细节丰富表达

在扁平化基底之上，增加适度光影与细节刻画，为图形赋予真实感与层次。既强化信息表意，也避免图标单薄空洞，让用户浏览时一目了然。

3. 不止功能，更要触动情绪

优秀的图标不止完成功能指引，更需要传递情绪价值。通过形态塑造、色彩搭配、细节打磨，给用户带来感官上的舒适愉悦，让用户在使用产品的过程中，感受到设计的温度与关怀。

三、色｜构建有生命力的色彩系统

色彩是图标强大的视觉武器，决定图标的吸引力与气质表达。

1. 搭建全新品牌色彩体系

基于原有 58 品牌色做拓展迭代，由原先 4 种品牌色扩充为 5 套标准色，并且和各业务线做绑定适配。这套色彩体系具备开放、包容的特质，为品牌视觉注入全新活力。

2. 色彩虚实搭配提升表现力

将新色彩体系落地到图标当中，为不同业务图标赋予专属气质。通过色彩、图形虚实对比组合，强化风格辨识度，增加画面趣味性，让图标在繁杂界面中可以有效抓住用户视线。

四、境｜分层设计，适配真实使用场景

作为大型平台类产品，图标不能一套样式通吃全部页面。合理划分视觉层级，梳理平台与业务的关系，避免视觉过载，打造沉浸式浏览体验。

1. 建立三级视觉层级

我们把图标划分为三个层级，适配不同页面位置：

1. 一级图标：首页主金刚区，用户第一眼关注的区域，强调视觉权重与引导能力；
2. 二级图标：首页副金刚区、各业务大类金刚区，保证识别度的同时，与一级形成视觉落差；
3. 三级图标：个人中心等功能入口，以极简形态优先满足功能实用性。

2. 贴合场景做差异化处理

• 一级金刚区图标：叠加光影、质感细节，强化重点引导；
• 二级图标：偏向扁平化，尺寸收窄，做视觉退让，保留识别；
• 三级图标：采用线性样式，适配功能入口轻量化的使用场景。

五、规｜无规矩不成方圆，设计靠规范落地

再出色的创意，离开了规范，就很难保持长期统一。完善的图标规范，保障多名设计师协作下产出风格一致，稳定整体设计质量。

1. 沉淀完整设计规范文档

输出完备的图标规范手册，覆盖设计理念、基础网格、倍率、形状符号、图形特征、场景用法等维度，作为团队统一的设计依据。同时归集全部图标资产库，方便设计师快速调用，提升协作效率。

2. 用数据和用户反馈做科学校验

设计好坏不能只依靠设计师主观审美。项目全程引入量化评估，收集真实用户反馈、分析线上数据，持续迭代优化，让设计决策回归用户真实体验，而不是个人喜好。

写在最后

图标体量虽小，却是产品与用户之间重要的连接媒介，承载信息传递与情感共鸣双重价值。 本次项目，我们从形塑造基底、意传递信息、色赋予气质、境适配场景、规保障落地五个维度完成整套图标体系。同时依靠规范约束、用户数据验证，保障后续迭代质量。 未来，58UXD 团队也会继续延续这套设计理念，持续探索，为用户带来更有温度的设计体验。

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

很多 UI 设计师一遇到交互问题就紧张，觉得这不是自己的领域，老板能不能别给这样的需求。但在兰亭妙微的项目实践中我们发现，交互和视觉从来不是割裂的 —— 好的 UI 设计师本身就应该具备基本的交互思维。今天我们以一个 "买火车票千钧一发拼手速" 的场景为例，拆解一个信息密集型页面的优化全过程。

转载：站酷

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