twitter設(shè)計(jì)細(xì)節(jié)舉例分析

這篇文章主要介紹“twitter設(shè)計(jì)細(xì)節(jié)舉例分析”，在日常操作中，相信很多人在twitter設(shè)計(jì)細(xì)節(jié)舉例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”twitter設(shè)計(jì)細(xì)節(jié)舉例分析”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

Twitter大規(guī)模改版已經(jīng)過去一段時(shí)間，但自己早已習(xí)慣使用第三方客戶端，幾乎沒有認(rèn)真的使用和思考過它的重設(shè)計(jì)，直到前兩天客戶端遇阻，不得不爬上Twitter，才注意到一點(diǎn)點(diǎn)細(xì)節(jié)。先讓我們看看一切平靜時(shí)的頂部頁面：

 
圖1：平靜的界面

如果從未獲得過焦點(diǎn)，上圖甚至連輸入框也會(huì)更簡潔（有趣的是，一旦獲得焦點(diǎn)，即使再失去，輸入框也會(huì)維持在如上圖狀態(tài)）。然而，對(duì)于實(shí)時(shí)系統(tǒng)，真正有趣的是當(dāng)新的消息到來時(shí)：

 
圖2：掀起漣漪的界面

剛開始，只注意到類似“7 new tweets”的信息提示。遲鈍許久，才發(fā)現(xiàn)“Home”導(dǎo)航條目下似乎有個(gè)泛藍(lán)的亮點(diǎn)，這是設(shè)置的背景一部分？

那么為什么Home下面也要用visual cue來提示新信息的“到達(dá)”呢？有這個(gè)必要嗎？比起直白、明顯而毫無歧義的“7 new tweets”，這亮點(diǎn)不是很莫名嗎？我當(dāng)即非常自大的將其解釋為Twitter的設(shè)計(jì)人員濫用視覺提示，然而不到半個(gè)小時(shí)，我就徹底推翻了自己的推斷。

為什么我要否定自己呢？因?yàn)橐粋€(gè)人想要偉大，就必須學(xué)會(huì)否定自己？

 
圖3：下拉的界面

當(dāng)我下拉頁面到圖3所示時(shí)，“7 new tweets”的“主顯區(qū)”早已被拋在了“此時(shí)”，而我則隨著鼠標(biāo)回到了12分鐘前（Twitter果然是“時(shí)間機(jī)器”）。那么要怎樣才能知道自從離開消息提示的“主顯區(qū)”后，新信息的到來呢？上翻到主顯區(qū)？抬頭看看導(dǎo)航欄的“Home”。

突然之間我認(rèn)為多余的設(shè)計(jì)元素向我無情的嘶吼起它的意義。因?yàn)門witter的重設(shè)計(jì)將導(dǎo)航欄fixed在了viewport的頂端，于是這么一個(gè)“附著”在“Home”下的亮點(diǎn)成就了新信息提示的“次顯區(qū)”，跟隨我們的時(shí)間軸，隨時(shí)提示新信息的等待，這很重要，因?yàn)樗菍?shí)時(shí)性產(chǎn)品，就需要以某種方式表達(dá)這一特性。

但這并不是沒有問題，我們要如何查看新信息？點(diǎn)擊Home？翻回主顯區(qū)？我們是否考慮過，點(diǎn)擊Home與點(diǎn)擊主顯區(qū)的意義本是不同的，點(diǎn)擊Home是重新請(qǐng)求整個(gè)頁面，那么頁面上其它實(shí)時(shí)元素也會(huì)發(fā)生改變，例如趨勢、推薦用戶等；而點(diǎn)擊主顯區(qū)，則僅僅是請(qǐng)求新信息，而不影響頁面的其它實(shí)時(shí)元素。

于是，我的些許疑問：

開關(guān)與數(shù)字

這樣說是否很莫名？我們把亮點(diǎn)的呈現(xiàn)與否作為邏輯的開與關(guān)：開燈，有新消息等待；關(guān)燈：無新信息到來。這是Twitter的“次顯區(qū)”采取的策略。

