首页

多级菜单设计最佳实践

鹤鹤

导航和可查找性是用户体验设计的核心方面。如果用户无法找到他们需要的东西,他们就会感到沮丧并可能决定去别处寻找。在信息架构特别复杂的网站上,多级菜单是提高导航和可查找性的有效方式,从而提供有效的网络体验,促进产品信任和促进转化。

由于产品和使用它们的设备千差万别,因此没有一刀切的解决方案。但是,有一些经验法则可以帮助您构建多级菜单,从而增强在不同屏幕尺寸上的导航和可查找性。

不同尺寸屏幕的设计技巧

一个好的多级菜单应该通过以清晰、直观的方式呈现信息,让用户快速找到他们需要的信息。在我们进入特定于尺寸的指南之前,让我们看看一些适用于所有菜单的做法。

使用不超过两级的子菜单。任何多于两级的子菜单都可能使用户感到困惑。保持导航相对平坦可以提高用户的可查找性,并减少记住他们所在位置所需的认知负担。如果站点的页面结构很深,请考虑在密切相关的页面顶部添加本地导航菜单。例如,设计复杂业务支持产品的 Zoho 在每个产品页面的顶部放置了一个特定于产品的本地菜单,就在主菜单的下方。虽然顶部的主菜单列举了 Zoho 的核心产品,但本地菜单提供了对包含更详细信息的页面的访问,例如用例和定价。

用图标标记子菜单。通过始终明确何时有可用的子菜单来管理用户的期望。熟悉的选项包括一个小的下角图标或三角形图标。此外,请考虑在子菜单打开时翻转指针图标。

直观地组织信息。确保信息的层次结构与用户的心智模型一致。例如,在电子商务网站上,考虑购物者是否更有可能期望按品牌或商品类型组织商品。如果用户单击“鞋子”类别,他们是否希望子菜单显示运动鞋、凉鞋和靴子的选项?或者他们是否希望看到一个子菜单列出商店出售的每个品牌的鞋子?

确保用户始终知道他们在哪里。始终突出显示主菜单上与用户所在页面相对应的链接。如果当前页面在子菜单中,则在主菜单上也突出显示子菜单链接。

保持简单。菜单不是进行巧妙文字游戏的地方;确保链接标签具有强烈的信息气息。这意味着保持标签名称简单明了和描述性,以便用户在点击时立即知道他们会找到什么。文案越清晰,用户就越快找到他们需要的东西。

优先考虑可读性。使用简单的无衬线字体并确保项目周围有足够的间距以避免混乱。确保背景足够不透明以遮挡菜单后面的任何内容。但不要忽视网站的整体品牌。虽然可读性是第一位的,但要确保菜单的样式与网站的其他外观和感觉相得益彰。

使点击变得可访问。为了让有精细运动控制障碍的用户可以访问菜单,请遵循 Google 的Material Design指南,并将可点击元素的大小设置为至少 48 x 48 像素。

网站菜单设计技巧

即使移动趋势日益增长,客户可能需要功能齐全的网站的原因仍然很多。例如,他们可能需要在网上提供比移动网站可行的更多信息。或者他们的研究可能表明他们的用户只是更多地依赖台式机。

网站菜单应该易于浏览,提供清晰的交互,当然还有响应性。它还应尽可能与移动网站保持一致,以便为回访者提供直观的体验。

菜单应该在点击时打开,而不是悬停。您需要做出的最基本的决定之一是用户将如何访问站点的菜单。将指针悬停在菜单上是否足以触发菜单的外观,还是用户需要单击它?

悬停方法很流行,但点击打开是确保菜单在所有设备上可靠、直观地工作的最佳方式。单击方法使网站能够在传统的计算机显示器和类似的触摸屏上更一致地工作,并避免悬停方法出现的许多问题,包括:

a) 狭窄的悬停空间。悬停空间是鼠标在保持菜单打开的同时进行导航的路径。如果它太窄,菜单可能会在用户到达他们想要的链接之前消失。

b) 意外打开。如果用户在前往页面上的另一个位置的途中尝试浏览悬停菜单,则很容易无意中打开悬停菜单。设置一个短暂的延迟可以解决这个问题,但当用户确实想要打开菜单时可能会导致不适。

c) 触摸屏上的用户体验不一致。悬停菜单在触摸屏上不起作用。他们需要一个代码来检测触摸屏并切换到点击打开;随着笔记本电脑和平板电脑之间的界限越来越模糊,这些变通办法可能会过时。

d) 关于什么是可点击的问题。使用悬停菜单,用户在尝试单击之前并不总是知道父链接是否可单击。这与直觉相反。

e) 可访问性。悬停菜单可能会给使用屏幕阅读器或通过键盘导航的用户带来问题。

选择正确的布局:下拉菜单与超级菜单。如果网站使用传统的菜单布局(位于页面顶部的水平菜单栏),您可以考虑两种类型的子菜单:标准的单栏下拉菜单或多栏超级菜单。

如果父类别包含的链接少于八个,请考虑使用下拉菜单。如果下拉菜单足够长,需要垂直滚动,您应该考虑以不同的方式组织信息——也许作为一个大菜单或通过细化父类别。

超级菜单是一种嵌套菜单,通常使用可以扩展浏览器宽度的宽布局。如果子菜单包含许多可以按列分组的不同链接,您应该使用这种类型的菜单。通常,您会在大型电子商务网站上看到这样的菜单。

设计大型菜单时,请考虑以下事项:

a) 添加图像或图标,使信息更易于浏览。

b) 添加标题以对相关页面进行分组。

c) 如果类别名称不言自明,请添加说明。

大型菜单在移动设备上可能难以阅读和导航,但有时在更大屏幕上用户体验的改进使得为移动设备重新配置信息而做额外的工作是值得的。

添加清晰的悬停状态。使用点击打开菜单,包括所有可点击元素的清晰悬停状态,会使户确信链接处于活动状态。您可以使可点击区域的背景稍微变暗以指示悬停状态。只要确保悬停区域与可点击区域匹配。如果测试表明用户需要更多指导或上下文,请考虑添加更多描述性标签名称或工具提示,只要它不会阻止任何重要的内容。

单击以关闭子菜单。当用户点击别处或打开另一个子菜单时,通过关闭菜单来保持直观。这就是下拉输入字段在表单中的工作方式,因此大多数用户会觉得这很熟悉。

在桌面上启用键盘导航。并非每个人都使用鼠标进行导航,因此菜单应允许用户使用键盘进行导航。这意味着所有链接都应该具有不同的焦点状态,以便用户可以一目了然地看到它们的位置。通常,深色框可以很好地指示聚焦状态。

移动屏幕的设计技巧

如果您尚未设计移动优先,则需要优化手持设备的菜单。传统的菜单布局在非常小的屏幕上很少能很好地操作——如果你只是缩小桌面菜单栏,没有人能够阅读它。

简化主菜单。由于智能手机屏幕很小,您在桌面菜单中找到的大部分信息最初都必须隐藏。主菜单栏必须非常简单,但最好显示最重要的链接以提高可查找性。您可以将菜单栏固定在屏幕底部或顶部。

