V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xiaopenyou
V2EX  ›  问与答

求问 视觉稿转成 css 的方法论

  •  
  •   xiaopenyou · 2015-09-04 17:23:52 +08:00 · 1722 次点击
    这是一个创建于 3368 天前的主题,其中的信息可能已经有所发展或是发生改变。

    像写程序,自顶向下、逻辑上分解问题(算法),用伪码 etc.有解决思路后,再逐句翻译成具体代码。是有成熟方法论的。

    但是视觉转 css ,怎样组装 css 代码,最终 bit 还原出视觉稿?这一步骤,有什么资料吗?
    精通 CSS 那本书,也是具体讲常用组件的实现,没升华到方法论和理论层面。要是遇到未知的样式呢?
    是因为这个领域本就没多少理论可挖,没有按部就班的方法论,全在经验积累吗?

    10 条回复    2015-09-04 19:43:42 +08:00
    xiaopenyou
        1
    xiaopenyou  
    OP
       2015-09-04 17:39:41 +08:00
    写 css 时,经常写几行就浏览器看下效果,跟打补丁似的。这感觉就像写程序,写几行就调试下,一样坑爹
    小弟初学,是哪里没理解对,还是写 css 本来就是这样…
    Septembers
        2
    Septembers  
       2015-09-04 17:52:01 +08:00 via Android
    Firefox 有个 3D mode 有助于帮助你理解别人的 DOM 结构
    emric
        3
    emric  
       2015-09-04 17:55:57 +08:00
    脑里想好大概的结构(或者用笔) -> code -> 打开浏览器细调测试
    Septembers
        4
    Septembers  
       2015-09-04 18:01:49 +08:00 via Android   ❤️ 1
    先理解业务再理解视觉设计

    我目前的方法论:吧视觉扔一个假想的平直空间抽象假想 DOM 结构和需要的 style ,再最终实施

    视觉上实现大多数时候比业务实现简单
    zonghua
        5
    zonghua  
       2015-09-04 18:08:24 +08:00 via iPhone
    @xiaopenyou 我现在就是这样坑自己,😂😩
    learnshare
        6
    learnshare  
       2015-09-04 18:15:55 +08:00
    写 HTML 和 CSS 也有一个抽象、复用之类的过程。

    不过简单点,就是拆分、再拆分、再拆分,从大块开始写,逐步细化、填充效果和内容。
    xiaopenyou
        7
    xiaopenyou  
    OP
       2015-09-04 19:04:01 +08:00
    @Septembers 谢谢,小弟好奇的就是「把视觉扔一个假想的平直空间抽象*假想* DOM 结构和需要的 style 」中的「假想」这一心理过程,是有成熟方法论的(按照一套操作步骤必能"假想"出),还是更多靠经验(点点积累 什么样的视觉假想出什么样的 dom&style )。

    不过看大家的回复,似乎经验成分居多。谢谢前辈们:)
    Septembers
        8
    Septembers  
       2015-09-04 19:05:23 +08:00 via Android
    @xiaopenyou 思想实验
    kisnows
        9
    kisnows  
       2015-09-04 19:19:05 +08:00   ❤️ 1
    我一般会先把设计稿的结构分析一下,然后把相同的地方整理出来。
    这样先写结构,然后把相同的地方写出来,也就是组件。
    最后就跟你第一条回复一样,写几句,看一下浏览器。
    好像,也没有什么特别好的办法。
    qiuai
        10
    qiuai  
       2015-09-04 19:43:42 +08:00
    布局-分栏-每一个栏目-浏览器校对细节.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   981 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:56 · PVG 03:56 · LAX 11:56 · JFK 14:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.