5個程式員也應該掌握的網頁設計技能

英文 |  https://javascript.plainenglish.io/5-web-design-skills-every-developer-should-master-d4ecda8d095a

翻譯 | 楊小二

一個好的網站包括兩個方面，視覺設計效果和網站程式。許多開發人員（主要是自由職業者）需要同時處理這兩塊内容。他們自己設計網站，然後自己實作網站程式開發。

請注意，這篇文章适用于同時完成這兩個部分的開發人員，或者如果你是從事設計的人，這些内容可以跳過。

在許多人看來，程式設計，尤其是 Web 開發是人們學到的最重要的技能之一。

每個人都想學習 JavaScript，以及 React、Angular 等最新架構。但是，學習這些架構會讓你成為一名優秀的開發人員嗎？

我相信要真正打造一個網站，視覺效果與使用的開發技術堆棧一樣重要。使用者和網站之間的溝通應該順暢，并且，你應該能夠通過你的設計将使用者連接配接到你的網站。

以下是任何設計師或開發人員應該學習的 5 項技能，以使他們的網站脫穎而出。

1、學習視覺設計的基本規則

任何網站的基礎都是其視覺效果。

它的外觀如何幹淨、不同元素之間如何互相作用，以及網站的整體主題都是你網站引人注目的重要因素。如果網站具有視覺吸引力，你隻會留在網站上。

視覺設計處理視覺元素，例如網頁布局、使用的插圖、照片、你選擇的字型和排版，甚至是留白這些都是非常有技巧的。

人們通過視覺處理網站上的大部分資訊，而不是閱讀那裡寫的内容。當你讓他們迷上了你的視覺效果後，他們就會開始關注它。

重要的是要了解設計基本要點：

• 色彩原則
• 線、點、面（形狀）
• 紋理、留白和布局
• 排版和攝影

2、學習互動設計

“設計不僅僅是它的外觀和感覺。設計就是它的運作方式。” — 史蒂夫·喬布斯

互動設計是互動産品和服務的設計。在互動設計中，主要關注的是設計使用者如何與網站或網絡應用程式互動。

在你讓使用者與你的視覺效果聯系起來之後，你的使用者應該能夠輕松地與網站進行互動。該網站不應感到複雜或難以使用其一些功能。

互動設計對于讓使用者輕松浏覽網站非常重要，以便你可以将他們引導到所需的位置（産品）。

另外，術語“互動設計”經常與“使用者體驗設計”混淆。使用者體驗設計 (UX) 涉及更多方面。互動設計是使用者體驗的一個子集。

3、學習原型工具

你有多少次經曆過你做了一個網站而客戶不喜歡它？我已經面對它的次數令人尴尬。我以為每個人都會喜歡我所做的設計。我的設計在我眼中就像糖果一樣。

但這種情況并非如此。在你和你的客戶對同一頁面達成同一意見之前，你可能會有一千次的更改。

我為了避免重複的修改UI設計，是以，我采用了節省數十小時的最佳方法，學習使用原型設計工具。原型設計工具可以幫助你的客戶直覺地了解你将要傳遞給他們的内容。

這些工具為我們提供的最大好處就是疊代。與我們對整個網站進行編碼，然後進行更改相比，我們可以更快地疊代、改進和驗證。

一些免費的 Web UI 模型工具如下：

• Adobe XD：https://www.adobe.com/in/products/xd.html
• Origami Studio：https://origami.design/
• Webflow：https://webflow.com/

4、熟悉産品和使用者群

任何産品設計中的重要課程之一就是了解你的使用者市場。網站設計就像一個産品，隻是在這裡，你正在制作一個與使用者互動的應用程式。

熟悉産品的用途并了解使用者的興趣，再開始設計網站作品，這點很重要。

例如，如果你正在建立一個面向 40 到 60 歲使用者人群的網站，你可能希望網站更幹淨且易于浏覽。同時，如果你的目标閱聽人更年輕，那麼，你可能會選擇更具活力和吸引力的網站設計風格。

充分了解你的産品和使用者人口統計資料，将始終幫助你建立符合使用者興趣的設計。

5、搜尋引擎優化 (SEO)

你可以建立一個漂亮、幹淨且引人入勝的網站。但是，如果沒有人通路你的網站，這一切都會顯得特别沒有意義。

SEO 是網頁設計和開發過程的一個非常重要的部分。在制作整個網站後，不要将 SEO 視為事後的想法。

作為 Web 開發人員，你應該關注由 Web 架構、語義、内容和網站編碼方式組成的 Onpage SEO。

頁面 SEO 占網站總分的30%左右。

是以，下次你設計網站時，請考慮将 SEO 作為過程并幫助你的客戶實作他們想要達到的目的。

最後，一個好的網站應該與它所提供的價值一樣好，使用者可以輕松浏覽你的網站并對其感到舒适。

如果你喜歡這篇文章，請将他們分享給你的身邊的小夥伴。

感謝你的時間。

學習更多技能請點選下方公衆号