添加菜单触发器。由于移动菜单的全部或部分可能被隐藏,用户需要一种方法来找到它。在菜单栏或易于触及的浮动按钮中添加汉堡图标是一种流行的解决方案,许多用户都会认可。然而,汉堡菜单并不是唯一的选择。例如,如果您正在为年长的用户设计,则最好使用带有“菜单”一词的框。或者,如果您想让网站的功能更加突出,您可能希望将它们显示在顶部或底部的选项卡式菜单中。

将菜单放在侧边栏中。您可以通过多种不同的方式设计移动菜单。您可以使用全宽布局,适用于任何情况;底部抽屉,最好只有几个链接;或圆形菜单。一个不错的选择是使用带有深色半透明背景的侧边栏来遮挡页面内容,从而消除干扰,并允许用户轻松点击它以将其关闭。还可以考虑使用从左滑动的动画来避免不和谐的体验。对于侧边栏和底部抽屉菜单,请确保菜单可垂直滚动,以便在较小的屏幕或横向模式下不会有任何内容被遮挡。

允许用户轻松关闭菜单。用户可以直观地点击菜单来关闭它,但也可以考虑添加一个关闭按钮。您可以将汉堡图标变成 X 或在菜单的右上角添加一个。

对单个子菜单使用扩展部分。如果菜单只有一级子菜单,请考虑使用扩展部分。您可以将它们展开到父项下方,并使用不同的背景颜色来清晰显示。您还可以允许用户同时展开多个子菜单。考虑使用父项右侧的下角或三角形图标来指示子菜单可用。

用重叠菜单替换大型菜单和多个子菜单。如果您需要展开多个子菜单或重新配置大型菜单,请选择重叠方法:不要在父菜单下方或旁边展开子菜单,而是让子菜单替换父菜单。使用这种方法,您必须在除第一级之外的所有面板上都包含一个“返回”链接。对于顶级菜单,请考虑为父项使用直角图标或右箭头。

预打开子菜单。在小屏幕上,如果用户点击打开主菜单并且他们当前所在的页面在子菜单中,请考虑自动打开子菜单,以便用户了解它们相对于其余菜单项的位置。

总结

导航是客户体验的重要组成部分。用户不想进行寻宝游戏,也不想花更多的时间浏览菜单。如果他们无法轻松找到他们需要的东西,他们可能会放弃网站或界面,将他们的注意点转移到其他地方。

精心设计的多级菜单是具有复杂信息架构网站的关键组成部分。希望这些方法在各种用例中为您提供良好的帮助。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:对啊设计君
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


7个用户深访秘诀

涛涛

当你需要为你的叔叔购买一份圣诞礼物却不知道该买什么的时候,你还熟悉那种感觉吗?与往年一样,你可以购买任何一种为男士所准备的圣诞小礼物,并把它牢牢粘在圣诞袜里面。

但你有没有想过,若是留心你叔叔的日常生活,并问问他会给自己买什么,也许就会有一些新的发现。很可能一个全新的鱼饵包就会给你叔叔带来一个全新的夏季体验。

作为一名设计师,在为我不太了解的用户设计产品时,我也遇到了类似的问题。在线调查(Online surveys)、用户评论网站(user review sites)和焦点小组( focus groups)是收集用户洞察的利器。除了这些,深度访谈 (in-depth interview,缩写为IDI)是一个常常被忽视的好方法,毕竟,这就像是问询那样简单。

用户访谈对收集产品需求很有帮助。但不幸的是,如果访谈执行不佳,反而会带来误导。

作为一名高级产品设计师,在我的职业生涯中,花了很多时间准备和开展用户研究工作。我阅读了大量资深设计师撰写的相关文章,然而这些文章依然忽视了在实际访谈中可能会发生的很多细节问题。因此我写下了这篇文章,和大家分享这些年做用户访谈的经验与心得。

 

1. 找准目标

在去想“我要问什么问题”前,先专注于具体的研究目标。试着反问自己以下这些问题,可以帮助你轻松确定研究目标:

  1. 这次访谈的具体目的是什么?
  2. 我为什么要进行这项研究?
  3. 我要从这项研究中学到什么?
  4. 我想要了解哪些信息?
  5. 谁会需要这些信息,他们会用这些信息做什么?

把答案一一写下来,先笼统后具体。“你需要知道的”和“你想知道的”之间仅仅隔了一层纸,问偏了方向很可能对研究产生误导。忘记你的假设,确保研究目标与企业需求一致,进而制定合适的业务目标,不要掺杂个人观点。

 

2. 问合适的问题

了解研究目标将决定深度访谈中会问到的具体问题。访谈成功的关键是问出能反映“受访者正在想什么”的问题,而不是你认为他们正在想什么。要做到这一点,请遵循以下规则:

  1. 问“开放式”问题:
    避免问那些会暗示某个答案会比另一个更好的问题,也避免那些简单到可以用“是”或“否”来回答的问题。一个好的开放性问题是:“你早上一般会做些什么?” 而不是:“你早上喜欢喝咖啡吗?”
  2. 缩小范围:
    在澄清用户回答时,可以用封闭式问题来缩小问题范围。例如,如果你问“请告诉我关于你移动设备的使用情况。”,而用户回答又不够具体时,你可以通过问“你一天会使用移动设备多长时间(小时)?”来缩小范围。
  3. 不要直接问“为什么”:
    受访者可能认为它带着质疑的口吻,所以最好重新表述。例如,与其问:“你为什么需要这款应用软件?” 不如问:“你最喜欢这款应用软件的哪些优点?
  4. 问简单的问题:
    尽量避免问需要双重回答或包含双重否定的问题。让提问便于理解。
  5. 问用户的经历:
    为了给人留下良好的第一印象,人们倾向于展现出自己更好的一面,而非真实的一面。用户常常为了迎合访谈员,会说出一些与自己的真实想法没有半毛钱关系的观点,这就是为什么需要让用户回忆自己的个人经历或特定事件,以获得具体详细的答案,这样问是非常明智的。
  6. 让用户举例,而非你提供例子:
    为受访者提供一个可以追加阐述的空间,你可以用他们:“还有其他的吗?”、“这对你来说意味着什么……?”、“请帮忙再说明一下……以便我详细了解?”等

 

3. 高效招募

如果我每次被问到“深度访谈到底需要访谈多少名用户?“时我都能赚1美元,那我早就成为百万富翁了。以下三条简单的规则将帮你确定受访者的数量:

  1. 受访者的数量取决于问题规模和目标用户规模。
    如果你想从“餐馆老板”那里收集反馈,10名受访者就足够了。而你需要访谈“观看电视足球比赛的观众”时,则需要大约50名不同人口学背景的受访者。
  2. 相比访谈大量“单一人口学背景”的用户,你可以只访谈少数几个“背景各不相同”的用户。
    当然,目标群体应该有一些共性,但是在年龄、收入、兴趣等方面背景多样,这样你就可以对这个研究课题有更广泛的看法/视角。
  3. 通过预算来确定具体的访谈人数。
    请记住,一场访谈需要大约1小时,但分析一场的访谈数据则需要3小时。如果你的预算很少,最好改成简短的非正式访谈,而不是放弃访谈。

过度精细的定性研究是对资源的浪费。 最好的结果来自于“不超过5名”的用户,并在你的预算内开展尽可能多的小规模测试。
——雅各布·尼尔森(Jakob Nielsen)

 

4. 构建强大场景

