UI设计成长笔记 No.2

本期目录

设计理论

设计欣赏


ONE / 设计理论


1.1 UI视觉设计师突破和独立


雨成简单清晰但是又直切要点的写出了他个人成长带给他的设计师成长方法,每一条都很珍贵。以下是我摘录的文中实操部分内容,与大家分享。

用目标来驱动成长

首先你要想想,未来你三年来要成为什么样的人,到达什么样的高度等等
1

1. 未来的目标或者成为的角色

这一步是开头的一步,但是我希望它是实事求是的符合你们目前的情况的,我会按照我自身的的经验做一个参照,我是17岁的时候开始设想未来角色以及目标,比如我设定的是 两年内能加入腾讯工作。

2. 我需要满足什么条件?

如果人人想着能成功,那世界上都是伟人。第一步如果我们制定好了,接下来越来越关键,比如我的愿景是 两年内加入腾讯工作,那么我需要制定我满足什么条件才能完成这个愿景。

首先我会把满足的条件列举出来:

  • 成为站酷推荐设计师(知名度活跃度的体现)
  • 有UI、插画、图标、动效等方面的作品集。
  • 有至少一套个人风格作品产出。
  • 一家背景很好的公司背景。
    ……..

当我们把这一步履清楚,我们就会把目标拆分细化了,从【我如何两年内能加入腾讯工作】变成【我两年内加入腾讯需要满足什么条件】这一个思维转换了

接下来就是把条件量化成时间!

3. 量化时间

有了上述的四点条件需求,我就可以开始量化自己的时间安排了,时间会证明你的努力成果。首先继续学会拆分,比如第一点:我要成为站酷推荐设计师,那么最低的标准就是有三个首页推荐的视觉作品,活跃度高。当你了解这一个需求难度之后,就可以开始量化了!

一年内要上三次站酷首页,每90天努力出一套作品或者风格等等……

那么优化之后,这一点就变成,我第一个90天需要画30张插画(平均3天一张),或者一套app视觉作品等等,那么目标显而易见就很清晰了,剩下几点继续拆分,你就会发现其实你有很多的事情还没有达成,需要更努力!

总结:
1

经典案例作品分享


建立规范的组件化 你在设计一款产品的时候,你就要有意识的为后续的界面做风格延续规范制定,比如左右两边间距的规范制定、模块之间上下的间距、文案主副标题的字号、正文的字号规范等等

1. 几个工作原则

  • 充分了解原型图以及用户心理需求
  • 明确产品性格、调性、风格、主色调等等
    我的产品性格关键字是什么?(比如稳重的、活力的、简约的)
    我的产品主色调是什么
    我的产品风格是什么(卡片的,拟物的,通栏的)
    我的产品图标风格是什么…..等等之类的问题。
  • 制定模块化的标准,比如间距,字号规范,图标风格等等
  • 制定产品设计规范模版
    你在设计一款产品的时候,你就要有意识的为后续的界面做风格延续规范制定,比如左右两边间距的规范制定、模块之间上下的间距、文案主副标题的字号、正文的字号规范等等

2. 如何在平淡界面中融入动效

  • 基础动画模式
    动画基本模式:不透明度改变、位置改变、缩放改变、旋转改变(可同时叠加)
  • 如何锻炼自己动效的逻辑思维
    学会分析别人的动效作品
    自己主动练习

1

3. 如何和开发哥哥对接动画

  • 使用png序列
    png序列是比较常见的一种动效落地方案,兼容性高,但是png序列会占用较大的空间,一旦动画多起来,对产品整体流畅性有挑战。优点是可以把动画高度还原!
  • 使用gif
    gif是dribbble常见的动画文件格式,很多新手可能误认为动图就是gif格式的,但是安卓设备没有提供原生 gif 的 api 支持,且同样占用较大的空间,清晰度不太理想,在这里不是特别推荐这种方式!
  • 使用Bodymovie插件导出json文件
    可能很多小伙伴都了解过Bodymovie插件了,它配合的软件是after effct,我们用这个插件可以吧动画导出json文件,直接和开发对接,支持渲染svg/canvans/html。并且开发可以控制动画的暂停与播放,这意味着Bodymovie导出的json文件是非常便捷且可编辑的一种方式,在这里推荐大家作为首选,具体插件安装可以自行百度下!

大步向前的UI自学提升的方法

1. 制定昼夜学习目标

四昼夜计划仅仅是我起的一个计划命名,一个昼夜分为28天,一个昼夜会有一个核心学习领域和目标。四个昼夜为一个季度。
1

2. 自己给主题需求练习

