新浪微博是一個(gè)媒體產(chǎn)品

新浪微博相比Twitter，最大的區(qū)別在于評(píng)論功能。在轉(zhuǎn)發(fā)之外加上的評(píng)論功能吞噬了一部分轉(zhuǎn)發(fā)行為畴栖，而一條微博的評(píng)論非常難以傳播。這些評(píng)論沉在原微博下八千，使信息架構(gòu)上增加了一個(gè)層級(jí)吗讶，使得微博在信息上相比Twitter更加中心化。
這種中心化的平臺(tái)天生就很難是一個(gè)平等交流的平臺(tái)恋捆，而是一部分名人照皆、紅人發(fā)聲觸達(dá)大量粉絲的一種媒體，而微博的運(yùn)營(yíng)也秉持了媒體的思路沸停。大V認(rèn)證膜毁，粉絲頭條，微博的閱讀量展現(xiàn)……隨著這些功能這種媒體的感覺(jué)一步一步提高。現(xiàn)在想想瘟滨，微博似乎挺久以前候醒，就是用來(lái)關(guān)注名人動(dòng)態(tài)，或者是最新消息的渠道杂瘸；而不是發(fā)布個(gè)人信息倒淫，與好友交流的工具了。從數(shù)據(jù)上來(lái)看胧沫，這個(gè)趨勢(shì)變得越來(lái)越明顯昌简。

電視上微博的應(yīng)該專注于閱讀

前些天收到一個(gè)合作方做新浪微博的電視應(yīng)用的需求。接到這個(gè)需求時(shí)绒怨，我的內(nèi)心是崩潰的：用戶為什么不在手機(jī)上用微博而在電視上用纯赎？手機(jī)上發(fā)微博，輸入相比電視方便太多了南蹂！想想電視用遙控器蛋疼的輸入吧犬金，逐步把焦點(diǎn)移到一個(gè)字母上，按確定六剥，再把焦點(diǎn)移到另一個(gè)字母上晚顷；那么輸入如何簡(jiǎn)化…似乎沒(méi)有可行的方法，那按照簡(jiǎn)約四原則組織疗疟、隱藏该默、刪除、轉(zhuǎn)移策彤，是不是把輸入移到手機(jī)上……
當(dāng)我醒悟過(guò)來(lái)栓袖，我發(fā)現(xiàn)我已經(jīng)在細(xì)節(jié)上迷失了。電視上不應(yīng)涉及輸入店诗，應(yīng)該使用的方法不是組織裹刮、隱藏或是轉(zhuǎn)移，而是刪除庞瘸。
想一下智能電視是在什么情況下被使用的：躺在床上/沙發(fā)上捧弃，手邊放著遙控器，或許手里還拿著手機(jī)發(fā)微信擦囊。用戶并不想和電視做很頻繁的交互违霞。使用電視的場(chǎng)景決定了電視就應(yīng)該做純粹的內(nèi)容展示，這與閱讀微博是契合的瞬场。而我要做的就是把電視上微博的閱讀體驗(yàn)做好葛家，僅此而已。
用一種設(shè)備做一種事泌类，不追求大而全，滿足一個(gè)閱讀的小需求。

精簡(jiǎn)微博非閱讀功能

明確了電視上微博的邊界之后刃榨，接下來(lái)的操作就不復(fù)雜了弹砚。
為了提供專注的瀏覽體驗(yàn)，首先我砍掉了涉及輸入的功能枢希，這里包括回復(fù)和轉(zhuǎn)發(fā)桌吃。
相比砍掉評(píng)論，砍掉轉(zhuǎn)發(fā)是一個(gè)更加艱難的決定苞轿。微博的大部分互動(dòng)都由轉(zhuǎn)發(fā)產(chǎn)生茅诱。為了保留轉(zhuǎn)發(fā)我做了幾種嘗試：最簡(jiǎn)單粗暴的方法是讓用戶輸入中文，但反人類的遙控器輸入法會(huì)讓產(chǎn)品體驗(yàn)下降到不能忍受的地步搬卒；其次可以只允許轉(zhuǎn)發(fā)而不允許添加轉(zhuǎn)發(fā)內(nèi)容瑟俭，但這樣的轉(zhuǎn)發(fā)能滿足一部分用戶用原微博表達(dá)自己的需求。而另一部分用戶更愿意在原微博上加上自己的評(píng)論再進(jìn)行轉(zhuǎn)發(fā)契邀，對(duì)于這部分用戶摆寄，可見(jiàn)的功能限制會(huì)讓他們感到嚴(yán)重的束縛感；或許可以讓用戶在轉(zhuǎn)發(fā)中使用emoji表情坯门？這并沒(méi)有解決上一個(gè)問(wèn)題微饥，只是將受束縛的用戶變成另一批罷了；將輸入轉(zhuǎn)移到手機(jī)上古戴？那用戶為什么不直接用移動(dòng)版微博客戶端欠橘？...
直到我發(fā)現(xiàn)了點(diǎn)贊功能。
點(diǎn)贊是微博的一個(gè)常用功能现恼，很多微博用戶將點(diǎn)贊作為表達(dá)態(tài)度的手段肃续，甚至還有“點(diǎn)贊黨”這一群體存在。這個(gè)功能很輕述暂，輕到只需要一步操作痹升，點(diǎn)按一下按鈕就能完成表態(tài)，幾乎不需要成本畦韭。這大概就是點(diǎn)贊黨存在的原因疼蛾。
點(diǎn)贊這個(gè)電視上也可以通過(guò)簡(jiǎn)單的一步操作完成的動(dòng)作，對(duì)電視上的微博產(chǎn)品意義重大艺配。