那么如果用數(shù)字呢？這應(yīng)該很容易，只要和主顯區(qū)的數(shù)字使用同一變量，沒有新消息就直接顯示0，或者“關(guān)燈”。問題在于：為什么？為什么要用數(shù)字換開關(guān)？“次顯區(qū)”的作用是什么？它與“主顯區(qū)”有什么不同？提示用戶有信息等待，還是提示用戶有多少信息 等待？這兩者有區(qū)別嗎？如果有，會(huì)影響用戶的認(rèn)知負(fù)擔(dān)和行為嗎？更有趣的是，因?yàn)榇物@區(qū)是與“Home”導(dǎo)航條目“合并”的，如前面提到的，這會(huì)影響到用戶對(duì)“Home”的理解，甚至整個(gè)導(dǎo)航條的理解嗎？

次顯區(qū)的作用是什么？當(dāng)主顯區(qū)離開Viewport，而有新消息到來時(shí)，給予我們提示，我們可以由此決定是上翻到主顯區(qū)，還是直接按下Home。如果我們用數(shù)字呢？那么當(dāng)主顯區(qū)與次 顯區(qū)共存時(shí)，就會(huì)有同一數(shù)字兩次提示。這一點(diǎn)或許有點(diǎn)奇怪，我們可以接受不同形式的冗余視覺提示，例如我們將標(biāo)題加粗的同時(shí)還要改變字體，但如果是具體文字與數(shù)字的提示重復(fù)，卻會(huì)引起我們的反感。而當(dāng)僅有次顯區(qū)存在的情況下，它提示新消息的到來同時(shí)，也暗示了Twitter本身的“實(shí)時(shí)”屬性，如果再考慮 界面整體的清晰、功能主次，在這一點(diǎn)的設(shè)計(jì)上選擇“開關(guān)”從我的使用角度來說是更適合的決策。

你或許會(huì)想，一旦點(diǎn)擊Home，我們在不知有多少新消息的情況下更新會(huì)跟用戶帶來困難。一方面，下面一點(diǎn)說到，精確的數(shù)字在這樣的情況下給予我們的是無法言狀的心理作用，很大程度上需要的還是我們的記憶來輔助；另一方面，文章后段提到視覺提示時(shí)，一種思路或許能夠解決這個(gè)問題，還請(qǐng)耐心。

那么主顯區(qū)的數(shù)字有意義嗎？為什么不簡單說聲：嘿，你有幾條新消息了，或者，你有好多新消息了…這個(gè)我真沒讀到過相關(guān)研究，不過一種常見的心理或許能夠給出一些答案。數(shù)字的“精確”表象能夠給人確定感，把握、控制感。雖然我們不會(huì)數(shù)著1、2、3來讀條目，但知道將要面對(duì)一個(gè)精確數(shù)目，比起心里沒底的讀到某條舊信息而止，讓用戶擁 有更多確定感：一切盡在掌握！哪怕兩種情況下我們都是靠著記憶告訴我們新舊的界限。當(dāng)然，如果出現(xiàn)GReader里很多人遇到的“1000+”的情況， “精確感”恐怕只能轉(zhuǎn)化為“無力感”甚至“恐懼感”了。

說來說去，設(shè)計(jì)在每個(gè)層次都要確定主次，決策需要取舍。實(shí)時(shí)應(yīng)用所要考慮的一大維度就是時(shí)效性。當(dāng)然，咱們也可以從位置關(guān)系，從Fitts’s Law的來解釋，這就不提了，既然它是主，而“燈”是次，不能說狠狠地來句deal with it，而是design with it。

邏輯適用局限性

“次顯區(qū)”的提示僅僅在主頁 有效，而當(dāng)我們離開主頁，例如去“Profile”，或“People”頁面，即使你有信息更新，次顯區(qū)也不再有效，準(zhǔn)確的說，50%有效。即你是“開 燈”狀態(tài)離開，那么Home下面的燈永遠(yuǎn)是開的，無論此時(shí)信息是否更新，“開燈”狀態(tài)都是“正確”的，而如果我們是“關(guān)燈”狀態(tài)離開，那么此時(shí)所有信息的 更新都無法在“次顯區(qū)”得到展現(xiàn)。

