Build a unified Windows UI experience

%3CLINGO-SUB%20id%3D%22lingo-sub-2064345%22%20slang%3D%22zh-CN%22%3EBuild%20a%20unified%20Windows%20UI%20experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2064345%22%20slang%3D%22zh-CN%22%3E%3CP%3E%3CSPAN%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fdiscussions%2Ftop-feedback-summary-for-january-12%2Fm-p%2F2053932%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fdiscussions%2Ftop-feedback-summary-for-january-12%2Fm-p%2F2053932%3C%2FA%3E%20As%20shown%20in%20the%20link%2C%20the%20introduction%20of%20transparency%20effects%20for%20Microsoft%20Edge%20dominates%20the%20rankings%20all%20the%20year%20round.%20Obviously%2C%20users%20are%20so%20looking%20forward%20to%20acrylic%20and%20fluent%20design!%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EWith%20the%20continuous%20development%20of%20FDS%2C%20the%20transparency%20effect%20is%20no%20longer%20the%20focus.%20We%20know%20that%20using%20Navigation%20in%20XAML%20will%20no%20longer%20enable%20the%20transparency%20effect%20of%20the%20underlying%20window%20by%20default%2C%20and%20the%20default%20transparency%20effect%20will%20remain%20in%20the%20window%20of%20this%20layer.%20The%20difference%20is%20shown%20in%20the%20figure%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20image-alt%3D%22take-screenshots-windows-10%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F246682i7ED86C1B3A3F587C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22take-screenshots-windows-10%22%20alt%3D%22take-screenshots-windows-10%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EIn%20this%20picture%2C%20the%20window%20title%20bar%20and%20toolbar%20of%20%22Screenshots%20and%20Sketches%22%20are%20transparent%20to%20the%20desktop%20and%20windows%20below%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20image-alt%3D%22iTunes%22%20style%3D%22width%3A%20640px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F246681i7BBC25CD12D1C387%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22iTunes%22%20alt%3D%22Itunes%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EIn%20this%20screenshot%20of%20the%20Microsoft%20Store%2C%20the%20elements%20at%20the%20bottom%20of%20the%20window%20are%20transparent%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EAt%20present%2C%20it%20seems%20that%20the%20design%20team%20intends%20to%20adopt%20%22transparency%20to%20the%20elements%20in%20the%20window%22%20as%20a%20trend%2C%20and%20will%20not%20develop%20more%20transparent%20title%20bars%20and%20side%20bars%20in%20the%20future.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ETherefore%2C%20the%20focus%20is%20not%20on%20transparency%2C%20but%20on%20other%20areas.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EMicrosoft%20Edge%20now%20gives%20me%20the%20feeling%2C%20as%20if%20I%20changed%20the%20Chrome%20icon%20to%20Microsoft's%2C%20and%20then%20told%20me%2C%20look%2C%20this%20is%20Microsoft's%20browser.%20I%20think%20this%20is%20a%20huge%20irony%20and%20tragedy%20for%20the%20visual%20perception%20of%20the%20Microsoft%20brand%2C%20which%20means%20that%20users%20cannot%20really%20recognize%20the%20work%20that%20Microsoft%20is%20doing%20on%20this%20browser%2C%20and-let%20users%20understand%20that%20this%20is%20a%20different%20version%20of%20Chrome%20Browser.%20Microsoft%20must%20use%20practical%20actions%20to%20reshape%20Microsoft's%20brand%20image.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20think%20the%20core%20action%20is%20to%20use%20native%20controls%2C%20or%20reshape%20the%20appearance%20of%20non-native%20controls%20that%20look%20like%20native%20controls.%20This%20includes%20the%20following%3A%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E1.%20Forward%20and%20back%20buttons%2C%20refresh%20buttons%2C%20address%20bar%20and%20toolbar%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E2.%20Context%20menu%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E3.%20Edge's%20special%20pages%2C%20such%20as%20settings%2C%20downloads%2C%20favorites%2C%20etc.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EFor%20the%20address%20bar%20toolbar%20area%2C%20I%20think%20it%E2%80%99s%20not%20too%20difficult%20to%20build%20the%20appearance%20with%20XAML%20(or%20WinUI%203).%20If%20it%20is%20difficult%2C%20it%20is%20not%20too%20difficult%20to%20make%20these%20controls%20look%20like%20Windows.%20This%20area%20should%20look%20exactly%20like%20the%20old%20version%20of%20Edge.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThe%20context%20menu%20is%20a%20place%20where%20it%20is%20easy%20to%20achieve%20a%20smooth%20design.%20I%20think%20it%20is%20nothing%20more%20than%20adding%20a%20transparency%2C%20adding%20a%20matte%2C%20adding%20a%20noise%2C%20adjusting%20the%20kerning%20and%20line%20height%2C%20and%20finally%20adjusting%20the%20edge%20and%20projection.%20I%20don't%20think%20how%20difficult%20it%20is%2C%20is%20it%20really%20difficult%3F%20Or%2C%20will%20you%20consider%20WinUI%203%20release%3F%20Or%20use%20XAML%20island%2C%20just%20like%20the%20old%20version%20of%20Edge%3F%20Is%20this%20really%20so%20difficult%3F%20I%20can't%20understand%20why%20I%20can't%20do%20it%20after%20a%20year.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20think%20any%20user%20will%20notice%20the%20huge%20difference%20between%20the%20sidebar%20of%20the%20settings%20page%20and%20the%20sidebar%20of%20XAML%20Navigation%20in%20%22Windows%20Settings%22.%20I%20don%E2%80%99t%20want%20to%20worry%20about%20whether%20the%20highlight%20bar%20is%20a%20rounded%20rectangle%20(capsule)%20or%20a%20right-angled%20rectangle-because%20Both%20are%20FDS%2C%20but%20there%20is%20no%20lighting%20effect%20(CompositionLight%20Class)%2C%20completely%20different%20spacing%2C%20inexplicable%20margins%2C%20lack%20of%20transparency%2C%20all%20of%20which%20remind%20users%20that%20this%20is%20a%20web%20page%2C%20not%20a%20native%20one.%20UI-based%20application.%20It%20seems%20to%20have%20nothing%20to%20do%20with%20the%20Windows%20design%20language-although%20it%20seems%20that%20many%20applications%20have%20to%20do%20this%2C%20indeed%2C%20cross-platform%2C%20Web%20development%20also%20meets%20Microsoft's%20strategic%20goals%2C%20it%20is%20really%20difficult%20to%20resist%20the%20temptation.%20Skype%2C%20Microsoft%20Teams%2C%20and%20Outlook%20to%20come%2C-and%20the%20latest%20file%20explorer%20used%20on%20Windows%2010X%2C%20the%20design%20looks%20increasingly%20unrelated%2C%20each%20team%20has%20its%20own%20ideas%2C%20compare%20%2C%20The%20unification%20of%20macOS%20is%20simply%20outrageous!%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2065512%22%20slang%3D%22en-US%22%3ERe%3A%20Build%20a%20unified%20Windows%20UI%20experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2065512%22%20slang%3D%22en-US%22%3E%3CP%3EYes!%20Transparency%20or%20Acrylic%20effect%20all%20the%20way!%20100%25%3C%2FP%3E%3CP%3Elet's%20all%20send%20feedback%20and%20request%20this%20using%20feedback%20button%20on%20Edge.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEdge%20menu%20(...)%20%3D%26gt%3B%20Help%20and%20Feedback%20%3D%26gt%3B%20Send%20Feedback%20(works%20on%20Windows%2FMac%2FLinux)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20doing%20it%20right%20now%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2066352%22%20slang%3D%22zh-CN%22%3ERe%3A%20Build%20a%20unified%20Windows%20UI%20experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2066352%22%20slang%3D%22zh-CN%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX.%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20have%20sent%20this%20message%2C%20but%20I%20feel%20that%20Microsoft%20is%20willing%20to%20do%20this...%20I'm%20not%20sure%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2066653%22%20slang%3D%22en-US%22%3ERe%3A%20Build%20a%20unified%20Windows%20UI%20experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2066653%22%20slang%3D%22en-US%22%3EWinUI%203%20is%20still%20in%20preview%2C%20maybe%20it%20needs%20to%20reach%20stable%20status%20and%20get%20more%20features%20(version%203.1%20and%20beyond)%20so%20that%20Edge%20as%20a%20Win32%20program%20can%20have%20the%20UI%20qualities%20we%20want.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2066677%22%20slang%3D%22zh-CN%22%3ERe%3A%20Build%20a%20unified%20Windows%20UI%20experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2066677%22%20slang%3D%22zh-CN%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX.%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWinUI3%20will%20come%20in%202021%EF%BC%8Cbut%20I%26nbsp%3B%20(both%20Microsoft%20and%20I%20)%20dont%20know%20when%20it%20will%20release.%20%3CBR%20%2F%3E%20So%20another%20way%20is%20XAML%20island%2C%20just%20like%20what%20they%20had%20done%20in%20the%20oud%20version%20of%20Edge.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%2C%20WinUI3%20may%20be%20a%20better%20choose.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

