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

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

好的文章也应该如此

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加载喵