您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

学习经验总结:特斯拉汽车UI界面的学习总结

原创文章 分类: 经验/观点 版权:
2798 12 9 2
2018-02-07
0.0
编辑推荐

1、规范化流程化的设计对工作进度的帮助

2、模块化的组件的重要意义

3、整个流程所需要的工具

夜间模式Image titleImage title

Image title

Image titleImage title

Image title

Image title

(我已经将所有源文件上传,仅供学习)

https://pan.baidu.com/s/1o9dNECq


这次练习中我学习到的内容有:


1、规范化流程化的设计对工作进度的帮助

2、模块化的组件的重要意义

3、整个流程所需要的工具


1、规范化流程化的设计对工作进度的帮助

规范化

  • 首先,规范化主要体现在icon的绘制,所有的icon都有一个48*48的底板,当我在导出资源的时候,不管是大图标还是小图标,都是控制在这个范围内的,从而保证了程序在写代码时候的统一性。
  •   其次,规范化还体现在所有的边距间距均采用整数,所有的按钮都是60的高宽度以整数取值,以方便前端的应用。
  •   最后,文字颜色的灰度是以不透明度来控制的(比如最常用到的未被选中状态是60%的不透明度),这样应用有一个好处就是方便在夜间模式和白天模式切换时候的文字色彩的控制修改,只需要将色彩控制在FFF或者000,不需要考虑灰度的色彩值。

流程化


  • 第一步:画icon。当我们拿到线框图时,就应该心里有数,这次的icon有哪些,这次的按钮形式有多少种等等,想说明的是,虽然我们可以边画界面变考虑icon形式,但是如果将画icon这一步作为一个步骤,单独拿粗来做,放在一个界面内,同一个时间思考,会有利于我们界面的统一性。当然也推荐最先完成这个步骤(不过依个人工作习惯而定啦)。
  • 第二步:画模块。通过对线框图的理解,总结出模块化的东西。
  •   第三部:画界面。工作时间到这里,当所有准备工作都做完的时候,不管是几个界面,我们都已经很清楚界面逻辑了,所有接下来的工作会是一个很快的过程。如果你的工作周期是15天,也需要界面并不会占用到你三分一的时间,很有可能只需要五分之一的时间。

2、模块化的组件的重要意义


这里多说一句吧!很多时候的工作步骤是这样的,线框图拿到,开始找符合风格的界面,然后就开始画界面,遇到icon,在找icon,遇到按钮,在想按钮多大,这种做法并没有错,只是缺少了整体化思维,缺少了从大局出发考虑问题的思路而已。


在这次练习中,原本我并不理解这些界面(主要原因是由于我对汽车的不了解,对于汽车那些点的按的转的按钮都是什么功能我是不明白的),也不清楚其中的规范尺寸,我是在icon的绘制,模块的绘制过程中理解的这个项目,并理解了这个界面为什么要这样做,所以我的前两个工作大概占用了我五分之四的时间,由于工作的缓慢,我一度认为我需要更长的时间完成这次练习,然而当我到最后一步画界面的时候,看起来三十多个界面,却在很短的时间内完成了,这完全得益于我在做模块的时候就已经考虑过哪些需要注意的问题了,所以后面的工作变得思路清晰。


3、整个流程所需要的工具
这里是这次项目的所有界面及模块练习

Image title


那么下面就说一下这次的特斯拉汽车UI界面的整个过程吧!


1、使用到的软件:AI / Eagle / Sketch / Principle
2、过程

  • AI :所有的icon是在AI中完成,然后导出SVG格式,全部存储到我的Eagle里面,
  • 在Sketch里面有两项工作,一项工作是重要模块先单独画出来,
  • 最后一个步骤才是开始画界面, 最后使用Principle串联所有界面,完成动效。这次界面学习到的内容: 工作方式,对于工作方式的改变可以使我的效率有一个质的飞跃。所以这次我一定要将这种方式详细的介绍一下。

工具介绍+在每个工具中完成的工作


AI:所有的icon都是在AI中完成的,(是的sketch也是可以画icon的,但是我的AI比sketch熟练一点,所以都在AI中完成的)。这里需要注意的一点就是:所有的icon都是在48*48px内的。Image titleEagle:这个软件并不是一个很大众的软件,它的功能和inboard一样,是图片的采集分类,值得一提的是这次我想说的不是它的采集功能,我想说的是它的存储文件的功能。Eagle支持svg/ai/ps等等很多格式的存放和浏览,这次我是将所有的icon资源导出svg,然后存放在Eagle里面方便sketch中使用。值得一提的是,为什么感觉在Eagle里面方便呢,它是可以自由放大缩小的,并且它的深底色能更加清楚的看清icon(因为这些icon大部分都是白色)。Image titlesketch:这个软件就不多说了,所有模块和界面都在sketch里面完成。模块需要在界面之前做,当有了所有模块,界面则很快就会完成。


principle:界面动态展示则是全部用这个软件串联完成。(这是一个动效软件,在之前的内容里推荐过一个学习地址,如果想学习可以在之前的内容中找到。)


以上就是这次工作的过程。


(通过这个项目,让我明白了模块对工作效率的影响,原本这大概30多个界面我是打算用一周的时间做完,然而由于我先做了模块我则缩短了一半的时间,并且很轻松,这大概全部得益与模块和sketch的symbol(类似只能对象的功能)。
那么什么是模块化呢?这些模块其实就是应用于不同界面的相同组件,我先将组件做出来,然后需要应用的时候直接拖过来用就可以。
其次这次项目让我知道通过透明度控制灰度。比如界面中的按钮,夜间模式和白天模式的界面会有所改变,如果控制灰度是很难控制的,这里就借鉴了MD的设计规范。通过控制透明度来控制灰度。
规范流程的重要性。规范的流程让所有的东西看起来都很有章法。所以这是这次学习别人的工作获得的最有用的经验,同样,在开始之前需要理清所有的思路。)




可乐imcola

https://dribbble.com/cola_whong

1414粉丝/66关注

2018年度UI中国作品集入围 TOP50老马识途首页达人砖家当仁不让lv.1
《魔童哪吒》插画总结《遇见的你》插画总结
0
jhin0329

说一下我看来的建议吧: 1.整体的间距可以再推敲一下:比如左侧,明明有很大的空间,但是icon和元素的间距都非常凌乱,而且界面里很多元素并没有对齐,间距没有统一,你只统一了icon,没统一间距 2.有看到你说统一icon大小,但是这里其实很多icon可以大一些,不用全部44,相对重要的图标可以另外增加一个大小。 3.有非常多的细节你没有注意到。

精彩!

扫描二维码
去手机端查看海报

可乐imcola

TA已经获得14枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN