如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

這是一個移動端的時代，Twitter 的移動客戶端經(jīng)歷了很多版本的迭代，但是桌面端的更新改版則非常的克制。

一周之前，Twitter 將接近7年未曾大幅度改版的桌面端頁面，從里到外重新翻新了設(shè)計。

新浪微博的每一次小幅度調(diào)整都會帶來大量的吐槽和不適，更不用說像Twitter 這樣的世界級的社交媒體網(wǎng)站。用戶的不適應(yīng)不理解和負面反饋是避免不了，這樣的大幅更新改版背后，有著這個平臺不得不做的理由。

最近 Twitter 新版背后的設(shè)計師接受了連線雜志的采訪，深入地聊了一下改版背后的考量。

設(shè)計技術(shù)和工具的快速發(fā)展，視覺設(shè)計本身，尤其是 UI 界面的很多具體的執(zhí)行端的工作慢慢的沒有那么麻煩了，但是找到為什么這么設(shè)計的設(shè)計決策，并不是那么簡單。

保持一致：緊跟趨勢的一次重設(shè)計

在整體視覺風(fēng)格上，Twitter 桌面端的設(shè)計給人的整體感知是更加現(xiàn)代的——并且和移動端版本的設(shè)計靠近且保持了一致。這絕對是一個以數(shù)字產(chǎn)品為核心的科技公司應(yīng)該做到的最基本的事情。

原本置于頂部的導(dǎo)航欄消失了，功能性更強的左側(cè)邊欄承載了主要的導(dǎo)航功能。

其中，原本被隱藏的「書簽（bookmarks）」和「列表（LIsts）」是非常實用的內(nèi)容管理功能，在這次改版的時候被直接顯示在側(cè)邊欄當(dāng)中。

而更重要的改變在于，關(guān)于當(dāng)下正在發(fā)生的熱門事件，單獨占據(jù)了右側(cè)的側(cè)邊欄「Trends for you」，大家正在熱烈討論的熱門事件以Twitter 中標(biāo)志性的標(biāo)簽（Hashtags）的形式呈現(xiàn)，相當(dāng)于微博中的「熱門微博」。而這在老版的 Twitter 中，這類內(nèi)容的存在感并沒有那么強烈，原本存在于第一屏的左側(cè)側(cè)邊欄中，并且只有標(biāo)簽，除非你有意識地去關(guān)注和點擊，否則很容易錯過。

搜索欄同樣被挪到了右側(cè)邊欄，置于「熱門趨勢」內(nèi)容的頂部。這一設(shè)計巧妙的地方在于，它暗示了內(nèi)容呈現(xiàn)的邏輯：當(dāng)你搜索內(nèi)容的時候，搜索結(jié)果會直接覆蓋在右側(cè)，而不會占據(jù)中間的主要的信息流。

毫無疑問，新版的 Twitter 在布局上更加扁平了，但是信息的扁平化呈現(xiàn)還不止布局上，交互上也相應(yīng)的變化。在老版的 Twitter 中，當(dāng)你點擊具體的推文條目的時候，內(nèi)容會以彈出框的形式呈現(xiàn)，但是新版中則會在當(dāng)前層中直接擴展開顯示，不會彈出，整體的融合感和有機感會更強。

老版 Twitter 中推文彈出框

新版 Twitter 中的界面

同樣的，用戶在回復(fù)、轉(zhuǎn)推和點贊的時候，也不用在不同的彈出框模式下進行，而是更加直覺地在當(dāng)前的頁面中完成，整體感更強，更加直覺。

用戶交互頻次相對較高的轉(zhuǎn)贊評和「熱門」和主要信息流都不會在彈出框和疊加層控件中完成了，主要信息流也不會被因此而覆蓋，整個 Twitter 因此顯得更加敞亮開闊。

另外一方面，新版 Twitter 提供了更加豐富的個性化設(shè)計的體驗，這也是對于 Twitter 用戶體驗的一次重要提升：

雖然在之前老版的 Twitter 中也可以定制字體大小色彩，但是之前的字體大小是純粹的隨意設(shè)置，這種自由度讓很多并不熟悉的用戶難以控制好文本和色彩的對比度，從而造成了整體視覺的愉悅度較低的情況。

