
UI设计中的一些思考
针对这个问题,自荐蜗牛学苑在 B 站最新免费开放出来的全套UI设计学习视频给大家。含配套源码、工具、软件、笔记、案例等。
整套学习内容是蜗牛学苑&阿多比设计线下就业班上课的随堂录屏,并非专门搞得宣传视频 (我这句话要表达的意思,你品,你细品),所以更加的朴实无华但实用,放在以前,是花钱都买不到的。 自2021年11月3日上传对外,26.7W的播放次数说明一切,吊打市面上90%以上的付费网课,自学能力比较强的同学们好好珍惜吧。
全套课程的播放链接合集 (注:为保障学习效果,请按照对应顺序依次进行。)
配套的源码、工具、软件、笔记、案例等资料获取请戳
说明 :作为蜗牛学苑认证官方账号,我在此郑重承诺,本次分享没什么二次收费的套路在里面,说全免费就全免费。只求大家要是学了我们的课程有了收获后,念下我们的好,要是再帮着我们跟身边的人宣传宣传最好不过了。
在信息极不对称的情况下,大量暴利UI培训班正在野蛮生长。如果你单纯得像瓶纯净水,误入了「莆田系式」的UI培训机构,费用收你2万块,那是再正常不过的事了。而作为学习者的我们,始终清楚:自己想要的到底是什么? 希望以下回答,能让你找准UI设计的自学方向。
UI设计,也叫用户界面设计,是指对软件人机交互、操作逻辑、界面美观的整体设计。我们日常生活中所用到的:手机、电脑、电视、车载系统、iPad、ATM机、工业中控系统...... 只要是带有电子屏幕,或操控面板/按钮的设备,都有需要UI设计 。UI/用户界面,就是我们:获取信息、调用设备资源、控制设备运作的一个可视化入口界面。
与此同时,我们要明确的是: UI设计 的职能主要分为三个方向: ①是交互设计 ,设计软件的操作流程与逻辑,是用户体验的基础。 ②是图形视觉设计 ,设计软件产品的外形,是软件美观的基础。③ 是用户测试与研究 ,测验交互设计的合理性,以及图形设计的美观性,小公司一般没有这个职位,或由其它岗位代劳。
而作为UI设计师的我们,要明确自己的核心职能是以视觉设计为主,不要跑偏到交互设计、或前端代码重构去了。先把 视觉表现层面 的知识搞扎实了,做到术业有专攻,再去拓展其它技能也不迟。
UI设计培训或课程,主要是帮你梳理 「UI设计行业的知识骨架体系」 ,想要掌握得牢靠,还得靠你后续的自学,以及大量练习,来给整个骨架注入丰富的血肉。所以,上培训班与自学是相辅相成的。而且上了培训班,并不意味着以后就可一招鲜吃遍天,这在UI设计行业里,是绝不可能的。
然而,除了培训班能帮你搭建这个 骨架体系 ,网易云课堂的 《UI设计师微专业》 课程也能做到的,费用在2000左右,讲师来自网易用户体验设计中心的专家设计师;当然你也可以通过这个 《UI设计系统教程》 来学习,费用在300多块,由前腾讯设计师、MICU设计创始人王铎授课; 其内容本质都是差不多的。
其实自学UI设计,可分为3个阶段来进行,明确不同阶段的学习重点,找到相应的学习教材及资源,循序渐进地学习,即可步入UI设计行业的正轨。
下文将从如何自学UI设计的 初期、中期、后期 三个阶段来简要陈述,并 附带大量资源链接 ,这是我们系统自学UI设计的绝佳资源,望大家妥善保管。
学习初期 ,跟着教程 大量做练习 就是王道,掌握了惯用的软件操作技法后,大量临摹你喜欢的UI作品,总会有意想不到的惊喜。什么,还不会PS?那你得先学会这款软件再说( 下载PS 、 PS入门教程 )。
此阶段,你还需要一些UI网络课程作为学习教材,参考 Micu设计 录制的 《UI设计系统教程》 就足够。,我可以很负责任的告诉你,这个UI课程的内容安排,非常注重实例教学,学习费用没有虚高,是名副其实的「系统学习UI设计的」最佳教程。
到了中期, 其重点则在于 设计眼界及审美的提升。 参考 Google的Material Design 、 微软的Fluent Design 、 苹果的IOS设计语言 ,从中可学到很多UI设计、人机交互的经验理论。多逛一些高质量的设计交流社区,则有助于你的审美提高。比如国内的: 站酷 、 UI中国 、 花瓣 ,国外的: Behance 、 Dribble 、 Pinterest 。
学习UI设计的中后期 ,重点则在于 综合解决问题的能力 提升,能像产品经理一样思考问题,又能以UI设计师的专业眼光做视觉,思维上的提升将会为你创作更好的视觉设计做背书。当然,你完全可以多多汲取其它设计公司的设计理念,比如 Frog Design 、 EICO 等互联网数字设计公司,它们创作出了互联网界大批耳熟能详的软硬件产品,比如:魅族Flyme4视觉系统、 膜拜单车APP 、搜狗输入法、 亚马逊中国APP 等。
UI设计师的日常,除了从上述设计公司汲取理论经验外,国内的很多优秀互联网公司的UEDC团队,都会时不时的在行业发声,奉献出了诸多设计经验、以及学习素材,这是我们UI设计师取之不竭的的灵感源泉。比如: 网易UEDC 、 腾讯CDC 、 腾讯MXD 、 阿里UED 、 京东设计中心 ...
掌握 PS软件技法 →(认识UI行业了解工作内容→练习图标设计→练习品牌设计→练习符合IOS、Android规范的UI设计→练习APP中各种类型页面的设计→练习界面切图及标注)→恭喜你闯关成功!
括号里的内容,就是新手 「必须通过实践练习」 才能加以掌握的UI设计专业核心技能,学习 《UI设计系统教程》 便能从头到尾的做完上述所有功课。当你能在PS软件中将每一个图标、每一个界面,都完整的绘制出来时,你便会感受到UI设计的乐趣。
走完这个流程,意味着师傅已经领你入门,你也达到了初级UI设计师的水准,但是通往高级设计师的路上,修行还得靠个人,继续努力学习是必不可少的。请仔细参阅上一章节罗列出来的学习资源, 做好网址收藏 ,日后反复研读你将受益无穷。
—
望以上内容对大家有所帮助。
最近我在芝士回答,我看到其他朋友的回答说: 现在,还敢还报UI设计培训班的,那是真勇士 !虽然是个段子,但也从侧面反映了当今UI设计培训鱼龙混杂的现象。之前 @酷coo豆 撰写过一篇文章,里面就详细谈到了一些UI培训行业中存在的怪相,有兴趣的朋友可点击下面的卡片阅读。
当然,除了参加UI设计培训外,你的确可以通过自学,来掌握UI设计职业技能的全部要领。请继续往下看,我将给你想要的答案。
本回答,将为学习UI设计的新手,全面解答UI设计的相关问题。包括:什么是UI设计,如何自学?UI设计师的工作内容有哪些,做UI设计用什么软件,UI设计培训哪里好,学费要多少......等系列问题,并提供相应的UI设计自学教程推荐,将引导新手高效率的掌握UI设计这门职业技能。
UI=User Interface,即:用户界面。UI设计,也叫用户界面设计,是指对软件人机交互、操作逻辑、界面美观的整体设计。我们日常生活中所用到的:手机、电脑、电视、车载系统、iPad、ATM机、工业中控系统......只要是带有电子屏幕的显示设备,都有需要UI设计。UI/用户界面,就是我们:获取信息、调用设备资源、控制设备运作的一个可视化入口界面。
①图形设计, 对软件产品的外形进行“视觉设计”。由图形设计师完成,即:Graphic UI Designer,简称:GUI设计师。
②交互设计, 设计软件的操作流程、树状结构、操作规范等。通常由 交互设计 师完成,即:interaction Designer,简称:IXD。
③用户测试/研究, 测验交互设计的合理性,以及图形设计的美观性。主要通过以目标用户问卷形式衡量UI设计的合理性,以及Bug反馈通道完善产品设计。比如Flyme、MIUI、IOS系统重大更新后,都会有相应的反馈通道。
简要来说,一个互联网产品(或App)的开发流程可分为四个阶段:①调研与立项→②设计与开发→③测试与发布→③发布与推广,而 UI设计则处在第②个阶段 。
①调研与立项, 确立产品需求文档(PRD=Product Requirement Document),为UI交互设计做准备。通常由产品经理(PM=Product Manager)主导完成。
②设计与开发, 依据产品需求文档(PRD)→完成UI交互原型设计→❤ 完成UI的图形视觉设计
❤→研发工程师技术实现(前端工程师实现UI图形界面的重构→后端工程师实现业务逻辑的数据处理)
③测试与发布, 团队全体开发人员协作,解决交互、视觉、技术上的bug,由产品经理把控质量、协调时间,确保产品准时上线。
④发布与推广, 多渠道、多方式、多媒介、的投放广告,让项目产品触及目标客户。
最后的环节就是,持续的内容运营输出,提升用户活跃度、拓展目标人群。接受用户反馈,持续优化产品体验,迭代更新。
我们通常所说的UI设计师,大多是指 GUI图形设计师 ,主要工作内容就包括:图形设计、图标制作、APP品牌制作、界面设计、切图标注、推广运营的活动页面、banner制作等。
在互联网产品开发的实际工作中,上游和你对接的是产品经理(或者 交互设计师 );下游和你对接的 前端工程师 。所以,你通常是根据产品经理出具的 交互稿 ,做UI界面的 图形视觉设计 。这就要求你能看懂交互稿, 懂一点交互知识 是最好的,能为优化视觉设计做背书。
在做完UI界面的 视觉稿 后,UI设计师将其 标注 好,再交付给下游的前端工程师,用作 界面重构。 必要的时候还可能会要用一些UI动效,去阐明设计师的设计意图,所以懂一点 UI动效设计 也是一个加分项。
作为UI设计师,要与上下游做好沟通 ,不然中途改需求,将功亏一篑,伤害一串人引发抱怨不和谐。面对交互稿中的不足,或不同看法,要与产品经理及时沟通想法,以及敲定最终交互稿,避免大幅度修改。
设计师的创造性想法,或增强用户体验的交互动画效果,要及时与前端开发沟通能否实现,不要一个人玩得high,做些看似炫酷,却费力不讨好的动画,或则团队目前达不到的创新设计。
设计一张封面图,需求是视觉上符合审美,重点是突出训练营,让用户看到封面图,即能理解训练营的价值和作用,更愿意点击。大家对比一下优化前后的方案,哪里发生了变化?
设计方案V2.0相对V1.0版本,增加了一个“小旗子”的视觉元素,这个“小旗子”可不是随便加上的,因为这个“小旗子”的存在,在第二张图里,我们的阅读顺序就非常连贯。
一个UI设计初学者,以产品设计训练营为起点开始入门,循序渐进地掌握了软件能力、造型能力、色彩能力、界面排版能力之后,再经过名企项目实战积累经验,最终产出作品集。
经历过这样完整的过程后,才有足够的专业实力和信心,证明自己掌握了UI设计的核心竞争力。
这个“小旗子”视觉元素的增加,其实是从视觉上突出了训练营对于UI设计初学者可以起到入门的作用,也让用户理解到从入门到掌握核心竞争力需要经历的完整过程,用设计引导用户的视觉阅读顺序,从而增加对封面图的点击。
在尼尔森可用性标准中,有一个易学性原则。遵循这个原则,在保持美观性基础上,更重要的是能够准确、快速、有效地传达信息,让用户更容易学会使用。
- 微信“摇一摇”的图标,就能够让用户快速学会如何使用这个功能。
- 搜索界面、语音图标,能够引导用户快速使用语音功能。
- 微信会话界面输入控件旁的笑脸,能够让用户快速学会发表情。就算是爷爷奶奶看见这个笑脸,也更容易理解这里可以发表情给你吧。
设计师如何能让用户快速、有效、容易地使用产品?那就需要设计师保持在产品中的设计元素的统一性。
建立统一的标准
这里提到的统一指的是在同一套标准下,设计上面的统一,即同样的功能保持一致。设计师需要建立和维护视觉设计规范,来保持设计的统一性。大厂名企的设计团队都有自己的设计规范,比如:Ant Design。
我平时不管是带新人还是教别人,都会通过大厂的设计规范,让大家学会如何建立和维护视觉设计规范,便于保持设计元素的统一性。
相同功能保持一致
针对相同的功能,在视觉呈现上保持一致,达到统一的效果。
统一是降低学习成本的关键
统一的界面设计,可以降低用户的学习成本,能够提高产品使用效率。
好的设计在视觉上必须是美的体现,这里有一个关键点:对于目标用户来说,设计要好看。
这里的的关键点就是 “目标用户”认为的好看 。设计并不是设计师主观上的好看,而是需要深入了解和考虑目标用户的审美喜好,做出他们觉得好看的设计。
比如:你作为设计师,要为3-6岁的儿童设计一个界面,那么你就需要深入了解这个年龄段的孩子认为什么样的美的。或许作为成年人的我们认为“性冷淡”风更显高级,但是对于孩子来说,“红配绿”或许是他们最爱的。
了解了这些,具备了基本的认知之后,我们再来看一个合格的 UI 设计师需要哪些对应的能力。
UI设计入门需要掌握 5 项能力:
比如你要画一个星星图标,不仅需要画出一个“星星”的形态,还要符合造型审美。
你画的这个星星不仅有“星星”的造型,还要有质感,比如毛茸茸的质感、大理石的质感。
你怎么为“星星”进行色彩配色,比如说用渐变邻近色,还是选择对比色配接起来配色。
你把这个“星星”做好之后,放在界面里面,需要注意哪些,比如界面最小可点击范围是48px * 48px,那么就要注意这个“星星”图标尺寸不要小于这个尺寸。
当图标这种小元素做完之后,放在整个界面里,要注意优先级排序,以及界面与界面之间的逻辑关系。
这 5 个能力之间什么关系呢?这些能力又应该从哪里入手掌握呢?
我们分别来看一下:
终端界面能力和终端规范能力属于 设计专项能力 ,主要表现为做界面设计。
图形表现能力、图形造型能力、色彩能力属于 设计底层能力 ,是做各种设计的基础,不仅可以做界面设计,还能做插画设计、运营设计、品牌设计。
界面设计
比如常见的 APP 或网页的界面设计。
插画设计
比如在做APP开屏广告时,就可以用丰富造型、大胆配色的插画风格,吸人眼球,提升广告页面的观看时间。
运营设计
比如淘宝、京东等电商首页Banner,或者得到APP的课程详情页。
品牌设计
设计品牌的LOGO、VI视觉等
入门UI设计师,这 5 项能力通过短时间学习(比如4个月),需要掌握到什么程度?
做产品、设计需要考虑优先级,其实掌握技能也需要分清优先级,先抓重点,各个击破。
在入门学习UI设计的时候,要分清熟练掌握和基本掌握的技能,在 有限的时间里重点突破 :
这 2 项能力可以通过短时间学习,快速掌握和上手。这两项能力的掌握也有大量的参考资料和前人经验值得学习参考。
因为这 3 项能力很难在短时间内速成,而是需要长时间的刻意练习和积累。
如果你想自学UI设计,也需要给自己设计适合的难度梯度学习路径,帮助自己在有效时间内入门UI设计。
学习任何技能,一口吃不了胖子,都需要循序渐进,先打基础再提升。UI设计的学习也是这样。我们以图标造型能力为例,看一下怎样由浅入深地掌握 5 项能力?
如果你想自学UI,也适合你根据这个学习曲线,规划自己的学习阶段
所以,掌握一个技能或知识点,需要经过以下这 5 个阶段:
1、了解概念
扁平和拟物是两个大的图标分类。当你了解了基础的图标概念,再通过临摹学习加深对基础概念的理解。
2、临摹学习
知群教研组老师们之所以选择了通过Android图标的讲解,来让同学们临摹练习,是因为Android图标的设计过程是开放的,有丰富的学习资料,便于同学们参考借鉴。
3、举一反三
在同学们掌握了Android图标的临摹之后,老师会让他们通过练习扁平图标,来达到举一反三的效果。因为扁平图标相对复杂,因为涉及到图形和组合、点线面的组合,这对同学们来说,难度有升级,但是同学们又能在挑战中获得成就感。
4、应用实践
知群的老师会教给同学们图形组合和创意的方法,帮助同学们最终能做出属于自己的一套图标。这样完整的图标,也可以放在作品集中,成为面试中凸显自己设计细节感的亮点。
5、最终掌握该能力
在经历了了解概念、临摹学习、举一反三、应用实践的完整流程后,才算是真的掌握了图标造型能力。
怎么算是真正掌握一项能力呢?就是你不仅会设计一套适合品牌调性的图标,还能举一反三,在产品接触用户全流程的各个触点,都用带有品牌意义的图形造型,将产品和品牌的价值传递给用户,做到真正的应用。
UI 设计水平的提升要多看、多用、多想、多做。多看优秀同行的作品,了解时下流行的风格,提升自己审美水平;多用设计优良的小众产品,体验产品流程、设计、动效等内容,体会设计师背后的思考逻辑;多想这些产品为什么这么做,还有哪些优化空间;多动手临摹,避免眼高手低。
下面推荐一些平台:
1.最美应用(公众号和 App )
最美应用是老牌的应用推荐平台,大家可以关注“最美应用”推荐的产品和专题,这些优秀的产品往往在功能、设计、交互方面有着独到的地方,在这背后设计师和产品经理有着什么样的思考?为什么做成这样?能否借鉴?这些问题都值得大家深入思考。
2.设计师常用网站,多去膜拜大神,多动手临摹他们的作品
包括 Dribbble、Behance、Pinterest、知群设计圈等等,这些优秀设计师作品展示平台间接向我们传递着设计潮流、设计趋势、设计方法,尤其是知群设计圈,翻译了很多国外的专业文章,值得一读。
系统学习 UI 需要很大的投入,不光是时间还是金钱,都是不小的成本,所以题主在做出选择之前可以先参加
@马力在知群
老师举办的 职场训练营 和 产品设计训练营 ,这两个训练营专门帮助零基础想进入互联网行业的同学入门,里边有很多内容是他原本为清华、北邮、阿里、华为、创新工场等多家知名高校和企业讲的课程。
大家可以 免费报名参加:
1.职场训练营。 这个训练营的内容主要包括 个人定位、找实习、找工作和职场提升 ,另外还会教你 结构化思维、数据思维、沟通和协作能力、个人项目管理、时间管理 等职场能力体系的搭建。
2.产品设计训练营 。如果你想转行成为产品经理、UX 交互设计师、UI(全链路设计师),这个训练营专门为 零基础入门、跨专业转行、野路子提升 的同学开设,可以通过这个训练营全面了解产品思维 、大厂用人要求、学习路径。这个训练营已经举办过 60 多期,帮助几万人了解互联网行业和找到职业方向。认真学习可以获得包含上百个知识点的高清能力地图电子版,还有机会拿到实体版。
报名地址(在报名页面中可以选择同时参加职场训练营和产品设计训练营):
记得认真填写申请表, 领课入口在表单最后 。
十岁时,我说我要考清华,
后来与学习缘薄,勉勉强强上了大学;
十五岁时候我说我要当医生,
后来生物考了十七分,就放弃了这个想法;
二十岁时,我说我要与众不同,
后来发现我只是长的与众不同,却还带有一些必要的相似性……
那些突如其来的梦想都变成了说说而已,所以一个都没有实现。
二十五岁时,我说我要做UI设计师,虽然早已过了爱做梦的年纪,但是不妨碍我要把梦想做成现实。其实我一直喜欢UI设计,之前也接触过,但就是不够专业,顶多算个业余爱好,我想既然是爱好,那就把它做到极致,没准将来还能变现,多完美。所以准备购买网课,好好提升一下自己,这一次绝不再是说说而已。
看到网易云课堂有UI设计师全链路培养计划,就仔细去了解一下,有一个设计交流群,可以免费进入,进去后发现有好多想要学习设计的小伙伴,说不定都是以后的同学,可以交个朋友一起学习一起交流一起进步,学习过程中一点都不会枯燥。
进群之后,就可以上网易全链路UI设计师系列免费直播课,整个一大牛团队啊,老师们各个都身怀绝技,敲厉害!
比如这位?
比如这位?
再比如这位?
说真的,听老师讲一节直播课的感觉就是赚到了!这都是UI设计行业的精英啊,设计大牛的设计理念和方法论这可真不是随随便便就能讲出来,或者自学就能得出的,一定得是有多年的经验总结,还有个人独特的想法技巧等才能拥有的,一想到会和他们学习,就忍不住开心,那进步一定是飞速的啊!
进群之后助教还会发网易内部设计资料包,里面有设计规范、技能图谱、推荐书单等,有老师的理论讲授,经验传授,有内部资料的辅助,还有设计助教在线免费答疑,作业点评,这种陪伴式的教学想学不会都难,而且学成之后还有微专业证书,可以做企业内推,说不定就真的把爱好做成职业了呢,两全其美啊!
我就想趁着年轻还有足够的干劲,要为自己准备更多的可能性,能为自己的梦想服务自然是最好,就算没有那个运气也多解锁了一门技能,毕竟技多不压身,能真正学到的就是属于自己的,总是会用到的。网易UI设计师全链路培养计划给我的感觉就是,通往成功的路都给你铺好了,你是走还是不走?当然要走,我不仅走还得一路小跑的追赶呢,就喜欢那种一步一步离梦想的距离又近了好大一步的感觉,管它有没有那个运气,梦想还是要有的,UI设计师,我来了!
如何自学UI设计呢?这里分成三点:
(1)UI的软件学习
软件是基础的东西,UI设计要学的东西比较多,要想做好出好的ui设计就得先熟练掌握ui设计的基础软件,软件方面有:PS、 AI、ID、Firework 、Dreamweaver、 HTML5等。
对于刚入门的小白来说还是先熟练掌握ps技术,想要熟练的掌握UI设计还是先从熟练掌握软件开始。
(2)善于思考
当基础的软件你都懂得差不多的时候,接下来就需要你在学习的过程中思考,学习,探索。这需要长时间的积累。基础入门以后重复的工作会锻炼你的技能,但更多的是对于审美,学习,思考的探索。
比如,现在好多效果你都会了,页面也会了,就要深入思考用户的可用性,用户数据反馈,艺术效果的结合与分拆等这些。
(3)勤记录
学习并不是单一的,大部分人在学习的过程中很容易就会忘记自己所学的东西,建议的话,随身带一个小的笔记本,方便记录比如留心观察优秀的作品并把它记录下来。
UI设计师们每天都在看各种设计作品,真到自己做的时候,一下子全都忘记了,脑子短路了。之前看到那么多好的设计作品也都白看了,人家的还是人家的,跟自己一点关系也没有。所以,做会了什么或是想要学点什么,都记录下来。
其实自学还有一点很重要,自学UI设计者,不知道怎么学,也不知道学到了什么程度,只是盲目地去看教程和视频,学习的知识都是碎片化的,而且学习过程中遇到困难,没有人监督和指导,很难坚持。
所以学习UI设计如果你选择的是自学,坚持是很重要的,许多自学失败的小白们都是止步于没有坚持下去,学得累的时候就想放弃,这是不行的!
以下是自学UI思维导图,收藏这个思路,一定能学会
UI即User Interface(用户界面)的简称,说到这个用户界面,其实非常好理解,因为我们每天都在使用。
移动端互联网时代,每位同学都有一部智能手机。手机里面看到的一些软件界面,我们可以称为用户界面,也就是UI设计。
简单的来说,UI设计师就是负责设计这些在电子屏幕上显示的产品。比如微信界面、里面的图标,文字,图片整个操作点击都属于UI设计师要设计的范畴。所以UI设计一直存在于我们的生活!
为什么要了解这些呢?目的是了解这些之后,你能确定自己是否真的喜欢这职业。喜欢真的很重要,如果你是因为这行业的前景或者待遇,而逼迫自己学习的,这里小弟是不建议的。
喜欢,才容易坚持学好。
UI设计师工作内容是界面流程交互+界面视觉设计
其中流程交互主要是交互设计师的职责,但是很多创业公司没有交互设计这个岗位,所以需要UI设计师兼任。界面视觉设计主要是界面内容排版、文字、颜色、图标图形的设计。
UI设计师需要具备的能力是:良好的审美品味+优秀的逻辑思维+扎实的软件技能。
审美和逻辑,是一个长期的过程,需要大量的项目经验和思考。
工欲善其事必先利其器,所以了解UI做什么工作内容之后还是得从软件学起。
目前业界比较热门使用的工具是Sketch、FIgma、Adobe XD,但若你已经自己会Photoshop、Illustrator也可以先继续使用没关系,毕竟设计没有限定说一定要用什么软件工具完成(但基本公司都会要求是XD)
若问我会推荐哪个软体工具进行学习,我会选择Figma,因为Figma是目前唯一可以免费使用、不需要安装桌机软体、且云端保存档案的绘图软体工具,但Figma主要是用来作为UI设计绘图使用,因此很多功能是无法跟Photoshop、Illustrator相比
另外学软件和学设计是两件不同的事情,假设你现在是对于软件不熟悉,那需要专注寻找软件工具的学习资源,不是设计面向的资源,反之若是设计上的学习,用什么软件进行就不是很重要的事情。
题主说他有8个月学习,那这里给一个建议,就是花三天去听公开课,更好的了解软件的操作、更好了解学习的思路。
公开课训练营安利网易,但因为网易因为训练营就三天的时间,所以一定要认真听课,不要错过时间,我当时自学UI,就只去听了三天的网易训练营课,听完之后,还意外得到了网易内部UI的资料,其中还包括了软件的下载,永久使用。
但更主要的是老师说的UI学习思路,对我后面自学启发很大。
UI设计师主要常碰到的设计大多都是网页或是APP,所以累积一些网页和APP UI的使用经验,能够帮助你去进行设计时,对于要使用哪些操作元件、排版方式等等的设计灵感来源,毕竟用过的东西还是最印象深刻,若还可以去了解设计的规范更好,下面也推荐几个资源
网页:
APP:
以上若已预备完毕,就可以开始进行下面的学习要点。
在平面设计理论当中有提到,一个平面的基础构成元素由‘点、线、面’这三个部分所组成,这三个元素的相依关系是从一个单点,再到点与点相连可成为线,而线与线延伸可成为面
将点、线、面的逻辑用来解析网页或APP的话,不管是网页或APP,都是由很多个页面所组成,一个一个页面我们可以称为点,页面与页面彼此间又有流程关系,这就可以称为线,而网站和APP都是由很多组流程所架构出来,我们可以将这些流程的集合体称为面,也是作为整体的意思
当我们学习分为点、线、面这三个步骤来分别进行,学习就可以更有脉络和专注性,这也是我在网易训练营公开课的UI入门课授课中应用到的教学步骤,并且得到不错的学习回馈,接下来就来说明这三个步骤的学习内容吧!
单一页面的设计练习,主要目的是提升视觉设计的能力
通常一开始会先临摹好的设计,从中训练观察力和实践力,完成临摹之后,再加入自己的设计灵感来进行变化,听似很容易,但这考验著你如何观察设计上的细节,下面提供几个主要练习方向:
当确认好欲设计的主题后,总得需要暸解有哪些内容吧?例如我们要设计一个登入页,就要统合登入页需要呈现哪些内容,可能有logo、标题、文字输入框、按钮…等等,这部分可以去参考实际的成品会是最快的方式
排版在UI设计中是很重要的基本能力,从内容元素对齐方式、彼此间的间距、元素摆放位置、浏览的易读性、视觉的平衡性等等都可以非常讲究,排版排的好也等于成功设计的50%成分了
配色跟排版一样是视觉设计中很重要的一环,好的配色可以抓住人们的目光,不好的配色反而会让人倒退三步,并且拒绝继续浏览下去
建议先从单一色开始,之后在慢慢尝试加入一个一个颜色,颜色越少难度越低,颜色越多难度就越高
这里给大家两个颜色配色的网站,方便大家学习:
colorhunt :
lolcolors
这边的元件指的是输入框、按钮这类可以被使用操作的元素,主要可以尝试用不同的形态方式来做呈现,例如用线画框、用面画出一个区块或者加入3D立体的元素、阴影的应用呈现等等,这些都可以做尝试
文字的练习不外乎就是字体的选用、字重粗细的应用、字间距的设定等等,一个设计的好坏,往往可以从文字的使用感受出来,属于魔鬼藏在细节中的设计重点
这里顺带分享一个好用的免费字体网站给大家:100font
UI设计一定都会用萤幕作呈现,不论是电脑荧幕,平板、手机,用对的荧幕尺寸作设计很重要,事先了解被常用来作UI设计的萤幕尺寸就格外重要
(1). Behance
Behance是UI设计师非常喜欢逛的设计灵感类网站。你能看到来自世界各地不同设计师的作品,还可以展示自己的作品。Behance 的管理团队每天都会从各种领域中的精选新作品。这些领域包括设计、时尚、插图、工业设计、建筑、摄影、美术、广告、排版、动画、声效以及更多。
(2).Dribbble
另一个能与Behance“并驾齐驱”的就是Dribbble。相信没有哪一个UI设计师不认识她。
(3).AWWWARDS
AWWWARDS同样是个灵感类的网站,网站本身的设计就十分简约和清晰。它不同于Behance和Dribbble,主要展现的是优质的网页设计类作品。你不仅可以点击某个作品就能进行收藏还可以直接访问该网站,非常方便,是网页设计师不容错过的设计网站。
(4).UI Movement
UI Movement 网站是一个致力于手机APP和分享最好的UI设计灵感,帮助设计师获得最优秀的UI设计作品。如果你对APP UI动效感兴趣的话,那这个网站你必须收藏。
(5).Site inspire
顾名思义,site inspire是一个网页集合类网站,你可以根据不同的风格,样式,种类来搜索你想要的网站,对视觉效果和交互要求比较高的设计师来说是一个非常值得收藏的网站。
(6).Mobbin
Mobbin是一个精选的最新移动UI设计模板集合网站,这些模板能够体现出了市场上最佳的APP设计,你可以从130个iOS APP和6000多个模板中获取灵感,对于想要寻找设计模板的设计师来说帮助非常大。
(7).Uplabs
Uplabs是一个专门为设计师打造的资源推荐社区,上面汇集了很多前端设计作品,还有大量的Android和iOS UI的资源, 是实时更新的。另外Uplabs也有很好地marketing功能,大家可以去免费或付费下载资源。
页面流程的设计练习,主要是训练如何串连页面,来达成某一情境中的目的,也可以想作是使用者要达成某一目的操作的过程
一开始一样会找现成的流程来做分析研究,通常会有一条主要流程,但也会有很多支线流程来因应使用者的操作变化状况,可以说是听似简单,但却不容易,关系到如何找到或想到不同情境面向的状况处理,但我们还是由浅入深一步步进行吧,下面提供几个主要练习方向:
1.
找一个网站、APP或服务来研究他的操作流程,通常要达成一个操作目标会有一个主要流程,这流程是作为最理想情况使用,例如进行会员登入流程时,完全没有发生输入错误、密码遗忘、或根本没帐号等等的情况
尽可能将页面上所有功能都操作一遍,进而暸解每个过程的最后达成的目的,也设想其他不同的使用情境来操作,例如使用者忘记帐号是什么方式注册,借此了解用可以用什么方式处理这些情境
2.
将流程记录下来是非常重要的事情,主要可以梳理并记录脑袋所接触到的讯息,通常我们会使用流程图绘制User flow,可以更有效纪录流程上的不同状况处理,方便之后设计页面时的流程对照
3.
有了流程后就会知道需要有哪些页面进行流程的呈现,例如成功/错误的回馈画面、不同操作方式的处理,将这些页面都绘制出来后,就可以将页面串起,并从头对照一下流程图,看看页面是否有满足流程上的需求页面
一开始就要无中生有一个服务的确蛮有难度,主要原因是没有确切的主题和需求可以进行发想,这边建议先从我们常接触的流程开始下手,例如登入注册流程、电商网站结帐流程等等,这些也是业界比较有共识的流程
整体产品规划的练习,主要是训练自己有能力完成一个完整的服务,各样功能流程要如何相应配合
这部分是最庞大也是最重要的练习,一开始先从常用熟悉的网站或是APP作为练习主题,可以更快了解到实际营运的网站、APP有哪些资讯、功能是大家都会设计,这样你的基本观念才够与现实接轨,下面提供几个主要练习方向:
1.
了解网站、APP实际规划的内容功能有哪些,以购物网站为例,功能分类就有首页、商品浏览、查询订单、个人资料管理等等;以通讯软体APP为例,功能分类就有联络人列表、近期聊天纪录列表、功能设定等等
通常我们会用Sitemap列出所有的服务功能大项目,才能知道网站、APP总共有哪些功能,最好也多研究几个同性质的产品,透过此方式可以观察同一个范畴中有没有不太一样的差异
2.
列出大项目后,就需要暸解这些项目中的流程,也就是很多页面流程的研究分析,这样才能够知道需要哪些页面做乘载呈现
在业界设计师的设计稿最后就是这么一大包,全部的画面都要交代和绘制出来,流程也都要理顺,通常会出的文件有Sitemap,用来说明有多少的大功能、子功能要进行,再来是不同功能的user flow,用来说明操作上的逻辑和对应的页面呈现,最后是所有页面的mockup完稿图
这部分其实会花蛮多时间进行,建议先从规模较小、功能较单纯的开始,例如小型购物网站、公司形象网站、串流音乐APP、拍照APP等等,从单纯再到繁杂会是比较好的学习过程。
以上三个步骤是由单纯到繁杂作为难度区分,是我从过去经验统合出来的结果,主要想让学习可以更有条理和效果
另外在练习的过程中,临摹的阶段非常重要,建议以上的练习一开始都以完成一模一样为临摹目标,唯有透过实际观察、研究别人的设计并实作,才能够明白当中的设计细节,明白细节后才有可能作出一模一样或是更好成果,但有一点要记住,请选择自己觉得很不错的设计来作临摹,这样你的设计能力才能够飞跃提升。
学习的方法很多,选择适合自己的去学习,让你自己扎实的掌握,千万不要闭门造车,多学多看跟优秀的人去学习,不断的提升和成长自己。
希望以上的分享对你有帮助,整理不易,三连就是最大的鼓励!
