中企动力 > 头条 > 电商网页设计

网站性能检测评分

注:本网站页面html检测工具扫描网站中存在的基本问题,仅供参考。

电商网页设计

2017年提升电商系统转化率的的3大设计元素 转化视频课程

img

赵飞风

关注

电商系统网站所有者造成的一个常见错误是自认为以他们的眼光和想法来想像如何成功获得转化率,实际上它需要一个非常漂亮的网站来帮助其提高转化率。2017年有3个网页设计元素,有助于提高转化率:

1.个性化设计

这些日子互联网业务竞争激烈,所以为了比其他互联网公司有更多的优势,您的电商系统网站需要个性化设计。通过提供更个性化的电子商务体验,您可以让客户感到受重视,而不只是简单的销售。通过有效的分析工具,您可以获得有价值的评估数据,了解您的目标受众是谁,从而可以推荐适合的产品。

2.社交媒体

吸引现有和潜在客户是建立消费者关系的关键,通过将社交媒体渠道纳入您的电商系统网页设计,您可以建立健康的零售消费者关系,从而提高转化率。

3.互动网页设计元素

通过您的电商系统网站吸引注意力并吸引潜在买家的绝佳方式是包含互动式网页设计元素。 将微动画或视觉图像合并在一起,用户可以将其悬停在另一个动作之上,从而保持人们的参与,并提高他们进一步探索您网站的机会,以购买物品。

互联网拥有绝大多数的在线业务,所有这些都致力于将潜在客户带到他们的网站; 如果您希望有机会获得潜在的销售额,或提高现有的转化率,您将需要超越简单的网页设计美学,并结合上述网页设计元素。

转载请注明出处:http://kingwins/content-796.html

如何评价亚马逊的网页设计? 推广视频课程

img

楼诗筠

关注

答|百度派 @裴池池

卓越亚马逊创立于2000年,到现在也有17年的时间了,主要是为我们提供各类图书、音像、软件、玩具礼品、百货等商品的互联网公司。

亚马逊自从扩展到我国市场,不断占领市场份额,我国传统产业受到不小的冲击,现在已经成为我国网上零售的领军人。

2004年8月亚马逊全资收购卓越亚马逊,使亚马逊全球领先的网上零售专长与卓越亚马逊深厚的我国市场经验相结合,进一步提升客户体验,并促进我国电子商务的成长。

卓越亚马逊可是购物网站的先驱和开拓者,是成功的典型。

亚马逊主页中的导航条和图片信息可以使浏览者对网站的所有内容一目了然,方便消费者迅速的找到想要购买的商品,节省了选购的时间。

还有亚马逊一排能显示不少书,24寸的能显示8本,左右点击翻页,操作方便。

打开他们的图书板块,默认搜索图书,方便搜索,非常好用。它的页面信息多,有书名、作者、装帧、原价、现价、封面图,不比在书店看到的少。在某一类别的分类非常细,满足各类人群的分类需求,特别是客户评分和价格分类,很好用。

亚马逊网站还能自适应,在窄屏和宽屏上表现良好,可以充分利用大屏幕的空间,使得我们能看到更多信息。

亚马逊在UI上干净整洁,主要以黑白灰为主,突出了产品。功能上除了常规的分类链接外,关键词链接分类也很多,方便了用户挑选购买。链接的颜色用大胆的蓝色,非常显眼。

亚马逊两大著名网页设计

1.“一键下单”专利,今天所有的电商网站都在用,但大多数用户都不知道,这个其实是亚马逊的专利。用习惯了当然不觉得惊奇,但在那个年代,却是从0到1的突破。

2.购买后的推荐,现在几乎所有电商网站都会在订单购买完成后再推荐“猜您喜欢”的商品给用户。

亚马逊确实没有小清新的风格,哈哈~但是他的信息结构非常合理,而且使用流程顺畅。从流程的角度来看,当当在流程上根本没有亚马逊好用。

还有亚马逊的网页宽度是用户选择适应,而国内的大部分都是固定宽度居中的。

因为全宽度/流体布局来自程序员思维,他们无所谓排版(程序员还讨厌折行呢) 固定宽度布局则来自设计师思维,或者说来源于平面设计。平面设计的宽、高都是相对固定的。

我觉得亚马逊真是简洁明了,没有淘宝的五颜六色,流程上真是没话说,非常好用!对用户的体验考虑周到,不愧是网上购物的先驱和开阔者。

以上内容由百度派作者提供

电商设计中的极简设计 互联网视频课程

img

循环

关注

写在前面:

电子商务经过了几年的发展已经逐渐成熟,并且已经发展出了自己的模式和风格。但是对于电商的设计风格大多数人还停留在最初的用商品堆砌+文字信息+各种乱七八糟的效果。而这两年各个电商公司已经非常重视设计了,而且设计风格也逐步走向简洁乃至极简的风格。这种变化是随着电商的不断发展,更加重视产品的品质而进化的。

目录

1.极致的版式

1.1对齐——最基础但也最重要

1.2对比——让画面不再平凡

1.3有“气质”的留白

2.精致的颜色

2.1让设计快速出“彩”的方法

A、黑白灰主色调+亮色辅色

B、选择商品主色调作为整体画面的主色调

C、使用的颜色不要超过3种

2.2看似很复杂的颜色搭配其实很简单

A、统一明度和饱和度

B、控制颜色的层次

3.考究的字体

3.1选用符合整体设计风格的字体

3.2选用字形结构简单的字体

3.3“牛叉”的中文字体

下面从3个方面来讲一下如何做极简的设计,每个里面都有一些具体的知识点。

先看一下极简设计的案例:

这是锤子T1的页面设计,虽然好多人都不喜欢老罗,但是我觉得他有对设计特有的一种完美主义的偏执,无论是手机的外型(各种对称)还是系统UI的设计,我觉得作为设计师我还应该多向他学习一下。回到页面设计本身,我们来分析一下这个页面的设计。

一、极致的版式

可能大家开始画画的时候就接触和学习构图了,而构图就是版式设计的基础。但我们往往忽略了对于构图和版式的极致追求,一般我们总会说,差不多看着舒服就行,可是对于设计师的能力晋升我们还需要更加重视版式的设计。

下面是几个版式设计的技巧:

1.对齐——最基础但也最重要