于是在這時(shí)，這盞燈的意義就不完全如前所述了，它并不完全代表你上次查看信息后的更新狀態(tài)，而只在你停留在主頁面的狀況。如果是這樣一個(gè)邏輯，那么或許就需要質(zhì)疑將其與“Home” 合并是否是一個(gè)合理的決策了。如果我們將Home增加了這么一個(gè)更新提示功能，那么其它導(dǎo)航條目呢？我都知道這樣的***導(dǎo)航條目是全局性，即全站內(nèi)有效 的，這也算是互聯(lián)網(wǎng)用戶的一種隱形常識(shí)。那么***導(dǎo)航的功能是否也該全站內(nèi)有效呢？至少Twitter的這盞燈不是。

雖然Twitter將導(dǎo)航欄設(shè)置為Fixed，從頁面呈現(xiàn)（CSS）屬性上給了“次顯區(qū)”一個(gè)視覺上合乎邏輯的棲身之地，但從更大范圍的流程邏輯來說，這是有很大“瑕疵”的。

更多的視覺輔助

如果單從Twitter的Home頁面來說，我簡單把它分為三個(gè)維度：時(shí)效 、話題 、人 。這三者是相互交織的，每一條推的三個(gè)核心屬性即話題（內(nèi)容主旨），時(shí)效（發(fā)表時(shí)間，更重要的，與其他推在時(shí)間軸上的關(guān)系），以及人（發(fā)表人，人的屬性自然更多）。每個(gè)維度我們當(dāng)然也可以細(xì)分下去，但這不是我要在此探究的。

僅僅針對(duì)Home頁面，時(shí)效上，每條推按時(shí)間軸線性隊(duì)列排列（當(dāng)然，這與Twitter回復(fù)等機(jī)制在聯(lián)系結(jié)構(gòu)上的極簡有關(guān)，相比之下新浪微博倒是可以在時(shí)間軸上有很多探索，這個(gè)有機(jī) 會(huì)再討論）。然而，既然已經(jīng)提供了“時(shí)間錨點(diǎn)”——OK，稍微解釋一下，我所謂時(shí)間錨點(diǎn)，即主顯區(qū)“堆積”的推在時(shí)間軸上的起始與終止時(shí)間點(diǎn)——那么當(dāng)用 戶在點(diǎn)擊主顯區(qū)后，這些“新信息”為什么不能用高亮方法（前景，背景，或圖形）輔助用戶呢？

也正是因?yàn)闀r(shí)效性，采用高亮就自然需要考慮從“褪色”到“常態(tài)”，告訴用戶“信息已老”。我們可以選擇計(jì)時(shí)結(jié)束時(shí)，也可以是計(jì)時(shí)結(jié)束前用戶點(diǎn)擊下一批新信息時(shí)。不過，怎么計(jì)時(shí)？如果 規(guī)定每條推有一個(gè)閱讀時(shí)間常量，然后乘以新信息數(shù)目，可行嗎？一種情況是，我點(diǎn)擊一條鏈接走了，讀完了相關(guān)資料才回來，這有常量可循嗎？

事實(shí)上，上面這個(gè)“閱讀時(shí)間常量“的想法是混淆視聽，我們說的時(shí)效性，不是相對(duì)于用戶花費(fèi)時(shí)間，而是相對(duì)信息本身。哪怕一條昨天的信息存在“主顯區(qū)”里，被用戶作為“新”信息點(diǎn)擊出 來，它仍然是“老”了而不該被加亮，因?yàn)樽鳛門witter這樣的實(shí)時(shí)應(yīng)用來說，它的核心價(jià)值就在于信息的時(shí)效性。

沒錯(cuò)，用戶的確會(huì)有不同需求，例如某一話題中RT次數(shù)最多的條目，某人言論中RT次數(shù)最多的條目（這可以叫做“名人名言”條目？），或者某一特定時(shí)間段的話題、人等，這些都可以提 供相關(guān)功能與對(duì)應(yīng)界面。如果確有人把Twitter當(dāng)作Google Reader里的文章一篇篇閱讀，那么也可以信任諸如TweetDeck這樣的第三方提供“已讀/未讀”標(biāo)簽。但作為Home頁面，時(shí)效永遠(yuǎn)是主題與重點(diǎn)。

