随着互联网的发展，人们阅读新闻资讯的方式也从纸质阅读转变为电子阅读。

本文以今日头条、一点资讯和网易新闻这三款应用为竞品，从交互和视觉两方面进行对比分析，讨论一下产品中值得我们学习的设计点以及可以进一步优化改进的地方。

目录

一、体验环境

二、交互对比

三、视觉对比

四、思考与总结

一、体验环境

手机型号：iPhone 8 plus

手机系统：ios 12.1

应用版本：今日头条V8.5.0   一点资讯V5.9.8.0   网易新闻V86.0

二、交互对比

2.1 首页-导航栏-搜索

今日头条：搜索框内有默认的文案，在首页浏览内容时，文案一直处于静态。点击搜索框进入搜索页之后再返回首页，搜索框内文案才会改变，改变的方式是由下往上滚动播出，搜索icon静止不动。或者在刷新界面时，文案也会改变。

一点资讯：搜索框内同样有默认文案，但不是静态的，文案在搜索框内滚动播出。第一次打开应用时，有一条红色渐变线围绕着搜索框逆时针旋转两圈，此时的默认文案是“搜一搜你感兴趣的内容”，渐变线旋转两圈之后，搜索框内文案发生改变，按照搜索页热榜的排序滚动播出。在首次打开产品或者从其它界面跳转到首页时，动态渐变线都会出现。

网易新闻：搜索框内同样有默认文案，而且也不是静态的，文案和搜索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流卡片。

网易新闻：四个主要界面均采用的是灰色背景+白色圆角卡片，但是个人中心页的卡片宽度比其它三个界面略窄，这一点不太符合统一性原则。

内容分割的方式一般有三种，分别为留白分割、线性分割、卡片分割。留白分割适用于内容较少的产品，这样界面简洁清晰。当信息内容较多时，若采用留白分割的方式就会浪费很多空间，这时就可以采用线性分割的方式，让信息内容展示清楚的同时又可以充分利用界面空间。卡片分割是将信息模块化，每个卡片单独承载一组内容，卡片与卡片之间的区分更加明显。无论是什么产品，最好不要出现两种以上的信息分割方式，不然界面会显得很混乱。

新闻资讯属于高密度内容的产品，最好是采用线性分割或者卡片分割的方式，这样既可以把信息内容展示清楚，又可以提高屏效。此次分析的这三款产品基本上也都是采用的这两种分割方式。个人更建议学习网易新闻的设计，每个卡片单独承载一组内容，卡片与卡片之间区分明显，卡片内部利用留白进行信息层级的划分。

3.2 首页

产品品牌感传递的方式有很多种，色彩的运用是很重要的一个途径。比如，提到蓝色大部分用户首先想到的产品是支付宝，提到绿色首先想到的是微信。除了用在logo中，在产品的界面元素中合理恰当的运用品牌色，也可以进一步加深用户对产品的印象。

首页statusbar和Navbar的背景色，今日头条采用的是品牌色。一点资讯默认是白色，但可以在设置里对背景色进行定制。网易新闻默认是品牌色，同样在设置里可以更换。

一点资讯：设置里的主题包括官方经典、天空蓝、太阳橙、翡翠绿和海军蓝一共五种颜色，滚动选项卡字体选中状态跟随主题颜色同步变化。

网易新闻：设置里的主题包括官方经典和极简主义两种模式。

三个产品tabbar的未选中状态均为灰色线性icon，选中状态均为品牌色面性icon。首页icon在不同情况下，会有不一样的呈现方式，见下图。

3.3 搜索页

今日头条：搜索页热点新闻会用红色描边+红色文案的标签来呈现，以此来吸引用户注意力。并且头条热榜的排序也会用红色数字来呈现前三名，灰色数字呈现之后的名次。

一点资讯：搜索页的热榜文案前面还添加了小的icon，并且榜单排序的数字从第一名到第三名虽然都用了彩色，但随着热度的递减，颜色从红色到橙色渐变，这样设计比今日头条单纯的用红色更能突显层次。但是，今日头条运用了红色描边+红色文案的提示标签，一点资讯却没有类似的设计。

