新聞資訊類(lèi)移動(dòng)UI該如何設(shè)計(jì)？產(chǎn)品大牛帶你分析下

每個(gè)行業(yè)的APP和移動(dòng)端的設(shè)計(jì)風(fēng)格，都有一套自己的規(guī)范。今天小編帶大家盤(pán)點(diǎn)一下，在設(shè)計(jì)一個(gè)新聞?lì)惢蚴情T(mén)戶(hù)類(lèi)的網(wǎng)站時(shí)，應(yīng)該如何進(jìn)行UI設(shè)計(jì)，快來(lái)看下吧~

一、行業(yè)背景、用戶(hù)分析

1. 背景

新聞資訊行業(yè)從傳統(tǒng)媒體時(shí)代，到 PC 互聯(lián)網(wǎng)普及，再到現(xiàn)如今的移動(dòng)互聯(lián)網(wǎng)時(shí)代。信息傳播的速率不斷提升，互動(dòng)性不斷增強(qiáng)，短視頻、直播與 VR 行業(yè)的加入會(huì)使未來(lái)新聞資訊行業(yè)在不斷多樣化的滿(mǎn)足用戶(hù)需求中走向社交化。

目前市面上主流的移動(dòng)新聞資訊 APP 分為2類(lèi)：

• 聚合類(lèi)新聞資訊 app（今日頭條、UC、一點(diǎn)資訊）：平臺(tái)本身不產(chǎn)出原創(chuàng)內(nèi)容，抓取整合行業(yè)各類(lèi)信息源推送，滿(mǎn)足用戶(hù)個(gè)性化需求。
• 門(mén)戶(hù)類(lèi)網(wǎng)站新聞資訊 app（騰訊新聞、網(wǎng)易新聞、搜狐新聞）：PC 延伸的門(mén)戶(hù)網(wǎng)站，通過(guò)轉(zhuǎn)載內(nèi)容和新聞解析滿(mǎn)足用戶(hù)多元化需求。

2. 用研

根據(jù) iresearch 2017 數(shù)據(jù)各項(xiàng)占比，我們可以建立一個(gè)移動(dòng)新聞資訊 app 核心用戶(hù)概念模型。

姓名：阿扎西A

性別：男

坐標(biāo)：一線城市

年齡：30

學(xué)歷：本科

家庭情況：一家三口

職業(yè)：公司職員

月薪：1-2w

同樣根據(jù) iresearch 2017 數(shù)據(jù)顯示，我們可以建立移動(dòng)新聞資訊 app 用戶(hù)高頻使用場(chǎng)景。

二、UX 設(shè)計(jì)方向

1. 高效閱讀

新聞資訊類(lèi) app 從產(chǎn)品運(yùn)營(yíng)角度出發(fā)都是一個(gè)「內(nèi)容為王」的產(chǎn)品，雖然各產(chǎn)品客戶(hù)端在大數(shù)據(jù)算法上所有不同，功能細(xì)節(jié)有所不同，但最核心的 UX 關(guān)鍵詞都在于「高效閱讀」4字。

基于「高效閱讀」，我們第一件可以思考的事情就是何種樣式的排版更有利？

文字排版

文字顏色與背景顏色：文字、背景顏色與光線水平相關(guān)。多數(shù)研究表明，在明亮光線下，淺色背景深色字比深色背景淺色字更好識(shí)別，在較暗光線下則相反。而文字與背景的文本對(duì)比度應(yīng)為7：1相對(duì)閱讀更舒適（根據(jù) Material Design 設(shè)計(jì)語(yǔ)言推薦）。

也就是我們常常說(shuō)的，UX 設(shè)計(jì)應(yīng)盡量避免純黑白設(shè)計(jì)，帶少量灰度的背景色與文字顏色更易于移動(dòng)端閱讀。

文字大小與間距：在日常用戶(hù)使用中，推薦使用正文字號(hào)：30px-32px，行間距間距：默認(rèn)1.2，是最保險(xiǎn)也是大家最熟悉的行間距，同時(shí)也減少了開(kāi)發(fā)的工作量（默認(rèn)行間距）。

