One UI Design Guidelines

One UI

Design

Guidelines

Mobile UX Center

Mobile Communications Business Samsung Electronics

Index

Overview

Architecture Visual design

Component

Motion

& Interaction

Introduction

1. Structure

2. Theme

3. Responsive UI

4. Margins and keylines

5. Screen optimization

1. Icons

2. Color

3. Typography

4. Thumbnail radius

1. Intuitive

2. Seamless

3. Tangible

1. App bar

2. Expandable app bar

3. Bottom bar

4. Bottom navigation

5. Buttons

6. Slider

7. Dialogs

8. List

9. Search

10. Progress indicator

11. First time use

12. Label toast

13. Action toast

14. Navigation bar

15. Edit mode

16. Selection control

Auditory design

Accessibility

1. Principle

2. Sound feedback

1. Principle

2. Vision

3. Hearing

4. Interaction and dexterity

5. Checklist

Overview

One UI Design Guidelines 4OVERVIEW

Overview

Introduction

You can apply One UI’s user experience to your app more easily, as well as optimize your app for Samsung mobile

devices, by following One UI’s design guidelines.

With One UI applied to your app, you can offer a user experience that is consistent with other apps installed on a

device, allowing its user to adapt to new apps more naturally and easily.

One UI aims to ensure a consistent user experience within a single device and also a uniﬁed user experience

among different mobile devices. Even if the user’s new device runs on a different platform, they can be provided

with the user experience optimized for the device, without having to learn how to use the new platform.

Architecture

One UI Design Guidelines 6ARCHITECTURE

Lock screen

Application screen

Home screen

Notiﬁcation

App bar

Dialog

One UI Design Guidelines deﬁnes matters relating to One UI’s distinctive usability and user experience.

Design principles have been applied to One UI to help users control their devices more intuitively and

concentrate on the important content more easily.

For the structure, hierarchy and interaction of the main screens and components comply with the Android

design principles.

Structure of Android screens and main components

01. Structure

One UI Design Guidelines 7ARCHITECTURE

Divide the screen

into the Viewing

area and Interaction

area

One UI has been designed to help the user easily control the on-screen components on

their handheld device. Based on the height that a person’s ﬁnger can most easily reach

on the screen, the area above this point is deﬁned as the Viewing area, and the area

below it is deﬁned as the Interaction area.

[Viewing area]

Place content that doesn’t

require any user interactions,

such as a title.

[Interaction area]

Place frequently used components,

such as function buttons and navigation

buttons (e.g., tabs), and arrange dialogs

that require user actions at the bottom of

the screen.

01. Structure

One UI Design Guidelines 8ARCHITECTURE

Emphasize content

using focus blocks

01. Structure

One UI supports a card-type container called a ‘focus block’ which is used to draw the

user’s eyes to the content that needs to be emphasized on the screen.

A focus block’s big rounded corners can capture the user’s attention visually with its shape.

You can make your content stand out even more by creating a high contrast between the

focus block’s background color and blank space behind them.

You can include different content types, such as text, images, or videos, in focus blocks. You

can place a single content item or a combination of content items in a single focus block.

Focus blocks can be applied to the Android components that have content in them, such as

cards, lists including images and texts.

One UI Design Guidelines 9ARCHITECTURE

02. Theme

One UI provides default themes and a dark mode.

It’s recommended that you provide a dark mode so that the user can use their smartphone comfortably, even in

a dark environment.

Default themes Using the default themes, you can apply a different color to the background according

to the app’s characteristics.

A lighter background can deliver a more comfortable visual experience because it

reduces the contrast of the screen in general. It also helps improve the legibility of

on-screen text.

Light theme

One UI Design Guidelines 10ARCHITECTURE

Default themes A darker background can make a content item or dialog inside a focus block visually

stand out more.

In particular, if you use a black background on the screen when the device’s bezel is also

black, the boundary between the bezel and screen becomes merged, making the screen

appear more visually expanded. This also reduces visual interference that the boundary

between the bezel and screen may create.

Dark theme

02. Theme

One UI Design Guidelines 11ARCHITECTURE

Dark mode Dark mode is a theme (mode) that enables the screen to turn darker to help reduce

glare and eye strain at night or in a dark environment.

Place dark colored focus blocks, dialogs, content and control components to keep the

entire screen darker.

One UI recommends that all apps allow the user to switch to Dark mode at the desired

or set time.

Dark mode

02. Theme

One UI Design Guidelines 12ARCHITECTURE

Phone Tablet DeX

Phone

Foldable phone

Tablet DeX

03. Responsive UI

Home screen

Contents screen

One UI supports a diverse range of devices, including smartphones, tablets, and foldable phones, different

screen sizes, as well as several aspect ratios. It also supports Samsung DeX.

Different components on the screen and the screen layout should be adaptable to different screen sizes,

orientations, resolutions, and aspect ratios.

It needs to be designed to display a large number of contents for tablets or foldable phone with a larger screen.

Also the multi-layering structure and various window sizes need to be considered.

One UI Design Guidelines 13ARCHITECTURE

04. Margins and keylines

One UI deﬁnes margins and keylines by considering devices that have screens with rounded corners or edge

