电商详情页设计软件-设计淘宝详情页需要用什么软件？

大家都知道创意思维对于UI设计师的重要性,却也不能忽略基本功和工具对于设计师的必要性。

设计的基本功只有坚持不断的训练,扎实美术功底,才能在日后的商业实战中轻松驾驭各种风格。设计工具也是一样,学习工具需要不断练习使用,才可以熟练的通过工具去表达设计理念与思维。

那么,转行UI设计或从事UI设计,到底需要学习哪些工具呢?

设计工具很多,我们不可能将所有软件全部学完,每个设计师也都有自己习惯使用的软件。我们只需在每类设计工具中选择精通一两种即可,工具都是相通的,遇到类似的工具,设计师一般都会很快上手。

一、软件

1、PS-AdobePhotoshop,一款由AdobeSystems开发和发行的图像处理软件。

相信不是设计行业的小伙伴也对它久仰大名,它是设计专业人员必须掌握的设计工具。Photoshop主要处理以像素所构成的数字图像,其重点在于对图像的加工处理。

图片来源:PS启动页

那如何学习这么工具呢?

其实大家都知道,用实用的案例去学习一个工具,能让学习带有目的性,才能更快的掌握工具的使用方法,所以对于Photoshop的学习也是一样。

学习的途径一般有两种:看书、看教学视频。

在这里先给大家推荐两本PS的学习书籍,《AdobePhotoshopCC2019经典教》、《AdobePhotoshop国际认证培训教材》,这两本书都是权威认证的官方图书,针对Photoshop初学者深入浅出地讲解了软件的使用技巧,并用实战案例进一步引导读者掌握软件的应用方法。

视频的学习可能会比图书更生动形象,如果想要系统的自学PS,可以到某宝几块钱买一大堆视频,当然你也可以到我们官网,学习免费视频,该视频可以帮助你循序渐进、由浅入深的带着实际案例学习PS。视频链接:/course/215

2、AI-dobeillustrator,是一款应用于出版、多媒体和在线图像的工业标准矢量插画的软件。

它的功能强大,用户界面体贴,是大多数设计师选择矢量编辑软件的不二选择。

图片来源:AI启动页

关于AI的学习,也和PS的雷同,先了解软件,再通过实际案例去学习,在操作中熟练使用该软件。视频链接:/course/52

3、XD/Sketch,AdobeXD被定义为Photoshop的原型工具,是一款轻量级的矢量图形编辑器和原型设计工具,它常常被拿来和Sketch做比较。Sketch是一款轻量、易用的矢量设计工具,让UI设计的工作更加简单高效。

那你肯定会问这两个工具到底哪个好?

这完全取决于个人习惯和爱好。如果你已经习惯并喜欢使用一个工具,则无需切换其他的同种类工具。

4、AE-AdobeAfterEffects,Adobe公司推出的一款图形视频处理软件。

现如今动效设计在UI设计界面中越来越常见,国内很多互联网公司也开始重视动效设计了。产品中的动效设计可以给用户带来很好的视觉感受,更好的表达产品特色,让产品操作体验更加流畅。

5、C4D是UI设计中一款非常重要的工具,只要是涉足三维场景、产品、视效制作的地方,C4D都可以胜任。

C4D常常和AE这两款软件配合使用,协助我们完成3D渲染工作。它们好比一根麻花,是分不开的,同时也是互补的。

当C4D中画面做的过大,重新渲染的话,要老命一条,这个时候就可以打开AE调节一下;在C4D中颜色无法达到预期,那就打开AE重新润色一下;在C4D中这个灯光不好,效果不对,那就打开AE重新补光一下。

一旦你都会,并且掌握得行云流水,那么它俩合作呈现的视觉效果不仅狂拽酷炫炸翻天,同时也会为你的作品增添很多的质感,作品高大上加分很多!

最重要的是这俩软件会极大的缩短你工作的时间,却能收获极佳的效果。视频链接:/course/213

图片来源:阿多比设计学院学生作品

6、AXURE-AxureRP是一款专业的快速原型设计工具,它可以快速创建应用软件或Web网站的线框图、流程图、原型设计图。

作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。Axure不仅是UI设计师需要掌握的工具,在互联网行业也要求产品经理熟悉该工具的使用。

