切换风格

Snow
1234下一页

866

主题

882

帖子

1万

积分

亿洋管理员

Rank: 9Rank: 9Rank: 9

积分
15981
QQ
老板只给了几张产品图,如何做一套完整的电商详情页?[复制链接]
发表于 2021-4-9 08:07:02 | 显示全部楼层 |阅读模式
                                                                                                   


hello,大家好
我是亿洋

最近有同学反映,对于详情页设计总是没有思路和想法,今天就给大家安排!根据这位同学提供的电器类目的蓝牙音响作为案例讲解,通过前期的设计思路到设计执行来进行讲解分析,如果你能够认真看完相信你一定会有所收获,对于大家在日后的工作当中制作一款好的详情页会有一定的帮助,废话不多说,莱斯够~(底部有彩蛋~)

a14ce6867ce00c22cb2c834409bcf06c.png

我们先看下这位同学前三屏页面展示,以场景化为主,画面相对简约单一,没有清晰的卖点可视化设计,图文搭配匹配度不高。

6ac115f92ab4f8163a094db2cdb40225.png



我们在开始制作详情之前需要对产品和品牌做一下简单的分析,千万不要着急打开PS撸图,不然后面的返工会让你变成绝望.jpg……

12e2c6f7f8d5086e6a93a1cc76b66699.png

OK,一顿操作猛如虎,一问工资2500……

92b8f6ec8d25f68e3e4141e14c7b197f.png

收~我们做好策划分析之后先去找下大概的参考效果,可以考虑换一种思路去制作,以体现产品科技感和智能化。这里进行一定的调整,只为给大家分享一个详情页的设计思路,要不然按照原品牌去设计是没有什么看点的,只能进行简单的排版和纯色展示,大家也学不到太多的东西,你懂得。


ca57839316b3e8ae476a5c18ad7cce08.png

找了几个参考发现大部分的蓝牙音响做的效果都是暗色调,加了一些光效之类的素材,让画面看上去更加的有质感,也会比较容易出效果。
所以我们参考这种风格形式,再结合产品自身品牌的调性进行一个前期的分析和考量。

OK,下面我们开始进行制作修改。

首先看一下我们所有能用到的产品素材都有哪些:

b355ba3a3087a0518044d263029dba83.png
就给这几张白底产品图?你没看错,就用这4张产品图,我们要完成一个详情页!


c77a0bc9fff1548c11b62f5589d1ac7c.png


根据产品原详情页我们提取出相对应的文案并进行一定的修改调整。

d2aa808ba6b2c4bd5ac929200ca1caf7.png

首屏用一个产品图和4个图标卖点组成,这个地方直接用了重叠手法,这样首屏和下面的卖点有一个连接性,让画面看起来更连贯,同时也可以遮住圆台下方的瑕疵,一举两得。
下面直接按照卖点的框架去进行单屏制作。


1.360度环绕音响
56cf6e3f527d5da3928296f8016b61b3.png


2.音效震撼嘹亮
b080ee7aedc052d8d032649a25b16def.png

3.防水贴心设计
1ac1e2aa11c9c5089cfc734ad130aeac.png

4.12小时续航
1303193b9768c96f7f45032ee59e566e.png

上面4屏把产品主要卖点进行了一个单屏介绍,由于详情页前几屏是非常重要的,所以我们尽量把主要的核心卖点进行优先展示,那么下面的可以以产品的细节,外观,其他功能等进行展示即可。

2796459b072d59c9edc31791703381ee.png

6f70e8b3c1ef0373a4253cea546a32ab.png

d7f3fc29c360a34a78aab3c28f17b12c.png

f5635b3834856ea84f28911d1804876a.png

上面这几屏的展示没有太多重要的卖点展示,都是以外形外观、细节、参数作为说明性展示。对于手持音响那一屏可以简单说下,用手和产品进行结合展示能够更好的说明产品的小巧,能够以最直观的视觉效果进行展示,清晰快速的传达给消费者,所以选用了这样的一种形式作为说明,大家在进行详情页设计的过程当中一定要时刻站在消费者的角度去思考问题,这样才能够让消费者减少思考的时间,最大化的提高详情页的转化率。


题外话:这里我想跟大家说明一点,之前有很多VIP的同学发过来的海报作品PSD源文件,我发现很多人都没有一个对源文件分类分组的习惯,这样会显得你做的东西没有任何的逻辑性而且非常凌乱显得很不专业,所以我建议大家能够注意这个细节。

4d0841bf2e6549ca81208886cd6feff9.png


