用户体验 - 蓝蓝设计每日一贴

首页

262024-4

优秀的设计就是带给用户惊喜！

博博设计思维

一、降落伞带来的营销广告

在这个广告满天飞的年代，用户已经逐步开启广告免疫模式，如何提高用户对广告的关注度至关重要。

近期在体验饿了么时，等待送餐界面中空降一个降落伞，从左上角飘到右侧悬浮，弹出红包悬浮广告。降落伞飘浮的动态过程吸引了用户的关注度，进而提高了营销广告的点击率，虽然广告大家都比较反感，但是一个伴随着惊喜的广告也会让你放下戒备心理。

二、动效反馈商家备餐过程

提升等待过程对于用户体验来说尤为重要，降低用户等待过程中的焦虑感，才能让用户愿意为此停留。

通过饿了么点餐之后，商家需要一定的时间完成餐饮的制作，必然需要用户等待一些时间。在这个备餐过程中，当前界面以一个翻炒动效表达，情感化的动效不仅提示用户当前状态，也提升了设计表达的感官体验。

三、这个广告惊不惊喜意不意外

意料之外的广告是带给你惊喜还是反感呢？平台为了提高变现能力，各种层出不穷的广告玩法也让你猝不及防。

之前在体验腾讯视频 App 时，从闪屏广告过度到 Banner 图的过程中，经历了多个广告新花样。首先从闪屏切换到自动轮播的弹窗模式，再演变到放大版的多个广告切片（占 Banner 位呈现），最后再恢复到 Banner 的正常布局中。这个过程无疑是把广告的存在感拉满了，让你对广告的记忆形成硬性要求。

无论这个广告设计方案是否让用户反感，但是这个呈现的互动方式还是比较新颖的，相信广告的点击率必然有所提升。

四、Banner 广告的视觉沉浸感

Banner 图在产品中是非常普及的，各类形式的演变也层出不穷，产品设计师都在探索更多可能性。

在腾讯视频 App 动漫栏目中，发现一例很有想法的 Banner 表现。Banner 上面新增了一个悬浮的火焰燃烧的动效，提升了整体的氛围感，动效与 Banner 画面完美贴合，视觉沉浸感十足。

五、待机状态下的实时动态

随时让用户感受到你的存在，才能让人感到安心，服务过程中状态实时可见至关重要。

通过饿了么点餐之后，就算处于待机状态时，只要点亮屏幕即可看到当前出餐状态。可视化的图形结合时间提醒，让状态一目了然，使得点餐到用餐之间的过程更有用户可控性。

六、小图标里的细节反思

产品中有很多辅助功能/信息等表达的图标，既要能准确表达主题，也要让用户易于理解。

在汽车之家 App 发现了一个值得反思的图标案例，在扫一扫的图标中结合了汽车外形轮廓，不仅不会影响扫描的功能表达，也进一步表达了该功能的差异。和别的产品扫描功能不同，这个是对准汽车进行扫描，体现出了业务的差异化。一枚小小的图标体现出了设计师的能力，用最简单的方式表现自身产品的差异，以此提升用户的操作体验。

七、轮播式的悬浮设计

悬浮设计非常普及，因为占比小和滑动页面会隐藏，对用户的干扰比较小。

最近在芒果 TV 首页发现了悬浮窗口的轮播式表达，芒果卡和活动中心会自动轮播显示（也能手动切换）。让我们对悬浮窗口的设计又多了一种设计理解，可以呈现更多不同内容的表达，提升了窗口的利用率。

八、氛围热烈的底部标签栏

底部标签栏的设计在图标创意层面发挥较多，各类风格的图标让该栏目更加丰富多彩，除此之外也有在背景层渲染氛围的案例。

近期恰逢芒果 TV 十周年之际，在底部标签栏背景层也加强了氛围感。丰富多彩的元素和配色，结合主题化的图标设计，使得整体氛围感拉满。

九、收缩式交互设计

通过交互方式应对用户操作过程，特别是在滑动界面时，交互方式的优化可以降低干扰，提高当前界面的利用率。

在 Blurrr App 创作界面，默认以 3D 动态图标展示“开始创作”按钮，当滑动界面时按钮会收缩展示。通过收缩式的交互设计，让界面可以展示更多内容，也不会影响用户点击按钮进行创作。即通过 3D 动效加强了功能的曝光度，又通过收缩式交互提高了内容的展示空间，可谓是一举多得的设计解决方案。

十、形象化的进度设计

进度设计是反馈状态变化的关键，通过可视化的表达让用户一目了然，提高用户对服务过程的把控。

当用户通过携程旅行 App 订票后，在行程订单界面可以看到列车行驶状态的进度提示。通过可视化的列车形象的表达了行驶状态，让用户清晰的看到行驶方向和抵达站点示意。不仅信息传递高效，形象的表达也使得感官体验更佳。

作者：黑马青年
来源：站酷

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

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(18)

102024-4

教你一文读懂暗色模式

博博设计思维

暗色模式（Dark Mode）的兴起是一个逐渐发展的过程，它涉及到技术进步、用户体验优化以及设计趋势的变化。

随着iOS 13在2019年的发布，暗色模式开始成为用户关注的焦点；在用户体验方面，设计者们考虑到了环境光线与屏幕亮度的匹配问题，暗色模式可以有效减少视觉疲劳；在实际使用中，用户发现暗色模式在光线较暗的环境中更为舒适，这也促使了暗色模式的普及和发展。

暗色模式在UI设计中的重要性体现在改善视觉舒适度、节省电量以及提供个性化选择上，其普及程度随着用户需求和技术发展不断提升。

一、定义及其在UI设计中的表现形式

1.暗色模式的定义

暗色模式是一种低光用户界面（UI）设计，也称为深色模式，是一种用户界面设计选项，它使用较深的颜色方案和背景，通常为黑色或深灰色，以减少屏幕亮度并提供更舒适的视觉体验。

iOS 13 亮色模式（左）与暗色模式（右）的对比

2.暗色模式的定义

(1).暗色模式在UI设计中的表现形式

设计师需要为暗色模式创建一个新的调色板，这通常意味着降低颜色的饱和度，以适应深色背景。同时，避免使用纯黑作为主色调背景，而是选择接近纯黑的深灰色，以确保阅读体验的舒适性和可读性。

亮色/暗色模式下主色需要进行调整

(2).对比度控制

暗色背景与文本颜色之间的对比度应该控制在WCAG2.0AA级标准以上，以保证内容的清晰度和易读性。对于彩色元素，也需要适当调整饱和度，确保整体色彩之间的对比度符合无障碍标准。

达到/未达到WCAG2.0AA标准的视觉效果对比

(3).视觉元素区分

