这是一个创建于 861 天前的主题，其中的信息可能已经有所发展或是发生改变。
工作前端，想学 UI 。
想问各位，有没有网站或书，系统性介绍 UI 设计的。
前端有阮一峰的 JS 教程、现代 JS 、库、框架也有对应文档。
但 UI 方面的教程就找不到，我所知道的有 Dribble 、Behance 。但是这些网站没有基础的积累，光看肯定是不行。
如果有系统性教程，还请各位推荐下，谢谢。
最好是包括了 原型图设计、交互设计、UI 界面设计、Figma 的使用、配色、设计系统 等。
目前状态：
1 、没有系统性学过 UI ，只是看到什么学什么。
2 、主要是：优设网、设计公众号、Dribble 。
3 、虽然也每天看，看完之后最大感觉就是人家的设计真好。但是自己完全没得到经验。实战的时候还是没思路。是不是因为自己没理解基础概念和设计标准。
想问各位，有没有网站或书，系统性介绍 UI 设计的。
前端有阮一峰的 JS 教程、现代 JS 、库、框架也有对应文档。
但 UI 方面的教程就找不到，我所知道的有 Dribble 、Behance 。但是这些网站没有基础的积累，光看肯定是不行。
如果有系统性教程，还请各位推荐下，谢谢。
最好是包括了 原型图设计、交互设计、UI 界面设计、Figma 的使用、配色、设计系统 等。
目前状态：
1 、没有系统性学过 UI ，只是看到什么学什么。
2 、主要是：优设网、设计公众号、Dribble 。
3 、虽然也每天看，看完之后最大感觉就是人家的设计真好。但是自己完全没得到经验。实战的时候还是没思路。是不是因为自己没理解基础概念和设计标准。
18 条回复
 |
1
southsala 2022-07-05 10:55:18 +08:00  1
看看 MD 设计、苹果人机交互指南等等，了解一下概念类的
然后可以去看看国内各家仿 figma 的产品，比如即时设计有每日打卡、临摹之类的，个人感觉收获挺大 |
 |
2
December19 2022-07-05 10:57:47 +08:00 2
简单，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/ 多看多动手 多总结 |
 |
3
a62527776a 2022-07-05 11:18:09 +08:00
虽然不知道 LZ 目的是啥 如果 LZ 想成为更好的前端开发工程师 小心路走歪了
|
 |
4
mlxy123123 2022-07-05 15:24:37 +08:00
我的建议是不要系统学习，从排版和平面设计学起，而且少看多做
到素材网上随便搜一批你觉得漂亮的图，直接照着做，尝试还原 这一步至少能管一年，一年临摹下来基本也知道下一步该做什么了 |
 |
6
fqy12300 OP @December19 谢谢推荐，草帽老师也确实很早就关注了，哈哈。酸梅干超人的这个文档倒没怎么关注。
|
|
7
fqy12300 OP @a62527776a 路走歪了，是啥意思？我觉得前端了解一些 UI 的知识对自己也是有帮助的吧。
|
|
8
fqy12300 OP @mlxy123123 谢谢，多动手肯定是要的，但是我觉得理论也不能太过于贫乏吧。想那种什么 7/2 法则，组件术语、排版定理。在实际做的时候，应该也是有帮助的。
|
|
9
mlxy123123 2022-07-06 09:33:12 +08:00
|
 |
10
XTTX 2022-07-07 11:17:02 +08:00 1
先学最最最基础的理论， 类似 “为什么一个版面最多用 3 个字体大小和不超过两种字体” “什么时候用 call out” "哪个是 call to action".
callout, negative space, font, font size. 然后看真正大佬的作品，而不是那些花里胡哨的炫耀技能的东东。 你看看 https://lawsofux.com/ 就应该明白了。 接着你可以买一些成熟的模板， 在别人的基础上改。tailwind 作者就有一个付费的 component\template 包。 |
 |
11
yyh0808 2022-07-07 15:56:29 +08:00
我觉得你学的都是方法，而没有解决最核心的问题，应该先考虑，要从事什么行业，再考虑学什么
|
 |
12
xiusheji 2022-07-11 14:42:23 +08:00 1
我推荐一本书吧《认知与设计：理解 UI 设计准则第 2 版》，这本书对我帮助挺大的，一些必须要知道的基础理论。
其他的也可以看看有需要的书吗 https://www.xiusheji.com/p/books.html |
 |
13
wismaqua 2022-07-18 17:59:16 +08:00
还是去学开发吧。
|
 |
14
3232 2022-08-05 15:58:49 +08:00
回想一下，其实真没有系统的学过 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 |
 |
17
ldsd 2022-08-18 11:56:35 +08:00
我是个 10 年的 UI ，刚好我想学前端，互相交流一下？
|
Select Language