所以，如果有時(shí)間常量，那么這個(gè)常量是根據(jù)當(dāng)前時(shí)間與信息發(fā)布時(shí)間的差別而定：5分鐘，從高亮過渡回“平淡”。

 
圖4：頁面的時(shí)間過渡

從CSS實(shí)現(xiàn)來說如圖4所示的gradient也不復(fù)雜，無論是用圖片還是CSS3的gradient屬性：將新信息中5分鐘內(nèi)以及***個(gè)超過5分鐘的信息（如果有的話）“包裹”在一個(gè)div內(nèi)實(shí)現(xiàn)背景的gradient。（如果新信息的歷史均超過5分鐘自然更省事，什么也不用干。）

圖4的Gradient效果只是一個(gè)示例，它用色彩漸變來提示時(shí)間流逝，如果考慮使用texture呢？

信息的時(shí)效性***的對(duì)比或許就是報(bào)紙了。如果我們想想一張報(bào)紙從剛剛印刷出廠，到***散落在街角風(fēng)吹雨淋到漸漸消逝，那么Twitter新信息可以展現(xiàn)在類似一張油墨印跡濃重的嶄新紙張這樣的背景質(zhì)感上，而隨著時(shí)間軸的回溯，逐漸變成發(fā)黃褪色的舊報(bào)紙的質(zhì)感...

岔開一點(diǎn)，如果我們從“報(bào)紙”這個(gè)metaphor延伸下去，Twitter提供的“favorite”或者說“收藏”功能，就好像一位報(bào)紙讀者每天剪下特定的故事、新聞，收集在一起，甚至制作成scratch book，分享給到訪的朋友，或者輔助他的寫作（如果我們制作一個(gè)persona，將他定位作家的話）。由此我們可以得到怎樣類似的Twitter讀者故事？而由此展開怎樣的設(shè)計(jì)概念呢？我想你已經(jīng)有所想法了，至少在我腦海里已經(jīng)有了不少。

另一個(gè)視覺提示區(qū)域是Trend。Trend直接與話題相關(guān)：

Twitter的Home頁面所提供的Trend是自動(dòng)定時(shí)更新的，然而我的問題有三點(diǎn)：

◆趨勢是何時(shí)更新的？Why？

1，Twitter服務(wù)不穩(wěn)定，如果數(shù)據(jù)請(qǐng)求失敗，用戶面對(duì)界面是很難察覺的。時(shí)間上的提示可以讓用戶意識(shí)到趨勢的 “時(shí)效”；

2，A Sense of Control；

3，提示Twitter對(duì)時(shí)效特性的強(qiáng)調(diào)，every minute counts！

◆什么話題是剛剛擠進(jìn)頁面的？Why？特別是對(duì)于剛剛進(jìn)入頁面而沒有“跟蹤”趨勢的用戶。類比一下，就好像一旦出現(xiàn)“突發(fā)性”新聞，電視臺(tái)會(huì)特別加上標(biāo)簽：Breaking NEWS 一樣。吸引眼球，聚集人氣，引發(fā)關(guān)注，刺激參與。越多用戶在***時(shí)間傳播突發(fā)性事件，那么類Twitter服務(wù)的“時(shí)效性”就能在更大的范圍內(nèi)被認(rèn)可，這是它們的核心價(jià)值。

◆每個(gè)話題的趨勢？Why？類似上面的邏輯。提示用戶話題的上升下降趨勢，引發(fā)“好奇心理”。對(duì)于我們這些翻過大火墻的人，經(jīng)歷過眾人將火墻推上 Trend的心理，當(dāng)用戶預(yù)期某一話題“需要”上升，參與度也會(huì)隨之上升。提示每個(gè)話題的上升、下降趨勢，不過是“誘發(fā)”罷了。（很自私的說，其實(shí)是因?yàn)槲蚁矚g看著數(shù)字的實(shí)時(shí)變化發(fā)呆...）

于是得來這么一個(gè)版面：

到此，關(guān)于“twitter設(shè)計(jì)細(xì)節(jié)舉例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！