当然也有很多类似的工具,比如墨刀、Invision等,他们的优点各有不同,这些原型设计工具额优点不同,依据自己的习惯和爱好选择使用。

图片来源:Axure启动页

二、软件应用场景

上面说了这么多,可能你还是觉得这些工具很抽象,这些工具到底有什么作用,用在哪些地方合适,接下来小阿再给大家详细介绍。

1、字体

在设计工作中,可能会找不到满意的字体,又不想侵权,这时候就需要自己设计字体。

那用什么工具可以设计字体呢?PS、AI可以帮助大家解决这个问题,在这里我可以分享几个关于字体设计的视频,更直观的感受如何设计字体。视频链接:/video/BV12C4y1872f?p=2

图片来源:字由

2、Logo设计、电商设计等

目前将插画运用于Logo、Banner、电商等可以让产品的页面更加生动,像店铺首页及专题页设计,就可以利用C4D和插画,丰富画面视觉效果。

图片来源:阿多比设计学院学生作品

淘宝电商需要大量的修图,修图用到的工具用到最多的肯定就是PS,如:电器修图、首饰修图、化妆品修图、服装修图。电商设计有专题页、详情页等,这些设计会根据不同的效果使用不同的工具。视频链接:/video/BV1xZ4y1u73G?p=6

3、Banner设计

图片来源:阿多比设计学院学生作品

4、动效设计

AE交互动画设计,增强界面交互操作体验感,跳转交互、加载动效、点击效果等。除此之外,AE还可以和C4D配合使用,协助我们完成3D渲染工作,让页面更立体。

三、其他能力

以上只是分析了工具的使用,要想通过工具表达设计理念,需要懂设计基础、理论,才能设计出符合设计规范的优秀界面。依据市场需求,我们总结出了当前市面上需求量最高的全链路UI需要具备的能力。除了设计软件、全链路UI设计还需要会手绘插画、设计基础、UI设计相关知识、了解其他相关知识以及综合软实力。

1、会插画:设计师可以通过手绘去了解线条、明暗关系、结构关系、基本造型、透视关系等,有这样的思维,在设计工作中可以帮助我们快速抓到绘制图形、图标、拟物风格作品的要点。

从各个招聘要求可以看出,UI设计越往后走越是要求从业者有丰富的美术功底,将插画和设计灵活运用,相辅相成才可以顺应目前用户的视觉体验。

而且好的创意和想法一定不是先来自于电脑,而是先来自于本上,手绘是创意和灵感最好的表现及表达方式,养成手绘的习惯和会手绘这件事能够更加拓展设计师的思维,把你对图形的需求快速呈现草图上进行快速的演变图形尝试对比,进而提高工作效率。

图片来源:阿多比设计学院学生作品

2、设计基础:UI设计也属于设计专业,所以必须掌握设计原则、平面构成、色彩构成、立体构成(即三大构成)等设计理论。

有了这些才可以灵活的去怎样根据不同行业不同人群去定位品牌色彩,分析Logo图形的形式与气质、图像抽象化变形正负型结合、字母和图形结合等等。

图片来源:阿多比设计学院学生作品

3、UI设计规范:每个行业都会有一定的规范,掌握了设计基础以及工具使用,还需要掌握对行业内网页设计、移动端设计的规范、方法、流程等才能真正开始做UI设计。

4、其他技术:所谓的全链路UI设计师,就是全程参与整个产品的生命周期。

从需求分析到需求评审,用户调研、情绪板梳理到交互设计,视觉设计到视觉评审,UI审查、验收到用户调研,这一系的工作需要设计师都懂,设计部分全会。

5、综合软实力:一个项目从来也不是一个人能独立完成的,与他人合作团结有效的完成目标才可以让自己的工作得到真正的认可。

在UI设计参与的项目流程中,UI设计需要和产品、交互设计师、开发、测试等项目中的各类角色沟通,所以一个合格的UI设计应该善于沟通,有良好的团队合作精神。

产品不断迭代,这也需要UI设计善于总结和分析问题的能力。在每一次产品上线后,收集用户、测试的问题,然后不断去完善自己的设计。

说了这么多,学习UI设计,不能只关注设计工具,应该有个整体的学习路线,让学习内容更加全面。

