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交互事件说明 1.事件与交互 事件是JustinMind的一个关键功能,Justinmind Prototyper的事件由两个主要部分组成:一个是事件的触发(或用户事件),另一个是一组操作。每一个事件必须在屏幕上定义一个特定…

    2015-04-22
  • 成为设计师不是不可能!

      前言:本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设…

    2015-04-01
  • 【Mockplus教程】复制/克隆

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

    Mockplus 2015-09-10
  • 爱上Axure设计原型的十大理由

    10. 你的需求说明从未看起来如此的棒 让我们勇敢的面对吧,无论你对商业和系统的需求是多么的了解,写出所有相关人员都能够认真阅读并且确认的需求文档从来不是一件简单的事情。冗长而低效的会议让你无法忍耐,于是…

    原型设计教程 2014-09-12
  • 如何从3个方面判断是否做交互动画

    IOS 7出来后,交互动画立刻成为设计师的抢手货,有关动效设计的教程都趁势火了一把,但是很少有人讨论到底该不该做交互动画,如果做,为什么?今天终于有同学分享了他的观点,一旦符合文中提到的3个方面,那死心塌…

    2014-09-28
  • Chinco(摩客串串)——App原型交互演示利器

    Chinco是继国产原型设计软件Mockplus之后,由摩客团队独立设计开发,秉持了摩客团队“关注设计,而非工具”的一贯理念和产品风格。 Chinco是一款用于App原型交互演示的工具,为UX/UI设计师、交互设计师、视觉设计师的…

    2015-11-18
  • 看了这三个问题,你就知道UX设计师如何起步

    如何成为一个合格的UX设计师,怎样才能从菜鸟转变为设计高手,每天都有无数的设计师思考着同样的问题。凡事要做好,必须得回答这三个问题:做什么?怎么做?用什么做?看了这三个方面的问题,你就应该能够明白如何…

    2023-03-03
  • 5款常见原型工具,产品特色知多少?

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

    2023-03-03
  • Justinmind6.6版本下载和中文汉化包下载

    Justinmind已更新至6.6版本啦,中文汉化包由小楼老师原创制作,在这里小编整理出来提供大家下载,仅供学习交流使用哦。 Justinmind V6.7已经更新了,请移步:Justinmind V6.7新功能简介和下载链接 下载地址: Justi…

    JustinMind 2015-06-25
  • 【译】学习Axure RP 8 Beta - 流程图改进

    From: Learn Axure RP 8 Beta: Flow Diagramming Improvements(http://www.axure.com/c/blog/161-learn-axure-rp-8-beta-flow-diagramming-improvements.html) 专题:Axure8.0 Axure RP 8 中在流程图部分做了部分…

    2015-08-20