Un artefact de conception cloud super pratique au niveau divin !

Artefact 1 : L'arme magique de la conception d'interfaces et de la collaboration

https://www.figma.com

Figma, fin de 2015 Un artefact de collaboration en matière de conception d'interface qui a commencé à émerger. Il possède de puissantes fonctions de conception graphique, prend en charge l'édition à plusieurs personnes et les commentaires en temps réel, et peut également enregistrer des versions historiques à volonté. Il peut être appelé Google Docs dans le monde du design. . Il suffit de prendre quelques animations d'opération pour vous donner une idée -

Certaines personnes sur Internet disent que c'est comme Photoshop, mais en fait il n'a pas de fonctions de traitement d'image et est vraiment digne d'un combat. Au contraire, Adobe Illustrator et Sketch prennent tous deux en charge des changements de points d'ancrage complexes - mais lorsque nous téléchargeons l'IA, nous avons besoin de près de 1 Go de mémoire, n'est-ce pas ? Sketch ne prend en charge que le système Mac !

Si vous souhaitez concevoir une interface publicitaire mobile, il est fortement recommandé de l'essayer. Elle peut être exportée au format jpg, png, svg et autres formats.

De plus, la collaboration cloud pour les brouillons de conception pure inclut les tableaux blancs nationaux et les Red Pens étrangers. Vous pouvez télécharger le projet de conception de votre page et envoyer le lien à votre patron et à vos collègues pour des commentaires en temps réel ou même des plaintes !

Artefact 2 : Générer des images de démonstration statiques en une seconde

https://placeit.net /

Avec Place it, un outil qui génère diverses démonstrations de pages statiques, si vous souhaitez réaliser le genre d'images de démonstration qui tiennent un téléphone portable ou affichent une interface sur un ordinateur, vous ne le faites pas Il faut chercher des images de matériel P partout. Oui, les instructions de fonctionnement sont les suivantes -

Sélectionner un modèle-->Télécharger l'image-->Capturer l'image. taille-->Terminé !

Chaque modèle de démonstration est livré avec une taille standard. Vous pouvez également traiter la taille dans PS et d'autres logiciels avant de le télécharger pour générer instantanément une variété de personnes détenant des iPhones, des iMac et des Macbooks au volant d'images à démontrer. l'effet d'image statique de votre conception.

Artefact 3 : Site Web de référence sur la conception H5 de première classe

http://www.imdb . com/?ref_=nv_home

Vous n'auriez jamais pensé qu'IMDb, où nous lisons souvent des informations sur les classements des films, est en fait un outil auquel nous pouvons nous référer. composition et style de conception. Ces affiches ne sont en aucun cas de simples vidéos promotionnelles, beaucoup d'entre elles sont la cristallisation artistique de designers de classe mondiale, parfaites comme référence pour la composition et le style de conception.

En regardant l'animation ci-dessus que j'ai soigneusement réalisée pour restaurer le cadre de conception, aurez-vous instantanément l'impression d'avoir perdu beaucoup d'occasions d'apprendre du style du maître ? Les proportions des affiches promotionnelles de films sur IMDb sont similaires à celles des pages mobiles, qui peuvent être utilisées comme une excellente source de référence pour la conception de pages mobiles.

De même, il en va de même pour le réseau national Douban Movie Network. Vous pouvez également apprendre en choisissant un film.

Artefact 4 : La collection la plus complète de codes pour l'explosion visuelle

http://codepen.io/

Si vous avez certaines bases en programmation et savez insérer du code dans des pages mobiles/H5, vous pouvez également vous référer à CODEPEN, un site de code source d'animation. Il existe de nombreux effets de mouvement visuellement explosifs et époustouflants, et la plupart d'entre eux sont accompagnés de codes sources HTML, CSS et js que tout le monde peut utiliser.

De plus, si vous souhaitez faire de la publicité mobile sur grand écran, le choix et la référence des effets d'animation devraient être plus avancés. Voici un site spécialisé dans la collecte de PC. Cas d’animation visuelle côté site – Codrops.

http://tympanus.net/codrops/

Il propose de nombreuses animations visuelles et interactives qui peuvent être prévisualisées en ligne. , et chaque cas est suivi du code correspondant, et l'application spécifique varie d'une personne à l'autre.

Artefact 5 : La collection la plus complète d'effets sonores H5

http://www.gamepix.com/blog/the-big-list- d'actifs sonores et musicaux pour votre jeu HTML5/

