数据可视化是将数据转化为可视化的图形或图表，以便用户更好地理解和分析数据。良好的数据可视化设计可以帮助用户更好地理解数据，发现数据中的模式和趋势，支持更好的决策和行动。本文将介绍数据可视化设计的基本原则和实践指南，帮助您设计出高效、易用、美观的数据可视化。

一、基本原则

明确目标

在设计数据可视化之前，我们需要明确目标。数据可视化的目标可能是展示数据的总体趋势、发现数据的异常或趋势、比较不同数据集之间的差异或其他目标。明确目标可以帮助我们选择合适的数据可视化类型和设计元素，以及确定数据的范围和精度。

简洁明了

数据可视化应该简洁明了，避免过多的图形和信息。过多的图形和信息可能会混淆用户的视线，使用户难以理解数据。在设计数据可视化时，我们需要选择合适的图形类型和颜色，避免过多的标签和注释，以及避免过度设计。

重点突出

在数据可视化中，我们需要突出重点，以便用户更好地理解数据。重点可以是数据中的异常、趋势或关键信息。我们可以通过颜色、大小、形状、位置等方式突出重点，以便用户更好地理解数据。

一致性

数据可视化的设计应该具有一致性，以便用户更好地理解数据。一致性可以体现在图形类型、颜色、字体、标签等方面。一致性可以使用户更容易理解数据，减少学习成本和认知负担。

交互性

数据可视化应该具有交互性，以便用户更好地探索和分析数据。交互性可以包括放大、缩小、筛选、排序、联动等功能。交互性可以使用户更好地理解数据，发现数据中的模式和趋势。

二、实践指南

选择合适的图形类型

在设计数据可视化时，我们需要选择合适的图形类型。常见的图形类型包括柱状图、折线图、散点图、饼图、雷达图、地图等。不同的图形类型适用于不同的数据类型和目标。例如，柱状图适用于比较数据的大小和趋势，折线图适用于展示数据的趋势和变化，饼图适用于展示数据的占比和比例。

选择合适的颜色

在设计数据可视化时，我们需要选择合适的颜色。颜色可以用于突出重点、区分不同的数据集、表示不同的情绪和情感等。不同的颜色适用于不同的数据类型和目标。例如，红色可以表示警告和异常，绿色可以表示正常和良好，蓝色可以表示冷静和科技。

选择合适的字体

在设计数据可视化时，我们需要选择合适的字体。字体可以用于标签、注释、标题等。不同的字体适用于不同的数据类型和目标。例如，Sans-serif字体适用于数字和数据，Serif字体适用于正式和传统场合，Handwriting字体适用于创意和艺术场合。

选择合适的标签和注释

在设计数据可视化时，我们需要选择合适的标签和注释。标签和注释可以用于解释数据、突出重点、标识数据集等。不同的标签和注释适用于不同的数据类型和目标。例如，数据标签可以用于展示数据的具体值，趋势标签可以用于展示数据的趋势和变化，注释可以用于解释数据的含义和背景。

选择合适的布局和比例

在设计数据可视化时，我们需要选择合适的布局和比例。布局可以用于排列图形和标签，比例可以用于展示数据的大小和比例。不同的布局和比例适用于不同的数据类型和目标。例如，对称布局可以用于展示对称的数据，不对称布局可以用于展示不对称的数据，分段比例可以用于展示数据的分布和比例。

选择合适的交互方式

在设计数据可视化时，我们需要选择合适的交互方式。交互方式可以包括放大、缩小、筛选、排序、联动等功能。不同的交互方式适用于不同的数据类型和目标。例如，放大和缩小可以用于展示数据的细节和总体趋势，筛选和排序可以用于展示数据的不同维度和排序方式，联动可以用于展示数据的关联和相互影响。

结语

数据可视化设计是数据分析和决策的重要工具。良好的数据可视化设计可以帮助用户更好地理解数据，发现数据中的模式和趋势，支持更好的决策和行动。在设计数据可视化时，我们需要遵循基本原则，选择合适的图形类型、颜色、字体、标签和注释、布局和比例，以及交互方式。通过良好的数据可视化设计，我们可以更好地理解和分析数据，支持更好的决策和行动。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

广告品质是指广告在投放过程中的质量和效果。提升广告品质可以提高广告的点击率、转化率和ROI，从而获得更好的广告效果。本文将介绍如何快速提升广告品质。

一、优化广告创意

选择合适的广告类型

不同类型的广告适用于不同的目标和受众。例如，搜索广告适用于有明确需求的用户，展示广告适用于品牌推广和影响用户意识。在选择广告类型时，我们需要根据目标和受众选择合适的广告类型。

制作优秀的广告素材

广告素材是广告创意的核心。优秀的广告素材应该具有吸引力、清晰度和可读性。我们可以通过使用高清晰度的图片和视频、选择合适的颜色和字体、突出重点和特色等方式制作优秀的广告素材。

优化广告文案

广告文案是广告创意的重要组成部分。优秀的广告文案应该具有简洁明了、突出重点和吸引人的特点。我们可以通过使用简洁的语言、突出产品或服务的特点、强调用户的需求等方式优化广告文案。

