mirror of
https://github.com/google/pebble.git
synced 2025-03-19 18:41:21 +00:00
57 lines
2.4 KiB
Markdown
57 lines
2.4 KiB
Markdown
|
---
|
||
|
|
# Copyright 2025 Google LLC
|
||
|
|
#
|
||
|
|
# Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
# you may not use this file except in compliance with the License.
|
||
|
|
# You may obtain a copy of the License at
|
||
|
|
#
|
||
|
|
# http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
#
|
||
|
|
# Unless required by applicable law or agreed to in writing, software
|
||
|
|
# distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
# See the License for the specific language governing permissions and
|
||
|
|
# limitations under the License.
|
||
|
|
|
||
|
|
title: Design and Interaction
|
||
|
|
description: |
|
||
|
|
How to design apps to maximise engagement, satisfaction, efficiency and
|
||
|
|
overall user experience.
|
||
|
|
guide_group: design-and-interaction
|
||
|
|
menu: false
|
||
|
|
permalink: /guides/design-and-interaction/
|
||
|
|
generate_toc: false
|
||
|
|
hide_comments: true
|
||
|
|
---
|
||
|
|
|
||
|
|
Interaction guides are intended to help developers design their
|
||
|
|
apps to maximize user experience through effective, consistent visual design and
|
||
|
|
user interactions on the Pebble platform. Readers can be non-programmers and
|
||
|
|
programmers alike: All material is explained conceptually and no code must be
|
||
|
|
understood. For code examples, see
|
||
|
|
{% guide_link design-and-interaction/implementation %}.
|
||
|
|
|
||
|
|
By designing apps using a commonly understood and easy to understand visual
|
||
|
|
language users can get the best experience with the minimum amount of effort
|
||
|
|
expended - learning how they work, how to operate them or what other behavior
|
||
|
|
is required. This can help boost how efficiently any given app is used as well
|
||
|
|
as help reinforce the underlying patterns for similar apps. For example, the
|
||
|
|
layout design should make it immediately obvious which part of the UI contains
|
||
|
|
the vital information the user should glance at first.
|
||
|
|
|
||
|
|
In addition to consistent visual design, implementing a common interaction
|
||
|
|
pattern helps an app respond to users as they would expect. This allows them to
|
||
|
|
correctly predict how an app will respond to their input without having to
|
||
|
|
experiment to find out.
|
||
|
|
|
||
|
|
To get a feel for how to approach good UI design for smaller devices, read other
|
||
|
|
examples of developer design guidelines such as Google's
|
||
|
|
[Material Design](http://www.google.com/design/spec/material-design/introduction.html)
|
||
|
|
page or Apple's
|
||
|
|
[iOS Human Interface Guidelines](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/).
|
||
|
|
|
||
|
|
|
||
|
|
## Contents
|
||
|
|
|
||
|
|
{% include guides/contents-group.md group=page.group_data %}
|