你是如何把ui图较完美的制作成网页的?

chic
  • 1.1k

工作也好几个月了,拿到效果图总是火急火急的切,制作完成后总会发现很多ui还原度问题,哎,我感觉自己也是认真在切图啊,烦烦烦,烦死,反思中……

回复
阅读 4.5k
2 个回答
Humphry
  • 16.4k
✓ 已被采纳

一些还原设计图时减少细节丢失的tips:

  • 设计基础
    如果有设计基础,看到的设计图就不是距离多少像素,而是对齐、重复、相似、对比。有了设计基础可以独立地理解设计图的构成与思路。
  • 与设计师和产品经常沟通
    “这样呢?”、“那这样可以吗”。初步切图后,就应当和设计师一起看一下,问问如何调整、为什么要这样做,以更好的理解设计想要的效果。
    同时,有一些问题会在前端实现的时候抛出,如果不和设计、产品沟通,因为“这样做就更麻烦了”或者“如果这样写那么IE8有点小问题”而擅自主张地实现,自然会让页面视觉或交互打折扣。多沟通才能从设计或产品的角度,捡起这些细节。
  • 从设计意图方面理解设计图
    一些视觉元素的使用,多半是为了达到版式平衡、形成视觉节奏、切合主题、增强情感共鸣、营造氛围、形成风格乃至打造品牌形象。知道设计意图是什么,可以注意到更多为之服务的细节。
    从目的着手,也可以知道视觉和交互的优先级,产品、设计和前端都能够找到同一个明确的努力方向。

当然有工具辅助还是会更好一些的:

  • 前端方面的像素级还原,除了@mcfog推荐的付费工具,还有Firefox的pixel-perfect插件
  • 设计方面,也应该让他们用Markman来标注元素大小、间距等。尤其是对渐变色值、透明度、字号的选取,这些如果设计标好,可以省好多事情

针对后续问题:如何处理line-height?

如果你拿到的设计图是这样的:

图片描述

可以这样量:

图片描述

假设橙色部分是10px,红色部分是18px,那么就应该是:

p{ margin: 10px 0; line-height: 18px; }

字号怎么处理呢?Photoshop CC以后出了一项“复制CSS”功能,可以用于处理字号、圆角、渐变背景等。

题主我看你骨骼清奇,资质不凡,这里有个AlloyDesigner我就送给你了,不要一千八百八十八,不要八百八十八,只要九块九毛八,是九块九毛八。有了它,像素级还原再也不是梦想,还原度不流失不蒸发。