DAY 31

Material design studies

一、Basil

 厨房AP,主要展示material design 的 tab 切换,微动效,抽屉式导航设计,在一个页面展示,不跳转二级页面,流畅的动画平滑转换场景。并且适配手机端,平板,还有电脑端。

二、Crane

旅游APP,豆瓣,美团,华为UI都已经更新,原来是根据Crane app 设计的。


DAY 31_第1张图片
滑动tab ,内容产生联动变化,卡片缓移


DAY 31_第2张图片
向上滑动,88 available  flights 卡片底部会出现投影,可以区分,有层次


DAY 31_第3张图片
点击上一张航班信息,从下至上缓缓弹出卡片,左上角有关闭按钮,可见是在本页面完成,不需要进入二级页面


DAY 31_第4张图片
 在平板上和电脑端,点击卡片,卡片向下扩展,展示详细信息,喜欢右边filter筛选,直观易操作


DAY 31_第5张图片
点击右上角按钮,查看更多,卡片下移


DAY 31_第6张图片
步骤如上

一个界面,完成多步操作,微动效辅助,流畅活泼

三、Fortnightly

半月刊属于杂志APP,阅读类。主要为了突出文章内容,具有杂志排版特色。


DAY 31_第7张图片
向上滑动,顶部仅仅保留导航和logo


DAY 31_第8张图片
点击搜索,搜索页面放大,强大的搜索联想词汇功能


DAY 31_第9张图片
Grid system ,网页栅格化


DAY 31_第10张图片
何时使用阴影?这是值得被注意的


DAY 31_第11张图片
折叠式设计

四、Owl

热情充满惊喜

Owl is an educational app that uses Material Design components and Material Theming to create an energetic, motivational brand experience.Hub and spoke structure


DAY 31_第12张图片
Hub and spoke structure


DAY 31_第13张图片


DAY 31_第14张图片


DAY 31_第15张图片



DAY 31_第16张图片
DAY 31_第17张图片


DAY 31_第18张图片
卡片的宽度由内容标题来设定


DAY 31_第19张图片
平板或电脑端,卡片高度由内容而定


DAY 31_第20张图片
加载动效,cool


DAY 31_第21张图片
左右滑动查看更多分类课程,cool

五、Rally

金融理财类

Rally is designed to display a large amount of densely organized information in a manageable way. Users are invited to identify patterns in the data presented, by cross-referencing and investigating information.


DAY 31_第22张图片
深色界面,以数字表据为主


DAY 31_第23张图片
侧边导航


DAY 31_第24张图片
顶部导航


DAY 31_第25张图片
平板


DAY 31_第26张图片
电脑


DAY 31_第27张图片
电脑端


DAY 31_第28张图片
黑色背景下,彩色有独特的魅力


DAY 31_第29张图片
顶部导航,选中为文字显示,未选中用图标显示

六、Reply

Reply is an app that helps individuals and groups communicate. It’s designed for clarity, legibility, intuition, and ease-of-use.

Reply’s brand projects friendliness, competence, and a hint of quirkiness


DAY 31_第30张图片


DAY 31_第31张图片



DAY 31_第32张图片


DAY 31_第33张图片
   New interaction

七、Shrine 

Shrine uses a minimalist aesthetic, creating an experience where content and actions take the forefront of the user experience. 


DAY 31_第34张图片
minimalist aesthetic


DAY 31_第35张图片
点击购物车
DAY 31_第36张图片
查看购物车详情


DAY 31_第37张图片
点击更多


DAY 31_第38张图片
上拉导航

你可能感兴趣的:(DAY 31)