文艺类产品设计

1、文艺类产品的特点
2、如何提升文艺气质
3、从哪些点去梳理需求
4、文艺风格设计
5、信息层级梳理
6、品牌基因的延续
7、什么是可用性
8、如何设计一个文艺范的APP

1、文艺类产品的特点

文艺就是：文化+艺术
文艺的特征：文化、艺术、自然、朴素、简洁、安静、品质

1.1、文艺设计风格三要素

01、文艺 配色比
02、文艺风格常用字体
03、有气质的间距

01、文艺 配色比

• 色彩数量：色彩数量少、大地色系、大面积单色+点缀色

  
  一般是大面积的使用单色和少量明亮的点缀色.png

• 3色原则：简洁的色彩，会感受到清爽、直接，优秀的配色，色彩不超过三种

• 文艺类产品：少的色彩更具有记忆度和识别度

• 色彩比列：主色70%、辅助色25%、点缀色5%

  
  图片.png

02、文艺风格常用字体

无衬线字体：朴素、简洁、无装饰、整体美观大方，易辨认。
有衬线字体：轻盈，有设计感，有书法汉字的骨骼之美，有文化韵味。

image.png image.png 左边的变形，更适合文艺的风格字体.png image.png 宋体更能实现文艺的表达效果.png 楷体比较适合，还需要考虑背景属性.png 感情色彩的考虑.png image.png

总结

• 字体分类（有衬线字体和无衬线字体）
• 日本欧美文艺风格设计常用字体（主要有黑体、宋体、手写体）
• 文艺风格禁用字体（设计过渡、低龄、粗壮）
• 怎么挑选辨别更文艺的字体（笔划细节，更简洁优美的字体）
• 使用字体要考虑背景文化，场景意境

03、有气质的间距

• 有气质的间距
  1、长篇文章适用于1.2倍，能充分展示内容，阅读更舒适
  2、标题间距，连贯性更重要，一倍或小于一倍效果更加。
  3、统一尽量能统一的间距，层级间距必须大于字符间距两倍以上，使内容层级更清晰。

2、如何提升文艺气质

01、文艺的视觉元素
02、文艺的图片风格设定
03、让画面更简洁
04、文案简洁
05、功能简洁

01、文艺的视觉元素

元素必需是精致有设计感的（比如线条、圆形、三角形装饰等）
小元素可以增强作品感染力
元素需要时可以加强信息的传递
加强设计风格与品牌性格
错误使用元素，会造成干扰，减弱信息传递

02、文艺的图片风格设定

图片色彩：清新色系（比如新鲜的空气，清爽新鲜，淡雅）、复古色系（旧时代色彩，胶片质感怀旧的色）、简约色系（色彩数量少，以单色同色系为主，少量点缀色）

图片构图

• 水平：有一条水平的直线，水平构图特点（大气）很适合做形象广告
• 对称：一定能找到一条中心线，对称构图的特点-平衡、稳定、规整，适合做产品图，banner等
• 斜角：比较活泼有延伸感和动感
• 垂直：垂直构图特点-有拉伸感、平稳
• 曲线

图片意境：抽象又能体现主题，用最少的元素来表达准确信息

03、让画面更简洁

• 01、色彩简洁：减少色彩，以突出内容为主
• 02、样式简洁：不要同时使用加粗、放大、变色、渐变、立体等
• 03、层级简洁：使用空白来划分 层级 ，少用粗线条，色块信息 层级 最好 不要 超过3层 ，减少 文字大小的 变化
• 04、元素简洁：减少 元素和形状的 变化，用统一的样式去掉分散注意力的元素

3、从哪些点去梳理需求？

3.1、需求分析

业务背景

了解业务的目标，从设计目标中拆分信息层级
（业务想达到怎么样的目的？以此来判断文案呈现的优先级）

使用场景

首先要考虑投放平台、环境的画面位置等设计场景，为设计提供依据

面向用户

结合用户群特征中设定符合的风格定位

最常见 文艺风格

常见的文艺风格：简洁、清新、古风、复古怀旧

图片的重要性

01、图片有哪些种类
图片来源于真实代入感强，能带来真实感，有较强情景感。
图形：经过加工，可以是插画或几何等其他形式-偏艺术性和创意性

02、图片美感对整体效果影响
文艺模特
文艺产品
文艺色彩

03、如何选择图片
图片的裁剪
图片视觉的引导
图片的统一性：大小，角度，风格，色调

3.2、文艺类设计常用的表现手法

突出特征法

• 是指抓住事物特有的个性，把它与众不同 的地方表现出来。这些特征一般由事物的外观、用途与使用功能所决定的。突出特征法也是我们常见的运用得十分普遍的表现手法，是突出主题的重要手法之一。

联想发散法：是指在已经确定了“主题关键字”的基础上，通过关键词，图像图形，排版等各种视觉元素，把这核心含义凸显出来。在确定的主题基础上发挥想象的手法。

借用比喻法

• 是指在设计过程中 ，在抹一些方面有 些相似性的两个事物，以此物喻彼物，比喻的事物与主题 没有直接的关系 ，在某一点上与主题有某些外形相似之处，可以借题发挥，进行延伸转化，达到委婉表达的效果

3.3文艺的排版方式

• 排版中常见的表现形式：（1）具象，（2）插画，（3）形式感：通常是排版方式，（4）抽象

排版中常用的小技巧

文字：运用文字间距停顿传达情绪

image.png image.png 笔画微调.png 笔画缺失.png 文字错落.png 图片.png 图片.png 图片.png 图片.png

排版中常用结构

