303 lines
18 KiB
HTML
303 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="Accessibility" href="accessibility.html" /><link rel="prev" title="Navigation" href="navigation.html" />
|
|||
|
|
|
|||
|
|
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
|||
|
|
<title>Scaling & Adaptiveness - 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 current has-children"><a class="reference internal" href="../guidelines.html">Guidelines</a><input checked="" 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 class="current">
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="app-naming.html">App Naming</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="app-icons.html">App Icons</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="pointer-touch.html">Pointer & Touch</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="keyboard.html">Keyboard</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="ui-icons.html">UI Icons</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="ui-styling.html">UI Styling</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="writing-style.html">Writing Style</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="typography.html">Typography</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="navigation.html">Navigation</a></li>
|
|||
|
|
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">Scaling & Adaptiveness</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="accessibility.html">Accessibility</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../patterns.html">Patterns</a><input 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>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/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="../patterns/containers/windows.html">Windows</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/header-bars.html">Header Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/popovers.html">Popovers</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/utility-panes.html">Utility Panes</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/boxed-lists.html">Boxed Lists</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/grid-views.html">Grid Views</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/list-column-views.html">List & Column Views</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/selection-mode.html">Selection & Edit Modes</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/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="../patterns/nav/browsing.html">Browsing</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/view-switchers.html">View Switchers</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/tabs.html">Tabs</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/sidebars.html">Sidebars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/search.html">Search</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/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="../patterns/controls/buttons.html">Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/menus.html">Menus</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/switches.html">Switches</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/text-fields.html">Text Fields</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/checkboxes.html">Checkboxes</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/radio-buttons.html">Radio Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/drop-downs.html">Drop-Down Lists</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/sliders.html">Sliders</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/spin-buttons.html">Spin Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/overlaid.html">Overlaid Controls</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/feedback.html">Feedback</a><input 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>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/notifications.html">Notifications</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/toasts.html">Toasts</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/info-bars.html">Info Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/progress-bars.html">Progress Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/spinners.html">Spinners</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/dialogs.html">Dialogs</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/placeholders.html">Placeholder Pages</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/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="scaling-adaptiveness">
|
|||
|
|
<h1>Scaling & Adaptiveness<a class="headerlink" href="#scaling-adaptiveness" title="Permalink to this headline">¶</a></h1>
|
|||
|
|
<p>GNOME supports a variety of device types, including desktops, laptops, convertibles, and phones. On the desktop, windows can also be used at a variety of sizes, and can sometimes be tiled alongside other windows. It is therefore important to ensure that app windows look and perform well at a range of sizes.</p>
|
|||
|
|
<section id="adaptive-design">
|
|||
|
|
<h2>Adaptive Design<a class="headerlink" href="#adaptive-design" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<p>The term “adaptive” refers to this approach to designing applications which adjust to different sizes. Adaptive apps scale from narrow sizes that are appropriate for phones or split screen, all the way up to very large desktop sizes, while always providing the same functionality.</p>
|
|||
|
|
<p>Some general guidance for designing and building adaptive apps:</p>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li><p>Following the GNOME design conventions for app structure and progressive disclosure will help to ensure that your app works well at a range of sizes. Windows that are sub-divided into numerous small panes or panels are hard to make adaptive.</p></li>
|
|||
|
|
<li><p>When designing UI layouts, start from the most constrained environment (smallest screen size, most limited input devices) and then work your way up to the least constrained one. This not only helps avoid designing layouts that will be impossible to scale down, but also helps focus the interface and ensure a clean structure.</p></li>
|
|||
|
|
<li><p>Using established patterns and widgets (such as <a class="reference internal" href="../patterns/nav/view-switchers.html"><span class="doc">view switchers</span></a>) generally makes things easier as they are often designed with adaptiveness in mind.</p></li>
|
|||
|
|
<li><p>Using list patterns for content is encouraged because they scale well to both very narrow and very wide view widths.</p></li>
|
|||
|
|
<li><p>Ensure that the width of each container always feels good, irrespective of the window width, without requiring manual resizing by the user. For example, sidebars should never look excessively wide or narrow in relation to the main window area.</p></li>
|
|||
|
|
<li><p>Resizing the window should be smooth and glitch-free. For example widgets should not jump around or disappear without an animation.</p></li>
|
|||
|
|
<li><p>Be mindful that hardware capabilities are often dynamic and can vary from what might be expected for a particular physical form factor. For example, large screens can have touch capacities, and devices with small screens can be paired with physical keyboards.</p></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
<section id="small-size-handling">
|
|||
|
|
<h2>Small Size Handling<a class="headerlink" href="#small-size-handling" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<p>The smallest recommended display size for GNOME on desktop is currently 1024×600px, and this size should be supported by all applications. Apps that are appropriate for a phone form factor should scale down to 360×294px.</p>
|
|||
|
|
</section>
|
|||
|
|
<section id="large-size-handling">
|
|||
|
|
<h2>Large Size Handling<a class="headerlink" href="#large-size-handling" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<p>Large window sizes can present a number of challenges, including:</p>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li><p>related controls becoming physically distant</p></li>
|
|||
|
|
<li><p>lines of text becoming uncomfortably long</p></li>
|
|||
|
|
<li><p>visual structure like grids being lost</p></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>To avoid these issues, place content within containers that have a maximum width. These can include both visible containers, like <a class="reference internal" href="../patterns/containers/boxed-lists.html"><span class="doc">lists</span></a>, or invisible containers which act as a restraining frame.</p>
|
|||
|
|
</section>
|
|||
|
|
<section id="technical-reference">
|
|||
|
|
<h2>Technical Reference<a class="headerlink" href="#technical-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/adaptive-layouts.html">Adwaita: Adaptive Layouts</a></p></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</article>
|
|||
|
|
<footer>
|
|||
|
|
|
|||
|
|
<div class="related-pages">
|
|||
|
|
<a class="next-page" href="accessibility.html">
|
|||
|
|
<div class="page-info">
|
|||
|
|
<div class="context">
|
|||
|
|
<span>Next</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="title">Accessibility</div>
|
|||
|
|
</div>
|
|||
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|||
|
|
</a>
|
|||
|
|
<a class="prev-page" href="navigation.html">
|
|||
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|||
|
|
<div class="page-info">
|
|||
|
|
<div class="context">
|
|||
|
|
<span>Previous</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="title">Navigation</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="#">Scaling & Adaptiveness</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#adaptive-design">Adaptive Design</a></li>
|
|||
|
|
<li><a class="reference internal" href="#small-size-handling">Small Size Handling</a></li>
|
|||
|
|
<li><a class="reference internal" href="#large-size-handling">Large Size Handling</a></li>
|
|||
|
|
<li><a class="reference internal" href="#technical-reference">Technical 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>
|