https://techcommunity.microsoft.com/t5/discussions/top-feedback-summary-for-january-12/m-p/2053932 As shown in the link, the introduction of transparency effects for Microsoft Edge dominates the rankings all the year round. Obviously, users are so looking forward to acrylic and fluent design!

 

With the continuous development of FDS, the transparency effect is no longer the focus. We know that using Navigation in XAML will no longer enable the transparency effect of the underlying window by default, and the default transparency effect will remain in the window of this layer. The difference is shown in the figure

 

take-screenshots-windows-10

In this picture, the window title bar and toolbar of "Screenshots and Sketches" are transparent to the desktop and windows below

 

iTunes

In this screenshot of the Microsoft Store, the elements at the bottom of the window are transparent

 

At present, it seems that the design team intends to adopt "transparency to the elements in the window" as a trend, and will not develop more transparent title bars and side bars in the future.

 

Therefore, the focus is not on transparency, but on other areas.

 

Microsoft Edge now gives me the feeling, as if I changed the Chrome icon to Microsoft's, and then told me, look, this is Microsoft's browser. I think this is a huge irony and tragedy for the visual perception of the Microsoft brand, which means that users cannot really recognize the work that Microsoft is doing on this browser, and-let users understand that this is a different version of Chrome Browser. Microsoft must use practical actions to reshape Microsoft's brand image.

 

