电子商务概论 引导产品及营销活动 视觉设计元素.docx

知识模块 视觉设计元素 网店视觉设计不算是一门学科，没有绝对的规范和标准，它更像是美学和商业的结合体，学习并通过实践得到验证，形成了一些可以借鉴、学习的规律，从而应用在店铺视觉中，可能会具有惊人的视觉冲击力，最终达到意想不到的视觉传达效果。网店视觉营销的主要原则仍是为了增加销售，在这“非真正艺术”的情况下，应用好视觉元素，做好视觉传达设计，让顾客感受到店铺的吸引力和感染力，最终使其成功购买并认知该品牌。 01 最重要的八个元素 （1）单体①?颜色 颜色的选择十分重要，由于它的高分辨性，对界面的影响比形状、大小等要大，处理人的视觉关注区的上层。利用颜色，要把用户的目标、环境、内容和品牌放在优先的位置，其次才是去考虑这个颜色本身。在界面设计中，单个元素的颜色选择不仅在于元素自身所要传达的信息，更在于它在整个层级中所处的地位。颜色的使用要避免多而杂，将颜色按主色调、辅助色等做好区分。 图 1 ②文字 文字的属性包括字体、字号、字的颜色。对于字体，主要考虑的是可读性要强，比如澎湃新闻APP使用的就是宋体，传达出一种严谨、庄严的感觉，因为这是一款专注政治新闻的APP。字号的选择也十分重要，它本身就带有有序的特征，不同大小的字号体现了不同的层级。 图 2 ③大小大小这个属性是一个有序并且可以量化的参量，不同大小的元素排布在一起，大的显然有更强的吸引力，最重要的“书店”被中间那个最大的圆所表示。 图 3 而量化，比如wifi信号、电池电量这种小icon，大小这一属性被量化，并和所要代表的含义紧密相连。但大小的错误运用，会降低其他属性的作用，比如元素太小的时候，该元素的形状属性在用户眼里就发挥不了太大的作用。 ④形状形状相比前面所提到的大小、颜色，需要用户更高一级的分辨能力，简单的形状多用于分割，将所要表达的部分和其他的部分相区隔，比如一个按钮的边框，它为了告诉用户，这是一个可以进行交互的控件，吸引用户点击。 图 4 而复杂的形状本身就带有传达含义的作用，像一个人像形状的ICON，为的是告知用户，这个ICON可以跳转到个人用户页面；而像很多应用的专属图标，都会有特定形状的标示物。合理的运用形状可以传达丰富的信息以及划分层次。 图 5 ⑤纹理 纹理的运用虽然在扁平化大行其道的今天显得尤为低调，但它所能传达的能供性还是非常强大的，能供性在《设计心理学》这本书中是这样被定义的——事物所感知到的及其实际的属性，主要是那些能决定事物可能如何使用的基本属性。也就是说，我们认为这个对象能做什么。比如一个表面带有橡胶纹理，一般人都会觉得这是一个可以抓握的东西，比如一个按钮带有阴影而显得凸出于本身的界面，似乎是在告诉用户这是一个可以点击的控件。 图 6 科技产品不断融入大家的生活，用户可以很好的理解这个科技产品是如何操作的，这时推广扁平化设计不仅提高了用户的操作效率，而且让信息和内容可以更加高效的传达。但随着AR、VR逐渐登上舞台，利用这更高维度的特性，拟物化设计也许可以通过一种新的方式重归人们视野。（2）整体 ①?情景 情景是视觉界面设计元素的其中之一，考虑的是用户正处于一个怎样的环境来操作你的产品，只有把这个维度也纳入思考，设计的产品才更加贴近用户更加真实全面。比如拨号及通话界面，一般设计得都非常大，这主要是考虑到在打电话或则接听电话时，人们可能处于一个比较急切的情况，以及所处的环境也千差万别，为了保证用户可以快速的找到接听的按键或快速的拔打号码，按钮设计的大尺寸就可以理解了。 图 7 ②位置 位置的思考往往与操作习惯、视觉习惯、单体元素关系、产品逻辑紧密相关。操作习惯指的是用户手指操作的区域，单手或双手以及左手和右手时的操作习惯都是不一样的，但也有共通的特点，就是操作屏幕下部的元素要比操作屏幕上部的元素要容易的多。视觉习惯指的是对于大部分人而言的阅读浏览习惯，像下图是浏览网页时的浏览路径，呈现的是F型的轨迹，而移动端由于屏幕尺寸比较小，一般都是L型的浏览轨迹。 图 8 单体元素关系指的是各个元素内在的联系，比如常见的标签栏上的元素、内容区的元素、导航栏的元素就很自然的分成了3个不同的部分，各个部分中的元素因为代表的功能或者所传达的含义而有了相通的点。产品逻辑指的是因为产品需求的定义或产品逻辑的需要，将特定的元素安排在了特定的位置。 ③动效 动效的作用有很多，它比静态的页面拥有丰富的内涵，可以传达信息、表达不同部件之间的关系、吸引注意、缓和不同模式之间的过渡以及确认命令效果等。 借用特定形象的设计，可以传达品牌文化，像有些应用就借着loading动效的设计融合了自己的品牌logo，达到了品牌logo露出的效果。还有像不同界面切换时的滑进滑出的动效，不仅在视觉上让用户更好理解这些页面是怎么来的，不会觉得突兀，而且在逻辑上