Skip to content

Design Conventions

Jump to bottom
yuuiko edited this page Jul 26, 2020 · 2 revisions

Overall Preset Structure

AquaTouch's UI consists of the escape key, app space, Notification Badges, QuickStrip and Pinned Widgets.

Buttons

Every Button should have at least one function, optionally two. Avoid buttons with no functions.

A Tap should call the more immediate action displayed on the button, whereas holding should do a secondary action related to the tap action, usually opening/closing a group of more button, opening a UI window on the main display or reversing the tap action.

When a hold action is used, ensure to trigger the "Hold Haptic" Named Trigger as well. Wherever possible, add a corner fold to the button to indicate that it's a hold action.

An example is the "Add" button in onenote; a tap adds a new page, and a hold opens up a new group which allows the user to add various other folders, pages and groups.

Layout Design Guidelines

  • The Escape button should always be visible and remain at its position as the first button from the left.
  • The QuickStrip should always be visible at its rightmost position.
  • Notification badges should always appear immediately before the QuickStrip.
  • The last button of your layout should have a 10px Space After Button to ensure that notification badges have even spacing.

In the App Space:

  • The most frequently used buttons should be aligned to the left of the "App Space"
  • Other options may stay in the Scrollable Center, with most to least used buttons ordered left to right respectively.
  • Consider Stick to left for particularly important buttons that should always be accessible and shouldn't move out of the way.
  • Buttons Stuck to right should, in most cases, control the general app and not its immediate content. e.g. Volume control in iTunes (as opposed to media playback control), or switching the app to a different mode.

For Extension-style Layouts:

Extension style layouts focus on the App's native Touch Bar.

  • Because the BTT button is on the right, these layouts should be predominantly aligned to the right.
  • Include a circled X button as the first leftmost button, which Toggles BTT Touchbar
  • Include the AQT ">" button that toggles the BTT TouchBar, attached to the Quick Strip.
  • Avoid using a scrollable container. If this is used, it should only be for a list menu that's too large to fit, it should also 'feel' right-aligned.
  • No buttons should be aligned to the left except for an X button where a scrollable container is used.
  • Consider the same constraints as normal layouts.

Groups:

  • Groups must have a back > groupname button with the group name on it
  • Groups within groups must have stacked back buttons, > GROUP 1, > THIS GROUP, where each closes the labelled group. (e.g. the "GROUP 1" button will close all groups and return to level 0, whereas "THIS GROUP" will return to "GROUP 1".)
  • It is recommended that the internals of a group has a color scheme that matches the button that opened the group.

TouchBar Behaviour Settings:

  • For Full layouts, use Show BTT, Hide MacOS Control Strip
  • For Extension Layouts, use Hide BTT, Hide MacOS Control Strip if BTT is active

Style Guidelines:

Buttons

  • The default background colour is #3B3B3B. This differs from BTT's default background colour.
  • Buttons can be accented using colours with a HSB "B" value of around 60%. AQT uses apple's crayons as its color scheme.
  • Generally, text and icon colors should be full white.
  • Text Size should be 15pt.

Icon Guidelines

  • Icons should usually be 60px 60px, black and white, following Apple's TouchBar Icon Guidelines.

Information

  • Non-interactable text based "Information widgets" should generally have a black background with white text.
  • Colored text may be used, use a B value of 95-100% and consider lowering Saturation (S) to increase legibility (HSB)

Labels

  • Labels are text-only, actionless buttons that may describe a group of adjacent buttons. These should have a black background and a text colour of #7F7F7F.

Named Triggers

Globally available functions should be placed in the All Apps section. Triggers that can only be used within one app are created in the "Other" device of that app.

Since they are functions, the naming convention is lowercase, but spaces are allowed to discern which app or group is targeted and which command is to be executed. With simple and natural language, the trigger names are easier to remember and can therefore be used more quickly, for instance in the 'named trigger console' (fn + space) Examples:

  • play media
  • open spotify
  • open quicklaunch

Commenting and Collaboration

When possible use concise but descriptive names or describe the function of triggers in the notes. On buttons with hold actions, use the notes to describe what long holding will do.

When editing an existing widget: duplicate the widget and make one copy hidden. Name the hidden copy as "original". Edit the visible copy and add " --@yourname: code comments" for any code changes to the duplicate widget.

Clone this wiki locally