首页 > 网页教程 > 设计分享 > 移动端详情页设计:排版 构图 色彩 氛围点缀 字体怎么做?

移动端详情页设计:排版 构图 色彩 氛围点缀 字体怎么做?

时间:2017-08-01    来源:人人都是产品经理

本文依然是关于详情页设计,涉及到了排版/构图/色彩/氛围点缀/字体等多个方面。以下是我总结了可以让你的详情页脱颖而出的四个系列的套路,兴许对你们有用!

一、头图一定要吸引人

那么,怎样才能吸引人呢?我给大家总结了一些关键词:

关键字:大

头图得有一个占比比较大的作为主体,无论是产品/模特还是文字,可以第一眼就抓住人眼球。

(模特作为主体)

(产品作为主体)

 (文字作为主体)

 (当然也可以局部放大)

关键字:破

如果你不想画面太过于保守和单调,可以尝试打破它,比如将规矩图形异化,或者让产品放在界限以外。

(这是我年初做的一款茶叶详情页,当时的包装无论是颜色还是样式都是比较普通的,作为设计师的我能做的是尽量让它更具创意一点,于是就打破了它。)

关键字:美

能用美女或帅哥的地方千万别浪费了,因为当用户在浏览这些页面的时候,会感觉是有一位美女或帅哥在对你解说或者让用户觉得自己也能成为美女或帅哥一样,使人身心愉悦,比单纯放产品图更能打动人(前提是你确实用的是吸引人的美女或帅哥,所以审美真的很重要啊~)

如果可能的话,尽量用品质好一点的产品图或背景素材,使画面显得更加美观(当然了,这个还是需要审美能力……)

关键字:飘

有时在画面里添加一些飘动的元素,可以增加画面的层次感和热闹氛围。

关键词:脑洞

这个脑洞,可以是技术方面的也可以创意想法方面的,技术方面的比如合成/手绘/C4D与构图的运用,创意想法方面其实就因人而异了,并没有什么固定的套路,然后你能用你所掌握的技术把这些创意想法表现出来就行。

来自小文同学的手绘+合成作品

作品来自behance的C4D+合成作品,不过这个花费时间应该不少。

来自behance上的TIMAWORKS团队的作品,用到了C4D+摄影+合成+手绘

不过但凡是涉及到这么多脑洞和技能方面的作品所需要花费的时间和精力都会比平时多很多,而目前大部分详情页设计给的时间是估计2-7天,更有一些设计师一天要套版十几个详情页,所以如果时间不允许的话就自己私下做练习来让自己的作品更具吸引力吧,每天抽出一点时间,一个星期或一个月下来也够了。

其他还有一些关键词我们以后再补充!

关键字:光影

没有光影的画面会显得干瘪瘪的,光影的存在会给画面增加更多真实感和质感,赏心悦目,档次一下就提升了。

相同一款产品,有光影和没光影给人的感觉差别真的很大,如下图所示:

(加了光影和背景纹理后,产品整体的气质和档次都提升了,当然光影的形式也是千种万种的,主要取决于你自己想怎么表现了)

但实际产品长这样。。。如果你知道实物长这样你估计就不会买了对不对?所以美真的很重要。。。,况且还是三四百块钱的护肤品呢~

二、整体风格要连贯

那么怎样才能吸引人呢?我给大家总结了一些关键词:

关键词:提取

既然详情页是为介绍产品而用的,那么我们在做设计的时候当然就可以用提取法了,比如提取产品包装上的元素或形状,提取产品的色彩或质感,提取产品的成分或功效,然后应用在详情页设计里,例如:

元素,我们可以从产品包装上提取元素应用在详情页设计里,保证整体风格连贯性。

形状,我们也可以从产品的形状着手,提取基本型进行构图创作,同様也可以保证统一连贯性。

色彩,如果你想要页面在色彩上保持连贯,也可以从产品本身的颜色出发,比如采用近似色或对比色也可以。

质感,善用产品的质地或包装的质感纹理,并提取出来做详情页背景用。

成分,食品美装护肤品详情页最喜欢用产品的成分来做文章了,比如草本植物/芦荟海藻提取物/蜂蜜牛奶等等。

相关推荐
电商商品详情页如何通过设计提升转化率?
最新Web设计8个趋势:视差滚动 响应式设计等
Web设计师如何创建适合Retina显屏设备的图片教程
10个漂亮实用并附带源码的Web设计教程分享
什么是扁平设计?如何创建扁平化设计风格?
2014年Web网页设计的10大发展趋势前瞻
最新的七个WEB设计趋势及其生存技巧预测
网页教程:响应式Web设计的9项基本原则
展望未来成为主流的Web设计七大趋势
网页设计已死?如何看待近几年网页设计发展前途?
Web后台设计易被忽视的组件技巧
Web页面中的表格设计如何才能做得更好?
高用户体验的表单设计该怎么做?
电商产品设计感想:你真的认识购物车吗?
交互设计:利用控制感,为用户体验加分
如何创建最佳的移动设计?七个用户体验设计小Tip
中文网页设计排版之破格的好例子
对齐是排版的基础技能 也是设计师的基本功
设计基础功!彻底掌握设计中的对比原则
设计教程:写给网页设计新手的10条实用法则
四大设计趋势教你如何你玩转2015年网页设计
网站策划:帮你掌握图文排版的5个小技巧
腾讯设计实战!响应式Web布局的概念和实践方法
7个技巧帮你设计出用户体验极佳的网页表单
UI布局设计:文章列表与内容详情页设计案例赏析
网页首屏设计:让用户一见钟情的设计模式是什么?
UI设计教程:从零开始做APP之界面设计篇
跨屏幕的响应式设计如何做好用户体验?
CSS酷站网页水平条经典设计欣赏
欧美CSS酷站网页背景设计之光影特效赏析
酷站欣赏之欧美棕色调网站设计案例赏析
如何基于心理学设计的目的来制作受用户欢迎的网页
二十款网页图文混排设计样式欣赏
黑色的艺术:三十款暗黑色调的欧美CSS酷站欣赏

精彩推荐

热门教程