如何系统学习 UI ？

[fqy12300]

工作前端，想学 UI 。

想问各位，有没有网站或书，系统性介绍 UI 设计的。

前端有阮一峰的 JS 教程、现代 JS 、库、框架也有对应文档。
但 UI 方面的教程就找不到，我所知道的有 Dribble 、Behance 。但是这些网站没有基础的积累，光看肯定是不行。

如果有系统性教程，还请各位推荐下，谢谢。
最好是包括了 原型图设计、交互设计、UI 界面设计、Figma 的使用、配色、设计系统 等。

目前状态：
1 、没有系统性学过 UI ，只是看到什么学什么。
2 、主要是：优设网、设计公众号、Dribble 。
3 、虽然也每天看，看完之后最大感觉就是人家的设计真好。但是自己完全没得到经验。实战的时候还是没思路。是不是因为自己没理解基础概念和设计标准。

[southsala]

看看 MD 设计、苹果人机交互指南等等，了解一下概念类的
然后可以去看看国内各家仿 figma 的产品，比如即时设计有每日打卡、临摹之类的，个人感觉收获挺大

[December19]

简单，B 站大学，虎课网。系统学习要花钱，涉及要素过多，基础挺简单的。

零基础学 Figma
https://www.bilibili.com/video/BV1fg411G7cs?spm_id_from=333.337.search-card.all.click&vd_source=7d746e1584127dd97da316900d5910f9
草帽老师的 B 站
https://space.bilibili.com/108104104/video
设计师知识库（都是理论
http://www.supermancall.com/

多看多动手 多总结

[a62527776a]

虽然不知道 LZ 目的是啥 如果 LZ 想成为更好的前端开发工程师 小心路走歪了

[mlxy123123]

我的建议是不要系统学习，从排版和平面设计学起，而且少看多做
到素材网上随便搜一批你觉得漂亮的图，直接照着做，尝试还原
这一步至少能管一年，一年临摹下来基本也知道下一步该做什么了

[fqy12300]

@southsala 谢谢，我后面会多看看国外大厂的设计系统。

[fqy12300]

@December19 谢谢推荐，草帽老师也确实很早就关注了，哈哈。酸梅干超人的这个文档倒没怎么关注。

[fqy12300]

@a62527776a 路走歪了，是啥意思？我觉得前端了解一些 UI 的知识对自己也是有帮助的吧。

[fqy12300]

@mlxy123123 谢谢，多动手肯定是要的，但是我觉得理论也不能太过于贫乏吧。想那种什么 7/2 法则，组件术语、排版定理。在实际做的时候，应该也是有帮助的。

[mlxy123123]

@fqy12300 你说的这些理论知识就跟编程里的设计模式一样，不是让你一次性学会，在后面的工作中从脑子里搜索使用的

而是你工作了一段时间回头来看，哦，原来是这么回事，那我以后明白了

硬学理论吸收不了的

[XTTX]

先学最最最基础的理论， 类似 “为什么一个版面最多用 3 个字体大小和不超过两种字体” “什么时候用 call out” "哪个是 call to action".
callout, negative space, font, font size.


然后看真正大佬的作品，而不是那些花里胡哨的炫耀技能的东东。 你看看 https://lawsofux.com/ 就应该明白了。



接着你可以买一些成熟的模板， 在别人的基础上改。tailwind 作者就有一个付费的 component\template 包。

[yyh0808]

我觉得你学的都是方法，而没有解决最核心的问题，应该先考虑，要从事什么行业，再考虑学什么

[xiusheji]

我推荐一本书吧《认知与设计：理解 UI 设计准则第 2 版》，这本书对我帮助挺大的，一些必须要知道的基础理论。

其他的也可以看看有需要的书吗
https://www.xiusheji.com/p/books.html

[wismaqua]

还是去学开发吧。

[3232]

回想一下，其实真没有系统的学过 UI ，没上过辅导班。
我认为个人自学，比较靠谱的学习方法，可以分 3 块

1 、传统的视觉设计课程，去查查本科视觉传达设计专业课内容
2 、熟练使用设计软件 Skecth 、Figma
3 、熟悉苹果 IOS 官方库的组件，在此基础上能根据产品需要，设计自定义控件更佳
https://developer.apple.com/design/resources/
https://www.apple.com/ios/ios-15/
https://www.apple.com/ios/ios-16-preview/
马上苹果要出 IOS16 了，一般来说只要 IOS 版本更新了，所有苹果 app 的 UI 设计都需要更新一遍

熟悉 Google Material System ，安卓新版本发布以后，对安卓 app 影响比较小，一般安卓 app 不会那么快跟进。不过要学 UI ，Google 的设计规范 还是要懂的
https://material.io/design

[fqy12300]

@3232 感谢。

[fqy12300]

@wismaqua 不行，开发太卷了。

[ldsd]

我是个 10 年的 UI ，刚好我想学前端，互相交流一下？

[no13bus]

@ldsd 我的微信 no13bus. 交流下吗？我是程序员