在暗色模式下，设计师需要特别注意视觉元素的区分，通过足够的对比度来保证文字和图形的清晰可见。这不仅仅是简单的颜色反转，而是一种“弱光”主题的设计思考，旨在优化用户在低光环境下的视觉体验。

亮色模式中的按钮在暗色模式中显得太跳跃

二、历史回顾及发展脉络

1.命令行界面时代

在早期的计算机系统中，如DOS和Linux，终端通常使用暗色模式，这是因为早期的CRT显示器存在闪烁问题，暗色背景能够减少视觉疲劳，并提供较高的对比度。

Linux的终端界面

2.个人电脑时代

随着个人电脑的普及，图形用户界面（GUI）逐渐成为标准，此时大多数操作系统和应用程序采用了亮色模式，以模仿纸张的颜色并减少CRT显示器的眩光。

Windows2000的GUI

3.移动设备时代

智能手机和平板电脑的兴起带来了OLED等先进显示技术，这些设备的小屏幕和高分辨率使得暗色模式再次变得实用和流行，特别是在节省电量和减少眼睛疲劳方面。

iOS13的暗色模式

4.操作系统时代

近年来，各大操作系统开始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色应用模式，macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。

Windows10的暗色模式

三、设计趋势中暗色模式的地位

暗色模式在当前设计趋势中占据重要地位，以其减轻眼睛疲劳、节省电量和聚焦内容的优势受到青睐。它不仅适应低光环境，还提供美学上的新探索，响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新，暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序，如WhatsApp、Instagram、Google、Facebook等，都已经引入暗色模式设计，这表明暗色模式已经成为了一种广泛接受的设计趋势。

从左往右依次为：WhatsApp、Instagram、Google、Facebook

一、用户体验层面

1.提高阅读舒适度

(1).对比度和可读性

在相同的对比度条件下，浅背景上的黑字比深背景上的浅色字阅读效果更好。这表明，优化对比度是提高阅读舒适度的关键因素之一。

浅背景上深字与深背景上浅字的视觉对比

(2).用户偏好和满意度

一项针对用户对暗色模式的使用体验的调查显示，与默认的白底模式相比，用户在使用暗色模式时报告了更低的视觉疲劳和更高的满意度。斯隆（Sloan）的一项研究在1977年就报告说，如果更多的光线通过混浊的透镜到达眼睛，则出现畸变的可能性更大，即暗模式对视力障碍者更好。

对于长时间从事屏幕工作的人来说，暗色模式对眼睛更加友好

2.减少视觉疲劳

(1).人眼生理特性

暗色模式能减少屏幕发出的光线，这有利于减少眼睛疲劳和不适，特别是在低光环境下，人眼的虹膜会打开以接受更多光线，而暗色模式提高了减少的光源，减少了对眼睛的刺激。

亮/暗环境下瞳孔大小的变化

(2).蓝光辐射减少

人们通过长期研究发现短波可见光，即紫光和蓝光对眼底视网膜有相当程度的破坏作用，而人们通常把这种可见光波长中高能量波段(400- 470nm)对视网膜的损坏现象称为“蓝光伤害现象”。还有研究关注了暗色模式对蓝光辐射的影响。由于暗色模式降低了屏幕的整体亮度，因此也减少了蓝光的辐射。

可见光波段分布

二、设备电池寿命

1.降低屏幕功耗

在OLED屏幕上，每个像素都是独立发光的，当显示黑色时，相关的像素点会关闭，从而不消耗能量。这意味着，显示大面积黑色内容的暗色模式能够显著减少屏幕的能量消耗。

OLED屏幕发光原理

2.实际省电效果

以 Google 测试数据为例，OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度，手机的电量消耗下降了 63%。

Google的测试数据

三、降低屏幕功耗

1.促进睡眠

对于晚上喜欢在床上阅读或工作的用户来说，暗色背景有助于降低屏幕亮度，减少对褪黑素分泌的干扰，也有助于减少蓝光对睡眠周期的影响，从而帮助用户更快入睡并提高睡眠质量。

OPPO手机暗色模式广告

2.减少眩光

眩光是明亮的屏幕和低光环境之间恼人的对比现象，对眼睛具有一定的影响并造成眼部不适。暗色模式通过使用深色背景和亮色文字，整体降低了屏幕的亮度，这样在光线较亮的环境中，屏幕的亮光与周围暗环境的对比度降低，从而减少了屏幕反射光线对眼睛的刺激，降低不适。

有眩光与无眩光的显示器对比

四、打造沉浸式体验

1.减少视觉干扰

暗色模式提高了一种无干扰的工作环境，有助于他们专注于手头的任务，特别是在进行写作、编码或其他需要集中注意力的活动时，暗色模式能够减少视觉干扰。

暗色模式为视觉设计提供了更大的对比度，使得界面元素更为突出。这种高对比度不仅有利于内容的战士，也增强了用户的视觉聚焦，让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时，暗色背景能够使色彩更为鲜明，提升用户的视觉体验。

编码软件一般默认暗色界面，有利于专注工作

2.增强视觉聚焦

作者：阿琳01
来源：站酷

评论(0) 浏览(54)

102024-4

UI设计中的微文案：细微之处见真章

博博设计思维

在UI设计中，微文案往往被视作细枝末节，容易被设计师们所忽视。然而，正是这些看似不起眼的文字，却在用户体验中扮演着举足轻重的角色。微文案，即那些短小精悍、直接明了的文字描述，它们不仅能够指导用户操作，还能够增强产品的情感价值，提升用户满意度。

资深设计专家Joshua Porter曾指出：优化界面体验的一个快捷方式，就是提升文案的质量。他在《Writing Microcopy》一文中首次提及“微文案”这一术语，并以确认弹窗的文案为例，展示了如何通过清晰的表述“账单地址是你卡上显示的地址”，有效减少用户在使用过程中的错误。简而言之，要想快速优化界面体验，提升文案水平是一个行之有效的途径。

一、了解微文案

如果你有学习过尼尔森的十大可用性原则，你会发现10条中有4条都与文案有关。

系统状态 —— 告诉用户当前正在发生什么，是卡住了还是处在loading中或是其它什么状态。

一致性和标准化原则 —— 有一些约定俗成的规则，其中有一些普遍接受的术语，明确的操作提示，在不同界面保持统一等等。

防错原则 —— 帮助用户明白当他们做什么操作会发生什么结果，或者清晰的解释某个操作会有什么行为。

明确错误 —— 错误信息应该用人话表达（不要用代码），较准确地反映问题所在，并且提出一个建设性的解决方案。

1、微文案的定义

微文案（Microcopy）指的是在界面中，能够引导、帮助用户与界面交互行为的简短文案，可以是一个单词、也可以是一句话，常见的有表单文案、按钮文案、弹窗文案、错误提示等，大部分微文案都会对用户的行为产生直接的影响，如下所示：

