这是一个创建于 144 天前的主题，其中的信息可能已经有所发展或是发生改变。
因为我发现，我不是缺一个顺手的框架，而是审美有问题，框架用得再 6 ，也不影响我画得极丑的 UI ，各位大佬有什么产品或者方法来提高一下自己审美吗......
26 条回复 • 2024-07-02 11:46:06 +08:00
 |
1
Yukiteru 144 天前
UI 设计是美工设计的活，跟前端没有关系。自己独立开发的话直接找几个网站抄就行了
|
 |
2
bojue 144 天前  1
找些模版参考参考
https://www.pinterest.com.au/search/pins/?q=%08data%203d&rs=typed&term_meta[]=%08data%7Ctyped&term_meta[]=3d%7Ctyped https://dribbble.com/search/data-cgi |
 |
3
zzdgfv 144 天前
审美只能多看看别人的产品，多读别人的开源代码
|
 |
4
Leon777 144 天前
审美这东西没个多年熏陶培养不出来
|
 |
5
kneo 144 天前 4
学习 HTML/CSS 并不能让你写出好看的 UI ，只能让你以更慢的速度写出通常丑的 UI 。
你能意识到自己的 UI 丑，说明你审美还在线。你需要在头脑中把你自己写的界面分解，和你常用的软件/网站/App 比较，找出到底是哪个地方丑。究竟是配色的问题，还是布局的问题，还是结构的问题（当然一般来说都会有问题）。 建议阅读： 《 Refactoring UI 》 https://anthonyhobday.com/sideprojects/saferules/ |
 |
6
amlee 144 天前
缘木求鱼呢
|
 |
8
wonderfulcxm 144 天前 via iPhone
学习 HTML+CSS 不能提高审美啊
|
 |
9
maymay5 OP @wonderfulcxm 复习，即便是脑子里有完整的页面，忘了 CSS 咋写也不行，问 LLM 没办法理解那么抽象的描述
|
 |
10
karnaugh 144 天前
你不需要复习 html + css ，我建议你去学习 tailwindcss ，然后去看 tailwindcss 相关的 ui 模板，你需要大量的 ui 布局去构建自己对于页面的审美。。。
|
|
11
maymay5 OP @karnaugh 谢谢，tailwindcss 有了解过，主要还是需要去多看别人的作品，不太喜欢 tailwindcss 是因为会导致 html 变得好多，当然也可能是我见到的代码太 low 了，感觉都是 dom 后面挂一大串的 class
 |
 |
12
chihiro2014 144 天前
看看 flowbite 和 tailwind
|
 |
13
zhw2590582 144 天前
认识到丑已经属于审美的第一步了，以前我看自己设计的东西的时候都不觉得丑，后面才发觉各种布局不合理，配色离谱的问题
|
 |
14
CatchXS 144 天前
之前做出来的界面也很丑，后面在看了这个设计启示录，里面有一些设计的思考、规则、颜色的一些知识，希望能够帮助到你 https://www.yuque.com/frost/ux
|
 |
15
chanChristin 144 天前 via iPhone
@karnaugh tailwindcss 不还是 css 吗？那和直接看 css 有啥区别？
工具虽好，但是别硬推荐 |
 |