测试不同的广告创意

在投放广告之前，我们可以测试不同的广告创意，以确定哪种创意最能吸引用户的注意力和提高广告品质。测试可以包括A/B测试、多元测试等方式。

二、优化广告投放

选择合适的广告平台

不同的广告平台适用于不同的目标和受众。例如，搜索引擎广告适用于有明确需求的用户，社交媒体广告适用于影响用户意识和推广品牌。在选择广告平台时，我们需要根据目标和受众选择合适的广告平台。

选择合适的广告位置

广告位置是影响广告品质的重要因素之一。不同的广告位置适用于不同的广告类型和目标。例如，搜索引擎广告的顶部位置可以吸引用户的注意力，社交媒体广告的新闻流位置可以影响用户的意识。在选择广告位置时，我们需要根据广告类型和目标选择合适的广告位置。

优化广告投放时间

广告投放时间是影响广告品质的重要因素之一。不同的广告投放时间适用于不同的目标和受众。例如，搜索引擎广告的投放时间可以根据用户的搜索习惯和需求进行优化，社交媒体广告的投放时间可以根据用户的活跃时间和兴趣进行优化。在优化广告投放时间时，我们需要根据目标和受众选择合适的广告投放时间。

优化广告投放地域

广告投放地域是影响广告品质的重要因素之一。不同的广告投放地域适用于不同的目标和受众。例如，搜索引擎广告的投放地域可以根据用户的地理位置和

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

用户体验（User Experience，简称UX）是指用户在使用产品或服务时的感受、情感、态度和行为。良好的用户体验可以提高用户的满意度和忠诚度，增加产品或服务的使用率和市场份额。因此，打造良好的用户体验对于企业的发展至关重要。本文将介绍如何打造良好的用户体验。

一、了解用户需求

用户需求是打造良好的用户体验的基础。了解用户需求需要进行用户调研，包括定性和定量研究。定性研究可以通过深度访谈、焦点小组等方式获取用户的感受和态度；定量研究可以通过问卷调查、统计分析等方式获取用户的行为和偏好。通过用户调研可以了解用户的需求、痛点和期望，为产品或服务的设计提供依据。

二、设计易用的界面

界面设计是用户体验的重要组成部分。界面设计需要考虑用户的认知和行为习惯，采用符合用户习惯的设计语言和交互方式。界面设计需要简洁、清晰、易用，避免过多的信息和复杂的操作流程。同时，界面设计需要考虑不同设备和屏幕尺寸的兼容性，保证在不同设备上都能提供一致的用户体验。

三、提供个性化服务

个性化服务可以提高用户的满意度和忠诚度。个性化服务包括基于用户历史行为和偏好的推荐服务、个性化设置和定制化服务等。通过个性化服务可以提高用户的参与度和粘性，增加用户对产品或服务的依赖度。

四、优化产品或服务的性能

产品或服务的性能是用户体验的重要因素之一。优化产品或服务的性能可以提高用户的满意度和使用体验。优化产品或服务的性能包括提高响应速度、优化界面流畅度、减少错误提示和优化系统稳定性等。通过优化产品或服务的性能可以提高用户的使用效率和满意度。

五、提供多渠道的服务支持

提供多渠道的服务支持可以提高用户的满意度和忠诚度。多渠道的服务支持包括在线客服、电话客服、邮件支持和社交媒体支持等。通过提供多渠道的服务支持可以提高用户的满意度和解决用户的问题，增加用户对产品或服务的信任度和依赖度。

六、持续优化用户体验

持续优化用户体验是打造良好用户体验的关键。持续优化用户体验需要进行数据分析和用户反馈收集，了解用户的需求和反馈，及时调整产品或服务的设计和优化方案。持续优化用户体验需要建立完善的用户反馈机制和数据分析体系，保证持续的用户体验优化。

七、结语

打造良好的用户体验需要从用户需求出发，通过界面设计、个性化服务、性能优化和服务支持等多个方面提高用户的满意度和忠诚度。持续优化用户体验需要建立完善的用户反馈机制和数据分析体系，保证持续的用户体验优化。通过打造良好的用户体验可以提高产品或服务的使用率和市场份额，为企业的发展提供有力支撑。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

随着移动互联网和物联网的发展，越来越多的产品和服务需要在不同的终端上提供相似的用户体验。端通用界面设计是指在不同的终端上提供相似的用户界面和交互方式，以提高用户的满意度和体验。本文将介绍端通用界面设计的法则和原则。

一、一致性

一致性是指在不同的终端上提供相似的用户界面和交互方式。一致性可以通过统一的设计原则、颜色和字体、标签和注释等方式实现。一致性可以提高用户的熟悉度和信任度，降低用户的混乱和不安全感。

二、简洁性

简洁性是指在不同的终端上提供简单、直观和明了的用户界面和交互方式。简洁性可以通过简单的界面设计、明确的操作流程和提示、简化的功能和选项等方式实现。简洁性可以提高用户的易用性和可理解性，降低用户的学习成本和错误率。

三、可扩展性

