微博UDC設(shè)計(jì)中心：水器相形！新版微博設(shè)計(jì)錄

幾句感慨

　　經(jīng)過半年之多的磨礪，微博V6.0(以下簡稱V6)于十月正式公測。作為一個(gè)海量用戶的成熟產(chǎn)品，每一個(gè)改變都充滿挑戰(zhàn)。而作為微博產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)，不僅僅是讓世界變的更美好一些的不忘初心，更多了一份為用戶服務(wù)為產(chǎn)品負(fù)責(zé)的方得始終。

一套服務(wù)

　　細(xì) (wu) 心(liao) 的用戶應(yīng)該已經(jīng)發(fā)現(xiàn)，微博的slogan悄悄的發(fā)生了變化，隨時(shí)隨地“發(fā)現(xiàn)”新鮮事，這里為什么是“發(fā)現(xiàn)”? 我們是這樣理解的：用戶對微博的需求已經(jīng)蔓延，從廣播式的信息獲取轉(zhuǎn)變到差異化的興趣內(nèi)容獲取。(請說普通話)意思就是大家看膩了同質(zhì)化的流水內(nèi)容和大V轉(zhuǎn)發(fā)的內(nèi)容，開始更關(guān)注或發(fā)掘自己感興趣的內(nèi)容。因此微博一直都在調(diào)整信息消費(fèi)的入口，讓用戶更容易發(fā)現(xiàn)信息。所以，設(shè)計(jì)也要圍繞提供用戶個(gè)性化信息獲取的服務(wù)展開。

那么，問題來了

　　處于微博功能爆炸期的V5版本，大量的繁瑣功能和曝光入口給產(chǎn)品留下了太多的體驗(yàn)創(chuàng)傷。所以V6改版降噪也是一大重點(diǎn)。意在營造出更分明并相對純粹的信息/功能分區(qū)。

　　個(gè)人主頁頭部區(qū)域的簡化，幾經(jīng)PK我們把部分個(gè)人信息(粉絲計(jì)數(shù)、認(rèn)證、資料)移到下方變成模塊，突出封面圖與主人的聯(lián)系，同時(shí)也更符合移動設(shè)計(jì)趨勢達(dá)到兩端風(fēng)格統(tǒng)一。

　　左導(dǎo)下方的應(yīng)用模塊，跳轉(zhuǎn)分流的入口和不可控的icon樣式影響了左導(dǎo)作為站內(nèi)導(dǎo)航、feed消費(fèi)導(dǎo)航工具的純粹性。干掉~

　　首頁和個(gè)人主頁的導(dǎo)航各類產(chǎn)品入口繁多，弱化了工具類入口。熱門、應(yīng)用產(chǎn)品干掉重做(合入新產(chǎn)品“發(fā)現(xiàn)”)，連高富帥的會員入口也狠心干掉(會員產(chǎn)品在洗手間里呆了很久)個(gè)人主頁的導(dǎo)航也簡化到了極致，除主要功能入口外全部干掉~

　　圍繞降噪，還有諸多細(xì)節(jié)的優(yōu)化。其實(shí)每一個(gè)“干掉”都意味著巨大的成本和壓力，有來自用戶習(xí)慣的，有來自合作方的，入口改變了，功能刪減了，數(shù)據(jù)必然會受到影響。但為用戶獲取內(nèi)容減少干擾才是最迫在眉睫的。

　　What?又是Card…?

　　開放升級以來，V6帶給大家最直觀的變化應(yīng)該就是Card(卡片化)模塊。當(dāng)然也有不少用戶吐槽“四分五裂的頁面”、“不連貫”、“刷微博效率差了”…

　　為什么我們選擇了Card樣式呢?其實(shí)，這是一盤很大的棋…(啪!跟爺好好說話)好吧，下面容小的娓娓道來(扶臉…)

　一個(gè)概念：水器相形

　　微博主要構(gòu)成是信息內(nèi)容，各種內(nèi)容好比水一樣形態(tài)各異。V5之前都是一股腦的呈現(xiàn)在用戶面前，一開始任何內(nèi)容都能引起用戶的關(guān)注，用戶只需由上至下的刷信息列表，所以那時(shí)總把瀏覽微博說成“刷微博”。后來隨著信息的爆炸，海量信息中用戶真正想要的內(nèi)容卻不多，往往要喝的撐腸拄腹也不一定能吸收到自己所缺乏的營養(yǎng) 。如果有一個(gè)容器能把池里的水分裝起來分類呈現(xiàn)，是否能解決望池卻步的困擾呢?

