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

5顶
1踩

Web前端

转载新闻 15 个用户体验设计剖析

2010-05-11 12:27 by 资深编辑 wutao0603 评论(0) 有4690人浏览
UI iPhone HTML

用户界面和用户体验（UI/UX）是任何产品成败的关键，尤其 Web，Web 是一种公开的，可以被任何人随时随地访问的特殊产品，用户的体验几乎意味着一切，虽然内容更重要，但内容可以替代，体验却是独一无二的，本文分析了15个 不同的 UI/UX 案例，优秀的用户体验给我们带来的启发是无价的。

内容滚动中的运动视差效果screenshot

Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。Charlie Gentle’s portfolio 网站就是该效果的绝佳展示，点击左右导航按钮，除了滚动进入不同内容区域之外，上方的多层背景图以不同速度移动而形成的 3D 运动视差效果非常漂亮。


iPhone 的下滑式刷新screenshot

iPhone 的多数社会化网络应用都包含数据刷新功能，有的是晃一晃机器，有的是按某个按钮，在我看来，最好的方法是下滑式刷新。包括 Gowalla, Foursquare 以及 Tweetie 等应用都默认使用该方法，你在用手指翻动列表的时候，如果想刷新一下数据，你的手指还没离开那个区域，如果使用按钮，手指必须离开当前的位置，导致操作上 的不连贯，而下滑式刷新，手指继续留在原来操作的位置，只是改变一下动作。

我们从这里可以学习到的东西是，经常检查你的 UI，看看是不是存在让用户注意力转移的操作。


随时随地的提示界面

screenshot

一些深受欢迎的 Mac 程序经常是在后台默默运行，到了需要用户介入的时候弹出界面，完成后又默默消失，象 The Hit List, 随时随地会将需要通知的消息显示出来，看上去，象操作系统本身的功能。


Convertbot 的圆盘式菜单

screenshot

Convertbot 是为数不多的事实上并不好用但用起来又妙趣横生的 UI 设计之一。这个 iPhone 程序用来进行单位转换，iPhone 的应用商店这样的程序数不胜数，但都没有这个这么有趣。它设计了一个圆盘式操作界面，很形象，很漂亮，让人有时不时想拿出来用一下的冲动，这个案例告诉我 们，有时候，中看也很重要。


SlideDeck 的手风琴式导航

screenshot

Web 上，基于 jQuery 的内容滚动面板非常多，SlideDeck 是其中的佼佼者。使用独特的手风琴式界面显示内容，可以看做是 Outlook 风格导航面板的水平版，但视觉效果和体验更出众。


Strongbad 的随机回信

screenshot

Strongbad 是 Homestarrunner 推出的经久不衰的网络动画中的卡通形象，每周，Strongbad 会给观众回复很搞笑的邮件，这些邮件慢慢越积越多，最近，站点开发方推出一个随机邮件浏览功能，点一下那个随机按钮，就像抽奖机那样随机选中一封过去的邮 件显示。这个随机显示的过十分生动，让人忍不住一点再点。这个 UI 案例告诉我们，有时候，你在用户界面上的一点微小改动，有可能带来意想不到的效果。


Made By Tinder 的主题色选择

screenshot

这是一个很神秘的小站点，神秘到我们不知道它到底是做什么的。但这个网站的顶部，有几个小色块，点击后，整个站点就按色块上的色调重新配色，虽然很简单，但用户体验实在太妙了。


Pixelmator

screenshot

Pixelmator 是一个很出色的图像编辑工具，虽然远不如 Photoshop 强大，但包含很多创新功能。它的用户界面中有一个很有趣的功能，你在为图像的某个位置设置效果的时候，设置点和设置界面之间会显示一条很自然的连线，移动 设置点的时候，连线也跟着改变，虽然这条连线并没有多少实际意义，但给用户带来一种操作上的暗示，也很有趣味。


Riot Industries 的导航体验

screenshot

这个站点的导航很有特色，不仅流畅，而且设计出众，鼠标在导航条目上盘旋的时候，导航条目从左边的容器中微微探出，点击后，以渐变的方式，逐渐显示当前内容，这一切并没有使用任何 Flash 技术。


Web 上的拖放操作

screenshot