• 點(diǎn)贊的存在使得電視微博不再是一個(gè)單向的閱讀應(yīng)用察郁，而是賦予了它交互性，而交互性正是微博之于傳統(tǒng)媒體的最大不同转唉。
• 點(diǎn)贊動(dòng)作的低成本使得它不會(huì)成為中斷瀏覽過(guò)程的操作皮钠，在保留交互性的同時(shí)照顧了閱讀微博的體驗(yàn)。

在梳理轉(zhuǎn)發(fā)赠法、評(píng)論及點(diǎn)贊功能的去留的過(guò)程中麦轰，電視微博應(yīng)有的產(chǎn)品形態(tài)更加清晰：它應(yīng)該是一個(gè)微博的非傳播源用戶（傳播源用戶例如明星、大V等）使用的，用于瀏覽信息流的帶有最低限度交互性的產(chǎn)品款侵。在這個(gè)基礎(chǔ)上消息功能的舍棄就順理成章了末荐。消息會(huì)很重地打斷用戶的閱讀流程，并且將用戶引導(dǎo)向重交互的場(chǎng)景新锈，與電視微博的產(chǎn)品形態(tài)相違背甲脏。

按照現(xiàn)有的界面進(jìn)行設(shè)計(jì)

微博上涉及瀏覽的功能有用戶微博信息流、某用戶微博主頁(yè)等妹笆，其中涉及到關(guān)注块请、跳轉(zhuǎn)、打開(kāi)圖片等行為拳缠，如何將這些行為以及點(diǎn)贊在電視上組織起來(lái)是我需要解決的下一個(gè)問(wèn)題墩新。
對(duì)于一個(gè)有巨大用戶量、并且這些用戶都適應(yīng)現(xiàn)在的界面的應(yīng)用脊凰，任何界面的改動(dòng)都是需要很大接受成本的抖棘。所以設(shè)計(jì)界面時(shí)需要盡量與現(xiàn)有的界面保持一致。

web端

信息流的分欄

iOS手機(jī)端

微博手機(jī)端的關(guān)鍵詞是：微博詳情頁(yè)记餐，手機(jī)端將微博正文作為一個(gè)新頁(yè)面打開(kāi)驮樊，在新頁(yè)面內(nèi)展現(xiàn)微博正文以及其中的評(píng)論。在屏幕上點(diǎn)擊很小的按鈕來(lái)展開(kāi)評(píng)論在移動(dòng)端的體驗(yàn)不理想片酝，而又沒(méi)有更多空間去展示微博的評(píng)論囚衔，于是催生了這種設(shè)計(jì)。
微博詳情頁(yè)是一個(gè)很好的設(shè)計(jì)雕沿，雖然它本身是手機(jī)端對(duì)空間進(jìn)行妥協(xié)的產(chǎn)物练湿，但它非常適合電視端的情況：

• 減少了頁(yè)面上的焦點(diǎn)
  對(duì)于電視來(lái)說(shuō)，遙控器逐步式的操作方式注定了電視上"點(diǎn)擊按鈕"這個(gè)動(dòng)作既難以進(jìn)行又難以取消审轮。如果一個(gè)頁(yè)面上縱向排列著5個(gè)按鈕肥哎，鼠標(biāo)或者手指可以跳過(guò)中間的3個(gè)從第一個(gè)按鈕直達(dá)第五個(gè)按鈕辽俗，而遙控器操作的電視不行。所以頁(yè)面上不應(yīng)該有過(guò)多的焦點(diǎn)贤姆。
  具體到評(píng)論頁(yè)來(lái)說(shuō)榆苞，首先焦點(diǎn)移動(dòng)到按鈕上并不容易；其次由于用戶在點(diǎn)開(kāi)一組評(píng)論前是不知道里面評(píng)論質(zhì)量的霞捡，有很大可能需要在瀏覽幾條評(píng)論后需要退出，這時(shí)焦點(diǎn)處在不上不下的尷尬位置薄疚，需要很高的操作成本才能收起評(píng)論碧信。