2、微文案被重视的原因

微文案，作为用户与产品交流中最直接的触点，不仅有助于用户预见潜在问题，更能激发他们继续操作的意愿。通过预先洞察用户在操作过程中可能遭遇的障碍并提供针对性的解决方案，微文案在很大程度上降低了用户的流失率。优秀的微文案能够精准地揭示问题核心，消除用户的疑虑，从而加速他们的决策过程，为产品创造更多价值。

此外，微文案所传达的语气和态度，对用户情绪有着显著影响。用户的情绪状态往往决定了他们是否愿意继续在产品中深入探索。因此，众多产品在追求体验优化的过程中，都将微文案作为重点改进的一环。

3、微文案专设岗位

国外对于微文案的重视不止反映在公司对于职位的要求上，更反映在国外的教育市场上。国外有很多教育机构相继开设了UX Writing的课程体系，比如 UX Writer Collective 以及 UX Writing Hub。这都代表着国外市场对于微文案设计的重视程度提高。

相比之下，国内除了头部大厂在微文案方面有着较强的意识，其余以下尚未获得足够的重视，但其重要性正迅速提升，展现出巨大的发展潜力。

二、如何设计微文案

1、少用技术专业词汇

每个领域、每个公司都有专业的词汇，设计师和开发者通常会在产品当中潜移默化地使用这些专业词汇。而用户群体却是包罗万象，所以需要做的，是将专业的技术信息简单易懂地表述出来。

避免含糊文案，明确表述问题和指引。力求简洁，词语能达意则不用句，一句话能说明则不赘言。用户没有耐心来看你写小说。

2、不要拘束于一种表达方式

设计常常赋予产品独特的个性。在完成了前面的步骤后，我们往往需要将微文案与设计理念相融合。不同的设计与微文案结合，会产生不同的效果，但绝不应是单调冷漠的提示。相反，我们应赋予其人性化的口吻，比如将“未设置收货地址，请添加”修改为“您需要我们送到哪里？…”，从而使整个文案更具情感温度，成为一个温暖而富有亲和力的声音。

在一些特殊的场景下，微文案能起到安抚用户情绪、引导用户选择后续行为的作用

3、谨慎开玩笑，除非你对你的产品非常自信

虽然幽默风趣的微文案可以让人更加轻松，但是也要分场合，玩笑和俏皮的语言应该在氛围合适的时候使用，并且并不是所有人都能Get到特定的笑点。

有些笑话在文章当中或许合适，但是在UI界面当中就不一定那么有意思了。比如，你所提交的数据无法保存，结果文案是“糟糕！您的数据好像无法保存呢”，这对于当前的状况毫无裨益。

这样的表达方式既直接指出了问题所在，又给出了简单的解决方案或建议，更有助于用户理解和处理当前的问题。

4、克制与诚信是微文案应用的基石原则，它们共同构成了我们在运用微文案时应当坚守的底线

有时，我们过于依赖这些标签，使得人们对信息逐渐变得麻木不仁。又或是由于虚假、夸大其词的数据泛滥，使得人们开始对社会证明持怀疑态度。

正如张小龙在2017年微信之夜中所言，当App的推送变得过于频繁时，人们往往会选择忽视，以至于任何一个推送都无法引起他们的关注。

当全部都是特惠时，你还会因为优惠而冲动购买吗？

结语

微文案不仅是文字，更是沟通的桥梁。请确保微语言准确、清晰，同时注重情感化和个性化，以贴近用户。同时，保证可读性和可理解性，避免复杂表达。保持微语言的一致性和连贯性，提升用户体验。通过精心设计的微语言，为用户创造更舒适、便捷的体验。

作者：晚上去拔罐
来源：站酷

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(44)

252024-3

除了Sora，这8大AI工具值得每个设计师和产品经理尝试！

博博设计思维

近日，全球科技圈最火的热点非Sora莫属，它是OpenAI发布的首个文生视频模型Sora，其视频生成能力、效果呈现的成熟度震撼了全世界。有人说，这是视频生成领域的iPhone moment，AGI（通用人工智能）又向前划了一个时代。

Sora的使用非常简单，与ChatGPT一样，只需要输入合适的prompt（提示词），它就能跟根据文本指令创建视频。

此前也有一些AI生成视频工具，但大都只能生成10秒以内，还“卡成 PPT”，但 Sora 弯道超车，直接将时长拉到 60 秒。这个突破相当厉害，毕竟时间越长，内容越复杂，想表达准确把控好节奏难上加难。

Sora生成的视频画面截图 | 东京街头的时尚女性

Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象

更厉害的是，根据Sora技术报告的介绍，Sora不仅可以理解用户在提示中所要求的内容，还能理解这些内容在物理世界中的存在方式。因此，它生成的视频不仅逼真，还包含精细复杂的场景、生动的角色表情以及复杂的镜头运动。

Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影

不少人高呼影视行业变天了，明星即将失业，有网友甚至把美国电影工业的象征Hollywood（好莱坞）改成了这样：

其实，不止影视行业，包括教育、营销、互联网甚至所有行业都会或多或少受到影响。

作为在互联网浸润多年的“老油条”来说，笔者最近一直在思考，Sora等AI工具对我们究竟是机会还是挑战？个人认为，机会大于挑战。

比如，对产品经理和UX设计师来说，可以考虑怎么把Sora的能力用到自己的产品上去：一款社区产品，可以通过Sora快速输出大量视频内容；

一款教育类产品，可以通过Sora生成定制化的教学视频；

一款新闻APP或者视频网站，可以利用Sora进行个性化推荐；

……

不过这一切的前提是，你必须掌握AI。

除了上述提到的AI生成视频工具Sora，笔者还总结了很多优秀的AI工具，这些工具能大大帮助我们提升工作效率，生成创意灵感，一起来看看吧~

1、小摹AI

小摹AI是一款集成了人工智能技术的产品设计工具，能够根据文本指令轻松生成可编辑的原型图，对产品经理来说可谓解放了生产力！

官网：

https://www.mockplus.cn/ai

主要功能及亮点：

目前有智能原型、智能文本、智能图片、智能翻译和智能表格五大功能，能有效地提升设计效率，没有设计经验也能轻松上手哦。

1）智能原型：根据用户的描述，智能生成一张原型设计页面。

2）智能文本：根据用户的描述，智能生成一段文本内容，对写产品需求文档很有帮助。

3）智能翻译：有“画板翻译”和“输入内容”两项子功能，可以轻松地实现整页内容的翻译，也可以输入内容进行翻译。

价格：

现阶段可免费使用

推荐理由：

小摹AI界面简洁，上手非常容易，它最大的亮点是利用AI优化设计流程，快速实现从概念到原型的转变，大幅度提升了产品经理和设计师的工作效率！

推荐评级：

⭐⭐⭐⭐⭐

2、Galileo AI

Galileo AI也是一个AI设计工具，它能根据用户的输入智能创建UI设计，生成的界面清晰，间距、字体大小、图片使用等方面都不错。另外，它还有个非常实用的功能，你可以将生成的设计导出到你的 Figma 中继续编辑~

官网：https://www.usegalileo.ai/explore

主要功能及亮点：

1）即时设计生成：根据自然语言提示迅速生成复杂的UI设计。

2）AI生成的插图和图像：为设计添加AI生成的艺术元素，增强视觉吸引力。

3）完整的产品文案自动化：利用大型语言模型自动生成产品文案，节省设计师的时间和精力。

价格：

现阶段免费

推荐理由：

如果你想获得一些灵感，想看到一些新鲜的设计，真的可以试试这个工具。

推荐评级：

⭐⭐⭐⭐

3、Uizard

Uizard是一个基于Web的设计工具，用户可通过它的AI技术快速创建网站界面，还能快速将手绘草图转换为交互式原型，提高设计效率和创新能力。

官网：https://uizard.io/

主要功能及亮点：

1）手绘转数字原型：将纸上的草图转换为数字界面原型。

2）用户界面自动化设计：基于用户输入自动生成设计元素和布局。

3）交互式原型创建：快速构建可交互的原型，用于用户测试和演示。

价格：

提供免费试用版本，付费版12美元/月起。

推荐理由：

Uizard是一款设计神器，它的AI功能，丰富的可复用模板和设计元素，能帮你节省大量时间。

推荐评级：

⭐⭐⭐⭐⭐

4、Whimsical

Whimsical是一款多功能的在线设计工具，它可以帮助用户完成思维导图、流程图、线框图的制作，成品逻辑清晰，层次分明，还能帮助设计师及时标记灵感，是一款万能的专业辅助设计工具。

官网：https://whimsical.com/home

主要功能及亮点：

1）上下文工具栏、可直接用于展示的输出、无限画布以及实时更新；

2）庞大的符号库工具帮助用户更好的完成设计操作；

3）Whimsical的AI功能可以快速生成图表，用以直观展示概念、思维导图和网页等内容。

价格：

提供免费版本，付费版10美元/月起。

推荐理由：

Whimsical是一款全能绘制工具，其中还有非常庞大的符号库工具，能帮助你更好更快地的完成设计。

推荐评级：

⭐⭐⭐⭐

5、Khroma AI

Khroma是一款利用人工智能技术来生成配色方案的工具，它能根据你的喜好和需求，提供高效、直观的配色解决方案，并创建无限的调色板让你尽情探索。

官网：https://www.khroma.co/

主要功能及亮点：

1）AI生成配色方案：根据用户偏好和流行趋势自动生成配色方案。

2）自定义配色选项：允许用户根据自己的需求调整和优化配色。

3）保存和分享功能：用户可以保存自己的配色方案，并与他人分享。

价格：

提供免费版，进阶功能需付费订阅

推荐理由：

Khroma的深度学习算法很厉害，它能够学习用户的配色偏好，并根据流行趋势提供创新的配色方案。

推荐评级：⭐⭐⭐⭐

6、AI Colors

AI Colors是一个人工智能色彩调色板生成器，它可以根据你的描述生成贴心的配色方案，同时你也可以参考提供的配色案例，每一种配色方案都有对应的效果展示，让你能够快速找到想要自己的配色方案。

官网：https://aicolors.co/

主要功能及亮点：

1）提供四种配图案例，分别是移动应用、仪表盘、落地页、作品集；

2）单击复制颜色或者直接导出配色方案，不喜欢的颜色还可以手动修改。

推荐理由：

通过AI Colors，你可以轻松生成调色板，并将其应用于产品界面，查看它们的配色效果，非常适合希望轻松掌握调色板的新手。

推荐评级：

⭐⭐⭐

7、Fontjoy

Fontjoy是一个帮助设计师选择最佳字体组合的工具，它可以让用户在一次点击中生成字体组合，还可以混合和匹配不同的字体，达到完美组合效果。

官网：https://fontjoy.com/

主要功能及亮点：

1）帮助用户调整字体外观，还有字体的类型、大小、颜色等

2）丰富的字体资源：包括中文字体、英文字体、日文字体等；

推荐理由：

只需点击生成，就能看到不同的字体，让字体搭配毫不费力。

推荐评级：

⭐⭐⭐

8、Huemint

Huemint是一个内置AI色彩模型的在线配色网站，它通过AI技术帮助用户快速生成吸引人的配色方案，你还可通过调节滑块控制配色方案的对比度，适用于设计师和创意专业人士。

官网：https://huemint.com/brand-intersection/

主要功能及亮点：

1）AI配色方案生成：根据用户输入和偏好，AI算法生成配色方案。

2）控制配色对比度：用户可以通过调节滑块来控制配色方案的对比度。

3）多样化的配色选项：支持生成等阶色、渐变色和2到11色的配色方案。

价格：

在线免费使用

推荐理由：

Huemint的AI色彩模型能够根据最新的设计趋势和用户偏好提供创新的配色方案，帮助设计师快速找到灵感，轻松提高设计效率。

推荐评级：⭐⭐⭐⭐

以上就是笔者的“掏心”分享了，希望读到这里的小伙伴能真正尝试用一下AI。毕竟，现在我们必将和AI一起成长同行，只有了解AI掌握AI才能不落后于时代，也让我们一起期待人工智能下一个“Sora”吧！

作者：摹客设计云
来源：站酷

评论(0) 浏览(60)

252024-3

标签设计的超全分析总结

博博设计思维

在日常生活中，我们经常会给他人贴上标签。这些标签可能是基于个人特征、行为或经历而形成的，它们可以帮助我们更好地理解和分类他人。例如，当我们初次见到一个人时，我们可能会根据他们的外貌、穿着和言谈举止来给他们贴上一个“自信”、“开朗”或“胆小”、“内向”的标签。我们不可避免地会贴标签或被贴标签，因为这是一种快速且低门槛的有效记忆方式。

关注不同平台的标签设计，发现平时不太注意的小标签承担了许多重要的作用。在电商类设计中，标签可以强化商品折扣、优惠信息、服务特色等吸引用户。对于偏向浏览和文章发布类产品，标签设计旨在方便读者更好地理解文章内容，平台还可以根据标签聚合同类文章，建立目录索引，引导读者快速查看标签文章。

看似简单的标签却有这么强的作用，以下将根据标签的定义、属性特征及使用场景作出一些思考和探索，帮助大家对标签有一个更清晰的认识。

一、标签的定义

二、标签的组成

三、标签设计的作用

四、标签设计要点