很多是自己给自己的需求,比如我之前给自己定 说要做一个旅游分享照片的app产品,那么我就会先用纸笔绘制交互草图,然后制定主色调,然后输出视觉,达到一个锻炼思维和视觉的一次练习。
大家可以根据自己的练习目标,自由发挥,比如画30张插画,每一张主题是什么?比如做30个UI动效,那么每个主题是什么?等等,坚持即可,时间会给你答案

3. 改版上线的优质产品,锻炼交互和视觉能力

有了大量的练习经验和工作经验再去进行,因为这时候你对交互和视觉的判断会更准确。一般改版的过程是先反复使用同类产品,找出产品的不足,吧交互方案罗列出来优化,之后对视觉不足也做一个判断,从交互层到视觉层做一个分析。

1

源自:Zcool@雨成



1.2. 设计师如何塑造个人品牌

打造个人品牌的完整版图

平台+个人生态圈

寻找共享平台,选对契合自己品牌发展的跑道
在平台上创建自己的能力目录,和多维的能力标签,增加自己的辨识度。
为自己发声,自信、不卑不亢,定位自己的角色,创造自己的角色价值,提高自己的主动性,无论是你的设计作品、观点、经验或心得,都应该勇于展示。

如何塑造自己的品牌

塑造个人品牌身份标示,展示个性化身份属性
1

创造个人品牌的独创性

垂直方向探索自己的深度
水平方向探索自己的宽度
在多方向上探索职业和生活的自由化

内容IP

只要你能再某个细分领域持续原创,并构成影响力,你就能成为这个领域的IP
1

源自:Zcool@心铭舍品牌设计



1.3. 为什么版式设计你总是没有思路?

1

版式组成

  1. 主体
    视觉焦点,主导着整个设计(可以是人/物/文字/图片),整个版面最吸引人的部分,相当于主角的作用。

  2. 文案
    对主体的辅助说明或引导,毕竟有时候我们放一只小狐狸在旁边,用户也不能准确的知道它在说什么,配角的作用。

  3. 点缀元素
    装饰元素,可有可无,具体根据版面需要;好的点缀元素能够渲染气氛,大部分的点缀元素遵循三角形原则,类似下图中的云朵,群演的作用。

  4. 背景
    可分为纯色/彩色肌理/图片/图形等。

1

构图平衡

平衡是视觉传达设计的一个重要方面。版式平衡总共有3种分类,分别是:对称平衡,非对称平衡和整体平衡。
1

1. 对称平衡

对称是同等同量的平衡,对称式设计是一种静态的,可预见的,讲求条理和平衡布局的设计。对称构图相对比较易于创建,特点是稳定,庄严,整齐,安宁,沉静和古典。

2. 非对称平衡

非对称在不对等的元素间创设出秩序和平衡,非对称设计由于版式不可预见,所以空间是变化的。特点是动态的,灵活的和富有活力。非对称构图比较多,常见的有以下6种形式。

1

  • 对角线构图
    文案摆放在版面的对角线方向,一方面避免了司空见惯的居中版面,一方面给中心主体留出了更多的创作空间;另外中心的图形也可以是对角线的设计,这样会让整个构图看起来比较平衡
    1
  • 发射状构图
    点缀元素围绕中心的文案或者图形发射,这样的构图会让中心的视觉容易聚焦,视觉冲击感会更强烈。
    1
    2
  • 中心构图
    这是我们最常见的构图之一,文案和主体居中页面,注意的是位于版心的主体要尽可能的出彩,利用设计技巧吸引读者的眼光,这样才能避免破平淡乏味。
    1
  • s形构图
    文案或者图形放在线条转折的地方,整体呈一个s形。另外线条的起点和重点也同样是读者容易关注的地方,可以放一些重要的信息。这样的构图灵活,有趣,而且可以引导用户沿着s形轨迹阅读信息。
    1
  • 二分构图
    文案和主体分开,呈左右或者上下的构图形式,注意的是文案要采用对齐原则。这样的构图也是比较容易创建的。
    1
  • 形状构图
    主体和文案组合的形式可以是圆形,三角形,矩形等形状构图。注意如果是用三角形构图,最好呈倒金字塔结构,这样更加轻便引导用户进入下一个信息层。
    1
3. 整体平衡(满版平衡)

整体平衡,是指图片充满整个版面,文案布局在上下,左右,中部的位置,特点是主要以图像为诉求,视觉传达直观而强烈。满版型构图,给人大方,舒展的感觉。注意:在设计的过程中,这种类型的文字处理很容易显得“嘈杂”,因此为了避免拥挤的空间,适当删减些文字。

设计原则

1

1. 对比

