隨著互聯網的發展，人們閱讀新聞資訊的方式也從紙質閱讀轉變為電子閱讀。

本文以今日頭條、一點資訊和網易新聞這三款應用為競品，從交互和視覺兩方面進行對比分析，討論一下產品中值得我們學習的設計點以及可以進一步優化改進的地方。

目錄

一、體驗環境

二、交互對比

三、視覺對比

四、思考與總結

一、體驗環境

手機型號：iPhone 8 plus

手機系統：ios 12.1

應用版本：今日頭條V8.5.0   一點資訊V5.9.8.0   網易新聞V86.0

二、交互對比

2.1 首頁-導航欄-搜索

今日頭條：搜索框內有默認的文案，在首頁瀏覽內容時，文案一直處于靜態。點擊搜索框進入搜索頁之后再返回首頁，搜索框內文案才會改變，改變的方式是由下往上滾動播出，搜索icon靜止不動?；蛘咴谒⑿陆缑鏁r，文案也會改變。

一點資訊：搜索框內同樣有默認文案，但不是靜態的，文案在搜索框內滾動播出。第一次打開應用時，有一條紅色漸變線圍繞著搜索框逆時針旋轉兩圈，此時的默認文案是“搜一搜你感興趣的內容”，漸變線旋轉兩圈之后，搜索框內文案發生改變，按照搜索頁熱榜的排序滾動播出。在首次打開產品或者從其它界面跳轉到首頁時，動態漸變線都會出現。

網易新聞：搜索框內同樣有默認文案，而且也不是靜態的，文案和搜索icon一起滾動播出，播出順序按照搜索頁熱搜話題的排序進行。

對搜索的設計，若搜索框內文案一直處于靜態，這對用戶實時了解新聞是不利的，當前社會發展迅速，信息更新速度比較快，短時間內就會有不同的新聞出現，文案在搜索框內滾動播出是比較好的選擇。這既有利于用戶掌握新聞動態，又能增加內容的曝光度。一點資訊動態的漸變線是一個非常有趣的設計點，可以吸引用戶更多的注意力，引導其進行搜索。

2.2 首頁-導航欄-發布

今日頭條：點擊發布icon，從屏幕下方彈出發布界面。發布界面承載的內容很多，占據了除狀態欄之外的整個界面空間。在發布界面點擊輸入框，界面還會跳轉到單獨的編輯內容頁，在編輯頁可輸入想要發布的內容，輸入完畢后直接點擊發布按鈕即可。若編輯內容后不想發布了，點擊取消，會有彈窗出現，進行操作提示，點擊之后直接返回首頁；若把編輯的內容全部刪除再點擊取消，就不會有彈窗了，界面就會直接回到首頁。若用戶只是點擊了首頁的發布icon，進入到發布界面，并沒有進入編輯內容界面，要退出的話可以向下滑動，或者點擊關閉按鈕即可。

在發布界面，有一個“邀請你參與討論”的模塊，該模塊的最后一條文案露出一半，告知用戶在該部分下方還有未展示的內容，向上滑動可以查看更多。

一點資訊：在首頁點擊發布icon之后，同樣會從屏幕下方彈出發布界面，發布界面承載的內容非常少，僅提供了三個功能，即發視頻、拍小視頻、寫短內容。點擊前兩者即可進行發布視頻的相關操作，點擊寫短內容之后，界面會跳轉到編輯內容頁，和今日頭條的設計類似，如在編輯界面輸入內容后點擊返回，會有彈窗提示，若編輯界面沒有內容，就會直接返回首頁。在發布界面要想退出，可以點擊關閉按鈕，或者點擊黑色遮罩層。

網易新聞：首頁沒有提供發布功能，在個人中心界面可以發布動態，在發布界面可以直接輸入想發布的內容。和前兩者類似，在發布界面有內容的情況下退出，界面會有彈窗提示，若發布界面沒有任何內容，就可以直接返回個人中心頁。

對提示彈窗的設計，今日頭條和一點資訊用的都是iOS官方設計指南給的警告框  (Alerts) ，不支持點擊遮罩層將其關閉，用戶必須做出操作才行。只不過今日頭條包括三個選項按鈕，一點資訊只有兩個。其實網易新聞和一點資訊的設計是相同的，只是網易新聞對源生警告框進行了自己的設計。兩者標題傳達的主要意思一致，但按鈕的位置不同，一點資訊把保存按鈕放在了左邊，網易新聞卻正好相反，放在了右邊。但兩者都對其進行了重點設計，一點資訊將字體加粗，網易新聞將按鈕用顏色填充。

官方給的建議是肯定性操作放在右邊，否定性操作放在左邊。這里的肯定與否定并不是簡單的字面意思，而是說要把用戶最有可能點擊的按鈕放在右邊，取消操作按鈕放在左邊。例如，當用戶想刪除某些內容時出現彈窗提示，此時用戶想要點擊的是刪除按鈕，面對這種情況，就應該把刪除按鈕放在右邊，而非左邊。對于文中的情況，用戶點擊返回或者取消的意圖是想退出界面，也就是編輯頁輸入的內容不想發布了，此時的正向操作是不保存，所以一點資訊按鈕擺放的位置是嚴格按照官方指南給的建議設計的。網易新聞將保存按鈕放在右邊，其實是想讓用戶點擊保存，即便是出于某些原因用戶想退出界面，將輸入的內容暫時存為草稿也是滿足了一部分用戶的需求。

2.3 首頁-導航欄-補充

今日頭條：無補充。

一點資訊：點擊搜索框內的耳機icon，可以直接將滾動選項卡定位到“一點音頻”模塊，這里的“一點音頻”和點擊底部標簽欄切換到的界面是相同的，可以看出一點資訊對音頻模塊的重視。

網易新聞：導航欄的頂部左側是網易的logo，點擊可進行刷新。這是與今日頭條和一點資訊不同的刷新方式，后面討論刷新的時候會再次提到。除此之外，導航欄還提供了“網易熱榜和消息通知”。

2.4 首頁-滾動選項卡

滾動選項卡（scrollable tabs）的切換方式，三者均支持左右滑動和點擊兩種交互手勢。

2.5 頻道定制頁-編輯標簽

點擊菜單欄icon，進入頻道定制頁，界面從屏幕底部彈出，三個產品均是如此。這和前面提到的點擊發布icon，進入發布界面的跳轉方式一致。

今日頭條：點擊編輯按鈕或者長按可以對某個標簽進行操作，拖動可進行排序，標簽呈抖動狀態。點擊添加，可以將感興趣的話題添加到“我的頻道”模塊，新增加的標簽添加到“我的頻道”的最后一項，并且利用徽標 (badge) 進行提示。點擊刪除按鈕，標簽從“我的頻道”中消失，并且自動歸類到界面下方的幾個分類中。下拉或者點擊關閉按鈕可以退出頻道定制界面。

一點資訊：點擊編輯按鈕或者長按可以對某個標簽進行操作，拖動可進行排序。點擊添加后，新增加的標簽添加到“我的頻道”模塊自定義標簽的第一項（即“關注、推薦”之后），并利用徽標（badge）進行提示。點擊刪除按鈕，標簽從“我的頻道”中消失。想退出頻道定制界面需要點擊關閉按鈕。