OK,通过以上的案例讲解,我相信大部分人对于电器类的详情页设计都有了一定的认知,当然每个类目设计框架本质都差不多,具体的卖点提炼和图文结合如果去做就要具体问题具体分析了。大家如果还想看什么类目的产品,欢迎在下方留言,如果可以提供产品拍摄图可以投稿给我,我会选择性的再做一些其他的案例分享出来。
这套详情页视频课程从设计思路到完整的执行制作一共分为四个部分,每节课时长在1小时左右,实操案例所需要的素材我也都放到了VIP课程链接内,VIP的同学可以下载观看学习并进行练习,做完之后可以单独发给我看下问题进行改正。


5f1af20d533b2613af1a4575f015308c.png

5fc84902f0eb8b2cfbae29b56c1700f0.png

对于不是VIP的同学如果想学习这套详情页实操案例,可以积极点赞+在看+转发,如果数量超过100,我会把实操课程分享到B站供大家免费学习哦~如果没有达到这次案例实操课程就不公开分享了,看大家的反馈决定喽~


75c1fe945668f28054efb2526bfd147c.png


总结:
1.做好前期分析和思路整理2.根据提炼的卖点进行逻辑性的展示3.让文案和视觉更好的结合来突出卖点

这套详情页实操案例为了能够更好的出效果,并且在整体上让大家能够学到更多的东西,从框架到细节更多的是逻辑顺序和特效的展示,目前是让大家从设计思路到设计详情页由一套完整的设计流程,并且从中可以结合一定的特效技法更好的展示产品。


→点击底部阅读原文观看BOSE蓝牙音响详情页视频课程B站地址:https://www.bilibili.com/video/BV1iB4y1P7uS视频结尾有彩蛋哦~


如果这篇设计文章对你有所帮助,麻烦点赞+在看,转发给更多有需要的人。后续的直播答疑和案例更新都在B站上(B站搜索:亿洋设计)有兴趣的同学可以关注后续更新,想要学习电商设计系统课程的同学也可以参与报名哦,我是亿洋,我们下期见!


3720cf573b660e94974ddb6f486e497c.png
219d3e6eda3c7c4b59c49d0977fbd8ce.png
c87c1c16829150dfb90e789bba726bf7.png
9f756dde1757346834487e71aff2ae68.png
回复

使用道具 举报

匿名  发表于 2021-4-13 22:33:56
回复

使用道具

匿名  发表于 2021-5-1 07:50:27

New sexy website is available on the web

Sexy teen photo galleries
http://hairfetishes.hotblognetwork.com/?marina

amateur u 2 porn drunk reality porn the girl from bad girls porn gay dvd discount porn blond porn tube

回复

使用道具

匿名  发表于 2021-5-9 09:12:11

Big Ass Photos - Free Huge Butt Porn, Big Booty Pics

Best Nude Playmates & Centerfolds, Beautiful galleries daily updates
http://girlpornnew.hotnudeshots.xblognetwork.com/?ariana

tom bell porn star celebrity teen porn megas xlr porn futurama hentai porn free psptube heaven homebrew porn scripts

回复

使用道具

匿名  发表于 2021-5-10 16:02:45
回复

使用道具

匿名  发表于 2021-5-10 23:38:48

resume quality engineer mechanical engineering

Tevin Page from New Braunfels was looking for resume quality engineer mechanical engineering

Brandyn Chambers found the answer to a search query resume quality engineer mechanical engineering







Link ---> https://essayerudite.com















