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

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

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

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

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

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

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

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

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

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

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

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

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

老版 Twitter 中推文彈出框

新版 Twitter 中的界面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在 Twitter 早期階段，視覺(jué)設(shè)計(jì)并不是他們的重心?！肝覀冎皇潜M全力地讓產(chǎn)品具備可用性，」Stone 回憶當(dāng)時(shí)的情況：「我們并沒(méi)有試圖讓它看起來(lái)好看……我們只是努力讓平臺(tái)保持活力?！巩?dāng)時(shí)的 Twitter 整個(gè)團(tuán)隊(duì)大概只有30個(gè)人。

實(shí)際上，隨著后面更加專業(yè)的 UI 設(shè)計(jì)師加入進(jìn)來(lái)之后，整個(gè)團(tuán)隊(duì)的設(shè)計(jì)能力也越來(lái)越強(qiáng)。UI 界面是Twitter 和用戶進(jìn)行溝通的媒介。

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

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

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

「用戶肯定會(huì)以為我們不會(huì)仔細(xì)閱讀這些問(wèn)卷，但其實(shí)我們都仔細(xì)閱讀過(guò)了?！筍hah 說(shuō)道。她閱讀到的第一個(gè)用戶需求反饋就是想要更多的表情符，為了應(yīng)對(duì)這樣的需求，Twitter 制作了一個(gè)分組表情輸入控件。同時(shí)，他們還提供另一個(gè)不斷更新的熱門(mén) Gif 圖片表情合集，非常貼合用戶需求了。

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

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

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

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

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

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

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

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