上面图A、B、C是对页面重新排版,图D是原有的设计。虽然总体看起来都还可以,但是我们仍然可以很直观的看出来,图A的构图有些头重脚轻,让人感觉中心偏下;图B的手机主体物有种对文案的挤压感,让人觉得压抑;图C的手机和文案成为90°的夹角,让人觉得有种阻碍感,不顺滑;图D的设计很好的协调了主体图与文案的关系,并且给人一种从远及近的中距离纵深感。整个画面中间对齐更能最大限度的突出主体——手机。从锤子的网页设计中我们可以观察到,这种排版方式是中间对齐,无论是横向还是竖向。

再看几个中间对齐的例子:

上面的设计家也是用的中间对齐方式,大写的V视觉冲击力非常强,而左上角的Logo信息和右下角的信息成为对角形式,让人感觉画面非常平衡而又稳定。

小米2015年的新品发布会海报也采用了中间对齐的形式,让关看者很容易的就聚焦到中间“新年礼物”的重要信息上。

下面的图例是左右排版方式:

由此我们总结出对齐的版式的几个特点和作用:

A、视觉聚焦;

B、强化页面统一性和条理性;

C、对视觉的导向作用。

2.对比——让画面不再平凡

作为简洁乃至极简的设计来说,对比非常重要,对比可以让人非常快速的阅读到重要信息,也可以让版面的设计有节奏感,让画面看起来不乏味。

上面的设计是小牛N1和一加3的设计,这两个设计是典型的左右排版。右侧放商品图片,左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要要根据商品的属性来决定的。例如,一加手机主要体现手机的外型和质感,所以放置2个占比面积较大的手机,搭配最基本的文案信息(只有手机名字、价格和购买按钮)。

上图是文案与商品的面积对比。

这个设计则与一加和小牛相反,文案面积很大,但是我们的视觉中心依然是手表,因为实物的照片往往会更加吸引人,这就是对比。但是还有一个对比不知道大家看出来没有,就是文案里的对比,标题选用大而粗的字体,其他信息则放的很小,大能又快有准的看清标题的内容,另外因为字体大小和粗细的变化让人感觉有节奏感。

3. 有“气质”的留白

极简设计里的留白非常重要,最典型的是无印良品的设计,它是把留白应用到现在设计里最好的典范,但是我觉得我们中国人才是留白的“老祖宗”,国画就是非常典型的例子。

下面我们来做个对比,我们把图上的一些不必要的复杂背景和文案给去除。主要是让产品主体和主要信息展示的更加清晰和明确。

下面是其他一些案例我们可以试着自己分析一下,注意留白不一定就是白色。

二、精致的颜色

在电商设计中,对颜色的把控非常重要,在某种情况下对颜色控制的好坏直接影响着页面的停留时间。一些经验不足的设计师往往会对颜色的把握非常头痛,颜色脏、配色不好看、用色过多等都是经常出现的问题。在极简的设计中更需要对颜色做减法,并且不断的调节细微的明度、饱和度和颜色的搭配,正是这些细节的调节才会让极简的设计更加耐看。

2.让设计快速出“彩”的方法

在极简的页面里,颜色往往用的非常谨慎,而我们第一步就需要选择主色调。

这里有几种选择颜色的方法:

A、黑白灰主色调+亮色辅色;

通过提取出的颜色我们可以看到,上面的页面设计中采用了黑白灰做为主色调,使用亮黄色为辅色,虽然亮黄色为辅色,但是人们第一眼往往会注意亮黄色,而设计师把70%off的折扣信息的字体颜色选为亮黄色也是对折扣信息的强调。

耐克和小牛电动车的页面设计的颜色选择都是使用了这个方法,并且小牛为是让画面不单调,背景使用了素色黑白灰的一些图形元素,这样既让画面丰富起来又不会使颜色过多而显得杂乱。

B、选择商品主色调作为整体画面的主色调;

上面的图是Motox的网页设计,页面的主色调(背景色)使用了手机背壳的颜色,这样可以强调商品色彩,给购买者留下非常深刻的印象。

耐克的设计同样是采用这个方法,一般来说厂商想要特意退爆款会选择一种爆款的颜色或配色,而耐克这样设计的页面也是更好的展示了这个商品的独特的特点,让人们在任何地方看到这种颜色都会回想起耐克的这款鞋。

C、使用的颜色不要超过3种。

通过上面的案例我们发现,这些设计师所用的颜色都不会超过3种,而做为极简设计有时候只使用2种颜色,甚至只用黑白灰的变化来进行设计。

2.看似很复杂的颜色搭配其实很简单

在极简设计中,颜色的搭配需要非常用心,因为画面的颜色搭配简单时,即使稍微有点不协调也会被放大很多,因此我们需要了解颜色的几个属性:色相、饱和度、明度,还有对比色、相近色等概念。

对于极简设计的配色也有几个方法:

A、 统一明度和饱和度;

下图中的明度和饱和度非常协调,既不觉得哪个颜色过亮也不觉得哪个颜色过暗。虽然是不同的颜色,但是整个画面也是非常协调统一的,我们现在分析一下画面的颜色。

我们来看一下,上面4个圆形中的颜色是我从图片中提取出来的,下面4幅图是颜色的位置和参数,主要看颜色的位置,就是每幅图的圆圈位置,我们看到图中有两条线,这两条线就是代码这4个颜色的明度,可以看到绿色和橘色的明度位置非常相近,黄色和深蓝色的明度位置也很相近,绿色和橘色占整个画面的绝大面积,因此整个画面看起来是非常协调的。而饱和度就是越接近色板的右上角饱和度就越高,我们看到除了深蓝色,其他3种颜色都处于饱和度比较高的位置,并且位置比较靠近。

大家可以用这两幅设计来实验一下,自己亲手解构一下配色的明度和饱和度。而我觉得做为设计师对于颜色的细致理解是非常有必要的。

B、控制颜色的层次;

所谓颜色的层次我们依然用小牛电动车的图来分析,可以看到所有的颜色都提取出来后圆形中的颜色。

这样我们很容易的就能看出来颜色的层次,灰色系有7个层次,而红色系有4个层次,正因为这样的层次让整个设计显得非常丰富,并且有立体感而不至于太“平”。

三、考究的字体

文字在电商设计中的位置极其重要,它承担着直观信息传播的用途,例如活动页面的折扣信息、商品宣传页面的卖点信息、商品的优惠价格、文案内容的表现等。而在极简设计中,字体的选择更为讲究。

1.选用符合整体设计风格的字体

字体也是有自己的外貌、性格和风格的,当字体的风格与设计完美的融合在一起的时候,会给整个设计加分不少。

上面的两张图是“什么值得买”的闪屏页面,我们来仔细观察一下眼镜、相机与字体(文案)的关系。眼镜和相机的款式都是非常复古的,有种民国时代的感觉,因此设计师选用了一种仿古字体来配合图案,给人非常统一的感觉,配上精彩的文案就会给人一个民国时期的场景,这也可以叫带入感。如果我们把图中的字体换成非常现代的艺术字会怎么样?

换了字体后可以看出,虽然每个字体单独看都不错,但是与配图放在一起就感觉非常的不搭,立刻失去了文案和图片想要传达的那种“工匠”的感觉。

英文的选择也是如此,看上图,英文Animal Prints是动物图案的意思,你会发现右侧的女性人物应该是穿着一条连衣裙的,因此我猜测这是卖女性服装的一个Banner,而且是属于比较成熟的那种(看模特身材就能看出来),因此在选择字体的时候应该选择偏细腻柔美的字体,而不是黑粗体。

来看看下图,感觉是不是差了很多?

下面再来看几组图例,试着自己分析一下。

2.选用字形结构简单的字体

这几年出现了一些结构复杂,字形极其夸张的字体,个人认为尽量少用甚至可以不用。字体是一门非常专业的门类,很多设计师还不能很好的驾驭一些字体,无论是普通的电商设计还是极简设计最好使用字形和结构都相对简单的字体。

这个设计可以看到整体就是以文字为主来组合设计的,无论英文还是中文,都使用了字形非常简单的字体,加上字体本身的大小粗细使画面非常有节奏感,而且不会觉得全是字。从这我们可以引出另一个理论,在某些情况下字体即是信息传达的载体,又是一种艺术图形。

下面来个反面教材:

这里我们先不说这个专题设计的构图、颜色,只说一下文字,除了9.9元比较明显的突出了卖点以外,其他基本都非常杂乱,字体的字形被改的面目全非。因此提醒大家,在没有能力把握字形的时候千万不要自行修改甚至设计字体。

下面再来看看现在争相模仿的苹果:

苹果比较“牛”,为了自己的产品设计了一套字体,刚开始有些人说各种丑,但是还是被大多数人接受了并且获得好评,原因无非就是简单好用。这也是现在这个快速发展的社会最需要的,尤其是电商行业。

自带6种粗细字体完全满足一般需要

3.“牛叉”的中文字体

这里说中文字体“牛叉”,不仅仅因为我是中国人,我们可以数数中国有多少种字体,每种字体都有自己的历史背景,例如隶书,平民是不能用的,魏碑是专门刻在碑上的字体等。而且中文也是唯一一种成为艺术的文字——书法。可能有些人觉得中文字体或书法字体看起来很老旧,不现代,下面我们用实例来证明这是错的。

上面的页面是真功夫的设计,很明显,中文的书法字体是做为一种艺术图形来传达和表现的,并且结合一些相关元素(辣椒、调料、蔬菜、粮食等)突出“味道”的主题,并且很容易就能看出是美食类的页面。

英文也可以设计成书法体,表现更有张力,更加符合勇士的感觉。

小米电饭煲的“新国货”也采用了书法字体,让平淡的页面有了生机,并且这种字体也透漏这一种做成新国货的“野心”

总结

其实极简设计是设计发展进程中的必然结果,这是一种优化的过程,也就是做减法,把不必要的,干扰信息传达的元素删除掉,保留最基本最为有用的东西,我这次的教程也从排版、颜色、字体三个方面来具体的讲解了怎样做极简的设计,同样这些内容也适用于一般电商的设计。其归根结底,好的设计的基本原理是不会变的。

最全面的网页设计基础知识全攻略 公司视频课程

img

Dulcea

关注

本文有6个章节,从工作流程、网站种类、网站组成部分、技术原理、设计规范等全面总结了网页设计的基础知识,接近两万字的干货,新手看完就可以入门了。

一、网页设计是什么?

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯,但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多:从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市,再到现在网站遍地;中国的网站高速发展了近三十年。我是在小学开始去网吧「上网冲浪」的,那时的电脑屏幕非常小,分辨率只有800×600像素(对比一下,iPhone8的分辨率是750x1334px),网速也很慢,经常掉线或者加载失败。那时的网站性能和体验都不好,而现在网站设计和过去已经有了巨大的变化:注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及,网站仍然是人机交互中非常重要的平台之一。那么作为 UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理,才能更好地驾驭这个平台。今天就向您好好说道一下网站必须懂得的那些事儿。

二、工作流程

首先让我们来看一下网站设计的工作流程吧,除了之前介绍过的用户研究、撰写产品需求文档、市场文档、做竞品调研等工作之外,与设计师密切相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每个阶段都需要设计师参与和了解,千万不要只在意视觉稿这个阶段,有很多前期与后期工作同样需要得到我们的重视。好,让我们一个一个来了解它们吧。

1. 原型图阶段

原型图阶段中设计师需要和产品经理沟通需求,这时要注意,并不是产品经理向设计师下发需求,而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式,这时需要在设计之前与产品经理达成一致。

△ 构建网站原型图(工具:Axure RP)

2. 视觉稿阶段

视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了,在设计网站的时候,我们需要一些图像和灵感的素材。比如做世界杯专题时,我们除了收集很多素材之外,也可以设计一个「情绪板」(Mood Board)。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起,这样可以更好地指引我们整个需求的设计主题和大体感觉。另外,很多网站的头部通常需要主视觉来抓人眼球,这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等,那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性,这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等,然后根据这些要求完成页面信息部分的设计。总之,设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

△ 视觉稿设计阶段(工具:Photoshop)

3. 设计规范

当视觉稿通过后,很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范,设计规范就是所有页面中共性的东西,比如说字体不同的大小、图片的尺寸、按钮的样式等,这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己,在用户有限的记忆力中减少思考的成本。同时,设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后,设计规范对于设计师个人来说也是对项目影响的一个佐证,可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做?其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有:字体规范、主体色规范、图表规范、图片规范等不同分类。

△ 视觉规范(工具:Photoshop)

4. 切图

网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握 PS 软件技能。如果遇到特殊情况需要我们切图时,我们可以使用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所使用的图片。

△ 从PSD中提取出来的切图(插件:cutterman)

5. 前端代码

