Jump to content

Recommended Posts

Posted

More Windows-style title bars and projections

Although Affinity was first introduced for macOS and iOS, we are glad they have arrived on the Windows platform. Ensuring the development of both platforms at the same time may be difficult, so using some cross-platform code is understandable. But anyway, I still want to see Affinity Photo and other Affinity software in line with the modern UI of Windows. Includes title bar, maximize minimize and close buttons, window borders. If you can, you can also use the Windows common controls on the menu, maybe this is a better wish.

Reference: UWP Universal Controls https://docs.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro#controls

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

On how to use Fluent Design and XAML in Win32:
Windows 10 now enables you to use UWP controls in non-UWP desktop applications so that you can enhance the look, feel, and functionality of your existing desktop applications with the latest Windows 10 UI features that are only available via UWP controls. This means that you can use UWP features such as Windows Ink and controls that support the Fluent Design System in your existing WPF, Windows Forms, and C ++ Win32 applications. This developer scenario is sometimes called XAML islands.

Announced at Build 2018 during the keynote: https://developer.microsoft.com/en-us/events/build/content/announcing-uwp-xaml-islands
XAML Islands Demo: https://developer.microsoft.com/en-us/events/build/content/fluent-design-system-demo
Entire Fluent Design @ Build 2018 playlist: https://developer.microsoft.com/en-us/events/build/content/fluent-design-system-evolution?playlist=41f18bdd-6d5a-44b9-8586-0fa36ed91c45
Documentation here: https://docs.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-host-controls

Posted

Our UI is designed to be consistent across platforms, rather than follow the OS guidelines closely (and we are yet to see a large app on the scale of Affinity apps using Fluent). Do you have suggestions for areas we could improve in the UI?

Posted
4 hours ago, Mark Ingram said:

Our UI is designed to be consistent across platforms, rather than follow the OS guidelines closely (and we are yet to see a large app on the scale of Affinity apps using Fluent). Do you have suggestions for areas we could improve in the UI?

To be precise, in desktop applications, all platforms are consistent with macOS. I can't require Windows native controls to be used in most panels and custom controls (the reason is as you mentioned, and I guess it is to reduce the development effort).

So first, I think the Windows-style title bar (including the maximize minimize button and the close button) and the window projection can be done.

Second, if you can, remove the gradient from light to dark in the Windows panel.

Third, it seems that the interface does not support Windows scaling? My interface is 125% zoom, but it seems that this does not work for Affinity Photo.

 

Grey Theme(look the Tittle Bar,the maximize minimize button and the close button)The color of the title bar should match the gray in the settings

grey.thumb.png.52bae3611a4366d4734eedc5462400dd.png

 

Dark Theme

dark.thumb.png.3fab428ed9696b592a319536f24009b7.png

 

the shadow of Windows

304976947_.jpg.4178f676a197564dde0e8dfa59c531cd.jpg

 

So, for the Windows version, a new title bar (you use macOS title bar on macOS) and a correct window shadow is what I think is needed. If possible, remove the gradient of the background of the toolbar area in the Windows version.

Posted

It is a little hard for me to judge the dark images here right now but...

The best colour in the surrounding environment when editing pictures is a neutral grey. Not black. Neutral grey. That is why Adobe and others changed the theme in their programs to medium grey or darker grey. Not black. Because the surrounding colours affect how your eyes perceive other colours. Black does as well.

So I would hate using Fluent for the sake of using Fluent. Is not relevant for the use of the software. The grey and the gradient suits me just fine. The creative environment is the most relevant factor. To me.

Besides that I think Serif hit a perfect balance in their cross platform programs (interfacewise). Very elegant. Far the best I have seen actually. So spending more man hours on it would not make a lot of sense. I would rather see those hours used on features and optimizations that the creative users would really benefit from.

  • "The user interface is supposed to work for me - I am not supposed to work for the user interface."
  • Computer-, operating system- and software agnostic; I am a result oriented professional. Look for a fanboy somewhere else.
  • “When a wise man points at the moon the imbecile examines the finger.” ― Confucius
  • Not an Affinity user og forum user anymore. The software continued to disappoint and not deliver.
Posted

 

3 hours ago, Jowday said:

It is a little hard for me to judge the dark images here right now but...

The best colour in the surrounding environment when editing pictures is a neutral grey. Not black. Neutral grey. That is why Adobe and others changed the theme in their programs to medium grey or darker grey. Not black. Because the surrounding colours affect how your eyes perceive other colours. Black does as well.

So I would hate using Fluent for the sake of using Fluent. Is not relevant for the use of the software. The grey and the gradient suits me just fine. The creative environment is the most relevant factor. To me.

Besides that I think Serif hit a perfect balance in their cross platform programs (interfacewise). Very elegant. Far the best I have seen actually. So spending more man hours on it would not make a lot of sense. I would rather see those hours used on features and optimizations that the creative users would really benefit from.

All Affinity software allows you to set the grayscale freely, so the gray theme and black theme in the screenshot are just examples.

Posted
On 3/8/2020 at 4:29 PM, Mark Ingram said:

Our UI is designed to be consistent across platforms, rather than follow the OS guidelines closely (and we are yet to see a large app on the scale of Affinity apps using Fluent). Do you have suggestions for areas we could improve in the UI?

If not strictly speaking, Office 365 and Visual Studio 2019 are considered large software using Fluent Design

Posted
1 hour ago, Mark Ingram said:

Visual Studio 2019? No, that's absolutely not using Fluent design.

Well, I agree with you that, strictly speaking, Office 365 does not have enough FDS elements.

Let's return to the theme. You can see that the main difference between the Mac version and the Windows version is the menu bar and title bar. For the Mac version, the menu bar is located at the top of the desktop and uses the native menu. The title bar is also native. Just like software like Pages, Sketch. For developers, these two places cannot be shared across platforms. Obviously, you cannot continue to use these controls on Windows while using native controls on your Mac. Therefore, if you plan to maintain a consistent appearance across platforms, naturally, the title bar and menu bar are not included. So you can use the title bar of Windows, use the maximize, minimize and close buttons of native appearance, just like Google Chrome does.

dark mode

392a7821e15a1a61140a891effd1e34e50274516.png

light mode

图片

 


If you set to color the title bar
图片

 

for Windows 7

图片

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.