UI灵感分析笔记#3（22.1.2）

这看UI真是一件美逝啊

视频来源：每周灵感#03_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1S34y1U79E?spm_id_from=333.788.top_right_bar_window_history.content.click

目录

1.

2.

3.

4.

5.

---

1.

复古风格的不知道啥页面。

 下行logo有一个滑动的动画，但是这里很有意思的地方是，这些logo整体的排列趋势是斜着的。

Like this

图片以如同打开卷轴般的动画的方式浮现，而不是常见的一个滑动浮动方式。

感觉很不一样。

2.

大概是记录用户日常生活（行程、热量摄取）的APP。

 

 当向上滑动底栏的时候，整个屏幕给了一个俯视的小倾斜。

点击便签的时候，出现一个随着按动缩放的效果。

这种APP拥有较强的日常属性，用户使用频率高，使用时长短，这种时候就需要能与用户的多次行动产生良好互动的设计，这几个动画都能让用户在使用中体会到强回应。

3.

页面的滑动严格按照手指滑动的顺序来进行，就像是随着用户滑动屏幕，这些动画才开始一帧一帧地进行一样。

之前哈利波特官网搞过一个类似的像故事屋一样的网页，感觉就很有这种风格。更倾向于注重用户的沉浸式体验，或者说，很多软件的用户年度报告也是这种故事书风格。然而这里的样例看上去像是潮流品牌网页，将大量的产品相关模特海报来作为视觉核心，能够让用户快速又直观地注意到

尤其需要注意图片和字体二者出现的时间协调性，以及图层前后的安排在这里也成了需要重点注意的技巧。

4.

香水网页。

不知道为什么总感觉搞香水的人都喜欢性冷淡风格，可能香水本身比较贵然后黑白灰又很高级所以能显得香水更贵了吧。

标题以浮雕的特效浮现出来，然后再进行顶栏的出现，接着右边给一个盒子打开的动画，对应着香水礼盒的产品。每次滑动的时候就会有香水滚走、然后新的香水又滚出来的动画，很可爱。

整个页面也是采用了大粗字体，下边黑色的大粗字体和CHANEL这个偏灰偏小的字体浮现的动画方向相反，给一种错位的不对称感。整个页面的设计也很具有质感，和产品的内容和理念密不可分。

5.

一个肯定实现不了但是真的太美了太厉害的设计。我心目中的本期最佳。

 加载完成的页面

 大粗字体进行一个交错滑动的动画。

下滑，字体进行像是纸翻页的淡出动画并退出页面，图片展开，填充页面，进行一个下滑出现，引导用户进入新的视觉重点。

依然是大粗字体的运用，不过可以看到这里字体和图片的叠加交错设计很巧妙和生动，以及字体和背景的配色协调又大胆（虽然是我不敢用的）

仔细一看全局就会发现整个页面其实还是一个上面的极简风格，不过不是以黑白灰的配色。这又为极简风格提供了一种设计思路吧，但是可以很明显地感受到这个网页的倾向在于图片，所以文字少且小。这个设计很有趣的地方还在于他的图片和文字在网页中位置并不是很整齐的，整个网页的布局都给人一种交错感。