当前位置: 皇家棋牌官网 > 摄影 > 正文

经过实战案例帮你解锁5种商品安顿姿势,笔记整

时间:2019-09-28 13:12来源:摄影
有的页面总是令人过目不忘,我们不得不感叹于页面的表现力和感染力。有趣的专题能带给访客更多的愉悦感,增加参与度,常见的表现手法通过建立场景以及多元化视角,当然如果团

有的页面总是令人过目不忘,我们不得不感叹于页面的表现力和感染力。有趣的专题能带给访客更多的愉悦感,增加参与度,常见的表现手法通过建立场景以及多元化视角,当然如果团队有能力还可以策划出一些互动设计,或者以动漫插画形式结合幽默的文字等多种形式表现页面风格。

在做活动页面的时候你是不是也会跟我一样纠结商品要怎么样摆放呢?商品的摆放跟页面的板式布局紧密相关。这次为大家带来的是活动页面设计之商品的5种摆放姿势,下面我们一起来看看。

在大学的时候,对交互设计和UI设计的理解只局限于手机上的APP,网站之类的不在其中。理由很简单,网站页面设计早就有了,而且之前大家都把网页设计师叫做美工(心里很抵触这种叫称呼)。而UI设计和交互设计好像是伴随智能手机出现的。之前的这种理解肯定是错的,不过我的心中埋下了想设计手机APP的种子。《移动应用UI设计模式》是一本快速了解手机应用的工具书。它把手机应用的归类;拆分成十个部件,再详细介绍每个部件。

今天我们为您推荐这20个有意思的游戏专题,来采集一下灵感吧。

部分图片案列来自网络,多多包涵。

以下是整理笔记:

案例一

一、商品的摆放姿势

皇家棋牌官网 1

页面形式为酒吧的吧台,相当好的代入感,你会觉得几款美女在等你。

运动轨迹

1.1-选项卡式-Tab Munu:选项卡式的导航在很多机型里都有不同的体现,这里只列举IOS和Android作为案例;优点:这是一种常见的导航,倘若应用要用户在不同分页里频繁切换,就用这类导航缺点:是会占用一定高度的空间。Android的这个形式看上去很熟悉,因为模仿了网页导航模式,是PC端遗留的产物。这种方式不利于大屏手机单手切换操作

皇家棋牌官网 2

三角摆放

案例:IOS - App Store,Faebook , 微信

案列二

漂浮上空

皇家棋牌官网 3

看似是一个摇奖活动,无论是形式和质感都很有新意,让人看到就很难再移开目光。

平视角度

案例:Android - 主题商店和应用商店

皇家棋牌官网 4

放置容器

皇家棋牌官网 5

案列三

仅供大家参考,做一个抛砖引玉。也希望给大家带来一些收获。

看出IOS与Android的区别了么?

看似很常规的一个设计,但有趣的原画素材也能给专题增色不少。

明确商品的作用性

1.2-舵式导航:本书里没有介绍,自行添加的。舵式导航应该属于标签卡式导航的一种延伸。中间的标签作为重要且操作频繁的入口,一般都用图形或颜色凸显出来

皇家棋牌官网 6

1、明确页面主题,卖什么或者什么有优惠

案例:微博,Path,Instagram

案例四

2、丰富页面,增强促销气氛

皇家棋牌官网 7

看似又是一个翻牌赢奖品的活动页,设计师把背景做成了个桌面,突然身临其境。

3、增强用户的购买欲望

1.3-列表菜单式 List Menu:这种导航有很多种变化形式,包括个性化列表菜单,分组列表,和增强列表(Enhanced List)等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。列表菜单合适显示较长或拥有次级文字的标题

皇家棋牌官网 8

在很多时候我们做活动页面是没有模特的,大多数是商品,尤其是平台的活动。

案例:小米手环,VPN,iPhone手机系统设置

案例五

在促销活动页面或banner中商品的摆放方式也是挺重要的部分,一个页面好看不好看、有没有购买欲望、气氛强不强都和商品息息相关。

皇家棋牌官网 9

往往变换一个视角,给人的视觉冲击却是巨大的。

