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

相关推荐

  • [Mockplus教程]如何批量导入图片到收藏夹中?

    有项目打开时,定位到“我的收藏”的“图片”选项,在下拉菜单选择“批量导入图片”, 根据提示选择导入图片。 完整演示如下:

    Mockplus 2015-09-18
  • 阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

    新项目为了给客户演示高保真的移动设备交互原型,故采用JustinMind工具。 国内资料很少,好在阿西使用过多款交互设计工具,大体都差不多,摸索着前行吧。。。   1.认识一下JsutinMind里的,这个动态面板理论上…

    2015-03-23
  • Axure基础教程:Axure中表格使用的技巧

    对于新手来说,用Axure做一个表格是一件麻烦的事情。本文教你如何快速学会Axure表格的基础应用。

    2015-01-01
  • 从零开始学Axure原型设计(入门篇)

    如果说Sketch是最美、最简洁的设计软件,那么Axure就是最强大的原型制作软件。Axure不仅能制作静态的视觉稿、页面,还能添加交互动作,是进行原型设计的最佳软件之一。虽然Axure的学习曲线比较陡峭,但是掌握之后可…

    2016-01-06
  • 设计师你的创作工具如何让你的2016充满惊喜?Chapter 1

    IAMUE官方微博正在送书活动:点这里参加 搜@IAMUE 原标题:如何让你的2016充满惊喜?|Chapter 1                                                                                                             …

    交互设计 2016-02-20
  • 移动导航设计详解-交互基础

    在移动端,导航是APP最重要的区别。本文分析了使用频率较高的移动导航设计的应用场景及优劣势,有以下几类: 1. Tab导航 Tab 导航分上下两种。是最常用的导航形式。 很多iOS应用,采用这种导航。比如:istegrame(…

    2014-12-04
  • 5款常见原型工具,产品特色知多少?

    工欲善其事必先利其器。天天和产品打交道,无可避免的要做一些页面原型,当然也离不开各种工具。好的原型工具软件可以大大提高工作效率,但是每款工具各有优劣。之前写过一篇基于不同平台的原型工具介绍,分别是基…

    2023-03-03
  • Mockplus原型交互跟我做之9–再说“链接点”

    上次我们已经对链接小圆点进行了图文并茂的说明,其实无论是跨页链接还是页内链接,在链接创建好了之后,选中按钮,当你把鼠标移动到小圆点的时候,它会自动指示链接目标(链接到的页面或者组件),请参考如下演示…

    2016-07-07
  • Axure快速原型设计

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

    2014-10-28
  • 【Mockplus教程】复制/克隆

    复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在需要粘贴的位置鼠标右击,在弹出的菜单中选择“粘贴”。 2. …

    Mockplus 2015-09-10