每次访谈都需要周全的准备。从一开始就列出能满足你所需信息的所有问题。同时写下能想到的所有问题,别在乎对错。仔细思考你的访谈目的以及想了解的具体信息。列完问题后,请遵循以下规则:

  1. 确保问题从“宽泛”到“具体”。
    这样可以帮助受访者进入使用场景、确认主题并准备好提供更深思熟虑的回答。尤其是在访谈开始时问一些宽泛的问题,可以帮助受访者放松下来,敞开心扉,进而展开更详细的对话。
  2. 关注用户。
    关注他们的主要目标、动机、习惯和痛点。尽量避免与研究目标无关的话题。
  3. 尽量减少引导性问题。
    好的问题是“你使用外卖软件吗?”, 而不是“你多久使用一次Uber Eats?”
  4. 避免在访谈中加入你的观点。
    访谈结果不应取决于访谈员的技巧或行为,也不应取决于其他外部环境因素。

 

5.不要慌,保持变通

尽管你很可能为用户访谈制定了一个完美的计划,但你依然无法预见一切。对访谈中的细微变化保持开放心态,不要害怕在访谈中提出新问题。在适当的时候引入新的主题是非常受欢迎的,你也可以随时调整问题的顺序。

请确保你能控制整个访谈节奏,并保持逻辑性,不要在话题间随意跳转。为此,请遵循以下规则:

  1. 做好准备。
    在访谈前准备好你已经列出的问题清单,确保能够更好收集你想获取的信息。
  2. 牢记计划。
    有经验的访谈员会对访谈流程烂熟于心,这样就可以在访谈的任何阶段进行问题的灵活切换,且不会丢掉研究目标。
  3. 不要执拗于当前的访谈场景。
    如果谈话偏离了主题,礼貌地重新聚焦,必要时甚至可以换个话题。关键是保持灵活性。

 

6. 尽可能客观

用户访谈法的短板在于很难完全客观,因为人们倾向于用自己的观点取悦其他人,这会对访谈结果产生负面影响。我们很难判断受访者是否在说真话,或者他们是否能够明确说出他们想要什么。

看他们做了什么,而不是听他们说了什么,绝对不要相信人们预测自己未来可能会做的事情。

——雅各布·尼尔森(Jakob Nielsen)

为了应对这种风险,试试这样做:

  • 减少研究中的人为因素。
    由于每个问题都会使受访者承受被他人评判的压力,受访者的回答或多或少都会受到访谈员的影响。因此可以借助第三方工具来收集反馈,例如UserTesting 或 Lookback(用户在线测试工具),使流程自动化以便减少人为干预。
  • 找不熟悉的人来参加访谈。
    如果找来熟人,他们更有可能以你理想的方式帮助你完成用户研究。理想情况下,建议由不了解项目目标和肯定不知道潜在设计问题的人员来参加访谈。
  • 人们所说的与他们所做的往往是两回事。
    尝试将访谈与行为观察(或简单的可用性测试)结合起来,以便有机会看到用户的真实操作,进而验证用户所说的是否在实际操作中真的发生了。

 

7. 多听少说

在追问具体细节之前,允许受访者用他们自己的方式自由发言,即使你对答案不满意也不要轻易打断他们。不要急于发问,耐心倾听他们的意见,根据需要随时调整问题或温和地提醒他们回到本次访谈的主题上。

优秀的访谈员都懂:倾听比提问更重要。

虽然向受访者提供访谈相关信息很重要,但是如果整场访谈主要是你(访谈员)在说话,那么你很有可能无法真正了解受访者的想法。

 

我的想法和评论(最后)

我认为自己是一个完美的访谈员吗?不!访谈需要练习,就像生活中的其他事情一样。

随着你的访谈经验越来越多,你犯的错误就会越来越少。所以,在你直接开展访谈前,先观察身边更有经验的同事是怎么做的。或者你可以试着找一位导师来帮助你。

以上经验帮助我一次又一次地避免了代价高昂的错误,还让我的访谈过程更加高效。希望你也会发现它很有用。 好运!








文章来源:UXRen 作者:Karolina Olejniczak

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

7个用户深访秘诀

涛涛

当你需要为你的叔叔购买一份圣诞礼物却不知道该买什么的时候,你还熟悉那种感觉吗?与往年一样,你可以购买任何一种为男士所准备的圣诞小礼物,并把它牢牢粘在圣诞袜里面。

但你有没有想过,若是留心你叔叔的日常生活,并问问他会给自己买什么,也许就会有一些新的发现。很可能一个全新的鱼饵包就会给你叔叔带来一个全新的夏季体验。

作为一名设计师,在为我不太了解的用户设计产品时,我也遇到了类似的问题。在线调查(Online surveys)、用户评论网站(user review sites)和焦点小组( focus groups)是收集用户洞察的利器。除了这些,深度访谈 (in-depth interview,缩写为IDI)是一个常常被忽视的好方法,毕竟,这就像是问询那样简单。

用户访谈对收集产品需求很有帮助。但不幸的是,如果访谈执行不佳,反而会带来误导。

作为一名高级产品设计师,在我的职业生涯中,花了很多时间准备和开展用户研究工作。我阅读了大量资深设计师撰写的相关文章,然而这些文章依然忽视了在实际访谈中可能会发生的很多细节问题。因此我写下了这篇文章,和大家分享这些年做用户访谈的经验与心得。

 

1. 找准目标

在去想“我要问什么问题”前,先专注于具体的研究目标。试着反问自己以下这些问题,可以帮助你轻松确定研究目标:

  1. 这次访谈的具体目的是什么?
  2. 我为什么要进行这项研究?
  3. 我要从这项研究中学到什么?
  4. 我想要了解哪些信息?
  5. 谁会需要这些信息,他们会用这些信息做什么?

把答案一一写下来,先笼统后具体。“你需要知道的”和“你想知道的”之间仅仅隔了一层纸,问偏了方向很可能对研究产生误导。忘记你的假设,确保研究目标与企业需求一致,进而制定合适的业务目标,不要掺杂个人观点。

 

2. 问合适的问题

了解研究目标将决定深度访谈中会问到的具体问题。访谈成功的关键是问出能反映“受访者正在想什么”的问题,而不是你认为他们正在想什么。要做到这一点,请遵循以下规则:

  1. 问“开放式”问题:
    避免问那些会暗示某个答案会比另一个更好的问题,也避免那些简单到可以用“是”或“否”来回答的问题。一个好的开放性问题是:“你早上一般会做些什么?” 而不是:“你早上喜欢喝咖啡吗?”
  2. 缩小范围:
    在澄清用户回答时,可以用封闭式问题来缩小问题范围。例如,如果你问“请告诉我关于你移动设备的使用情况。”,而用户回答又不够具体时,你可以通过问“你一天会使用移动设备多长时间(小时)?”来缩小范围。
  3. 不要直接问“为什么”:
    受访者可能认为它带着质疑的口吻,所以最好重新表述。例如,与其问:“你为什么需要这款应用软件?” 不如问:“你最喜欢这款应用软件的哪些优点?
  4. 问简单的问题:
    尽量避免问需要双重回答或包含双重否定的问题。让提问便于理解。
  5. 问用户的经历:
    为了给人留下良好的第一印象,人们倾向于展现出自己更好的一面,而非真实的一面。用户常常为了迎合访谈员,会说出一些与自己的真实想法没有半毛钱关系的观点,这就是为什么需要让用户回忆自己的个人经历或特定事件,以获得具体详细的答案,这样问是非常明智的。
  6. 让用户举例,而非你提供例子:
    为受访者提供一个可以追加阐述的空间,你可以用他们:“还有其他的吗?”、“这对你来说意味着什么……?”、“请帮忙再说明一下……以便我详细了解?”等

 

