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

非前端/设计同学做自己项目是如何下手?

  •  
  •   firhome · 2019-11-21 16:30:34 +08:00 · 2956 次点击
    这是一个创建于 1830 天前的主题,其中的信息可能已经有所发展或是发生改变。
    看到很多个人项目“样式” 部分都做的很高大上。

    请问一下各位非前端 /设计同学。

    你们是怎么做自己项目 前端表现部分的?用了什么样式库吗?
    23 条回复    2019-11-22 09:48:25 +08:00
    MrCard
        1
    MrCard  
       2019-11-21 16:40:53 +08:00
    还用什么样式库,自己写,圆角加阴影,难看不到哪去
    galikeoy
        2
    galikeoy  
       2019-11-21 16:58:26 +08:00
    再加点几句动画过渡,就差不多了
    hbolive
        3
    hbolive  
       2019-11-21 17:18:39 +08:00
    嗯,如楼上几位所说搞下来,不会比 v2 差。。
    zhaorunze
        4
    zhaorunze  
       2019-11-21 17:30:07 +08:00
    楼上三位有点膨胀
    orzorzorzorz
        5
    orzorzorzorz  
       2019-11-21 17:33:09 +08:00
    扯个题外话,高大上的样式大多数看上去都很难受,真的是强行在动...我自认做不出一个好的设计感主题,索性就不带动画,方便操作为主,最多改改宽高,或者类似于给 label 加上 for 之类的便于键盘操作。
    orzorzorzorz
        6
    orzorzorzorz  
       2019-11-21 17:36:18 +08:00
    这个时候我作为 antd 的 collaborator,也算是提交过一些代码,所以得安利下 material-design 这套设计。
    https://material-ui.com/
    Vegetable
        7
    Vegetable  
       2019-11-21 17:42:50 +08:00
    自己弄呗,个人经验
    先吃透 flex 布局,哪怕是要用框架的 grid,我觉得 flex 布局也是非常必要的,其实半个小时就能玩转

    然后评估好需要多复杂的 UI,如果没有很复杂的,比如像做一个一两个页面的网站,可以考虑自己调样式,如果是比较复杂的,有很多复杂组件,那就用 UI 库.不一定非得看 antd element 什么的,bootstrap 就很不错,semantic ui 也挺好的.

    设计方面,多看 Dribble 之类的,别问,问就是学.
    zarte
        8
    zarte  
       2019-11-21 17:57:44 +08:00
    话说前端的那些人 css 命名有什么规则吗?自己写一个 div 一个类名感觉不够通用。
    yuankui
        9
    yuankui  
       2019-11-21 17:59:41 +08:00
    撸一把 mozilla 的 css 文档,应该就可以上路了~
    yuankui
        10
    yuankui  
       2019-11-21 17:59:58 +08:00
    yuankui
        11
    yuankui  
       2019-11-21 18:03:07 +08:00


    这是我正在做的个人知识管理软件
    ochatokori
        12
    ochatokori  
       2019-11-21 18:43:45 +08:00 via Android
    再整点 js 交互就完美了
    yyh0808
        13
    yyh0808  
       2019-11-21 19:47:29 +08:00
    、、、设计好了,js 写不出来样式一样痛苦,比如我,如果觉得丑可以发上来链接,我可以详细写点建议怎么改好看点
    xdaoo
        14
    xdaoo  
       2019-11-21 20:06:00 +08:00 via iPhone
    css 就用 foundation6 吧,挺好用的
    gabon
        15
    gabon  
       2019-11-21 20:06:05 +08:00 via Android
    bootstrap
    RicardoY
        16
    RicardoY  
       2019-11-21 20:07:10 +08:00 via Android
    去 github 翻一个脚手架 然后对着文档搞搞搞..我菜在学校做是这样..
    encro
        17
    encro  
       2019-11-21 20:44:48 +08:00
    1,模仿;
    2,基于框架开发如 bootstrap4
    3,先设计原型,原型之前有思维导图;
    4,好的设计都是一步一步改出来的;
    5,看一些产品设计方面的书记和 blog.
    zanyxd
        18
    zanyxd  
       2019-11-21 20:47:16 +08:00 via Android
    闲时逛一逛 codepen
    能学到很多骚操作
    dioxide
        19
    dioxide  
       2019-11-21 23:02:16 +08:00   ❤️ 1
    @zarte , 命名是 CSS 编码的一大主题, 方法论有很多: OOCSS、BEM、SMACSS...
    muamua
        20
    muamua  
       2019-11-22 08:14:04 +08:00
    yousabuk
        21
    yousabuk  
       2019-11-22 08:48:47 +08:00 via iPhone
    纯后段,以前简单学过 CSS,JavaScript,几乎没有用过,VUE 礼拜边学边做,也可以做前端了。

    再选个你喜欢的风格的 UI 框架就可以了。推荐:Google MD 风格的 vuetifi
    yousabuk
        22
    yousabuk  
       2019-11-22 08:49:41 +08:00 via iPhone
    手机码字拼错了:vuetify
    alphardex
        23
    alphardex  
       2019-11-22 09:48:25 +08:00
    SCSS 一把梭
    附我之前整理的 CSS 技巧大全: https://juejin.im/post/5dd246baf265da0be72aae4a
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   916 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:36 · PVG 06:36 · LAX 14:36 · JFK 17:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.