15个以小见大的设计细节

分类栏目:经验 - 设计文章

发布于 暂无评论


  “细节决定成败”。我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计的人也能够从一堆拙劣的设计作品中挑选出哪一个是优秀的设计作品。虽然说不出来为什么这个比那些都好,但是直觉会告诉我们自己喜欢哪一个。很大一部分原因是因为优秀的设计作品总是充满了丰富的细节。”一些精妙的交互模式,一些小小的情感化元素,这些设计的细节能够让你体会设计者的用心。


  1.Gumroad


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



  2.google Docs


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



  3.New Republic


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



  4.MailChimp


  注册时,如果你填写的用户名已经被占用了,系统会问你是否有个邪恶双胞胎。诙谐的语言让你不得不重新想一个更好的用户名。



  5.Turtable.fm


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



  6.Forbes


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



  7.Podio


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



  8.500px


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



  9.Timehop


  当你浏览到界面底部时,如果继续滚屏,就会看到吉祥物小恐龙只穿底裤的样子。这么有爱的场景让你不得不滑动你的鼠标。



  10.Amazon Kindle


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



  11.google


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



  12.Tumblr


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



  13.Press Café


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



  14.Chrome


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



  15.Youtube


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



  注:本内容来自网络