首页

高端网站设计·兰亭妙微审美积累|金融理财系统设计

杰睿

imgi_1152_884144175213739.64afa9675a9cd.jpg

imgi_1154_c14fc5175213739.64afa9675b6c0.jpg

imgi_1156_ca29b9175213739.64afa96755745.jpg

imgi_1164_8842b3175213739.64afa9675f1c5.jpg

imgi_1167_c8f0d8175213739.64afa9675d90c.jpg

imgi_1170_cd37c8175213739.64afa96758e10.jpg

imgi_1173_411444175213739.64afa96757384.jpg

这组界面属于金融投资类暗黑风格设计,特征鲜明且专业度高:
视觉风格:以深灰 / 黑色为基底,通过橙色、绿色等亮色突出核心数据(如收益、资产余额)与交互按钮,营造出 “专业、理性” 的金融氛围;界面元素简洁利落,模块化布局清晰划分投资账户、收益统计、资产分布等功能区域。
功能逻辑:聚焦 “投资全流程管理”,从资产充值、投资计划、收益跟踪到资产配置,全链路覆盖;通过图表(折线图、环形图)、数据卡片直观呈现投资收益、资产波动、代币占比等关键信息,助力用户快速决策。
行业适配性:这种设计高度契合加密货币、金融投资类平台的属性,既通过深色风格传递 “稳重、可信” 的品牌形象,又以精准的数据可视化和清晰的操作路径,满足投资者对 “资产透明化、操作便捷化” 的核心需求,是金融科技领域界面设计的优质范例。
 

全方位拆解用户体验设计:从本质到落地的完整指南

涛涛

用户体验设计(User Experience Design)并非只关注 “界面好不好看”,而是贯穿用户与产品交互全流程的 “感受管理”—— 从打开产品的第一眼,到完成操作的最后一步,每一个环节的顺畅度、舒适度,都决定了用户是否愿意留下。它像一座桥梁,一边连着产品的商业目标,一边连着用户的真实需求。以下从 “是什么、为什么、何时做、怎么做” 四个维度,带你系统掌握用户体验设计的核心逻辑。

产品全周期用户研究指南:从前提到落地的方法与场景

涛涛

在以用户为中心的产品设计中,用户研究不是 “可选环节”,而是贯穿从需求挖掘到迭代优化的 “核心导航仪”。它通过探究用户特征、需求、行为与态度,帮团队跳出 “自嗨式设计”,精准匹配用户真实需求与商业目标。无论是 2B、2C 还是 2G 产品,掌握 “基于产品阶段选方法” 的逻辑,才能让用研真正落地见效。以下从用研前提、核心方法、分阶段应用三个维度,拆解可直接复用的用户研究框架。

图标设计全指南:从起源到落地的 8 大核心模块

涛涛

从 1973 年第一代图形用户界面诞生至今,图标已从简单的功能符号,演变为 UI 设计中 “无声的交互语言”。它既是用户快速识别功能的 “导航标”,也是提升产品质感的 “视觉名片”。想要掌握图标设计的精髓,无需复杂理论,只需理清其发展逻辑、设计原则与落地方法 —— 以下 8 大核心模块,带你系统吃透图标设计。

优化 UI/UX 提升服务转化率:10 个可落地的设计技巧

涛涛

在数字化产品中,用户界面(UI)的美观度与用户体验(UX)的流畅度,直接决定了用户是否愿意完成核心操作 —— 从注册账号到付费转化,往往只需调整几个设计细节,就能让转化率实现显著突破。以下 10 个经过实践验证的 UI/UX 技巧,无需复杂重构,就能帮你快速优化产品体验,推动用户完成转化路径。

经验塑造感知-心智模型和生活经验如何影响设计

杰睿

A 代表抽象,B 代表信念?

经验决定了你能看到什么。尤其是在包含图形或符号元素的内容中,这一点尤为重要。在最近的一个项目中,我们有机会采访10岁以下的儿童和六七十岁的老年人。这是一次非常有趣的经历。采访孩子们让我非常吃力,也让我对幼儿园和学前班的老师们产生了由衷的敬意。

