首页

Loading设计思路分享

博博


UI妹儿 2018-05-04 10:44:21

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Loading设计思路分享

Loading作为一个常见,并且带有排他性的动画,已经被各路大神表现的淋漓尽至。那么如何在众优秀作品下,做出一个性化的Loading动画?

Loading设计思路分享

Loading种类:

1.状态类(进度条):通常数据量很大,客户端已知加载量,并能根据当前加载速度计算出何时加载完成。

状态型的Loading以进度条类为基准,可以为用户提供预期时间,多伴随百分比进度出现。进度条的形式以线性的形式出现,已知总量,降低用户对期待时间的感受。无聊的等待会让人厌烦,作为一个UI设计师需要关注每一个细节,尤其是用户的情绪并将引导到加载后的页面。

By Piotr Adam Kwiatkowski

2.无状态类(菊花):通常数据量比较小,客户端无法预知加载量。

Loading设计思路分享

无状态类的Loaing以菊花为代表,通常都是一组可以无限循环播放的动画。

无状态类的Loaing如有需要可以做的特别一些:https://dribbble.com/search?q=loading

我们的App需要一个无状态的Loading。

我始终相信设计的直觉很重要,抓住直觉的爆发点,是一个成熟设计师必备的素质。于是先按照最初的想法快速做了一版。

Loading设计思路分享

相信很多人对这个Loaing眼熟,当然,这肯定不是我们要的效果,不过在制作这Loading的时候不断的推翻自己的想法,时而清醒时而模糊,感觉突然找到了方向但瞬间也可能烟消云散。这种不断反复的过程中还是收获了很多。

Loading设计思路分享

既然是无限,循环,表现上就不能过于缺乏趣味,这个度很难把握。形式感上面设计要简单,又要通过最直接的方法创造空间感,偶然间发现马戏团的抛球表演。突然间有了灵感,于是就沿着这个思路开始动手设计:

我尝试去直接模仿抛弃的运动,但是效果并不是很好,但是从Demo中可以看出,值得很入研究。

为此我们搜索了一下现实中的扔球效果:

Loading设计思路分享

经过分析我们得出了第一条小球的运动路经是一个无限的符号。

工作路经确定后,导入C4D中进行单球运动轨迹测

由于实例中,小球会受到重力以及加速度的影响,并非匀速运动,但在实际Loading制作过程中,为了视觉效果,我们希望小球做匀速运动

发现问题:小球在中心焦点位置出现明显卡顿

起初我们认为是速度曲线没有调整好所导致的,但我们尝试几版后发现并不是这样,最后我们发现导致这个问题的原因是路经节点问题。

Loading设计思路分享

调整节点

通过调整节点后,不难发现,中心焦点处的卡顿明显不见了

为了加强透视效果,我们将球的大小和颜色进行了关键帧处理,这已处理增加的景深对视觉的冲击,使得空间感更强了。

看起来怪怪的。。。。。

为了使整个运动规律更加精准,我们发现运动的起点距离是关键,不懈的追求完美的情况下,总是会有顿悟的时刻,幸运的是找到了问题的所在

三个球匀速运动的情况下,应该保证每相邻两个球之间路经上的距离是相同的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计流程与产品分析

蓝蓝设计的小编

为什么近期市场上会出现大片的方法论呢?究其原因:是一种坏的学术风气或普通群众的跟风心里导致的。


互联网兴起初期,没有相应的专业或产品设计的学派,大部分设计师的出发点基本围绕「解决问题」的角度来做产品设计。当时唯一的理论点就是现在所谓的「竞品分析」。

谷歌对话式交互规范指南系列:对话式界面的概念和机制

资深UI设计者

语音交互是一个全新的体验设计领域,目前各家机构、公司、设计组织还处于摸索设计范式的阶段,Google提供了一份非常成熟、系统的交互规范文档,其中包含了核心概念的诠释以及诸多可以指导设计的实践原则。最近正在做的项目中涉及到语音交互的部分,所以顺手将这份文档翻译出来,给需要的设计师参考。