displays. One UI recommends to allow at minimum 24dp margins on each side and keep placing components to

display information within safe area if touch input is required.

Deﬁnition Safe area is being provided in order to prevent undesired input from happening by

holding a device. In particular, in a layout where the user is required to press sparsely

placed buttons, such as a dialer, allow sufﬁcient margins at the sides of the screen.

For edge displays, place on-screen elements before the start of the curved surface to

prevent the user’s ﬁnger from slipping off when touching an on-screen element.

For screens with rounded corners, place on-screen elements before the start of the

curve so that the on-screen elements are not obscured.

24dp 24dp 24dp 24dp

One UI Design Guidelines 14ARCHITECTURE

05. Screen optimization

The sizes of various components can be optimized based on user’s preference.

Modifying font sizes or magniﬁcations are feasible for better legibility as well as screen resolutions and Home

screen grid.

Font size Screen zoon in/out Screen resolution Home screen grid

Components

One UI Design Guidelines 16COMPONENTS

Title

Action buttons

A title can be an app title, page title, or page ﬁlter.

If the entire title cannot be displayed due to the length, action buttons from the

far-right can be placed under more options buttons as a dropdown menu.

The displayed action buttons may be shown or hidden, depending on the screen settings

(e.g., multi-language/font styles). However, the action buttons should still be displayed

in accordance with the rules above.

It’s recommended that you use icons for action buttons. However, you may use text

buttons for menus that you ﬁnd difﬁcult to express using icons.

It’s also recommended that you display three or fewer action buttons, including the title.

If there are no actions available on the current screen, then don’t display any buttons.

Back

Title

Action button

More option

An app bar is used to provide information about the current screen and action buttons.

41 2

01. App bar

Icons

Text button

One UI Design Guidelines 17COMPONENTS

More options Each menu shown after tapping the More options button is an option that can affect the

app that is currently running or the component chosen on the screen. For an option that

requires the user to turn on/off or toggle, a checkbox can be provided.

The rest of the menus not provided as ﬂoating action buttons or action buttons are

being included in the more options button.

Spinner In the default state, a spinner displays the current chosen value. When the user taps

the spinner, a dropdown menu opens, showing all available values. When the user taps

outside the dropdown menu, the spinner closes.

01. App bar

One UI Design Guidelines 18COMPONENTS

02. Expandable app bar

An expandable app bar can be in an expanded state or collapsed state; there is no state in-between these two.

If the user scrolls up while the app bar is expanded, then it collapses; if the user scrolls down while the app bar is

collapsed, then it expands. If you want to show the content in full screen, you can hide the app bar.

Phone

Tablet The titles displayed in the expanded state and collapsed state don’t need to match.

When the app bar is expanded, useful information about the relevant screen can be

displayed in a larger area.

One UI Design Guidelines 19COMPONENTS

Smartphone users can’t use an expandable app bar while in the landscape mode of the full-screen view.

In case of a multi-window view, foldable phones, and Samsung DeX, the expandable app bar is supported for

both landscape and portrait mode when the height of the screen is above 580 dp.

02. Expandable app bar

Full screen

Expandable app bar

Portrait PortraitLandscape Lanadscape

Applicable ApplicableNot applicable Applicable

Phone Tablet

One UI Design Guidelines 20COMPONENTS

02. Expandable app bar

The user can resize the app bar area by scrolling it up or down, whether its default state

is expanded or collapsed.

Support an expandable app bar on the screen that has a tab, search bar, and default

collapsed app bar.

[First depth screen (list/grid scrollable view)]

App bar with a search ﬁeld

Default collapsed app bar

When an expandable

app bar is supported

One UI Design Guidelines 21COMPONENTS

02. Expandable app bar

For the second depth and later depths, display a default collapsed app bar, but allow it

expandable. It should also be expandable in list/grid view, detail view, search view, and

multiselect view.

[Second and later depth screens]

Search view

Detail view

When an expandable

app bar is supported

One UI Design Guidelines 22COMPONENTS

02. Expandable app bar

When an expandable

app bar is not supported

An expandable app bar is not supported in the following cases:

When a screen is created by using

keyboard (But, it is expandable

if inputting simple texts)

When the user’s content, such as an

image or video, might be cut off by the

expandable app bar

When a single screen needs to be completely ﬁlled with a

controller, etc.

When the screen contains additional component that need to

scroll up and down

One UI Design Guidelines 23COMPONENTS

02. Expandable app bar

Display an expandable app bar when the user enters the ﬁrst main screen.

For the second and later depth screens, display a collapsed app bar as default, and an

app bar can be expanded by scrolling down. However, where an expanded app bar is

deemed useful, an expanded app bar can be treated as default on the second and later

depth screens.

Upon opening an

app

Return to the

previous value

Back Back

One UI Design Guidelines 24COMPONENTS

02. Expandable app bar

When the user lifts their ﬁnger in the mid-point while scrolling up and down, the display

of the screen in expanded view or collapsed view is determined depending on whether

the threshold was exceeded at the time the ﬁnger was lifted, and then the screen snaps

accordingly.

Snap

When the ﬁnger

was lifted in the mid-point,

was the threshold

exceeded?

When the ﬁnger

was lifted in the mid-point,

was the threshold

exceeded?

One UI Design Guidelines 25COMPONENTS

02. Expandable app bar

Scroll stop

When the user scrolls down in the middle of a list on the screen in list/grid view, etc.,

and then moves to the top of the list, whether or not to stop the scrolling is determined

based on whether the relevant screen’s default view is expanded or collapsed. The

position at which the scrolling stops in the middle of the list is determined based on

what the user sees upon entering the relevant screen.

When the screen’s default view is collapsed, if the user scrolls in the middle of a list,

then the scrolling stops at the top of the list.

[Case 1]

If the app bar is collapsed as a

user enters the screen

Scroll in the middle of the list Scrolling stops at the top of

the list

Scrolling down from the top of

the list displays it in expanded

view

One UI Design Guidelines 26COMPONENTS

[Case 2]

02. Expandable app bar

Scroll stop

When the screen’s default view is expanded, if the user scrolls in the middle of a list,

then the scrolling doesn’t stop and the user is moved to the screen that shows an ex-

pandable app bar instead.

If the app bar can be

expandable as a user enters

the screen

Scroll in the middle of the list Switch to expanded view

immediately without stopping

the scrolling

One UI Design Guidelines 27COMPONENTS

02. Expandable app bar

Search bar

If the use of a search bar is essential for the app, then the search bar can be displayed

on the screen. The search bar should disappear while the user is scrolling the list, and

then reappear afterward.

As the list appears, the search

bar becomes hidden.

One UI Design Guidelines 28COMPONENTS

02. Expandable app bar

Text

(align:center)

Text

(align:center)

39.67%

of Screen Height

18.78%

of Screen Height

Phone

Tablet

One UI Design Guidelines 29COMPONENTS

03. Bottom bar

Utilize bottom bar for actions buttons with higher priority.

A maximum of ﬁve action buttons in the bottom bar can be provided, using a combination of icons and text.

These buttons can be shown or hidden when the user scrolls up and down, depending on the amount of

information displayed in the body text area.

Don’t provide a more options button in the bottom bar. Do not allow the buttons to scroll horizontally. Don’t

place the bar above the keyboard, except for components that are relevant to keyboard input (e.g., Cancel, Done,

Save, or Next).

Phone

Tablet

One UI Design Guidelines 30COMPONENTS

03. Bottom bar

Action buttons in the app bar

on the action screen & action

buttons in detail view

List/Grid view – For screens

where browsing is the main

purpose

The bottom toolbar, which is designed for action buttons, and the bottom tabs, which are used for navigation, are

deﬁned and function differently.

Place higher priority action buttons at the bottom.

Place action buttons at the top.

Bottom toolbar

Tabs at the bottom

Toolbar at the top

One UI Design Guidelines 31COMPONENTS

04. Bottom navigation

Use a bottom navigation bar to change the screen displayed at the top for each tab

through the main tab. Each tab should have its own view. Tabs should be displayed at all

times, even when the user scrolls up and down a list. It’s recommended that you provide

four or fewer text-type tabs (maximum of ﬁve), and name each screen title the same as

the corresponding bottom tab.

Don’t provide a more options button for a tab. The user can’t move between tabs by

swiping the body area horizontally. Don’t place tabs above the keyboard.

Main tab

Omit the app title on the screen where the main tab is provided. However, when the

main tab represents the app, display the main tab’s name as the title at the top.

[Phone – Portrait view]

One UI Design Guidelines 32COMPONENTS

04. Bottom navigation

Specify the maximum distance between the tabs so that the distance between them

doesn’t exceed the set value.

[Tablet – Landscape & split view]

Margin Margin

w=1 w=1

Main tab

One UI Design Guidelines 33COMPONENTS

04. Bottom navigation

Subtab Use a subtab to show the categories displayed on the current screen separately.

Provide text-type subtabs at the top. Subtabs can be ﬁxed, but they can also be

scrollable if there are ﬁve or more of them.

The user can move between subtabs by swiping the text body area horizontally.

[Phone]

One UI Design Guidelines 34COMPONENTS

04. Bottom navigation

Tab string All navigation tabs at the bottom should be displayed on a single screen when the

default font size is used. Exceptionally, scroll can be applied.

1. If a user scrolls horizontally within a tab, when the default font size is applied.

2. It’s recommended that you use ﬁxed-type tabs with default font size, even

when the strings are translated into different languages.

3. In order not to allow each tab scrollable, make sure that each of translated or

abbreviated tab string doesn’t exceed N characters. (Even if a bottom tab string is

abbreviated, the complete string should be used for its app bar title. Display the

complete string in landscape view and on tablets.)

4. Exceptionally the tab is allowed to scroll when a larger font size is applied and

unavoidably exceeds the tab area.

[Phone]

Portrait view Landscape view

One UI Design Guidelines 35COMPONENTS

05. Buttons

Selectively use ﬂat buttons or contained buttons, depending on the situation. Don’t use both a ﬂat button and

contained button together on a single screen.

Buttons

Use a ﬂat button to avoid making an unnecessary layer in a toolbar, dialog, etc.

Use a contained button to emphasize features that the user might miss on a complex

screen. In most cases, contained buttons are applied to a ﬂat layout by adding colors.

