提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
1、规范化流程化的设计对工作进度的帮助
2、模块化的组件的重要意义
3、整个流程所需要的工具
(我已经将所有源文件上传,仅供学习)
https://pan.baidu.com/s/1o9dNECq
这次练习中我学习到的内容有:
1、规范化流程化的设计对工作进度的帮助
2、模块化的组件的重要意义
3、整个流程所需要的工具
1、规范化流程化的设计对工作进度的帮助
规范化
流程化
2、模块化的组件的重要意义
这里多说一句吧!很多时候的工作步骤是这样的,线框图拿到,开始找符合风格的界面,然后就开始画界面,遇到icon,在找icon,遇到按钮,在想按钮多大,这种做法并没有错,只是缺少了整体化思维,缺少了从大局出发考虑问题的思路而已。
在这次练习中,原本我并不理解这些界面(主要原因是由于我对汽车的不了解,对于汽车那些点的按的转的按钮都是什么功能我是不明白的),也不清楚其中的规范尺寸,我是在icon的绘制,模块的绘制过程中理解的这个项目,并理解了这个界面为什么要这样做,所以我的前两个工作大概占用了我五分之四的时间,由于工作的缓慢,我一度认为我需要更长的时间完成这次练习,然而当我到最后一步画界面的时候,看起来三十多个界面,却在很短的时间内完成了,这完全得益于我在做模块的时候就已经考虑过哪些需要注意的问题了,所以后面的工作变得思路清晰。
3、整个流程所需要的工具
这里是这次项目的所有界面及模块练习
那么下面就说一下这次的特斯拉汽车UI界面的整个过程吧!
1、使用到的软件:AI / Eagle / Sketch / Principle
2、过程
工具介绍+在每个工具中完成的工作
AI:所有的icon都是在AI中完成的,(是的sketch也是可以画icon的,但是我的AI比sketch熟练一点,所以都在AI中完成的)。这里需要注意的一点就是:所有的icon都是在48*48px内的。Eagle:这个软件并不是一个很大众的软件,它的功能和inboard一样,是图片的采集分类,值得一提的是这次我想说的不是它的采集功能,我想说的是它的存储文件的功能。Eagle支持svg/ai/ps等等很多格式的存放和浏览,这次我是将所有的icon资源导出svg,然后存放在Eagle里面方便sketch中使用。值得一提的是,为什么感觉在Eagle里面方便呢,它是可以自由放大缩小的,并且它的深底色能更加清楚的看清icon(因为这些icon大部分都是白色)。sketch:这个软件就不多说了,所有模块和界面都在sketch里面完成。模块需要在界面之前做,当有了所有模块,界面则很快就会完成。
principle:界面动态展示则是全部用这个软件串联完成。(这是一个动效软件,在之前的内容里推荐过一个学习地址,如果想学习可以在之前的内容中找到。)
以上就是这次工作的过程。
(通过这个项目,让我明白了模块对工作效率的影响,原本这大概30多个界面我是打算用一周的时间做完,然而由于我先做了模块我则缩短了一半的时间,并且很轻松,这大概全部得益与模块和sketch的symbol(类似只能对象的功能)。
那么什么是模块化呢?这些模块其实就是应用于不同界面的相同组件,我先将组件做出来,然后需要应用的时候直接拖过来用就可以。
其次这次项目让我知道通过透明度控制灰度。比如界面中的按钮,夜间模式和白天模式的界面会有所改变,如果控制灰度是很难控制的,这里就借鉴了MD的设计规范。通过控制透明度来控制灰度。
规范流程的重要性。规范的流程让所有的东西看起来都很有章法。所以这是这次学习别人的工作获得的最有用的经验,同样,在开始之前需要理清所有的思路。)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册