Microsoft-ui-xaml: 标志重新设计和赃物

创建于 2019-08-22  ·  312评论  ·  资料来源: microsoft/microsoft-ui-xaml

[更新 10/18/19] 我们有一个新的标志和新的赃物!

你好,美好的社区! 非常感谢你们开车回家。 我们真的很想创造一些东西,把每个人都放在这里的所有最喜欢的作品结合起来。 我们相信这是这样做的。

WinUI Logo

WinUI Logo Wireframe

让我们汇报一下

我们这里有旧的 Xaml 标志:

Original Xaml Logo

@itsmichaelwest为历史注入新鲜活力时,您会得到一些美妙的东西:

WinUI_LogoExporation_V3_GitHub

从那里,我们转向社区。 在(近)另外一百份探索重新着色和样式的提交之后,我们爱上了这种简单而优雅的转折以自包含括号。 正如@embender所说,转述为:“我喜欢括号上的不同高度。它使它有点抽象——在科学上描绘了一些艺术,”这就是 UI 的结合——艺术和科学合二为一。”

New WinUI Logo - wireframe

至于颜色 - 我们的用户社区发言并要求仍然“感觉像 Windows”。 @mdtauk让人们很容易想象这种熟悉的蓝色再次代表我们的社区:

New WinUI Logo - color

当然,在这个简短的总结中,我删去了来自这里近 40 位贡献者的约 300 次互动,以及更多推特和线下的互动。 简短的故事是这样的:如果没有你们,我们不可能做到这一点,我希望你们都能看到你们的作品和故事反映在我们共同创作的作品中。 不知何故,它看起来既现代又复古,既时髦又历史,精确和不对称。 这是一个对话片段,这是设计使然。 😊

New WinUI Logo - wireframe and color

期待

考虑到这种协作努力的多样性以及我们看到的所有丰富多彩的变化,我们怎么能不使用您给我们的所有想法来保持活力? 我们很高兴能对颜色和主题进行实验。 当我们分享有趣的设计作品时,请密切关注Twitter ,并尝试提出庆祝月份、假期并发布主题变体来分享! 😊

我们还将开始迭代令人兴奋的赃物设计。 请务必光临我们在 Microsoft Ignite 的展位,领取以下贴纸之一!

WinUI Logo Sticker

我们有赃物要分享!

社区团队,我清楚地听到了你的声音。 您希望有机会购买我们的内部团队成员将在 Microsoft Ignite、舞台上和世界各地摇摆的同款产品。 我们选择通过一家可以为您实现这一目标的公司设计和订购我们的赃物。

我今天下了 100 多件商品的最终订单。 每个团队成员都必须选择一个。 许多人都非常喜欢两者,我们自己拿了一个并订购了另一个(包括我)!

请让我知道,如果你有任何问题。 我有几个注意事项:

  • 如果您是我们“第 1000 期 - 谢谢!”的赢家!
  • 连帽衫至少需要 6 件。您可以轻松地将产品换成一件,没有最低限度,也可以将团体订单放在一起。
  • 如果您在本周订购/运送到您的酒店,您可以及时获得这些,并于 11 月 4 日至 8 日在佛罗里达州奥兰多的 Microsoft Ignite 上与我们一起佩戴它们!

WinUI 连帽衫订购链接

WinUI Hoodies

WinUI 衬衫订购链接

WinUI Shirts


[19 年 9 月 12 日关闭}标志重新设计!

WinUI 团队正在刷新我们的徽标,并邀请社区与我们一起试验、创建和迭代新想法!

标志要求:

  • 时尚、时尚、专业
  • 可从 64x64px 的原始大小缩放到 16x16px 和任意大,同时仍可识别。

时间线:

为了保持努力的范围,我们希望在9 月 6 日之前确定我们的最终选择。

这将在哪里使用?

  • 产品/回购品牌
  • 赃物
  • 贴纸
  • 媒体(Twitter、GitHub 等)

法律资料:

我们根据 Creative Commons Attribution-No Derivatives 4.0 https://creativecommons.org/licenses/by-nd/4.0/ 许可参考设计,这意味着我们希望您自由分发任何已商业化的参考设计或非商业。 但是,我们不希望徽标的数千种变体在野外肆虐,这就是我们选择限制进一步分发改编材料能力的许可证的原因。

如果您有改编,请将它们提交到我们的 GitHub 项目,我们将提供在同一知识共享许可下提交的任何改编。 作为许可证下的提醒,引用材料的使用不得用于暗示其由 Microsoft 赞助、认可或授予官方地位,也不得用于非法上下文。 简而言之,在引用任何徽标设计时使用常识——我们很高兴您能分享,但如果使用不当,我们会采取行动。

资源:

  • 当前标志:
    WinUI Library Logo

  • 当前回购图块
    WinUI Repo Tile

hot team-Controls

最有用的评论

看到社区聚集在一起讨论图像总是令人兴奋! ✨

我已经提出了一个我认为可以在各种媒体/商品上很好地扩展的早期草案。 中心是一个圆形立方体,每个面都涂有各种颜色——目前是从 Windows 品牌调色板中挑选出来的,这显然可以改变。

大于/小于符号包围立方体。 这些在较小的尺寸下不可见,而是集中在立方体上。

徽标也可以用于商品目的。 模拟了它在 T 恤上的外观的想法。

仍然是 WIP,非常感谢反馈。 😊我自己担心这感觉有点太抽象了,但我会让社区来判断!

WinUI_LogoExporation_GitHub

所有312条评论

大家好! Windows IXP(以前称为 Composition) PM 在这里想将我的想法添加到混合中 :) 这里有一些我一直在搞乱的 - 让我知道你的想法!

WINUI
logo2
logo
logoagain

你的提交令人难以置信,@embender。 我特别喜欢最后一个和第一个。

WebUI
快速模拟了一个 WinUI 图标,该图标不会放置在套件内的其他产品上。

难以置信,@iconredesign! 我喜欢你在图标中使用阴影来唤起应用程序区域。

为避免与 Microsoft Word 图标(下图)混淆,您对选择一些Fluent Design System 颜色或类似

Microsoft Word icon

绝对地! 我试图保持 WinUI 主题颜色,但它确实出现在我的脑海中,也许在最简短的一瞥中,它们看起来是一样的。

我将查看所提供的指南并提交修订。 谢谢!

@iconredesign

绝对地! 我试图保持 WinUI 主题颜色,但它确实出现在我的脑海中,也许在最简短的一瞥中,它们看起来是一样的。

我将查看所提供的指南并提交修订。 谢谢!

好消息是:您可以帮助我们标准化新的主题颜色。 我们的指导方针在这方面是故意放宽的,这样我们就可以自由地让它变得很棒!

@萨沃伊舒勒

赃物

希望在徽标正式发布后能看到一些可以购买的衬衫。

@萨沃伊舒勒

赃物

希望在徽标正式发布后能看到一些可以购买的衬衫。

@shaggygi ,注意到了! 什么样的设计会让你在接下来的几年里每周都穿我们的一件衬衫? 我的赃物标准至少是那么高。 😉

@SavoySchuler我不喜欢太浮华😄。 我通常每隔几周穿一次我的GitHub 衬衫。 简单的最终标志会很好......可能足以让其他人好奇地询问解释/推广意味着什么。

WebUI v2

我想设计师提供完整的宣言很重要,所以就在这里。

当然,这个标志让人联想到微软的其他软件产品。 这清楚地表明了它背后的组织,模拟 UI 的图标清楚地定义了这个应用程序的用途。 WinUI > 将自己与 Office 产品区分开来,使用括号和斜线代替字母使其明显不同,并避免了字母混淆。 总而言之,该图标清楚地表明:1) 它是 Microsoft 产品,2) 它是用于 UI 设计的基于代码的工具,以及 3) 它不是 Office 产品。

扁平化设计融入了应用程序的主题颜色贯穿其背景的元素。 比喻来说,它是应用程序的“基础”,符合 Excel 等应用程序的设计方案。 可以直观地得出一个结论,其中“WebUI 是位于顶部的 UI 设计的基础。它使它成为可能”。

在我对 WinUI 的简短研究以确保我的徽标真正代表产品时,它让我看到了一个旗舰图像,展示了一个展示界面元素广度的示例界面。 象征性地从该图像中提取灰色以实现 1) 着色的简单性以避免丑陋的设计,2) 它只是与白色的阴影差异,也是中性的,以及 3) 突出层次结构,进一步加强了它的交易用户界面设计(我个人很喜欢),以及 4)不同的灰色调意味着无论渲染图标的大小如何,这个比喻都适用,最重要的是,它在任务栏中的大小。

那么在标准化的问题上,有什么颜色比已经用于表示设计的颜色更能代表 Microsoft 用户界面呢? 它已经与白色完美融合。

希望你喜欢它,如果你有疑虑,请不要犹豫,提出来!

不过,如果您觉得我被困在这个设计上,我深表歉意,所以如果它更合适,我愿意更新。

@iconredesign
你的设计背后的想法是好的,但执行有问题。

首先,为什么有 3 个圆角半径? 为主框架选择一个,为带有 > 的框和卡片选择另一个。

其次,颜色需要一些调整,上面有浅色,下面是深色是没有意义的。

第三,我假设您正在尝试使用多个不透明的深色方块制作阴影? 对于更抽象的东西,这很好,但在大多数情况下,它不是如何完成的。

此外,设计有点像你拿了一个图标,在 Illustrator 中将它矢量化并稍微改变了一些东西(就像我的第一印象一样)。

这就是为什么我需要外界的意见,因为我不会被困在我的脑海里。

我会考虑您的建议并加以改进。 谢谢!

请注意,阴影还很早,因此最终看起来不会如此杂乱无章。 它实际上没有受到最初应该只是一个模型的影响。

@SavoySchuler ,我想知道用你的话来说 WinUI 的使命是什么? 我问是因为通过新标志唤起这些想法会很好。 谢谢!

@iconredesign

请注意,阴影还很早,因此最终看起来不会如此杂乱无章。 它实际上没有受到最初应该只是一个模型的影响。

单击一个按钮来获得阴影是不是比制作一个矩形、选择一种颜色、降低不透明度然后复制它更容易? 😄

WebUI v3

解决所有问题:

1 - 统一了所有的半径,并修复了图标的顶部,这是一个很大的疏忽。 卡片已修正为使用界面的直角。

2 - 导航栏现在更暗,与列表中的第一个菜单项共享相同的阴影。

3 - 在为初始模型冲那个部分之后,最后点击了前面提到的“一个按钮”,这样阴影现在应该看起来更好了。

寻找图标中可能缺少的东西,但我认为现在看起来还可以。

@iconredesign
现在修复好一点了🙂

IDK,可能只是我,但也许尝试一个新的方向? 它让我想起了 Word 图标太多...

WebUI variant

你问,我送! 采取不同的做法,因此 > 是界面的一部分,并且元素从工作表中取出,因此唤起元素仍在起作用。 蓝色是 WinUI 蓝色。

@iconredesign
正在改进,但现在我们已经走得太平,拐角太尖了。 Fluent 正在朝着(轻微的)渐变、阴影和圆角移动。

灰/白框代表菜单项还是?

编辑:另外,想想小尺寸(如第一篇文章中提到的),不知道这个尺寸有多容易解读:)

此变体在设计时考虑了小尺寸。 在那个尺寸下,您无法真正有效地使用渐变和圆角,因为这些元素消失后所有东西都会缩小。

请放心,此设计在任务栏中完全可见。 主要元素是导航栏中的下拉菜单。

@iconredesign
然后制作一个“更大”的版本:D

此外,您甚至可以在较小的尺寸上使用渐变,它仍然会很明显;)
示例:Visual Studio(代码)图标、Sublime Text、Adobe 套件、...

我当然愿意探索多个方向! 我应该注意到我真的很喜欢@iconredesign提交的这个提交:

WebUI v3

我喜欢的有几件事:

  • 与 Microsoft Office Suite 图标的对齐是对图标集的补充。 在视觉上,您知道谁提供产品并唤起信任。
  • 应用程序的比喻非常好。 滚动条和窗口外弹出窗口是对我们新旧控件集的清晰调用。
  • > 文本使这个概念更加清晰,即这是一款面向开发人员的工具。

概念的想法:

  • 主要的问题似乎是与 Word 的配色方案混淆。 @embender的设计有一些不错的@embender的绿色/紫色或其他颜色吗?
  • “应用程序内容”也可以重新配置,看起来也不太像 Word - 也许是显示网格或使用 ProgressRing 的东西? Windows 应用商店中的“Xaml 控件库”应用程序将显示我们的整个 UI 控件集合及其图标。

Xaml 控件库应用程序中控件图标的预览:

Xaml Controls Gallery app screenshot

也许这里的一些视觉效果可以用作灵感? 所有这些都可以单击以查看 UI 控件的真实视觉行为。

@SavoySchuler如果那些也得到一些 Fluent 处理会很好,当前样式对我来说看起来像 VS2015/17 工具栏图标😄

明天我会制作一个模型并发布它

也许只是当前图标的</>部分,
image

或者一个旧的复古,如何现代化一个熟悉的图标,例如

Untitled

请原谅我草率的草图。

也很喜欢@iconredesign的一个,也许对 gt-lt 大括号使用不同的 WinUI 友好字体,对我来说,只有大括号部分本身就足够了,其余的就不需要了。

我确实投票支持它是坚固的、最小的和简单的。 请不要渐变,让我感觉 97'。

@SavoySchuler W 图标很漂亮,但它正在大喊 MS Office Word,mabe 而不是 W 其他东西, </>或任何令人讨厌和熟悉的东西。

嘿,差点忘了说,当前的标志也适用于我!

也许我们应该远离新的 Office 图标样式。 这些图标是 Office 365 系列产品的一部分 - 所以对我来说,将它放在与 Microsoft 相关的所有内容上是没有意义的。

请注意,设计可缩放的图标真的非常非常困难(正如你们刚刚将它放在 T 恤上时发现的 :))。 我建议与 Microsoft 设计团队联系,看看是否有人可以帮助我们解决这个问题。