百度百科对网络标签(Tag)定义是：

一种互联网内容组织方式，是相关性很强的关键字，它帮助人们轻松的描述和分类内容，以便于检索和分享，Tag已经成为web 2.0的重要元素。

Ant Design 对标签给出的定义是：用来进行标记和分类。使用场景：1.用于标记事物的属性和维度；2.进行分类。

TDesign对标签给出的定义是:用于表明主体的类目，属性或状态。

所以标签是什么?

标签是结合产品内容及属性特征经提炼后产出的关键词，是信息的一种集合方式，便于用户查找、定位以及系统识别。

标签可以帮助传达信息、建立可预知操作、产品分类和营销引流、优化搜索等。通过使用标签，方便用户快速识别，提升信息转化的效率，在UI设计中，标签是最常用的设计组件之一。

标签由容器、文本、图标等元素组成。

三者都是可选的，它们可以随机组合，常见的是这5种组合：文本、图标、容器+文本、容器+图标、容器+文本+图标。

文本标签：

更直观地表达含义，主要用于抽象的、或分类较多的标签，这种类型标签通常也以#+文字的形式呈现为超链接，主要出现在文字内容较多的列表页面、详情页的开头或结尾。它们也可以被理解为常说的话题标签。通过这些标签，用户可以快速了解到内容的主题和核心，并能够方便地链接到与该内容相关联的信息。

图标标签：

更富有设计感且吸引眼球，但这种图标必须是用户熟识的、一看就明白含义的；

容器+文本标签：

主要为突出特色、卖点来进行促销，类型及样式比较多元化，且单个产品可能多达 4~5 个标签，以此来吸引用户购买。

图标+文本标签：

面积会较大，视觉冲击很强，有的出于交互功能的需要，有的则是用在节日和特别专题。

容器+文本+图标标签：

而图标则是为了进一步强调或补充标签文本的信息，增强用户的视觉感知。

01 标签的颜色

标签的颜色选择和搭配对于信息传递和品牌塑造具有重要影响。不同的颜色和用色的面积/重量会给用户带来不同的感知，比如，绿色代表清新、免费，黄色棕色代表尊贵VIP，红色象征火爆热门。同时也会对品牌形象产生影响。

在白色背景下，我们可以自由地选择任何颜色作为标签的主体色、辅助色和点缀色。当面对同一组信息多个标签时，我们可以通过混合不同颜色来更好地区分它们。例如，我们可以将主要标签设置为红色，次要标签设置为蓝色，然后将它们组合在一起以形成一个更丰富的视觉层次结构。

在图片背景下，我们的选择受到了很大的限制。由于图片本身已经具有了丰富的颜色和纹理，因此我们需要谨慎选择标签的颜色以避免与图片产生冲突。通常情况下，我们会使用白色/黑色+不透明度或主体色作为标签容器，并将文字设置为黑色或反白处理以确保其可读性。

总之，无论是白色背景还是图片背景都有其独特的优势和适用场景。在选择背景时应根据具体情况进行权衡并做出最佳决策。

02 标签形状

标签的形状设计在信息视觉传达中扮演着重要的角色，不同的形状代表着不同的信息特性和情感色彩。常用的标签形状有圆形、矩形（半圆角、全圆角）、气泡或异形等。

形状是标签信息传递中的视觉轮廓表现，它作为承载信息的容器，对文字元素的包容性极强，能够使标签信息更加聚焦，让用户在获取内容和进行信息归类时更加专注。

在UI设计中，标签的特征跟生活中的标签也很相似，用以标注内容分类或内容要点，方便用户快速定位自己需要的内容目标。标签还有满足用户的隐形需求的作用，当用户在犹豫是否要进行下一步操作的时候，标签在一定程度上加强了用户的需求欲望，促进下一步操作。那标签到底有什么作用？

传达信息，突出产品特色

标签的基本功能是分类和突出内容要点，以方便用户快速定位他们需要的信息或功能。标签常用于传达产品基本信息、折扣信息、优惠信息、产品卖点等。对产品而言，它能优化信息层级，又能简单明确地传达产品特点；对用户而言，可以第一时间获取关键信息，降低用户阅读门槛，所以标签的首要任务就是为满足用户的隐性需求而传达特色信息。

例如，美团天天神劵、折扣信息等，淘宝里的直降低多少钱、同款低价，让用户潜意识地认为能够降低经济成本。

引导用户操作，建立用户操作的预期

标签还可以用于建立用户操作的预期，让用户在使用产品之前就知道点击后可能发生的效果，从而增加用户点击的兴趣和满意度。

例如：音频标签、视频标签“独播”、“vip”等，让用户在点击前预知点击后的效果。标签还可以用作行为引导，告知某操作的结果，如淘宝里“常逛的店”，让用户提前知悉操作之后得到的结果，加强点击的动机。

03 传递品牌与可靠性

品牌性质的标签，让消费者对产品产生信任感。同时，标签也是品牌与消费者之间的沟通桥梁，通过简洁明了的文字和视觉元素，传达产品的特点和优势。

例如如：“百亿补贴”、“官方店”、“品牌”。许多用户在浏览列表时，会通过标签快速判断是否有必要点击查看详情。此外，标签内展示强公信力的信息（榜单排名/评分等），可以加强内容可靠性及优质性。

方便分类

标签广泛用于用户区分产品内容，进行分类，进而确定关键词，优化搜索。避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。

例如：京东水果蔬菜“时令热卖”标签和淘宝里的评价标签，用户可选择自己感兴趣的标签去查找自己想要的信息，提高浏览效率，节约时间成本。

营销引流

为用户打上不同的标签，用于区分不同用户群体，分类精准定向推送产品。标签既能突出产品特色信息、又不会占用太多空间，所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。

如：小红书文末的文字标签、淘宝搜索的“探索发现”

从众心理引导转化

在营销中，利用从众心理可以引导用户做出购买决策，这类信息广泛应用在标签设计中，积极引导用户点击和转化。

例如，可以展示其他用户的购买记录或评价，让用户看到其他人对该产品的认可和好评，从而增加他们的信任感和购买欲望。像淘宝里的“多少人回购”，银行理财里的“多少人次购买”等等，都会对当前用户的心理产生极大影响，很多时候，用户的想法和行为受到周围人的影响程度，往往超过理性的认知。当用户无法决策时，从众心理会成为影响用户决策的重要因素。

06 告知状态

当内容状态变化且产品希望提示用户知悉时，标签可以作为告知当前状态的提示，如上新的“New”、“直播中”等。

此外，告知当前状态还有营造稀缺性的作用。如“限购多少件”、“即将售罄”，促使用快速决策。

07 营造氛围

