UI界面设计 - 设计每日一贴---北京兰亭妙微/UI设计公司

首页

242025-3

高效 PC 端界面设计，如何兼顾美观与实用？

在数字化时代，PC 端软件和应用程序无处不在，无论是办公、娱乐还是学习，我们都离不开它们。一个优秀的 PC 端界面设计，不仅要美观，让用户赏心悦目，更要实用，能够高效地帮助用户完成各种任务。那么，如何在设计中兼顾美观与实用呢？本文将为你一一揭晓。

一、理解美观与实用的内涵

（一）美观的界面设计

美观的界面设计并非仅仅是视觉上的好看，它涉及到色彩的协调搭配、元素的合理布局以及风格的统一。色彩能够营造出不同的氛围，比如蓝色常给人专业、可靠的感觉，适合办公类软件；而橙色则充满活力，常用于娱乐类应用。合理的元素布局可以引导用户视线，让重要信息一目了然。统一的风格则能增强界面的整体感和品牌辨识度。

（二）实用的界面设计

实用的界面设计重点在于用户操作的便捷性和功能的高效实现。操作流程应简洁明了，避免繁琐的步骤。例如，文件保存功能应能让用户快速找到并完成保存动作。同时，界面要能准确传达功能信息，让用户无需过多思考就能明白每个按钮或菜单的作用。

二、平衡美观与实用的难点

在实际设计中，平衡美观与实用并非易事。有时为了追求美观，可能会采用一些复杂的设计元素或独特的布局，这可能会增加用户理解和操作的难度，影响实用性。反之，如果过于注重实用，界面可能会显得单调乏味，缺乏吸引力。比如，一些办公软件为了追求功能的全面展示，界面堆满了各种图标和菜单，导致用户眼花缭乱，降低了使用效率。

三、实现美观与实用兼顾的方法

（一）合理的布局设计

采用简洁清晰的布局结构，如常见的 “F” 型或 “Z” 型布局。“F” 型布局符合用户从左到右、从上到下的阅读习惯，适用于信息展示较多的界面；“Z” 型布局则更适合引导用户关注重要信息。同时，要合理划分界面区域，将相关功能模块放在一起，减少用户的操作路径。

（二）色彩的巧妙运用

选择合适的色彩搭配，避免过于刺眼或冲突的颜色组合。一般来说，主色调不宜超过三种，以一种主色调为主，搭配一两种辅助色。同时，要考虑色彩对用户情绪和注意力的影响。比如，在阅读类应用中，采用柔和的色调可以减轻用户眼睛的疲劳；而在警示类信息中，使用醒目的红色来引起用户的注意。

（三）元素的简洁与统一

界面元素要简洁明了，避免过多的装饰和复杂的图案。图标设计应具有明确的表意，让用户一看就懂。同时，保持界面元素风格的统一，包括字体、图标、按钮等，这样可以增强界面的整体感和专业性。

（四）用户反馈与迭代优化

在设计过程中，要充分收集用户的反馈意见。通过用户测试，了解用户在使用过程中遇到的问题和需求，根据反馈对界面进行迭代优化。不断调整和改进，才能使界面设计在美观与实用之间找到最佳的平衡点。

四、案例分析

以某知名办公软件为例，其界面设计简洁大方，采用了经典的蓝色调，给人专业、可靠的感觉。布局上，将常用功能如新建、打开、保存等放在显眼位置，方便用户操作。同时，通过简洁的图标和清晰的菜单，让用户能够快速找到所需功能。在不断收集用户反馈后，该软件持续优化界面，如调整某些功能的位置，使其操作更加便捷，同时也保持了界面的美观性。

高效 PC 端界面设计中，美观与实用并非相互矛盾，而是相辅相成的。通过合理的布局设计、巧妙的色彩运用、简洁统一的元素以及不断的用户反馈与迭代优化，我们完全可以打造出既美观又实用的 PC 端界面，为用户带来更好的使用体验。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan

评论(0) 浏览(256)

072025-2

致兰亭妙微客户们的开工信~~携手前行共创精彩

蓝蓝设计的小编

sdgdgsdg

评论(0) 浏览(298)

172024-10

用户体验一致性思考

ui设计分享达人

前言

在团队内部，我们已确立了一套设计规范，在日常项目中使用设计规范输出变的高效、统一。然而，在实际操作中，不可避免地会遇到一些特殊情况：某些客户提出的个性化需求并不完全契合既定的设计规范,这些促使我们不得不在保持设计一致性的基础上进行灵活调整。因此，深入反思并优化一致性原则的应用策略显得尤为重要。我们需要探索如何在坚守设计规范核心精神的同时，灵活应对多变的需求，确保设计既保持统一和谐，又能满足特定场景下的独特需求，从而实现用户体验与品牌价值的双重提升。

在UI/UX设计中，雅各布·尼尔森的十条可用性原则中，一致性（Consistency and standards）位列第四。这一原则强调在界面和交互设计上需要遵循既定的规则，无论是在应用内部还是跨平台之间。

背后的心理学原理——重复定律，强调了信息重复对于巩固记忆的重要性。正如赫尔曼·艾宾浩斯通过“遗忘曲线”所揭示的，信息的有效保留离不开重复接触。一致性的应用正是这一原理的生动实践，通过不断重复统一的设计元素与模式，强化用户对产品的认知与记忆，从而提升整体的用户满意度与忠诚度。

艾宾浩斯遗忘曲线

用户侧

1、用户学习曲线：

一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时，他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑，提高了他们的效率和满意度。

2、提升可用性：

一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时，他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务，减少错误和迷失，提供更好的导航和流畅的体验。

3、品牌认可度：

一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格，品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性，从而增加品牌的信任和忠诚度。

4、用户满意度：

一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时，他们会感到更加舒适和自信。一致性传递了专业和质量的信号，让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度，并促使他们持续使用和推荐你的产品或服务。

产研侧

1. 降低设计成本，提高开发效率

无论是设计还是开发，复用已有的组件资源，保持界面的一致性可以有效地减少设计的投入，避免不必要的设计分歧点。

而在开发阶段，可以避免重复造轮子，提高开发的效率，保证落地效果，也可以减少上线前设计走查、测试的工作量。

2. 形成一致的设计风格

根据原子设计理论，通过原子组件的一致性，可以构建出统一的界面框架、布局，形成统一风格和用户交互认知，从而更好地保证用户体验质量。

色彩

色彩作为一种兼具物理属性与感官享受的复杂现象，其本质在于光波在人体视网膜上的特定波长被反射或吸收后，所引发的视觉感知结果。在设计领域，色彩的选择与运用不仅是视觉艺术的展现，更是品牌身份与个性的直接体现。诸如饿了么标志性的蓝色、美团鲜明的黄色、以及京东热情的红色等，这些品牌专属色彩不仅构成了品牌识别系统的重要组成部分，还通过其高度的一致性，在视觉层面上构建起强烈的品牌认知，营造出统一和谐的视觉体验。

色彩的一致性策略在品牌塑造中发挥着不可估量的作用，它能够有效增强品牌的记忆度与辨识度，深化品牌形象在消费者心中的烙印，进而提升产品的市场吸引力和用户忠诚度。同时，这种策略还促进了设计元素间的和谐共存，包括按钮、图标、字体、标签、背景、以及关键视觉元素如Banner等，均能在统一的色彩体系下实现视觉上的连贯与流畅，极大地提升了产品的可用性、无障碍性，以及用户在使用过程中的整体满意度与交互体验。

字体

字体作为设计中不可或缺的核心要素，其独特性在于能够精准地塑造文字的视觉形象，涵盖形状、尺寸、粗细、字间距等多维度特征。这些特征共同构建了一种独特的文字风格，不仅承载着信息的传递功能，更在无形中引导着用户的视觉流程，影响着信息的接收与理解深度。因此，在设计过程中，合理选择与应用字体显得尤为关键。