可扩展性是指在不同的终端上提供灵活、可定制和可扩展的用户界面和交互方式。可扩展性可以通过丰富的功能和选项、多样的交互和反馈、灵活的定制和个性化等方式实现。可扩展性可以提高用户的兴趣和参与度，增加用户的体验和满意度。

四、可访问性

可访问性是指在不同的终端上提供易于访问和使用的用户界面和交互方式。可访问性可以通过明确的反馈和提示、合理的反应时间和结果、准确的搜索和定位等方式实现。可访问性可以提高用户的信任度和满意度，降低用户的焦虑和不确定性。

五、可维护性

可维护性是指在不同的终端上提供易于维护和更新的用户界面和交互方式。可维护性可以通过清晰的信息架构、明确的标签和注释、直观的图形和图表等方式实现。可维护性可以提高产品的可靠性和稳定性，降低维护和更新的成本和风险。

六、可扩展性

可扩展性是指在不同的终端上提供灵活、可定制和可扩展的用户界面和交互方式。可扩展性可以通过丰富的功能和选项、多样的交互和反馈、灵活的定制和个性化等方式实现。可扩展性可以提高用户的兴趣和参与度，增加用户的体验和满意度。

七、可重复性

可重复性是指在不同的终端上提供可重复和可预测的用户界面和交互方式。可重复性可以通过明确的操作流程和提示、合理的反应时间和结果、准确的搜索和定位等方式实现。可重复性可以提高用户的信任度和满意度，降低用户的焦虑和不确定性。

八、可访问性

可访问性是指在不同的终端上提供易于访问和使用的用户界面和交互方式。可访问性可以通过明确的反馈和提示、合理的反应时间和结果、准确的搜索和定位等方式实现。可访问性可以提高用户的信任度和满意度，降低用户的焦虑和不确定性。

九、可定制性

可定制性是指在不同的终端上提供灵活、可定制和可扩展的用户界面和交互方式。可定制性可以通过丰富的功能和选项、多样的交互和反馈、灵活的定制和个性化等方式实现。可定制性可以提高用户的兴趣和参与度，增加用户的体验和满意度。

十、结论

界面设计法则是提高用户满意度和体验的关键。一致性、简洁性、可扩展性、可访问性、可维护性、可扩展性、可重复性、可访问性和可定制性是端通用界面设计的重要原则和要素。在设计端通用界面时，需要平衡不同原则和要素，以满足不同用户的需求和偏好。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、品牌色强化视觉感和曝光度
品牌色被运用到界面背景中较为频繁，这也是提高品牌曝光度的有效形式，无论是初创产品还是成熟产品都会选择。

通常出现在界面顶部区域较多，可以是单色、微渐变、流体渐变和极光风等，也可以结合一些图形来增强空间感。在整体界面背景过度层面可以直接分割，也可以利用不透明度渐变自然过渡。

二、极光风配色打破单调画面
极光风算是近些年最流行的设计趋势之一了，相较于白底来说更能打破界面的单调感。被广泛运用到界面背景中，在顶部区域最为常见。

由于高明度低饱和度的配色原理，使得视觉效果丰富多彩，但又不会显得喧宾夺主。在强化界面视觉感的同时，也能很好地提高内容的层次感。

三、动态流体渐变让界面更灵动
流体渐变相较于普通渐变形式而言，灵动性和丰富度都会更高，呈现出来的效果也非常自然舒适。

结合动态形成的流体渐变效果更灵动，被运用到界面设计中也能提高关注度，也有产品会在按钮设计中表达，视觉感都非常不错。

四、插画运用增强界面风格感
随着设计师手绘插画的能力不断普及，在产品设计中也会经常运用插画来强化界面效果。由于插画风格很多，也会使得界面设计更具风格化。

插画本身的风格会影响产品的调性，在一些节庆主题、商业活动、风格差异化表达等方面结合插画表达都比较适合。这也是插画能力成为设计师技能标配的因素之一，不仅可以提高设计风格感，也能让作品更有视觉亮点。

五、精美照片打造场景感
随着用户对感官体验需求的升级，产品中配图质量要求也越来越高，精美的照片可以让画面质量更高。

在一些定制化的界面场景中，也会经常使用不同照片来打造场景感，比如旅游产品中就会利用照片增强代入感。真实的场景更能被用户接受，提高用户的参与度和积极性，照片带来的视觉感也是非常强烈的。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

六、3D 效果空间感更强
随着 3D 运用逐步趋势化，在产品中也经常会出现 3D 元素的运用，以此来强化视觉感和空间感。3D 的表现除了在图标设计上的运用之外，作为背景层视觉强化也十分常见，经常会作为配图出现在顶部区域的表达中。

如果建模上手比较难，也会有设计师以伪 3D 效果进行设计，视觉效果也非常到位。

七、IP 运用提高界面情感化
情感化设计可以拉近产品与用户之间的距离，体现出产品的温度，让用户感受到亲和力。IP 设计作为品牌的延续，不仅可以辅助品牌的传播，也是提升情感化设计的有效形式。

