Web首页交互设计

关于首页，每天处在互联网的生活中访问的网站首先映入眼帘的，都是网站向你展示的该网站的首页

我们还是来分析下“著名”的百度首页。说起首页设计分析百度就像编程开发第一堂课要讲Hello World！一样..... ^_^。

先说明本文分析的一些数据看似和交互设计没有关联的地方其实恰恰是交互设计做的比较好的地方。

我先来说一说百度首页视觉看不到的地方：

首页地址：www.baidu.com

首页IP：220.181.111.86（因百度CDN而异）

首页大小(Byte)：3451

平均打开时间（s）：0.102

线路分析：国内网络线路打开百度首页的速度

百度首页在不同地区使用不同网络环境打开首页的速度做到了最大化的用户体验一致化。

图一：线路对比

图二：地区对比

再来看百度首页的对象分析

首页上CSS、JS、图片等等怎么加载才能最快呢？

图三：百度首页Html对象分析

 在百度首页上我们能看到的交互设计？

我只是输入了一个域名？后面我没有做什么交互体现在哪里？

很多人有这个疑问，其实当你输入或单击一个百度超链接，这个交互动作流程就开启了。

上面的数据分析得出的结论表示：当你的浏览器接受到www.baidu.com的访问请求时候，第一步查找到百度CDN分布加速的DNS，它会根据你的地区、网络类型分布式划分给你一个距离你最近的服务器返回请求。

这个从体验上来说你在任何地域访问都像是在本地区访问这个网站一样的快。

这些是百度首页上看不到的交互设计，这些交互设计往往更能提升用于体验。我们交互设计师今后做交互设计时，应多考虑全局设计。

那么，首页上能看到的交互设计是？

我们还是需要截图一张百度的首页来分析

图四：百度首页

第一眼感觉是：简洁

交互动作一:单击输入框-激活输入框

这个是百度主要交互动作之一，因为百度是一个搜索引擎，最大最多的满足用户需求的是搜索用户想要的，所以主要交互动作时输入。

交互动作二：输入关键词

输入用户希望检索的关键词

交互动作三：自动执行搜索以及下拉框联想菜单

百度做了个避免用户傻傻的敲一下回车或单击搜索按钮（这也是最近才更新的功能）的交互动作

图五：自动执行搜索

交互动作四：历史记录联想下拉菜单

上图中的浅色字体是索索历史记录

交互动作五：历史记录删除

上图的历史记录的右侧有个删除按钮（文字按钮，带下划线表示超链接可点击）

交互动作六：清除输入框

输入框在输入文字之后再输入框的右侧搜索按钮的左侧会有个清除按钮这个按钮是直接清空输入框而不是单个删除

交互动作七：超链接

百度主打的功能得到了充分的空间展示与突出，其他与业务的入口在网站右上部分整体设计简洁，清楚。

一款产品或一个网站是否是优秀的主要会有几个要素评价

1.是否功能入口清晰（主要功能）

2.设计是否简洁不易反感（不能太花哨）

3.交互是否简单易学（简单易操作）

4.记忆成本是否太高（名称，域名，栏目名称等要设计合理，不能使用难记字眼）

5.用户习惯是否被尊重（基本互联网使用习惯）

6.用户心理预期是否符合（正确返回结果）

7.正确设计导航与返回路径，确保不会迷路（引导与路径指示）

8.适当关联推荐内容（老用户兴趣推荐）

总之，交互设计不光是用户能看到的部分，在用户看不到却能体验到的部分我们交互设计师也要深入去研究，切身以用户为中心的去思考如何能达到最好的用户体验，基于此设计出的交互方案往往是能获得皇上（用户）“翻牌子”的机会。