設計師是時候從基於圖像的設計切換到基於代碼的設計了

已發表: 2021-12-10

基於圖像到基於代碼的設計

為什麼要從基於圖像的設計切換到基於代碼的設計？

自從數字產品設計誕生以來，就一直存在一個大問題。設計師與產品開發過程分離，被迫只使用軟件。

設計師使用光柵圖形或矢量設計工具來繪製圖片，因為它們與組織的其他部分是孤立的。在大多數情況下，即使它們在 Photoshop、Gimp、Sketch 或 Fireworks 等不同軟件中工作，該過程仍然相同。一組靜態圖像作為設計師呈現的意圖發送給工程師。

通過靜態美術板展示界面的不同狀態是極其繁瑣的。因此，設計師沒有詳細說明一切。最終，整個用戶界面由工程師在一組不完整的靜態圖像的幫助下構建。通常在冗長的來回通信中，所有的交互狀態通常都會被消除。

靜態設計不能準確地表示體驗，因此測試通常會讓用戶感到厭煩。正是由於這些低效的流程，組織會導致產品不成功和團隊沮喪。

由於當今技術的發展，我們有了更好的設計方法。基於圖像的設計工具正在迅速被基於代碼的設計工具範式所取代。從矢量設計工具或光柵中提取的設計的靜態表示被渲染設計所取代，其中設計人員直接在代碼中對其進行設計，而實際上並不知道如何編碼。

新的工具集提供了一個新的工作流程，其中：

• 設計師和工程師都建立了單一的事實來源
• 無需任何編碼經驗，它賦予設計人員編碼的全部力量
• 設計師和工程師二人組通過單一的協作創作過程聯繫在一起，創造了壯觀的工作流程演變

用戶界面

這裡的第一個也是基本的問題是，在從基於圖像的設計過渡到基於代碼的設計之前，基於圖像的設計有什麼不好或效率低下的地方。您可能很清楚有兩種設計工具範例，即基於代碼的設計工具和基於圖像的設計工具。

基於圖像的設計工具是一種已經使用了幾十年並且相當古老的方法。設計人員在繪製某些東西時必須構建矢量或光柵圖形，這是這種工具方法的想法。

通過這種方法，設計人員擁有最大的靈活性。從高級插圖到簡單的圖標，一切都可以通過這種方式有效地繪製，包括最美麗的細節層次。儘管在專業數字產品開發方面它通常會中斷。這就是它發生的原因。

1.缺乏互操作性：產品的實際界面，除了照片、插圖和圖標，從來都不是用這些圖形構建的。在基於圖像的設計工具中進行界面設計時，設計人員會在代碼中設置的約束之外工作。正因為如此，他們可以創造出編碼成本高昂的東西，以及以未知方式難以實現的東西。

2.缺乏準確性：除了創造出細節豐富的精彩設計外，開發過程中最不准確的結果往往是使用基於圖像的工具。設計師的作品是用完全不同的過程渲染的。

因此，即使使用相同的規格，設計師和工程師選擇的漸變、文本和顏色代碼也會有所不同。因此，團隊受到了大規模錯位的影響。

3.靜態設計：基於圖像的設計工具的工作流程重點是為最終鏈接在一起的所有界面狀態構建靜態畫板。對於專業項目，這是一種闖入方法。在靜態窗口中，最簡單的模式變得像一個無法管理的下拉菜單。

發生這種情況的原因是缺乏保留交互式組件以實現可重用性的能力以及大量的畫板。最重要的是，這些工具只允許基本交互，而不能為內容、元素狀態、條件邏輯等設置變量。

4. 設計工程協作弱：工程過程與此工具完全不同，無法合併。兩個世界的輸出都與它的本質脫節。

用戶使用的技術是開發人員工作的最終產品，而基於圖像的設計引入了遠離最終用戶體驗的額外抽象層。

由於可重用的交互組件、缺乏真正的交互以及從代碼中導入連接的能力，設計師和工程師彼此之間產生了脫節和沮喪。

網絡開發人員工作

當我們強調從基於圖像的設計到基於代碼的設計的過渡時，了解這種設計的特殊之處很重要。當用戶使用基於代碼的設計工具繪製某些東西時，它會創建相關的 CSS/HTML/JS 並使用瀏覽器。這使得引擎可以直觀地顯示結果。

以下是設計師從基於圖像的設計過渡到基於代碼的設計後的好處。

1. 保真度：當一個人使用基於代碼的設計時，設計師的意圖和可編碼的結果之間存在 100% 的匹配度。要渲染所有設計項目，基於代碼的設計中使用的技術與 Web 開發中使用的技術相同。

2. 消除設計人員和開發人員之間的約束差異：設計人員在基於圖像的工具中可以創建難以設計且無法在代碼中重新創建的東西。這些完全相同的約束條件適用於基於代碼的工具中的設計人員和開發人員。因此，它確保設計人員和開發人員保持同步。

3. 用交互組件代替畫板：基於代碼的設計工具使用組件上最先進的交互來代替鏈接的畫板。這種方法直接使設計師能夠創建高度可重用的交互式設計系統，並且它還模仿了開發。

4. 逼真而強大的交互：隨著從基於圖像到基於代碼的設計的過渡，對象可以相互交互，在屏幕上移動，並創建複雜的圖案。它不需要知道如何編碼，這對於與工程師的協作和與用戶的測試最重要。

5. 創建有史以來最強大的協作：通過基於代碼的範例實現了一種全新的、革命性的工程和設計協作方法。

網頁設計師與網頁開發者的區別