• 理清了頁(yè)面間的邏輯關(guān)系
  上面提到了收起評(píng)論，而展開(kāi)的評(píng)論本身也存在問(wèn)題街夭，這個(gè)頁(yè)面究竟是微博的子內(nèi)容砰碴，還是微博的詳情？其次是收起板丽，如果你了解智能電視呈枉，可能會(huì)想到通過(guò)返回鍵收起評(píng)論，但這很可能導(dǎo)致返回鍵的邏輯混亂：究竟返回鍵是取消一個(gè)操作埃碱，還是返回上一個(gè)頁(yè)面猖辫，甚至是回到頂部？
  微博詳情頁(yè)這個(gè)設(shè)計(jì)解決了這個(gè)問(wèn)題砚殿，當(dāng)焦點(diǎn)在一條微博上時(shí)啃憎，按確認(rèn)鍵打開(kāi)這個(gè)微博的詳情頁(yè)，這時(shí)按返回鍵可以退出詳情頁(yè)似炎，返回鍵的邏輯就是回到上一個(gè)頁(yè)面辛萍，很清晰。

由于查看詳情是一個(gè)比較輕的操作羡藐，不應(yīng)重新打開(kāi)一個(gè)新頁(yè)面贩毕，這樣會(huì)打斷用戶瀏覽信息流的過(guò)程。手機(jī)端這么做是屏幕空間不足仆嗦，而電視有足夠的空間來(lái)顯示內(nèi)容辉阶，所以我們通過(guò)一個(gè)彈窗來(lái)顯示詳情頁(yè)。

微博詳情頁(yè)

iOS pad端

微博pad端將兩個(gè)關(guān)鍵詞融合到了一起欧啤。通過(guò)左右分欄將微博信息流和正文組織在了一起睛藻。這是一個(gè)在寬屏上組織內(nèi)容的好方法，初看很適合用在電視端邢隧，但事實(shí)并非如此店印。
最大的缺點(diǎn)是焦點(diǎn)會(huì)在三個(gè)分欄間移動(dòng)，在移動(dòng)時(shí)焦點(diǎn)移動(dòng)的邏輯很難不顯得混亂倒慧。遵循電視焦點(diǎn)"從哪來(lái)回哪去"的移動(dòng)原則按摘，焦點(diǎn)移動(dòng)的路徑很容易連成一個(gè)三角形包券，這樣的移動(dòng)與視覺(jué)產(chǎn)生了偏差；而如果按照視覺(jué)位置移動(dòng)炫贤，又會(huì)和邏輯產(chǎn)生偏差溅固。這個(gè)問(wèn)題很難避免，所以分欄越少越好兰珍。
頁(yè)面間的關(guān)系也很難判定侍郭，信息流應(yīng)該從屬于分組，但微博正文是否從屬與信息流掠河？在三欄同時(shí)呈現(xiàn)的界面上按返回鍵應(yīng)該進(jìn)行什么操作亮元？這些問(wèn)題都很難給出一個(gè)符合直覺(jué)的答案。
另外在信息流和正文同樣重要的情況下唠摹，三個(gè)分欄（一個(gè)次要兩個(gè)主要）如何排布也是個(gè)問(wèn)題爆捞，講道理微博pad端，包括pad上采用類似設(shè)計(jì)的第三方微博應(yīng)用勾拉，沒(méi)有做得好看的煮甥，總有一種撕裂感。

這時(shí)藕赞，電視微博的結(jié)構(gòu)已經(jīng)清晰了：左右分欄成肘，左邊顯示分組以及熱門(mén)微博這一類內(nèi)容標(biāo)簽，右邊顯示微博信息流找默。每條微博為一張卡片艇劫，信息流由這些卡片構(gòu)成，焦點(diǎn)可以在卡片間移動(dòng)惩激。在卡片上按確定鍵時(shí)店煞，打開(kāi)微博詳情頁(yè)。

完善和細(xì)化功能

微博用戶在移動(dòng)端瀏覽微博時(shí)的典型操作流程是這樣的：

1. 瀏覽微博信息流
2. 打開(kāi)感興趣的微博詳情頁(yè)
3. 查看圖片鏈接风钻、視頻連接和評(píng)論等微博詳情
4. 繼續(xù)瀏覽信息流
5. 刷新顷蟀，重新開(kāi)始瀏覽信息流

