Update ui_guidelines
This commit is contained in:
parent
c3c5ab3473
commit
1d3098baa7
|
@ -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)
|
- [How to implement an application](doc/code/Apps.md)
|
||||||
- [Generate the fonts and symbols](src/displayapp/fonts/README.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)
|
- [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
|
### Build, flash and debug
|
||||||
|
|
||||||
|
|
|
@ -4,13 +4,10 @@
|
||||||
- Buttons should generally be at least 50px high
|
- Buttons should generally be at least 50px high
|
||||||
- Buttons should generally be on the bottom edge
|
- Buttons should generally be on the bottom edge
|
||||||
- Make interactable objects **big**
|
- 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
|
- 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
|
- 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 takes at least 20px + padding
|
||||||
- Top bar right icons move 8px to the left when using a page indicator
|
- 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)
|
![example layouts](./ui/example.png)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user