淘宝移动端页面去设计问题

淘宝移动端页面去设计问题

无线装修一直被关注，官方也不断推出更丰富的无线装修功能和营销玩法，这都是需要我们不断去开拓与研究的，自定义模块与以往的 *** 作习惯可能会有所不同，多去尝试与浏览大店的手法，对于店铺的视觉提升也会有很大的参考意义与帮助。

一、理解无线自定义模块

1、每增加一行格子，高度增加76px;

无线自定义模块的宽度固定为608px，高度可以根据自己的需要进行规划，最小规划为四个小框才可以独立一个子模块，尺寸是152152px，之后每增加一行(或列)格子，便是增加76px。所以我们的高度就很好控制不用时时打开后台去拉一拉格子才能知道尺寸了。

2、自定义模块每张上传后为无缝拼接;

明白这一道理之后，对于我们的版块规划是很有意义的，无缝的好处在于，不管页面设计怎么做，只要大部分内容区是处于这个尺寸里面的，方便点击添加链接，那 么切图出来上传的`时候，不会影响与之间会存在空隙，换句话说，可以拓宽设计师在设计页面的时候，进行叠加每个设计内容，而对产品真正做到“自定 义”的展示。

如上图，三个产品需要切三张，但是自定义上传的尺寸宽度只有228px+152px+228px(排列顺序可以自调)，这个时候我们不必将产品限定在这三个尺寸里，只需将产品按照想要的排版方式排列好，做到大部分内容处于尺寸之内，如有部分溢出问题也不大。

因自定义模块的拉动相对其他图文模块自由，所以其可设计的自由度也就更大。

二、将无线端当成页面去设计，而不是作为容器去填充内容

要摆脱真正的自定义设计，那么就需要跳脱格子限制，正确的方式应该是以格子尺寸为骨架，对应去增加设计页面的内容，以上图的案例为参考，按照常规做法是， 海报应用焦点图模块，优惠券应用多图模块，公告应用左图右文模块，而我们可以尝试的是突破使用习惯，用自定义模块去做占屏比较多的设计版面，这样手机用户 在浏览店铺的时候，海报带来的冲击感会更强烈，与下面的内容进行叠加或者是做背景的处理，整体感也会更强。

可优化的实 *** 做法可以分几步来做：

①分析页面的策划内容，将自定义模块当成页面设计，规划每个内容应给予的篇幅大小，在草稿纸上规划页面大概的排版布局;

②知道每个内容的大概布局之后，可以将内容初步进行排版，拉好参考线;

③由于上传时，的尺寸大小至关紧要，所以在参考线一步需要多注意尺寸不要有误，可以用选区工具拉出规定的尺寸，再拉上参考线，熟悉尺寸会对页面的规划有很大的帮助。

1

打开淘宝助理，输入你的淘宝用户名和密码，点击登录，进入淘宝助理

2

点击所有宝贝就可以看到我们在淘宝上卖的所有商品，点击手机详情，导入页面版详情

3

导入后需要适配到手机合适的大小，点击一键适配，自动适配成功

4

点击添加文字块，输入你店铺的说明和商品信息，你也可以调动和文字的位置，右侧可以预览你手机显示的页面详情

5

修改好以后，我们就可以上传了

6

上传好后我们就可以用手机查看店铺了

本文首发掘金： >为什么移动端css里面写了1px, 实际看起来比1px粗 其实原因很好理解:这2个’px’的含义是不一样的 移动端html的header总会有一句

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。

手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, viewport的好处就在于一套css可以适配多个机型。

在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是

1px变粗的原因： viewport的设置和屏幕物理分辨率是按比例而不是相同的 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

解决方案
1rem解决：

2flexiblejs
这是淘宝移动端采取的方案, github的地址: >