“经验决定你看到什么。”

这次访谈的目的是为了倾听当前项目营销和设计主要目标之外的人们的声音。虽然他们并非主要客户,但他们仍在使用该产品。最有趣的是他们对同一形状的反应。在几份草稿中,六七十岁的那组人看着直线,并将其与抽象的事物联系起来,他们的回答完全符合我的假设。而孩子们甚至没有想到直线形状。一个孩子甚至说:“直线就像地面。” 我们可以从这两个不同的群体中得到什么样的启示?

随着经验的积累,联想也会发生变化。孩子们发现,当概念具有具体的形式,或者他们通过感官体验到的东西时,更容易建立联系。例如,孩子们被告知“A 代表苹果,B 代表香蕉,C 代表猫……R 代表红色……”从小就开始学习英语字母,他们很容易将每个字母与后面的单词联系起来。然而,一旦他们被告知“A代表抽象,B代表信念……”,他们就会感到困惑。最终,在描述和象征意义之间,儿童往往对事实描述反应更强烈,而老年人显然对象征意义有更扎实的理解。

“人们通过长期积累的经验来体验世界。”

在这里,我们看到了心智模型与设计之间的密切关联。人们通过长期积累的经验来体验世界。可以说,经验塑造经验。这适用于我们用感官感受的一切,例如我们看到的艺术、触摸到的产品以及我们居住的空间。最近我读了一本令我印象深刻的书《和一位失明的朋友一起去看艺术》,作者对此进行了如下解释。

视力正常的人甚至无法想象盲人的想法

“白鸟先生无法在脑海中想象出此刻摆在我面前的杯子与他原本的尺寸、颜色和形状。他用一种完全不同的想象力来看待这个杯子。这意味着那些视力正常的人甚至无法想象白鸟先生所看到的东西。”——摘自《和一位失明的朋友一起去看艺术》

白鸟先生天生几乎无法感知光线和物体,中学时期更是完全失明。他对物体和颜色的感知体验截然不同。当他想到一个杯子时,它的形状、颜色、材质以及背景都与视力正常的人的形象截然不同。从这个意义上说,作者认为我们甚至无法想象白鸟先生所看到的景象。

那么,那些在晚年失明的人又会怎样呢?他们是如何感知周围的环境的?我也曾与盲人相处过:一起参观展览,一起跑步时谈论南山或汉江。我记得,当时我描述了深秋时节,一座落叶缤纷的山峰的景色,当时我们一起跑步时,有人问我这个问题。由于他的失明并非先天性,他仍然保留着对色彩和风景的记忆。他正是通过这些记忆来体验风景的。

为了进行数字体验研究,我们还采访了在十几岁和二十几岁时完全失明的人,以及在五十几岁时失明的六十几岁的人。我注意到他们对设备操作系统的偏好有所不同。六十几岁的人更喜欢安卓系统,因为它与 Windows 的文件系统结构相似,例如在文件夹之间移动文件以及在存储设备上管理文件的方式。将文件从手机移动到电脑时,只需将其插入 USB 端口,然后将其视为 USB 记忆棒即可。然而,长期失明的人大多更喜欢 iOS。像 VoiceOver 这样的辅助功能已经很成熟,其界面一直保持一致,没有频繁更改。

人们的每一个选择都体现着他们生活中积累的经验。因此,设计可以被视为一个为“经验”建造的“房子”添砖加瓦的过程,或者在一个他们从未体验过的新领域奠定基础的过程。无论我们如何定义它,作为设计师,我们都需要理解个人经验的深度和广度。当我们说我们设计时,意思是我们与人们同行,即使我们无法完全理解,就像盲人想象的杯子一样。

“设计就是与理解的人并肩前行。”

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

 

image.png

品牌数字化升级的关键不是技术,而是体验——兰亭妙微的实战启示

杰睿

在企业数字化浪潮中,许多品牌误以为技术创新本身就是升级的核心。然而,真正能让品牌脱颖而出的,是用户在数字化场景中的体验。从界面交互到功能逻辑,从视觉呈现到信息架构,体验决定了用户认知、信任感和行为转化。兰亭妙微通过多行业实践,总结出品牌数字化升级中体验设计的核心方法,为企业提供可落地的操作参考。

