首页

快来看!如何从小需求里体现设计师的价值?

博博


设计师在我们的生活中扮演着重要的角色,他们通过巧妙的设计和创意,为产品、品牌和用户体验带来价值。然而,有些人可能会认为只有在大项目中才能看到设计师的价值,而小需求对于设计师来说并不重要。但事实上,即使是小需求,也是设计师展现自己创造力和专[![]业知识的机会。在本文中,我们将探讨如何从小需求中体现设计师的价值,并说明为什么小需求同样重要。
一、小需求也是产品的一部分
无论是大项目还是小需求,每个设计师都应该将其视为产品的一部分。小需求可能包括改进图标设计、优化UI界面、调整文字排版等。虽然看起来微不足道,但这些小的改动能够直接影响用户的体验和产品的品质。设计师通过深入理解产品和用户需求,能够在小需求中提供创意和解决问题的能力。在这个过程中,他们可以通过创造性的设计来改善用户体验、提升产品的可用性和可访问性,以及加强品牌的形象。
二、小需求可以展示设计师的专业知识
设计师是专业技能的持有者,在小需求中展示专业知识是设计师体现自己价值的重要途径。无论是颜色搭配、排版规则还是内容布局,设计师都可以通过对细节的处理展示他们的专业知识和对美感的把握。他们可以根据不同的场景和需求,选择适合的设计元素和风格,并将其融入到产品中。同时,设计师还可以提供专业的建议和解决方案,帮助客户或团队做出更好的决策。
三、小需求是设计师与客户沟通的桥梁
小需求也可以作为设计师与客户沟通的桥梁。当客户提出小需求时,设计师可以通过细致的沟通和理解,了解客户的期望和目标。设计师通过与客户的良好沟通,可以提供更加精准和符合客户需求的设计方案。通过通过小需求的交流,设计师还能够对客户进行教育,提高客户对设计的理解和认知,并帮助他们更好地评估和理解设计的价值。

四、小需求是设计师展示创造力的机会
设计师是创造力的倡导者,小需求也是展示创造力的机会。对于某个小需求,设计师可能有多种解决方案,他们可以通过不同的创意和设计思路,提供独特和创新的解决方案。设计师可以试验不同的设计元素、颜色方案、排版风格等,以找到最佳的设计方案。通过在小需求中展示创造力,设计师可以为产品和品牌带来新鲜感和个性,与众不同的设计方案也有可能成为产品的亮点。
五、小需求为设计师提供持续改进的机会
通过处理小需求,设计师可以不断调整和改进自己的设计能力。小需求往往需要设计师花费更多的时间和精力来处理,它们是磨练设计师技能的绝佳机会。通过处理小需求,设计师可以反思自己的设计决策、学习和掌握新的设计技巧,并不断提升自己的专业能力。同时,设计师还可以从小需求的反馈中获得宝贵的经验教训,以便在将来的设计工作中提供更好的解决方案。
综上所述,虽然小需求可能没有大项目那样具有震撼力和影响力,但它们同样重要,能够展示设计师的价值和专业能力。设计师应该将每个小需求视为一个机会,通过精心的设计和创意,为产品和品牌带来更大的价值。同时,设计师应该持续学习和改进自己的设计能力,不断提升专业水平。通过在小需求中展现价值,设计师可以建立起良好的声誉和品牌形象,为自身的职业发展打开更多的机会。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

用户体验五要素在产品经理竞品分析中的有针对性应用

鹤鹤

作为产品经理,在进行竞品分析时,运用用户体验五要素(战略层、范围层、结构层、框架层和表现层)是至关重要的。竞品分析应该根据不同的需求目的出发,有针对性地进行分析,以提供有价值的洞察和指导。

本文将详细探讨每个要素在竞品分析中的应用,并阐述如何根据不同的需求目的进行有针对性的分析。

客户旅程:整体战略如何推动盈利业务增长

鹤鹤

以客户为核心的公司比竞争对手更具竞争力。其最大的增长因素是他们专注于客户旅程策略。
客户旅程遵循客户从意识到忠诚的完整生命周期,使你可以在旅程的每个阶段使沟通策略与客户期望相匹配。
该过程需要绘制客户旅程,绘制出他们的接触点以及你的接触点,以识别沟通中的差距。在这里,我们为你提供了绘制客户旅程的模板和框架。

通过用户体验满足客户需求的五个杀手锏

鹤鹤

我们的客户为什么不购买我们的产品或者服务?识别客户的需求通常是非常困难。即使我们的管理的很好,也需要付出精力去维护他们

超详细的保姆级B端视觉设计教程

博博

在B端视觉设计领域,注重用户体验和功能性是至关重要的。本教程将从整体设计原则到具体工具使用进行详细讲解,帮助您成为一位优秀的B端视觉设计师。
第一部分:设计准备

  1. 理解B端设计的核心目标:B端设计主要关注解决问题、提升效率、提供准确和可靠的信息。
  2. 剖析用户需求:通过详细调研和用户反馈,了解用户的需求和期望。
  3. 制定设计策略:基于对用户需求的分析,制定设计策略,确定可行的设计方向。

    第二部分:设计原则
  4. 一致性:保持整体设计风格的一致性,例如颜色、字体、图标等。
  5. 易用性:设计要简单明了,用户能够快速上手,减少学习成本。
  6. 可访问性:确保设计对残障用户友好,符合无障碍设计标准。
  7. 简洁性:去除冗余信息,保持设计界面简洁,提高用户工作效率。

    第三部分:色彩与排版
  8. 色彩选择:选择适合B端设计的专业色彩,注意搭配和对比度,避免色彩过于突兀。
  9. 字体选择:选择易于阅读的字体,适配多个屏幕尺寸,确保在低分辨率情况下也能清晰显示。
  10. 排版技巧:合理利用白色空间,使内容布局清晰,避免信息过载。

    第四部分:图像与图标
  11. 图像选择:选择合适的图片,与产品或服务相关联,突出重点。
  12. 图标设计:使用符合B端风格的简洁图标,以增强界面可读性和易用性。
  13. 图像处理:合理使用图像编辑软件,调整大小、裁剪、优化,以确保加载速度和视觉效果。

    第五部分:交互与动效设计
  14. 功能布局:根据用户需求和使用习惯,合理布局功能模块,提供直观的用户导航和操作路径。
  15. 用户反馈:使用交互式设计元素,例如按钮状态的改变、鼠标悬停效果等,让用户获得实时反馈。
  16. 动效应用:适量运用动效、过渡效果等,增强用户体验,并使界面呈现更生动的感觉。
    第六部分:工具推荐
  17. 设计软件:推荐使用Adobe XD、Sketch等界面设计软件,便于原型制作和界面设计。
  18. 图形编辑软件:Photoshop、Illustrator等软件可以协助处理图像和图标设计。
  19. 原型分享工具:Framer、InVision等工具可用于原型共享和用户测试。
    总结:
    B端视觉设计注重用户体验和功能性,在设计准备阶段要充分理解用户需求,并制定相应的设计策略。设计过程中要遵循一致性、易用性、可访问性和简洁性等原则。色彩与排版、图像与图标的选择和处理需注意与产品或服务的关联性。交互与动效设计要符合用户习惯和期望,提供清晰的操作路径和实时的用户反馈。最后,合理运用设计软件
    蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

用超多经典游戏,帮你掌握3个引导设计方法

博博

本文介绍了利用超多经典游戏作为参考,学习和掌握三种引导设计方法的重要性。通过分析经典游戏中的引导设计,包括任务导向、逐步解锁和上下文教学,读者将学习到如何设计出引人入胜且用户友好的游戏引导,以提升用户的游戏体验和学习效果。
引言:
游戏引导是帮助玩家了解游戏规则、掌握操作技巧和深入了解游戏世界的关键环节。借鉴经典游戏的引导设计方法,可以帮助设计师在其他领域,如教育、应用程序等中,有效地引导用户逐步掌握操作和理解内容。以下将介绍三种常见且实用的引导设计方法,分别是任务导向、逐步解锁和上下文教学。

  1. 任务导向:
    任务导向是一种通过为用户提供明确目标来引导他们完成任务的设计方法。类似于超多经典角色扮演游戏中的主线任务,用户会逐步解锁新的任务和挑战,同时通过任务的递进和难度上升,使用户能够逐步熟悉和掌握游戏机制。在应用程序中,设计师可以通过设置明确的目标和任务,帮助用户迅速了解应用的功能和操作方式,提高用户的学习效果和使用体验。
  2. 逐步解锁:
    逐步解锁是一种逐步引导用户掌握内容和功能的设计方法。类似于超多经典解谜游戏中的关卡设计,用户需要逐渐解锁新的关卡和功能,通过解决一系列递增的难题来提升技能和理解。在应用程序中,设计师可以通过逐步引导用户掌握基础功能,然后慢慢引入更高级的功能和复杂的任务,帮助用户逐步掌握应用的各项功能,降低学习曲线,提高用户的使用体验。解应用的用途和操作。
  3. 上下文教学:
    上下文教学是一种利用游戏中的情境和故事情节来引导用户学习的设计方法。类似于超多经典角色扮演游戏中的剧情和对话,用户可以通过游戏中的故事情节和角色对话,了解游戏世界的背景知识、任务目标和操作技巧。在应用程序中,设计师可以通过设置具有情境和故事性的引导内容,以吸引用户的注意力并帮助他们更好地理解应用的用途和操作
    结论:
    通过借鉴超多经典游戏中的引导设计方法,我们可以提高应用程序、教育工具等领域的用户体验和学习效果。设计师可以灵活运用任务导向、逐步解锁和上下文教学等设计方法,为用户创造引人入胜、易于理解和操作的引导体验。随着不断的尝试和改进,设计师可以提高引导设计的效果,使用户更轻松地掌握内容并以更高的效率使用应用。同时,这些引导设计方法也可以为其他设计领域,如网站导航、说明文档等,提供有价值的参考和启
    蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一键抠图!7 款超好用的AI抠图工具

博博

随着 AI 技术的发展,很多的图像处理任务都可以交给 AI 自动处理了,比如修图、抠图、高清修复等。AI 图像工具不仅将我们从原本单调重复的工作中解放出来,它处理图像的效果和效率比也人工还要好。正好前段时间交流群有小伙伴在找好用 AI 抠图工具,今天就为大家推荐 7 款我觉得不错的网站,它们处理抠图速度快、效果精细,并且可以免费使用,一起来看看吧~
一、Pixan.AI
网站直达: https://pixian.ai/
Pixan 是好评率超高的一款 AI 抠图工具,目前处于 beta 测试阶段,完全免费使用。进入后无需登录注册,可以通过拖拽、粘贴、上传 3 种方式接收图像,5 秒左右就能完成抠图。支持批量处理图像,抠图完成后还可以在线为图像添加不同颜色的背景。

二、Toolkit
网址直达: https://toolkit.boolv.tech/background-remover
Toolkit 是一个多功能的图片处理网站,其中就包括一键人像抠图的功能。同样是免费使用,无需登录注册。进入网页后,上传本地图像网页就会开始自动处理,支持为抠图后的人像添加自定义背景。

三、PicWish/佐糖
网站直达: https://picwish.cn/remove-background
PicWish 是一个国产的图像处理网站,功能包括一键抠图、智能修图、模糊图像变清晰、压缩、裁剪、格式转换等。它的抠图功能是免费的,可以处理人像、商品、动物、图形等多个类型的图像,登录注册可以下载无水印的抠图结果。
四、Clipdrop
网站直达: https://clipdrop.co/remove-background
Clipdrop 一个专注于用 AI 技术处理图像的网站,无论是抠图还是文生图、图像外绘、放大、修图都它都可以处理,并且效果非常不错。其抠图功能是免费的,支持批量处理,建议登录注册后使用。最大支持上传 1024*1024 px 的图像,超过的话网站自动压缩至 1024 px。
五、Removebg
网站直达: https://www.remove.bg/zh
Removebg 也是一款非常便捷的免费 AI 抠图工具,抠图速度极快,效果也很精细。使用时无需注册登录,支持通过链接处理图像,非会员抠图完成后可以下载最大 600px 的图像。
六、BgEraser
网站直达: https://bgeraser.com/
一个专注于 AI 抠图网站,支持批量处理。上传图像后点击 start 开始处理图像,抠图时间在 30s 左右。新用户有 10 次的免费抠图额度,注册登录后额度可以上升至 50 次。

七、Tracejourney
加入 Tracejourney 的服务器: https://discord.com/invite/8ynJNQz3Sm
官方教程: https://www.tracejourney.com/docs/getstarted
Tracejourney 是一款基于 Discord 的图像处理工具,功能包括抠图、图像转 SVG、放大、提取描述词、格式转换以及亮度和对比度调节,将图片直接发送 Tracejourney bot,在弹出的工具栏内点击对应的按钮就可以了。
Tracejourney 还可以和 Midjourney 配合使试用。设置完成后,当我们放大 Midjourney 图像时,底部会自动弹出 Tracejourney 的工具栏,点击对应的按钮就能轻松对图片进行处理。点击链接查看具体设置教程: https://www.uisdc.com/5-ai-tools-2

以上就是今天为大家推荐的 7 款免费好用的在线 AI 抠图工具。喜欢本期推荐的话记得点赞收藏支持一波,之后会继续为大家推荐更多实用的 AI 绘画干货内容。
文章来源:优设网 作者:夏花生
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

igma官方团队如何设计「查找和替换」功能?

博博


本文介绍了Figma官方团队如何设计和改进“查找和替换”功能,以提升用户的使用体验。通过深入了解用户需求、设计一个直观且易于使用的界面,并利用用户反馈不断优化功能,Figma成功地打造了一个功能强大且高效的“查找和替换”工具。
第一步:研究用户需求
设计一个出色的“查找和替换”功能的第一步是深入了解用户需求。Figma官方团队通过与用户之间的反馈收集、用户调研、用户行为分析等方式,全面了解用户的期望和问题。他们发现用户经常需要快速查找和替换设计文件中的特定元素,以提高工作效率。此外,用户还希望能够设置搜索范围、控制替换选项以及在大型设计文件中高效地进行操作。
第二步:设计界面
基于用户需求和反馈,Figma官方团队开始设计“查找和替换”功能的界面。他们追求简洁和直观的设计,以确保用户可以快速上手并高效地使用该功能。设计界面应包含以下关键元素:

  1. 查找输入框和替换输入框:为用户提供输入搜索关键字和替换文本的区域。
  2. 选项设置:允许用户设定搜索和替换的范围、区分大小写、全字匹配等选项,以满足不同场景的需求。
  3. 高级选项:提供更多高级搜索和替换功能,如正则表达式、批量替换等,以满足用户更精细的要求。
  4. 查找结果展示:以清晰、易读的方式展示搜索结果,例如在设计文件中高亮显示匹配项,并提供导航功能以方便用户快速定位。
  5. 撤销和应用按钮:允许用户在查找和替换过程中撤销或应用更改。
    第三步:迭代和优化
    一旦设计界面完成,在功能发布之前,Figma官方团队会通过内部测试和用户测试不断优化功能。他们会收集用户的反馈,并根据反馈信息进行必要的调整和改进。同时,团队还会关注用户使用中的痛点和难点,并根据用户需求,快速提供有针对性的改进方案。
    通过这种循环的设计和优化过程,Figma官方团队不断改进“查找和替换”功能,以提供更好的用户体验。
    结论:
    Figma官方团队的设计流程始终以用户为中心。他们通过深入研究用户需求,设计优雅的界面,并持续迭代和优化功能来确保用户得到高效、强大的“查找和替换”工具。这个设计过程的关键是与用户保持沟通,持续收集反馈并及时做出改进,以满足用户不断变化的需求。
    蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

igma官方团队如何设计「查找和替换」功能?

博博


来百度APP畅享高清图片
本文介绍了Figma官方团队如何设计和改进“查找和替换”功能,以提升用户的使用体验。通过深入了解用户需求、设计一个直观且易于使用的界面,并利用用户反馈不断优化功能,Figma成功地打造了一个功能强大且高效的“查找和替换”工具。
第一步:研究用户需求
设计一个出色的“查找和替换”功能的第一步是深入了解用户需求。Figma官方团队通过与用户之间的反馈收集、用户调研、用户行为分析等方式,全面了解用户的期望和问题。他们发现用户经常需要快速查找和替换设计文件中的特定元素,以提高工作效率。此外,用户还希望能够设置搜索范围、控制替换选项以及在大型设计文件中高效地进行操作。
第二步:设计界面
基于用户需求和反馈,Figma官方团队开始设计“查找和替换”功能的界面。他们追求简洁和直观的设计,以确保用户可以快速上手并高效地使用该功能。设计界面应包含以下关键元素:

  1. 查找输入框和替换输入框:为用户提供输入搜索关键字和替换文本的区域。
  2. 选项设置:允许用户设定搜索和替换的范围、区分大小写、全字匹配等选项,以满足不同场景的需求。
  3. 高级选项:提供更多高级搜索和替换功能,如正则表达式、批量替换等,以满足用户更精细的要求。
  4. 查找结果展示:以清晰、易读的方式展示搜索结果,例如在设计文件中高亮显示匹配项,并提供导航功能以方便用户快速定位。
  5. 撤销和应用按钮:允许用户在查找和替换过程中撤销或应用更改。
    第三步:迭代和优化
    一旦设计界面完成,在功能发布之前,Figma官方团队会通过内部测试和用户测试不断优化功能。他们会收集用户的反馈,并根据反馈信息进行必要的调整和改进。同时,团队还会关注用户使用中的痛点和难点,并根据用户需求,快速提供有针对性的改进方案。
    通过这种循环的设计和优化过程,Figma官方团队不断改进“查找和替换”功能,以提供更好的用户体验。
    结论:
    Figma官方团队的设计流程始终以用户为中心。他们通过深入研究用户需求,设计优雅的界面,并持续迭代和优化功能来确保用户得到高效、强大的“查找和替换”工具。这个设计过程的关键是与用户保持沟通,持续收集反馈并及时做出改进,以满足用户不断变化的需求。
    蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

10条让轮播图转化率更高的设计原则

博博

使用轮播图对于在有限空间来提升用户阅读效率是很有用的,但现有大部分情况轮播图设计得并不好用。
遵守本文中提到的 10 条轮播图设计原则,可以提使用高轮播图的用户体验,在这篇文章中,作者首先会通过实例来过一遍 10 条轮播图设计原则,然后说明为什么以及怎样区别对待桌面端和移动端的轮播图,在文章最后,列举出一种相比于轮播图更好更易用的展示方式。
一、实际运用中的轮播图
在美国一份针对 50 家顶级零售电商网站的统计中,发现轮播图被广泛运用于电商网站:PC 端 52%的电商网站使用轮播图,而与此同时移动端 56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)