我尝试过,受到非常基本的 .NET Core 徽标的启发。 他们并没有真正“尖叫”一个 UI 框架,所以这可能是一个问题。 另一方面,它可能适合其他框架徽标,例如 .NET 系列。

概念 1
Concept1

概念 2
Concept2

概念 3
Concept3

@neils9001 FWIW,我真的很喜欢概念 1; 关于灵感的好主意。 (与概念 2 相比,我更喜欢一行中的 WinUI 文本)。 概念 3 也很不错; 看起来可扩展、简单且圆滑。

winui logo-01

我想如果我们已经在这里考虑 WinUI 的图标和品牌,也许我们还可以考虑“另一半”,系统 API( Microsoft.Windows.SDK.Contracts NuGet 包),我们称之为 WinAPI。

我可以想象一个类似 Office 的图标设计,文本为“UI”或“API”,对于 UI,其余部分将类似于那些抽象流畅的艺术之一(类似这些),而“API”可以成为一个或多个齿轮...流畅的齿轮。

也许严格的徽标,小标签可能只是一个 Windows 徽标和旁边的文本“UI”或“API”。 当然,加上抽象流畅的东西和齿轮的艺术部分。

@MySelfMaruf我个人希望 WinUI 不应该与 Windows 绑定。 TBH 我希望名字不是 Win。 因此,对未来扩展适用于任何 .NET Core(甚至 .NET Standard 环境)的 .NET Core UI 持开放态度。
请参阅功能请求。

我实际上对“UI”概念有类似的想法@petroemil

这是我清理和编辑的第一次尝试:
256
image

我想起草一个与windows分开的第二个提交,同意@weitzhandler的观点,避免将这个风格和windows或微软直接联系起来可能是个好主意。

@AmNotADev

@weitzhandler避免将 this 和 Microsoft 的风格直接联系起来可能是个好主意

我指的是 Windows,而不是 Microsoft。

我实际上对“UI”概念有类似的想法@petroemil

我想起草一个与windows分开的第二个提交,同意@weitzhandler的观点,避免将this和Microsoft的风格直接联系起来可能是一个好主意。

同意。 也许 .Net Core UI 或 .Net UI 会很有趣。 但是,我建议现在将这些图标与 Office 品牌相关联。 目前只有 Office 品牌在使用小剪裁。 与下拉面板。

此外,如果这会触发完整的品牌重塑和命名 - 我们如何更好地集成 Windows 社区工具包?

用户界面
WinUI 社区工具包?

我的不好,但我仍然同意@weitzhandler

为了解释我为什么在我的初稿中走这条路,这些不仅仅是办公室品牌风格,其他微软平台也在使用这些风格的标志,包括 Skype、OneDrive 和 Microsoft Teams(Skype 和 OneDrive 缺少切口,但 Teams 有它)。

我认为这是一个很好的实验,在我尝试其他任何东西之前,先看看这种风格的品牌标志会是什么样子。 抄送@niels9001

@niels9001 @weitzhandler WinUI 不是 .NET 独有的,它也是本机应用程序的 UI 框架,我什至可能还记得有关未来 Python 支持的一些信息? 更不用说它还是 Xamarin、Uno 或即将推出的 React Native 解决方案之类的底层框架。

看到社区聚集在一起讨论图像总是令人兴奋! ✨

我已经提出了一个我认为可以在各种媒体/商品上很好地扩展的早期草案。 中心是一个圆形立方体,每个面都涂有各种颜色——目前是从 Windows 品牌调色板中挑选出来的,这显然可以改变。

大于/小于符号包围立方体。 这些在较小的尺寸下不可见,而是集中在立方体上。

徽标也可以用于商品目的。 模拟了它在 T 恤上的外观的想法。

仍然是 WIP,非常感谢反馈。 😊我自己担心这感觉有点太抽象了,但我会让社区来判断!

WinUI_LogoExporation_GitHub

@itsmichaelwest 一如既往地投入并做得很好:)

我一直在勾画一些想法,我将开始尝试将它们创造成更精致的想法。
image

这是一个基于 Visual Studio 的标志
winUI logo idea 1

image

winUI logo idea 3

winUI logo idea 4

这是一个受 Fluent Design 网站启发的徽标

winUI logo idea 5

16px 和 32px 缩放精致图标

image

我实际上对“UI”概念有类似的想法@petroemil

我想起草一个与windows分开的第二个提交,同意@weitzhandler的观点,避免将this和Microsoft的风格直接联系起来可能是一个好主意。

同意。 也许 .Net Core UI 或 .Net UI 会很有趣。 但是,我建议现在将这些图标与 Office 品牌相关联。 目前只有 Office 品牌在使用小剪裁。 与下拉面板。

此外,如果这会触发完整的品牌重塑和命名 - 我们如何更好地集成 Windows 社区工具包?

用户界面
WinUI 社区工具包?

从长远来看,设计是否应该不使用 Windows (win) UI 命名?

Artboard Copy
Artboard

winUI logo idea 7

我实际上对“UI”概念有类似的想法@petroemil

我想起草一个与windows分开的第二个提交,同意@weitzhandler的观点,避免将this和Microsoft的风格直接联系起来可能是一个好主意。

同意。 也许 .Net Core UI 或 .Net UI 会很有趣。 但是,我建议现在将这些图标与 Office 品牌相关联。 目前只有 Office 品牌在使用小剪裁。 与下拉面板。

此外,如果这会触发完整的品牌重塑和命名 - 我们如何更好地集成 Windows 社区工具包?

用户界面
WinUI 社区工具包?

感谢@niels9001 的呼唤。 🦙❤

然而,Windows 社区工具包不仅仅是 UI(尽管我们的控件和 XAML 工作是使用的最大部分)。 我不确定联合品牌在这里有多少意义,尤其是因为 WinUI 团队不管理 Toolkit,我们是独立的组织。 因此,这将是在其他地方进行的更大范围的讨论。

至于设计的输入,我真的很喜欢现有的书本图标,因为它是一个控件库......😛

也就是说,有些设计让我觉得我可能会改变主意……同意我们应该远离 Office 设计模式。

@SavoySchuler ,我想知道用你的话来说 WinUI 的使命是什么? 我问是因为通过新标志唤起这些想法会很好。 谢谢!

这是一个绝妙的问题,@saraclay! 我们对 WinUI 没有正式的使命,因为它不断发展以满足我们社区的需求,但我们对 WinUI 3 的目标是:

“WinUI 3 将以更开放的方式将现代 Windows 演示平台带给更多的开发人员,速度更快。”

如果有帮助的话,我可以再打开里面的内容——我只是想确保不要用技术细节来挤满创新精神。 请告诉我! 😊

image

这是我对当前书籍徽标的看法,风格化为看起来像 Of​​fice 的 Fabric 图标。 正如@petroemil之前提到的,我还冒昧地为“WinAPI”创建了概念。

WinUI 结构
WinUI Fabric

WinAPI 结构 [A]
WinAPI Fabric 1

WinAPI 结构 [B]
WinAPI Fabric 2

关于命名的话题

我实际上对“UI”概念有类似的想法@petroemil

我想起草一个与windows分开的第二个提交,同意@weitzhandler的观点,避免将this和Microsoft的风格直接联系起来可能是一个好主意。

同意。 也许 .Net Core UI 或 .Net UI 会很有趣。 但是,我建议现在将这些图标与 Office 品牌相关联。 目前只有 Office 品牌在使用小剪裁。 与下拉面板。
此外,如果这会触发完整的品牌重塑和命名 - 我们如何更好地集成 Windows 社区工具包?
用户界面
WinUI 社区工具包?

从长远来看,设计是否应该不使用 Windows (win) UI 命名?

我看到很多关于产品命名的精彩辩论。 这些都是很好的问题!

正如@petroemil 所指出的,WinUI 不是 .NET 独有的。 它是 Windows 本机应用程序的现代 UI 框架,可以被包括 React Native 在内的多个开发框架利用,并且它是 Xamarin 和 Uno 之类的底层框架。

我们的目标是为大家提供最快、最简单、最开放的方式来创建世界一流的 UI。 把“WinUI”中的“win”想象成“🏆UI”。 你认为我在开玩笑 - 但我们一直在我们的 🏆Dev (WinDev) 团队中这样做。

如果有人能想出一种方法将 🏆 翻译成合法的标志,那么您将成为@jeffbog的一周。

我还想指出,Fabric 图标(我看到这里称为“Office 图标”)_不_仅限于 MS Office。 例如,你的手机和新的 Windows 终端都使用 Fabric 图标,尽管它们与 Office 完全无关。

Fabric 风格似乎面向跨平台服务,包括你的手机、终端(因为它包含 Ubuntu)和 Azure(该网站使用 Fabric)。 如果 WinUI 也打算(来)跨平台,那么将 WinUI 与其他跨平台服务相关联将是完美的。

@yoshiask我以同样的灵感去了你上面的几篇文章! 我也试图对 Fabric 提出同样的观点,但你比我做得更好。

我喜欢你的结果,但它们感觉比当前的 Fabric 标志更紧凑。

@AmNotADev你能详细说明“紧凑”吗? 您是指颜色方面(在“内容”部分)还是剪裁(带有“>”的“卡片”)?

@yoshiask徽标的“背景”部分的宽度似乎与其他任何 Fabric 徽标比例都不匹配,它看起来有点……压扁了? 我会让它更宽一点,这样整体标志感觉更方。

我有相反的问题,使我的有点太宽而无法匹配。

啊,说得对。 我想我在工作的时候匹配了当前设计的比例,我忘记改回来了。

就像,如果我修复了我的尺寸和定位,这是我对我之前提交的编辑。
256

宽度是固定的('undercard',它是错误的蓝色阴影,哎呀。不过我不想发送垃圾邮件,所以我现在就离开它)
WinUI Fabric

使用我的 Fabric 模板重做@AmNotADev的设计。
WinUI AmNotADev Blue
WinUI  AmNotADev Green

@萨沃伊舒勒
Win Combined
它几乎看起来像 PowerPoint 艺术字

winUI logo idea 9

缩放版本,Office like,Windows 10 Fluent Icon 样式(包括 Acrylic Noise),保留 Book 比喻。

Idea 9 _ all

image

我之前分享过的相同设计的平面和单色版本,加上一个 T 恤模型。 这是面料上的面料!
WinUI Fabric Mono
WinUI Literal Fabric

你好呀!

这是我早期的设计理念。
你怎么认为?
logos

你好呀!
这是我对 WinUI 的想法
winui

关于命名的话题

我实际上对“UI”概念有类似的想法@petroemil

我想起草一个与windows分开的第二个提交,同意@weitzhandler的观点,避免将this和Microsoft的风格直接联系起来可能是一个好主意。

同意。 也许 .Net Core UI 或 .Net UI 会很有趣。 但是,我建议现在将这些图标与 Office 品牌相关联。 目前只有 Office 品牌在使用小剪裁。 与下拉面板。
此外,如果这会触发完整的品牌重塑和命名 - 我们如何更好地集成 Windows 社区工具包?
用户界面
WinUI 社区工具包?

从长远来看,设计是否应该不使用 Windows (win) UI 命名?

我看到很多关于产品命名的精彩辩论。 这些都是很好的问题!

正如@petroemil 所指出的,WinUI 不是 .NET 独有的。 它是 Windows 本机应用程序的现代 UI 框架,可以被包括 React Native 在内的多个开发框架利用,并且它是 Xamarin 和 Uno 之类的底层框架。

我们的目标是为大家提供最快、最简单、最开放的方式来创建世界一流的 UI。 把“WinUI”中的“win”想象成“🏆UI”。 你认为我在开玩笑 - 但我们一直在我们的 🏆Dev (WinDev) 团队中这样做。

如果有人能想出一种方法将 🏆 翻译成合法的标志,那么您将成为@jeffbog的一周。

我想提前为我的设计技巧道歉,请在看以下草图时发挥您的想象力

如果徽标是硬币、奖牌(而不是杯子/奖杯)怎么办?

在 WinUI 的情况下,它可能是一枚银币,里面有金色的调色板? 或者调色板的外曲线可以是更完美的圆,圆的其余部分可以用银片填充。

WinAPI 可能是一枚银币——与下图相反——边缘有一个相对较薄的齿轮,有许多齿。

win-ui-api-logo-sketch

