那些開發者需要了解的設計基本原則

Christopher 為設計師們開發工具，最著名的就是 Bohemian Coding’s Sketch. 之前他工作在 Realmac, 設計了清新的 to-do list 應用，然后他就成為了一名自由職業者。他為各種設計和開發的雜志撰文，并且在各種會議上演講。他以自己在設計上面的專長而被業界所知。

</div>

@cjdowner

</div>

介紹(0:00)

我的名字是 Christopher Downer，我是一名設計師。我從事 Mac 和 IOS 應用開發已經有六年時間了。過去的兩年半時間里，我一直在 Sketch 工作，這些你們可能已經知道了。如果你們不知道，Sketch 是一個Mac的向量設計工具。它是一個設計圖標、人機交互、網站、線框和任何在屏幕上顯示的東西的工具。如果這個和你工作的內容很相關，麻煩你自己一探究竟。

設計師需要寫代碼嗎？(1:38)

作為一個設計師，我一直以來能看到一些文章、博客和推文告訴我說：作為一個設計師，我需要知道如何去編寫代碼，我需要知道如何去開發應用。我讀到過許多這樣的文章，而且它們說的沒錯。設計師需要深入了解設計流程，需要對整個工作都有所了解。了解如何開發是一件好事情，因為這可以幫助設計師和開發者們一起和諧地工作。然而，我需要告訴你們一個秘密：我不會寫代碼。

我很想學習如何編寫代碼，我嘗試過好多次。我采用了好多方法。在大學里我就嘗試過學習編程，和一個開發者結對看書和學習在線課程。我試著學過很多語言。開始的時候是 javaScript，然后是 Python，想著 Python 會容易點，還試著學過 Objectiv-C。最近我在學習 Swift。

當深入學習的時候，我發現開發者是非常聰明的人。而我卻不盡然。我知道函數是什么，我也能把握循環的概念，但是我不知道編譯是什么。我不會放棄，我會一直努力。

開發者需要懂設計嗎？(3:28)

“開發者需要懂設計嗎？”這卻是個不太常問及的問題。這是我今天演講的目的。我不是說開發者需要自己設計所有的東西，然后不需要設計師了，這太瘋狂了。然而，雖然開發者不需要處理像素，但是他們的決定總會影響著設計。

有件很奇怪的事，我大概從開發者身上學到的設計知識比我從設計師身上學到的還要多。他們教會了我一些我從來不曾考慮的問題，比如易用性、國際化，符合顏色配置文件，為多個屏幕設計，占位，處理錯誤，安全，第一次運行，邊界情況等等。在我不思考這些問題前，我覺得我根本就不是在設計。大部分時候我只是在讓像素看起來漂亮些而已。

我發現我身邊的開發者都會對視覺和交互設計感興趣。這很棒。然而，許多開發者卻十分害怕設計。他們不知道如何設計，也不知道如何開始。我希望我能揭開設計的神秘面紗，談些設計的基本原則，分享些設計的心得，然后讓你能夠更像設計師一樣思考。希望你們以后能少依賴你的設計師一些。

什么是設計？(5:37)

我準備以最基本的問題做為開始，“什么是設計？”，這是個開起來很明顯的問題。但是我想區分一下“設計”、“UI 設計”和“UX 設計”。

簡單地說，UI 是視覺設計，UX 是交互設計，那么兩者中間的是什么呢？是設計嗎？許多人認為 UI 和 UX 是完全不同的事情，但是在我看來，它們是和諧地存在一起的。我從不會不考慮易用性和交互，只考慮視覺效果。雖然 UI 作為專業詞匯是指的視覺設計，但是它也會被誤用作是說整個設計的過程。

什么不是設計？(7:00)

你知道了什么是設計，也許我們還看看什么不是設計。首先，設計不是個嚇人的、神奇的過程。設計師們不是工作了五分鐘就能給你一個完整的設計規范的。設計師們有許多的因素、問題需要考慮。設計也不是個和開發一起開始，然后在開發結束前草草了事的事情。事實上，設計與開發相輔相成。當然，開發者做的事情遠遠不止編寫代碼，這些事情每個項目都不同，設計也是一樣。

