À l'époque, lorsque les pages de destination animées et les mises en page sophistiquées étaient une chose, alors bien sûr, il était logique d'embaucher un concepteur professionnel. Mais la tendance actuelle est minimal - ou du moins largement simplifié.
Permettez-moi de vous donner un exemple anecdotique - il y a quelque temps, quelqu'un m'a demandé de créer un écran de démarrage pour leur logiciel PC. J'ai donc tout mis en œuvre - je l'ai dessiné sur du papier à dessin, je l'ai importé dans PhotoShop, j'ai créé beaucoup de lignes et d'effets néon fantaisistes. Cela aurait pu être un fond d'écran de bureau plutôt qu'un écran de démarrage. Le fait est que j'ai créé ce design vraiment sophistiqué et élaboré pour eux.
Comme vous pouvez probablement le deviner, ils n’ont pas aimé. Le design qu'ils ont choisi était littéralement un petit logo de quelques cercles colorés qui se chevauchaient, et le nom du logiciel en dessous. Comme, un travail de 2 minutes dans PhotoShop. Et tu sais quoi? Je devais en quelque sorte convenir que c'était mieux que le mien.
Le point que je veux dire est donc - je pense que les programmeurs tombent dans ce piège en faisant la même erreur que moi. Nous avons tendance à penser que les interfaces utilisateur et les écrans de démarrage doivent être ces éléments vraiment sophistiqués et accrocheurs qui rendent l'application. ressortir . Mais ils ne doivent pas être - honnêtement, ils ne devraient pas l'être. Nous devrions prendre un programmeurs état d'esprit et l'appliquer à la conception esthétique - simple, fonctionnel, fonctionne.
Dans cet article, nous allons examiner des moyens très simples de créer une élégante interface utilisateur / UX pour une application Android, même si vous n'avez pratiquement aucune expérience en conception.
À moins que vous ne vouliez vraiment autre chose, tenez-vous-en à la conception matérielle
Votre application n'a pas besoin d'être ' unique' et ' se démarquer des autres » pour que ce soit populaire et beau. C’est ce que Google Conception matérielle se sont engagés à atteindre - une norme pour l’interface utilisateur des applications dans l’ensemble du secteur, et ils ont fait du bon travail. Il existe une tonne d'applications populaires qui s'en tiennent à la conception matérielle - certains des plus grands noms des applications Android, comme SwiftKey, Nova Launcher, Textra SMS, YouTube, pour n'en nommer que quelques-uns.
Le centre d'intérêt de Material Design est une mise en page basée sur des cartes, avec une palette de couleurs unies. Google a travaillé avec les meilleurs designers du secteur, puisant de nombreux éléments dans des pratiques de conception minimalistes, puis a publié le tout gratuitement - c'est une très bonne affaire, car les cours de conception de sites Web et d'applications peuvent coûter des centaines de dollars pour des livres électroniques, des vidéos, etc. etc.
Premiers pas avec Material Design est incroyablement simple, et il existe une poignée d'outils qui le rendent encore plus simple, que nous énumérons ci-dessous:
- Editeur de thèmes de matériaux (macOS + Sketch)
- Plug-in Palette de couleurs de conception matérielle (PhotoShop / Illustrateur)
- Kit d'interface utilisateur de conception matérielle PSD (PhotoShop)
- Kit d'interface utilisateur de conception matérielle Android ( Esquisser)
- Générateur de thèmes d'interface utilisateur matérielle
Et si vous avez besoin d'inspiration pour créer des thèmes de conception de matériaux simples et élégants, consultez ces blogs de liste:
- MaterialDesignBlog - 15 exemples impressionnants de conception de matériaux bien faite
- MockPlus - 12 meilleurs exemples de sites Web de conception de matériaux pour dessiner l'inspiration
- AndroidAuthority - 10 meilleures applications de conception de matériaux pour Android
Les dégradés de couleurs sont bien plus faciles que vous ne le pensez
Pour une alternative au Material Design, les dégradés de couleur sont simples, tendance et accrocheurs. Et vous pourriez penser que les designers passent beaucoup de temps à peindre dans toutes les couleurs ou à concevoir le dégradé ultime. Vous vous trompez - cela peut être fait en 10 secondes dans PhotoShop.
10 secondes dans l'interface utilisateur dégradée de PhotoShop.
Je vais même vous guider à travers cela, pour vous montrer à quel point c'est facile.
Créer un nouveau projet PS pour Mobile ( 1080 x 1920 px @ 72 ppp fonctionne bien)
UIGradients.com - Grande collection de dégradés prédéfinis.
Aller à UIGradients.com et trouvez quelque chose que vous aimez.
Copiez les valeurs hexadécimales de couleur des UIGradients
Copiez les couleurs de dégradé au-dessus de l'aperçu.
Sélecteur de dégradé PhotoShop.
Cliquez avec le bouton droit sur un calque vide dans PS et accédez à Options de fusion> Incrustation de dégradé.
Cliquez directement sur l'aperçu du motif de dégradé dans le menu déroulant - ne cliquez pas sur le bouton déroulant. Cliquer directement sur le dégradé ouvre l'éditeur de couleurs.
Entrez les valeurs hexadécimales de UIGradient dans l'outil de gradient PS.
Maintenant, collez simplement les valeurs hexadécimales de couleur d'UIGradient dans l'éditeur de dégradé PS.
Ajustez si nécessaire. Vous disposez désormais d'un fond dégradé professionnel pour votre application Android.
Autres outils de dégradé à vérifier:
- WebGradients.com
- Générateur de formes Android ( pour générer des formes via XML, avec option pour le dégradé)
Utilisez des SVG au lieu de JPG / PNG
Au lieu d'utiliser des PNG ou des JPG pour vos éléments graphiques (boutons, logos, etc.), vous devriez vraiment utiliser des SVG ( Image Vectorielle) au lieu. En effet, les SVG peuvent être redimensionnés sans perte de qualité - par exemple, si vous mettez à l'échelle un JPG à une valeur plus grande, il perd de la qualité et devient flou / pixelisé. Un SVG ne le fait pas. Les gens essaient d'utiliser d'énormes fichiers PNG qui seront réduit pour s'adapter aux écrans Android - quand à la place, vous pouvez utiliser des SVG plus petits mis à l'échelle sans aucune perte de qualité.
De plus, les SVG peuvent aller jusqu'à 60% à 80% de taille de fichier inférieure à PNG . Cela signifie que votre application ou votre site Web mobile se chargera plus rapidement pour l'utilisateur et aura une belle apparence quelle que soit la résolution de l'écran.
Inclure un mode sombre à l'aide de Theme.AppCompat.DayNight
Vous n'avez pas besoin de concevoir deux thèmes distincts pour inclure un thème de mode sombre / nuit dans votre application. Il est à peu près intégré à la bibliothèque AppCompat, il vous suffit de l'activer et de modifier les valeurs.
Voir le guide d'Appual ' Comment implémenter un mode sombre dans votre application Android ».
Utiliser un modèle ou un kit d'interface utilisateur mobile
Si votre application ne nécessite pas une interface utilisateur graphique sophistiquée et personnalisée, il n'y a absolument rien de mal à utiliser un modèle ou un kit. Les modèles et les kits peuvent être utilisés comme une ligne directrice inspirante, ou vous pouvez littéralement simplement utiliser le modèle / kit tel quel, en ajoutant vos propres boutons et autres éléments.
Quelques ressources intéressantes pour les modèles et kits d'interface utilisateur Android:
- SpeckyBoy - 50 kits d'interface utilisateur mobile gratuits pour iOS et Android
- SketchAppSources - Ressources de l'application de l'interface utilisateur Android ( Esquisser)
- Freebiesbug - Kits d'interface utilisateur PSD ( PhotoShop)
