查看: 61301|回复: 0

[网页设计] 淘宝店产品详情页面制作【任务指导教程】 [复制链接]

梦中的蝴蝶

中级会员

Rank: 3 Rank: 3

电梯直达 go

楼主

发表于 2012-9-25 17:52:57 |只看该作者 |倒序浏览

第一步：一定要加入我们的设计部落哦，会有很多设计的东西跟大家分享一下，http://www.jiaoyanshi.com/group-120-1.html

第二步：在开始做页面之前呢，先跟大家聊聊网页设计制作的一个过程，网址：
http://www.jiaoyanshi.com/thread-331-1-1.html，
1、分析需求，这点是在整个过程中比较重要的环节，先用弄清楚用户或者客户想要什么，目标是什么，以及要确定什么，这些都是对整个设计起决定性作用的
2、创意及页面色彩的定位，可以多选几种色系，最后通过比较分析，来确定页面的颜色
3、收集素材，来确定页面的雏形，把想表现的东西草图画出来，目的就是低成本的评估效果，以确保方案可行；如果此时对方案不满意也可以快速调整，这样就可以避免设计后期推翻重来的风险。
4、效果图和html的实现，在前3步的时候我们已经把握了需求的方向，所以到这步基本是用细节（比如按钮、图标、图片）的东西去体现想要的效果
5、优化细节，文字的大小，颜色，图片有没有体现需求等等具体的东西，来实现最后的优化过程
下面给出一个网页制作过程的例子
http://www.5icool.org/a/201207/a1477.html

第三步：流程我们已经讲完了，亲们，那么来聊聊我们这次的页面制作的任务--淘宝店产品详情页面设计。一般的页面基本上包含了这几个部分：
1、创意性的大图banner，它的作用是宣传产品的，这个大图一定要体现产品的灵魂
2、产品概况，描述产品的信息，用文字和图片体现都行，目的要让别人知道产品的特点和卖点
3、产品图片展示，选取多个角度拍摄产品，好的图片能留住购买者的视线，选择清晰的、拍摄角度好的图片进行展示
4、产品细节展示，需要用文字和图片共同展示，包括制作工艺、流程等和产品相关的细节，区别于同类产品的特点，突出产品的优点，重要的是突出这些优点会带给买家什么样的好处，更进一步的来激发买家的潜在需求
5、包装展示，提升品牌的保证，完美的包装也能增强购买者的欲望
6、店铺的温馨提示，比如物流、产品的一些注意事项等等
当然，不是每一个步骤都是需要体现的，也不是非按照这6步一路走下来，这里只供大家做一个参考。我们选取了一个非常不错的案例，可以参考一下：
http://detail.tmall.com/item.htm?spm=a1z10.1.28.43.4eafc1&id=9191224941。

第四步：页面制作除了用到图片处理工具PS之外，还会用到Dreamweaver页面设计工具完成html。
关于图片处理的一些技巧和办法，大家可以参看设计部落里边图片处理和教程资源帖，网址：http://www.jiaoyanshi.com/forum.php?mod=group&fid=120#groupnav。
会使用Dreamweaver这个工具的同学们就可以开始做了，不会使用的或者想学习的同学要随时关注教研室设计部落群组，我们会陆续更新关于这方面的一些技巧和使用方法

以上就是关于页面制作的操作指导，好像都是大量的文字哦，不过不要紧，马上就会把这些全是文字的东西，变成图文结合的干货给大家分享，所以要天天关注C实习微博http://e.weibo.com/cshixi，关注教研室官网微博http://e.weibo.com/jiaoyanshi

附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册 