今天，我想給大家分享一些如何設計 Github 的本地 App 的見解，很多人會很驚奇 Github 每天所做的開發範圍居然是這麼廣。我很愛 Ruby and Rails，但并不局限于一種程式設計語言，我們用很多程式設計語言來寫代碼，例如：Ruby, Python, JavaScript, CoffeeScript, Objective-C, C#, C, C++, Java, 甚至 SHELL 和 PowerShell。在設計方面，我們不止開發 Web 應用還包括本地應用，涉及到列印、動畫、圖形等方面，我們還設計郵票、玻璃杯、衣服、名片等等，大多數的設計工作都是使用 Adobe 的産品，我們也用它來設計 Windows 版的 Github。
而 Github for Windows 就是從一個設計的基礎上開始全建立立的。下面是我們的整個設計以及編碼的過程：
盡管存在很多原型設計工具，我還是喜歡用鉛筆和筆記本開始我的設計工作。紙張仍然是一個非常強大的工作理念的媒介。
這是我最原始的關于 Github for Windows 面闆的設計原型，你可以看到我的首個 XAML 模型，包含一些相似的思路。
這是 Cameron 的首個原型：
在這點上，我們還在繼續讨論在這個面闆上顯示什麼内容對使用者來說才是有用的，而且還必須試圖了解 WPF 如何來實作。在 Github 裡，我們使用非常快速的疊代設計過程，有時候我跟 Cameron 一天要對設計評審十幾次，我們希望每個評審和疊代過程能盡快的出結果，最初這種方式可能積壓了大量的未完成工作，但當你學會淡然，你就很難想象其他的工作方式。
這個疊代周期最關鍵的部分是每個人都擁有這個設計，我們不會建立 A/B/C 三個版本然後将它呈現給 CEO 看，我們也沒有專職的産品經理。我們都是以自我形成的小工作團隊來完成，當工作結束時最終的設計就浮出水面。
下面是面闆的最終設計原型，我們有條不紊的針對 Metro 風格對每一個想法進行優化，然後添加更多的 Github 元素。
最後你看到的設計就非常的簡潔和清晰，基于嚴格的 Metro Grid 系統以及内容重于形式。然後我們做了一些來自 Github.com 特有的感覺的内容。從另外的角度來看，也是應用程式和網站之間親和力的一種展現。
WPF 應用程式一個很棒的事情就是你可以使用 Photoshop 或者 Illustrator 來進行基礎的設計。Cameron 做了大量的 Photoshop 的工作，而我将這些設計變成 XAML。當有新元素出現時，我們會一直不斷的重複之前的設計過程。例如，直到我們需要使用的時候，我們才開始設計進度條。
此時，我開始完全送出 XAML 以及 Photoshop 原型作為基準，然後有一半的時間開始花在 Blend 工具和 Visual Stuido 之上。如果你從來不曾使用過任何 XAML 設計器的話，你可以直接編寫XAML辨別并實時檢視最終效果，或者使用調色闆然後觀察 XAML 辨別的變化，就好像是使用 Chrome 的開發者工具即時的改變 HTML 和 CSS 一樣的效果，這樣你會學到更多。
關于 XAML 設計的另外一件不同尋常的事就是樣式的控制，例如标準的 WPF 按鈕外觀如下：
但我們需要對這個按鈕進行美化，通過 style/template 就可以完成，但我們不可能為每個按鈕定義相應的樣式，是以可以定義模闆，然後按鈕繼承該模闆即可。下面是我們重新定義的按鈕：
開始做基本的圖形設計的時候，Blend還允許你做互動設計。在Photoshop中，您可能必須以手動方式設定系列按鈕代表一個按鈕，看起來像在懸停的各種狀态：懸停、按下、正常、禁用、獲得焦點等等。在XAML中這是通過稱為VisualStateManager的東西來支援的，從設計的角度來看，你可以 “記錄” 每個狀态的樣子然後與對象的行為進行綁定。你甚至可以控制不同狀态之間進行轉換的動畫效果。
GitHub for Windows 最引人注目的部分是它完全颠覆了傳統視窗的風格，我們提供了一個小的控制框用來替換傳統的最小化、最大化和關閉按鈕，除此之外的所有東西都被我們幹掉了。
無邊框的視窗使用 XAML 實作方式如下：
<code>1</code>
<code><</code><code>Window</code> <code>xmlns:win</code><code>=</code><code>"clr-namespace:GitHub.Extensions.Windows"</code>
<code>2</code>
<code> </code><code>xmlns:i</code><code>=</code><code>"http://schemas.microsoft.com/expression/2010/interactivity"</code><code>></code>
<code>3</code>
<code> </code><code><</code><code>i:Interaction.Behaviors</code><code>></code>
<code>4</code>
<code> </code><code><</code><code>win:BorderlessWindowBehavior</code> <code>/></code>
<code>5</code>
<code> </code><code></</code><code>i:Interaction.Behaviors</code><code>></code>
<code>6</code>
<code> </code><code>...</code>
<code>7</code>
<code></</code><code>Window</code><code>></code>
我不知道這種無邊框的設計以後會不會大量的在 Windows 平台中被使用，但對我來說，這個5px的邊框以及每個視窗都有的标題欄已經成為過去，完全沒有吸引力，完全沒有必要，而且占據的螢幕的顯示。我不想讓 Windows 8 系統上運作的程式看起來像 20 年前的一樣。而且 Visual Studio 也開始在使用這種風格，是以，我相信 Metro 會受歡迎的。
在 GitHub for Windows 的開發中我們盡可能的使用矢量圖形，這可以讓應用程式與實際計算機的螢幕分辨率無關，同時也可以友善的直接将 Photoshop/Illustrator 的設計直接移到 WPF 中。例如，最大化按鈕是這樣實作的：
早期的 WPF 以及相應架構在性能上飽受批評，現在主要是在一些比較老的電腦上表現較差，因為渲染的問題需要更多的記憶體和處理器效率。
這裡我們給出一些性能方面的建議：将 XAML 檔案編譯成 BAML 二進制格式，可以加快運作時的加載速度。GUI 應用最大的問題就是要對使用者的操作進行即時的響應，我們可以使用 Rx 然後確定不會有堵塞操作。Visual Studio 提供了一些線程相關的工具可用來對線程進行檢查。
上圖顯示的是我應用程式裡所有線程的狀态，一般情況下主 UI 線程是綠色的，而紅色的方框表示正在等待其他的線程。當 UI 線程被堵塞時，對使用者來說就是整個應用無響應，是以你要觀察的是什麼線程被堵塞。
文章較長，可能會有很多翻譯不恰當的地方或者是錯别字等等，歡迎指正。