恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
聊聊-我关于设计工作的所思所想(视觉篇)
0.0°
2022-08-09 原创文章 经验/观点 举报 1292 12 8 0

随着工作经验的积累,我们学到东西会有很多。而整理收获,能让我们更好地往前走。这次我分视觉基础和问题解决与思考2个篇章记录

(文中的视觉作品图均来源于网络)

这些东西就像一张张小便利贴一样把知识在脑海的房间里贴满墙面,一时半会真的很难找寻。所以定期整理自己的收获,能让人更快地找到自己的位置,从而更好地往前走。 

首先,我们可以想一下,何为设计?
如果用一句话在概括我认知中的设计,广义的设计可能是 “满足某种目的手段”

所以,我们做每一件事前,都可以先问问自己,做这件事情的原因,基于这个原因,应该采取什么手段来达到这个目的。


网上找了下,关于设计,每个人每个领域都有自己的说法,比如:

这些认知没有对错,只是所站的角度不同。


但设计也是务实的工作,除了创造和触发改变这些高端使命,设计的基本目的还是要:解决这样或那样的某类问题。

一、表现层:

1.解决出图这件事需要有相关专业的人来做的问题

2.专业的人解决这个图在视觉传达的问题


二、本质层:

解决与梳理因为视觉需求发生的事情


三、人与人之间的合作

怎么与人合作顺畅?


下面以我从业的运营视觉设计师岗位为例:

怎样做好表现层?

也就是解决图像视觉传达的问题
1.怎么审视?
第一步:退远看
就像我们以前画画一样,退远看,眯眼看,可以看到我们的画面的整体情况:构图是否稳妥,看整体氛围感与表达是否合适。下面我们展开细细说。

什么是构图

构图是设计师根据题材和主题,把要表现的形象组织起来,构成一个协调的完整的画面。


那都有哪些构图方法?

1.三分格辅助线构图/井字线构图

(延伸为上下、左右构图、对角线、三分法中心构图)

2.中心放射性构图

3.黄金螺旋构图(趋势-整体)符合科学审美的一根线


【三分格辅助线-上下构图】⮟
【三分格辅助线-左右构图】⮟
【三分格辅助线-对角线构图】⮟
【三分格辅助线-中心构图】⮟
【中心放射性构图-圆形放射】⮟
【中心放射性构图-线性放射】⮟
【黄金螺旋构图】⮟
在视觉作品中除了构图方法,我们更需要关注构图平衡

影响视觉平衡的因素有:

画面中元素的大小、疏密、距离中线远近、颜色的明暗程度、以及人的认知都可能影响画面视觉平衡。


下面举个关于构图平衡的栗子:

下图的插画作品中,构图平衡吗?答案是No的,因为我改了画面左边某个元素的大小,导致现在整体画面视觉重量往右倾斜。


下面是原图,可以看出画面中元素的大小、疏密的改变影响画面的视觉平衡。

画面中元素距离中线的远近影响画面视觉平衡

我们再看下面的视觉栗子,撇开明暗光影的重量影响,可以看出,画面左方的牌子,只有距离中线足够的远,才能与右方的煮茶器达到视觉平衡。


画面中元素明暗程度影响画面视觉平衡

下图颜色的明暗程度同样也影响构图平衡:如下左图,当投影颜色变淡时,画面整体视觉重量则会往左方倾斜。

人的认知影响构图平衡

上轻下重、下宽上窄的三角形才稳定的是人的固有认知,一旦画面与人的认知相反,则会让人感到不舒服、不规矩之感。


接下来我们一起来看氛围:

看(色彩、明暗、 光影、字体)氛围

不同的色彩、明暗和光影包括字体形式的画面体现不一样的氛围气质

1.色彩氛围

暖色调画面 ⮟

暖色调是使人心理上产生温暖的感觉,常与炽热、温暖、热烈、热情有关。

对于视觉而言,它以橙、红、黄、棕色等大色调出现。

冷色调画面 ⮟

暖色调是使人心理上产生凉爽的感觉,常与安静、凉爽、开阔、通透、时尚、科技有关。

对于视觉而言,它以绿、蓝、紫色等大色调出现。

多彩的炫光画面 ⮟

自然本多彩,但人眼很少能捕捉到,把多彩的画面展现在人眼,尤其是对比色的应用,

容易激发和活跃人的各种情绪,活跃画面。

对比色画面 ⮟

在两种色彩对立的画面中,如势均力敌,则表现对抗、冲击的感受。如一主色一点睛,则更强调点睛之笔的故事氛围。

关于2种主色视觉画面的色彩搭配普及 ⮟

(如下图)在色轮中,颜色跨度小于30度的为同类色,大于30小于60度的为临近色,跨度120度左右的为对比色,跨度为直线180为互补色。

色彩饱和度低的画面 ⮟

少颜色和低饱和度就少了色彩情绪的左右,而更容易表达意境和故事本身。
2.明暗氛围

整体明度高的画面 ⮟

容易给人安静、开阔的感受,一般以大场景画面为主。注重突出整体场景意境。

整体明度低(幽暗)的画面 ⮟

给人神秘、阴暗、留下悬念的感受,一般以特定悬疑诡异题材为主。

明暗对比度高的画面 ⮟

明暗对比度高的处理手段烘托画面主体,烘托情绪、烘托故事氛围。
3.光影氛围

光源的分类

按光源的类别我们可以把光统分为:自然光和人造光 ⮟

自然天光容易给人给人神圣、包容性强的感受;而人造光因人造载体的多样性所千变万化,但人造光的情绪更多的跟人与环境强相关。

按画面发光源是否可见又能把光分为:有源光跟无源光 ⮟

有源光在图中可以看到发光物体的画面,光的来源更具真实性,给人代入感;无源光在图中看不到发光的物体,光照来的方向,引人遐想。

逆光 ⮟

逆光的表现形式因为光由后往前的方向,容易给人前进、光明、积极、伟大、勇闯未来的视觉感受;同时,逆光的表现手法与主体(或标题)的重叠展示,使主体(或标题)在画面中更为突出。

逆光的图形创意 ⮟

在逆光的表现方式中,光照来的方向为画面中心。光透过的门或其他图形进入画面,使图形更具有强烈的对比,更加突显画面中图形的表达,这也是我们做图形融入场景常用而有效的设计表达方式之一。

顶光 ⮟

光由画面上方自上而下落在主体顶部,给人神圣而不可侵犯的感受。

顶侧光 ⮟

顶侧光是我们人眼中大自然最为常见的一种投光方式,它自然而平常,给人亲近感。同时也容易给人安逸而闲适的视觉感受。

横侧光 ⮟

光从画面主体的左右两侧射来,一盏强烈主光一盏辅助光,给主体边缘照亮。明暗的强烈对比,凸显主体轮廓,给人神秘而强硬的视觉感受。

底侧光 ⮟

主光源从主体底侧自下而上打来,这种打光方式使得主体与我们肉眼常见的物体明暗截然相反。容易给人大反差和不适感。常用于制造神秘、悬疑或恐怖的画面表达。

聚光 ⮟

在暗色画面中模拟舞台聚光灯的射光聚焦于画面主体,主要用于展示商品和画面主体,容易给人尊贵感和聚焦感。

投光-形状光 ⮟

在不影响画面氛围的前提下压暗画面作为衬底,用有一定形状的透光聚焦画面主体重点。常用于人物和电商商品画面,运用这种方式能有效增加画面细节和层次感。

投光-图形光 ⮟

在不影响画面氛围的前提下压暗画面作为衬底,以图形光模拟光透过的载体。可同时聚焦画面重心和显现图形,常用于logo、图形或倒计时的宣传。