一、从用户认知出发设计体验

品牌体验升级首先需要理解用户在数字化环境中的心理和行为:
洞察用户行为路径:通过数据分析和用户调研,明确用户在数字平台上的操作习惯和痛点。 • 明确关键决策节点:识别用户完成购买、注册或咨询等核心行为的关键触点,优化操作流程。 • 场景化体验设计:结合具体使用场景,将界面设计与用户实际需求对应,让用户操作自然顺畅。
从认知出发的设计方法确保体验不仅美观,而且能真正引导用户完成品牌期望的行为。

二、界面与功能的协同优化

数字化升级不仅是技术堆叠,更需要界面与功能协同,形成一致的体验感:
视觉与品牌统一:界面设计应统一色彩、字体、图标和交互风格,强化品牌调性。 • 功能逻辑清晰:信息架构和操作流程需简化复杂度,让用户轻松理解功能用途。 • 模块化设计:将核心功能和数据模块化,便于跨终端适配,保证一致性和易用性。
界面与功能的协同优化让用户在使用过程中感受到品牌的专业性与高效性。

三、数据驱动体验升级

在数字化环境中,用户行为数据成为优化体验的重要依据:
行为数据分析:通过追踪点击、停留、转化等指标,发现界面和流程中的问题点。 • 智能化推荐与优化:基于用户数据动态调整内容、功能布局和交互方式,让体验更个性化。 • 持续迭代机制:将数据反馈融入设计流程,实现体验的持续优化和升级。
数据驱动的体验设计让品牌能够及时响应用户需求,并在数字化竞争中保持敏捷性。

四、跨团队协作与流程管理

体验设计的落地不仅靠设计师,也依赖于跨部门协作:
设计与开发同步:确保界面设计在技术实现中得到高保真落地。 • 产品与业务对齐:设计策略与品牌目标、商业目标保持一致,避免体验偏离实际价值。 • 测试与优化闭环:多端、多场景测试,及时发现并优化潜在问题,保证用户体验一致性。
协作机制确保体验设计不仅停留在概念层面,而能真正影响用户感知和行为。

五、兰亭妙微的实战启示

在航天军工UI系统、数字文旅服务平台、企业管理软件等项目中,兰亭妙微通过以下方法帮助品牌实现数字化升级:
沉浸式交互设计:将复杂数据和功能通过可视化、交互化呈现,让用户快速理解和操作。 • 智能化体验优化:利用AI分析用户行为,动态调整界面和功能布局,提升操作效率和满意度。 • 品牌调性融入界面:视觉风格、信息层级和交互细节统一体现品牌价值,让体验成为品牌差异化核心。
这些实践证明,数字化升级的真正价值不在于技术堆积,而在于让用户感受到品牌的专业性、效率和温度

 
品牌数字化升级的关键不在于技术本身,而在于体验驱动。 兰亭妙微通过从用户认知出发的设计、界面与功能的协同、数据驱动的优化和跨团队协作,实现了数字化升级与品牌价值的深度融合。
当用户在每一次操作中感受到顺畅、高效与品牌专业性,数字化升级才真正落地,企业才能在激烈的市场竞争中脱颖而出。

从数据到界面,如何让复杂信息变得直观易用?

杰睿

在数字化和信息爆炸的时代,企业每天产生的数据量巨大,但如何将这些复杂信息转化为用户可理解、可操作的界面,却是设计的核心挑战。直观易用的界面不仅能提升用户体验,还能直接影响决策效率和业务转化。兰亭妙微在多行业项目中总结出一套从数据到界面的设计方法论,为企业提供可落地的实践经验。

一、理解数据与用户需求的关系

复杂信息之所以难以直观展示,往往是因为数据结构复杂、用户目标多样。设计师需要先做两件事:
梳理数据结构:分析数据来源、维度、关联关系和关键指标,将信息拆解为可管理的模块。 • 洞察用户需求:明确用户的使用场景和目标,例如快速决策、趋势分析或行为监控。
通过数据分析和用户调研,设计师可以决定哪些信息必须直观呈现,哪些可以通过交互探索获取,从而避免界面过度拥挤。