我的译文尽量的贴合文档中原有的表意,同时基于我个人对语音交互的理解对表达文字进行润色。其中有个别概念名词比较抽象,所以我也旁边附上了英文单词,以便大家理解。

我们正在进入一个有光明前景的全新计算领域,机器学习和人工智能激发着对话式界面和自然语言的进步,同时使对话式交互成为一种新的交互模式。

史上最详细 iPad 插画入门教程

用心设计

iPad 在很长一段时间内对于笔者来说,都是看视频玩游戏的工具。但由于手机更易携带且功能接近,iPad
就逐渐被我忽略在了角落里安静地吃灰。直到 iPad Pro 发布,我突然意识到了 iPad 是可以画插画的,即使是我的旧 iPad
也可以老树逢春。于是我怀揣着「旧物利用」的环保理念开始了 iPad 插画的研究之路。下面我把总结的入门经验分享给大家。(教程适用于所有版本的
iPad 哦)。篇幅可能有点长,be patient, 好伐?

史上最详细 iPad 插画入门教程

设计中的中宫指什么?不懂这个谈字体结构和造型都白搭

用心设计

字体设计中,新手设计师才说字体结构松散或紧凑,设计老司机只谈中宫。



你肯定也有这样的感受,因为谈论字体结构松散或紧凑只是对字体造型的直观描述,并无更多内涵或实际意义上的指导。



设计中的中宫指什么?不懂这个谈字体结构和造型都白搭

字体设计的细节&形式感

用心设计



明明想法思路都对了,为什么最后呈现出的效果却...略显遗憾呢?字习时间的活动到七十多期了,其中发现很多作品想法思路是正确的,有些还很有意思,但整体视觉效果确一般,那为什么所想和所做会有如此差距?

所以有了本期要和大家聊的主题:字体设计的细节和形式感。本篇将会通过一些实例带大家认识字体细节和形式感,所用大部分实例选自我课堂中的现场修改,时间短暂难免有瑕疵,望理解。

字体设计的细节&形式感

设计的沟通:每一步都算数

用心设计

写在前面:

设计是一门沟通的艺术,跟信息的沟通,跟设计的沟通,跟人的沟通,都是在沟通中获取信息,达到目的。

下面我分享几个自身工作的经验,希望对大家有所帮助。


设计的沟通:每一步都算数

我的排版套路——“方块理论”

用心设计

前言:一直以来,我们都认为“点线面”是画面构成最基础的组成部分,而从广义的角度来说并不完全是这样。传统的说法中,画面最小面积是“点”,若干个“点”组成了“线”,若干条“线”组成了“面”,但真的是这样吗?假设我们把点放大,它其实也是一个面,而同样的,我们把线放大,它同样其实也是一个面,其实“点线面”在述说的是一个方块(区域),而在一个画面中,方块与方块之间是相互作用的,而使各个方块达致平衡的理论,我称之为“方块理论”。

纯干货:我的排版套路——“方块理论”(初探)

UI设计如何用色

用心设计

颜色可以表达一切,最好的用色技巧是节制。如果你最大限度的遵从三原色,那么结果一定不会差。色彩的运用一定要在平衡上多下功夫,运用的颜色越多,越难达到平衡。


颜色在设计中的作用相当于锦上添花。—— Pierre Bonnard

UI设计如何用色

如何练习——退两小步,进一大步

用心设计

说了那么多方法论,但还是有很多同学不知道该怎么练习,怎么巩固基础,“多练多想“谁都会说,但关键是如何练?如何想?


今天菜心就来一步一步的告诉大家如何练习,需要注意什么,大纲如下:


1.细分后找到专项突破的点

2.退第一步——“放弃”原创

3.退第二步——跟着别人临摹

4.进一大步——总结规律

如何练习——退两小步,进一大步


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档