GAMEPIX est un site Web de jeux HTML5 étranger qui a compilé un système audio super complet effect Collection de sites Web, utilisée pour télécharger de la musique de fond ou des effets sonores de jeux, mais qui convient en fait à la plupart des pages H5 mobiles. C'est très riche, allant de quelques secondes de bruitages "ding dong", une douzaine de secondes de bruitages pour les transitions entre les pages, jusqu'à quelques minutes de BGM.

Cette collection est divisée en trois types : GRATUIT (gratuit), GRATUIT/PAID (moitié gratuit et moitié payant) et PAYANT (payant). Les gratuits sont toujours très utiles.

Mais si les effets sonores dont vous avez besoin sont principalement destinés aux jeux, alors il est recommandé de venir sur Open Game Art pour les trouver. Il est mis à jour rapidement. Ce qui est plus intéressant, c'est que les formats audio sont relativement complets. et la plupart d'entre eux sont mis en ligne par des internautes enthousiastes.

http://opengameart.org

Artefact 6 : La collection la plus complète d'effets interactifs

http://www. elasticode.com/allapps.php

Si vous souhaitez utiliser divers effets interactifs riches sur H5, vous pouvez utiliser Elasticode. Il propose de nombreux effets interactifs dont vous pouvez apprendre, notamment les clics sur les boutons, le changement/saut de page, le texte, l'apparition/disparition du matériel d'image, la transformation d'éléments, etc.

【Avantages】Ces animations se concentrent sur l'interaction de l'expérience utilisateur et vous pouvez directement ressentir le processus d'interaction.

Artefact 7 : Correspondance professionnelle des couleurs, trouver un maître

https://coolors.co/app

Pour la correspondance professionnelle des couleurs, Adobe Kuler est plus couramment utilisé en Chine. La palette de couleurs est pratique et il existe de nombreuses solutions. Mais si votre niveau d'anglais est passable, vous pouvez essayer Coolors. Il possède une palette de couleurs puissante et prend en charge le téléchargement d'images pour choisir les couleurs.

Cela présente également un avantage : cliquez sur "Générer" et vous obtiendrez un ensemble de combinaisons de couleurs recommandées au hasard. Vous pouvez faire glisser et déposer les positions des couleurs, appeler une liste de niveaux de couleurs similaires et ajuster la tonalité. du schéma global, saturation, luminosité, chaleur et froideur.

De plus, vous pouvez également utiliser la palette Matériau, un site Web de correspondance automatique des couleurs développé par Google, pour vérifier deux couleurs principales et générer automatiquement une liste de couleurs avec des niveaux de couleurs similaires et une coordination élevée.

https://www.materialpalette.com

Artefact 8 : La compression la plus forte des matériaux de conception

http://zhitu.isux.us/

Pour la compression du matériel de page mobile, nous recommandons l'outil de compression d'image Zhitu développé par ISUX de Tencent. -équipe de fin. Par rapport à l'outil de compression tinypng bien connu, l'effet et l'efficacité de la compression seront relativement optimisés (remarque : la limite supérieure des fichiers téléchargés est de 5 Mo).

【Avantages】Peut être converti en images au format Webp (par rapport au PNG et au JPEG, il réduit le volume d'environ un tiers sans réduire la qualité de l'image). qualité de sortie de l'image, et vous pouvez faire glisser la barre de paramètres pour comparer les effets avant et après la compression.

Artefact 9 : Le moteur de recherche de cas H5 le plus pratique

http://www.199case.com/

En termes d'inspiration de conception et de référence créative pour les pages mobiles, 199case est recommandé. Voici une classification spécifique de H5 - industrie, forme, festival, style, etc., afin que nous puissions le faire. peut mieux trouver le type H5 dont vous souhaitez apprendre facilement et avec précision.

Le concepteur souhaite trouver des cas de référence. Bien qu'il existe de nombreux documents sur Internet, ils sont incomplets et non systématiques, vous pouvez voir un design complet et vivant, du chargement des effets dynamiques à l'interaction. Les détails du guide de partage méritent d'être appris.

Artefact 10 : Outil de création de page mobile H5

http://www.ih5.cn

Les fonctions et services continuent de maintenir le plus haut niveau du marché. Les œuvres H5 produites à l'aide d'iH5 présentent les avantages d'une multiplateforme, d'une itération rapide, d'une livraison continue, d'un faible coût de développement, d'un écosystème open source développé, d'une interaction de données ouvertes et d'une promotion facile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!