　　這個(gè)“容器”的選角兒，最終我們也不免俗的選擇了業(yè)界當(dāng)紅炸子雞——Card。選好了容器，接下來就是如何治水。如何做出提升產(chǎn)品體驗(yàn)、符合微博發(fā)展方向的設(shè)計(jì)。

　　呈現(xiàn)清晰，不能傻傻分不清楚

　　Card化設(shè)計(jì)讓每組內(nèi)容都能規(guī)規(guī)矩矩的呈現(xiàn)，各類內(nèi)容能被快速識別。例如微博核心的Feed區(qū)(微博列表)里的圖片微博、多圖微博、內(nèi)容推薦(關(guān)系推薦、音樂推薦等)、文字微博…原本參差不齊形態(tài)各異的內(nèi)容都被相同的Card容器分裝起來有序陳列。開放升級后很多用戶最直觀的感受評價(jià)就是兩個(gè)字“清爽”，但Card之間的間距設(shè)計(jì)也讓不少使用花色背景圖模板的用戶很不習(xí)慣。好吧，換膚模板功能是多年以來我們自己挖的坑，這個(gè)坑我們?nèi)蘸髸M力的填補(bǔ)，你知道首頁為什么會有個(gè)底色遮罩的設(shè)計(jì)了吧(裝個(gè)可憐：自定義換膚功能在UI設(shè)計(jì)界相當(dāng)于IE6般存在)

　　現(xiàn)如今不缺內(nèi)容量的微博，由海量內(nèi)容輸出轉(zhuǎn)向垂直內(nèi)容生產(chǎn)勢在必行。Card樣式相比傳統(tǒng)List確實(shí)能使用戶更專注內(nèi)容，不再是上至下一條接一條的“刷”(即使大家已經(jīng)養(yǎng)成了這樣瀏覽微博的習(xí)慣)。而是提供便捷并鼓勵用戶主動尋找自己感興趣的內(nèi)容。

　　小小的提一下，V6個(gè)人主頁的信息流右側(cè)新增了時(shí)間軸功能，可以根據(jù)年份月份自由查閱自己的微博內(nèi)容，方便老用戶找回自己的青澀記憶喲…

　　服務(wù)于跨端統(tǒng)一的設(shè)計(jì)。在哪看，都一樣

　　PC端的用戶中，跨端使用(同時(shí)使用移動端)的用戶量已占59%，終端方面，Phone的尺寸越來越大，Pad尺寸越來越小，桌面機(jī)的分辨率越來越大，觸屏普及，技術(shù)突破…Web設(shè)計(jì)與移動設(shè)計(jì)的界限已經(jīng)越來越模糊。因此我們在本次改版之初就把服務(wù)于跨端統(tǒng)一體驗(yàn)做為設(shè)計(jì)宗旨。眾所周知，移動端的顯示尺寸有限，在有限的空間里Card能幫助用戶分清區(qū)域?qū)哟?，避免手指誤操作。而Card應(yīng)用在微博PC端則沒有太大的弊端(自定義背景圖的回嚶嚶嚶繚繞…)，不論從樣式還是兼容性都更適合做多端的呈現(xiàn)。

　　于是，V6每個(gè)功能模塊以Card形式跨端對應(yīng)，兩端一致的樣式帶來體驗(yàn)一致，減少用戶認(rèn)知成本。在哪里，都一樣。

　　當(dāng)然，跨端統(tǒng)一并不意味著呈現(xiàn)上要絕對統(tǒng)一，比如PC端有更大的尺寸，保證核心操作露出一致的前提下，在PC端還可以提供更詳細(xì)的內(nèi)容。同時(shí)，我們認(rèn)為Card應(yīng)該是聰明靈巧的，要做到跨端統(tǒng)一，重點(diǎn)不在“統(tǒng)一”而在“跨端”，做跨端其實(shí)就是做適配。本次微博還有個(gè)不明覺厲的地方就是：全站基于響應(yīng)式設(shè)計(jì)(響應(yīng)式設(shè)計(jì)是啥?問度娘啊，字寫多了費(fèi)流量啊)，簡單說就是網(wǎng)頁在不同的分辨率下可以呈現(xiàn)不同的視覺體驗(yàn)，在業(yè)內(nèi)已經(jīng)火了很久，但在國內(nèi)外的主流互聯(lián)網(wǎng)產(chǎn)品上，只有淘寶網(wǎng)做了一部分(僅首頁)嗯…感覺我們好吊的說…但明顯我們做的還不夠好(負(fù)責(zé)這塊的產(chǎn)品經(jīng)理先拉出去彈小JJ)，還沒有完成對大屏幕顯示器以及更多用戶場景的自動適配，這塊我們一定會繼續(xù)努力滴(還不是因?yàn)槔习宕咧暇€。。。) 手上有Pad的朋友可以試試用瀏覽器打開微博，微博的Card會根據(jù)不同顯示寬度做出響應(yīng)。

