設計師如何與開發者合作一 什麼是為開發而設計？

為開發而設計是什麼意思？

快點回答我，你的職業叫什麼？

大聲說出來…1…2…3…來吧！

如果「設計師「幾個字出現在了你的回答中，那麼你有一份很特殊的工作。設計師通過融合藝術、科學、數學、心理學和其他的學科來為世界創造產品。

當你想到設計時有許多令人驚嘆的東西。

對於每一個設計嘗試解決的問題，總會存在限制與約束。偉大的設計能夠在不失去有效性的情況下駕馭束縛。

這就是這門課程要講到的內容——更好地理解和操控涉及到設計之中的束縛。特別是涉及到響應式Web的產品。

快速理解專業辭彙

當涉及到Web端的設計和開發過程中，有許多可以互換的描述性辭彙。為了防止混淆，我將使用以下辭彙：

-當我談論「」設計」時，我是指可視化計劃或者一個產品的mockup。這些可以包括輸出的源文件，樣式指南，原型或者任何相關文檔。

-「產品」可以是網頁，app，登錄頁，管理界面，或者任何其他使用html/css作為核心的東西。這些可以包括javascript和任何伺服器語言。不管產品是如何分布，我們假定它需要在多個不同設備和不同尺寸的屏幕上工作。

-「開發」著實施代碼來將設計轉化為產品。

好，那麼為開發而設計是什麼意思呢？

為開發而設計是找到可能減少開發成本同時也能提供優秀用戶體驗的解決方案。

Web應用並不是一步到位的項目。他們需要升級，進化和改變——有時這時非常快的。在做決定的時候，設計師必須考慮設計是如何構建的。一個看起來會讓用戶進行，但卻很難開發的設計並不是一個好的設計。它不過是存在潛在問題的漂亮界面而已。

你的設計可能看起來不錯，但用來創造它的代碼可能一片混論。圖片來自Uwe Kils

為開發而設計意味著要作為一個團隊來行動，而不是僅僅完成某一過程中的一個步驟。

這種的目標是創造一個設計和開發過程都很棒的產品。設計可以提升開發者的輸入，通過設計師的幫助，代碼也可以表現得更好。一起工作並且相互理解能夠及大地幫助達成目標和克服困難。

設計時認真地考慮開發的事情，相當於全方位地理解最終目的，並且更好地做出艱難的決定。

當你能夠從樹中窺見森林時，你能夠更好地找到目的地的方位。而在這裡，你的目的地就是一個優秀的產品。

為開發而設計不是什麼

這門課不是你屈從於開發的批評和反饋的借口，我們也不時在說開發的工作更重要。就像沒有代碼，產品不能存在一樣，沒有設計，產品就不會進入用戶的生活。

設計與用戶體驗決定了產品能否吸引和留下用戶。沒有優秀的設計，最好的網頁和APP也只能期望成功。

事實是設計往往最先開始。所以知道什麼樣的工具和技術將會用於執行你的設計，會有很大的影響。

期望開發人員知道如何使用ps來修飾圖片並沒有什麼用。因為到他們開發的時候，他們往往會直接把最終的圖片添加到頁面。

相反的，如果你知道如何縮小圖片尺寸並提升品質，這可以幫助提升產品質量。你可以考慮在做你自己的工作時幫助他們完成這些工作。但是這在別的方面不能起到作用。

你是架構師。如果你知道開發者最終如何建構你的應用，這對所有人都有好處。

本課程只在幫助您與開發人員更好地合作完成設計。沒有說明的是你的首要工作是為用戶記性設計。你知道這一點，你也擅長這一點，你不需要從我這裡再聽到它。這門課的目標是幫助你擁有更全面的視角，從而讓你所做的每一個設計的決定都可以去提升產品。

當你要做任何設計決策時，檢查這些簡單的原則：

當這個設計對用戶有明顯的好處時，使用它。如果它絕對能提供一個更好的用戶體驗，那麼就不要被開發人員說服取消它。

舉例：如果您網站上的錯誤信息需要用不同的顏色、特定的字樣顯示，並且需要與表單元素放在一起使用以免被忽視，而不是簡單地在頁面頂部顯示通知消失，那麼，讓這個設計實現。在最開始所做的多與工作是多餘的，為了產品的成功。

問問你自己如何幫助實現這個設計。使用任何可能的資源和事實來解釋你的立場。但不要應為開發的困難就讓用戶受罪。

研究是否有一種方法可以創建類似的效果，且同時兼顧了用戶體驗與代碼庫。很多時候，你想完成的設計可以通過類似的但是相對更容易實現的方式來解決。尋求開發人員的幫助。他們那邏輯性強的大腦可能會想出比相對你原先計劃而言，對用戶和代碼實現都更有幫助的辦法。

舉個例子：就上面提到的有關錯誤消息的標記，也許可以將錯誤的消息分類，給每一類錯誤消息不同的代碼顏色作為替代方案。而不是對每一個輸入都提供自定義消息和顏色。可能這裡會有3類信息，每一類有自己的顏色。這就允許在開發者更好地組織和再利用代碼的同時，設計對用戶而言仍然是清晰地。

選擇項目的設計元素時，儘可能使用代碼可以重用，一致和簡潔的樣式。你的警告信息顏色是否可以選用公司品牌黃而不是經典黃呢？這兩者都向用戶傳達了警報的性質，但是使用其他元素中已存在的顏色可以降低代碼的複雜性，並使得代碼更加清晰。

接下來是什麼內容？

整個課程我們會討論高層級的知識、技巧和在為開發而設計時需要避免的陷阱，這些包括：

-在開始設計之前需要詢問開發人員的問題

-設計過程中詢問開發人員的問題

-如何在設計中設置「規則」,從而保證一致性、開發友好與用戶友好

-如何負責響應式設計

-你為什麼要使用web font

-為什麼應該避免食用自定義形狀，需要什麼來替換他們

-關於將運用到你的網頁的框架和技術，你有哪些知識需要了解。

你很快就會掌握我多年來形成和內化的知識。下一章中我們將告訴你你需要詢問開發人員的問題，希望你感到些許興奮！

See you then!

小結：

為開發而設計的關鍵是考慮設計要如何去構建，從而提高最終產出的產品質量

這意味著你需要跟開發者以團隊的方式去工作，從而找到解決設計問題的最好方案。

當面對一個設計決定是，讓以下過程在你的腦海中運行一遍：

1.這是絕對能為用戶帶來好處的嗎？如果是，實現它。

2.是否有一種方法可以創建類似的效果，同時也能兼顧用戶體驗與代碼庫？

3.當沒有給用戶帶來明顯好處是，選擇可以讓代碼庫更加可重複利用、一致、簡潔的設計。詢問開發者你如何可以做到這一點。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！