如何評價 GitHub 的新黑色 header？

01-05

謝邀。

題主細心，觀察到了這一變化。我也有留意到，我沒有深入思考背後的邏輯。

但是請不要忽視每一次產品的改動，可能是產品經理背後的巨大陰謀。

我個人的猜測是：

為了讓 GitHub 的 logo 顏色（有一部分是黑色）更加深入人心，深入人心了之後，頂部的黑色條可能成為 GitHub 的網站視覺品牌。如果你不理解我說的這個的話，先來請看下面：

知乎的 logo ：

再看看知乎的網站：是不是整體預覽，頂部就是一條藍色？我經常逛知乎，對知乎的這個網站整體預覽的印象就是頂部一條藍色。

有幾次我在不遠處看到設計部的同事經常逛一個頂部是一條藍色的網站。

然後我問他：你是不是經常逛知乎？他說：是的，你怎麼知道？

再回過頭來看看 GitHub：

看看整體預覽的 GitHub，是不是遠處看到一個頂部一條黑色的網站？

我認為這個小小的改動是在做網站的視覺品牌塑造！

有的人認為黑色不太吉利，或者不好看。但是用在這個地方，我個人覺得問題不大。本身 GitHub logo 中也含有黑色，而且代碼的世界，非黑即白！

備註：這麼看來，GitHub 在視覺設計上是不是抄襲了咱們的大知乎呢？

追加內容：Stack Overflow 也有同樣的動作，是不是看到 GitHub 的變化，而故意為之呢？只不過他的橙色條太細，整體預覽的效果不是很明顯。

補充，莫非：

GitHub 的設計師去 StackOverflow

StackOverflow 的設計師去了 GitHub

舊 StackOverflow

新 StackOverflow

如何評價17年2月14日StackOverflow界面改版？ - 前端開發 - 知乎

DennisSnijder/MakeGithubGreatAgain

不喜歡。但是 StackOverflow 從某個顏色換成了黑色，大家適應了。CNode 從淺色換成了現在的黑色，大家也適應了。Ruby China 好像也換過，不大確定。這麼一改也沒違反什麼視覺規範或者交互原則，只是破壞掉了大家的習慣。習慣嘛，可以被那個的。

一勞永逸的方案在此：https://github.com/Justineo/make-github-greater

↑ 本人透明底黑色文字的頭像悲劇了。 ↓

Chrome想還原可以下載 stylish https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?utm_source=chrome-ntp-icon

然後添加一樣式即可，適用於Github、Gist等等。

有些Chrome插件不兼容多個Github子網站，有的是js實現的，有延遲。

親測如下方法是最好的。

記得修改下應用範圍：

如下是CSS樣式：