标签不仅仅是产品信息的载体，更是营造氛围的重要元素。通过选择适合的色彩、字体和图案，标签可以传达出不同的情感和氛围，吸引消费者的注意力，激发购买欲望。

例如：“38换新节”、“上新啦”，有的产品确实是基于热度展示的标签，也有的产品只是为了吸引用户注意力而展示。

在UI设计中，标签是一个不可或缺的元素，那如何设计才能达成业务目标？

01 简洁明了

标签设计的文案（字段）长短尽量简短清晰，具有一定的识别性、易通性，避免使用复杂的词汇和句子。用户在浏览界面时，应该能够快速理解标签的含义。这里所说的精炼并非一味地求短，虽然“短”是标签必备的因素，但有时候过于简短的标签根本没办法给用户传达足够的信息，甚至会导致用户更加疑惑，这也失去了添加标签的初衷。

02 一致性与差异性

在不同的页面和场景中，标签的设计应该保持一致的风格和格式。这包括颜色、字体、大小、布局和位置等方面的一致性。这样做有助于用户建立认知模型，提高他们的使用效率。然而，尽管标签设计需要保持一致性，但也需要一定的差异性。这种差异性是针对不同类型和视觉权重的标签，通过不同的视觉样式和色彩来体现信息的层级关系。因此，虽然表面上看起来存在冲突，但实际上并不矛盾。

03适当的颜色

标签的颜色应该与背景颜色形成对比，以便用户能够清楚地看到。同时，颜色的选择也应该考虑到品牌的形象和用户的视觉感受。

04 适当的位置

标签的位置应该方便用户操作。例如，重要的标签应该放在显眼的位置，而不太重要的标签信息可以放在次要的位置。

结语

UI 设计中的标签跟我们日常生活中的标签很相似，它不仅能对产品作分类、特色标记，还能在用户犹豫不决的时候起到一定的推动作用，是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。根据产品的目的和需求，在不同时间和场景下使用合适的标签是至关重要的。通过简单精炼的表达方式，标签能够在有限的空间内提供更多的信息维度，吸引用户的注意并激发他们的好奇心、提升信息转化的效率。

作者：满满滴滴
来源：站酷

评论(0) 浏览(73)

212024-3

暗色模式的优势

博博 B端界面设计文章及欣赏

一、用户体验层面

1.提高阅读舒适度

(1).对比度和可读性

在相同的对比度条件下，浅背景上的黑字比深背景上的浅色字阅读效果更好。这表明，优化对比度是提高阅读舒适度的关键因素之一。

浅背景上深字与深背景上浅字的视觉对比

(2).用户偏好和满意度

对于长时间从事屏幕工作的人来说，暗色模式对眼睛更加友好

2.减少视觉疲劳

(1).人眼生理特性

亮/暗环境下瞳孔大小的变化

(2).蓝光辐射减少

可见光波段分布

二、设备电池寿命

1.降低屏幕功耗

OLED屏幕发光原理

2.实际省电效果

以 Google 测试数据为例，OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度，手机的电量消耗下降了 63%。

Google的测试数据

三、降低屏幕功耗

1.促进睡眠对于晚上喜欢在床上阅读或工作的用户来说，暗色背景有助于降低屏幕亮度，减少对褪黑素分泌的干扰，也有助于减少蓝光对睡眠周期的影响，从而帮助用户更快入睡并提高睡眠质量。

OPPO手机暗色模式广告

2.减少眩光

有眩光与无眩光的显示器对比

四、打造沉浸式体验

1.减少视觉干扰

暗色模式提高了一种无干扰的工作环境，有助于他们专注于手头的任务，特别是在进行写作、编码或其他需要集中注意力的活动时，暗色模式能够减少视觉干扰。暗色模式为视觉设计提供了更大的对比度，使得界面元素更为突出。这种高对比度不仅有利于内容的战士，也增强了用户的视觉聚焦，让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时，暗色背景能够使色彩更为鲜明，提升用户的视觉体验。

编码软件一般默认暗色界面，有利于专注工作

2.增强视觉聚焦

手游王者荣耀UI界面

作者：阿琳01
来源：站酷

评论(0) 浏览(73)

212024-3

暗色模式的基本概念和发展历程

博博 B端界面设计文章及欣赏

一、定义及其在UI设计中的表现形式

1.暗色模式的定义

iOS 13 亮色模式（左）与暗色模式（右）的对比

2.暗色模式的定义

(1).暗色模式在UI设计中的表现形式

亮色/暗色模式下主色需要进行调整

(2).对比度控制

达到/未达到WCAG2.0AA标准的视觉效果对比

(3).视觉元素区分

亮色模式中的按钮在暗色模式中显得太跳跃

二、历史回顾及发展脉络

1.命令行界面时代

Linux的终端界面

2.个人电脑时代

Windows2000的GUI

3.移动设备时代

iOS13的暗色模式

4.操作系统时代

Windows10的暗色模式

三、设计趋势中暗色模式的地位

从左往右依次为：WhatsApp、Instagram、Google、Facebook

作者：阿琳01
来源：站酷

评论(0) 浏览(82)

192024-3

深度剖析｜瓷片区设计指南

博博 B端界面设计文章及欣赏

瓷片区是我们设计师在平时的APP设计中经常遇到的设计需求，虽然只是界面中一块较小的区域，设计看似简单，但它涵盖了用户研究、设计心理、UI设计等多个设计知识点。瓷片区对于产品的推广、品牌的传播等也具有着重要的作用。我通过工作中的一些设计心得进行总结沉淀形成此篇设计指南，从多个维度探讨剖析瓷片区的设计方法，希望能够协助设计师更好的规划设计产品，增强用户的满意度和粘性，为用户带来更为舒适流畅的实用体验。文章若有不妥之处，还望共同交流指正。

前言

此篇文章通过讲解关于瓷片区的一些认知以及设计手法的设计指南，来帮助大家更好的理解瓷片区设计的重要性和应用方法。作为产品设计过程中的考虑因素和规则不是一成不变的，希望在未来的设计中能够有更多的方法和技巧指引设计师们完成更好更优秀的设计作品。

瓷片区是APP应用设计中经常出现的一款引导型组件模块，主要在首页主推内容区进行展示，和Banner区、金刚区并行三大运营板块，其权重较Banner区和金刚区略低，一般放在两者之下。瓷片区从外观上看就像是一块块瓷片一样组合“贴”在页面中，构成一组排列在一起的运营广告位，故统称为“瓷片区”。例如京东商城、美团、携程服务、个人中心等产品都含有瓷片区。

瓷片区可以在一个页面区域内划分出不同的组合，且每个区域内会包含产品主体视觉元素（图片）、标题、介绍文案、标签和背景等信息。瓷片区和banner作用较相似，但相较Banner区和金刚区使用更加灵活，应用场景较多。