字体类型的多样性，如有衬线字体与无衬线字体的对比，不仅体现了风格上的差异，还隐含了不同的阅读体验与情感表达。字体的粗细变化（如细体、常规、粗体等）更是能够强调文本的重要性层级，增强信息的层次感与可读性。此外，字重的调整也是塑造视觉焦点、引导视线流动的有效手段，对于提升设计的整体美观度和信息传达效率具有不可小觑的作用。

然而，在实际的开发与实现过程中，若不加节制地使用多种字体，不仅会显著增加页面的加载时间，影响用户体验的流畅性，还可能因风格不统一而导致页面显得杂乱无章，破坏整体设计的和谐感。因此，制定一套统一、规范的字体使用策略显得尤为重要。这不仅有助于提升开发效率，减少后期更新迭代的复杂度，还能有效避免资源浪费，确保设计作品在视觉上的一致性与专业性。

图标

图标作为用户界面设计中至关重要的元素，风格直接影响到用户的使用体验与对产品的整体印象。图标以其简洁、直观且富有表现力的特点，在快速传达信息、引导用户操作方面发挥着不可替代的作用。在设计中，图标的设计与应用更是需要精心考量，以确保其既能够准确传达信息，又能够与整体设计风格保持一致，从而营造出专业、和谐且易于使用的界面环境。

设计中视觉上保持统一包括图标的大小、形状、色彩以及设计风格等多个方面，能够增强用户的认知连贯性，降低学习成本，提升使用效率。相反，如果图标风格混杂，不仅会让界面显得杂乱无章，还会给用户带来困惑和不安，进而影响其对产品专业性和安全性的信任。

按钮

按钮设计应统一于项目风格，无论是圆形、矩形、圆角矩形还是特定形状，保持一致性是关键。统一的按钮样式不仅彰显专业性，还能增强用户信任，确保体验连贯。过多变化的按钮样式会扰乱用户界面，降低操作直观性，甚至让用户误以为自己已离开应用环境。因此，精心设计的统一按钮样式对提升用户体验至关重要。

排版

设计中的排版一致性对于构建高效、用户友好的界面至关重要。一致的排版不仅能够让用户快速适应和理解界面的整体结构，大幅降低学习成本，还能在用户心中激发强烈的归属感和安全感。这种熟悉感使得内容更加易读，用户能够自然地依照既定的视觉动线流畅地浏览页面，迅速定位并获取所需信息，从而显著提升信息获取的效率。因此，在设计过程中，注重并维护排版的一致性，是提升用户体验和界面有效性的重要策略之一。

操作流程的一致性

标准化流程

：确保用户在执行相似任务时，如购买商品、搜索信息或提交表单等，能够遵循相同的操作流程。这有助于用户快速适应并高效完成任务。

逻辑清晰

：操作流程的每一步都应符合用户的认知习惯和行为逻辑，避免让用户感到困惑或不知所措。

交互元素的一致性

按钮和控件

：确保按钮、输入框、下拉菜单等交互元素的样式、位置和操作方式在整个应用或网站中保持一致。例如，所有按钮都应具有相同的视觉风格和触发机制。

导航和菜单

：导航栏和菜单的设计也应保持一致，使用户能够轻松地在不同页面或功能之间切换。

反馈机制的一致性

操作反馈

：当用户执行某个操作时，应用或网站应提供一致且及时的反馈，如加载动画、成功提示或错误消息等。这有助于用户了解操作结果并采取相应的行动。

状态提示

：对于长时间运行的操作或需要用户等待的场景，应提供明确的状态提示（如进度条），以减轻用户的不确定感和焦虑感。

在任何维度上，一致性不应成为设计的唯一导向。设计，这一融合了艺术与科学的复杂领域，要求我们在用户体验的细腻雕琢、功能需求的精准满足、美学价值的深刻体现及技术可行性的严格考量间游走。

“一致性”作为设计策略，其核心使命在于优化用户路径，降低认知门槛，确保用户在多元界面中穿梭时仍能感受到连贯与和谐。当我们在与设计团队（包括工程师、产品经理等）沟通时，仅仅提及“一致性”可能并不足以说明其必要性和价值。我们需要更深入地阐述为什么需要保持一致性，以及它如何具体帮助减少用户困惑、提高用户满意度和忠诚度。

同时，我们应清醒认识到，“一致性”并不是万能的。在某些情况下，为了追求极致的用户体验或解决特定的设计问题，可能需要打破传统的一致性规则。因此，设计师需要在保持一致性和创新之间找到平衡点，根据具体情况灵活调整设计方案。

实际落地执行时，要根据产品定位、用户场景，结合业务功能来确定设计方案，不能为了一致而一致。

当我们遇到一致性问题时，还是需要从以下3个方面深入思考，做出准确合理的设计决策。

真实项目

在SaaS产品设计中，特别是面向B/G端（企业用户）时，满足不同用户角色（如普通用户与高权限领导）的需求是至关重要的。

管理端布局设计

普通简洁明了

：为普通用户设计的管理界面应简洁直观，聚焦于日常操作，如数据查看、统计和下载。

功能分区

：通过清晰的导航栏或侧边栏将功能区域划分开，如“数据概览”、“报表下载”、“任务管理”等，便于用户快速定位所需功能。

操作便捷

：确保常用操作（如搜索、筛选、排序）易于触达，减少用户点击次数和页面跳转。

首页版心定宽设计

固定宽度

：为首页设定一个合适的固定宽度（如1200px、1440px等），以保证内容在大多数屏幕上都能保持一致的阅读体验。

信息模块化

：将首页内容划分为多个卡片，每个卡片承载一个独立的信息单元（如数据报表、通知公告、项目进展等）。

视觉层次

：通过颜色、大小、阴影等设计元素区分卡片的重要性，引导用户视线，提高信息获取效率。

交互性

：为卡片添加交互元素，如点击展开、滑动查看更多等，增加用户参与度和页面活跃度。

位置差异性分析

根据「认知负荷>视觉负荷>动作负荷」理论，在页面中我们首先要让用户能够找到按钮，然后完成操作。

相对于弹窗，页面的空间更大，边界感偏弱，用户的视觉重心更容易停留在左侧表单内容区域。所以按钮应该紧随搜索条件，便于用户快速发现按钮。

区域用户已经形成下意识操作习惯,虽然区别于规范,只能打破,遵循客户需求

一致性是规则

“一致性”作为规则或手段，服务于提升用户体验的原则。规则与原则一致时，促进业务共识与用户价值；冲突时，原则优先。用户体验原则指导下的一致性，要超越表面控件统一，更在于产品决策与价值取向的一致。必要时，为更好的用户体验，可在规则上让步以实现原则统一。打破规则需慎重权衡，确保用户便利足以弥补理解成本，需长期全局考量。规则非僵化教条，而是引导我们谨慎创新的框架。

一致性的底线

无论从哪个角度，一致性存在的必要性都是毋庸置疑的。

对于关键的设计元素，如专有名词和颜色体系，保持一致性至关重要。这不仅有助于维护品牌形象，还能减少用户的困惑。

特定设计语言在特定场景下的变体应用，虽然可能带来一定的视觉新鲜感或针对性优化，但往往需要谨慎评估其潜在风险。一旦变体打破了整体设计的一致性，可能会破坏用户对品牌的熟悉感和信任感，甚至引发误解。因此，在追求设计创新的同时，必须确保这种创新是基于一致性的原则之上，以维持品牌的整体性和用户的良好体验。

拥抱复杂性

一致性确实不应成为设计师的避风港或限制创新的枷锁，而应是基于对业务深刻理解和多样化设计能力之上的价值选择。设计师的核心任务始终是满足用户的多样化需求和偏好，这需要他们细致入微地观察、理解并解决每个用户的独特问题。

在追求一致性的同时，设计师应保持“第一性思考”的能力，即回归问题的本质，从用户需求出发进行创新设计。多样性页面的产出，不仅体现了设计师的创造力和灵活性，也是提升用户体验、增强产品吸引力的关键。