硬币的一面可能是文本UI / API或符号</> / { # } (尽管符号中的符号可能有点太多了象征主义),另一面可能是 Windows 徽标。

它需要一点想象力,但我可以想象这实际上看起来不错。

来自互联网的一些额外示例:

  • 我脑海中的齿轮硬币设计:链接
  • 因为我已经在那里寻找例子,我意识到比特币硬币看起来也很酷:链接

这是我的概念

WinUI-1

基于几个@mdtauk的草图
WinUI VS ScaledWinUI XAML Card

1

2

3

4

5

6

7

8

@SavoySchuler更改 Hybrid + UI = HybrUI 的名称
所有平台的用户界面。 GitHub 上的 HybrUI。

感谢您的惊人想法:颜色和 XML 主题也可以变化!

我认为我们可能通过预先存在的徽标推动了投票,因为这些设计中的许多都引用了 XML 主题。 这很好! 但 XML 也是您可以使用的编程语言之一。 与配色方案相同 -无需坚持蓝色和白色!

如果你能想到颠覆这些主题和/或颜色的时髦和时尚的想法,我们鼓励你分享它们!

话虽如此 - 重命名 WinUI 不是这项工作的目标,但如果您的徽标创意取决于重命名,请随时提交。 请注意,包含“WinUI”名称的徽标可能会受到将做出最终选择的人的更多关注。

你们都是最棒的。 结果真是不可思议! 🏆

winui_funky

@IUsername - 多么令人难以置信的周转时间和令人难以置信的设计!! 🎺@MikeHillberg,你怎么看? 这些是否与您的创作精神产生共鸣? @mdtauk@embender 上面也有一些实验性的配色方案。

我看到使用立方体和括号图像作为 XAML 而不是更广泛的 XML。 但是是的 WinUI 不仅仅是 XAML,所以超越 XAML 图标可能会更好。

我已经尝试专注于 Book/Library 方面和 XAML 方面(目前,XAML 是 WinUI 使用的唯一 UI 框架,WPF 和 GDI 将 XAML 引入了它们的框架中)

这是我今天的绿松石想法,从 64px 放大了 3 倍。 乐趣!
WinUI_3x

老实说,我认为坚持蓝色和灰色配色方案没有任何问题。 蓝色和紫色(尤其是蓝色)似乎与 Windows 的关联性最强,因此我认为将 WinUI 徽标保持为蓝色没有问题。 (除非从名称中删除“Windows”和“Win”。)

另一种观点:Fluent Design 界面主要集中在单一的强调色上,无论是应用程序的颜色还是用户的强调色。 Fluent 应用程序中的大多数颜色仅使用中性色和强调色的变体。 WinUI 的调色板应通过仅使用一种强调色以及黑色、白色和灰色等中性色来反映这一点。

这是一个配对到最低限度的想法。
idea 11

Fabric Icons
微软似乎正朝着他们的图标迈进新的方向。 重新设计的 Office 图标和更新的 Fabric 图标(我看到这里有人提到它们)共享许多元素,帮助它们成为有凝聚力的设计语言的一部分。 我注意到它们中的许多都融入了深度,拥有鲜艳的色彩,抽象地代表了他们的服务,并且是由我称之为块的东西构建的。 以 Excel 图标为例。 这些块是鲜艳的绿色(以一种很酷的几乎像素化的渐变方式),它们抽象地代表了电子表格中的单元格。 它们的深度是包含“E”的正方形在其下方的矩形上投射阴影。 我确保将这些元素融入我的设计中。

我想偏离我在上面的示例中描述的 Office 图标的结构。 由于 WinUI 不是 Office 服务,在矩形窗格上方浮动带有文本的正方形不是我为我的设计选择的方向。 相反,我决定使用我上面提到的一些元素,这些元素为创意提供了很大的空间,同时将图标归类为 Microsoft 产品。

对于我设计中的颜色,我想结合纯色渐变外观(在许多 Office/Fabric 图标中显示)。 因为我不是如何获得可以很好地协同工作的颜色混合的专家,所以我只是使用了 Outlook 图标中的颜色。 它有效是因为我希望设计是蓝色的(就像原版一样)。 我真的只是想传达一般的想法,这些色调起作用了。

在我的许多设计中,我使用块来抽象地表示用户界面。 为了在我的一些设计中实现这一点,我使用了一个未定义的网格,它适用于可以使用 WinUI 组件设计的任何布局。 这感觉像是表示组件库和可以用它构建的接口的最佳方式之一。

我在我的许多设计中使用阴影显示的深度。 深度效果需要对其中一些进行改进,但正如我之前所说,这些应该可以理解总体思路。

Icons 2 Layout

Icons 1 Layout

如果你们中有人好奇,这里是我的一些初步草图:

321
123

4 Logos

我有四个设计,每个设计都有多个迭代,如上所示。 我将对图中的每一个进行更详细的介绍。

  1. 原始徽标的现代化版本。 我真的很喜欢原著的书和图书馆隐喻。 封面可以解释为显示抽象的 UI。 所以它包含多个隐喻,这有点酷。 文本以类似于新终端图标的样式完成。 书签展示了对我很重要的深度,因为它是 Fabric 图标和 Fluent Design 的主要属性。

  2. 从字面上看,WindowsUI 的名称是该设计在​​ Windows 风格的界面上方显示用户。

  3. 垂直导航是 Windows UI 的一个重要部分,在许多应用程序和网站中都有展示。 此设计以类似于 Windows 终端徽标的样式展示了它的简化版本(无论是在形状上还是在强调主要界面元素的方式上。对于终端图标,它是选项卡而不是垂直导航)。 颜色可能应该混合一点,以使文本更清晰。 我认为这非常适合 Windows 设计语言。

  4. 我试图通过这种设计的不同迭代来展示 UI(以及构成它们的组件)的极端抽象。 它们很简单,但我认为它们看起来很酷。

@NoahFeller - 我真的在挖掘图标 1! 我喜欢保留书的比喻,但我不确定我是否理解书封面上的网格。 我认为蓝色网格给图标增加了一点噪音,使其难以从远处解析 - 使用更简单的“封面”会是什么样子?

@stmoy这也是我的最爱之一。 网格背后的想法是我以非常简化和抽象的方式表示 UI 的方式。 我还认为它代表了 WinUI 的框架。 不过我同意你的观点。 也许色调更相似会帮助它看起来不那么嘈杂。 我尽力实现块以匹配其他 Fabric 图标(您的电话、终端、办公室图标)的样式。 我的第一张图片左下角有一个没有网格的图标版本。 我会尝试一些不同的变体,因为我不喜欢那种外观。 矩形的颜色和布局可以改进。 我也在考虑扩大书签。 感谢您的反馈!

@itsmichaelwest ,立方体在您的设计中代表什么? 对我来说,它看起来更像是 3D、AR、空格符号,而不是基于标记的 UI 框架

@itsmichaelwest ,立方体在您的设计中代表什么? 对我来说,它看起来更像是 3D、AR、空格符号,而不是基于标记的 UI 框架

@danzil ,我不确定,但也许是 Fluent 的立方体代表材料?

image

@stmoy @NoahFeller我受到启发,尝试将您用于徽标的一些元素,以及原始书籍的想法和您的第一示例结合起来。

Idea 12

@stevenbrix AFAIK Fluent Design 团队已经从立方体设计转移到展示维度的更简单的轮廓。

image

image

希望我参加聚会还不算太晚!

这是我这边的贡献

WinUI_logo

这些是我背后的想法

  • WinUI 主要用于 Windows,因此徽标源自 Windows 徽标。
  • 由于 UI 始终处于与用户交互的最前沿,因此这里的蓝色组件代表 UI,因为它位于徽标的其他(灰色)组件之前。
  • 为蓝色组件添加了透明度和阴影以表示 Fluent Design。
  • 把角落弄圆一点,使它更光滑。

还有什么可以做的

  • > 符号可以添加到蓝色组件以强调 WinUI

希望你喜欢。

欢迎提出建议。

@ratishphilip它的想法与我正在

image

@mdtauk ,你是对的。 在非常小的尺寸中,透明度、阴影将不起作用。

这是另一个 - 与我之前提交的概念相似的概念,但受到微软 10 月 2 日邀请的启发。 :)

WinUI_logo2

如果将徽标逆时针旋转 45 度,您可以看到徽标中的 > 元素。

@itsmichaelwest ,立方体在您的设计中代表什么? 对我来说,它看起来更像是 3D、AR、空格符号,而不是基于标记的 UI 框架

@danzil立方体是最初在 XAML 徽标中使用的玻璃/光泽立方体的 Fluent 再现:

XAML file icon

我认为 WinUI 的徽标最好能以某种方式表示它提供的内容:一组 XAML 控件和样式。

对此不太满意,但如果有人受到启发用它做某事,我很乐意看到它!

image

这些标志会/应该保持同步吗? 如果它们都包含 Windows UI 和 XAML,它们是否应该共享 WinUI 名称?

image

@mdtauk是的 - 我们的目标是用新徽标中的图像对我们所有的图标进行异花授粉。 😄

时间表更新:下周公布前 5 名!

亲爱的社区,您的想法令人难以置信! 每次我预计你会提高标准时,你就会把它提高得更高。 我们很高兴能与大家一起进行这样的项目。 😊

我们的目标是在下周初公布我们目前为止的前 5 名选秀权,以便每个人都有机会在我们在9 月 9 日将范围缩小到一个之前对他们进行最后一次旋转。

在此之前,我们将继续与您一起头脑风暴和创造!

Idea 14

统一的图标系列 - 这些都基于 16px 网格,因此当您放大时,细节可能会变得更加微妙,正如我在之前发布的徽标创意中所展示的那样

image

这是另一个

WinUILogo

这背后的概念

  • WinUI 由代码 + XAML 组成。 代码用大括号表示,XAML 用 > 表示。
  • 它还表示一个带有圆角的正方形,表示带有圆角的窗口。

另一个强调 XAML 的版本

WinUILogo_a

Untitled-9
我很快就想展示我的设计之一如何适应主徽标附带的 WinUI 图标。 我的设计 1 目标是使 Fabric/Fluent 风格的现有图标现代化。 我的目标是一个新鲜的,新的,但熟悉的外观。 在附带的图标上使用了相同的策略。 显然我做了一些修改,但我尽力在使用现代化方法的同时保持每个 WinUI 图标的基本结构完好无损。 这样,如果推出这些图标,用户仍然会理解它们代表什么,并且他们共享的外观将它们作为单一服务的一部分联系在一起。 与其他新图标共享更通用的元素表明它们代表 Microsoft 产品。 因为图标的某些部分变得更厚(字体和其他细节),它们实际上可以很好地缩放。

这是我之前提交的临时版本

WinUILogo2

我对标志的看法

对当前logo进行简单的现代化改造,感觉上面的一些概念,虽然看起来不错,但与WinUI图标的想法背道而驰。 尽管图标可能类似于一个盒子,但笔记本对它的总结要好得多。

设计相对简单,并考虑到了缩放比例,圆角和微妙的渐变。 来自其他 Microsoft 开发(相关)工具的一些元素在这里,例如终端图标中的<>

image

细节(64px+版本):

image

image

带有 _WinUI_ 字标的徽标

image

我采用了以前的想法,更改了颜色,并添加了 Toolkit 和 Gallery 徽标的示例
Idea 12-family

这是我以前的标志的另一种看法

WinUILogo3

另一个概念

WinUILogo4

改进以前的标志

WinUILogo5

我真的很喜欢那个rishphilip!

我从来没有对符号>看起来像一个“结束标签”这一事实感到高兴。 IE。 令我烦恼的是,符号出现在代码中的位置......

</finished> or </ended> (or </dead>, heaven forbid).

但是您的最新图标(以及其他类似图标)经过了风格化处理,可以将焦点从斜线上移开。

想知道您是否可以将其样式化得更进一步……也许您可以在斜线底部放置一个圆点,使其看起来更像一个感叹号!

感叹号是相关的并显示在 XAML 注释中,如...

<!-- WinUI is awesome -->

只是为了说明我以前的徽标创意的缩放比例,这里是 16px 和 128px 图标 - 您可以看到比例的变化,细节的增加

Idea 12 - Scale

_还调整了图标的U部分投下了阴影_

改进以前的标志

WinUILogo5

@ratishphilip希望你不介意,但我决定尝试调整你的想法......

ratishphilip idea refined
_编辑:从原始设计中恢复了交替的支撑符号_

@ratishphilip希望你不介意,但我决定尝试调整你的想法......

没问题 :)

@ratishphilip希望你不介意,但我决定尝试调整你的想法......

没问题 :)

@ratishphilip谢谢。 您如何看待 XAML 控件/WinUI 库和 Windows 社区/WinUI 工具包的徽标扩展?

@mdtauk这是我对 WinUI 库、库和工具包的概念

WinUILogo6

@mdtauk这是我对 WinUI 库、库和工具包的概念

WinUILogo6

@ratishphilip谢谢,这是我对他们的
ratishphilip idea refined

@mdtauk

虽然看起来很有趣,但它看起来太忙了,有太多重叠的元素和阴影。 只是我的 0.02 美元

@mdtauk

虽然看起来很有趣,但它看起来太忙了,有太多重叠的元素和阴影。 只是我的 0.02 美元

我个人同意,但我只是按照提出的想法,并添加细节

这里还有一些概念。 WinUI 工具箱之一非常粗糙......
WinUI Collection Fabric + WinAPI
这些概念基于开发工具图标
WinUI DevTools Fabric

这是另一个

WinUILogo7

另一种尝试

WinUILogo8

这是另一个

WinUILogo7

这些看起来像糟糕的摩尔纹,阴影有点太浓了,条纹似乎不能很好地代表海拔。

另一种尝试

WinUILogo8

这些更整洁,但图书馆标志和画廊标志非常相似,工具箱看起来不适合方形网格,因此在 16 x 16 像素大小时没有用

时间表更新:下周公布前 5 名!

亲爱的社区,您的想法令人难以置信! 每次我预计你会提高标准时,你就会把它提高得更高。 我们很高兴能与大家一起进行这样的项目。 😊

我们的目标是在下周初公布我们目前为止的前 5 名选秀权,以便每个人都有机会在我们在9 月 9 日将范围缩小到一个之前对他们进行最后一次旋转。

在此之前,我们将继续与您一起头脑风暴和创造!

知道您计划在哪一天减少其中的一些想法吗?

另一种源自 Microsoft Word 徽标

WinUILogo9

时间表更新:下周公布前 5 名!
亲爱的社区,您的想法令人难以置信! 每次我预计你会提高标准时,你就会把它提高得更高。 我们很高兴能与大家一起进行这样的项目。 😊
我们的目标是在下周初公布我们目前为止的前 5 名选秀权,以便每个人都有机会在我们在 9 月 9 日将范围缩小到一个之前对他们进行最后一次旋转。
在此之前,我们将继续与您一起头脑风暴和创造!

知道您计划在哪一天减少其中的一些想法吗?

时间表更新:下周公布前 5 名!
亲爱的社区,您的想法令人难以置信! 每次我预计你会提高标准时,你就会把它提高得更高。 我们很高兴能与大家一起进行这样的项目。 😊
我们的目标是在下周初公布我们目前为止的前 5 名选秀权,以便每个人都有机会在我们在 9 月 9 日将范围缩小到一个之前对他们进行最后一次旋转。
在此之前,我们将继续与您一起头脑风暴和创造!

知道您计划在哪一天减少其中的一些想法吗?

@mdtauk今天下午(9 月 3 日)我将与@ryandemopoulos会面,

@SavoySchuler嗨 Savoy,感谢您的更新! 看到社区如此活跃,真是太棒了:)!

我真的很喜欢很多概念,尤其是那些画廊、图书馆和工具包具有相似外观和感觉的概念。 我们甚至对此进行了扩展,以对齐社区工具包和图库应用程序的 UI,以便为新的 UWP 开发人员提供统一的消息。

我想知道您是否有设计团队的人也在查看提交的内容? 颜色着色(用于可访问性)和可扩展性是非常重要的事情,设计人员在这些事情上往往比我们的开发人员有更多的经验 :)!