IP 已被广泛运用到界面设计中，在顶部区域、默认头像、空状态、视觉配图、图标设计等方面都可以进行设计融入。IP 设计可以有助于提高界面情感化，这个技能也逐步成为了设计师的技能标配。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

八、Banner 图提高商业氛围感
Banner 图的存在是为了提高商品或者服务在产品中的商业转化，特别是在具有电商属性的产品中。不仅可以给商业活动带来灵活的导流入口，也能强化界面的商业氛围感。

Banner 图在产品中的表现形式十分多样，除了在视觉表现层面发挥以外，造型和展示形式也有众多设计发挥的方向。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

九、形状图形增加背景层次感
当界面背景比较单调的时候，我们通常都会添加图形进行强化，除了图片以外，形状图形的运用设计感也是非常不错的。

通过形状图形的设计强化，可以增加界面背景的层次感，也能通过强视觉提高用户的关注度。图形的选择十分多样化，几何图形或者局部图形的选择性都非常多，可以作为独立画面，也可以作为背景衬托而存在。

大厂设计如何提高界面视觉亮点？我总结了10个方面！

十、功能属性点缀画面视觉感
除了以上提到的增强视觉亮点的方法以外，设计师也会探索更多表现形式，结合功能属性、业务特点、品牌文化等等，发散的方向变得越来越多。

比如地图软件会以地图图形作为表现的形式，在主界面的顶部区域和个人中心的设计中，以地图作为背景来点缀画面视觉感。从产品的功能或者业务等层面入手，也是强化界面视觉亮点的有效形式。

作者：黑马青年
来源：优设

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

底部弹出框控件，在移动端设备上呈现出来的时候，对于设计师而言，是一个不小的挑战。在小屏幕上设计这类控件，需要做合理的取舍。

底部弹出框是一种部分覆盖式的控件，特别适合移动端设备，它适合呈现临时但是重要的信息。

定义：底部弹出控件，或者说底部弹出框/表单，是固定在屏幕底部边缘的控件，它提供贴合上下文环境的详细信息，或者叠加于页面之上的交互。

底部弹出框是一种渐进式的信息呈现方式，它们通常由用户交互触发，提供额外的详细信息，它们通常会遮盖掉部分屏幕内容，因此不适合显示始终都很重要的信息。

另一方面，它适合用来呈现额外的信息，对上下文环境进行控制，或者兼顾两者。底部弹出框的优点在于，它无需跳转到新的单独页面，让用户停留在当前环境下进行交互，用户不会失去交互和获取信息的语境。

底部弹出框和其他的弹出框控件类似，然而和其他的弹出框相比，他保留了更强的信息可见性，因此用户在和底部弹出框呈现的信息进行交互的时候，可能需要参考背景里的基础信息，而两者的呼应也更加贴合用户当下的需求。

使用底部弹出框的一个常见的理由是，它们提高了移动端设备上用户的交互可触达性（也就是大家常说的，用户更容易点击到屏幕底部的内容和控件）。不幸的是，在实际的测试当中，由于用户握持移动端设备的方式不同（单手、双手以及握持位置上下差异），屏幕底部目前也不一定是最容易触达的区域（屏幕中间一般才是用户最容易点击到的位置）。

模态和非模态底部弹出框
位于底部的弹出框可以是模态的，也可以是非模态的。

和经典的模态控件设计类似，底部弹出框可以迫使用户在采取其他交互之前，强制和底部弹出框交互，点击其中的控件或者关闭它。即使背景的内容可见，弹出框依然会阻止用户与之进行交互。通常，在底部弹出框出现的时候，通常背景内容会被半透明的叠加层盖住，作为背景内容「不可交互」的视觉标识。

高手总结！UI 界面底部弹出框设计指南

网络管理工具 UniFi 的弹出框设计，当用户的手机未能正确连接到网络上的时候，会弹出一个底部表单，背景内容通常显示的是一些可供识别的基本界面细节，以及页面骨架布局。用户需要解决网络问题，才能接入网络显示背景的内容，因此这一交互是合理的。

非模态的底部弹出框则不同，它们位于页面的底部，用户可以和背景内容进行交互，也能和弹出内容交互。这个时候的底部弹出框控件适合呈现此时背景内容相关的详细信息。

高手总结！UI 界面底部弹出框设计指南

在 Google 地图的 APP 当中，非模态的底部弹出框会显示和当前选中地理区域相关的导航操作、图片信息，同时，用户可以和背景中的地图进行交互，详细了解大致的环境信息。

有一些底部弹出框是可以展开的。用户可以通过点击或者上滑弹出框，将其扩展为全屏模式（有时候是接近全屏）。通常，底部弹出框在最小化模式下，开始为非模态，展开后变为模态。

高手总结！UI 界面底部弹出框设计指南

Apple 播客：底部弹出框可以显示当前播放内容的相关信息（左），可以点击或者拖动它至完整全屏尺寸，而点击或者向下滑动顶部的把手控件，则可以将其缩小折叠起来。

底部弹出框的可用性指南
在我们的研究当中，我们观察到用户在使用底部弹出框的时候，遭遇的困难和使用别的弹出框的时候是类似的，这些通常是由以下原因造成的：