一致性与创新设计并非相互排斥，而是相辅相成的关系。真正的一致性不应导致单调或拒绝创新，而应是在遵循品牌或产品核心价值的前提下，鼓励设计师在细节和体验上不断探索和突破。当设计师感到被既定规则束缚时，应勇于质疑并重新评估当前的规范，确保所谓的“一致性”不是刻板的伪命题，而是真正符合用户需求和品牌发展的价值导向。

因此，设计师应时刻保持开放的心态和敏锐的洞察力，不断探索和尝试新的设计方法和理念，以更加灵活和创新的方式实现一致性与用户需求的完美融合。

重要的设计原则

「一致性」作为设计领域中的一项基础性原则，其重要性不言而喻。它不仅为设计过程提供了稳固的基石，还显著促进了开发效率与产品体验的全面升级。在设计实践中，一致性确保了界面元素的统一性和连贯性，使得用户能够迅速熟悉并掌握产品的使用方式，降低了学习成本，增强了操作的直观性和便捷性。

灵活变通使用

一致性原则并非一成不变的强制规定，而是需要根据产品的具体定位和市场环境进行灵活变通的应用。不同的产品可能面向不同的用户群体，拥有独特的品牌调性和功能需求，因此在追求一致性的同时，也需充分考虑这些因素，确保设计既符合品牌特色，又能满足用户的实际需求。

提升用户体验是价值所在

一致性的真正价值在于其能够显著提升用户体验。通过遵循用户的认知和习惯，设计师能够创造出更加自然、流畅的操作流程，使用户在享受产品功能的同时，也能感受到品牌所传递的舒适与和谐。因此，在追求设计一致性的过程中，我们始终应以人为本，将用户的体验和感受放在首位。建设有兼容性和长期价值的的一致性框架，在一致性中做到有用户价值的设计，是设计师应该不断探索的命题。

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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(429)

052024-9

深入探究B端产品设计的核心

ui设计分享达人

一、B端用户需求的深入理解和分析

在当今高度信息化的商业环境中，B端产品已成为企业高效运营和持续发展的关键支撑。

这些产品不仅提供工具和服务，更是企业优化流程、提升工作效率和竞争力的有力武器。然而，要打造一款成功的B端产品，关键在于对

B端用户需求的深入理解与分析。

B端用户，

如企业决策者、团队管理者和专业人员以及普通员工，他们在日常工作中处理复杂的业务流程，对数据分析、系统整合、安全性等方面有着极高的要求。

这些用户的独特需求不仅体现在产品的基本功能上，更涉及到产品的易用性、可扩展性以及服务支持等多个层面。

需求分析是产品设计的核心环节，它要求设计师深入探究用户的需求、痛点和期望，从而确保产品能够满足用户的实际需求。对于B端用户而言，需求分析的重要性更为突出。这是因为B端产品往往需要解决企业运营中的具体问题，其设计必须紧密围绕用户的需求展开，以确保产品的实用性和高效性。

在需求分析的过程中，我们需要关注以下几个方面：

首先，

功能性需求

是B端用户最为关注的一点。他们需要产品具备强大的数据处理能力、灵活的业务流程管理功能以及全面的安全防护措施。这些功能性的需求是确保B端产品能够满足企业日常运营需要的基础。

其次，

易用性需求

同样不容忽视。尽管B端产品往往面向具备一定专业素养的用户，但简洁直观的界面设计、流畅的操作体验以及可定制的用户界面仍然是提升用户满意度的关键。通过优化用户交互流程、减少冗余信息，我们可以帮助用户更高效地完成工作任务。

此外，

整合与扩展性需求

也是B端用户关注的重点。企业需要产品能够与其他系统无缝对接，实现数据共享和业务协同。同时，随着企业业务的发展，产品还需要具备良好的扩展性，以支持新功能的快速添加和部署。

最后，

服务与支持需求

同样重要。B端用户期望获得专业的客户支持、完善的培训机制以及丰富的资源文档，以确保产品的稳定运行和持续优化。

综上所述，深入理解B端用户的独特需求是打造成功B端产品的关键。通过全面的需求分析，我们可以确保产品不仅满足用户的基本功能需求，更在易用性、整合扩展性和服务支持等方面提供卓越的体验。这将有助于提升企业的运营效率，进而推动其在激烈的市场竞争中脱颖而出。

二、B端用户的独特需求

B端用户，即企业级用户，他们的需求与C端个人用户有着显著的差异。

这些差异主要体现在以下几个方面：

业务强驱动性：

B端产品的主要需求来源于业务方，由业务驱动并主导。

这是因为B端产品主要是为了解决组织内某个或某一类具体业务领域的问题。业务方通常离业务最近，也最了解使用用户的需求，因此他们在产品需求上拥有较大的话语权。

用户群体差异大：

不同于C端用户需求的大同小异，B端用户群体的需求差异巨大。

这些差异主要体现在角色差异、组织差异、管理层级差异、用户深度差异、客户规模差异、客户行业差异以及客户性质差异等。这种多样性要求B端产品在设计时需要考虑更多的变量和定制化需求。

高效性与便捷性

：

企业级用户非常重视工作效率和操作流程的简化。

他们希望产品能够提供高效的功能和简洁的操作界面，以减少工作中的繁琐步骤和时间成本。因此，B端产品设计需要注重提升用户的工作效率，提供便捷的操作体验。

安全性与稳定性：

对于企业级用户来说，数据安全和系统稳定是至关重要的。

他们需要一个可靠且安全的平台来处理和存储敏感的业务数据。B端产品必须能够提供强大的安全防护措施和稳定的系统性能，以确保企业业务的正常运行和数据的安全。

定制化与灵活性：

每个企业的业务流程和需求都是独特的，因此B端用户希望产品能够根据自身的实际情况进行定制。

他们需要一个灵活可配置的产品解决方案，以满足企业特定的业务需求和工作流程。

集成性与兼容性：

在企业级应用中，B端产品往往需要与其他系统或软件进行集成，以实现数据的共享和流程的协同。

因此，产品的集成性和兼容性是企业用户非常关注的一个方面。B端产品设计需要考虑到与现有系统的无缝对接和数据交换的便捷性。

综上所述，B端用户的独特需求主要体现在业务的强驱动性、用户群体的大差异性、对高效便捷的追求、对安全稳定的重视、对定制化和灵活性的需求以及对集成性和兼容性的关注等方面。这些需求特点要求B端产品在设计时必须充分考虑企业级用户的实际需求和业务场景，以提供符合用户期望的优质产品解决方案。

三、

B端产品设计的核心原则

B端产品设计需要遵循一系列核心原则，以确保产品能够满足企业级用户的独特需求。

3.1 用户中心设计

深入理解目标用户：

在设计B端产品时，必须首先了解目标用户，包括他们的工作流程、需求痛点以及行为习惯。这需要通过深入的用户研究和调查来实现，以便更好地设计适合用户的产品。

符合用户期望：

产品的设计应以用户为中心，确保功能、界面和操作都符合用户的期望和习惯。这有助于提高用户满意度和使用效率。

3.2 简洁直观的界面

简约性：

B端产品的交互界面应该简洁明了，避免过多的复杂功能和视觉元素。这样用户可以更轻松地理解和使用产品。

直观性：

界面设计应直观易懂，减少用户的学习成本。通过明确的导航和标识，帮助用户快速找到所需功能。

3.3 强大的功能支持

满足业务需求：

B端产品需要提供丰富的功能，以满足企业复杂的业务需求。这些功能应涵盖用户在工作流程中的各个环节，确保用户能够顺利完成工作任务。

灵活配置：

产品功能应具备高度的可配置性，以便用户根据自身需求进行灵活调整。这有助于提升产品的适用性和用户体验。

3.4 高度可配置性

定制化体验：

B端产品应允许用户根据自身需求灵活配置产品功能和界面。这包括调整功能模块、设置权限、定制报表等，以满足不同用户的个性化需求。

易于管理：

