1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
/****************************************************************************
**
** Copyright (C) 2018 Pelagicore AG
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Neptune 3 IVI UI.
**
** $QT_BEGIN_LICENSE:FDL-QTAS$
** Commercial License Usage
** Licensees holding valid commercial Qt Automotive Suite licenses may use
** this file in accordance with the commercial license agreement provided
** with the Software or, alternatively, in accordance with the terms
** contained in a written agreement between you and The Qt Company. For
** licensing terms and conditions see https://www.qt.io/terms-conditions.
** For further information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page neptune3ui-application-anatomy.html
\title Neptune 3 UI - Application Anatomy
\brief Anatomy of the applications in Center Console Display
In Neptune 3, an application can have both the fullscreen state
and the (optional) widget state. The states should not be designed
separately since they need to be connected, if possible, with smooth
transitions.
\section1 Fullscreen
\image center-stack-maximized-app.jpg
When applications are in fullscreen they typically have two main
content areas: Top and Bottom. The Top area is for the most important
information, or information that is graphically heavy. Try having the
same content and layout in the Top area in fullscreen as in the widget
(see more details in the widget section below). The Bottom area is for
more detailed information. In most cases the content is divided into
different pages, navigated between with the ToolBar to the left.
Make the bottom content spacious and do not mix different kinds of content.
If there are different kinds of content please put it into different
sections with sufficient blank space in between.
\section2 Breaking the rules
Not every application can look the same. The most extreme cases are
probably Navigation and Camera apps since they have heavily graphical
content. These applications need to look different from the default,
but should give the same impression.
\image center-stack-nav.jpg
Some applications might not need to have the ToolBar, or not have the Top area.
Use a layout that fits the content of your application.
\section1 Widget
The widgets on the Home view can be resized into three sizes: 1Row,
2Rows and 3Rows. Try to minimize the content of the widgets; with up
to five widgets on the Home view at the same time it otherwise tend to
look cluttered. Make larger widgets more rich on features, or in other
ways adding extra value for the user.
\image widget-1-row.jpg
\image widget-2-rows.jpg
\image widget-3-rows.jpg
The widget content generally designed with the transitions between the three
states and between widget and fullscreen. The Top in fullscreen can oftentimes
look exactly like one of the widget sizes (1Row or 2Rows). The easiest way to
prepare for nice transitions when going between the sizes is to think of blocks
ordered in a column, e.g. turn on or off block when the widget height changes.
To make the widgets look good together there are some recommended alignment
lines. There are sometimes reasons to not follow these lines, like in the
example of the circular contact image for Phone which get more in balance
with the rectangular album art in the Music widget when it is slightly
larger than the default size.
\image music-widget-1-row.jpg
\image music-widget-3-rows.jpg
*/
|
