19个设计精妙的微交互模式,一些小小的情感化元素

2021-11-23 13:12:32  15 浏览  0 评论   赞

Google验证;new Republic;Chrome;Medium;Google图片搜索;Chec;Wikipedia;any;Pinterest;Forbes;Close;Podio;Litmus

19个设计精妙的微交互模式,一些小小的情感化元素

图19865-1:

这些内容来自tumblr的一个博客,little Big Detail。那边的用户提交了很多Web和App产品中设计用心的小细节,可以说,包括一些精妙的微交互模式,一些小小的情感化元素,我很喜欢,于是就挑出一些自己觉得有点意思的,汇总成期,童鞋们感受一下。

1、Google验证

用户点击验证码后系统会自动对其进行复制(便于后续的粘贴操作)

2、Gumroad

聚焦到CVC安全码字段时,右上方的信用卡图标会自动翻转并提示安全码的位置。

3、google Docs

准备为某段文字添加连接时,系统会基于选中的文字自动提供URL建议。

4、new Republic

顶部固定的标题栏当中有一条细红线(进度条),可以随着滚屏而自动伸展或收缩,用来提示当前阅读的部分在全文当中的位置。

5、MailChimp

注册时,如果你填写的用户名已经被占用了,系统会问你是否有个邪恶双胞胎。

6、Chrome

无法找到页面时,会提供一个与你输入的URL非常相似的正确网址建议。

7、Medium

在小引用中,选择一段文字后,出现的上下文工具当中,双引号图标只有一半是高亮的;而对大引用来说,这里的高亮状态是完整的。

8、Turtable.fm

订阅方案的选择,使用了滑块模式;小猴的表情会随着你愿意支付的金额而动态的产生变化。

9、Google图片搜索

在加载完整图片的过程中,缩略图下方会展示一个进度条。

10、Hipmunk

如果用户输入了过去的时间,会报错”我们尚未提供时空回朔的旅行服务”。

11、Chec

直接使用更有意义、更有上下文关联感的语句来呈现选项(交互选项拥有高亮背景)。

12、Wikipedia

在文章中点击引用内容时,页面底部会展示内容来源的相关信息。

13、google Maps

会显示当前地图当中区域的即时天气信息。

14、any.do Cal

会显示两个事件之间的间隔时间。

15、Pinterest

忘记登录密码时,收到的密码重置邮件来自ohno@pinterest.com。

16、Forbes

热门文章列表中,每个条目都有白色的背景条,以展示这些文章的受欢迎程度(点击量)。

17、Close.io

当你从其他地方直接复制了”john Smith” <john@example.com>这种形式的邮箱信息,并粘贴到Close.io的邮箱地址输入框中,信息会被自动分割,其中的姓名会被自动填写到Name输入框,邮箱则留在邮箱地址输入框。

18、Podio

创建新组织时,系统会根据你填写的组织名称自动推荐相关的logo供选择。

19、Litmus

当你准备取消服务时,页面中的垃圾桶里会出现你曾经使用Litmus发起过的调研邮件实际截图。

 

转载请注明:网创网 www.netcyw.cn/b19865.html

赞 ()
发表评论
  • 昵称
  • 网址
(0) 个小伙伴发表了自己的观点
    暂无评论

Copyright © 2018-2019 小王子工作室 版权所有 滇ICP备14007766号-3 邮箱:yangzy187@126.com