标签归档:交互设计

修改密码的那点事儿

2011年岁末先后爆出CSDN天涯等站点的用户明文密码泄漏,大家纷纷忙着修改密码,不少网站也通过在网页醒目位置发布公告或发送邮件提醒告知用户及时修改自己的密码以确保账户安全。对网站而言,希望用户能够定期主动去修改密码并保证一定的复杂度;但对用户来说,一般不到万不得已,通常不会经常修改密码。同样是表单,注册表单的产品设计大家常讨论,那么修改密码的表单设计整体体验又是如何?

 

一、大型门户

1. 网易通行证

NetEase

表单中的每个输入框均会给出有效性反馈,新密码的复杂度要求一直显示在输入框下方,并需要填写验证码(英文+数字,不区分大小写)。

另:界面上有一处“>”字符漏出,应是缺陷。

 

2. 搜狐通行证

Sohu

界面中提示了当前用户名;当焦点在输入框中时,跟随输入框在其后提示密码复杂度要求的说明信息;验证码为小写英文+数字。

 

继续阅读

搜索框UI设计精彩案例大集合

我们在某个网站上查找信息出现困难时,通常会尝试进行搜索。毫无疑问,搜索框是一个网站的重要组成部分。如果你正在运营一个以内容为主的网站,那么这个问题就更为突出。有时我们也会考虑放一个搜索框在页脚,以便让用户更方便进行搜索。

search box design Showcase of Beautiful Search Box UI Designs
(图片来源: Shutterstock)

自从Web 1.0后我们走了很长一段路,网站搜索不再仅仅是一个“输入关键词”加上“点击搜索”。开发者们通过改进与增加功能,努力让搜索能够给用户带来更好的体验——搜索过滤能获取更精准的结果,提供搜索关键词或曾经输入过的搜索历史。

这篇文章中,我们将介绍一些既漂亮也具备实用功能的搜索框。不论你是正在改进自己的网站,或是仅仅希望找到一个更好的搜索框解决方案,这篇文章都会很适用。让我们一起来看吧!

PlaylistNow

伴随着输入前缀“ I am ”,这个搜索模块就会开始智能匹配并根据你的输入实时列出结果。

playlistnow Showcase of Beautiful Search Box UI Designs

Scroll Search Module

这个极富创意的搜索框出自设计师 Nico Nuzzaci ,它允许用户通过输入或滑动字母面板进行搜索。

scroll search module Showcase of Beautiful Search Box UI Designs

继续阅读

快速原型的4个关键要素

伴随敏捷开发的理念,Lean UX也开始变得流行,其核心理念可以概括为:如果一幅图片能体现1000个单词,那么一套原型则能够包含1000幅图片(向 Ben Shneiderman 致歉)。那么,如果是在时间紧迫而任务更重的情况下,我们又该如何提升原型设计的速度呢?

如果遵循以下四个原则,会有效地提高原型设计的速度:

  • 从纸面原型开始做起
  • 使用一种原型工具即可,而不是多种
  • 使用能直接生成规格说明的原型工具
  • 支持协作

 

1. 从纸面原型开始做起

加速制作原型的最好方法就是从纸面原型开始做起。敏捷开发的原则之一就是,交付物的完成是衡量一个项目进展的关键指标之一。因此,非常遗憾的是,有些开发者便误以为如果要加快进度,他们得从一开始就打开电脑做起可交付的原型来。

制作原型时最好的要诀是,不要从项目一开始,就用电脑做原型。这或许是你在原型设计过程中会犯的最大错误。

直接开始用电脑制作原型的问题在于,它无法给你更广阔的设计空间,帮助你全面地去思考产品的体验。而你更容易陷入一两个设计思路并仅以此为基础进行原型设计的方案。

在设计的早期阶段,不论你是正在设计一个新系统,又或是一个新的工作流,你都不会只想要一两个思路,而是希望能有越多越好。纸面原型正可以在这个环节成为你最好的搭档。在最初的设计阶段里,你可以在纸上方便地创建各种各样的界面和模型,反复权衡,甚至能够制作可以互动的纸面原型,并将之用于早期的用户测试。