你的設計師一開始會在紙上勾勒出雛形，然后在 Sketch 這樣的應用里面把他們 Mock up 起來。他們把他們在紙上畫的東西轉到屏幕上，然后非常真實地 Mock up 它們。再之后，如現在很多設計師的做法一樣，就會開始原型化。設計師會用 Framer 或者 Origami 這樣的工具來把應用流程可視化起來，然后再設計出交互和動畫。接下來，他們會在設計上不斷地迭代，苛求它、審核它。每次他們都會讓設計比上次更好，所以理想情況下，當項目來到真正實施和測試階段的時候，所有的設計都應該完成了。然而據我們所知，現實不是如此。

一個常見的對設計師的誤解是他們需要是藝術家。許多人認為如果一個人畫一條直線都不成的話，是肯定不能開始設計什么東西的。沒有人天生就是設計師，就像沒人天生是藝術家一樣。所有人都能做這件事情。熟能生巧。

最后，設計師不意味著某種品味。視覺設計上，品味能起作用。但是，交互設計就不會那么主觀了。好的設計是有規則的，好的交互設計的規則更多。

開發者們有設計的問題(10:23)

你可能還沒有被說服你需要知道更多的設計知識。作為一個開發者，你編寫代碼而且你寫的也很棒。你也許有設計師幫你解決問題，但是如果你是個獨立開發者或者在一個小公司里面，你可能就沒有專職的設計師和你一起工作了。他們可能是一周幾個小時的自由職業者，而且他們的時間往往都非常昂貴。不管你在哪里工作，設計師都不會是全職為你服務的。他們會工作在不同的項目上，開發者多而設計師相對少很多。

當你在開發的時候遇到一個設計問題，可是設計師卻不在身邊，你會怎么做？等他們回來？把問題收集起來等他們回來以后一起解決？大部分時候你不能這樣做。最后的期限使時間十分緊張，以至于你不能等他們回來，你需要自己做個正確的決定。

作為一個開發者，你需要填補空白。有的時候這需要猜，但是那不是最好的選擇。你肯定不想讓你的工作是基于猜想的。當設計師回來后發現開發者在沒有他們的情況下完成了設計，他們大都會不高興；這也意味著要增加額外的工作量，因為需要返工。同時，開發者也會有更多的工作量，他們需要重新實現并且測試它們。作為一個設計師，你可能沒有時間考慮一個應用的所有細節和邊界情況。他們沒有開發者那么熟悉應用本身，所以他們往往是在信息不充分的時候做出了決定。

你知道的信息越多，你能節省的時間就越多。當你知道的設計知識越多，你就不再會聽到你的設計師說：“你能讓動畫再流暢點嗎？”或者“把它左移兩個像素。”

設計規則(13:26)

正如我所說，設計不是變魔術，也和個人品味無關。設計被許多的限制和考慮驅動著。蘋果的 Human Interface Guidelines 是個很好的開始。你可以在 iBooks 里面讀到它，這是個很不錯的入門指導。它提及到了許多的基礎知識和設計原則，我會不時地反復理解它們。然后，請注意它們的名字。它們是人機交互的“指導”，不是“人機交互規則”。這些原則十分重要，但不是你一定要遵循的規則。你在設計領域越來越有經驗，你就會越來越容易地擺脫它的束縛。

一致性(14:35)

回到設計本身，沒有什么銀彈或者神奇的捷徑。然而，一致性是個經久不衰的話題。你的應用看起來和 OS 的體驗一樣嗎？你的應用的不同屏幕之間看起來一致嗎？確保你的應用的一致性幾乎就是你自己的規則。通過建立風格指導或者布局網格，你可以實現一致性。但是更為常見的是，你可以很簡單地問自己，“這個顏色和我前一屏的顏色一樣嗎？”，“這兩個元素有同樣的留白嗎？”，或者“這些輸入框對齊了嗎？”