缺少明确的关闭底部弹出框的指引
多个底部弹出框界面叠加在一起
底层相关的背景内容被模糊了
下面我们针对性地来解决一下这些问题。

允许使用「返回」按钮来关闭底部弹出框
底部弹出框所存在的一个常见问题，就是它看起来像是一个普通的界面控件，尤其当他们扩展为全屏的时候，一部分用户可能还没意识到他们所处的界面，其实是扩展后的底部弹出框控件，而它通常是不遵循通常的交互逻辑的。用户这个时候可能希望使用「后退」手势或者按钮来进行交互，但是用户这个时候点击可能是不会得到预期中的反馈。

因此，在用户历程当中，当页面当中出现底部弹出框控件的时候，整个流程的交互模式可能会因此被破坏。但是，如果让底部弹出框控件支持「后退」的按钮和手势，则可以规避这一问题，让用户无缝回到上一界面。

在控件中包含「关闭」按钮
尽管绝大多数的底部弹出框可以通过向下滑动，或者点击顶部手柄来关闭，但是这个组件本身就很容易被忽略。此外，还有一部分用户压根就不知道这个功能。而且，垂直滑动关闭本身就具备某种模糊性，在交互过程中，用户可能会关闭面板，也可能不小心打开通知栏，或者打开手机的控制中心等。

Pocket 的底部弹出框控件非常高，需要向下滑动才能关闭，而因为控件的手柄位置在操作的时候很容易打开手机的通知栏或控制中心。即使用户从正确的位置触发关闭控件的手柄，也可能需要多次尝试才能真正关闭这一面板。这种灵活性挑战对于操作精度要求过高，对于多数用户而言都是挑战。

为了确保用户可以快速关闭底部弹出框控件，最好在控件内添加常见的「关闭」按钮，或者「X」按钮。我们建议将这个按钮放置在在底部弹出框的右上方之类的位置，使用这一按钮的另外一个好处是方便有视力障碍的用户，使用屏幕阅读器来关闭它。

高手总结！UI 界面底部弹出框设计指南

苹果的备忘录当中的底部弹出框控件，就使用了「X」按钮来方便用户关闭它。

不要将多个底部弹出框堆叠起来
当 APP 内将多个弹出框堆叠起来的时候，最大的麻烦就出现了。

当多个底部弹出框堆叠在一起的时候，用户不可避免会开始迷惑自己到底处于流程的哪个位置，并且可能还需要了解到底哪个是第一个弹出框，而哪个是最后一个。就像下面的案例。

我们强烈建议不要使用底部弹出框控件来替代用户流程中应有的页面。底部弹出框是一个临时的 UI 控件，它并不是稳定的位置，它的存在旨在打断用户流程，告知用户重要的信息和重要的操作，它本身并不是带来愉悦感的「快乐路径」。

高手总结！UI 界面底部弹出框设计指南

沃尔玛的 APP 当中，产品详情页是用底部弹出框控件来承载的，而非单独的页面，而其中任何一个链接都会触发另外一个底部弹出框，比如用户评价。而用户想要关闭退出则需要一层一层关闭。而顶上的返回和关闭按钮两者也同样可能会让人迷惑，有时候是后退，有时候是直接关闭弹出框，交互过程中可能会超出用户原有的预期。

使用底部弹出框承载简短交互
最后，当用户可能会花费大量的时间查看底部弹出框所承载的信息时，我们建议不要使用底部弹出框来承载这类信息。它本质上是一个瞬间状态下的 UI 控件，快速交互是它存在的意义，而非承载复杂的内容。

高手总结！UI 界面底部弹出框设计指南

这个名为 Soundbrenner 的 APP 会在页面「1」 的 Learn 中打开「2」中的音乐教学列表，选择特定课程时，会以底部弹出框的方式打开详细课程信息，随后，向下滚动「3」的时候，会意外将用户带回主页「4」。这个 APP 的问题和之前沃尔玛的情况类似，存在多个底部弹出框交叠的问题。

总结
底部弹出框控件在 UI 设计当中其实比较常见，它需要在保持上下文环境的情况下，提供额外的关键交互和信息说明，但是它不应该承载复杂的交互和过多的内容。

作者：陈子木
来源：优设

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

一、什么是弹窗？
弹窗是在保留当前页面状态的情况下，告知用户并承载相关操作。

思考：弹窗里面哪些构成原件可以根据业务属性可以有可以没有呢？
答案：标题区和操作区。

二、弹窗的规范如何定义？

1、定义弹窗的大小规范
弹窗的的大小有两种定义方式。一种是固定大小，一种是自定义大小。需要根据自己的业务场景二选一。

弹窗宽度一般定义为三种。分别为560px，720px，960px，都是8的倍数方便记忆。尺寸并不是定死的，可以根据自身业务场景调节。

弹框固定高度会有一个最小高度200px，一个最大高度560px。在其之间的高度是由内容区的内容决定，超过最大高度560px时出滚动条。

弹窗自定义高度，只定义最大高度，随着页面拉升缩小，弹窗边距不变。

2、定义弹窗内容规范
定义：标题栏操作栏高度，内容区边距。

