Back
Featured image of post UI Design | 怎么样零基础了解入门UI呢?

UI Design | 怎么样零基础了解入门UI呢?

给俺写抑郁了,必须转码

背景

请问对于刚刚开始了解UI的人,有什么书推荐吗?尤其需要对设计和开发的流程和工作工具多些了解

学UI的目的

学习UI的目的会导致所需要学习掌握的内容有不同:

  1. 自给自足:主要是因为自己做产品,或者所在项目需要UI支持。
  2. 职业发展:想要从事UI行业,或者兼职UI设计。
  3. 兴趣爱好:喜欢,感兴趣

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的市场困境

  1. UI要么往上做细了,做行业深度。能力其实更偏向:领导力(管理团队,项目流程);某个行业的大半个产品经理,对行业的理解足够有立足之地;沟通能力(这一点非常重要,其实很多时候比视觉能力重要);过硬的视觉技能。但是这样的UI在大公司才有比较多的需求。
  2. 还有就是目前的现状,对UI的要求比较复杂,产品经理的技能要懂些;本职的UI要实时推进掌握业内动态;视觉上插画,平面装帧,品牌VI制作,公司日常物料能支撑;C4D火也得会3D,小视频是流量密码,也得会视频剪辑和AE后期……

这是企业基于人力的考虑,也是UI本身作为一个新学科根基浅显的必然市场导向。

总之,UI还是比较卷,一专多能,但是基本是围绕工作需求,不是热爱其实撑不下去,因为每个人学习能力不一样,学个3D,你感觉0基础勤快点半年,不勤快一年。但是领导的意思是最多最多下个星期要一个3D风格的网页……

这样其实对于初中级UI,是疲于浅层次碎片化的赶工期,可能熟练掌握了下载素材。

大厂分析!UI、交互和产品经理三个岗位的优势和困境

UI被替换的风险

  1. 市面上绝大多数APP/小程序/web 的视觉可能并不需要中级高级的UI来做。
  2. 大量的模板、资源网站提供了不少优质的内容,或者外包服务,对于小应用,周期性质的项目,视觉迭代缓慢的APP来说,这样无疑是更划算的。
  3. UI方面得视觉语言发展到目前就一个IOS,一个material 较好讨论,别得有些也有亮点,但是整体来说可以算特征化,不能算“开创”。
  4. 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

喜欢中文的:

当然我知道除了基础软件使用,最大的问题是,如何开始呢!

  • 做现在已经有的APP/Web的页面改版
  • 从0开始做一个你有想法的产品
  • 做作业: UI100days

别的技能阶段

看你学啥了,网络上教程很多,也不要钱,编程报班我都觉得傻,不要说UI了。

常用网站:

  • 设计导航,偏资讯和视觉类 每天都看看,知道设计的世界现在是啥样
  • 设计师网址导航,啥都有 缺啥找啥
  • 还有一个思路,就是国内国外大厂都有专门的部门叫 UED ,UIX 之类的,会搞分享写博客做视频出教程之类的,多看看也很好,毕竟不是谁都有机会做几千万几个亿用户体验的产品的。
Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy