設計 VS 代碼——為什麼它們應該齊頭並進？

設計師是否應該只關注網站視覺品牌的藝術性？ 開發人員應該只知道如何編碼嗎？ Drupal前端開發的意義是什麼？ 讓我們在本文中找到您所有問題的答案。

當我們深入研究這個設計與代碼的難題時，我們發現兩者實際上是相互補充的。 但問題是為什麼？ 為什麼 UI/UX 設計師必須學習代碼及其基礎知識，對於開發人員以及在設計方面也是如此。

這兩個領域都涉及創造性、理解用戶及其行為。 作為一個不了解基本編碼技能和代碼結構的設計師，就像準備一個半生不熟的蛋糕，吃完可能會讓你瘋狂上廁所。

但首先，讓我們通過一個例子來了解基礎知識。

設計與編碼：相似與不同

對於作家來說，在真正寫下來之前，必須先想像並得出他們的想法。 沒有人只是記下日記或訪問博客或社交媒體平台並立即開始寫作。 這就是為什麼整個過程被稱為組合。 是的，在 Gmail 中撰寫電子郵件也稱為“撰寫”。 現在，我們為什麼要談論作家、作品等等。 讓我們切入正題。 在這種情況下，想像力就是你的設計，寫下你的想法就是發展。 我希望你現在有更好的畫面； 讓我們繼續討論這個話題的另一面。

設計師應該學習編碼而開發人員應該學習 UI/UX 嗎？

在設計代碼衝刺期間，您可能會遇到創建的所有設計都不可行的情況。 最終，最終產品最終成為原始設計的調整版本。 發生討論，客戶更改要求，但問題保持一致。 如果設計和開發團隊從一開始就一起工作，就可以避免這些情況。 這樣一來，工作就會更高效地完成，因為他們會不斷地從對方那裡得到關於什麼可行或什麼不可行的反饋。

理解這兩個領域並不像您想像的那麼困難。 無論是哪一種，都需要想像力、思維過程和實踐。 是的，更不用說，基本技能是設計和代碼，這是學習的一種選擇，但如果您知道，則不是強制性的。

設計師必須知道設計的可行性、可能性和挑戰，只有當你知道如何通過代碼實現這一點時，你才能知道這一點。 開發人員也是如此。 當開發人員了解用戶可能經歷的不同場景、他們的用戶體驗、故障排除、解決方案等時，它可以使事情變得更加簡單和高效。

以下是個人除了核心專業知識之外還應該學習任何一項技能（代碼或設計）的基礎知識的原因

1. 更好地控制產品的外觀和感覺：這基本上意味著當開發人員知道設計分析的工作原理以及涉及的設計過程時，他/她可以適應這些設計思想並對最終產品有更多的控制從而更快地交付產品。
2. 理解用戶並將其應用到設計中：當開發人員從用戶的角度理解產品時，它賦予她/他巨大的力量來構建用戶真正需要和渴望的東西。 例如，他/她將了解用戶將如何對不同的排版、不同的按鈕樣式、配色方案等做出反應。
3. 設計適應性：對於知道編碼的設計師來說同樣重要。 當他/他知道設計的產品在開發過程中將如何構建時，他/他可以理想地改進設計並使其更高效，從而減少開發人員投入的時間和精力。

用例子闡述只有核心專業知識的後果

為了更好地理解為什麼設計和編碼應該齊頭並進，讓我們深入研究幾個例子。

上面是一個使用非序列結構的經典例子。 這裡的結構在為移動設備開發時被重新排序。 這不僅是一種不好的做法； 這也是費時和麻煩的。 但是，如果設計人員知道正在開發的代碼的結構，那麼就可以輕鬆避免。

考慮上面帶有滾動條的彈出式覆蓋示例。 彈出式覆蓋的設計方式應將用戶的注意力轉移到單個主題上，並且僅在需要顯示特定信息時用作焦點。 在這裡，彈出窗口覆蓋在背景中有一個滾動條，這可能會分散用戶的注意力，並且可能無法證明彈出窗口是無效的

開發人員總是專注於以更快的速度更有效地完成任務，並且在此過程中他錯過了設計的某些方面，他/他可能認為這些方面是不必要的，或者可以通過稍微調整設計來完成。 上述示例顯示了開發人員完成工作但最終損害設計的確切情況。 因此，如果開發人員接觸過基本的 UI/UX，這個問題就可以很容易地避免。

再舉一個例子，讓我們看看上面的截圖，這些截圖來自一個儲蓄應用程序。 任務本身沒有任何用於數字簽名的輸入字段。 此外，在提交表單時，錯誤消息不會向用戶提供有關如何獲取有效數字簽名的任何指導或建議。 如果開發人員了解 UI/UX 的基礎知識，他/她可以輕鬆地指導用戶進行下一個過程，或者可以通過適當引用該領域或建議以更簡單的方式顯示消息。

從哪兒開始？

開始總是一個好主意。 對於設計師來說，要學習的基礎知識是 HTML、CSS 和一些 JS/jQuery。 有許多在線學習平台和網站提供實時 IDE 工具供您練習和學習。

HTML :任何設計的基本結構都是第一位的，它是任何產品的代碼。
JS/jQuery：使用這些可以實現滑塊、彈出窗口、下拉菜單等等
沙盒：玩轉代碼的實時工具
CSS/SCSS : 設計結構是一個創造性的過程，你可以通過 CSS/SCSS 來實現它
W3Schools：一個簡單的在線學習平台，是一個很好的入門平台
Codrops（Tympanus）：在同一平台上具有設計和開發人員思維的龐大庫

對於開發人員，您可以通過遵循有關 UI/UX 的最佳實踐來開始：
Behance：專業作品集和靈感的完整設計堆棧
Dribbble：發布並從中獲得靈感的設計理念
Muzli：博客、靈感、想法
中：關於任何領域的博客（幾乎）、最佳實踐和教程
Awwwards：獲得最佳設計提名的網站和獲得靈感的獲獎者
XD/Figma/Sketch：為 UI/UX 設計模型、線框的工具

對於設計師

對於開發者

Drupal 前端開發

Drupal 8 作為 CMS 是一個對 UI/UX 設計師非常友好的內容管理框架，因為它有很多開箱即用的功能，最重要的是各種可用的主題和響應式設計。 當然，我現在可以考慮更多功能，但讓我們改天再考慮。

當 UX 設計師運用他們的創意技能並專注於 Drupal 網站的視覺呈現時，前端 Drupal 開發人員彌合了 UX 設計師和後端 Drupal 開發人員之間的差距。 他們是實現設計師在 Drupal 網站中交付的可視化組件的人。 儘管 UX 設計師和前端 Drupal 開發人員都從用戶體驗和解決與 UX 相關的問題方面考慮，但他們採用不同的方法來解決這些問題。 然而，後者總是通過代碼找到解決方案。
前端 Drupal 開發人員負責通過開發和定制 Drupal 主題來提供漂亮的 Drupal 網站。 他們應該能夠解決前端問題，他們需要具備 PHP、CSS、jQuery、CSS、HTML 以及最重要的移動優先網站設計知識。

隨著無頭Drupal網站和解耦架構的日益流行，了解Angular、ReactJS、Vue.js等前端開發框架的前端Drupal開發人員總是具有競爭優勢。
總而言之，為了能夠在前端 Drupal 開發中脫穎而出，人們需要走出自己的舒適區，學習如何最好地創建和實施配備最新技術的現代數字體驗。