其實(shí)有不少 app 現(xiàn)在都設(shè)有字體以及字體大小設(shè)置功能，如：今日頭條，用戶(hù)可以根據(jù)使用場(chǎng)景與需要自定義字體及大小閱讀，有利于提升用戶(hù)粘度。

對(duì)齊方式：現(xiàn)在最常見(jiàn)的兩種排版對(duì)齊方式應(yīng)該就是左對(duì)齊和兩端對(duì)齊。在英文的段落排版中，通常是左側(cè)對(duì)齊，而讓右側(cè)自然形成起伏邊，而對(duì)于中文排版與閱讀習(xí)慣而言則相反，段落的頭尾對(duì)齊顯得比較重要。

基本主流的中文新聞資訊類(lèi) app 中也都采用了兩端對(duì)齊的方式，但是要很絕對(duì)的說(shuō)兩端對(duì)齊就一定更易于閱讀，我覺(jué)得這個(gè)問(wèn)題就比較因人而異了，你們覺(jué)得呢？

圖文排版

是左圖右文還是左文右圖？

在重設(shè)計(jì)騰訊新聞的時(shí)候因?yàn)檫@個(gè)問(wèn)題糾結(jié)了很久，最后還是采用了左文右圖的形式，當(dāng)然不是因?yàn)殡S大流，確切是有以下2個(gè)原因：

• 影響閱讀效率：根據(jù)大部分國(guó)人從左到右的閱讀順序，先看到圖片再看到標(biāo)題，但有些新聞圖片表達(dá)信息過(guò)于模糊，用戶(hù)需要閱讀標(biāo)題后再次會(huì)看圖片，這里就會(huì)造成一個(gè)視覺(jué)重復(fù)，雖然這也只是個(gè)1秒不到的時(shí)間滯留，但大量的類(lèi)似列表就會(huì)比較影響閱讀效率了。

• 打亂視覺(jué)上的整齊布局：對(duì)于可能出現(xiàn)的無(wú)圖新聞信息，那么左圖右文的情況就會(huì)造成頁(yè)面的不整齊，影響視覺(jué)閱讀的慣性。

另外文章詳情頁(yè)布局是先標(biāo)題還是先圖片，也是同理可得。

2. 碎片化使用

根據(jù)上文中得出新聞資訊類(lèi) app 使用時(shí)間與場(chǎng)景占比，我們可以得出的結(jié)論是，該類(lèi) app 的使用是偏向碎片化的，讓用戶(hù)隨時(shí)隨地可以方便使用的，輕松愉快的消耗掉空余時(shí)間，培養(yǎng)用戶(hù)使用慣性。

因而在 UX 的設(shè)計(jì)上，我們也應(yīng)該多考慮用戶(hù)不同場(chǎng)景中對(duì) app 體驗(yàn)的不同需求。

日夜模式/室內(nèi)外模式

用戶(hù)使用的第一高頻場(chǎng)景是在睡覺(jué)前，使用場(chǎng)景中唯一的光源——燈光，光線較弱，結(jié)合我們?cè)谏衔闹刑岬降墓饩€水平影響我們選擇文字顏色與背景顏色來(lái)調(diào)節(jié)閱讀舒適度。

如騰訊新聞等 app 已經(jīng)推出場(chǎng)景切換模式供用戶(hù)選擇更舒適的界面閱讀環(huán)境。

閱讀歷史

用戶(hù)使用的第二高頻場(chǎng)景，常常是在室外以及交通工具上時(shí)間消耗。出現(xiàn)的突發(fā)狀況會(huì)比多，隨時(shí)可能關(guān)掉閱讀的 app 打開(kāi)其他應(yīng)用，而當(dāng)用戶(hù)想起某篇看了一半?yún)s忘記收藏的文章時(shí)，就可以在歷史記錄里找到閱讀過(guò)的文章。

至于閱讀歷史使用何種形式的列表方式最易于用戶(hù)查詢(xún)，推薦還是使用與用戶(hù)閱讀點(diǎn)擊文章時(shí)一致的形式，確保了文章信息的識(shí)別度，方便用戶(hù)找到錯(cuò)過(guò)的文章。