body .header { padding-top: 12px; padding-bottom: 12px; background-color: #f5f5f5; border-bottom: 1px solid #e5e5e5 }


body .header-logged-out {

    padding-top: 15px;

    padding-bottom: 15px

}
body .read-only-mode-banner {

    text-align: center;

    background-color: #f8e45f;

    border-bottom-color: #f6dc2e

}
body .header-logo-invertocat {

    float: left;

    margin-right: 10px;

    margin-left: -2px;

    color: #555;

    white-space: nowrap

}
body .header-logo-invertocat .octicon-mark-github {

    float: left

}
body .header-logo-invertocat:hover {

    color: #4078c0;

    text-decoration: none

}
body .header-logo-subbrand {

    float: left;

    margin-right: 5px;

    margin-left: 6px;

    font-size: 16px;

    font-weight: 600;

    line-height: 30px

}
body .header-logo-wordmark {

    position: relative;

    float: left;

    height: 26px;

    margin-right: 15px;

    color: #555

}
body .header-logo-wordmark .octicon {

    float: left

}
body .header-logo-wordmark:hover {

    color: #4078c0

}
body .notification-indicator .mail-status {

    position: absolute;

    top: -2px;

    right: 3px;

    z-index: 2;

    display: none;

    width: 14px;

    height: 14px;

    color: #fff;

    text-align: center;

    background-image: -webkit-linear-gradient(#1cafff, #0086ce);

    background-image: linear-gradient(#1cafff, #0086ce);

    background-clip: padding-box;

    border: 2px solid #f3f3f3;

    border-radius: 50%

}
body .notification-indicator .mail-status.unread {

    display: inline-block

}
body .notification-indicator:hover .mail-status {

    background-color: #4078c0

}
body .header-search {

    float: left;

    width: 300px;

    margin-right: 10px

}
body .header .header-search-wrapper {

    min-height: 34px;

    padding: 0;

    font-size: 14px;

    line-height: 20px;

    color: #333;

    vertical-align: middle;

    background-color: #fff;

    background-repeat: no-repeat;

    background-position: right 8px center;

    border: 1px solid #ddd;

    border-radius: 3px;

    outline: none;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);

}
body .header .header-search-wrapper.focus, body .header .header-search-wrapper:focus{

    border-color: #51a7e8;

    outline: none;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5);

}
body .header-search-input {

    display: table-cell;

    width: 99.999%;

    min-height: 26px;

    padding-top: 0;

    padding-bottom: 0;

    background: none;

    border: 0;

    box-shadow: none

}
body .header-search-input:focus {

    border: 0;

    box-shadow: none

}
body .header-search-input::-ms-clear {

    display: none

}
body .header .header-search-scope {

    display: none;

    width: 1%;

    padding-right: 8px;

    padding-left: 8px;

    font-size: 12px;

    color: #767676;

    white-space: nowrap;

    vertical-align: middle;

    border-right: 1px solid #eee;

    border-top-left-radius: 3px;

    border-bottom-left-radius: 3px

}
body .scoped-search .header-search-scope {

    display: table-cell

}
body .scoped-search .form-control.focus .header-search-scope {

    color: #4078c0;

    background-color: #edf2f9;

    border-color: #c6d7ec

}
body .header-nav {

    list-style: none

}
body .header-nav-item {

    float: left

}
body .header-nav-item.active .dropdown-menu-content {

    display: block

}
body .header-nav-item.active .tooltipped::before,

body .header-nav-item.active .tooltipped::after {

    display: none

}
body .header-nav-item .dropdown-menu {

    width: 180px;

    margin-top: 15px

}
body .header .dropdown-menu-sw::after {

    top: -13px !important;

}
/*body .header .dropdown-menu-sw::before {

    right: 8px !important;

}*/
body .header-nav-link {

    display: block;

    padding: 5px 8px;

    font-weight: 600;

    line-height: 20px;

    color: #555

}
body .header-nav-link:hover,

body .header-nav-link:focus {

    color: #4078c0;

    text-decoration: none

}
body .header-nav-link:hover .dropdown-caret,

body .header-nav-link:focus .dropdown-caret {

    border-top-color: #4078c0

}
body .user-nav {

    margin-right: -8px

}
body .user-nav .header-nav-link {

    height: 30px

}
body .user-nav .octicon {

    width: 16px;

    text-align: center

}
body .user-nav .octicon-plus {

    margin-top: 1px;

    margin-right: 1px

}
body .user-nav .octicon-bell {

    vertical-align: text-bottom

}
body .user-nav .avatar {

    float: left;

    margin-right: 5px

}
body .header-nav-current-user {

    padding-bottom: 0;

    font-size: inherit

}
body .header-nav-current-user .css-truncate-target {

    max-width: 100%

}
body .header-actions {

    float: right;

    margin-top: -3px;

    margin-bottom: -3px

}

body .header-actions .btn { margin-left: 5px }

據 Github 設計總監 Mark Otto 在 Twitter 上（ https://twitter.com/mdo/status/830138373230653440 ）跟大家的互動來看，他的解釋是：原來灰色的 header 不夠黑...好吧，我知道他在開玩笑，當然他自己也知道，所以他接著補充到，這麼做是為了顯得有層次感，可以給人耳目一新的感覺。

有哥們覺得風格不統一，便 po 出一張設計圖：

Mark 的回復是這樣會突出三個 header，而不是一個。好吧，他這一條 header 成功吸引了我的眼球。

有人又說這也太吸引眼球了，都使得用戶對內容的關注度反而降低了。這...stack overflow、stack exchange 也都黑了那麼久了，知乎也藍這麼久了，不是也沒啥問題嘛，多看兩眼就習慣了。

我個人覺得應該對 Github 的修改以包容的態度，畢竟這說明他們在積極改進他們的產品，而不是古今一轍，死守原樣。

Mark 有提到後續還會有持續的更新，期待一下。

因為2月14日對於單身狗占多數的程序員群體來說是黑色的一天

我一直以為是我瀏覽器渲染出問題了，直到我在知乎發現了這個問題。

評價：真的不太習慣，看了好幾年突然改了…和下面的白色色調不一致，感覺視覺效果不太和諧。

我還以為是哪個css文件被牆了，下載不下來。真心丑。

不能自定義主題差評！

不能設置背景圖片差評！

以前做界面設計，美工把頂部導航欄設計成黑色。領導看了說像靈堂不好看。美工隨後辭職去北京了。

可以使用 github navbar color 插件移除黑色背景

https://chrome.google.com/webstore/detail/github-navbar-color/aipekmckongnbdmneahofjpbcdpjhgda?hl=zh-CN

Because ONLY Black Matters!

～

題主你真的好無聊。。

挺好看的啊

看多幾次也好像慢慢習慣了，雖然感覺有點不搭

Git 由白變黑，Stackoverflow 由黑變白。

Github CEO R.I.P.

我還以為是我的瀏覽器出問題了，因為進到explore的頁面header又正常了…怎麼看怎麼不像專門設計的，明顯就是有時我的樣式錯亂了的樣子嘛