产品应提供便捷的管理工具，使用户能够轻松地对产品进行配置和管理。这有助于降低用户的操作难度和提升工作效率。

3.5 数据驱动决策

数据分析：

B端产品应具备强大的数据分析功能，帮助用户深入挖掘业务数据中的价值。通过对数据的分析，用户可以更好地了解业务状况、发现问题并制定相应的解决方案。

决策支持：

产品应提供可视化的数据报表和分析工具，为用户提供决策支持。这有助于用户做出更明智的决策，推动企业的发展和创新。

综上所述，B端产品设计的核心原则包括用户中心设计、简洁直观的界面、强大的功能支持、高度可配置性以及数据驱动决策。遵循这些原则有助于设计出符合企业级用户需求的优质B端产品。

四、B端产品设计流程

B端产品设计流程是一个系统性、结构化的过程，旨在确保产品能够满足企业级用户的实际需求和业务场景。

4.1 市场调研与用户研究

市场调研：

了解行业趋势、市场规模、主要竞争对手以及潜在的市场机会，为产品定位和设计提供市场层面的输入。

用户研究：

通过深入访谈、问卷调查、用户观察等方式，收集目标用户的需求、痛点、工作流程等信息。这些信息对于理解用户行为和期望至关重要。

4.2 需求调研和分析

需求收集：

从用户、业务方、利益相关者等多渠道收集需求。

需求分析：

对收集到的需求进行深入分析，理解需求的本质和背后的业务逻辑。

需求筛选与排序：

基于业务价值、用户价值、实现成本等因素，对需求进行筛选和优先级排序。

4.3 产品规划与设计

产品规划：

根据市场调研和用户研究结果，制定产品的发展规划和路线图。

功能设计：

明确产品的核心功能和特点，确保产品能够满足用户的实际需求。

信息架构设计：

对产品的内容和功能进行分类和组织，确定产品的核心功能和信息架构，使用户更容易找到和使用相关功能。

4.4 原型设计与UI设计

原型设计：

制作产品原型，展示产品的基本结构和交互流程，帮助团队更好地理解产品设计。

UI设计：

根据产品原型和业务需求，进行用户界面设计，确保界面简洁、美观且易于使用。

4.5 用户测试与反馈

用户测试：

邀请目标用户对产品原型或初步实现的产品进行测试，观察用户的使用行为和反馈。

反馈收集与分析：

收集用户的反馈意见，对反馈进行深入分析，找出产品的问题和改进点。

4.6 产品开发与迭代

产品开发：

基于产品设计文档和原型，进行产品的实际开发工作。

测试与修复：

对开发完成的产品进行详细的测试，确保产品质量和稳定性。针对测试中发现的问题进行及时修复。

产品迭代：

根据用户反馈和市场变化，持续对产品进行迭代和优化，以满足用户不断变化的需求。

4.7 上线与运维

产品上线：

经过充分的测试和验证后，将产品正式上线，供用户使用。

运维与监控：

持续监控产品的运行状况，及时发现并解决潜在的问题。同时，为用户提供必要的技术支持和服务。

整个B端产品设计流程需要跨部门的紧密协作和持续的用户参与。通过不断优化和完善设计流程，可以确保B端产品更加贴近用户需求，提升用户体验和业务效率。

五、结论

B端产品设计流程是一个复杂而精细的过程，它涉及到从市场调研、用户研究到产品开发、迭代和运维的多个环节。在这个过程中，始终以用户需求为中心，通过深入的市场和用户研究来确保产品的定位准确性，再通过原型设计、用户测试等环节不断优化产品设计，最终开发出满足用户需求、稳定且高效的B端产品。

通过遵循这一流程，

企业能够更有效地理解目标市场和用户的真实需求，设计出更符合用户使用习惯和业务流程的产品。这不仅可以提升用户的工作效率和满意度，还可以增强企业的市场竞争力，实现商业价值的最大化。

B端产品设计流程是确保产品质量和满足用户需求的关键，它需要多部门的协同合作和持续的用户参与，以打造出优秀的B端产品。

作者：张阳光Designer
链接：https://www.zcool.com.cn/article/ZMTYyMTczNg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(371)

052024-9

学会讲故事：体验设计方案的演示技巧

ui设计分享达人

在我刚刚成为一名体验设计师的时候，我发现自己处在一个迥异的战场之中——会议室坐满者领导们，一个个面露怀疑之色。我拿着最新设计的界面方案，投放在墙上，我站在这些恐怖的观众面前，手里的任务沉重的压的我喘不过气来。

我的任务不仅仅是演示一个设计方案，我在销售一个概念、需要说服一群人，解决一个复杂的问题。我渐渐意识到，这一过程和驾驭不可预知的情况如出一辙。需要我拥有战略思维、做事的耐心和面对未知的意愿。

阿尔伯特·爱因斯坦

历史是一幅多姿多彩的画卷，交织着无数杰出人物的故事 —— 他们通过战略思维和耐心，成功应对复杂的局面。在众多杰出人物当中，阿尔伯特·爱因斯坦是最闪耀的。爱因斯坦曾说过，“我们不能用制造问题的思维来解决问题”，这一句话也就呼应了战略思维的本质。他提出开创性的相对论理论，这可不是简单的从事实当中衍生出来的的粗略陈述。而是来自于耐心和战略思维深度，以一种让其他人能够理解宇宙的方式阐明相对论概念。

用户体验设计是理解用户和界面设计之间的复杂过程——界面不仅要满足用户的需求，同时也要符合设计目标。

这是一个充满同理心、沟通和解决问题的过程。但是，要达到这一点，设计出一个满足用户需求，并且呈现解决方案的设计，是需要战略思维的。作为一名用户体验设计师，我们必须超越眼前，沉浸在用户视角当中、分析他们的需求，并考虑这些需求如何和设计目标结合。这个艰苦的过程需要耐心，就像完成复杂的拼图游戏一样。

为了进一步理解这点，让我们来做个练习

想象一下，你拿到一块 1000 片的拼图，万花筒般的形状和颜色。你会一头扎进混乱中，随机摆放拼图碎片？还是会先定策略？你会先把类似的拼图碎片分组？也许从拼图的边缘或角落开始，然后逐渐往中心拼图？很有可能，你会选择战略方法。耐心和战略决策过程反映我们处理用户体验设计和生活中复杂问题的方式。我们一起来解剖问题，了解其中的复杂性，并制定战略计划，从而完成拼图（解决问题）。

胆小的人成为不了一名体验设计师。我们不仅需要持续不断的创造和展示作品，这需要我们证明方案的思考过程，需要面对评审，修改设计，并重新演示。反反复复，这个迭代过程是对耐心的考验，是一次严峻的考验，让设计师变得更加优秀，更加卓越。

同样，生活也常常给我们带来看上去高不可攀的挑战——一场个人危机，一次职场挫折，甚至全球疫情。克服这些困难的关键在于我们拥有战略性思考能力和解决问题耐心。

在用户体验设计师的世界里，作品演示不仅体现我们专业实力。是将用户需求、商业目标和设计解决方案所构建的故事。

掌握讲故事的艺术能够助力方案的演示。我们绘制一幅蓝图——将观众带入一个以用户为视角的世界，与他们共情，理解他们所遇到的挑战，自信满满地展示我们的设计方案，阐述我们的设计方案如何克服这些挑战。

这和我们的生活如出一辙，我们经常表达我们的经历和意图，通过讲述故事，解决复杂的人际关系和职业问题。

不是你眼睛的问题，文本真的很模糊！！！

作为一名体验设计师，伴随着充斥着这些“冲突”时刻：怀疑的时刻、修改的时刻、重新思考的时刻、演示的时刻、捍卫设计方案的时刻等等。但是，这些时刻恰恰都是让我们通往行业专家的敲门砖和垫脚石。