3. 高效招募

如果我每次被问到“深度访谈到底需要访谈多少名用户?“时我都能赚1美元,那我早就成为百万富翁了。以下三条简单的规则将帮你确定受访者的数量:

  1. 受访者的数量取决于问题规模和目标用户规模。
    如果你想从“餐馆老板”那里收集反馈,10名受访者就足够了。而你需要访谈“观看电视足球比赛的观众”时,则需要大约50名不同人口学背景的受访者。
  2. 相比访谈大量“单一人口学背景”的用户,你可以只访谈少数几个“背景各不相同”的用户。
    当然,目标群体应该有一些共性,但是在年龄、收入、兴趣等方面背景多样,这样你就可以对这个研究课题有更广泛的看法/视角。
  3. 通过预算来确定具体的访谈人数。
    请记住,一场访谈需要大约1小时,但分析一场的访谈数据则需要3小时。如果你的预算很少,最好改成简短的非正式访谈,而不是放弃访谈。

过度精细的定性研究是对资源的浪费。 最好的结果来自于“不超过5名”的用户,并在你的预算内开展尽可能多的小规模测试。
——雅各布·尼尔森(Jakob Nielsen)

 

4. 构建强大场景

每次访谈都需要周全的准备。从一开始就列出能满足你所需信息的所有问题。同时写下能想到的所有问题,别在乎对错。仔细思考你的访谈目的以及想了解的具体信息。列完问题后,请遵循以下规则:

  1. 确保问题从“宽泛”到“具体”。
    这样可以帮助受访者进入使用场景、确认主题并准备好提供更深思熟虑的回答。尤其是在访谈开始时问一些宽泛的问题,可以帮助受访者放松下来,敞开心扉,进而展开更详细的对话。
  2. 关注用户。
    关注他们的主要目标、动机、习惯和痛点。尽量避免与研究目标无关的话题。
  3. 尽量减少引导性问题。
    好的问题是“你使用外卖软件吗?”, 而不是“你多久使用一次Uber Eats?”
  4. 避免在访谈中加入你的观点。
    访谈结果不应取决于访谈员的技巧或行为,也不应取决于其他外部环境因素。

 

5.不要慌,保持变通

尽管你很可能为用户访谈制定了一个完美的计划,但你依然无法预见一切。对访谈中的细微变化保持开放心态,不要害怕在访谈中提出新问题。在适当的时候引入新的主题是非常受欢迎的,你也可以随时调整问题的顺序。

请确保你能控制整个访谈节奏,并保持逻辑性,不要在话题间随意跳转。为此,请遵循以下规则:

  1. 做好准备。
    在访谈前准备好你已经列出的问题清单,确保能够更好收集你想获取的信息。
  2. 牢记计划。
    有经验的访谈员会对访谈流程烂熟于心,这样就可以在访谈的任何阶段进行问题的灵活切换,且不会丢掉研究目标。
  3. 不要执拗于当前的访谈场景。
    如果谈话偏离了主题,礼貌地重新聚焦,必要时甚至可以换个话题。关键是保持灵活性。

 

6. 尽可能客观

用户访谈法的短板在于很难完全客观,因为人们倾向于用自己的观点取悦其他人,这会对访谈结果产生负面影响。我们很难判断受访者是否在说真话,或者他们是否能够明确说出他们想要什么。

看他们做了什么,而不是听他们说了什么,绝对不要相信人们预测自己未来可能会做的事情。

——雅各布·尼尔森(Jakob Nielsen)

为了应对这种风险,试试这样做:

  • 减少研究中的人为因素。
    由于每个问题都会使受访者承受被他人评判的压力,受访者的回答或多或少都会受到访谈员的影响。因此可以借助第三方工具来收集反馈,例如UserTesting 或 Lookback(用户在线测试工具),使流程自动化以便减少人为干预。
  • 找不熟悉的人来参加访谈。
    如果找来熟人,他们更有可能以你理想的方式帮助你完成用户研究。理想情况下,建议由不了解项目目标和肯定不知道潜在设计问题的人员来参加访谈。
  • 人们所说的与他们所做的往往是两回事。
    尝试将访谈与行为观察(或简单的可用性测试)结合起来,以便有机会看到用户的真实操作,进而验证用户所说的是否在实际操作中真的发生了。

 

7. 多听少说

在追问具体细节之前,允许受访者用他们自己的方式自由发言,即使你对答案不满意也不要轻易打断他们。不要急于发问,耐心倾听他们的意见,根据需要随时调整问题或温和地提醒他们回到本次访谈的主题上。

优秀的访谈员都懂:倾听比提问更重要。

虽然向受访者提供访谈相关信息很重要,但是如果整场访谈主要是你(访谈员)在说话,那么你很有可能无法真正了解受访者的想法。

 

我的想法和评论(最后)

我认为自己是一个完美的访谈员吗?不!访谈需要练习,就像生活中的其他事情一样。

随着你的访谈经验越来越多,你犯的错误就会越来越少。所以,在你直接开展访谈前,先观察身边更有经验的同事是怎么做的。或者你可以试着找一位导师来帮助你。

以上经验帮助我一次又一次地避免了代价高昂的错误,还让我的访谈过程更加高效。希望你也会发现它很有用。 好运!








文章来源:UXRen 作者:Karolina Olejniczak

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

3E法:让用户表达最真实的体验与情感

涛涛

随着智能系统能够随时随地为用户提供应用程序和服务,普适计算 (Ubiquitous computing) 已经成为了未来的技术趋势。同时,为了提升终端用户的接受度和体验的愉悦感,智能系统还应当察言观色,而这就意味着要对用户的情绪敏感性进行调研和设计。

3E的全称是Expressing Experiences and Emotions,翻译过来就是:表达体验和情感。

  • 3E法是一种在用户使用产品或服务时,从用户情绪及相关情境中收集有价值信息的情绪评估方法。
  • 3E法是一种自我报告法, 图形和文字形式皆可。
  • 3E法常常会与另外两种情绪评估方法 (SAM情绪量表和Emocards测量法) 比对使用来进行初步验证。
  • 通常我们还会对3E法分析的结果进行信度评估。

基于上述原因,想从复杂的用户体验中获得洞见,3E法是一种很有前景的方法,它还可以作为其他常规方法的补充。

 

3E法是什么?

3E法是一种自我报告法,评估过程中,会为用户提供一个人形轮廓的图片模板 (如图所示),用来表达他/她的情绪和体验。

参与评估的用户需要在这个人像上画一张脸,将自己的情绪投射到人像上。后续的版本中,人像还包含两个气泡 (类似于漫画中的那样),气泡用于表达内心的想法 (画出面部表情或写下文字信息),方形气泡一般用来承载语言表达。

3E法提供了一种用书面方式 (如图画) 来表达情绪和体验的方式。我们假定这种方法能够帮助不同的人表达他们的感受,因为他们可以选择自己喜欢的表达方式。

