1
Yukiteru 146 天前
UI 设计是美工设计的活,跟前端没有关系。自己独立开发的话直接找几个网站抄就行了
|
2
bojue 146 天前 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 146 天前
审美只能多看看别人的产品,多读别人的开源代码
|
4
Leon777 146 天前
审美这东西没个多年熏陶培养不出来
|
5
kneo 146 天前 4
学习 HTML/CSS 并不能让你写出好看的 UI ,只能让你以更慢的速度写出通常丑的 UI 。
你能意识到自己的 UI 丑,说明你审美还在线。你需要在头脑中把你自己写的界面分解,和你常用的软件/网站/App 比较,找出到底是哪个地方丑。究竟是配色的问题,还是布局的问题,还是结构的问题(当然一般来说都会有问题)。 建议阅读: 《 Refactoring UI 》 https://anthonyhobday.com/sideprojects/saferules/ |
6
amlee 146 天前
缘木求鱼呢
|
8
wonderfulcxm 146 天前 via iPhone
学习 HTML+CSS 不能提高审美啊
|
9
maymay5 OP @wonderfulcxm 复习,即便是脑子里有完整的页面,忘了 CSS 咋写也不行,问 LLM 没办法理解那么抽象的描述
|
10
karnaugh 146 天前
你不需要复习 html + css ,我建议你去学习 tailwindcss ,然后去看 tailwindcss 相关的 ui 模板,你需要大量的 ui 布局去构建自己对于页面的审美。。。
|
11
maymay5 OP @karnaugh 谢谢,tailwindcss 有了解过,主要还是需要去多看别人的作品,不太喜欢 tailwindcss 是因为会导致 html 变得好多,当然也可能是我见到的代码太 low 了,感觉都是 dom 后面挂一大串的 class
|
12
chihiro2014 146 天前
看看 flowbite 和 tailwind
|
13
zhw2590582 146 天前
认识到丑已经属于审美的第一步了,以前我看自己设计的东西的时候都不觉得丑,后面才发觉各种布局不合理,配色离谱的问题
|
14
CatchXS 146 天前
之前做出来的界面也很丑,后面在看了这个设计启示录,里面有一些设计的思考、规则、颜色的一些知识,希望能够帮助到你 https://www.yuque.com/frost/ux
|
15
chanChristin 146 天前 via iPhone
@karnaugh tailwindcss 不还是 css 吗?那和直接看 css 有啥区别?
工具虽好,但是别硬推荐 |
16
ychost 146 天前
学 CSS 就行了,但也就是个布局调整大小、位置,高级点的能做特效啥的,核心还是 UI 设计审美好不好看
|
17
kneo 146 天前
@maymay5 不理解 tailwindcss 的,阅读《 Refactoring UI 》,这个是 tailwindcss 团队里的人写的,可以让你多少明白 tailwindcss 的意义。
这里面最关键的一点,工具类通过减少你的选择,可以在一定程度上降低选择障碍,加速你在设计上花费的时间。 实际上,对于新手来说,tailwindcss 提供的选择也够多了。我建议使用类似 bootstrap/daisyui 的框架,甚至 ant design ,进一步降低你在样式上的选择。先专注于内容,不要在样式上有过多的想法。 |
19
karnaugh 146 天前
@chanChristin 一句话你就看一半的吗。。。。
更具体的解释,可以参考 #17 楼的朋友的回复 同时我再给你复述一下后半句话: [然后去看 tailwindcss 相关的 ui 模板,你需要大量的 ui 布局去构建自己对于页面的审美] |
20
karnaugh 146 天前
@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 146 天前
@karnaugh #19
那为什么不直接学 css 去看优秀模板用 css 写呢?非得走 tailwind 绕一下呢? 至于 #17 的观点我不认同,tailwind 的学习曲线刚上手的时候非常陡峭,对于一个 css 熟手来说也要熟悉一段时间,而且工具越复杂问题越难找,看着官方介绍很牛逼,几个类名就行了,真自己上手用就傻眼了。不说别的,就 17px 这个官方没有定义的你准备怎么写? |
22
laobobo 145 天前
UI 丑的话,你在复习 10 边也没用,这是 设计的活
|
23
karnaugh 145 天前
@chanChristin 首先你最后一个问题暴露了你就没学过 tailwindcss 的事实,tailwindcss 又不是没有变量,非要用的话 w-[17px] h-[17px] xxx-[17px] 就完事了啊
况且 tailwindcss 和 css 又不冲突,里头的类命名都是取自 css 好吧,有的直接用 css 的值,有的是超级常用的就首字母缩写一下,但凡你学过一点,也不会有这么抗拒的感觉 至于 css 优秀模板,你搜搜就知道了,要不是什么整个网站的模板,要不是什么老掉牙的模板网站 目前我接触到的很多 ai 方向的独立站,都是 tailwindcss 直接一把梭就撸出来了 而且 tailwindcss 的模板网站里都是现代化的风格,分门别类的,方便快速看不同的 ui 有哪些不同的样式,刻意练习懂么 |
24
chenzw2 145 天前
https://css.bqrdh.com CSS 可视化
|
25
chanChristin 145 天前
@karnaugh #23
学会了就感觉理所当然 你怎么知道我没学过呢?你写的时候当然很爽,但是后期维护起来看着一两行的类名就欲哭无泪了。 而且我不觉得这个对提升 css 有什么帮助,知道属性的用 css tailwind 都能写,不知道的换 100 个工具都写不出来。 至于你最后说的优秀模板,用 tailwind 能写,用 css 也能写。 |
26
karnaugh 145 天前
@chanChristin 我看懂了,你就是对 tailwind 有很重的偏见,这很正常,又不丢人,但在这嘴硬就贻笑大方了
还维护起来欲哭无泪,你是用 css 画画呢?还是说你屏幕太小代码折行了? 人家楼主问的是提高审美,谁问你提高 css 了 我说 tailwindcss 那边有很多现代化风格的模板,还有分门别类的 UI 组件,可以快速通过大量的案例构建所谓的审美 谁让你去写优秀模板了?没设计师你写得出来么 |