V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
maymay5
V2EX  ›  设计

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

  •  
  •   maymay5 · 159 天前 · 3265 次点击
    这是一个创建于 159 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    26 条回复    2024-07-02 11:46:06 +08:00
    Yukiteru
        1
    Yukiteru  
       159 天前
    UI 设计是美工设计的活,跟前端没有关系。自己独立开发的话直接找几个网站抄就行了
    bojue
        2
    bojue  
       159 天前   ❤️ 1
    zzdgfv
        3
    zzdgfv  
       159 天前
    审美只能多看看别人的产品,多读别人的开源代码
    Leon777
        4
    Leon777  
       159 天前
    审美这东西没个多年熏陶培养不出来
    kneo
        5
    kneo  
       159 天前   ❤️ 4
    学习 HTML/CSS 并不能让你写出好看的 UI ,只能让你以更慢的速度写出通常丑的 UI 。

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

    建议阅读:

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

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

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

    同时我再给你复述一下后半句话:
    [然后去看 tailwindcss 相关的 ui 模板,你需要大量的 ui 布局去构建自己对于页面的审美]
    karnaugh
        20
    karnaugh  
       158 天前
    @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 的思路都断了。。。
    chanChristin
        21
    chanChristin  
       158 天前
    @karnaugh #19
    那为什么不直接学 css 去看优秀模板用 css 写呢?非得走 tailwind 绕一下呢?
    至于 #17 的观点我不认同,tailwind 的学习曲线刚上手的时候非常陡峭,对于一个 css 熟手来说也要熟悉一段时间,而且工具越复杂问题越难找,看着官方介绍很牛逼,几个类名就行了,真自己上手用就傻眼了。不说别的,就 17px 这个官方没有定义的你准备怎么写?
    laobobo
        22
    laobobo  
       158 天前
    UI 丑的话,你在复习 10 边也没用,这是 设计的活
    karnaugh
        23
    karnaugh  
       158 天前
    @chanChristin 首先你最后一个问题暴露了你就没学过 tailwindcss 的事实,tailwindcss 又不是没有变量,非要用的话 w-[17px] h-[17px] xxx-[17px] 就完事了啊

    况且 tailwindcss 和 css 又不冲突,里头的类命名都是取自 css 好吧,有的直接用 css 的值,有的是超级常用的就首字母缩写一下,但凡你学过一点,也不会有这么抗拒的感觉

    至于 css 优秀模板,你搜搜就知道了,要不是什么整个网站的模板,要不是什么老掉牙的模板网站

    目前我接触到的很多 ai 方向的独立站,都是 tailwindcss 直接一把梭就撸出来了

    而且 tailwindcss 的模板网站里都是现代化的风格,分门别类的,方便快速看不同的 ui 有哪些不同的样式,刻意练习懂么
    chenzw2
        24
    chenzw2  
       157 天前
    https://css.bqrdh.com CSS 可视化
    chanChristin
        25
    chanChristin  
       157 天前
    @karnaugh #23
    学会了就感觉理所当然
    你怎么知道我没学过呢?你写的时候当然很爽,但是后期维护起来看着一两行的类名就欲哭无泪了。
    而且我不觉得这个对提升 css 有什么帮助,知道属性的用 css tailwind 都能写,不知道的换 100 个工具都写不出来。
    至于你最后说的优秀模板,用 tailwind 能写,用 css 也能写。
    karnaugh
        26
    karnaugh  
       157 天前
    @chanChristin 我看懂了,你就是对 tailwind 有很重的偏见,这很正常,又不丢人,但在这嘴硬就贻笑大方了

    还维护起来欲哭无泪,你是用 css 画画呢?还是说你屏幕太小代码折行了?

    人家楼主问的是提高审美,谁问你提高 css 了

    我说 tailwindcss 那边有很多现代化风格的模板,还有分门别类的 UI 组件,可以快速通过大量的案例构建所谓的审美

    谁让你去写优秀模板了?没设计师你写得出来么
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   983 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:24 · PVG 04:24 · LAX 12:24 · JFK 15:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.