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

各位前端在拿到设计稿后的“作业”流程是怎样的?

  •  1
     
  •   un · 2014-08-18 14:43:21 +08:00 · 7412 次点击
    这是一个创建于 3729 天前的主题,其中的信息可能已经有所发展或是发生改变。
    是直接开始敲 HTML & CSS 还是做什么准备?
    我发现自己现在的效率比较低,设计转化成页面的时候修改频繁。想了解下大家有没有好的“工作流”。
    31 条回复    2014-08-20 16:30:11 +08:00
    RoshanWu
        1
    RoshanWu  
       2014-08-18 15:01:03 +08:00   ❤️ 1
    无非就是写一些脚本让把一些重复的劳动交给机器做咯,用到的工具推荐有:Grunt, Gulp, Broccoli.
    另外,小众一点的有(我指的是前端):Rake, Make, Applescript 等等。
    楼主可以看看 Github 一些比较优秀的项目,学习学习人家是如何组织代码如何优化流畅的。
    RoshanWu
        2
    RoshanWu  
       2014-08-18 15:01:41 +08:00
    优化流程,什么破输入法,呸。
    Tonni
        3
    Tonni  
       2014-08-18 15:11:42 +08:00   ❤️ 7
    拿到设计稿,把产品经理、美工全部叫过来问“就这样,不改了?”,得到他们肯定的答复后,拿出事先准备好的合同,签字、按手印。
    perrywky
        4
    perrywky  
       2014-08-18 15:13:03 +08:00
    @Tonni 哈哈,点个赞!
    un
        5
    un  
    OP
       2014-08-18 15:14:46 +08:00
    @RoshanWu 其实我想了解的不是使用工具自动化预编译、minify 这些。而是在开始敲代码之前做的工作,比如把设计稿中的配色抽出来、把一些元素抽象成模块、抽出主要的内外边距等。
    un
        6
    un  
    OP
       2014-08-18 15:16:00 +08:00
    @Tonni XD
    kokdemo
        7
    kokdemo  
       2014-08-18 15:17:24 +08:00
    告诉他们“效果就这样了,谁要改,砍死他!”
    RoshanWu
        8
    RoshanWu  
       2014-08-18 16:00:47 +08:00
    @un 哦,你指的是这个啊,我的经验是: https://github.com/roshanca/kh-demo-web/tree/master/source/_sass
    tushiner
        9
    tushiner  
       2014-08-18 16:04:17 +08:00
    @Tonni 我都是开着玩笑说“谁要改,死全家”,然后严肃的补充一句“我不是开玩笑的”。。。
    bsbgong
        10
    bsbgong  
       2014-08-18 16:20:37 +08:00
    我不是专业前端,目前兼做着。
    修改频繁是经验不够,不断总结就好了。
    一般是先分析是否有可分离的公共template,比如下拉框,弹出框,列表等等。
    然后就是正常的html/css。
    CSS是在实践中无限学习的,不断更新你的知识,优化你的思路。
    P233
        11
    P233  
       2014-08-18 16:31:21 +08:00   ❤️ 3
    0 我用 Sass
    1 根据 PSD 创建常用的 颜色,字体 等变量
    2 分析可复用的样式,比如 title, button,input,ul 等,创建 %placeholder, @mixin,或者直接 class ,(这些样式一般不包含 width height 等)
    3 拆分页面结构,创建相应的文件,比如 header.sass footer.sass sidebar.sass 等,也会创建对应页面的 sass 文件
    4 创建插件需要的样式文件,比如 datepicker.sass

    我都是先写 CSS 再写 HTML, 因为 CSS 修改方便,HTML 改来改去就很花时间了
    edward1992
        12
    edward1992  
       2014-08-18 17:06:54 +08:00
    @P233 用sass的话,你应该是在ror的框架下开发前端吧?还是说,sass现在ror以外的开发流程里也能用?
    P233
        13
    P233  
       2014-08-18 17:21:29 +08:00
    @edward1992 Sass 只是提供了更便利的 CSS 书写模式,可以用在任何项目中,毕竟我们需要的只是编译后的 CSS
    Tankpt
        14
    Tankpt  
       2014-08-18 18:36:25 +08:00
    @Tonni 黑的好厉害。不过好赞
    spark
        15
    spark  
       2014-08-18 18:41:03 +08:00 via iPhone   ❤️ 1
    无非就是把可复用的部分分离出来, 如果用 Sass 就分离 partial, 以后用到就不用重复劳动了。

    推荐几个工具:

    * Yeoman (推荐用 gulp 代替 grunt)
    * Compass
    * Slicy
    * ImageOptim
    * NameChanger
    Biwood
        16
    Biwood  
       2014-08-18 20:44:20 +08:00
    @P233 先写CSS在写HTML,这样也行吗,无法想象
    mcfog
        17
    mcfog  
       2014-08-18 20:51:46 +08:00   ❤️ 1
    http://alloyteam.github.io/AlloyDesigner/

    大路货就不重复了,推荐个小众的工具,可以把设计稿半透明然后铺到半成品页面上
    JamieSoung
        18
    JamieSoung  
       2014-08-18 22:01:55 +08:00
    @Tonni 不得不赞...
    JamieSoung
        19
    JamieSoung  
       2014-08-18 22:02:23 +08:00
    @mcfog 这是像素级还原...
    skyshy
        20
    skyshy  
       2014-08-18 23:08:46 +08:00   ❤️ 1
    直接开始敲?开什么国际玩笑 。(哼!设计师已经有点儿不想理你了。)

    难道就不分析,想一想?总之还得要对整体能有大体把握,对时间和技术有所预期。
    当然还有很多要做事情的,包括前端规范文档,前端用到的框架,前端兼容性级别,前端项目的部署等等,很多都是经验积累,有些在过程中也要做的。

    过程中也可能遇到这样那样的问题:

    1.技术瓶颈:及时提出,大家一起探讨。有可能是自身技术限制,也可能目前环境下技术不能实现。好学是一种本能,但不要做所谓纯粹的伸手党。

    2.需求变更:明明做得很完美了,可是需求变了,你又得重新来。那么你得反思一下自己,编写的扩展性好不好,模块化合不合理……另一方面,需要不断和产品经理、设计等沟通,多从他们那里获取更多的可用信息,同时要大胆说出自己的想法。不要以为一直忙着编写效率就高,想法很重要,也许你白活了一天,人家三下五除二立马就给你解决了。
    ……

    还有很多事情,不想说那么多了,因为已经很乱了。总之这是一个学习和积累的过程,记录笔记,不断的总结和思考,站在巨人的肩膀上,像上帝一样地思考。

    后来,你会发现自己做起来越来得心应手,胸有成竹。

    设计师都等着被勾搭一下,真是没情趣的孩子,至少问一下有没有男/女朋友,唉。

    不喜勿喷,就酱,有人喊我睡觉了
    O21
        21
    O21  
       2014-08-18 23:10:20 +08:00
    我看你见头像。。我以为我好被盗了。。怎么自动发帖了
    devqin
        22
    devqin  
       2014-08-19 00:06:27 +08:00
    @Biwood 他的意思应该是,写公共样式,大体布局
    Tonni
        23
    Tonni  
       2014-08-19 00:38:50 +08:00 via Android
    @skyshy 说的很赞👍
    un
        24
    un  
    OP
       2014-08-19 00:59:24 +08:00
    @skyshy 感谢已送。我这样的提问确实做了伸手党。你提到的问题我多少有考虑到,但还没有深入的去想,或许我应该自己先做些总结。
    un
        25
    un  
    OP
       2014-08-19 01:10:00 +08:00
    @skyshy 又看了遍。“设计师都等着被勾搭一下,真是没情趣的孩子,至少问一下有没有男/女朋友” 意思是搭讪设计妹子也是流程的一部分么 - -)。get√
    P233
        26
    P233  
       2014-08-19 02:21:50 +08:00
    @Biwood Sass 提供了很多便利

    比如 #header > #header-logo + #header-menu 这个结构

    Sass 可以这样写

    #header
    &-logo
    &-menu

    这样就能体现出 HTML 的结构了
    hkongm
        27
    hkongm  
       2014-08-19 10:11:16 +08:00
    yeoman+gulp
    angusjune
        28
    angusjune  
       2014-08-19 10:30:46 +08:00
    Adobe的project parfait
    https://projectparfait.adobe.com/

    作用如同它的Slogan:"Extract everything you need from PSD comps - in your browser"

    可以直接获取psd中的css 导出特定图层为图片 等等
    不过我觉得仅仅适合作为辅助功能 比如说快速取色啊 快速导图啊(不用去切片了) 快速获取绝对位置啊 之类的
    连接速度有点慢 而且对于比较大的psd比较无能
    adspe
        29
    adspe  
       2014-08-19 11:13:31 +08:00
    嫌烦的话CSS可以用个CSS Hat
    SASS可以用Nesting
    Bantes
        30
    Bantes  
       2014-08-20 09:46:33 +08:00
    @Tonni 点赞
    RaymondYip
        31
    RaymondYip  
       2014-08-20 16:30:11 +08:00
    @Tonni 正解
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1105 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:31 · PVG 03:31 · LAX 12:31 · JFK 15:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.