旗下產業: A產業/?A實習/?A計劃
沈陽區咨詢熱線:024-31048731
首頁 > 今日必讀 > 新聞資訊類移動UI該如何設計?產品大牛帶你分析下
新聞資訊類移動UI該如何設計?產品大牛帶你分析下
時間:2018-04-27來源:www.aaa-cg.com.cn點擊量:
時間:2018-04-27點擊量:

每個行業的APP和移動端的設計風格,都有一套自己的規范。今天小編帶大家盤點一下,在設計一個新聞類或是門戶類的網站時,應該如何進行UI設計,快來看下吧~




一、行業背景、用戶分析

1. 背景

新聞資訊行業從傳統媒體時代,到 PC 互聯網普及,再到現如今的移動互聯網時代。信息傳播的速率不斷提升,互動性不斷增強,短視頻、直播與 VR 行業的加入會使未來新聞資訊行業在不斷多樣化的滿足用戶需求中走向社交化。

目前市面上主流的移動新聞資訊 APP 分為2類:

  • 聚合類新聞資訊 app(今日頭條、UC、一點資訊):平臺本身不產出原創內容,抓取整合行業各類信息源推送,滿足用戶個性化需求。
  • 門戶類網站新聞資訊 app(騰訊新聞、網易新聞、搜狐新聞):PC 延伸的門戶網站,通過轉載內容和新聞解析滿足用戶多元化需求。
2. 用研

根據 iresearch 2017 數據各項占比,我們可以建立一個移動新聞資訊 app 核心用戶概念模型。

姓名:阿扎西A

性別:男

坐標:一線城市

年齡:30

學歷:本科

家庭情況:一家三口

職業:公司職員

月薪:1-2w

同樣根據 iresearch 2017 數據顯示,我們可以建立移動新聞資訊 app 用戶高頻使用場景。

二、UX 設計方向

1. 高效閱讀

新聞資訊類 app 從產品運營角度出發都是一個「內容為王」的產品,雖然各產品客戶端在大數據算法上所有不同,功能細節有所不同,但最核心的 UX 關鍵詞都在于「高效閱讀」4字。

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

文字排版

文字顏色與背景顏色:文字、背景顏色與光線水平相關。多數研究表明,在明亮光線下,淺色背景深色字比深色背景淺色字更好識別,在較暗光線下則相反。而文字與背景的文本對比度應為7:1相對閱讀更舒適(根據 Material Design 設計語言推薦)。

也就是我們常常說的,UX 設計應盡量避免純黑白設計,帶少量灰度的背景色與文字顏色更易于移動端閱讀。

文字大小與間距:在日常用戶使用中,推薦使用正文字號:30px-32px,行間距間距:默認1.2,是最保險也是大家最熟悉的行間距,同時也減少了開發的工作量(默認行間距)。

其實有不少 app 現在都設有字體以及字體大小設置功能,如:今日頭條,用戶可以根據使用場景與需要自定義字體及大小閱讀,有利于提升用戶粘度。

對齊方式:現在最常見的兩種排版對齊方式應該就是左對齊和兩端對齊。在英文的段落排版中,通常是左側對齊,而讓右側自然形成起伏邊,而對于中文排版與閱讀習慣而言則相反,段落的頭尾對齊顯得比較重要。

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

圖文排版

是左圖右文還是左文右圖?

在重設計騰訊新聞的時候因為這個問題糾結了很久,最后還是采用了左文右圖的形式,當然不是因為隨大流,確切是有以下2個原因:

  • 影響閱讀效率:根據大部分國人從左到右的閱讀順序,先看到圖片再看到標題,但有些新聞圖片表達信息過于模糊,用戶需要閱讀標題后再次會看圖片,這里就會造成一個視覺重復,雖然這也只是個1秒不到的時間滯留,但大量的類似列表就會比較影響閱讀效率了。

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

 

另外文章詳情頁布局是先標題還是先圖片,也是同理可得。

 

2. 碎片化使用

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

因而在 UX 的設計上,我們也應該多考慮用戶不同場景中對 app 體驗的不同需求。

日夜模式/室內外模式

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

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

 

閱讀歷史

用戶使用的第二高頻場景,常常是在室外以及交通工具上時間消耗。出現的突發狀況會比多,隨時可能關掉閱讀的 app 打開其他應用,而當用戶想起某篇看了一半卻忘記收藏的文章時,就可以在歷史記錄里找到閱讀過的文章。

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

3. 用戶吸收與留存

分享

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

除了本身的文章內容質量以及個性化推薦之外,分享入口的設計在實際體驗與轉換率提升中也占著重要位置。

 

分享入口應盡可能明顯,并與其他功能入口保持一定操作空間,避免誤操作。

「不感興趣」

還記得過年回家時,我老爸問我說今日頭條最近怎么這么多 UFO 新聞,剛好都是他喜歡看的,所以常??吹桨胍?。

大部分數據也顯示,用戶在使用新聞資訊類 app 時最關注的是新聞內容是否符合興趣。很顯然用大數據算法來了解用戶喜好,推出用戶喜好的文章,是提升用戶粘度的核心所在。

與個性化推薦的大數據抓取緊密相連的界面功能是「不感興趣」按鈕,國內的新聞類 app 與國外的 app 抓取信息源算法顯然不同,「不感興趣」按鈕統一出現在了每個新聞列表中,用戶可以直接點擊刪除按鈕刪除不感興趣的新聞,沒有二級操作,簡單粗暴,更精準的得到用戶個性化喜好。

 

但是看著滿屏歪七扭八的刪除按鈕,總覺得是不是可以有一個更優的設計方案替代它??墒窍肓撕芫枚紱]有很滿意的結果,因為無論是用 iOS 源生的左滑刪除還是更換表達形式都會增加用戶學習成本,同時還可能影響其他 tab 功能使用。

沉浸式閱讀

用戶在文章詳情頁停留的時長往往決定了用戶的留存度。如果用戶在多篇文章都停留很短時間,意味著用戶對大比例的文章興趣度和滿意度并不高,這也意味著用戶得不到滿意的產品內容就會離開這個應用,去尋求其他產品。

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

 

比如大部分新聞資訊類 app 都嘗試在文章詳情頁中增加底部或頂部功能欄,里面會涵蓋對用戶盡可能實用的功能。如日夜閱讀模式切換、字體大小調整或是投訴等,使用戶在閱讀時不需要因為自身需求而離開文章詳情頁,盡可能減少不必要的跳轉和閱讀中斷。


總結:

以上是我對新聞資訊類產品的一些淺析,其實真正的深入挖掘還是要自身滲透到業務產品線中才能獲得,近期來也越來越感到不一樣的產品對設計的要求側重也完全不同,這些對設計師的要求和成長也都會有不同的影響。

推薦新聞
?2007-2019/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

沈陽漫動者計算機培訓學校 備案號:遼ICP備14015306號-1郵箱:bjaaa@aaaedu.cc