3、弹窗类型
弹框类型是根据使用场景区分提示弹窗，自定义弹窗两种

弹窗优点：没有跳出父级页面，弹窗任务完成后仍然会留在父页面进行操作，减少用户操作中步骤体感
弹窗缺点：信息承载量少，信息内容过多的时候会出现上下左右滚动条，弹窗会降低用户操作效率

三、弹窗使用规则是什么？

1、不超过两种操作选项
假如承载的操作项比较多，建议新跳转一个落地页。

2、多步骤操作，选择用页面承载

3、尽量避免弹窗叠弹窗
第一个弹窗的内容考虑用页面承载或者第二个弹窗是否可以用气泡或者下拉来承载。
假设一定要叠，二级弹窗的复杂度要低于一级弹窗，满足形式上的平衡，遵循从大到小的逻辑或者是覆盖上级，完成任务后点“返回”返回。

四、什么是抽屉？和弹窗相比优缺点是什么？
抽屉是信息承载量和页面比肩，又兼具弹窗的优点。

作者：鲲sky
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

一、什么是表单页

1.1表单页满足的核心场景
1、采集/录入数据信息。2、编辑数据信息。3、特殊的条件设置。后台产品的本质是针对数据的增、删、改、查。而增、改、查都可以用表单完成。

1.2常见的应用场景
OA系统里面的请假申请，报销申请，录入员工，新建会议。教育类的创建课程。HRM系统里面发布职位以及物联网管理系统新建设备等等。

二、表单页设计原则

2.1明确
用户快速定位重要信息和目标选项同时文案和组件能够准确传达相应含义

2.2高效
整体表单排布有合理的交互形式；科学的信息布局和组织形式；尽可能“少操作一步”用户在面对50和表单和500个表单的心理压力是不一样的。

2.3安全
操作前：提示和防错。
操作中：实时反馈与纠错
操作后：合理的保存、清空、取消、撤销机制。

三、表单的构成
表单通常由表单标签、表单域、提示提示、操作按钮四部分构成。

3.1表单标签

左标签
优点：表意明确，节约纵向空间，多用于web端
缺点：不太适用于移动端等狭长空间

顶标签
优点：对齐舒适，节约横向空间，多用于移动端及英文场景下。
缺点：纵向空间利用率不高

行内标签
优点：最节省空间，多用于注册登录
缺点：输入状态标签消失，用户陷入迷茫

左对齐标签
视线从标签移动到表单域时间为500ms，这比右对齐标签所用的时间长的多，所以更适合阅读，用于详情的陈列。
特点：阅读效率高，操作效率较低；

右对齐标签
视觉动线参差不齐，不适合高效阅读，但适合高效操作，更适合表单填写。
特点：阅读效率不高，标签指向明确，操作效率高

3.2表单域

如何定义输入框/选择框大小？
步骤一：根据业务已经有的字段长度定义4-5种宽度规范，建议宽度可以是8或者是40的倍数。

步骤二：根据你要搭建的表单，选用合适的规范，长度与输入预期成正比。有人会说排出来的表单左边没对齐，右边也没对齐，其实这就是B端产品特征那就是是好用大于好看，就要给用户一种心智那就是给你的这个长度那就是要输入一个这么长的内容。

3.3提示信息

避免“正确的废话”：给不到用户任何的帮助还增加了用户的阅读成本。

提示信息用哪种展示方式？

3.4操作按钮
按钮常见位置：一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。
按钮阅读顺序：按钮出现页面右上角或右下角时，阅读顺序是从右往左，这符合pc端操作习惯以及人阅读习惯。按钮跟随表单内容或在表单内容底部时，阅读顺序为从左往右，这符合人的填写顺序从上往下，从左往右。

底部按钮右对齐：一般用在弹框，因为弹框页面比较小，右对齐比较符合操作习惯。
底部按钮居中：一般用在页面中，因为右下角操作距离会有点远，所以表单用页面承载的话按钮建议居中。

3.5字体和间距规范
表单中字体全部统一采用14px。表单上下间距一般有三种，1.内容与内容间距为24px。2.内容与说明文案间距为4px。3.内容与子内容间距以及及子内容之间的间距为8px。

四、表单交互

表单交互方式有四种。1.原位编辑；2.气泡卡片；3.弹窗/抽屉；4.页面跳转。

原位编辑
编辑内容即为展示内容，容量低于5个时使用。

气泡卡片
设置项与看板内容紧密相关时使用气泡卡片，建议设置项低于5个。

弹窗/抽屉
设置项与看板内容可以有关联也不可以没有，大于三个以上的录入项使用。

如果录入项较多，用弹框承载出现翻页的情况下可考虑使用抽屉。

页面跳转如果容量超出了弹框/抽屉的承载量并且录入项与看板没有那么强的关联性可采用页面跳转的方式。
五、页面布局

页面布局方式有四种。1.分组；2.锚点定位；3.标签页；4.分步骤

5.1分组

5.1.1标题分组
设置项超过7个；彼此间的关联性较弱且可以分类去归纳

5.1.2卡片分组有多个设置项，多个分类；彼此之间的关联性更弱，分类明确

