nextcloud / windows-universal

📱 Nextcloud Windows Mobile app
https://www.microsoft.com/store/apps/9nblggh532xq
Mozilla Public License 2.0
59 stars 34 forks source link

Adapt the new Fluent Design Guidelines #172

Open SunboX opened 7 years ago

SunboX commented 7 years ago

Microsoft published an new design system called "Fluent Design". The Nextcloud app should adapt this, to achieve a consistent look and feel for all Windows users across all devices.

Design Resources: https://developer.microsoft.com/en-us/windows/apps/design

Intoduction to Fluent Design: https://channel9.msdn.com/Events/Build/2017/B8034

Beautiful UI made possible and easy with Windows.UI and the Windows 10 Creators Update https://blogs.windows.com/buildingapps/2017/06/22/sweet-ui-made-possible-easy-windows-ui-windows-10-creators-update/

SunboX commented 7 years ago

By now, this will only work with "Fall Creators Update" Insider Preview (introduced v10.0.16190.0) installed on the developing machine. The app itself should run on Creators Update (not tested yet).

Windows 10 requirements

Device family Windows 10 Insider Preview (introduced v10.0.16190.0)
API contract Windows.Foundation.UniversalApiContract (introduced v5)
jp-weber commented 7 years ago

But I hope for an optional transparency, because is it currently at some points buggy and not really nice.

SunboX commented 7 years ago

Hey @revan1199, what do you mean with "buggy"? I did not recognize any bugs, but I'm very interested in knowing about them. 😏

It will not be optional, because it will be based on a new common control called "NavigationView". That already has the acrylic material look build in. Changing this makes no sense, if Microsoft decides to go this way, we should follow. Most "normal" users want the same look&feel across all their apps. Except that, we will introduce some branding color to make the app more "Nextcloud"y, but this will be changeable by a setting to the system default accent color and theme. This is the only "hack" we will build in - all other UI&UX should follow common Windows apps Look&Feel (like Groove Music, the Store app, the File Explorer app, Outlook, News, Fotos, ...)

By the way, if you are disturbed by those "white borders" if you touch something, that look like rendering "bugs" 😏 , it's by design. This is a new highlight feature for new input types like pens or visual input from AR. Apps are getting universal 😏 Here are more infos about that: https://channel9.msdn.com/Events/Build/2017/B8034

jp-weber commented 7 years ago

Curiously sometimes the noise grain intensity of the background is different. And I don't like the noise texture at this density. For example the calculator app, two instances, but different background: https://abload.de/img/acrylicqcjjs.jpg

SunboX commented 7 years ago

For example the calculator app, two instances, but different background

The inactive window will not have the acrylic effect. Maybe that's the issue here?

They explain it here at minute 20:59 -> https://channel9.msdn.com/Events/Build/2017/B8034

jp-weber commented 7 years ago

No, I made the screenshots step by step and with focus of the application. But it should be only a short-term problem and should be fixed until the release.