我们要拥抱这些时刻，享受这些过程，因为这些过程正在塑造我们，让我们接下来的设计、演示、要解决的问题做好准备。其实，在生活中亦是如此，每一次，我们遇到的问题和挑战都是塑造我们，让我们对未来做好准备。培养我们的坚韧不拔的精神，教会我们看待自己和周遭事务的宝贵经验。

无论是作为一名用户体验设计师不断提升演示技巧，还是在生活上提升解决复杂问题的能力，我们应该始终牢记 2 条指导原则：坚持和战略规划。

这两个支柱（原则）将指引我们穿越最有挑战的地形，帮助我们克服最艰巨的障碍，并领我们走向成功。

成为照亮我们道路的明灯，指引我们朝我们目标方向的指南针。

罗伯特·舒勒

罗伯特·舒勒（Robert H. Schuller）曾说过“ 问题不是停止的信号牌，而是指导方针”。这是指引我整个职业和生活的箴言，这句话蕴含深奥的智慧成为我人生的指路灯塔，帮助我应对生活中的挑战，帮助我真正成为一名体验设计师，在演示复杂性中不断前行。

每当我们解决一个问题，每提出的一个设计想法，每克服一个挑战，都能让我们更接近最终目标。坚持不懈、战略规划、耐心、学习经验的意愿，都是指引我们通向成功的指南针，无论是用户体验设计还是在生活。

心之所向无往不前，积极面对，一步一个脚印不断前行。这条道路上充满挑战，铭记一句话，这些不是停止的信号牌，而是指引我们通向终点的指南针。

所以，保持前行，不断学习，不断成长。你的旅程是属于你自己的，是你一生之中最美丽的故事。

作者：三分设
链接：https://www.zcool.com.cn/article/ZMTYzMDk0MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(360)

052024-9

清晰展现关键信息，助力高效决策——数据图表

ui设计分享达人

合理使用数据图表可以帮助用户更好地理解复杂的数据，提高用户体验和数据的可读性。选择合适的图表类型并遵循最佳设计实践是确保图表有效传达信息的关键。

数据图表是一种非常重要的可视化工具，它能够

帮助用户更直观地理解和分析数据。

借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点：准确性、创新性、简洁性。

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

评论(0) 浏览(384)

052024-9

当设计遇上AI—百度APP个人中心AI重构

ui设计分享达人

前言

AI能力的迅猛发展，为产品设计带来了很多新的可能性和机会。百度作为AI领域的行业先锋，正在不断探索如何将AI技术深度融入到产品中，以赋能改进和提升产品的使用体验。

本文将以百度APP个人中心AI重构项目为例，讲述如何运用AI智能推荐和对话能力来解决问题重构体验，将一个传统的固定入口型的个人中心打造成为一个高效智能的AI版个人中心。

希望能为读者提供新的视角和思路，激发大家对于AI原生设计的理解和思考。

个人中心旧版

作为百度APP端内业务和基础功能设置的重要回访阵地，个人中心面临着三大核心问题：①功能入口多页面屏效低；②部分功能操作层级深；③资产更新提醒不直观。

针对这些问题，我们希望通过精简功能结构、破壳高频功能、强化信息提示，提升用户触达效率，优化整体使用体验。为此，我们计划运用AI能力进行设计重构来解决上述三大问题。

个人中心AI重构设计

目前行业内并没有一款运用AI能力对个人中心进行重构的产品，因此，设计师的挑战在于如何从0-1创新重构出“AI个人中心”新形态，来全面提升用户在端内的回访体验。我们依次从「框架、结构、内容、操作、对话」五部分出发定义，逐步搭建功能、丰满细节、拓展深度，创新重构出一个全新的AI版个人中心。

1.容器创新设计打造AI感资产框架

基于上述问题和设计目标，首先对个人中心框架进行了重构设计，结合用户行为数据保留常用高频功能入口，去除原来众多类型的内容推荐卡，在页面内实现功能精简提效；其次结合AI智能推荐的能力，开辟出一个承载推荐内容的容器区域，破壳内容便于用户回访。

我们共计验证推敲出3种页面框架“嵌入式框架”“分层式框架”“卡片式框架”，选择与AI融合感更强、体验更沉浸的嵌入式框架继续深入，框架头部精简信息，中部保留高频功能便于用户回访，下方区域则通过AI智能推送用户所需内容。

2.结合用户行为主动智能推荐

在框架下方承载推荐内容的容器区域内，个人中心可以结合用户在百度APP的使用行为数据，通过AI向用户智能推荐内容资源和功能操作。

当用户的内容资产有变更时，个人中心能够主动破壳内容，如用户最近下载了一部剧集但未看完，当该剧有更新时，主动提示用户继续观看。

当用户有设置类潜在需求时，个人中心能够推荐操作功能，如用户的手机经过一段时间使用，有系统垃圾冗余时，会主动推荐用户清理缓存。

3.构建全业务卡片的内容结构

我们将各业务需要展示的信息摘取出来，采用卡片形态进行聚合与承接，以保证AI智能推荐时的灵活性和可拓展性。卡片会采用对话式引导语拉近用户距离，破壳提示内容资源，如向用户主动推荐最近收藏的内容，支持跳转查看并在返回时更新状态；还会在资产变更时进行提醒，如当用户下载视频或备份文件后，对用户实时提醒并提供复访入口；支持用户直接设置功能，支持一键点击并实时反馈状态。

设计期间，我们从卡片分类方式、模板呈现、交互操作等维度进行了多方案探索，前后迭代实验了3款卡片形态，结合用户访谈测试和实验数据反馈，最终选择使用3.0版本的分卡聚合样式。这一版本采用了统一化模版来精简布局，通过一步操作来前置功能减步长，对功能和内容进行分类聚合来提高页面屏效、使用户更易理解。

共计为20+业务搭建了10类聚合卡片，定义归纳了3类卡片操作与更新方式，在个人中心选用最符合用户行为的卡片和内容进行智能推荐。目前我们更多业务正在接入推荐卡片体系中，大家敬请期待~

4.内容破壳提示功能操作提效

回归用户实际使用场景来看，AI智能推荐卡片形式在用户操作上有了很大的提效。例如查看下载视频的步长由4步缩减为1步，原来用户想继续看视频时，可能会找不到、且寻找入口比较深，现在我们通过推荐卡片破壳了视频等内容，点击卡片即可一键直达视频页，一段时间后返回个人中心时卡片会更新用户的最新观看进度。既减少了用户操作步长，又沉浸式延续了用户在端内的使用行为。

同样，功能类的操作效率也大幅提升，之前当用户想清理时，入口深步骤多、体验非最佳，现在通过推荐卡片将清理缓存功能前置推出在个人中心，用户想清理缓存时，无需翻越层层入口，只需点击“清理”按钮即可一键完成缓存清理，实时告知用户清理进度，大幅提升用户操作效率。除此以外，像深色模式、字体大小等功能也都支持用户在个人中心一键操作。

5.拓展对话场景触达用户长尾需求

个人中心不仅可以结合用户行为智能推荐卡片，还支持用户主动发起提问，通过对话形式快捷触达长尾需求。用户点击卡片下方的“去提问”入口或上滑页面，即可从个人中心进入对话页。

进入对话页后，个人中心AI助手首先会推荐一些快捷指令，让用户快速了解对话提问方式和目前支持提问的功能。当用户发起提问后推出相关功能卡片，如在手机运行卡顿时询问“如何清理缓存”，AI助手会推出“清理缓存”卡片并引导用户前往清理，清理完成会再次回到对话页、为用户展示最新缓存状态。

以下是支持对话的部分功能卡片，这些卡片整体延续了推荐区域卡片的内容和体验，结合对话交互流程对卡片模版进行了差异化定制。

最终基于业务功能特点，结合对话交互规范，共计定义了“跳转操作并返回更新”“跳转查看”“当前操作”“当前操作并追加对话”4种交互操作和更新方式。目前我们接入的场景能力尚有限，后续我们将持续进行迭代与优化，提升用户在个人中心进行AI对话的体验。

AI个人中心实验上线效果

