Design de produits d’entreprise · Nouvelle ressource
Système de design Dell.
Créez une recherche d’appareils avec filtres contextuels à l’aide de DDS v3 : couleurs sémantiques, échelle typographique adaptative, espacement par jetons et composition InputGroup dont le filtrage relève de l’application.
Interprétation indépendante de l’espacement, de la typographie et des couleurs documentées des champs clairs dans DDS v3 par HTML/CSS ; police de remplacement du système. · Référence de mise en œuvre
02
Référence de conception système de design Dell
Fondations de DDS v3 et Storybook vérifié de Vanilla 3.2.0. Les valeurs de couleur correspondent aux aperçus en mode clair du tableau des jetons Text Input, et non à un thème universel. L’aperçu applique ces règles avec une implémentation indépendante HTML/CSS ; l’exemple de code charge la version réelle de DDS depuis le CDN.
DDS v3 et ses limites d’implémentation système de design Dell
Une composition, pas un service de recherche
DDS sépare les fondations visuelles réutilisables du comportement du produit. Pour cet inventaire, le point d’intégration utile est InputGroup : un champ de saisie natif avec des emplacements accessoires. Aucun constructeur Search n’est à appeler, et le système de design ne récupère pas les appareils. Notre application conserve séparément la saisie en brouillon, la requête appliquée et l’appareil sélectionné. La différence entre la saisie et l’envoi de la requête devient ainsi visible.
L’exemple public destiné aux développeurs ci-dessous utilise Vanilla 3.2.0. Ses CSS et JavaScript partagent cette version. Les intégrations v2 existantes utilisent un conditionnement différent : consultez la documentation de migration avant d’adopter ces imports. Le package actuel est réservé à Dell ; le CDN documenté permet d’évaluer concrètement cette composition sans inventer de registre npm public.
Système de design Dell Surfaces et limites sémantiques
Utiliser les noms de rôles publiés
Le tableau de référence consigne les valeurs d’entrée en mode clair issues de la documentation officielle des composants. Après le chargement des styles DDS, le code produit doit utiliser les variables CSS sémantiques. Le texte principal et la surface secondaire forment une zone de résultats lisible ; la bordure de marque délimite le champ. La couleur de premier plan inactive est volontairement atténuée et ne doit pas servir de couleur par défaut aux métadonnées.
Les primitives de couleur globales alimentent les rôles sémantiques, qui guident ensuite les choix propres à chaque composant. Les auteurs d’applications doivent utiliser les rôles sémantiques plutôt que de remplacer l’échelle globale. Un thème sombre nécessite un mode de jetons réellement pris en charge ; modifier uniquement l’arrière-plan de la page rend les couleurs des champs, des libellés et du focus incohérentes. Cet exemple local reste en mode clair.
Système de design Dell Typographie adaptative sans modifier la structure du document
Un titre sémantique, deux tailles visuelles
Le titre de la page reste un h1 sur toutes les tailles d’écran. Il utilise les tailles documentées pour Heading 1 : 48/56 sur les écrans larges et 40/48 sous 1024px. Cet exemple utilise les polices système de remplacement, car il s’agit d’une interprétation locale indépendante ; la feuille de style native fournit les ressources de polices DDS. Body 2 convient aux descriptions, tandis que Body 3 sert aux métadonnées compactes des appareils.
Un modèle d’appareil, un nom de bureau ou un état d’assistance peut passer sur plusieurs lignes. Gardez les identifiants lisibles et ne tronquez pas l’unique copie d’une étiquette d’actif. Une mise en page compacte modifie la hiérarchie visuelle et l’organisation des colonnes, tout en conservant l’association entre chaque libellé et sa valeur.
Système de design Dell Un rythme de quatre pixels pour une vue fractionnée
Associer les niveaux de l’échelle aux relations entre éléments
Utilisez sm entre les actions associées, lg dans les lignes de résultats et xl entre la recherche et la zone de résultats. Sur les écrans plus larges, l’enveloppe extérieure peut utiliser 2xl. Il s’agit d’affectations propres à l’application pour l’échelle publiée, et non de prescriptions officielles imposant ces espacements à chaque page de recherche.
Système de design Dell Structure et comportement de la recherche
La validation manuelle est intentionnelle
Le symbole de recherche en début de champ est décoratif ; le libellé visible définit le périmètre de l’inventaire. Le bouton d’effacement à droite apparaît uniquement si le champ contient du texte. Le mode manuel valide le formulaire : la touche Entrée et le bouton visible « Rechercher des appareils » produisent donc le même résultat. Modifier le champ seul ne change pas la liste de résultats appliquée.
DDS décrit également un mode automatique qui se déclenche après la saisie du quatrième caractère. N’appliquez pas un filtrage immédiat dès le premier caractère à une interface documentée comme utilisant ce mode. Pour passer à la recherche automatique, supprimez le bouton de validation manuelle et implémentez explicitement le seuil, l’annulation et l’annonce des résultats. L’exemple fourni utilise le mode manuel.
Système de design Dell Brouillon, requête appliquée et sélection
Transitions d’état dans l’exemple
Effacer réinitialise le champ et le filtre appliqué, rétablit l’inventaire complet de l’exemple et redonne le focus au champ. La sélection est une action distincte : elle affiche les détails de l’actif sans modifier la requête. Si aucun résultat ne correspond, un état dédié affiche l’expression appliquée et propose une action explicite de réinitialisation. Il ne prétend jamais qu’un inventaire distant a été interrogé.
Saisissez le nom ou l’étiquette d’un actif ; les résultats actuels restent inchangés jusqu’à la validation.
Validez le formulaire et mettez à jour le nombre de résultats à partir du tableau local filtré.
Consultez un résultat ou effacez la requête ; conservez le focus sur la commande utilisée.
Système de design Dell Libellés, repères et annonces
Indiquer clairement le périmètre
Le formulaire constitue un repère de recherche nommé « Inventaire des appareils ». Le libellé permanent et le texte d’aide restent visibles pendant la saisie. L’icône d’effacement est un bouton doté d’un aria-label, et non un span auquel est associé un gestionnaire de clic. Les symboles décoratifs sont masqués aux technologies d’assistance. Le nombre de résultats est un message d’état poli ; il est mis à jour après la validation, et non annoncé à chaque frappe.
Chaque résultat utilise un véritable bouton avec un état activé et un nom accessible complet. Le titre de détail identifie l’élément examiné. Aucun lien ne prétend ouvrir une page de gestion des appareils, car cet exemple ne dispose pas de système de gestion. La sélection actuelle est indiquée par une bordure et un libellé textuel.
Système de design Dell Charger les ressources réelles et initialiser le groupe
Commencer par le bundle documenté
Pour une application interne autorisée, installez @dds/components depuis Dell Artifactory et importez son dds-styles.css dans la chaîne de traitement des feuilles de style du projet. Pour une preuve de concept autonome, utilisez les liens CDN publics épinglés ci-dessous. Initialisez InputGroup une fois le balisage créé. La validation, l’effacement et le filtrage restent à la charge du code de l’application.
Système de design Dell Tester le fonctionnement de la recherche
Un test local utile
Saisissez Latitude sans valider et vérifiez que l’ancien nombre de résultats reste affiché. Validez, puis examinez l’appareil correspondant. Recherchez une étiquette inexistante, vérifiez l’état vide, puis effacez la recherche et confirmez que tous les appareils d’exemple réapparaissent. Répétez ces vérifications au clavier et à une largeur réduite. Elles valident cet exemple, mais ne certifient ni un produit Dell en aval ni une intégration réseau.
Exemples de composants du système de design système de design Dell
Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation indépendante HTML/CSS de l’espacement, de la typographie et des couleurs claires documentées des champs de saisie dans DDS v3 ; police de remplacement du système.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
Ce document fournit son propre comportement de recherche. Utilisez l’exemple natif de DDS pour vérifier l’initialisation d’InputGroup avec la feuille de style et le script épinglés.
Entrée complète de l’implémentation native
L’implémentation complète présentée dans la configuration, réunie ici avec les explications ciblées sur API. Suivez les prérequis documentés concernant les packages et la compilation dans la section de configuration.
Enregistrez sous index.html et servez le fichier localement avec un accès réseau au CDN DDS 3.2.0 documenté. Cette version utilise l’initialisation réelle d’InputGroup et un filtrage local ; aucun système dorsal Dell n’est utilisé. Autre possibilité avec npm interne : npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’aperçu intégré est une interprétation hors ligne HTML/CSS, et non l’exécution de ce CDN.
InputGroup avec recherche gérée par l’application
La configuration combine des champs de saisie et des extensions natifs, initialise InputGroup et relie le tout à l’envoi réel d’un formulaire. Le symbole de tête est un caractère décoratif local ; aucune dépendance à une police d’icônes n’est impliquée.
javascript
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
La documentation v3 vérifiée ne présente aucun composant Search API autonome.
Utilisez aria-label sur les boutons contenant uniquement une icône ; le filtrage est géré par l’application.
04
Configuration de l’agent IA système de design Dell
Point de départ de l’implémentation
Enregistrez sous index.html et servez le fichier localement avec un accès réseau au CDN DDS 3.2.0 documenté. Cette version utilise l’initialisation réelle d’InputGroup et un filtrage local ; aucun système dorsal Dell n’est utilisé. Autre possibilité avec npm interne : npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’aperçu intégré est une interprétation hors ligne HTML/CSS, et non l’exécution de ce CDN.
Créez une recherche dans un inventaire d’appareils avec une portée définie, en utilisant la composition complète d’InputGroup de DDS 3.2.0. Conservez la validation manuelle, un libellé de portée visible, l’annonce des résultats locaux et la possibilité d’effacer la recherche. Utilisez les jetons sémantiques de DDS et la typographie adaptative ; n’inventez pas de composant Search API et ne le remplacez pas par des imports hérités de la v2.
05
Sources et périmètre système de design Dell
Référence indépendante de DDS v3. Le package interne nécessite un accès au registre Dell ; le CDN public avec version est documenté pour le prototypage. Cela n’implique aucune identité Dell, connexion à la gestion des ressources ni certification officielle.