此外,作为一种投射测试,3E法还能够帮助用户表达负面情绪。投射测试的基本理念是向用户提供中性刺激,并要求他们分别进行回应,比如解释刺激、填空或者进行联想。这个方法可以帮助用户没有顾虑地表达在其他评估方法 (如访谈法) 中难以表达的负面情绪。

 

优势

3E情绪评估法能够在不给用户带来太多负担的情况下,收集用户感受和所处情境 (包括精神上、身体上,甚至可能是社会背景) 上有价值的数据。

  • 除了纸笔之外,这种方法不需要更多的工具。但在使用这种方法时,有些用户会担心自己的绘画能力。
  • 向用户说明“3E法并不要求任何特殊的绘画技巧”是很重要的。简洁、粗略的图像和专业的手绘都是一样有效的。
  • 3E法还允许用户口头(或书面)作出回应。

另一方面,3E法提供了丰富的素材,这是该方法的宝贵之处,同时也是薄弱之处。对研究者来说,分析这些材料是一个耗时且费力的过程。此外,如何解释这些绘画也完全取决于研究人员的理解。在之前的一项研究中,三名研究者独立分析的结果只具有中等程度的相似性。但如果将3E法作为其他研究方法 (日志或表格填写) 的补充,3E法分析的结果便可以与主要研究方法获得的信息进行比对和验证。

此外,在随后的访谈中还可以与参与者一起回顾3E模板中的图像,明确这些内容背后的含义。同时,用户所画的图像也会帮助他们在访谈中更轻易地回想起评估过程中体验过的情绪。不过,如果还能够建立一种评分体系来协助分析,将会更有帮助。

3E法已经应用在不同移动端应用的评估中,而这种方法也适用于发生在真实场景且无研究者在场的智能系统上。比如,我们给手机安装了能够感知情景的「传感器」,那么这个定制手机上的app使用也可以采用3E法来进行情绪评估。这些App基于射频识别标签 (RFID tags),通过手机读取物理标签来获得时间、地点、交互内容等情景(上下文)信息。被测试的用户可以在实际场景中多次使用这个系统完成不同目标之后,完成3E情绪评估。



文章来源:UXRen 作者:Juan Fernando Pacheco

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


2021年都过去一大半了,我才知道这个流行趋势,可以这样用!

seo达人


1.图标

对于UI设计师,最早被我们发现的场景应该就是图标了,比如像这种:

图片

也有一些产品有落地使用,比如喜马拉雅:

图片

当然,我觉得结合效果最好的还是韩国这款app——naver的底部图标:

图片

效果非常棒!

图标结合毛玻璃效果是ok的,但是玻璃如果太透明,很容易导致识别度产生问题,所以这也是我们需要特别注意的点。

 

2.卡片

最近逛了很多be上的ui作品,发现有一个界面元素经常结合毛玻璃效果使用,而且还挺好看,这个元素就是卡片,比如什么银行卡啊、会员卡之类的,我们看看效果:

图片

图片

这里需要注意一点,毛玻璃的卡片还是需要和色块去配合使用的,比如后面还有一张普通卡片,或者后面有一些色块,这样效果才会比较理想。

 

3.壁纸

以前我做过手机os,经常需要制作壁纸,做壁纸是最需要时刻关注流行趋势的,而且壁纸可发挥空间非常大,没有太多规则和限制,只需要把好看的效果制作出来就可以了,比如像小米的壁纸就很好的把毛玻璃效果给融进去了:

图片

效果还是非常不错的。

 

4.启动图

因为是流行趋势,所以现在有一些产品的启动图也结合了毛玻璃效果,比如像钉钉啊:

图片

腾讯文档啊:

图片

等等吧,这也是一个非常棒的视觉触点,尤其是在和数字结合使用的时候,简单又出效果,有机会大家可以尝试一下。

 

5.活动图

当然,什么风格那都少不了活动图啊,那效果也是杠杠滴,看下往上的一些优秀组品:

图片

一般都是用在屏幕啊、板子啊等等地方,上面再加点信息,显得画面材质丰富,耐看度也会比较高一些。

视频

除此之外,视频多媒体领域夜也经常使用毛玻璃风格,其中最早还是应该在微软的Fluent Design System兴起的:

图片

图片

现在已经在很多产品宣传视频上都有用到多了。

 

总结

除了以上这些地方,我们平时做一些排版包装,比如封面图啥的:

图片

图片

咔咔一结合,那也是很出效果滴。

特殊材质一会还会流行很长一段时间,大家可以多多尝试,做出自己理想的效果,震惊自己!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》2021年都过去一大半了,我才知道这个流行趋势,可以这样用!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

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

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


搜集了50多款产品,发现启动页原来有这么多做法,远比我想象中多呀!

seo达人


图片

后来自己做启动页的时候,也只放了一个图标,客户说看看能不能用别的方式,然后我就去研究了一下,看看到底启动图有多少种做法。

 

1.图标 

第一种就是我们最常见的,也是启动图成本最小的一种方式,图标直接往上面咔咔一放,就像下面这种:

图片

但并不是所有的都是白色底哦,有一些会使用全屏色块的形式,比如这些:

图片

这样的冲击力会比较强,但也需要注意,颜色别整太刺眼了,那样会看着很难受的。

 

2.solan

有一些平台会宣传自己的使命、价值等等,比如最常见:

知乎: 有问题就会有答案

猫眼: 娱乐看猫眼

糗事百科:快乐你就不孤单

效果图如下:

图片

这其中,有些修了字体,有些做了排版等等,当然他们并不是只放solan,页面下方还是会放上图标。

这种突出价值、使命的方式也是非常不错的,也是启动图常用的一种表现形式。

 

3.插画

接下来的方式是突出插画,用自己的形象延展一些好看的插画,比如咸鱼:

图片

再比如躺平:

图片

再比如唱吧:

图片

等等,这种方式会让品牌更加生动、丰富,一张好看的插图会让用户印象深刻。

 

4.图形

图形是在app设计体系内非常重要的一个元素,比如我们图标本身就是一个图形,像qq这种,让其图形外轮廓与一些效果相互结合:

图片

达到一种冲击较强的效果,以此来凸显图形本身。

再比如,我们还可以利用图标来延展图形,就像uc头条鹿角延展出的图形:

图片

或者像moo music延展出两个圆形,表达星球的含义:

图片

用图形延展做启动图,有一个很重要的优势,那就是设计感很强,让用户感觉很高级很舒服!

 

 5.图片 

还有一种方式就是利用图标来做启动图,一般会使用这种方式的,基本都是产品本身比较注重“图片“这个元素,比如像健身啊、交友啊、设计类产品啊等等,希望通过图片(比如异性图片,高质量作品)来吸引用户。

比如ui中国的启动图:

图片

再比如陌陌的启动图:

图片

都是使用图片作为主要元素制作的!

 

6.3D

现在3d这么火,3d的设计表现形式肯定是少不了的,比如下面这些:

图片

都是用了3d的表现手法,而且我觉得以后可能会有越来越多的产品选择这种形式,来增加冲击力和独特性!

 

总结

当然,不论启动图的侧重点是什么形式,插画也好、图片也好,都还是会放上自己的品牌图标,这是铁律,剩下的都还是有一定的发挥空间。
好了,以上就是看了很多产品之后,关于启动图表现形式的小总结,希望能给大家一点启发和灵感,做出适合自己产品的启动图,么么扔!

 