WinUI wordmarks

这里有一些字标想法和命名约定。 WinUI _________ 所以一切都感觉它属于一个全面的家庭。

WinUI naming

WinUI 的任何 _flavours_ 都应该有一个同样简单的命名约定,所以WinUI _for_ _____

@SavoySchuler嗨 Savoy,感谢您的更新! 看到社区如此活跃,真是太棒了:)!

我真的很喜欢很多概念,尤其是那些画廊、图书馆和工具包具有相似外观和感觉的概念。 我们甚至对此进行了扩展,以对齐社区工具包和图库应用程序的 UI,以便为新的 UWP 开发人员提供统一的消息。

我想知道您是否有设计团队的人也在查看提交的内容? 颜色着色(用于可访问性)和可扩展性是非常重要的事情,设计人员在这些事情上往往比我们的开发人员有更多的经验 :)!

好问题,@niels9001! 我们的团队中拥有设计和可访问性专家以及所需的全球合规性检查 - 所有这些都将确保为每个人提供可访问且适当的徽标。 😊 我正在等待,直到我们选择了我们的最佳候选人,然后再应用此流程,否则它会为我们迄今为止看到的121 份出色而独特的提交造成不应有的偷听!

我不认为我们中的任何人都期望采用单一的设计,当然,它们都作为一种情绪板,微软的设计专家将采用它,并进行模制,并产生一个最终的设计/框架,未来的标志和图标可以基于。

事实上,我们这些做出贡献的人,会相互影响,希望意味着最终的设计,将展示许多想法中可识别的部分🙂

我不认为我们中的任何人都期望采用单一的设计,当然,它们都作为一种情绪板,微软的设计专家将采用它,并进行模制,并产生一个最终的设计/框架,未来的标志和图标可以基于。

伟大的呼唤,@mdtauk! 这是正确的 - 我们可能会根据上述资源的反馈更改最终选择,但我也很高兴能展示社区成员的原创作品,因此我们将不得不看看我们最终选择的未来会怎样.

事实上,我们这些做出贡献的人,会相互影响,希望意味着最终的设计,将展示许多想法中可识别的部分🙂

至于这一点,在我们发布这些内容后,我肯定会鼓励对前 5 名进行变化和替代! 🙂

@SavoySchuler你会包括对你选择的 5 个的反馈吗? 以及对任何不足的反馈。 您和团队的反馈将帮助我们进一步完善它们,并贡献彼此所选设计的调整版本。

@SavoySchuler你会包括对你选择的 5 个的反馈吗? 以及对任何不足的反馈。 您和团队的反馈将帮助我们进一步完善它们,并贡献彼此所选设计的调整版本。

@mdtauk另一个好问题! 在过去的几周里,我一直在以各种方式对 86 人进行内部投票,对我们(现在)的 121 份意见书进行了调查。 由于数量的关系,我无法提供全面的反馈,但我可以对最后 5 个综合一些个人笔记,并鼓励特别感兴趣的人也这样做。 我一直不愿在公开回合中提供反馈,因为我谨慎地创建任何限制该线程的创造力的限制,但我也理解想要确定您的方向,我在下面综合了一些一般反馈:

  • 角括号+立方体/六边形设计几乎受到普遍青睐。 在风格上,这些设计简单、独特、可识别各种徽标,并且在多种尺寸下均能很好地缩放。 我观察到的普遍共识是尖括号(虽然对某些人有争议)讲述了我们的历史并表明产品植根于软件,而立方体/六边形则向 Fluent Design System 生态系统致敬,并抽象地传达了以下内容:颜色、深度、照明、材料等。
  • 经典的图书馆书籍、Office 风格的抽象“应用程序窗口”和圆形的 .NET 设计作为预赛亚军相对紧密。 我相信这是由于与其他 Windows 开发人员生态系统产品徽标的相似性、先例和熟悉性。 它们也往往简单、清晰、清晰。
  • 与第一个项目符号相反,具有多个带状阴影和组件的风格复杂的徽标引起了对小尺寸缩放的关注,而不会看起来很忙。

以及对任何不足的反馈。

至于这个 - 随时 DM 我关于你特别感兴趣的任何提交,我可以看到我可以给你什么。 🙂

迫不及待地等待看到对这5 个发表一些评论,为寻求哪些改变提供一些指导💙

是的@SavoySchuler ,热切期待看到前 5 名。

任何反馈总是受欢迎的。 正如@mdtauk已经提到的,这些评论肯定会帮助我们朝着正确的方向前进。 希望我们所有人的集体努力将导致获得 WinUI 的最佳徽标。

controls-1x
fluentdesign-app-header

73c6c980871835 5cee218391221
788b8080871835 5cee2183914f2
我想补充一点,我可以看到 Fluent Design 网站上的一些设计被改编/调整为 WinUI 徽标(例如顶部图像)。 一些 Fluent 图标的故事也是如此(我认为光或材料可能是一个很好的起点)。 我想你们中的一些人可能会发现底部的图片很有趣。 它们展示了微软新图标设计风格的深度和方面。 它们可能会成为决赛入围者在 3D 空间中思考设计的灵感来源。

_标志层和深度_
1_Y12LiOMu-9R9WZrvkh7HXQ

_标志网格_
1_c0ea_S6S2-jY2IGzII_-Fw

_Build 2019 中的深度和正斜杠_
Build_2019_web_header_1900x300

_当前和更新的 Fluent Image_
1_8MRcLQULvZ_lAtfB_3UBFg

_也许是 Office 图标的早期版本_
image

我知道这有点晚了,但倒数第二张图像上最右边的图标(带有黑色背景和白色图标的图标)对于 WinUI 图标也非常有效。 它简单、干净并且适用于颜色(我可以看到不同深浅的蓝色)或与轮廓设计一样。

我知道这有点晚了,但倒数第二张图像上最右边的图标(带有黑色背景和白色图标的图标)对于 WinUI 图标也非常有效。 它简单、干净并且适用于颜色(我可以看到不同深浅的蓝色)或与轮廓设计一样。

我很早就做了类似的事情。

image

MERCH 模型的乐趣! (我的设计之一)
Folded-Sweatshirt-Mockup 1
Folded-Sweatshirt-Mockup
MockUp
Tshirt Mockup

Folded-Sweatshirt-Mockup 1 (2)

另外这件运动衫看起来超级舒服,现在我有点想要一件。 我现在要尽量避免购买运动衫,哈哈。

很棒的社区,我们已经到达了第一轮结果!

从内部和外部来看,民意调查非常清楚,让我们获得了领先的数字 1! 但在我说什么之前......

谢谢!

代表整个 WinUI 团队,“谢谢!” 致在这里以及我们的社交媒体流中合作和做出贡献的每个人。 根据我们拥有的数字...

  • 121 份意见书
  • 30 位问题贡献者
  • 86 名团队成员进行了投票

这是我们从未预料到的_展示力量_! 你真棒!

@itsmichaelwest 提交的初步新 WinUI 徽标!

这种优雅的设计仍然是问题线程上的最高提交,并且几乎在所有接受调查的团队成员中都被一致选中。 这个标志有太多值得爱的地方,无法在此详细介绍。 风格、优雅、可扩展性、主题能力,这一切都很棒。 感谢@itsmichaelwest创建这个炸药标志。

winui logo submission

令人难以置信的亚军!

为了给@itsmichaelwest的设计提供一些灵感,这里是我们的其他最爱......

  1. 通过@mdtauk

winui logo submission

  1. 也来自@mdtauk

winui logo submission

  1. 来自@niels9001

winui logo submission

  1. 来自@NoahFeller

winui logo submission

  1. 通过@ratishphilip

winui logo submission

并荣幸地向@IUsername 致敬这些丰富多彩的原创作品:

winui logo submission

再次恭喜并感谢大家!

我们从这里去哪里?

我们很想看到这种设计的一些即兴演奏和变化! 由于 Microsoft Ignite,我们的截止日期已提前至太平洋标准时间 9 月 6 日星期五上午 8 点,因此我们将在太平洋标准时间 9 月 5 日星期四午夜之前接受变体提交。

为了获得灵感,这些是@itsmichaelwest徽标的变体,我们希望在此之前作为一个社区进行探索:

1. 括号?

我们已经探索了将 WinUI 扩展到 Markdown 语言之外的想法,并且将来可能会这样做,这意味着超越这种“< >”语法。 你认为这个立方体能足够坚固以独立站立吗? 如果是这样,有没有人有可以帮助它这样做的想法?

2.里面的文字?

对于 Microsoft Ignite,我们将制作六角形贴纸。 此设计非常适合该形状,但我们需要移动多维数据集中的“WinUI”文本。 有没有人对我们如何使该变体看起来很棒有想法?

3. 颜色?

有没有人有一些交替颜色的建议? 我们对蓝色主题很满意,但我们也不是特别喜欢它。 我们愿意探索替代方案!

4. 独立还是+文本?

我们需要“WinUI”文本_作为标志的一部分还是立方体设计足够强大以独立存在? 用 < >? 没有?

如果立方体要充当总体符号,则需要对其进行视觉处理,使其独一无二。

在 16 x 16 时,除了立方体之外没有太多空间,所以像 Toolkit 和 Gallery 这样的东西需要巧妙地包含立方体和更多的小尺寸。

这个 WinUI 标志也会成为新的 XAML 标志吗? 因为 XAML 使用方括号中的 Cube,那么是什么使这不仅仅是 XAML?

这是微软的企业品牌颜色
image

批准的颜色组合
image

通用 Windows 颜色
image

恭喜@itsmichaelwest!

Filled Cube Idea

WinUILogo10

WinUILogo11

这是另一个基于立方体和尖括号的概念......

image
基于@ratishphilip 的粗略概念

image
image

我们需要确保不要与 Unity 徽标混淆...

image

@mdtauk我没想到!
老实说,我认为立方体角度已经足够不同了,但无论如何,我们似乎已经选择了前 5 个想法。

我还有一些想法。
image

Inner Cube idea

Fluent 2019 Cube

Asset 21winui_cube4

WinUILogo11_2

哇😮我很高兴团队喜欢我的标志!

标志更新

我一直在寻找从这个线程中的其他设计中汲取灵感的立方体的替代方案。 我特别喜欢@mdtaukFluent 网站颜色的使用,因此开发了一个使用这些渐变的立方体版本(_这不是最终的!_)。 我现在也放弃了括号,也许这个“Fluent cube”可以独立存在:

WinUI_LogoExporation_V2_GitHub

贴纸

这里有一些贴纸创意。 第一个缩小多维数据集并添加 WinUI 文本以及指向存储库的链接。 第二个使用 WinUI 文本在多维数据集上添加叠加层。 不确定哪个效果最好,以及是否需要链接到 repo。

WinUI_StickerExploration_V2_GitHub

第二个贴纸也可以作为社交媒体标志。

将继续开发这个。 感谢所有在此线程中提供灵感的人! 😃

Inner Cube idea

Inner Cube Toolkit idea

此徽标的工具包版本

image
基于@ratishphilip的图标之一的概念的几个不同角度。 我包括了带阴影和不带阴影的版本。

image

Fluent Inner Cube Dark

Fluent Inner Cube Light

酷..我喜欢这个方向。

只是为了保持意义......我们认为“立方体”代表什么? 在那里有一些理由会很好。

我喜欢 Fluent Design 的链接

Cube 并不是我最初的偏好,因为很难将该符号作为徽标或品牌来拥有。 使用方括号,它本质上将它链接到 XAML,谁知道未来可能会出现哪些其他 UI 范式。

所以...我一直把立方体当作一个核心,所以无论是立方体中的一个立方体,还是核心的一部分。

在最初的 XAML 标志中,我相信立方体是一个对象,就像在面向对象的编码中一样,或者是一个 XML/XAML 元素。

Two Tone Cube Dark

Two Tone Cube Light

Untitled-3-01

Outlined Cube

这个 WinUI 标志也会成为新的 XAML 标志吗? 因为 XAML 使用方括号中的 Cube,那么是什么使这不仅仅是 XAML?

@mdtauk如果我误解了这个问题,请告诉我,但目前无意替换或更新经典的 Xaml 徽标 - 这仅适用于 WinUI。 我也不确定经典 Xaml 徽标是否正在以遗留文档文章之外的任何身份积极使用。 如果你看到其他的,请告诉我!

@mdtauk您的品牌颜色帖子是此线程上的绝佳资源。 感谢您在这个线程上举重!

WinUILogo11

这是另一个基于立方体和尖括号的概念......

@ratishphilip - @ryandemopoulos@stmoy和我自己真的很喜欢这种设计的独立性。 @mdtauk ,也是一个有趣的颜色切换。 我现在正在探索这个的一些替代颜色组合。 如果我能提出任何有价值的东西,我会发布它。

Inner Cube idea

Inner Cube Toolkit idea

画廊版本与其他版本一起添加
Inner Cube Gallery

以下是来自其他框架的一些徽标 - 因此我们可以尽量避免进行任何类似的设计。

角JS
image

沙马林
image

打字稿
image

节点JS
image

反应
image


image

离子
image

HTML/CSS/JS
image

材料设计
image

快速用户界面
image

半决赛更新

我们刚刚再次结束会议,以回顾自上次愉快以来发生的一切。 我们讨论的第一件事是:哇,你们都很棒! 而且速度快!

其次,三个设计(除了@itsmichaelwest的原创)对我们来说很突出,我们对每个设计都有一些问题......

  1. > 我一直在寻找从这个线程中的其他设计中汲取灵感的立方体的替代方案。 我特别喜欢@mdtaukFluent 网站颜色的使用,因此开发了一个使用这些渐变的立方体版本(_这不是最终的!_)。 我现在也放弃了括号,也许这个“Fluent cube”可以独立存在:
    >WinUI_LogoExporation_V2_GitHub

我们真的很喜欢你在这里所做的! 有没有可能你有一个高保真版本,你可以用它来向我们展示侧面带有括号的样子? 我们正在想象这样的事情:

WinUI Icon Simple Mock

  1. @mdtauk@ratishphilip ,我们喜欢你张贴的大胆的橙色! 我们希望看到更多您认为很棒的颜色变体。 我在下面模拟了一些替代配色方案。 顶部使用了上面发布的微软品牌颜色@mdtauk 。 下面的不遵循任何特定的品牌托盘,我只是在探索。 有没有人有任何你认为“流行”的颜色组合? 我也不反对梯度 - 我的技能还没有!

WinUI Logo Alternate Colors 1

WinUI Logo Alternate Colors 2

  1. @mdtauk ,我们真的很喜欢你发布的这个! 您是否有机会分享 a.) 没有文本和 b.) 具有黑色背景(带和不带文本)的版本?

WinUI White Cube Logo

image
@SavoySchuler我真的很喜欢你发布的这个。

  1. @mdtauk ,我们真的很喜欢你发布的这个! 您是否有机会分享 a.) 没有文本和 b.) 具有黑色背景(带和不带文本)的版本?

🚨 大图传入🚨
Export Fluent Inner Cube Dark
Export Fluent Inner Cube Light

尺寸包括 1024 x 1024(有和没有文字) - 16 x 16 - 32 x 32 - 64 x 64 - 128 x 128 - 256 x 256 - 4096 x 4096

浅色和深色版本

我喜欢刚刚发布的图标@mdtauk ! 看起来好赞!

@SavoySchuler > 有没有人有任何你认为“流行”的颜色组合?

Two Tone Cube Dark
紫色和橙色是经典的互补色组合。 但是在一个立方体上有两种颜色看起来有点奇怪

Two Tone Cube Dark - G + Y
绿色和黄色

Two Tone Cube Light - B + P
蓝色和粉色

image

@SavoySchuler > 有没有人有任何你认为“流行”的颜色组合?

Two Tone Cube Dark
紫色和橙色是经典的互补色组合。 但是在一个立方体上有两种颜色看起来有点奇怪

Two Tone Cube Dark - G + Y
绿色和黄色

Two Tone Cube Light - B + P
蓝色和粉色

@mdtauk您可以看到这些颜色组合中的任何一种应用于这些设计中吗?

WinUI Logo Alternate Colors 2
WinUI Logo Alternate Colors

@itsmichaelwest我刚刚意识到我在上面的要点 1 中遗漏了一张图片 - 现在添加!

@萨沃伊舒勒

Filled Cube - Purple

蓝色 > 粉色

Filled Cube - Teal

青色 > 蓝色

你可以做这样的事情,一个跨越多维数据集的类似方案

到目前为止,Teal > Blue 的第二个是我最喜欢的!

酷..我喜欢这个方向。

只是为了保持意义......我们认为“立方体”代表什么? 在那里有一些理由会很好。

我喜欢 Fluent Design 的链接

好问题,@niels9001! 人们在这个现在庞大的线程中提供了一些拍摄。

对于许多人来说,这是对此处显示的 Fluent Designs System 原则的致敬(以立方体形式):

Fluent Design System principles in visual metaphor

它也是对原始 Xaml 徽标的致敬:

Original Xaml logo

但是其他人,比如我和@pag3 ,将其描述为“构建块”,而 WinUI 平台及其产品正是如此——UI 的构建块。

@萨沃伊舒勒

Filled Cube - Purple

蓝色 > 粉色

Filled Cube - Teal

青色 > 蓝色

你可以做这样的事情,一个跨越多维数据集的类似方案

我也喜欢这些! 很棒的选择,@mdtauk!

Untitled-1

这是我不久前为另一个项目所做的设计,但最终没有用到它。 我决定在这里提交! 它在这里工作得非常好,因为它展示了很多 Fluent Design System 的原则:
光 - 从立方体内部发出的光。
深度 - 这是一个具有可见深度的 3D 立方体。
材料 - 具有很酷的亚克力外观。
比例 - 大立方体中的小立方体,具有大小对比。

我也认为它看起来很酷,而且有点独特。 它避免了这里一些设计的问题,因为它是通用的。 那里有很多六边形/立方体徽标,因此很难与众不同(我认为这种设计并不通用)。 中间的灯位也可用于其他免费设计和图案。 下面是一个例子:

Untitled-2

开放反馈!

@NoahFeller看起来很棒! 你有更暗的版本来放置更亮的背景吗?

谢谢@yaichenbaum。 (你在我要发布这个解释之前评论了哈哈)
Untitled-12t53
.
.
.
.
Untitled-61

我很确定我在某个与 Fluent Design 相关的地方见过这种网格结构。 在白色背景上,设计要么需要直接在它后面的阴影,要么需要立方体颜色为黑色。 我一定会做更多的实验!

Filled Cube - Yellow + Blue

Untitled-61

我很确定我在某个与 Fluent Design 相关的地方见过这种网格结构。 在白色背景上,设计要么需要直接在它后面的阴影,要么需要立方体颜色为黑色。 我一定会做更多的实验!

image

Filled Cube - T + P

Filled Cube - O + P

@ratishphilip - @ryandemopoulos@stmoy和我自己真的很喜欢这种设计的独立性。

感谢您的反馈。

这是一个更精致的标志。

WinUILogo12A

这是对以前徽标的另一种看法。 我的目标是描绘立方体的一部分已被切掉以显示立方体的核心(就像地球图中显示的那样)

WinUILogo12B

这是对以前徽标的另一种看法。 我的目标是描绘立方体的一部分已被切掉以显示立方体的核心(就像地球图中显示的那样)

WinUILogo12B

我首先看到的是一个播放符号

这是另一个基于@NoahFeller的 Fluent 立方体

WinUILogo12C

这是之前没有剪裁的标志
WinUILogo12D

另一个对@NoahFeller立方体的
Light Cube

另一个对@NoahFeller立方体的
Light Cube

你不认为这会使尖括号有点不平衡吗?

另一个对@NoahFeller立方体的
Light Cube

你不认为这会使尖括号有点不平衡吗?

确实如此 - 但它符合立方体的面。 我只是想尝试一下着色风格。

还有朋友之间有点不对称是怎么回事😄

不是我最引以为豪的工作,但我尝试将括号添加到

WinUI Semi-Transparent Logo

我明白你要@SavoySchuler 做什么。 我觉得这个图标可能不需要括号,而且它的功能强大到可以独立存在。 我肯定会迭代设计(简化和/或修改)并上传一些不同的版本,有些有括号,有些没有括号。 我觉得图标旋转后看起来不太好,尽管可以修复 🙂。 通过上传,我只是想判断人们是否会喜欢类似的设计。 反馈似乎很好,所以我会继续工作。 感谢您的建议。

另一个对@NoahFeller立方体的
Light Cube

我喜欢支架上的两种色调!

4096
Fluent Inner Cube 4096

1024
Fluent Inner Cube 1024

256
Fluent Inner Cube 256

128
Fluent Inner Cube 128

64
Fluent Inner Cube 64

32
Fluent Inner Cube 32

16
Fluent Inner Cube 16

4096
Fluent Inner Cube 4096

1024
Fluent Inner Cube 1024

256
Fluent Inner Cube 256

128
Fluent Inner Cube 128

64
Fluent Inner Cube 64

32
Fluent Inner Cube 32

16
Fluent Inner Cube 16

4096
Fluent Inner Cube 4096
Fluent Inner Cube 4096

1024
Fluent Inner Cube 1024
Fluent Inner Cube 1024

256
Fluent Inner Cube 256
Fluent Inner Cube 256

128
Fluent Inner Cube 128
Fluent Inner Cube 128

64
Fluent Inner Cube 64
Fluent Inner Cube 64

32
Fluent Inner Cube 32

16
Fluent Inner Cube 16

我们真的很喜欢你在这里所做的! 有没有可能你有一个高保真版本,你可以用它来向我们展示侧面带有括号的样子? 我们正在想象这样的事情:

WinUI Icon Simple Mock

@SavoySchuler来了! 抱歉让您久等了,这个线程似乎移动得很快!

WinUI_LogoExporation_V3_GitHub

Export Inner Cube - Mono

单色版

@itsmichaelwest >给你! 抱歉让您久等了,这个线程似乎移动得很快!

对不起...😛

这里有一些但使用迈克尔韦斯特的颜色处理......

4096
Fluent Inner Cube 4096

1024
Fluent Inner Cube 1024

256
Fluent Inner Cube 256

128
Fluent Inner Cube 128

64
Fluent Inner Cube 64

32
Fluent Inner Cube 32

16
Fluent Inner Cube 16

仅1024立方体
Fluent Inner Cube Only 1024

仅 4096 立方体
Fluent Inner Cube Only 4096

我想我已经完成了这些变化,除非@SavoySchuler @itsmichaelwest或其他人特别想从我这里得到什么?

https://www.figma.com/file/KCQQ1wtMBnWxsXrmDOHmhB/WinUI-Logo-Share?node-id=0%3A1
_这是 Figma 文件的链接,其中包含我的一些徽标_

@mdtauk - 非常感谢您的所有输入和变化。 一个简单的问题 - 许多设计都是“立方体中的立方体”。 这个双立方体想传达什么?

@itsmichaelwest最初建议使用 XAML 图标作为徽标的基础,他的设计在第一轮提交中被选中。

我将立方体视为核心,是构建 Windows 应用程序的核心部分,因此我决定通过突出立方体的一部分来说明核心的概念。 我还玩弄了一个“空白”空间,以表明这是一个可以建造的空间。

但是,在数以千计的其他基于立方体的图像中,让立方体和支架设计成为“可拥有”和独特的东西,起到了一定的作用。

image

Untitled-3

深色/浅色版本。 仍然在蓝色上工作一点。 与往常一样,感谢反馈。

@yaichenbaum我想看看你张贴的立方体的单色版本可能是什么样子,但我不是艺术家,所以我在 Paint 中粗暴地模拟了这个::)

image

这是您预见的单色版本的样子,还是您对单色版本的外观有其他想法?

如果正在考虑中,我想完全重绘它,但这里是我的想法的快速编辑,这些仅在 16px 比例下,因此需要完全重绘它。

Bracket Inner

Untitled-4

我的设计的快速(尚未完成)单色模型。 还蛮流利的😄。

全新的方向,非常流畅,可以轻松使用不同的颜色来贴合赃物,贴纸等。这种设计表明积木以及中间隐藏的积木。 如果人们感兴趣,我可以用其他颜色显示较浅的背景。
image
还有一个 3d 版本,有和没有轮廓。
image

@yaichenbaum我想看看你张贴的立方体的单色版本可能是什么样子,但我不是艺术家,所以我在 Paint 中粗暴地模拟了这个::)

image

这是您预见的单色版本的样子,还是您对单色版本的外观有其他想法?

@SavoySchuler可以吗?

单色
Fluent Inner Cube Mono Black
Fluent Inner Cube Mono

4096
Fluent Inner Cube 4096

1024
Fluent Inner Cube 1024

256
Fluent Inner Cube 256

128
Fluent Inner Cube 128

64
Fluent Inner Cube 64

32
Fluent Inner Cube 32

16
Fluent Inner Cube 16

最后询问

@itsmichaelwest@mdtauk我们的最后两个选择归结为你们每个人的一个提案。 我们刚刚结束了与几位团队成员近两个小时的审议,这并不容易! 在我们决定之前,我们对你们每个人都有最后的要求......

image

image

@itsmichaelwest

对于您的徽标,有一些关于 2d 支架和 3d 立方体如何挂在一起的问题。 您是否可以考虑进行任何更改以帮助这些组件更紧密地呈现自己? 我们不确定到底需要什么——如果是间距、颜色等……只是感觉有点脱节。

@mdtauk

对于这里的徽标,一些接受调查的人回答说,他们认为立方体内的括号应该是诸如“I”和“J”之类的字母,这让他们感到困惑。 换一种说法——有人担心他们会失去括号的感觉。 当您将它们细化一点时,它似乎在最近的更新中变得更好,但我们不确定是否可以采取任何措施使它们感觉更像括号?

如果相关,我们也很乐意在单色镜头上看到空心和实心的括号线:

image
image

两个都

对于任何最终提交,我们很乐意看到它们:

  • 黑色和白色背景的彩色和单色版本
  • 16x16px、64x64px 和高分辨率尺寸

谢谢

我们知道问了很多。 当我们开始整个过程​​时,我们不知道我们会有这么多很棒的选择来考虑,而且提交的质量会如此令人难以置信。

你们都提高了标准,我发现我们现在正在对每一个小像素和曲线进行挑剔。 我们如此挑剔的原因是因为你们都给了我们黄金。

如果这些最终要求中的任何一个要求太多 - 我们理解。 无论继续努力,我们都会向您和其他几个人发送一些当之无愧的“谢谢!” 带有您在这里所做贡献的赃物。

恭喜@mdtauk和@itsmichaelwest。
您提到的人们将其视为 I 和 J 的问题可能与左括号使用两种颜色使其看起来像顶部的反射有关。 也许对整个支架使用相同的颜色可以解决这个“反射”问题,然后另一个支架将不再被视为 J。

@萨沃伊舒勒

@itsmichaelwest
对于您的徽标,有一些关于 2d 支架和 3d 立方体如何挂在一起的问题。 您是否可以考虑进行任何更改以帮助这些组件更紧密地呈现自己? 我们不确定到底需要什么——如果是间距、颜色等……只是感觉有点脱节。

我对此有一个建议,但由迈克尔提出解决方案。
Fluent Cube 4096
括号上的阴影与立方体上的阴影一致。

恭喜伙计们! 一些反馈/想法:我觉得@itsmichaelwest的设计,括号应该只是部分圆形而不是“药丸”形状,这更像是谷歌的外观。 (就像你刚刚发布的@mdtauk 一样)另外,我觉得括号环绕在@mdtauk的设计上的方式可以改进,因为它对我来说

@yaichenbaum看起来像 J 的括号是最右边的(在@mdtauk的标志上); 一些团队成员觉得这太 J 了。 就个人而言,我认为发布的最新版本会好一些,因为它们被精简了一点。 我知道人们希望将它们保持足够厚,以便您可以看到小版本上的括号。

无论如何,我不是设计师,我什至不在电视上玩。 可能有许多其他方法可以使它们看起来更像括号; 我会把它留给@mdtauk。

不过这些设计都很好。 我们现在谈论的是细节。

