李凱文（ Tower設計師）：在互聯網行業工作的想必都多多少少聽說過GitHub的大名，除了是最大的開源項目托管平臺，許多企業也都是用GitHub來協同開發工作，當然我們彩程也是其中之一。筆者最初決定學習Git也是因為在團隊內部設計方案初步被開發出來后，難免會有一些細節需要調整，而為了調整幾像素的問題再求前端工程師出馬，其實是很影響整體效率的，所以希望通過學習GitHub好在必要的時候直接參與開發，能發揮自己的一點CSS技術以更直接快速的解決問題。

但是期間竟然發現網上無一篇為設計師而備的Git教程，典型的，幾乎沒有一個教程講了GitHub的官方應用，而都是圍繞命令符做教程，對就是DOS那樣的命令符界面，這對于設計師和產品經理等非技術背景從業者來說多少有些難于上手，所以筆者打算結合個人體驗，自己動手寫一篇以使用網頁和客戶端為主的GitHub教程（暫時先僅以Mac版客戶端為例），希望它能幫助大家以最快速度熟悉并逐漸開始使用GitHub。

為什么要了解GitHub

在開始之前，還是得說說為什么GitHub值得設計師學習。除了開篇所講的例子，可以將自己所了解的一點CSS或開發技能發揮出來，降低團隊合作中的溝通成本。這本質上還是設計師是否應該學習開發或學習到什么程度的問題。不過我一直認為這沒什么可探討的，只是每個人不同的選擇和追求。就像有些人是想成為家具設計師，有些人是真想親手打磨出自己心中最理想的那一把椅子；有些人想成為建筑設計師，有些人只想在山腳下為家人蓋一座完美小屋。同樣，如果你是真的熱愛這個日新月異的行業，沒準某天也要自己創造點什么，我想你一定會毫不猶豫的開始學習。

什么是Github

按慣例，還是先簡介下究竟什么是Git（有基本認識的同學可以直接跳過）。讓我們摒棄那些專業名詞，用設計師工作中經常遇到的情況來介紹什么是Git：

? 你出了一版方案A，在大家討論后，你改到B，結果再討論，大家覺得還是不如用A，這時發現A沒有另存，還得再改回去！在GitHub中就不用擔心，它會記錄你提交的每個版本，并把這些都放在一個倉庫（Repository）里，而每一次提交改變就是 Commit，你可以隨時回退到任意一個版本。

? 此外你還很可能遇到方案衍生的情況，在方案A的基礎上，改出了一種方案B，又改出了一種方案C，可能還分別衍生出B1、B2及C1、C2，在GitHub里有分支（Branches）可以記錄這種方案的分化過程。

? 后來你覺得B1和C2方案中都有可取的地方，把它們融合一下就可以輸出終稿了，Git里當然也支持這種分支合并（Merged）。

當你個人使用Git，涉及的基本概念就這么幾條，是不非常簡單呢。下面我們來看看多人協同，也就是Git真正厲害的地方，當然也不復雜。

? 在稍大的團隊中，可能需要幾個設計師合作完成一個方案，怎么樣統一進度呢，一種就是大家每天把文件拷在一起，這需要經常浪費時間去同步文件，顯然很不方便。另一種是每個人電腦里都留一份，需要時就和云端服務器同步，Git就是采用這樣的所謂分布式系統。好處是更安全，也更便捷。

? 那么問題也就來了，如果大家都改同一個東西，萬一沖突了怎么辦？不用擔心，Git會幫你對比并告訴你哪里有沖突了，你可以逐個對沖突的地方做出抉擇。此外，前面不是講到可以衍生出分支（Branches）么，在大家各自推進方案的時候，分別把內容放在不同的分支里，就不會相互干擾了。

? 開源的項目是任何人都可見，你可以Fork一個項目，這相當于在你的賬號下從原項目新建了一個分支，你可以在此基礎上改動，如果有希望提交給原作者的成果，可以發合并申請到原庫（Pull Request），原作者可以看到通知并決定是否合并。通過這種方式，大家就可以合力將某個開源項目變得更好。