网易新闻：“网易热搜”文案进行了单独的字体设计，排序数字前三名用彩色icon呈现，提示标签根据“沸”、“热”和“新”的区分，背景采用不同颜色。在搜索页点击“查看完整榜单”可跳转到网易热榜单独界面。在该界面，头部用红色作为背景，这点符合用户的认知，红色是热闹与沸腾的代名词，同时用橙色和黄色作为辅助色，来表现界面的装饰元素。

三者相比较，网易新闻的搜索页设计感更强，值得学习的地方更多一些。

3.4 频道定制页

今日头条：频道定制界面分为“我的频道、为你推荐、热门精选、生活娱乐、体育财经、科教文艺、其它”几个模块。“我的频道”部分主要采用灰色底+黑色文案。“为你推荐”模块采用彩色底+黑色/灰色文案，每个细分部分还有与背景色同色系的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如何科学有效的度量用户体验是企业和用户体验从业者一直在思考和研究的课题。用户满意度作为量化体验度量的方法也一直备受关注。那么用户满意度指标是怎么来的？评估模型该如何搭建？模型好坏又要如何判断？本篇文章聚焦用户满意度模型搭建与检验，分享模型搭建与检验过程中的方法与技巧。

早在20世纪30年代，就有学者在社会和实验心理学领域对满意度展开研究，研究表明用户满意度反映的是用户的一种心理状态，是用户对其明示的、隐含的需求和期望被满足程度的主观感受。用户满意度评估对企业生存和产品体验提升都有重要的意义：一方面，随着移动互联网人口红利逐渐消失，手机应用获取新客的成本和难度变得越来越高，通过提升用户满意度充分激发现有用户价值成为企业非常重要的商业策略。如美国顾客满意度指数ACSI数据表明，用户满意度的提升能带来用户消费频次的增加，同时也会为企业赢得更高的声誉，带来拉新、促活成本的降低。此外用户满意度通过度量产品体验现状和迭代动作有效性，对助力产品体验提升起着重要作用。

用户满意度模型的构建流程如下图所示，接下来我们一起看看：

用户满意度模型构建流程可分为「明确目标」「指标收集」「指标定义」「指标归属」「指标赋权」5个步骤：

///

Step1 明确目标

第1步是明确评估目标。明确评估目标包括明确评估用途和范畴，用户满意度评估的用途不同，在评估侧重和衡量方式上会有不同：

如衡量产品改版效果的用户满意度侧重关注改版目标是否达成，更关注改版前后影响体验目标达成的体验点变化。用于摸底产品体验水平的用户满意度侧重了解产品对用户需求和期待的满足情况，更关注产品自身体验长短板以及相较于其他同类产品体验优劣势。

此外需要考虑评估范畴，一方面需要明确仅评估本品还是同时覆盖竞品，对于未在行业中取得绝对领先地位的产品，更应考虑覆盖竞品评估，明确体验竞争优劣势的同时寻求竞品借鉴点。另一方面需要明确评估产品全局还是聚焦部分模块，全局评估能获取用户对产品的整体感受，但在产品模块繁多或复杂时，受制于用户参与调研的耐心有限，针对每个模块的评估问题数量无法设置太多，导致评估颗粒度较粗，可考虑聚焦重点模块单独评估。

///

Step2 指标收集

第2步是收集评估指标，用户满意度指标收集可结合案头侧、用户侧和专家侧三方信息获取：

• 案头侧指标收集方式主要是案头研究和产品走查。案头研究可重点关注成熟评估模型以及行业趋势、产品模式和用户需求分析报告，结合对产品的走查分析，提炼“好的产品体验”需要包含哪些要素。常用的案头研究渠道和可查询的信息如下图：

• 用户侧指标收集方式主要有用户座谈会和客诉反馈，座谈会把目标用户邀请到一起畅谈对产品的需求和期待，邀请对产品使用程度较深的“专家级”用户能贡献更多有效信息。另外客诉反馈也是能集中了解用户对产品关注点和痛点的数据渠道。

• 专家侧指标收集方法主要是专家访谈，通过向专家了解产品目标、目标实现方式及后续主要动作来拆解对当前产品体验重要的维度和指标。专家访谈需要覆盖到能决策产品方向的人，且专家职能身份尽可能的多样化，如覆盖产品、运营、设计、技术、市场等不同职能角色。

///

Step3 指标定义