I think the core action is to use native controls, or reshape the appearance of non-native controls that look like native controls. This includes the following:

1. Forward and back buttons, refresh buttons, address bar and toolbar

2. Context menu

3. Edge's special pages, such as settings, downloads, favorites, etc.

 

For the address bar toolbar area, I think it’s not too difficult to build the appearance with XAML (or WinUI 3). If it is difficult, it is not too difficult to make these controls look like Windows. This area should look exactly like the old version of Edge.

 

The context menu is a place where it is easy to achieve a smooth design. I think it is nothing more than adding a transparency, adding a matte, adding a noise, adjusting the kerning and line height, and finally adjusting the edge and projection. I don't think how difficult it is, is it really difficult? Or, will you consider WinUI 3 release? Or use XAML island, just like the old version of Edge? Is this really so difficult? I can't understand why I can't do it after a year.

 

I think any user will notice the huge difference between the sidebar of the settings page and the sidebar of XAML Navigation in "Windows Settings". I don’t want to worry about whether the highlight bar is a rounded rectangle (capsule) or a right-angled rectangle-because Both are FDS, but there is no lighting effect (CompositionLight Class), completely different spacing, inexplicable margins, lack of transparency, all of which remind users that this is a web page, not a native one. UI-based application. It seems to have nothing to do with the Windows design language-although it seems that many applications have to do this, indeed, cross-platform, Web development also meets Microsoft's strategic goals, it is really difficult to resist the temptation. Skype, Microsoft Teams, and Outlook to come,-and the latest file explorer used on Windows 10X, the design looks increasingly unrelated, each team has its own ideas, compare , The unification of macOS is simply outrageous!

 

I implore the development team to read this article to help users build a harmonious and unified appearance, One Windows, One Microsoft

https://medium.com/microsoft-design/fluent-makeover-photolab-a583d25f362b

7 Replies

Yes! Transparency or Acrylic effect all the way! 100%

let's all send feedback and request this using feedback button on Edge.

 

Edge menu (...) => Help and Feedback => Send Feedback (works on Windows/Mac/Linux)

 

I'm doing it right now

@HotCakeX 

I have sent this message, but I feel that Microsoft is willing to do this... I'm not sure

WinUI 3 is still in preview, maybe it needs to reach stable status and get more features (version 3.1 and beyond) so that Edge as a Win32 program can have the UI qualities we want.

@HotCakeX 

 

WinUI3 will come in 2021,but I  (both Microsoft and I ) dont know when it will release.
So another way is XAML island, just like what they had done in the oud version of Edge.

 

However, WinUI3 may be a better choose.

Yes it will be better, and also Edge is a multiplatform browser, I'm not sure how they are going to have the same experience across multiple platforms.

@HotCakeX 

This is why Edge may not use WinUI3. WinUI3 is not a cross-platform UI library. Although WinUI3 means that the UI layer is no longer bound to a specific version of Windows, it can still only be used on Windows.

 

I think you should have heard of .NET MAUI, it inherits from Xamarin.Forms, is a cross-platform UI library, covering from Windows to macOS to iOS to Android, but... from my personal understanding, this is the same as Windows There is not much connection, from now on you will see more and more various cross-platform apps /Web Apps with UNIQUE DESIGN(Skype?), just like you have already seen.

Windows ecosystem is big and has many devices, it's worth having its own UI.