二、信息层级与视觉优先级设计

在界面中,信息层级决定用户关注的先后顺序:
突出关键指标:通过色彩、大小、位置等视觉手段,将核心数据突出展示,让用户一眼捕捉重点。 • 分层展示:将数据按重要性或业务流程分层呈现,辅助用户理解信息之间的关系。 • 视觉对比与引导:利用对比、图形化元素和动态效果,引导用户浏览路径,减少认知负荷。
合理的视觉层级能让复杂信息一目了然,帮助用户快速理解数据含义。

三、可视化与交互结合

数据可视化是直观呈现信息的核心手段,但单纯的图表不足以满足用户操作需求:
模块化图表:将折线图、柱状图、饼图等可组合成模块化组件,方便用户自由组合分析。 • 交互式探索:支持筛选、排序、联动和动态更新,让用户主动探索数据,而不是被动接受信息。 • 情境化呈现:通过模拟业务流程或关键场景,将数据与实际操作关联,使信息更具可操作性。
交互设计让信息从静态数据变为可探索、可验证的决策工具。

四、智能化辅助与个性化呈现

现代界面设计可以借助AI和智能算法,让数据展示更贴近用户需求:
智能推荐与提示:根据用户历史操作和偏好,动态调整信息显示优先级和布局。 • 异常与趋势预警:通过智能分析突出异常数据或关键趋势,帮助用户快速做出判断。 • 自适应界面:根据终端类型、屏幕大小和使用场景,自动优化布局和交互方式。
智能化让复杂信息不再令人困惑,而是变得直观、可感和可操作。

五、案例实践

兰亭妙微在多个项目中应用上述方法,让复杂数据界面变得直观易用:
航天军工管理平台:通过仪表盘模块化设计和动态可视化,复杂指标在大屏和移动端均能一目了然。 • 文旅数据平台:将游客行为数据、景区资源和服务信息以交互式地图和趋势图呈现,支持管理者快速决策。 • 企业智能运营平台:智能推荐关键业务数据,结合可视化界面和交互操作,提升运营效率和决策准确性。
这些案例表明,合理的数据拆解、视觉层级、交互设计和智能化处理能够将复杂信息转化为直观、可操作的界面。

 
复杂信息的直观呈现不仅是美观问题,更是提升决策效率和用户体验的关键。 从数据结构分析到视觉层级规划,从可视化与交互结合到智能化辅助,兰亭妙微的方法论展示了如何将信息复杂性转化为界面直观性,让用户在最短时间内理解数据、做出决策、感受到品牌专业力。
当数据与界面完美融合,复杂信息也能变得触手可及,决策也因此更高效、更准确。
 

大数据可视化·兰亭妙微审美积累|智能设备设计

杰睿

2ef8752068f587e2629cf2cf607e8211.jpg

6f44400306c9a66ab0d8002b3e17cf0a.jpg

8f8c2c7ed962ddb05a6a6cd6eb411878.jpg

dd60dfa2996cca8c36c3b499d742a3e2.jpg

一、视觉表现

深色(黑、深蓝)为基底,搭配高饱和度的亮色(红、蓝、紫)突出关键数据与交互区域,营造强烈的科技感与未来感;大量运用3D 场景建模(城市、建筑、地形)和动态数据可视化(流线图、热力图、立体图表),让界面充满沉浸式的科幻氛围,仿佛置身于未来指挥中心。

二、功能逻辑

聚焦多维度数据的集中监控与管理,涵盖无人机状态、卫星定位、城市建筑、能源消耗等专业领域;通过模块化布局 + 分层信息架构,将复杂的设备状态、地理信息、能耗数据等分类呈现,既满足专业场景对 “全局掌控” 的需求,又通过直观的视觉设计降低信息理解门槛。

三、风格价值