網易新聞：和前兩者一樣，點擊編輯按鈕或者長按可以對某個標簽進行操作，拖動可進行排序。點擊添加后，新增加的標簽添加到“我的欄目”自定義標簽的最后一項，但沒有徽標（badge）提示。點擊刪除，被刪除的標簽歸類到“最近刪除”模塊。想退出頻道定制界面需要點擊關閉按鈕。

標簽呈可編輯狀態時，只有今日頭條額外進行了動態設計，一點資訊和網易新聞只是從視覺上呈現出來，多了刪除圖標，告知用戶標簽可編輯。個人認為，今日頭條的設計更合適一些，而且抖動狀態也和手機桌面對應用進行調整或刪除時的交互狀態一致，與用戶的認知相符。

添加標簽后，新增標簽在選項卡中的位置，一點資訊的排序更合適一些。用戶將某個標簽添加到定制模塊，說明近期在使用產品的過程中，更希望看到與所選標簽相關的內容，將標簽盡量前置是最合適的排序方案，而且最好利用徽標（badge）進行提示。

在刪除標簽方面，網易新聞的設計更合適，用戶將標簽刪除，說明對相關話題不感興趣，那么被刪除標簽的去向就不那么重要，但是也不排除用戶因為誤操作將標簽刪除的情況，這時網易新聞就提供了一個讓用戶反悔的機會，那就是將最近刪除的標簽歸到一類，用戶可以一目了然，準確進行頻道定制。

2.6 頻道定制頁-向上滑動

今日頭條：在頻道定制界面向上滑動，當“熱門精選”模塊滑動到navbar的位置時，文案置頂顯示，“熱門精選、生活娛樂、體育財經、科教文藝、其它”幾個部分相當于選項卡的形式。隨著界面向上滑動，選項卡自動定位到相關模塊。這里的選項卡不支持左右滑動的交互手勢，但可以通過點擊切換。

一點資訊：點擊“換一換”，就可以對“添加頻道”的標簽進行換新。

2.7 新聞詳情頁-導航欄-聽音頻

今日頭條：在新聞詳情頁中，導航欄設置了聽音頻和搜索的功能，搜索功能比較常見，這里著重分析一下聽音頻功能。點擊耳機icon，界面出現彈窗，音符跳動，說明當前新聞正在播放音頻，導航欄耳機icon也會變為音頻播放模式。再次點擊耳機icon，可暫停播放，音符不再跳動。

點擊彈窗，新聞文字出現黑色遮罩層，彈窗高亮顯示。點擊黑色遮罩層，可返回閱讀新聞，音頻繼續播放，彈窗收起，但不會消失。在彈窗內，新聞標題一直滾動播出（無論音頻是播放狀態還是暫停），操作按鈕包括暫停、播放下一個、關閉當前音頻。點擊播放下一個按鈕，彈窗內的縮略圖、新聞標題和音頻內容變為下一個，當前新聞文字不會變更。點擊關閉，退出音頻播放，彈窗消失。

音頻處于播放或者暫停狀態時，退出新聞詳情頁，彈窗不會消失，位置固定。

一點資訊：在新聞詳情頁中，沒有提供聽新聞功能，但是首頁滾動選項卡和tabbar都有“一點音頻”模塊，兩者除了導航欄設置不同之外，界面其它內容完全相同，這一點前文提到過。用戶可進入該界面播放音頻內容，模塊分類眾多。

在一點音頻界面，點擊想播放的內容，界面跳轉至二級界面，在二級界面用戶可見音頻詳情和播放列表。當前播放內容的字體用品牌色呈現，且有音符跳動提示，百分比按播放進度顯示，點擊該模塊可進入下一級界面。

由二級界面返回一點音頻主界面，若此前沒有聽過音頻，那么在主界面會增加用戶收聽歷史的相關模塊。在主界面內有圓形縮略圖，像唱片一樣。點擊縮略圖，窗口展開，播放時縮略圖順時針旋轉，文案滾動播出。只有文案字數過多時滾動播出，字數不多就呈靜止狀態，而且只有在播放時滾動，暫停狀態時，文案靜止。和今日頭條一樣，可對音頻進行操作，包括暫停、播放下一個和關閉，但不管用戶是否點擊上述按鈕，窗口在展開幾秒之后都會自動收回。今日頭條在點開窗口之后會有遮罩層，點擊遮罩層，窗口才會收回，這是兩者不同的地方。

在使用網易新聞的過程中，沒有發現聽音頻的功能。

2.8 新聞詳情頁-導航欄-更多功能 

三個產品還把一些功能放在了導航欄的更多中（三個點），點擊更多，界面出現底部彈窗，即活動視圖（Activity Views）。今日頭條和網易新聞活動視圖的背景和界面里的icon一起彈出，而一點資訊的背景和icon依次出現，并且icon與icon之間還有時差，這些小動效的運用使產品用起來更加有趣，充滿活力。

2.9 新聞詳情頁-導航欄-字體調整

在更多功能中，三個產品均可以對字體大小進行調整。今日頭條和一點資訊只能通過點擊icon，之后再拖動滑塊進行設置，而網易新聞不僅可以如此，還可以通過雙指縮放大小，充分發揮了手勢交互的優勢，減少了用戶的操作成本。無論是調節滑塊還是雙指縮放，網易新聞都會有toast浮層進行提示，而不僅僅是遮罩下文字大小的變化。

2.10 新聞詳情頁-向上/向下滑動

今日頭條：在新聞詳情頁，隨著界面向上滑動，作者頭像、作者名稱和關注按鈕在導航欄顯示，向下滑動，導航欄無變化。

一點資訊：在詳情頁閱讀新聞，導航欄的變化和今日頭條一樣。向上滑動，作者頭像、作者名稱和關注按鈕在導航欄顯示，向下滑動，導航欄無變化。

網易新聞：隨著界面向上滑動，作者頭像和名稱在導航欄顯示，關注按鈕消失，跟貼人數按鈕由線性改為面性。界面向下滑動，導航欄出現關注按鈕。

在新聞詳情頁閱讀內容，向上或者向下滑動的過程中，三個產品界面的設計大同小異。這時與競品拉開差距的關鍵便取決于一些小的設計細節，三個產品對比，關注按鈕的呈現方式有所不同。

今日頭條的導航欄右側已經放置了三個icon，所以把關注按鈕放在了界面左側，作者名稱的后面，在向上閱讀內容的過程中，關注按鈕一直放置在導航欄。一點資訊的關注按鈕放在界面右側用戶更便于點擊的區域，和今日頭條一樣，在向上瀏覽內容閱讀新聞時，按鈕一直在導航欄。網易新聞只有當用戶向上滑動界面后再向下滑動，反復閱讀內容時，關注按鈕才會出現在導航欄左側，作者名稱的位置。

個人認為，網易新聞的設計更加的人性化，用戶閱讀新聞，只有對內容感興趣才會反復觀看。當界面向上滑動之后再下滑，就是用戶反復閱讀的表現，用戶可能會對同一作者發布的其它內容也感興趣，此時導航欄通過動效呈現關注按鈕，恰到好處，剛好可以引導用戶關注作者。

