资讯频道 → Web前端
阅读更多

17顶
2踩

Web前端

转载新闻 向 Google+ 学习打造灵动的 Web 体验

2012-02-10 14:22 by 副主编 wangguo 评论(19) 有8062人浏览
Google+ UX 用户体验 Web
Google的设计一向以简单著称，让页面清爽优雅地呈现，一方面节省了页面载入的时间，减少用户的等待；另一方面也减少了用户在浏览页面时的分心。然而，在这简单的设计背后，并不是设计师偷懒，而是更加灵敏、细致、轻便的交互体验设计。

Google+作为社交网络的又一力作， 在继承了公司著名的十大设计准则下，在如何更轻、更快速、更人性化方面有了很大的突破。

本文主要以社交网络为例，分析总结出了六条让web体验更灵动的设计方法，供大家参考。

1.  图形化的导航

社交网络信息十分繁杂，因此导航的引导就显得至关重要。没有公司比Google更大胆了，将导航的tab全部简化成icon，只有鼠标hover上去的时候才会显示这个tab的注释。显然，这对新手用户而言，有一定的学习门槛的，但是我们从中无不从中感受到了简洁的力量，图形化导航让整栏显得干净整洁，功能集中，切换方便。



纵观国内外几大主流社交网的导航，导航大多采用的是文字，虽然从功能上看一目了然，但是由于文字本身不够简洁，排版有局限，那么只好在设计的时候，更要考虑功能的归纳分布以及优先级展示，隐藏不常用的功能。

2.  使用灰色按钮

经常做设计的人都知道，灰色按钮代表着是被禁用的功能，是不可点击的。然而Google+却大胆的使用了灰色按钮，通过鼠标hover告诉用户这是可点的。仔细想来，这用做以下两个原因：

  • 平衡了页面的配色。由于Google的logo主题色有四种，如果让按钮们默认展示原有的颜色，页面会看起来很花，没有重点。像这样灰掉的处理，使选中的tab更加突出，也不会带来干扰。
  • 按钮由灰变彩色的方式给人一种点亮图标的暗示，增强了用户点击按钮的欲望。


从图标的发展趋势来看，无论颜色还是形态都是朝着简洁方向走的，过去花花绿绿的图标已经失去了它原有的标识感，纯色的图标应用起来会显得更优雅、更高端。

3.  鼠标所到之处均有反馈

网页上的大多数元素，在鼠标滑过的时候，都应该有其相应的反馈。无论是仅仅发生鼠标指针变化，还是出现下划线，或是结合一些简单功能的操作和注释来显示。设计师在做静态设计稿时，很容易忽略这些设计细节，但这正是一个产品体现良好交互性能的关键时刻。就好比和人交谈，如果他对我的话语没有任何反映，我也会减少对他诉说的兴趣，如果他时而点头，时而微笑，时而赞许，那么我可能会有更多更有意思的事情告诉他。因此，哪怕仅仅是边框的颜色变深了一些，也能表达这个页面对用户是友好的，而不是不理不睬的。

hover状态是展示用户在当前页想知道的相关内容的最佳时机。例如鼠标划到头像时，会出现那个人的相关信息等。Hover状态还可以对某一模块有强引导的作用，例如Google会强调它的搜索功能。另外，还可以用于隐藏一些不常用的操作，例如删除等。



4.  简单任务在当前页完成

这里最值得一提的是Google+加好友和分组的流程优化。原本加好友和分组是两个独立的任务，分组是在对方同意加好友时才能进行，由于Google+推出的是单向关系链，因此将分组可以提前到添加好友这一步做。原本加好友是需要点击按钮，如今只用hover上去就会出现分组框，大大降低了加好友和分组的操作门槛。用户最少只要点击一下即可完成两个步骤。如今Facebook等一些双向关系链的社交网也开始学习这种快速加好友和分组的方式。



5.  Feed实时滚屏更新

