微博UDC設計中心：水器相形！新版微博設計錄

幾句感慨

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

一套服務

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

那么，問題來了

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

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

　　左導下方的應用模塊，跳轉分流的入口和不可控的icon樣式影響了左導作為站內導航、feed消費導航工具的純粹性。干掉~

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

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

　　What?又是Card…?

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

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

　一個概念：水器相形

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

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

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

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

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

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

　　服務于跨端統(tǒng)一的設計。在哪看，都一樣

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

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

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

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

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

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

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

　Wdesign

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

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

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

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

文章名稱：微博UDC設計中心：水器相形！新版微博設計錄
文章源于：http://www.muchs.cn/news42/162342.html

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

廣告

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