来百度APP畅享高清图片
这篇文章的重点旨在讲如何通过设计和交互细节,使首页轮播图更易用,而不是关注于轮播图本身应该放那些内容。此时,我们轮播图的内容应该注意以下几点:
如果轮播图的内容与网站本身不相关,且没有经过精心设计和使用高质量的图片,那么用户体验会很糟糕 —— 轮播内容应与网站主题相关
如果轮播图的内容看起来太像广告,那么用户会直接忽视它,即使轮播图的内容与用户所需相关 —— 轮播图内容不能过于商业化
轮播图的一个主要优势就是可以放专门设计过的图片,那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果,因为那些经过设计的高清大图能在首页给用户留下一个好印象,在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —— 轮播图片要精心设计
二、轮播图设计十原则
那么,怎样在实际运用中做好轮播图设计呢,作者将 10 原则分成了四个部分来进行阐述:

  1. 滑动(轮播)顺序和点击后的落地页
    大部分用户不会看完所有的首页轮播图,即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面,换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。
    因此,只要轮播图不是展示网站特点和展示网站产品的唯一方式,那么用户即使不看完所有轮播图问题也不大。
    我们之前做的轮播图可用性研究,发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了,而在手动轮播图网站里轮播图只会停留在第一帧,除非用户主动去找不然他们不会注意到那些有用的信息。所以,即使完善轮播图的细节设计是一个很好的想法,但这并不能成为用户获取网站信息的唯一方式。
    两条原则:
    原则 1: 轮播图的展示顺序特别是第一帧非常重要;
    原则 2:把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。
  2. PC 端自动轮播逻辑
    自动轮播形式能够保证轮播图的每一帧都有一定的曝光量,并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%),这是因为:像动态图片一样,自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来,因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读,此时要注意三个极其重要的自动轮播图设计原则:
    原则 1:自动轮播不要太快
    如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容;如果轮播太快那么用户就会因为不感兴趣的轮播内容而被骚扰。
    轮播图的展示时间应该根据轮播图的文案内容来决定,尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放,这就意味着每个轮播图的展示时长都是独立的。

    其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。
    原则 2:用户 hover 内容时应该暂停自动轮播
    用户鼠标的位置与他们在当前页面关注的内容有内在联系 :
    当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣;
    当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ;
    如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落,并且会不得不重新回到主页,然后再次点击原来想要的那一部帧轮播图。
    原则 3:用户有任何主动交互行为时应该停止自动轮播
    当用户主动点击轮播图按钮来看前一帧或者下一帧内容时,这种行为是有意进行的并且 (当前轮播内容)不应该被改变,即使用户决定去查看主页的其他内容。
    点击行为是用户的主动响应行为,它是反应用户意图和兴趣的一个强烈的信号。因此,当用户主动对轮播图进行交互时轮播图应该停止自动轮播,因为用户极有可能是有意要查看某一帧的内容。
  3. 轮播图控件应该具备两项功能
    原则 1:轮播图控件提示当前图片所在帧数位置
    提示用户有更多帧数的图片,让用户有更多探索的可能;
    提示用户轮播图到底有多少帧图片;
    当轮播图自动播放到最后一帧时提示用户将循环到第一帧。
    比较常用的设计是在一张五彩斑斓的图片上设置一组小点,但这通常会很难识别,把这些点放置在图片外面会好一点。原则 2:轮播图控件允许用户进行前后帧内容的切换
    这是使用箭头是比较好的方法,然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限,会导致用户容易忽视这些控件,那怎样避免进行前后切换的箭头被用户忽视呢:
    展示部分下一帧或前一帧图片;
    根据所识别的背景图片的颜色和明度进行相应的颜色改变。
    通过展示前后一帧内容的部分内容,用户很容易感知到可以进行切换。

