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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
跨专业的我是如何从0开始学UI的
0.0°
2018-10-23 原创文章 经验/观点 举报 1320 4 7 1


犹记得当年一腔热情,从一个非设计专业的学生考研到了设计学专业,本以为是真正踏入了设计的门槛,但是那时候才发现,真正开始学设计的日子才刚开始。

12年的时候,开开心心地带着行李开始了读研的日子,那个时候心思很单纯,单纯的喜欢设计,连未来具体要做什么都不知道,入学之后学了一个产品设计的方向,不知不觉在公共课中到了研二,然后和学长学姐交流,也陆陆续续看着舍友开始出门实习,但是自己出来做什么都不知道,关键是本科没有系统学过设计的基础,连软件都没有一个会用的,懵懵懂懂也出门找实习。那个时候校园里还没有普遍提过UI,大家所知道的设计出去大部分还是做工业产品设计,平面海报设计,拿着一些课堂的很简单的作业和PS的一些练习出门找实习了(当时真的是PS都不怎么会用,就会写基础的填色,框框圆圆,连钢笔都不熟练的状态),凭着想要学习的心理当时得到了一个平面实习的机会,在一个设计师的带领下,教我用INDESIGN做一些报纸的排版,这份工作做了大概半年,做得很开心,但是总的出来之后发现自己其实什么也不会,也就是那时候研二过了一半了(我们只有两年半)开始听学长学姐说了UI了,大家也陆陆续续讨论毕业之后的从业到底走什么方向,这个时候突然觉得自己得开始准备了,也要学习一些东西了,不然毕业之后连做什么都不知道了,那个寒假回家之后我就开始了自己着手做设计的准备了。


阶段一:软件学习


那个时候听大家提UI已经提的很多了,但是没有一个人带,也没人系统给我们讲解什么是UI,包括在校连一些常见的UI网站大家那个时候都不知道。没办法我就自己在网站上搜索UI学习,当时我觉得最大的困难是除了INDESIGN,我连一个软件都不会,就是画个图标都画不出来的那种。我就开始在网站上找教程,刚开始很简单的那种,而且教程每步必须要非常详细,能让我直接对折教程一步一步画出来那种详细。每天下午背着电脑去图书馆,学习两到三个小时,最早就是画那种扁平折纸或者长投影的图标,边画一步边做好笔记,防止自己忘记了,那个时候一天能画一个最简单的就很不错了,照着教程画完一个之后再自己不看教程重新画一遍加深记忆,简单画好了再尝试难一些的,寒假画了一个多月,一个月后回到学校,PS钢笔工具,抠图,图层样式,蒙版什么的基本上都会用了,当时手机上的一套图标我觉得自己能够临摹一套下来了,然后能够靠拼图抠图做一套简单的海报(审美不敢直视的那种)。

附:图标学习教程http://www.uimaker.com/uimakerhtml/uistudy/

总的说这个时候最重要的就是坚持,软件是每个人的基础,但是学习软件最好不要抱着一大本书PS教程之类的,学着学着你就放弃了,最好的是找实战项目那种,实际做几个图,做几套图标下来,你的软件也就差不都操作熟练够用了,后面你可以再慢慢丰富积累。UI新手一般图标PS或者AI先学一种就行,软件都是相通的,界面SKETCH,也是跟着实际项目画一遍,基本都会用了。


阶段二:UI基础知识学习(软件加强)


带着一个月练习的图标以及拼拼凑凑的海报,开学之后我又去找实习了,这次目标很明确,就是找个UI实习或者助理方面的工作,可能是我的态度打动了设计师,虽然没啥作品,还收到了几个助理之类的实习岗位,斟酌再三,当时我去了一家知名度高的一家企业,虽然钱相对小公司少很多,离得也非常远,但是抱着学习的心态,我还是坚持下来了。

刚进去的时候就是大量的打杂工作,先切图,那时候还都是PS切图为主,图标先在PS里面摆好,放大成1.5倍的,一张张切出来,后来有需要补充图标的我就开始慢慢画一些线性的图标,比如通知,设置,刷新这样的图标,跟整体风格保持统一。

画了一段图标之后有一次设计师忙不过来了,就分了我一些很简单的界面让我协助一起做,我就比对的以前的页面,头部多大尺寸,字体多大,内容区域左右留多少,间距多少,分割线什么色值,多粗,自己一点点像素的比对,把那几个页面认认真真做出来了,做出来一批就发现,你对页面头部多高,底部多高,图标一般多大范围,间距,色彩都有一个大概的认识。

