今天的文章，我们将会探讨的指标包含下面5种：流量来源，关键词，访客，Top 10 页面，以及退出页。他们并非是全部的关键指标，但是掌控好这5个因素，将会让整个网站更上一层楼。
1、流量来源
网站的流量来源主要来自于3个方面：
- 链接跳转：访客通过另外一个网站上的链接跳转到你的网站
- 搜索引擎：通过搜索引擎的关键字搜索，在结果页中找到你的网站链接点击进来
- URL输入：直接在地址栏输入你的网站的URL并进入
绝大多数的网站的流量来源于这三个方面。
了解用户来自哪里，你就能够有意识地创建能够吸引用户的设计。打破现有流量来源结构，也许能够帮助你更好的了解如何让更多的细分受众接触到你的网站。
你得让其他的网站主观上愿意链接到你的网站，比较常用的做法是创建带有优质内容的博客，较好包含有受众喜欢的内容或者素材，比如带有UI Kit，或者设计素材包、信息图之类的内容。
进行搜索引擎优化也是常用的解决方案，比如带有正确的关键词和 Alt、Meta 属性。为搜索引擎进行优化也许是你设计工作中不起眼的一个部分，但是它所带来的价值可能超出你的想象。
针对网站URL进行优化。创建让用户更容易记住的URL是很有必要的，中国内的网站大多会采用拼音式的域名，而国外的网站则可以选择更加直观的单词组合，比如 Webdesigndepot.com 所选择的就是 Web Designer Depot。较好不要在域名中加入下划线，这样会让用户感到迷惑。
2、关键词
你的网站主要是干什么的？网站的关键词通常可以回答这个问题。
网站的实际内容和用户的想法可能是有偏差的，但是网站所包含的关键词往往能够清晰的告诉用户网站中实际的内容是关于什么的。
那么，你所提供的关键词系统和真实的内容是完全匹配的么？那么需要特定内容的用户能否从你的网站获取到有价值的信息呢？
除了关键词本身之外，你需要让整个设计和关键词本身匹配起来，包括基本功能，文本内容，整体主题，图片等各种元素都应该和关键词系统保持一致。接下来，你还需要专注地做到下面的事情：
- 使用响应式的设计；避免同一内容占据多个不同的页面
- 按照用户说话和阅读的方式来组织内容，确保不会有拼写错误和内容错误
- 让你的网站尽量易于被分享，建立属于这个网站的声誉
- 如果有链接尽量链接到和你的内容、关键词一致的来源
- 宣传用户需要的内容和产品；不要过渡使用相同的关键词，这样会显得过于机械而不够人性化
3、访客
对于网站的访客，通常可以划分为两种，一种是次来的你的网站的，第二种是来过了回到这里的访客。
这两种访客的比例其实是很能反映网站的状况。如果你的网站访客大都是种，那么说明你的网站没有足够的吸引力让他们成为回头客，如果你的网站绝大多数是第二种，这可以说明你的网站在发掘潜在的用户/客户/粉丝上花费力气，或者说效果不足。
对于这两种不同的访客，你需要有针对性地对网站进行设计，来进行处理。
首先，在视觉设计上要足够突出，这样可以吸引次来网站的访客。同时，网站的设计要是动态的，这样才能常看常新，不停地吸引人。有趣的图片和视频是很值得使用的元素。
你应该让访客能够了解网站的内容，以及如何找到他们想要的信息。大标题、LOGO和设计优秀的导航都可以让网站的目标性更加突出。
网站中应该包含一些访客可执行的操作或者交互，可点击的链接，可查看的视频，甚至可以立刻开始玩的游戏，这样才能够同用户产生链接，提升用户的留存率。行为召唤的交互设计要足够明显。不要害怕告诉用户该做什么以及如何互动，特别是规则比较麻烦的情况，尤其要如此。
4、Top 10 页面
这是较有意思的指标：访客较常访问网站的页面 Top 10 。许多优秀的博客和网站会使用这种指标来追踪热门话题和特定类型的文章，而电商类的网站则可以借助这个列表来跟踪页面流量和转化率。
实际上，许多网站的运营和所有人在了解到自己网站较受欢迎的页面 Top 10 列表的时候，会表现得特别的惊讶，因为较终数据所呈现出来的结果和他们的预期，往往不太一样。不过规律是存在的，很多网站访问量较大的页面当中，都包含了“关于”页面和“联系”页面（用户想了解网站或者需要联系方式和帮助），而新闻和博客类网站当中访问量较大排名靠前的网站则通常是关于特定领域的页面和主页。
用户较常访问的页面反映了你的网站的状况，也可以帮你指明设计网站的方向。
在访问量较大的页面当中加入链接、行为召唤按钮是提升网站利用率的较典型做法。你应该尽可能简单地让尽可能多的用户找到它。
想要让特定的页面被更多的用户看到，较好在首页等访问量较大的页面当中为其进行设计，比如使用行为召唤元素来引导，使用大图进行宣传，创建独特的视觉体验。
在主要的导航当中加入热门页面的导航，或者在社交媒体上进行分享也能够提升这些页面的访问量。在侧边栏上将这些访问量较大的页面Top 10 列举出来，同样会吸引更多的用户点击。
5、退出页
用户是怎么打开网站的很重要，而用户是何时离开的，怎么离开的，同样重要。
退出率指的是用户在特定页面离开占这个网站的百分比。这个概念和我们常说的跳出率是有差别的，跳出率通常是在单页面的尺寸上进行讨论。
如果某个页面的推出率较高，那么可能这个界面存在问题，比如某些元素无法加载，或者干脆就是页面出错直接404了。不过，另一方面，对于电商网站而言，结帐和支付页面的高退出率其实是好事情，这反映了销售状况良好，成交比例高。
如果页面的退出率较高，那么可能需要重新设计了。
想要降低页面的退出率，通常你需要让页面内有吸引用户的内容，或者可供用户交互的操作，简单点说，就是让用户在这里有事情做。同时，这还不能损坏当前页面的行为召唤设计。
如果电商页面的的退出率很低，对于销售和产品交易可能是不好的影响。这个时候需要注意页面中是否包含了循环链接，或者因为某些障碍导致用户无法进入到下一个环节。
当然，用户较终还是会离开这个页面的。而我们需要关注的是意外离开，或者潜在错误导致的非正常的退出率数据。
一. 界面布局样式有哪些？
在做界面设计时，我们为了区分信息结构及层次，通常采用以下3种布局样式：卡片式设计、分割线、无框设计。
二. 卡片式设计
自从Android4.1上Google Now登台亮相之后，卡片式这种设计思路／风格慢慢就流行了起来，被大家所关注和使用。
Google将它称之为“Inside Out design（由内而外式）”，它的本质是更好的处理信息集合，那么卡片式设计适合运用在什么地方呢？
- 增加空间利用率。
- 区分不同维度内容。
- 提升可操作性。
1. 增加空间利用率
相比于传统列表式布局，卡片式设计能更好的打破原有的框架。
比如，在传统列表下，内容一般为纵向滚动操作，展示的内容有限。而采用卡片式的布局，在纵向的内容流里，还可以很好的增加横向滑动的内容区域，而且看起来很整体。
比如，知乎feed流里增加知乎live的横向滑动内容。
2. 区分不同维度内容
卡片，其实比较像一个容器，你可以把不同维度的内容放入不同的卡片中，使其在内容区分的同时，还能保持界面的统一性。
比如：淘宝采用卡片处理信息的层级。个卡片承载着：个人信息及偏好；第二个卡片：购买操作后的所有关键流程；第三个卡片：一些淘宝内使用率不高的功能聚合；第四个卡片，是对支付宝和理财产品的一种推广；等等。
每个卡片都是不同维度，相对独立的，但通过不同大小的卡片归纳后，比起传统列表项 + 分割线 + 标题的视觉效率要高很多，显得更有秩序。
再比如：荔枝FM、微信读书，也是采用卡片式设计，来归纳不同维度的信息内容。
还有，微信公众号和appstore，同样是采用这种处理方式，把繁杂的信息以时间维度，归纳到不同卡片中。
3. 提升可操作性
卡片是一种拟真元素，可以被覆盖、堆叠、移动、划去，这样能更好的拓展内容块的视觉深度和可操作性。
比如：iPhone自带的「提醒事项」APP，就是采用卡片堆叠的方式。用户可按照标题快速查找目标备忘录，同时进行点击操作，打开卡片内容。
探探，运用卡片式设计，实现左右滑动代表感不感兴趣的操作，从而增加产品的趣味性。
但是，卡片也有它的弊端。如果不在合适的场合下，盲目的使用卡片设计，也会使你的设计变得低效和空间浪费。
举个例子，下面这种效果图，设计师们应该都不陌生，因为是在各大设计网站上经常看到的。
但是，你认真分析下，好好的一个通讯录，明明只有简单的头像和名字的元素，非要包裹在卡片里，而且卡片与卡片之间还要留出间距。为了视觉效果，空间这么浪费，并且影响效率。
如果按照微信的策略，好友可以加到5000，那么找个人不得向上滑动很久么？
三. 分割线设计
在UI设计中，较传统也是较常见的分隔方式是「线」。它能起到分隔、组织、细化的作用，帮助用户了解页面层次，赋予内容组织性。
而「线」，可以分为以下两种：
- 全出血分隔线。
- 内嵌式分割线。
1. 全出血分隔线
「出血」是一种平面印刷中的概念，而「全出血」指的是分隔线横向贯穿整个页面，一般为了区分更加独立性的内容信息。
比如：知乎的「想法」feed流里，就是采用全出血分隔线的形式，让信息分隔的更明显，更加独立性。
比如：google photo，用全出血分隔线，来区分上面的默认分类和下面相册的模块内容。
2. 内嵌式分割线
内嵌式分割线，不同于前者，它一般会在「线」的前面留有缺口，来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。
比如：知乎的「更多」页面，卡片内采用内嵌式分割线，来区分同一维度下有关联的内容。
比如第二个模块里，我的创作、我的收藏、我的关注、我的邀请回答，都是「我」操作后的内容信息。而第三个模块，已购内容、我的私家课、我的Live等等，都是跟「钱」或「付费」相关的。
所以，采用内嵌式分割线，比较适合这种划分有关联性的内容，同时能提升浏览效率。
其实，采用「线」的分割方式，相对其它两种（卡片式设计、无框设计）是比较保守的解决方案，但是，前提是要处理好「线」的间距、粗细、颜色等问题。
四. 无框设计
无框设计是近两年流行起来的一种新的趋势，是去除界面中的边框，分割线，用间距来区分内容。
它适合运用于：
- 大图为主。
- 内容有规律。
- 小众且垂直产品。
1. 大图为主
大图为主指的是以图片为主的产品，每张图片本身就可以起到分割的作用，因此，不需要采用多余的线或边框进行分割。
比如：instagram，发布图片前，用户被强制对图片进行正方形截取，才能保证图片在feed流里的宽度，撑满全屏，从而看起来很整体。
可能有的同学会问，为什么国外的产品就这么高大上，微博怎么就不能去分割线，做减法，搞得洋气一些呢？
那么大牙来带你分析一下。instagram只支持发送固定尺寸的图片和视频，而微博支持发送图片、文章、视频、纯文字、签到、点评等等的内容。
同时微博feed流里的图片，支持1张－9张不同情况的排版。而且1张图片时，为了更好的呈现出用户的原图比例，还要处理成4:3，16:9，正方形，以及特殊尺寸的缩略样式，同时还有gif图的情况，还支持你在自己状态下添加不同话题。那么你想只用间距留白来区分？场面会像刚地震完的样子……
所以现在想，微博用卡片形式来承载这些内容信息，还是有一定的原因的。
2. 内容有规律
内容有规律指的是，留白间距上下的内容，较好是相对一致的、重复的、亲密的，这样用户会下意识的将其分为一组。
比如，Airbnb采用的无框设计，原因是它们的信息元素很统一、重复，才给人营造出比较整体的感觉。同时，合理的运用大标题也起到关键性作用。
而同样采用无框设计的「下厨房」APP，首屏由于每个模块信息元素不一致，而且模块内元素的左右间距也不一样，字号种类过多，导致界面看起来相对有些杂乱。
3. 小众且垂直产品
小众且垂直的产品，一般情况下目标用户聚焦，功能简洁。因此，能够比较好的运用无框设计，跳出传统的规范做出创新的设计。
比如：轻芒杂志，采用无框设计的同时打破传统的移动端浏览体验，更符合它们自己的产品调性。
下面是FOOTAGE，一款小众且文艺的产品，由VUE的团队设计的。他们采用无框设计的前提是，每个界面元素有限，功能内容简洁。
但如果你是像微博，淘宝，微信等体量的产品，用户群体广，内容繁杂且层级较深。那么，你需要找到一个效率更高的信息呈现和交互的基础隐喻，无框设计可能就不太适合了。
五. 总结
总的来说，任何表现形式都应该是为了更好的呈现功能及内容，而不是盲目的追随趋势。
自成一派的优秀设计师并不需要受到任何风格的局限，因为他知道风格并无好坏之分，而是探索更适合自己产品的处理方式。
微信