我们不仅要做到版面形式好看,也要处理好商品。

1.4-跳板导航 Sringboard:跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。有时也被称为“快速启动板”(Launchpad)。跳板式导航的特征是,登录界面中的菜单选项就是进入各个应用的起点

皇家棋牌官网 10

开始咯

案例:支付宝,爱奇艺

案例六

商品在页面中摆放的方式有很多,在这里我举例在活动页面中比较常用的摆放方式演示。

皇家棋牌官网 11

这个有趣的地方在于把人物放在一个盒子里,顿时有了空间感。

先看一看:

可进行位置上自定义,看案例中的橙色与蓝色的分布就是自定义的结果。对比一下自己的手机看看

皇家棋牌官网 12

皇家棋牌官网 13

1.5-陈列式 Gallery:陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示

皇家棋牌官网 14

案例:厨房的故事,Dribbbler,Pinterest

PS:下面案列演示不足之处,望大家见谅。

皇家棋牌官网 15

01、运动轨迹

1.6-仪表式-Dashboard:仪表式提供关于一种度量KPI是否达到要求的方法。主要应用:商业应用,分析工具,销售,和市场应用

运动轨迹通过字面解释我们清晰的明白,商品有一个轨迹,列如正方形、圆形等。运动本身就是一种节奏,所以让你的商品也一起变得有节奏起来。它会存在有形的轨迹和无形的轨迹。

案列:AT,Overiew

我们看有形的运动轨迹案列:

皇家棋牌官网 16

皇家棋牌官网 17

1.7-隐喻式:用页面模仿应用的隐喻对象。主要用于游戏,同时在帮助人们组织事物(如日记、书籍、红酒等),对其进行分类的应用中也会用到。随着扁平化的流行,隐喻这种偏向拟物的设计渐渐成为过往,锤子的手机应该会有很多案例

皇家棋牌官网 18

案列:印象笔记,DailyCost

通过上面我们可以看出运动轨迹是非常的明显的、这种方式目前还是比较少。那么我们该注意些什么呢

皇家棋牌官网 19

皇家棋牌官网 20

1.8-超级菜单:在选择导航模式之前,先确定信息架构。如果导航对象只有少数内容,就可以使用选项卡之类的导航模式

1、商品大小、虚实。离我们越近的物体越大、越清晰,反之越小,越虚化。

案列:RipCurl

2、有形的运动轨迹不可喧宾夺主,适当就行。

皇家棋牌官网 21

我们看无形的运动轨迹案列:

1.9-抽屉式 :抽屉导航特点是菜单隐藏在当前页面之后,只要点击入口就能将它拉出来,此类导航好处是节省页面展示空间,有利于用户注意力在当前页面聚集,可以应用在不需要频繁切换内容的应用上,以对设置、内容进行隐藏。此类导航设计务必提供菜单画出的过渡动画

皇家棋牌官网 22

案例:知乎,亚马逊

皇家棋牌官网 23

皇家棋牌官网 24

通过上面我们可以看出运动轨迹是通过 小人、实物、足球一起组合起来,使画面有了一个视觉的运动轨迹。

『谢谢阅读:马赞赞』

那么我们要注意些什么呢?

后续更新:表单设计,表格设计

1、还是一样大小、该弱化的则弱化

2、物体元素不能喧宾夺主、抢了标题的地位

案列欣赏

皇家棋牌官网 25

皇家棋牌官网 26

02、三角摆放

在商品摆放中,我们会发现很多页面中的产品摆放会近似三角形。因为三角是最稳定的形状、三角也有一个引导指向性。三角摆放是最常见也是最稳的一种方式、它不局限于商品的角度,是否立体。平的立体的它都通吃。

我们看三角摆放案列:

皇家棋牌官网 27

皇家棋牌官网 28

皇家棋牌官网 29

皇家棋牌官网 30

是不是看着很眼熟,因为我们经常会看到这种摆放方式。

那么我们需要注意什么:

1、千万不要摆成很正的三角形,随意一些更好

2、三角摆放后你会发现三角的顶部会出现空的地方,需要用飘起来的商品补充