第3步是指标定义，给指标下定义需考虑指标的体验标准高低和文案描述两方面：

体验标准选择要符合产品本阶段的目标，标准定得过高或过低都会让指标丧失灵敏性失去价值。指标描述一般要遵循通俗性、简洁性和单一性原则：

///

STEP4 指标归属

第4步是将定义好的指标进行维度划分与归属来构建评估模型。维度初步划分有「用户接触产品的触点」和「产品功能模块」两种方式。

拿用户一次外出就餐的满意度举例，按用户接触产品的触点可以分为就餐前（选餐厅、查信息、订座等）、就餐中（菜品、服务、环境等）、就餐后（买单）满意度。而按功能模块划分可以分为餐厅信息、评论信息、优惠信息满意度。无论采用哪种先验假设，模型构建都需要遵循“完备互斥”原则，即指标既齐全不遗漏，也没有重复。

///

STEP5 指标赋权

因为不同评估指标的重要性程度不一样，拿汽车产品的用户满意度评估为例，对普通轿车的满意度评估更看重实用舒适，而对越野车的满意度评估更看重汽车性能。因此在完成评估模型搭建之后，需要赋予评估指标权重，指标赋权的方法按照打权重的人不同可以划分为专家赋权和用户赋权两大类：

• 用户赋权是根据用户对某个体验点（指标）满意度打分和对产品整体满意度打分之间的关系测算出来的间接赋权方法，体验点满意度分数变化对产品整体满意度分数变化的解释程度越高，体验点对应的指标权重就越大。常用的指标赋权方法有“线性回归”、“因子分析”和“结构方程模型”。

• 专家赋权是领域专家，如产品、运营、设计等对指标重要性进行主观判断，因此又叫直接赋权法，常见的直接赋权法有“直接评定法”、“分值分配法”和“层次分析法”。“直接评定法”就是专家逐个判断指标重要性，“分值分配法”是预先给定所有指标一个总分，专家把总分分配到各个指标上，“层次分析法”是专家对指标重要性进行两两对比，因为能更好地在对比过程中帮助专家理清指标的相对重要性，层次分析法是专家赋权中更为常用的方法。

那么到底应该使用用户赋权还是专家赋权呢？这两类赋权方式具有不同的特点，用户赋权反映了用户对评估指标所反映体验点的需求强度，在初次搭建模型对用户需求强度优先级不明确时可以考虑使用，但用户赋权受产品现状影响较大，产品当下已经成熟和形成规模的方向更容易获得较高权重，而对产品未来重要但目前规模较小的方向权重则可能较小。专家赋权反映专家对产品现状和产品未来方向的综合判断，可以在产品较为成熟或开始尝试创新方向时考虑使用。

为了衡量用户满意度模型的好坏，完成模型搭建后需要对模型进行检验，模型检验分为「指标内容检验」和「结构归属检验」两类：

///

STEP6模型检验

• 指标内容检验

指标内容检验关注指标描述对想要评估体验点的符合程度和可理解性，即指标的内容效度。

指标内容检验可通过领域专家完成，邀请至少3名以上专家对指标内容有效性、易理解性等维度打分，专家一致评价为符合的指标占比即为模型内容效度（S-CVI）。对于专家认为不符合或专家打分不一致的指标需要咨询专家具体原因并作出适当修改。一般而言专家一致评价符合的指标不应低于80%。常见的指标内容问题包括指标描述未能准确概括体验点、指标描述有歧义、指标定义的体验标准不合适等。

• 结构效度检验

结构归属检验是判断评估指标与想要测量概念（归属维度）之间关系的方法，判断归属关系的方式有看同一维度下指标间的相关关系，指标对测量概念的解释程度等。常用的结构归属检验有同质性α信度检验、探索性因子分析和验证信因子分析。

每种检验方法都有自己判别指标归属和模型可靠的标准，但是在做指标归属调整和指标删减的时候不应该盲从于统计数据是否达标，还需要充分考虑指标实际意义、是否有助于我们实现评估目标等实际情况进行综合考虑。

///

结语

用户满意度模型需要跟随用户需求和产品发展变化而不断迭代更新，保证评估模型能反映用户需求和业务工作。以上是我们在用户满意度模型搭建和检验方面的一点经验，希望能抛砖引玉，欢迎大家交流探讨。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务