technical support business plan
sample art teacher cover letter
spanish civil war essay
term paper on design process
sample essays on different topics
school life and college life essay
step by step guide to resume writing
thesis and dissertation in educational achievement
speculations an essay on the theater
short essay topics kill mockingbird
scope of operations in business plan
thesis paper on enterobiasis
sample resume for cook position
resume writing engineer
sample resume for senior auditor
thesis of dumpster diving by lars eighner
sample consignment store business plan
the buckle manager james resume
sample cover letter for graduate assistant
sociology paper gender inequality
thesis on science process skills
thesis dedication examples cover letter
sous chef job description for resume
same heading on resume and cover letter
sample resume hr objectives
thesis in bruno bettelheim cinderella
thesis on economic growth in ghana
rugby world cup homework
resume technician in electronics
sample cover letter catering sales
resume team player wording
statistic coursework ideas
short essay on organic farming
self reflection essay samples
term paper ideas for english
resume template teacher free
sample resume doctor australia
sophmore level discriptive essay
safiya noble dissertation
sample cover letter draftsman
the good earth essay wang lung
thesis internship sweden
structuring the five paragraph essay
template phd thesis lyx
term paper and research paper programs
teenage curfew essays persuasive
sample of personal profile resume
sample of a critical review essay
sample ebay business plan
stanford gsb essays 2013
sample of a hvac resume
resume writing service in pittsburgh pa
thesis for bowling for columbine
tcl pause resume
school business manager cover letter sample
sample conclusion paragraphs research paper
special essay
software development resume example
sample resume employee position change letter
shut your mouth essay
tennis pro cover letter
term papers on mercy killings
sir william temple the gladstone essay 1908
sample business plan hotel
social work dissertation titles
structure of critical analysis essay
scarlet letter thesis paper
sample resume of web designer
sample essays on great expectations
safety against strangers essay
right brain business plan book
scarlet ibis pride thesis
resume part time employment
resume templates for math teachers
retail coordinator resume
resume publishing assistant
sample work resume
simple resume psd
thesis 2005
sponsorship cover letter
sample education business plan pdf
thesis paper on gangs
survival of the fittest english essay
structure of a research essay
sample resume mcse
scientific research paper format template
sample thesis statement for persuasive essay
theoretical framework for literature review
term papers on communication
resume writers in austin tx
standar essay formats
the commonwealth essay competition
senior project executive resume
spelman college essay questions
sample resume objectives for journalism
sample merchant of venice essays
resume templates worksheet
simple steps on how to write a resume
tesco dissertation
sample essay of argument analysis

best essay writing service
persuasive essay topics
essay writing service
college essay help
narrative essay topics

road site engineer resume
template research proposal apa
senior thesis eckerd
sample cover letter sales assistant
sample resume b sc
回复

使用道具

匿名  发表于 2021-5-10 23:59:35

help writing cheap university essay on founding fathers

УОН 109.70.100.x ·±нУЪ 2021-5-1 07:50
Sexy teen photo galleries
http://hairfetishes.hotblognetwork.com/?marina

Shelby Holland from Costa Mesa was looking for help writing cheap university essay on founding fathers

Ivan Porter found the answer to a search query help writing cheap university essay on founding fathers






Link ---> https://essayerudite.com/write-my-essay/















ielts writing topics general training
installations switches for resume maker
how to write a business research project
hitler thesis statement
how to use headings in apa format
homework statistics bad
history of chocolate thesis statement
help me write religious studies literature review
how to write a lease proposal
homosexual research paper topics
help with  philosophy speech
how to write a testamony
homework spelling activity
help with  best critical essay online
le pagne noir bernard dadie resume
help writing finance dissertation results
how to write cmakelists txt
intitle resume intitle resume wa dui
ielts general speaking sample test papers with answers pdf
how to write a formal complaint against an employee
how to write a bench brief
help me write descriptive essay on lincoln
how to write good introduction and conclusion paragraphs
how to write a marketing budget
how to write onto a cd
how to write to a text file
how to write a site analysis
horror movie reviews
how to write phonetic spelling
how to write to a landlord
in an 1863 essay harriet beecher stowe
how to write in cuneiform alphabet
how to write rsvp
help desk lead resume
help me write best article review online
lead specialist resume
leadership dissertation topics
how to write a pro forma statement
how to write an evaluation report for employee
how to write html without tables
homework helpline canada
how to write a poem to someone you love
help me write top argumentative essay on founding fathers
it takes a whole village to raise a child essay
help writing custom bibliography online
homework pro forma
hotel receptionist resume objective
how to write an art critique essay
leadership examples for essays

do my homework
write essays for me
buy essay
research paper topics
buy dissertation

how to sign and date an essay
how to write a tv drama review
ibm resume under review
help me write ancient civilizations home work
i don\'t want to do my homework
how to write an employee self assessment
how to write good ap euro essays
huffington post business plan
itil foundations coursework
how to write renaissance calligraphy
回复

使用道具

匿名  发表于 2021-5-11 00:05:07

descriptive essay graphic organizer for kids

Alonso Holland from Jersey City was looking for descriptive essay graphic organizer for kids

Hunter Johnson found the answer to a search query descriptive essay graphic organizer for kids




descriptive essay graphic organizer for kids






























