每天发现点新交互

这是一篇关于交互的备忘录,我尽力把每天看到的优秀体验的设计细节更新进来,跟大家一起分享探讨,大家如果有发现好的设计,一起留言交流吧!努力把它创建成所有人通用的交互备忘录,每日更新,欢迎加收藏


好的设计有一个共通点——留白

好的文章也应该如此

2015.9.24

cooksclub


首页
滑动后

2015.6.29

1.Archiduchesse wap页面

这个wap页面android浏览器的导航背景色与产品颜色保持一致

2.想去网的交互小细节

[1]外链登录页面与弹框登录页保持一样的框架布局,细节补充,让两种都很高频的页面有相同的操作路径

登录外链页面


[2]首页的二级导航上将最新上架的产品放在最左边,用户可以容易关注到,同时以自然语言描述了新产品数量,吸引用户点进去查看

首页二级导航



[3]很多瀑布流网站或屏数较多的页面右侧都有回到顶部的按钮,这里用了一个弹簧动效很有心意


回到顶部动效后
回到顶部动效前


[4]用户未登录时,将“我的”等与个人账户相关的页签放出来,用户尝试点击就以弹框引导用户登录

[5] 上滑后将主导航位隐藏,让用户更关注此时的二级导航“我的”“发现”



2015.6.25开篇

1.百度百科的导航

百度百科的导航通过float层将二级导航全部展示出来,对于以多维度分类内容时,可以采用这种形式,方便用户快速定位适合自己的页签

2.ebay deals

ebay deals的导航以汉堡包展开侧边导航,使内容区排列空间增大,首屏内容展示更多,排列更加灵活

3.ebay注册引导

这里注册引导前加上4个词短语,高效直达产品价值,冲击用户需求,且紧跟输入框,没有花哨的视觉干扰。

4.页面名称上的引流

每一个页面的命名是交互设计师容易忽略的一块部分,但在用户体验的感知中也是不可忽略的细节,好的名字能够给用户带来信赖感,增加黏度



5.gmail发送邮件

gmail新建邮件的输入框尺寸较小,当内容超过当前区域时,会自动拉高,且不会超过邮箱列表高度。


邮件未输入内容时
邮件输入内容超过当前框架时自动拉高

6.[单页设计]DISQUS

这是DISQUS的功能介绍页面,首屏为主要功能区,闪烁关键点联动放大功能介绍;点击后或关闭文字介绍回到首页;上滑页面,主导航与logo注册区撞击,并展示产品使用步骤;继续上滑,与导航页签联动,方便定位。

DISQUS首屏


导航像纸片一样,与google的新视觉一致
导航联动效果

7 Youtube加载动画

youtube app加载刷新时,会以不同形态的喵扒拉在那——我们平时的加载动画也可以通过动画随机的形式;让加载更有趣味性,缓解用户的不满情绪

youtube加载喵

推荐阅读更多精彩内容