这种设计风格高度适配智能监控、智慧城市、能源管理等前沿领域,既通过科幻感的视觉语言传递 “技术前沿性”,又以精准的功能布局实现 “专业数据的高效管理”,是将未来感与实用性深度融合的典型设计范式,为用户打造出 “身临其境的智能操控体验”。
 

14 个逻辑驱动的 UI 设计技巧,助您改善任何界面

杰睿

UI 设计技巧前后示例

设计用户界面绝非易事。布局、间距、字体和颜色的选择数不胜数,很容易让人不知所措。而当你考虑可用性、可访问性和用户心理等因素时,挑战只会越来越大。

但好消息是,UI 设计其实没那么复杂。从事产品设计师二十多年,我发现我的大部分视觉和交互设计决策都遵循一套清晰的逻辑准则。这些准则并非源于艺术天赋或直觉,而是直截了当的指导原则。

当然,创意天赋固然有用,但很多让界面直观、包容、赏心悦目的元素绝对是可以学习的。拥有结构化的方法能让你做出明智、一致的设计选择。如果没有它,你基本上只能依靠反复试验来让事情“看起来正确”。

最好的学习方法是什么?实践出真知。那就让我们开始运用一些 UI 设计技巧吧。所有设计技巧都来自我的《实用 UI 设计》一书

修复示例界面的 UI 设计技巧

以下设计是一个社区博客平台的个人资料页面。第一个示例是原始设计。第二个示例是快速应用一些逻辑驱动的 UI 设计技巧的结果。

按 Enter 键或单击即可查看完整尺寸的图像
社区博客平台示例的前后 UI 设计技巧

即使你没有太多的 UI 设计经验,你大概也能看出最初的设计感觉不太“对劲”。这是因为它包含许多设计缺陷,可能会对可用性产生负面影响。你可能已经发现了其中一些。

现在,让我们逐步了解改进原始设计的过程,并使用这些 UI 设计技巧逐步解决每个问题:

  1. 根据元素之间的密切关系来划分空间
  2. 确保界面元素具有 3:1 的对比度
  3. 使用单个主按钮执行最重要的操作
  4. 确保按钮具有足够的目标尺寸
  5. 确保重要内容可见
  6. 减少大文本的字母间距
  7. 不要仅仅依靠颜色作为指标
  8. 尽量避免使用多重比对
  9. 确保文本的对比度为 4.5:1
  10. 考虑移除容器以简化界面
  11. 仅使用常规和粗体字体
  12. 保持一致
  13. 不要将极简主义与简单混淆
  14. 平衡图标和文本对

1. 根据元素之间的密切关系来划分空间

界面元素之间的间距大小应取决于元素之间的关联程度。关联程度越高的元素通常应该靠得更近,以显示它们的关联性。不相关的元素之间应留出更多空间来分隔。

以这种方式使用间距是将信息拆分成更小组别的最有效方法之一。如果你将每个组想象成一个矩形,你会开始注意到界面是由许多大矩形内嵌的小矩形组成的。首先在最内层的矩形上应用较小的间距,然后向外逐渐增加矩形之间的间距。

确定界面元素之间的理想间距可能是一项令人沮丧且耗时的任务。有无数种选项可供选择。与其一次一个像素地反复尝试,不如创建一组简单的预定义间距选项,以便更快地做出决策。

按 Enter 键或单击即可查看完整尺寸的图像
预定义间距选项

设置简单 T 恤尺寸的间距选项,以 8 点为增量。这也称为使用 8 点网格,因为所有界面元素最终都会与一系列以 8 点为间隔的垂直和水平辅助线对齐。对于更详细的界面,您可以使用 4 点为增量,以便更好地控制。

与排版比例尺类似,间距选项应该随着元素尺寸的增大而相应增大。这可以确保间距与较大的界面元素成比例。

在我们的示例中,无论矩形之间的关联程度如何,它们之间都只使用了预定义的超小(8pt)和小(16pt)间距选项。这会导致设计看起来杂乱、挤压,难以理解。根据元素之间的关联程度增加间距有助于清晰地区分和分组内容。

按 Enter 键或单击即可查看完整尺寸的图像
突出显示间距的 UI 设计示例

以下是应用预定义间距选项之前和之后的示例。

