From 1d3098baa772176476febb05531a074c0d133b56 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sat, 6 Nov 2021 15:04:37 +0200 Subject: [PATCH] Update ui_guidelines --- README.md | 1 + doc/ui_guidelines.md | 5 +---- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 22c91b5c..ecda014a 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ InfiniTime is an open-source firmware for the [Pinetime smartwatch](https://www. - [How to implement an application](doc/code/Apps.md) - [Generate the fonts and symbols](src/displayapp/fonts/README.md) - [Creating a stopwatch in Pinetime(article)](https://pankajraghav.com/2021/04/03/PINETIME-STOPCLOCK.html) + - [Tips on designing an app UI](doc/ui_guidelines.md) ### Build, flash and debug diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md index c267b79b..0cbd39f5 100644 --- a/doc/ui_guidelines.md +++ b/doc/ui_guidelines.md @@ -4,13 +4,10 @@ - Buttons should generally be at least 50px high - Buttons should generally be on the bottom edge - Make interactable objects **big** -- Recommendations for inner padding, aka distance between buttons: - - When aligning 4 objects: 4px, e.g. Settings - - When aligning 3 objects: 6px, e.g. App list - - When aligning 2 objects: 10px, e.g. Quick settings - When using a page indicator, leave 8px for it on the right side - It is acceptable to leave 8px on the left side as well to center the content - Top bar takes at least 20px + padding - Top bar right icons move 8px to the left when using a page indicator +- A black background helps to hide the screen border, allowing the UI to look less cramped when utilizing the entire display area. ![example layouts](./ui/example.png)