60个以小见大的设计细节

标签: 干货 | 发表时间:2014-04-25 14:26 | 作者:博士
出处:http://www.techxue.com/portal.php?mod=list&catid=8

这些内容来自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忘记登录密码时,收到的密码重置邮件来自[email protected]

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

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

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

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

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

21、Campaign Monitor向账户中新增管理员时,确认按钮当中会自动包含新增的管理员名字,例如”添加Sally”。

22、Last.fm在你更新了地区信息之后,系统会自动更新时区和国家信息,并且通过反馈信息向你告知这些信息已经根据新的地区自动更新过了。

23、500px照片页的快捷键说明当中,F键的图标上有一个突起样式,和真实键盘的F按键相同。

24、Timehop当你浏览到界面底部时,如果继续滚屏,就会看到吉祥物小恐龙只穿底裤的样子。

25、Dropbox当你通过某个链接来到一个已经被移除的共享文件夹时,出错提示页面中的Dropbox logo会变成纠结的Escher立方体。

26、Google Calendar提示信息条中”撤销”按钮会在整个提示条消失之前首先淡出。

27、Pinterest如果你曾经pin过某张图片,那么再次试图pin它的时候,系统会提示你之前已经在某个画板中pin过这张图了。

28、OS X当系统检测到你正在使用没有触控功能的鼠标时,每个窗口中都会自动呈现侧边滚动条。

29、Goodreads如果你正在浏览Web开发或UX方面的书籍,页面右侧就会出现Goodreads自家的相关职位招聘信息。

30、iOS7的控制中心打开手电筒后,其高亮状态的图标上,手电筒的开关也是处于”打开”的位置。

 

31、iOS7锁屏时,状态栏上文字与图标的尺寸比平时更大。

32、iOS 7 的Safari“阅读列表”图标里的眼镜变成了乔布斯的经典样式。

33、Optimizely白金会员拥有直接联系Optimizely CEO的专享特权。

34、Gmail在多人邮件中添加新的联系人之后,TA的名字比其他联系人的字色要深。

35、Speaker Deck在某套幻灯片的缩略图上横向移动鼠标,即可按顺序一页一页的预览该幻灯片当中的内容。

36、Projecto如果在邮寄地址中留下了英国的地址,系统就会以古板的英国绅士的口吻向你告知进口税方面的问题。

37、Youtube当视频处于播放状态时,浏览器标签当中会出现一个代表”播放中”的三角图标。

38、Dropbox当你被邀请到一个新的共享文件夹时,文件夹的图标当中会有一个微笑的表情。

39、App Store如果没有打分就直接发表评论的话,系统会通过弹出框告知,并在其中直接提供打分功能。

40、Chrome当你正在使用语音搜索功能时,浏览器标签当中的favicon会变成一个带红点的样式,表明系统当前正在监听。

41、Press Café鼠标悬停在”营业/打烊”状态标识上时,气泡中会显示距离”打烊/营业”的时间,精确到分钟。

42、Kayak筛选航班信息时,你可以通过点击某个筛选条件中的”only”来取消选中其他条件,只让这一条处于选中状态。

43、Chrome在页面上搜索内容时,如果搜索结果所处的位置正好被Chrome的搜索栏遮挡住,那么搜索栏会自动移到旁边。

44、Gmail如果邮件需要用户执行某些特定的行为,例如”RSVP(回复确认)”、”确认订阅”、”跟踪包裹”等等,那么用户可以在收件箱的邮件列表当中直接完成相关的确认操作。

45、Tumblr“动态(Activity)”按钮上的曲线图是真实数据曲线的缩略版本。

46、Google搜索”kerning”时,搜索结果中该单词的字符间距会变大(确保字母r与n不会被误读为m)。

47、GitHub System Status页面的favicon会随着当前系统状态的不同而发生变化。

48、Facebook访问自己配偶的页面时,会看到”TA已与你成婚”。

49、Amazon Kindle产品页的照片中,护照与Kindle书上面的文字会根据你所在的地区不同而变化。

50、Google Docs当前文档的匿名浏览者会被分配到不同的动物名字与图标。

51、iOS7主屏上的时钟图标可以动态的显示当前实际时间。

52、iOS7天朝版本的iOS7官方介绍视频中,Twitter和Facebook的图标被替换为新浪微博和腾讯微博。

53、Google Chrome用户准备清除浏览数据时,Chrome会首先提示用户,以后可以使用隐身模式浏览网页,这样就无需手动清空数据了。

