Download - Edge UI Design Guideline v1.0
-
8/18/2019 Edge UI Design Guideline v1.0
1/16
[Samsung Galaxy edge] UI Design Guideline
1
Samsung Galaxy edge UXUI Design Guideline
Samsung Electronics
-
8/18/2019 Edge UI Design Guideline v1.0
2/16
[Samsung Galaxy edge] UI Design Guideline
2
Table of Contents
1. EDGE SCREEN PANELS 3
1.1. BASIC INTERACTIONS 3
1.2. DESIGN PRINCIPLE 4
1.3. UI OVERVIEW 5
1.4. VISUAL STYLES 6
2. EDGE SCREEN FEEDS 14
2.1. BASIC INTERACTIONS 14
2.2. DESIGN PRINCIPLE 14
2.3. UI OVERVIEW 15
2.4. VISUAL STYLES 16
-
8/18/2019 Edge UI Design Guideline v1.0
3/16
[Samsung Galaxy edge] UI Design Guideline
3
1. Edge screen panels
1-1. Basic interactions
Users can open panels through the handle while the screen is turned on. The panels are looped by the
order which the users have set. When the users tap the contents in the panel, the connected link is
shown. To close the panel, users will click outside of the panel area.
Users can edit each panel through the Edge panel settings. To edit panels, Edit icons are provided for
each panel. The Edit icons show the corresponding setting screen of the panels.
Interaction
Settings
Home / back
Go to the connected
Go to the corresponding contents link already set
Settings > Edge screen > Edge panels >
-
8/18/2019 Edge UI Design Guideline v1.0
4/16
[Samsung Galaxy edge] UI Design Guideline
4
1-2. Design principles
The Edge UX allows users to quickly access frequently used applications and information through
panels.
Panels can always be called regardless of the application currently opened. Panels can be used
independently. The items are displayed in the order that the users have set.
Quick access type
This is a Bridge. It is the access path of frequently used tasks or applications. It allows users to access
tasks from any screen.
Quick view type
This is an Overlay widget. It allows users to access and check information at any time without having to
open applications.
Quick control type
This is a Quick controller. It allows users to control tasks without having to open applications.
Quick access Quick view Quick control
Frequentlyused contacts
Interestedsports
Interestednews
Ex)
Frequentlyusedapplication
Ex)
Devicecondition
Handy tool
Ex)
-
8/18/2019 Edge UI Design Guideline v1.0
5/16
[Samsung Galaxy edge] UI Design Guideline
5
1-3. UI overview
Panels provide contents which users have to check concisely and clearly. When a panel is opened,the previous screen dims and the user cannot interact with it.
1. Panel title
The title of the currently shown panel is displayed. It can display text or an image.
If the panel is connected to an application, the “>” symbol is displayed next to the title. By tapping “>”,
the corresponding application is opened.
2. Contents area
Contents can be arranged freely in the 138 dp according to content type. By default, the orientation of
text and images is portrait. When the contents exceed the content screen, users can scroll up and down.
To finish the task immediately through panels, additional depth of panel is not recommended.
3. Panel contents link
Pre-defined actions are provided.
4. Help area
During the first launch of Edge, the Help section is displayed. This provides guidelines on the basic
principles and setup instructions of the panels.
The help area does not provide interaction with the users.
The help text show guidelines on how the user can use the application and it will be hidden when
finished. The help text is defined on each application.
UI overview
-
8/18/2019 Edge UI Design Guideline v1.0
6/16
[Samsung Galaxy edge] UI Design Guideline
6
1-4. VISUAL STYLES
Edge panel can be designed freely in a defined area, but we recommend the following three types.
App title –help text
Screen Resolution : 1440x2560
Density : 640dpi
Usable Res : sw360dp - xxxhdpi
-
8/18/2019 Edge UI Design Guideline v1.0
7/16
[Samsung Galaxy edge] UI Design Guideline
7
App title –updated time & logo
Icon type layout
-
8/18/2019 Edge UI Design Guideline v1.0
8/16
[Samsung Galaxy edge] UI Design Guideline
8
Card type layout
Full panel type
-
8/18/2019 Edge UI Design Guideline v1.0
9/16
[Samsung Galaxy edge] UI Design Guideline
9
Left side
-
8/18/2019 Edge UI Design Guideline v1.0
10/16
[Samsung Galaxy edge] UI Design Guideline
10
Layout details Background : If necessary, amendments possible. Defined in app
-
8/18/2019 Edge UI Design Guideline v1.0
11/16
[Samsung Galaxy edge] UI Design Guideline
11
Font style
Screen Resolution : 1440x2560
Density : 560dpi
Usable Res : sw411dp - xxxhdpi
-
8/18/2019 Edge UI Design Guideline v1.0
12/16
[Samsung Galaxy edge] UI Design Guideline
12
Layout (56odpi)
-
8/18/2019 Edge UI Design Guideline v1.0
13/16
[Samsung Galaxy edge] UI Design Guideline
13
Panel preview for settings
-
8/18/2019 Edge UI Design Guideline v1.0
14/16
[Samsung Galaxy edge] UI Design Guideline
14
2. Edge screen feeds
2-1. Basic interactions
If users swipe upwards and downwards on the Edge screen when the screen is off, the feed is displayed.
The feeds are looped by the order which the users have set. When the users tap the contents in the
feed, the connected link is shown. The feed is displayed only within the timeout settings (Edge feed
timeout). If there is no interaction on the feed, the feed disappears after the timeout.
Interaction
2-2. Design principle
Feeds are displayed as a shortened form of the information which is needed to be checked frequently
and quickly. Feeds allow users to check information immediately without turning on the screen.
Information displayed is updated consistently to help minimize extra controls.
Go to the corresponding contents link already set
Go to the connected a .
SNS feeds
Interested news
Interested S orts
Interested Stocks
Device notifications
-
8/18/2019 Edge UI Design Guideline v1.0
15/16
[Samsung Galaxy edge] UI Design Guideline
15
Glance view type
Glance view allows users to check useful information at any time. The latest information can be checked
without launching applications. It is composed of concise information and users are able to see them in a
glance. If there are a lot of information, users can scroll through them. The latest information is on top.
Information (Possible to provide): Information which is updated continuously.
(ex. News, SNS feed, Weather, Notification, etc)
Information (Impossible to provide): Information which is static or cause additional action.
(ex. Clock, User contents, Music control, etc)
2-3. UI overview
Feeds are displayed as a shortened form of information which needs to be checked frequently and
quickly. Panels can be displayed when the screen is off. The information is only displayed on the Edge
screen area.
1.Feed title
The feed title is marked with an icon. Upon tapping the icon, the contents settings view or the
relevant application will be shown.
2. Contents area
It is recommended to display contents and information which can be checked quickly. When
there are plenty of content, they are provided through a stream. It is recommended to provide
a separate navigation button. When you hold and move the contents area from left to right, the
contents are refreshed. While they are refreshed, the icon area temporarily changes to the
refresh icon. Black GUI is recommended because the information stream works only when the
screen is turned off.
UI overview
-
8/18/2019 Edge UI Design Guideline v1.0
16/16
[Samsung Galaxy edge] UI Design Guideline
16
2-4. Visual styles