2.11 新聞詳情頁-評論

閱讀新聞的過程中，想要觀看評論，點擊界面底部評論icon，產品會自動定位到第一條評論，今日頭條的icon無變化，一點資訊和網易新聞的icon都會隨之改變，再次點擊icon之后，新聞會自動回到上次閱讀的位置。

對于第一次點擊評論icon之后，icon需不需要有所變化，我認為一點資訊和網易新聞的設計方式更合適一些，即有所變化。這樣用戶在瀏覽內容時，就可以從視覺上充分了解自己處在界面的什么位置，而不需要通過上下滑動界面來定位。

網易新聞：點擊底部評論icon，定位到的是新聞詳情頁的第一條評論，這是上文提到的情況，但若是點擊導航欄的跟貼人數按鈕，界面則會跳轉到單獨的評論界面。

2.12 新聞中包含視頻

若新聞中包含視頻，并且視頻處于暫停狀態時，三個產品的處理方式是一樣的，向上滑動界面，視頻和文字一起隱藏，就和閱讀純文字的新聞一樣。

若視頻處于播放狀態，向上瀏覽內容，三個產品的處理方式各有不同。

今日頭條：播放的視頻窗口會始終懸浮在界面的上半部分，通欄顯示。

一點資訊：和今日頭條不同，若視頻處于播放狀態，向上瀏覽內容，視頻窗口還是會隱藏，并且會一直播放。

網易新聞：若視頻處于播放狀態，向上滑動界面，視頻會在較小的窗口播放，同時右側呈現新聞概要，該模塊會一直懸浮在界面的上部分。點擊“放大窗口”，播放窗口被放大，但會留有邊距，占據和文字一樣的界面寬度。

若在新聞中包含視頻，且視頻處于播放狀態，個人是不建議學習一點資訊和純文字新聞一樣的處理方式的。今日頭條和網易新聞的方案比較合適，但兩者也有差別。用戶能夠點擊進入新聞詳情頁，說明已經通過上一級界面的標題文案對內容有一個基本的了解，點擊播放按鈕就是想觀看視頻，網易新聞多的一步放大窗口的操作，只是增加了用戶的操作成本，沒有太大的必要，所以今日頭條的處理方式更合適一些，建議學習。

2.13 已讀內容狀態可見

在詳情頁閱讀之后，點擊返回按鈕或者向左滑動屏幕返回首頁。閱讀過的新聞，文案變為灰色，提示用戶此條新聞已經閱讀過了，做到狀態可見。

2.14 同類型關鍵詞條的搜索提示

在詳情頁閱讀完某條新聞后返回首頁，今日頭條會有同類型關鍵詞條的搜索提示。一點資訊和網易新聞返回后，也只是前文提到的，新聞文案會呈灰色。今日頭條根據用戶已經閱讀的新聞內容提取關鍵詞，進行搜索提示，用戶很大程度上會點擊，這樣就可以提高產品的用戶活躍度。這是一個非常新穎的設計點，建議學習。

2.15 點擊新聞的關閉按鈕 

每條新聞的右下角都有一個關閉按鈕，點擊之后出現遮罩層和彈窗。彈窗不是顯示在界面中某個固定的位置，而是根據新聞模塊所處的位置不同而改變，彈窗與關閉按鈕之間的距離固定。在彈窗選擇想要關閉該條新聞的原因，點擊之后，彈窗和遮罩層自動消失，產品給用戶反饋“將減少類似內容”的相關推薦。

今日頭條給用戶反饋的彈窗出現在界面內容區域的頂部，即滾動選項卡的下方區域，且采用灰色不透明背景層承載文案，與產品界面背景的顏色差異性不大，對用戶干擾性較小，提示作用較弱。一點資訊和網易新聞的提示彈窗均出現在界面中間部分，且采用的是黑色遮罩層作為文案背景，對用戶的干擾和今日頭條相比較大一點，更能起到提示的作用。

我個人更傾向于使用第一種彈窗，用戶既然選擇了關閉該條新聞資訊，就說明對相同類型的內容不感興趣，基于大數據自然要減少類似內容的推薦，這是意料之中的事，彈窗浮層應該對用戶的干擾越小越好，這樣用戶就可以集中注意力繼續瀏覽其它內容。

2.16 刷新

三個產品都設置了兩種刷新的交互手勢，點擊tabbar的首頁icon或者下拉，這兩種刷新方式都比較常見。網易新聞除了前兩者之外，還設置了第三種，即點擊navbar的網易logo進行刷新，這是與前兩者不同的地方。

當用戶向上滑動，閱讀了幾屏之后，tabbar的首頁icon會有刷新提示，詳細情況在視覺分析部分再討論。用戶刷新內容，產品自定義了加載動畫，加載完成之后，會有信息反饋給用戶，提示其已完成內容刷新，并且標明刷新信息的數量。

個人認為，網易新聞第三種刷新的方式雖然很獨特，但是由于logo所處的位置在整個界面的頂部，無論用戶是左手持機，還是右手持機，都是很難觸控到的區域，這樣的加載方式通常也用不到，只是增加了開發成本。我猜測，網易新聞可能是想加強產品的品牌感，所以把logo放在了界面頂部，但又不想僅僅占據界面空間，所以增加了刷新的功能。 

2.17 視頻頁

三個產品在標簽欄都為視頻設置了單獨的界面。

今日頭條：點擊播放按鈕，視頻開始播放，播放過程中點擊視頻所在區域，進度條在黑色遮罩層上呈現。今日頭條有一個和其它產品明顯不同的功能，就是在視頻區域的右上角支持音頻播放模式。

點擊音頻播放按鈕，界面會跳轉到下一層級，此時在二級界面，音頻會從點擊按鈕之前視頻播放到的時間點開始。

由音頻播放界面返回，在視頻界面會有音頻播放的彈窗，這和前文提到的聽新聞的交互狀態一致，而且視頻畫面還是停留在點擊音頻按鈕之前，在視頻界面音頻仍處于播放狀態。倘若點擊視頻的播放按鈕，音頻就會暫停播放，視頻從音頻播放到的時間點開始。

一點資訊：點擊播放按鈕，視頻開始播放，播放過程中點擊視頻所在區域，進度條在黑色遮罩層上呈現。值得學習的是，在視頻處于暫停狀態時，作者的關注按鈕和視頻的分享按鈕都是隱藏起來的，在用戶點擊播放之后，兩個按鈕才會通過簡單的動效呈現出來。

網易新聞：點擊播放按鈕，視頻在單獨的界面播放，這是與其它兩個產品不同的地方。并且界面背景采用黑色，這樣視頻區域更加聚焦，各項功能按鈕更加明顯。當前視頻播放完畢之后會自動循環從開始繼續播放。若向上滑動則會播放下一條視頻，這里的下一條視頻不是一級界面視頻頁排版中排在當前播放視頻下方的，而是播放界面根據用戶數據另外推薦的其它視頻。此時若要播放一級界面中的下一條視頻，還需要點擊返回或者左滑才可以。視頻播放界面提供了一部分功能按鈕，還有一些不常用到的收在了更多中（界面右上角的三個點）。