所以对于初期学UI的人,如果你对界面一无所知,我建议可以找一个知名但是比较常规的APP,比如微信,QQ,知乎,腾讯新闻等,只挑一款,认认真真像我上面那种临摹一遍,你就发现你对整个APP界面就有一个认识了,为什么挑这几款呢,首先,他们的界面样式比较简洁,多为色块线条装饰比较少,适合新手入手,其次他们有专业的用户体验团队,做的产品比较专业,而且用户量比较大风格能使用大部分用户,能让你初期对UI规范有很好的理解,不至于走偏了。

当时画完一些简单的页面之后带我的设计师就给我布置了一份任务,当时我们准备做一款运动社交类的软件,他让我找一下市面上比较常见的一些软件,然后挑选最好的三个产品,让我写了一份产品分析的报告,当时的我其实也是很模糊,并不知道怎么下手,请教了一下设计师大概给了我一个方向,可以从功能入手,也可以从UI设计入手,我便开始尝试起来。首先我把三款产品的功能结构全部认真看了一遍,并且自己对三款产品做了一个对比,比如先从整体结构分析,每款产品包含几个模块,首页是先放的分类入口还是直接就是主功能,列了一个如下的一个详细的列表(画这个图可以使用XMIND),当然初期建议自己在本子上列清楚了解就可以,不用刻意去学习软件,但是一定要细致,知道自己了解产品框架就行。然后把三个产品的功能截图或者文字说明或者画框架做一个对比,你就能够明白大概一款这样的软件包含了哪些功能,每个功能又包含了哪些小模块对产品就有了一个清晰的认识了。

分析完框架之后呢就开始分析UI设计了,这个时候我们可以侧重于功能展示的,UI规范的,我们详细对比三个产品,我们可以具体到每个页面,同样是运动页面,他们都是怎么展示的,画面占多大空间,图标怎么排版的,同样是个人信息页面,他们的哪些内容放在上面,哪些模块放在一起,做一个对比列表,然后自己也就能明白每个页面我们可以有哪些展示方式,不同的位置摆放大小处理突出哪些功能。最后等你整理完一套就对一个产品的功能和设计有一个清晰的认识。

做完产品功能的分析之后建议再做一个UI的分析,可以分析三个产品的风格,他们怎么配的色,用的什么风格的图标,字体大小和间距是多大给了你什么样的视觉效果,每个模块怎么分割,间距和色值又是多少,这样的分析其实就是一套UI规范的行程,能让你对风格的把控,做一款软件如何让自己对自己的一整套设计有规范意识。

附一个详细的规范下载,初学者可以按照此做一份详细的UI分析:https://www.uisdc.com/163-design-principle-and-guideline


阶段三:UI实战


有了上述的练习之后,我也算对UI有个初级的入门了,UI包括哪些东西也有个系统的认识了,UI要做哪些工作也清晰的了解了,但是现在遇到的最大的问题是马上要面临毕业了,但是我手里连一份像样的完整的UI作品都没有,又怎么能够找到一份UI设计师的工作呢。实习完这个工作之后买上又步入暑假了,我决定还是趁着两个月的暑假好好地准备好作品,以备秋招开始要毕业找工作。但是想来想去也不知道准备什么好,刚开始几天还是很浮躁的,想做款炫酷的产品,能一眼拿出去吸引别人的,发现自己连画张详细的UI稿都难,更别提各个功能那么多细节了,焦虑了几天之后也慢慢定下心来,不能总想一口吃个胖子,先选一个个人觉得还能够上手的稍微简单点的,比如我要做一款新闻的APP,然后自己先对他们做一个简单的梳理,自己确认好要做哪些内容,然后自己画一份自己能看懂的框架图,我记得当时自己AXURE操作还不是很熟练的时候,我就直接拿笔在本子上画,先写清楚自己要实现哪些功能,然后每页做什么功能都画出来,自己都梳理通了,再开始设计。比如我想做一款新闻软件,我就思考我想做哪些,我对娱乐比较感兴趣,我就对我的APP先定位,我主要以娱乐为主,主要功能一个是娱乐界的八卦,一个是搞笑类的视频,可以分为这两个模块,再做上搜索功能,搜索里要放上每天一些热搜,个人中心我目前只做搜藏,浏览历史等,谢谢大模块搞清楚。然后相应的每个页面我再拿笔把框架图画出来,当然你能用软件简单画也很好。

功能做好之后,我要开始定风格了,我不想市面上的呆板的蓝色,红色,可以选一个自己喜欢的风格,但是要把整个风格贯穿于你的整个APP中,做底部的TAB栏就找很多别的新闻的参考看看别人都是怎么做的,做新闻列表的时候就把新闻的软件浏览一遍,看看别人的图文怎么排列的,间距多大,文字多大,图片尺寸多大,电脑上做好效果,用手机浏览,PS可以用psplay,SKETCH作图可以用mirror,这个时候千万不要图快,没做一个模块的时候,你都要下载大量的APP对比别人的相似模块为什么这么做,你觉得哪种样式最清晰,使用起来最好用,这些都要好好斟酌出来。另外不要偷懒,图标都要自己画,每个图标保持线条粗细,圆角大小风格要统一,统一模块的图标保持视觉大小一致。当你把一套APP能完整做下来的时候,你就发现,UI对于你来说你已经懂了,不再像个门外汉,还得到处问人,我想转行学UI但没有经验应该怎么学,UI要做哪些东西,你已经能够清晰认识到,你要去做的工作岗位具体都是什么样的工作内容了。