16
ychost 143 天前
学 CSS 就行了，但也就是个布局调整大小、位置，高级点的能做特效啥的，核心还是 UI 设计审美好不好看
|
|
17
kneo 143 天前
@maymay5 不理解 tailwindcss 的，阅读《 Refactoring UI 》，这个是 tailwindcss 团队里的人写的，可以让你多少明白 tailwindcss 的意义。
这里面最关键的一点，工具类通过减少你的选择，可以在一定程度上降低选择障碍，加速你在设计上花费的时间。 实际上，对于新手来说，tailwindcss 提供的选择也够多了。我建议使用类似 bootstrap/daisyui 的框架，甚至 ant design ，进一步降低你在样式上的选择。先专注于内容，不要在样式上有过多的想法。 |
|
19
karnaugh 143 天前
@chanChristin 一句话你就看一半的吗。。。。
更具体的解释，可以参考 #17 楼的朋友的回复 同时我再给你复述一下后半句话： [然后去看 tailwindcss 相关的 ui 模板，你需要大量的 ui 布局去构建自己对于页面的审美] |
|
20
karnaugh 143 天前
@maymay5 tailwindcss 确实会使 html 代码看起来更混乱，但究其根本，是因为以前大家开发时大家的思绪更关注代码，而不在 UI 上边
我干了 8 年前端，最近在研究折腾独立开发，也开始做自己的网站产品，再去单独画 UI 图显然不太划算，而且咱也不太会画图软件，直接上手撸界面，然后问题就全暴露出来了 什么意思呢，就是说咱们以前工作的时候，UI 都是 设计同学 给出来的，画好的，程序员的主要思维都在代码上，研究 UI 图怎么转化为 html 元素，html 元素怎么组合更好，元素的 class 怎么起名，至于 UI 效果，不用动脑子，还原设计图就完事了（甚至蓝湖啥的都能一键复制 css ，再删掉不用的 css 。。。） 而现在的状态呢，当你上手撸代码你会发现，没有 UI 图给你去拆分，你需要先去解决 UI 长什么样子的问题 此时你的关注点就从代码怎么写优雅，变成了 [怎么创造自己想要的 UI 界面] 上去了，这时候你就会发现，原来通过 class 去寻找 dom ，然后修改样式的操作变得繁琐起来： 「先找 html 元素，然后看元素是哪个 class ，然后再去找 class ，再修改 css ，然后看一下效果」 用 tailwindcss 的话，就是「找 html 元素，修改 class ，然后看效果」 这不只是少了几步的区别，更重要的是维护你思维的连贯性，你现在在思考这个 UI 宽一点效果怎么样？间距大一点怎么？然后每次都需要跑去找半天 class 再改个样式，等回来的时候，刚才 UI 的思路都断了。。。 |
|
21
chanChristin 143 天前
@karnaugh #19
那为什么不直接学 css 去看优秀模板用 css 写呢？非得走 tailwind 绕一下呢？ 至于 #17 的观点我不认同，tailwind 的学习曲线刚上手的时候非常陡峭，对于一个 css 熟手来说也要熟悉一段时间，而且工具越复杂问题越难找，看着官方介绍很牛逼，几个类名就行了，真自己上手用就傻眼了。不说别的，就 17px 这个官方没有定义的你准备怎么写？ |
 |
22
laobobo 143 天前
UI 丑的话，你在复习 10 边也没用，这是 设计的活
|
|
23
karnaugh 143 天前
@chanChristin 首先你最后一个问题暴露了你就没学过 tailwindcss 的事实，tailwindcss 又不是没有变量，非要用的话 w-[17px] h-[17px] xxx-[17px] 就完事了啊
况且 tailwindcss 和 css 又不冲突，里头的类命名都是取自 css 好吧，有的直接用 css 的值，有的是超级常用的就首字母缩写一下，但凡你学过一点，也不会有这么抗拒的感觉 至于 css 优秀模板，你搜搜就知道了，要不是什么整个网站的模板，要不是什么老掉牙的模板网站 目前我接触到的很多 ai 方向的独立站，都是 tailwindcss 直接一把梭就撸出来了 而且 tailwindcss 的模板网站里都是现代化的风格，分门别类的，方便快速看不同的 ui 有哪些不同的样式，刻意练习懂么 |
 |
24
chenzw2 143 天前
https://css.bqrdh.com CSS 可视化
|
|
25
chanChristin 142 天前
@karnaugh #23
学会了就感觉理所当然 你怎么知道我没学过呢？你写的时候当然很爽，但是后期维护起来看着一两行的类名就欲哭无泪了。 而且我不觉得这个对提升 css 有什么帮助，知道属性的用 css tailwind 都能写，不知道的换 100 个工具都写不出来。 至于你最后说的优秀模板，用 tailwind 能写，用 css 也能写。 |
|
26
karnaugh 142 天前
@chanChristin 我看懂了，你就是对 tailwind 有很重的偏见，这很正常，又不丢人，但在这嘴硬就贻笑大方了
还维护起来欲哭无泪，你是用 css 画画呢？还是说你屏幕太小代码折行了？ 人家楼主问的是提高审美，谁问你提高 css 了 我说 tailwindcss 那边有很多现代化风格的模板，还有分门别类的 UI 组件，可以快速通过大量的案例构建所谓的审美 谁让你去写优秀模板了？没设计师你写得出来么 |
Select Language