前端工程师会用代码重构我们设计的页面,把图纸变为静态页面。然后和后端工程师对接调取数据接口,一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据,也会进行埋点。埋点就是在页面代码里插入一些统计代码,方便我们之后确定哪些页面访问量高,哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等。

△ 前端工程师代码编译(工具:Notepad +)

6. 项目走查

网页设计完成后还需要设计师进行项目走查,来确定网页还原度是否有问题。如果发现有和设计稿出入很大的,就需要要求前端工程师进行调整。这个步骤非常重要,因为网站的成品才是我们最终的输出,不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。

△ 将实现后的截图和设计稿进行比对(工具:Photoshop)

三、网站种类

网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者,例如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动端H5 等,均是面向用户和消费者的产品。由于是面向用户和消费者,所以设计上一定要可以吸引人,并且以用户为中心考虑体验设计。而 To B端作为一个需求量很大的类别,其实往往被设计师所忽视。什么是 To B端项目呢?比如电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。这些项目的要求和 To C端网站的要求大相径庭:To B 类项目最重要的是效率而不是体验,因为说白了我们在设计使用者工作的工具,我们在设计时必须首先要保证操作者可以高效地完成他们所需要完成的工作。那么让我们来了解一下网站的不同门类吧。

1. 门户网站

门户网站国内比较知名的有新浪、腾讯、网易、搜狐;国外比较知名的如 Naver、Llinternaute 等。我们可以看得出,门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高,必须要有雄厚的实力才可以建立起一个门户网站,而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求:比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生,那么门户网站中的设计工作就不会少。另外,具体对接频道的设计师也需要有一定擅长之处:比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。

△ 韩国门户网站Naver

2. 企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时,很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块,企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片,配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格,也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求,不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

△ 美国通用公司官网

3. 产品网站

从苹果公司的 iPhone 介绍页到小米手机8的介绍页,我们会发现一种新鲜的产品营销模式,就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感,所以一般来说都是使用全屏布局,然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。由于中国互联网和产品设计发展很快,所以产品类网站设计需求一定会越来越多。

△ 苹果公司产品介绍页

4. 电商网站

电商设计师也属于网页设计师吗?是的。如果按照平台细分,无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了,以至于从内蒙的牧民到海南岛的渔民,甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性,平台为商店开通了一些页面自定义的装饰功能,比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺,电商设计应运而生。虽然带着镣铐跳舞,但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。

△ 淘宝网首页

5. 游戏网站

游戏是一个巨大的产业,很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外,游戏的官网也必须设计精美。不要忘记,每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司(https://blizzard)的官网设计得极其精美,每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网,头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格,仿佛登录这个网站你就在游戏之中了。

△ 暴雪公司星际争霸2游戏官网

6. 专题页面

当然不管是电商还是门户网站,在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短,上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面,因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球?当然不能使用现代主义设计那种性冷淡风格,而应该在头部尽量刺激用户,用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次,不能放过这个机会。所以专题设计和产品设计正相反,专题设计必须刺激。

△ 极有家淘宝专题页面

7. 视频网站

视频网站的访问量惊人,并且用户的黏着度更高。很多视频网站除了购买版权之外还有很多 UGC 内容。多说几句,UGC(User Generated Content)是指用户产生的原创内容,很早之前 web1.0时代用户主要是单向浏览网站,web2.0提出的 UGC 概念就是说用户不仅在浏览也会上传内容。那么视频网站为什么会火呢?首先要感谢宽带的发展。在今年我们国内点击视频就立马可以播放了,而在几年前需要等待几分钟才可以加载够缓存。视频网站的设计主要是要考虑应用场景:视频是用户主要观看的区域,所以视频区域首先要足够大,另外颜色应该以暗色为主,因为亮色会干扰到用户观看视频。然后其他的区域图片比例应都为16:9的视频尺寸,方便后期编辑在后台添加。视频网站的设计师同样也可以分为产品组和运营组两个种类来处理产品方向和运营方向的不同需求。

△ 腾讯视频播放页面

8. 移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等 H5 刷过屏吧?平时我们经常被这种好玩儿的 H5 刷屏。其实 H5 全称是 HTML5,并不是仅仅指移动端,而是网页前端的开发语言,由于约定俗成的概念,我们现在常常把手机中的集合视频、动效、互动的这种营销形式称为 H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。随着技术日新月异的发展,H5 显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的 H5 的发展。如果设计出色,你的项目可能会在朋友圈产生病毒传播的效果。

△ 使用前端语言编译的适合手机浏览的H5界面

移动端H5尺寸

设计移动端 H5 项目的时候,我们一般以用户量较高的 iPhone6/7/8的尺寸:750x1334px为准,然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体,并且字号设置为24PX以上,渲染方式设置成锐利。...

优秀UE网页设计师成长之路之养成心得(电商、游戏、APP、H5) 企业视频课程

img

祖寻云

关注

如果平面设计是“叶问”,那么网页设计、UI设计就是“李小龙”。

那么今天我们就谈谈优秀“UE网页设计师”(以下简称“网页设计师”)的养成心得吧。

UE的意思是用户体验,英文叫User Experience,缩写为UE,或者UX。而网页设计是UED(用户体验设计)里面的一个类别。

但是要说明一下的是,不同公司对于网页设计师的定位与职能略有不同,有些大公司会在UED部门设有网页设计师,但是有些网页设计师会安排在游戏开发部,而一些中小型的电商公司,网页设计师一般是指设计电商页面(PC端、手机端、平板端都要做)的设计师,他们一般还需要兼顾一些移动端的设计,例如微信公众号更新、企业H5宣传设计等,甚至一些平面的宣传物料有时候也可能需要处理一下。

文章中有部分资料是我从网上收集后加以编辑的,有部分则是个人经验和个人理解,不喜勿喷,谢谢支持!

我曾经说过,平面设计是一切设计的基础,因此在我看来,网页设计是平面设计的衍生,是将平面设计的基础技能用于网络上,是即时的、是有交互性的、是会产生联系的。

打个比方,如果平面设计是“叶问”,那么网页设计、UI设计就是“李小龙”。 叶问是武术宗师,是开宗立派的人,而李小龙是武术的变革者,他将武术广泛应用在影视娱乐行业中。平面设计讲求是平面构成平面原理,而网页设计、特别是UI更多的是讲求数据驱动设计,两者有明显的分别。

(注:UI,即用户界面,User Interface的简称。泛指用户软件的操作界面,UI设计主要指界面的样式,美观程度。)

在我们熟悉的站酷中,网页设计被分类为:企业官网、门户/社交、电商、专题/活动、游戏/娱乐、个人网站/博客、移动端网页、Banner/广告图、其他网页等设计类别。

我主要把网页设计分成以下五大类别:

1、品牌网站、企业官网、游戏/娱乐、个人网站/博客:这是以“展示”作为主要功能的

2、电商网站:包括日常的销售以及活动促销,是品牌与卖货的结合,以实现转化率流量变现为目的

3、移动端、H5:这是基于手机平台进行的设计,特别注重交互性与娱乐性

4、企业系统后台:这是功能性为主的一类

5、社区和其他:这种是早期的网页设计形态,特别注重PC端的交互性

在正式开始学习之前,我就目前网页设计的发展情况,简单的分析一下:

品牌网站、企业官网(纯展示、宣传用途)已经由热变冷,这种纯展示类的门面工程,逐步被微信公众平台所取代(也有部分有一定流量的品牌会选择做自己的品牌商城,而放弃纯宣传展示的官网)。而在网页设计的细分类别中,电商、游戏、H5类目还有不错的表现。特别是电商与游戏,电商设计随着越来越多的商家对于品牌的重视,还有游戏业的持续发达,电商与游戏类别的设计师待遇也是水涨船高。

一、一切从基础开始

1、流程

首先,你需要了解网页设计在项目中所处的位置、以及项目的流程。严格来说,网页设计没有统一的流程标准,因为官网设计、电商设计、游戏专题设计、移动端设计等各种设计项目都存在一定的差异。因此,我现在要说的是一般通用的流程,大家可以先了解一下,再根据各自负责的项目特点,将这个流程细化。

需求方提出项目/设计需求——策划人员根据需求做出方案——做出原型图——设计师、前端开发等人对该原型图进行技术评估——网页设计师设计平面效果图——编辑代码制作网页——交付给前端实现——完成。

2、规范

【 网页尺寸 】在国内一般情况下,网页宽度为1920像素,高度根据实际需求而定,当然如果为了适应更多的4K、8K显示器用户可以把宽度设置得更加宽。要注意一点的是,无论页面宽度有多宽,网页主视觉的最佳可视范围宽度一般设置为1000-1200像素,虽然设置较为保守,但是这样可以保证大部分用户在较为舒适的情况下浏览网页。

【 栅格系统 】

简单来说,网页的栅格系统是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。它是从平面栅格系统中发展而来。对于网页设计(PC端)来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。另外补充一点,在移动端的布局中,栅格系统同样适用,只不过移动端需要按不同的系统区分,市场上主要以iOS与安卓系统为主。

【 主流浏览器 】为了使用户有更佳的交互体验,网页设计师需要与前端工程师在多个主流浏览器中测试最终的页面效果。目前国内最常用的浏览器有以下几个:

Google Chrome:由Google公司开发的网页浏览器。

IE:英文全称InternetExplorer,是微软公司推出的一款网页浏览器。

Mozilla Firefox:中文俗称“火狐”(正式缩写为Fx或fx,非正式缩写为FF),是一个自由及开放源代码网页浏览器,使用Gecko排版引擎,支持多种操作系统,如Windows、Mac OS X及GNU/Linux等。

Safari:苹果计算机的操作系统Mac OS X中的浏览器,使用了KDE的KHTML作为浏览器的运算核心。

Opera:挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。

【 字体 】作为设计师,其实我们并不需要使用太多的字体,更不要使用太过于标新立异的字体。在使用字体时,设计师需要有自己的一套系统规范。

另外在网页上使用的字体,我建议使用偶数值例如10、12、14、18等,因为偶数值比奇数值字体,在网页上显示得更加清晰,而且奇数值字体的文本段落无法对齐。

【 版式 】版式是所有设计中最基础的部分之一,关于排版,我有一个“方块理论”想跟大家分享的。大家想象一下,试着把作品最外面的平面想象成为一个最大的方块,然后主视觉和辅助图形分别由多个大大小小的方块组成,最后组合成为一幅作品。我把这个方法论称为“方块理论”。

【 色彩 】以品牌为导向,数据为驱动。

【 标注与切图 】标注切图,是指将设计稿切成便于制作成页面的图片,并完成HTML+CSS布局的静态页面,有利于交互,形成良好的视觉感。通俗来讲,把一张设计图利用到切片工具,把自己所需的切成一张张小图,然后用p+CSS完成静态页面书写,完成CSS布局。

3、细节

【 交互常识 】我们经常说细节决定成败,在讲求交互的网页设计中,我们作为设计师应该注意以下几点交互常识:

简化操作:能一步完成的交互就不要分两步。

用户习惯:大部分用户都有固化思维,我们作为设计师应该尊重数据,尊重用户选择。

减少干扰:减少界面元素的不确定因素,方便用户快速找到自己想要的。

快速响应:加快用户读取的响应速度,能够避免从远程取数据的,就尽量避免。

界面友好:除了根据需求提供视觉解决方案以外,在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。

【 图标 】

图标与品牌标志一样,在设计时都需要做适当的减法,应该尽量用简约的线条去表达其含义,应该尽量避免出现线条结构过于复杂的设计,而且整体的图标都需要保持风格一致,例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。

【 图片 】

图片统一性:

1)图片色调色温需统一,例如一个婴儿产品的首页,整体需要搭配暖色调的图片,这样看上去整体才比较统一舒服。

2)图片比例需统一,例如一个卖货的产品详情页,在同一屏的栏目中(页面)所出现的产品或者人物,比例就需要有一个统一的大小比例,这样看上去才比较统一舒服。

图片细节处理:

1)图片精度不够(这里所说的精度不是说DPI分辨率需要300哦,那是做高精度印刷输出时才需要的,而在电脑及手机上的图片DPI分辨率为72即可,另外输出图片时需适当压缩一下图片的大小)、杂色太多可以使用PS内置的CR滤镜处理。

2)图片尺寸建议统一为偶数值,方便前端技术人员开发。

3)图片边缘避免与白色背景融合,可以在边缘位置加色。

4)为了配合标题字体,图片可以局部调亮或调暗。

【 动效 】

无论是现在经常看到的企业/品牌H5宣传页面、移动端启动页,还是曾经红极一时的首页动画,都需要用到动效效果。会做点动效会给我们加分不少,尤其是做一些加载动画,这是我们经常会遇到的需求。

