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

相关推荐

  • 原型图设计工具对比

    原型图(或线框图)设计工具是创建网站和应用程序的利器,它让设计师和设计团队专注于原型产品的功能以及如何创建更好的用户体验。如今,市场上涌现了各类功能不一的原型工具。然而,从中挑选出一款最合适自己的也…

    2016-01-09
  • Mockplus原型交互跟我做之7 - 拉长页面做滚动,并固定顶部和底部

    在Mockplus的App项目,你可以快速地拉长页面做滚动,并且固定顶部和底部。请看视频:

    2016-02-18
  • 第五章 PC软件首页交互设计

    互联网产品的第一印象就是首页,重要性毋庸置疑,首页可突出设计值或决策者希望第一时间重点表达的内容。现在市场上的WEB产品,APP产品,PC产品等没有完全相同的首页,几乎所有的团队都根据自家的需求与侧重点进行…

    2014-10-12
  • 盘点3款原型工具的部件样式

    使用样式是集中管理整个项目的外观及感受的最优方法,通过部件样式可以像word一样对组件进行快速方便的样式设置,大大提高了制作原型的效率。当项目要更新视觉设计时,使用样式不但可以节省时间,还能帮助你统一和…

    2023-03-03
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 018. 内部框架——axure线框图部件库介绍

    网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面这段代码,很多人肯定认出这是htm…

    2014-09-12
  • 001.Axure rp 6.5的软件安装、汉化与注册

    第一步:从网络上下载axure安装程序到本地电脑、汉化语言包、注册码,双击安装程序,如图:                     第二步:安装过程截图乱码的情况是正常的 &nbs…

    2014-09-09
  • Justinmind权威指南:基础-Justinmind需求面板的使用

    Justinmind权威指南 之 基础-Justinmind需求面板的使用 ​根据Justinmind 中国官方合作机构hansky的介绍:Justinmind是“需求可视化工具”,能够为使用者提供全面的原型建模解决方案,通过该方案,用户可以在正式进行…

    2015-08-10
  • [Mockplus教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • 从三个方面简析设计中的用户友好

    随着用户体验重要性的不断提高,用户友好的概念也得到了越来越多的重视。那么如何在设计中体现出用户友好呢?熊先生觉得,有三点内容是比较重要的: 整个界面的一致性抓住用户特点更容易获得帮助 因为最近使用Mockp…

    2023-03-03