A partir desta semana, resumiremos uma das questões de web design respondidas diariamente pelos leitores do grupo de comunicação QQ e compilaremos em artigos de acordo com um ciclo semanal. Eles serão publicados no blog todas as sextas-feiras e compartilhados no grupo. para que todos possam ler e consultar. Em comparação com os tutoriais de design que publicamos frequentemente, este tipo de perguntas e respostas é mais direcionado aos indivíduos e mais próximo do nosso trabalho diário de design. Eu pessoalmente também tenho essa experiência. Às vezes, um ou dois problemas ficam na minha mente por muito tempo e não podem ser resolvidos. Por acaso, encontro um artigo que apenas aborda esse aspecto e de repente me sinto iluminado. Portanto, este formulário também é muito valioso. Abaixo estão todas as perguntas e respostas da semana 1. Espero que seja útil para todos no design.
1. A expressão da textura e a avaliação da qualidade do trabalho (Xiao Li Feidao na sexta-feira, 24 de agosto)
Como expressar a textura no site é muito limpa e chocante. ‏Gostaria que o líder do grupo lhe desse uma resposta. É melhor ser mais específico. Por exemplo, existem várias maneiras de expressar a sensação de uma navegação brilhante, como o layout deve ser definido e como você sabe. se o trabalho que você faz é bom ou ruim, como os cartazes no supermercado de cartazes. Como posso melhorar? Sinto que minha pergunta é muito ampla ou talvez não a tenha explicado claramente. De qualquer forma, espero que o dono do grupo possa ouvir minha voz. Encontrei um gargalo e não sei o que é um bom trabalho quando se trata de pôsteres.
Resposta: Existem muitos estilos de designs brilhantes, mas na verdade depende principalmente das mudanças nos detalhes. Se você quiser perguntar quantos estilos de design existem, pode-se dizer que eles são infinitos. O segredo é observar a estrutura dos elementos e as mudanças nos realces e nas sombras. Diferentes estruturas de elementos e efeitos de luz podem produzir diferentes estilos de elementos. Basta dar alguns exemplos para ilustrar:
Devido às diferenças na estrutura e na luz, as diferenças entre os quatro elementos acima devem ser consideradas muito óbvias. O estilo e a cor específicos que você deve usar em seu design devem estar relacionados ao conteúdo informativo do design e podem criar associações visuais. Por exemplo, se você deseja criar um design sobre um rali de carros, obviamente, esse estilo limpo e brilhante não é adequado. Em vez disso, você deve considerar uma experiência visual áspera, original e natural. de um efeito de pincel áspero do que os estilos de design acima.
Respondendo à sua segunda pergunta, sobre como avaliar a qualidade de uma obra. Algumas pessoas dizem que isso depende inteiramente de quem vê e que não existe nenhum padrão. Pessoalmente, sinto que esta afirmação está apenas parcialmente correta, mas não pode ser considerada um resumo de tudo. Um bom design deve ter certos padrões. Por exemplo, as características do produto a ser exibido ou um determinado conceito expresso estão bem refletidos no design. As informações importantes são refletidas visualmente? o produto? Toda a atmosfera do design é suficiente? Acho que deveria haver algumas visões relativamente consistentes sobre essas questões.
2. Classificação de recursos, melhoria ao encontrar gargalos (Weison na segunda-feira, 27 de agosto de 2012)
Olá irmão Feiyu! Tenho ouvido várias de suas palestras e lido seu blog, e sinto que você é muito profissional. Sou um estudante de design formado há mais de dois meses e pretendo me envolver em trabalhos relacionados a web design (design de interface). Agora gostaria de fazer algumas perguntas:
1. No meu dia a dia coleciono algumas fotos e sites que considero interessantes e de alta qualidade, mas é inconveniente encontrá-los e gerenciá-los porque são muitos. Gostaria de perguntar como classificá-los.
2. Já sou muito proficiente em tecnologia PS, mas sinto que os trabalhos projetados não são de alta qualidade e não conseguem impressionar as pessoas. Só me sinto como "Uau, isso é muito bom", gostaria de perguntar. , o que devo fazer para conseguir esse efeito?
3. Sinto que meu design thinking não é amplo o suficiente Embora eu tenha visto os designs de muitas outras pessoas, quando se trata de trabalho real, só posso adicionar alguns gradientes, projeções, realces, etc. ?Em anexo está meu trabalho, aguardo seu conselho, obrigado!
Resposta: Deixe-me responder a cada pergunta, uma por uma.
1. Na minha experiência pessoal, o melhor método de classificação é classificar de acordo com as indústrias envolvidas no design, como hotelaria, educação, estúdios de design, etc. Já os classifiquei de acordo com estilos antes, como estilo chinês, estilo web2.0, etc., mas descobri que não é fácil encontrá-los quando necessário, porque quando queremos nos referir a outras obras, nossa ideia geralmente é " Deixe-me dar uma olhada." Que tipo de site relacionado a hotéis outros fizeram?" Então, neste momento, só precisamos encontrar a pasta do hotel, o que é muito conveniente.
2. Na verdade, este é o objetivo perseguido por todos os designers Depois de ler os trabalhos pessoais que você me enviou, sugiro que trabalhe nos dois pontos seguintes. O primeiro são os detalhes do design. Podemos observar que todos os trabalhos que nos fazem gritar involuntariamente “Nossa, que ótimo!” podem ser considerados impecáveis nos detalhes. Tomando como exemplo o seu trabalho, pessoalmente sinto que os detalhes ainda precisam ser melhorados. Deixe-me dar dois exemplos simples, como:
No site da Marinha da China, a distância entre a lista de projetos e o lado esquerdo da página é muito pequena, fazendo com que a página pareça cheia e um tanto lotada. O contraste entre o texto preto e o fundo branco é muito grande. Se houver muitos textos, a página inteira ficará suja. É recomendável ajustá-lo para cinza, garantindo a legibilidade. A linha divisória pontilhada é obviamente um elemento secundário em comparação com o texto, portanto, não a torne tão visível. Seria melhor lidar com ela de maneira discreta.
O ícone de onda no lado esquerdo do título Missão Militar Diversificada não combina bem com o conteúdo do título. O ícone em si não é claro o suficiente. estilo de toda a página, para que você possa ver que Há muitas coisas a serem consideradas ao usar um ícone, e podem ser consideradas detalhes. Quando essas questões são levadas em consideração, o nível de design será melhorado. Além disso, os locais onde a cor de fundo verde da pesquisa teórica e a cor de fundo azul do contato direto parecem muito desfocadas, o que faz as pessoas sentirem que o design não é cuidadoso o suficiente. Em web design, locais como esses de 1 pixel costumam ser a personificação. da beleza do design.
Depois de considerar os detalhes, o próximo passo é projetar a atmosfera. A atmosfera é algo difícil de explicar com clareza. Meu entendimento pessoal é que a atmosfera geral do web design é criada pela unidade do estilo visual de cada elemento. Para garantir que a atmosfera geral seja suficiente, deve haver unidade no design. direção. Por exemplo, observe a imagem abaixo:
Esta é uma página especial de Bell, o anfitrião da sobrevivência na selva com a qual todos estão familiarizados. Você pode observar que não importa qual elemento da página, a navegação escrita na pedra, o texto kv desgastado e desgastado e o conteúdo desenhado. pinceladas ásperas O plano de fundo do conteúdo composto por linhas divisórias e papel rasgado é diferente no estilo visual, mas unificado na direção. Portanto, ao abrir esta página, você será saudado pela atmosfera original, natural e selvagem. Este é um aspecto digno de nota de nossos esforços para criar cenas profundas em nosso design.
3. Esta pergunta mostra que você não fez e viu o suficiente e que suas técnicas de expressão são deficientes e insuficientes. Tomemos a página acima como exemplo. Se lhe pedissem para fazer esta página, você poderia pensar em usar navegação escrita em pedra, texto desgastado kv, linhas divisórias de conteúdo desenhadas com traços ásperos e papel rasgado para completar cada página. parte do conteúdo informativo não só permite que desempenhem suas funções originais, mas também garantem a experiência visual. Este é um nível que só pode ser alcançado com muita prática, então como diz o velho ditado, é sempre certo aprender? mais e faça mais. Em relação às técnicas que você mencionou, como adicionar gradientes e realces, elas representam apenas um tipo de estilo de design. Vendo a página de design selvagem acima, acho que podemos entender nossas limitações imediatamente.
3. Layout rápido usando estrutura CSS (ds na terça-feira, 28 de agosto de 2012)
Olá professor. Gostaria de perguntar ao professor como posso construir meu framework de layout div+css mais rápido e layout de páginas mais rápido. Você tem um sistema de framework div+css maduro. Compartilhe algumas de suas estruturas conosco. Além disso, você tem alguma boa sugestão para mim?
Resposta: Não tenho nenhum requisito urgente de velocidade ao usar CSS para composição tipográfica, então sempre uso o EditPlus para escrita à mão. Se você precisar de algum tipo de estrutura pronta para melhorar a eficiência do layout, você pode tentar o sistema de grade 960. O sistema de grade 960 não apenas fornece os arquivos de modelo PSD necessários para o design, mas também oferece suporte ao código inicial. Embora o uso de molduras possa melhorar a eficiência do design e da composição tipográfica iniciais, o pré-requisito é que você esteja familiarizado com a estrutura e os valores padrão da moldura. O código tipográfico básico do sistema de grade 960 é o seguinte:
<div class="container_12"> /*Indica um total de 12 colunas dentro de 960 pixels*/
<div class="grid_7 prefix_1"> /*Um total de 7 colunas, com 1 coluna reservada na frente*/
<div class="grid_2 alpha"> /*Ocupa 2 colunas no total, o primeiro seletor de classe na primeira linha precisa adicionar a classe alfa*/
</div>
<div class="grid_3">
</div>
<div class="grid_2 omega"> /*Ocupa 2 colunas no total, o último seletor de classe na primeira linha precisa adicionar a classe ômega*/
</div>
</div>
<div class="grid_3 suffix_1"> /*Ocupa 7 colunas no total, deixando 1 coluna para trás*/
</div>
</div>
4. Existem os chamados padrões da indústria de design (LoidCo na quarta-feira, 29 de agosto de 2012)
Gostaria de perguntar a todos, em web design, existe algum chamado padrão da indústria de design. Por exemplo, as fontes geralmente usam tamanhos de fonte pares da Dinastia Song por padrão ou, no passado, muitos designs de logotipo de sites incluíam ícones + chinês? + nomes de domínio. Como o estado selecionado na barra de navegação abaixo deve ser projetado para estar em conformidade com os padrões do setor. Se o estado selecionado na barra de navegação, como pétalas, for vermelho, se a cor do meu logotipo for azul, será apropriado usar azul?
Resposta: Pessoalmente, acredito que não existe um chamado padrão da indústria, e qualquer design servirá. As principais considerações são se as informações são expressas de forma clara, se a experiência do usuário é boa e se é visualmente confortável. Só se pode dizer que as chamadas regras de design são comumente usadas por todos. Com o tempo, elas parecem ter se tornado regras de design. Na verdade, essas chamadas regras de design podem ser quebradas a qualquer momento. Fontes chinesas usam 12 pixels e 14 pixels. A razão é que esses dois tamanhos de fonte garantem legibilidade e têm uma aparência bonita, mas como título, o texto de 14 pixels às vezes parece muito pequeno. o tamanho pode ser mais adequado. Por outro exemplo, o negrito raramente é usado em texto em comparação com a fonte Arial. A razão é que a legibilidade do negrito de 14 pixels no texto geral não é tão boa quanto a fonte Arial. , negrito pode ser mais adequado. Portanto, depende da situação. Não há necessidade de quebrar deliberadamente esses hábitos, muito menos de ficar preso a eles. Para o inglês, o web design geralmente envolve fontes sem serifa, como Arial, Tahoma e Verdana, e fontes com serifa, como as fontes Georgia.
5. Confiança e ansiedade no site para ajustar o design (Xi na quinta-feira, 30 de agosto de 2012)
1. Como dar às pessoas uma sensação de segurança no design Por exemplo: página de pagamento on-line/Alipay?
2. Como orientar os usuários a terem mais vontade de continuar assistindo ou como colocar suspense na composição?
3. Como regular suas emoções em relação ao esgotamento do design Neste período, você sempre estará inexplicavelmente maníaco...
Resposta: Primeira pergunta. A pergunta que você deseja fazer deve ser como um site pode dar aos visitantes uma sensação de confiança. Como os visitantes podem se sentir confiantes ao preencher informações pessoais e realizar operações com informações financeiras confidenciais? No entanto, existem muitos factores que afectam a confiança de um visitante num website. Os factores visuais que mencionou, tais como correspondência de cores, composição e outros factores, são apenas um aspecto, e podem ser um pequeno aspecto. Mas isso não significa que o aspecto visual não seja importante Pense em um site com uma cara horrível e cheio de propagandas, as pessoas podem operar informações sensíveis nele. Mas os seguintes fatores podem nos dar mais confiança:
1. Conscientização da marca. As operações da minha conta on-line pessoal são basicamente concluídas usando o Alipay, mas se a Apple ou a Microsoft lançarem um serviço de pagamento local de terceiros, acho que ficarei à vontade para experimentá-lo.
2. Excelente serviço. Experiência de pagamento rápida e descomplicada, retirada rápida de dinheiro, transferência, reembolso de cartão de crédito e outras funções.
3. Boa experiência do usuário. Isso se reflete em todos os detalhes do site. Por exemplo, ao preencher um número de cartão de crédito, o número do cartão de crédito é automaticamente dividido em grupos de quatro, ou um texto descritivo de formulário claro e conciso, etc. site que mais retém as pessoas.
4. Experiência visual confortável. Esta é a combinação de cores, composição e outros elementos que você mencionou acima.
Há muitas coisas que um bom site precisa fazer. O aspecto visual é o que sentimos de forma mais intuitiva, mas comparado com as informações e funções do site, não é o aspecto mais importante. atenção para.
Segunda pergunta. Pessoalmente, não acho que seja tão misterioso. Quando faço as coisas, nunca tenho consciência de criar suspense na composição Haha, talvez o nível não seja suficiente. está feito.
A terceira pergunta. Este deve ser um problema relativamente comum. Todos deveriam ter essa sensação durante o processo de design. Especialmente quando a tarefa é pesada e o tempo é apertado, eles ficam ainda mais ansiosos. surge, eu o implemento rapidamente sem dar dois passos. Assim que encontro um lugar que exige paciência e trabalho lento, mudo imediatamente para outro plano. Depois de dar dois passos, sinto Não, quanto mais faço, mais ansioso. Eu fico, e quanto mais ansioso fico, menos atuo, o que se torna um ciclo vicioso. Para evitar esta situação, pessoalmente sinto que por mais apertado que seja o tempo, é melhor não se precipitar. Considerações e esboços preliminares são absolutamente necessários. Você deve conter o desejo de abrir o PS, fazê-lo aos poucos. e siga a direção que você considerou. Implemente-o com determinação. Acho que isso não só garantirá a qualidade do trabalho, mas também tornará o processo de design menos doloroso. Se você estiver realmente ansioso, fazer uma pausa e fazer outra coisa é bom. caminho.