首页 > 如何根据UI提供的设计稿写页面?

如何根据UI提供的设计稿写页面?

首先,本人是个菜鸟,有很多疑惑,麻烦各位耐心解答下,谢谢!

最近拿到设计稿,尺寸宽度是1920px的,那我想问下:

1、如果是固定布局,譬如我想制作固定宽度为1200px的页面该如何切图;

2、自适应布局或响应式布局,又该如何切图呢?


你不是不会切图,而是面对众多种切法,不知要选哪个

在众多的组合方式中,希望找到一个最优解,这是犯了完美主义病了。

这种地方是不该花时间的,最重要的绝对是最终效果,而非实现细节

只要确定了时间点,作品自然就出来了。


一般来说,图片都是一样的图片,你可以写缩放来适应不同比例的设计就可以了
不过一般来说,切图的话,我们都会让图片去适应最高分辨率,低于此分辨率的也会使用最高分辨率即可
当然PC和移动的话,最好还是写响应式去分开图片,毕竟PC的图片比较大


1、切图就是按照平时那样切,但是如果是响应式,那就要输出多种尺寸的图片资源,从PC到mobile。
我就建议用ps cc 2015的抽取资源(快速导出为XXX)方法,可以快速方便的抽出各种尺寸的图片资源。
http://www.uisdc.com/photoshop-trivial-knowledge-5
然后用媒体查询等方法去加载背景图片。
2、如果是响应式设计。最好是有多个屏幕尺寸设计图。这样布局等问题就不用你去思考。
不然的话你就只好自己主观去排一下。


总的来说:
一、兼容最小分辨率;比如1024,在兼容最小分辨率的前提下再去考虑最大分辨率。
兼容最大分辨率;比如1920。
有的页面主体宽度是1000px,banner处有1920,背景色,背景图等等.

二、设置viewport


  1. 如果是固定宽度,可以把设计稿的尺寸修改大小变成你页面的宽度,然后再去切图,写页面html和css

  2. 如果是响应式,根据响应式viewport的尺寸,修改设计稿的尺寸,然后再去切图

【热门文章】
【热门文章】