运用好对比,可以在页面上引导用户的视觉,并且制造焦点。
1
一般产生对比的方法可以有:大小对比;粗细对比;冷暖色对比......不管是哪种对比,当你期望对比效果有效的话,需要大胆一些,明显一些,不要拿12号和13的文字做大小对比,这是没有任何意义的,不要畏畏缩缩,做设计也是一样。

2. 对齐

任何元素都不能在版面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。在版面上找到可以对齐的元素,尽管它们可能距离比较远。需要注意的地方是避免同时使用多种对齐方式
1

3. 亲密

同类相近,异类相远,相关的元素距离靠近,归组在一起,成为一个视觉单位,而不是多个孤立分散的状态,这样有助于组织信息,减少混乱,让结构变得更清晰。根据文案内容,进行合理的分组于归类。
1

4. 重复

重复的目的是统一,并增强视觉效果。比如标题都是同一个字体或大小或粗细。但需要注意的是,要避免太多地重复一个元素,重复太多只会让人讨厌,要注意重复的“度”。太多的重复会混淆重点,都是重点等于没有重点。一般来说看,呈均匀的重复式图案,是作为背景使用的。
1

5. 留白

留白是虚实空间对比的作用。适当的留白能让页面透气,有呼吸,给人舒适感。大量视觉信息堆砌时,每个元素都要经过眼睛扫描,大脑处理,当找不到重点的时候用户眼睛和大脑容易疲惫。在内容比较多的情况下,尽量在视觉上减少视觉分组;另外,多利用负空间创作一些巧妙的负空间。
1

6. 变化

一成不变的元素会容易乏味无趣,版面也缺乏灵活感,如果将一些元素发生位置,大小或者颜色变化,打破版面呆板、平淡的格局,使得画面非常有层次感,不失为打破格局的好方法。
1

设计流程

1

1. 需求沟通,确认主题

沟通主要注意几个方面:

  • 需求的目的是什么?目标用户是谁?背景是什么?——对症下药
  • 这么多文案或者素材里面,哪个是一级二级?——划分信息层级,寻找重点
  • 风格上面有什么要求或建议?能否用3个关键词表达?——预期效果是否达成一致

Ps:关于第3步风格沟通,建议双方用图片交流和表达。毕竟每个人对“高大上”的理解都是不一样的,有的人认为是五彩斑斓的黑,有人认为是大量的留白。有了图片,我们可以去分析图片符合“高大上”的原因是哪些,从而提炼出具体的元素,将“感觉”具体化,这里也是运用到了情绪板设计的体系。
1

2. 确定构图形式,学会视线引导

根据前面的沟通和风格关键词,收集好用于表达信息的元素,包括图形图像文字等等,然后在草稿或者脑海中构思好,怎样的排布能让信息有效的传达出去。另外作为设计师要学会引导用户的阅读视线。比如你找到了一个抬头向上看的模特,你可以把文案放在海报上方,用户会习惯性地自然地沿着模特的视线看到文案。
1

3. 色彩搭配,5种平衡关系
  • 互补色——相互衬托
    互补色就是色环上相对的两个颜色,海报中的绿色和红色就是这种关系,相互映衬,相互衬托,从而达到了一种平衡。
  • 冷暖色——情感表达
    当我们想表达强烈的情感时候,可以用冷暖色去对比,经常会在电影海报或者插画作品中看到。
  • 深浅色——色彩层次
    这里的深浅指的是黑白灰对比的重和轻,一般来说,色大而深显得比较重要,色小而浅显得比较次要,我们可以看一下前面讲构图那快展示的海报黑白版,会发现这个规律更加明显。
  • 中性色和彩色——视觉聚焦
    中性色指的是黑色,白色和灰色,也叫无彩色,当中性色充当背景色的时候,彩色部分会更加突出和聚焦。
  • 纯色和花色——平衡多色关系
    如果一张图中,主体本身颜色比较丰富鲜艳,背景色也五颜六色的话就眼花缭乱了,也就是经常说的辣眼睛,这时候一般采用纯色的背景来缓解视觉疲劳和平衡多色之间的关系。
    1
    2
4. 确定字体搭配

不同的字体有不同的气质,根据风格来选择合适的字体。如果遇到比较好看的字体,却不知道叫什么名字,可以找一些以图搜字的网站,比如求字网等等,避免伸手党。

  • 黑体
    工业现代感比较强的无衬线字体,给人感觉端正刚硬,具有力量感,多用于表达简洁或信赖感的主题。
  • 宋体
    细致优雅的衬线字体、苗条细长,特点是复古,多用于表达文艺或者时尚的主题
  • 圆体
    圆体的笔画圆润,柔美,可爱,具有亲和力,多用于女性或儿童的主题领域
  • 书法体
    书法体特点是潇洒大方,气势磅礴,具有历史感,多用于表达传统文化或者历史主题。
  • 哥特体
    哥特体是装饰性比较强的衬线字体,线条交接处和末端具有明显的粗细变化和装饰。特点是犀利、凌厉,多用于表达惊悚、魔法童话或者战争的主题。
  • 艺术体
    艺术体其实是泛指像素风格,手写字体,汉仪六字简等等具有强烈的艺术风格和设计感的字体。特点是轻松活泼,具有观赏性和趣味性。
    1
    2
    3