你再熟悉工具,没有设计基础支撑,也无法设计出一个好的产品。但是工具的学习也是必要的,因为只有通过工具才能将我们的设计理念更好的表达。

希望这篇分享对你学习UI设计有所帮助。

优秀的电商设计详情页,一般有这几种主流的设计风格来帮助提高设计的品质。

一,合成风格

合成手法是最最常见的电商设计手法,它是通过adobephotoshop图形处理软件通过各种素材组合而成的,这种手法需要把零散的元素素材,拼凑在构思好的设计思路里,达到一个消费场景的氛围,让淘宝买家有一种身临其境的使用场景。

这种手法的优势是能很好的打造消费场景并让淘宝买家有一种商品的真正体验感受。

合成手法的优势比较明显,所以能成为主流的手法也就水到渠成了,但是在设计的时候新手需要把我几个细节,所有元素、产品都需要在同一透视下和统一光线,统一色彩。确保整个画面的真实感和结构的合理性及画面美感。

二,手绘风格

手绘风格是这几年新启的一种风格,比较适合母婴、少女,儿童等消费人群一些,当然其他的产品同样可以用手绘风格。

这手绘风格,在表现层面有着很好的想象空间,结合夸张的手法设计出来的产品详情页,很容易就把产品的两点呈现给淘宝买家。

经常在一些产品需要带动产品体验氛围和联想作用的情况之下会比较常见的设计手法。

电商手绘风格,需要举报比较好的绘画能力,和色彩能力。所以在设计中通常是一些有绘画基础的经常会使用。

三,c4d风格

这两年c4d流行的程度那是相当之高,这种3d的风格经常在家居、3c、大小家电商品类用的较多。

这些品类根据需要立体空间的展示,以及色彩绚丽的效果,及极致光着质感。

c4d的优势就是空间感带来真实的空间场景和商品的质感,这种风格需要从建模到渲染两个技术难点,这是需要提前学习的,好在才这个软件学习成本不高,容易上手,所以国内目前非常的青睐这个。

以上三种是最流行的电商设计手法,结合商品的买点,去设计各种产品的真实场景,让淘宝买家看到图就能想象和感受到商品的好处,就一定能打到买家。

所以在设计的时候就是要换位思考,把自己想象成消费者,去设计感同身受的详情页。

首先软件方面一般都会使用ps,就是photoshop软件,

1.实行形式

当然会使用软件只是详情页的实现模式,你要看你所属行业的类型来做页面。

2.色彩搭配

根据你所属行业选择适应的颜色搭配。比如科技类的,很多使用蓝色;环保类对很多使用绿色;食品类对很多使用橙色等等等等,不同的颜色体系不同,颜色的冷暖,和我们感知到的是一样的,就好像橙色,我们会想到橙子,麦子,代表的是温暖,我们一看到就想到了吃,食物与美好!

3.文字内容

需要针对不通过的行业写一些文字,你想要给客户传达的是什么信息,比如卖衣服,很多有尺码大小颜色,等等,商品的正反背面信息。你商品的优势,你的客户评价,这些都是文字内容。等等等等

下面就根据各大电商平台的页面,做一下分析。

一、详情页的组成部分有哪些?

二、详情页的排版分析?

三、总结

一、详情页的组成部分有哪些?

各类电商网站中,每款商品所包含的展示内容,都有固定的分析,使之让买家对产品进行一个详细的了解,说明,既而有购买的冲动。

就详情页面来说,由这几个部分组成:

1.商品展示类

2.实力展示类

3.吸引购买类

4.交易说明类

5.促销说明类

进而我们对这几项进行延伸:

1.商品展示类:平拍,色彩,细节,卖点,场景效果,搭配,包装

2.实力展示类:品牌,荣誉,资质,销量,生产,仓储

3.吸引购买类:情感打动,品质打动,实力打动,买家打动

4.交易说明类:尺码规格,维护保养,购买,发货,验货,退换货,保修

5.促销说明类:促销活动,关联销售,搭配商品,优惠方式

二、详情页的排版分析?

由上面的分析,可以归纳出详情页可以分为这七大部分:

1.广告图2.产品概况3.情景展示4.产品展示5.细节展示6.质保7.品牌

下面我拿一个产品详情页做一下分析

很快就会明白了。