藍(lán)藍(lán)設(shè)計(jì)( www.sdgs6788.com )是一家專注而深入的界面設(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ù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：莫貝網(wǎng)

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

光說(shuō)不練假把式，聊了這么多的Material design技巧，是時(shí)候來(lái)看看國(guó)內(nèi)APP怎么跟上這股潮流了。今天網(wǎng)易的同學(xué)分享了新聞客戶端的Material design改版過(guò)程，來(lái)感受下 >>>

項(xiàng)目背景

網(wǎng)易新聞安卓版一直以來(lái)照搬IOS版的交互和視覺(jué)，這在一定程度上保持了不同平臺(tái)上應(yīng)用風(fēng)格和用戶體驗(yàn)的一致性，也相應(yīng)的減少了設(shè)計(jì)和開發(fā)的人力成本。市面上的大部分移動(dòng)應(yīng)用也是如此。所以，一直以來(lái)給用戶的感覺(jué)是Android沒(méi)有獨(dú)立鮮明的視覺(jué)風(fēng)格，但是事實(shí)并非如此。不久前Google推出AndroidL系統(tǒng)，視覺(jué)語(yǔ)言Material design也相應(yīng)誕生。Google為設(shè)計(jì)師提供了一套完整的官方交互視覺(jué)設(shè)計(jì)指引，扁平化、華麗又穩(wěn)重的色彩，將卡片的功能發(fā)揮到。

以此為契機(jī)，網(wǎng)易新聞也嘗試將安卓平臺(tái)的視覺(jué)進(jìn)行優(yōu)化改版。在原有架構(gòu)不變的基礎(chǔ)上，對(duì)現(xiàn)有的視覺(jué)進(jìn)行優(yōu)化，使其更加符合安卓平臺(tái)的氣質(zhì)。

主要優(yōu)化內(nèi)容：

1、新聞列表

Material design較多的運(yùn)用了大面積的色塊，其提供的導(dǎo)航樣式如下圖：

左圖：默認(rèn)的 app bar + tab bar

右圖：默認(rèn)的 app bar + 可滾動(dòng)的 tab bar

網(wǎng)易新聞的二級(jí)導(dǎo)航欄目很多，必須可以左右滾動(dòng)切換，上述的兩種方式顯然是右圖更適合。于是依據(jù)上圖的視覺(jué)樣式并配合網(wǎng)易新聞的特性，對(duì)頭條列表的導(dǎo)航嘗試了以下幾種改良方案：

方案一：

照搬Goolge導(dǎo)航視覺(jué)樣式，配網(wǎng)易新聞原有的主色紅色，設(shè)計(jì)出下圖。

因紅色導(dǎo)航條高度過(guò)高，顯得壓抑，并影響用戶的閱讀體驗(yàn)，最終沒(méi)有采用此方案。

方案二：

去掉紅色導(dǎo)航條，加大了頭圖的高度，以圖片為主體，視覺(jué)集中點(diǎn)更為突出；首屏圖片和文字比例1.6：1。但因改動(dòng)較大，最終也未采用此方案。

頭條列表向上推動(dòng)出現(xiàn)紅色二級(jí)導(dǎo)航，如下：

方案三：

最終線上版本，與原有版本相比改動(dòng)較小，風(fēng)格保守。

2、左右側(cè)抽屜

左側(cè)抽屜，將原有的黑色背景替換成了白色，并將icon風(fēng)格扁平化，簡(jiǎn)潔多彩。

右側(cè)抽屜，在交互同學(xué)的配合下進(jìn)行信息分類，分為上中下三部分，上部：用戶相關(guān)信息，中部：活動(dòng)類信息，底部：功能類操作入口；并加入菜單項(xiàng)。

3、文章頁(yè)細(xì)節(jié)調(diào)整

Material design很具體的規(guī)范了字號(hào)大小與相應(yīng)行高之間的數(shù)值，如圖：

以1080＊1920px的安卓手機(jī)尺寸為例，易于閱讀的正文字號(hào)大小規(guī)定為54px，即18sp。在此基礎(chǔ)上根據(jù)正文字號(hào)大小來(lái)調(diào)節(jié)平衡，決定大標(biāo)題、時(shí)間、來(lái)源、導(dǎo)語(yǔ)等文字大小。

圖片在文章頁(yè)內(nèi)部的位置關(guān)系demo，如下：

對(duì)于文章頁(yè)底部的欄目，如：相關(guān)新聞、熱門跟貼等，進(jìn)行卡片化設(shè)計(jì)，對(duì)各個(gè)欄目進(jìn)行視覺(jué)規(guī)范統(tǒng)一，并突出各個(gè)欄目的主題，與左側(cè)抽屜的icon顏色保持統(tǒng)一，如相關(guān)新聞與新聞icon的顏色值相同；熱門跟貼與跟貼icon的顏色值相同。

4、跟貼頁(yè)

Material design對(duì)帶有圖標(biāo)或者頭像的內(nèi)容做了具體規(guī)范，左右各有16dp的垂直邊距。帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。如下圖：

Inbox案例：

依據(jù)以上規(guī)范，試著對(duì)新聞跟貼頁(yè)做出如下demo設(shè)計(jì)：

可以看出，Google規(guī)范下的各種間距在實(shí)際應(yīng)用時(shí)都顯得比較大，也可能是中文排版的原因。于是，在此基礎(chǔ)上進(jìn)行修改，設(shè)計(jì)出如下最終版本：

除了縮小頭像大小之外，還縮小了頁(yè)面左右間距，最終的視覺(jué)效果文字顯得比較緊湊。

5、寫跟貼頁(yè)面

Floating action button（FAB）是Meaterial design的一個(gè)視覺(jué)亮點(diǎn)。所以，我也想盡可能的把這一亮點(diǎn)運(yùn)用到網(wǎng)易新聞中，于是試著做了以下方案。

方案一：

此方案最終未能通過(guò)。原因是交互同學(xué)覺(jué)得FAB不適合運(yùn)用在寫跟貼這樣與文章內(nèi)容有一定依托關(guān)系的頁(yè)面中。它比較適合發(fā)表一個(gè)新的想法，如Google＋之類的。

方案二：

寫跟貼彈窗全屏頁(yè)面顯示，此方案最終也因上述原因未能通過(guò)。

方案三：

最終線上版本。與原先版本相比無(wú)太大改動(dòng)。

方案四：

基于大屏手機(jī)的設(shè)計(jì)，將寫跟貼的按鈕從右上角挪到左下角，便于用戶單手操作。此方案正在進(jìn)行小范圍用戶測(cè)試。

6、其他頁(yè)面

訂閱、視頻、圖片等欄目都相應(yīng)做了卡片設(shè)計(jì)優(yōu)化。

寫在最后

在只有視覺(jué)優(yōu)化的網(wǎng)易新聞安卓改版中，相對(duì)的限制太多，視覺(jué)設(shè)計(jì)起 來(lái)躡手躡腳，上述一些方案得不到肯定，線上的設(shè)計(jì)又相對(duì)保守，對(duì)于安卓的改版也不夠徹底。在一直提倡創(chuàng)新設(shè)計(jì)的今天，作為設(shè)計(jì)者而言，此次的安卓視覺(jué)改版 并沒(méi)有達(dá)到預(yù)期效果。希望能在以后的工作中得到產(chǎn)品和交互的支持，能在視覺(jué)上做出創(chuàng)新，加入適合的動(dòng)畫，及交互形式等。產(chǎn)品總是在不斷摸索創(chuàng)新中進(jìn)步，大 家共同努力做一件事情，結(jié)局總是會(huì)向好的方向發(fā)展。