十五的笔头

🧠脑子是个好东西

0%

「读书笔记」《视觉链-互联网产品的视觉设计理念与规范》

推荐指数:

视觉链-互联网产品的视觉设计理念与规范

01 认识互联网产品视觉设计


什么是互联网产品的视觉设计

了解互联网产品

互联网产品的重要因素是让用户参与产品设计,将用户需要的加入到产品设计中,用户驱动企业快速迭代,将原本以企业为中心的思维转变到以用户为中心的思维。
用户成为了产品的设计者和改变者,而设计师扮演了协调者、配合者和观察者。例如:乐高

互联网产品在时间、空间、传播、关系上的纬度都发生了变化

视觉设计师5个关键能力

  • 专业核心知识
  • 产品、交互逻辑
  • 判别需求的能力
  • 精确的解说能力
  • 工具掌握能力

专业核心知识

排版

- 行高,标题与它下面的段落相关联,因此距离要小于与上方段落的距离(note:行高一般为字高的1.5倍);
- 避免出现三种以上文字

配色

- 色相、明度、纯度
- 心理表现(OS: 也不展开讲讲)

界面的整体评判

  • 直觉-第一印象
  • 内容-是否完整表达全部内容
  • 美感- 整体效果是否与内容相符
  • 风格-风格表达是否准确,是否满足项目的目标和理念

细节分析

  • 排版-内容是否被安排在准确的位置
  • 流程-内容的安排是否自然而且有逻辑性
  • 颜色-色彩方向是否准确
  • 缺失-是否有遗漏或多余的部分

产品、交互逻辑


判别需求的能力


(note:书中阐述“设计师的核心能力(创造力、审美)其他人无法理解,设计师需要进行逻辑沟通,拒绝当美工”,非常不赞同,设计师与艺术家的区别在于设计的目的是解决问题而非单纯依靠所谓审美。为了解决问题需要了解产品中的业务知识、交互逻辑、产品逻辑,这是工作要求,绝非和其他工作伙伴据理力争的撕逼筹码。如果对于疑问和挑战不能作出很好的解答,那就是需要进步的空间了)

精准的解说能力

(note:本人觉得这是设计师很重要的技能,把自己设计思路想法有效的表达出来,合理的解说,思路清晰是很重要的能力。除此之外,还有文稿的整理归纳能力,同样重要)

工具掌握能力

  • sketch
  • photoshop
  • illustrator
  • (note:sketch最为重要,可以根据不同的设计要求安装不同的插件。除此之外AE、C4D和一定的代码能力也是提升的关键)

提升能力的4种学习方法

多看

  • 《用户体验要素》
  • 《点石成金》
  • 《一目了然》

    多记

  • 思路

  • 积累

    多做

多磨


视觉设计师的职业规划

专业线

界面视觉设计师-产品功能方向的视觉设计师

  • 为产品进行前期的视觉推导并完成设计方案
  • 负责为互联网新产品与新功能提供创意策划并提供用户界面的设计方案
  • 负责参与前瞻性产品的创意设计和动态demo的实现

运营视觉设计师-运营方向的视觉设计师

  • 基于对运营设计需求的良好理解能力,完成视觉设计提案
  • 团队协作设定整体活动界面视觉风格与创意规划
  • 配合团队高效的开展系统化的详细视觉设计

P线-设计专家

做有挑战的练习

  • 避免偷懒的工作方式
  • 离开定向思维的思考环境
  • 牺牲现有的短期利益
  • 增大重复练习

富有领导力

M线-设计经理、管理者

  • 专业技能
  • 概括技能
  • 人际技能

与其他岗位同事间的配合

团队合作

  • 普通项目
  • 视觉为主的项目

    工作沟通

对外沟通-团队之间沟通

  • 了解产品需求 分析竞品界面 手机灵感创意、配色、素材。

对内沟通-设计团队内部沟通

  • 讨论
  • 专注
  • 开放的心态获取反馈

认识互联网产品视觉设计

什么是互联网产品的视觉设计

了解互联网产品

互联网产品的重要因素是让用户参与产品设计,将用户需要的加入到产品设计中,用户驱动企业快速迭代,将原本以企业为中心的思维转变到以用户为中心的思维。

用户成为了产品的设计者和改变者,而设计师扮演了协调者、配合者和观察者。例如:乐高

互联网产品在时间、空间、传播、关系上的纬度都发生了变化

什么是互联网产品的视觉设计

在分析产品和交互逻辑后,负责简洁优雅地传达有效信息,并通过视觉设计制造出愉悦的用户体验。

设计方向和设计理念

产品战略与目标用户对产品设计方向的影响

接到一个新的设计项目

首先要考虑:

这是什么互联网产品?

目标人群是哪一类?

需要达到什么目的?

信息内容的重点是什么?

为什么要确定设计方向

确定设计方向的调研方法

历史设计分析

界面层级
亲密性
配色占比
界面重心

竞品分析

  • 选择目标竞品
  • 明确竞品目的
  • 画出竞品的层级图
  • 以界面层级为线索进行竞品分析

