\n Vous pensez peut-\u00eatre : comment tout cela est-il li\u00e9 \u00e0 la conception mobile ? Je suis content que vous ayez demand\u00e9! La raison r\u00e9side dans les petites tailles d’\u00e9cran qui ne devraient contenir que les blocs et les options qui sont vraiment n\u00e9cessaires.\n<\/p>\n
\n La convivialit\u00e9 n’est pas ce qu’un client voit, c’est quelque chose qu’il ressent lorsqu’il navigue dans un magasin mobile. Qu’il se sente chez lui.\n<\/p>\n
\n Principe 2: Prototypage
\n<\/h5>\n
\n Une fois que vous avez collect\u00e9 toutes les informations n\u00e9cessaires sur l’entreprise, vous pouvez vous atteler \u00e0 la conception de son site mobile. Il vaut mieux commencer par un prototype ce qui simplifie grandement le processus. Un prototype doit contenir tous les \u00e9l\u00e9ments structurels de la page: blocs de texte, images, liens, boutons, en-t\u00eates et titres, entr\u00e9es, etc. Vous pouvez cr\u00e9er des prototypes dans diff\u00e9rents programmes comme Photoshop ou Axure ou m\u00eame sur papier.\n<\/p>\n
\n Dans un premier temps, un prototype vous aidera \u00e0 mieux comprendre le projet. Lors de sa cr\u00e9ation, vous r\u00e9fl\u00e9chirez soigneusement \u00e0 tous les \u00e9l\u00e9ments et \u00e0 leurs positions, de sorte que la prochaine \u00e9tape – dessiner votre conception – sera beaucoup plus facile.\n<\/p>\n \n Deuxi\u00e8mement, en cr\u00e9ant un prototype, vous gagnez beaucoup de temps sur les futures corrections: il vaut mieux les faire \u00e0 cette \u00e9tape que sur les suivantes.\n<\/p>\n \n Avant de cr\u00e9er un prototype, vous devez d\u00e9cider pour quel appareil vous allez le cr\u00e9er : un t\u00e9l\u00e9phone portable ou une tablette. De plus, consid\u00e9rez que chacun de ces appareils dispose de modes portrait et paysage. Notez tous les \u00e9l\u00e9ments de structure qui doivent se retrouver sur votre prototype pour ne rien oublier.\n<\/p>\n \n Par exemple, pour la page principale d’une boutique en ligne, nous aurons besoin de : logo, paiement, barre de recherche, navigation, blocs de produits avec images, titres, descriptions courtes et prix ainsi que du texte g\u00e9n\u00e9ral sur la boutique. Une fois tous ces \u00e9l\u00e9ments \u00e9num\u00e9r\u00e9s, vous pouvez commencer \u00e0 cr\u00e9er 4 prototypes: pour un t\u00e9l\u00e9phone mobile avec les modes portrait et paysage et pour une tablette avec les modes portrait et paysage.\n<\/p>\n \n Une fois vos prototypes pr\u00eats et approuv\u00e9s, vous pouvez commencer \u00e0 concevoir l’interface.\n<\/p>\n \n Une interface est la premi\u00e8re chose qu’un visiteur voit lorsqu’il atterrit dans une boutique en ligne. L’interface donne le ton du magasin, ce qui est tr\u00e8s important. Votre mission en tant que designer est donc de rendre ce ton positif et de cr\u00e9er une attitude positive.\n<\/p>\n \n Aidez les visiteurs \u00e0 comprendre rapidement o\u00f9 ils se trouvent, ce qu’ils peuvent obtenir, quelles fonctions et fonctionnalit\u00e9s ils peuvent utiliser. Cela peut \u00eatre r\u00e9alis\u00e9 par l’utilisation de couleurs sp\u00e9cifiques, des indentations, des ic\u00f4nes, des polices. Si vous devez afficher le paiement, ajoutez une ic\u00f4ne de paiement ; si vous avez besoin d’ins\u00e9rer un lien, mettez-le en surbrillance avec une couleur.\n<\/p>\n \n Il existe 2 principales particularit\u00e9s fondamentales des appareils mobiles: leur taille et la fa\u00e7on dont un utilisateur interagit avec un site via ces appareils: il utilise ses doigts beaucoup plus gros qu’un curseur sur un ordinateur. Vous devez garder ces particularit\u00e9s \u00e0 l’esprit lors de la conception pour mobile.\n<\/p>\n \n Taille de la zone cliquable :<\/strong>\n <\/p>\n \n En raison des caract\u00e9ristiques mentionn\u00e9es ci-dessus des appareils mobiles, une taille de zone cliquable optimale doit \u00eatre sup\u00e9rieure \u00e0 44x44px. Si vous ne voulez pas frustrer vos visiteurs par des clics erron\u00e9s, essayez de faire en sorte que tous les \u00e9l\u00e9ments cliquables (liens, boutons, barre de recherche, etc.) 44x44px ou plus pour la r\u00e9solution mdpi pour les appareils Android et les affichages non-retina pour les appareils iOS. Pour les autres r\u00e9solutions, vous devez l’augmenter.\n <\/p>\n<\/li>\n \n Taille des polices :<\/strong>\n <\/p>\n \n Vous devez fournir \u00e0 vos visiteurs des options de num\u00e9risation rapide et ne pas oublier leur vue en m\u00eame temps. C’est pourquoi la taille de votre police ne doit pas \u00eatre inf\u00e9rieure \u00e0 11 points. Cette taille assure une bonne lisibilit\u00e9 \u00e0 condition d’\u00eatre utilis\u00e9e avec un fond contrast\u00e9. Cependant, 11pt est plus adapt\u00e9 aux espaces r\u00e9serv\u00e9s, aux conseils et aux informations moins essentielles. Pour les descriptions de produits et les blocs de texte importants, 13pt est plus appropri\u00e9.\n <\/p>\n<\/li>\n \n Taille des images du produit :<\/strong>\n <\/p>\n \n Ce ne sera pas une exag\u00e9ration si je dis que les images de produits sont responsables de la vente des produits (dans la plupart des cas). Beaucoup de gens omettent de lire les d\u00e9tails, ils ont juste besoin de photos qui montrent un produit sous tous les angles possibles. Cela signifie que les images de produits doivent \u00eatre visibles et suffisamment grandes pour permettre aux clients d’examiner un produit en d\u00e9tail, vous pouvez m\u00eame ajouter une option de zoom pour cela.\n <\/p>\n \n Une image de produit ne doit pas occuper moins de 45 % de la largeur de l’\u00e9cran d’un t\u00e9l\u00e9phone portable en orientation portrait ; et plus de 30% en orientation paysage. Cela aidera un client \u00e0 voir les d\u00e9tails du produit en g\u00e9n\u00e9ral ainsi qu’\u00e0 remarquer ses particularit\u00e9s. En ce qui concerne les tablettes, vous pouvez d\u00e9terminer vous-m\u00eame la meilleure taille d’image.\n <\/p>\n \n Outre la taille des images, vous devez \u00e9galement faire attention \u00e0 la qualit\u00e9 des images. Le fait est que la plupart des appareils mobiles modernes utilisent l’affichage Retina, de sorte que les images pour une r\u00e9solution d’affichage de 360x640px ne seront pas belles sur les \u00e9crans avec des r\u00e9solutions de 720x1280px ou 1080x1920px. Vous devez toujours vous rappeler que la qualit\u00e9 des images est l’une des choses les plus importantes pour une boutique en ligne.\n <\/p>\n<\/li>\n \n Taille des ic\u00f4nes :<\/strong>\n <\/p>\n \n Les ic\u00f4nes sont per\u00e7ues beaucoup plus facilement que le texte, c’est pourquoi les ic\u00f4nes sont g\u00e9n\u00e9ralement utilis\u00e9es pour des conseils au lieu de texte. D’une part, les ic\u00f4nes doivent \u00eatre visibles ; mais d’un autre c\u00f4t\u00e9, ils ne doivent pas \u00eatre trop pro\u00e9minents car ils jouent un r\u00f4le secondaire. Par exemple, si vous ajoutez une barre de recherche d’une hauteur de 44px, ajoutez une loupe de taille 24\u044524px. Ce serait suffisant pour que l’utilisateur comprenne le but de cette barre, et cela aura l’air bien.\n <\/p>\n<\/li>\n \n Taille des formulaires :<\/strong>\n <\/p>\n \n Ci-dessous, j’ai parl\u00e9 de la taille des \u00e9l\u00e9ments individuels, il est maintenant temps de parler de la taille d’un bloc important – la forme.\n <\/p>\n \n La taille de l’\u00e9cran d’un t\u00e9l\u00e9phone portable est limit\u00e9e et lorsqu’un client doit remplir un formulaire, un clavier appara\u00eet et recouvre environ la moiti\u00e9 de la taille de l’\u00e9cran. Cette particularit\u00e9 n\u00e9cessite de garder les formes mobiles aussi minimalistes que possible. Ils ne doivent contenir que les champs vraiment n\u00e9cessaires: par exemple nom, adresse, e-mail. Soit dit en passant, cette r\u00e8gle peut \u00e9galement \u00eatre appliqu\u00e9e aux sites de bureau si vous souhaitez augmenter les prospects : moins un formulaire contient de champs, plus les personnes sont susceptibles de le soumettre.\n <\/p>\n \n Un trajet long et ennuyeux d’une entr\u00e9e \u00e0 l’autre peut frustrer un client et le faire quitter le magasin.\n <\/p>\n<\/li>\n<\/ul>\n \n Le style de marque doit \u00eatre observ\u00e9 non seulement dans le logo, les cartes de visite et les livrets, mais \u00e9galement dans un site mobile. C’est principalement la couleur qui aide \u00e0 montrer le style de la marque ainsi qu’\u00e0 mettre en \u00e9vidence l’\u00e9l\u00e9ment cl\u00e9 de chaque page.\n<\/p>\n \n Avant de concevoir une interface, vous devez r\u00e9fl\u00e9chir aux couleurs qui seront utilis\u00e9es et cr\u00e9er une palette. Si vous utilisez peu de couleurs, l’interface para\u00eetra ennuyeuse ; si vous utilisez trop de couleurs, l’interface aura l’air trop d\u00e9sordonn\u00e9e et distrayante. Il est donc pr\u00e9f\u00e9rable de garder l’\u00e9quilibre et d’utiliser 6 \u00e0 10 couleurs. Il s’agit d’un nombre optimal, mais bien s\u00fbr, il peut y avoir quelques exceptions.\n<\/p>\n \n Voici un guide \u00e9tape par \u00e9tape pour choisir les couleurs d’un site de commerce \u00e9lectronique :\n<\/p>\n \n Les combinaisons de couleurs que vous avez cr\u00e9\u00e9es doivent \u00eatre harmonieuses. N’oubliez pas le contraste car il aide \u00e0 attirer l’attention des visiteurs sur les \u00e9l\u00e9ments les plus importants, par exemple sur le bouton \u00ab\u00a0Ajouter au panier\u00a0\u00bb.\n<\/p>\n \n Comme pour les couleurs, vous pouvez cr\u00e9er une \u00ab palette \u00bb pour les polices que vous allez utiliser : faites une liste des noms, des tailles et des styles des polices.\n<\/p>\n \n Les polices doivent avoir une grande lisibilit\u00e9 et transmettre facilement les informations aux clients potentiels. \u00c9vitez donc les polices trop complexes et peu lisibles: les clients ne perdront pas leur temps \u00e0 comprendre ce que vous proposez.\n<\/p>\n \n Votre \u00ab palette \u00bb de polices peut ressembler \u00e0 un simple fichier txt dans lequel vous enregistrez les informations suivantes :\n<\/p>\n \n Rubrique 1 \u2013 RobotoLight 36pt\n<\/p>\n \n C’est \u00e0 vous de d\u00e9cider quelle police utiliser pour tel ou tel \u00e9l\u00e9ment. Chaque police a sa propre signification et son propre caract\u00e8re qui sera transmis au site, vous devez donc faire attention \u00e0 choisir les bonnes polices.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\")
<\/a><\/p>\n<\/a><\/p>\n\n Principe 3: Interface
\n<\/h5>\n<\/a><\/p>\n\n Principe 4: Tailles
\n<\/h5>\n<\/a><\/p>\n\n
\n Principe 5: Couleur
\n<\/h5>\n\n
<\/a><\/p>\n\n Principe 6: Polices
\n<\/h5>\n