為了構建一致性，你需要訓練自己看得出一致性。擁有一雙設計師的眼睛。一個常用的訓練就是變得非常挑剔和細致，這點你在設計師中非常常見。他們關注細節，他們都有強迫癥。再次強調，沒有人天生就有這個能力，這是你長時間積累形成的。你突然發現在別的應用中，有一個圖標沒有和其他的圖標對齊，或者有一點偏離中心。當你能看出這些事情的時候，你不可能裝作沒看見。這是個可怕的詛咒。但是，當你在設計你的產品的時候，這就是個無價的技能。

空白是你的朋友(16:39)

你可能會把它認為是“空格”或者“無用的空白”，但是為什么它們會重要呢？想象一下，如果 XCode 的 Storyboards 是一些沒有設計感覺的開發者設計的話，它會有一個標準的接口，一個固定的 UX 并且無法定制。它非常有可能變成一團糟，因為元素之間非常近而且難以分辨。這該如何改進呢？

通過增加每個元素之間的空白距離，就會使選中更加容易些。它有空間呼吸。我會增加留白、對齊元素和增加線寬，然后它就會變得更加清晰。最終在屏幕上你能看到的內容少了，你可能覺得這不是個好事。你看到的越少，你就能更加專注。人們常常在同一個時間只能專注一件事情。你的內容可能會超過范圍或者超出屏幕的邊沿，但是移動它就能回到屏幕中心。

不要讓限制來主宰你的設計(19:24)

當你作為一個開發者來設計的時候，你會很自然地想，“怎么樣編碼最容易，設計就怎么來。”這是完全能被理解的事情。回到我準備在 XCode 里面放置 UI 的時候，我不能實現我的設計，所以我修改了我的設計，讓它變得盡量簡單。另一方面，許多設計師根本不考慮這些限制，然后設計出一些根本無法實現的奇怪的東西。作為開發者來說，他們認為的做出合理設計的知識并不是所有人都知道。許多時候，他們也想設計出看起來很棒的產品。過去幾年，我和一些設計師工作過，他們提出的一些想法我都覺得永遠無法實現。

最著名的由開發者設計的全新體驗就是 Loren Brichter 的 Pull-To-Refresh。我不需要解釋 Pull-To-Refresh 是什么；你到處都能看到。如果一個應用里面有時間線或者有可更新的內容的話，就會有它，而且 iOS 的郵件客戶端也使用了它。Loren 是神奇的獨角獸人中的一員，它不僅僅是個優秀的開發者，也是個好的設計師。那時，他正在開發一個叫做 Tweety 的 推ter 客戶端。在老的 推ter 客戶端中，你需要使用上面角落的更新按鈕來更新內容，你需要先滾到最頂端然后按下更新按鈕。作為一個有設計感的開發者，Loren 看到這個行為和交互實在太爛了。他能理解 Pull-To-Refresh 怎么工作，然后他實現了它，發布了它，剩下的就是傳奇了。

這就是個沒有設計師，開發者獨自想出來的交互設計。一個典型的設計師不會想到說你可以通過向下拖動或者向上拉拽來觸發屏幕更新的。

避免使用系統顏色(22:10)

這點有些主觀，但是我發現一個普遍現象是：開發者在設計中采用的色彩都不是十分好看。這是有原因的：他們使用了系統的 VGA 配色。如果一個開發者想在他的設計里面使用藍色，他們會寫“藍色”，或者會用 RGB 顏色 0，0，255。這很快，很容易，但是很丑。和你一起工作的設計師一定會改變這個配色，如果你沒有設計師一起工作，請考慮下自己花點時間調整這個配色。

VGA 藍色不是你常見的藍色。這是個非常不自然的顏色，只會出現在你的電腦屏幕上。如果你不幸使用了一臺 Windows 電腦，它和你的電腦上出現的“死機藍屏”的顏色是一樣的顏色。

說到顏色，你有很多的選擇。例如藍色，你可以使用些不是那么刺眼的配色，也許能多加點綠色。更好的方法是，使用取色器滴管從照片或者圖片中取出顏色。顏色的選取方案很多。如此簡單和直接的方法能改進你設計的配色。

更進一步，文字和其他看起來像黑色的元素也不是（0，0，0）黑。它們是更深的深灰。這樣做的理由是，這可以減輕黑色文字和白色背景之間強烈的對比感。反過來也是成立的：當文字是白色的而背景是黑色的時候，文字更可能是個亮灰，背景是深灰。