剪影 ⮟

剪影的表现手法只显示轮廓而暗化细节,制造悬念。常用于预告型海报kv。

创意投影 ⮟

创意投影的表现手法意在与画面主体形成反差对比,以投影的形式表现画面创意,容易给人眼前一亮的感觉。

字体氛围

如何判断字体是否符合当前视觉氛围?


首先,我们可以从识字开始:

字体由字体体构、笔画、和修饰三部分构成,字体形态的变化随这三部分的变化而变化。
字体结构像人的骨骼一样,字体的高挑还是矮正、是长腿还是短腿、是平稳端庄还是动感,均由字体结构决定 。
字体的笔画决定了字体长什么样,即什么风格的字体。
而细节修饰则像衣服化妆一样,加强这种风格的特定偏向。

由上述字体信息组合一下我们可以得到一个简单的公式:

字体结构+笔画风格+细节修饰=字体的性格走向

看节奏

节奏:通过人为的把控组织,使画面的信息清晰而有规律地呈现。

说到元素组织节奏,就不得不说板式设计的四大原则:

1.亲密性原则

2.对齐原则

3.对比原则 | 大小对比-疏密对比-虚实对比-远近对比-明度对比-冷暖对比-点线面对比

4.重复原则

先说对齐:

关于对齐初级设计师比较容易忽略的物理对齐与视觉对齐
对比:

重复:

重复的表现手法不仅可增加画面细节饱满度,而且通过重复性的“密”与主体的“疏”形成对比进而凸显主体,同时保障画面统一性


画面因为有节奏才会秩序和律动。反之视觉混乱而单调。


第二步:凑近看

有了上一步的退远看整体,把控氛围正确。下面就可以凑近看细节和信息传递准确度
信息传递准确度

1.看按钮有没有点击感

按钮像不像按钮?用户能否一眼识别这是个可点击的按钮,这影响到页面的转化率。

2.模块是否可点击

模块是否可点击,需要给用户一个清晰的认知。可点击的模块,让用户一眼识别,有助于模块转化率。

3.信息传达是否易读易懂

减小信息获取难度是我们视觉设计的基本

4.排版上文案阅读是否有歧义

阅读存在歧义的排版是比较基础但却值得重视的设计问题。信息排版需层次分明,杜绝模棱两可。

看画面细节-细节决定成败

有些细节能够让我们的视觉变得记忆深刻,而更多的是视觉品质高度也由无数的细节组成。


1.出彩的细节⮟
2.导致视觉品质下降的细节⮟

对于线上移动端的设计

我们通常在电脑上做手机页面的图,有时候可能在电脑看着挺好,但是落到实际上线可能就会出现各种问题,所以我们做图时需要时常在手机体验和阅读来确定设计输出的准确性。

主要关注我们上述凑近看的一些细节和信息传达准确性的问题:

比如有没有一下虚像素?

比如阅读顺序是否准确?实体可识别性高不高?

而手机实时预览的工具有:

PS的可以用Design Mirror、sketch自带的有sketch Mirror和Figma自带的手机端预览工具
而线下的视觉因为屏幕和实物的差异,最好是打印同比大小的纸张出来查看效果

Powered by Froala Editor

更新:2022-08-09

收藏

12人已收藏

JUNHENG77

微信号:JunHweixin(添加请备注哦)

  • 21

    作品

  • 95

    粉丝

  • 33

    关注

  • 我关于设计工作的所思所想(第二部分)
  • 设计稿交付后,需求方要改!怎么办?
  • 运营设计中如何让标题更“凸”出
  • 鸿悦幼儿园吉祥物设计

    猜你喜欢

      2022-08-09 原创文章 经验/观点 举报 1292 12 8 0

      聊聊-我关于设计工作的所思所想(视觉篇)

      0.0°

      你确定要举报聊聊-我关于设计工作的所思所想(视觉篇)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年08月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      12
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录