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

相关推荐

  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 入门:如何应用AxureRP做原型设计

    什么是原型呢?这个在之前介绍为什么需要进行原型设计当中有提到,原型是产品的最初形态,确认用户对产品界面和操作功能可用性的需求,高保真的原型接近于产品的最终形态,但仍只是原型。产品原型简单的说就是产品设计成形之前的一个大体框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动。

    2015-01-01
  • axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • 100%干货!大型互联网公司精益产品设计流程

    相对于传统产品设计流程,精益产品设计流程越来越受互联网公司,特别是创业公司青睐,但很多人听过精益创业、精益设计,但并不明白其中的奥秘,本文就带大家揭开精益产品设计的流程方法和要点。 首先我们来看看传统…

    2016-05-31
  • 如何用 Axure 制作类似的手机滑屏效果原型?

    不要太复杂: 1.设置2个动态面板 外面的是窗口 里面的是内容 图1:2个动态面板展示,记住这只是展示你不要放在一个层面上,应该是包含关系   图2:包含关系目录示意 2.设计交互事件   接下来看一下设计交…

    2015-07-21
  • Justinmind 2015年更新回顾

      2015年是激动人心的一年!今年,我们已经推出了许多新的功能,为您带来一个更美好的原型开发工具。下面,我们回顾下2015年justinmind的改进。                 &nb…

    2016-01-06
  • 004. 如何关闭IE浏览器在生成原型时候的安全警告

    在上一节中,我们学习了如何生成网页原型的三种方法,当时我们采用的默认浏览器,搜狗浏览器,没有弹出安全警告,一般情况下,如果你的浏览器是IE的话,在每次生成网页原型的时候都会弹出如下安全警告,如图: &nbs…

    2014-09-12
  • Axure官方教程中文版第6课:条件、值及变量-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(6).MP4 新建文件 1、添加一张图片和按钮 2、添加条件保证文本框不为空 3、文本框的变量值 4、添加打开“Page1”的动作 5、添加文本字段为空的第二个…

    2015-01-26
  • [自译]我们如何使用原型,原型又如何让我们更加高效

    原型是至关重要的,它能够帮助你的团队创造出最好的产品。它是一个机会来试验你的想法,并转化为有形的状态,你可以继续测试或者展开。当你的原型失败之后,你也会很软着陆-这里还有很多机会去迭代和改进。

    2016-09-08
  • 【Mockplus教程】如何创建页面的子页面?

    Mockplus中是按照分组的方式来管理页面,将多个页面放入一个分组中, 就像Windows文件夹的管理方式。具体分组的创建请参照“页面”->“分组”的讲解。

    Mockplus 2015-08-17