新版中的配色和字體大小都是經(jīng)過調(diào)校之后，比較合理的選擇，這樣擁有了足夠的選擇空間，又保持了整體視覺體驗上的愉悅性的設(shè)計。在產(chǎn)品顆粒度的控制上，Twitter 有著一套成熟精準(zhǔn)的設(shè)計方案。

與此同時，所有人都期待的，深色模式，同樣隨著這次頁面重設(shè)計，一并打包更新了：

對于深色模式的控制，Twitter 和和其他的平臺略有一點不同，他們所設(shè)計的深色模式包括「昏暗（Dim）」和「熄燈（Light out）」兩種，前者的背景色是深灰，而后者則幾乎是全黑。

任何一個社交媒體平臺，大量的用戶涌入進來之后都會面臨著復(fù)雜的管控問題，更不用說 Twitter 這個已經(jīng)存在了13年的世界性的平臺。許多狀況不可能簡單的一刀切來解決。

重設(shè)計背后：設(shè)計解決不了全部的問題

作為平臺，Twitter 已經(jīng)在竭力推動「健康的對話」，但是在充滿分歧和對抗的網(wǎng)絡(luò)當(dāng)中，情緒化是常態(tài)，簡單的依靠 Twitter 官方的帳號來發(fā)聲，并不足以覆蓋如此廣泛的垂直領(lǐng)域和復(fù)雜多樣的用戶群體，以及不同的國家和地區(qū)。

「我們以前經(jīng)常會推出一些新的設(shè)計和小功能。上線之后，過一陣子我們再搜出來，用投影儀投到墻上重新審視，」Twitter 的聯(lián)合創(chuàng)始人 Biz Stone 說：「然后我們會覺得，好像不應(yīng)該這么設(shè)計?！?

「我們的目的是為公眾的對話來服務(wù)的。但是目標(biāo)明確之后，還需要問一個問題：我們真的夠好嗎？」Biz Stone 在采訪的時候，這么說道。正是在這樣一個問題促使之下，Twitter 的改版重設(shè)計就悄然推動起來了。

從左到右分別為 Biz Stone，Bryan Haggerty 和 Mike Kruzeniski 。圖片來自 Wired，攝影師：Samantha Cooper

Twitter 團隊對此選擇了謹(jǐn)慎行事。他們選擇了類似灰度測試的方法，讓不同的用戶參與到不同的「測試」當(dāng)中來，包括不同的書簽?zāi)K的設(shè)計，不同的深色模式，不同的搜索模式，等等。絕大多數(shù)的設(shè)計都正面的，但是它們也并不是爆炸性的。

如今所呈現(xiàn)出來的新版頁面當(dāng)中，絕大多數(shù)的設(shè)計都克制而微妙，以往的很多功能都得到了簡化。「我們正在試圖尋找合適的機會，重新創(chuàng)造更加大膽的設(shè)計，但是它需要一個穩(wěn)固的基礎(chǔ)，所以我們打算從這一次的重設(shè)計開始，從我們最好的功能和服務(wù)開始。這就是基礎(chǔ)?！筎witter 的高級產(chǎn)品設(shè)計總監(jiān) Mike Kruzeniski 面對連線雜志的采訪，是這么解釋他們設(shè)計的初衷。

所以，Twitter 的這次重設(shè)計只是一個開始。對于這個平臺上大量的關(guān)于仇恨和騷擾相關(guān)的負面內(nèi)容，清理起來并不是一套規(guī)則就可以全部解決的，而 Twitter 更傾向于人為來處理和干預(yù)，但是平臺本身需要更好的支持這方面的功能。

在 Twitter 早期階段，視覺設(shè)計并不是他們的重心。「我們只是盡全力地讓產(chǎn)品具備可用性，」Stone 回憶當(dāng)時的情況：「我們并沒有試圖讓它看起來好看……我們只是努力讓平臺保持活力。」當(dāng)時的 Twitter 整個團隊大概只有30個人。