AI版本实验上线后，百度APP和个人中心的关键数据都有了显著提升，带来了正向收益，我们也于今年6月底上线全端，期待大家体验并给予反馈。

思考与展望

如今产品AI化已成为市场发展趋势，作为设计师，如何结合自己的业务，运用AI能力重构产品及体验是一个极具挑战和价值的课题。我们从百度APP个人中心AI重构项目中总结出了一些经验和小tips，在此向大家分享：

在应用AI技术之前，首要任务是明确其能力范围与显著优势，如文中使用的AI智能推荐能力能够同时满足用户的个性化需求、提升信息获取效率，从而全方位提升用户体验和业务价值。

我们需要大胆突破、勇于创新，在没有可参考借鉴的产品时应当打破惯性思维，尝试从框架、结构、内容等层面进行全新定义，然后通过持续打磨、深度探索等手段来不断完善产品形态。

无论是否应用AI，设计底层思维是万变不离其宗的，我们需要始终站在用户视角分析并解决问题，而AI将会是每位设计师的一个趁手工具和灵感中心，它可以给我们更多思考问题的角度，日常工作中我们应当多积累总结然后不断迸发新思考，通过AI这个新工具来解决我们业务的已有问题，向用户提供更好的体验。

以上是我们的一些小小心得，希望能为同为设计师的你，在面对AI应用与重构设计时提供一些设计思路和借鉴。

后续，我们将持续聚焦提升个人中心的AI智能感知能力，围绕用户的偏好习惯及当前上下文环境，提供更精准的个性化服务，为用户升级更加智能、自然流畅的AI对话体验，通过结合更多场景逐步打造出一个全方位、个性化的百度APP AI助手，让每位用户都能享受到智能化的便捷与乐趣。

作者：百度MEUX
链接：https://www.zcool.com.cn/article/ZMTYzMzE4MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

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

评论(0) 浏览(424)

052024-9

如何从产品角度发起交互设计？

ui设计分享达人

本文从产品角度出发，深入探讨了如何发起交互设计。通过明确产品目标与用户需求、进行用户研究、构建信息架构、设计流程与界面、进行原型测试以及持续优化等关键步骤，阐述了如何打造出满足用户期望、提升用户体验并实现产品目标的交互设计。

一、引言

在当今数字化的时代，产品的成功不仅仅取决于其功能的强大，更在于能否为用户提供流畅、愉悦且富有价值的交互体验。从产品角度发起交互设计，意味着将用户置于核心，以实现产品的商业目标和用户需求的完美融合。

二、明确产品目标与用户需求

（一）定义产品目标

产品目标是交互设计的起点，它决定了设计的方向和重点。产品经理需要与团队共同明确产品的定位、市场需求以及预期的商业成果。例如，是旨在提高用户活跃度，还是增加用户转化率，或者是提升品牌形象。

（二）挖掘用户需求

通过市场调研、用户反馈、竞品分析等手段，深入了解目标用户的行为习惯、痛点和期望。这不仅包括对用户显性需求的捕捉，还包括对潜在需求的挖掘。

三、进行用户研究

（一）用户画像创建

基于收集到的数据，构建详细的用户画像，包括用户的年龄、性别、职业、教育背景、使用场景等特征，以便更精准地理解用户的行为和需求。

（二）用户场景分析

模拟用户在不同场景下与产品的交互过程，发现可能存在的问题和优化点。

举例说明：

我们要知道，地铁周边美食，这是一个解决方案。真正的需求是什么？一个字一个字地找需求，地铁=快速方便出行，美食=和朋友一起吃饭/自己一人吃饭。这是一个和线下场景很相关的项目，我们要把不同目的核心用户的主要使用场景写出来。经过分析，我们得出了用户会选择我们产品，且产品未来可能存在的各种场景A、B、C、D、E。如下图所示：

如果按照目标人群所在场景分类，进行细分，则为下图：

乘地铁去地铁站和附近地铁站区别：前为用户会乘坐地铁去目的地寻找美食；后为用户不用地铁/吃完后使用地铁，地铁边美食没有其他美食团购产品有竞争力。

上班族和普通大众区别：上班族工作日使用固定地铁站上下班，时间可能紧急，快速获取食物；普通找美食吃的大众不使用固定地铁站，目的是通过地铁快速到达某目的地，就近享受目的地美食。

朋友们和个人区别：朋友们一起吃饭，容易出现喝多、吃过点等异常行为，并且在选择地铁旁吃饭地点时需要考虑朋友们家的位置就近选目的地。个人均不需要考虑以上，较为自由。

市场定位

经过领域场景的分析，我们知道了真场景都是用户有目的乘坐地铁去到某地铁站出站口寻找美食的。那么我们对这么一群大众进行用户人口统计学类的细分：

上图为前期定位的目标大众用户群，依靠地铁的工具属性，我们得出了具体的两个影响因素：时间+美食热爱程度。同时我们把直接竞品和间接竞品一同进行用户群比较。可以看到和大美团有相同和不同维度，这就是产品最初冷启动时期的差异化！也就是我们的前、中期场景的主要目标用户类型。
红色部分即种子用户群，以这些群体为冷启动阶段，可以更快的向四周扩张。因为他们有使用地铁的时间属性，同时有较高的美食热爱程度，有利于带动其他时间+热爱程度的用户加入产品，实现快速并有质量的拉新、活跃的目标。
低端直接竞品即用户群工具属性明显，只是搜地铁站，选择美食的用户，无明显其他行为；高端竞品即注重社交、ugc为起点，逼格高的搜寻美食工具。这部分开始很难，工作量巨大，且较脱离大众主流群体。

结合上图和要做的场景，我们得出了产品具体目标用户：乘坐地铁快速到达并寻找目的地美食的大众用户（上班族休息日，大学生，个人或一起），要求在地铁站附近便能方便享受目的地美食。且对美食有一定热爱程度。

（三）用户测试

邀请真实用户进行产品试用，观察他们的操作行为，收集反馈意见，为后续的设计提供依据。

1、需求接受

需求很有可能是在线上接到的，并不是面对面交流传递的，并且还会遇到很多坑，例如需求本身不具体，或者自己理解有偏差，因此在接到需求后，最好和交互、产品等同事进行面对面的交流和沟通。

详细了解测试目的和关键点，确定用户配比。

最好是让交互带着跑一下整个程序（半成品demo也好，交互稿也行），这样能在头脑中快速形成操作流程的认知，并把相应关键点对应上去。同时把大致的用户配比情况敲定一下，后续就可以直接招募用户了。

了解demo的完成进度，相应确定具体测试时间。

交互、视觉等完成demo的时间具有太多不确定因素，因此我们需要及时了解整个demo的完成进度，在尽可能快的情况下保险安排测试时间，如果邀请的是外部用户，结果用户到了而demo还没出来，那也是够了。

2、方案撰写和确定

让交互稿帮助自己

。在完成测试方案撰写的过程中demo还未诞生，具体程序细节记忆又很模糊，不好写测试方案，怎么办？不要慌，去看交互稿吧。

及时沟通

。在方案撰写过程中，如果有一些疑问，例如在看交互稿的时候还不是很理解某个具体操作过程，或者自己对产品有疑问的也可以跟交互等沟通，因为自己会遇到的问题，很有可能在测试用用户也会遇到，这样子用户如果问到了，就可以相应作出解释。

核实确定方案

。完成方案后，可以在公司沟通交流工具上和交互及产品等同事再确认一下，是否有什么地方遗漏或有不妥之处。

3、用户招募

这是一个大多数人都头疼的一个过程，希望看完了以下几点，可以稍微缓解一下大家的症状。

再次确定测试时间

。

方案定下来后，再跟交互确认测试时间，了解是否有变动和调整，尽量避免用户来了demo或者测试环境还不ok的情况。

撰写招募文案

。

需要把用户要求、测试日期和地点、报酬、大致的测试时长、用户需要在测试中做什么，以及报名方式等表达清楚。有以下几点可以注意一下，方便我们自己招募：