做动效时,我们需要注意以下几点:

1)不论你的动画有多好看、多吸引眼球,如果成本太高或者过于复杂都是无法落地的,所以我们要遵循简单实用的原则来进行设计,千万不要过度设计。

2)任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说,我们需要考虑加载成功的反馈与加载失败的反馈,并将之注明在输出规范中。

3)动效使用的工具:可以PS做一些动态表情,用AE做一些加载动画,页面之间的交互动效可以使用Flinto、Principle等。

【 个性 】

每一个设计师都需要在作品中加入个人原创的东西,形成自己的一套设计系统和独特风格,才能使自己在竞争中立于不败之地。

二、网页设计师的“高手之路”

对网页设计的工作有了具体的了解,并且实战过一段时间之后,我们就应该朝着“高手之路”进军了。你会发现“高手之路”更多的是沟通与思考。

1、培养整体大局观

1)提升高效沟通的能力

高手级别的网页设计师,需要花相当一部分时间用于与项目负责人、策划人员、前端开发人员进行沟通,甚至有可能直接跟客户沟通。这时候,你需要加强沟通的技巧,以实现高效的沟通。

2)加强时间管理的能力

除了沟通技巧之外,高效地管理时间也是网页设计师需要提升的能力。你需要把网页设计过程中的时间安排提前规划好,并严格按照进度来执行,以免延误Deadline。

3)加强项目管理的能力

要知道,网页设计师不仅仅是埋头画图PS,你也需要了解整个项目从启动到规划、到执行、到结束的全过程,而且还需要在项目过程中管理好你的团队,把控好设计质量,这样才更有利于网页设计工作的开展,因此你需要加强自己的项目管理能力。

2、视觉、技术、执行

1)视觉——数据驱动下的设计——F布局

特别是电商设计,由于电商网页的设计是以“转化率”为目的的,因此在设计的时候需要根据数据分析的结果进行设计,而不单纯是为了视觉上的“好看”。

电商设计是传统平面设计和网页设计的结合体,就好比以前我们看到的超市海报,你可以看到这些折扣促销信息,但是你要买东西还是需要去店铺里。而电商设计的任务就是,直接在网上把这些商品展示在网页上、手机上,你直接点击可以购买了,这个购买的过程就涉及到了人和设备之间的互动交流。

2)技术——设计之外的世界也要多了解

作为设计师,我们不能只关心纯视觉的知识,在国外特别是在美国的大公司,纯视觉设计师已经很少很少了,他们大多数都是身兼数职的,包括交互、数据分析整理、开发等。所以我们不应该只作为某一行业的专家,而应该以互联网专家为目标去不断学习,这样才能不断成长适应这个快速增长的社会。

3)执行——网页设计师的“执行”主要体现在功能实现上

必须说明的是,网页上的功能能否实现,不是需求方或者项目负责人说了算,也不是你一个人能定夺,而是需要跟前端开发人员进行沟通,了解能否实现,更需要了解实现该功能的成本和时间。

工作过程中经常会存在这种情况:某一技术功能是可以实现的,但是需要的时间或成本很有可能超出预算,这时候就需要多方人员协调沟通,到底是为这个功能增加成本、拖延工期,还是放弃这个功能?有效沟通是执行的基础。

3、提升你的软件技能

PS——图片处理

Photoshop在平面设计和网页设计中的强大功能不需我多费唇舌了。

AI——图形处理

AdobeIllustrator,简称“AI”,是一款非常好的矢量图形处理工具,主要用于字体设计、图形设计,产品包装的设计、画册/书籍/杂志的排版、插画设计等。

C4D——三维特效、动画

C4D的特效、动画实现在网页设计中越来来重要。

AE、Principle——动效

AdobeAfter Effects简称“AE”,是Adobe公司推出的一款图形视频处理软件,简单来说就是一个动态版的PS,功能十分强大,但是操作比较复杂。

Principle是一款比较容易上手的交互设计软件。界面类似 Sketch,思路有点像用 Keynote 做动画,但它更加可视化一点,可惜的是目前它只支持Mac系统。

Origami、Axure——原型交互

虽然现在不少公司的项目团队会将交互原型的绘制交由项目策划人员来负责,但是网页设计师也需要了解常用的原型设计软件Origami、Axure等的使用方法。

三、其他补充

1、方向选择,就业情况

据调查显示,目前设计行业中,以移动UI设计师薪酬最高,网页设计师跟随其后。不容忽视的是由于电商行业的发展势头迅猛,电商设计师的就业形态也是很乐观。而且加上一直发展迅速的游戏行业,网页设计师前景还是比较乐观的。

电商设计是什么和电商的发展史 公司视频课程

img

尔蓉

关注

众所周知,电商设计是平面设计和网页设计的结合体,好比在淘宝上看到的广告设计图,就是捕获不少消费者的眼球的,除了美观,设计师还要注重图片的用户体验。所以一个灵活的设计师,能为公司带来很大的效益。下面由有拜电商设计给大家介绍一下!

电商设计是什么?可以理解为网页设计+平面设计的结合,但同时又多了一些用户体验和人机交互的概念,借助互联网来传播,以卖货为最终目的,所以除了涉及到平面设计和网页设计相关的所有设计知识以外,还会涉及到销售、用户心理、用户体验、运营、交互方面等等方面的知识。

电商设计主要做什么呢?1.店面装修:设计网店框架、设计店内各内页、手机淘宝网店框架、现手机淘宝网店各内页;2.产品详情页设计:拍摄产品图、产品效果P图、设计产品详页介绍;3.网页VI设计:网店平面宣传单、网店产品包装设计、设网店平面海报设计。

电商设计的前景如何?随着电商行业的迅猛发展,电商设计师成为行业内不可或缺的人才,好的设计师能让同一件产品产生完全不同的价值,电商设计师随着工作经验的累计,薪资涨幅也会越来越高!而一名优秀的设计师甚至可以独立运行工作室。