最后我們還得明確一下概念，Git和GitHub有什么區別，引用知乎上Fluyy的解釋“git是一個版本控制工具，github是一個用git做版本控制的項目托管平臺。”這有點類似于Wordpress和Wordpress.com的關系，前者是一個任何有都可以用的免費博客系統，后者是一個平臺，在這個平臺上你可以通過注冊來直接使用Wordpress寫博客。

說到這里我想你已經對GitHub是怎么回事有了基本的認識，下面就讓我們擼起袖子，以一個簡單的案例來看看GitHub到底是怎么使用吧。

案例學習：做一遍全明白！

我們以Fork一個項目，做出自己的修改并提交給原作者的任務作為基本案例，下面跟著我一步一步來吧，網快手快的同學幾分鐘就可以搞定啦。

第一步：注冊一個GitHub賬號并登錄

這個流程就不說了，完成后可以下載GitHub官方App，并登錄。

第二步：Fork倉庫

點這里打開我用馬甲專為本教程建立一個庫 Designers-Learn-Git，可以看到創建者名（我的馬甲）寫在/前面：Tower-KevinLi。然后點擊右上角的Fork按鈕。

完成后你會發現跳到一個新的頁面，Tower-KevinLi變成了你的GitHub賬戶名（cnkevinlee是我的另一個馬甲…），這表示你的賬號下已經“復制了”一份Designer-Learn-Git，然后你就可以做修改了。

第三步：修改文件

可以看到Designers-Learn-Git這個倉庫里只有兩個文件“README.md”（項目說明）和“花名冊.txt"，這里我們只需嘗試修改后者（道理和修改有很多文件的倉庫是一樣的）。可以直接在線修改，也可以先克隆到本機再修改，對于比較復雜的項目肯定是要采取后者，不過這里我們可以先看看在網頁上直接修改怎么操作。

在線修改：直接在頁面上點”花名冊.txt“的名字，進入如下詳情頁，再點擊”Edit“。

這里設計的任務內容是在花名冊上隨便寫寫你的ID和Tiitle，初衷是能通過這個和學習這個教程的同學有一個互動，看看你能排到第幾位。

在編輯頁面編輯完后，滾動到頁面底部，點擊綠色的“Commit Changes”按鈕確認提交。

本地修改：另一種辦法是把項目克隆到本地后再修改，打開客戶端（這里以Mac最新版為例），點擊右上角的“+”號，切換到“Clone”，找到“Designers-Learn-Git”后點擊右下的“Clone Repository”按鈕。

然后從本地找到克隆的文件夾，打開“花名冊.txt”，編輯并保存。這時再切換到GitHub應用的窗口，你會發現它在“Changes”頁已經檢測到并列出了你的改變，然后點擊Commit & Sync按鈕，將修改提交并同步到GitHub。注意，提交和同步是兩個動作，需要先將下圖那個綠色的按鈕激活，這兩個動作才會同時執行，否則你就需要在提交后再點整個界面右上角的Sync（適用于做出多個修改后統一提交的情況）。

第四步：申請合并

在確認已經對自己Fork了的倉庫修改成功后，你可以將提交合并申請，申請將你的版本合并入最初的項目也就是我創建的 Designers-Learn-Git，步驟如下：

在網頁上打開你Fork的Designers-Learn-Git的頁面，點擊這個醒目的綠色按鈕。

再點擊“Create pull request”按鈕，提交申請，完成后我會收到通知，并將你補充的內容合并入原庫。

注意上圖圈紅的地方顯示了要合并的兩個分支，由于沒有新建分支，這里就默認顯示兩個庫都僅有的Master主分支，你可以嘗試新建分支，并選擇其它分支申請合并，體驗GitHub的分支功能，本文作為入門教程這里就先不贅述了，有問題的同學可以聯系我。

圖片對比功能，設計師的真愛！