瓷片区本质上就是运营内容区，它更接近于一个功能模块的外部固定广告位。它的展示内容虽然会随着时间场景变化，但是代表的功能模块是保持不变的，每个瓷片就是这个功能模块的窗口，引导用户进入对应功能模块中。瓷片区不仅较多在电商场景应用中，还可能出现在其他所有应用类型中。例如旅游、金融、娱乐生活等多类产品，但在工具类产品中却不太适用。

1.金融类

金融产品如银行应用、投资平台等，往往包含复杂的服务和功能。此类APP中的瓷片区可用于展示金融产品、投资理财建议等。通过专业的图表、数据和解析，运用图形化的方式简洁明了地传达信息，帮助用户帮助用户快速理解产品特点，更好地了解市场动态，从而做出更明智的投资决策。

2.生活服务类

在生活服务类APP中，瓷片区可以展示各类服务入口，如美食、旅游、休闲娱乐等。通过直观的布局、明确的分类以及醒目的图片，吸引用户进行探索和预订，帮助用户快速找到所需服务，提升用户体验。同时根据用户的浏览记录和购买历史，推荐相关的商品或服务。或者根据用户的地理位置和时间信息，推荐附近的餐厅、景点等，通过个性化的推荐方式能够提升用户的满意度和粘性。

3.新闻资讯类

新闻资讯类APP中的瓷片区可用于展示热门新闻、重要事件或专题报道。通过及时更新内容，瓷片区可以帮助用户快速获取最新信息，同时提高用户对APP的依赖度和使用频率。

4.虚拟类

对于软件、游戏或数字内容等虚拟产品，瓷片区能够通过创意插画或图形，增加产品的调性和趣味性，提升用户体验。

5.设计类

设计相关的应用或平台使用瓷片区也可以展示设计作品、设计理念或者设计工具等，通过视觉艺术吸引目标用户群体。

6.电商或商城类

在电商类APP中，瓷片区常被用于展示热门商品、促销活动等，通过精美的高质量产品图片展示和吸引人的文案，直接影响用户的点击率和购买意愿，从而促成交易。

瓷片区类似于一种产品服务展示，是主要负责流量导流功能，吸引用户注意力，帮助业务推广产品。瓷片区一般都位于用户最容易点击的区域，方便引导用户点击进入，使用户更容易寻找自己所需产品。在现如今的产品设计中，瓷片区具有着十分重要的作用和意义。

1.流量引导与转化

瓷片区是APP设计中不可或缺的组件，它是流量的入口和转化点。通过精心设计的瓷片区，可以有效地吸引用户的注意力，引导他们点击并深入了解相关的内容或功能。这有助于提升用户的参与度，同时增加APP内特定内容或服务的曝光率，从而促进流量的转化。

2.引导用户注意力

瓷片区通过展示商品图、代言人等视觉元素，有效吸引用户的注意力，起到引导用户点击和进一步探索的作用。

3.个性化推荐与用户体验

瓷片区通常也具备个性化推荐的功能，可以根据用户的兴趣和行为习惯，展示符合他们需求的内容。这种个性化的推荐方式不仅可以提高用户的满意度，还能增强用户对APP应用的黏性。同时，通过优化瓷片区的交互设计和视觉呈现，可以提升用户的使用体验，使其更加便捷、舒适地浏览和选择内容。

4.提升转化率

由于瓷片区能够集中展示多个促销信息或功能模块，它通常具有较高的转化率，这对于提升用户的购买行为或参与度是非常有利的。

5.增加产品留存率

良好的瓷片区设计能够提升用户的使用体验，从而提高整个产品的留存率。

6.业务推广与品牌展示

瓷片区是进行业务推广和品牌展示的重要场所。设计瓷片区往往会考虑到美观性和艺术性，这有助于提升产品的整体视觉效果，增强用户对品牌的良好印象。通过出色的视觉展示核心产品或服务，帮助企业有效地传达品牌形象和价值，吸引潜在用户的关注。同时，结合特定的营销活动或促销策略，瓷片区还可以提升用户的购买意愿，促进业务的发展。

7.数据收集与优化

瓷片区的设计和实施还涉及到大量的数据收集和分析工作。通过对用户点击、浏览等行为的追踪和分析，可以了解用户的偏好和需求，为后续的优化工作提供数据支持。这有助于APP不断改进和完善瓷片区的功能和表现，提升整体的用户体验和效果。

在众多产品中，通过瓷片区的设计能增加对商品、功能的曝光，使用户群更愿意去购买或了解感兴趣的商品、功能。设计师根据瓷片区导流入口-落地页-转化率设计，通过整个流程中收集数据，提升优化设计体验，实现设计价值。

瓷片区是在一个APP中将一块矩形区域内划分出不同的矩形组合，每个二级矩形内一般会包含标题、介绍文字、主体视觉元素、标签等信息，通过摆放推广相关的内容吸引用户点击进入。

1.瓷片区是具有营销性的功能区域

瓷片区在设计层面上是具体的运营模块，而不是一种单纯的设计形式。瓷片区是对于存在的产品进行流量扩充，是提高产品点击率，是产品存在后方便调整流量使用。下图中遮照区域是产品的核心功能区，不是简单的营销入口，不能被删除，否则会影响用户使用。

2.瓷片区是静态固定的区域模块

APP软件中常出现功能列表页，它是后台获取数据的入口，是一种整齐排列，一层层叠加的片区，可以以一个单独模块的形式出现，不是像瓷片区类似贴瓷砖组合呈现。在没有产品展示的情况下瓷片区可以显示空状态，区域整体拼接结构不变，以静态固定状态显示。下图中页面本身为功能列表，模块性质本身不属于营销性质。

3.瓷片区不是金刚区

瓷片区不是设计形式，它的拼接表现形式不是只限定于瓷片区可以用，在任何其他位置和模块都可以采用这种样式进行设计。瓷片区的功能权重较金刚区略低，金刚区较多的为产品核心功能入口，而瓷片区多为运营活动的营销导流入口。

4.瓷片区不是快速入口

我们经常会看到一些快速入口会像瓷片区一样做成卡片拼贴的样式，但不管样式如何改变，瓷片区和快速入口在内容承载上有着本质的区别。

瓷片区有较强的诱导性，通过展示的信息元素、图片，如商品图片、产品代言人，来诱发用户关注并点击，在删除后不会影响产品的正常使用。快速入口它主要应对的是用户的主动行为，通过把功能入口密集的罗列出来方便用户进行查找和点击。它主要以展示主题入口相关图形为主，可以是图标也可以是图片、图形，如果删除会影响产品使用。

在瓷片区设计中，一般常见的类型分为3种：实物照片类、插画类、淘宝电商类

1.实物照片类

