BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

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

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

有的老小伙伴要去霓虹国,有的老小伙伴正在生宝宝,有的老小伙伴正在香港兴许还在琢磨着去霓虹国的小伙伴会不会帮他带手办;不知还有些什么小伙伴在看着什么电影吃着什么美食逛着什么街血着什么拼。想到这些觉得蛮开心的不知道为什么。

这周末公事私事缠身,着实没有时间做文章的更新了,便零七八碎的拼些小时间出来做一期小处见大。哦蛮久没有做过了,一直以来关注的LittleBigDetails也没太多新货了;倒是在想,接下来继续做的时候还可以挖些他家的旧货出来,虽然那些蛮早以前的App或Web服务可能已经有过多次改版了,但是那些细节当中的设计精髓毕竟不会随着时间的推移而褪色。

那这次就开始了;发现有不少是Google的;今天也花了不少时间研究Glass,有兴趣的同学也可以翻翻之前的两篇文章,“Google Glass日常交互体验”以及“为智能眼镜而设计”。走起。

1.Etsy - 评论输入框底部的提示文字会鼓励用户发表评论,并且会随着单词数量的变化而改变文案,例如“至少再说点吧”、“好诶,继续!”。

01-detail-ux-ui-user-experiece-web-app-design.png

2.MailChimp - 统计报告页面中,将鼠标悬停在地图当中的不同国家上,气泡提示当中的鼓励内容会以该国家的语言读音呈现。

02-detail-ux-ui-user-experiece-web-app-design.gif

3.Shopping UK - 购物清单当中的商品数量超过10个后,界面底部的购物篮图标会变成购物车的样式。

03-detail-ux-ui-user-experiece-web-app-design.gif

4.Google Drive - 在文档中选择一段文字并创建链接,系统会将选中的文字作为关键词,自动搜寻相关的文档或网站,为用户提供选择建议。

04-detail-ux-ui-user-experiece-web-app-design.png

5.MailChimp - 使用了定制化的下拉菜单,会根据当前页面所处的位置而选择向上还是向下展开列表,例如当下拉菜单控件距离窗口底部较近时,菜单会向上展开。

05-detail-ux-ui-user-experiece-web-app-design.png

6.Chrome - 开发工具(“审查元素”)的设置当中,十六进制色值的范例代码是“DAC0DE”,即“the code”。

06-detail-ux-ui-user-experiece-web-app-design.png

7.EA SPORTS - 页面导航栏的背景色值即为“#EAEAEA”。(我以前做Web设计时遇到需要在#EEE范围里选取色彩的时候,往往会选择“#E3E3E3”,而回避“#EAEAEA”,因为喜欢E3游戏展,厌恶EA。EA毁掉了很多收购到手的好游戏;其slogan“EA,challenge everything.”已被玩家改为“EA,fuck up everything.” - 译者C7210注)

07-detail-ux-ui-user-experiece-web-app-design.jpg

8.Google - 搜索一部未上映的电影时,上映日期信息旁边会出现“提醒我”按钮,点击后,Google Now中会建立一条提醒事项。

08-detail-ux-ui-user-experiece-web-app-design.png

9.Google - 气象预报当中的风力强度信息会通过不同尺寸的箭头一目了然的展示出来。

09-detail-ux-ui-user-experiece-web-app-design.png

10.Stripe - 比特币支持系统的测试页面中,邮件输入框中的范例邮箱是“satoshi@example.com”,即比特币的发明人中本聪(Satoshi Nakamoto)。

10-detail-ux-ui-user-experiece-web-app-design.png

11.Amazon - 打印邮寄标签时,页面中会贴心的提供一个“没有打印机?发给朋友”按钮,以便没有打印机的用户发送给朋友帮忙打印。

11-detail-ux-ui-user-experiece-web-app-design.png

12.CircleCI - 文本框被聚焦后,原来的占位提示文字会通过动效上移,一方面让位于用户输入的文字,一方面成为该文本框的标题。

12-detail-ux-ui-user-experiece-web-app-design.gif

13.TED - 在视频页面向下滚屏时,视频会缩小到顶部固定栏当中保持播放状态。

13-detail-ux-ui-user-experiece-web-app-design.png

14.Grand ST. - 退订邮件订阅后,他们会邀请你通过社交网络平台继续保持关注。

14-detail-ux-ui-user-experiece-web-app-design.jpg

15.iOS - 在系统相机里拍摄全景照片时,界面当中的提示文字会根据拍摄对象的明亮程度而动态的增加或移除阴影效果,以确保文字始终清晰可见。

15-detail-ux-ui-user-experiece-web-app-design.jpg

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。
评论 (9)
您好,通过您的博客我学到了很多,开拓了我的视野,您让我觉得您做设计做的很开心,真的喜欢设计,我很开心,谢谢您。
是很开心的事情:)
小的小伙伴,老的小伙伴。哈哈,这段绕口令不错。。(*^__^*) 。。
恩...
生宝宝的老小伙伴来了!以后一定跟着学霸混!
大王如是说,真真愧煞我也
有一些应该算作彩蛋了。第七项特别有感觉。
恩的彩蛋居多
这个专题很不错的说,LittleBigDetails 更新频率变慢了不少,不过前段时间又发现了一个类似的网站 uedetail.com。