Use a contained button when it is difﬁcult to distinguish the button from the other

texts and images in the body.

[Flat button]

[Contained button]

One UI Design Guidelines 36COMPONENTS

06. Slider

The user can change a setting within the speciﬁed value range using a slider. A slider can be used to change the

volume, screen brightness, etc. When the user changes a value, provide instant feedback.

Setting slider (Default)

Volume popup & Brightness_on Quick panel main page (Optional)

[Adjust sliders in the volume popup]

Normal

Click

Focus Disabled

One UI Design Guidelines 37COMPONENTS

07. Dialog

Provide a dialog pop-up, which requires a user action, at the bottom. If any action is not allowed

(e.g. when ‘Loading...’ process gets displayed and any other action such as cancel is not allowed), then place the

dialog pop-up in the middle of the screen. Display a dropdown menu on the spot where it is being touched.

If a user deletes information that is considered very low in importance, then remove it immediately without

displaying a conﬁrmation pop-up (e.g., If there is no loss in content or it can be easily recreated (restored)).

When the user launches a feature, don’t provide a pop-up that shows a simple description about the feature or

feedback (e.g., a pop-up conﬁrming that the user has read all messages).

Depending on the importance of the pop-up’s content, decide whether you should provide it only once at the

beginning or always.

An important pop-up should be provided at all times. Avoid using pop-ups that are displayed only once at the

beginning (except for legal information).

Title + description + button

One UI Design Guidelines 38COMPONENTS

07. Dialog

Chooser activity

Date/Time picker

One UI Design Guidelines 39COMPONENTS

07. Dialog

Contextual menu

Color picker

Provide a contextual menu pop-up for related options when the user taps and holds an

item in list/grid view. It’s recommended that you provide it as a dropdown menu without

a title.

Provide two types of color pickers. Use a color bar-type picker to allow the user to

choose a color while looking at the image they are currently working on. The user should

also be able to choose a color through an advanced color picker in case they want a

wider range of colors.

One UI Design Guidelines 40COMPONENTS

Phone

Tablet

07. Dialog

Min width 100%

Min width 60%

Min width 37.5%

One UI Design Guidelines 41COMPONENTS

08. List

Use a list to show multiple, vertically juxtaposed items as a single continuous component.

Phone

Tablet

w 75%w 90%

One UI Design Guidelines 42COMPONENTS

08. List

Title

Subheader

The title of the body within a list must be no longer than a line. There is no maximum

length limit for the secondary text.

You may provide a subheader for the grouped items in a list, if needed.

Title

Secondary text

One UI Design Guidelines 43COMPONENTS

08. List

Counter For a list that includes content like emails or messages, provide a counter area that

displays the total number of lists at the bottom.

Displaying 3 contacts

One UI Design Guidelines 44COMPONENTS

09. Search

To help users ﬁnd the content they want quickly from a large amount of information, provide a search feature.

It shows suggestions based on the most recently typed search terms or frequently used conditions prior to

inputting a search word. Also, it ensures a satisﬁed search experience by providing an auto-complete feature.

Reminder - Search

One UI Design Guidelines 45COMPONENTS

10. Progress indicator

Use a progress indicator to show the progression of a speciﬁc action.

Progress circle -

Wi-Fi

Progress bar -

Emails

When the progress status and action completion time are known, use a progress bar

instead. It’s recommended that you provide a progress bar in an isolated area, such as

an app bar, rather than covering the whole screen with it, so that it doesn’t affect the

current task.

Use a progress circle to let the user know that an action can’t be executed immediately

and it will take a certain amount of time. However, it’s recommended that you use it only

when the action completion time is not known.

One UI Design Guidelines 46COMPONENTS

Progress circle -

Screen

When there is a landing page for the user's action, go to the page and show the basic

elements ﬁrst, such as app bar and toolbar, and then appear the progress icon on the

content area which is updating.

Display the progress icon on the body or on the button which is just tapped to avoid disturbing the user ﬂow.

Covering the screen with a progress pop-up should be avoided.

10. Progress indicator