從視頻處于暫停狀態到點擊播放視頻，今日頭條和一點資訊的界面交互設計是類似的，不同的是一點資訊運用了動效來顯示關注和分享按鈕。前文提到過，動態設計可以很好的吸引用戶注意力，這樣既可以引導用戶點擊關注和分享，從而加強產品的用戶活躍度，又可以讓產品用起來更有趣味，用戶體驗更好一些。所以，一點資訊的設計方式更值得學習。

網易新聞將視頻放在單獨的界面播放，這是和當前兩大短視頻平臺（抖音和快手）相同的表現方式，比較容易讓用戶集中注意力，關注視頻內容?？墒?，魚與熊掌不可兼得，若想要播放一級界面內的其它視頻，就要增加用戶的操作成本，這是與前兩者不同的地方。

兩種視頻的播放方式都比較常見，至于哪種呈現方式更好，就需要具體問題具體分析了，這里不再詳細討論。

2.18 網易新聞-圈子

網易新聞的圈子界面，在瀏覽內容的過程中，倘若在某個模塊停留幾秒，產品會自動彈出評論的對話框，系統會認為你對這個話題感興趣，可能有一些觀點要發表，這是網易新聞設計人性化的地方。在我用過的產品中，微博手機客戶端也有類似的設計。

三、視覺對比

3.1 整體布局

今日頭條：對內容進行劃分的方式有兩種，首頁、視頻、放映廳三個主要界面，均采用白色背景+淺灰色分割線，個人中心界面采用灰色背景+白色圓角卡片。

一點資訊：同樣采用了兩種方式進行內容劃分，其中首頁和一點音頻頁采用的是白色背景+淺灰色分割線，其實一點音頻頁的多彩圖標區和相聲評書之間也可以算是留白分割，短視頻頁和個人中心頁采用的是灰色背景+白色通欄卡片，小視頻頁則是兩列feed流卡片。

網易新聞：四個主要界面均采用的是灰色背景+白色圓角卡片，但是個人中心頁的卡片寬度比其它三個界面略窄，這一點不太符合統一性原則。

內容分割的方式一般有三種，分別為留白分割、線性分割、卡片分割。留白分割適用于內容較少的產品，這樣界面簡潔清晰。當信息內容較多時，若采用留白分割的方式就會浪費很多空間，這時就可以采用線性分割的方式，讓信息內容展示清楚的同時又可以充分利用界面空間?？ㄆ指钍菍⑿畔⒛K化，每個卡片單獨承載一組內容，卡片與卡片之間的區分更加明顯。無論是什么產品，最好不要出現兩種以上的信息分割方式，不然界面會顯得很混亂。

新聞資訊屬于高密度內容的產品，最好是采用線性分割或者卡片分割的方式，這樣既可以把信息內容展示清楚，又可以提高屏效。此次分析的這三款產品基本上也都是采用的這兩種分割方式。個人更建議學習網易新聞的設計，每個卡片單獨承載一組內容，卡片與卡片之間區分明顯，卡片內部利用留白進行信息層級的劃分。

3.2 首頁

產品品牌感傳遞的方式有很多種，色彩的運用是很重要的一個途徑。比如，提到藍色大部分用戶首先想到的產品是支付寶，提到綠色首先想到的是微信。除了用在logo中，在產品的界面元素中合理恰當的運用品牌色，也可以進一步加深用戶對產品的印象。

首頁statusbar和Navbar的背景色，今日頭條采用的是品牌色。一點資訊默認是白色，但可以在設置里對背景色進行定制。網易新聞默認是品牌色，同樣在設置里可以更換。

一點資訊：設置里的主題包括官方經典、天空藍、太陽橙、翡翠綠和海軍藍一共五種顏色，滾動選項卡字體選中狀態跟隨主題顏色同步變化。

網易新聞：設置里的主題包括官方經典和極簡主義兩種模式。

三個產品tabbar的未選中狀態均為灰色線性icon，選中狀態均為品牌色面性icon。首頁icon在不同情況下，會有不一樣的呈現方式，見下圖。

3.3 搜索頁

今日頭條：搜索頁熱點新聞會用紅色描邊+紅色文案的標簽來呈現，以此來吸引用戶注意力。并且頭條熱榜的排序也會用紅色數字來呈現前三名，灰色數字呈現之后的名次。

一點資訊：搜索頁的熱榜文案前面還添加了小的icon，并且榜單排序的數字從第一名到第三名雖然都用了彩色，但隨著熱度的遞減，顏色從紅色到橙色漸變，這樣設計比今日頭條單純的用紅色更能突顯層次。但是，今日頭條運用了紅色描邊+紅色文案的提示標簽，一點資訊卻沒有類似的設計。

網易新聞：“網易熱搜”文案進行了單獨的字體設計，排序數字前三名用彩色icon呈現，提示標簽根據“沸”、“熱”和“新”的區分，背景采用不同顏色。在搜索頁點擊“查看完整榜單”可跳轉到網易熱榜單獨界面。在該界面，頭部用紅色作為背景，這點符合用戶的認知，紅色是熱鬧與沸騰的代名詞，同時用橙色和黃色作為輔助色，來表現界面的裝飾元素。

三者相比較，網易新聞的搜索頁設計感更強，值得學習的地方更多一些。

3.4 頻道定制頁

今日頭條：頻道定制界面分為“我的頻道、為你推薦、熱門精選、生活娛樂、體育財經、科教文藝、其它”幾個模塊?！拔业念l道”部分主要采用灰色底+黑色文案。“為你推薦”模塊采用彩色底+黑色/灰色文案，每個細分部分還有與背景色同色系的icon。“熱門精選、生活娛樂、體育財經、科教文藝、其它”幾個部分均采用灰色描邊+黑色文案。每個標簽文案的字體大小一樣，均為15號。

一點資訊：“我的頻道”和“添加頻道”的標簽均采用的灰色底+黑色文案。每個標簽對文案字數進行控制，最多為4個字。文案字體大小保持統一，均為14號。

網易新聞：“我的欄目”和“更多欄目”的標簽均采用的灰色描邊+黑色文案。文案在保證辨識度的情況下，在標簽內顯示，字體最小為9號，最大為16號。

三個產品均采用了4列的排版方式。個人認為今日頭條的設計更合適一些，“我的頻道”的標簽采用灰色底+黑色文案，未添加進“我的頻道”的標簽采用灰色描邊+黑色文案，兩者不僅可以從位置上進行區分，從視覺樣式上還形成了對比。

3.5 首頁排版

首頁信息流主要包括大圖、三圖、左文右圖和視頻，三個產品均采用的是樣式穿插的排版方式。這樣設計，于產品而言，體現了內容的多樣性，避免信息流結構過于單一；于用戶而言，可以減小閱讀過程中的視覺壓力，使眼睛得到緩解，一舉兩得。

新聞資訊類產品排版采用左文右圖還是左圖右文，一直是一個值得討論的點。分析的這三款產品均采用的是左文右圖的排版方式，但是也有一些產品采用的是左圖右文，例如澎湃新聞。到底哪種排版方式更適合自己的產品，我們需要具體問題具體分析，這里不再詳細討論。

3.6 新聞詳情頁-字體

字體屬性是在將文字大小設置為標準的情況下個人手動測量，可能存在誤差。

