UX 和 UI 設計師做什麼，前端開發人員做什麼？

IT產業有相當多與設計相關的領域。其中最常見的是設計師，隱藏在縮寫 UX 和 UI 後面。嗯，有些人甚至設法讓前端開發人員成為設計師。讓我們試著弄清楚IT界的設計師是誰，UI和UX有什麼區別，前端工程師與設計有什麼關係。 UX 和 UI 設計師做什麼，前端開發人員做什麼？ - 1

設計師

開發應用程式、網站或遊戲的介面是一個相當複雜的過程，需要應用不同領域的知識：工程、心理學和設計。使用者介面設計者（英文-使用者介面或UI）專注於網站功能的顯示方式（搜尋、選項卡、選單）以及用戶端和介面之間互動的細節。UI 設計師的目標是美學上可接受的現代產品設計。UX代表User Experience，意思是「使用者體驗」。使用者體驗設計師更關注潛在使用者對介面的可用性和理解。這樣的專家通常會進行研究和調查，為創建設計概念奠定基礎，並在開發期間和之後測試概念。它通常關注結構、內容、導航以及用戶如何與這些元素互動。

它產生網站地圖、原型，這是創建軟體時的基本結構。使用者體驗設計師的工作目標是讓使用者快速、輕鬆地從網站上獲得他來這裡的目的。然而，今天這兩個專業用斜線書寫是很常見的。也就是說，兩個方向的任務均由一位專家執行。UX/UI 設計師設計使用者與介面的交互，決定使用者到底需要做什麼，並負責介面的最終外觀。

UX/UI 設計師需要了解什麼

圖形編輯器。市面上最受歡迎的工具是 Adobe Photoshop、Adobe Illustrator，以及 Sketch、Figma。選擇一個對您來說方便的編輯器，然後先嘗試繪製網站或應用程式的螢幕截圖，使它們稍微現代化一些。

素描指南
原型設計工具（Mockplus、Axure）。原型設計工具是想法與其實現之間的連結。使用什麼工具並不重要。您可以嘗試多種，然後決定適合您的風格和喜好的一種。
用戶心理。在設計階段，您應該考慮您或其他人使用此介面是否方便。設身處地為客戶著想，與他建立牢固的聯繫並關注他的需求。畢竟，只要有需求，產品就會成功。

設計心理學：設計時有用的 8 個心理學原則
您還需要色彩理論知識。我們從小就知道一些事情，尤其是那些上過藝術學校的人。然而，設計師的工作有一些具體細節。基礎知識可以從書籍或網路上的文章中獲得。

設計師色彩理論第 1 部分：色彩意義

UI設計中如何運用色彩
建議了解排版，這是一種結合文字和視覺組件的方法。

初學者設計師的 25 條版式規則

網路上的版式
網站的組成和可用性。

網頁設計中的構圖，或是 Photoshop 教學中沒有提及的內容
根據工作的具體情況，您可能需要了解 HTML 和 CSS 或（某些）程式語言（可以在下面的「前端開發人員應該了解什麼」部分中找到資源連結）。

前端開發者

前端開發人員的主要任務是開發介面的客戶端部分。也就是說，這樣的專家讓設計師的設計「煥發了活力」。他負責介面的操作和操作，較少負責視覺內容。前端開發人員在開發階段經常需要為使用者介面找到一個好的解決方案，因此他經常與UX/UI設計師合作。前端開發人員編寫的程式碼在使用者的瀏覽器中運行（正如他們所說，“在客戶端”）。此外，最重要的任務之一是確保網站或 Web 應用程式在所有平台和瀏覽器上看起來都相同。

前端開發人員應該了解什麼

一般來說，前端是基於三個支柱：HTML 頁面標記語言、CSS 樣式表和 JavaScript 程式語言。另外，前端開發人員必須了解HTTP協定、伺服器和瀏覽器的運作原理，以及目前市面上的各種裝置上顯示介面的特性。創建 Web 介面的工具和方法不斷發展和變化，因此開發人員必須不斷監控這一點。

HTML 和 CSS（佈局）

這就是佈局，就是建造場地的磚塊。HTML 標記語言規定了網站的組織、內容以及它們之間的所有互動。它允許您指定頁面的頂部、底部、側邊區塊的內容、標題、文字顯示和多媒體元素。CSS 樣式表用於裝飾 HTML 元素。它們準確地確定頁面上每個圖形元素的顯示方式。使用最新版本的 HTML5 和 CSS3，您可以在頁面上放置視訊和音訊組件、創建 2D 圖像和動畫，甚至編寫簡單的遊戲。無需嘗試一次記住所有標籤和样式。學習基礎知識並立即付諸實踐將會很有幫助。W3School 是一個非常好的網站，您可以在其中學習 HTML 和 CSS 的基礎知識。但前提是您至少具備基本的英語知識。

W3學校
CSS

此外，前端開發人員必須了解跨瀏覽器和跨平台開發、自適應和響應式佈局。

引導程式

它是 HTML、CSS 和 JavaScript 的框架。也就是說，使用某些模板（例如建構函數），您可以比沒有它們更快地組裝網站。但是，當然，您需要自己定制它以滿足您的需求。如果您懂英語，我們推薦getbootstrap網站和相同的w3schools。

JavaScript

Javascript是前端開發的核心。這是第一種也是最廣泛使用的介面程式語言。它可以為網站添加很多功能。在基本層面上，這種語言可讓您為頁面添加互動式元素。它用於創建即時更新的地圖、互動線上遊戲和電影。在我們的 JavaRush 高階課程中，我們學習了一些 JavaScript。您也可以在同一個W3School學習它或在網站 javascript.ru上閱讀俄語版本。

jQuery

jQuery 是一個 Javascript 函式庫，其中包含外掛程式和擴展，可以讓開發變得更容易、更快。庫允許您添加現成的元件，然後可以針對特定項目進行自訂，而不是從頭開始編寫程式碼。您可以使用自動填入搜尋表單、重新排列和調整網格大小以及設定倒數計時器等功能。 w3school 的 jQuery 實作課程

JavaScript 框架

框架有多種類型，但您可以選擇方便您使用的框架。最著名的是 Angular、Backbone、Ember 和 React。它們代表了現成的程式碼結構。它們有助於加快開發速度。與庫相結合，它們可以最大限度地減少從頭開始開發網站或應用程式。 2017 年 5 個最受歡迎的 JavaScript 框架與函式庫回顧

Git版本控制系統

版本控制系統可以追蹤一段時間內對程式碼所做的更改。它們還允許您返回到項目的先前版本。Git 是使用最廣泛的版本控制系統。了解如何使用 Git 是每個開發人員的重要技能。 Git 俄語教程

簡要結論

UI是User Interface的縮寫，意思是「使用者介面」。也就是說，UI 設計師主要負責如何將產品呈現給使用者。他開發按鈕、圖標、選擇字體並準備佈局。UX 代表使用者體驗。因此，使用者體驗設計師設計網站、應用程式或任何東西的設計，以便使用者感到舒適且易於理解，並且他可以以最少的努力從網站獲得他需要的東西。通常，這兩種類型的工作都是由一個人執行的：UI/UX 設計師。前端開發人員透過引入動態來使設計師的工作變得活躍起來：按鈕開始被按下，圖片開始改變。他必須了解程式語言，熟悉框架、預處理器和函式庫。