其中也有可能發(fā)生查看某個(gè)特定用戶所發(fā)的微博并關(guān)注/取消關(guān)注的需求。

信息流頁(yè)

對(duì)于典型流程的1-4骡技，電視微博基本重現(xiàn)了移動(dòng)端瀏覽微博的流程鸣个。但第5步?jīng)]有對(duì)應(yīng)。這種行為在移動(dòng)端是在信息流中進(jìn)行的布朦，在電視微博中囤萤，我們也應(yīng)該在信息流中進(jìn)行這個(gè)操作。這里借鑒了一些網(wǎng)頁(yè)"回到頂部"是趴，在微博信息流的右側(cè)加入了刷新按鈕涛舍。
這里點(diǎn)擊標(biāo)簽進(jìn)行刷新也是可以選擇的方案，但隱藏較深唆途，用戶一開(kāi)始可能不能意識(shí)到點(diǎn)擊標(biāo)簽是跳轉(zhuǎn)還是刷新富雅。然而用戶在其他客戶端中已經(jīng)學(xué)會(huì)了這種操作掸驱，所以比較難取舍。首先使用獨(dú)立按鈕保證操作的可見(jiàn)性没佑，以后可以根據(jù)數(shù)據(jù)做優(yōu)化毕贼。

信息流細(xì)化

對(duì)于可能發(fā)生的查看某個(gè)特定用戶所發(fā)的微博的需求，使用一個(gè)專門(mén)頁(yè)面來(lái)完成蛤奢。這個(gè)頁(yè)面也是一種微博信息流頁(yè)面鬼癣，所以應(yīng)該與信息流頁(yè)面比較相像。同時(shí)關(guān)注/取消關(guān)注功能也應(yīng)在這個(gè)頁(yè)面中提供啤贩。

信息流-用戶頁(yè)

詳情頁(yè)

對(duì)于詳情頁(yè)扣溺，很容易注意到詳情頁(yè)內(nèi)容可能包含圖片、視頻等內(nèi)容瓜晤，這個(gè)頁(yè)面還需要兩個(gè)按鈕來(lái)進(jìn)行點(diǎn)贊和進(jìn)入用戶頁(yè)。如上面所說(shuō)腹纳，如果焦點(diǎn)過(guò)多痢掠，通過(guò)遙控器進(jìn)行操作很困難，并且焦點(diǎn)移動(dòng)軌跡很混亂嘲恍。
這里嘗試了將詳情頁(yè)里面的內(nèi)容也視為沒(méi)有焦點(diǎn)的卡片足画，將對(duì)卡片內(nèi)內(nèi)容的交互動(dòng)作移到卡片的一側(cè)，當(dāng)焦點(diǎn)位于一個(gè)卡片上時(shí)佃牛，顯示該卡片可能的交互動(dòng)作淹辞，如點(diǎn)贊、打開(kāi)圖片俘侠、查看用戶等象缀。這樣焦點(diǎn)移動(dòng)的路徑比較清晰，并且沒(méi)有損失媒體內(nèi)容爷速。
對(duì)于各種媒體央星，各自也需要有一套顯示規(guī)則”苟總體上媒體通過(guò)打開(kāi)一個(gè)新頁(yè)面來(lái)展示莉给，按返回鍵回到詳情頁(yè)。這里不再詳述廉沮。
對(duì)于詳情頁(yè)的頁(yè)面滾動(dòng)颓遏，直覺(jué)上應(yīng)該只滾動(dòng)評(píng)論，然而由于微博內(nèi)容的高度無(wú)法控制滞时，可能很高（最高時(shí)可能包含140字的轉(zhuǎn)發(fā)評(píng)論叁幢、140字的原微博以及9張圖片）以至于第一屏只能展示半條評(píng)論，所以必須做成整個(gè)詳情頁(yè)滾動(dòng)漂洋。

詳情頁(yè)細(xì)化

為智能電視設(shè)計(jì)微博應(yīng)用是我接手的最有趣的一個(gè)任務(wù)遥皂。來(lái)自多個(gè)不同客戶端的經(jīng)驗(yàn)組合成了電視場(chǎng)景下微博應(yīng)用的結(jié)構(gòu)力喷，就好比用獅頭、鹿角演训，虎眼弟孟、麋身、龍鱗和牛尾拼成麒麟一樣（我無(wú)恥的百度了）样悟，很奇妙的體驗(yàn)拂募。一個(gè)應(yīng)用可能沒(méi)有完全獨(dú)創(chuàng)的設(shè)計(jì)，將已有的設(shè)計(jì)有取舍地組合成適合另一種場(chǎng)景的新設(shè)計(jì)窟她，也是有趣的事陈症。