三個產品的標題和正文均采用的是iOS默認字體蘋方-簡，但網易新聞在設置里還提供了其它幾種字體選項，用戶可自行下載使用。字體的字號、字重和行間距，各產品相差不大，只是一點資訊正文的字間距和今日頭條、網易新聞相比有一些差別，一點資訊字間距相對較小一些。

排版方面，中文文案的段落與段落之間是通過首行縮進或者段間距的方式進行劃分。今日頭條的段間距和其它兩者相比較小一些，所以又進一步采用了首行縮進的方式，一點資訊和網易新聞的段間距較大，完全可以起到劃分段落的作用，所以兩者均采用了左對齊的排版方式。

其實，這兩種排版方式都比較常見，首行縮進兩個文字是我們一直以來的中文排版規范，相對規矩傳統一些；左對齊排版從視覺上來說更加美觀、整齊。

3.7 新聞詳情頁-評論區

評論區的設計基本上都是用戶個人信息+評價文案+其他用戶回復。今日頭條和一點資訊的評論與評論之間用留白的分割方式，網易新聞采用的則是灰色通欄分割線。

今日頭條用戶昵稱字體使用黑色，將其加粗，與評價文案形成對比，而一點資訊的用戶昵稱用的是藍色字體，從顏色上形成反差，對比更加明顯。網易新聞用戶昵稱的字體顏色根據用戶等級不同，顏色分為紅色、橙色和黑色，昵稱后面還用彩色icon+文案給用戶貼上了等級標簽。

三個界面一對比明顯可以看出，網易新聞評價文案的字間距太小了，過于密集，這樣不利于對文案內容的識別，今日頭條和一點資訊對字間距的設置更合適一些。網易新聞這里的截圖評價文案字數比較少，視覺感受可能不太明顯，感興趣的朋友可以親自打開應用體驗一下。其他用戶對評價的回復，今日頭條和網易新聞都放在了下一級界面中，一點資訊則在當前評論區內展示，并通過灰色背景進行對比區分。

今日頭條和一點資訊評論區的設計簡潔清晰，網易新聞則更注重熱鬧氛圍的表現，除了對用戶等級進行了劃分，對比較精彩的評價文案還加蓋了印章，這也是對用戶的一種鼓勵機制，可以激勵大家多發表評論，從而加強用戶活躍度，提高產品的用戶留存率。

3.8 視頻頁

視頻界面三者均采用的是豎向單列信息流的形式，并且視頻播放區域大致都是16:9。

今日頭條將作者信息、視頻文案和操作功能按鈕都放在了播放區域之外，所以一屏之內僅展示一個半視頻模塊。一點資訊將視頻文案放在了播放區域，用黑色遮罩層做背景，增強文案識別度，這樣就提高了界面空間利用率，一屏之內可以容納兩個半視頻模塊。網易新聞的視頻界面留出了運營資源位，banner占據了一定的界面空間，雖然將視頻的作者信息進行了弱化，但是文案字體和其它兩個產品相比較，又占據了較多的縱向空間，所以一屏之內可以容納一個多的視頻模塊。

個人認為，一點資訊的設計更好一些。將文案放在播放區域，這樣可以提高屏效，讓一屏之內盡可能展示多的視頻模塊。同時為了讓界面更有呼吸感，將關注和分享的按鈕隱藏，點擊播放之后，按鈕才會通過動效呈現出來。

3.9 個人中心頁

三個產品的重點都在引導用戶進行注冊或登錄上，因此界面最吸引人注意力的就是品牌色的登錄按鈕。

今日頭條：界面簡單清晰，把較重要的功能icon用品牌色呈現，并且根據統一性原則，與其它icon保持一致，采用線性。由于首頁右上角有發布按鈕，這里再一次提及此功能，就沒有重點表現，同樣采用了線性的按鈕。

一點資訊：除了登錄按鈕之外，最重要的就是運營區域了，界面中的其它icon均采用的是線性呈現。

網易新聞：界面承載的內容很多，除了登錄、運營資源位，還提供了簽到功能。網易新聞把發布功能放在了個人中心頁，其它的界面沒有提及此功能，因此，為引導用戶發布自己的動態，按鈕采用面性呈現。界面其它icon也根據功能層級不同分別采用線性和面性呈現。

其實很難準確的說哪種設計方案更好，每個產品都有自己的考量，界面承載的信息量也不同，說到底，選擇與自己產品更相符的方案那就是最好的。

3.10 夜間模式/深色模式

今日頭條和一點資訊的設置文案均是“夜間模式”，可是設計方案卻不同。今日頭條只是在日常的白色界面上覆蓋了一層黑色遮罩層，把整個界面的亮度降下來。一點資訊則是重新進行了界面設計，將界面背景和通欄卡片改為了深灰色，同時將文案和按鈕的明度降低了。網易新聞與前兩者不同，它的設置文案是“深色模式”，但設計方案和一點資訊類似，將界面背景和圓角卡片改為了偏藍的黑色，不同的是網易新聞的文案明度更高。

這里需要明確兩個概念，夜間模式和深色模式。夜間模式注重的是弱光環境下的用戶體驗，通過降低屏幕的亮度來減弱對眼睛的刺激，這種模式在強光下體驗不佳。而深色模式也就是蘋果從iOS13開始推出的DarkMode，它是一種界面設計風格，在強弱光下均可，只是通過深色的背景突顯文字和圖片，使用戶的注意力集中在界面內容上。針對這一模式蘋果官方和Google的MaterialDesign都有給出相關色彩運用的建議。

其實無論是iOS還是Android，官方明確說明了并不強制使用設計指南，而且近些年來iOS和Android之間的差異也越來越小了。例如此次分析的iOS端產品，一點資訊夜間模式的界面背景采用的是MaterialDesign的建議用色，其色值為#121212，而卡片顏色卻沒有嚴格按照官方的建議，一點資訊通欄卡片的色值為#181818，MaterialDesign給的建議是100%的#121212疊加5%的#FFFFFF，但從視覺上看這兩種顏色差距不大。網易新聞背景的色值為#141416，圓角卡片的色值為#1D1D1F，這些都與官方建議有所不同。當然，這些數值都是個人手動測量，可能存在誤差，但想說的重點是，官方設計指南是給我們一個參考值，按照參考值設計界面，內容有比較好的可讀性，至于具體的設計方案還是要根據自己產品的實際情況而定。

四、思考與總結

總的來說，今日頭條算是中規中矩的產品，一點資訊比較注重動效的運用，網易新聞在視覺表現方面更加突出。以上就是我在使用這三款產品時，遇到的一些比較有趣的設計點，如有分析不對的地方，望各位海涵。文中提到的許多細節，不僅可以運用在新聞資訊類產品的設計中，其它類型的產品也可以借鑒。當然，在這三款產品中還有許多功能沒有體驗到，如果大家發現有什么值得討論的細節，歡迎各位朋友留言。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如何科學有效的度量用戶體驗是企業和用戶體驗從業者一直在思考和研究的課題。用戶滿意度作為量化體驗度量的方法也一直備受關注。那么用戶滿意度指標是怎么來的？評估模型該如何搭建？模型好壞又要如何判斷？本篇文章聚焦用戶滿意度模型搭建與檢驗，分享模型搭建與檢驗過程中的方法與技巧。