54、PSN“变形金刚:赛博坦的陨落”游戏的新闻邮件中,如果图片默认没有被加载,空缺的部分会拼合成博派的logo。

55、Tumblr如果用户上传了一张超大宽幅的图片,Tumblr会自动将文案中的”照片”一词变为”全景图(panorama)”。

56、Headline Shirts如果用户在购物车页面滞留超过45秒,Headline Shirts就会为其打折,折扣会在10分钟内有效;如果超过10分钟没有使用,他们还会送出可供将来使用的优惠码。

57、Tumblr for Android长按”创建”按钮,可以在照片和文本内容之间选择。

58、YouTubeFavicon可以动态的体现出”缓冲中”、”播放中”和”暂停播放”的状态。

59、谷歌地图iPhone版双击地图之后就可以通过单指来进行缩放操作。

60、IA Writer选中一段文字后,底部状态栏会显示这段文字相关的统计数据,例如包含的单词量、字符数量以及阅读这段文字花费的大致时间。另外,这些统计数字拥有和选中文字相同的背景色,便于在认知上建立关联。

 

来源:beforweb

相关 [设计] 推荐:

为了设计而设计

- - 幻风阁|kent.zhu'sBlog
我有个习惯,每天晚上睡前会搜罗一遍最新的App用用. 最开始的时候ios的App还相对比较朴实,强调功能的实用性,后来不知何故吹起一阵ios的App必须足够精美的怪风. 于是乎,各类App纷纷上演换装游戏,一个比一个做的精美,即使是一个很工具性的应用也把自己浓妆艳抹的往坐台小姐的风格搞……. 上周末跟Tony和Angela在下厨房喝茶闲聊,我说目前的移动产品设计可以分为2类,一类是做给用户用的,一类是做给设计师们欣赏与收藏的.

杯盖设计

- Yu - 创意设计-有趣、时尚、另类的创意
微向上的设计,在倒水完毕的时候可以让水滴顺着杯盖回流到杯子中,而不会随意的滴下来. 虽然是细小的设计,但是考虑的却是生活的便利.

再设计Redesign

- Mark - 腾讯CDC
  一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来.   对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

简约设计

- - 淘宝网通用产品团队博客
写下这个标题,那么首先得要明确什么叫简约. 简约就是让用户操作简单,让用户更快的达到自己的目的. 一个产品在于解决一个需求,如何让用户最好的完成需求就成为一个产品经理首先得要解决的问题. 那么在日常工作中,我们又有什么可以做的呢. 在《简约至上》里面有四种策略,但是有的东西太高级了,在平时的工作未必能够用得上,所以我自己来提炼一下,看看日常工作中能够遇到并且可以解决问题的方法.

再设计Redesign

- 小趴 八足趴 八足 ramener - 互联网的那点事...
一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来. 对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

HBase表设计

- - 互联网 - ITeye博客
默认情况下,在创建HBase表的时候会自动创建一个region分区,当导入数据的时候,所有的HBase客户端都向这一个region写数据, 直到这 个region足够大了才进行切分. 一种可以加快批量写入速度的方法是通过预先创建一些空的regions,这样当数据写入HBase时,会按 照 region分区情况,在集群内做数据的负载均衡.

ODS设计

- - 开源软件 - ITeye博客
在一般的数据仓库应用系统中,根据系统体系结构的不同,数据仓库设计的内容和范围不尽相同,并且设计方法也不尽相同,下面的两幅图示分别表示带有ODS的 数据仓库应用系统体系结构和不带ODS的数据仓库应用系统体系结构. 本文将说明两个体系结构上的差异以及这种差异造成的设计方法的不同,并且重点介绍带有 ODS的体系结构中数据仓库的设计方法.

HBase Schema 设计

- - IT瘾-dev
HBase 与传统关系数据库(例如MySQL,PostgreSQL,Oracle等)在架构的设计以及为应用程序提供的功能方面有很大的不同. HBase 权衡了其中一些功能,以实现更好的可扩展性以及更灵活的模式. 与关系数据库相比,HBase 表的设计有很大的不同. 下面将通过解释数据模型向您介绍 HBase 表设计的基础知识,并通过一个例子深入探讨 HBase 表的设计.

HBase RowKey 设计

- - IT瘾-dev
1.1 RowKey对查询的影响. HBase中 RowKey 用来唯一标识一行记录. 在 HBase 中检索数据有以下三种方式:. 通过 get 方式,指定 RowKey 获取唯一一条记录. 通过 scan 方式,设置 startRow 和 endRow 参数进行范围匹配. 全表扫描,即直接扫描整张表中所有行记录.