如何工作比看起來如何更重要(24:58)

一個有著特別好的體驗和本地接口的應用，即使視覺上不突出也比一個交互很差，但是有著漂亮的定制和酷炫的動畫的應用要好的多。美是很重要的，但是“所有的地方看起來都像股票應用”的體驗是非常糟糕的，而且我也不會使用那樣的應用。如果你打算這樣做，請考慮一下所有的優缺點。首先，還有更好的方案嗎？它們使用起來方便嗎？直覺上這樣做好嗎？當人們一拿起來就能知道怎么用嗎？

繁瑣的工作(25:59)

實事求是地說，最好的方案往往是最無趣的方案。直接的設計每次都會擊敗聰明的設計。很多時候，你必須妥協一些視覺上的要求來增強易用性，但是最后，這都是值得的。在這些限制下，設計是非常有挑戰性的。我常常會發現我自認為看起來十分漂亮的設計都會漏掉一些用戶用例或者功能，然后我把這些都加入到我的設計里面。當設計變得更好用，功能越多的時候，我的設計看起來非常嚇人，因為到處都是額外的選擇菜單和按鈕。我必須盡我所能使這些界面看起來好看些，保證所有的元素都是一致的和對齊的。

這是我作為一個設計師最喜歡的并且具有挑戰性的部分，因為它推動著我不斷前進。我必須得努力工作才可以盡量使我的設計看起漂亮而且好用。

忽視流行趨勢(27:41)

看看 Dribbble 的首頁，然后朝著相反的方向去設計。當下，大膽的動畫和漢堡般的按鈕是設計的兩個大的方向。流行趨勢是暫時的，而且它們會很快地退去。另一方面，堅實的基礎設計原則會更持久些。它們持續的時間長，你的應用也不會三個月后看起來過時。所以基于基礎的原則來設計吧。

質疑所有的事情(28:25)

對自己要求嚴格些，而且反復問自己：“這是一個好的設計嗎？”。對別人的設計嚴格要求是件容易的事，但是對自己就很難了。你需要質疑自己添加的任何元素。需要增加它嗎？它會給界面帶來好處嗎？你需要記住：寧缺毋濫。關于易用性，我總問我自己：“如果我設計了一個應用，然后給我的父母用，他們會用嗎？” 我的父母肯定不是積極的用戶；他們使用 IPhone，僅此而已。如果他們知道如何使用我的應用，那對我來說，這就意味著我的設計是好的是安全的。不然，如果你需要教會他們如何使用該應用，那就是壞的設計。你不可能教會所有下載你的應用的用戶如何使用，所以你得重新審視你的應用。

你需要記住，你對你的應用是了解的，因為你已經是一個開發者或者設計師或者創客了。但是對于那些下載你的應用的廣大普通使用者來說，情況是完全不一樣的，他們對你的應用毫無所知的。

好的設計的秘密(29:58)

沒有什么神奇的捷徑和銀彈，但是好的設計有一個秘密就是 迭代 。你做出了第一版，然后持續改進它，改進它，改進它，直到它完全變好為止。

作為一個開發者來說，這是個可以理解的難事，因為你的時間非常有限。當我還是個年輕的設計師的時候，我總以為我最好的點子就是最初的那個點子。當然我不是說，我有了最初的點子以后就扔在那什么也不再想了。我會一直把這個點子放在腦海里，想清楚所有的優點和缺點，想清楚它看起來怎么樣，想清楚它會怎么工作。我沒有和別人分享我的想法，即使是最小的最不重要的方面。而這實際上是可以激發別人思維的火花的地方。通過和別人分享觀點，得到大家的反饋，然后回到自己的畫板上，這一定會給你的設計帶來改進的。迭代就是這個成功的秘訣，許多大公司和創業公司都會以這樣的文化而出名。

好的設計發生在開發者和設計師的交界處。開發者越早介入設計越好。如果他們參與了設計討論，他們就能夠理解設計是怎么發生的。當設計師和開發者協同工作的時候，他們就會互相理解。他們會一起克服困難，理解他們需要解決什么樣的問題。

