When you work on a website or on the design of web pages, remember that their success is not determined by the beauty of their visual style. In fact, in his article “10 Principles Of Good Website Design”, Vitaly Friedman stated:

当您在网站或网页设计上工作时，请记住，其成功并不取决于其视觉风格的优美。 实际上，维塔利·弗里德曼(Vitaly Friedman)在他的文章“ 优秀网站设计的10条原则 ”中指出：

“Usability and the utility, not the visual design, determine the success or failure of a web-site.”

“可用性和实用程序，而不是视觉设计，决定了网站的成败。”

— Vitaly Friedman

—维塔利·弗里德曼

问题 (The problem)

Sadly, many designers concentrate their efforts on designing trendy user interfaces without considering the audience and goals. As a result, they create interfaces that are complex, sometimes unrealistic and inappropriate.

可悲的是，许多设计师将精力集中在设计时尚的用户界面上，而没有考虑受众和目标。 结果，它们创建的接口非常复杂，有时甚至是不切实际且不合适的。

This article attempts to address this problem by describing 7 rules for designers and anyone interested in user interface design to create web pages that are functional and visually attractive.

本文试图通过为设计师和对用户界面设计感兴趣的任何人描述7 条规则来解决此问题，以创建具有功能性和视觉吸引力的网页。

Let’s get started!

让我们开始吧！