早在20世紀30年代，就有學者在社會和實驗心理學領域對滿意度展開研究，研究表明用戶滿意度反映的是用戶的一種心理狀態，是用戶對其明示的、隱含的需求和期望被滿足程度的主觀感受。用戶滿意度評估對企業生存和產品體驗提升都有重要的意義：一方面，隨著移動互聯網人口紅利逐漸消失，手機應用獲取新客的成本和難度變得越來越高，通過提升用戶滿意度充分激發現有用戶價值成為企業非常重要的商業策略。如美國顧客滿意度指數ACSI數據表明，用戶滿意度的提升能帶來用戶消費頻次的增加，同時也會為企業贏得更高的聲譽，帶來拉新、促活成本的降低。此外用戶滿意度通過度量產品體驗現狀和迭代動作有效性，對助力產品體驗提升起著重要作用。

用戶滿意度模型的構建流程如下圖所示，接下來我們一起看看：

用戶滿意度模型構建流程可分為「明確目標」「指標收集」「指標定義」「指標歸屬」「指標賦權」5個步驟：

///

Step1 明確目標

第1步是明確評估目標。明確評估目標包括明確評估用途和范疇，用戶滿意度評估的用途不同，在評估側重和衡量方式上會有不同：

如衡量產品改版效果的用戶滿意度側重關注改版目標是否達成，更關注改版前后影響體驗目標達成的體驗點變化。用于摸底產品體驗水平的用戶滿意度側重了解產品對用戶需求和期待的滿足情況，更關注產品自身體驗長短板以及相較于其他同類產品體驗優劣勢。

此外需要考慮評估范疇，一方面需要明確僅評估本品還是同時覆蓋競品，對于未在行業中取得絕對領先地位的產品，更應考慮覆蓋競品評估，明確體驗競爭優劣勢的同時尋求競品借鑒點。另一方面需要明確評估產品全局還是聚焦部分模塊，全局評估能獲取用戶對產品的整體感受，但在產品模塊繁多或復雜時，受制于用戶參與調研的耐心有限，針對每個模塊的評估問題數量無法設置太多，導致評估顆粒度較粗，可考慮聚焦重點模塊單獨評估。

///

Step2 指標收集

第2步是收集評估指標，用戶滿意度指標收集可結合案頭側、用戶側和專家側三方信息獲?。?

• 案頭側指標收集方式主要是案頭研究和產品走查。案頭研究可重點關注成熟評估模型以及行業趨勢、產品模式和用戶需求分析報告，結合對產品的走查分析，提煉“好的產品體驗”需要包含哪些要素。常用的案頭研究渠道和可查詢的信息如下圖：

• 用戶側指標收集方式主要有用戶座談會和客訴反饋，座談會把目標用戶邀請到一起暢談對產品的需求和期待，邀請對產品使用程度較深的“專家級”用戶能貢獻更多有效信息。另外客訴反饋也是能集中了解用戶對產品關注點和痛點的數據渠道。

• 專家側指標收集方法主要是專家訪談，通過向專家了解產品目標、目標實現方式及后續主要動作來拆解對當前產品體驗重要的維度和指標。專家訪談需要覆蓋到能決策產品方向的人，且專家職能身份盡可能的多樣化，如覆蓋產品、運營、設計、技術、市場等不同職能角色。

///

Step3 指標定義

第3步是指標定義，給指標下定義需考慮指標的體驗標準高低和文案描述兩方面：

體驗標準選擇要符合產品本階段的目標，標準定得過高或過低都會讓指標喪失靈敏性失去價值。指標描述一般要遵循通俗性、簡潔性和單一性原則：

///

STEP4 指標歸屬

第4步是將定義好的指標進行維度劃分與歸屬來構建評估模型。維度初步劃分有「用戶接觸產品的觸點」和「產品功能模塊」兩種方式。

拿用戶一次外出就餐的滿意度舉例，按用戶接觸產品的觸點可以分為就餐前（選餐廳、查信息、訂座等）、就餐中（菜品、服務、環境等）、就餐后（買單）滿意度。而按功能模塊劃分可以分為餐廳信息、評論信息、優惠信息滿意度。無論采用哪種先驗假設，模型構建都需要遵循“完備互斥”原則，即指標既齊全不遺漏，也沒有重復。

///

STEP5 指標賦權

因為不同評估指標的重要性程度不一樣，拿汽車產品的用戶滿意度評估為例，對普通轎車的滿意度評估更看重實用舒適，而對越野車的滿意度評估更看重汽車性能。因此在完成評估模型搭建之后，需要賦予評估指標權重，指標賦權的方法按照打權重的人不同可以劃分為專家賦權和用戶賦權兩大類：

• 用戶賦權是根據用戶對某個體驗點（指標）滿意度打分和對產品整體滿意度打分之間的關系測算出來的間接賦權方法，體驗點滿意度分數變化對產品整體滿意度分數變化的解釋程度越高，體驗點對應的指標權重就越大。常用的指標賦權方法有“線性回歸”、“因子分析”和“結構方程模型”。

• 專家賦權是領域專家，如產品、運營、設計等對指標重要性進行主觀判斷，因此又叫直接賦權法，常見的直接賦權法有“直接評定法”、“分值分配法”和“層次分析法”?！爸苯釉u定法”就是專家逐個判斷指標重要性，“分值分配法”是預先給定所有指標一個總分，專家把總分分配到各個指標上，“層次分析法”是專家對指標重要性進行兩兩對比，因為能更好地在對比過程中幫助專家理清指標的相對重要性，層次分析法是專家賦權中更為常用的方法。

那么到底應該使用用戶賦權還是專家賦權呢？這兩類賦權方式具有不同的特點，用戶賦權反映了用戶對評估指標所反映體驗點的需求強度，在初次搭建模型對用戶需求強度優先級不明確時可以考慮使用，但用戶賦權受產品現狀影響較大，產品當下已經成熟和形成規模的方向更容易獲得較高權重，而對產品未來重要但目前規模較小的方向權重則可能較小。專家賦權反映專家對產品現狀和產品未來方向的綜合判斷，可以在產品較為成熟或開始嘗試創新方向時考慮使用。

為了衡量用戶滿意度模型的好壞，完成模型搭建后需要對模型進行檢驗，模型檢驗分為「指標內容檢驗」和「結構歸屬檢驗」兩類：

///

STEP6模型檢驗

• 指標內容檢驗

指標內容檢驗關注指標描述對想要評估體驗點的符合程度和可理解性，即指標的內容效度。

指標內容檢驗可通過領域專家完成，邀請至少3名以上專家對指標內容有效性、易理解性等維度打分，專家一致評價為符合的指標占比即為模型內容效度（S-CVI）。對于專家認為不符合或專家打分不一致的指標需要咨詢專家具體原因并作出適當修改。一般而言專家一致評價符合的指標不應低于80%。常見的指標內容問題包括指標描述未能準確概括體驗點、指標描述有歧義、指標定義的體驗標準不合適等。

• 結構效度檢驗

