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