原文地址:心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》搜集了50多款产品,发现启动页原来有这么多做法,远比我想象中多呀!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

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

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


高级设计师最关键的能力是什么?

seo达人


 
   
 
这张海报最终被弃用了,因为它连客户最基本的显性需求都没有满足。 
 
二、客户的隐性需求通常有下面这些:   
 
1.好看。
即要有吸引力,能够吸引别人的注意,甚至是让他对宣传的内容感兴趣,比如一张食品类的海报,首要的功能就是要让看到他的人,产生想吃的欲望。这个需求客户一般不会说出来,因为这是他们默认的,毋庸置疑的。所以无论你的设计多有创意、有多少细节,先扪心自问,它好看吗?能让你产生兴趣吗?

 

  
 
有人可能又会说,好看和是否吸引人这个太主观了吧,每个人的审美都不一样,萝卜白菜各有所爱。我觉得这句话适用于层级比较接近但是风格或表现手法不一样的作品,相差很悬殊的作品不存在这个问题。 
 
 
2.层级分明
即画面要有主次、要有对比、要有合理的阅读逻辑,不能太乱、太拥挤。这算是比较专业一点的设计需求,很多客户提不出来,但是当你把一件看起来很乱、没有重点的设计给到他们时,他们也能感受到,因为他们其实看过很多同类型的作品,他们也能感受到视觉上的不舒适。

 

 

3.时尚
其实并不是非要与娱乐、服装、运动、年轻人相关的设计才需要时尚,我们可以看到现在各行各业的设计都在变得越来越时尚,比如餐饮业、母婴品牌、饮料品牌,甚至是医药和保健品牌。因为互联网已经全民化,大家的生活方式和审美都发生了很大变化,而且几乎各个行业都会有年轻人参与进去。

 

 

 

所以如果做设计还只是停留在把必要的元素放上去,把重点信息清晰的展现出来,把版面排得干净整洁,把颜色搭配得舒适这些层面,那么离成为一个高级设计师还有一些距离。 设计也需要与时俱进,要不断尝试新的构图、新的字体、新的设计风格、新的排版方式、新的配色等等。

 

 

4.精致的细节
同样,大多数客户都不会明确提出这个需求,因为他们最看重的是大方向、大感觉,而且他们不知道细节应该怎么处理才是好的,但是如果你的作品细节很粗糙他们是能感觉到的,他们能看出你的设计品质感不够,特别是在有对比的情况下时。

 

  
 
所以,在字体选择、字体设计、素材质感、文字行距、色彩搭配、图形轮廓、背景的处理、排版的平衡性和灵活性等方面,我们都要尽量做好一点。
下图是开头列举的游戏海报设计方案二,这个方案增加了视觉图形部分,从而加强了海报的游戏属性和视觉冲击力;内文部分进行了归纳整理,使之更清晰、更易阅读,基本上完成了客户的显性需求,但是仍没有得到客户的认可,因为还有很多隐性的需求没有表现出来。

 

 

下图是调整后的方案三:

 

相比方案二,该方案的做了如下优化:  
 
1、层级关系更加分明、视觉更聚焦。
让主视觉和主题占据更大的空间,以提升画面的视觉冲击力、加强主次对比,核心内容虽然也重要,但是并不能让它成为视觉上的核心,保证他有足够高的可读性就好。

 

 

 

方案二的主视觉部分,人物元素分布在左右两侧,标题在中间,视觉很分散,方案三则把人物移到了中间,标题放在人物下方,视觉变得更集中了。

 

 
 
2、细节更加丰富、精致。
比如主视觉部分元素做了精简和美化,看起来比之前更干净、更好看,“招募令”这几个字重新做了设计,使之变得更突出、更有设计感。

 

  
 
内文方面也重新调整了排版的方式,从上下结构变成了左右结构,使其显得没那么单薄,同时也增加了很多细节,使之看起来更美观、逻辑更清晰、更灵活。

 

 

另外,背景的处理也做了优化,重新找了素材使其变得比之前更丰富、更细腻。

 

 

 
3、整体更美观、更能打动人。
因为主视觉部分更突出,让人很快感受到游戏的氛围、以及清楚具体上什么游戏,还增加了更多游戏元素,所以海报的代入感更强了。
另外配色也变得更舒适、更时尚,再加上各种细节的增加、排版版更加有趣、整洁,所以海报也变得美观了不少。
在答谢礼部分还增加了图片,不仅更有打动力,也比单纯的文字更美观、更丰富。

 

 

– 结语 –  
 
当然,不是所有客户的显性需求和隐性需求都是照我这么划分的,这不重要,重要在是, 我们要知道,便不是客户说啥就是啥,你一定要想得比客户多,要走在客户前面,挖掘出他们的隐性需求,你要知道优秀的设计该具备哪些特质。
 
想成为一个高级设计师,你必须具备正确理解设计需求以及准确表现设计需求的能力。 
 
 
原文链接:站酷
 
作者:葱爷  
 

转载请注明:学UI网》高级设计师最关键的能力是什么?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

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

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




仪表盘(Dashboard)设计的6个要点,都帮你总结好了!

seo达人


仪表盘的3种类型

1、操作型Dashboard

操作仪表盘用于显示当前用户在产品中的状态,显示与时间相关的关键信息。

例如后台数据分析中,操作仪表盘包含:网站的活跃用户、热门社交推荐和每分钟浏览量等数据。

图片

▲ 在谷歌分析的实时仪表盘中,用户能一目了然地查看所有用户、新增用户等一系列数据。操作型仪表盘中通常包含一些简单的条形图、折线图等基本图表。

 

2、分析型Dashboard

分析型仪表盘用于向用户展示关键的数据信息,以数据为中心,并尽可能多地显示相关联的数据图表。

分析型仪表盘应该以关键的数据为中心,并尽量减少图形元素。

图片

▲ 在Manson Yarnell的仪表盘中,更注重数据前后的对比和关联性,并将这种关系通过图表的形式展示出来,通过对比,我们能更容易看到产品的数据情况,比如浏览量是比上个月涨了还是降了、涨了多少。

 

3、平台型Dashboard

平台型仪表盘用于让用户访问社交平台上与帐户相关的控件、工具和分析。

图片

▲ 在YouTube的后台页面中,通过简单的初始视图就能显示用户的最新视频以及每个视频的播放量等数据信息。

在侧边栏,用户还可以访问大量的工具和帐户控件,包括视频管理器、频道状态等,YouTube让操作变得简单,用户能完全控制。

 

仪表盘的6个设计要点

1、确定用户需要什么

首先要了解受众。因为只有了解用户,才能够回答一个关键的问题:用户希望从这个仪表盘中得到什么?

要先明确用户希望在仪表盘上想到看到的几个要点,然后应用F型和Z型阅读模式,构建相应的页面。如果仪表盘上的信息太多,有可能会让访问后台的用户不知所措。

通过将所有的信息和数据合理地组合到一个页面上,再使用适当的留白来平衡画面,为数据创造呼吸空间。

 

2、在仪表盘中添加互动

在仪表板上添加响应性互动,可以让用户自己决定去关注哪些数据。让用户能够控制仪表盘,很大程度上更符合用户差异化的需求。