Feed就是我们的每天订阅的新消息。相信大家对下面的小黄条都不陌生吧，国内大部分网站都是采用点击小黄条来查看新的消息，而Google+是自动滚屏的方式展示最新消息，并在左侧出现一条蓝竖线，表示是最新更新。Google的设计之所以显得灵动，还有一个重要的原因，在于它的这些状态的改变都伴随着优雅的动画，而不是简单的出现、消失。包括Feed的评论和赞，都是实时更新，配上简单华丽的动画，简直就像在看现场直播。



6.  即时的系统反馈



类似上图中的提示条在整个网站都是统一的，它们都是自动出现，自动消失，有的还肩负着简单的操作，例如图中的撤消等。有了这样轻便的系统反馈，就不会再出现弹窗等很重的反馈方式，页面的交互就显得轻便流畅许多，无时无刻不在安抚着用户焦躁的情绪。

  • 大小: 41.2 KB
  • 大小: 13 KB
  • 大小: 51.3 KB
  • 大小: 68.3 KB
  • 大小: 59.5 KB
  • 大小: 41.2 KB
17
顶
2
踩
评论 共 19 条 请登录后发表评论
19 楼 dohkoos 2012-12-13 11:17
盲目崇拜权威吧，google放的P都是香的。等google倒闭的时候就一窝蜂的批评。
18 楼 骨之灵魂 2012-02-13 12:47
写的非常好
17 楼 mqiqe 2012-02-13 11:09
google+打不开。。。
16 楼 liusu 2012-02-13 09:46
Google的算不上灵动吧。。 最多是简约。。。
15 楼 rmn190 2012-02-13 09:18
"有了这样轻便的系统反馈，就不会再出现弹窗等很重的反馈方式，页面的交互就显得轻便流畅许多，无时无刻不在安抚着用户焦躁的情绪。" 感同身受。
14 楼 huhuanqadn 2012-02-13 09:16
中国的程序员有一个毛病，客户喜欢什么样的，就什么样的。国外的大佬们可不？想要用我的产品，就要按我的思路来。这也许就叫做引领吧。总得有大佬来引领时尚。
13 楼 tiannet 2012-02-13 09:08
关于文字和图片导航的，一般的功能中文都能用两个字来概括，所以宽度能一致（而英文却不能），那在不影响美观的情况下用更直观的文字岂不是更好？
12 楼 wujiazhao88 2012-02-13 02:08
文字比图片更直观. 图片虽然好看, 但会增加用户的学习成本!
11 楼 geminiyellow 2012-02-12 22:09
尼玛这玩意那么难用
10 楼 grandboy 2012-02-12 17:33
还是不敢用这种风格，我们没有领导的权威，所以等这种观念普及了才可能用到自己的产品里。最好有更深入系统的总结才好。
9 楼 softwarexiang120 2012-02-12 16:39
纯属个人崇拜。。。
8 楼 ZZX19880809 2012-02-12 15:03
google+太难用了
7 楼 fjjiaboming 2012-02-12 12:59
Jekey 写道
原来不好的设计，怎么google一用就合理了？不要盲目崇拜权威吧！

6 楼 volking 2012-02-11 15:59
Jekey 写道
原来不好的设计，怎么google一用就合理了？不要盲目崇拜权威吧！

这就是榜样的力量
5 楼 敲敲大葱头 2012-02-11 13:18
我比较喜欢这种设计，因为大家都有自己的观点，关心参考。
4 楼 relic6 2012-02-11 12:38
分析和总结的比较表皮。
3 楼 tenderuser 2012-02-11 10:59
说实话没感觉google + 的设计有啥好的。。  
2 楼 yuriyan 2012-02-10 15:26
Jekey 写道
原来不好的设计，怎么google一用就合理了？不要盲目崇拜权威吧！

