无线终端详细页面设计要点分析

发布时间:2020-07-07 11:13:00

在这里,慕林视觉科技和美容产品暂时上市。在天猫的两大类中,产品详情页面相对重要。另外,可能是母婴范畴。建议您在查看详细信息页面时查看这两个类别。不过,对于PC的页面设计来说,服装和美容的设计比较好,所以你可以多注意这些类别。当然,也会有其他品类的个别商铺尤为突出,值得关注。

在无线终端交易比例远远超过PC的情况下,无线页面的设计已经成为各大卖场产品细节页面的重中之重。作为一个专业的艺术家,有必要对无线终端进行优化!你知道无线终端详情页的设计要点吗?

对于品牌来说,最重要的一定是产品,所以我们先来谈谈产品详情页面,它直接决定了转换跳跃和交易。让我们来看看2016双11 TOP的科技与美容产品详情页。

在这里,慕林视觉科技和美容产品暂时上市。在天猫的两大类中,产品详情页面相对重要。另外,可能是母婴范畴。建议您在查看详细信息页面时查看这两个类别。不过,对于PC的页面设计来说,服装和美容的设计比较好,所以你可以多注意这些类别。当然,也会有其他品类的个别商铺尤为突出,值得关注。

很直接的看出,图中的那些东西从颜色到结构再到尺寸都更适合无线浏览。同时看小米,所有产品都是根据无线终端做的,包括PC终端!

这是一个总结

无线终端上每个屏幕的内容都需要有更明显的分割形式,比如标题和数字差异化。不要用重口味的横幅

无线终端的最小字符大小也需要PC终端最小字体大小的150%(要求1080px宽度的200%以上);

由于手机的像素精度远高于PC,以iPhone为例,分辨率为1080x1920,无线终端的详细尺寸要求大于750px。因此,如果想达到效果,可以根据1080的宽度进行设计,而内容高度也根据这个高度进行调整。如果你想看看区别,你可以扫描上面的代码,并与其他数字进行比较。

因为有很多品牌的产品,很多不同的细节页面都会推出。这里给出的方法是模板化详细页面布局,这是一个更好的方法。当然,主推应该有不同的模板。同时,应准备多套模板,包括促销活动中的促销展示。您可以准备多组模板,在进行重要设计时,可以重新设计并将其添加到模板库中。这样,在后续的复制过程中,不同阶段遇到的问题都会得到一点优化,就像app和手机的变化一样,慢慢的会更加。

无线终端与PC机的区别如下:

显示PC的分辨率为1920x1080,为16:9(例如,21英寸显示器的标准分辨率)。无线终端的分辨率为1080x1920,即9:16(例如,iphone7plus的分辨率)。由此,我们可以看出手机上的图像为何如此清晰。同一分辨率区域减小,精度更高。

如果具有相同像素宽度和高度的图像位于下图左侧的PC侧,则无线终端就是图片右侧的效果

在PC机上阅读时,如果从左到右的跨度过大(图1和图2),会很累,所以我们通常会限制显示宽度。另一种是中间形式,设计感很强。事实上,在大多数情况下,手机不适合大段落的中间布局(图3)。下面是一个我们每天都要用到的百度例子,如下图所示。

PC端用户行为如下:

1、上下滑动(动态效果参考前两年非常流行的H5鼠标,现在有很多);

2、鼠标悬停触发和单击行为(这是我们使用的最常见的操作,它不仅限于网页,

如果有一个在计算机上执行的大多数操作的列表,它肯定会在列表中);

3、按键输入(这还不算太多,会用搜索内容,还有问卷等形式和互动站互动会用);

无线终端的用户行为不同于PC机

上下滑动(采用上下手动滑动的作用,动作设计与惯性停止相同);

无论是新手还是老艺术家,都需要重新学习,不断充实自己,才能在淘宝艺术家的道路上走得更远。慕林视觉,杭州淘宝艺术培训的摇篮,_手资料,最前沿的艺术技能和知识!