随着徽标的放大,我有空间细化线条。 我还可以收紧曲线,使其在立方体和支架上更像一个尖边。

三种深浅的颜色是否妨碍了支架式的外观?

@mdtauk如果将括号更改为渐变会怎样? 那样的话,它仍然会有更多的单一颜色,但它们会更好地相互融合,赋予它更多统一的形状。

...此外,我觉得支架在@mdtauk设计上的环绕方式可以改进,因为它对我来说看起来

我使用菱形渐变而不是圆形来暗示磨砂“丙烯酸”立方体内部有一个彩色立方体的想法。

@mdtauk如果将括号更改为渐变会怎样? 那样的话,它仍然会有更多的单一颜色,但它们会更好地相互融合,赋予它更多统一的形状。

这样做的问题是保持括号在立方体表面上的想法,但我会尝试更多地调整它,将它们拉直并变薄一些。

...此外,我觉得支架在@mdtauk设计上的环绕方式可以改进,因为它对我来说看起来

我使用菱形渐变而不是圆形来暗示磨砂“丙烯酸”立方体内部有一个彩色立方体的想法。

我明白了,它太不确定了,无法真正告诉 IMO,所以也许你可以稍微修改一下。 你不必,只是想知道它是否可以改进。

@mdtauk对我来说,我喜欢括号上的不同颜色/阴影。 如果有一种方法可以让它们看起来更像括号而不丢失不同的颜色,我很乐意看到。 但我认为值得尝试不同的阴影和更少的颜色,看看这是否也有帮助。

@mdtauk如果将括号更改为渐变会怎样? 那样的话,它仍然会有更多的单一颜色,但它们会更好地相互融合,赋予它更多统一的形状。

让立方体的每种颜色都具有更强的发光效果看起来也很酷,以至于立方体几乎是这三种颜色,并且括号可以对比立方体是白色或黑色。 只是在那里抛出想法。

@mdtauk对我来说,我喜欢括号上的不同颜色/阴影。 如果有一种方法可以让它们看起来更像括号而不丢失不同的颜色,我很乐意看到。 但我认为值得尝试不同的阴影和更少的颜色,看看这是否也有帮助。

我也喜欢它们,它只是有两种不同的色调将它们分开,它还使左支架的下半部分与右支架的高度相似,使其看起来像带有 I 和 J 的“abc”块。

这可能有助于稍微改善它,但在我看来,它破坏了它以前的美观。
image

我认为括号的部分问题是你有一个 3D 形状,它们后面有很多颜色和灯光,它们只是纯色,所以也不能啮合。 两种设计看起来都有些滑稽,但当括号位于立方体上时,效果会更加突出。

@mdtauk对我来说,我喜欢括号上的不同颜色/阴影。 如果有一种方法可以让它们看起来更像括号而不丢失不同的颜色,我很乐意看到。 但我认为值得尝试不同的阴影和更少的颜色,看看这是否也有帮助。

4096
Fluent Inner Cube 4096

单色
Fluent Inner Cube Mono Black

@ryandemopoulos这是在朝着正确的方向发展吗?

恭喜@mdtauk和@itsmichaelwest。
迄今为止的伟大设计!

我认为括号的部分问题是你有一个 3D 形状,它们后面有很多颜色和灯光,它们只是纯色,所以也不能啮合。 两种设计看起来都有些滑稽,但当括号位于立方体上时,效果会更加突出。

test

不确定它是否可以作为逆函数

@ryandemopoulos这是在朝着正确的方向发展吗?

我只是一种意见,但是是的,这对我来说看起来更像是括号。 我认为更锋利的边缘有帮助。 对于单色版本,括号看起来仍然超厚——用刚刚勾勒出来的括号会是什么样子,有点像这样? (除非使用您最近的几何图形)

image

不确定它是否可以作为逆函数

是啊,你说得对。 我收回这个⬇。 感谢您测试它。

让立方体的每种颜色都具有更强的发光效果看起来也很酷,以至于立方体几乎是这三种颜色,并且括号可以对比立方体是白色或黑色。 只是在那里抛出想法。

我的意见是括号应该保留与 XAML 徽标中相同的形状,并带有一点四舍五入

XAML file icon

这是我的建议

WinUILogo12E

@ryandemopoulos这是在朝着正确的方向发展吗?

我只是一种意见,但是是的,这对我来说看起来更像是括号。 我认为更锋利的边缘有帮助。 对于单色版本,括号看起来仍然超厚——用刚刚勾勒出来的括号会是什么样子,有点像这样? (除非使用您最近的几何图形)

image

在 32px 和 16px 尺寸下,需要填充括号以使其清晰可辨,但是对于较大的尺寸,这是怎么回事?
Fluent Inner Cube Mono Black

我的意见是括号应该保留与 XAML 徽标中相同的形状,并带有一点四舍五入

XAML file icon

这是我的建议

WinUILogo12E

@ratishphilip左括号垂直较小还是阴影导致感知差异?

@ryandemopoulos这是在朝着正确的方向发展吗?

我只是一种意见,但是是的,这对我来说看起来更像是括号。 我认为更锋利的边缘有帮助。 对于单色版本,括号看起来仍然超厚——用刚刚勾勒出来的括号会是什么样子,有点像这样? (除非使用您最近的几何图形)
image

在 32px 和 16px 尺寸下,需要填充括号以使其清晰可辨,但是对于较大的尺寸,这是怎么回事?
Fluent Inner Cube Mono Black

为@stmoy 标记此几何图形。

@ryandemopoulos这是在朝着正确的方向发展吗?

我只是一种意见,但是是的,这对我来说看起来更像是括号。 我认为更锋利的边缘有帮助。 对于单色版本,括号看起来仍然超厚——用刚刚勾勒出来的括号会是什么样子,有点像这样? (除非使用您最近的几何图形)
image

在 32px 和 16px 尺寸下,需要填充括号以使其清晰可辨,但是对于较大的尺寸,这是怎么回事?
Fluent Inner Cube Mono Black

老实说,我不确定我更喜欢哪个 - 填充或轮廓。 我需要多看几眼。 :) 我认为它们都可以工作,即使在更高的分辨率下也是如此。 (并同意在较低分辨率下,填充是唯一真正的选择)

@ryandemopoulos @SavoySchuler @stmoy

4096
Fluent Inner Cube 4096
Fluent Inner Cube 4096

1024
Fluent Inner Cube 1024
Fluent Inner Cube 1024

256
Fluent Inner Cube 256
Fluent Inner Cube 256

128
Fluent Inner Cube 128
Fluent Inner Cube 128

64
Fluent Inner Cube 64
Fluent Inner Cube 64

32
Fluent Inner Cube 32
Fluent Inner Cube 32

16
Fluent Inner Cube 16
Fluent Inner Cube 16

单色
Fluent Inner Cube Mono Black
Fluent Inner Cube Mono White

@ratishphilip左括号垂直较小还是阴影导致感知差异?

两个支架的尺寸一样...

这是另一个带有 3d 支架的

WinUILogo12F

这是大纲

WinUILogo12_outline

这是另一个带有 3d 支架的

WinUILogo12F

这绝对解决了我之前看到的奇怪观点。 做得很好!

这是另一个带有 3d 支架的
WinUILogo12F

这绝对解决了我之前看到的奇怪观点。 做得很好!

立方体旋转不干净,上下有斜线

这是另一个带有 3d 支架的

WinUILogo12F

这也解决了它看起来像有 I 和 J 的问题。

立方体旋转不干净,上下有斜线

:D 是的一个轻微的旋转......感谢你让我注意到@mdtauk ......可以很容易地修复。

我也在考虑从最内角(接触立方体的边缘)去除圆度并使其锋利。

Fluent Inner Cube Mono 16
Fluent Inner Cube Mono 16

Fluent Inner Cube Mono 32
Fluent Inner Cube Mono 32

Fluent Inner Cube Mono 64
Fluent Inner Cube Mono 64

Fluent Inner Cube Mono 128
Fluent Inner Cube Mono 128

Fluent Inner Cube Mono 256
Fluent Inner Cube Mono 256

Fluent Inner Cube Mono 1024
Fluent Inner Cube Mono 1024

Fluent Inner Cube Mono 4096
Fluent Inner Cube Mono 4096

这是更新后的标志

WinUILogo13

WinUILogo13_outline

高分辨率徽标

WinUILogo13_HiRes

这个(或它的深色对应物)很漂亮。 我喜欢渐变,因为它混合了 Fluent 元素。
image
也许上面的也应该分成2 2 2个立方体,合并这个,真是个好主意! 可能会改变颜色以突出一点。

然而,这个给了我一个Apache Cordova 的内涵:
image
尤其是那些有光泽的黑色括号。

尤其是那些有光泽的黑色括号。

@weitzhandler这个怎么样?

WinUILogo13_color

@SavoySchuler在 twitter 上发布了两个初步徽标,我从回复中得到的主要评论是它感觉

Fluent Inner Cube 16
Fluent Inner Cube 32
Fluent Inner Cube 64
Fluent Inner Cube 128
Fluent Inner Cube 256
Fluent Inner Cube 1024
Fluent Inner Cube 4096
Fluent Inner Cube Mono 16
Fluent Inner Cube Mono 32
Fluent Inner Cube Mono 64
Fluent Inner Cube Mono 128
Fluent Inner Cube Mono 256
Fluent Inner Cube Mono 1024
Fluent Inner Cube Mono 4096

我认为左右括号的大小应该相同,因为它们在 XAML 语法 ( < > ) 中也具有相同的大小。 因此,使它们在视觉上看起来大小不同只是对我来说看起来很奇怪(即左括号看起来比右括号大)。 我更喜欢@ratishphilip现在显示这些括号的方式。

@Felix-Dev
@ratishphilip的括号覆盖在立方体上,实际上并不符合立方体的侧面。 还有一种字面表示,而不是比喻解释。 我的意思是你实际上可以有括号,或者你可以代表括号。

尽管不是每个标志都需要是蓝色的,但这样做是有道理的。 当我想到 Win UI 时,我会想到 Windows 用户界面。 我还将蓝色与 Windows 联系起来。
在我看来, @mdtauk 的最后一个标志呼唤了 Windows,并且有自己的身份,与许多其他立方体标志相比,我将能够识别出它的含义。

@SavoySchuler在 twitter 上发布了两个初步徽标,我从回复中得到的主要评论是它感觉

我真的很喜欢这个@mdtauk! 在我看来有很大的改进。 我认为在这种情况下,拥有更多反光外观而不是发光外观更好。 也许只是让右侧稍微轻一点或具有更相似的渐变。 但除了那份出色的工作。

Fluent Inner Cube 64 scale

这个深色渐变更好吗?

高分辨率徽标

WinUILogo13_HiRes

@mdtauk如果您尝试在括号中实现@ratishphilip设计中的括号

如果要选择@mdtauk的设计,我希望括号像@ratishphilip的括号一样——括号应该看起来大小相同。 @mdtauk还请创建一个带有@ratishphilip括号的徽标版本。

如果要选择@mdtauk的设计,我希望括号像@ratishphilip的括号一样——括号应该看起来大小相同。 @mdtauk还请创建一个带有@ratishphilip括号的徽标版本。

@ratishphilip的括号在 3D 空间中没有意义。 它们只是漂浮在那里,阴影没有正确投射到立方体上。 @mdtauk 设计的部分要点是括号环绕立方体。

@NoahFeller IMO 的括号应该反映 XAML 的括号,它们的大小相同。 这应该反映在徽标中。 我对@mdtauk设计的问题是,当查看孤立的括号时 - 特别是在较小的图像尺寸上 - 我对括号大小的印象是这样的:
image
(与右括号相比,左括号显然更大。在 XAML 中,情况并非如此。)在某些图像分辨率中,即
image
这对我来说很明显,坦率地说,它让我失望。 括号对<>在 XAML 中非常突出,我认为将它们按原样“拍打”在立方体上是合理的,或者至少要充分考虑这一点。

@NoahFeller IMO 的括号应该反映 XAML 的括号,它们的大小相同。 这应该反映在徽标中。 我对@mdtauk设计的问题是,当查看括号 _isolated_ 时 - 特别是在较小的图像尺寸上 - 我对括号大小的印象是这样的:
image
(与右括号相比,左括号显然更大。在 XAML 中,情况并非如此。)在某些图像分辨率中,即
image
这对我来说很明显,坦率地说,它让我失望。 括号对<>在 XAML 中非常突出,我认为将它们按原样“拍打”在立方体上是合理的,或者至少要充分考虑这一点。

我认为@mdtauk的 3D 支架设计是要走的路,但是如果左支架以与右支架相同的方式结束,它将使它看起来相同的大小,即使有 3D 效果,我附上一个漂亮的丑陋的例子只是为了说明这一点。
image

@NoahFeller IMO 的括号应该反映 XAML 的括号,它们的大小相同。 这应该反映在徽标中。 我对@mdtauk设计的问题是,当查看括号 _isolated_ 时 - 特别是在较小的图像尺寸上 - 我对括号大小的印象是这样的:
image
(与右括号相比,左括号显然更大。在 XAML 中,情况并非如此。)在某些图像分辨率中,即
image
这对我来说很明显,坦率地说,它让我失望。 括号对<>在 XAML 中非常突出,我认为将它们按原样“拍打”在立方体上是合理的,或者至少要充分考虑这一点。

我认为@mdtauk的 3D 支架设计是要走的路,但是如果左支架以与右支架相同的方式结束,它将使它看起来相同的大小,即使有 3D 效果,我附上一个漂亮的丑陋的例子只是为了说明这一点。
image

我明白你们的意思了。 你也许是对的。 这是一个对称且仍为 3D 的快速版本。 它非常未完成(没有阴影,括号太大,着色可能更好,等等)但是你可以大致了解我要做什么。 一种很酷的视错觉效果,您可以从两种方式看待它。 当然,完全由@mdtauk决定设计的方向。

Fluent Inner Cube 4096

@ratishphilip的括号在 3D 空间中没有意义。 它们只是漂浮在那里,阴影没有正确投射到立方体上。 @mdtauk 设计的部分要点是括号环绕立方体。

