那些过目不想忘的设计(UI/UX)

日常在玩各种 app 的时候总会看到一些让人惊叹的 UI/UX 设计,但是往往过了一段时间就忘了(可能是初老症)。所以打算将看到喜欢的设计截图或者做成 gif 的形式存下来,一点点添加到 blog 上来,作为存档,也可以分享给大家。同时也希望通过代码对其进行实现。

Instagram

instagramHomepage

这应该是 Instagram 从比较早起就有的一个效果,随着页面往上移动,Instagram 的 logo 会一边往上移一边缩小淡出,同时也增加了页面的有效阅读区域。类似的,iPhone 自带的 Safari 也有类似的效果,Safari 的网址栏会上移。

Twitter

twitterLaunch

Twitter 的这个效果应该很多人都见过,也有很多 app 在借鉴。App 启动的时候,随着小鸟变大,背后的 twitter 内容显示出来,当整个列表显示时,还有一个弹动的效果。

Notify

notifyCenter

Notify 是 Google 出品的一个类似新闻聚集的 app,目前在 App Store 中国区不提供下载。在点击左上角的设置按钮时,设置页面弹出,点击关闭按钮时,设置页面收回。整个动画是有层次感动,设置页面出现时,列表页面是往内回收的,同时淡出,而在设置页面关闭时,列表页面是往外弹,同时淡入。页面的出现和消失是有呼应的。

Path

pathCenter

Path 可谓是 App 设计界的标杆,总有一些创新的设计。这一页是个人中心的页面,随着页面往上推,cover 图片往上移,而且移动的速度和页面的移动速度是有差的。同时,cover 上的元素会随着往上的移动渐渐变淡到消失,而 Me 会逐渐出现,cover 移动到顶部一定距离就会停住,出现在导航栏的位置。往下拉是一个相反的过程。

Pin

pinSetting

Pin 是一个提高效率的工具类 app。该动画主要体现在 Pin 这一页,当点击右上角的按钮时,Pin 页会往后缩小并往左移动,同时通用选项页从右往左滑动。手势返回时的动画就是个你过程。

0%