Web首页交互设计

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

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

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

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

首页地址:www.baidu.com

首页IP:220.181.111.86(因百度CDN而异)

首页大小(Byte):3451

平均打开时间(s):0.102

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

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

图一:线路对比

baidu-xianlu

 

图二:地区对比

2

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

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

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

duixiangfenxi

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

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

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

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

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

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

那么,首页上能看到的交互设计是?

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

图四:百度首页

3

第一眼感觉是:简洁

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

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

交互动作二:输入关键词

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

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

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

图五:自动执行搜索

6

 

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

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

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

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

交互动作六:清除输入框

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

交互动作七:超链接

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

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

1.是否功能入口清晰(主要功能)

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

3.交互是否简单易学(简单易操作)

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

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

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

7.正确设计导航与返回路径,确保不会迷路(引导与路径指示)

8.适当关联推荐内容(老用户兴趣推荐)

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

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/830/

(0)
iouedioued
上一篇 2014-09-27
下一篇 2014-09-28

相关推荐

  • 阿西JUSTINMIND学习日记:justinmind官方公布的快捷键列表(全部)

    常规快捷键 Windows OS X 剪切 Ctrl + X ⌘ + X 复制 Ctrl + C ⌘ + C 粘贴 Ctrl + V ⌘ + V 副本(复制) Ctrl + D or Ctrl + Click 并拖动 ⌘ + D or ⌘ + Click 并拖动 删除 Delete 或 退格键 Delete 或 退格键 撤销 …

    2015-06-16
  • axure日常使用问题集锦,不断更新!

    1. axure生成的原型文件,如何自动隐藏sitemap和page notes 答:axure默认打开的都是index为索引的文件,我们只需要打开其他的页面文件,就可以自动隐藏sitemap和page notes 2. axure 6.5版 如何让一个部件在页面向…

    原型设计教程 2014-09-12
  • web产品设计规范

    新浪乐居常用交互控件的使用规则。 下载地址:web产品设计规范-新浪乐居

    原型设计教程 2014-10-28
  • Justinmind 和 Axure谁更适合做原型?

    Justinmind 和 Axure 都是目前很强大的原型设计工具,被业界推为原型设计神器,在很多项目中起着不可估量的作用,但这两者的之间的作用是相互竞争还是相辅相成呢,我们应该客观地进行分析,使之更好地服务于我们的…

    Axure 2015-08-25
  • 【Axure原型设计】手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2015-10-14
  • Axure快速原型设计

    该教程中包括入门篇、案例篇、秘笈篇,非常适合刚接触Axure的人学习。   Axure使用教程下载地址:Axure快速原型设计

    2014-10-28
  • 『交互指南』即便你已经是一个交互设计师,这篇文章也值得一读,交互设计入门完全指南。

    准备好涉足交互设计了吗?在这篇文章中,作者对交互设计的各个方面做了简单介绍:包括历史、原则、知名设计师,以及他们的设计方法等等。即便你已经是一个交互设计师,这篇文章也值得一读。 相较于网页设计波澜不惊…

    2015-01-27
  • 使用Axure制作App原型怎样设置尺寸?

    最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?
    若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科。
    这里金乌直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可。

    2014-12-31
  • 【Mockplus教程】备注

    每个页面都可以添加备注信息,打开需要添加或者查看备注信息的页面, 在页面节点上面鼠标右击,弹出菜单中选择“页面属性”一项,如下图: 在弹出的对话框中,即可查看备注或者编辑备注,编辑好备注之后点击“应用”按…

    Mockplus 2015-08-31
  • Axure新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

    2015-05-23