@NoahFeller括号在 3D 空间中确实有意义。 如果你按照下面红色箭头所示的方向看立方体,括号看起来像这样

WinUILogo13_SideView

Fluent Inner Cube 64 scale

这个深色渐变更好吗?

@mdtauk一个小建议...如果左括号符合立方体的表面,那么括号中间的两个角的角半径应该为零...与立方体的边缘相同。

我们做到了。

社区 - 你很棒,我怎么强调都不过分。 字面上,经过_小时_的审议,我们决定了一个。 它是@itsmichaelwest@mdtauk设计的组合:

颜色:

New WinUI logo colored

(注意:这里没有反映立方体阴影,因为我找不到具有这些角半径的阴影版本)

单色:

New WinUI logo monochrome

(注意:有关对称与非对称括号,请参阅底部部分的第 2 项)

想法

正如@ryandemopoulos所说,“这个标志

New WinUI logo in use

为我们的最后几步打电话给设计师

我们还没有完全完成,但我们已经接近了。 这些是我们正在捆绑的松散的结局:

  1. 我们喜欢这种配色方案,但我们仍然需要探索一些不同的颜色变体(并将其与各种背景上的阴影/发光混合)。

  2. 我们收到了两个非常好的版本:一个带有对称括号,另一个带有不对称括号。 我们倾向于不对称(如右图所示)。 想法?

symmetrical vs. asymmetrical version of the new winui logo

  1. 我们需要设计一些赃物。 衬衫、贴纸、包,也许还有实物模型等等。总有一些显而易见的东西,但我敢打赌,我们可以想出一些_真的_很酷的东西。 😄

我们做到了。

社区 - 你很棒,我怎么强调都不过分。 字面上,经过_小时_的审议,我们决定了一个。 它是@itsmichaelwest@mdtauk设计的组合:

恭喜@itsmichaelwest和@mdtauk!

我们做到了。

社区 - 你很棒,我怎么强调都不过分。 字面上,经过_小时_的审议,我们决定了一个。 它是@itsmichaelwest@mdtauk设计的组合:

恭喜@itsmichaelwest和@mdtauk!

@ratishphilip我看到你一直在努力帮助我们到达这里,祝贺你的影响力和影响力。 在我们锁定它之前,我将查看您提出的几种配色方案。 😊 辛苦了,谢谢!

@ratishphilip的括号在 3D 空间中没有意义。 它们只是漂浮在那里,阴影没有正确投射到立方体上。 @mdtauk 设计的部分要点是括号环绕立方体。

@NoahFeller括号在 3D 空间中确实有意义。 如果你按照下面红色箭头所示的方向看立方体,括号看起来像这样

@ratishphilip如果您想知道我对您的设计无法在 3D 中工作的评论是什么意思,我会在这里解释。 在您的设计中,阴影与照亮立方体的光源不匹配。 他们面对着相反的方向。 如果左括号垂直于立方体的顶面,则其背后应该有一个长长的阴影。 目前它只是看起来像一个带有阴影的拉伸支架,没有意义。 如果你看另一个支架的阴影,它似乎面向错误的方向。 此外,括号看起来很奇怪,并且以这样的角度变形。 幻觉的目标是让括号在观看它们的角度看起来很好。 我不明白为什么他们被扭曲成那样。 原始括号形状没有参考框架(显示在您的右侧图像中),因为它只是一个图标。 我并不是要特别挑剔,我只是想为您提供反馈,以便您成为更好的设计师。

@ratishphilip的括号在 3D 空间中没有意义。 它们只是漂浮在那里,阴影没有正确投射到立方体上。 @mdtauk 设计的部分要点是括号环绕立方体。

@NoahFeller括号在 3D 空间中确实有意义。 如果你按照下面红色箭头所示的方向看立方体,括号看起来像这样

@ratishphilip如果您想知道我对您的设计无法在 3D 中工作的评论是什么意思,我会在这里解释。 在您的设计中,阴影与照亮立方体的光源不匹配。 他们面对着相反的方向。 如果左括号垂直于立方体的顶面,则其背后应该有一个长长的阴影。 目前它只是看起来像一个带有阴影的拉伸支架,没有意义。 如果你看另一个支架的阴影,它似乎面向错误的方向。 此外,括号看起来很奇怪,并且以这样的角度变形。 幻觉的目标是让括号在观看它们的角度看起来很好。 我不明白为什么他们被扭曲成那样。 原始括号形状没有参考框架(显示在您的右侧图像中),因为它只是一个图标。 我并不是要特别挑剔,我只是想为您提供反馈,以便您成为更好的设计师。

谢谢@NoahFeller。 感谢您的反馈。

@NoahFeller这就是你期望的标志吗?

WinUILogo13_shadow

@NoahFeller这就是你期望的标志吗?

WinUILogo13_shadow

它可能看起来很接近(阴影可能不会那么暗),但问题是在 3D 空间中准确渲染的设计看起来不太好。 正如我之前所说,括号看起来奇怪地压缩并且不适合视图的方向。 我可以看到它在与“相机”视图平行浮动的适当形状的支架和准确投射阴影的情况下工作得更好。 或者看到支架嵌入立方体或其他东西可能很酷。 IMO 你的设计在目前的形式下效果不佳。 但好消息是它绝对可以通过一些不同的方式变得更好。

对最终设计的思考

在进行最后的调整时,我有一些关于设计的事情要提。 首先,看到使用亚克力立方体+发光组合真的很酷。 我也有点担心 3D 立方体顶部的纯色括号。 立方体正在发光,立方体的侧面似乎有一个定向光,所以括号是纯色是没有意义的。 它们可能应该有一个与光源相匹配的轻微渐变外观(不是太多的渐变看起来俗气,只有这样才能真实)。 否则,它在 3D 空间中根本没有意义,并且看起来很糟糕。 我想问的最后一件事是你( @SavoySchuler ,@stmoy)会考虑让括号像这样对称吗?

64465361-47f1fd00-d0da-11e9-834e-918ad9f57736

正如我之前发布时所说,这是一个非常粗糙的设计(没有阴影,括号可能太大,着色确实可以改进等)。 即便如此,它解决了我在这里和 Twitter 上看到的许多关于括号不对称和不同形状的问题,并且这样做的同时仍然以与以前类似的方式环绕立方体。 想象一下右括号在@mdtauk的立方体上扩展。 对我来说感觉是一个很大的改进,因为这种变化更明显地使括号看起来像它们的样子,而不是字母或其他东西。 尽可能对称也很好,并提供平衡! 显然,这种风格会被添加到@mdtauk的带有发光的亚克力立方体中,而不是他的蓝色立方体(如上图所示),但是您是否愿意看到进一步试验这种修改的想法?

同时祝贺@itsmichaelwest和@mdtauk!

首先祝贺@itsmichalwest@mdtauk ,非常感谢@mdtauk分享他的figma 文件!!!

至于@SavoySchuler评论:

  1. 我们喜欢这种配色方案,但我们仍然需要探索一些不同的颜色变体(并将其与各种背景上的阴影/发光混合)。

这是我对@mdtauk很棒的设计的

Fluent Inner Cube 64 scale
Fluent Inner Cube 16 scale (1)

我已经换掉了蓝绿色、蓝色和粉红色,并带有 Windows 主题蓝色的变体,以赋予它更“Windows”的感觉。

看到最终的图标真的很兴奋! 看起来真的很精致! 特别是@mdtauk@NoahFeller分享了许多令人难以置信的想法和观点,这些想法和观点对我将来所做的任何设计都有帮助。

64472825-71f00180-d164-11e9-8ee4-61791013b070

左图是@chingucoding@mdtauk设计的@chingucoding两种设计的修订版和未修订版之间的区别。 让我知道你们的想法。 @chingucoding 也很棒。

2019-09-08-19-28-05
2019-09-08-19-21-38

@NoahFeller是不是和我之前提交的一份一样(通过使括号的颜色相同)

WinUILogo13_X

@NoahFeller是不是和我之前提交的一份一样(通过使括号的颜色相同)

WinUILogo13_X

有点。 多色的括号使它们看起来像包裹着立方体,所以它有点不同。 颜色差异有些显着。 正如我之前提到的, @mdtauk的括号在 3D 中更有意义。 @mdtauk的括号也有点粗。 但是,是的,您可以将其视为两种设计的组合。 我试图改进每个括号的实现。 一个快乐的媒介🙂。

cubewithiin

哦,我完全忘了提到这个版本在立方体设计中有一个立方体,我在本页的一些设计中看到了它。 我认为集成是一个非常酷的方面,并且在其背后有一些很酷的含义。 以下是@mdtauk在解释他在立方体设计中的立方体时所说的,以回应@stmoy

@mdtauk - 非常感谢您的所有输入和变化。 一个简单的问题 - 许多设计都是“立方体中的立方体”。 这个双立方体想传达什么?

@itsmichaelwest最初建议使用 XAML 图标作为徽标的基础,他的设计在第一轮提交中被选中。

我将立方体视为核心,是构建 Windows 应用程序的核心部分,因此我决定通过突出立方体的一部分来说明核心的概念。 我还玩弄了一个“空白”空间,以表明这是一个可以建造的空间。

但是,在数以千计的其他基于立方体的图像中,让立方体和支架设计成为“可拥有”和独特的东西,起到了一定的作用。

64468236-f7c56b80-d0d6-11e9-9bfc-fa155de7791f

这是基于@mdtuak的绿色/蓝色/紫色设计的立方体设计中的对称支架立方体。

我的意见是括号的宽度应该是外立方体宽度的1/4。 内部立方体的大小应该是外部立方体的一半,这将使支架与外部立方体的边缘保持立方体宽度的 1/4 的距离。

这是基于@mdtuak的绿色/蓝色/紫色设计的立方体设计中的对称支架立方体。

164468236-f7c56b80-d0d6-11e9-9bfc-fa155de7791f

我将括号调整得更近一些。 我觉得像这样看起来好一点。

Colour-Test

@SavoySchuler这是您想要的颜色吗?

对称括号肯定要好得多。 想看到一个内角也是圆角的概念。

对称括号肯定要好得多。 想看到一个内角也是圆角的概念。

完全同意。 否则很难说它们是尖括号。 你能澄清你所说的内角是什么意思吗?

Colour-Test-2

很酷的新颜色组合@mdtauk! 你做了一些很棒的工作。 我想知道您是否对是否有形状对称的尖括号有意见。 我已经看到 @Felix-Dev、@ elalexg@goranalkovic在这里发表了关于他们如何更喜欢对称括号的帖子。 我很好奇你是否有相反的观点。 @Felix-Dev 的帖子在下面是上下文。

@NoahFeller IMO 的括号应该反映 XAML 的括号,它们的大小相同。 这应该反映在徽标中。 我对@mdtauk设计的问题是,当查看括号 _isolated_ 时 - 特别是在较小的图像尺寸上 - 我对括号大小的印象是这样的:
image
(与右括号相比,左括号显然更大。在 XAML 中,情况并非如此。)在某些图像分辨率中,即
image
这对我来说很明显,坦率地说,它让我失望。 括号对<>在 XAML 中非常突出,我认为将它们按原样“拍打”在立方体上是合理的,或者至少要充分考虑这一点。

Visual Studio 紫色
Colour-Test-3

很酷的新颜色组合@mdtauk! 你做了一些很棒的工作。 我想知道您是否对是否有形状对称的尖括号有意见。 我已经看到 @Felix-Dev、@ elalexg@goranalkovic在这里发表了关于他们如何更喜欢对称括号的帖子。 我很好奇你是否有相反的观点。 @Felix-Dev 的帖子在下面是上下文。

@NoahFeller使它们对称意味着将括号与立方体分开。 我制作了一个带有相同大小括号(但形状不对称)的版本 - 做出决定的团队似乎偏向于保持不对称。

如果您将 Brackets 视为 XAML/XML 中尖括号的文字表示,那么您肯定会对这种风格化的方法感到不满。

但如果它们的形状是括号的象征,而立方体本身就是标志,那么不对称就暗示了括号,同时又足够风格化,成为一个有趣的标志。

使括号对称,同时将它们放在立方体上,这意味着旋转立方体,这并没有被要求,并且是远离 XAML 徽标灵感的又一举措。

颜色

@mdtauk - 你太棒了。 我们所需要的只是您用于下方徽标的矢量格式文件(如果可用,最好使用左侧和中间形状)。 否则,除非您愿意,否则请不要再将您的时间借给我们。 我们不能再要求了而不感到内疚!

排除@mdtauk的最新提交(我们将很快对其进行评估),这是迄今为止我们最喜欢的三种颜色组合。 他们都向 Windows 或我们的开发人员工具品牌颜色点头,我们寻求与之密切配合。

image

作为最后的探索,我们想看看是否有可能以 Microsoft 的官方颜色很好地使用此设计(如果可能的话)。 我一直在离线探索这个,我还没有想出任何我可以自豪地发布的东西。 除非这里有人可以,否则我们将从上面的配色方案中进行选择。

至于支架/高度形状,我们的兴趣在于最能补充颜色的东西。 到目前为止,我相信上面的左侧和中间图像做得最好,但这绝不排除上面的正确项目或任何偏离此的替代颜色提交。

颜色

@mdtauk - 你太棒了。 我们所需要的只是您用于下方徽标的矢量格式文件(如果可用,最好使用左侧和中间形状)。 否则,除非您愿意,否则请不要再将您的时间借给我们。 我们不能再要求了而不感到内疚!

排除@mdtauk的最新提交(我们将很快对其进行评估),这是迄今为止我们最喜欢的三种颜色组合。 他们都向 Windows 或我们的开发人员工具品牌颜色点头,我们寻求与之密切配合。

image

作为最后的探索,我们想看看是否有可能以 Microsoft 的官方颜色很好地使用此设计(如果可能的话)。 我一直在离线探索这个,我还没有想出任何我可以自豪地发布的东西。 除非这里有人可以,否则我们将从上面的配色方案中进行选择。

至于支架/高度形状,我们的兴趣在于最能补充颜色的东西。 到目前为止,我相信上面的左侧和中间图像做得最好,但这绝不排除上面的正确项目或任何偏离此的替代颜色提交。