[Don't]

[Do]

Title

One UI Design Guidelines 47COMPONENTS

If the user’s action affects on the current screen or if the landing page cannot be speciﬁed according to the

condition, show Progressing icon on the button which is action is taken.

When it is difﬁcult to offer proogress circle on the body of the contents, show it on the button which is tapped.

Use the action button to show the progress status.Progress circle -

Button

10. Progress indicator

[Don't]

[Do]

One UI Design Guidelines 48COMPONENTS

You may provide a Welcome page, Loading page or No items page when a user opens an app or uses its

features for the ﬁrst time.

First time use

[Loading] [No items][Welcome]

When you need to add a brief

description about an app or a legal

notice for users, utilize a

Welcome page.

When an app takes some time to

load, provide a Loading page.

When there are no items to display,

provide a shortcut button that the

user can use to add new items. You

may also show text that describes

the current state.

11. First time use

One UI Design Guidelines 49COMPONENTS

12. Label toast

You can provide additional information about an icon-type textless component through a label toast. Add a text

description above the relevant component so that the user can tap and hold it to view.

You can apply a label toast to a component that consists only of an icon without any text, a component that

consists of an icon and text, or only of text if its text size has to be ﬁxed because of the limitations of the screen.

(Apply it to all screens regardless of the system font.)

A label toast should disappear after a few seconds or when the user touches the screen. If the user selects an

area outside the label toast, then immediately execute the action designated for the relevant area.

Don’t apply a label toast to an indicator that doesn’t have special actions, a button that consists only of text, or a

button that consists of both an icon and text if a larger font size is applicable. If the app already uses the tap and

hold gesture for another action, then don’t display a label toast. The action speciﬁed by the app takes priority.

One UI Design Guidelines 50COMPONENTS

1 ﬁle downloaded. Open ﬁle

ﬁ

le downloaded

pen

ﬁ

Action toast provides an action button in the toast popup in order to immediately execute an action related to

the contents of the toast.

Snack bar will remain pop-up until press the button, but action toast will disappear after a set time like other

toasts.

13. Action toast

Text label Action (optional)

No action Touch area for action

Dismiss Dismiss1 ﬁle downloaded.

Copy complete.

Dismiss

[Don't]

Do not provide Action buttons to close pop-ups,

such as Dismiss, Close, Done, OK.

More than 2 actions cannot be provided.

[Do]

Copy complete. View album

1 ﬁle downloaded. Open ﬁle

One UI Design Guidelines 51COMPONENTS

Light theme

applied app

Dark theme

applied app

Light theme

applied app

Other unspeciﬁed or

default app

14. Navigation bar

For the navigation bar, choose one of the three styles according to the app design: Opaque, Translucent, or

Transparent. Transparent and translucent style navigation bars aren’t affected by the background settings or

themes. The navigation bar is always black when the aspect ratio is 16:9.

Background settings

Samsung theme-

applied app

Non-Samsung

theme-applied app

Dark theme

applied app

3rd party

Default Theme applied

One UI Design Guidelines 52COMPONENTS

15. Edit mode

Edit mode refers to a screen mode where the user is temporarily unable to save changes in real time or is

allowed to cancel changes. The changes are applied through a user trigger (e.g., Save or Done).

Phone

Phone - keyboard

Provide conﬁrmation buttons at the bottom. However, in landscape view, provide them

at the top to prevent them from taking up the body text area.

When a keyboard is available, place conﬁrmation buttons above the keyboard.

Portrait view Landscape view

One UI Design Guidelines 53COMPONENTS

15. Edit mode

Tablet

In portrait view, make the Create/Compose window ﬁt to the screen. In landscape view,

provide it as an overlay pop-up window, aligned to the center.

Tapping outside the overlay pop-up window should function the same way as the Back

key. It’s recommended that you use the same title, action buttons, etc. for both portrait

view and landscape view.

Try to make the actual displayed window and the Edit window as similar as possible.

In split view, provide the Edit window in edit view. When the user needs to create a new

item, make the Create window to ﬁt the screen or provide it as an overlay pop-up

window. Make any areas irrelevant to the Edit area appear darker (dimmed). Touching the

darker (dimmed) area should function the same way as the Back key.

[Create/Compose]

[Edit]

X X = width of portrait view

One UI Design Guidelines 54COMPONENTS

16. Selection control

The user can enter Select mode by selecting an option and then tapping the Edit button, or by long-pressing an

item.

Don’t display different

contextual menus before the

user enters Select mode.

Once they enter Select mode,

the app bar and toolbar also

switch to Select mode.

The action buttons change,

depending on the item(s)

chosen in Select mode.

The number of chosen items is

displayed as a number in the

app bar.

When the user selects the radio

button/checkbox in the app bar,

all items are selected.

One UI Design Guidelines 55COMPONENTS

16. Selection control

Timing for toolbar

display after

entering Select

mode

1. When the user enters Select mode by tapping the Edit button, display a toolbar as soon

as the user taps the Edit button.

2. When the user enters Select mode by long-pressing the screen, display a toolbar when

the user lifts their ﬁnger from the screen (after selecting an item).

- The content displayed at the bottom can be obstructed by a toolbar. Therefore,

visually inform the user that they have entered Select mode and that the relevant

item has been selected. Then, as soon as they lift their ﬁnger, display a toolbar.

- Hide the toolbar while the user selects items through continuous scrolling after they

enter Select mode and until they lift their ﬁnger. Provide it after they lift their ﬁnger

from the screen.

- Hide the toolbar for tabs in standard view.

Don’t display a toolbar if no items have been selected.

Finger released

One UI Design Guidelines 56COMPONENTS

16. Selection control

Interaction When the user tries to use the search bar in Select mode, the list layout should be

maintained and the lists shouldn’t be moved when the user enters Select mode.

Visual design

One UI Design Guidelines 58VISUAL DESIGN

Clear metaphors

Minimal and modular

shapes

Icons should be designed in a way that users can easily recognize them and also

understand their meanings and functions at a glance.

Use clear metaphors, which are familiar to users, for the icons in One UI.

The user may ﬁnd it difﬁcult to recognize icons at a glance if you use a complex shape or

too many mixed forms.

When designing icons for One UI, try to simplify their shapes and use the same shape

repeatedly to help the user recognize the icons more easily.

01. Icons

One UI Design Guidelines 59VISUAL DESIGN

Construction

Softness and

sharpness

Just like building houses of different shapes using the same set of building blocks, you

can use the same set of components to design your icons for better consistency.

As rounded corners are generally used in One UI, use rounded stroke terminals for icons

to make sure that they go well together.

The stroke corners, however, should remain sharp to add contrast to the rounded

corners and details.

01. Icons

One UI Design Guidelines 60VISUAL DESIGN

[App icon color]

Icon colors For icons, choose colors that can express the characteristics of the app, and apply a

palette of colors that go well together for better consistency.

The colors applied to the app should have a different tone to that applied to the icons.

01. Icons

Primary Color

Secondary Color

Primary Color

Secondary Color

Primary Color

Secondary Color

One UI Design Guidelines 61VISUAL DESIGN

App icons in One UI

01. Icons

One UI Design Guidelines 62VISUAL DESIGN

02. Color

Android’s material theme provides a categorized color palette system. By changing the color value of one

category, you can change all of the color value of on-screen element that belongs to the same category at once.

You can change the style of your app more easily when designing if you make good use of this color palette

system.

How to use One UI’s color palette

Color category

Primary

Primary dark

Color control activated

App icons, ﬂoating action buttons, input ﬁelds, focused items, etc.

App bar text, text buttons, dialog buttons, No items text, etc.

Checkboxes, radio buttons, switches, etc.

Primary

#0381fe

Primary dark

#0072de

Color control active

#3e91ff

White

#fafafa

Black

#000000

Light theme

Primary

#0381fe

Primary dark

#3e91ff

Color control active

#3e91ff

White

#fafafa

Black

#080808

Dark theme

One UI Design Guidelines 63VISUAL DESIGN

Warning, danger,

prohibition, warmth,

intensity, passion

Safety, peace, goodness,

nature, environment,

abundance

Efﬁciency, intelligence,

tranquility

02. Color

When you apply a color to an element, choose a color that goes well with the meaning of the element. Take into

account the color’s characteristics and what it stands for.

A color typically carries both positive and negative meanings. You should also consider that some colors may

have different meanings in different cultures.

ColorCategory

RED

GREEN

BLUE

One UI Design Guidelines 64VISUAL DESIGN

03. Typography

In One UI, capitalize the ﬁrst letter in every word and sentence used for components, such as a title,

subheader, text-only button, or tab, while leaving all other letters as lowercase.

App bar App bar

[Before] [After]

Dialog button Dialog button

Main tab Main tab

Contained button Contained button

One UI Design Guidelines 65VISUAL DESIGN

03. Typography

The default font used in One UI is Roboto. It’s recommended that you apply the following font sizes to

components.

Font style

Font size

Category

Smallest font size recommendation

for visibility

Font family of Roboto

One UI Design Guidelines 66VISUAL DESIGN

04. Thumbnail radius

When using a rounded-corner rectangle for a focus block or image thumbnail, it’s recommended that you use the

following thumbnail radius value according to the screen grid and target.

Radius=26dp Radius=26dp Radius=20dp Radius=12dp

One UI Design Guidelines 67VISUAL DESIGN

Motion

& Interaction

One UI Design Guidelines 68MOTION &INTERACTION

Motion and interaction should be designed to help users to understand the structures and functions of on-screen

elements and to guide users actions.

Motion and interaction help users to understand the structures and functions of on-screen elements, and guide

users what to do.

01. Intuitive

Recent apps

Lock screen

Current app

Home screen

One UI Design Guidelines 69MOTION &INTERACTION

When selecting a list, the screen for the list appears from bottom to top, and when returning to the previous

screen, the screen disappears from top to bottom.

[Example 1]

01. Intuitive

One UI Design Guidelines 70MOTION &INTERACTION

Due to each app is designed as spread out horizontally, the motion interaction works in a horizontal way when

switching to another app screen.

[Example 2]

01. Intuitive

One UI Design Guidelines 71MOTION &INTERACTION

Design the dialog to appears upward from the bottom of the screen so that the user’s ﬁnger can reach it easily.

When it moves downward, it disappears.

[Example 3]

01. Intuitive

One UI Design Guidelines 72MOTION &INTERACTION

02. Seamless

When a user opens an app, the app icon expands smoothly maintaining the corner radius of the icon and expands

to the app screen.

[Example 1]

It moves naturally reacted by the user's ﬁnger moving, while the screen transitions are smooth and connected.

One UI Design Guidelines 73MOTION &INTERACTION

The expandable app bar can be expanded or collapsed by the user’s ﬁnger moving on the screen, and the

information on it is varied by the state.

[Example 2]

02. Seamless

One UI Design Guidelines 74MOTION &INTERACTION

During a screen transition, the shared elements remain and react to the user’s touch interaction to increase

motion continuity.

[Example 3]

02. Seamless

One UI Design Guidelines 75MOTION &INTERACTION

When switching from app to app, the same image remains and switch the step seamlessly.

[Example 4]

02. Seamless

One UI Design Guidelines 76MOTION &INTERACTION

For experiences of ﬁne-tuned touch, The slider bar will be getting bigger when it touched for easy-controlling and

goes back to the original size when the ﬁnger is released.

[Example 1]

03. Tangible

it is more about delicate touch responding immediately to the user’s ﬁngertip, not a mechanical reaction.

ume

One UI Design Guidelines 77MOTION &INTERACTION

The gallery’s image sticks and follows a user’s ﬁngertip when a user drags an image. If a user drags an image

down, the images of the previous depth appear on the background and when drags it up, the additional informa-

tion is shown at the bottom.

[Example 2]

03. Tangible

12, May

20~25, March

One UI Design Guidelines 78MOTION &INTERACTION

Whena user movethe ﬁnger up on the Recents button, the app screenfollows the ﬁnger smoothly.

When releasing the ﬁnger after moving, the screen goes back to where it was before.

[Example 3]

03. Tangible

earc

One UI Design Guidelines 79VISUAL DESIGN

Auditory design

One UI Design Guidelines 80AUDITORY DESIGN

In UX design, sound is a means of delivering key information that can be used to assist visual information.

You can use sounds to support visual experiences when describing the system or app’s state or giving feedback

on user interactions. Sometimes, you may also use sounds to deliver information more effectively when there is

a lack of visual information available.

Sound design

principles

Sound feedback should be used consistently and appropriately.

Unexpected sounds may confuse the user, making them feel as though the system is

hard to understand or unpredictable.

Provide positive sound feedback when a goal is accomplished or a task is completed.

This will ensure a better user experience and also help the user better remember its

meaning.

It’s possible that the user may ﬁnd auditory stimuli rather annoying than visual stimuli.

Don’t use sounds excessively or force the user to hear the same sounds repeatedly, no

matter how pleasant the sounds are.

For example, when the user uploads a photo, it’s better to give sound feedback only

once after the photo is uploaded, rather than giving sound feedback repeatedly while

the photo is being uploaded.

1. Use sound consistently

2. Provide positive sound feedback

3. Avoid using repetitive sounds

01. Principle

One UI Design Guidelines 81AUDITORY DESIGN

Charger connection

02. Sound feedback

Feedback Sound feedback helps the user feel more certainty about how they interact with the

system or app, and also understand and predict outcomes.

For instance, when the user taps the Call button in the Phone app, you can notify the

user that the call has been successfully placed by providing a call connect tone, helping

the user get ready to talk to the person on the other end of the phone.

A rising melody helps the user clearly perceive that the call has been placed, while a

falling melody helps the user clearly perceive that it has ended.

[When placing or ending calls]

Call connect

Call disconnect

To make sure that the user clearly understands the volume level of the current ringtone,

use the tone appropriate for the volume level; a single tone is recommended.

[When adjusting the ringtone volume with the volume keys]

Volume control push

Once the user connects their device to a wired/wireless charger, play a rising melody to

let the user know that charging has begun.

[When wired/wireless charging begins]

One UI Design Guidelines 82AUDITORY DESIGN

Alert on call

[When switching from Mute mode to Sound mode]

Silent mode off

02. Sound feedback

Notiﬁcations and

warnings

Sounds can play an important role in drawing attention to something or drawing away

instantly.

In particular, when the user is concentrating on a task, you can deliver necessary

information with little cognitive interference and without breaking their concentration.

Use a tone repeated four times to make sure that the user hears the notiﬁcation without

interrupting the call. The volume level of the phone and that of the tone should be the

same.

[When receiving notiﬁcations during calls]

Branding and brand

identity

Use a creative and consistent sound tone to represent your brand image and brand

identity.

For One UI, use sound tones that can make the user feel like they’re traveling through

the galaxy. Apply mild and soft tones to express One UI system’s

characteristics and deliver a consistent auditory experience.

You need to make sure that the user realizes that the mode has switched to Sound.

Use a rising melody to indicate that Sound mode was just enabled.

One UI Design Guidelines 83AUDITORY DESIGN

Accessibility

One UI Design Guidelines 84ACCESSIBILITY

Balanced and equal design for all users

We aim to design an interface for all users, regardless of whether they have a

disability. At Samsung, we believe that users with disabilities shouldn’t experience

difﬁculty or discrimination when interacting with our products. We have set up

guidelines in consideration of users with varying degrees of disabilities. From as early

as the planning stage of each product, we try to ensure that it provides a holistic

experience for all users.

Empathetic and detailed design for all users

At Samsung, we’re always trying to simplify our products’ interface, employing a

variety of research methodologies so that our design approach aligns with the needs

and desires of our users. We strive to listen to our users and make a sincere effort to

understand them, including those with disabilities.

One UI aims to ensure a fair, equal, and considerate user experience for everyone, regardless of their gender or

physical condition. The accessibility guidelines in One UI Design Guide strive to meet the Web Content

Accessibility Guidelines (WCAG).

Consistent design experience for all products

Samsung products provide a variety of optional features for people with limited

mobility. Moreover, continuous research and development in accessibility design should

further ensure that all Samsung products offer an equal level of functionality for all their

users.

Designed together

Samsung’s dedicated team of professionals from various ﬁelds provides training and

support for users with disabilities to help them use Samsung products and services

without difﬁculty. Employees with disabilities, research institutes, and like-minded

communities and groups all work together to take a more hands-on approach to our

design experience.

3. Coherence

4. Co-creation

01. Principle

Principles 1. Consideration

2. Comprehensiveness

One UI Design Guidelines 85ACCESSIBILITY

Except for captions and images of text, text can be resized without assistive technology

up to 200 percent without loss of content or functionality

The basic accessibility criteria are as follows.

Vision: Provide visual aids to accommodate for people with blindness, low vision, or color vision deﬁciency

through Voice Assistant and the Visibility enhancement settings.

Hearing: Provide hearing aid settings to make sure that people with hearing impairments can use the product

without difﬁculty.

Interaction and dexterity: Help people with physical disabilities use the product more easily through the

Universal switch feature, Assistant menu, etc.

02. Vision

Vision [Resize text]

Font size

(from 0 (default value) to 8)

Increase text size

More than 200%

One UI Design Guidelines 86ACCESSIBILITY

Color is not used as the only visual means of conveying information, indicating an action,

prompting a response, or distinguishing a visual element

02. Vision

Vision

Default

Grayscale

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

(Source: Web Content Accessibility Guidelines).

Small text: It’s strongly recommended that you ensure that a contrast ratio of at least 4.5:1 exists between

your foreground and background.

Large text (Normal: 18dp or larger, Bold: 14dp or larger): It’s strongly recommended that you ensure that a

contrast ratio of at least 3:1 exists between your foreground and background.

Font size (dp)

Regular font Bold font

Minimum

4.5:1

~12

19~

Minimum

4.5:1

3:1

[Use of Color]

[Contrast (Minimum)]

One UI Design Guidelines 87ACCESSIBILITY

02. Vision

A colored background shape is applied to components that function as buttons. This

helps the user identify these components as buttons quickly and decide what to do next.

Vision

Show button shapes on

[Show button shapes]

One UI Design Guidelines 88ACCESSIBILITY

03. Hearing

Hearing

It’s possible that users with hearing impairments can’t detect certain sounds.

Therefore, when a sound is detected, provide feedback using a visual or vibration alert.

Prevent users with hearing loss from disturbing people around them with unexpected

sounds generated from their devices.

[Sound detectors]

[Mute all sounds]

For people with a different degree of hearing loss in each ear, provide an option

through which they can change the left/right volume ratio.

For users with hearing loss in one ear, provide an option through which they can change

the audio setting to Stereo or Mono when they use earphones.

[Left/right sound balance]

[Mono audio]

One UI Design Guidelines 89ACCESSIBILITY

04. Interaction and dexterity

Interaction and

dexterity

To help users with physical disabilities use their devices more easily, make sure that

the interface allows them to choose an input method that is convenient for them.

Activate the action menu while moving the focus in the interface. Then, execute the

chosen action through the menu. Actions can be executed through tapping, peripheral

accessories, or the camera.

[Universal switch]

Action menu Done

One UI Design Guidelines 90ACCESSIBILITY

04. Interaction and dexterity

For people with upper extremity impairments, who may ﬁnd it difﬁcult to press physical

keys, access certain areas on the screen, make gestures that require complicated ﬁnger

movements, etc., add submenus so that they can control their device and screen without

help from others.

[Submenus]Interaction and

dexterity

Action menu Volume Screen rotation

One UI Design Guidelines 91ACCESSIBILITY

No.

Accessibility Basic UI list

Are non-text contents provided with alternative text?

Are voice guidance concise and speciﬁc?

Is it add speciﬁc labels on the same controls on a screen to classify?

If the text is provided as an image, does it holds all the things on the image?

Does it provide alternate text like entire string for abbreviated words, badges, or text buttons?

Does it provide detailed and intuitive alternate texts for Emojis, GIFs, and Stickers?

Does it provide a usgae hint text for use that explains additional information about the work which is not

clear?

Does it provide text labels for the ongoing works?

Does it provide accessibility texts which make the user know the changed status or result?

Does it provide accessibility texts which make the user know the dynamically changed status or contents?

Does it provide accessibility text regarding table information, when a table or chart has selected?

Is all elements is given a focus, which moves sequentially?

Doesn’t it provide a focus for a decorative element or additional image?

Does it designed intuitively, which is able user to ﬁnd current positions of the focus?

Does it provide a focus for grouped similar elements?

05. Checklist

It is important to follow the Accessibility Basic UI principles, but also considering to complete the task.

One UI Design Guidelines 92ACCESSIBILITY

05. Checklist

It is important to follow the Accessibility Basic UI principles, but also considering to complete the task.

No.

Accessibility Basic UI list

Can it be controlled by the user by preventing automatic hiding of the control buttons?

Does it provide an alternative way for complex actions such as drag?

Can instructions be recognized regardless of shape, size, location, direction, color and sound, etc.?

Does it provide notiﬁcation information in a variety of ways, such as screen display, sound, and vibration?

(At least two ways are required)

When a user is typing, does it provide a way to prevent typing errors?

Does it have a background music which is played automatically?

When there are unintended transitions or events, does it work in a way that users can understand?

Can users recognize the user-interface components through using assistive technologys?

Are multimedia contents provide suitable subtitle, manuscripts, or sign language?

Are user-interface components placed consistently?

Does content that have limited time control provide a way to control it?

Does a method to control contents provide that change automatically?