5.2锚点定位
有多个分类的情况可通过锚点定位迅速找到相关信息

5.3标签页
彼此之间没有特定的相关性，可以独立设置。每个设置包含了多个录入项且使用了标题分组。

小结当录入项少于7个时使用基础布局；当录入项在7-15个时可采用标题分组，卡片分组、锚点定位布局；当录入项大于15个时需采用标签页布局。
5.4分步骤
利用步骤条将大型，复杂任务拆解为多个部分，并按照相关性分组。

建议3种分组依据1.采用必填项划分，把必填的选项分在一起；2.采用相关性划分；3.以操作成本划分。把好填的简单的表单放在前面，复杂的放在后面。

六、提升表单易用性
提升表单易用性方式有5种。1.信息降噪；2.清晰易读；3.高效智能；4.防错纠错；5.所见即所得

6.1信息降噪
场景一：当表单中大多数都是必填只有极少数非必填时

场景二：表单项非必填项比较多，可将低频的非必填项收起

6.2视觉清晰
场景一：尽量采用单列布局，视觉动线流畅，不容易遗漏信息；按enter键换行。

场景二：如果出于业务方需要，必须在横向添加内容，那最好有一定的分组依据。但这样就不应该出现竖向分组，以免遗漏信息。

6.3高效智能

6.3.1根据上下文信息可以自动获取的，无需用户再次填写。
例如根据手机号带出用户姓名；根据地址带出邮政编码；根据身份信息带出生日。

6.3.2提供合适的“默认项”。
例如根据行业现状提供常规的比例分配；根据定位把地区做默认的填充。

6.3.3提供搜索、联想，自动显示匹配的信息
用户在进行输入等操作时可以提供智能辅助，例如表单填写时对需要录入信息的区域提供辅助提示，通过自动补全或联想词来帮助用户快速录入信息，在保持用户的操作自由度的情况下提效。

6.3.4 OCR识别文件内容
对于一些标准证件信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动填入结果。

6.4防错纠错

6.4.1对于长数字，四位一空格，用来分段
例如输入银行卡号；充值场景下输入手机号等

6.4.2为用户封闭不正确道路
将超出时间选择范围的日期置灰。电话号、身份证录入时只允许输入数字同时设置字数上限。

6.4.3告诉用户哪里错了，而非简单粗暴的错误提示

6.5所见即所得
表单页对填写的物料内容进行映射，展示真实效果预览，降低用户心理的不确定性。适合对移动端、小程序、H5页面的设置。

七、体验衡量指标
体验衡量指标有4种。1.任务完成率；2.任务完成时长；3.必填项目数；4.易用度评分

7.1任务完成率

7.2任务完成时长

7.3必填项目数
结合业务场景给出最适合的必填项设定，提高用户填写效率。

7.4易用度评分（用户完成某项任务的难易程度）
易用度可通过调研问卷和评分量表获取。

作者：鲲sky
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

作者：大啵少女
链接：https://www.zhihu.com/question/454091157/answer/1850120473
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、了解自己

1.我有什么优势：第一步一定是了解自己的优势，哪怕是一点技能或见识，要把优势变成更优势，一定要突出自己的优势，掩盖劣势。

2.我想要什么：这就是目标，例如3年内我想成为专家，要升到P8，又或者3年内我要成为管理者。把这些都一一记录下来，逐一去做分析怎样才可以达到目的。

3.我要怎么做：接下来就是要规划自己。短可以计划三五天，长则可以一两年，把自己的计划写下来。然后按着 STAR 原则：Situation（情景），Task（任务），Action（行动），Result （结果）去执行。

二、了解行业趋势同样是设计师，一个在短视频行业，一个在传统行业，最简单的来说，收入差距就可想而知了。比如现在很多大厂已经没有纯 UI 岗位了，你这个时候还义无反顾的深耕纯 UI，那最后就会面临失业的风险。

三、打造个人 IP设计师都是独一无二的，如果要问打造个人 IP 最佳开始时间，就是现在。

这个是很重要的，尤其是在高级岗位以后，你要在细分行业有一定的影响力，他是可以给你简历加很多分的。打造 IP 的行动项有很多，比如定期各大设计网站发表作品集、在信息类网站上发表自己的文章等等… 当然了，这个是需要长期坚持的才有明显收益的。你可以给自己制定一些奖励计划，激励自己坚持输出。或者找一些志同道合的设计师一起互相督促，去找那些比你厉害的人，慢慢超过他们。 行业内深耕，不要蜻蜓点水：有的设计师觉得设计不分行业，只要另外一个行业给的薪资足够，就义无反顾的换行业。这样长期下来，你在每个行业都只是蜻蜓点水，做不到足够深入的了解行业相关知识，很难在一个高级职位上立住脚。只有充分具备了某个行业相关的知识背景，才能胜任更高级的职位，而不只是做一个只懂表面的设计师。四、提升自己

1. 交互能力：不必多说，交互能力的重要性大家也都知道了。随着行业的发展，现在很多公司的 UI 岗已经不是单纯的 UI 岗了，更多的是一种多元化的职位，交互能力是必不可缺的一种能力。

