最近一直在找在学各种前端框架,现在我决定重新复习 HTML+CSS

78 天前
 maymay5

因为我发现,我不是缺一个顺手的框架,而是审美有问题,框架用得再 6 ,也不影响我画得极丑的 UI ,各位大佬有什么产品或者方法来提高一下自己审美吗......

2787 次点击
所在节点    设计
26 条回复
Yukiteru
78 天前
UI 设计是美工设计的活,跟前端没有关系。自己独立开发的话直接找几个网站抄就行了
bojue
78 天前
zzdgfv
78 天前
审美只能多看看别人的产品,多读别人的开源代码
Leon777
78 天前
审美这东西没个多年熏陶培养不出来
kneo
78 天前
学习 HTML/CSS 并不能让你写出好看的 UI ,只能让你以更慢的速度写出通常丑的 UI 。

你能意识到自己的 UI 丑,说明你审美还在线。你需要在头脑中把你自己写的界面分解,和你常用的软件/网站/App 比较,找出到底是哪个地方丑。究竟是配色的问题,还是布局的问题,还是结构的问题(当然一般来说都会有问题)。

建议阅读:

《 Refactoring UI 》
https://anthonyhobday.com/sideprojects/saferules/
amlee
78 天前
缘木求鱼呢
maymay5
78 天前
@amlee 挺重要的,css 已经忘记很多东西了,很多时候脑子里是有概念的,但是样式一写出来味就不对了
wonderfulcxm
78 天前
学习 HTML+CSS 不能提高审美啊
maymay5
78 天前
@wonderfulcxm 复习,即便是脑子里有完整的页面,忘了 CSS 咋写也不行,问 LLM 没办法理解那么抽象的描述
karnaugh
78 天前
你不需要复习 html + css ,我建议你去学习 tailwindcss ,然后去看 tailwindcss 相关的 ui 模板,你需要大量的 ui 布局去构建自己对于页面的审美。。。
maymay5
78 天前
@karnaugh 谢谢,tailwindcss 有了解过,主要还是需要去多看别人的作品,不太喜欢 tailwindcss 是因为会导致 html 变得好多,当然也可能是我见到的代码太 low 了,感觉都是 dom 后面挂一大串的 class
chihiro2014
78 天前
看看 flowbite 和 tailwind
zhw2590582
78 天前
认识到丑已经属于审美的第一步了,以前我看自己设计的东西的时候都不觉得丑,后面才发觉各种布局不合理,配色离谱的问题
CatchXS
78 天前
之前做出来的界面也很丑,后面在看了这个设计启示录,里面有一些设计的思考、规则、颜色的一些知识,希望能够帮助到你 https://www.yuque.com/frost/ux
chanChristin
78 天前
@karnaugh tailwindcss 不还是 css 吗?那和直接看 css 有啥区别?
工具虽好,但是别硬推荐
ychost
77 天前
学 CSS 就行了,但也就是个布局调整大小、位置,高级点的能做特效啥的,核心还是 UI 设计审美好不好看
kneo
77 天前
@maymay5 不理解 tailwindcss 的,阅读《 Refactoring UI 》,这个是 tailwindcss 团队里的人写的,可以让你多少明白 tailwindcss 的意义。

这里面最关键的一点,工具类通过减少你的选择,可以在一定程度上降低选择障碍,加速你在设计上花费的时间。

实际上,对于新手来说,tailwindcss 提供的选择也够多了。我建议使用类似 bootstrap/daisyui 的框架,甚至 ant design ,进一步降低你在样式上的选择。先专注于内容,不要在样式上有过多的想法。
kneo
77 天前
@kneo #17 tailwindcss 提供的选择也 “够多了” => “过多了”
karnaugh
77 天前
@chanChristin 一句话你就看一半的吗。。。。
更具体的解释,可以参考 #17 楼的朋友的回复

同时我再给你复述一下后半句话:
[然后去看 tailwindcss 相关的 ui 模板,你需要大量的 ui 布局去构建自己对于页面的审美]
karnaugh
77 天前
@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 的思路都断了。。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1053725

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX