V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
xiaopenyou
V2EX  ›  问与答

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

  •  
  •   xiaopenyou · Sep 4, 2015 · 2090 views
    This topic created in 3902 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

    不过看大家的回复,似乎经验成分居多。谢谢前辈们:)
    Septembers
        8
    Septembers  
       Sep 4, 2015 via Android
    @xiaopenyou 思想实验
    kisnows
        9
    kisnows  
       Sep 4, 2015   ❤️ 1
    我一般会先把设计稿的结构分析一下,然后把相同的地方整理出来。
    这样先写结构,然后把相同的地方写出来,也就是组件。
    最后就跟你第一条回复一样,写几句,看一下浏览器。
    好像,也没有什么特别好的办法。
    qiuai
        10
    qiuai  
    PRO
       Sep 4, 2015
    布局-分栏-每一个栏目-浏览器校对细节.
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3286 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 13:01 · PVG 21:01 · LAX 06:01 · JFK 09:01
    ♥ Do have faith in what you're doing.