咱们打算敞开一个新的系列,输出一部完好的 UI 零根底学习指南。依据 UI 新手系统学习 UI 规划的顺序,连续会输出 12-15 篇不同模块的系列性文章。
第一期回忆:
零根底 UI 入门(一):解析UI规划概念和就业局势
从第一篇,也是最早的一篇零根底学 UI 文章《规划干货 | 从零根底学习 UI 规划》到现在现已曩昔许多年了,UI 规划师的职能、东西、知识系统,都阅历了许多的变更和改造。不只越来越碎片化,也越来越难上手学习,零根底入门成本大幅提升了。
阅读文章 >>
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
1. UI 规划师的技术组成
要成为一名优异的规划师,包含两部分才能,一部分是显性的,一部分是隐性的。
显性才能即一些容易系统学会并输出的技术,如软件水平、界面规划、动效规划等。隐性才能,是不容易展现且比较难打开学习的技术,包含理论把握、标准知道、团队协作等。
在通过认真的筛选后,咱们将 UI 规划师在前期需求把握的这两部分技术制造成图,咱们能够看下技术图:
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
尽管每个细分范畴的技术都能够无穷无尽的进行深化,但咱们不可能把有限的时间投入到无限的学习里。
所有技术的把握,都是为了满意在真实项目中有效输出和落地,后续的共享咱们也将围绕在这个目标中打开。先把握每个范畴的必要根底内容,对完好的输出流程有概念今后,再开始深化某个范畴专研,这才是正确的学习办法。
2. 显性技术介绍
UI 规划师的显性技术必定是咱们首要要把握的东西,尽管主意、思路、经历都很重要没错。可是想让别人了解你魂灵前,他们必定更在意外貌……
作为规划师,UI 产出物最直观的便是咱们每天都会看见的图标和界面。
图标即出现在界面中的图形标识符号以及运用的启动图标。图标尽管有许多的材料能够用,可是想满意项目本身需求、风格一致的图标,根本只能依托独立制造来完结。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
界面规划,则是输出界面的视觉才能,咱们界说的界面视觉才能是在不受外力干扰下,你能够输出符合标准、根本交互、平面要素的美观界面,简称便是飞机稿输出才能。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
动效规划,是在输出静态页面根底上,丰富运用体会的手法。通过增加一些有趣、简单的动效,来让操作效果更生动,或许作为情感化规划的一部分。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
在项目规划中,抛开产品、体会这些内容和根本视觉样式,最让人重视的东西是对项目规划标准的搭建与运用。如安在多个页面中保持视觉风格的一致性。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
最终,便是前面这些内容都输出完了,需求将规划的内容提交给程序员进行样式的开发,那么就要实现对规划内容进行标示和切图文件的输出。
显性技术关于新手来说,最大的长处便是知识点是相对固定的,操练办法也是固定的,只需通过故意操练的办法,就能够堆集和提早。
3. 隐性技术
隐性技术相对便是一些比较笼统的才能,它们不再像显性的这些这么容易进行训练和拟定客观的标准。
首要便是了解标准,没有标准是必定输出不了界面的。但移动端的规划标准,并不是你们想的官方预备个文档,里边数值写清楚了,你背下来就行。而是了解哪些标准是必须要遵守的,哪些是能够灵敏变化的(而能够自界说的是大大都)。
原来规划标准不需求死记硬背!腾讯规划师是这么了解和运用的!
Hi,我是彩云。常常在读者群里看到有人讨论,面试时被问到规划标准相关问题,不知道怎样回答才好。
阅读文章 >>
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
交互思维,则是怎样让产品和界面操作起来合理的思维才能。平心而论,这种才能是只能依托自己的 “多学多看” 堆集的。交互书本带来的协助只是解说你留意到的现象原因,但不会告诉你遇到问题的时分详细应该怎样做。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
团队协作才能,则需求比较详细的作业经历和技术认知了。咱们怎样有效的了解规划的需求,将规划的目的传递给别人,高效的评定和过稿,都是团队协作才能的表现。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
审美水平,是一个规划师的品尝。品尝的凹凸是能够在作品会集感受出来的,怎样布局,怎样用配图,怎样选用规划风格。审美的落差许多时分能够添补技术上的缺点。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
最终便是理论把握了,根本上上面所有讲过的细分技术点都有各自的理论、术语。规划范畴中,不论多有用的理论,脱离实践都毫无意义。理论把握的正确时机是在实践过程中查找并融汇贯通的。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
隐性技术都是在实践过程中逐步堆集的,在后续的共享里,我会将各种观点、理论,融入到详细的案例和实践过程中阐明。尽可能协助咱们增长这方面的知识。
20条规划理论 https://www.uisdc.com/zt/ux-rules
1. 学习 UI 用的设备主张
相对其它规划类型来说,UI 规划对硬件的要求能够说相当的低,只需有一台不是太老的电脑,无论是苹果 Mac 还是 Windows,对前期学习来说是毫无压力的。
下面简单介绍下做 UI 所需的电脑装备和系统,假如现已满意这个条件,能够在前期不用考虑买新电脑的事。尽量在未来把握好根底软件特性,清晰的知道装备不够用时,再依据需求晋级电脑,下降前期的经济压力。
- CPU:15 年今后购买的 i5 以上的 CPU
- 内存:不低于 8G,假如能晋级能够换成 16G
- 硬盘:只需是固态硬盘就能够,对速度没有太大要求
- 显卡:对显卡没有要求,只需正常能用就行
能够说,假如是苹果电脑用户,15 年今后的 Macbook Pro 笔记本、一体机都没有问题。而 Windows 用户只需不是之前买早期上网本的也大多能够满意。
假如实在是想换设备,就只主张购买 Mac 了,尽管 Windows 有些软件能够替代,但更多的 UI 生产力东西只有 Mac 才有。
Mac 电脑中,首要引荐 Macbook Air M1 和 Mac Mini M1,M1 芯片的性能完全能满意从学习到作业的生产力性能需求,尽量把内存加到 16G 即可。并且相对来讲价格更廉价,到某宝或许 PDD 找第三方渠道会比官网廉价许多。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
最终主张一定要配一块 24 寸以上的外接显示器,至少有 1080P 以上的分辨率,更大的内容区域关于规划软件的学习和输出来说至关重要。至于详细应该什么类型没有限制,对颜色也没有要求,自己外观看着喜欢的即可。
2. 所需学习软件装置
UI 规划相关的软件首要包含三大类:图形、界面、动效。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
图形软件首要指的便是 Adobe 的 PS 和 AI,用来处理杂乱图形样式的软件,例如杂乱的图标、字体、H5 视觉等。是每个平面相关规划师都绕不开的两座大山。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
界面软件,便是规划 UI 界面和排版的专用软件。现在市场首要运用的东西有 Sketch / Figma / Adobe XD 三个,Sketch 只支撑 Mac 系统,Adobe XD 由于更新太慢功用太少,现已不主张再花时间了解。所以首要主张从 Figma 开始学习。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
动效软件,则是用来处理交互动效的东西。新手大都以为动效必须由 Adobe Effect 来完结,其实它最合适制造的是动效中的矢量动画,但不能输出完好的动效原型。现在市面上做的最好,Windows 也支撑的动效东西是 Protopie,把握它就能够疏忽相似 Principle、Origami 等其它同类软件。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
软件的装置能够看咱们下一篇预备发布的前期学习的阐明合集。
至于不是直接涉及到 UI 产出的东西,相似待办事项、西红柿、笔记东西,就依据咱们自己喜爱决定。
3. 相关材料预备
还有,一些必备的材料、材料也提早帮咱们做了筛选,包含下面这些内容。
首要便是苹果 iOS 标准,咱们制造了一个独立的翻译 PDF 文件,大概有 200 页,是前期必定要看完的,以及 iOS 官方供给的组件库。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
然后便是针对安卓系统的资源,由于安卓的标准变化十分频繁,所以没有做翻译,咱们能够翻开下面的标准官网,通过浏览器翻译来检查。一起,咱们安卓所需的官方组件材料等咱们也供给出来了。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
https://material-io.cn
然后便是字体文件,包含苹果官方要求的苹方中文字体,SF 系列英文字体,以及安卓的思源黑中文字体,以及 Roboto 英文字体。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
最终,便是常用的图标材料库了,这里主张保藏 iconfont 和 iconpark 两个网站,它们供给了许多的开源图标材料,能够直接运用。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
字节跳动官方出品的免费图标库,超好用还能自界说修改!
现在许多企业公司或品牌都会将自己开发的规划材料开放出来,像是图标集、字体或是网页结构等等,使这些项目能够被更多人运用,或是在开源的情况下创造出更多可能性,当然一方面也能进步被看到的机会。之前介绍过IBM Plex 便是其中一个比如:
[link https://www.uisdc.com/5-company-font]
本文要介绍的「IconPark」是一套完好免费图标库,也是字节跳动(ByteDance)释出的官方图标集(旗下最闻名的就属抖音、TikTok),IconPark 一共收录超越 1…
阅读文章 >>
严重更新!阿里妈妈矢量图标渠道iconfont+全新上线!
编者按:矢量图标渠道 iconfont 一直是国内最良心最受欢迎的人气图标下载渠道,这次严重更新,包含全面晋级的协助系统、支撑五颜六色图标上传下载、检查图标详情页、搜人功用、打赏规划师等,亮点多多,值得保藏。
阿里妈妈矢量图标渠道iconfont通过2年多的开展,网站用户数从最早每天几十个到现在拥有15万忠诚用户,共享图标数从最早阿里妈妈UED自己制造的几百个图标到现在用户把70多万的图标共享在iconfont渠道上,这两年咱们不只仅看到渠道各种数据的增长,也看到了小伙伴们对iconfont渠道支撑和…
阅读文章 >>
4. 相关书本引荐
最终,便是和 UI 有关的书本引荐了。首要要声明一下,看书仅仅是用来拓展咱们的眼界,供给给咱们一些视角和办法,只靠看书是无法取得有效提升的。
所以,我不打算引荐一个满满当当的书目,而是关于读者现阶段最有用的几本。排名不分先后,咱们能够自己依据喜爱阅读。
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)
以上引荐书本能够到网上书店购买,咱们也别的预备了对应 PDF 的电子版别,也在本篇共享内容的材料包中,能够自行查找。
最终,便是趁便引荐下我自己出版的《写给咱们看的 UI 规划书》,在京东能够直接找到,感兴趣的同学能够购买支撑一哈!
以上内容便是本系列第二篇,新手应该知道和做的预备内容。到下篇开始咱们就要详细针对软件打开阐明,介绍 Figma 的详细运用逻辑和学习要点。
欢迎重视作者的微信公众号:「超人的电话亭」
零根底 UI 入门(二):规划师的技术要求(附学前必备材料)