294 lines
18 KiB
HTML
294 lines
18 KiB
HTML
<!doctype html>
|
|
<html class="no-js">
|
|
<head><meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
|
<link rel="index" title="Index" href="../../genindex.html" /><link rel="search" title="Search" href="../../search.html" /><link rel="next" title="Tooltips" href="tooltips.html" /><link rel="prev" title="Dialogs" href="dialogs.html" />
|
|
|
|
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
|
<title>Placeholder Pages - GNOME Human Interface Guidelines documentation</title>
|
|
<link rel="stylesheet" type="text/css" href="../../_static/pygments.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo-extensions.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../_static/gnome.css" />
|
|
|
|
|
|
|
|
<style>
|
|
:root {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
}
|
|
|
|
/* For allowing end-user-specific overrides */
|
|
.override-light {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
.override-dark {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../../_static/pygments_dark.css"></head>
|
|
<body dir="">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
<symbol id="svg-toc" viewBox="0 0 24 24">
|
|
<title>Contents</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
|
<line x1="4" y1="6" x2="20" y2="6" />
|
|
<line x1="10" y1="12" x2="20" y2="12" />
|
|
<line x1="6" y1="18" x2="20" y2="18" />
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|
<title>Menu</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-menu">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|
<title>Expand</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-chevron-right">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
|
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
|
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
|
<label class="overlay toc-overlay" for="__toc"></label>
|
|
|
|
|
|
|
|
<div class="page">
|
|
<header class="mobile-header">
|
|
<div class="header-left">
|
|
<label class="nav-overlay-icon" for="__navigation">
|
|
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
<div class="header-center">
|
|
<a href="../../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
|
</div>
|
|
<div class="header-right">
|
|
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
<aside class="sidebar-drawer">
|
|
<div class="sidebar-container">
|
|
|
|
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../../index.html">
|
|
|
|
<div class="sidebar-logo-container">
|
|
<img class="sidebar-logo" src="../../_static/logo.svg" alt="Logo"/>
|
|
</div>
|
|
|
|
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
|
|
|
</a><form class="sidebar-search-container" method="get" action="../../search.html">
|
|
<input class="sidebar-search" placeholder=Search name="q">
|
|
<input type="hidden" name="check_keywords" value="yes">
|
|
<input type="hidden" name="area" value="default">
|
|
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
|
<ul class="current">
|
|
<li class="toctree-l1"><a class="reference internal" href="../../principles.html">Design Principles</a></li>
|
|
<li class="toctree-l1"><a class="reference internal" href="../../resources.html">Tools & Resources</a></li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-naming.html">App Naming</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-icons.html">App Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/pointer-touch.html">Pointer & Touch</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/keyboard.html">Keyboard</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-icons.html">UI Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-styling.html">UI Styling</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/writing-style.html">Writing Style</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/typography.html">Typography</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/navigation.html">Navigation</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/adaptive.html">Scaling & Adaptiveness</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/accessibility.html">Accessibility</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 current has-children"><a class="reference internal" href="../../patterns.html">Patterns</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/windows.html">Windows</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/header-bars.html">Header Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/popovers.html">Popovers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/utility-panes.html">Utility Panes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/boxed-lists.html">Boxed Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/grid-views.html">Grid Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/list-column-views.html">List & Column Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/selection-mode.html">Selection & Edit Modes</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/browsing.html">Browsing</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/view-switchers.html">View Switchers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/tabs.html">Tabs</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/sidebars.html">Sidebars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/search.html">Search</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/buttons.html">Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/menus.html">Menus</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/switches.html">Switches</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/text-fields.html">Text Fields</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/checkboxes.html">Checkboxes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/radio-buttons.html">Radio Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/drop-downs.html">Drop-Down Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/sliders.html">Sliders</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/spin-buttons.html">Spin Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/overlaid.html">Overlaid Controls</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 current has-children"><a class="reference internal" href="../feedback.html">Feedback</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|
<li class="toctree-l3"><a class="reference internal" href="notifications.html">Notifications</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="toasts.html">Toasts</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="info-bars.html">Info Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="progress-bars.html">Progress Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="spinners.html">Spinners</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="dialogs.html">Dialogs</a></li>
|
|
<li class="toctree-l3 current current-page"><a class="current reference internal" href="#">Placeholder Pages</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="tooltips.html">Tooltips</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/palette.html">Palette</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/backgrounds.html">Backgrounds</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
<main class="main">
|
|
<div class="content">
|
|
<article role="main">
|
|
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
<section id="placeholder-pages">
|
|
<h1>Placeholder Pages<a class="headerlink" href="#placeholder-pages" title="Permalink to this headline">¶</a></h1>
|
|
<p>Placeholder pages fill a view with an image, a heading, and an optional line of descriptive text. They are used to fill a space that is empty but which would usually be populated with content.</p>
|
|
<p>There are two styles of placeholder pages: illustration and symbolic. Illustration placeholders use a colorful graphic for the image, whereas symbolic placeholders use a simple monochrome icon.</p>
|
|
<img alt="../../_images/placeholder-illustration.png" class="light" src="../../_images/placeholder-illustration.png"/>
|
|
<img alt="../../_images/placeholder-illustration-dark.png" class="dark" src="../../_images/placeholder-illustration-dark.png"/>
|
|
<img alt="../../_images/placeholder-symbolic.png" class="light" src="../../_images/placeholder-symbolic.png"/>
|
|
<img alt="../../_images/placeholder-symbolic-dark.png" class="dark" src="../../_images/placeholder-symbolic-dark.png"/>
|
|
<section id="when-to-use">
|
|
<h2>When to Use<a class="headerlink" href="#when-to-use" title="Permalink to this headline">¶</a></h2>
|
|
<p>Placeholder pages with the illustration style are primarily used in the main view of an app, when it is empty. The main purpose of doing this is to avoid an awkward empty state when the app is first used. This type of placeholder can be a good way to provide guidance, set a positive note, and establish a relationship with the user.</p>
|
|
<p>However, placeholder pages should only be used for the initial view of an app when the initial empty state is unavoidable.</p>
|
|
<p>Symbolic placeholder pages should be used in other spaces that might often contain content, but which are empty, such as empty folders, albums or search results views.</p>
|
|
</section>
|
|
<section id="guidelines">
|
|
<h2>Guidelines<a class="headerlink" href="#guidelines" title="Permalink to this headline">¶</a></h2>
|
|
<p>All placeholders should include a heading which communicates the empty state and provides guidance. For example, “Empty Folder”.</p>
|
|
<p>It is often helpful to include a description which provides additional guidance, such as how to add items. For example, “Use the <strong>+</strong> button to add items.”</p>
|
|
<p>It can also be a good idea to include controls for relevant actions, such as adding content or starting a setup assistant. This is one place where the <a class="reference internal" href="../controls/buttons.html#button-styles"><span class="std std-ref">suggested button style</span></a> can be appropriate.</p>
|
|
<p>If an illustration placeholder is used as part of the initial onboarding experience, the image should be rich and colorful, and the text should be positive and upbeat. This can also be an opportunity to strike up a relationship with the user by addressing them directly.</p>
|
|
<p>Symbolic placeholders should aim to be subtle and not attract undue attention. Use the default symbolic icon color and a neutral tone for the text.</p>
|
|
</section>
|
|
<section id="api-reference">
|
|
<h2>API Reference<a class="headerlink" href="#api-reference" title="Permalink to this headline">¶</a></h2>
|
|
<ul class="simple">
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.StatusPage.html">Adwaita: AdwStatusPage</a></p></li>
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libhandy/doc/1-latest/class.StatusPage.html">Handy: HdyStatusPage</a></p></li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
|
|
</article>
|
|
<footer>
|
|
|
|
<div class="related-pages">
|
|
<a class="next-page" href="tooltips.html">
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Next</span>
|
|
</div>
|
|
<div class="title">Tooltips</div>
|
|
</div>
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
</a>
|
|
<a class="prev-page" href="dialogs.html">
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Previous</span>
|
|
</div>
|
|
|
|
<div class="title">Dialogs</div>
|
|
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</footer>
|
|
</div>
|
|
<aside class="toc-drawer">
|
|
|
|
|
|
<div class="toc-sticky toc-scroll">
|
|
<div class="toc-title-container">
|
|
<span class="toc-title">
|
|
Contents
|
|
</span>
|
|
</div>
|
|
<div class="toc-tree-container">
|
|
<div class="toc-tree">
|
|
<ul>
|
|
<li><a class="reference internal" href="#">Placeholder Pages</a><ul>
|
|
<li><a class="reference internal" href="#when-to-use">When to Use</a></li>
|
|
<li><a class="reference internal" href="#guidelines">Guidelines</a></li>
|
|
<li><a class="reference internal" href="#api-reference">API Reference</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</aside>
|
|
</main>
|
|
</div><script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
|
|
<script src="../../_static/jquery.js"></script>
|
|
<script src="../../_static/underscore.js"></script>
|
|
<script src="../../_static/doctools.js"></script>
|
|
<script src="../../_static/scripts/main.js"></script>
|
|
</body>
|
|
</html> |