實際上，隨著后面更加專業(yè)的 UI 設(shè)計師加入進來之后，整個團隊的設(shè)計能力也越來越強。UI 界面是Twitter 和用戶進行溝通的媒介。

雖然現(xiàn)在是移動端為主的時代，但是桌面端 Twitter 的重要性并沒有弱化。Twitter 的網(wǎng)頁重設(shè)計項目的負責(zé)人 Jesar Shah 說：「人們在桌面上大量使用 Twitter 來搜尋感興趣的信息，跟他們息息相關(guān)的信息內(nèi)容?！乖陧撁娴淖髠?cè)，有一個快速的賬戶切換的功能，對于這一點，Shah 補充道：「圍繞這個功能點，我們從全球不同的地方獲得了反饋。比如日本就是Twitter 最大的市場之一，當(dāng)?shù)赜脩艋谧约翰煌呐d趣點創(chuàng)建的賬戶，比如一個賬戶專門是關(guān)于美食的，一個是專門關(guān)于旅行的，還有一個則是給自己的寵物貓的。無論你使用哪個設(shè)備，都要能夠快速便捷地切換帳號，這是我們這么長時間的調(diào)研中，聽到最多的一個需求點。」

從左到右分別為 Ashlie Ford，Marina Zhao 和 Jesar Shah ，她們主導(dǎo)了這次 Twitter 的設(shè)計。

「我們需要確保整體體驗足夠優(yōu)秀，所以原則上需要嚴(yán)謹(jǐn)。鑒于我們服務(wù)對象是全球客戶，所以我們需要盡可能滿足不同用戶的訴求。」Shah 和 Ford 所帶領(lǐng)的團隊專門創(chuàng)建了一份調(diào)查問卷，以獲取反饋。他收到了來自全球總計20萬份問卷，F(xiàn)ord 的團隊花了整整一周的時間，借助翻譯工具將其中來自非英語國家的問卷都翻譯出來，并且梳理匯總了。

「用戶肯定會以為我們不會仔細閱讀這些問卷，但其實我們都仔細閱讀過了。」Shah 說道。她閱讀到的第一個用戶需求反饋就是想要更多的表情符，為了應(yīng)對這樣的需求，Twitter 制作了一個分組表情輸入控件。同時，他們還提供另一個不斷更新的熱門 Gif 圖片表情合集，非常貼合用戶需求了。

Twitter 已經(jīng) 13歲了。

在 這個社交媒體平臺上，@realDonaldTrump 可以進行「Twitter 治國」，還有大量的流言和不真實的信息，騷擾和不夠人性化的內(nèi)容。這都是客觀存在的，亟待解決。在今年年初的時候，策展人 Chris Anderson 將 Twitter 比作是正在撞向冰山的泰坦尼克號。的確如此。

但是，設(shè)計改變不了一切。Twitter 的設(shè)計團隊在接受采訪的時候也坦誠地接受了這個事實。但是他們認為，設(shè)計可以幫助他們界定和構(gòu)建 Twitter 功能，并且逐步地幫助用戶來解決身份認同的問題。

「如果你在 Twitter 上問一個用戶，Twitter 是什么，你會得到一千個答案?！筀ruzeniski 說：「曾經(jīng)我們認為這樣很糟糕，但是現(xiàn)在我認為這是一個很棒的事情。因為現(xiàn)在我們可以更好地幫你找到特定的興趣，并且和你的興趣、你所關(guān)注的主題連接到一起?！?

結(jié)語：圍繞人，而不是產(chǎn)品

曾經(jīng)的推特是一個鋪滿木地板，到處都是品牌標(biāo)志性藍色的「鳥籠」式的建筑，但是如今重新裝修過的辦公室則更加現(xiàn)代，墻壁上到處是各種各樣的涂鴉，這些涂鴉代表著Twitter 這個平臺內(nèi)的各種垂直社區(qū)，比如 Black Twitter、NBA Twitter，以及各路名人的粉絲社區(qū)。

走過Twitter 的辦公室，你會清晰地收到這樣的一個信息：一切都是關(guān)于人的，而不是產(chǎn)品。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。