我也曾尝试使用 Microsoft Four Square 徽标颜色,但无法在保持立方体维度的同时让它们看起来很好。

你使用什么工具工作? 我一直在使用 Figma,因为我相信它是 Microsofties 熟悉的工具,但是如果愿意,我可以将它们转移到 Illustrator 中吗?

感谢您分享您对对称/不对称@mdtauk 的看法。

@NoahFeller使它们对称意味着将括号与立方体分开。 我制作了一个带有相同大小括号(但形状不对称)的版本 - 做出决定的团队似乎偏向于保持不对称。

使括号对称,同时将它们放在立方体上,这意味着旋转立方体,这并没有被要求,并且是远离 XAML 徽标灵感的又一举措。

我不明白你说使括号对称意味着它们必须与立方体分开是什么意思。 我也不确定你说需要旋转立方体以保持括号对称是什么意思。 当我迭代你的设计时,我没有做这两件事,我只是稍微修改了你的括号的高度和形状,以实现对称⬇。 除非我误解了您的意思,否则您陈述的这些部分似乎不正确。

64565562-08b5ed00-d322-11e9-8c29-6aa1e67a6691

@elalexg在他的评论中也澄清了这一点:

我认为@mdtauk的 3D 支架设计是要走的路,但是如果左支架以与右支架相同的方式结束,它将使它看起来相同的大小,即使有 3D 效果,我附上一个漂亮的丑陋的例子只是为了说明这一点。
64464723-94cfd680-d0ce-11e9-965e-a08b89d1fa73

我在修改你的设计方面受到了他的部分启发。

我也没有看到你的括号是如何象征尖括号的。 它们似乎只是尖括号,只是一个比另一个大一点。 正如@Felix-Dev 所说,原来的 XAML 括号是对称的,所以看起来对称实际上更接近以前的 XAML 设计,而不是远离它。

我可以理解您希望徽标风格化是什么意思。 对我和我提到的其他人来说,看到不同大小的括号感觉很不自然,但我完全可以看到你看到的不同。 我觉得这个标志足够复杂,有纹理、发光、一堆不同的颜色等。不需要更多的兴趣,但我可以看到你的想法。

真的由@SavoySchuler和他的团队决定

仅供参考,我计划设计(在 3D 中)和 3D 打印自己的真实版本,无论(最终)最终徽标最终是什么。 我将使用一些半透明的灯丝来模拟丙烯酸效果(下面的示例)。 如果你们有兴趣,我一定会分享结果的照片!

a4f18cabbcf406fd66d3d049da0dc25a067bc6f0

仅供参考,我计划设计(在 3D 中)和 3D 打印自己的真实版本,无论(最终)最终徽标最终是什么。 我将使用一些半透明的灯丝来模拟丙烯酸效果(下面的示例)。 如果你们有兴趣,我一定会分享结果的照片!

a4f18cabbcf406fd66d3d049da0dc25a067bc6f0

惊人的。 我们已经在内部谈过一些关于根据徽标制作这样的物理对象; 迫不及待想看看你想出了什么!

我也尝试过 Microsoft 品牌的颜色,但效果不佳,我认为要搭配的配色方案是 Windows,因为毕竟这是 Win(dows) UI。
@mdtauk对 Visual Studio 颜色有一个有趣的想法,这也很有意义。

查看所有关于括号对称/不对称的评论,我更倾向于不对称设计,因为这为标志提供了另一种独特的外观,并且似乎以某种方式更好地绘制了立方体。

我不明白你说使括号对称意味着它们必须与立方体分开是什么意思。 我也不确定你说需要旋转立方体以保持括号对称是什么意思。 当我迭代你的设计时,我没有做这两件事,我只是稍微修改了你的括号的高度和形状,以实现对称⬇。 除非我误解了您的意思,否则您陈述的这些部分似乎不正确。

我也没有看到你的括号是如何象征尖括号的。 它们似乎只是尖括号,只是一个比另一个大一点。 正如@Felix-Dev 所说,原来的 XAML 括号是对称的,所以看起来对称实际上更接近以前的 XAML 设计,而不是远离它。

我可以理解您希望徽标风格化是什么意思。 对我和我提到的其他人来说,看到不同大小的括号感觉很不自然,但我完全可以看到你看到的不同。 我觉得这个标志足够复杂,有纹理、发光、一堆不同的颜色等。不需要更多的兴趣,但我可以看到你的想法。

真的由@SavoySchuler和他的团队决定

我希望立方体上的“标记”与立方体表面的侧面对齐。 通过以对角线切割左支架的末端笔划,立方体的轮廓感觉不自然,并且感觉它与旋转断开连接。

image

但是现在由@SavoySchuler和团队来进行设计,并将其解释和塑造成团队想要和需要的东西。

我刚刚完成了 Adob​​e Illustrator 版本,去掉了所有颜色,所以他们可以把它作为一个起点。

image

这是 Illustrator 文件,已压缩
最终标志形状.zip
_编辑:更新了 Illustrator 文件,添加了填充单色版本_

16
Final Logo Shapes _ Mono 16
Final Logo Shapes _ Shaded 16
Final Logo Shapes _ Filled 16

32
Final Logo Shapes _ Mono 32
Final Logo Shapes _ Shaded 32
Final Logo Shapes _ Filled 32

64
Final Logo Shapes _ Mono 64
Final Logo Shapes _ Shaded 64
Final Logo Shapes _ Filled 64

128
Final Logo Shapes _ Mono 128
Final Logo Shapes _ Shaded 128
Final Logo Shapes _ Filled 128

256
Final Logo Shapes _ Mono 256
Final Logo Shapes _ Shaded 256
Final Logo Shapes _ Filled 256

1024
Final Logo Shapes _ Mono 1024
Final Logo Shapes _ Shaded 1024
Final Logo Shapes _ Filled 1024

4096
Final Logo Shapes _ Mono 4096
Final Logo Shapes _ Shaded 4096
Final Logo Shapes _ Filled 4096

好的,感谢您澄清@mdtauk。 我这样做是为了在我在之前的帖子中讨论过的立方体设计中实现微妙的立方体。 因为线帽的角度是45°它在正方形的对角线上所以我不觉得太不自然。 我明白你的意思。 我认为我优先将形状拟合为六边形,而您优先将其拟合为立方体,无论哪种方式都有一点妥协(立方体设计中立方体的平衡对称与添加的字符和更好的包裹)。 无论如何,我真的很感谢解释!

好的,感谢您澄清@mdtauk。 我这样做是为了在我在之前的帖子中讨论过的立方体设计中实现微妙的立方体。 因为线帽的角度是45°它在正方形的对角线上所以我不觉得太不自然。 我明白你的意思。 我认为我优先将形状拟合为六边形,而您优先将其拟合为立方体,无论哪种方式都有一点妥协(立方体设计中立方体的平衡对称与添加的字符和更好的包裹)。 无论如何,我真的很感谢解释!

两种方法都不比另一种更好,只是核心思想不同。 正如您所说,我不想失去这样一个事实,即这是一个具有深度和纹理的立方体,这是 XAML 徽标背后的初衷。

这是 Illustrator 文件,已压缩
最终标志形状.zip
_编辑:更新了 Illustrator 文件,添加了填充单色版本_

16
Final Logo Shapes _ Mono 16
Final Logo Shapes _ Shaded 16
Final Logo Shapes _ Filled 16

32
Final Logo Shapes _ Mono 32
Final Logo Shapes _ Shaded 32
Final Logo Shapes _ Filled 32

64
Final Logo Shapes _ Mono 64
Final Logo Shapes _ Shaded 64
Final Logo Shapes _ Filled 64

128
Final Logo Shapes _ Mono 128
Final Logo Shapes _ Shaded 128
Final Logo Shapes _ Filled 128

256
Final Logo Shapes _ Mono 256
Final Logo Shapes _ Shaded 256
Final Logo Shapes _ Filled 256

1024
Final Logo Shapes _ Mono 1024
Final Logo Shapes _ Shaded 1024
Final Logo Shapes _ Filled 1024

4096
Final Logo Shapes _ Mono 4096
Final Logo Shapes _ Shaded 4096
Final Logo Shapes _ Filled 4096

你好朋友! 我们很想拥有您最初发送时制作的原始多色和蓝色徽标设计,一个 .ai 文件放在一个压缩文件夹中。 他们看起来很棒! 感谢您帮助我们,我们非常喜欢您的作品,因此我们希望保持原样:) 再次感谢

@embender希望这些是你想要的😃

Final Blue Logo Shapes _ Shaded 1024
蓝色标志无阴影.zip

Final Dark Multicolour Logo Shapes _ Shaded 1024
多色深色标志.zip

Final Light Multicolour Logo Shapes _ Shaded 1024
多色灯标志.zip

@SavoySchuler @embender我已经用最终的徽标和颜色更新了 Figma,其中包括会使 Adob​​e Illustrator 文件的文件大小膨胀的阴影。

https://www.figma.com/file/KCQQ1wtMBnWxsXrmDOHmhB/WinUI-Logo-Share?node-id=0%3A1

是我还是较小的灰色立方体看起来很模糊? 那只是图像压缩神器还是什么?

是我还是较小的灰色立方体看起来很模糊? 那只是图像压缩神器还是什么?

我之前发布的灰度徽标?

以 100% 缩放比例查看时,图像应该很清晰,因为它们被设计为在像素网格上看起来很清晰。

@mdtauk - 再次感谢您的所有贡献和快速响应。 在这个过程中,你是无价的。 也感谢您提供单色徽标 - 我认为它们在赃物上看起来很棒!

如果不是太麻烦,您能否发送展示徽标轮廓版本的资产,包括不对称括号? 类似的东西,但更新到最新的设计:

image

另外,您对轮廓粗细有何看法? 我知道有人讨论过确保轮廓厚度有助于将徽标保持在小像素尺寸,但对于赃物,我想知道更细的线条是否更有效?

我真的很喜欢徽标的不对称版本,其中线条延伸到每个面的外边缘。 IE。
多色灯标志.zip

它允许每个面在其自身范围内保持连贯,并允许您想象如果旋转立方体,隐藏的面会是什么样子。

在这一点上,如果该设计用于魔方,可能会很酷。

@stmoy我确实在按比例放大时略微缩小了轮廓,但是对于 16 和 32,我想将其保持为 1 px 的厚度。

无论如何,我在 Figma 中添加了更薄的 Monoline 权重图标。

Mono 16
Mono 32
Mono 64
Mono 128
Mono 256
Mono 1024
Mono 4096

是我还是较小的灰色立方体看起来很模糊? 那只是图像压缩神器还是什么?

我之前发布的灰度徽标?

以 100% 缩放比例查看时,图像应该很清晰,因为它们被设计为在像素网格上看起来很清晰。

啊,愚蠢的我和 DPI 缩放! 😛

标志定稿

你好,美好的社区! 我相信你在上周已经看到了,我们绝对,毫无疑问,100%,真正降落在我们非常兴奋的标志上! 非常感谢你们开车回家。 我们真的很想创造一些东西,把每个人都放在这里的所有最喜欢的作品结合起来。 我们相信这是这样做的。

New WinUI Logo - wireframe and color

让我们汇报一下

我们这里有旧的 Xaml 标志:

Original Xaml Logo

@itsmichaelwest为历史注入新鲜活力时,您会得到一些美妙的东西:

WinUI_LogoExporation_V3_GitHub

从那里,我们转向社区。 在(近)另外一百份探索重新着色和样式的提交之后,我们爱上了这种简单而优雅的转折以自包含括号。 正如@embender所说,转述为:“我喜欢括号上的不同高度。它使它有点抽象——在科学上描绘了一些艺术,”这就是 UI 的结合——艺术和科学合二为一。”

New WinUI Logo - wireframe

至于颜色 - 我们的用户社区发言并要求仍然“感觉像 Windows”。 @mdtauk让人们很容易想象这种熟悉的蓝色再次代表我们的社区:

New WinUI Logo - color

当然,在这个简短的总结中,我删去了来自这里近 40 位贡献者的约 300 次互动,以及更多推特和线下的互动。 简短的故事是这样的:如果没有你们,我们不可能做到这一点,我希望你们都能看到你们的作品和故事反映在我们共同创作的作品中。 不知何故,它看起来既现代又复古,既时髦又历史,精确和不对称。 这是一个对话片段,这是设计使然。 😊

New WinUI Logo - wireframe and color

期待

考虑到这种协作努力的多样性以及我们看到的所有丰富多彩的变化,我们怎么能不使用您给我们的所有想法来保持活力? 我们很高兴能对颜色和主题进行实验。 当我们分享有趣的设计作品时,请密切关注Twitter ,并尝试提出庆祝月份、假期并发布主题变体来分享! 😊

我们还将开始迭代令人兴奋的赃物设计。 请务必光临我们在 Microsoft Ignite 的展位,领取以下贴纸之一!

WinUI Logo Sticker

赃物链接?

我看到有人要求提供个人赃物购买链接。 一旦我们的赃物阵容最终确定,我将研究是否可以实现这一目标并向此线程报告。 我将推迟关闭该问题,直到那时!

我们有赃物要分享!

社区团队,我清楚地听到了你的声音。 您希望有机会购买我们的内部团队成员将在 Microsoft Ignite、舞台上和世界各地摇摆的同款产品。 我们选择通过一家可以为您实现这一目标的公司设计和订购我们的赃物。

我今天下了 100 多件商品的最终订单。 每个团队成员都必须选择一个。 许多人都非常喜欢两者,我们自己拿了一个并订购了另一个(包括我)!

请让我知道,如果你有任何问题。 我有几个注意事项:

  • 如果您是我们“第 1000 期 - 谢谢!”的赢家!
  • 连帽衫至少需要 6 件。您可以轻松地将产品换成一件,没有最低限度,也可以将团体订单放在一起。
  • 如果您在本周订购/运送到您的酒店,您可以及时获得这些,并于 11 月 4 日至 8 日在佛罗里达州奥兰多的 Microsoft Ignite 上与我们一起佩戴它们!

WinUI 连帽衫订购链接

WinUI Hoodies

WinUI 衬衫订购链接

WinUI Shirts

最终的标志变得很棒。 它真的很流行。

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