　　一份內(nèi)容，多端呈現(xiàn)。接入方so easy

　　微博有很多內(nèi)容生產(chǎn)者(媒體、大V)和接入方(例如音樂、電影)，他們提供的內(nèi)容可能基于PC端可能基于移動端也可能基于第三方本身，當(dāng)內(nèi)容要呈現(xiàn)在多平臺多終端的微博時(shí)，呈現(xiàn)效果往往變的不可控… 現(xiàn)如今在V6，接入方只需提供一份內(nèi)容，多平臺能同時(shí)消費(fèi)。

　　在微博跨端設(shè)計(jì)體系下，一份內(nèi)容多端呈現(xiàn)趨于統(tǒng)一，效果可控，大大降低接入方成本同時(shí)也降低內(nèi)部的開發(fā)、設(shè)計(jì)成本。

　　支持靈活布局，接入方可自由組合，個(gè)性化內(nèi)容亦能以Card呈現(xiàn)。

　Wdesign

　　最后講講品牌化設(shè)計(jì)，從V5版本開始，微博便開始有意形成一套自己的設(shè)計(jì)風(fēng)格，V6版本繼續(xù)與時(shí)俱進(jìn)采用了更大尺寸的控件，加入了適度的動態(tài)交互反饋，減去多余裝飾元素增大留白使整體版面更加清爽。優(yōu)化后的品牌色(微博橙)也在兩端統(tǒng)一延續(xù)，icon樣式和語義也得到統(tǒng)一。我們還定義了圓形的用戶頭像，不僅僅是為了在設(shè)計(jì)趨勢上，用圓形做“頭像”與方形做“圖片”來區(qū)分“人”與“物”。當(dāng)用戶形成習(xí)慣，便能快速區(qū)分內(nèi)容的屬性。例如我們的電影興趣主頁屬于物類，我們自己的個(gè)人主頁是人類，他們的頭部頭像形狀便是不同的。

　　本次改版還有個(gè)爭議比較大的地方就是使用了微軟雅黑字體。因?yàn)楹芏嘤脩舴答佔(zhàn)煮w“變小”“模糊”為什么作死放棄宋體使用雅黑?因?yàn)樗误w是純像素字體，作為文本字體大量出現(xiàn)，單字的識別度不如CleraType字體雅黑( ClearType 是一種 Windows 用來優(yōu)化液晶顯示器文字顯示效果的技術(shù)，使用 ClearType 可以讓文字顯示得平滑而美觀。)Windows在Vista時(shí)代便將微軟雅黑作為默認(rèn)字體取代了XP時(shí)代的宋體 ，隨著現(xiàn)在硬件屏幕分辨率的提高，操作系統(tǒng)和瀏覽器的升級雅黑的渲染效果將會越來越好。

　　那么為啥還有用戶反饋?zhàn)煮w“變小”“模糊”呢?冤有頭，債有主。前面右轉(zhuǎn)是微軟…我們發(fā)現(xiàn)雅黑在部分環(huán)境下確實(shí)顯示有誤差(哎呀，都怪老板對美工太好，全給配的真八核大顯)比如XP系統(tǒng)用戶(也是給你們跪了)安裝的高級瀏覽器(恩…除IE外的瀏覽器就叫高級瀏覽器)會強(qiáng)制使用雅黑，但他們對雅黑的渲染又很差。針對這種情況，我們在上線后已經(jīng)緊急處理，將這部分用戶的字體降級為宋體，更多的優(yōu)化方案也都在制定中。

　　V6是微博的重大迭代，這次改版的目的是給用戶提供更好的個(gè)性化信息獲取服務(wù)，給內(nèi)容生產(chǎn)者提供更多曝光和獲得激勵的渠道。雖然羅馬非一日建成，希望通過我們的設(shè)計(jì)能讓微博變的更純粹，讓用戶用的更舒心。

文章名稱：微博UDC設(shè)計(jì)中心：水器相形！新版微博設(shè)計(jì)錄
文章源于：http://www.bm7419.com/news42/162342.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站收錄、建站公司、商城網(wǎng)站、營銷型網(wǎng)站建設(shè)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)