按 Enter 键或单击即可查看完整尺寸的图像
应用了预定义间距选项的 UI 设计技巧示例

2. 确保界面元素具有 3:1 的对比度

对比度是衡量两种颜色之间感知亮度差异的指标。它以 1:1 到 21:1 之间的比例表示。例如,黑色背景上的黑色文本对比度最低,为 1:1;而白色背景上的黑色文本对比度最高,为 21:1。有很多工具和Figma 插件可以帮助你测量色彩对比度,我最喜欢的是Web AIM 在线对比度检查工具Figma Contrast 插件

为了确保视障人士能够清晰地查看界面细节,请至少满足Web 内容无障碍指南 (WCAG) 2.1 AA 级色彩对比度要求。这意味着用户界面元素(例如表单字段和按钮)的对比度至少需要达到 3:1。

在我们的示例中,图标和按钮的对比度太低。低对比度按钮的风险在于,视力较差的用户可能无法识别它们是按钮,因为他们看不清按钮的形状。为按钮添加对比度足够的边框,可以提高可访问性。此外,按钮的浅灰色背景填充也被移除,这样人们就不会误认为它们处于禁用状态或非活动状态。图标的低对比度问题可以通过使用深灰色轻松解决。

按 Enter 键或单击即可查看完整尺寸的图像
应用了足够 3:1 对比度的 UI 设计技巧示例

3. 使用单个主按钮执行最重要的操作

对于大多数网站或应用项目,您需要设置三个按钮权重来指示操作的重要性:主要、次要和第三级。根据界面的复杂程度,您可能还需要较小或较大的按钮尺寸。

以下按钮样式熟悉易用,并且具有清晰的视觉层次,不依赖于单一的颜色。它们并非设计按钮样式的唯一方法,但却是一种安全的选择。了解更多按钮设计技巧,避免常见错误。

按 Enter 键或单击即可查看完整尺寸的图像
推荐的 UI 设计按钮样式

主按钮的目的是突出显示界面上最重要的操作。这有助于人们了解下一步该做什么才能完成他们的任务。

使用主按钮的指南:

  • 如果界面上没有最重要的操作,请对这些操作使用二级或三级按钮。
  • 避免在屏幕上使用多个主要按钮。它们会争夺注意力,并导致用户对下一步操作感到困惑。

在我们的例子中,我们假设“关注”操作是最重要的,并将其作为主要按钮。

按 Enter 键或单击即可查看完整尺寸的图像
具有单个主按钮的 UI 设计技巧示例

4. 确保按钮具有足够的目标尺寸

与大目标相比,小目标更难点击或触摸。对于运动控制能力受损的人,或者单手用拇指握住手机的人来说尤其如此。

尝试并遵循以下准则,以确保按钮(和其他交互元素)具有足够的目标尺寸:

  • 按钮尺寸至少为 48pt x 48pt。这与 8pt 网格对齐,并且略大于 WCAG 建议的 44pt x 44pt。
  • 将常用按钮放大,以提高效率并避免错过它们。
  • 按钮之间至少间隔 8pt,以防止人们误按错误的按钮。

在我们的示例中,两个按钮的目标尺寸已经足够,但仍有足够的空间来加宽按钮。由于还有空间,您可以加宽按钮以增加其目标尺寸。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例,其中按钮具有足够的目标尺寸

5. 确保重要内容清晰可见

人们不会使用他们看不到的东西。将内容隐藏在交互式菜单后面是保持界面简洁简洁的便捷方法,但这存在风险,因为有些人可能会忽略这些内容。如果空间允许,请尽量确保重要的内容和操作在需要时清晰可见。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例,其中图标后面的隐藏操作可见

在我们的示例中,操作隐藏在交互式菜单中,以帮助简化设计。虽然看起来简洁明了,但有些人可能会忽略这些操作。由于需要留出空间来显示“分享”和“收藏”这两个操作,因此请将它们显示出来,以确保用户不会错过。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例,其中图标后面的隐藏操作可见

6. 减少大文本的字母间距