详细列出测试安排的时间段

。例如10:30-11:15、13:30-14:15，让用户自己挑选合适的时间段，这样就不用事后再协调不同用户测试时间了；

优先人力、信息管理、行政等岗位同事

。尽量避免相关产品人员、设计岗等同事。

制作简单的招募海报，并检查。

可以事先将“海报”用word或者ppt做好，然后保存成图片格式，记得检查核实一下是否有错。因为在公司IM群上直接黏贴确实方便，但是其排版往往不利于阅读，导致用户会遗漏重要信息。而制作成图片格式，可以更好地去避免这个问题，同时还可以显得整个招募过程比较正式，突出了对用户的尊重，也能在一定程度上体现我们用研工作的规范性。

多渠道投放招募海报

。

内部用户可以尝试先在公司IM群组上招募，之前招募样本量比较小，因此很快可以招到，其他途径暂时未尝试，公司论坛应该也可以，不过隐约感觉效率会比较低。外部用户可以在朋友圈试试，效果还不错，大家都很热情帮忙转发，群众的力量大无穷。也可以相应去搜索一些QQ群，加入并发布招募信息。另外还有一些社交论坛什么的，都可以尝试一下。方法很多，针对具体招募情况，大家就尽情发挥吧~

用户多了留到下次用

。

海报发出去后，有时也会出乎意料用户数量超过预期了，这是好事，不要担心，也不要急着拒绝，平和的跟对方说明情况，强调下次还会有测试，把用户相应信息了解一下做个记录，下次招募的时候可以直接先联系这几名用户。当然前提是你真的有下次测试需求，如果没有那还是老老实实说明情况。

确保自己和用户能彼此联系上

。

跟用户强调测试时间和地点，尤其是外部用户，如果招募和正式测试隔了几天，最好在测试前一天再通知一下。给出自己的联系电话，同时询问用户的联系电话。

第一个用户尽量安排公司内部同事

。

很多时候demo的完成情况会出现意外，到了测试时间demo还不能用，内部用户可以方便取消或者更换。另外，在第一次测试前谁都不确定用户会有什么反应，第一个测试是可以起到试水效果，而外部用户成本高，用来试水太奢侈。

4、测试准备

材料准备

。

需要准备的内容有：量表、报酬签收表、记录笔记本、录音笔、会议室借用，以及记录表格，如果是外部用户过来，相应准备一杯水，人家大老远过来也不容易。

测试内容准备

。

其实每次访谈用户自己都会挺紧张的，不知道用户是不是也很紧张（PS：好想当一回用户，体验一下被访的感觉）。为了消除这种紧张，同时也是为了更好的完成访谈，可以有尝试以下几点：

尽可能多的去了解所需测试的产品

。有时候demo出来的晚，下午要测试，demo中午才出来，自己都没玩过，测试还怎么搞？之前也说了，那就使劲去看交互稿吧，虽然比不上实际操作来的真实，但是也能有不小帮助，但也要给自己留足熟悉demo的时间。
按照模块来列提纲

。其实相当于组块策略，把同一个模块的问题放到一起更方便记忆，并且也在访谈中也方便自己和其他同事发现遗漏点。但模块不要太大，如果太大了就相应拆分一下。例如，在考拉新版测试的时候，有“首页”、“活动”、“购物车”等测试，但是光是首页内容也很多，作为一个模块还是太大了，可以拆分成“首页整体感知”、“商品详情”等几个方面来整理提纲。
根据任务演练提纲

。有了提纲后，按照任务大致过一下所有列出来的问题，这个过程会打乱按照模块列好的提纲，有一次这样的排练，在测试的时候更不容易漏掉题目，而且也相当于模拟了一下测试，自己心里会更踏实一点，在实际测试过程中也能有更好的应对。

教你一文读懂暗色模式

ui设计分享达人

引言

暗色模式（Dark Mode）的兴起是一个逐渐发展的过程，它涉及到

技术进步、用户体验优化以及设计趋势

的变化。

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

暗色模式在UI设计中的重要性体现在

改善视觉舒适度、节省电量以及提供个性化选择

上，其普及程度随着用户需求和技术发展不断提升。

本文将从暗色模式的

基本概念、优势、设计原则和应用

三个维度，帮助各位同行更好地学习、理解并完成暗夜模式的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.增强视觉聚焦

暗色模式为视觉设计提供了更大的对比度，使得

界面元素更为突出

。这种高对比度不仅有利于内容的战士，也增强了用户的视觉聚焦，

让用户更容易沉浸于应用或游戏的环境中

。特别是在观看视频或进行游戏时，暗色背景能够使色彩更为鲜明，提升用户的视觉体验。

手游王者荣耀UI界面

一、不同平台的设计原则

1.WCAG最低标准

(1).WCAG的定义

Web Content Accessibility Guideline，译为

网页内容无障碍指南

，其中包含分为可感知性、可操作性、可理解性、可兼容性和一致性五大类的相关建议，这些建议可使网站内容更容易访问。iOS人机界面准则以及Android平台的Dark Theme都是基于WCGA之上。

WCAG的检测网站：WCAG - Contrast Checker

(2).最小对比度（AA级）

对于普通的文本和文本图像，要求视觉呈现

至少具有4.5:1的对比度

。这意味着文本的颜色应该与背景颜色有足够的差异，以便用户能够轻松阅读。

(3).加强对比度（AAA级）

对于普通文本与背景的对比度，

要求不低于7:1

。这一级别的要求比AA级更高，提供了更强的视觉清晰度，特别有助于色觉缺陷或低视力用户的阅读。

不同层级的信息使用不同对比度

2.Android平台

(1).使用深灰色而不是黑色

深色主题背景通常采用深灰色而非纯黑色，这是因为纯黑色可能会导致对比度过高，而深灰色可以提供

更为舒适的视觉体验。

背景颜色为 #121212

(2).通过浅色表达深度

在深色主题中，为了构建清晰的视觉层次，通常会使用较浅的颜色来突出界面上的重要元素，如按钮和卡片。Dark Theme通过

浅色遮罩覆盖的形式凸显不同层级

，不同高度层对应不同透明度的规范如下。规范最高层是24dp，覆盖16%透明度的白色。

不同高度层对应的白色遮罩透明度

(3).颜色去饱和

在深色主题中，颜色的饱和度通常会降低，这样可以

减少视觉疲劳

，并提供一种更为舒适和专业的外观。

亮色/暗色模式中主色调的对比，降低了饱和度

(4).使用深色及有限色彩

为了保持设计的一致性和专注性，深色主题中应使用有限的色彩，并且这些色彩应当与深色背景协调。

品牌颜色可以在深色主题中以完全饱和度使用，但应用应限于一个或两个品牌元素，例如徽标或品牌按钮。通过谨慎使用品牌颜色，使元素在层次结构中保持突出。不饱和的颜色仍应在黑暗主题UI的其余部分中使用。

背景色也需要有品牌色的颜色倾向

3.iOS平台

(1).保持视觉风格的熟悉感

意味着即使在深色模式下，用户应能立即识别出应用程序的风格和布局，

确保用户体验的连贯性

。iOS 7之后苹果一直崇尚这种

毛玻璃般的透明材质

以映射UI界面与设备屏幕的关系，也可以使用户更好的感知上层元素与下层内容之间的关系，界面也不会过于枯燥乏味。

iOS 13提供了4个层级的材质，由厚重到轻薄，对应的暗色模式也保持了风格一致性

(2).平台一致性

设计时应遵循iOS的设计规范，确保在不同模式（浅色或深色）下都能

提供一致的用户体验

。这有助于用户在使用各种应用时能够获得统一的操作感受。iOS默认提供了9个彩色色板(TintColor)，为了保证深色模式下的对比度效果，

每个颜色都新增了深浅模式两种版本

。

iOS 13 UI Sketch组件库

(3).清晰明确的信息层级

