背景
请问对于刚刚开始了解UI的人,有什么书推荐吗?尤其需要对设计和开发的流程和工作工具多些了解
学UI的目的
学习UI的目的会导致所需要学习掌握的内容有不同:
- 自给自足:主要是因为自己做产品,或者所在项目需要UI支持。
- 职业发展:想要从事UI行业,或者兼职UI设计。
- 兴趣爱好:喜欢,感兴趣
1,3点我可以讲讲,第2点由于本文作者自己职业都拉跨,所以按下不表。
UI简介
针对UI,其实好多人都能说几句,百科,油管,招聘 之类的网站上也有大把的介绍,所以基础内容按下不表。本文多是一些个人看法和观点,形散神不散。
新意味着站在巨人的肩膀才能飞得高
UI是一个比较新的职业/学科,国外可能早一点也就是1980年左右模模糊糊有这个东西,但是当时我估摸也没有所谓的UI,就是程序员/美术设计师有符合的技能给做了。
国内这个2000年后才算萌芽,10年-16年算需求大爆棚,但18年开始也淡下来了。
新的学科/职业,有一个很致命的缺陷,就是没底蕴。
不像绘画从山顶洞人时期就得画红色小人,历经多次技术和主题革命,各种理念流派,各种主义和形而上,可以说,绘画永远不死。
不像平面设计,说远了有凯尔经,书法,中间一点有印刷雕版活字印刷。近一点的两三百年前开始,随着工业发展和技术的提高,书籍装帧就是很典型的平面应用。
UI是一个依托于互联网蓬勃发展+移动软件开发爆发,才有的需求和对应岗位。其新的程度,可能还没有本文作者的年纪大。
几乎所有的新学科,交叉学科,都不可避免的需要站在巨人肩膀试图解决新的问题。
所以,UI不等于美术生,也不等于艺术家,但UI的进步学习,离不开从古老的学科中吸收营养,也离不开从现代已有的诸多学科和领域中拿过来活学活用。
UI这个职位在试图解决什么问题
一句话:UI以提供视觉设计服务的形式站在甲方的立场帮助其业务开展。
这个开展,可以是淘宝让人找东西更方便,花钱更效率。也可以是让人停留在抖音里不出去还怪自己没有意志力。也可以是在一大堆同质化严重的软件里,这款软件让你提起就想起:特别好用颜值还高。
颜值提升
同样功能和操作体验的软件,美丑待遇可谓是天壤之别
以上5个都是围绕英语单词的APP,打开链接即可获取LOGO和应用截图,单看颜值,你不会选谁。(但是第一个功能上很有特点)
体验提升
体会一下反人类用户体验 :https://userinyerface.com/
数据提升
这个有比较多的对比 BEFORE AND AFTER
其实数据这两个字不太直观,换成KPI呢又和设计没有直接的关联,其实跟数据分析关系更多。
在没有大的别的条件影响下,如果通过UI设计,比如:banner更新,风格改版,功能点优化,达到了某些数据的提高,这是能比较直观的反应出UI设计师的作用的。
然而不是所有类型的APP和网页都一定需要用数据埋点监控用户行为,从而得到行为数据进行分析产生结论,最后推进产品的进度。所以这只是一种角度,对工作价值的评价是多方面的。
UI的市场困境
- UI要么往上做细了,做行业深度。能力其实更偏向:领导力(管理团队,项目流程);某个行业的大半个产品经理,对行业的理解足够有立足之地;沟通能力(这一点非常重要,其实很多时候比视觉能力重要);过硬的视觉技能。但是这样的UI在大公司才有比较多的需求。
- 还有就是目前的现状,对UI的要求比较复杂,产品经理的技能要懂些;本职的UI要实时推进掌握业内动态;视觉上插画,平面装帧,品牌VI制作,公司日常物料能支撑;C4D火也得会3D,小视频是流量密码,也得会视频剪辑和AE后期……
这是企业基于人力的考虑,也是UI本身作为一个新学科根基浅显的必然市场导向。
总之,UI还是比较卷,一专多能,但是基本是围绕工作需求,不是热爱其实撑不下去,因为每个人学习能力不一样,学个3D,你感觉0基础勤快点半年,不勤快一年。但是领导的意思是最多最多下个星期要一个3D风格的网页……
这样其实对于初中级UI,是疲于浅层次碎片化的赶工期,可能熟练掌握了下载素材。
UI被替换的风险
- 市面上绝大多数APP/小程序/web 的视觉可能并不需要中级高级的UI来做。
- 大量的模板、资源网站提供了不少优质的内容,或者外包服务,对于小应用,周期性质的项目,视觉迭代缓慢的APP来说,这样无疑是更划算的。
- UI方面得视觉语言发展到目前就一个IOS,一个material 较好讨论,别得有些也有亮点,但是整体来说可以算特征化,不能算“开创”。
- ant Design, Element,MDUI ,这些现成的框架其实非常成熟和好用,很难说对于非头部企业还有什么一定要自研框架的必要。而且研究难点也在需求代码,而非视觉上。(大企业纷纷开源自己的框架,一看代码,和某某好像……
入门UI需要什么书籍吗?
不需要,UI是一门太新的学科,和大部分平面装帧设计类似,内容更新的速度赶不上你在互联网上白嫖到的新鲜度和关键度。
如果非要看,可以看点不太接地气的哲学书 ,比如 原研哉的《白》。
产品的设计流程
从UI的角度,在产品的流程里,需要的点是不同的,侧重也不同。
每个大版本流程 | UI需要掌握的要点 | 在这个环节需要考虑的问题 |
---|---|---|
需求了解 | 5W1H产品分析 | 推动产品需求,最好全程跟进,明确设计目标。 |
原型设计 | 场景走查 | 把握关键的页面逻辑和操作能不能自洽 |
交互评审 | 可用性测试 | 适当参与交互原型得评审,站在用户角度检测功能门槛,易用性。 |
视觉设计 | 系统UI规范, UI设计样式, 格式塔可用性 | 根本工作,UI是一个有实际产出页面和源文件来说明工作成果的工种。 |
设计评审 | 视觉可用性 | 自己也要参加视觉评审,要事先想好大家会提问什么,你要怎么回复是靠谱的。 |
开发上线 | 实际验证 | 上线了,从各种角度收集反馈知道效果 |
非视觉方法论
知识点 | 推荐阅读的文章 | 了解程度 |
---|---|---|
产品设计 | 用一个实战项目,让你全面认识产品原型的诞生过程! | 知道产品经理在干啥 |
交互设计 | 大厂出品!写给新人交互设计师的成长体验地图 | 小公司是没有这个职位的,要么产品经理干,要么UI干。 |
零基础新人的交互设计入门完全指南 | 写很好,快速通览。 | |
一个完整的交互设计流程是怎样的 | 科班写的 | |
模板5WH | 学会5WH产品需求分析方法(上) | 掌握 |
学会5WH产品需求分析方法(下) | ||
5W1H | 这篇也不错,更白话 | |
用户画像 | 从0到1构建用户画像的流程与方法总结 | 掌握 |
场景走查 | KANO 模型 | 了解,场景走查其实是弄清楚什么人在什么时间打算在哪个页面做什么事,需求层次搞清楚,页面的视觉就有着落了。 |
UI视觉相关
知识点 | 推荐阅读 | 了解程度 |
---|---|---|
总览 | 零基础如何自学UI设计? | 相当于总纲 |
业内黑话 | 英文贴YouTube/ Google 获取老外第一手,UI这东西毕竟是外来和尚。 | |
UI组件 | 如何设计企业级的UI组件库 | 造组件库是UI必须要会的,就是大小规模的区别 |
原子设计完整指南 | atomic 是UI工作效率和系统性的核心概念 | |
为什么我们都应该学会组件化设计思维? | 相当于讲清楚组件化的必要性 | |
视觉规范 | 造一套自己的视觉语言 | UI库得有这个概念才看起来是一个妈生的。 |
设计系统基础知识 | UI某种意义上有点像视觉层面的程序员 | |
大厂设计系统入门 | 牛的程序员做架构,牛的UI其实做大了也是架构 | |
看看还是挺好的 | AntDesign,arco.design , | 国内的 |
material design, | 国外的 | |
别的要搜索的内容 | 擅用搜索 | 基本啥教程都能搜到,表情包,LOGO,图标,插画,字体设计,商品包装,VI。缺啥搜啥。 |
工作工具
产品需求阶段
这个其实是产品经理的活,不好推荐
processOn : 这个其实是个画结构图的工具,但是公开的很多,你搜关键词,相当于获取一个粗略的了解。
墨刀 :这个其实是个产品原型设计工具,广场上可以看到一个品类别人怎么做的,很多都是不出名的,拿来扩展思路和了解行业也是个不错的途径,使用这个的大部分是产品经理。
原型绘制阶段
UI如果做这一部分,国内其实用的软件差不多也是下面的UI设计软件,向下总是比较好兼容:
- Adobe XD,官方免费,功能和Sketch差不多,而且windows也可以用。
- Sketch,年费$99,我已经不再续了,崩溃次数比XD多不少,还只能Mac用。
- Figma,近两三年火起来的,web里用,不要钱,国际化,资源多,生态靓。
哪一个都行,我觉得不是特别重要,我个人是Adobe XD + Figma。
UI 设计阶段
教程喜欢英文的上外网搜 名字 + tutor
喜欢中文的:
- 免费的教程,不要花钱,很多软件都有入门
- XD知识树 这个蛮好的,我最近就靠这个
当然我知道除了基础软件使用,最大的问题是,如何开始呢!
- 做现在已经有的APP/Web的页面改版
- 从0开始做一个你有想法的产品
- 做作业: UI100days
别的技能阶段
看你学啥了,网络上教程很多,也不要钱,编程报班我都觉得傻,不要说UI了。
常用网站:
- 设计导航,偏资讯和视觉类 每天都看看,知道设计的世界现在是啥样
- 设计师网址导航,啥都有 缺啥找啥
- 还有一个思路,就是国内国外大厂都有专门的部门叫 UED ,UIX 之类的,会搞分享写博客做视频出教程之类的,多看看也很好,毕竟不是谁都有机会做几千万几个亿用户体验的产品的。