在我看来，任何应用都应该支持拖放操作，当然 Web 有它的局限性，不过，近年来，Web 上的拖放操作已经很常见了。在上面的站点，你可以直接将喜欢的程序拖放到下载按钮处，直接下载。IconDock 的购物车也支持列斯的操作。（Wufoo 和 Polldaddy 的拖放式表单设计 UI 在我看来是 Web 拖放界面的最佳实现 - 译者）


在线 Photoshop 的照片堆叠界面

screenshot

这是另一个没有实际意义，但很吸引人的界面设计，Adobe 的在线 Photoshop 在加载的时候，会显示一堆照片，你可以把他们抓起来乱扔，让它们相互碰撞，其物理效果十分出色，非常吸引人。


随鼠而动

screenshot

同样展示运动视差效果，同时，随着鼠标的移动，画面的工作区也随着移动。这个站点也实现了类似的效果。（感觉这种体验并不好 - 译者）


双滚动面板

screenshot

这又是一个基于 jQuery 的，非常出色的内容滚动面板设计。图片垂直滚动，而解释文字同步水平滚动，视觉效果和体验都十分出众。


基于物理动力的滚动

screenshot

我第一次使用 iPhone 的时候，对它的基于物理动力的交互 UI 印象深刻，在 Safari 上用手指翻动页面的时候，页面并不是按线性速度滚动，而是象现实物理世界中的物体那样，拥有曲线速度，先是快速滚动，然后慢慢慢下来。


至简的界面

screenshot

 

漂亮而复杂的 UI 让人喜欢，有时候，简洁的界面更吸引人。Mac 的 WriteRoom 是一个非常强大的文本编辑器，这些强大的功能隐藏在至简的界面下。

 

本文国际来源：Design Shack 15 in-Depth Examples of Addictive User Experience (原文作者:Joshua Johnson)

 

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

来自: comsharp
5
顶
1
踩
评论 共 0 条 请登录后发表评论

发表评论

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