电商发展史1994年中国引入互联网,1999年马云创办阿里巴巴(B2B),2003年3月美国ebay3000万美元入股易趣33%进入中国市场,随后4月淘宝网成立(C2C),2004年亚马逊7500万美元收购卓越网进入中国(B2C),2006年淘宝占领C2C领域70%市场份额,ebay退出中国,腾讯拍拍网成立(C2C),2008年淘宝成立独立运营的商城事业部(现在的天猫)(B2C),2009年淘宝造了一个节“双十一”,2010年4月阿里巴巴正式推出全球速卖通,2011年淘宝分拆为三家公司:一淘网、淘宝网、淘宝商城,2012年双十一销售额191亿(2011年52亿)、淘宝商城更名为天猫,2013年淘宝双十一销售额350亿,2014年淘宝双十一销售额571亿、各大电商平台加大移动端布局,2015年3月亚马逊入驻天猫、4月ebay入驻京东全球购、8月苏宁牵手天猫。

以上就是有拜电商设计的总结,如有不对之处,欢迎大家批评指正,同时欢迎大家点赞,留言。

网页设计与淘宝美工的区别你知道吗? 企业视频课程

img

归隐

关注

许多来成都华信智原学习设计的小伙伴,开始都会把网页设计和淘宝设计混为一谈,总觉得二者是同样的只是称呼不同。

实际上二者是有区别的哦,现在先来说说二者分别是干什么的。

淘宝美工

淘宝美工也叫电商视觉设计师,有木有瞬间高大上的感觉

主要会设计的工作是:

1、天猫、淘宝的店铺首页等的装修

2、商品修图,详情页的设计排版制作

3、通过动态代码设计动态效果图展示

4、商品直通车、展示广告BANNER图等推广图设计制作

网页设计

含盖面更大,称呼也相对很笼统,涉及的工作一般也是网页图片、banner、美化工作及整体网页设计等等,同时也包含了淘宝美工的工作。

那么二者到底有什么区别呢?

含盖范围的不同

从图片中不难看出,网页设计是包含了淘宝美工的,二者首先在含盖面上就有不同,就类似于苹果和水果的关系一样,这样一说就很好理解了,一个更加具体,一个含盖更宽,更像是是从属关系。

说完不同那二者又有啥相同呢?

1、无论是网页设计还是淘宝美工都需要会掌握色彩、图片、文字的排版来增加商品网站或其他网站的吸引力,并提高促进购买率或是网页收入的最终目的的实现概率。

2、需要掌握的技能许多也是一样的,PS是基础必须掌握,色彩搭配理论、图像处理手段、图文排版也是必须储备的知识,其次深入的还需要学习web前端代码的基础知识,且都需要不断的掌握更高的技能,在未来从业中你都会觉得非常好用的。

最后:

不管你是想学习网页设计还是淘宝美工,甚至是UI设计或是跨境电商我们成都华信智原都有专业的大咖老师辅导哦,不怕你学不会就怕你不来。可别忘了这些都是高薪工作哦。

揭秘爆款电商网页的设计套路 行业视频课程

img

怨杨柳

关注

今天再次分享下面条儿的一篇电商设计教程文章:做个有吸引力的电商产品的详情页设计。这文章涉及到构图、配色、氛围点缀、字体以及排版等多个方面,重点围绕以下四点讲述:

一、吸引力的「头图」

关键要点:大、破、美、飘、脑洞、光影

二、整体风格要连贯

关键要点:提取、形状、色彩、质感、成分、功效

三、整体气质要搭调

关键要点:协调

四、整体浏览器体验要好

关键要点:人性化

要如何才能吸引人呢?我给大家总结了一些关键词:

关键字:大

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

关键字:破

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

关键字:美

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

关键字:飘

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

关键词:脑洞

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

关键字:光影

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

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

关键词:提取

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

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

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

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

关键词:协调

每一个详情页其实对应的就是一款产品一个主题,主题活动或产品不同,其气质肯定就不一样了,所以这里的协调反应出来的首先其实是气质上的协调,比如;

高冷的大牌的气质:画面要么很简洁有质感,有么很华丽有光泽:

活泼可爱的气质:比如可爱的模特/字体/或粉能的颜色/手绘元素等。

年轻时尚的气质:这种气质的页面往往棱角比较分明,色彩上貌似没什么太多要求,主要看怎么搭配,但至少会有一些亮色点缀。

产品的品牌定位或功效往往决定了他的外包装设计,而他的外包装设计或者说vi设计又会决定她的详情页设计,所以电商设计师以后的发展趋势可能不止是要关注线上就够了,有时间的话平时也留意下线下传统平面设计方面的知识吧,现在很多店铺在品牌视觉统一方面的意识还是比较欠缺的,而这也正好是设计师们可以去发挥的机会。

关键词:人性化

如果你能做到前面几步,那么你可能会产出一份视觉不错的详情页设计,但光只是做到视觉上的美观还不足以打动人去购买你的产品,你还得给人更好的浏览体验才对,具体表现在以下几个方面:

在排版布局上:

形式不能过于浮夸,那么一些比较常用的布局方式有哪些呢?我给大家汇总了一下,其实跟专题页设计布局排版是类似的,我干脆拿以前总结的样式给大家看一下:

左右对比形式的专题页,常见于需要表现出PK或者VS对决类的专题页设计。

S形的专题页,这种形式的专题页基本上不管什么需求的设计都可以尝试,因为它相比于平铺直叙的形式既不会显得那么呆板,同时阅读起来也很流畅,举例:

Z形的专题页,这种形式的专题页其实跟S形的作用是类似的,只是说这种Z形会比S形硬朗,更适合用作一些比较男性化的风格页面或者品类里,比如电子器械/汽车/男士护肤/游戏等,举例:

1字形的专题页,有一种硬朗和厚重的感觉,这种形式的专题页除非是有如下图所示的这种高质量模特大图或产品图镇楼,一般情况下很少用到,尤其是在卖货类型的专题页里,可能会显得背景有点抢镜了。

常规楼层类型的专题页,这种页面会显得比较简洁好把控,主要在于背景颜色要有深-浅-深-浅的节奏,同时每一个楼层都是单独的模块,有利于信息阅读。

自由排版类型的专题页,这种专题页设计比较适合那些想走高逼格路线的时尚服饰类目,同时这种设计往往是看着简洁,但是对设计师的排版功力要求比较高,不建议新手或没什么功力的人尝试:

在字号大小的选择上:

目前移动端详情页的设计才是重中之重,所以为了便于大家手机阅读更舒适,最小字号不能低于20号,最大字号大家就可以自己估摸着来了,也可以参考各大平台app的最小字号:

在字体的选择上:

