前端开发有哪些技术栈要掌握

After working as a front-end developer for three years, I have been able to summarize what I feel are the four major concepts of front-end development. Knowing and studying these four areas will make you stand out from the crowd.

在担任前端开发人员三年之后，我能够总结出前端开发的四个主要概念。 了解和研究这四个领域将使您在人群中脱颖而出。

In this article I'll discuss the four practical concepts you should focus on to become a better front-end developer.

在本文中，我将讨论您要成为更好的前端开发人员时应关注的四个实用概念。

辅助功能 (Accessibility)

This is a big part of front-end development that you should take into account when building your sites or apps.

这是构建站点或应用程序时应考虑的前端开发的重要组成部分。

Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible.

可访问性是产品，设备，服务或环境对尽可能多的人可用的程度。

Now in terms of front-end development, this refers to the degree to which a site is accessible to any category of people.

现在，就前端开发而言，这指的是任何类别的人都可以访问网站的程度。

For example, some time ago, I built a site and I didn’t add a home option to the navigation links. I thought everybody should know that when you click on the logo, it should go back to the home page.

例如，前一段时间，我建立了一个网站，但没有在导航链接中添加home选项。 我认为每个人都应该知道，当您单击徽标时，它应该返回首页。

To my surprise, even the client didn’t know that was what was supposed to happen, so she was not able to access the homepage. I could just have simply added the home link and she would have had access to it on her own without anybody telling her she needed to click the logo.

令我惊讶的是，即使客户也不知道那是应该发生的事情，因此她无法访问主页。 我只需要简单地添加主页链接，她就可以独自访问它，而无需任何人告诉她她需要单击徽标。

Using CTAs (Calls to Action) can go a long way in building accessible sites. Giving directions in the form of an arrow can also be very helpful. So we must have this in mind every time we are building a site.

使用CTA(号召性用语)可以在建立可访问的网站方面大有帮助。 以箭头形式给出方向也很有帮助。 因此，每次构建站点时都必须牢记这一点。

Our users aren’t all the same, so we should always try to build a site that is accessible to everybody or any type of user.

我们的用户并不完全相同，因此我们应该始终尝试构建一个所有人或任何类型的用户都可以访问的网站。

以用户为中心的设计(UCD) (User-Centered Design(UCD))

Building an accessible site for your user simply involves having your users in mind. This brings about the second concept: “user-centered” design.

为您的用户建立一个可访问的站点只需要记住您的用户。 这带来了第二个概念：“以用户为中心”的设计。

User-centered design (UCD) is an iterative design process in which designers and other stakeholders focus on the users and their needs in each phase of the design process. UCD calls for involving users throughout the design process via a variety of research and design techniques so as to create highly usable and accessible products for them.

以用户为中心的设计(UCD)是一个迭代设计过程，在此过程中，设计师和其他利益相关者着重于设计过程的每个阶段中的用户及其需求。 UCD要求通过各种研究和设计技术使用户参与整个设计过程，以便为他们创建高度可用和可访问的产品。

User-centered design (UCD) is an iterative design process in which designers and other stakeholders focus on the users and their needs in each phase of the design process. UCD calls for involving users throughout the design process via a variety of research and design techniques so as to create highly usable and accessible products for them.— Definition of user-centered design (UCD) by the Interaction Design Foundation

以用户为中心的设计(UCD)是一个迭代的设计过程，在此过程中，设计师和其他利益相关者着重于设计过程的每个阶段中的用户及其需求。 UCD要求通过各种研究和设计技术使用户参与整个设计过程，以便为他们创建高度可用和可访问的产品。 —由交互设计基金会(Interaction Design Foundation)定义的以用户为中心的设计(UCD)

User-centered design is very often used interchangeably with human-centered design, but user-centered design is a subset. Simply put, all users are humans, but not all humans will be your users (you wish!).

以用户为中心的设计通常与以人为中心的设计可互换使用，但是以用户为中心的设计是其中的一个子集。 简而言之，所有用户都是人类，但并非所有人类都是您的用户(您希望！)。

Thus, user-centered design requires deeper analysis of your potential users – your target audience. It is not only about the general characteristics of a person. It is also about the particular habits and preferences of your target users. If you study these, you'll be able to come up with the right solutions to their problems.

因此，以用户为中心的设计需要对您的潜在用户-目标受众进行更深入的分析。 这不仅关乎一个人的一般特征。 它还与目标用户的特定习惯和偏好有关。 如果学习这些内容，您将能够为他们的问题提出正确的解决方案。

User-centered design takes into account age, gender, social status, education and professional background, influential factors, product usage expectations and demands, and many other important things that may vary for different segments. What is critical for some users may be irrelevant for others.

以用户为中心的设计考虑了年龄，性别，社会地位，学历和专业背景，影响因素，产品使用期望和要求以及许多其他重要因素，这些因素可能因不同的细分而有所不同。 对于某些用户而言至关重要的事情可能与其他用户无关。

User-centered design is about deep research on your potential users’ habits, from their interactions with the product to their vision of how the product should look and behave.

以用户为中心的设计是对潜在用户习惯的深入研究，从他们与产品的交互到对产品外观和行为的看法。

As a designer or a front-end developer, you should know that you are not building only for yourself! Users (other than you) are eventually going to use whatever you are building. So, which do you think is better, “building what you like” or “building what the users want”?

作为设计师或前端开发人员，您应该知道自己并不仅仅是为自己建造！ 用户(除了您之外)最终将使用您正在构建的内容。 那么，“构建您喜欢的东西”或“构建用户想要的东西”哪个更好？

Building an accessible site or product for users is what makes our work outstanding to clients and users.

为用户构建一个可访问的网站或产品是使我们的工作对客户和用户出色的原因。

Why build a product that satisfies no users? There's no value there. So always endeavor to build what your users can relate to. The products, websites, and so on that you work on must be user-focused .

为什么要开发一种不让用户满意的产品？ 那里没有价值。 因此，请始终努力构建与用户相关的内容。 您使用的产品，网站等必须以用户为中心。

响应式设计 (Responsive Design)

I classify responsive design into two categories. Let's look at each one now.

我将响应式设计分为两类。 让我们现在看看每个。

屏幕响应度 (Screen Responsiveness )

Ever visited a website, especially on your mobile device, and the layouts of the site look scattered? As a user, I get discouraged and leave immediately.

您曾经访问过一个网站，尤其是在您的移动设备上，并且该网站的布局看起来很分散吗？ 作为用户，我感到灰心，立即离开。

This is also similar to “user-centered design” because not all users will access your website through a laptop. Some will use tablets, while others will use mobile phones.

这也类似于“以用户为中心的设计”，因为并非所有用户都可以通过笔记本电脑访问您的网站。 有些将使用平板电脑，而另一些将使用手机。

Consider the different possible gadgets users could use and go the extra mile of building for different screen sizes. Trust me, your users will be happy to access your work with whatever gadgets they have.

考虑用户可以使用的各种可能的小配件，并为不同的屏幕尺寸花费更多的精力。 相信我，您的用户将很乐意使用他们拥有的任何小工具来访问您的工作。

点击响应度 (Click Responsiveness )

I visited a site some time ago and clicked on the navigation menu to navigate to other pages. I kept clicking repeatedly but nothing happened and was unable to find any other navigation cue. I got frustrated and left the site, disappointed.

我前一段时间访问过一个网站，然后单击导航菜单导航到其他页面。 我一直反复单击，但没有任何React，无法找到其他导航提示。 我很沮丧，失望地离开了现场。

That’s the exact reaction your users will have if your buttons, links, and so on are not responding as they should.

如果您的按钮，链接等未如预期那样做出响应，这就是您的用户将做出的确切React。

Make sure you make all features responsive. If a button is not doing anything on the site, go ahead and remove it (you never know - that might be the first thing a user clicks on when they enter your site).

确保使所有功能响应。 如果某个按钮在网站上没有任何作用，请继续删除该按钮(您永远不知道-这可能是用户进入您的网站后首先点击的内容)。

创造力 (Creativity)

Have you ever come up with an amazing design, but the next day you get the feeling that it wasn't as amazing as you thought? Like the beauty of the design faded?

您有没有想过一个很棒的设计，但是第二天您就觉得它没有您想像的那么令人惊奇？ 喜欢的设计之美褪色吗？

I know this doesn't just happen to me. And that’s why front-end development requires you to be creative.

我知道这不仅发生在我身上。 这就是为什么前端开发需要您发挥创造力的原因。

Coming up with different ideas and good design patterns shows how much creativity you have. Don’t be complacent and try just one approach or technique – people will get used to it. Instead be diverse in choosing colors, fonts, and even layouts.

提出不同的想法和好的设计模式可以说明您拥有多少创造力。 不要沾沾自喜，只尝试一种方法或技术，人们就会习惯它。 而是选择颜色，字体甚至布局。

I used to use the “Poppins” font for all of my work until a friend of mine brought my attention to it. Then I had to consciously go to google fonts and choose a better and more beautiful font. Until that point, though, I had never realized how beautiful other fonts are.

我以前在所有工作中都使用“ Poppins”字体，直到我的一个朋友引起了我的注意。 然后，我不得不自觉使用Google字体并选择一种更好，更漂亮的字体。 但是，直到那时，我还没有意识到其他字体有多漂亮。

“Creativity is more than just being different. Anybody can plan weird; that’s easy. What’s hard is to be as simple as Bach. Making the simple, awesomely simple, that’s creativity” — Charles Mingus

创造力不仅仅是与众不同。 任何人都可以计划很奇怪； 这很简单。 很难做到像巴赫一样简单。 使简单，非常简单就是创造力” – Charles Mingus

Choose the right color, the right font, and the right layout and create something simple and unique out of it.

选择正确的颜色，正确的字体和正确的布局，并从中创建一些简单而独特的东西。

结语 (Wrapping up)

As you can see, studying these four concepts of front end development will help make you a better developer. I hope you have been able to learn somethings through this article and so you can start applying these concepts to your projects.

如您所见，研究前端开发的这四个概念将帮助您成为一个更好的开发人员。 我希望您能够通过本文学到一些东西，以便可以将这些概念应用于您的项目。

Kindly share with article with fellow developers if you find it helpful.

如果发现有帮助，请与其他开发人员分享。

翻译自: https://www.freecodecamp.org/news/four-parts-of-frontend-development/

前端开发有哪些技术栈要掌握