À partir de cette semaine, nous résumerons chaque jour l'une des questions de conception Web auxquelles répondent les lecteurs du groupe de communication QQ et les compilerons en articles selon un cycle hebdomadaire. Ils seront publiés sur le blog tous les vendredis et partagés dans le groupe. pour que tout le monde puisse le lire et le consulter. Comparé aux tutoriels de conception que nous publions souvent, ce type de questions-réponses est plus destiné aux particuliers et plus proche de notre travail de conception quotidien. Personnellement, je vis aussi cette expérience. Parfois, un ou deux problèmes me restent longtemps en tête et ne peuvent être résolus. Par hasard, je tombe sur un article qui aborde juste cet aspect et je me sens soudain éclairé. Ce formulaire est donc également très précieux. Vous trouverez ci-dessous toutes les questions et réponses de la semaine 1. J'espère que cela sera utile à tout le monde dans la conception.
1. L'expression de la texture et l'évaluation de la qualité du travail (Xiao Li Feidao le vendredi 24 août)
Comment exprimer la texture sur le site Web ? C’est très propre et choquant. ‏J'aimerais que le chef du groupe vous donne une réponse. Il est préférable d'être plus précis. Par exemple, il existe plusieurs façons d'exprimer le sentiment de navigation lumineuse, comment la mise en page doit être aménagée et comment le savoir. si le travail que vous faites est bon ou mauvais, comme les affiches dans le supermarché d'affiches. Comment puis-je m'améliorer ? J'ai l'impression que ma question est trop large, ou peut-être que je ne l'ai pas expliquée clairement. Quoi qu'il en soit, j'espère que le propriétaire du groupe pourra entendre ma voix. J'ai rencontré un goulot d'étranglement et je ne sais pas ce qu'est un bon travail en matière d'affiches.
Réponse : Il existe de nombreux styles de designs brillants, mais en fait, cela dépend principalement des changements dans les détails. Si vous voulez savoir combien de styles de design il existe, on peut dire qu'ils sont infinis. La clé est d’examiner la structure des éléments et les changements dans les reflets et les ombres. Différentes structures d'éléments et effets de lumière peuvent produire différents styles d'éléments. Donnez juste quelques exemples pour illustrer :
En raison des différences de structure et de lumière, les différences entre les quatre éléments ci-dessus doivent être considérées comme très évidentes. Le style et la couleur spécifiques que vous devez utiliser dans votre conception doivent être liés au contenu informatif de la conception et peuvent créer des associations visuelles. Par exemple, si vous souhaitez concevoir un design sur un rallye automobile, ce style épuré et lumineux ne convient évidemment pas. Vous devriez plutôt envisager une expérience visuelle brute, originale et naturelle. Vous devrez peut-être en utiliser davantage. d'un effet de pinceau rugueux que les styles de conception ci-dessus.
Pour répondre à votre deuxième question, sur la façon d'évaluer la qualité d'une œuvre. Certains disent que cela dépend entièrement du spectateur et qu’il n’existe aucune norme. Personnellement, je pense que cette affirmation n’est exacte qu’en partie, mais ne peut pas être considérée comme un résumé de l’ensemble. Un bon design doit répondre à certaines normes. Par exemple, les caractéristiques du produit à afficher ou un certain concept exprimé sont-ils bien reflétés dans le design ? Les informations importantes sont-elles visuellement reflétées comme secondaires ? le produit ? L'atmosphère de conception dans son ensemble est-elle suffisante ? Je pense qu'il devrait y avoir des points de vue relativement cohérents sur ces questions.
2. Classification des ressources, amélioration en cas de goulots d'étranglement (Weison du lundi 27 août 2012)
Bonjour frère Feiyu ! J'ai écouté plusieurs de vos conférences et lu votre blog, et je pense que vous êtes très professionnel. Je suis un étudiant en design diplômé depuis plus de deux mois et j'envisage de m'engager dans des travaux liés au web design (conception d'interfaces). J'aimerais maintenant vous poser quelques questions :
1. Dans ma vie quotidienne, je collectionne des images et des sites Web que je trouve intéressants et de haute qualité, mais il n'est pas pratique de les retrouver et de les gérer une fois qu'il y en a trop. Je voudrais demander comment les classer ?
2. Je maîtrise déjà très bien la technologie PS, mais j'ai l'impression que les œuvres conçues ne sont pas de haute qualité et ne peuvent pas impressionner les gens. J'ai juste l'impression "Wow, c'est vraiment bien" après l'avoir lu, je voudrais demander. , que dois-je faire pour obtenir cet effet ?
3. J'ai l'impression que ma réflexion en matière de conception n'est pas assez large. Bien que j'aie vu les créations de nombreuses autres personnes, lorsqu'il s'agit de travail réel, je ne peux ajouter que quelques dégradés, projections, reflets, etc. Que dois-je faire pour être créatif ? ? Ci-joint mon travail, j'attends vos conseils avec impatience, merci !
Réponse : Permettez-moi de répondre à chaque question une par une.
1. D'après mon expérience personnelle, la meilleure méthode de classification consiste à classer selon les secteurs impliqués dans le design, tels que les hôtels, l'éducation, les studios de design, etc. Créez des dossiers selon ces noms et classez les travaux de conception associés en catégories. Je les ai déjà classés selon les styles, comme le style chinois, le style web2.0, etc., mais j'ai trouvé que ce n'est pas facile à trouver en cas de besoin, car lorsque nous voulons faire référence à d'autres œuvres, notre idée est généralement " Laissez-moi jeter un oeil. "Quels types de sites Web liés aux hôtels les autres ont-ils créés?" Il nous suffit donc pour le moment de trouver le dossier de l'hôtel, ce qui est très pratique.
2. C'est d'ailleurs le but poursuivi par tous les designers. Après avoir lu les travaux personnels que vous m'avez envoyés, je vous propose de travailler sur les deux points suivants. Le premier concerne les détails de la conception. On peut observer que toutes les œuvres qui nous font crier involontairement « Wow, c'est génial ! » peuvent être considérées comme impeccables en termes de détails. En prenant votre travail comme exemple, j'estime personnellement que les détails doivent encore être améliorés. Permettez-moi de vous donner deux exemples simples, tels que :
Sur le site Web de la Marine chinoise, la distance entre la liste des projets et le côté gauche de la page est trop petite, ce qui donne l'impression que la page est pleine et quelque peu encombrée. Le contraste entre le texte noir et le fond blanc est trop important. S'il y a trop de textes, la page entière paraîtra sale. Il est recommandé de l'ajuster en gris tout en garantissant la lisibilité. La ligne de démarcation en pointillés est évidemment un élément secondaire par rapport au texte, il ne faut donc pas la rendre trop visible, il vaudrait mieux la traiter de manière discrète.
L'icône en forme de vague sur le côté gauche du titre Diversified Military Mission ne correspond pas bien au contenu du titre. L'icône elle-même n'est pas assez claire. Vous ne pouvez pas dire de quoi il s'agit en un coup d'œil. Le style ne correspond pas à celui-ci. style de la page entière, vous pouvez donc voir qu'il y a beaucoup de choses à considérer lors de l'utilisation d'une icône, et celles-ci peuvent être considérées comme des détails. Lorsque ces problèmes sont pris en compte, le niveau de conception sera amélioré. De plus, les endroits où la couleur de fond verte de la recherche théorique et la couleur de fond bleue du contact direct semblent très floues, ce qui donne l'impression aux gens que la conception n'est pas assez soignée. Dans la conception Web, des endroits comme ceux-ci sont souvent l'incarnation. de la beauté du design.
Après avoir examiné les détails, l’étape suivante consiste à concevoir l’atmosphère. L'atmosphère est quelque chose qui est difficile à expliquer clairement. Ma compréhension personnelle est que l'atmosphère générale de la conception Web est créée par l'unité du style visuel de chaque élément. Pour garantir que l'atmosphère générale soit suffisante, il doit y avoir une unité dans la conception. direction. Par exemple, regardez l'image ci-dessous :
Il s'agit d'une page spéciale de Bell, l'hôte de survie en milieu sauvage que tout le monde connaît. Vous pouvez observer que quel que soit l'élément sur la page, la navigation écrite sur la pierre, le texte usé et usé et le contenu dessiné avec. coups de pinceau grossiers L'arrière-plan du contenu composé de lignes de séparation et de papier déchiré est différent dans son style visuel mais unifié dans sa direction. Ainsi, lorsque vous ouvrirez cette page, vous serez accueilli par l'atmosphère originale, naturelle et sauvage. C'est un aspect remarquable de nos efforts pour créer des scènes en profondeur dans notre conception.
3. Cette question montre que vous n’en avez pas fait et vu assez, et que vos techniques d’expression sont manquantes et insuffisantes. Prenons l'exemple de la page ci-dessus. Si on vous demandait de créer cette page, vous pourriez penser à utiliser une navigation écrite sur de la pierre, du texte usé, des lignes de séparation de contenu tracées avec des traits grossiers et du papier déchiré pour compléter chaque page. Une partie du contenu informatif leur permet-elle non seulement de remplir leurs fonctions d'origine, mais également d'assurer l'expérience visuelle ? C'est un niveau qui ne peut être atteint qu'après beaucoup de pratique, donc comme le dit le vieil adage, il est toujours bon d'apprendre ? plus et faire plus. Concernant les techniques que vous avez mentionnées, telles que l'ajout de dégradés et de reflets, elles ne représentent qu'un type de style de conception. En voyant la page de conception sauvage ci-dessus, je pense que nous pouvons tout de suite comprendre nos limites.
3. Mise en page rapide à l'aide du framework CSS (ds le mardi 28 août 2012)
Bonjour Maître. Je voudrais demander à l'enseignant comment je peux créer mon framework de mise en page div+css plus rapidement et mettre en page les pages plus rapidement. Avez-vous un système de framework div+css mature ? Partagez certaines de vos structures avec nous. Et avez-vous de bonnes suggestions à me faire ?
Réponse : Je n'ai pas d'exigences urgentes en matière de vitesse lors de l'utilisation de CSS pour la composition, j'utilise donc toujours EditPlus pour l'écriture manuscrite. Si vous avez besoin d'une sorte de cadre prêt à l'emploi pour améliorer l'efficacité de la mise en page, vous pouvez essayer le système de grille 960. Le système de grille 960 fournit non seulement les fichiers de modèle psd nécessaires à la conception, mais prend également en charge les premiers codes. Bien que l'utilisation de cadres puisse améliorer l'efficacité de la conception et de la composition initiales, la condition préalable est que vous soyez familier avec la structure et les valeurs par défaut du cadre. Le code de composition de base du système de grille 960 est le suivant :
<div class="container_12"> /*Indique un total de 12 colonnes sur 960 pixels*/
<div class="grid_7 prefix_1"> /*Un total de 7 colonnes, avec 1 colonne réservée devant*/
<div class="grid_2 alpha"> /*Occupe 2 colonnes au total, le premier sélecteur de classe de la première ligne doit ajouter la classe alpha*/
</div>
<div class="grid_3">
</div>
<div class="grid_2 omega"> /*Occupe 2 colonnes au total, le dernier sélecteur de classe de la première ligne doit ajouter la classe oméga*/
</div>
</div>
<div class="grid_3 suffix_1"> /*Occupe 7 colonnes au total, laissant 1 colonne derrière*/
</div>
</div>
4. Existe-t-il des normes dites de l'industrie du design (LoidCo du mercredi 29 août 2012)
Je voudrais demander à tout le monde, dans la conception de sites Web, existe-t-il des normes dites de l'industrie du design. Par exemple, les polices utilisent généralement des tailles de police paires par défaut de la dynastie Song, ou dans le passé, de nombreux logos de sites Web incluaient des icônes + du chinois ? + noms de domaine. Comment l'état sélectionné dans la barre de navigation ci-dessous doit-il être conçu pour être conforme aux normes de l'industrie ? Si l'état sélectionné dans la barre de navigation, comme les pétales, est rouge, alors si la couleur de mon logo est bleue, est-il approprié d'utiliser du bleu ?
Réponse : Je crois personnellement qu'il n'existe pas de soi-disant norme industrielle et que n'importe quelle conception fera l'affaire. Les principales considérations sont de savoir si les informations sont exprimées clairement, si l'expérience utilisateur est bonne et si elle est visuellement confortable. On ne peut dire que les soi-disant règles de conception sont couramment utilisées par tout le monde. Au fil du temps, elles semblent être devenues des règles de conception. En fait, ces soi-disant règles de conception peuvent être enfreintes à tout moment, par exemple. Les polices chinoises utilisent 12 pixels et 14 pixels. La raison en est que ces deux tailles de police assurent la lisibilité et sont belles, mais en tant que titre, le texte de 14 pixels semble parfois trop petit. Dans ce cas, le 22 ou le 24 pixels. la taille peut être plus adaptée. Pour un autre exemple, le caractère gras est rarement utilisé dans le texte par rapport à la police Arial. La raison en est que la lisibilité du caractère gras de 14 pixels dans le texte général n'est pas aussi bonne que la police Arial. Cependant, si elle est utilisée dans la conception de certains slogans promotionnels. , le caractère gras peut être plus approprié. Cela dépend donc de la situation. Il n’est pas nécessaire de rompre délibérément avec ces habitudes, et encore moins d’être lié par ces habitudes. Pour l'anglais, la conception Web implique souvent des polices sans empattement telles que Arial, Tahoma et Verdana, et des polices avec empattement telles que les polices Georgia. Ce sont des polices fréquemment utilisées.
5. Confiance du site Web et anxiété lors de l'ajustement de la conception (Xi le jeudi 30 août 2012)
1. Comment donner aux gens un sentiment de sécurité dans la conception ? Par exemple : page de banque en ligne/paiement Alipay ?
2. Comment inciter les utilisateurs à avoir davantage envie de continuer à regarder ou comment mettre du suspense dans la composition ?
3. Comment réguler vos émotions face au burn-out en matière de design ? Dans cette période, vous serez toujours inexplicablement maniaque...
Réponse : Première question. La question que vous souhaitez poser devrait être la suivante : comment un site Web peut-il donner aux visiteurs un sentiment de confiance ? Comment les visiteurs peuvent-ils se sentir en confiance en remplissant des informations personnelles et en effectuant des opérations sur des informations financières sensibles ? C'est en effet une question. Cependant, de nombreux facteurs affectent la confiance d'un visiteur dans un site Web. Les facteurs visuels que vous avez mentionnés, tels que la correspondance des couleurs, la composition et d'autres facteurs, ne constituent qu'un aspect, et peuvent n'en être qu'un aspect mineur. Mais cela ne veut pas dire que l'aspect visuel n'est pas important. Pensez à un site Web avec un visage hideux et plein de publicités, les gens peuvent-ils y exploiter des informations sensibles. Mais les facteurs suivants peuvent nous donner plus de confiance :
1. Notoriété de la marque. Les opérations de mon compte personnel en ligne sont essentiellement effectuées à l'aide d'Alipay, mais si Apple ou Microsoft lancent un service de paiement tiers local, je pense que je n'hésiterai pas à l'essayer.
2. Excellent service. Expérience de paiement rapide et sans tracas, retrait d'espèces rapide, transfert, remboursement par carte de crédit et autres fonctions.
3. Bonne expérience utilisateur. Cela se reflète dans chaque détail du site Web. Par exemple, lors de la saisie d'un numéro de carte de crédit, le numéro de carte de crédit est automatiquement divisé en groupes de quatre, ou dans un texte de description de formulaire clair et concis, etc. site Web qui retient le plus les gens.
4. Expérience visuelle confortable. Il s’agit de la correspondance des couleurs, de la composition et des autres éléments que vous avez mentionnés ci-dessus.
Il y a beaucoup de choses qu'un bon site Web doit faire. L'aspect visuel est ce que nous ressentons le plus intuitivement, mais comparé aux informations et aux fonctions du site Web, ce n'est pas l'aspect le plus important. Ce sont ces choses que nous devrions payer le plus. attention à.
Deuxième question. Personnellement, je ne pense pas que ce soit si mystérieux. Quand je fais des choses, je n'ai jamais eu la conscience de créer du suspense dans la composition Haha, peut-être que le niveau n'est pas suffisant, je pense que les utilisateurs auront naturellement envie de regarder quelque chose une fois qu'ils l'auront fait. est fait.
La troisième question. Cela devrait être un problème relativement courant. Tout le monde devrait avoir ce sentiment pendant le processus de conception, surtout lorsque la tâche est lourde et que le temps est compté, ils seront encore plus anxieux dès qu'ils auront une idée. arrive, je le mets en œuvre rapidement sans faire deux pas. Dès que je rencontre un endroit qui demande de la patience et un travail lent, je passe immédiatement à un autre plan, je me sens non, plus j'en fais, plus je suis anxieux. Je deviens, et plus je deviens anxieux, moins je suis performant, ce qui devient un cercle vicieux. Afin d'éviter cette situation, je pense personnellement que peu importe le temps presse, il vaut mieux ne pas se précipiter dans l'action. Des considérations préliminaires et des croquis sont absolument nécessaires. Vous devez restreindre votre envie d'ouvrir PS, faites-le petit à petit. et suivez la direction que vous avez envisagée. Mettez-la en œuvre résolument. Je pense que cela garantira non seulement la qualité du travail, mais rendra également le processus de conception moins pénible. Si vous êtes vraiment anxieux, faire une pause et faire autre chose est une bonne chose. chemin.