极客公园网站分析报告

极客公园，创新者的大本营，聚焦互联网领域，跟踪最新的科技动态，关注极具创新精神的科技产品。顾名思义，极客们的聚集地。本报告主要从战略层，范围层，结构层，框架层，表现层五个层面来分析极客公园网站。

一. 战略层分析

战略层分析

总结：

极客公园带有浓厚的创业孵化器基因，处处体现科技的魅力。

二. 范围层分析

范围层

总结：

新闻的时效性代表着媒体的价值，在最短时间内报道业内新闻，千氪和极客公园都给予了足够重视，设置了专栏便于读者查看。

其中极客公园和千氪均开放视频资讯频道，视频资讯更加直观，便于读者阅读，传播。极客公园重点展示活动区和创业项目，便于读者查看，符合极客的创业孵化器的调性。

三. 结构层分析

极客公园结构

总结：

通过分析极客公园网站结构，得出极客公园聚焦科技类资讯及相关创业活动，并提供创业服务。

1. 信息架构

极客公园信息机构清晰，层级精简，重点分明。导航分为资讯，活动，前沿社三大块。

2. 交互流程

2.1. 1 一级导航栏目切换

极客公园一级导航只有三个，资讯，活动，前沿社，其中只有资讯有二级导航，活动和前研社都是 跳转到新网站，但整体风格统一，科技感十足。值得借鉴。

一级导航

2.1. 1 二级导航栏目切换

二级导航为新闻栏目切换，点击栏目名称，加载相应栏目内容。板式基本统一，因“图赏”内容略不同，故排版有所不同，“图赏”栏目排版展示更多图片。

2.2  搜索

搜索流程简单易用，点击出现浮层，浮层界面简洁清晰，突出搜索结果，字号也偏大。这里值得指出的一点是，当用户输入搜索词第一个字的时候，有关搜索结果便立即出现，用户体验比较好。

搜索

2.3  登陆/注册

极客公园登陆/注册采取新页面的弹窗卡片形式，登陆和注册融合在一个卡片，点击进行切换。但此次切换交互略显生硬。值得借鉴的一个交互是错误提示交互和忘记密码的返回登陆交互，鼠标指向，按钮文字有滑动效果。

返回登陆

三. 框架层分析

1. 首页总结

极客公园首页采用顶部横向导航栏设计，下面是主图banner区，最下是内容导览区+速读新闻区，总体为Z字形浏览模式。首页内容提取了热点文章/资讯，进行导览，便于读者快速找到感兴趣的内容。由于首页布局是两栏的排版方式，故主体宽度设为1130px，千氪目前首页排版是三栏，主体宽度设为1260px。这里有一个交互细节值得借鉴，右侧回到顶部的三个图标，是页面滑动到下方一定位置才会出现，滑到footer部分又自动消失。

首页

2. 资讯详情页总结

极客公园资讯详情页也是两栏布局，左侧为文章，评论，可能感兴趣，最新文章，右侧显示七日热门，下一篇文章，整体也是以黑色为主，热门文章的第一名标识也是采用黑色。整体来说，详情页面框架清晰，左侧文章区域标题，内容主次分明，留白恰到好处。左侧与右侧栏目的区分，是采用线框区分少量线框区分，简洁分明。此处有一个交互细节值得借鉴，鼠标放到下一篇文章时，文章会滑动，增加用户互动体验。

详情页

三. 表现层分析

1.页面色调风格：

极客公园-黑白对比。黑白调偏冷色系，传达理性、冷静、清晰的意味，符合科技、媒体的属性。

2.文字与版面：

“文字是所有用户界面的关键组成部分。人们主要通过形状来辨识文字。形状越清楚，文字就越容易辨识，所以英文的情况下，全部大写的文字比小写混合的文字难以阅读，看起来也非常吵闹。应避免在界面中全部使用大写。”- About Face 4

在界面阅读文字时，应使用高对比度文字（通常采用80%），恰当的字体和大小，简洁地组织文字。

字体：font-family: Helvetica,Arial,PingFang SC,Hiragino Sans GB,Source Han Sans CN,Roboto,Yahei,sans-serif;

文字与版面 文字与版面

3. 图标

产品内的视觉元素风格、交互方式需一致，让人一眼就能看出产品独有的气质。极客公园的图标统一粗线条/实心黑色图标，保持产品理性、冷静、清晰的意味。

icon

4. 控件

控件是使用者同数字产品进行交流的屏幕对象，它具有自包含性。

4.1 命令控件

4.1.1 按钮

长方形直角纯色矩形扁平风格

btn

4.1.2  图标按钮（icon button）

icon btn 

4.1.3 超链接（hyperlink）

超链接（hyperlink），或者链接，是Web中的一种习惯用法，在各式各样的不同应用中都可以见到它的身影。极客公园采用鼠标悬停时增加高亮颜色，作为浏览导航的命令控件。

hyperlink

4.2 输入控件

输入控件（entry control）允许用户在应用中输入新的信息，或者设置一个值。任何能限制用户输入值大小的控件都是有界输入控件（bounded entry control）。相反，一个文字字段可以接受用户键入的任何数据，包括文字和数字。这便是无界输入控件（unbounded enrty control）。极客公园的所有输入控件都使用了无界控件，即用户可以输入任何数据。但是在某些场景下，有界输入要使用有界控件。

control

5.对话框

错误对话框：红色警示醒目

fault