尽量选择便于识别的字体,但这个便不便于识别也是相对的,比如以苹方简纤细体为例,如果是放在比较简洁的背景上,它其实也是一款便于识别的字体,如标识1处,但如果放在复杂背景上它就不是一款便于识别的字体,如标识2处:

其实主要记住下面几个对比规律就好了:

背景复杂,字体选粗一点的或笔画规整一点的比较好;

背景简单,字体选择就多一些,不过也要考虑气质搭不搭调;

背景颜色暗,字体颜色就该亮一点;

背景颜色亮,字体颜色就该深一点;

不管背景复杂与否或明还是暗,字体越大越便于识别,不过也要考虑美观与否;

在色彩选择上:

颜色越深给人感觉就越神秘或压抑或沉稳有质感,颜色越明亮给人感觉就越年轻活力或轻浮或张扬,在用色上其实最忌讳的是一暗到底或者一亮到底,要有明有暗才会比较透气或耐看,让人感觉愉悦。

比如,对下下方的内衣背景颜色看看,黑色背景显得很沉寂,蓝色背景显得很清爽:

关注UI设计,关注先行迦美

电商网页设计第一天课程笔记 行业视频课程

img

薛勒

关注

武汉大牛哥教育电商网页第一天笔记!

第一天 电商基础

电商设计前景与价值

电商设计师分为平台电商和店铺电商!

美术理论基础

明暗:三大面五大调

色彩:色相、明度、饱和度

色彩搭配:单色、近似色、分裂色、补色、消色搭配等

明暗原理对设计的影响

拟物化:具象

扁平化:抽象

拟物+ 扁平 = 微扁平

绘制扁平图标、拟物图标、微扁平图标

大小: 3:2 宽高比例 文字与按钮的宽高比:文字是按钮的1/2左右

颜色:与背景对比比较强:色相、明度

对齐:文字与按钮的对齐方法:居中、垂直

字体设计练习:命题:时间都去哪儿了?且行且珍惜

认识字体:根据不同的主题选择不同的字体;

字体排列:对选择的字体进行符合主题的字体排列;

字体设计:对字体进行一定程度的艺术处理和变形;

字体效果:对字体进行效果打造;

男人的时间去哪儿了?

女人的时间去哪儿了?

孩子们的时间去哪儿了?

老人的时间去哪儿了?

立体字效果打造

武汉大牛哥教育第一天电商网页设计班课程笔记,免费奉送!

什么是平面、网页、电商、UI设计?哪个更有前途? 推广视频课程

img

宫若烟

关注

很多刚入行的,或者准备入行的。对设计的概念笼统的认为美工,或者是P图的。平面、网页、电商、UI设计之间虽然有很多交叉的地方,但是深入了解还是有很大差别的。特别是未来能干什么?具体工作需求是什么?薪资和发展如何?

平面设计

平面设计是最古老的专业,可以说是设计成为门类的第一个专业。可是说是其他设计门类的鼻祖。平面设计与其他三类设计最大的不同是,平面设计只停留在视觉层面,需要懂输出工艺。

平面设计的载体较多,例如我们看到的单页、名片、画册这些都是应用的铜版纸,铜版纸的计量单位是g,一平米的质量来计量的。质量越重,纸张越厚,价格越贵。

平面设计还涉及到喷绘和写真等利用的背胶PP合成纸、有高光相纸等,这些倒是与设计关系不太大。

我们要注意的是平面设计的一些不同方法。单位:CM/MM,颜色模式CMYK,但是不太一样的是分辨率,视距越近分辨率应用最大,例如单页、名片、画册这些都是使用的300,而写真和喷绘,不需要这么大 72 、100、150都可以,因为这些都是在很远的距离观看。

平面设计的范畴还有很多,例如电梯广告、展板、VI识别等。

主要技能:PS、CDR、AI、ID等设计软件是最常用的软件,掌握其中一种或几种基本能胜任。当然除了软件技能之外,更需要注意的是配色、排版、工艺等知识的学习。

网页设计

凡是用浏览器打开的都可以称之为网页(此处不包含电商)。网页设计可分为展示型网页,功能型网页。展示型网页主要设计一些官网,活动页面等,功能型网页,例如淘宝、携程之类的。网页设计除了设计视觉效果之外,更重要的是考虑用户的操作问题。好的网页设计师可以进行切图、静态网页的编写。网页设计更重要的是能够与前端工程师合作,那么我们应该懂一些网页设计的基本规范。

网页设计的单位:像素;颜色模式:RGB;分辨率:72

主要技能:PS是网页设计最常用的工具,如果能掌握AI或者一款3D(3DMAX、C4D)软件,那么视觉效果会有更多的选择。HTML的编码能力最好也能够具备,实现静态网站,那就更具有竞争力了。

电商设计

这几年电商设计师的薪资水涨船高,电商设计主要分为:店铺电商设计和平台电商设计。店铺电商主要负责店铺产品的拍摄、店铺设计、店铺装修、站内外广告设计等。平台电商是针对电商平台进行的设计,所谓的电商平台例如:淘宝、京东、天猫就是电商平台,当然很有很多很多小众的、行业细分的电商平台,电商平台设计与网页设计师更像。

电商设计的单位:像素;颜色模式:RGB;分辨率:72

主要技能:主要技能:PS是网页设计最常用的工具,如果能掌握AI或者一款3D(3DMAX、C4D)软件,那么视觉效果会有更多的选择。HTML的编码能力最好也能够具备,实现对店铺装修有很大的作用。

UI设计

提到UI设计的载体首先想到的是手机,没错,手机确实是目前社会中最常用到UI设计的载体,手机以外还有电脑/平板/电视/取款机/购票机/游戏机等。比如容易忽略的ATM提款机上的界面,地铁站的自助购票机界面等都是UI设计范畴。UI的英文全称是user interface 翻译成中文是用户界面,也就是说我们平时用的任何有交互界面的设计都能称之为UI设计。

UI设计师是制作视觉设计的,在尺寸,按钮,间距等方面需要做到像素级别的准确度,而在做一些banner宣传图时又需要有天马行空的表达。有点像平面设计与网页设计的结合。

如果UI设计师在规范、切图、交互上面下功夫,会使你如虎添翼。做设计的思维一定不能停留在视觉层面。

最后一点,任何行业只要深入、精通都是高薪。很多时候切莫道听途说,人与亦云。任何具备技术能力的岗位薪资都不会太低。再则,设计对学历要求并不高,只要努力,勤奋,一样高薪。

img

TOP