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

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

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

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ì)使未來新聞資訊行業(yè)在不斷多樣化的滿足用戶需求中走向社交化。

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

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

2. 用研

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

姓名：阿扎西A

性別：男

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

年齡：30

學(xué)歷：本科

家庭情況：一家三口

職業(yè)：公司職員

月薪：1-2w

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

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

1. 高效閱讀

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

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

文字排版

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

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

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

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

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

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

圖文排版

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

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

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

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

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

2. 碎片化使用

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

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

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

用戶使用的第一高頻場景是在睡覺前，使用場景中唯一的光源——燈光，光線較弱，結(jié)合我們在上文中提到的光線水平影響我們選擇文字顏色與背景顏色來調(diào)節(jié)閱讀舒適度。

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

閱讀歷史

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

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

3. 用戶吸收與留存

分享

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

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

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

「不感興趣」

還記得過年回家時(shí)，我老爸問我說今日頭條最近怎么這么多 UFO 新聞，剛好都是他喜歡看的，所以常常看到半夜。

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

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

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

沉浸式閱讀

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

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

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


總結(jié)：

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