让大标题看起来更好的一个小技巧是减少字母间距(字母之间的距离)。减少字母间距的程度取决于字体和大小,但通常情况下,文本越大,字母间距的减少幅度就越大。

这是因为许多字体的设计初衷是供长篇正文在小字号下阅读。它们被称为“正文型”字体,字母间距较大,以便在小字号下更易辨认。对于“展示型”字体,您可能不需要减小字母间距,因为它们的设计初衷是供大字号下阅读,并且通常字母间距较小。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例:减少大文本的字母间距

在我们的例子中,人名的字母间距减小了,以提高美观度。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例:减少大文本的字母间距

7. 不要仅仅依赖颜色作为指标

不要仅仅依靠颜色来传达含义或区分视觉元素,因为视力低下或色盲的人可能无法看到指示符。请使用其他视觉提示来区分界面元素。

在我们的示例中,有两个地方可能会令人困惑。让我们把它们解释得更清楚一些。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例添加除颜色之外的其他视觉指示器

如果您查看文章列表上方的 3 个标签页,可能不太容易看出“文章”是被选中的标签页。这是因为标签页的颜色略有不同,以指示被选中。在选中的标签页上添加下划线有助于使其更清晰。

按 Enter 键或单击即可查看完整尺寸的图像
带有下划线的 Tabs 组件可以清楚地指示所选的选项卡

同样,在底部导航中,我们采用了微妙的颜色变化来区分所选图标和其他图标。为了更加明显,所选图标被填充了颜色。

按 Enter 键或单击即可查看完整尺寸的图像
底部导航组件带有填充图标,表示已被选中

8. 尽量避免使用多重比对

使用的对齐类型越多(左对齐、右对齐或居中),界面看起来就越复杂、越混乱。我们的眼睛在移动时会被迫更加费力地跟随每种对齐方式。当界面中的一个小组件或部分使用多种不同的对齐方式时,这一点尤为突出。

坚持单一对齐方式(或尽可能少的对齐方式)有助于简化界面,使其看起来更整洁。

在我们的示例中,标签页居中对齐,而页面上的大多数其他元素则左对齐。这种混合对齐方式增加了不必要的复杂性,导致认知负荷(使用界面所需的脑力)略有增加。将标签页左对齐有助于保持界面整洁。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例:对元素应用一致的左对齐以避免多种不同的对齐方式

9. 确保文本对比度为 4.5:1

为了帮助确保有视力障碍的人能够清晰地阅读文本,它需要满足以下 WCAG 2.1 AA 级对比度要求:

  • 小文本(18px 及以下)需要至少 4.5:1 的对比度。
  • 大文本(粗体字重 18px 以上或常规字重 24px 以上)需要至少 3:1 的对比度。

在我们的示例中,未选中选项卡上的小文本对比度不足。使用较深的灰色可以提供足够的对比度。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例:将文本对比度提高到至少 4.5:1,以确保其可访问性

10.考虑移除容器以简化界面

将信息分解成更小的相关元素组有助于构建和组织界面,让人们更快、更容易地理解和记忆。

您可以使用以下方法对相关元素进行分组:

  1. 将相关元素放在同一容器中
  2. 空间相关元素紧密相连
  3. 使相关元素看起来相似
  4. 将相关元素对齐成一条连续的线

使用容器是分组界面元素最有效的视觉提示,但它可能会造成不必要的混乱。寻找机会使用其他分组方法,它们通常更巧妙,有助于简化设计。

在我们的示例中,每篇文章周围的容器是不必要的,因为已经使用了多种其他分组方法。移除容器还可以为内容腾出更多空间。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例:删除不必要的容器以简化设计

11. 仅使用常规和粗体字体

虽然某种字体有很多种粗细,但这并不意味着你需要在 UI 设计中全部使用它们。使用过多不同的粗细会给界面带来干扰和混乱,也会使统一使用每种粗细变得更加困难。

仅使用常规和粗体字重,保持设计系统简洁明了。某些字体提供半粗体选项,如果粗体字重过重,可以使用半粗体代替。

按 Enter 键或单击即可查看完整尺寸的图像
字体粗细列表,除常规和粗体外,其他所有字体均被划掉

