Vscode: 整个UI的肖像中的重量和颜色使用不一致

创建于 2016-06-22  ·  314评论  ·  资料来源: microsoft/vscode

在x2上查看带有UI的各种图标的下图,并附上一些注释。 这绝不是详尽无遗,但包含以下主要图标:

/ cc @bpasero

普通的留言

  • 由于在整个UI中很少使用颜色,因此它特别引起人们注意红色和绿色的图标。 清晰的输出不应具有特别强烈的视觉效果imo。

    探险者

  • 为什么文件夹用棕色而不是白色填充?

  • 为什么全部折叠按钮具有蓝色- ,为什么它与状态栏中使用的蓝色不同?

image

搜索

  • 为什么红色的x与其他地方使用的x样式不一致?
  • 为什么透明图标与其他图标具有不同的浅灰色?

image

  • 为什么这些图标周围特别是深色边框?

吉特

image

  • 勾号图标为何具有不同的权重,为什么它不牢固?

除错

image

  • 为什么调试输出图标这么短?

image

  • 为什么停用断点按钮具有一个用黑色填充的圆圈(相对于其他地方使用的透明)

image

  • 为什么关闭全部关闭按钮填充,使其与全部折叠不一致?
  • 为什么全部关闭时没有全部关闭按钮,黑色边框?

image

问题

image

编辑

image

debt icons-product ux

最有用的评论

这是此商品的状态更新。 在最近的几次迭代中,我们一直在探索一些不同的概念来进行图像重新设计。 我们希望通过这些探索实现的主要目标是:

  • 统一样式,颜色和大小的图像
  • 统一我们的图标系统
  • 现代化UI并使其保持一致

考虑到这些目标,这是我们内部一直在讨论的最新探索。

轮廓样式

这种样式从Microsoft设计语言(MDL)图标中获得了很多灵感,该

立体风格

这种风格是我们当前风格的演变,同时仍然很熟悉。 它使用与以前样式相同的图标隐喻,并使所有笔触/间距一致。

公开问题

这些都是早期的探索,但是我们很乐意在迭代过程中获得社区的反馈。 我们目前尚无完成这项工作的目标日期,因为我们不想在未正确验证的情况下急于寻求解决方案。 我们还将对这些探索进行用户测试,以进一步验证它们。 以下是一些我们需要回答的开放性问题:

  • 我们选择一种样式还是两种样式?
  • 我们是否允许扩展名覆盖我们的默认图标(类似于文件图标主题)?
  • 如果我们允许图标主题,我们如何处理活动栏中的扩展程序图标(这可能会引入冲突样式)?
  • 如果我们允许使用图标主题,那么与文件图标主题相比,如何管理这些主题(这将引入第二个“ icon”主题)?

所有314条评论

+1,我们的图标集需要拥有并修复它们的冠军。 我还要补充一点,我从来都不是我们在活动栏中使用的图标的忠实拥护者...

@bpasero特别注意活动栏图标; 大小,样式?

是的,活动栏提供的功能可能较小。 基本上,我们使用的所有图标都差不多有4年的历史了,一般的整容可能很酷,可以使它们全部同步。

碰巧的是,我们的作品中有一些与新的Microsoft设计语言相匹配的新图标(使用笔触而不是笨重的填充的更干净,更现代的图标)。

大点@蒂里亚尔。 我认为,在最近有关面板,颜色等的讨论中,我们应该研究UI和UX的大修。 随着产品的发展,我们已经建立了足够的UX和UI债务,因此我们需要解决它。

我还必须承认,我不是集成终端中最近引入的图标的忠实拥护者:

image

它们似乎根本不适合我们的其他图标集。 我还发现“隐藏”图标存在问题,因为可以很容易地将其与下拉菜单混淆。

@bpasero图标的一致性将得到及时解决,因为@ bgashler1提到这是我们前进的方式(虽然可能有1或2个版本不一致)。 @ bgashler1实际上想出了一些看起来很漂亮的图标,这些图标的顶部带有一个迷你终端(>周围的框)和+/-符号,反对这些的说法是图标(+/-)的最重要部分是最小的。

有关新的关闭图标的讨论,请参见https://github.com/Microsoft/vscode/issues/8018

@bpasero在一致性问题上,我完全听到了您的声音。 我们可能要做的是将这些图标移植到我们的旧外观(较重的笔触粗细)中,以在我们等待新的图标集时保持一致。

我有兴趣看一下可用的图标集👍

@ bgashler1对此有任何更新吗?

我想解决这个问题,但是首先要把重点转移到其他一些事情上。 还有一点减速带,我可以亲自谈谈。

黑色边框在灰色背景下显得特别笨拙。

image

https://marketplace.visualstudio.com/items?itemName=rebornix.nova

@Tyriar这是一个光环,您是正确的,它不属于这里。 我们最终将把它们淘汰。

恕我直言,从美学角度来看,图标到目前为止是编辑器中最糟糕的部分。 确实应该更认真地对待他们,这个问题已经有1年多的历史了!

只需查看用于“输出”面板的图标即可:

screen shot 2017-09-25 at 20 26 51

几乎所有可能出错的事情都发生了:灰色,样式和形状不一致的阴影(X图标),最大化/未最大化图标不能正确说明其功能,“切换输出滚动锁定”图标似乎直接取自一个iOS密码管理器之类的东西,我更喜欢通过一些自定义CSS隐藏它,而不是向我显示它。

另外,整个“点击放大”效果相当分散注意力,我想不到任何其他使用它的应用程序。 只要看一下,告诉我您是否喜欢观看:

2017-09-25 20_50_52

感谢您的评论@fabiospampinato。 不幸的是,我们现在没有能力使用图标解决问题。 我们希望在某个时候,但是正如您正确指出的那样,这个问题已经存在了一年多。

/ cc @chryw

解决此问题时,我们还应该做的事情就是在各个组件之间共享图标图像文件,这样我们就不会在内存中加载多个相同的图像。

也许应该用所有需要的图标扩展八进制。 这样,扩展程序也可以使用它们。

一个可以解决的问题,尽管较小:我需要为扩展名制作一个refresh图标,并且我想使用VSC使用的扩展名,所以我必须找到实际文件并将其嵌入到延期。 如果该图标更改,则我的扩展程序的图标会感觉不一致。 如果它可以引用VSC的用途,则不会发生此问题。

这样做的局限性是所有图标必须是单色的,除非它们随后通过CSS组合在一起。

造成这种混乱的根本原因是,图标是作为svg文件的文件夹引入的,然后从很早就以松散文件的形式插入到任何地方。 我们应该采用更集中的方式来提供图标。
我非常喜欢@Tyriar的建议,即图标应在组件之间共享。 我也喜欢@fabiospampinato调出八进制和单色(如果需要,可以使用+潜在的CSS样式)。

现在,就像@stevencl所说的那样,我们没有足够的带宽来正式解决此问题。 但就我个人而言,我的脑海中有一份大致的工作清单:

  • 确定格式以及如何使用图标

    • 图标字体(我认为社区不赞成使用此选项。但是,这是集中资产的最简单方法,我对这种方法更加熟悉)

    • svg

    • 服务像Octicons一样? 不是我的专业知识,但开发人员会喜欢这一点。

    • 无论如何,只是不要到处扔svg文件,不要使用两个svg文件进行主题化。

  • 让UX的网守监视“第一方”事务。

@chrisdias提高知名度

@chryw我想你的意思是@ fabiospampinato😜

@FabianLauer感谢自动完成...已修复。 对不起,噪音!

@chryw我喜欢这种推动图标优势的方法。 分配给我和甲板上的里程碑,以保持关注。
@chrisdias我们应该在UX会议之一中讨论这个问题

在#45765中提到,尚不清楚bin图标旨在删除,建议的主题可以覆盖UI图标。

这3个图标似乎由4个不同的人制作:

screen shot 2018-04-20 at 16 05 11

这个已有2年历史的期刊有进展吗?

我有办法为解决这个问题做出贡献吗?

我将开始整合我们的图标,使其大小和样式保持一致。

@fabiospampinato,如果您有任何想法/建议,我很想听听他们😃

@misolori当然,我会这样处理这个问题:

  • 与其调整某些图标使其与其他图标更加一致,不如将它们全部替换为另一组图标,这些图标从一开始就被设计为在样式上保持一致。 设计任何缺少的图标。

    • @ bgashler1提到了大约2年前,正在制作一些新图标,也许我们可以使用那些图标?

  • 仅使用“简约”图标,没有光晕,没有不必要的边框,没有颜色。 我假设上述图标集将具有这些属性。

    • 顺便说一句,我认为颜色现在也不一致地使用,在下面的暗按钮中,您可以清楚地看到蓝色的“减”字形,对于亮按钮,情况并非如此:

    colors_crap

    • 同样,明亮主题的图标(实际上是_some_图标)带有边框,黑暗主题的图标没有边框。

    screen shot 2018-04-24 at 18 33 56


  • 用我们需要的所有这些图标扩展八进制。 当前仅在使用单色图标时才能执行此操作。


  • 用现在扩展的octions字体提供的图标替换编辑器中使用的每个图标。

  • 将“点击放大”效果替换为其他内容。

    • 我个人觉得这让人分心。

    • 我在其他任何地方都没有看到它(如果有人可以将我指向其他使用它的应用程序,那么我将非常有兴趣了解它们)。

    • 目前,一些放大的图标对我来说看起来很模糊,我想那是因为这些图标不是矢量图像,如果是这样的话,新图标集就不会有问题了。

未来可能的发展:

  • 扩展作者可以/应该有一种方法可以轻松使用VSC本身使用的图标。 现在,这意味着找到VSC使用的实际图标文件并将其包含在扩展名中,这并不是一件容易的事,而且也不是完全面向未来的。 扩展八进制字体可以用来轻松添加此功能。
  • 我认为可以合理地假设将来在某个时候会在chrome / electron中使用彩色字体(https://www.colorfonts.wtf)。 如果出于某种原因需要彩色图标,我们可以使用它们。
  • 添加对覆盖所有图标的扩展名的支持非常容易,而不仅仅是文件类型图标。 现在这是无法正确实现的,因为扩展作者无法重用VSC使用的图标,因此他们的图标在使用上述假设图标扩展时显得格格不入。

我想我可以为我提到的所有内容提供帮助,但是我的设计能力非常有限,因此其他人可以更好地处理丢失图标的创建。

你怎么看? 😃

@fabiospampinato绝对同意所有这些建议,我相信我们应该能够解决所有这些问题。 我希望能够扩展八角形并添加缺少的图标,以便我们拥有一套完整的图标并将它们全部变为单色(这将减少重复项并有助于扩展/主题化)。 这就是@chryw可以帮助我们的事情

@misolori太好了!

我不确定这样做的“命令链”是什么,如果我们需要其他人的批准才能开始从事此工作,我不确定(我想说的最后一件事是为此分配我的一些时间,只是为了永远不要看到更改)合并)。 我还不清楚@ bgashler1提到的那些图标的状态如何,以及它们是否是为我们的目的而设置的最佳图标。 所以我想一旦你们弄清楚了这些事情,我就准备好帮您💪

@fabiospampinato下一步是我将在下一次同步时与团队讨论以达成共识并从那里开始。 达成协议后,我将通过后续步骤更新此线程。