▲ Cuberto将后台仪表盘设计成可以左右滑动的样式,这个设计有点像可以左右滑动的两块黑板,既可以看到两部分不一样的内容,也能通过滑动展开看到更多的细节内容。

 

3、以关键数据作为先导

有的仪表盘设计得很简洁,用大尺寸且加粗的字体来展示数据,让用户更清晰地明确信息。

图片

▲ 这个Dashboard版式时尚,风格上很简洁,有很多留白和加粗的数据。这样呈现数据可以帮助用户快速看到哪些内容是重要的,节省用户时间。

 

图片

▲ 整个页面通过清晰的图表形式呈现信息,我们能明确看到数据的变化情况,虽然没有使用太多的文字信息,但主次分明的数据做到了很好的透视。

 

4、规划仪表盘信息架构

在设计仪表盘时,考虑信息架构和层级结构,来确定需要哪些内容卡片以及这些卡片要放在什么位置。

图片

▲ 深色背景的使用在组件之间形成很酷的对比,关键数据占据中心位置。左侧导航栏和右侧卡片式信息在设计上遵循了标准的格式塔原则。

 

图片

▲ 这个加密货币仪表盘以账户余额为线索,将最重要的信息放在用户第一眼就能看到的地方,其他信息会根据内容重要程度,合理调整在页面的位置。

 

5、使用多样的视图样式

仪表盘设计也需要变化,通过使用不同的视图布局来保持整体的简洁。

图片

▲ 在这个仪表盘中,用户可以按日期筛选数据、在餐厅之间切换,还能看到关于预订、付款、员工轮班和外部供应商等很多种信息,同时整个页面仍然能保持很干净、简洁。

 

6、使用一致的设计方案

通常仪表盘中包含各种数据图表,设计样式上很难做到统一,但这并不意味着仪表盘不需要考虑视觉美观。

图片

▲ 协调的配色和多样的图表样式让整个页面看起来很有设计感,环形图、饼图和地图的搭配让数据呈现更丰富。

 

图片

▲ 这个仪表盘通过明亮、统一的配色,让数据图表更加清晰、整洁,导航更加明确。

 


图片

慢慢来比较快,希望对你有所帮助!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》仪表盘(Dashboard)设计的6个要点,都帮你总结好了!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

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

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



这个简单的界面我是这样进行修改的

seo达人


图片

下面通过发现问题和案例修改来进行分析(案例来源于黑马家族内部学员的初次作业)。

 

发现问题

好了,看完修改前后的对比之后,我们开始进一步分析,从上到下一起来看一下吧!

 

头部导航栏区域

功能层面来说,发布既然运用高亮的处理,证明该功能是相对比较重要的,放在手势盲区操作体验不是很友好。

图片

右侧的两个功能图标距离太近,点击过程中容易造成误操作,两个图标的视觉不平衡,不能以高度来定标准,要看整体的面积占比。

图片

最后,发布、搜索、功能图标之间的间距没有做规范设计,导致设计不够严谨,视觉协调度和节奏感没有呈现出来。

图片

 

顶部分类导航区域

这个部分问题不是很大,类别之间的间距可以适当增加,如果是可以左右滑动的,末尾最好再新增一个,把可滑动的样式体现出来。

图片

 

Banner 图区域

轮播 Banner 图采用通栏的处理,会将整个界面一分为三(头部区域、Banner 区域、作品区域),如果界面边距较大的时候,这样处理不是很理想,会使得整个界面不够连贯。

图片

轮播点的处理不建议使用灰色来表现,不仅区分不明显,配色上面也显得不够干净整洁。

图片

Banner 图本身的质量也是需要注意的,站在输出作品的角度来说,图片的质量会影响整个作品的气质。而且这个图没有任何主题,设计的真实感无法得到体现。

图片

 

作品(菜谱)区域

整个界面篇幅较大的区域就是推荐的各类菜谱,第一眼看过去,是不是图片显得没有食欲啦!针对美食类作品,只有食物本身的食欲感才能吸引用户去点击学习。

图片

菜谱名称、作者信息、收藏与收藏数的显示亲密关系处理不合适,关联性被分断了。

图片

间距留白没有掌握好数字关系,显得比较拥挤。直角的封面图显得有些生硬,亲和力不是很强。

图片

 

底部标签栏

底部标签栏最主要的就是图标设计,图标设计的规范性需要注重一下。比如针对线性图标来说,描边粗细的统一、圆角值的统一和风格的统一等需要重点对待。

图片

其次就是点击状态和默认状态的区分,图标利用颜色深浅进行区分也是可以的,文字区域的区分也需要进行深浅的对比。

图片

以上便是针对这个界面发现的一些在 UI 层面的问题,接下来我们一起针对这些问题进行修改。

 

案例修改

针对罗列出来的问题,下面进行一些修改,设计属于主观表达,仅代表黑马哥自己的想法。不足的地方欢迎大家留言指正,互相进步。

 

头部导航栏区域

为了方便用户发布内容,我将发布按钮移出导航栏,放置在底部标签栏。将右侧的两个功能图标拆分为左右两侧布局,优化了间距和布局细节。

图片

功能图标绘制上面三条横线做了长短变化,显得更灵动。整体图标的高度要比通知图标的小一点,以此来平衡它们之间的面积差异。

图片

 

顶部分类导航区域

这个部分优化了文字之间的间距,然后通过字体大小和颜色深浅来区分点击和默认状态的差别,将短线装饰改为弧线,弧线作为符号基因运用到底部标签栏的图标设计中,这里是作为视觉符号的延续。

图片

 

Banner 图区域

轮播 Banner 图本身没有做,本期案例只是 UI 层面的修改。优化了 Banner 图的比例,采用 8:3 的比例进行计算,取 4 整除的高度数值。轮播点的设计通常有数字、小圆点、小短线、进度形式等,这里采用进度形式来表达。

图片

 

作品(菜谱)区域

这个部分调整比较大,从内容到布局结构都做了调整。首先将固定尺寸的封面图改为宽度固定高度自定义的瀑布流设计,满足用户的不同拍摄需求,对图片设置了圆角处理,增强亲和力。

图片

将标题、作者信息、收藏数据统计等信息进行整合,集中布局展示,增加内容之间的亲密关系。新增了标签,由于菜谱种类较多,通过标签更容易搜索到同类菜谱。

图片

收藏图标加数字来体现之前的文字表达形式,用户更容易理解,采用爱心图标既能表示喜欢也能带有收藏的作用,点击欲更强。

图片

单行标题适配为最多两行显示,方便用户为自己的菜谱名称增加修饰词。这里需要考虑最大值的情况,设计的时候需要体现出超出最大值的设计样式。

图片

最后就是选择了拍摄质量更好的图片来填充,作为作品输出来说,配图的质量还是至关重要的。来看一下这个部分的最终效果,对比一下就可以感受出前后视觉感的差异。

图片

 

底部标签栏

将发布按钮布局在中间位置,做突出形式,吸引用户发布内容,丰富平台的作品量和提高用户参与度。可以布局在标准的底部标签栏内部,也可以做凸出显示,这里尝试了两个版本。

图片

优化了图标设计,统一了描边值和圆角值,用小弧线作为视觉符号进行点缀。点击状态换成面性图标,区分更加明显,显得也更为成熟稳重。文字需要体现当前状态和默认状态的差异,这里使用品牌色来区分,也可以使用深浅不同的灰色来体现。