上图下文——上文下图
左文右图——右文左（图最常用 的排版方式）
中图左右文（通常用在文字信息较多的情况下）
前文后图（要注意文字和画面的对比，对比较弱的时候通常会在下面叠成色块来突出文字信息）
前图后文（通常文案比较突出）

• 排版中需要注意哪些事项
  1、合理运用留白
  2、运用间距提高文字阅读性
  3、善用阅读习惯做视觉引导
  4、根据图片轮廓对文字进行排版

文艺的排版方式小结

1、排版中常用表现形式：具象、抽象、插画、形式感
2、排版中常用的小技巧：（1）文字处理5种手法：文字间距、笔画微调、笔画缺省、笔画错落、文字填充。（2）色彩处理。
3、排版中常用的结构：图片和文字的各种组合结构。
4、排版中需要注意哪些事项：善用视觉引导和字体临近形状排版。

4、文艺风格设计

4.1、需求拆解

01.常见活动需求类型

活动运营
品牌推广
拉新留存

02.如何拆解活动需求

分析需求
提炼信息
定位风格

5、信息层级梳理

5.1、梳理信息之间的关系

信息关联
信息并列
信息因果
信息包含

5.2、信息深度加工

梳理信息层级视觉表现方法

01、梳理信息层级视觉表现方法（位置、大小、远近、内容形式「可以通过增加字母、数字、箭头等来引导信息层级」、色彩）

梳理信息层级小结

• 梳理信息层级，是为了快速获取和理解内容
• 如何梳理信息层级：梳理信息之间的关系和深度加工信息
• 梳理信息层级的视觉表现方法：位置、大小 、远近、内容、形式 、色彩

6、品牌基因的延续

6.1、什么是品牌基因？
是能够通过某个事物提取出来明显的视觉特征
理念层面
视觉层面
行为层面

6.2、如何形成品牌基因
通过差异化的排版方式影城品牌基因
结合产品特征定位视觉表现手法形成品牌基因

6.3、提取品牌基因有哪些方法？

图形提取、色彩吸取、空间留取、字体抽取、模特选取、风格获取
完整图形
轮廓图形
特征图形（通过代言人的形象来加深对品牌的印象）
延伸图形（通过面部妆容提取了logo的品牌特征，形成一种logo的延伸）
风格的统一

7、什么是可用性

• 可用性是交互IT产品、系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品竞争里的核心。

• 7.1、活动设计中的可用性

• 信息展示：可读性（黑底白字或白字黑底对比度就比较强）、可视化、视觉流

• 功能操作

7.2、视觉可用性常用原则

3秒钟吸引顾客
一致性原则
简洁性

7.3、可用性与美感的平衡小结

• 什么是可用性？有效、易学、高效、好记、少错、令人愉悦
• 视觉中的可用性：信息展示、功能操作
• 可用性常用原理：3秒钟原则、一致性原则、简洁性原则

8、如何设计一个文艺范的APP

8.1、如何着手设计APP

1、明确定位：任何产品设计都需要有精准的定位，决定了产品主要风格和带来的用户体验。
2、了解市场：理解产品所处的市场环境及发展趋势。
3、用户分析：要清楚谁是你的用户，他们有什么特点，他们是怎么样的一群人，这群人会喜欢什么样的东西。
4、竞品分析：主动收集市场现有产品，分析调研各类资料，提高自己的相关知识背景，让自己心中有数。

8.2、如何提取品牌基因设定风格

根据工厂的颜色来强调品牌的可信赖感

提取 品牌基因的要点，要了解用户群，用场景联想法，给 用户 营造恰当合理的产品氛围

8.3、板式设计要点

• 品牌风格：(1)色彩运用、(2)图标风格、(3)文字运用、(4)图片风格
  品牌色，给人留下第一印象

熟悉易懂

整体协调、大小复杂度要统一

简洁精炼（始终以内容为主，风格统一）

强化标题
去除色彩
加强留白

版式设计要点小结

• 品牌风格：形成的要素有色彩、图标、文字、图片
• 趣味独创：增加一些趣味和独创性的东西，也能给用户留下美好的记忆
• 熟悉易懂：使用人们所熟悉的图标、文字、按钮的形状将提升用户体验
• 协调整体：色彩高度统一、图标风格统一、字体大小统一、图片风格统一
• 简洁精炼：强化标题与内容、去除色彩、以留白代替分割线
• 细节统一：从品牌开始，到图标版面保持一种统一的风格与调性

8.4、可用性和美感的平衡

友好性、一致性、阅读舒适性（行间距、对比度、层级、留白）、直观明了、点击状态（点击范围、明确状态——按钮一般的四个状态：可点击、按下、不可点、次按钮）

可用性和美感平衡小结

• 友好性：它能够使用户准确方便的达成任务
• 一致性：信息一致、操作一致、风格一致、可降低用户的学习成本
• 阅读舒适度：由四个点决定（间距、对比度、层级、留白）
• 直观明了：做到导航内容清晰、图标易懂
• 点击状态：可控合理的点击范围、明确的点击状态

8.5、规范的重要性

1、多个设计师之间协同配合，可减少沟通。
2、让色彩、字号、间距、风格、保持一致,给用户传达统一的品牌形象，加强信任感。
3、让开发者快速理解设计的意图。
4、让其它合作单位保持统一的风格。
（配色、字体字号、排版布局、图标风格、按钮样式、表单、标记、标签、弹窗、提示框、图片尺寸「banner、模块图片、头像图片等」）

规范的重要性小结

1、规范的作用：协同配合、提高效率、提升转化
2、给用户转达统一的品牌形象，加强信任感。
3、一个APP基础规范需要做什么。
4、根据产品的需求，定制规范。