恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
学习经验总结:特斯拉汽车UI界面的学习总结
0.0°
2018-02-26 原创文章 经验/观点 举报 6400 18 14 2

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的设计规范。通过控制透明度来控制灰度。
规范流程的重要性。规范的流程让所有的东西看起来都很有章法。所以这是这次学习别人的工作获得的最有用的经验,同样,在开始之前需要理清所有的思路。)




更新:2018-02-26

下载
收藏

18人已收藏

阔落imcola

小红书:imcola007 感谢关注!

  • 54

    作品

  • 2464

    粉丝

  • 78

    关注

  • 《小小世界》3d插画
  • 《环保潮计划》项目整理
  • 《理想型能源探讨与研究》
  • 《环保潮计划》运营项目总结
相关标签
设计经验分享ui

    猜你喜欢

      2018-02-26 原创文章 经验/观点 举报 6400 18 14 2

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

      0.0°

      你确定要举报学习经验总结:特斯拉汽车UI界面的学习总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年02月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      14
      18
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录