前端開發有哪些技術棧要掌握

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/

前端開發有哪些技術棧要掌握

總結

以上是生活随笔為你收集整理的前端开发有哪些技术栈要掌握_为什么要掌握前端开发的这四个主要概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。