最后是虚化的,因为摆放的商品都是实的,所以其它弱化。

3、商品不可过多、多则乱。也不可过少、少则松

4、商品颜色尽量少,避免过多把画面变花了

案列欣赏

皇家棋牌官网 31

皇家棋牌官网 32

03、漂浮上空

我们先看下商品漂浮空中的案列,感受下它们之间的共同点。

皇家棋牌官网 33

通过上图案列中我们可以发现:

1、商品的都是比较立体的,透视感强(ps:由于某些商品特性会存在只能平视角度的这个可以忽略)

2、商品直接的大小小关系明确,层次明显。

3、商品颜色与页面颜色融合,不相冲。

皇家棋牌官网 34

案列演示

摆放要求:需以商品漂浮上空的页面

画面布局:标题居中,商品两边漂浮布局

寻找商品:在找相关商品的过程中切勿着急哈,下一个会更好

ps:

1、如需求方有要求放置的商品 ,提前找他提供。

2、根据页面的颜色尽量找比较符合页面的商品,尽量不要选着颜色过黑

的产品,不然会在页面中显得比较脏。

设计过程:

我们首先确定标题排版。

皇家棋牌官网 35

开始配色

选用蓝、紫三种颜色搭配,蓝色与紫色为近似色。

皇家棋牌官网 36

皇家棋牌官网 37

添加商品

调整好角度。和商品排放的位置,这个一定要多尝试,或许放到右边更合适,又或许是左边。

皇家棋牌官网 38

开始细化标题区域

过程我就不在这里细说了,大致说下

1、主标题增加立体,增强主题感。

2、结合字形稍作变形

3、给整体文案背后增加一个载体,让其从背景中突出出来。

4、副标题增加色块来增加色设计感和与背景拉开层次。

5、背后的载体也要有深浅、暗部和亮部层次。

标题颜色根据我之前说的深色配亮色,所以这里背景为深色,选择黄色来搭配。

副标题选用白色就好了。

最后效果如下:

皇家棋牌官网 39

调整商品的深浅关系

1、离我们越远的商品我们需要通过混合模式正片叠底、透明度来使商品融入背景中。

2、离我们越近的商品我们需要保证它的清晰度,不能模糊。可以通过锐化来提升清晰度。

皇家棋牌官网 40

调整商品的环境光色

根据商品所在的页面地方颜色增加环境色,同时也可以通过增强商品的明暗来提升商品的品质

1、可以通过混合模式叠加、正片叠底、高光这些模式来处理商品上面的环境光色。

2、给2-3个商品来一层动态模糊,增加画面动感。

皇家棋牌官网 41

添加相关点缀元素丰富画面

因为是618的相关页面所以这里需延续主会场的页面元素贯穿整个活动,保持统一性。

点缀元素也需要有深浅关系、大小层次。

现在感觉背景亮部还是有些不够,增加亮部。

最终效果如下:

皇家棋牌官网 42

做到这里就完结了,我们需要有耐心去不断调整颜色、深浅。

04、平视角度

我们先看下商品平视角度的案列,感受下它们之间的共同点。

皇家棋牌官网 43

通过上图案列中我们可以发现:

皇家棋牌官网,从字面上面的理解,平视角度就是当我们人的视线与物体水平看到的视角。这种视角的商品摆放方式在日常的页面中都是比较常见的。

那它们的共同点:

1、都是通过前后叠加商品产生远近关系

2、高低层次明显

需要注意的地方:

皇家棋牌官网 44

案列欣赏

皇家棋牌官网 45

皇家棋牌官网 46

案列演示

摆放要求:需以为商品平视堆积摆放方式

画面布局:布局为左右布局,文左品右

寻找商品:在找相关商品的过程中切勿着急哈,下一个会更好

ps:一些设计做的页面不知道为什么它的商品总是模模糊糊的非常不清晰,这叫我是无法忍受的,不知道他是怎么看的过去。所以商品的质量也同时

影响了一个作品的质量。

设计过程:

我们首先确定标题排版。

皇家棋牌官网 47

开始配色

1、促销所以选择了红色作为背景,黄色作为辅助色分割版面。