规则1：定义页面目标 (Rule #1: Define the goals of the page)

On a website, each page should accomplish a goal, solve a problem and serve the user. To start your design on the right track, ask yourself the following questions:

在网站上，每个页面都应实现目标，解决问题并为用户服务。 要开始正确的设计，请问自己以下问题：

1. Why am I designing this page? This question will enable you to understand the problem the design should solve in the first place.

   为什么要设计此页面？ 这个问题将使您首先了解设计应解决的问题。

2. What are the goals of the page? Defining the goals of the page will give you a better understanding of its purpose. For example, the business goal of a page can be to:

   该页面的目标是什么？ 定义页面的目标将使您更好地了解其目的。 例如，页面的业务目标可以是：

• Sell a product or service;销售产品或服务；
• Encourage users to sign-up;鼓励用户注册；
• Promote some benefits to the users.向用户推广一些好处。

But, a page can also have multiple goals. Pay attention to this important aspect.

但是，页面也可以有多个目标。 注意这一重要方面。

规则2：了解您的听众 (Rule #2: Know your audience)

To design an appropriate interface, you must know what is your target audience and keep that in mind throughout the design process; this will aid you to make relevant design decisions.

要设计合适的界面，您必须了解目标受众是什么，并在整个设计过程中牢记这一点； 这将帮助您做出相关的设计决策。

In fact, to visualize your ideal users, I recommend you to create empathy maps since they are a snapshot of the users focused on what they want to achieve. In general, you can create them from the data you collected during the research phase of your project.

实际上，为了可视化理想的用户，我建议您创建共情图，因为它们是专注于他们想要实现的用户的快照。 通常，您可以根据在项目研究阶段收集的数据来创建它们。

When it comes to designing a specific interface, put the user at the centre of your work by answering the following questions:

在设计特定界面时，通过回答以下问题，将用户置于工作的中心：

1. Who is the target audience?

   谁是目标受众？

2. What matters for the user on this page?

   对于该页面上的用户来说重要的是什么？

3. Why should the user visit this page?

   用户为什么要访问此页面？

4. What tasks does the user want to accomplish?

   用户想要完成哪些任务？

5. What questions will the user have in mind when visiting the page?

   用户访问页面时会想到什么问题？

6. How should I address these with my design?

   我该如何在我的设计中解决这些问题？

At this juncture, we understand the importance of both the goals and the audience in designing a successful web interface. Jon-Mikel Bailey puts it more clearly in his article “Better UX Is A Compelling New Feature”:

目前，我们了解目标和受众在设计成功的Web界面中的重要性。 乔恩·米克尔·贝利(Jon-Mikel Bailey)在他的文章“ 更好的UX是引人注目的新功能 ”中更明确地指出：

“A good user experience is one where the user’s needs are met and the business goals are achieved. “

“良好的用户体验是满足用户需求并实现业务目标的体验。 “

— Jon-Mikel Bailey

—乔恩·米克尔·贝利

规则3：选择号召性用语 (Rule #3: Choose your calls-to-actions)

To guide the users toward their tasks and encourage them to act, you should always think about the actions you want them to accomplish.

为了指导用户完成任务并鼓励他们采取行动，您应该始终考虑要他们完成的动作。

When you ask yourself the following question, you will have an idea about the call-to-actions to consider on your interface:

当您问自己以下问题时，您将对在界面上考虑的号召性用语有所了解：

• What do I really want the user to do on the page?

  我真的希望用户在页面上做什么？

Generally, I tend to use two types of call-to-action when I design a page. For example, the primary call-to-action is usually the more prominent and used to highlight the most important goal. It can be something like “Sign up”, “Register”, “Buy” or “Get in touch”.

通常，在设计页面时，我倾向于使用两种类型的号召性用语。 例如，主要的号召性用语通常更为突出，并用来突出最重要的目标。 它可以是“注册”，“注册”，“购买”或“取得联系”之类的内容。

However, the secondary call-to-action is less important and used to emphasize a less prominent action. Finally, to avoid confusing the user, each type of call-to-action should have a distinctive visual style.

但是，次要号召性用语不太重要，并且用来强调次要号召性用语。 最后，为避免混淆用户，每种号召性用语都应具有鲜明的视觉风格。

For example, on the Zeroheight website, the main goal of the business is to encourage the user to sign-up so they can get a free trial to use their tool. This action is shown to the user with the primary call-to-action “Try for free”. But, If the user is not yet ready to complete this action, he has the possibility to click on the secondary call-to-action “View examples” to learn more about the service. As you can see, both call-to-actions have a distinct visual style.

例如，在Zeroheight网站上，该业务的主要目标是鼓励用户注册，以便他们可以免费试用使用其工具。 通过主要的号召性用语“免费试用”向用户显示该操作。 但是，如果用户尚未准备好完成此操作，则可以单击辅助号召性用语“查看示例”以了解有关该服务的更多信息。 如您所见，两个号召性用语都有独特的视觉风格。

规则4：内容优先 (Rule #4: Content first)

From the beginning, work with the real content in order to understand the story and how to structure your page. If you don’t have the content provided to you, do your best to write it in order to have at least the initial draft in place. Always get the content established first, and then build the design around it.

从一开始就使用真实的内容，以了解故事以及如何构建页面。 如果您没有提供的内容，请尽力编写，以便至少准备好初始草稿。 始终首先获取内容，然后围绕该内容进行设计。

Below is a list of tips to help you write compelling content:

以下是可帮助您编写引人入胜的内容的提示列表：

• Who are you talking to?: Consider your audience to write content based on user needs.

  您正在和谁聊天？：考虑让您的听众根据用户需求编写内容。

• Avoid distractions: Consider writing in a low-fidelity environment like a text editor to avoid being distracted by any visuals or text formatting;

  避免分散注意力：考虑在像文本编辑器这样的低保真环境中进行书写，以避免被任何视觉效果或文本格式分散注意力；

• Be human: Use the second person (You) when referring to the user to make your content approachable and engaging.

  是人类：使用 第二个用户(您) ，指的是使您的内容易于访问且引人入胜的用户。

• Answer the user’s questions: When visiting a website, the user has specific questions in mind. Your copy should give answers to these questions.

  回答用户的问题：访问网站时，用户会想到一些特定的问题。 您的副本应提供这些问题的答案。

• Don’t be verbose: Be concise and clear as much as possible.

  不要太冗长：尽可能简洁明了。

• Make your content scannable: Break down your content with headings, subheadings, paragraphs, pull-out quotes and lists. Remember: users don’t read pages but scan them instead.

  使您的内容可扫描 ：用标题，子标题，段落，引号和列表细分内容。 请记住：用户不阅读页面，而是扫描页面。

• Write in plain language: Avoid the use of acronyms, jargon and complex words that will require the user to think.

  用简单的语言写：避免使用要求用户思考的首字母缩写词，专业术语和复杂的单词。

• Avoid walls of words: Make sure to break down your copy into small chunks to make it easier to process and read. Large blocks of text are difficult to process.

  避免长篇大论：确保将副本分成小块，以使其更易于处理和阅读。 大块文本很难处理。

• Voice and Tone: Consider the kind of emotions you want to evoke with your message. For example Friendly? Informal? Formal? I will explain more this point in rule #6 below;

  语音和语调：考虑您想在信息中唤起的情绪。 例如友好？ 非正式吗 正式？ 我将在下面的规则6中进一步解释这一点；

• Avoid Lorem Ipsum: Using Lorem Ipsum text will encourage you to focus on a meaningless design that is likely to be distorted later, once the real content is in place.

  避免使用Lorem Ipsum：使用Lorem Ipsum文字将鼓励您专注于毫无意义的设计，一旦实际内容就位，该设计稍后可能会变形。

That said, content should always come first. As Jeffrey Zeldman once said:

就是说，内容应该永远放在第一位。 正如Jeffrey Zeldman所说：

“Content precedes design. Design in the absence of content is not design, it’s decoration.” —Jeffrey Zeldman

“内容先于设计。 没有内容的设计不是设计，而是装饰。” 杰弗里·泽德曼(Jeffrey Zeldman)

规则5：对界面进行线框设计 (Rule #5: Wireframe your interface)

To determine how the content should be organized on the page, start by drafting different approaches of the layout on paper based on the goals. This task will keep you focused on the page layout, content structure and interactions without being distracted by any colour, fonts or graphic elements. Whenever possible, collaborate with the client, stakeholder or any member of your team to share the ideas.

若要确定内容在页面上的组织方式，请根据目标在纸上草拟不同的布局方法。 该任务将使您专注于页面布局，内容结构和交互，而不会被任何颜色，字体或图形元素所干扰。 尽可能与客户，利益相关者或团队中的任何成员合作以分享想法。

In his article “My five commandments for wireframing” Paul Boag confirms the benefits of starting a design from hand-drawn sketches:

Paul Boag在他的文章“ 我的五个关于线框设计的诫命 ”中，确认了从手绘草图开始设计的好处：

“To keep a light weight, spontaneous approach, wireframes should be initially produced with pen and paper.”

“为了保持轻巧，自发的效果，线框应首先使用笔和纸制作。”

— Paul Boag

保罗·波格

When wireframing, consider how the information should be displayed starting from mobile to desktop screens in order to think about the whole experience and prioritize the necessary information.

进行线框图制作时，请考虑应如何从移动屏幕到桌面屏幕显示信息，以便考虑整个体验并确定必要信息的优先级。

Once you are happy with your sketches, feel free to refine them on the wireframing tool of your choice.

对草图感到满意后，请随时使用所选的线框图工具对其进行完善。

Finally, test early and often your wireframes with a few people outside the project and iterate until you have a great solution to the problem you are trying to solve.

最后，尽早测试线框，并经常与项目外的几个人进行测试，然后进行迭代，直到对要解决的问题有了一个好的解决方案为止。

In the last two guidelines, I will advise you on how to approach the visual design of your interface in order to make it visually attractive and memorable.

在最后两个指南中，我将为您提供有关如何进行界面视觉设计的建议，以使其在视觉上更具吸引力和令人难忘 。

规则6：艺术指导您的设计 (Rule #6: Art direct your design)

If you want to develop trust and make people connect with your interface, you should consider applying art-direction to your design to create a distinctive personality. In his book “Art Direction for the Web” Andy Clarke said that art-direction:

如果您想建立信任并让人们与您的界面保持联系，则应考虑将艺术指导应用于您的设计以创建独特的个性。 安迪·克拉克(Andy Clarke)在他的书《网络的艺术指导 》中说：

“Uses design techniques to intentionally evoke an emotional response from someone when they read an article, use a product, or visit a website”

“使用设计技术有意引起某人在阅读文章，使用产品或访问网站时的情感React”

— Andy Clarke

—安迪·克拉克(Andy Clarke)

To art-direct your design, start by asking yourself the following questions:

要对艺术进行设计指导，请先问自己以下问题：

1. How do I want the user to feel when interacting with the site?

   我希望用户与网站互动时有什么感觉？

2. What do I want them to say?

   我想让他们说什么？

In addition, write a shortlist of words that convey the impressions you want users to have when seeing your site. These attributes will define the personality of your design and guide you on which typefaces, photography, colours and layout are appropriate to use.

另外，编写简短的单词列表，传达希望用户在访问您的网站时获得的印象。 这些属性将定义设计的个性，并指导您选择适合使用的字体，照片，颜色和布局。

Finally, the copywriting of your page (e.g: body copy, labels and error messages) should be created around these attributes to reflect the correct voice and tone. For example, Mailchimp and Smashing Magazine websites have a visual language and copy which conveys their personalities efficiently.

最后，应围绕这些属性创建页面的文案(例如，正文，标签和错误消息)，以反映正确的语音和语调。 例如， Mailchimp和Smashing Magazine网站具有视觉语言和副本，可以有效地传达其个性。

To learn more about how I art-design my designs, consult my article “How art direction will help you create masterful web interfaces”.

要了解有关如何对设计进行艺术设计的更多信息，请参阅我的文章“ 艺术指导将如何帮助您创建出色的Web界面 ”。

规则7：使其美丽 (Rule #7: Make it beautiful)

Once you determine the design direction of the site, your next step is to make the pages visually attractive and enhance their functionality. A successful visual design will put the user in a positive frame of mind about the whole experience of the website; this will make them believe the website is trustworthy and easy to use.

确定站点的设计方向后，下一步就是使页面在视觉上更具吸引力并增强其功能。 成功的视觉设计将使用户对网站的整体体验持积极态度； 这将使他们相信该网站是值得信赖且易于使用的。

Below are critical design principles to consider if you want to create an interface that is easy to use and pleasant to see on screen.

如果要创建一个易于使用且易于在屏幕上看到的界面，请考虑以下关键设计原则。

• Balance: Achieving visual balance will make your interface feel right and comfortable for the user to stay engaged with. Symmetry, Asymmetry and Radial balance are three ways to balance elements on a design.

  平衡：实现视觉平衡将使您的界面感觉正确并让用户保持舒适。 对称，不对称和径向平衡是在设计中平衡元素的三种方式。

• Alignment: Alignment helps to create order, arrange your elements as well as create visual connections. For instance, the use of Grids can help you ensure great alignment and improve the readability of your interface design.

  对齐：对齐有助于创建顺序，排列元素以及创建视觉连接。 例如，使用网格可以帮助您确保高度的一致性并提高界面设计的可读性。

• Contrast: Contrast helps to create variety and visual interest in your design when successfully applied. For it to be effective, one element such as shape, colour, size, weight or texture must look different from another.

  对比度：成功应用后，对比度有助于在设计中创造出多样化和视觉趣味。 为了使其有效，形状，颜色，大小，重量或纹理之类的要素必须看起来与另一要素不同。

• Consistency: UI Elements that have the same function and purpose should be styled in the same way. This will make your interface easy to use.

  一致性：具有相同功能和目的的UI元素的样式应相同。 这将使您的界面易于使用。

• Negative space or (White space): Negative space brings focus to the content, improves readability and builds visual hierarchy. Also, it can help the user process easily the content on the page.

  负空间 或 (空格) ：负空间使内容聚焦，提高了可读性并建立了视觉层次。 同样，它可以帮助用户轻松处理页面上的内容。

• Colours: Use a small number of colours in your palette to avoid a “rainbow effect”. The colours you choose should reflect the personality of your site’s brand.

  颜色：在调色板中使用少量颜色，以避免“彩虹效果”。 您选择的颜色应反映出您网站品牌的个性。

• Typefaces: Make sure to choose readable and legible typefaces for your design. To learn more about how to choose appropriate typefaces for your project, read my article “Great interfaces are made of good typography”.

  字体：请确保为您的设计选择可读且清晰的字体。 要了解有关如何为您的项目选择合适的字体的更多信息，请阅读我的文章“ 优质的界面由良好的排版构成 ”。

To go further on this subject, I suggest you read the book “Designing Visual Interfaces” by Kevin Mullet and Darell Sano. Also, understanding the Gestalt principles will help you design interfaces that work visually.

为了进一步探讨该主题，我建议您阅读Kevin Mullet和Darell Sano撰写的“ Designing Visual Interfaces”一书。 此外，了解格式塔原理将有助于您设计直观的界面。

结论 (Conclusion)

As we have seen in this article, a successful user interface design requires you to think further than the visual aspect. I hope that the guidelines I stretched under this article will assist you in the creation of meaningful and easy to use web interfaces.

正如我们在本文中所看到的，成功的用户界面设计要求您比视觉方面多思考。 我希望我根据本文扩展的准则将有助于您创建有意义且易于使用的Web界面。

Jerome Kalumbu

杰罗姆·卡伦布(Jerome Kalumbu)

推荐文章： (Recommended Articles:)

• 10 Principles Of Good Website Design by Vitaly Friedman

  优秀网站设计的10条原则(作者 ：Vitaly Friedman)

• How To Use Spaces In Web Design With Gestalt Principles by Ayesha Ambreen

  如何使用格式塔原理在Web设计中使用空间作者：Ayesha Ambreen

• 30 Powerful Call to Action Examples That Are Successful by Paul Boag

  Paul Boag 成功的30个强大的号召性用语示例

• Why designers should never use fake text by Jerry Cao

  为什么设计师不应该使用 Jerry Cao的假文字

推荐书籍 (Recommended Books)

• The law of simplicity by John Maeda

  约翰·前田的简单法则

• Designing Visual Interfaces by Kevin Mullet and Darrell Sano

  Kevin Mullet和Darrell Sano 设计视觉界面

• Think First by Joe Natoli

  首先思考乔·纳托利

• Art Direction for the web by Andy Clarke

  网络艺术指导，安迪·克拉克(Andy Clarke)

• User Experience Revolution by Paul Boag

  Paul Boag的用户体验革命

• Don’t make me think by Steve Krug

  别让我想起史蒂夫·克鲁格(Steve Krug)