在深色背景下，原先利用阴影区分界面层次的方法可能不再适用，因此需要通过不同灰度的背景色和阴影来强化层次感。正确的层级关系有助于突出重要内容，引导用户的注意力。

在“通讯录”与“信息”中选择联系人的界面因为信息层级不同，背景颜色不同左：#000000 右：#1C1C1E

(4).清晰明确的信息层级

深色模式应

聚焦于内容展示

，使主要内容突显，而

非核心的界面元素则相对隐退

，这有助于集中用户的注意力于重要信息上。在浅色主题中，我们经常使用大块的明亮颜色，这样最重要的元素可能会更加显眼。但在暗色模式中，这样就不行了，大块的亮颜色会让我们容易忽视更重要的元素。

在Dark Mode中不能采用大面积的彩色

二、优秀案例解读

1.国内案例

(1).Ant Design

Ant Design 在其4.0版本中对暗黑模式进行了探索，提供了一套

适用于企业级应用的暗色主题设计

，旨在帮助设计师和开发者快速实现暗色模式的用户界面。

(2).微信

微信作为国内领先的社交应用，其暗色模式设计不仅减少了屏幕的亮度，还对图标和文字颜色进行了优化，以确保在不同光线条件下的可读性和舒适性。

文字信息的对比度仅大于7:1。更多的是考虑微信的聊天场景

中，用户可能长时间沉浸式使用。这里微信将深色模式与夜间模式进行了兼容，

避免大的对比造成强烈的视觉刺激

，可以在深夜环境下获得更好的感知度。

微信文字信息对比度

(3).百度地图

百度地图的暗色模式主要是为了适应

在夜间使用导航时，减少屏幕亮度对驾驶员视觉的影响

，

避免产生视觉疲劳或短暂的视觉致盲现象

。开启这一模式后，百度地图的界面颜色会变为深色背景，以降低整体亮度，从而提供更舒适的视觉体验。

比亚迪上搭载的百度地图界面

(4).淘宝

电商类应用上，大量的商品图片和视频都是以浅色背景为主。如果只是把背景变为深色就会十分刺眼，但是如果挨个调整商品图片，则工作量十分巨大。淘宝

通过“语义化颜色”（Semantic Colors）进行适配

。所谓语义化颜色，就是

不再通过某一色值来描述颜色，而是通过用途来描述

，让界面元素可以自动适配当前的外观。

淘宝的深色模式

(5).抖音

界面采用暗色模式是由于暗色背景在低光环境下对眼睛的刺激更小，用户在夜间使用应用时会觉得更加舒适。同时，采用暗色模式可以减少界面干扰，用更简单的交互方式

提高用户沉浸式观看体验

。这

促使用户在晚上更多地使用抖音

，从而延长用户在应用上停留的时间。

抖音的双色模式，默认为暗色模式

2.国外案例

(1).Google

Material Design的设计规范中新增了暗色主题，它使用大面积的深色来构成界面，

作为产品默认主题的补充

。这种设计不仅能改善视觉人体工程学，还能在某些情况下节省电池电量，特别是对于配备OLED屏幕的设备来说。

Google Material Design设计规范

(2).X/Twitter

目前提供了两种深色模式

：分别是“昏暗（Dim）”和“熄灯（Light out）”，前者背景色为深灰色，后者基本是纯黑色。马斯克在X发文宣布，该平台很快将只有“暗黑”模式，它在各个方面都更好，改动后暗黑模式将成为默认且唯一可用的主题。

Dim与Light out的区别

(3).Youtube

之前在IOS系统上的大量耗电一直被用户诟病，在推出深色模式后，相较于亮色模式

能节约60%的电量

。同时，浅色的留白容易引起视觉疲劳，与内容本身抢夺视觉重点，在深色模式下，

视频内容本身会被突出得更彻底

。

Youtube的全新暗色模式

(2).E-Trade

在 2018 年的时候，一家客户关系管理(CRM) 软件服务提供商 SalesForce 的设计师想知道开发仪表板功能时采用哪种模式会最好。于是他们采访了许多用户，事实证明，

用户对黑暗主题下的图表反应会更快并且更精准。

这一点在股票交易软件上也得到了验证，目前来看

全世界绝大多数的股票软件采用的都是负极性，也就是暗色底的设计方式

。红色和绿色代表的涨或跌（不同国家颜色表示可能不一样）在这样的深色背景下就会特别显眼。还有一些颜色比如蓝色用于某些数据的走势图。

证券/股票交易类应用通常采用暗色界面

三、设计工具与资源

1.Sketch插件

(1).Sketch Midnight

Sketch Midnight Mac正式版是款针对Sketch打造的主题插件。Sketch Midnight Mac最新版为你的Sketch增加

精美的替换主题，自定义选择颜色，自定义画布黑暗等

。并且Sketch Midnight Mac中用户还可以设置画布的明度(纯黑或灰色调画布)以得到最佳主题展示效果。

(2).Sketch Dark Mode Plugin

这是一个

专门用于生成深色模式版本的文档

的插件。它可以加快设计工作流程，并帮助你立即创建出精美的深色模式设计，而且操作简便，没有繁琐的界面。

(3).Sketch Toolbox

虽然这个工具主要是用来管理和组织Sketch插件的，但它也

提供了一些与暗色模式相关的插件

，可以帮助设计师更好地管理和维护他们的设计项目。

(4).Frontify

虽然Frontify主要是一个品牌管理工具，但它也提供了一些功能，如基于Web的样式规范和UI设计模式库，这些功能可以

帮助设计师在创建暗色模式设计时保持一致性和标准化

。

2.在线工具

(1).Adobe Color

Adobe Color是一个在线工具，它可以

帮助设计师创建和测试色彩方案

，包括暗色模式的配色。您可以使用它来生成、预览和分享配色方案。

(2).Coolors

Coolors是另一个在线配色方案生成器，它提供了

快速生成和调整配色方案

的功能，非常适合用于暗色模式的设计。

(3).Material Design Color Tool

由Google提供的Material Design Color Tool可以帮助设计师根据Material Design指南

创建色彩方案，包括暗色主题的配色

。

总结

随着用户对界面设计要求的提高，暗色模式以其减少视觉疲劳和增强内容可读性的优势，在UI设计中越来越受欢迎。它不仅为用户带来了全新的视觉体验，也为设计师提供了创新的空间。

未来，暗色模式有望成为更多应用和系统的标准配置，设计师们将更加重视其创新和优化，以提供更优质的用户体验。我们应紧跟这一趋势，探索新的色彩搭配和布局，满足用户的需求和偏好。

总之，暗色模式在UI设计中的应用和优势已经得到了广泛的认可。作为设计师，我们应该把握这一趋势，不断提升自己的设计能力，为用户创造更加美好的数字生活。

作者：阿琳01
链接：https://www.zcool.com.cn/article/ZMTYxMzg5Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(1028)

052024-6

八角行为分析 — 打动用户的产品密码

ui设计分享达人

前言

在当今竞争激烈的市场环境中，打造真正吸引用户的产品和服务已成为品牌脱颖而出的关键。我们需要不断地探索和挖掘用户的需求和期望，以便更好地设计出引人入胜的产品和服务。在这个过程中，用户动机是用户做出某种行为和决策的核心原因，了解用户动机心理成为产品设计中至关重要的一环。

每一次玩法设计的过程中，我们都会为产品赋予诸多亮点。但只有和用户需求交叉的部分才能真正驱动他们去体验并传播，我们可以用八角行为分析（Octalysis）来理解打动用户的产品密码。

评论(0) 浏览(744)

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

日历

链接

个人资料

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

首页

一、理解美观与实用的内涵

（一）美观的界面设计

（二）实用的界面设计

二、平衡美观与实用的难点

三、实现美观与实用兼顾的方法

（一）合理的布局设计

（二）色彩的巧妙运用

（三）元素的简洁与统一

（四）用户反馈与迭代优化

四、案例分析

分类

日历

链接

个人资料

存档