相关推荐

  • BDK 开发工具包bdk1_1.zip

    Bean开发工具 JavaSoft是开发Java系列开发工具的公司，开发了BDK（Bean开发工具）。BDK可供开发者自由地使用，适用于Windows 2000/XP/2003及Solaris 2.4和Solaris 2.5。 其他用于Bean开发的各种工具，常用的有7个：Sun MicroSystems公司的JavaPlan、Java Studio和Java Workshop、IBM的Visual Age for Java、Symantec的Visual Café for Java、微软公司的Visual J++、Borland公司的JBuilder。 JavaBean是一种软件组件模型。它与其他软件对象相互作用，决定如何建立和重用软件组件。这些可重用软件组件被称之为Bean。Bean使用现有的Bean帮助开发新的计划，进而，建立它们之间的关系。 在Sun公司的JavaBean规范定义中，Bean的正式说法是：“Bean是一个基于Sun公司的JavaBean规范的、可在编程工具中被可视化处理的可复用的软件组件”。 因此JavaBean具有4个基本特性：独立性、可重用性、在可视化开发工具中使用和状态可以保存

  • BeanKit工具类的测试以及Function＜＞接口

    BeanKit工具类：包含一些有用的BeanKit工具。

  • Guns框架学习记录-3-Wrapper(Map)控制层返回方式+日志管理+Spring自定义注解

    5.Map + Wrapper 在Guns框架中，Controller层中采用了 map + wrapper 方式进行结果数据返回。利用wrapper类对返回结果进行包装，使得返回的前端数据更加灵活。 Wrapper的共同父类为BaseControllerWrapper，这是一个抽象类，需要子类去继承，并实现其内部的封装方法。 public abstract class BaseControl...

  • Beans Development Kit (BDK)分析（五）

     四.BDK工具类从Jar文件的操作到ClassLoader，从Applet类的制作到Bean的Applet封装，从类的编译到辅助信息的显示，从Bean的封装到各种类型的属性编辑器，从封装事件信息到串行化对象的各种操作实现。所以我将工具类进行分类以后再进行分析：1．Jar文件操作       Jar文件的操作包括：l         JarAccess.java       该

  • Beans Development Kit (BDK)分析（四）

     设计面板       主要介绍BeanBoxFrame提供的主要方法和功能。因为BeanBoxFrame是用了单态模式，所以使用了大量的静态成员变量和静态成员函数。这样的好处在于不需要通过传递引用来影调用BeanBoxFrame的功能，而直接通过静态方法来执行，避免复杂调用中引用传递的错误。l         private boolean inBeanBox(Component c

  • JavaBean及BeanUtils的使用

    一、javaBean类的规范：   1. 必须要有一个默认构造器（无参构造器）   2. 提供get/set方法，如果只有get方法，那么这个属性是只读属性！   3. 方法名称满足一定的规范，那么它就是属性！boolean类型的属性，它的读方法可以是is开头，也可以是get开头！   4. 属性：有get/set方法的成员，还可以没有成员，只有get/set方法。即：          真正决...

  • Jetson Nano Developer Kit 安装过程 （中文

    必要工具 官网说明： microSD card (16GB UHS-1 minimum) USB keyboard and mouse Computer display (either HDMI or DP) Micro-USB power supply (5V⎓2A) 小SD卡是存储的空间，之后会刷系统上去。 除了以上，一般还需要 一个读卡器，这样才能刷。 一个5V⎓4A的电源插图示红框位...

  • 又一经典开源项目Guns完全解读，小Hub好棒！

    小Hub领读：guns这个项目相信很多人都知道，不知道你们有没完整读过呢，今天一起跟着小Hub来学习下哈。一共几个主要模块比较重要：map + warpper模式Api数据传输安全数据范...

  • Guns V3.0简介

    Guns V3.0介绍Guns基于Spring Boot,致力于做更简洁的后台管理系统,完美整合springmvc + shiro + mybatis-plus + beetl!Guns项目代码简洁,注释丰富,上手容易,同时Guns包含许多基础模块(用户管理,角色管理,部门管理,字典管理等10个模块),可以直接作为一个后台管理系统的脚手架!Guns v3.0新增REST API服务,提供对接服务端接

  • 如何下载JDK（Java Development Kit）

    本篇文章主要讲解的是如何在Oracle官网上下载JDK（超详细）。 下面是详细步骤（具体操作看图片上的标记）： 1.进入Oracle的官网，官网网址是https://www.oracle.com/index.html； 如果你想看中文的话，你可以把鼠标放到Country上，会出现多个国家的语言，这时你可以直接选择中国，Oracle官网上的语言都会变成中文， 但是如果你把语言转换成中文后

  • ZOJ 3714 Java Beans

    求连续M个数的最大和、、 Java Beans Time Limit: 2 Seconds      Memory Limit: 65536 KB There are N little kids sitting in a circle, each of them are carrying some java beans in their hand. Their teacher

  • jeeplus多商户商城，分销商城

    ZSCAT不用写xml配置！独特的日志记录方式！包含用户角色，权限等模块的后台管理系统！整合springmvc + mybatis-plus + beetl！鸣谢1.SpringBlade 2.beetl 3.mybatis-plus功能简介 用户管理 角色管理 菜单管理 部门管理 日志管理 监控管理 字典管理 通知管理 代码生成 使用说明 导入sql/guns.sql文件到数据库 以maven

  • 实时监控体系：基于Prometheus的API性能指标可视化方案.pdf

    在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

  • 5个提升DeepSeekAPI生成质量的调参技巧，开发者必看！.pdf

    在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

  • ACM动态规划模板-区间修改线段树问题模板

    ACM动态规划模板-区间修改线段树问题模板

  • 深度解析C语言调试技巧：VSCode+GDB实战排错指南.pdf

    # 踏入C语言的奇妙编程世界 在编程的广阔宇宙中，C语言宛如一颗璀璨恒星，以其独特魅力与强大功能，始终占据着不可替代的地位。无论你是编程小白，还是有一定基础想进一步提升的开发者，C语言都值得深入探索。 C语言的高效性与可移植性令人瞩目。它能直接操控硬件，执行速度快，是系统软件、嵌入式开发的首选。同时，代码可在不同操作系统和硬件平台间轻松移植，极大节省开发成本。 学习C语言，能让你深入理解计算机底层原理，培养逻辑思维和问题解决能力。掌握C语言后，再学习其他编程语言也会事半功倍。 现在，让我们一起开启C语言学习之旅。这里有丰富教程、实用案例、详细代码解析，助你逐步掌握C语言核心知识和编程技巧。别再犹豫，加入我们，在C语言的海洋中尽情遨游，挖掘无限可能，为未来的编程之路打下坚实基础！

  • 10个高效调用DeepSeekAPI的技巧：从请求优化到缓存策略.pdf

    在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！

Global site tag (gtag.js) - Google Analytics