优点：识别度高，不需要明确的文案标注，图片代入感强，带有图片本身属性的名称和样貌、可复用性强，设计效率较高。

缺点：对图片素材要求高，图片显示有细节。

场景：对实物图需求较大的应用产品类型，如外卖、家居、服装、旅游等产品使用较多。

2.插画类

优点：可高度描述瓷片区的运营意义，精美的插画有助于提升细腻性，产品的细节品质和趣味，插画本身色彩明度低饱和度高，图形表现活跃，风格可控。

缺点：偏抽象的产品，没有合适的实图可替代，此类产品多以插画的形式去表现。矢量插画类页面对周围环境，所表现的内容需要进行一对一绘制，需要高度的概括主题的图形。由于针对属性比较强，所以难以复用。同时图形构图绘制时间较长，时间成本较高，绘制时需要特别注意对关键信息的提炼以及识别度。

场景：对设计风格有明显要求，如金融、理财、教育、生活等产品。

3.淘宝电商类

优点：根据用户反馈数据提供高频输送内容，与浏览数据时时对应，符合用户心智，转化率更高。

缺点：通过大数据真实反馈内容推动产品营销，每个产品单独以个性化形式展示，其他商家产品难以复制，具有技术实现难度。

场景：对设计千变万化，定制多样，常用产品为电商类等。

在进行瓷片区设计时，我们往往需要投入更多的精力进行细致化设计。而瓷片区究竟是由哪些元素组成呢？

背景、图片、文字是瓷片区主要构成元素，其中也可以运用插画、图标、标签、装饰等进行搭配使用，作为设计延展元素。背景、图片、文字在瓷片区一般必须出现，他们是对产品展现、描述或对营销目标表达的关键因素，插画、图标、标签、装饰等可根据设计风格、饱满度、产品需求上加以使用，丰富视觉，突出特殊标识。

瓷片区是一个需要视觉比较突出的组件，拥有较强的视觉感才能起到引导用户点击的效果。如何设计好瓷片区，从了解瓷片区各个元素设计开始。

1.框架布局

要了解瓷片区的设计方法，要先了解瓷片区的布局。在整个产品组件区域内，需要有效分配空间给不同的瓷片。首先在前期设计中，要优先确定瓷片区框架的四周内边距，然后再根据要放置的瓷片数量和重要性进行合理分配，一般可将模块拆分出 2*2、3*2、4*2、4*1的基本网格系统。

如果各个模块的重要性不同，可以将多个小瓷片按照纵向或横向排列合并为一个大瓷片，或将大瓷片拆分成多个小瓷片，以瓷片区域的大小来形成视觉权重的区分。

布局的结构的划分是整个瓷片区设计的主体，除了以上常用的最基本构图方法外，还有很多不同的瓷片分布方式，要通过不断的积累实验发挥自身创新能力，设计出更丰富的瓷片区展示形式。

2.元素排版

单个瓷片区内的元素一般由背景、文字、图片/图标/标签/装饰构成。常见的排版方式一般有左右排版、上下排版、对角线排版、Z字型排版这四种通用的排版形式。

（1）左右排版

一般在配图为图片、图标时适用，一般一行显示一块或两块瓷片。

（2）上下排版

采用上文下图的形式，一般在界面的功能入口较多时适用，一般一行显示不少于3块瓷片。这种元素排版，在营销型展示上一般为上图下文，偏功能型的展示则为上文下图。

作者：七色荧火
来源：站酷

评论(0) 浏览(109)

192024-3

详解国内外十大设计系统（上）

博博 B端界面设计文章及欣赏

一、腾讯 — TDesign企业级设计体系

TDesign设计系统是由腾讯内部近300名设计师与开发者共同打造的一套完整的企业级设计体系。该系统旨在为企业级应用提供全面、高效的设计解决方案，助力产品经理、设计师和开发者实现产品设计和开发的一致性。

TDesign设计系统拥有一致的设计语言和视觉风格，确保了不同界面元素之间的和谐统一。同时，它提供了基于Vue、React、小程序等业界主流技术栈的组件库解决方案，可以构建设计统一、多端覆盖、跨技术栈的企业级前端应用。这些组件库包括桌面端和移动端两套风格统一的组件资源，能够满足不同平台和应用场景的需求。

除了组件库，TDesign设计系统还提供了丰富的行业组件。这些组件是基于统一的设计体系，由腾讯多个业务团队共同开发，并提供了多个垂直领域的行业组件库产品。这些组件经过精心设计和测试，能够满足不同业务场景的需求，并提升产品的用户体验。

二、King Design 设计系统

King Design设计系统是由金山云推出的一套企业级设计解决方案。它致力于为企业级产品提供高效、统一和灵活的设计体验。该系统具有一系列显著的特征，使得它能够满足跨平台、多设备操作系统的统一用户体验需求。

三、Ant Design 设计系统

Ant Design，出自阿里巴巴集团旗下蚂蚁金服之手，是一款全面而通用的设计系统。它旨在为设计师和开发人员提供广泛的用户界面组件、设计指南和工具，以助力团队迅速、轻松地创造出高品质的设计。

总的来说，Ant Design设计系统以其简洁美观的设计风格、丰富的组件库、基于React的开发优势、规则化的视觉样式配置以及TypeScript支持等特征，为前端开发者提供了强大且灵活的设计解决方案。这些特征共同使得Ant Design在前端开发领域具有广泛的应用和认可。

四、Atlassian设计系统

Atlassian设计系统具有几个显著的特征，这些特征使得它能够在全球范围内为数百万客户提供出色的设计解决方案。以下是Atlassian设计系统的主要特征：

Atlassian设计系统以其革命性的颜色方案、丰富的设计资源、可重用组件、直观的界面以及强调交互和用户体验等特征，为设计师和开发者提供了一个强大的工具平台，帮助他们创造出卓越的产品和体验。

五、IBM-碳设计系统

IBM碳设计系统是一个综合性的设计平台，旨在为IBM的产品和服务提供一致且高效的设计解决方案。该系统强调以用户为中心的设计理念，注重用户体验和界面美观性的平衡。

在IBM碳设计系统中，设计元素和组件都经过精心设计和优化，以确保它们在不同场景和平台下都能提供出色的用户体验。这些组件包括按钮、表单、导航栏、图标等，它们都具有高度的可定制性和可扩展性，以满足不同项目的需求。

作者：墨一影
来源：站酷

评论(0) 浏览(98)

182024-3

今天来聊一聊视觉语言的体验升级

前端达人设计资源

视觉表现不关乎体验？拜托，信息的传达都是靠眼睛的好吧，哈哈

作者：是一整条咸鱼
链接：https://www.zcool.com.cn/article/ZMTYxMzI5Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(65)

1 2 3 4 5 6 7 ... 55 »

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

首页

分类

日历

链接

blogger

存档