图片

 

完成

通过对发现的问题进行调整之后,完成了最终的设计案例优化。这个案例比较简单,通过案例想要说明的点是:无论简单还是复杂,都要考虑好每一个细节的深入,也要对每一个元素的设计有自己的设计想法。每一个界面都要体现出设计规范、设计质量和自己的设计态度,只有作品成熟才能说服别人,获得认可。

图片

本次案例修改的大体流程是:分析问题所在、组织优化思路、调整内容结构、设计高保真原型、填充内容完成最终 UI 稿。

图片

最后,感谢大家的阅读学习,希望对大家能有一定的帮助,后续将会继续带来更多案例的修改分析,我们互相进步。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》这个简单的界面我是这样进行修改的

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

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

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



配色 | 总监说颜色丑,我调了调确实好看多了!!

seo达人


图片 
我曾经也碰到过这个问题,在动手之前,或许脑海里会有个大致的色彩感觉。但实际上软件一操作,发现怎么配都很难配出特满意的色彩。
其实这种属于正常现象,更多的是经验层面的缺乏,只要多练习,慢慢的这种眼高手低的感觉就会越来越少。
图片 
并且练的多了后,发现配色真的没那么难,只要有一点积累,有一点审美,稍微掌握一点方法,就能让自己在配色的能力上有个很大的改善。
图片 
审美跟积累很早之前的文章里头其实就说了,可以多建几个画板,把不同的色彩归类收集起来,分析这些色彩的饱和度及明度,逐渐感受到色彩的张力。
 
图片
图片 
人有着很强的适应环境及学习能力,比如你在一个地方呆长了,其实口音也会越来越接近当地。
审美也是一样,只要你不断地去收集、积累那些真的很美的图片,那么你的审美也会发生改变,自然也会越来越高。
比如以前你认为这样的配色就很美,视觉冲击力强
图片 
但后面慢慢发现,原来这种平淡的才是惊艳之作,非常的耐看。
图片 
审美提升上来了,其实剩下的就是靠大量的练习以及方法的积累。练习也很简单,无非是多做一些Redesgin,多做一些概念方案。
Dribbble上也有非常多的案例可以参考,比如下面这种
图片
提升审美需要依靠点滴积累。
而方法的积累,其实真的就是三点。只要把这三点掌握好了,配出来的颜色都不会太low,显得较为高级。 
 

第一点:颜色不要花

有些同学总是认为配色嘛,肯定要多配几种颜色,才会美。
但其实错了,颜色配的越多,越显得脏乱,并且对设计师的色彩能力也要求越高,ta必须要把所有的颜色选到一个最大的公约数,搭配起来才能非常时尚。
图片
一般能像上面这样的,能同时hold住三种颜色同时在一个画面上的,大多数也都是王者段位了。
如果自己作为青铜、白银级选手,我建议还是首先要从控制颜色的数量还是入手。 
 
控制的不好,就是下面这个例子:
图片 
总结:控制色相数量,增加色彩明度梯制  
先把颜色的明度系数理解到位了,再理解不同色相带来的情绪。同一个画面色彩越多,越难掌控,而且也会让人视线越不知道放哪,产生一种烦躁焦虑感。
比如看看这些作品,高级都是因为色彩被控制的很好
图片
图片
图片 
再来几组比较花的,是不是就要掉档次的多?
图片
图片 
 

第二点:不要脏。

好看的颜色会让人引起共鸣,不好看的颜色一眼都不想再看。脏脏的颜色会让人觉得这个东西不高级,不够养眼。
那么什么颜色会显得脏?带大家看几个辣眼睛的:
1、饱和度中性的重色 ❌
图片 
2、饱和度过高的中性色 ❌
图片 
3、饱和度过低的浅性色 ❌
图片 
上面这几种辣眼睛的情况,咱们要尽量避免。
 
重色要么为偏灰色,要么带强颜色属性;中性色饱和度尽量需要往下收,收到直到比较温和为止;浅色的色彩尽量明快饱和度高一点,不要过灰,不然也会显得脏。
比如下面这些改好了的。
1、重色系 ✅
图片 
2、中性色 ✅
图片 
3、浅色系 ✅
图片 
再对比一下上面的几个辣眼睛色块,发现是不是差别还挺大。
 总结:根据颜色明度来控制颜色的饱和度  
说到这儿,其实学过美术的同学应该都知道,这个跟画色彩作品差不多,亮部尽量多给一些鲜艳的色彩,中间层尽量灰下去,暗部色彩可以稍微丰富一丢丢。
图片 

第三点:颜色要有主次之分,什么是主色,什么是次色,要分清楚。

在实际业务场景,非纯工具型应用,很难只用到一种色彩,因为不同的功能需要使用不同的色彩来进行区分。
因此大部分实际的界面设计需求当中,我们还是要用到两种到三种的色彩。
图片 
不过在搭配的时候,需要注意的是,颜色的主色跟次色一定要显而易见可以区分得清楚。
其中主色应该占据60%-70%及以上的面积,次色加在一起,不可超过主色的面积区域。
图片
这样做的原因,也是为了防止眼睛失焦,导致审美疲劳。色彩越多,主次越难分清楚,眼睛对于信息的视觉需要越耗精力,所以自然看着不舒服。
总结:让页面的色彩主次显而易见。 
 
这一点在室内的装潢上,也有讲究。
室内设计讲究的主次色搭配,黄金配色比例70% : 25% : 5%;
图片 
70%的基础色,包括墙面、地板和天花板。一般情况下,同一空间的这三者颜色尽量控制在2种,最多不能超过3种(毕竟现在很多人喜欢涂一面有色的墙)
图片 
比如你发现这些很好看的室内设计图,都差不多是这样。从室内设计的装潢里找取配色灵感,也是不错的一些选择。
图片
上面的这些,就是最重要的三个方法。把这三个方法掌握了,其实配色起来就容易多了,而且不容易犯错误。 
 
另外,好的习惯也很重要
另外方法很重要,但习惯也不可忽视,所以还是得养成一些比较好的配色习惯,这样才能最快的成长,巩固自己对于配色的认知以及理解。
比如多收藏美图,提升审美。这点虽然很不起眼,但对于培养自己的审美,是有着绝大的好处的。在收藏了100个不同色彩的图板之后,相信你就能感受到其中的差距了。

图片

 

 

另外在初期阶段,哪怕按照上面的方法去调整了。还是感觉自己配出来的颜色总是缺了点什么。那么不妨去吸一吸别人的颜色,在别人的颜色上借鉴。

图片

图片

 

 

颜色无非就那么几种,多吸一吸也不是啥坏事。
比如你现在要让我设计一个绿色界面的UI,我肯定会先去吸一下微信的绿色,跟360的绿色,然后结合这两个绿色,做一下微调,搭配出一个崭新的绿色。
图片 
毕竟是在巨人的肩膀上前行,自然也不会太差。 
 
还有,理解色彩的情绪
最后一个,就是配色前的思考与判断也很重要,色彩的情绪需要与实际的场景想吻合。不要做出跟场景预期不符合的颜色,高端场景用大紫大绿不合适。

图片

 

原文地址:UX小学(公众号)

作者:小学鸭

转载请注明:学UI网》配色 | 总监说颜色丑,我调了调确实好看多了!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

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

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



日历

链接

个人资料

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

存档