首页

如何为日本市场打造多场景设计语言

鹤鹤 设计思维

围绕「如何更好地触达日本用户」这一目标,并行探索了两种不同的设计方向:
一种侧重‘日式美学体验’,另一种侧重‘saas商业信任’。
这个过程引发了我们关于「美学价值」与「商业目标」如何平衡的深度思考,本文旨在沉淀与分享我们团队的这次探索过程与方法论。
首先,设计之前先读懂日本美学的“潜台词”:
日本设计常被视为高级感的代名词,其设计感强的同时能保证信息足够清晰明了。这背后是深植于其传统哲学的独特美学——「间」(Ma)与「侘寂」(Wabi-Sabi),一种于克制中见风骨的艺术。它并非悬浮的理论,而是可以被转译为现代设计语言的实用准则。
对我们而言,其核心是
通过克制的色彩、有序的留白和对细节的极致打磨,践行“少即是多”的哲学理论
一、色彩:「和风三色」的碰撞
在色彩选上,我倾向于从日本传统色谱(https://nipponcolors.com/)中汲取灵感。相比于高饱和度的色彩,源自自然的
低饱和度、低明度的配色
更能营造出沉静、雅致的氛围。为了让设计更具识别性,会考虑适度选择
樱色、松绿、靛蓝
三个颜色,唤起用户对日本文化的深层共鸣。
简单来说:樱色、松绿、靛蓝这三种颜色,虽然没有一个官方固定的名称,但它们的确是能够完美代表日本传统审美和自然观的经典色彩组合,之所以如此具有代表性,是因为每一种颜色都深深植根于日本的自然、文化和历史之中,感兴趣的同学可以自己去了解一下,在这里我们把它们简称为
「和风三色」。
 
二、布局:严谨的留白与“直角vs圆角”的思辨
布局是日式设计的灵魂,而留白(间)则是其精髓。
视觉元素间的留白比例通常会达到30%-50%
,远超一般的设计标准。这不仅是为了美观,更是为了引导视线,让信息有序地呈现。设计中严格遵循网格系统,对文字与图片的间距、字体的行间距进行精细到像素级别的调整,构建一种“板正”的秩序感。
参考:https://www.webdesignclip.com/
 
这里有一个很有趣的细节值得探讨:
边角处理的选择
选择圆角——能带来亲和、自然的感觉,符合一部分日式设计中对
“有机形态”
的追求。
选择直角
——
基于严格网格系统的排版中,锐利的直角能够最大化地强化秩序感和专业性,让整个界面看起来如同精心切割的木工作品,精准而有力。
选择哪一种,取决于想传递的具体气质,我们也是应用到了不同的场景里进行尝试。
三、图片:承载“视觉呼吸”的侘寂之窗
在日式排版中,图片往往不只是信息的补充,更是
营造“视觉呼吸感”的关键载体
因此,在图片选择上,需要格外注意它能否传达出「侘寂」美学中那种对不完美、无常、自然的敬畏感。
通过
大量的留白来突出主体
,引导观者进入一个宁静的哲学意境。
它们与文字和图标一起,共同构成了那个充满呼吸感、值得细细品味的设计空间。
 
站点实战复盘——两种设计策略的并行探索:
一、 两种设计哲学(方案)的碰撞
1、以‘日式美学优先’建立情感连接
方案A ————
  •  
    沟通方式:
    感性沟通——传达“我能让你变得很有品位”的概念,向他们兜售一个关于“理想之家”的筑梦工具;
  •  
    设计目标:
    希望能第一时间抓住用户眼球,让用户感知到这是一家高级的公司;
  •  
    风格调研:
    在本地用户投票调研中拿到了不俗的票数,说明成功地引发了用户“共鸣”;
  •  
    差异化:
    在普遍SaaS网站中,风格比较独特鲜明;
  •  
    总结:
    通过大面积的留白、克制的和风配色、以及严谨的网格系统和锐利的直角,去传递产品的专业与品位,旨在先与用户建立情感共鸣。
     
     
2、以‘本土信任优先’驱动商业转化
方案B ————
  •  
    沟通方式:
    理性沟通——传达“我们很厉害”的概念,告诉用户我们在卖一个“解决方案”;
  •  
    信赖感强:
    蓝色主色搭配黄色的辅助色,配合线条插画,是日本SaaS网站建立用户信任的“标配”元素;
  •  
    风格清晰:
    明确的SaaS风格,降低用户认知成本,同样在本地用户投票调研中拿到了不俗的票数;
  •  
    总结:
    符合日本主流SaaS网站的设计范式,开门见山地展示了软件的核心功能、客户案例墙、增长数据,通过“理性沟通”,用最快的速度告诉用户“相信我,我能帮你解决问题”;
 
*配图仅截取方案的某一部分
二、团队的决策与沉淀:设计策略的“情境化”应用
经过用户调研和团队内部的深入讨论,我们达成共识:在SaaS官网这一
以“转化”为核心
的特定场景下,以方案B——“信任优先”的策略更贴合现阶段的商业目标。
它在建立用户信任、降低认知和决策成本上表现更优,是更稳妥的市场切入策略。最终上线后,我们的结论也在日本市场中得到了相应的数据验证。
当然,我们对于方案A的验证也没有完全舍弃,而是应用在线下推广的应用中,在平面设计领域尽可能发挥出日式美学的魅力。
image.png
三、设计的答案,永远在“情境”之中
我们只是在不同声道上与用户对话,作为设计师,我们的目标就是成为一个“多声道”的沟通者,既要懂得如何用“工程师”的语言搭建高效的转化桥梁,也要懂得如何用“艺术家”的语言构建引发共鸣的情感空间。
这或许也是国际化设计最迷人的挑战吧!
 
 
作者:群核科技MCUX
链接:https://www.zcool.com.cn/article/ZMTY3ODA2OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

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

 

image.png

 
 

为什么 AI 产品都爱用蓝紫色?背后藏着色彩心理学与行业巧思

鹤鹤 设计思维

打开手机里的各类 AI 应用,你大概率会被一种蓝紫色调 “包围”:通义 APP 的 logo、百度的问 AI 按钮、钉钉的 AI 表格图标、讯飞星火的官网 banner……
 
可用的色彩那么丰富,为何 AI 产品偏偏对蓝紫色 “情有独钟”?其实这种选择并非设计师随意为之,背后既贴合大众的认知习惯,也藏着心理学逻辑与行业设计巧思。

image.png

一、色彩设计心理学:精准契合 “稳重 + 创新” 的核心需求

 
颜色从来不止是视觉装饰,更承载着大众的心理联想,而蓝紫色恰好精准踩中了 AI 产品最需要的两大认知标签 ——“靠谱稳重” 与 “前沿创新”。
 
蓝色自带的 “信任感” 早已深入人心:支付宝用蓝色传递安全可靠,多数科技品牌以蓝色彰显专业严谨,AI 产品自然也借助这份 “信任红利”,让用户从视觉上就先认可其技术实力。
 

image.png

但仅靠蓝色远远不够,AI 功能还需凸显 “新意”,避免陷入传统科技产品的沉闷感。此时紫色的加入,恰好补上了 “创新感” 的缺口:紫色由蓝色与红色调和而成,既保留了蓝色的理性稳重,又融入了红色的活力,却无红色的刺眼感,比蓝色多了几分创造力与神秘感。

image.png

 
这种 “理性基底 + 创新活力” 的双重质感,堪称为 AI 量身定制 ——AI 既要靠严谨算法体现逻辑,又要靠创新功能吸引用户,蓝紫色的组合完美适配这一核心特质。

image.png

以钉钉为例,其主色调为蓝色,但在 AI 相关设计中大量融入紫色调:官网首页 banner、分类卡片、功能按钮、UI 界面及装饰图形等,均采用蓝色搭配浅紫、粉紫的组合,既保留了品牌的专业感,又传递出 “能创造新价值” 的工具属性,精准契合 AI 突破常规的定位。这种 “蓝色稳根基 + 紫色添新意” 的搭配,让 AI 产品既不冰冷遥远,又不失专业可信度。
 

二、打破科技色惯例:在同质化中实现差异化突围

 
早年科技圈几乎是 “蓝色的天下”:海外的 IBM、Meta、微软、推特等品牌,均是蓝色的重度使用者;国内不少互联网品牌的主题色选择,也或多或少受此影响。

image.png

若 AI 产品继续沿用纯蓝色,极易在同质化竞争中被淹没,而蓝紫色则成为最具性价比的破局方案。一方面,蓝紫色调未脱离 “科技感” 的大众认知框架,不会让用户产生陌生感;另一方面,鲜艳的蓝紫渐变自带强烈视觉吸引力,能营造出未来感与现代感,快速抓住用户眼球。随着越来越多 AI 产品采用这一配色,蓝紫色逐渐成为行业视觉约定,帮助用户快速识别 AI 工具与相关内容。

image.png

 
阿里通义千问便是典型代表:设计中摒弃了阿里系传统的橙红色,也未跟风科技圈的纯蓝色,转而采用青蓝到亮紫的渐变设计,从 logo、页面 UI 到宣传海报,均贯穿蓝紫色调。既与其他 AI 产品形成差异化辨识度,又牢牢扎根于大众对 “科技色调” 的认知,实现了平衡与突围。
 

三、数字场景 “天生百搭色”:适配多场景使用需求

 
AI 产品需适配手机、电脑等多终端的日常使用,而蓝紫色恰好是数字场景的 “理想配色”,经得住各类屏幕与使用场景的考验。
 
其一,显示效果友好。蓝紫色在屏幕上不会像红、黄色那般刺眼,也不会因过浅而模糊不清,尤其是渐变效果,能在手机、电脑上呈现出丰富层次感。无论是深色模式下的护眼需求,还是浅色模式下的醒目度要求,蓝紫色都能完美适配,契合用户昼夜切换的使用习惯。

image.png

 
其二,视觉效果突出。蓝紫色搭配和谐不易出错,同时贴合当下设计潮流,能让用户直观感受到产品的新潮感,提升对产品的好感度。
 
当然,蓝紫色并非 AI 产品的 “万能公式”:ChatGPT、腾讯元宝采用绿色主题,更显活泼灵动;ima 页面以浅绿色为主,按钮等元素搭配深灰色,无明确主题色;纳米 AI 的 logo 选用红色,风格特立独行(这类配色在 AI 产品中相对小众,不建议轻易尝试)。

image.png

 
但对绝大多数 AI 产品而言,蓝紫色仍是最稳妥的选择:既契合大众对 “靠谱科技” 的认知,又能在竞争中脱颖而出,还能适配各类使用场景。下次再看到蓝紫色调的 AI 产品,你便会明白,这背后藏着设计师精准拿捏用户心理的 “设计巧思”。
 

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

 

image.png

界面设计公司分享:扁平设计--极简美学下的高效用户体验

蓝蓝设计的小编 移动端UI设计文章及欣赏

在信息爆炸的数字时代,用户对界面的要求早已超越 “好看”,更追求 “好用”。扁平设计(Flat Design)以极简的视觉语言、清晰的信息层级,成为当下 UI/UX 设计的主流趋势,而北京兰亭妙微界面设计公司,正是将这种风格落地为商业价值的专业践行者。

一、扁平设计:用极简,做高效

 
扁平设计的核心是 “去繁就简”,摒弃阴影、渐变、纹理等拟物化装饰,以纯粹的二维形态、简洁的色彩与排版,让用户快速聚焦核心信息。它的优势,正是企业数字化转型中最需要的:
 
  • 信息传递更高效:无冗余元素干扰,用户一眼看懂功能、一秒完成操作,降低认知成本。
  • 多端适配更灵活:轻量化设计天然适配移动端、网页端、桌面端,响应式布局更易实现,开发成本更低。
  • 品牌识别更清晰:统一的色彩、字体、图标体系,让界面成为品牌的 “视觉名片”,强化用户记忆。

二、兰亭妙微:让扁平设计,适配每一种商业场景

 
作为深耕 UI/UX 设计多年的专业团队,北京兰亭妙微始终以 “用户体验为核心,商业价值为目标”,将扁平设计的精髓融入不同行业、不同产品的设计中,让极简风格不止于美,更能解决实际问题。
 

1. 严谨的设计规范,保证视觉统一性

 
兰亭妙微的扁平设计,从不是 “简单的无装饰”,而是基于严谨规范的系统设计:
 
  • 色彩系统:以 1-2 个品牌主色为核心,搭配 2-3 个辅助色区分功能状态,中性色构建基础层级,确保色彩对比符合 WCAG 标准,兼顾美观与可读性。
  • 排版体系:选用无衬线字体,通过字号、字重、间距划分标题、正文、辅助信息层级,留白充足,让界面 “呼吸感” 拉满。
  • 图标与控件:统一线性 / 面性图标风格,按钮、输入框、卡片等控件采用纯色填充 + 统一圆角,无多余装饰,交互反馈清晰(颜色变化、透明度变化)。
 

2. 行业化定制,让扁平设计更 “接地气”

 
不同行业的用户需求不同,兰亭妙微拒绝 “千篇一律” 的扁平模板,而是结合行业特性定制设计:
 
  • B 端后台系统:侧重信息密度与操作效率,用色块、卡片划分功能模块,简化复杂表单,让运维、管理类用户高效完成任务。
  • C 端移动 App:强化视觉吸引力与易用性,用简洁的图形引导交互,适配移动端小屏特性,提升用户留存与转化。
  • 工业软件 / 医疗设备界面:兼顾专业性与安全性,扁平设计减少视觉干扰,突出关键数据与操作按钮,降低误操作风险。

3. 从设计到落地,全流程保障效果

兰亭妙微不仅提供设计方案,更注重 “设计落地”:从需求分析、交互原型、视觉设计,到切图输出、开发对接,全程跟进,确保扁平设计的规范与细节在最终产品中完美呈现,避免 “设计与开发脱节” 的问题。

三、选择兰亭妙微,让扁平设计成为你的竞争力

 
在数字化产品同质化的今天,优秀的界面设计是差异化竞争的关键。北京兰亭妙微界面设计公司凭借对扁平设计的深刻理解、丰富的行业案例、专业的服务流程,已为众多企业打造出兼具美学与实用性的界面产品,帮助客户提升用户体验、强化品牌形象、实现商业目标。
 
无论是 App 界面、网站设计、后台系统,还是工业软件、医疗设备界面,兰亭妙微都能以专业的扁平设计能力,为你的产品注入极简美学与高效体验。选择兰亭妙微,就是选择 “好看又好用” 的界面设计,让你的产品在用户心中留下深刻印象。

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

 

image.png

8 个极具巧思的 UI 设计案例,打破同质化困局

涛涛 设计思维

随着设计行业的蓬勃发展,产品 UI 的整体水准持续提升,但同质化现象也愈发明显。想要让产品在同类竞品中脱颖而出,设计师需要在细节表达、功能适配、情感共鸣等维度持续探索。今天就为大家精选 8 个极具创意的 UI 设计案例,希望能为你的设计实践带来新的灵感。

隐私友好型 UX 设计:让通知与权限请求更懂用户

涛涛 用户研究

在数字时代,手机通知已成为连接用户与服务的重要桥梁,但频繁弹窗、不分场景的权限索取,却让很多用户不堪其扰 —— 要么被迫关闭所有通知,要么在繁琐的设置中消耗耐心,最终对产品产生负面印象。隐私 UX 设计的核心,从来不是 “减少交互”,而是在尊重用户自主权的前提下,让通知和权限请求变得更精准、更温和、更具价值感。本文将从用户体验本质出发,探索如何设计既不侵犯隐私,又能提升用户参与度的通知与权限请求模式。

【UX 设计】为海外留学生打造的专属二手交易平台 APP 设计方案

涛涛 用户研究

随着海外留学热潮持续升温,留学生在异国他乡的生活刚需问题日益凸显。初到陌生国度的留学生,往往面临生活成本高、社交圈有限、居住周期不稳定等现实困境,二手商品交易成为他们平衡开支、适配短期生活的核心选择。然而,现有通用二手交易平台缺乏对留学生群体的针对性优化,导致交易过程中频繁出现安全隐患、信息错位、服务脱节等问题。本次研究聚焦海外留学生二手交易的真实需求与痛点,旨在设计一款贴合其生活场景、保障交易安全、提升沟通效率的专属 APP,为留学生的海外生活提供切实支

未来界面的诗意:科幻风格 UI 设计的美学与叙事

蓝蓝设计的小编 设计资源

在科幻作品的宏大叙事中,用户界面(UI)不仅是信息的载体,更是世界观的具象化表达。它是未来科技的视觉语言,是连接人类与未知领域的桥梁,其设计美学深刻影响着我们对未来的想象。兰亭妙微的设计师最近在做一个vr眼镜的项目,所以要找一些相关的资料和文章,并写出来和大家分享。

从「感觉不错」到「切实有效」:UI/UX 决策的七个核心思维

涛涛 用户研究

打开设计软件,面对两个看似都可行的方案,你是否也曾陷入纠结:“这个更美观”“那个更简洁”“大家会不会更喜欢另一个?” 评论区里的站队争论、自我认知里的审美偏好,很容易让设计决策陷入 “凭感觉” 的困境。但真正成熟的 UI/UX 设计,从来不是 “选 A 还是选 B” 的二元题,而是围绕用户价值、产品目标和实际场景的系统性判断。以下七个思维习惯,能帮你跳出主观偏好,做出更理性、更有效的设计决策。

优化产品转化!10 个实用 UI/UX 设计技巧,轻松提升用户体验

涛涛 用户研究

在产品设计中,UI/UX 的细节调整往往能带来意想不到的转化效果。那些看似微小的优化,却能大幅降低用户操作门槛、提升使用愉悦感。以下整理了 10 个经过实践验证的 UI/UX 设计技巧,帮你在不增加过多开发成本的前提下,打造更受用户青睐的产品界面。

UI 设计组件的价值与实践+常用 UI 设计组件核心规范清单

蓝蓝设计的小编 前端及开发文章及欣赏

 
在数字产品的界面世界里,设计组件就像是建筑中的标准化砖石,既支撑起界面的稳固性,又决定了体验的流畅度。从一张信息卡片到一条进度条,从一个分页控件到一整块瓷片区,这些看似微小的元素,正是构成优秀 UI 的基石。兰亭妙微的设计和开发工程师们,也在这在数字产品的界面世界里学习,整日搬砖,哈哈。

 

一、设计组件:不止是 “零件”,更是体验的骨架

 
设计组件并非孤立的视觉元素,而是具备可复用性、一致性、可扩展性的功能单元。它们不仅能让设计师从重复劳动中解放出来,更能让用户在不同产品、不同页面间建立稳定的认知逻辑。
 
  • 效率层面:一套成熟的组件库可以将界面搭建效率提升 50% 以上,避免重复造轮子。比如进度条、分页器这类高频组件,标准化后无需每次重新设计。
  • 体验层面:当用户在不同 APP 中看到相似的进度条时,能立刻理解 “进度→完成” 的对应关系,这种认知惯性大幅降低了学习成本。
  • 系统层面:组件化让产品迭代更灵活,比如瓷片区的布局逻辑可以快速适配从手机到手表的不同屏幕尺寸,保证体验的连贯性。

 

二、常见组件的设计逻辑与场景适配

 
不同组件的形态背后,是对用户行为的深度洞察。我们可以从收集的案例中拆解出典型组件的设计思路:

1. 信息瓷片区:碎片化信息的 “收纳盒”

 
瓷片区(Cards)是承载碎片化信息的核心容器,它通过视觉边界将不同功能模块清晰区隔,同时保持整体视觉的呼吸感。
 
  • 场景适配:在学习类 APP 中,瓷片区可以将 “自由练习”“睡眠助手” 等功能模块独立呈现;在医疗类界面中,“极速问诊”“找医生” 等入口也通过瓷片实现快速分流。
  • 设计要点:圆角、阴影和微妙的背景色变化,是区分瓷片层级的关键。同时,瓷片内的信息密度需要与用户需求匹配 —— 工具类瓷片突出功能按钮,资讯类瓷片则优先展示标题与摘要。

 

2. 进度条:看不见的 “情绪安抚器”

 
进度条的核心价值,是将抽象的 “等待” 转化为可视化的 “进度”,从而缓解用户的焦虑感。
 
  • 场景适配:在支付流程中,步骤式进度条让用户清晰感知 “填写信息→确认订单→完成支付” 的路径;在健身 APP 里,环形进度条则通过直观的百分比反馈,强化用户的成就感。
  • 设计要点:除了基础的线性进度条,拟人化的动态进度条(如带表情的加载动画)能进一步提升趣味性;而分段式进度条则适合多节点的流程场景,比如 “高考日程” 时间轴。

3. 分页器:长内容的 “导航罗盘”

 
当内容量超出一屏承载能力时,分页器就成了用户探索长内容的导航工具。
 
  • 场景适配:电商平台的商品列表、内容平台的文章流,都依赖分页器实现高效浏览。下拉加载是移动端的主流选择,但在需要精确定位的场景(如后台管理系统),数字分页器依然不可替代。
  • 设计要点:分页器的交互需要兼顾效率与容错性,比如 “跳转到指定页码” 的输入框,适合有明确目标的用户;而 “上一页 / 下一页” 的按钮,则更符合无目的浏览的行为习惯。

4. 导航栏:用户的 “空间锚点”

导航栏是用户在产品中定位的核心依据,无论是顶部标签栏还是侧边抽屉导航,本质都是为了降低用户的迷路成本。
 
  • 场景适配:内容类 APP 的 “推荐 / 关注 / 订阅” 标签栏,让用户在不同内容流间快速切换;工具类产品的功能导航栏,则通过图标 + 文字的组合,让复杂功能变得触手可及。
  • 设计要点:当前选中状态的视觉强化(如颜色加深、下划线)是导航栏的核心设计原则;同时,导航项的数量需要控制在用户记忆阈值内,一般不超过 5 个。
 

三、组件化设计的进阶思维:从 “用组件” 到 “造系统”

 
成熟的组件设计,不止是单个元素的打磨,更是一套可生长的系统工程。
 
  • 原子化设计:将组件拆解为 “原子(按钮、输入框)→分子(搜索框、卡片)→有机体(表单、列表)” 的层级,让组件具备更强的组合性和适应性。
  • 适配性设计:同一组件需要在不同设备上保持体验一致。比如智能手表上的瓷片需要更大的触控区域,而平板端的进度条则可以承载更多信息维度。
  • 情感化设计:在功能性基础上注入情感细节,比如完成任务时进度条的庆祝动画、瓷片 hover 时的微交互反馈,都能让冰冷的界面变得有温度。

 

 

 

设计组件从来不是冰冷的像素集合,而是连接产品与用户的情感触点。一个加载时的动态进度条,可能让用户愿意多等 3 秒;一张信息清晰的瓷片,或许能让老年人也轻松上手。在追求效率与一致性的同时,别忘了给组件注入人文关怀 —— 这正是优秀 UI 与平庸界面的本质区别。

常用 UI 设计组件核心规范清单

 
本清单围绕高频通用组件制定,兼顾视觉统一、交互适配、多端兼容原则,适配移动端 / PC 端通用设计场景,可直接落地项目并根据品牌风格微调。

一、基础容器类:信息瓷片区(Card)

视觉规范

  • 圆角:移动端 8~12px,PC 端 12~16px(极简风格可降至 4px,无圆角慎用于高频触控场景)
  • 阴影:轻量瓷片(信息展示)用低 - opacity 柔阴影(rgba (0,0,0,0.06),偏移 0 2px,模糊 8px);重量级瓷片(功能核心区)用双层轻阴影增强层级,避免厚重投影
  • 边距:瓷片内部上下左右内边距,移动端 16px,PC 端 20px;瓷片之间间距,移动端 12~16px,PC 端 20~24px
  • 背景:默认纯白 / 品牌浅灰,hover 态(PC 端)可加浅底色(rgba (品牌主色,0.03)),禁用高饱和底色作默认态

交互规范

  • 触控区域:移动端单个瓷片最小触控面积≥44×44px,避免文字 / 图标单独触控
  • 反馈:点击态瓷片轻微下沉(transform: scale (0.98))+ 阴影变浅,PC 端 hover 态光标变为 pointer,无点击功能的瓷片禁用任何交互反馈

内容规范

  • 信息密度:单瓷片最多承载 “标题 + 副标题 + 1 个核心按钮 / 图标 + 简要说明”,避免多模块信息堆砌
  • 视觉层级:标题(粗体 / 高字号)> 核心信息(常规字重)> 辅助信息(浅灰 / 小字号),禁用 3 种及以上字体字重

二、进度反馈类:进度条(Progress Bar)

线性进度条

  • 尺寸:高度移动端 4~6px,PC 端 6~8px;宽度适配父容器,最小宽度≥80px
  • 样式:默认底色为品牌浅灰,进度底色为品牌主色,无外边框;百分百完成态可加 1px 品牌主色描边
  • 交互:加载中可加缓慢流动的动效(速度 0.8~1s / 次),完成态触发轻微闪烁(3 次 / 0.3s)或渐变为成功色(绿色系)

环形进度条

  • 尺寸:直径移动端 40~60px,PC 端 60~100px,环宽为直径的 1/8~1/6
  • 样式:环体默认浅灰,进度环为品牌主色,中心可放置百分比数字(字号为直径的 1/3~1/4)
  • 场景适配:单目标进度(如完成率、打卡率)用环形,多节点流程(如支付、报名)用分段式线性进度条

分段式进度条(流程类) 

  • 节点:圆形节点直径 8~12px,已完成节点填充品牌主色 + 描边,未完成浅灰描边,当前节点放大 1.2 倍 + 品牌主色描边 + 内白圈
  • 间距:节点之间的连线长度,移动端≥20px,PC 端≥30px,连线高度与线性进度条一致
  • 文字:节点下方标注流程名称,字号比正文小 2 号,已完成文字为品牌主色,未完成浅灰,当前节点文字加粗

三、内容导航类:分页器(Pagination)

移动端分页器(下拉加载 / 上拉刷新) 

  • 加载提示:居中放置 “加载中…” 文字 + 轻量加载动画,文字为浅灰,字号比正文小 1 号
  • 无更多内容:提示文字为浅灰(rgba (0,0,0,0.4)),可搭配简约图标(如空盒子),禁用高饱和颜色
  • 触发区域:下拉刷新触发距离≥50px,上拉加载触发距离≥30px,避免误触

PC 端数字分页器

  • 布局:居中对齐,按钮与数字横向排列,整体间距 12px
  • 按钮样式:上一页 / 下一页为圆角矩形(圆角 4px),宽度≥60px,禁用纯图标按钮(需搭配 “上一页 / 下一页” 文字)
  • 数字样式:当前页码为品牌主色底色 + 白色文字,非当前页码为透明底色 + 浅灰文字,hover 态变为品牌浅灰底色
  • 功能按钮:“首页 / 末页” 按需添加,“跳转到” 输入框宽度≥80px,输入框右侧搭配 “确定” 按钮(与分页按钮样式统一)

通用规范 

  • 容错性:页码输入框仅允许输入数字,超出总页数时自动提示,禁用非法字符输入
  • 场景适配:长列表内容(如商品、文章)用下拉加载,需精确定位的内容(如后台数据、报表)用数字分页器 

四、页面导航类:导航栏(Navigation Bar)

顶部标签导航栏(Tab Bar)

  • 数量:默认 3~5 个,最多不超过 6 个(超出则用滚动式标签),避免用户记忆负担
  • 尺寸:移动端高度 48~56px,PC 端高度 60~72px;单个标签宽度均分,最小宽度≥80px
  • 样式:未选中状态为文字(+ 可选图标),浅灰颜色;选中状态为文字 + 图标(或仅文字加粗),品牌主色,可加底部下划线(高度 2~3px,与主色一致)
  • 交互:PC 端 hover 态文字变色 + 光标 pointer,移动端点击态轻微下沉,切换时无卡顿(动画时长≤0.3s)

侧边导航栏(PC 端专用)

  • 宽度:固定宽度 200~240px,可搭配折叠功能(折叠后宽度 60~80px,仅显示图标)
  • 层级:一级导航为主标题(加粗,字号 16~18px),二级导航为子标题(常规,字号 14~16px),缩进 16px 区分层级
  • 样式:选中导航项加左侧主色竖线(宽度 4px)+ 浅灰底色,hover 态仅浅灰底色,禁用多色高亮
 通用规范
  • 视觉:导航栏背景为纯白或浅灰,与页面内容区有清晰边界(可加 1px 浅灰分割线),禁用渐变背景(极简风格除外)
  • 功能:必备返回 / 首页按钮(移动端),可选搜索 / 设置按钮,避免功能按钮堆砌(最多 2~3 个)
  • 适配:移动端导航栏适配刘海屏 / 挖孔屏,预留安全距离,避免内容被遮挡

五、通用交互规范(所有组件适用)

  1. 动画时长:所有组件的点击、hover、切换动画时长控制在 0.2~0.3s,快速反馈且无拖沓感
  2. 颜色体系:全组件仅使用品牌主色、辅助色(≤2 种)、中性色(黑、白、不同深度灰),禁用杂色,保证视觉统一
  3. 字体体系:全组件字体统一(如移动端思源黑体、PC 端微软雅黑 / 思源黑体),字重仅用常规、加粗 2 种,避免多字重混用
  4. 多端兼容:同一组件在移动端 / PC 端的核心功能、视觉风格一致,仅调整尺寸、交互方式(如 PC 端 hover、移动端点击)
  5. 无障碍设计:组件颜色对比符合 WCAG 标准(文字与背景对比度≥4.5:1),支持键盘 Tab 键切换,图标搭配文字说明(避免纯图标组件)

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

 

image.png

日历

链接

个人资料

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

存档