除了传统的设计样式像是用来感知位置的小点和前后切换的箭头,“table of contents”这种设计样式同样也能起到一样的效果 。
首先,它结合了位置感知和手动切换的控件为一个整体的 UI 组件;
其次,它能为用户提供了一定的轮播信息线索,让用户知道接下来会看到什么,因而可以让用户更有效的进行跨帧的切换。

  1. 在移动端一切都如此不同
    触屏设备上的轮播图与 PC 端有着很大的不同,之前列举的PC端上的交互逻辑在移动设备上是无效的,并且有很多新的规则:
    原则 1:移动端没有 hover 状态因此尽量避免自动轮播
    hover 状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号,这意味着如果没有 hover 状态来激活自动轮播暂停,那么自动轮播在移动设备上的使用就不那么合适了,自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换,这会使用户跳转到错误的页面。
    原则 2:移动端支持滑动操作
    用户在触屏设备上的操作预期就是滑动来进行导航切换
    传统的轮播图操作控件同样重要(如进行前后切换的箭头和让用户感知位置的小点)
    原则 3:移动端屏幕的图片需要特别优化
    许多在 PC 端上使用的轮播图设计稿是直接缩放后在移动端上重复使用,这造成在移动端屏幕上许多文案的阅读性较差;
    移动端用户对加载较慢的轮播图更没有耐心,用户在 PC 端可以边花费 1 到 5 秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息,而在移动端有限的屏幕大小下用户只能看到轮播图
    现在我们来总结一下:

    三、轮播图的替代方案
    单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式:
    它没有轮播图的那些用来控制切换图片的控件,因而尤其适合在移动端使用;
    它高度符合用户与首页的交互方式,70%的移动端用户会下意识的拖动并浏览首页的内容,来获知他们来到了什么类型的网站;
    相比于使用轮播图要遵守的那 10 条原则,它使用起来更加便捷,那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。

文章来源:优设网 作者:LHJ
分享此文一切功德,皆悉回向给文章原作者及众读者
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,添加vx蓝小助ben_lanlan,报下信息,蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等,欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

日历

链接

个人资料

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

存档