案例演示

演示一个移动端banner设计案例
1
首先,运营小姐姐的文案非常简洁,没有冗长到让我要分成一级二级三级;其次需求的目的也很明确,就是要突出2个素材和按钮;最后风格也没有奇奇怪怪的提议,只要和产品整体调性一致就好。那么在这里要介绍一下产品的背景了,pins是一款少女心拼图app,界面简洁清新,多种布局模板和背景。很快的,我在脑海中简单地构思了一下构图的方式。其实3种构图形式都是可以的,但是为了更好的突出按钮和素材效果,我最后选择了对角线构图。
2
先在黑白稿的情况下把文案和主体布局好,让主次关系清晰;考虑到目标用户大部分是女生,使用了圆形字体,配色主要是参考了pins的logo的配色,少女心的品牌色;最后细节调整,加上一些点缀的元素,其中网格是pins比较受欢迎的背景。一个简单的banner就这样完成了。
3
当我们的工作内容无法满足做文字比较多的平面海报的欲望时,可以考虑自命题的练习。当时听到许巍《无人知晓》这首新歌的时候,有一些感悟和想法然后做了一些C4d素材,想利用它作为主体和歌名做一下排版练习:
4
在开始动手做之前我就想好了这次想做一个视觉直观而强烈的海报,再加上主体是文案和素材的结合,所以我才采用了满版构图。在黑白灰中将主角和配角的位置确定好,再去调整字体和距离。
5
然后调整主体中4个字和素材之前的交叉和重叠,细节调整后,我尝试了2个配色方案,一种是利用主体素材的颜色进行搭配,平静和谐;另外一种是红蓝配色,直观强烈。
6

总结

我们在进行版面设计时候,要注意从这几个方面去不断调整和检查,同样当你看到一张海报的时候不知道怎么去思考和分析,也可以从这几个方面入手:

  • 主题是否鲜明?视觉焦点是否突出?
  • 构图是否平衡?(3种平衡关系)
  • 设计原则是否合理运用?(6个设计原则)
  • 细节是否丰富? 是否有趣? 细节考验着设计师的情怀。(字体、色彩、光影等)
    1

参考书籍和文章

  • 《写给大家看的设计书》——Robin Williams
  • 《平面设计原理》——alex w.white
  • 《版式设计原理》——Chris Do
  • 《色彩设计法则》——梁景红

源自:Zcool@琳琳linlin






TWO / 设计欣赏


2.1. 事外 —— 创意灯具设计

1
2
3

开篇又是一个家居设计,看来我对家居是真爱啊。不过一个美美的充满诗意的家不是更能给生活带来幸福和美感吗?
这个系列的灯最开始吸引我的是它的色调。
我喜欢的蓝绿色。有个朋友说我不适合红色,蓝色和绿色这样的冷色调可以安抚我的情绪和身体,更适合我一些。他说出这些话的时候我才意识到为什么我每次都会被绿色蓝色的衣服饰品所吸引。找到并认识自己喜欢的颜色也是一种幸福。
仔细看下设计师的设计思路,越发喜爱这些灯了。
黄铜、琵琶、刺绣的结合,波动弦来控制灯开关及亮度的互动都让我觉得充满了诗意。
设计师是希望这盏灯能让人忘却世俗之事,置身事外享受自己的诗意时光,他实现了他的目标。
越来越喜欢新中式的风格,简约大气又有深度。

源自:站酷@小强student



2.2. 插画欣赏 | 异世界之门

1
2
3
4
5
6
7
8
9

造型、色彩、躁点的添加都很喜欢。
一直想要学习这种绘画风格,这次打算以这几张图为临摹对象,透彻的学习一下这种绘画风格。根据本期第一条的学习,我也应该先给自己列个明确的计划来。哈哈。

源自:Behance@鬼画胡子 Guihuahuzi



2.3. 插画欣赏 | GROW A BEARD

1
2
3

超级欣赏这种风格的插画,很有风情很时尚很有意境很有feel,可惜这种有点难度,可以作为参考。

源自:Behance@Darya Shnykina

想有更多交流欢迎添加本人微信:Cymaizi

1



comments powered by Disqus