译者注:实际工作中,纸面原型的确可以更方便又低成本地的修改、拼接,甚至是快速地毁灭一个坏主意或是创建出各种新的模型,而不会令思路受制于某一款特定软件的限制。你所需要的仅仅是几张纸、几只笔、一些透明胶带以及一块足够摆放你各种想法的大白板。

 

2. 使用一款原型设计工具,而非多种

当你开始在电脑上做原型时,能帮你提高效率的要诀之二是:只要使用一款原型软件就好。我们经常会看到一些设计团队开始时是在Keynote或是Balsamiq等工具中制作原型,之后换到Photoshop或Fireworks中制作高保真,最后又用Dreamweaver或Flex加入交互以便进行可用性测试。

这样做的一个问题就是,设计师必须要在他们擅长的软件中重新设计,这样不但效率低而且会拖慢整个开发进度。同时,这也会给软件与文件的管理带来麻烦。比如说,我们用Visio制作了用户流程图,而设计师就需要用Photoshop来设计,但这些在微软Word中又是有现成的。
让原型设计规范在一款软件平台上,能使得你更有效率。

译者注:在原型阶段保证基本的可用性的是非常重要的,一旦进入高保真原型或coding阶段,修改的代价会明显上升。

 

3. 使用能直接从原型生成规格说明的原型制作工具

第三个要诀能让整体流程更为顺畅:确保你的原型中包含开发人员能够理解的详细规格说明。

新手常会犯的一个错误就是,将他们设计的原型直接交付给开发人员进行开发。那些没有实际敏捷开发经验的人可能会误以为敏捷开发就是不需要文档,但事实上,它仅仅是要求减少文档的数量。敏捷开发可能是不需要大量的需求文档、规格说明书,但它仍需要一些必要的信息(诸如色码、下拉框的内容等)来说明原型以使得我们能够定义一个敏捷冲刺的目标。

你可以复制粘贴Photoshop中的图片到Powerpoint、Word或Visio中进行标注。但这样不仅很费力,而且在每次变更原型设计时都需要再去更新规格说明书。事实上,这简直是一场噩梦——就我所知,一些大企业不愿意对原型进行修改的原因就是在于更新规格说明书将耗费大量时间。很明显,选择一款能够直接从原型生成规格说明的原型制作工具能够提升效率。

译者注:在原型工具中直接对控件或交互流程进行明确的标注,可以帮助开发人员更好地理解产品原型,提升开发效率与质量。

 

4. 支持协作

通过使用支持协作的原型工具,你使得整个流程更为高效。

理想的原型工具:

  • 支持多用户同时设计原型。你的工具能够支持文件管理、版本控制、权限控制以及数据完整(确保当两个或更多人在同一时间不会同时更新一个对象)。
  • 允许更轻松地分发原型以获取反馈。一些组织仍然在通过将许多零散的文件打成zip包后发送电子邮件的方式进行分发。这意味着反馈将会是不协调的邮件回复形式。

 

Macefield博士的推荐

原文作者Ritch Macefield是Axure和iRise的粉丝,而它们可以避免上文中提及的这些问题。这些工具正是特别为了改善现代软件开发环境下的原型设计需求而开发的。如果你遇见了任务重时间紧的情况,不妨尝试一下本文中的方法。

 

译者注:关于Lean UX,推荐延伸阅读以下文章:

 

【 原文:4 ways to prototype faster By Ritch Macefield,译者:Summer 】

 

表单设计指南

Web表单在网站设计中经常遇见但却又容易被忽视。cxpartners的用户体验设计师们在做了大量用户测试之后,制作了一套表单设计指南并将其共享出来。

该指南遵循CC 3.0协议,同时提供Omnigraffle源文件、PSD以及PDF版本。cxpartners鼓励将其打印出来,贴在墙上,甚至是发给你的客户——最终目的是帮助大家设计出更好的表单。

Form design guidelines crib sheet

 

下载:

 

【原文:Form design guidelines crib sheet (free download)  By Joe Leech,译者:Summer 】