关于其他Microsoft图标,这些是Microsoft设计语言(MDL)图标。 它们既轻巧又现代,但与当前的octicon集也有很大不同。 这也是我将与团队讨论的选项之一。 总结选项(感谢@chryw早先

  1. 视觉工作室
  2. Octicons
  3. MDL
  4. 或一套完整的

我更赞成2,因为他们很熟悉并且我们已经在使用它们。

@misolori好吧,我只是想添加一下,为了向后兼容,字体中仍应包含由octicons提供的图标,或者字体中应至少包含octicons提供的每个图标的新图标,因为扩展程序正在使用它们。

@fabiospampinato我们一定会向后兼容😄

要记住的一件事是,实际上是最初添加了我们的Octicon,以便扩展作者可以使用它们(例如,在状态栏中或快速选择中)。 我认为我们应该谨慎考虑,只是向Octicons中添加新图标,而这并不意味着该图标是该集合的一部分(不相关,我们应确保Octicons与最新版本匹配https://github.com/Microsoft/vscode/issues/36053 )。 因此,如果我们使用类似于Octicons的字体,我建议为图标设计一个新的VSCode字体。

要记住的另一件事是,尽管我们在代码中分散了图标,但您可能会争辩说应该将它们全部放在一个位置,但现实是我们的代码被组织成独立的组件(请参见https://github.com/ Microsoft / vscode / wiki /代码组织)。 例如,集成终端作为对工作台的贡献而出现,因此将所有终端图标移动到位于恕我直言的某个地方的基本VSCode字体是没有意义的。 而且独立编辑器是一个可以独立于VSCode使用的组件,因此它必须具有一整套可以附带的图标,例如,其中不包含任何工作台图标。

然后,今天,在构建时,我们有了一个脚本,可以将图标内联为数据URI(如果它们很小),以缩短VS Code的加载时间(通过防止每个图标的磁盘访问)。 如果可能的话,我们应该保留该语义(例如,使用字体)。 但是,然后可能需要在构建时创建字体,并且必须更新我们的CSS才能使其正常工作(这可能不是那么容易...)。

例如,集成终端作为对工作台的贡献而出现,因此将所有终端图标移动到位于恕我直言的某个地方的基本VSCode字体是没有意义的。

好点子。 我认为没有明显的解决方案,解决该问题的一种方法可能是为每个组件都有一个字体。 以后,所有这些字体都可以合并为一种,并且,如有必要,可以对图标进行重复数据删除。

但是,然后可能需要在构建时创建字体,并且必须更新我们的CSS才能使其正常工作(这可能不是那么容易...)。

我在我的一个项目中遇到了这个确切的问题,我基本上是这样处理的(我使用SCSS,但我认为可以改用CSS变量):

  • 保留icon_name => ligature/codepoint的地图
  • 将所有嵌入的连字/代码点替换iconsMap[icon_name]
  • 现在,在重建字体之后,我们只需要更新映射并重新编译css。

这对我来说很好,我认为这相当容易。


编辑:实际上使用连字而不是代码点应大大简化此过程。

如何使用“材料设计图标”集? 我认为这将大大改善工作台的整体外观。 实际上,如果项目不想设计一些新图标,我觉得它是唯一可以与VSCode很好集成的图标集。

这是我不得不建议的图标: https : =home&style=sharp

这是我当前图标的一些问题:

1-齿轮过度使用

screenshot from 2018-08-21 12-53-03
screenshot from 2018-08-21 12-52-46
screenshot from 2018-08-21 12-55-21
screenshot from 2018-08-21 13-06-09

其中之一触发正则表达式; 其中两个打开上下文菜单; 然后打开一个文件。 我们可以玩一个叫做“猜齿轮”的游戏,问一个随机的人哪个齿轮执行什么动作。

2-清除输入

screenshot from 2018-08-21 13-00-59

这个很大。

3-警告标志

screenshot from 2018-08-21 13-03-48

这可能只是一个首选项,但我一直认为中间图标太窄。

4-Git

screenshot from 2018-08-21 13-27-27

@misolori您对我们有任何更新吗?

@fabiospampinato这是本月的迭代计划,因此我们将开始这项工作。 这可能是一个多次迭代的项目,因为要经历很多图标。 我也已经开始(几乎完成)更新我们的Octicon版本(#65508)的过程。

该系统有什么方法可以支持多种图标样式,以便用户可以根据需要提供自己的图标集? 能够在Microsoft设计语言,Material Design,FontAwesome等图标之间切换以更好地匹配颜色主题和OS,将是很好的。

@JamesCoyle目前没有支持自定义图标的方法,尽管我们目前正在将其作为图标返工的一部分进行讨论。 如果我们确实决定使用图标字体,那么这将允许主题和扩展名提供自定义图标。

当覆盖某些颜色时,图标边框和背景填充有助于为图标提供更多的对比度。 边界可能是用户或主题可以决定的可控制设置。

如果您使用图标字体,如何确保跨平台字体渲染器不会使图标中的尖锐边缘变得不必要的抗锯齿和“模糊”? 这是一个普遍的论点_against_,它使用字体作为图标,而不是说SVG,它们通常一致地渲染(假设绘制了艺术并将其捕捉到像素)。

另外,如何处理图标颜色的任何部分? 我担心所有都是单调的图标变得不太明显,但是我当然也知道每个人都有不同的偏好。 支持颜色的字体并不常见,并且“ hacks”(例如覆盖多种字体)似乎不是一个好的解决方案...

@mikehdt我们实际上只是经历了使用图标字体创建自己的Octicons分支的过程(请参阅https://github.com/Microsoft/vscode/pull/65989),并且没有遇到任何“模糊”问题(我们在win / mac / linux上对此进行了测试)。 就图标颜色而言,其目的是使我们所有的图标都是单色的,以便所有具有多种颜色的图标都将进行相应的更新。

@misolori您是否在完成此迭代?

@Astrantia不,我们仍在内部进行探索和讨论。 更新后,我将在此处发布它们。

@misolori希望这不会再被推迟

这是此商品的状态更新。 在最近的几次迭代中,我们一直在探索一些不同的概念来进行图像重新设计。 我们希望通过这些探索实现的主要目标是:

  • 统一样式,颜色和大小的图像
  • 统一我们的图标系统
  • 现代化UI并使其保持一致

考虑到这些目标,这是我们内部一直在讨论的最新探索。

轮廓样式

这种样式从Microsoft设计语言(MDL)图标中获得了很多灵感,该

立体风格

这种风格是我们当前风格的演变,同时仍然很熟悉。 它使用与以前样式相同的图标隐喻,并使所有笔触/间距一致。

公开问题

这些都是早期的探索,但是我们很乐意在迭代过程中获得社区的反馈。 我们目前尚无完成这项工作的目标日期,因为我们不想在未正确验证的情况下急于寻求解决方案。 我们还将对这些探索进行用户测试,以进一步验证它们。 以下是一些我们需要回答的开放性问题:

  • 我们选择一种样式还是两种样式?
  • 我们是否允许扩展名覆盖我们的默认图标(类似于文件图标主题)?
  • 如果我们允许图标主题,我们如何处理活动栏中的扩展程序图标(这可能会引入冲突样式)?
  • 如果我们允许使用图标主题,那么与文件图标主题相比,如何管理这些主题(这将引入第二个“ icon”主题)?

如果我可以将这两个图标集都作为Insiders中的选项来旋转,那就太好了。 没有一段时间的日常使用,我无法提供太多反馈,但是图标对我来说看起来很一致。

不过,我确实更喜欢当前的Git,Debug和Extension图标的设计。 我们有机会将它们移植到MDL吗?

我们是否允许扩展覆盖默认图标?

我会说不。 内置功能应与一致的视觉标识相关联。

@misolori我认为纯色样式看起来更好,但在探索上为+1。 另外,我假设图标中的颜色将被删除,这会很好。

关于Octicon,尽管它们不一定是MDL的一部分,但它们是否也遵循与这些新图标相同的准则?

+1为大纲样式。 我要说的是,我仍然觉得这些图标过于巴洛克风格,其中有些感觉过于复杂。 看一下“保存”图标中的软盘,它太详细了,您不觉得吗?

我个人投票赞成更多选择。 两者的选择将是最好的IMO,但两者都将比当前产品更好。

对于已经熟悉某种图标样式并且可以更好地识别这些图标的人们,定义自定义图标集的功能将是极好的。 我亲自在Atom中使用了材质设计图标,并且喜欢这种样式,因为我对此更加熟悉。

如果我们允许图标主题,我们如何处理活动栏中的扩展程序图标(这可能会引入冲突样式)?

为什么不为新的图标样式引入回购协议,并允许用户提出有用的图标建议呢? 然后自定义图标集只需要保持更新以遵循官方图标集即可。

轮廓样式更好。 毕竟,这是微软的产品,应该表现得像。

本文最近讨论了Solid vs.Outline: https

tl; dr:固体更易于识别; 但是,某些图标更适合用作“大纲”; 在任何情况下,都需要遵循一些规则以进行有效识别

如果您问我,上面分享的两个示例中的“实心”图标对我来说更容易辨认。 轮廓看起来很凌乱,在狭窄的空间中有许多平行线在打,破坏了识别

我也为大纲样式投票。 尽管我通常支持更多的自定义设置,但我认为通过主题更改核心图标并不是一个好主意。

这不仅会增加复杂性,而且我认为,出于一致性的考虑,不应对诸如布局形状和图标之类的核心内容进行自定义(这就是为什么我也不喜欢原子中的“布局”主题的原因)。

但我认为,添加选项以在填充/轮廓之间更改样式是自定义与一致性+复杂性的良好中间解决方案。

还有,我不知道为什么,但是我爱上了那个虫子图标哈哈
特别是概述的

@misolori很好👏

我们选择一种样式还是两种样式?

我只会使用一种样式,并通过主题使这些图标可自定义。

由于以下原因,我个人选择了扎实的风格:

  1. 它们更简洁,更易于“解析”,例如,扩展名图标仅由4个正方形的实心样式组成,但要制作轮廓版本需要8个正方形。

  2. 我认为当前的图标更接近于建议的实心图标,因此我觉得它们更熟悉。

  3. 我认为有时候人们在活动时选择“填充”轮廓图标,这在共享gif中不会发生,我有点期待它it

我们是否允许扩展名覆盖我们的默认图标(类似于文件图标主题)?

是的,我认为有些人最终会提出一些利用可自定义图标的高质量主题。

如果我们允许图标主题,我们如何处理活动栏中的扩展程序图标(这可能会引入冲突样式)?

这可能是选择一种默认图标样式的一个很好的理由,因此扩展程序作者可以默认使用/创建具有相似样式的图标。

我认为为替代图标包生成替代图标的负担应该落在主题作者身上。

如果我们允许使用图标主题,那么与文件图标主题相比,如何管理这些主题(这将引入第二个“ icon”主题)?

不确定,也许会有一个“文件类型”图标主题和一个“应用程序”图标主题🤔

更多反馈:

  • 点击放大效果永久消失了吗?

  • 侧边栏中的图标看起来有些挤满了,尤其是用于重新加载项目的图标:

Screen Shot 2019-03-25 at 15 50 36

  • 我不确定保留阴影是否更好though我想这可能有助于对比度contrast

同意@fabiospampinato的想法之一是重新加载图标。 旧的图标看起来对齐得更好:

image

到目前为止,感谢大家的反馈!

@octref一旦我们准备好大多数图标,我想我们可以向内部人员开放。

@beastdestroyer for Octicons,我们最终将用我们自己的图标替换它们(统一的一部分),这意味着我们将拥有与我们的新样式相匹配的相同图标的版本。

@fabiospampinato很好地关注了图标大小,我们将解决这个问题。 最初,添加阴影是为了使图标在其他背景颜色中脱颖而出(因为图标是固定颜色),我们希望通过允许动态设置图标的样式来增加对比度来解决该问题。

我个人喜欢轮廓图标的开/浅感觉-特别是对于那些具有简单笔触(浏览器,搜索,git等)的图标,但对于更复杂的图标(齿轮,有点扩展,折叠,添加文件夹),我认为图标本身需要重新访问以简化视觉上的操作。 我也非常喜欢带有大纲版本的活动栏的活泼感觉,因为它们更多地淡入背景并且与主视图的竞争不那么激烈。

至于具有1或2(或可自定义)样式,我肯定会倾向于1样式(imo有助于驱动产品的标识)。 拥有1种以上的内置样式,为必须适应多种样式的扩展创建了很多工作-坦白地说,创建1套图标已经足够了😄。 这还需要新的“ api”以允许指定不同样式的图标(我们已经必须处理浅色和深色版本)。

我认为可访问性和易读性(请参阅@jvzr发布的链接)应优先考虑,远高于“看起来”最好的(无论如何都是主观的)。

我个人认为,考虑到要查看的大小,建议的许多图标(实心和轮廓)都非常繁忙且过于详细。

@jvzr @smbkr感谢您的反馈。 我们绝对在考虑这些图标的易读性,无论其样式如何,并正在进行用户研究以进一步验证它们。

同意@smbkr。 有时我很难确定活动栏中的活动图标,这导致我无意间折叠了侧边栏。 仅靠实心图标或轮廓图标可能无法解决此问题。 如果活动视图将继续仅由更亮/更白的图标指示,则我赞成固体图标。

我喜欢这些新图标!

还请在浅色主题上比较这些图标! 我不知道这种情况下的实心图标会是什么样。 当前的实心图标似乎有点苛刻:
image

无论您决定使用哪种主题,如果您可以使用其他流行的扩展(例如Azure,GitLens)为它们提供匹配的图标,那将真的很酷。

另外:👍在Insiders中进行设置,以便我们可以在日常使用中试用它们!

我为这两种样式投票,但是如果我只选择一种样式,我会选择带有轮廓的图标。

概述样式适合Microsoft-应该是默认样式。 也很高兴为他们提供主题支持。

如果我可以将这两个图标集都作为Insiders中的选项来旋转,那就太好了。

或至少在GIF之前/之后。

我喜欢固体。 需要更多的对比度,因为我的4k图标几乎太小了。

我个人更喜欢纯色风格。 两者都很棒,但是就UX而言,我认为更简单,更好。

此外,轮廓样式更像是“ Microsoft”,但现实是VSCode在更多的OS中使用,并且使用纯色样式在所有OS中看起来都会更好。

最后,我认为在大多数扩展程序的图标下,固体样式会更好看。

但是我重复一遍,两者都很棒。 😉

我要用的是图标的轮廓变体,而不是实心的图标。 同样,就像其他人已经说过的那样,大纲图标也与其他MSFT应用程序图标的设计一起出现。

我觉得填充的图标更容易解析,因此是更好的选择。

大标签图标的轮廓,小图标(折叠等)的固体。

只是将其放在那里@misolori ,但我很乐意看到有关您如何完成此任务的详细博客文章/文章,以及您必须牢记的各种注意事项(可访问性,本地化(即刻度线没有(在日本尚不存在),在品牌与平台外观之间取得平衡),团队的流程/工作流程等。

@misolori我只是想引起大家的注意,如果您使用MDL,则与此相关的是OSS许可证使用。

MDL资产(字体/图标)未获得MIT许可。 我(和其他人)通过Office UI Fabric回购提出了几次

我更希望使用Solid而不损害OSS许可(MIT)或MDL扩展功能

或者更好的是,推动它们以OFL / MIT的形式释放字体和图标(品牌图标除外),任何人都可以使用它们。

@gautamsi是的,我们绝对知道这一点,并且一直在与MDL所有者合作,以了解如何将其与MIT许可证一起使用。 如果不能,那么我们将根据MDL创建自己的集合。

爱线图标。

我一直在开发Visual Studio Code扩展已有一段时间。 我发现棘手的一件事是创建看起来与VS-Code的总体设计相一致的东西,因为VS-Code的整个地方都很普遍。

如果有人感兴趣,访问

我基本上喜欢轮廓图标,但是大多数现有的品牌徽标都是“实心”的,并且许多轮廓轮廓看起来都不好或不熟悉。 由于法律原因,无法概述其中的一些内容。

outline

Octocat的右臂和基座上的盒子等复杂的零件未正确渲染,但我认为我们无法修改路径以使其看起来更好。 Dropbox徽标难以识别。 显然,实心和轮廓图标的混合是可怕的。 与Windows不同,MS无法控制活动栏中显示的所有内容,因此我认为纯色图标更安全。

@smikitky我不认为我们会强加品牌改变风格,这将违反大多数品牌准则。

@misolori然后,我们的活动栏将以两种不同样式混合在一起。 我们正在尝试解决图标的视觉不一致问题,不是吗?

编辑:很抱歉,如果我不明确自己的意思,但是我要说的是vs代码拥有的_our_图标应该牢固。 开箱即用的大纲图标体验很好,但是一旦人们开始安装带有(通常是实心的)品牌图标的扩展程序,它就会变得不一致。 这就是我的Windows 10任务栏中发生的事情。 这是概述默认图标和可靠的第三方图标的大杂烩,我认为这不是很好。

当然可以,但是我认为重点是使vs代码(可以这么说)“拥有”的图像保持一致,而不是重新创建应用程序中可能出现的每个品牌图标!

@smikitky是的,我们正在尝试解决图标的整体一致性,但是我们不拥有其他产品的品牌。 我们可以提供扩展指南,但最终取决于品牌(有些确实提供了完整/概述版本)。

@smikitky追求每个品牌都不是开始。 即使您使用纯色图标,其图像样式也将有所不同。 设计产品图标时,您不应该注意第三方图标。 如果是这种情况,每个人和所有事物都应使用相同的图标。

请允许扩展名覆盖默认图标。 我不喜欢这种新样式,只想修复一些当前图标。

@misolori这可以推给内部人员吗? 什么停止了?

@ jared1000,我们目前正在为两种建议的样式进行可用性研究。 我也希望有一个自定义版本,以供大家尽快试用,准备就绪时,我将在这里提及。

@misolori我注意到勘探开发现在正在使用新图标,我必须说我喜欢它们! 但是,“切换输出滚动锁定”挂锁很难以视觉方式识别为锁定或解锁状态。 我认为这可以做一些认真的改进。

@misolori我注意到勘探开发现在正在使用新图标,我必须说我喜欢它们! 但是,“切换输出滚动锁定”挂锁很难以视觉方式识别为锁定或解锁状态。 我认为这可以做一些认真的改进。

可以给我下载链接吗? 我似乎找不到

探索版本可在此处#61787下载,安装完更新后不要忘记运行更新,因为链接文件可能不是VSCode探索的最新版本。

图像重新设计

我们已经为想要测试新图标的人准备了一个构建。 我们涵盖了大部分区域,但是仍然缺少一些区域(例如状态栏)。 我们建议您花几天时间(沿途记笔记)进行构建,以使更改生效。 我们仍在迭代这些图标,因为它们不是最终的,希望在这里获得您的反馈。

更改图标样式

此构建使用文件图标主题,将主题更改为Preferences > File Icon Theme并选择VS Code Icon Explorations: OutlineVS Code Icon Explorations: Solid 。 默认设置为Outline

image

向我们发送您的反馈意见

当您浏览构建时,请让我们知道您的想法。 如果您发现某些图标有问题,或者想要覆盖某些区域,请在下面添加注释。

_提示:_如果您想迁移设置+扩展程序,建议您使用设置同步扩展程序

下载版本

此版本是带有Electron 4.0.x的Exploration版本的一部分,您可以将其与Stable和Insiders一起安装:

@misolori ,感谢您的更新和构建!

几点:

  • 总的来说,我认为侧边栏的图标更加清晰了很多为他们做什么。 调试图标和扩展图标尤其如此。 源控制图标的形状对我来说有点尴尬,尽管它可以更好地适应标记。
  • 我更喜欢轮廓样式的侧边栏图标,但对于其余的应用程序则为纯色图标。 在vscode中,侧边栏的视觉重量差异总是令我印象深刻。 我很乐意看到所有人的笔重为1.5pt的感觉,看看它是否更具凝聚力。
  • 当99%的用户界面为硬正方形时,“新文件” /“新文件夹” /“折叠全部”图标的圆角有点奇怪
    Screen Shot 2019-05-20 at 14 06 05
    (这也适用于边栏中的文件图标)
  • 就个人而言,我更喜欢在Mac上具有圆角和Sentence Case标签,因为它更适合平台美学,但是我意识到这与迄今为止的UI风格有所不同。 Framer的代码编辑器基于monaco,我认为他们的工作做得很好:Screen Shot 2019-05-20 at 14 10 11
  • Mac Retina上的文件图标模糊
    Screen Shot 2019-05-20 at 14 00 33
  • 这两组图标之间的权重不一致。 也许只是尚未更新?Screen Shot 2019-05-20 at 14 14 10

再次感谢您给予设计一些爱,并愿意接受反馈🥳

@darknoon感谢您的详细反馈,

@dalDevelo感谢您对锁图标的反馈,我确实想知道我们是否需要在两者之间形成更强烈的对比:

image

@misolori中风在搜索图标上似乎更细了

image

所有终端图标的权重均显示为关闭,+看起来已禁用(Windows):

image

@Tyriar是在非视网膜屏幕上吗? 其中一些可能有点模糊,因为它们不完全位于像素网格上。

@misolori是的,这是我在办公室的宽屏显示器

我是图标的大纲版本的粉丝,感谢您这样做。

伤害我的眼睛的一件事是拆分图标:

image

左/右箭头并不代表我分裂,这意味着某种运动,并且由于它既向左又向右,所以我不知道它要去哪里:)。

我们可以获取现有拆分图标的更新/较浅版本吗?

image

@misolori星星和下载的数量似乎比版本号高一点:

Shot 2019-05-21 at 07 04 36

更新版本

感谢所有反馈,我已经更新了探索版本以解决此处提出的问题:

  • 更新加号(+)图标,使其位于网格上,并且不会模糊@ 1x
  • 更新了拆分图标,使其看起来更接近先前的版本
  • 更新了活动栏中的资源管理器图标,使其不脱离网格(模糊)
  • 增加了解锁图标的间隙,以增强对比度
  • 更新关闭按钮,脏状态,自动修复灯泡和折叠/展开图标
  • 扩展视口中的固定对齐
  • 修复了Git视图扩展中的错误,该错误贡献了图标(显示为灰色填充)

注意:如果您已经拥有探索版本,它将提示您进行更新,并可以从中获取最新信息。 否则,您可以使用以下下载链接:

@misolori看起来很棒。 我看到的几个问题:

与其他图标相比,搜索图标看起来仍然太细
image

{}在轮廓和填充中都感觉太模糊/很难看-而且拆分仍然在轮廓样式中感觉不合适-相对来说太重了
image

打开编辑器组中的全部保存/关闭所有图标已损坏?
image

编辑器将填充样式的折叠图标变成大而笨拙的imo方式(仅靠这些会使我不想使用填充样式)。 同样也不是轮廓样式的粉丝-尝试像树木一样的折叠箭头怎么办? (相关,折叠控件上的自动隐藏/显示似乎已损坏-它们始终在显示)
image

我觉得轮廓灯泡太细微了,填充的灯泡太粗了(或更像是丢失了灯泡形状吗?)
image
image

我个人还是想让脏状态指示器始终保持一个点(如填充样式)-感觉并不需要遵循轮廓vs填充样式,无论如何😄

另外,是否认为带有复选标记的轮廓样式也变得更细?
image

@eamodio非常感谢(快速!)详细的反馈,这非常有帮助!

  • 搜索图标:让我再试一次,如果不走得太远且像素也不太像素化,很难将其变厚。
  • { } +分割:我会尝试调整这些
  • 感谢您在组编辑器中捕获损坏的图标
  • 我喜欢使用折叠人字形的想法,我可以尝试一下
  • lighbulb,我对此有点撕裂。 我确实更喜欢轮廓的简洁性,但是它也没有足够的重量来引起注意。 我将为此尝试几种不同的风格。

“全部关闭/全部折叠”图标仍然让我感到很忙-也许将其更改为2条轮廓线,而不是3条轮廓线,例如全部保存?
image
image

刷新图标实际上是否比其他图标亮?
image

IMO,大齿轮看起来不错,但是在这样的尺寸下,它感觉太忙还是太模糊?
image

好,我完成了

@eamodio没有太多反馈😄

  • 全部关闭/收合-我同意它看起来确实很忙,将尝试删除多余的图层
  • 刷新:由于它是圆形的,因此将有点像素化,因此它可能看起来更亮,如果我们将其变宽,则它将变得更加模糊/太大。 让我再尝试一次。
  • 齿轮:看起来中间的圆圈有点像素化,我可以尝试调整它和/或使其变小。

对于刷新图标,可能只是稍微增加亮度以进行补偿?

@misolori挂锁状态现在更容易识别为已锁定或已解锁👍🏼

为了跟进@eamodio提到的搜索图标比其他图标更细的问题,我认为搜索图标和资源管理器图标看起来都比其他图标更细,当未选择资源管理器图标时,更容易看到这一点。

我看到了您的回答,即在不过度使用的情况下很难使其更厚,但是也许可以使源代码控制,调试和扩展图标变薄以平衡所有内容?

icons

我觉得使图标变薄会使它们不那么可见

更新的探索版本

❤️感谢到目前为止的所有反馈,我们非常珍惜您花费时间进行测试,并请他们继续努力。 我已使用更多修复程序更新了该版本,并且我们还使用master对其进行了更新,因此它应包含最新的修复程序。 以下是图标修复:

  • 现在,搜索的宽度与其他活动栏图标的宽度相同
  • 折叠/关闭全部简化
  • 拆分编辑器更苗条
  • 脏状态现在是填充的点,而不是轮廓
  • 调整Gears / Refresh / Json的大小以改善像素
  • 折叠/展开现在是人字形(让我知道您的想法)
  • 分组编辑器中的操作和错误查看视图已修复

注意:如果您已经拥有探索版本,它将提示您进行更新,并可以从中获取最新信息。 否则,您可以使用以下下载链接:

image

@misolori看起来很棒!!! :shipit:真的很喜欢折叠/展开人字形!

我剩下的唯一问题是灯泡-我注意到今天是蓝色的灯泡,甚至更难看见imo
image

这是其他一些尼特:微笑:

  • 打开更改图标非常模糊
    image
  • 由于有向上箭头,因此打开文件图标使我认为我正在上传文件或其他内容
    image
  • 下一个/上一个更改图标(上方),虽然我喜欢它们,但我担心与其他地方的扩展V形燕尾形相似,尤其是与底部面板(下方)相似-也许最大/最小面板图标应该更改?
    image
  • 对于kill terminal命令(如上),垃圾桶感觉不像是正确的隐喻(imo),也许更像是关闭图标或终端和关闭的组合? 也许像这样,但是与[x]接近? 也许也为+终端使用类似的终端(带有+的终端)?
    image
  • 问题面板还有三部分折叠全部图标
    image
  • 调试视图(监视,断点)具有3部分关闭图标
    image
  • 调试控制台按钮感觉太像终端图标imo。 我认为我更喜欢旧的按钮(如果它的尺寸要好一些),尽管我可能会争辩说那里根本不需要按钮
    imageimage
  • 我可能只需要习惯它,但是未登台的图标对我来说似乎是一个很大的破折号,而不是减号
    image
  • 提交复选标记感觉太小,尤其是在刷新旁边
    image
  • 打开的预览图标没有预览感,并且大小似乎已关闭。 而且它似乎丢失了alt命令(它将在同一编辑器组中打开预览)
    image
  • 除了图标之外,但是有什么方法可以修正下拉箭头,它偏离中心且有点狭窄(如您在上面的下拉菜单中所见)

哦,最后,状态栏(主要是由于八位图标)与轮廓图标(imo)并不完全匹配

@eamodio as一如既往的谢谢你

  • 公开更改:将解决此问题
  • 打开文件图标:我可以尝试向右箭头
  • 我们确实有另一组下一个/上一个可以使用的下一个/上一个,我认为可以将其与折叠/展开混淆是很公平的
  • 收起所有人:感谢您的参与(其中有很多😝)
  • 调试控制台:我可以在此控制台上进行迭代
  • 下台:我可以稍微缩短一点
  • 选中标记:我可以增加尺寸
  • 预览:我将对此进行迭代,使其大小与“拆分”按钮相同,并修复alt-command图标
  • 下拉菜单图标:我相信这是本地下拉菜单,但会看看我们是否可以对其进行调整
  • Octicons:当我们更新其他所有内容时,它们也会被更新(目前尚不适合)

另外,在上面@eamodio的帖子中,分割窗格和垃圾桶图标在终端窗口(第3张图片)中看起来没有正确(垂直)对齐。

@dalDevelo拆分图标非常棘手,因为它需要偏离1像素才能避免像素化。 我可以尝试减少垃圾桶图标的高度,以使它们看起来一样(尽管看起来可能有些怪异)。

@misolori也许将它们底部对齐会有所帮助?

在键入此内容时,我打开了内部终端并仔细查看,我还可以看到那些图标在该内部版本中显示为顶部对齐,我猜它在探索中会更加明显,因为这些行更细。

仅仅是一个观察,并不是一个大问题,而且无论如何您已经意识到😊。

对于侧边栏“搜索”,由于厚度问题,可能考虑切换图标。 我会想到其他搜索整个项目的隐喻(这是侧边栏图标的作用),例如双筒望远镜等。 我曾经让用户认为侧边栏的放大镜是“在页面中查找”的,甚至不知道其他工具。

与该线程无关,但是探索版本上是否还有其他信息? 从图标看起来像金丝雀版本。 解决此问题后,会继续构建吗?

@kurtextrem探索版本是我们用来测试尚不希望推送给Insiders的事物的工具,因此它是一个测试场所。 我们经常会测试新版本的电子(或新图标😉),但我们始终会进行探索。

image
这里的齿轮看上去也很模糊,总的来说,我觉得坚固的齿轮看起来更好!

图标探索现已在Insiders上可用

随着我们越来越接近最终定稿,我们已经将图标探索移到了Insiders内部。 您可以通过workbench.iconExploration.enabled设置启用此功能,这意味着您现在可以使用自己的文件图标😉。 我们仍然在状态栏中没有这些图标,但是很快就会出现。

gif

此外,根据这里和用户研究的反馈,我们发现轮廓样式具有最积极的影响,并将朝着该方向发展。

另外,我们将不会更新探索版本,并将从现在开始使用Insiders。 如果您对此有任何疑问,请在这里发表评论。 谢谢大家到目前为止的反馈,确实很有帮助!

参见上文,齿轮仍然有点模糊,这是否也意味着代码只会出现轮廓样式,还是会同时包含两种样式?

活动图标也可以变大胆吗? 仍然缺乏对比,这使我难以区分。

@Stanzilla我将研究设置/齿轮像素化。 鉴于我们已经通过GitHub / Twitter / Reddit收到的反馈以及用户研究的反馈,轮廓样式产生了最积极的影响,并将继续沿用该样式。 考虑到引入两种带有扩展的样式和它们提供的图标的复杂性,要​​支持这种扩展,将需要大量工作。 为了实现这一点,我们需要一个更好的图标系统,但一次只需要一步即可

@jtlowe我将尝试改善活动/非活动活动栏图标的对比度。

注意到了另一个小问题-很难看到信息/警告/错误图标的概述版本:
image

调试图标对我来说太细了-特别是重新启动
image

image
我仍然觉得文件更薄。
HiDPI屏幕250%3200 x 1800 13“

在Windows上以100%的比例缩放级别0,资源管理器与网格对齐,但其他直线未对齐(ext,scm):

image

@misolori仅在内部人员构建中带有新图标的情况下,我看到一个新的错误-扭曲不再可独立单击,这会导致同时具有子项和单击命令的项目出现问题。

image

@eamodio您能详细说明吗? 我可以单击曲折和其他命令

编辑:没关系,我明白您对compare分支的意思。 似乎存在一些奇怪的错误,其中更改伪元素上的背景图像使其不可见,从而使其无法单击。 由于这在其他任何地方都不会发生,因此必须对此进行更多调查。 您能否指出GitLens存储库上的位置?

@misolori下面是一个创建该项目的代码-基本上它是一种具有一个项TreeItemCollapsibleState的任CollapsedExpanded以及一个命令

https://github.com/eamodio/vscode-gitlens/blob/f827bc660140e5da29ba43ca2d27c9a5d3af883f/src/views/nodes/compareBranchNode.ts#L51 -L87

@misolori这是令人反感的代码:
https://github.com/Microsoft/vscode/blob/555739fa7383ef69a7871c9c835ebffbcce3ef32/src/vs/base/parts/tree/browser/treeDefaults.ts#L227 -L230

它检查背景图像,该图像不再存在

同样对于曲折而言,而不是在2张图像之间切换-旋转和过渡时看起来很酷😄

@eamodio好的,我想我现在解决了这个问题(这只是图标浏览方面的一个问题,因为我正在使用css覆盖图标,因此不应在稳定状态下发生):

gif

这是下一轮内部调查中所有更新的摘要:

  • 调试控件的重量增加了(在非视网膜上的暂停/停止按钮中可能会遇到像素化)
    image
  • 灯泡已装满
    image
    image
  • 所有下一个/上一个箭头是一致的
    image
  • 快速轮廓图标现已对齐
    image
  • 调试控制台图标的高度增加
    image
  • 活动栏徽章较小
    image
  • 刷新图标较小
    image
  • 比较更改略大
    image
  • git的“ Open Changes”非常模糊,似乎太小
  • git的“提交”复选标记似乎太宽
    image

@ JMS55我将尝试调整开放的更改,由于

@misolori是的,git-graph的图标坏了,我想我将在1.36版本发布后在那提交一个问题。 这不是关于复选标记太小或太薄,可以减小复选标记的角度吗? 更像当前(稳定)图标

@ JMS55我增加了“比较更改”图标,还修复了git graph缺少的图标(这是我的错误)。 感谢您的反馈!

刚刚注意到,与其他视图相比,条件“引用”视图的图标很小(尚未更新?):

References view

差异视图中下一个更改的箭头似乎已断开
image

调试也中断时的恢复按钮
image

@HazemAM谢谢,将解决该问题。

@eamodio是的,这两个问题已得到修复(自周四以来我们尚未发布新的内部人员)

  1. 折叠/展开图标会打开还是填充? (在您最近的资源管理器屏幕快照中,它们已填充,我认为我更喜欢)
  2. 我同意@kowalski7cc WRT活动栏中的资源管理器图标(笔触大小与其他图标不匹配)。
  3. 收合/展开图标上方有一条黑线(也许您已经意识到了这一点)

    • 来自以下选择器: .monaco-editor.hc-black .margin-view-overlays .folding.collapsed, .monaco-editor.vs-dark .margin-view-overlays .folding.collapsed

image

@ glen-84

  1. 我没有意识到显示的是旧的曲折/人字形(似乎无法复制),但是树状展开/折叠图标将是您看到的>人字形
  2. 我们仍在研究如何使我们的所有图标具有相同的笔触宽度,同时仍可读取
  3. 好抓,将解决此问题。 谢谢。

在哪里可以下载此版本进行测试?
我正在使用软呢帽。 我只看到基于Debian发行版的URL

@mtxr参见此处,您可以下载Insiders并通过workbench.iconExploration.enabled设置启用。

与稳定相比,错误图标难以阅读。 此外,整个应用程序中似乎有很多颜色。
image
image
image
image

什么是材料设计?

@ SupinePandora43你的意思是流利的设计? 这是微软而不是Google:D

@Stanzilla ,是的……但是vscode是否支持自定义UI图标(不支持文件/文件夹图标)

  1. 资源管理器图标更细
    sidebar

  2. Replace All按钮有点复杂
    search

  3. 复选框已过时
    checkbox-settings

  4. 尖括号应该更新吗? (>)
    debug-console

  5. 键盘快捷方式图标已过时
    shortcut-add
    shortcut-edit

我已经更新了活动栏图标,使它们都统一并且与其他图标的厚度匹配:

一点细节:这些图标是在原始的16x16分辨率下设计的,然后按比例放大以使它们的笔触相同,这意味着它们将脱离网格。 我们确实尝试将它们以1px的分辨率并入网格,但最终看起来太细/太小(请参见下文)。 我们还添加了斜角,有助于使角度更加一致,并与Visual Studio也将采用的新Microsoft设计语言(流利)图标对齐。

TBH,我更喜欢左侧(薄)的那些,但我对此并不感到强烈😄

@eamodio我本来倾向于较薄的图标,但是在较高dpi的屏幕上看到它们之后,图标变得更

如果是@misolori ,将“活动”的显示方式从一个更强的图标更改为在高DPI屏幕上始终能够更好地显示的其他内容,是否有意义?

彩色高光,左侧/右侧的彩色条,还是其他?

@joshsleeper ,活动图标是等式的一部分(在此处跟踪#75435),但是默认情况下,图标仍然需要可见。

@misolori干得好! 我们可以预期在1.36.0中默认具有所有这些图标吗?

我不介意新的厚度,但是我认为带有尖锐边缘的图标看起来比新的圆形边缘干净得多。

是否有理由进行转换?

59201869-b2f36c80-8b9b-11e9-8ba0-b64fc2ff79ce

@svipas取决于我本周能到达的程度😁尽管很有可能将其推迟到下个月。

@HazemAM斜角有助于使角度更加一致,并且与新的Microsoft设计语言(流畅)图标对齐。 Visual Studio也将使用相同的斜角边缘。

@misolori vscode是否支持自定义ui图标?

@ SupinePandora43现在

@misolori谢谢!

@misolori等等,我听不懂。 Microsoft的线框图标都仍然使用锋利的边缘,包括您刚刚在此处链接的文档页面。

@ Studio384他们目前使用斜面和直边的混合,下面是一个示例。 当VS系列产品使用其图标时,我们也将它们配合在一起(我们是第一个推出它们的产品)。

image

您是否有相关的实际文档? 从我可以看到,根据当前文档,软盘图标是例外。

@JamesCoyle不,目前没有任何文档。 当前,MDL使用斜面和直边的混合。 在查看了各种Microsoft产品和VS系列之后,我们觉得朝着这个方向前进将为将来的工作证明。 一旦发布了新的图标,我们将发布有关为VS Code创建图标的指南和最佳实践,扩展可以遵循。 我还想创建一个扩展库作者可以使用的图标库,而不必重新创建相同的图标。

可以通过"workbench.iconExploration.enabled": true启用此图标!

//有些图标的权重太小! (如关闭按钮)

文字换行图标似乎未更新。
image
src\vs\workbench\contrib\codeEditor\browser\WordWrap_16x.svg

我喜欢材料设计风格的图标,所以...我将等待自定义ui图标支持!

image
“打开文件”图标-损坏

版本:1.36.0-insider(用户设置)
提交:c3fe2d8acde04e579880413ae4622a1f551efdcc
日期:2019-06-20T05:18:54.960Z
电子:4.2.4
铬:69.0.3497.128
Node.js:10.11.0
V8:6.9.427.31-electron.0
操作系统:Windows_NT ia32 6.1.7601

@ SupinePandora43今天早上

该线程的时间太长,因此很难找到重复的报告。

有没有人已经报告过“ Stash All Changes”图标变厚了一点?

image

版本:1.36.0-insider
提交:c3fe2d8acde04e579880413ae4622a1f551efdcc
日期:2019-06-20T05:20:10.276Z
电子:4.2.4
铬:69.0.3497.128
Node.js:10.11.0
V8:6.9.427.31-electron.0
作业系统:Windows_NT x64 10.0.18362

@ yume-chan该图标来自GitLens而不是vscode本身。 一旦确定了vscode图标,我希望能够更新GitLens图标以使其匹配

左上方(在Windows中)的vs代码徽标不应该是白色而不是彩色的吗? 就像在Visual Studio 2019中一样。

Icon️图标探索将被暂时禁用

我要暂时停止图标探索,因为我们正在接近迭代计划的结尾,并且我们的残局将于下周开始。 我们希望为本月的迭代做好准备,但必须推迟到下个月。

从星期一开始,图标浏览将被禁用,并将在我们分支六月的更新后重新添加。 如果一切顺利,则默认情况下将启用此功能,并且不需要此设置。 敬请期待更多的更新。

@eamodio由于将带圆圈的箭头读为“全部取消存储”,所有存储都令人困惑(对劫持线程感到抱歉)

昨天,我已升级到具有图标浏览功能的vscode-insider-1.37.0和发行说明和欢迎页面的新图标,但今天,我通过更新降级为vscode-insider-1.36.0。
正常吗?

昨天,我已升级到具有图标浏览功能的vscode-insider-1.37.0和发行说明和欢迎页面的新图标,但今天,我通过更新降级为vscode-insider-1.36.0。
正常吗?

刚才发生了同样的事情。 不知道...可能是一些关键问题,他们不得不还原。

@ SupinePandora43 @lllopo抱歉,我们一直在尝试解决我们的构建中的问题,这就是您看到回滚的原因。 最新的内部人员应该具有新图标(现在无需设置)。

@misolori我正在使用最新的内部消息……我已经注意到,在面包屑菜单中,程序包图标有些小地方:

Screen Shot 2019-07-06 at 7 29 06 AM

该图标(在我看来)也有些垂直延伸! 也许这就是为什么它被切断?

@johnletey很好,这只是一个CSS错误,只是推送了一个修复程序。 谢谢!

很棒的@misolori ...谢谢!

并且已经推送了修复程序。

因此,明天内部人员更新时,我会看到这些变化吗?

@misolori git图标看起来为粗体是有原因的吗? 几乎就像不同的图标具有不同的笔触大小

Screen Shot 2019-07-06 at 9 30 24 AM

@johnletey Insiders将于周一更新(我们不会在周末推送更新)。 对于图标笔划大小,它们实际上都是相同的笔划大小。 有时,根据周围的空间,它们可能看起来有所不同。 我将看看我们是否可以对此进行调整。

在最新更新中,扩展程序图标似乎偏离了我的左侧? 我实际上测量了它-与资源管理器图标相比,它更宽并且在左边2个像素,在右边2个像素。 因此,实际上这实际上是一个上浆问题,但可能无法解决。 如果是这样-请忽略我的评论。

@lllopo它们全都位于24x24的正方形上,尽管有些在垂直方向上比其他的要高,这就是为什么看起来好像它们不在的原因(请参见下文):

image

@misolori问题来自以下方面:所有图标都占据图标正方形的整个高度(无论它是按24px x 24px缩放还是其他正方形),因此所有图标都垂直居中。 没关系。 有些图标(例如扩展图标)也占据了正方形的整个宽度,因此它们在水平方向上完美地居中于正方形,这也是可以的。 但是其他图标(例如资源管理器图标)不会占据正方形的整个宽度,并且同时会偏离轴方向。 如果将其缩放为24x24,则资源管理器图标的左边有2个像素间隙,右边有1个像素间隙。 简而言之-问题出在图标的宽度不是全角,同时与侧面的正方形边框之间的间距也不均匀。 解决方案-您可以使这些图标更宽或更窄。 对于24x24比例的资源管理器图标-实际图形应为22px或20px,当前为不均匀的21px。 当然,这远不算什么,但我认为值得一提。

SCM图标发生了一些奇怪的事情。 打开文件后,它变粗体:

demo

提交:7e03eb1a1fce3beb6ccea5f3b8f828e01940be61
作业系统:Windows_NT x64 10.0.18362

@usernamehw我一直都用粗体scm图标:laughing:

@lllopo哦,我明白您的意思,我认为我们可以对此进行调整。

@usernamehw很奇怪,好像活动栏项目以某种方式被复制在顶部。 您能否捕获复制步骤并提出问题?

@misolori没有资源-它始终是粗体,因此我将等待下一个Insiders版本查看它是否仍然存在。

希望它不会大胆。

这有点挑剔,但是我们可以找回以前的齿轮图标吗? 新的看起来很奇怪,就像机械花flower。

老👍🏼
old

新👎🏼
new

新轮廓图标更好……

内部人员现在可以使用新图标!

image

新图标现已在Insiders上可用,并且默认情况下已启用(无需设置setting)。 这意味着我们计划在7月(1.37)版本🎉中发布这些产品。 我们仍在听取反馈,并进行调整以完善它们的发布。 如果您还有其他反馈意见,请继续在此处发布。 如果您遇到任何图标错误,请提出问题,以便我们进行分类。

注意:尽管这些更改不包括Octicon集合中的图标(即状态栏中的图标),但我们正计划解决下一个问题,并正在#76909中进行跟踪。

扩展作者

我们正在积极地创建图标准则,以便您可以更好地创建与我们的新样式匹配的图标。 我们还试图生成一个可以使用的现有图标库,当这些图标更接近完成时,我们将宣布更多信息。

❤️大感谢社区

我要感谢整个社区尽早提供意见并继续提供意见。 谢谢您,您的反馈意见仍将在我们的设计过程中发挥作用,并对产品产生巨大影响。 请继续分享您的反馈,我们一直在倾听。

整体图标看起来不错👍,并且在大多数情况下比以前感觉更好。
个人观察很少:

  1. 树形列表中(特别是在“调试控制台”中)的关闭/打开人字形看起来太大,更类似于>字符。 这使它们在Debug Console中特别令人困惑(特别是因为它们在其中具有常规的文本光标而不是指针),并且与我们在MS Edge DevTools(非铬)和Chrome DevTools中经常看到的文本相距甚远。
    空三角形之类的东西可能更好地表示可扩展树项
    image

  2. 最大化面板大小感觉比带有HDPI显示的窗口上的还原面板大小(不确定原因)要大。

  3. 同意关于以前的设置齿轮版本更好的以前的评论。

  4. 我个人不喜欢新的SCM图标。
    image
    状态栏中类似图标上的比例看起来要好得多,而活动栏中的图标则感觉垂直压扁,圆圈太粗了。 我认为,在状态栏中使新图标的形状更接近一个,并使圆圈变细会更好。
    〜也可以从右下角的圆或紧接其后的位置进行分支(右笔划)。_ UPD。 它已经做到了,但是右“分支”的垂直部分仍然看起来太短。

  5. 调试图标看起来很好笑! 👍

  6. 调试器面板中的彩色轮廓图标看起来很棒! 🎉

我希望扩展程序也将采用较薄的图标轮廓:)

@misolori最新内部人士中的图标发生了一些奇怪的事情:

Screen Shot 2019-07-09 at 6 20 49 AM

.vscode文件夹已折叠

Screen Shot 2019-07-09 at 6 21 05 AM

.vscode文件夹已扩展

注意:我使用的是默认的seti图标集

@misolori所以包图标看起来好多了!

Screen Shot 2019-07-09 at 6 24 15 AM

但是现在自述面包屑看起来很奇怪:

Screen Shot 2019-07-09 at 6 24 38 AM

我不太确定我们能对此做些什么

@johnletey感谢文件图标上的提示,这些与我的更改无关,但提交了#76925进行跟踪。 我将看看面包屑图标。

感谢您的快速回复@misolori! 感谢您提出问题并调查面包屑!

大多数情况下,这些图标看起来不错。 我唯一关心的是数字(例如在SCM或文件图标上)太小而难以阅读。 我可以弄清楚,但它看起来像是粗体,抗锯齿或类似的东西。

感谢您修复SCM Bold图标!

是否有计划更新状态栏中的图标?

我不确定这是否是正确的线程,但由于它与图标相关,所以我将进行拍摄。 对我来说,这是一个长期存在且非常烦人的问题-选项卡中的图标,文本和关闭按钮在垂直方向上非常偏离轴,需要在视觉上更好地居中。 检查下面的图像我的意思。 顶部是当前,底部是应该的:

Untitled

编辑器上的关闭图标未呈现,但按钮仍然存在。 单击此按钮,将显示提示。

我不确定这是否是正确的线程,但由于它与图标相关,所以我将进行拍摄。 对我来说,这是一个长期存在且非常烦人的问题-选项卡中的图标,文本和关闭按钮在垂直方向上非常偏离轴,需要在视觉上更好地居中。 检查下面的图像我的意思。 顶部是当前,底部是应该的:

Untitled

这是我通过稍微调整CSS来实现的:

Annotation 2019-07-09 105259

我必须说-面包屑也有同样的问题。 另外-面包屑可能需要更高一些。 我知道需要节省空间,但是它可能太薄了。 面包屑条可能会增加几个像素,并用较薄的标签部分补偿。 无论如何,它们在垂直方向上太大了。

所有的新图标都很好。 我喜欢新的。 但是“隐藏所有更改”图标似乎尚未更新。
Screenshot_1

image
绿色-文字中心,
黄色-python图标中心
红色-关闭图标中心
蓝色-拆分图标中心

@iyashpal看起来像是GitLens扩展提供的图标,而不是VS Code图标的一部分。
请参阅https://github.com/microsoft/vscode/issues/8017#issuecomment -504295222和响应https://github.com/microsoft/vscode/issues/8017#issuecomment -504300145

@IllusionMH好,谢谢。 我认为这是VS Code的一部分。

@ Studio384状态栏图标是单独的,正在跟踪中#76909

@borgdylan,这是一个在#76739中被跟踪的错误。

@lllopo进行面包屑对齐,请参阅#67342,否则请创建一个单独的问题

同意@dalDevelo的齿轮图标。 绝对是我最突出的东西。

面包屑的@misolori (不是对齐而是间距):
内幕人士:
image

稳定:
image

@eamodio这是如何显示面包屑的问题,图标大小相同且居中,您可以将它们与“大纲”视图进行比较,因为它们是相同的图标。 在#67342中也对此进行了跟踪。

@misolori啊,好的。 我浏览了这个问题,并没有真正注意到水平间距-它似乎主要与垂直对齐有关。

@ Studio384状态栏图标是单独的,正在跟踪中#76909

@borgdylan,这是一个在#76739中被跟踪的错误。

@lllopo进行面包屑对齐,请参阅#67342,否则请创建一个单独的问题

@misolori那么标签图标/文本的垂直对齐怎么样?

@misolori @iyashpal中提到https://github.com/eamodio/vscode-gitlens/issues/784#issuecomment -509941591仍有需要被更新的图标:

Screen Shot 2019-07-10 at 4 29 25 PM

起初,我以为这是gitlens的一部分,但后来我意识到这是vscode图标的一部分!

@johnletey看到https://github.com/microsoft/vscode/issues/8017#issuecomment -504300145和在这里,这是一个GitLens图标。

谢谢@misolori ...我将更新该图标(正在浏览和更新所有GitLens图标)

新的活动栏图标不再适合像素显示,在我的标准DPI显示屏上看起来丑陋且模糊,并且与所有其他图标不一致。 并非所有人都有视网膜!

是否已删除了切换到实心图标变体的选项(新版本,而不是原始图标),还是只是将其移动到其他地方? 轮廓图标很难区分,而VS Code UI对我来说要难得多。

@ToxicCaves参见https://github.com/microsoft/vscode/issues/8017#issuecomment -502809582,我们尝试将图标保持在1px位置,以使它们保持网格状,但最终变得太细,而2px太厚。 然后,我们决定将图标设计为16px(与其余图标一样)并带有1px边框,然后将图标放大以使笔划成比例地相同。

而且我们没有切换图标样式的选项,这是早期探索的一部分。 根据这里和用户研究的反馈,我们发现轮廓样式具有最积极的影响,并且与Microsoft设计语言(MDL)更加接近。

@misolori要为非视网膜用户提供更好和更一致的视觉体验,如果希望线宽保持一致,将活动栏图标显示的大小更改为32px而不是28px可能是一个不错的选择。

新图标很棒,但是Git中的图标对我来说却不见了。
image
(我使用“地平线”主题)

编辑:问题仍然存在于默认主题

@haydennyyy您在使用远程扩展(WSL / SSH)吗? 如果是,那么这些扩展很可能是一个问题,请参阅https://github.com/microsoft/vscode-remote-release/issues/687。

@misolori您能否共享Solid Style图标集文件或指向它们位于https://github.com/microsoft/vscode/issues/8017#issuecomment -476044257的提交?

@usernamehw ,我认为这将需要UI图标系统(用于vscode UI,而不用于文件)

@ SupinePandora43我只想使用自定义CSS和JS Loader摘录图标

🎉非常感谢大家,参与了这项工作,并通过各种迭代提供反馈。 您是这项工作的重要组成部分,我很高兴地宣布,新图标将在7月的发行版(1.37)中发布,并将在下周推出!

谢谢你成为一个了不起的社区❤️

使用笔触代替重磅填充的更清洁,更现代的图标

哦,他们应该匹配流利的设计。 将它们全部标准化确实是很棒的工作,但是我一直更喜欢纯色图标的外观,因为它们

  • 减少视觉混乱(代替每个图标多条线,而是1-2个形状,当您有很多图标时,这一点尤为重要)
  • 一目了然,使整体更容易识别含义
  • 更好地缩放到较小的尺寸

总的来说,我对一致的图标集感到满意,尽管我认为用户可以选择实心(基于与新图标相同的设计和形状)或薄型样式会很好。

刚得到更新,看到那些概述的图标我感到非常失望。 看到https://github.com/microsoft/vscode/issues/8017#issuecomment -476044257中的纯色图标,我确实希望它们更好。 希望将来可以自定义这些图标。

也就是说,这确实与Windows 10和Office 365中的新图标样式一致,但是我也不喜欢这些图标。

哦,亲爱的,现在所有的图标都模糊了😞

我不太在乎图标本身,但是git change图标中数字的大小较小,我现在无法真正阅读。 这对可访问性不利。

不喜欢尖括号而不是+/-以折叠代码
白痴对此有何想法?

@coaperator请保持尊重。

有什么办法可以恢复旧的侧边栏图标? 无法在“扩展”图标上显示那些倾斜的角。 很草率的工作。
Screenshot from 2019-08-09 12-52-50

@badunius显然,这是有意的,因为早期版本的图标不太草率,但已对其进行了更改,以使线宽与较小的图标“一致”。 一般而言,填充图标选项可能会更好,因为这样的问题(最终会导致外观看起来更松散)

如果其他人对新的收合图示有疑问,请在这里投票-> https://github.com/microsoft/vscode/issues/78024

@ToxicCaves我可以使用一致的线条,也可以使用亚像素别名,这是因为它们没有调整线条连接。 左侧是他们现在对我的外观,右侧是包括我在内的所有理智的人所期望的样子。
linejoin

文本不在此处突出显示的圆圈的中心。
而且图标与文本相比太大了。

Screen Shot 2019-08-09 at 11 33 56

Screen Shot 2019-08-09 at 13 22 35

文件更改中的上/下箭头和空格键高于其他
Screen Shot 2019-08-09 at 11 45 56

有什么办法可以恢复旧的侧边栏图标? 无法在“扩展”图标上显示那些倾斜的角。 很草率的工作。
Screenshot from 2019-08-09 12-52-50

哇,是的; 新的侧边栏图标非常难看。 “浏览器”图标和“搜索”图标都可以,但是其余的图标似乎过于简化/降级了,并具有不熟悉的艺术风格。 我特别习惯于VS图标进行扩展。 构件块也并没有真正更好地尖叫“扩展”。 我认为我永远不会被它们困扰,直到我用扩展名替换它们。 两种样式都比更新前的图标差很多,而且差很多。

新的侧边栏图标对于我来说太小了-可能是因为我的眼睛有中度近视程度:

使用Win 10上的VS Code v1.37.0(DPI = 1),如果我想单击一个图标,我经常会花相当长的时间查看该图标。 一开始我会注意到它还不是很清楚,然后我必须告诉我的大脑“不要被模糊的线条分散注意力”。 最后,我会打动我的大脑,并记住“设计上并不太清楚”,因此我设法在至少1秒钟内单击它。

我非常需要一种解决方案来恢复旧图标-或至少手动进行自定义。

一目了然地阅读这些图标要困难得多。

Screenshot from 2019-08-09 11-39-11

图标中+和-号的绿色/红色不应删除。 甚至是“清除搜索结果”图标中的一个。 它只需要更多的是均匀/对称的红色/粉红色X,而不是两个笔触。 至少“开始调试”图标仍然具有颜色(但实际上应该再次稳定)! 需要与Visual Studio具有更多的同等性。

我有点喜欢旧的图标,但是带有颜色...现在,如果不刻意地看着和斜眼看,就很难理解图标的含义。 他们需要更大并且有颜色。 如果没有颜色(可能是填充的),轮廓对于视觉效果来说很糟糕。

嗯,我想我想使用旧的图标集。 _new发行版1.37_中的新图标太_thin_且不会给人留下深刻印象。 如何返回可选的旧图标? :((

嗯,我想我想使用旧的图标集。 _new发行版1.37_中的新图标太_thin_且不会给人留下深刻印象。 如何返回可选的旧图标? :((

我同意你的看法,在预览版中尺寸不错,但在1.37中,请认真对待吗???

image

我个人在识别方面没有问题,但是我仍然不喜欢VSCode轮廓图标和由各种扩展名贡献的品牌图标之间的视觉不一致。 我强烈怀疑时间能否解决这个问题。 不可否认的是,大多数品牌图标都是可靠的,并且很少有产品或组织提供其徽标的轮廓版本(并且其轮廓版本在笔划宽度等方面可能会有所不同)。 这是可悲的看到一个试图解决视觉不一致引入另一种类型的不一致。 像VSCode这样的可扩展平台提供的IMHO默认图标应更保守且毫不奇怪。

新图标总体上有所改进,但我有一些担忧:

  • 还有大约200个受支持的图标(来自octicons)需要更新:

    • 结果,我的状态栏现在看起来与应用程序的其余部分完全不同,何时可以解决此问题?

    • 为什么不解决此问题,并提供新图标(如果不是所有图标都已更新为新样式)?

  • 你们确定应用程序使用潜在的数百个小图标时,确定轮廓样式优于实体样式是正确的选择吗? 我不确定它们在非视网膜屏幕上是否可读。

仍然希望使用图标的纯色版本。 作为@smikitky精美把它上面有将是之间的一些矛盾内置大纲图标和“正规”坚实的标志,我实在看不出这个矛盾得到解决。

  • 结果,我的状态栏现在看起来与应用程序的其余部分完全不同,何时可以解决此问题?

@fabiospampinato退房#76909

伙计们,是否可以以某种方式切换回-/ +图标进行代码折叠/展开? 这实际上是IDE的标准,当在不同的代码编辑工具之间切换时,具有这些括号的内容让我感到不舒服。

不得不关闭家里的自动更新功能,可惜工作中的VSC确实进行了更新。 现在,我必须找出如何还原工作中的最新更新。

如果您在Mac上并通过自制瓶安装,则以下命令会将您降级为以前的版本:

brew cask reinstall https://raw.githubusercontent.com/caskroom/homebrew-cask/0392663d3ae7ed30f8e1b6482abe26da78dfc9b1/Casks/visual-studio-code.rb

如果您最初没有使用自制软件安装,则可以删除该应用程序并使用install代替reinstall

只要确保通过设置关闭更新即可!

伙计们,是否可以以某种方式切换回-/ +图标进行代码折叠/展开? 这实际上是IDE的标准,当在不同的代码编辑工具之间切换时,具有这些括号的内容让我感到不舒服。

@ Serg-de-Adelantado请在这里投票-> https://github.com/microsoft/vscode/issues/78024

除以下三点外,我对新图标集的总体感觉还不错:

  1. 折叠/展开切换开关为>。 这些应该是三角形,或者在框中为+/-,或者>括号必须比字体更粗且正好为90°,以免将它们误认为文本。
  2. 具有圆角的矩形(例如“ Explorer”图标)。 一张纸的显着特征是它具有完美的矩形,尤其是不圆角。 视图面板也是如此。 左边是现在的样子,右边是我认为的样子。

explorer

  1. 小图标。 例如,来自“搜索和替换”面板的“全部替换”图标-这些要素的高度均为1至4px。

我知道很多人已经谈论过这个问题,但是颜色的丢失和图标的填写令人困惑。

图标必须直观,否则弊大于利

最基本的例子是-清晰的搜索结果。 最好是选择加入较旧的图标集,或者提供一种通过图标集或_settings.json_进行选择性更改的方法。

我对新图标感到非常满意(并不是说旧图标仍然很糟糕),但最重要的是-我非常非常高兴树和面包屑的丑陋扩展/折叠三角形被替换为该图标人字形好。 不过,我认为尺寸调整并不正确,并且在不必要的位置图标过于醒目。 以下是imo的一些修复程序的小屏幕截图,imo:

Untitled

顺便说一句,尽管我对代码折叠处的人字形还好,但是我看到有些人没有挖掘它,所以我必须说+/-也很好。 但是,请不要将树上的三角形(和面包屑)带回去-它们真的很丑,所以90年代。

我必须赞赏提高一致性的愿望,但我必须说,我非常不喜欢这种变化。

  • 它仍然不一致,而且永远不会如此,除非您尽快恢复到旧样式。
    并非所有图标都已更新,更重要的是,它现在与那里的每个扩展都不相符-并且您不能指望所有扩展都会被更新,因为其中许多扩展都是在某人宝贵的空闲时间制作的。

    侧栏中的图标特别糟糕,因为它们很大并且始终可见,不断显示与我安装的每个扩展程序的不一致。

  • 图标的笔触太细了,我个人认为这绝对可怕。
    旧图标的粗体和柔和外观要好得多,并且可以轻松区分文本和图标。 现在全都是一团糟。

    资源管理器树中使用的人字形字体特别可怕,因为它们现在与文本融合在一起,使每个级别的缩进变得不太清晰。 认真地说,我找不到合适的词来形容我多么讨厌那些新的人字形。

  • 失去颜色是没有帮助的。
    虽然我喜欢图标是简单的且大多是灰度的,但是对于诸如破坏性操作(例如清除列表或还原更改)的较小颜色提示确实有助于防止错误。

  • 我认为没有人真正要求这种样式更改。
    这个问题最初是出于提高一致性的愿望,但最终以某种方式彻底改变了图标样式。 实际上,我前一段时间曾看过这个问题,并认为这将是一件好事,但是如果我知道将彻底改变样式,那么我会大声反对。 这是不想要的更改。

我全力以赴以提高一致性,但请_please_恢复为与旧样式更加匹配的图标样式,并使用更柔和,更粗体的图标以及更多的颜色提示。 并且,请在扩展程序开始更新其图标之前,宣布您打算立即这样做,从而造成更大的混乱。

我希望该项目考虑将侧边栏图标发布为可配置的集合。 我非常喜欢旧图标,而不是这些看起来像线框替代的新图标。

它仍然不一致,而且永远不会如此,除非您尽快恢复到旧样式。

没有得到这个论点。 它仍然不一致,所以为什么要改进,只是回到旧的,甚至更加不一致的设置? 无论如何,状态栏图标还是不一致的? 这些问题正在另一期中进行跟踪。 还有什么? 与其他图标相比,哪些图标没有更新或风格不一致?

扩展将很快与新样式匹配。 那只是时间问题。 无论样式是否更改,大多数扩展图标如果都希望遵循与收件箱图标相同的准则,则无论如何都需要对其进行更新。 除了您在此处提出的“粗体与轮廓”图标问题以外,还可以在其他方面找到这些不一致之处。

大家好
所以我今天早上打开了vscode,就像wtf发生了,这是我对某些beta版本的vscode的错误吗? 然后我意识到了这个新版本,并且读了“所有VS Code中的新现代图标”,现在我就像“对你开玩笑吗?” 这个新图标在哪个世界是现代的? 真的非常恶心,我实际上正在下载先行版本,并希望将来会有一些选择来选择图标的方式,否则我将永远被困在2019年6月的更新中。 无论如何,这对我来说是降级的,真的没想到,通常vscode团队会在更新方面做得很好,并且大多数时候,如果您不喜欢它,可以选择禁用它,但是看起来并不就像这里....现在这是我的看法和见解,我知道你们中有些人与我分享,另一些人则不同意。

楼上的+1。 升级后看起来很奇怪

这不是味道的问题。 它不够漂亮还是现代还是酷。

新图标明显不那么可见,这对于视力较差的人来说是一个大问题。

给我的表演塞子。

新图标中的线条无法捕捉到屏幕像素,并且模糊不清。 可以更新图标,但它们必须可读。

这里的例子:
image
新的是完全没用的。 我真的应该能够阅读其中的字母a,b,c吗? 真?

您是否曾经看过它们在标准72dpi屏幕上的渲染效果,还是只在设计时使用的4K显示器上进行了查看?

另外,颜色确实有助于使图标的不同部分成为一体。

线条粗细也太细了,但是那是MSFT风格,所以我想那没有改变。

@ qt1是正确的:

给我的表演塞子。

超级令人沮丧。 Yall可以做得更好。

image

我绝对不能忍受侧栏中的新调试图标。 记住,这也是一些用户单击以启动和运行项目的地方,但是现在我们每次都看到一个可怕的错误。 旧的图标要好得多。

旧的扩展程序图标也更好,更具有标志性。 这比较平淡,意义不大。

我可以习惯其他的新图标,但是我确实认为线条宽度太细了,感觉太幼稚了,就像我们失去了使VS如此酷炫的精致复古外观一样。
文件资源管理器中的V形符号存在问题。 可能太薄,间距不足。

新的STOP调试图标和START调试图标是空心的,这令人讨厌。 可立即识别的标准有什么问题?
image
image

我绝对不能忍受侧栏中的新调试图标。 记住,这也是一些用户单击以启动和运行项目的地方,但是现在我们每次都看到一个可怕的错误。 旧的图标要好得多。

我不介意该图标是错误,而不是“请勿错误” /“没有错误”图标。 但这与大多数调试器图标相比,是一个难看的错误。

完全同意所有观点。 新界面不是很有意义,看起来很幼稚。

@dirkesquire是的,在浅色主题上更糟。

而且在Visual Studio中也不是空洞的
image

我感谢图标的更改。 绝对需要提升。 都是为了保持一致性。 但是新图标的边框很细,看不清图标。 新的V形图标集增加了不必要的混乱。 人字形图标的作用是什么?

是否有任何适用于VSCode的图标准则? 因为第三方扩展程序开发人员还需要更新活动栏的扩展程序图标。

超级令人沮丧。 Yall可以做得更好。

完全!

抱歉,新图标绝对可怕,看起来好像是孩子在画……只要它们看起来很糟,它们是否是“现代的”是完全无关的……旧的图标对我来说还可以,新的看起来像是“后备主题”或图形错误。 请还原,这次我们可以选择使用旧的图标,也可以对其进行真正的改进,但是没有所有这些“现代”的炒作和细腻,难以理解的轮廓。

@arniebradfo我想我知道为什么会发生这种模糊。

这是我在另一个线程上看到的:
“我们所有的图标都与Microsoft的图标(也称为Microsoft设计语言)中使用的图标相同。”

看起来好像他们不鼓励位图图标。
这就像强迫每个人在应使用汇编的地方使用interpenetrater(更多的工作,但结果完全不同)。

这是一个明显的错误。

矢量图形具有很好的灵活性。 但是,如果您知道分辨率,则可以使用微调的位图做得更好!
与上面的示例完全相同。

请恢复为旧的图标,并缩小列的大小(与以前一样)。 新的方法不直观,因此本专栏可以进行扩展。
我也同意,很难找到新的搜索和替换图标。 (即使在高dpi的显示器上)
如果您真的认为这些新功能很棒,那么至少为我们添加一个选项以恢复到旧版本。

我支持以前的评论者。 新图标太糟糕了。 较旧的Clear Search Results图标的十字架为红色,图标的主要白色为良好的可见性。 新图标全部被白色覆盖,我真的很困惑找不到它

我认为新图标看起来很可爱! 感谢您为此重新设计付出的辛勤工作。

@与其味道
好的图标既可以美观又可以使用。 不是这样的:/

有趣的是,我注意到尽管存在着明显的可见性问题,但图标越小,它们实际上看起来越好。 也许是因为它们太简单了? 任何大于50x50(在标准1920x1080显示器上)的东西都会开始显示瑕疵(相当小)。

@ qt1

矢量图形具有很好的灵活性。 但是,如果您知道分辨率,则可以使用微调的位图做得更好!

矢量图标不禁止像素捕捉。 设计人员只需设计图标即可在72dpi屏幕上清晰光栅化。

这里的大多数帖子只是讨厌图标的样式/外观。 我认为“哦,它与众不同,我不喜欢改变”这一说法是不公平的。

但是,图标必须清晰易懂,并且需要传达其用途。 它们需要在低屏幕分辨率下保持清晰,即使这意味着它们并不是100%拥有品牌。 这个新集合中的许多图标都达不到这个目标。 我的抱怨是,许多新图标无法正常工作。 他们只是一片混乱。 我不要旧的,我要你们修理新的。

关于“单色轮廓”方法...我记得Visual Studio已经存在,并且同样受到人们的欢迎。

Visual Studio 2010具有“旧的”图标方式,即高度详细的带有颜色渐变表面的图标。
Visual Studio 2011 Beta具有“现代化”的外观,他们通过选择单色方法来实现,仅在绝对有必要时才使用抗锯齿。

快速添加颜色的请求成为最受欢迎的请求。

从目前的状态来看,我认为他们做了很好的折衷方案,通过不使用渐变并避免出现锯齿来保持调色板非常简洁,同时仍然允许许多图标和基本图标元素(例如文件夹) ,星号,箭头)以具有独特的颜色(黄色文件夹,蓝色软盘,红色叉号,绿色播放按钮等)。

我觉得VS Code现在正在重复Visual Studio设计人员团队多年来所犯的同样错误。

https://www.itwriting.com/blog/5651-developers-dislike-monochrome-visual-studio-11-beta.html

@arniebradfo

您已发布了一组模糊的图标。 这种模糊的原因可能不是针对特定按钮的特定分辨率进行微调。 我怀疑他们做了一个通用按钮,可以按比例缩放,然后按比例缩放到应用程序上图标的大小。 顺便说一句,图标也失去了颜色,而不仅仅是分辨率。

不管是什么原因,我完全同意最终结果是无法满足“图标必须清晰易读”的要求。
对我来说,它更是可及性而不是品味的问题。

我希望团队能够找到一种方法,让用户选择较旧的图标,至少要等到新的图标得到修复为止。

这里的大多数帖子只是讨厌图标的样式/外观。 我认为“哦,它与众不同,我不喜欢改变”这一说法是不公平的。

公平地说,图标具有功能方面-它们旨在传达按钮的功能,而无需编写通常更宽且长度也随UI语言而异的单词。

但是,如果“调试”错误看起来像是发光的Windows Defender防护罩和挂锁的混合物,或者如果人字形折叠点看起来像是要折叠的XML源代码的一部分,则该图标可能缺少一个元素它应该增加:一眼就能看出动作的清晰度。

这些图标中的一些看起来好很多,但是有时它们却很薄,具有无法阅读的微小功能。 当图标较小时(例如在搜索/替换窗口中),使用颜色确实会有所帮助。

我以为自己视野很好,但是在进行了新更改后,我无法轻松阅读其中的大多数图标。 我认为如果应该可读的话,可能需要戴眼镜。 :slightly_frowning_face:

是否可以通过某种方式增加所有图标的重量/大小?

不太喜欢新外观,看起来像是专为孩子设计的,看起来并不现代。
有些看起来更像某些in菜单图标,但是是的。
我们是否可以像使用文件图标一样创建图标扩展名来更改这些图标?

只需加上我的两分钱,有些图标就很棒,有些图标太细或太小,降低了可读性/可读性。

我认为对整个新图标会有不同的看法是因为不同的开发人员将完全依赖于不同的图标。

以我个人的经验,从可用性的角度来看,我不再能够控制代码折叠,因为人字形在关闭和打开状态下看起来都太相似了。

这里的明显问题是,新图标可能不适用于某些开发人员,并且受影响的人无法控制将图标更改为更合适的图标集。 最好的情况是尝试“修复”图标,以使它们适用于所有人,但可能无法实现。 总是会有一部分开发人员可以通过替代方法得到更好的服务。

我认为我们开发人员总体上需要一种具有主题主题的UI图标集的方法。 对于创建主题的人,将主题用于可访问性目的的人,或者需要对一件事物进行更改以提高生活质量的人来说,这将是一种高质量的生活。

我可以回复吗?

@GauravRajSharma NOPE!

并不是对新图标的辩护,而是更多尝试分解和对所提及问题的一些思考:

  1. 美学-我实际上喜欢新的套装,但是那并不重要...好吧,我实际上喜欢除调试图标以外的所有东西,我讨厌自己的胆量,我喜欢新的调试图标和树上的人字形,在另一方面面包屑,如此反复-这应该的问题。 我想说的是,这根本不是讨论的重点。 许多人不喜欢他们,就像其他许多人不喜欢他们一样。 例如,在内部人员阶段没有重大抱怨的事实,基本上意味着所有内部人员或多或少都喜欢(或至少接受)他们。 总体而言-在美学方面,没有一种适合所有人的尺寸,应该尊重创作者的设计决策。
  2. 可读性-意思是字形正确传达底层函数含义的能力。 关于这一点-我真的没有抱怨。 所有新的字形都非常清晰。 新的扩展程序图标有所不同,但是-它是您无法真正绘制的单词之一-一旦知道图标的含义-您就知道了,就是这样。 老实说,我真的没有在这里看到问题。 如果某个图标有点奇怪-不能超过一个小时-之后您就习惯了。
  3. 清晰/模糊-关于这一点,我可以提出申诉。 当然,声称位图会比svg-s好得多的说法毫无意义。 SVG-s是必经之路,但是-显然存在错误的缩放方法。 如果您知道一个字形的大小主要为24px,则不要将其设计为16px并缩放,因为很明显它无法缩放。 这是简单的数学运算-24/16为1.5,因此在16px处,在24px上为1 px的行将... ... 1.5px-而不是1px或2px,所以它被设计模糊了。 从搜索和替换图标开始-它们以前都不可读-对于要表示的图像来说它们太小了。 缩放比例不佳只会使问题恶化。

噢,是的-以及人字形折叠问题。 我无法想象它们如何与任何东西融合,除非您使装订线与代码背景具有相同的颜色,但是好吧-默认情况下这是错误的。 为什么要这么做,我真的不明白。 按照同样的逻辑,在这种情况下,行号也会与代码混合。

@lllopo对我而言,可读性是唯一且唯一的尖锐问题。 美学是次要的。

新图标更稀薄,空气稀疏,对比度更低,颜色,重量,形状的多样性更少,与背景的分隔更少。 特别是在轻主题上。

对我来说,使用它们已经成为一项复杂的视觉任务-从实际目的或编码和调试中集中精力。

也许您的视力比我好(对您有好处)。 但是,设计对某些人有用而对其他人来说却很沉重的图标是错误的。
这是一个可用性/可访问性问题,应进行相应处理-即启用并包括所有可能的用户。

@lllopo对我而言,可读性是唯一且唯一的尖锐问题。 美学是次要的。

新图标更稀薄,空气稀疏,对比度更低,颜色,重量,形状的多样性更少,与背景的分隔更少。 特别是在轻主题上。

对我来说,使用它们已经成为一项复杂的视觉任务-从实际目的或编码和调试中集中精力。

也许您的视力比我好(对您有好处)。 但是,设计对某些人有用而对其他人来说却很沉重的图标是错误的。
这是一个可用性/可访问性问题,应进行相应处理-即启用并包括所有可能的用户。

我在某种程度上同意您的意见,但我只是认为适当缩放以使其更具可读性是很重要的。 是的-也许还可以使用适当的颜色,但是这个主题不依赖吗?

我认为新图标非常好。 你们都需要放松一下。
互联网总是“ ch-ch-changes”! 无论如何。

@cerib

认为一切都很好是一回事。 有争议-但这是您的个人看法和品味。

告诉其他人接受您的方式(并在您走开时开玩笑)? 好吧,一点都不酷。
尝试接受他人有权享有其他意见,并拥有您可能没有的限制。

恕我直言,这是这里的重点。 对于具有某些视觉限制的人来说,新的设计确实更糟。

这使我想起整个Blender 2.79> 2.8图标的争论。

比较方式

asdf

从多样的,立即可识别的和令人难忘的,到现代的,扁平的和单调的。
当然,可以对一致性和整体质量进行争论。 但这是朝错误方向迈出的一步。

请允许我将展开/折叠图标(当前为人字形)配置回小三角形。 我非常喜欢。

我认为新图标非常好。 你们都需要放松一下。
互联网总是“ ch-ch-changes”! 无论如何。

我认为这里的大多数人都在使用建设性的批评。

喜欢新图标! :heart_eyes:

新图标很棒,您认为您可以帮助LiveShare团队更新它们吗? https://github.com/MicrosoftDocs/live-share/issues/2601

好的,所以我感谢新设计。

但是,Explorer和Extensions图标上的圆角不符合Microsoft的图标准则。

圆角适用于现实生活中有些圆角,例如USB驱动器外壳的边缘,而不是金属端口的实际角。

59722433-844b4680-91d8-11e9-9428-2b36137b0f0a

Explorer图标是2张纸,我找不到其中带有纸的Microsoft官方图标都具有圆角的纸张。

扩展程序图标,我们可以辩论一下,但是如果它应该代表构建块,则乐高积木的边缘非常明显。

加上它在眼睛上会容易得多。

他们不遵循这些准则,因为它们仅适用于UWP应用。
代码不是UWP,因此不需要遵循标准。 无论如何,MS的
品牌在变化,因此最终图标必定会发生变化
太。 @ 10楼

在2019年8月15日星期四中午10点10F [email protected]写道:

好的,所以我感谢新设计。

但是资源管理器和扩展图标上的圆角不在
符合Microsoft的图标准则。
https://docs.microsoft.com/zh-CN/windows/uwp/design/style/icons

圆角适用于现实生活中有些圆角
类似于USB驱动器外壳的边缘,但不是
金属端口。

[image:59722433-844b4680-91d8-11e9-9428-2b36137b0f0a]
https://user-images.githubusercontent.com/18104031/63091392-7c9ce980-bf5e-11e9-846e-191fbfa7cc55.png

资源管理器图标是2张纸,我找不到任何官方的
带有纸片且带有圆角的Microsoft图标
为纸。

扩展程序图标,我们可以对此进行辩论,但是如果它应该
代表积木,乐高积木的边缘非常锋利。

加上它在眼睛上会容易得多。

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件,在GitHub上查看
https://github.com/microsoft/vscode/issues/8017吗
或使线程静音
https://github.com/notifications/unsubscribe-auth/AFKK6BP2AC7ZTTBDXSW6IB3QEU44ZANCNFSM4CHQNTNQ

-
亲切的问候,

海登·杨(Hayden Young)
[email protected]

除了不喜欢我的人以外,这里还有一些小问题。

image

  • 展开/折叠不再与全部折叠相一致。
    折叠图标展开/折叠设置的旧方形图标一致,但是对于新的人字形,它们之间的关系不再明显。
  • 文件夹图标看起来更像标签,而不是文件夹。 以前使用文件夹通常具有的淡黄色来使其清晰可见。

更新资料

感谢所有提供反馈的人,我们整周都在这里和Twitter上进行聆听,非常感谢您抽出宝贵的时间发表评论。 出现了一些问题,我们一直在尝试对它们进行优先级排序,以便我们尽快解决它们。

对于有关图标太稀/难以看清的反馈,我们已将此反馈传递给使用Microsoft设计语言(MDL)图标的图标团队,他们正在努力解决这一问题。

以下列出了我们正在主动跟踪的问题列表,以防您想要👍任何问题(您还可以查看icons-product问题的完整列表):

  • 更新Octicons以匹配新的图标样式#76909
  • 为扩展作者提供图标库#74974
  • 更新扩展程序图标以匹配新图标样式#77411
  • 新的通知图标不是很可读#78857
  • 代码折叠人字形图标令人困惑#78024
  • 允许配置产品图标#79130

我知道这已经在前面发布了,但是我想请求一个选项(或整体切换)新图标的填充版本:

image

[图像最初由@misolori在该主题的早期发布]

@ Hum4n01d请在您的评论上方查看我的帖子更新:

  • 允许配置产品图标#79130

啊,对不起😅我错过了

我是否可以还原到旧图标,同时仍获得新更新?

我个人非常喜欢版本,而不是版本(特别是在活动栏中,其他都可以),并且此功能不是作为选择加入而实现的,这真是令人不安。

我已经看到https://github.com/microsoft/vscode/issues/78748#issuecomment -519795130,不,我不想回滚到以前的版本。


https://github.com/microsoft/vscode/issues/78748#issuecomment -519989407

抱歉,我们无法让您使用旧图标而不回滚到以前的版本。

来吧人..


编辑:

我在https://github.com/microsoft/vscode/issues/79130#issuecomment -521794152中看到了潜力

大家好,谢谢您提供的优质免费产品,但这些新图标很烂。 它们之中没有颜色……为什么呢?

“统一事物”对我们到底有什么价值?为什么统一意味着去除色彩?

大家好,谢谢您提供的优质免费产品,但这些新图标很烂。

我完全同意-MS请停止修复未损坏的东西!
在讨论团队多样性等问题时,您现在需要统一事物。
请注意,尽管它是Microsoft产品,但也是社区的努力。
我必须承认,到目前为止,负责VS代码的团队一直在听取用户和贡献者的声音,这就是vscode如此出色的部分原因!
希望这次也是如此!
我不想像macOS或Adroid一样停止更新此产品。

我喜欢这个更新。 多谢你们!

像这样的变化总是会使一些人不满意。 但是我个人也喜欢它! 感谢您的重大更新!

我不喜欢此更新,因为所有的userland扩展名图标现在都与新主题不匹配。 另外,为什么图标变小? 无论如何,我想我毕竟还是喜欢新的更新。
之前| 现在
imageimage

通过阅读此PR,我理解了为什么要引入它们,但是当您将圆角与非常细的笔划宽度结合在一起时,会使用户做很多工作。

垃圾桶模糊,分开的面板看起来像枕头:
Screen Shot 2019-08-21 at 2 44 44 PM

我在前两个图标中看不到+:
Screen Shot 2019-08-21 at 2 44 54 PM

我强烈建议您修改图标,以使其在常规和视网膜屏幕上清晰呈现。 研究“像素拟合”技术。 看看@dcurtis在2012年发表的这篇精美文章— https://dcurt.is/pixel-fitting

适应了一点之后,大多数新图标(侧边栏,资源管理器)总体上看起来更好。

由于这个简单的原因,我非常喜欢新的大纲图标; 它们与书面字符的可读性相同。

新图标确实一眼就很难解释,旧图标没有这个问题

由于这个简单的原因,我非常喜欢新的大纲图标; 它们与书面字符的可读性相同。

取决于屏幕,房间和人的照明。 这是对此问题的评论309(这是一系列相关问题中的一个),这一事实应暗示有多少人在使用新图标时遇到问题。

我发现新的活动栏图标更难以阅读。 他们对我来说也很模糊。 我使用的是窗口缩放级别-2。

由于不是普通用户,所以我不能说所有的图标,但是侧栏上的突出图标现在更干净了,而且随着混乱的消失,使我在长时间的编辑器中工作变得更加轻松。 :+1:谢谢!

“如果可行,请不要触摸它!” -我认为这引起了有关“还原旧图标”的大量评论

这是我对这个话题的谦虚贡献。 在低密度屏幕上,与git相关的旧图标看上去更清晰(当前的图标几乎像屏幕上的灰尘颗粒一样)。 图标的不一致也变得更糟。

vs-icons

@zzzorgo屏幕快照中的不一致图标属于GitLens插件。 GitLens图标已经由@eamodio更新,并将很快发布!

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

philipgiuliani picture philipgiuliani  ·  3评论

biij5698 picture biij5698  ·  3评论

sirius1024 picture sirius1024  ·  3评论

DovydasNavickas picture DovydasNavickas  ·  3评论

omidgolparvar picture omidgolparvar  ·  3评论