Skip to content

Commit 1d3098b

Browse files
Riksu9000JF002
authored andcommitted
Update ui_guidelines
1 parent c3c5ab3 commit 1d3098b

2 files changed

Lines changed: 2 additions & 4 deletions

File tree

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ InfiniTime is an open-source firmware for the [Pinetime smartwatch](https://www.
2121
- [How to implement an application](doc/code/Apps.md)
2222
- [Generate the fonts and symbols](src/displayapp/fonts/README.md)
2323
- [Creating a stopwatch in Pinetime(article)](https://pankajraghav.com/2021/04/03/PINETIME-STOPCLOCK.html)
24+
- [Tips on designing an app UI](doc/ui_guidelines.md)
2425

2526
### Build, flash and debug
2627

doc/ui_guidelines.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,10 @@
44
- Buttons should generally be at least 50px high
55
- Buttons should generally be on the bottom edge
66
- Make interactable objects **big**
7-
- Recommendations for inner padding, aka distance between buttons:
8-
- When aligning 4 objects: 4px, e.g. Settings
9-
- When aligning 3 objects: 6px, e.g. App list
10-
- When aligning 2 objects: 10px, e.g. Quick settings
117
- When using a page indicator, leave 8px for it on the right side
128
- It is acceptable to leave 8px on the left side as well to center the content
139
- Top bar takes at least 20px + padding
1410
- Top bar right icons move 8px to the left when using a page indicator
11+
- A black background helps to hide the screen border, allowing the UI to look less cramped when utilizing the entire display area.
1512

1613
![example layouts](./ui/example.png)

0 commit comments

Comments
 (0)