做完前面的案例，你會發現GitHub可以直接對比文件間的改動，但也僅對程序、文本文件有效，可我們設計師都是靠圖吃飯啊！好了別急，GitHub一直在努力提升設計師的使用體驗，并且已經實現了很好的圖片對比功能，當然直接上傳可能巨大的PSD源文件不太現實，但我們可以對比導出后的版本，點擊這里看看Demo吧。

GitHub的圖片對比工具提供了三種對比方法幫你找不同，我們來挨個看一下：

2-up：就是直接并排放在一起對比，會顯示尺寸：

Swipe：是將兩個圖摞在一起，通過拖動，改變上面的圖的顯示大小，用戶盯著拖動線附近的變化就可以快速發現區別了，如圖，當拖到貓眼附近就很容易看出一個戴了眼鏡。

Onion Skin：也是將兩個圖摞在一塊，圖下方有一個拖動條，控制上面一張圖的透明度，這樣在拖動改變透明度的時候，就能感覺到有區別的地方了。

GitHub使用拓展：能做的遠不止這些!

用GitHub協作翻譯

蘋果發布Swift語言，號稱更加容易上手，讓很多設計師都躍躍欲試。官方同時發布了（翻譯成中文后）達300多頁的官方手冊，而國內一個自發組織起來的團隊，30多個人用9天時間即將翻譯和校對工作全部完成，他們每人都還有自己的事情，上班、上線、創業，然而借助GitHub他們僅用業余時間在這么短的時間內就完成了這一壯舉。他們的口號是“這一次，讓中國和世界同步”

點這里可以看到他們的項目和翻譯成果。

用GitHub寫書

說到了前一個例子，就不得不提GitBook，一個結合GitHub和Markdown來制作精美在線讀物的工具。你可以自己或和任何人合作，編著一本在線書籍，還能夠銷售，當作家不再只是夢。

用GitHub進行項目管理

GitHub最初是為了開發的管理而生，當然也就具備了項目管理的潛質，特別是與開發密切聯系的項目中，它的優勢盡顯。這幾篇文章介紹了如何使用GitHub結合其它工具進行項目管理：《Using Github for Project Management》、《使用GitHub進行團隊合作》。

用GitHub搭建博客、個人網站

一個在線的個人頁面，獨立博客，幾乎是每個設計師的必備。過去，要自己租空間、安裝網站程序，搭個人網站，是個耗時又好錢的事。而GitHub本身提供免費的托管服務，又提供了貼心的Pages功能，可以綁定你自己的域名，讓這一切就水到渠成了。免費、高效、不限流量，做一個個人頁面綽綽有余，比如前兩天碰巧看到的這個例子：jianglai.me。不過其實很多工程師都已經在GitHub上搭建了自己的博客，設計師們也快跟進吧。

推薦一些相關教程：

? 《通過GitHub Pages建立個人站點（詳細步驟）》

? 《如何搭建一個獨立博客——簡明Github Pages與Hexo教程》

? 《搭建一個免費的，無限流量的Blog----github Pages和Jekyll入門》

更多進階教程推薦

鑒于本文只是一篇拋磚引玉的入門教程，就不再詳述更多的細節，如果對Git感興趣的同學，可以看看下面這些，它們可以幫助你成為一名專家、至少是設計師中的Git專家 ??

? 《git-簡明指南》

? 《Pro Git》

? 《Git Magic》

? 一個學習Git的在線互動教程

? 知乎上關于GitHub學習資料的問題

當然這也許不是最好的GitHub入門教程，但一定是最適合設計師的，希望它能幫助你快速的入門了解這一程序猿們整天掛在嘴邊的東西。文中如有不恰當之處請之處，有不清楚的地方也歡迎聯系我 @彩程-Kevin 討論。

當然，GitHub只是技術世界的一個小支脈，問題的根本，還是設計師對于技術的學習，如果你是個不滿足于繪圖工具，想做Geek的設計師，歡迎加群 302258924 交流。

下期預告：《GitHub+開源響應式Web模板，最快速、最低成本搭建個人主頁》

投稿者：@彩程-Kevin

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量73萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：