这叫引领......
1 楼 Jekey 2012-02-10 15:18
原来不好的设计，怎么google一用就合理了？不要盲目崇拜权威吧！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 向Google学习打造灵动的web体验

    向Google学习打造灵动的web体验 　Google的设计一向以简单著称，让页面清爽优雅地呈现，一方面节省了页面载入的时间，减少用户的等待，另一方面也减少了用户在浏览页面时的分心。然而，在这简单的设计背后，并不是...

  • 这一年，这些书：2022年读书笔记

    飞向太空的人和一万年前躺在草地上数星星那个人并没有什么不同，他们一样要思索，一样要怀疑，自己为什么要降生于这个世间，这一生又该做些什么。当远古的人第一次不需要为了食物而奔波时，这个问题就产生了，并将...

  • 学习的资料

    # TimLiu-iOS ======== 自己总结的iOS、mac开源项目及库，持续更新。。。。 github排名 [https://github.com/trending](https://github.com/trending),github搜索：[https://github.com/search]...-

  • swift 学习资料大全

     - 让没有 3D Touch 设备也有类似交互体验的 InceptionTouch 类（基于 UITextView 实现，支持日期，链接，电话号码，地址触摸响应）。 TWControls.swift  - 简单的开关和按钮控制器,使用闭包来执行由控件触发的...

  • android安卓源码海量项目合集打包-1

    │ │ 仿google+中的弹出dialog.rar │ │ 仿miui对话框，普通对话框，带EditText对话框，列表框，单选框，复选框，等等.rar │ │ 仿QQ的头像选择弹出的对话框，酷似！.zip │ │ 仿照支付宝支付成功的一个简单...

  • 深度学习渐趋冷静，为何图形计算却逆势反涨？

    NVIDIA 深度学习学院（DLI）授课，使用完全配置的云端 GPU 实验资源，体验如何应用深度学习、数据科学和加速计算技术来解决各行业面临的极具挑战性的问题。   时间 ：12 月 16 日、12 月 17 日是全天 收获 ：正式的...

  • 全面的Swift学习资料整理

    - 一款炫酷的下拉刷新封装库（Mobile page refresh concept inspired by Google and for something like a news app）。 源码分析 pull-to-refresh.swift - 是一款非常易于开发者使用的下拉刷新和加载更多组件。...

  • 技术迭代这么快，技术人在下半年应该学习什么？

    过去十年间，谷歌用亿万级的容器和机器学习技术为其诸多产品提供着算力与算法的支持，极大提升了其终端用户的使用体验；同时，谷歌开源的Kubernetes容器云技术与深度学习框架TensorFlow也迅速在技术界和众多行业中...

  • iOS开发 非常全的三方库、插件、大牛博客等等

    UI下拉刷新EGOTableViewPullRefresh- 最早的下拉刷新控件。SVPullToRefresh- 下拉刷新控件。MJRefresh- 仅需一行代码就可以为UITableView或者... （国人写）iOS学习加群：727474737 一起学习进步XHRefreshCont...

  • 国内外主要的PHP开源CMS系统分析

    CmsTop 提供了自由的页面维护能力，把网站首页、频道首页和专题页等页面划分为很多区块，发稿编辑可以随时向页面区块推荐内容，页面编辑则可以决定哪些内容显示到 页面的各个区块，并且可以更改标题和排序，可以...

  • 常见前端UI框架

    weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式...

  • 2021-07-02 swift大礼包

    全面的Swift学习资料整理_walkerwqp的博客-CSDN博客 全面的Swift学习资料整理 ...

  • 进阶攻略|前端最全的框架总结

    如果你想要学好WEB前端，在学习过程中，身边没有一个能够指导你学习的人，可以到这个WEB前端裙，里面最新学习路线和教程，不管是计算机专业想要往WEB前端方向发展，还是零基础想转行，都可以跟着教程学，有什么不懂...

  • GIT开源安卓项目Top100

    GIT安卓项目Top100 ...这个是 Facebook 在 React.js Conf 2015 大会上推出的基于 JavaScript 的开源框架 React Native, 该框架结合了 Web 应用和 Native 应用的优势, 可以使用 JavaScript 来开发 iOS 和 A

  • C++ 实现新年倒计时与烟花显示效果的图形界面程序

    内容概要：该文档介绍了一个用C++编写的控制台应用程序，主要功能是在新年来临之际展示倒计时、播放音符以及渲染烟花效果，最终以艺术字体显示新年祝福语。具体实现了粒子系统来模拟烟花绽放，并定义了不同形状（如“2025”）由小点组成的图像，再逐帧更新显示，营造烟火燃放的视觉冲击力。此外还有通过 Beep 函数发出不同频率的声音以配合倒计时刻度，同时加入了输入姓名和许愿的功能增加互动感。 适用人群：熟悉C/C++语言基础的学生群体及开发者。 使用场景及目标：适用于希望通过生动有趣的小项目加深对控制台操作的理解的学习者；也可以作为一个简单有趣的案例用于节日庆祝活动中。 其他说明：由于使用了许多特定于 Windows 平台的API函数，比如 Beep(), SetConsoleTextAttribute() 和 GetStdHandle(), 本程序仅能在 Windows 上运行良好。并且涉及到了较多关于粒子系统和声音处理的知识点，在教学过程中可以借此讲解一些图形渲染的基本原理和音频处理方法。

  • 儿歌、手指谣、律动.docx

    儿歌、手指谣、律动.docx

  • 基于Msp430设计的环境监测系统（完整系统源码等资料）实物仿真.zip

    【文章链接：https://blog.csdn.net/2403_86849624/article/details/145739426?spm=1001.2014.3001.5502】基于 MSP430 微控制器的环境监测系统的设计与实现。该系统集成了温湿度、光照度、烟雾浓度以及 PM2.5 浓度等多参数的监测功能，具备数据显示、阈值设置和报警等功能。通过硬件电路与软件程序的协同工作，系统能够实时、准确地获取环境信息，并为用户提供直观的数据展示和有效的预警。文中深入探讨了系统的硬件选型、电路设计、软件编程思路及关键代码实现，经实际测试验证，该系统运行稳定、性能可靠，在环境监测领域具有一定的应用价值。关键词：MSP430；环境监测；传感器；数据处理 随着工业化进程的加速和人们生活水平的提高，环境质量对人类健康和社会发展的影响愈发显著。准确、实时地监测环境参数，对于预防环境污染、保障人体健康以及推动可持续发展至关重要。

  • 基于COMSOL仿真的电磁超声压电接收技术在铝板裂纹检测中的应用研究,COMSOL模拟：电磁超声压电接收技术在铝板裂纹检测中的应用,comsol电磁超声压电接收EMAT 在1mm厚铝板中激励250kH

    基于COMSOL仿真的电磁超声压电接收技术在铝板裂纹检测中的应用研究,COMSOL模拟：电磁超声压电接收技术在铝板裂纹检测中的应用,comsol电磁超声压电接收EMAT 在1mm厚铝板中激励250kHz的电磁超声在200mm位置处设置一个深0.8mm的裂纹缺陷，左端面设为低反射边界。 在85mm位置处放置一个压电片接收信号，信号如图3所示，三个波分别为始波，裂纹反射波(S0模态)和右端面回波(S0）。 ,comsol;电磁超声;压电接收;EMAT;裂纹缺陷;信号接收;波;始波;S0模态;右端面回波,电磁超声检测技术：裂纹缺陷定位与信号分析

  • MATLAB环境中基于PSO算法的机器人路径规划系统：可视化界面下的障碍物自定义与终点规划,MATLAB实现PSO算法的机器人路径规划系统：支持自定义障碍物、起点终点的可视化界面操作,基于MATLAB

    MATLAB环境中基于PSO算法的机器人路径规划系统：可视化界面下的障碍物自定义与终点规划,MATLAB实现PSO算法的机器人路径规划系统：支持自定义障碍物、起点终点的可视化界面操作,基于MATLAB的粒子群优化（PSO）算法的机器人路径规划，可视化界面，可自定义障碍物，起点和终点。 ,MATLAB; 粒子群优化（PSO）算法; 机器人路径规划; 可视化界面; 自定义障碍物; 起点和终点,MATLAB PSO算法机器人路径规划与可视化界面

Global site tag (gtag.js) - Google Analytics