2021-12-22 ui設計分享達人
隨著互聯(lián)網(wǎng)的發(fā)展，人們閱讀新聞資訊的方式也從紙質(zhì)閱讀轉變?yōu)殡娮娱喿x。
本文以今日頭條、一點資訊和網(wǎng)易新聞這三款應用為競品，從交互和視覺兩方面進行對比分析，討論一下產(chǎn)品中值得我們學習的設計點以及可以進一步優(yōu)化改進的地方。
一、體驗環(huán)境
二、交互對比
三、視覺對比
四、思考與總結
手機型號：iPhone 8 plus
手機系統(tǒng)：ios 12.1
應用版本：今日頭條V8.5.0 一點資訊V5.9.8.0 網(wǎng)易新聞V86.0
2.1 首頁-導航欄-搜索
今日頭條：搜索框內(nèi)有默認的文案，在首頁瀏覽內(nèi)容時，文案一直處于靜態(tài)。點擊搜索框進入搜索頁之后再返回首頁，搜索框內(nèi)文案才會改變，改變的方式是由下往上滾動播出，搜索icon靜止不動?；蛘咴谒⑿陆缑鏁r，文案也會改變。
一點資訊：搜索框內(nèi)同樣有默認文案，但不是靜態(tài)的，文案在搜索框內(nèi)滾動播出。第一次打開應用時，有一條紅色漸變線圍繞著搜索框逆時針旋轉兩圈，此時的默認文案是“搜一搜你感興趣的內(nèi)容”，漸變線旋轉兩圈之后，搜索框內(nèi)文案發(fā)生改變，按照搜索頁熱榜的排序滾動播出。在首次打開產(chǎn)品或者從其它界面跳轉到首頁時，動態(tài)漸變線都會出現(xiàn)。
網(wǎng)易新聞：搜索框內(nèi)同樣有默認文案，而且也不是靜態(tài)的，文案和搜索icon一起滾動播出，播出順序按照搜索頁熱搜話題的排序進行。
對搜索的設計，若搜索框內(nèi)文案一直處于靜態(tài)，這對用戶實時了解新聞是不利的，當前社會發(fā)展迅速，信息更新速度比較快，短時間內(nèi)就會有不同的新聞出現(xiàn)，文案在搜索框內(nèi)滾動播出是比較好的選擇。這既有利于用戶掌握新聞動態(tài)，又能增加內(nèi)容的曝光度。一點資訊動態(tài)的漸變線是一個非常有趣的設計點，可以吸引用戶更多的注意力，引導其進行搜索。
2.2 首頁-導航欄-發(fā)布
今日頭條：點擊發(fā)布icon，從屏幕下方彈出發(fā)布界面。發(fā)布界面承載的內(nèi)容很多，占據(jù)了除狀態(tài)欄之外的整個界面空間。在發(fā)布界面點擊輸入框，界面還會跳轉到單獨的編輯內(nèi)容頁，在編輯頁可輸入想要發(fā)布的內(nèi)容，輸入完畢后直接點擊發(fā)布按鈕即可。若編輯內(nèi)容后不想發(fā)布了，點擊取消，會有彈窗出現(xiàn)，進行操作提示，點擊之后直接返回首頁；若把編輯的內(nèi)容全部刪除再點擊取消，就不會有彈窗了，界面就會直接回到首頁。若用戶只是點擊了首頁的發(fā)布icon，進入到發(fā)布界面，并沒有進入編輯內(nèi)容界面，要退出的話可以向下滑動，或者點擊關閉按鈕即可。
在發(fā)布界面，有一個“邀請你參與討論”的模塊，該模塊的最后一條文案露出一半，告知用戶在該部分下方還有未展示的內(nèi)容，向上滑動可以查看更多。
一點資訊：在首頁點擊發(fā)布icon之后，同樣會從屏幕下方彈出發(fā)布界面，發(fā)布界面承載的內(nèi)容非常少，僅提供了三個功能，即發(fā)視頻、拍小視頻、寫短內(nèi)容。點擊前兩者即可進行發(fā)布視頻的相關操作，點擊寫短內(nèi)容之后，界面會跳轉到編輯內(nèi)容頁，和今日頭條的設計類似，如在編輯界面輸入內(nèi)容后點擊返回，會有彈窗提示，若編輯界面沒有內(nèi)容，就會直接返回首頁。在發(fā)布界面要想退出，可以點擊關閉按鈕，或者點擊黑色遮罩層。
網(wǎng)易新聞：首頁沒有提供發(fā)布功能，在個人中心界面可以發(fā)布動態(tài)，在發(fā)布界面可以直接輸入想發(fā)布的內(nèi)容。和前兩者類似，在發(fā)布界面有內(nèi)容的情況下退出，界面會有彈窗提示，若發(fā)布界面沒有任何內(nèi)容，就可以直接返回個人中心頁。
對提示彈窗的設計，今日頭條和一點資訊用的都是iOS官方設計指南給的警告框 (Alerts) ，不支持點擊遮罩層將其關閉，用戶必須做出操作才行。只不過今日頭條包括三個選項按鈕，一點資訊只有兩個。其實網(wǎng)易新聞和一點資訊的設計是相同的，只是網(wǎng)易新聞對源生警告框進行了自己的設計。兩者標題傳達的主要意思一致，但按鈕的位置不同，一點資訊把保存按鈕放在了左邊，網(wǎng)易新聞卻正好相反，放在了右邊。但兩者都對其進行了重點設計，一點資訊將字體加粗，網(wǎng)易新聞將按鈕用顏色填充。
官方給的建議是肯定性操作放在右邊，否定性操作放在左邊。這里的肯定與否定并不是簡單的字面意思，而是說要把用戶最有可能點擊的按鈕放在右邊，取消操作按鈕放在左邊。例如，當用戶想刪除某些內(nèi)容時出現(xiàn)彈窗提示，此時用戶想要點擊的是刪除按鈕，面對這種情況，就應該把刪除按鈕放在右邊，而非左邊。對于文中的情況，用戶點擊返回或者取消的意圖是想退出界面，也就是編輯頁輸入的內(nèi)容不想發(fā)布了，此時的正向操作是不保存，所以一點資訊按鈕擺放的位置是嚴格按照官方指南給的建議設計的。網(wǎng)易新聞將保存按鈕放在右邊，其實是想讓用戶點擊保存，即便是出于某些原因用戶想退出界面，將輸入的內(nèi)容暫時存為草稿也是滿足了一部分用戶的需求。
2.3 首頁-導航欄-補充
今日頭條：無補充。
一點資訊：點擊搜索框內(nèi)的耳機icon，可以直接將滾動選項卡定位到“一點音頻”模塊，這里的“一點音頻”和點擊底部標簽欄切換到的界面是相同的，可以看出一點資訊對音頻模塊的重視。
網(wǎng)易新聞：導航欄的頂部左側是網(wǎng)易的logo，點擊可進行刷新。這是與今日頭條和一點資訊不同的刷新方式，后面討論刷新的時候會再次提到。除此之外，導航欄還提供了“網(wǎng)易熱榜和消息通知”。
2.4 首頁-滾動選項卡
滾動選項卡（scrollable tabs）的切換方式，三者均支持左右滑動和點擊兩種交互手勢。
2.5 頻道定制頁-編輯標簽
點擊菜單欄icon，進入頻道定制頁，界面從屏幕底部彈出，三個產(chǎn)品均是如此。這和前面提到的點擊發(fā)布icon，進入發(fā)布界面的跳轉方式一致。
今日頭條：點擊編輯按鈕或者長按可以對某個標簽進行操作，拖動可進行排序，標簽呈抖動狀態(tài)。點擊添加，可以將感興趣的話題添加到“我的頻道”模塊，新增加的標簽添加到“我的頻道”的最后一項，并且利用徽標 (badge) 進行提示。點擊刪除按鈕，標簽從“我的頻道”中消失，并且自動歸類到界面下方的幾個分類中。下拉或者點擊關閉按鈕可以退出頻道定制界面。
一點資訊：點擊編輯按鈕或者長按可以對某個標簽進行操作，拖動可進行排序。點擊添加后，新增加的標簽添加到“我的頻道”模塊自定義標簽的第一項（即“關注、推薦”之后），并利用徽標（badge）進行提示。點擊刪除按鈕，標簽從“我的頻道”中消失。想退出頻道定制界面需要點擊關閉按鈕。
網(wǎng)易新聞：和前兩者一樣，點擊編輯按鈕或者長按可以對某個標簽進行操作，拖動可進行排序。點擊添加后，新增加的標簽添加到“我的欄目”自定義標簽的最后一項，但沒有徽標（badge）提示。點擊刪除，被刪除的標簽歸類到“最近刪除”模塊。想退出頻道定制界面需要點擊關閉按鈕。
標簽呈可編輯狀態(tài)時，只有今日頭條額外進行了動態(tài)設計，一點資訊和網(wǎng)易新聞只是從視覺上呈現(xiàn)出來，多了刪除圖標，告知用戶標簽可編輯。個人認為，今日頭條的設計更合適一些，而且抖動狀態(tài)也和手機桌面對應用進行調(diào)整或刪除時的交互狀態(tài)一致，與用戶的認知相符。
添加標簽后，新增標簽在選項卡中的位置，一點資訊的排序更合適一些。用戶將某個標簽添加到定制模塊，說明近期在使用產(chǎn)品的過程中，更希望看到與所選標簽相關的內(nèi)容，將標簽盡量前置是最合適的排序方案，而且最好利用徽標（badge）進行提示。
在刪除標簽方面，網(wǎng)易新聞的設計更合適，用戶將標簽刪除，說明對相關話題不感興趣，那么被刪除標簽的去向就不那么重要，但是也不排除用戶因為誤操作將標簽刪除的情況，這時網(wǎng)易新聞就提供了一個讓用戶反悔的機會，那就是將最近刪除的標簽歸到一類，用戶可以一目了然，準確進行頻道定制。
2.6 頻道定制頁-向上滑動
今日頭條：在頻道定制界面向上滑動，當“熱門精選”模塊滑動到navbar的位置時，文案置頂顯示，“熱門精選、生活娛樂、體育財經(jīng)、科教文藝、其它”幾個部分相當于選項卡的形式。隨著界面向上滑動，選項卡自動定位到相關模塊。這里的選項卡不支持左右滑動的交互手勢，但可以通過點擊切換。
一點資訊：點擊“換一換”，就可以對“添加頻道”的標簽進行換新。
2.7 新聞詳情頁-導航欄-聽音頻
今日頭條：在新聞詳情頁中，導航欄設置了聽音頻和搜索的功能，搜索功能比較常見，這里著重分析一下聽音頻功能。點擊耳機icon，界面出現(xiàn)彈窗，音符跳動，說明當前新聞正在播放音頻，導航欄耳機icon也會變?yōu)橐纛l播放模式。再次點擊耳機icon，可暫停播放，音符不再跳動。
點擊彈窗，新聞文字出現(xiàn)黑色遮罩層，彈窗高亮顯示。點擊黑色遮罩層，可返回閱讀新聞，音頻繼續(xù)播放，彈窗收起，但不會消失。在彈窗內(nèi)，新聞標題一直滾動播出（無論音頻是播放狀態(tài)還是暫停），操作按鈕包括暫停、播放下一個、關閉當前音頻。點擊播放下一個按鈕，彈窗內(nèi)的縮略圖、新聞標題和音頻內(nèi)容變?yōu)橄乱粋€，當前新聞文字不會變更。點擊關閉，退出音頻播放，彈窗消失。
音頻處于播放或者暫停狀態(tài)時，退出新聞詳情頁，彈窗不會消失，位置固定。
一點資訊：在新聞詳情頁中，沒有提供聽新聞功能，但是首頁滾動選項卡和tabbar都有“一點音頻”模塊，兩者除了導航欄設置不同之外，界面其它內(nèi)容完全相同，這一點前文提到過。用戶可進入該界面播放音頻內(nèi)容，模塊分類眾多。
在一點音頻界面，點擊想播放的內(nèi)容，界面跳轉至二級界面，在二級界面用戶可見音頻詳情和播放列表。當前播放內(nèi)容的字體用品牌色呈現(xiàn)，且有音符跳動提示，百分比按播放進度顯示，點擊該模塊可進入下一級界面。
由二級界面返回一點音頻主界面，若此前沒有聽過音頻，那么在主界面會增加用戶收聽歷史的相關模塊。在主界面內(nèi)有圓形縮略圖，像唱片一樣。點擊縮略圖，窗口展開，播放時縮略圖順時針旋轉，文案滾動播出。只有文案字數(shù)過多時滾動播出，字數(shù)不多就呈靜止狀態(tài)，而且只有在播放時滾動，暫停狀態(tài)時，文案靜止。和今日頭條一樣，可對音頻進行操作，包括暫停、播放下一個和關閉，但不管用戶是否點擊上述按鈕，窗口在展開幾秒之后都會自動收回。今日頭條在點開窗口之后會有遮罩層，點擊遮罩層，窗口才會收回，這是兩者不同的地方。
在使用網(wǎng)易新聞的過程中，沒有發(fā)現(xiàn)聽音頻的功能。
2.8 新聞詳情頁-導航欄-更多功能
三個產(chǎn)品還把一些功能放在了導航欄的更多中（三個點），點擊更多，界面出現(xiàn)底部彈窗，即活動視圖（Activity Views）。今日頭條和網(wǎng)易新聞活動視圖的背景和界面里的icon一起彈出，而一點資訊的背景和icon依次出現(xiàn)，并且icon與icon之間還有時差，這些小動效的運用使產(chǎn)品用起來更加有趣，充滿活力。
2.9 新聞詳情頁-導航欄-字體調(diào)整
在更多功能中，三個產(chǎn)品均可以對字體大小進行調(diào)整。今日頭條和一點資訊只能通過點擊icon，之后再拖動滑塊進行設置，而網(wǎng)易新聞不僅可以如此，還可以通過雙指縮放大小，充分發(fā)揮了手勢交互的優(yōu)勢，減少了用戶的操作成本。無論是調(diào)節(jié)滑塊還是雙指縮放，網(wǎng)易新聞都會有toast浮層進行提示，而不僅僅是遮罩下文字大小的變化。
2.10 新聞詳情頁-向上/向下滑動
今日頭條：在新聞詳情頁，隨著界面向上滑動，作者頭像、作者名稱和關注按鈕在導航欄顯示，向下滑動，導航欄無變化。
一點資訊：在詳情頁閱讀新聞，導航欄的變化和今日頭條一樣。向上滑動，作者頭像、作者名稱和關注按鈕在導航欄顯示，向下滑動，導航欄無變化。
網(wǎng)易新聞：隨著界面向上滑動，作者頭像和名稱在導航欄顯示，關注按鈕消失，跟貼人數(shù)按鈕由線性改為面性。界面向下滑動，導航欄出現(xiàn)關注按鈕。
在新聞詳情頁閱讀內(nèi)容，向上或者向下滑動的過程中，三個產(chǎn)品界面的設計大同小異。這時與競品拉開差距的關鍵便取決于一些小的設計細節(jié)，三個產(chǎn)品對比，關注按鈕的呈現(xiàn)方式有所不同。
今日頭條的導航欄右側已經(jīng)放置了三個icon，所以把關注按鈕放在了界面左側，作者名稱的后面，在向上閱讀內(nèi)容的過程中，關注按鈕一直放置在導航欄。一點資訊的關注按鈕放在界面右側用戶更便于點擊的區(qū)域，和今日頭條一樣，在向上瀏覽內(nèi)容閱讀新聞時，按鈕一直在導航欄。網(wǎng)易新聞只有當用戶向上滑動界面后再向下滑動，反復閱讀內(nèi)容時，關注按鈕才會出現(xiàn)在導航欄左側，作者名稱的位置。
個人認為，網(wǎng)易新聞的設計更加的人性化，用戶閱讀新聞，只有對內(nèi)容感興趣才會反復觀看。當界面向上滑動之后再下滑，就是用戶反復閱讀的表現(xiàn)，用戶可能會對同一作者發(fā)布的其它內(nèi)容也感興趣，此時導航欄通過動效呈現(xiàn)關注按鈕，恰到好處，剛好可以引導用戶關注作者。
2.11 新聞詳情頁-評論
閱讀新聞的過程中，想要觀看評論，點擊界面底部評論icon，產(chǎn)品會自動定位到第一條評論，今日頭條的icon無變化，一點資訊和網(wǎng)易新聞的icon都會隨之改變，再次點擊icon之后，新聞會自動回到上次閱讀的位置。
對于第一次點擊評論icon之后，icon需不需要有所變化，我認為一點資訊和網(wǎng)易新聞的設計方式更合適一些，即有所變化。這樣用戶在瀏覽內(nèi)容時，就可以從視覺上充分了解自己處在界面的什么位置，而不需要通過上下滑動界面來定位。
網(wǎng)易新聞：點擊底部評論icon，定位到的是新聞詳情頁的第一條評論，這是上文提到的情況，但若是點擊導航欄的跟貼人數(shù)按鈕，界面則會跳轉到單獨的評論界面。
2.12 新聞中包含視頻
若新聞中包含視頻，并且視頻處于暫停狀態(tài)時，三個產(chǎn)品的處理方式是一樣的，向上滑動界面，視頻和文字一起隱藏，就和閱讀純文字的新聞一樣。
若視頻處于播放狀態(tài)，向上瀏覽內(nèi)容，三個產(chǎn)品的處理方式各有不同。
今日頭條：播放的視頻窗口會始終懸浮在界面的上半部分，通欄顯示。
一點資訊：和今日頭條不同，若視頻處于播放狀態(tài)，向上瀏覽內(nèi)容，視頻窗口還是會隱藏，并且會一直播放。
網(wǎng)易新聞：若視頻處于播放狀態(tài)，向上滑動界面，視頻會在較小的窗口播放，同時右側呈現(xiàn)新聞概要，該模塊會一直懸浮在界面的上部分。點擊“放大窗口”，播放窗口被放大，但會留有邊距，占據(jù)和文字一樣的界面寬度。
若在新聞中包含視頻，且視頻處于播放狀態(tài)，個人是不建議學習一點資訊和純文字新聞一樣的處理方式的。今日頭條和網(wǎng)易新聞的方案比較合適，但兩者也有差別。用戶能夠點擊進入新聞詳情頁，說明已經(jīng)通過上一級界面的標題文案對內(nèi)容有一個基本的了解，點擊播放按鈕就是想觀看視頻，網(wǎng)易新聞多的一步放大窗口的操作，只是增加了用戶的操作成本，沒有太大的必要，所以今日頭條的處理方式更合適一些，建議學習。
2.13 已讀內(nèi)容狀態(tài)可見
在詳情頁閱讀之后，點擊返回按鈕或者向左滑動屏幕返回首頁。閱讀過的新聞，文案變?yōu)榛疑崾居脩舸藯l新聞已經(jīng)閱讀過了，做到狀態(tài)可見。
2.14 同類型關鍵詞條的搜索提示
在詳情頁閱讀完某條新聞后返回首頁，今日頭條會有同類型關鍵詞條的搜索提示。一點資訊和網(wǎng)易新聞返回后，也只是前文提到的，新聞文案會呈灰色。今日頭條根據(jù)用戶已經(jīng)閱讀的新聞內(nèi)容提取關鍵詞，進行搜索提示，用戶很大程度上會點擊，這樣就可以提高產(chǎn)品的用戶活躍度。這是一個非常新穎的設計點，建議學習。
2.15 點擊新聞的關閉按鈕
每條新聞的右下角都有一個關閉按鈕，點擊之后出現(xiàn)遮罩層和彈窗。彈窗不是顯示在界面中某個固定的位置，而是根據(jù)新聞模塊所處的位置不同而改變，彈窗與關閉按鈕之間的距離固定。在彈窗選擇想要關閉該條新聞的原因，點擊之后，彈窗和遮罩層自動消失，產(chǎn)品給用戶反饋“將減少類似內(nèi)容”的相關推薦。
今日頭條給用戶反饋的彈窗出現(xiàn)在界面內(nèi)容區(qū)域的頂部，即滾動選項卡的下方區(qū)域，且采用灰色不透明背景層承載文案，與產(chǎn)品界面背景的顏色差異性不大，對用戶干擾性較小，提示作用較弱。一點資訊和網(wǎng)易新聞的提示彈窗均出現(xiàn)在界面中間部分，且采用的是黑色遮罩層作為文案背景，對用戶的干擾和今日頭條相比較大一點，更能起到提示的作用。
我個人更傾向于使用第一種彈窗，用戶既然選擇了關閉該條新聞資訊，就說明對相同類型的內(nèi)容不感興趣，基于大數(shù)據(jù)自然要減少類似內(nèi)容的推薦，這是意料之中的事，彈窗浮層應該對用戶的干擾越小越好，這樣用戶就可以集中注意力繼續(xù)瀏覽其它內(nèi)容。
2.16 刷新
三個產(chǎn)品都設置了兩種刷新的交互手勢，點擊tabbar的首頁icon或者下拉，這兩種刷新方式都比較常見。網(wǎng)易新聞除了前兩者之外，還設置了第三種，即點擊navbar的網(wǎng)易logo進行刷新，這是與前兩者不同的地方。
當用戶向上滑動，閱讀了幾屏之后，tabbar的首頁icon會有刷新提示，詳細情況在視覺分析部分再討論。用戶刷新內(nèi)容，產(chǎn)品自定義了加載動畫，加載完成之后，會有信息反饋給用戶，提示其已完成內(nèi)容刷新，并且標明刷新信息的數(shù)量。
個人認為，網(wǎng)易新聞第三種刷新的方式雖然很獨特，但是由于logo所處的位置在整個界面的頂部，無論用戶是左手持機，還是右手持機，都是很難觸控到的區(qū)域，這樣的加載方式通常也用不到，只是增加了開發(fā)成本。我猜測，網(wǎng)易新聞可能是想加強產(chǎn)品的品牌感，所以把logo放在了界面頂部，但又不想僅僅占據(jù)界面空間，所以增加了刷新的功能。
2.17 視頻頁
三個產(chǎn)品在標簽欄都為視頻設置了單獨的界面。
今日頭條：點擊播放按鈕，視頻開始播放，播放過程中點擊視頻所在區(qū)域，進度條在黑色遮罩層上呈現(xiàn)。今日頭條有一個和其它產(chǎn)品明顯不同的功能，就是在視頻區(qū)域的右上角支持音頻播放模式。
點擊音頻播放按鈕，界面會跳轉到下一層級，此時在二級界面，音頻會從點擊按鈕之前視頻播放到的時間點開始。
由音頻播放界面返回，在視頻界面會有音頻播放的彈窗，這和前文提到的聽新聞的交互狀態(tài)一致，而且視頻畫面還是停留在點擊音頻按鈕之前，在視頻界面音頻仍處于播放狀態(tài)。倘若點擊視頻的播放按鈕，音頻就會暫停播放，視頻從音頻播放到的時間點開始。
一點資訊：點擊播放按鈕，視頻開始播放，播放過程中點擊視頻所在區(qū)域，進度條在黑色遮罩層上呈現(xiàn)。值得學習的是，在視頻處于暫停狀態(tài)時，作者的關注按鈕和視頻的分享按鈕都是隱藏起來的，在用戶點擊播放之后，兩個按鈕才會通過簡單的動效呈現(xiàn)出來。
網(wǎng)易新聞：點擊播放按鈕，視頻在單獨的界面播放，這是與其它兩個產(chǎn)品不同的地方。并且界面背景采用黑色，這樣視頻區(qū)域更加聚焦，各項功能按鈕更加明顯。當前視頻播放完畢之后會自動循環(huán)從開始繼續(xù)播放。若向上滑動則會播放下一條視頻，這里的下一條視頻不是一級界面視頻頁排版中排在當前播放視頻下方的，而是播放界面根據(jù)用戶數(shù)據(jù)另外推薦的其它視頻。此時若要播放一級界面中的下一條視頻，還需要點擊返回或者左滑才可以。視頻播放界面提供了一部分功能按鈕，還有一些不常用到的收在了更多中（界面右上角的三個點）。
從視頻處于暫停狀態(tài)到點擊播放視頻，今日頭條和一點資訊的界面交互設計是類似的，不同的是一點資訊運用了動效來顯示關注和分享按鈕。前文提到過，動態(tài)設計可以很好的吸引用戶注意力，這樣既可以引導用戶點擊關注和分享，從而加強產(chǎn)品的用戶活躍度，又可以讓產(chǎn)品用起來更有趣味，用戶體驗更好一些。所以，一點資訊的設計方式更值得學習。
網(wǎng)易新聞將視頻放在單獨的界面播放，這是和當前兩大短視頻平臺（抖音和快手）相同的表現(xiàn)方式，比較容易讓用戶集中注意力，關注視頻內(nèi)容?？墒牵~與熊掌不可兼得，若想要播放一級界面內(nèi)的其它視頻，就要增加用戶的操作成本，這是與前兩者不同的地方。
兩種視頻的播放方式都比較常見，至于哪種呈現(xiàn)方式更好，就需要具體問題具體分析了，這里不再詳細討論。
2.18 網(wǎng)易新聞-圈子
網(wǎng)易新聞的圈子界面，在瀏覽內(nèi)容的過程中，倘若在某個模塊停留幾秒，產(chǎn)品會自動彈出評論的對話框，系統(tǒng)會認為你對這個話題感興趣，可能有一些觀點要發(fā)表，這是網(wǎng)易新聞設計人性化的地方。在我用過的產(chǎn)品中，微博手機客戶端也有類似的設計。
3.1 整體布局
今日頭條：對內(nèi)容進行劃分的方式有兩種，首頁、視頻、放映廳三個主要界面，均采用白色背景+淺灰色分割線，個人中心界面采用灰色背景+白色圓角卡片。
一點資訊：同樣采用了兩種方式進行內(nèi)容劃分，其中首頁和一點音頻頁采用的是白色背景+淺灰色分割線，其實一點音頻頁的多彩圖標區(qū)和相聲評書之間也可以算是留白分割，短視頻頁和個人中心頁采用的是灰色背景+白色通欄卡片，小視頻頁則是兩列feed流卡片。
網(wǎng)易新聞：四個主要界面均采用的是灰色背景+白色圓角卡片，但是個人中心頁的卡片寬度比其它三個界面略窄，這一點不太符合統(tǒng)一性原則。
內(nèi)容分割的方式一般有三種，分別為留白分割、線性分割、卡片分割。留白分割適用于內(nèi)容較少的產(chǎn)品，這樣界面簡潔清晰。當信息內(nèi)容較多時，若采用留白分割的方式就會浪費很多空間，這時就可以采用線性分割的方式，讓信息內(nèi)容展示清楚的同時又可以充分利用界面空間?？ㄆ指钍菍⑿畔⒛K化，每個卡片單獨承載一組內(nèi)容，卡片與卡片之間的區(qū)分更加明顯。無論是什么產(chǎn)品，最好不要出現(xiàn)兩種以上的信息分割方式，不然界面會顯得很混亂。
新聞資訊屬于高密度內(nèi)容的產(chǎn)品，最好是采用線性分割或者卡片分割的方式，這樣既可以把信息內(nèi)容展示清楚，又可以提高屏效。此次分析的這三款產(chǎn)品基本上也都是采用的這兩種分割方式。個人更建議學習網(wǎng)易新聞的設計，每個卡片單獨承載一組內(nèi)容，卡片與卡片之間區(qū)分明顯，卡片內(nèi)部利用留白進行信息層級的劃分。
3.2 首頁
產(chǎn)品品牌感傳遞的方式有很多種，色彩的運用是很重要的一個途徑。比如，提到藍色大部分用戶首先想到的產(chǎn)品是支付寶，提到綠色首先想到的是微信。除了用在logo中，在產(chǎn)品的界面元素中合理恰當?shù)倪\用品牌色，也可以進一步加深用戶對產(chǎn)品的印象。
首頁statusbar和Navbar的背景色，今日頭條采用的是品牌色。一點資訊默認是白色，但可以在設置里對背景色進行定制。網(wǎng)易新聞默認是品牌色，同樣在設置里可以更換。
一點資訊：設置里的主題包括官方經(jīng)典、天空藍、太陽橙、翡翠綠和海軍藍一共五種顏色，滾動選項卡字體選中狀態(tài)跟隨主題顏色同步變化。
網(wǎng)易新聞：設置里的主題包括官方經(jīng)典和極簡主義兩種模式。
三個產(chǎn)品tabbar的未選中狀態(tài)均為灰色線性icon，選中狀態(tài)均為品牌色面性icon。首頁icon在不同情況下，會有不一樣的呈現(xiàn)方式，見下圖。
3.3 搜索頁
今日頭條：搜索頁熱點新聞會用紅色描邊+紅色文案的標簽來呈現(xiàn)，以此來吸引用戶注意力。并且頭條熱榜的排序也會用紅色數(shù)字來呈現(xiàn)前三名，灰色數(shù)字呈現(xiàn)之后的名次。
一點資訊：搜索頁的熱榜文案前面還添加了小的icon，并且榜單排序的數(shù)字從第一名到第三名雖然都用了彩色，但隨著熱度的遞減，顏色從紅色到橙色漸變，這樣設計比今日頭條單純的用紅色更能突顯層次。但是，今日頭條運用了紅色描邊+紅色文案的提示標簽，一點資訊卻沒有類似的設計。
網(wǎng)易新聞：“網(wǎng)易熱搜”文案進行了單獨的字體設計，排序數(shù)字前三名用彩色icon呈現(xiàn)，提示標簽根據(jù)“沸”、“熱”和“新”的區(qū)分，背景采用不同顏色。在搜索頁點擊“查看完整榜單”可跳轉到網(wǎng)易熱榜單獨界面。在該界面，頭部用紅色作為背景，這點符合用戶的認知，紅色是熱鬧與沸騰的代名詞，同時用橙色和黃色作為輔助色，來表現(xiàn)界面的裝飾元素。
三者相比較，網(wǎng)易新聞的搜索頁設計感更強，值得學習的地方更多一些。
3.4 頻道定制頁
今日頭條：頻道定制界面分為“我的頻道、為你推薦、熱門精選、生活娛樂、體育財經(jīng)、科教文藝、其它”幾個模塊?！拔业念l道”部分主要采用灰色底+黑色文案?！盀槟阃扑]”模塊采用彩色底+黑色/灰色文案，每個細分部分還有與背景色同色系的icon?！盁衢T精選、生活娛樂、體育財經(jīng)、科教文藝、其它”幾個部分均采用灰色描邊+黑色文案。每個標簽文案的字體大小一樣，均為15號。
一點資訊：“我的頻道”和“添加頻道”的標簽均采用的灰色底+黑色文案。每個標簽對文案字數(shù)進行控制，最多為4個字。文案字體大小保持統(tǒng)一，均為14號。
網(wǎng)易新聞：“我的欄目”和“更多欄目”的標簽均采用的灰色描邊+黑色文案。文案在保證辨識度的情況下，在標簽內(nèi)顯示，字體最小為9號，最大為16號。
三個產(chǎn)品均采用了4列的排版方式。個人認為今日頭條的設計更合適一些，“我的頻道”的標簽采用灰色底+黑色文案，未添加進“我的頻道”的標簽采用灰色描邊+黑色文案，兩者不僅可以從位置上進行區(qū)分，從視覺樣式上還形成了對比。
3.5 首頁排版
首頁信息流主要包括大圖、三圖、左文右圖和視頻，三個產(chǎn)品均采用的是樣式穿插的排版方式。這樣設計，于產(chǎn)品而言，體現(xiàn)了內(nèi)容的多樣性，避免信息流結構過于單一；于用戶而言，可以減小閱讀過程中的視覺壓力，使眼睛得到緩解，一舉兩得。
新聞資訊類產(chǎn)品排版采用左文右圖還是左圖右文，一直是一個值得討論的點。分析的這三款產(chǎn)品均采用的是左文右圖的排版方式，但是也有一些產(chǎn)品采用的是左圖右文，例如澎湃新聞。到底哪種排版方式更適合自己的產(chǎn)品，我們需要具體問題具體分析，這里不再詳細討論。
3.6 新聞詳情頁-字體
字體屬性是在將文字大小設置為標準的情況下個人手動測量，可能存在誤差。
三個產(chǎn)品的標題和正文均采用的是iOS默認字體蘋方-簡，但網(wǎng)易新聞在設置里還提供了其它幾種字體選項，用戶可自行下載使用。字體的字號、字重和行間距，各產(chǎn)品相差不大，只是一點資訊正文的字間距和今日頭條、網(wǎng)易新聞相比有一些差別，一點資訊字間距相對較小一些。
排版方面，中文文案的段落與段落之間是通過首行縮進或者段間距的方式進行劃分。今日頭條的段間距和其它兩者相比較小一些，所以又進一步采用了首行縮進的方式，一點資訊和網(wǎng)易新聞的段間距較大，完全可以起到劃分段落的作用，所以兩者均采用了左對齊的排版方式。
其實，這兩種排版方式都比較常見，首行縮進兩個文字是我們一直以來的中文排版規(guī)范，相對規(guī)矩傳統(tǒng)一些；左對齊排版從視覺上來說更加美觀、整齊。
3.7 新聞詳情頁-評論區(qū)
評論區(qū)的設計基本上都是用戶個人信息+評價文案+其他用戶回復。今日頭條和一點資訊的評論與評論之間用留白的分割方式，網(wǎng)易新聞采用的則是灰色通欄分割線。
今日頭條用戶昵稱字體使用黑色，將其加粗，與評價文案形成對比，而一點資訊的用戶昵稱用的是藍色字體，從顏色上形成反差，對比更加明顯。網(wǎng)易新聞用戶昵稱的字體顏色根據(jù)用戶等級不同，顏色分為紅色、橙色和黑色，昵稱后面還用彩色icon+文案給用戶貼上了等級標簽。
三個界面一對比明顯可以看出，網(wǎng)易新聞評價文案的字間距太小了，過于密集，這樣不利于對文案內(nèi)容的識別，今日頭條和一點資訊對字間距的設置更合適一些。網(wǎng)易新聞這里的截圖評價文案字數(shù)比較少，視覺感受可能不太明顯，感興趣的朋友可以親自打開應用體驗一下。其他用戶對評價的回復，今日頭條和網(wǎng)易新聞都放在了下一級界面中，一點資訊則在當前評論區(qū)內(nèi)展示，并通過灰色背景進行對比區(qū)分。
今日頭條和一點資訊評論區(qū)的設計簡潔清晰，網(wǎng)易新聞則更注重熱鬧氛圍的表現(xiàn)，除了對用戶等級進行了劃分，對比較精彩的評價文案還加蓋了印章，這也是對用戶的一種鼓勵機制，可以激勵大家多發(fā)表評論，從而加強用戶活躍度，提高產(chǎn)品的用戶留存率。
3.8 視頻頁
視頻界面三者均采用的是豎向單列信息流的形式，并且視頻播放區(qū)域大致都是16:9。
今日頭條將作者信息、視頻文案和操作功能按鈕都放在了播放區(qū)域之外，所以一屏之內(nèi)僅展示一個半視頻模塊。一點資訊將視頻文案放在了播放區(qū)域，用黑色遮罩層做背景，增強文案識別度，這樣就提高了界面空間利用率，一屏之內(nèi)可以容納兩個半視頻模塊。網(wǎng)易新聞的視頻界面留出了運營資源位，banner占據(jù)了一定的界面空間，雖然將視頻的作者信息進行了弱化，但是文案字體和其它兩個產(chǎn)品相比較，又占據(jù)了較多的縱向空間，所以一屏之內(nèi)可以容納一個多的視頻模塊。
個人認為，一點資訊的設計更好一些。將文案放在播放區(qū)域，這樣可以提高屏效，讓一屏之內(nèi)盡可能展示多的視頻模塊。同時為了讓界面更有呼吸感，將關注和分享的按鈕隱藏，點擊播放之后，按鈕才會通過動效呈現(xiàn)出來。
3.9 個人中心頁
三個產(chǎn)品的重點都在引導用戶進行注冊或登錄上，因此界面最吸引人注意力的就是品牌色的登錄按鈕。
今日頭條：界面簡單清晰，把較重要的功能icon用品牌色呈現(xiàn)，并且根據(jù)統(tǒng)一性原則，與其它icon保持一致，采用線性。由于首頁右上角有發(fā)布按鈕，這里再一次提及此功能，就沒有重點表現(xiàn)，同樣采用了線性的按鈕。
一點資訊：除了登錄按鈕之外，最重要的就是運營區(qū)域了，界面中的其它icon均采用的是線性呈現(xiàn)。
網(wǎng)易新聞：界面承載的內(nèi)容很多，除了登錄、運營資源位，還提供了簽到功能。網(wǎng)易新聞把發(fā)布功能放在了個人中心頁，其它的界面沒有提及此功能，因此，為引導用戶發(fā)布自己的動態(tài)，按鈕采用面性呈現(xiàn)。界面其它icon也根據(jù)功能層級不同分別采用線性和面性呈現(xiàn)。
其實很難準確的說哪種設計方案更好，每個產(chǎn)品都有自己的考量，界面承載的信息量也不同，說到底，選擇與自己產(chǎn)品更相符的方案那就是最好的。
3.10 夜間模式/深色模式
今日頭條和一點資訊的設置文案均是“夜間模式”，可是設計方案卻不同。今日頭條只是在日常的白色界面上覆蓋了一層黑色遮罩層，把整個界面的亮度降下來。一點資訊則是重新進行了界面設計，將界面背景和通欄卡片改為了深灰色，同時將文案和按鈕的明度降低了。網(wǎng)易新聞與前兩者不同，它的設置文案是“深色模式”，但設計方案和一點資訊類似，將界面背景和圓角卡片改為了偏藍的黑色，不同的是網(wǎng)易新聞的文案明度更高。
這里需要明確兩個概念，夜間模式和深色模式。夜間模式注重的是弱光環(huán)境下的用戶體驗，通過降低屏幕的亮度來減弱對眼睛的刺激，這種模式在強光下體驗不佳。而深色模式也就是蘋果從iOS13開始推出的DarkMode，它是一種界面設計風格，在強弱光下均可，只是通過深色的背景突顯文字和圖片，使用戶的注意力集中在界面內(nèi)容上。針對這一模式蘋果官方和Google的MaterialDesign都有給出相關色彩運用的建議。
其實無論是iOS還是Android，官方明確說明了并不強制使用設計指南，而且近些年來iOS和Android之間的差異也越來越小了。例如此次分析的iOS端產(chǎn)品，一點資訊夜間模式的界面背景采用的是MaterialDesign的建議用色，其色值為#121212，而卡片顏色卻沒有嚴格按照官方的建議，一點資訊通欄卡片的色值為#181818，MaterialDesign給的建議是100%的#121212疊加5%的#FFFFFF，但從視覺上看這兩種顏色差距不大。網(wǎng)易新聞背景的色值為#141416，圓角卡片的色值為#1D1D1F，這些都與官方建議有所不同。當然，這些數(shù)值都是個人手動測量，可能存在誤差，但想說的重點是，官方設計指南是給我們一個參考值，按照參考值設計界面，內(nèi)容有比較好的可讀性，至于具體的設計方案還是要根據(jù)自己產(chǎn)品的實際情況而定。
總的來說，今日頭條算是中規(guī)中矩的產(chǎn)品，一點資訊比較注重動效的運用，網(wǎng)易新聞在視覺表現(xiàn)方面更加突出。以上就是我在使用這三款產(chǎn)品時，遇到的一些比較有趣的設計點，如有分析不對的地方，望各位海涵。文中提到的許多細節(jié)，不僅可以運用在新聞資訊類產(chǎn)品的設計中，其它類型的產(chǎn)品也可以借鑒。當然，在這三款產(chǎn)品中還有許多功能沒有體驗到，如果大家發(fā)現(xiàn)有什么值得討論的細節(jié)，歡迎各位朋友留言。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務