快速使用提示:

  • 使用粗体字体来强调标题。
  • 对于其他较小的文本,请使用常规字体粗细。
  • 如果您决定使用非常细或粗的字体,请将它们保留用于标题和较大的文本,因为它们在较小的尺寸下可能难以阅读。

在我们的示例中,文章详情使用了三种不同的字体粗细。即使“超细”和“细”字体粗细的对比度高于所需的 4.5:1,但某些用户仍然可能难以阅读这些字符。将字体粗细增加到“常规”有助于提高可读性并简化设计。文章标题使用“半粗体”有助于使其脱颖而出。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例,字体粗细从 3 种减少到 2 种

仅使用两种字体粗细即可得到以下设计。我们正在应用 UI 设计技巧,目前进展顺利,但仍有一些问题需要解决。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例,其中多种不同字体粗细仅减少到常规和粗体

12.保持一致

UI 设计的一致性意味着相似的元素在外观和工作方式上具有相似性。无论是在您的产品内部,还是与其他成熟产品相比,这都应该如此。这种可预测的功能可以提高可用性并减少错误,因为人们无需不断学习其工作原理。

在我们的示例中,每篇文章的照片都有尖角,与按钮和图标的柔和圆角不匹配。将照片的角弄圆有助于创建更一致的视觉语言。你可能认为这样的小细节不会带来太大的变化,但它们加在一起,就能让设计看起来“恰到好处”。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例,文章照片和按钮的角落应用一致的边框半径

13. 不要混淆极简主义和简单性

极简并不意味着简单。设计师倾向于极简界面,因为它们看起来美观简洁。极简界面的元素和样式较少,但理解和使用起来并不一定简单。

极简界面通常会显得模糊或令人困惑,因为它们缺乏良好可用性所需的关键细节。简化不仅仅是减少。删除或隐藏太多内容可能会损害可用性。你需要确保没有删除关键信息或细节。

按 Enter 键或单击即可查看完整尺寸的图像
底部导航中的图标添加了文本标签

在我们的示例中,底部导航图标看起来简洁明了,但它们的含义清晰吗?可能并非每个人都清楚。在图标上添加文本标签有助于确保人们能够理解它们的含义,尤其是那些使用屏幕阅读器(一种使用语音或盲文向盲人描述界面的软件)的用户。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例,其中将文本标签添加到底部导航中的图标

14. 平衡图标和文字

当将图标与文本配对时,请尝试确保它们具有相似的视觉突出性,以获得更加平衡和有凝聚力的外观。

按 Enter 键或单击即可查看完整尺寸的图像
通过加深文本来平衡底部导航组件中图标和文本对的重量

在我们的示例中,底部导航栏中的图标和文字略微不平衡。图标和文字颜色相同,但图标更粗更大,使其更加突出。将文字加深可以增强其突出度,使其与图标保持平衡。将文字对比度提高到至少 4.5:1 也能确保视力不佳的用户也能轻松阅读。

按 Enter 键或单击即可查看完整尺寸的图像
UI 设计技巧示例:通过加深文本来平衡底部导航组件中图标和文本对的重量

我们做到了!

仅凭一些简单的 UI 设计技巧,我们就能够识别并解决示例界面中的一系列问题。当然,您可以根据需要进一步调整视觉风格,使其更贴合特定的品牌个性。不过,在本例中,我们专注于确保基本原则的正确性。

按 Enter 键或单击即可查看完整尺寸的图像
社区博客平台示例的前后 UI 设计技巧

我希望你开始明白,UI 设计并不需要让人感到不知所措。虽然它有时看起来像是一门只有天赋异禀的人才能掌握的神秘艺术,但许多优秀的界面设计都植根于清晰、合乎逻辑的指导原则,就像你在这里学到的那些一样。

依靠客观指导而非主观意见,可以更轻松(也更快速)地设计出直观、易用且视觉精美的界面。你越是练习这些 UI 设计技巧,它们就越能自然而然地融入你的设计流程。以它们为基础,勇于探索、实验,并在此基础上进一步激发你的创造力。

日历

链接

个人资料

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

存档