阶段四:UI反复实践


带着为数不多的两个练习产品,已经平时练习的一些手机主题图标,临摹的一些插画复杂图标等就踏上了找工作的道路。那个时候已经为自己能够独立做一套APP而开心的,但是真正到工作中才发现,自己还是太年轻了,因为一拿到产品的框架图,水平就还处在按照框架图的板式填上色,调调间距的水平,每次需求方说能不能想一想新的样式都觉得对自己是很大的挑战。当时产品还需要一些banner配图,就觉得自己方向是UI,不应该做这些平面的东西,刚工作的心态还是非常不好的,还有些眼高手低。这样的时间持续了好长一段时间我才发现,自己的水平一直都没什么提升,而且做出来的图产品也很难认可,产品一拿出一些稍微复杂的比如个人中心做的配图这样样式的我都难以下手做出来。自己的水平没有认可,每次做的需求也都是偏打杂,做一些小的改版,小调整之类的工作,也让自己越做越不开心。

后来有想换工作的想法,但是真到找工作才发现,这样的水平想要找一份独立负责APP的项目,除非是一些初创形公司,所有涉及一个人做,就是还是类似初级助理的工作。经历些挫折之后自己的心态也开始变化,认识到自己差距真的是很大,但是那个时候还有一些迷茫,就是知道自己不足了,结果发现自己图标也不行,banner也不行,APP也不行,想去提升也不知道怎么提升,刚开始学的临摹,三天打鱼两天晒网过了一段时间之后发现,软件水平是进步了,但是实际工作还是困难。

漫无目的地摸索一段时间后开始决定,先从工作中做起,那个时候总觉得分配给我的工作都是的打杂的,做的对自己没用,后来慢慢才想明白,哪有工作那么好,能每次让你担任主导的设计工作,即使你后来成为一个高级设计师也是如此,连一些打杂的页面都做不好,又怎么能让你的上司放心让你开始做一些主要的页面。心态慢慢平和之后,我就有了目标,认真对待分配给的哪怕是一个弹框需求,我就先去花瓣上搜索弹框的样式,然后根据我们自己产品的特性,时间充裕的情况下精心做好,并拿去跟产品沟通调整细节,最后发现一个弹框都能做的很提现设计水平。或者过来的是个banner运营需求,我先大量搜集这样的图分析一下常见的风格,并且跟运营确认下我们平时什么样效果好,在不影响点击率的情况下,认真把图的视觉效果做好,初期感受最大的是,作图尽量不要抠图,时间充裕的最好都自己画图,一方面多画几次对自己配色,软件能力都有提升,另一方面画多了你自己就有自己的素材库,紧急情况下都可以对一些素材复用。而且当你心态变好了之后,哪怕改版就优化一个图标,一个简单的页面,一张缺省图补充,你都能觉得学到很多东西,因为你工作中接触的其实是大多数APP工作的一部分。发现图标不好了,空余时间再针对这些图标补一补,banner不好了,空余时间同样风格多画几张。

另外一个提升的方式就是和之前一样,去做一个APP,有一些积累之后,现在练习APP可以建议挑一些产品试着对它进行改版,另外要学着尝试不同的风格的制作,做的时候还是像之前一样,下载大量的竞品进行分析,每个功能进行比对,自己划清楚框架图对整个产品的功能进行一个梳理,图标插画都自己认真画,尝试多个不同的样式比较哪种效果更好,细节要精细到,比如搜索,搜索功能包含哪些步骤,搜索提示要怎么做,搜索框是收起还是一栏都是怎么考虑的,当你有耐心做出来一两个风格不同较大型的APP的时候,你就发现你有自信也有能力去承担一个独立的APP设计了。

更新:2018-10-23

收藏

4人已收藏

  • 6

    作品

  • 7

    粉丝

  • 1

    关注

  • APP切图命名规范-实战篇
  • 据说爱花的设计师,运气都不会太差
  • 节点加-智能家居APP
  • 图标插图练习整理
相关标签

    猜你喜欢

      2018-10-23 原创文章 经验/观点 举报 1320 4 7 1

      跨专业的我是如何从0开始学UI的

      0.0°

      你确定要举报跨专业的我是如何从0开始学UI的

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年10月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      4
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录