結構歸屬檢驗是判斷評估指標與想要測量概念（歸屬維度）之間關系的方法，判斷歸屬關系的方式有看同一維度下指標間的相關關系，指標對測量概念的解釋程度等。常用的結構歸屬檢驗有同質性α信度檢驗、探索性因子分析和驗證信因子分析。

每種檢驗方法都有自己判別指標歸屬和模型可靠的標準，但是在做指標歸屬調整和指標刪減的時候不應該盲從于統計數據是否達標，還需要充分考慮指標實際意義、是否有助于我們實現評估目標等實際情況進行綜合考慮。

///

結語

用戶滿意度模型需要跟隨用戶需求和產品發展變化而不斷迭代更新，保證評估模型能反映用戶需求和業務工作。以上是我們在用戶滿意度模型搭建和檢驗方面的一點經驗，希望能拋磚引玉，歡迎大家交流探討。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

用戶體驗地圖是什么 | WHAT

用戶體驗地圖（Experience Maps）旨在通過描述用戶歷程和故事，使設計師、產品經理等項目成員更好地了解用戶和洞察訴求。所以對于用戶體驗地圖，我們可以將其定義為以下內容：

- 是一種描述用戶故事的可視化工具；

- 是一種幫助設計師、產品經理等更好地了解用戶的共創工具；

- 從用戶視角出發，直觀展現產品流程各個觸點上用戶的痛點、需求和情緒；

- 用戶體驗地圖繪制的形式并不唯一，可以根據項目需求，增減內容。

通常在接觸到需求之后，設計師就可以開始梳理現有流程、使用用戶體驗地圖了。要注意的是：

- 需要梳理的功能不分大小，都可以使用；

- 做之前，務必要先調研和訪談用戶使用產品的情況。

建議時長：

- 重要項目：120～180 分鐘- 日常項目：60～120分鐘

參與者：

- 必選：設計師、產品- 可選：研發、市場、其他

工具：

- 電腦或白板+便利貼

為什么需要用戶體驗地圖 | WHY

需要發現和拆解產品現有問題，梳理用戶流程時使用用戶體驗地圖，可以在聚焦階段，整合用戶訴求和業務訴求，共創機會點，找出解決方案，通常在以下場景中使用：

- 新產品設計：需要對需求進行拆解和優先級排序；

- 產品優化：發現產品現有問題，洞察設計發力點。

由此可見，在設計過程中使用用戶體驗地圖作為設計工具，有以下益處：

- 更好的以用戶視角來看產品的體驗；

- 通過共創，項目成員達成共識；

- 確認觸點，作為我們的設計方向；

- 通過用戶痛點找到機會點；

- 幫助梳理產品流程。

△ 用戶體驗地圖共創現場

用戶體驗地圖操作流程 | HOW

我們通常會將流程分成4 個階段：定義原則和目的 —— 梳理階段流程 —— 洞察痛點 —— 尋找機會點。

1. 定義原則和目的

首先要了解我們做用戶體驗地圖的原因和目的，包括用戶是誰、解決什么問題、用戶的目標、產品的整體目標、限定條件等等，對用戶群體、整個項目背景和共創任務目標有清晰、全面的認知。

2. 梳理階段流程 

首先是劃分階段，將用戶的行為拆分成幾個大的階段，在整理時要注意：

- 在整個產品的范圍之內盡量把故事、流程講完整；- 以廣度優先，而非深度，不要過早的沉浸到細節中。

接下來我們要將主要階段拆分成單個任務，并梳理具體的任務和觸點，羅列出過程中的任務和各個觸點，要做到事無巨細。

然后根據任務和觸點，整理對應的用戶疑問、用戶感受/情緒。通過對用戶的觀察和訪談進行梳理，客觀的描述事實，切勿自說自話或是將自己的情緒代入其中，也不要急于猜想與分析。

3. 洞察痛點

這一步需要我們匯總用戶的痛點，并將痛點分級，洞察用戶痛點背后的真實訴求。這個過程中可以先讓大家在一定時間內寫出自己的想法，每一條寫在一張卡片上，做到先相互不干擾，之后再統一整理和總結。

4. 尋找機會點

通過上述總結，思考新的機會點、解決方案、優化整體流程，并對新流程下的功能做優先級排序?？梢酝ㄟ^準備一些問題來刺激大家腦爆出更多的內容，比如：用戶還有其他選擇么？怎么做用戶才能更爽？其他用戶來到這里該怎么處理？等等。在這個階段需要：

- 對內容進行對標、討論，把公認的點保留下來，無用的點剔除出局；- 根據實際情況和項目成本、進度等條件，對新流程下的功能做優先級排序。

如何為過程提效 ｜TIPS

在實際的工作過程中，因為項目時間都非常緊張，繪制這樣一個完整的用戶體驗地圖比較耗費時間，所以推薦大家幾個提效的技巧，既可以減少時間浪費，也可以提高共創質量：

1. 事前

充分做好用戶調研，提前準備好用戶地圖模板，可以在開始之前的一到兩天發給參會人員，讓所有人對產品有一個整體梳理和思考，有助于提高大家的產出質量。

2. 事中

如果是優化的產品，可以將設計稿 demo 或者線上產品截圖打印出來，這樣可以增強大家的代入感，有利于想法的輸出。

3. 事后

整理電子版體驗地圖，需要跟隨產品的演進進行更新，上傳到項目共享空間隨時查看。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

背景

在 B 端設計領域中，不管是內部用戶、產品、設計師、開發，還是外部產品、設計師等，總能聽到關于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。

為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設計探索與實踐。「屏效」專題探索主要以「探索」與「實踐」相結合的方式展開，將實踐過程中反復驗證有效的設計策略沉淀成設計手冊，同步將部分功能進行工程化，確保可以開箱即用。

探索階段-為誰在何時何地設計

用戶聲音｜不同的故事相似的訴求

面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%；認為提升屏效對體驗有提升的終端用戶占 50.6%。

外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里，其中就有 2 點提到關鍵字「效率」。

通過了解不同用戶和產品類型發現，不同的用戶在工作場景的產品使用中有著相似的特征：

案例收集｜發現問題，大膽假設

縱觀 B 端產品界面，發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例，為了逐步突破問題，選擇以數據產品中覆蓋率極高的表格為設計切入點，通過線上跨產品多端地毯式的體驗走查，發現表格三個層次的問題：

視覺、交互層在無需理解業務場景和用戶目標的情況下，都較容易發現，屬基礎問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

綜上我們提出假設：為提高屏效，可從視覺、交互、信息三個層次解決

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當前手勢到目標之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設，我們進行了進一步的桌面研究，查閱論文等書籍，尋找設計理論的驗證和指導。

競品分析｜尋找實踐證據，謹慎驗證

我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關系，因為不同字體的同字號實際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔柣蜃中懈?，決定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數據產品中的表格為例，通過直接和間接競對的方式，分別從數據的查閱（視覺）、分析（交互）維度進行功能點和設計細節上的比對，來看看優秀產品是如何解決屏效問題。

直接競對：內部用戶口碑較好的產品 A、B外界競對：同領域的 Tableau、網易有數、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規列表（一維表格）

通過競品分析可以發現，數據分析領域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數據用戶的 Tableau、網易有數，而谷歌郵箱等工作臺常用的常規列表緊湊版本中，留白率和數據領域的電子表格不相上下。

緊湊版的使用場景也常常是面對數據量巨大的信息呈現，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大，而在實際案例實踐中，也已經將表格行高優化至 30px，克制的使用留白。

除此外，競品其他層次的設計也做了比對，總結來看整體設計做法：高密度、少屏數、少留白等。

文字陷阱：中英文字高不等于字號

舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實際字高只有 10px，而 AntD Table 的語境是中文字偏多，實際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

論文查閱｜尋找理論證據，謹慎驗證

研究表明，低密度認知負荷低，但高密度任務完成率高，用戶更喜好

參考資料：論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

對于信息，用戶需要需要閱讀（視覺），思考和理解（認知），需要點擊按鈕、操作鼠標和打字（行動），在人機工程學中，統稱為負荷。即認知（記憶）負荷、視覺負荷、動作負荷，即分別對應用戶體驗設計的三個層級，信息/視覺/交互。而負荷所花費資源從多到少依次為：認知 > 視覺 > 行動。

認知負荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因為刷短視頻時，你的輸入效率遠高于作者的輸出效率，而看一門 C4D 教學視頻時，你的輸入效率遠低于作者的輸出效率。可是，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強；否則輸出效率很低（信息質量低），你的輸入效率很高（很專業），信息于你而言都是無效的。

假設負荷總量不變的情況下，那么以上三類場景界面需要對用戶負擔分配大致如下，官網品宣類需要低認知成本，低視覺負擔，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗而帶來的趣味感，比如蘋果官網，信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息，而 B 端應用因為是專業使用，首先認知方面隨著員工的專業度提高而降低，因此可以通過提高視覺負擔，來降低行動負擔，進而減少操作用時，當然最佳情況是三個維度能整體降低負擔，讓總負擔降低，就需要更多設計巧思了。

面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中，設計師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。

實踐階段-如何設計

通過以上的探索，我們可以確定的是，B 端產品面向專業人員的工作界面設計中，提高屏效可從視覺、交互、信息三個層次進行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉，通過減少頁面跳轉、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業能力。

基于以上的總結，對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，尋找運營機會點。

如下表格經過高屏效策略優化前后對比圖，優化前相同維度下不同人群數量的對比需要視線來回跳動比對，而優化后的表格內容，更符合用戶看差異場景下分析目的數據查閱，視線鎖定相同維度，即可快速比對數值大小。

下面以視覺、交互、信息三個層次解剖設計過程背后的思考。

視覺層｜高密度-克制的留白

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉動區 30度，垂直最大眼動舒適轉動區 55度?？傻贸鋈搜圩钚∽R別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設計與研究》

如圖，縮小表格行高的同時，目標信息之間的眼動距離隨之縮短，在眼動舒適區內看到更多信息，便于信息的高效獲取。

交互層｜低跳轉-高頻信息前置

理論基礎：菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為：T=a+blog2(D/W+1)，W為其中目標的大??；D為到目標的距離；T為移動到目標所用最短時間。參考資料：菲茲定律

表格單元格借助交互狀態，增加懸浮出現的信息組件，前置顯示目標單元格明細信息，同時通過交互出現的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標的距離，以提高整體操作效率。

信息層｜有效性-信息重組織

理論基礎：交互設計四大策略「組織、刪除、隱藏、轉移」參考資料：《簡約至上》

用戶為了對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看，根據用戶目標，將關聯性大的數據放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。

結語

設計趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節奏，時間和注意力變得尤為可貴，相對而言，基于復雜度守恒定律， B 端信息量大且高頻訪問的產品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉」詮釋的即是「空間換時間」，少一次點擊，少一次跳轉，少一份等待，就多一份時間和效率。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

What 是什么

簡介：「多級撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統捕獲記錄，根據原始執行順序，一步步返回歷史操作。

例子：用 Sketch 畫設計稿時，可以多級撤銷，允許用戶返回上一步或更早的歷史操作

Why 為什么

具備多級撤銷的功能可以讓用戶覺得能夠對界面進行安全探索，不必擔心造成某些不可取消的修改。例如，如果單擊了錯誤的菜單項，不需要進行復雜的恢復，不需要退回到此前保存的文件版本，或者尋求系統管理員的幫助。

多級撤銷也讓專家用戶更快更容易地探索工作路徑。舉例而言，一名 Photoshop 用戶可能會在一個圖片上執行一系列的濾鏡操作，研究那些結果看是不是他喜歡的，然后再逐一撤銷，回到起點。

When 什么時候使用

需要用戶頻繁在單一頁面上交互的用戶界面，相比普通的網站或者移動端 APP，交互操作要復雜得多。例如：文件編輯器、圖形建模工具、郵件閱讀器、數據庫軟件、寫作工具、編程環境等。該功能能使用戶撤銷一系列操作而非單一個操作。

使用條件：該軟件的單一界面交互比較復雜和頻繁

How 如何使用

軟件首先需要一個強大的模型，這個模型是關于動作是什么樣的——動作的名稱、動作所關聯的對象，以及如何返回歷史動作。

決定哪些動作需要成為可取消的操作。如果動作可以改變一個文件或者數據庫——任何將是永久性存在的對象——都應該是可取消的動作。具體而言，在大部分應用里，人們期望能撤銷下面這些改變:

• 文檔或表單的文字輸入

• 數據庫

• 圖片或畫布的修改

• 布局上的變化位置、大小、順序或分組在圖像應用程序中

• 文件操作，例如刪除或修改

• 對象的創建、刪除和重新組織，例如郵件消息或電子表單的列

• 任何剪切、復制、粘貼操作

下面這些修改基本上是不可撤銷的：

• 文本或對象選擇

• 窗口或頁面之間的導航

• 鼠標光標和文本光標的定位

• 滾動條的位置

• 窗口或面板的位置和尺寸

• 在一個未提交的對話框或模態對話框上的改動

展現方式

然后，決定以哪種方式把撤銷操作展現給用戶。大部分桌面應用程序會把“撤銷/重復”的菜單項放在“編輯”菜單下。撤銷通常也關聯到Ctrl+Z 或類似的快捷鍵。

Example 案例

案例一：Microsoft OneNote 筆記編輯器

用戶需求：撤銷文字輸入

Microsoft Onenote  文檔編輯器擋在輸入過程中需要修改可以用快捷鍵 COM + Z 撤銷，或者使用編輯菜單下的按鈕幫助用戶返回上一步。

案例二：Photoshop 多級撤銷

用戶需求：回到歷史操作記錄

Photoshop 同樣可以采用快捷鍵和菜單按鈕返回歷史操作，由于 PS 的操作修改繁瑣且復雜，所以為用戶提供了歷史記錄面板，用戶也可以點擊歷史操作步驟回到想要的歷史操作記錄。

案例三：美圖秀秀圖像處理 App

用戶需求： 撤銷回到上幾步圖像處理結果

使用美圖秀秀等圖片處理 App 對圖像進行美化操作時，常常會返回查看對比不同的效果，或者操作錯誤時返回到前幾步，頂部的撤銷按鈕可以讓用戶回到任何歷史操作步驟。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務