2、我们通过添加文字的投影来拉开层次,利益点做有成弧度的排版迎合数字3。

皇家棋牌官网 48

添加商品

1、把商品放置页面上,通过分割版面。页面的层次则多了一层。 虽然方法老套,但很实用。

2、商品之间的高低一定要明显、商品与商品之间不可太过疏远。

3、如有有条件可以添加个相关人物也能好好的增加气氛。

皇家棋牌官网 49

丰富营销感

促销活动页面自然是少不了热闹,通过添加飞絮、碎碎的这些小东西。促销感立马出来了。

皇家棋牌官网 50

到这里这个案列就完了,比较简单的一个案列,不是很好望大家见谅。

05、放置容器

放置容器中现在也是挺常见得了,也挺好玩的。你可以把一切东西想成容器把商品放在里面。

皇家棋牌官网 51

皇家棋牌官网 52

通过上图案列中我们可以发现:

容器它可以是一个形状也可以是真实的东西,其实设计是源于生活的。

皇家棋牌官网 53

案列演示

摆放要求:放置一个容器中

画面布局:布局为左右布局,文左品右

寻找商品:在找相关商品的过程中切勿着急哈,下一个会更好

设计过程:

我们首先确定容器,突然想到老虎机所以就觉得用它做容器。

皇家棋牌官网 54

确定排版

首先我们确定文案的排版,重要信息和次要信息的处理。

经常在活动页面中字体都是倾斜的,倾斜的好处是与生俱来的动感。

皇家棋牌官网 55

开始配色、添加图案背景

1、炎炎夏日嘛,当然选了清凉的蓝色到绿色的渐变(这里随心就好了,又不用给老板看)两个颜色的跨度不要太大,不然就会不自然了。

2、添加图案,五角星,抽奖我会想到星星。星星似乎挺娱乐、玩乐的感觉。

3、添加纹理素材-这里马赛克了一张素材,效果还可以。

皇家棋牌官网 56

制作容器

参照老虎机的一些原型,勾勒轮廓。制作过程不细说了。在这里提醒2点

1、有的地方可以自己稍作调整,不需要一模一样,因为我总会碰到别人问我这个素材你有没有一样的,做设计师千万不要死板哦。

2、千万别直接扣其它页面的图,而且质量还是超级差的那种,我见过好多次了。

皇家棋牌官网 57

细化标题

因为背景属于亮色,所以我们要用暗色区分出来。

1、增加文字立体面,增加描边黑色这样就很好的与背景分离出来。

2、细化标题,增加类似漫画文字的效果。不要问有没有快捷方式 、素材之类的,别这么懒。自己画上去复制复制就好了。

3、文字颜色选黄色,黄色有时候真是白搭的一个颜色特别作为标题。

4、给文字增加投影,让其更完整。投影颜色选文字下面背景颜色稍深的,比黑色投影更有质感。

皇家棋牌官网 58

添加商品

容器里面的商品有摆立的,有散出来的,各有优点。这里我希望它能够跟活波一些。

1、商品由中心散开,所以中间的商品无疑是最大的,其次的相对比较小一些。

2、需要有一个商品颜色和标题的颜色产生呼应、在页面上产生联系。

3、商品的投影别忘记、商品盖住其它商品的地方要变暗。别忽视了。最后给它们来一个中性灰修图增加

商品之的明暗对比关系,这样可以增加商品的品质。

皇家棋牌官网 59

装饰元素

用五角星来装饰,与背景图案呼应

1、五角星颜色尽量不要出现页面上面没有的颜色

2、增加投影

皇家棋牌官网 60

到这里这个案列就完了,比较简单的一个案列,不是很好,望大家见谅。

全文总结回顾

  1. 不管是什么摆放姿势,商品都要有大有小之分

  2. 商品的颜色至少有一个是与页面颜色有联系的

  3. 商品摆放也是画面中重要的一环,得认真处理

更多的姿势,一起去发现吧。

欢迎关注我的个人公众号三根设计骨

编辑:摄影 本文来源:经过实战案例帮你解锁5种商品安顿姿势,笔记整

关键词: 皇家棋牌官网