任何人都可以成為設計師！(32:28)

從 iOS 7 開始，我就認為設計不是那么可怕了，特別是對開發者還有想成為設計師的人來說。你不需要 Photoshop Pro 來創建逼真、流暢的工具欄和綠色背景。你甚至不需要 Photoshop 來進入設計領域。

視覺越來越不重要了，人們現在認為應用的功能遠遠比界面重要。開發者可以鍛煉自己的設計能力，因為他們有時間這么做。正如我們發現的一樣，迭代是好的設計的關鍵。開發者在開始開發他們的游戲的時候就學些設計的知識，這會促使設計師們不斷地提高他們的能力以免被開發者超過。這真的會促使他們一起創造出更好的產品。

設計師 vs. 開發者(33:47)

雖然我們常常開玩笑，開發者和設計師是兩個星球的人，我們還是因為同樣的愿景來到了這個產業中：那就是為這個世界上的人們創造出偉大的應用和產品。這是我們不可忘記的初心。

設計師需要引領而不是跟隨著設計些東西。在設計決定中，聽聽開發者的意見。說明你做出這樣的解決方案的原因和過程，而不是僅僅給他們一個規范和一些資源。如果你做可用性的測試，也請邀請你的開發人員。開發者們是非常聰明的，他們很快就能學習到什么是好的設計什么不是。如果你是引領者，開發者會在你不在的時候繼續你的好設計，然后慢慢地會越來越好。

小結(35:05)

“開發者需要會設計嗎？”當然需要每一天，他們都做出各種決定來打磨他們的設計。設計不是和開發并行的某個事情，而是貫穿整個項目始末的東西。

一致性特別重要。這意味著視覺的一致性和體驗的一致性。在你的應用或者你的系列產品中還包括和你和操作系統的一致性。

不要為了編寫代碼容易而設計。如果有人沒有按照我設計的來編碼，我定會指出來的，而且我也設計過一些不那么容易實現的想法，并且惹怒了許多開發者。但是最后開發者們都是非常樂意付出額外的精力的，因為他們知道這樣會讓產品更棒。

設計時，直接優于聰明。這會使你的應用更容易使用些。讓你的應用更加易用，忽略那些流行的趨勢，這樣你的應用才會存活時間更長。

嚴苛地要求自己。質問自己為什么要給你的設計添加東西，問問這樣做好處是什么。通過自問，我們往往會觸及到事物的本質。

設計師需要邀請開發者參與設計。越早在項目中這樣做，你受益越大。開發者們會從設計決定中理解背后的原因，然后他們會學習到這些原則。不要只給開發者一個設計的初稿然后讓他們去實現，這樣的話，開發者并不知道設計背后的原因和進程。

最后的忠告： 干凈的 UI 和干凈的代碼一樣。 它是組織好的、一致的而且進無止境。

問 & 答(37:54)

問：我們知道在 Xcode 6 中，他們引入了新的向量格式的圖片，這樣你可以用在不同的屏幕大小的 iPhones 和 iPads。在實際工作中你使用它們嗎，或者你更喜歡為特定的屏幕分辨率設計圖片；比如1倍，2倍或者3倍 X？

Christopher: 保存 PDFs 的輸出是個方法，當然，我想手工素描，這樣文件的大小會小一點。你不需要那些所謂的1倍 X，2倍 X 等等。我認為 PDFs 和向量資源是非常好的東西，如果你在1倍 X，最小的 non-retina 屏幕上設計的話。如果在那看起來不錯，那到當它擴展到其他的屏幕，比如雙倍擴大的時候，你可以保證效果也會很好的。現在很多的設計師都在為2倍 X 設計，它是偶數的像素點，所以但他們的設計縮小一半的時候，我們會看到模糊的線。關于保存 PDFs，我當然要推薦它，確認你是在最小的分辨率1倍 X 上做的設計。然后當你擴大的時候，關于 iOS 2，3 的時候，沒有什么問題的。

See the discussion on Hacker News .

Sign up to be notified of new videos — we won’t email you for any other reason, ever.

</div> </div>

來自： https://realm.io/cn/news/christopher-downer-design-101-for-developers/

</span></span>