帮组顾客精确定位-导航条精要.pptx

Chapter 07 帮组顾客精确定位——导航条 7.1 导航条的设计分析 7.2 清爽风格导航条设计与详解 7.3 时尚风格导航条设计与详解 7.4 简洁风格导航条设计 7.5 阳光风格导航条设计 7.6 精致风格导航条设计 7.7 古朴风格导航条设计 目录 7.1 导航条的设计分析 导航条是网店首页中不可缺少的部分，它是指通过一定的技术手段，为店铺的顾客提供一定的途径，使其可以方便地访问到所需的内容，是浏览网店时可以快速从一个页面转到另一个页面的快速通道，利用导航条，我们就可以快速找到我们想要浏览的商品或信息。 在设计网店导航的过程中，对于导航的尺寸有一定的限制，例如淘宝网规定导航的尺寸为950像素的宽度，50像素的高度，如下图所示，我们可以看到这个尺寸能够设计的空间非常的有限，除了可以对颜色和文字内容进行更改之外，很难进行更深层次的创作，但是，随着网页编辑软件的逐渐普及，很多设计师都开始对网店首页的导航倾注更多的心血，通过对首页整体进行切片来扩展首页的装修效果。 7.1 导航条的设计分析 在设计网店首页的导航条的时候，要考虑到导航条的色彩和字体的风格，应当从整个首页装修的风格出发，定义导航条的色彩和字体，毕竟导航条的尺寸较小，使用太突兀的色彩会形成喧宾夺主的效果。鉴于导航条的位置都是固定在店招下方的，因此只要力求和谐和统一，就能够创作出满意的效果，如下图所示分别为两个不同店铺中的导航设计，它们都与整个网店的风格一致。 7.2 清爽风格导航条设计与详解 本例是为清爽风格设计的导航条页面，浅灰色的背景添加白色装饰线条给人轻柔，舒适的感觉，画面主体以深灰绿的色彩表达清爽、通透的色彩情感，添加的绿色植物更是增加了整个画面的活力。通过这些设计让客户体会到设计所营造出来的清爽，舒适的气氛。 效果展示 设计鉴赏 ★分析1：导航条选择饱和度较低的深灰绿，是为了给客户传递一种舒适的色彩感受，避免高饱和度的纯绿色，造成客户视觉疲劳。添加嫩绿色的植物在导航条上，模仿大自然中植物破地而出，迎风生长的自然状态，为画面添加生机； ★分析2：视觉中心位置的六边形图形，填充灰色到白色的渐变增加图形的层次感，白色给人洁净、朴素的感觉，适当加入灰色加深色彩的重量感，弱化白色的单调感； ★分析3：画面中心选择装饰性强的文字，以简单的段落排列，美化文字的同时不降低文字可读性。 7.2 清爽风格导航条设计与详解 版式分析 本案例在布局的设计中，使用十字交叉来划分版面，给人稳定、踏实、富有创意的视觉感受，十字线上的内容是画面的主要内容，交叉位置是视觉中心点，并通过添加几何图形美化版面的同时平衡版面，水平方式放置的导航按钮上使用相同字体、字号的文字，以等比例的间距横向排列，按照常见的导航条排列方式来处理，更容易被顾客接受。 配色剖析 7.3 时尚风格导航条设计与详解 本例是为时尚风格设计的导航条页面，将丝带运用到导航条的设计中，增加时尚感，同时卷装的带子、黄色的装饰线条，给人动态的感受，通过动静结合的表现方式吸引人眼球，这些设计让客户体会到设计所营造出来的时尚、活跃的气氛。 效果展示 设计鉴赏 ★分析 1：背景填充灰蓝色传递平静的视觉感受，避免影响主体物的视线，添加白色装饰线条制作时尚、流行的格子风格； ★分析 2：导航条的倒角的半径较大，给人圆润的感觉，填充白灰色能增加空间延伸感，再为其适当的添加厚度，增加导航条的视觉力度，使其更加精致可观； ★分析 3：卷装的带子形状以缠绕的方式放置于导航条上，有一种立体的空间感，通过有序的排列在导航条上，形成一定的节奏和韵律； ★分析 4：导航条上的菜单文字添加淡淡的蓝色描边，丰富文字效果的同时使深色的文字和浅色的导航条衔接融洽。 7.3 时尚风格导航条设计与详解 版式分析 本案例由于设定的导航条的材质为丝带，因此在排版布局的过程中使用了等距离的方式进行设计，有效的把握画面的空间感平衡感，让导航条表现出一定的韵律感，也让画面体现出干净舒适、轻快明朗的视觉感受。布局中水平走向易于把握画面的平衡性，导航条上的卷装带子以线面组合形成，给画面增加了设计感，同时使得设计效果更加精彩动人。 配色剖析 7.4 简洁风格导航条设计 版式分析 本例是为简洁风格设计的导航条页面，背景通过添加线条为增加了画面的时尚元素，搭配简单的导航条设计使画面整体简洁而时尚，再为圆润的导航条添加立体的视觉效果，吸引客户视线，形成即简单却又吸引人的视觉效果，通过这些设计让客户体会到设计所营造出来的简洁、时尚的气氛。 设计鉴赏 ★分析1：在灰色的背景上添加以倾斜的方式排列并交叉的白线，为背景增加设计感； ★分析2：粉色的导航条形状圆润，添加投影后在视觉上形成立