2. 眼界：对于设计师来说，眼界决定高度，眼界低是做不出好设计的。想要提升设计能力，首先提高自己的眼界。多看、多看、多看……

3. 审美能力：这个也是设计师的基本功，你要能看出别人作品的好与坏。练习方法就是多看多思考，多去参加一些设计展。

4. 视觉表现力：创意、软件技能：作为设计师，视觉表现力是最基础的，也是最重要的。这里我把它分为两个方面：创意和软件技能。创意：设计重在想法和创意，且要不断的通过学习去给自己的大脑输入灵感。让大脑一直处于活跃状态；软件技能：一切的设计实现都要由软件来实现。在自己时间允许的情况下，多学习一些软件技能，现在软件更新非常之快，前些年还用 PS / AI 来做界面呢，现在你还会用吗？

5. 产品把控力产品：一是对设计方案的设计把控，保证设计效果做到最好；二是对设计进度的把控，按时把控设计方案的上线；三是对实际开发结果的把控，保证上线后的设计还原度最大化。

6. 沟通演讲能力：设计师有一个好的沟通能力可以让团队更好的运作，提升工作效率。好的演讲能力体现在设计评审的讨论时，能够更好的 hold 场面，让整个沟通更加顺畅。

7. 管理能力：对内－设计团队的管理、人员的分工、任务分配、发展部门内学习氛围、与团队人员沟通等等；对外－与其他部门的沟通协作、工作衔接，保证整个业务线的工作有条不紊的进行。

8. 调研能力：调研能力可以考验人的信息搜索、整理、分析的能力。他可以在设计前期找到设计的切入点，在设计中期提供有力的理论观点。同时调研结果也可以作为评判自己产品评分的一个标准。如果没做过设计调研的话，前期可以去看一些大神做的完整的调研报告，分析他们的逻辑、写作手法等，需要多看多分析。

9. 规范意识：近些年大家对规范意识都有了明显的提升，规范可以提升工作效率以及降低沟通成本，同时也可以避免一些低级错误。如果你在团队中没有团队意识的话，工作就会很吃力。

10. 学习能力：毕业后，提升能力有两个方面：从项目中学习和自学。从项目中学习：每次做完项目及时做设计复盘，把从项目中学到的知识再熟悉一遍，做好知识沉淀；走过的坑再温习一遍，避免之后再犯；自学：这部分做的好与不好，几年后的差距是非常之大的，每个人的工作时间基本是差不多的，区别大的就是业余时间。最怕的就是比你厉害的人比你还努力。

11. 知识沉淀：俗话说好记性不如烂笔头。你有没有看到一个好的东西赶紧保存下来的习惯，但是从来也不看？这是大部分人的通病，觉得我保存了就是我学到了。知识沉淀指的是通过自己的整理，不断对项目进行复盘，把自己真正需要的东西保存下来，用的时候可以即时拿出来查阅。找到自己的职业定位，想清楚自己要往哪个方向发展，不断的学习技能点就对了，加油吧，设计人！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

让用户输密码的正确姿势！简化密码设计的三个小秘籍

2023-06-28 15:50北京北京兰亭妙微科技有限公司官方帐号

随着互联网的普及和数字化时代的来临，密码的重要性不言而喻。然而，很多人在设计密码时往往面临记忆难题和安全性问题。为了帮助用户设计更简化且安全的密码，本文将介绍三个小秘籍。

一、使用密码管理工具

密码管理工具是一种方便且安全的方式来管理和存储密码。它们通常提供加密的存储空间，可以储存各种账户的用户名和密码。用户只需记住一个主密码，就能够访问和管理所有其他密码。这样，用户可以选择更复杂、更安全的密码，而不必担心记忆的问题。此外，密码管理工具通常还提供自动生成密码的功能，确保密码的随机性和安全性。一些常见的密码管理工具包括LastPass、1Password和Keepass等。

二、使用短语或句子作为密码

传统的密码通常由字符、数字和特殊符号组成，很难记忆且容易被猜测。相比之下，使用短语或句子作为密码可以更容易记住且更安全。选择一个有意义的短语或句子，并将其转化为密码。例如，"ILoveToTravelTheWorld!"，这个短语可以转化为密码"Ilv2ttw!"。这样的密码不仅容易记忆，而且由于包含了大小写字母、数字和特殊符号，具备了一定的安全性。

三、使用多因素身份验证

多因素身份验证是一种提高账户安全性的重要方式。除了使用密码外，多因素身份验证要求用户提供第二个验证因素，如手机验证码、指纹识别或硬件安全密钥等。这样，即使密码被泄露，黑客也无法轻易访问账户。许多在线服务提供了多因素身份验证选项，用户应该积极开启并使用这个功能。

综上所述，设计简化且安全的密码并不是一件困难的事情。通过使用密码管理工具、使用短语或句子作为密码以及使用多因素身份验证，用户可以更好地保护自己的账户安全。重要的是，用户应该时刻保持警惕，定期更换密码，并避免在多个账户中使用相同的密码，以确保个人信息的安全。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司