恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
那些小处见大的设计细节(1)
0.0°
2014-05-29 好文转载 经验/观点 原作者: C7210 举报 3689 13 7 1

英文原文: http://littlebigdetails.com

译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

这些内容来自Tumblr的一个博客,Little Big Detail。那边的用户提交了很多Web和App产品中设计用心的小细节,可以说,包括一些精妙的微交互模式,一些小小的情感化元素,这样,我很喜欢。于是就挑出一些自己觉得有点意思的,汇总成期,放到这边;每次10至20枚不等。

今天是第一发,涉及Apple、Google、MailChimp、Medium、Pinterest等品牌和产品。请看吧。

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

01-google.png

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

02-payment.png

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

03-google-doc.png

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

04-new-republic.png

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

05-chimpmail.png

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

06-chrome.png

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

07-medium.jpg

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

08-turntable.gif

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

09-google-image-gif.png

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

10-trip.png

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

11-setting.png

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

12-wiki.jpg

13.Google Maps - 会显示当前地图当中区域的即时天气信息。

13-google-map.png

14.Any.do Cal - 会显示两个事件之间的间隔时间。

14-calendar.png

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

15-pinterest.png

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

16-most-read.png

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

17-email-form.png

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

18-logo.png

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

19-email-test.png

20.OS X Finder - 在通过“Alt+拖拽”复制一个包含年份数字的文件夹时,新文件夹当中的年份会自动加1。

20-osx.png

更新:2014-05-29

收藏

13人已收藏

空空小巫

嘘...

  • 44

    作品

  • 714

    粉丝

  • 4

    关注

  • 挖坟 OS X「七」- 鲜为人知的细节设计 TOP 10
  • 在网页设计中最被低估的是什么?
  • 以更好的方式引导用户为应用打分
  • 通过有意义的动效解释应用的交互机制
相关标签
产品设计UX细节

    猜你喜欢

      2014-05-29 好文转载 经验/观点 原作者: C7210 举报 3689 13 7 1

      那些小处见大的设计细节(1)

      0.0°

      你确定要举报那些小处见大的设计细节(1)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年05月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      13
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录