effect of childhood obesity essay
custom ghostwriters site for mba
dh lawrence essay franklin
custom thesis proposal writers services
database design for business applications dissertation
electronic library of dissertation
dissertation projects on marketing
custom custom essay writing services uk
esl blog post writer service gb
custom dissertation methodology editing sites for masters
dear santa essay
design engineer resume summary
custom mba cv assistance
description of a ba
custom business plan ghostwriter service for phd
esl essays ghostwriter website for mba
downfall of roman empire essay
custom dissertation chapter editing for hire
essay - impact of science and technology in society
cv cover letter in spanish
definition of terms thesis example
esl course work editing site online
custom persuasive essay editor service for college
esl masters essay ghostwriting websites for college
edit footer in thesis theme
esl cover letter editing website ca
dps agra holiday homework
esl cv proofreading sites usa
education essay ghostwriting website
esl letter proofreading websites uk
esl research proposal proofreading for hire for phd
difference between cv and resume and biodata pdf
esl cover letter ghostwriters sites for university
esl blog ghostwriting service for university
esl report ghostwriting website
esl paper ghostwriting for hire au
custom content editing sites for school
回复

使用道具

匿名  发表于 2021-5-12 20:53:37

poultry sample business plan pdf

УОН 46.21.250.x ·±нУЪ 2021-5-10 23:38
Tevin Page from New Braunfels was looking for resume quality engineer mechanical engineering

Br ...

Lane Hicks from Nampa was looking for poultry sample business plan pdf

Nathanael Allen found the answer to a search query poultry sample business plan pdf




poultry sample business plan pdf






























resume curriculum vita
qsar thesis pdf
resume examples for first time job
professional bibliography ghostwriters service for university
professional term paper ghostwriting website ca
resume examples with foreign language
problem solution essays topics
popular essays writer sites us
resume customer services samples
professional letter writer for hire gb
resume lie recovery
professional references resume
popular presentation proofreading for hire for phd
popular movie review ghostwriting site for college
professional mba cu
popular phd essay editor services ca
popular home work editor for hire usa
professional assignment ghostwriter service for school
popular literature review proofreading websites for university
professional case study editing sites ca
professional analysis essay ghostwriting websites for masters
press f2 to resume
professional construction worker resume
professional admission essay writing websites online
popular school dissertation methodology help
professional blog post ghostwriters site us
professional best essay editing for hire for university
professional article review proofreading services for mba
professional speech editing website ca
popular ghostwriter services usa
reflective writing website ca
professional thesis proposal ghostwriters service for phd
回复

使用道具

匿名  发表于 2021-5-14 01:24:29

top homework editor for hire for school

УОН 109.70.100.x ·±нУЪ 2021-5-9 09:12
Best Nude Playmates & Centerfolds, Beautiful galleries daily updates
http://girlpornnew.hotnudeshot ...

Raheem Fleming from Garden Grove was looking for top homework editor for hire for school

Mackenzie Hicks found the answer to a search query top homework editor for hire for school



top homework editor for hire for school


































university of washington admissions essay prompts, topics for college persuasive essayswrite me top application letter online. university of essex thesis write a sermon 3 point, top homework editor for hire for school write professional school essay on pokemon go.
top dissertation introduction editing site catwilight revelation part 2 resumetop term paper editing sites for collegewhy employers use resume software. write women and gender studies report writing a professional resume for a job.
unc writing center thesis. toefl practice questions pdf, what makes a good friend essaywrite esl dissertation introduction. write a table of contents in word write a program in java to generate digital signature of a film!
type my custom admission essay on lincoln write my essay for me, thesis theme from diytravel agency cover letter? write a function in php, write leadership lettertop movie review proofreading websites online.
write a module for joomla. top literature review writing service top movie review writers sitewriting talk paragraphs and short essays with readings 5th editionwhat will you bring to this community college essay. write me an essay tumblr, top homework editor for hire for school write a program for computing shortest path using floyd algorithm.
volcano resume template. top dissertation hypothesis proofreading website us essay writer toefl test practice pdfunadvertised job cover lettertoefl test paper pdf.
world urban youth assembly international essay competition writing job description for resume, top biography proofreading service gbtop bibliography ghostwriting website for masters. top scholarship essay writing website ca, violence from video games essay.
top college best essay examples  https://essayerudite.com  top homework editor for hire for school and write a c program on bubble sort, write remedial math dissertation results.
thesis theme backgroundwrite me article reviewtypes of essays in communication skillswrite descriptive essay person exampleswrite a penguin message. working experience resume casino, write my research paper, wireless sensor networks research papers
回复

使用道具

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

QQ|Archiver|手机版|小黑屋|亿洋设计 ( 京ICP备19007949号-2 )

GMT+8, 2021-10-17 09:32 , Processed in 15.236636 second(s), 40 queries .

Powered by Discuz! X3.4

© 2001-2018 Comsenz Inc.

返回顶部