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

诚心问:后端大佬们都是怎么做网页设计的?

  •  
  •   poorcai · 2022-09-29 10:13:54 +08:00 · 7794 次点击
    这是一个创建于 537 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是很菜的后端,对前端页面布局、样式等更是知之甚少,有时候想自己写个小网站或者小程序啥的,都是像打补丁一样写一些基础的 css 慢慢调整,很难做到好看,所以也特别羡慕那些做出来很好看的小程序、app 的大佬。

    所以想问一下大家都是怎么搞前端设计、样式开发的?有没有什么学习路径或者资源?

    第 1 条附言  ·  2022-09-29 13:05:03 +08:00

    看了大家的回复,总结出自己想到的两个方案:

    • 使用市面上的组件库,来完成一些基本的样式;
    • 使用 tailwind 或者 bootstrap 等 css 库来写剩下的一些页面样式。
    54 条回复    2022-09-30 12:12:54 +08:00
    c332030
        1
    c332030  
       2022-09-29 10:16:56 +08:00
    ant-design 考虑过吗,直接用,我觉得默认样式也不错
    lisongeee
        2
    lisongeee  
       2022-09-29 10:17:12 +08:00
    大部分前端也是靠 ui 给的图做的,ui 出的图是什么样子,我就做成什么样子
    ccyu220
        3
    ccyu220  
       2022-09-29 10:17:44 +08:00
    在自身没有美术设计能力的前提下

    最佳途径:借鉴(抄能力)

    不然就是找组件库,下限起码比自己瞎琢磨高
    magiconch
        4
    magiconch  
       2022-09-29 10:17:55 +08:00   ❤️ 3
    说实话,做出好看的页面难点不在开发,在于你的设计和艺术审美
    HAWCat
        5
    HAWCat  
       2022-09-29 10:18:24 +08:00
    参考平面设计素材网站
    poorcai
        6
    poorcai  
    OP
       2022-09-29 10:18:56 +08:00
    poorcai
        7
    poorcai  
    OP
       2022-09-29 10:19:29 +08:00
    回复上条,我确实用的组件库,但是里面依然是缝缝补补😂
    poorcai
        8
    poorcai  
    OP
       2022-09-29 10:20:25 +08:00
    @ccyu220 #3 有时候有了组件库,但是还有布局问题,比如我在 PC 上浏览可能还好,但是移动端就没有做适配,很难看
    lancelock
        9
    lancelock  
       2022-09-29 10:20:54 +08:00
    这是产品和 ui 的活,为啥你要自己搞。
    如果是管理后台类的那就简单了,现成的组件库直接用就行了
    poorcai
        10
    poorcai  
    OP
       2022-09-29 10:25:14 +08:00
    @lancelock #9 不是给公司做,我的意思是自己私下做的时候。
    dreasky
        11
    dreasky  
       2022-09-29 10:30:49 +08:00
    找个美工老婆
    muchenlou
        12
    muchenlou  
       2022-09-29 10:32:29 +08:00   ❤️ 1
    @dreasky 老哥有介绍吗?
    sunhuawei
        13
    sunhuawei  
       2022-09-29 10:33:57 +08:00
    同后端,非大佬,最近上线了一个网站,曾有相同的疑惑。我的做法是模仿,模仿业界的成熟方案。组件的话我推荐 arco.design 。css 我用的 tailwind ,我认为很顺手。至于怎么做到很好看,我经常在 b 站刷到 css 实现 xxx 的视频,能带来不少灵感
    qzhai
        14
    qzhai  
       2022-09-29 10:37:09 +08:00   ❤️ 17
    我是前端,
    好不好看 全指望设计。
    自己做东西依赖框架的默认设计规范也是可以的,这里推荐几个。

    https://getuikit.com/ (专门给 WordPress 做主题的,偏向官网、博客 且是响应式)
    https://semantic-ui.com/ (响应式)
    https://daisyui.com/ (基于 Tailwind CSS ,偏向后台)
    https://vuesax.com/ (基于 vue ,偏向 pc )
    https://mui.com/zh (基于 react 偏向 pc )
    https://vux.li/ (基于 vue 移动端)
    https://mobile.ant.design/ (基于 react 移动端 偏工具)
    poorcai
        15
    poorcai  
    OP
       2022-09-29 10:44:47 +08:00
    @sunhuawei #13 谢谢老哥的回复
    poorcai
        16
    poorcai  
    OP
       2022-09-29 10:45:11 +08:00
    @qzhai #14 哇,感谢感谢
    poorcai
        17
    poorcai  
    OP
       2022-09-29 10:54:30 +08:00
    @sunhuawei #13 既使用组件,又使用 css 库,会不会打架呀?
    sunhuawei
        18
    sunhuawei  
       2022-09-29 10:59:28 +08:00
    @poorcai #17 这个暂时没有发现,arco 定义类名会加 arco 前缀
    fiypig
        19
    fiypig  
       2022-09-29 11:09:23 +08:00
    我前端也是这样,要蓝狐来写,不然自己写也是很凑,如果自己瞎写的话,就整体对齐就好看多了
    lp7631010
        20
    lp7631010  
       2022-09-29 11:18:06 +08:00
    好家伙 后端还要搞设计吗 搞搞前端也就算了 设计都要插一脚啊
    zhouyg
        21
    zhouyg  
       2022-09-29 11:21:30 +08:00
    估计跟技术无关,可以先用 Figma 自己画一下,等画得好看了再来思考技术相关的事情
    angrylid
        22
    angrylid  
       2022-09-29 11:23:24 +08:00 via Android
    或许你需要的只是一个设计师
    stimw
        23
    stimw  
       2022-09-29 11:23:54 +08:00 via iPhone
    买了 taiwindui ,里面有组件和模板,照着抄。。
    pengtdyd
        24
    pengtdyd  
       2022-09-29 11:26:50 +08:00
    很简单,淘宝几块钱就可以买上千套 UI ,直接套皮就行了
    ospider
        25
    ospider  
       2022-09-29 11:28:51 +08:00
    珍爱生命,远离 antd
    LHRUN
        26
    LHRUN  
       2022-09-29 11:30:33 +08:00
    三大利器,圆角、阴影、渐变
    albert0yyyy
        27
    albert0yyyy  
       2022-09-29 11:31:23 +08:00
    bootstrap 挺好的
    xiaohouzhi
        28
    xiaohouzhi  
       2022-09-29 11:36:19 +08:00
    有没有可能是因为人家是有设计稿的
    mooyo
        29
    mooyo  
       2022-09-29 11:38:05 +08:00 via iPhone
    用 antd 套模板 没有模板的页面一律不写
    laolaowang
        30
    laolaowang  
       2022-09-29 11:38:32 +08:00
    不光后端, 前端没有 UI 的图,很多人也无法写出漂亮的页面
    CantSee
        31
    CantSee  
       2022-09-29 11:53:58 +08:00
    不做
    poorcai
        32
    poorcai  
    OP
       2022-09-29 13:02:09 +08:00
    @ospider #25 为啥?现在只有 antd 在三大框架是全的吧?
    poorcai
        33
    poorcai  
    OP
       2022-09-29 13:02:40 +08:00
    @lp7631010 #20 没看到我是说在自己做项目的情况下吗?
    poorcai
        34
    poorcai  
    OP
       2022-09-29 13:03:16 +08:00
    @LHRUN #26 哈哈哈哈被你懂麻了
    MengiNo
        35
    MengiNo  
       2022-09-29 13:13:17 +08:00 via Android
    想到刚学写代码的时候 #ccc #000 #fff 一把梭,整个页面只有黑白灰。 当时也觉得就是能区分出来,有办法验证功能就好。果然还是适合做后端。
    ggbond2
        36
    ggbond2  
       2022-09-29 13:17:01 +08:00
    如果不要求那么花哨的页面。 功能完整,布局简洁就行的话。 可以尝试下我的低代码平台,前端页面简单拖拖。 majiang.co
    hjq632233317
        37
    hjq632233317  
       2022-09-29 13:28:04 +08:00
    有好些地方是需要设计给设计个刚刚好的图片 图标什么的 还有色值 那你上来啥都没有咋好看 总不能所有的地方都用 css 写吧
    Ashore
        38
    Ashore  
       2022-09-29 13:33:36 +08:00
    找设计出设计图,跟着设计图来画页面不就行了。
    hanxyan12
        39
    hanxyan12  
       2022-09-29 13:35:05 +08:00 via Android
    网站设计主要依赖设计师吧。可以去 figma 社区淘宝或者设计稿资源网站,直接就能搜到很多设计稿源文件。拿到设计稿后微调,图标额外去图标网站找,你就有一套自己的 ui 啦
    lambdaq
        40
    lambdaq  
       2022-09-29 13:37:11 +08:00
    其实 LZ 想问如何设计漂亮的版式和色彩搭配。。。

    俺也想问这个问题。
    lp7631010
        41
    lp7631010  
       2022-09-29 13:40:51 +08:00
    @poorcai 自己做项目也可以把设计分给别人弄啊 我接项目 设计和前端都给同事弄了 分(拿)出去点钱 少操点心 专业的人干专业的事
    idblife
        42
    idblife  
       2022-09-29 13:43:44 +08:00   ❤️ 1
    y0bcn
        43
    y0bcn  
       2022-09-29 15:40:19 +08:00
    后台 layui 前台 vue
    NoString
        44
    NoString  
       2022-09-29 15:58:54 +08:00
    找个 vue 的组件库 用默认的,肯定比我自己折腾的好看
    kkshell
        45
    kkshell  
       2022-09-29 16:28:21 +08:00
    找个好看得抄就完事了
    poorcai
        46
    poorcai  
    OP
       2022-09-29 16:44:59 +08:00
    @idblife #42 我靠,这是另类吗?😅
    Joker520
        47
    Joker520  
       2022-09-29 16:48:18 +08:00
    要有大的阅览量,然后就是抄抄...copycopy...
    yagamil
        48
    yagamil  
       2022-09-29 17:28:19 +08:00
    抄的前提 也是得要知道有哪些好看的库 可以抄。 不然一直在 bootstrap 折腾(鄙人就是)
    davionnini
        49
    davionnini  
       2022-09-29 17:54:25 +08:00
    一句话,能看就行
    v2exblog
        50
    v2exblog  
       2022-09-29 19:48:36 +08:00
    就学最基础的 js 和 css 。vue 都不敢碰,水太深学不懂
    margoxlive
        51
    margoxlive  
       2022-09-29 19:50:55 +08:00
    如果要培养审美和提升设计能力,可以多刷 dribbble 或者 behance.
    irytu
        52
    irytu  
       2022-09-30 03:12:54 +08:00 via iPhone
    就跟提升代码能力的时候 多看优秀的代码一样 你也可以多看好的网页设计 做参考
    zhuweiyou
        53
    zhuweiyou  
       2022-09-30 10:42:05 +08:00
    说认真的,后端不建议学前端.
    uni
        54
    uni  
       2022-09-30 12:12:54 +08:00
    我一个前端也想问这个问题,每次看到别人的个人主页好好看都觉得好羡慕,尤其是做前端的个人主页做得好看我觉得是加分项啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5407 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 08:25 · PVG 16:25 · LAX 01:25 · JFK 04:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.