这看UI真是一件美逝啊

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

1.

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

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

Like this

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

感觉很不一样。

2.

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

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

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

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

3.

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

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

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

4.

香水网页。

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

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

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

5.

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

加载完成的页面

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

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

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

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

UI灵感分析笔记#3（22.1.2）相关推荐

oracle10g cssd日志,【案例】Oracle CSSD进程HANG导致RAC节点重启原因分析笔记
[案例]Oracle CSSD进程HANG导致RAC节点重启原因分析笔记时间:2016-11-04 19:20 来源:Oracle研究中心作者:HTZ 点击: 次天萃荷净 Oracl ...
SharpDevelop源码分析笔记(一)
SharpDevelop自动命令启动UI部分(看SharpDevelop源码分析笔记随想) 参见:Fbt2008的大作 SharpDevelop源码分析笔记(一) 源文档 <http://ww ...
NJ4X源码阅读分析笔记系列（三）—— nj4x-ts深入分析
NJ4X源码阅读分析笔记系列(三)-- nj4x-ts深入分析一.系统的工作流程图(模块级) 其工作流程如下(以行情获取为例): 应用端向Application Server发起连接应用服务器调用 ...
OCL功率放大电路分析笔记
OCL功率放大电路分析笔记 OCL全称:Output Capacitorless,中文名称:无输出电容的功率放大电路. 功率放大带电路最重要的技术指标是最大输出功率Pom和效率n. 若输入信号Ui为正 ...
jquery UI 跟随学习笔记——拖拽（Draggable）
jquery UI 跟随学习笔记--拖拽(Draggable) 引言这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI 插件,以及jquery库学习 ...
Retrofit源码分析笔记（一）
如遇图片无法加载请点击此链接我们先从最简单的Retrofit使用方法看 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7bbuois-1665971394319)( ...
Nimda.A病毒技术分析笔记
Nimda.A病毒技术分析笔记 BY Delphiscn(cnBlaster#sohu.com)http://blog.csdn.net/delphiscn 病毒类型:蠕虫病毒文件大小:57344字 ...
2.View绘制分析笔记之onMeasure
今天主要学习记录一下Android View绘制三部曲的第一步,onMeasure,测量. 起源在Activity中,所有的View都是DecorView的子View,然后DecorView又是被V ...
用户行为分析笔记（一）：概述
今天有人问我会不会推荐算法,回到家里反复思考了下(其实就是一个会与不会的回答,为啥我还要反复思量下了?),我发现自己从事软件开发工作这么多年,大小项目无数,但是如果从做应用角度换句话说我做了哪些提高人 ...

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

1.

2.

3.

4.

5.

UI灵感分析笔记#3（22.1.2）相关推荐

最新文章

热门文章