3. 用戶(hù)吸收與留存

分享

2017 年的新數(shù)據(jù)顯示近五成的用戶(hù)愿意將自己認(rèn)為有趣的文章通過(guò)微信、微博分享出去，因而新聞資訊類(lèi) app 的吸量途徑主要來(lái)源還在于社交平臺(tái)上的分享。

除了本身的文章內(nèi)容質(zhì)量以及個(gè)性化推薦之外，分享入口的設(shè)計(jì)在實(shí)際體驗(yàn)與轉(zhuǎn)換率提升中也占著重要位置。

分享入口應(yīng)盡可能明顯，并與其他功能入口保持一定操作空間，避免誤操作。

「不感興趣」

還記得過(guò)年回家時(shí)，我老爸問(wèn)我說(shuō)今日頭條最近怎么這么多 UFO 新聞，剛好都是他喜歡看的，所以常?？吹桨胍?。

大部分?jǐn)?shù)據(jù)也顯示，用戶(hù)在使用新聞資訊類(lèi) app 時(shí)最關(guān)注的是新聞內(nèi)容是否符合興趣。很顯然用大數(shù)據(jù)算法來(lái)了解用戶(hù)喜好，推出用戶(hù)喜好的文章，是提升用戶(hù)粘度的核心所在。

與個(gè)性化推薦的大數(shù)據(jù)抓取緊密相連的界面功能是「不感興趣」按鈕，國(guó)內(nèi)的新聞?lì)?app 與國(guó)外的 app 抓取信息源算法顯然不同，「不感興趣」按鈕統(tǒng)一出現(xiàn)在了每個(gè)新聞列表中，用戶(hù)可以直接點(diǎn)擊刪除按鈕刪除不感興趣的新聞，沒(méi)有二級(jí)操作，簡(jiǎn)單粗暴，更精準(zhǔn)的得到用戶(hù)個(gè)性化喜好。

但是看著滿(mǎn)屏歪七扭八的刪除按鈕，總覺(jué)得是不是可以有一個(gè)更優(yōu)的設(shè)計(jì)方案替代它。可是想了很久都沒(méi)有很滿(mǎn)意的結(jié)果，因?yàn)闊o(wú)論是用 iOS 源生的左滑刪除還是更換表達(dá)形式都會(huì)增加用戶(hù)學(xué)習(xí)成本，同時(shí)還可能影響其他 tab 功能使用。

沉浸式閱讀

用戶(hù)在文章詳情頁(yè)停留的時(shí)長(zhǎng)往往決定了用戶(hù)的留存度。如果用戶(hù)在多篇文章都停留很短時(shí)間，意味著用戶(hù)對(duì)大比例的文章興趣度和滿(mǎn)意度并不高，這也意味著用戶(hù)得不到滿(mǎn)意的產(chǎn)品內(nèi)容就會(huì)離開(kāi)這個(gè)應(yīng)用，去尋求其他產(chǎn)品。

可以讓用戶(hù)更沉浸式的閱讀文章，除了文章內(nèi)容本身之外，文章詳情頁(yè)本身承載的功能和交互也十分重要。

比如大部分新聞資訊類(lèi) app 都嘗試在文章詳情頁(yè)中增加底部或頂部功能欄，里面會(huì)涵蓋對(duì)用戶(hù)盡可能實(shí)用的功能。如日夜閱讀模式切換、字體大小調(diào)整或是投訴等，使用戶(hù)在閱讀時(shí)不需要因?yàn)樽陨硇枨蠖x開(kāi)文章詳情頁(yè)，盡可能減少不必要的跳轉(zhuǎn)和閱讀中斷。


總結(jié)：

以上是我對(duì)新聞資訊類(lèi)產(chǎn)品的一些淺析，其實(shí)真正的深入挖掘還是要自身滲透到業(yè)務(wù)產(chǎn)品線中才能獲得，近期來(lái)也越來(lái)越感到不一樣的產(chǎn)品對(duì)設(shè)計(jì)的要求側(cè)重也完全不同，這些對(duì)設(shè)計(jì)師的要求和成長(zhǎng)也都會(huì)有不同的影響。