通过对比

得出改进我们界面的方案、制定设计方向和理念。

  • 以界面风格为线索进行竞品分析
  • 了解不同平台的设计风格

贯穿全剧的思维-层级概念

为什么要掌握层级分析能力

  • 在有效的时间内尽可能多的浏览用户想要的信息
  • 背景层、内容层、操作层、状态层 通过颜色和样式进行统一,方便操作

建立信息层级的视觉方法

  • 位置:视觉占比 左上:33% 左下:23% 右上:28% 右下16%
  • 大小:重要的元素大一些;想办法表现出差距
  • 距离:拉远-模糊/降低透明度/增加半透明图层;拉近-投影
  • 色彩:先暖后冷、先高反差后低反差

视觉设计流程与方法

研究分析

目标用户分析

应用
1.对于新产品,用户分析一般用来明确用户需求点,帮助设计师选定产品的设计方向。
2.对于已经发布的产品,用户分析一般用户发现产品问题,帮助设计师优化产品体验。

  • 1.用户分析的意义
  • 2.用户分析方法
  • 定性到定量-用户访谈是定性,问卷调查是定量,前者充实用户背后的原因,后者通过数据证明用户的选择。
  • 态度到行为-用户访谈属于态度,现场观察属于行为。
  • 3.建立用户模型
  • 怎样建立
  • 目标用户群体定位纬度:年龄、收入、学历、地区等
  • 目标用户特征定位纬度:按年龄、性别、出生日期、收入、职业、居住地、兴趣爱好、浏览过的网站等建立
  • 4.提炼目标用户与产品相关特征

    素材收集、整理

    设定设计理念

设计草案

提炼情感关键词

情绪映射-搜索相似感受的图片

拟物映射-将有源的设计提炼到界面设计中

大模块细节深入

  • 亲密性
  • 对齐性
  • 一致性

    设计辩证

  • 审查层级关系
  • 审查页面视觉流
  • 审查元素复用
  • 自我审查的方法:将设计稿设置为无色/反色/模糊

    设计提案

  • 保持阶段目标一致
  • 展现完整推导过程
  • 注意技术实现和多尺寸适配

    细节深入

    细节设计的两个关键点

    设计元素

    设计的四个元素

  • 概念元素
  • 视觉元素
  • 关系元素
  • 使用元素

    元素的运用

  • 组形
  • 分离
  • 接触
  • 重叠
  • 透叠
  • 结合
  • 减去
  • 差叠
  • 重合
  • 重复
  • 基本形的重复
  • 骨骼的重复
  • 形状的重复
  • 大小重复
  • 色彩重复
  • 机理重复
  • 方向重复
  • 发射
  • 中心点发射
  • 螺旋发射
  • 同心发射

    颜色搭配

    颜色

    色彩的情感

  • 黄色:正能量、传递欢乐、欢笑、希望和阳光,避免过度使用引起视觉不适。
  • 橙色:柔和,常用于第一级别的操作行为,如预定按钮。

    在UI设计中运用RGB颜色模式

    理性和感性的两种取色方法

    图标

  • 图标类型

    表意功能性icon
    标志性icon

  • 图标像素
  • 图标统一体量感
  • 图标的隐喻选择
  • 拟物隐喻
  • 功能隐喻-开关等
  • 图标色彩的视觉反馈
  • 图标的动效设计
  • 在适当的情况下使用图标

    文字

  • 字体和字号
  • 色值
  • 衬线体和非衬线体
  • 文字行距
  • 边距和缩进
    -行为召唤

    表单

  • 情感化的表单
  • 清晰的视线流
  • 合理的布局
  • 更多为用户考虑
  • 有效的引导

    回归设计理念

    提炼设计理念

  • 点线面理念
  • 直线与浪线理念

    浪线用来显示未完待续

  • 抽屉理念与卡片设计
  • 负层级理念

    设计的法则

  • 7±2法则
  • 菲兹法则

    参考线的价值

    设计规范

    规范的重要性

  • 统一产品的用户体验
  • 方便设计
  • 形成备案和文库
  • 提高工作效率

    制定规范的5大原则

  • 把我制定规范的时机
  • 需要确定规范的范围
  • 避免规范一成不变、需要迭代
  • 避免规范过于详尽
  • 大指引、小规范的制定思路

制定规范流程

1.注意积累和归纳

2.制作规范

  • 框架系统规范:栅格系统常用宽度1024-1366px,(Axn)-i=W
  • 信息系统规范:一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等,一般将文字颜色分成3-5个层级,常见#333 #666 #999
  • 控件系统规范:不同状态按钮,宽高比、描边、直角、圆角、色值、文字区域、字体、字间距等。
  • 配色系统规范:最好控制4个颜色内
  • 布局系统规范:减法设计原则,减少间距种类

3.汇总和微调

WEB规范制定的案例

  • 页面颜色规范
  • 文字规范
  • 按钮规范
  • 单选框和复选框规范
  • 控件规范
  • 命名规范

Welcome to my other publishing channels