大家好,本周我为大家分享的这本书叫《UI设计师入门必读的书》。
这本书涵盖了大量的硬核UI知识,简单易懂,就算是刚入行的设计小白也能学会它,掌握它。
它就像UI工作字典一样,当您需要解决设计工作中的某个问题时,您就可以在本书中找到最精确的解决方法。
为了帮助更多的互联网设计师以及非科班出身的设计爱好者,作者郗鉴耗费了两年的时间终于写完并出版了这本书。
郗鉴,站酷人气最高的设计师之一,参加过国内外诸多比赛和品牌跨界合作,并多次担任设计比赛评委等。
他是我的设计启蒙老师,也是国内大多数互联网设计师的启蒙老师。
下面是我根据这本书整理出来的重要知识点,希望能帮助到大家,如有不足之处,欢迎大家指正。当然,对本书有兴趣的小伙伴也可以去某宝购买哦~
01
互联网设计师现状
UI设计师是什么?UI是User Interface Design(即界面设计)的简称。这个界面可以是手机界面、网站界面、软件界面、智能设备界面等一切人机交互可视为的媒介。
因此,UI设计师的职责是设计供人机交互使用的图形化用户界面,并使界面更加易用和友好。
(1)互联网公司里的产品团队
在互联网公司里,大型公司都会有一个完整的产品团队如微信团队,支付宝团队等,这个团队有着很多角色,按角色不同可分为以下几项:
高层→用研团队→产品经理→项目经理→交互设计师→互联网视觉设计师或UI设计师→前段开发→后端工程师或程序员架构师→测试工程师→运营或市场拓展
角色不同,分工不同,但是他们始终都是围绕一个产品进行打造,并且以设计、开发、完成该产品为目标。
(2)产品设计思维
每个公司都有自己的产品,而衡量一个好的以用户为中心的产品设计,主要有三个维度,即产品的有效性、产品的效率、用户主观满意度。
为了打造用户更满意的产品,很多大公司专门设置了用户体验部,如腾讯网UED、阿里巴巴国际UED等团队。于是,以用户体验为原则的UED和UCD由此运应而生。
UED是User Experience Design(用户体验设计的简称),它是以用户体验为中心,以用户需求为目标而进行的设计。
而UCD是User Center Design的简称,它是指在设计过程中以用户体验为设计决策的中心,强调用户优先的设计模式。
(3)UI设计师必备能力
从目前来看,作为一名UI设计师需要掌握的知识和能力主要有:排版能力、交互知识、图标绘制、插画绘制、手绘、运营图设计能力、专题设计能力、网站设计能力、移动端设计规范、基本代码原理、Logo设计能力、H5设计能力、作品展示的能力等等。
UI设计是崇尚经验的工作,随着经验的积累和方法论的沉淀,每个人最终一定能够取得不错的成绩。
有人会问,好UI的标准是什么?答案是:好用、功能清晰、好看、好实现。
02
美术在设计中的重要性
任何分类的设计师都需要一定的美术基础,甚至也要具备一定的手绘能力。对于UI设计师来说,手绘逐渐成为一项不可忽视的的技能,那么我们该如何去学习美术知识呢?
首先,设计师要了解的是美术中最重要的三大基本关系,即结构关系、素描关系、色彩关系。
(1)结构关系
在结构关系中最重要的知识点就是透视关系,也就是近大远小的空间关系。
生活中,主要有以下四种透视关系:
第一种透视:平视(一个物体如果是正面或者没有近大远小的关系,那么该物体横竖对齐即可)
第二种透视:一点透视(透视来源于一个点,形状的变化与改点的距离相关)
第三种透视:两点透视(即通过两个灭点建立透视)
第四种透视:三点透视(通过两个灭点和延长线进行辅助)
(2)素描关系
素描关系中,我们需要掌握的知识就是三大面五大调。
三大面:黑、白、灰 (因受光程度不同而产生的)
五大调:灰面、亮面、明暗交界线、反光、阴影
(3)色彩关系
在色彩关系中,我们首先要了解三原色。
三原色是指色彩中不可再分解的三种基本颜色,三原色相互混合可以产生所有的颜色。黑、白、灰属于无彩色。
三原色又分色彩三原色、屏幕三原色和印刷三原色。
色彩三原色是指红、黄、蓝;屏幕三原色:红、绿、蓝;印刷三原色:青、品红、黄。
然后我们要了解的是,色彩的三种属性,即色相(H)、亮度(B)、饱和度(S)。
色相:色相就是颜色本身的样子,它决定着”是什么颜色“。
亮度:亮度与颜色的敏感程度有关。色彩的亮度最低时是黑色,亮度最高时是白色。亮度高的色彩会给人清新、明快的感觉,反之亮度的色彩给人沉重、稳定的感觉。
饱和度:饱和度是指色彩的纯粹度,也是色彩的纯净度、鲜艳程度。太高了会刺眼,太低了色相就会不明显。
最后我们要了解的是,色彩关系中的最后一个要点:互补色、对比色、邻近色、同类色以及固有色、光源色、环境色的含义
互补色:在色环上相隔180°的两种颜色,是对比最强的色组。经典互补色有:黄+紫、黄+蓝、红+绿。
对比色:指在色环上相距120°~180°的两种颜色。需要指出的是,互补色一定是对比色,但对比色不一定是互补色。
邻近色:指相互接近的颜色在色环上相距90°,或者相隔五六个数位的两色。
同类色:指色相性质相同,但色度有深浅之分,在色环上相距15°以内的颜色。
固有色:最简单的理解是物体本身的颜色。
光源色:一切物体只有在光源的点亮下才能观察到它们的色彩。光源有自然光源(太阳、天光)和人造光源(灯)。
环境色:物体周围环境的颜色就是环境色。
(4)色彩心理学
色彩心理学是美术知识学习中非常重要的一部分。它所研究的是色彩通过对人视觉上的刺激,而引发人情感和感官上的变化。
例如人们常用”亮不亮“”艳不艳“”中国红“等词语形容物体的色彩。再比如”为什么交通灯用红色表示停止通行而不用绿色呢“这都涉及到色彩心理学的相关知识。
运用好色彩心理学知识,可以带给用户极佳的视觉体验,引导用户的内心情感和思维沿着设计师预期的方向发展。
下面就让我来为大家揭露每种颜色背后所代表的情感。
黑色:代表品质、权威、稳重、时尚,同时含有冷漠、悲伤、防御的消极情绪。
(配色技巧:黑+红=引人注目;黑+金=活力突出、有亮点)
白色:传递简单、纯真、高雅、精致、信任、开放、干净、畅快、朴素的情感。
灰色:代表睿智、老实、执着、严肃、压抑的情感。
红色:传递喜庆、自信、斗志、权威、性感的情感,同时也代表了警示、告诫。
绿色:代表生命力、青春、希望、宁静、和平、舒适、安全的情感。
蓝色:代表永恒、灵性、清新、自由、放松、舒适、宁静、商务、忠诚的情感。
紫色:代表优雅、浪漫、高贵、时尚、神秘、梦幻、灵性、创造性,也是儿童和有创造力的人喜欢的颜色。
(紫+粉=女性化;紫加黑=沉闷、压抑;紫加白=女性魅力)
黄色:代表阳光、青春、活力、时尚、尊贵、年轻、轻快、辉煌、希望。
(黄+蓝=流行;黄+黑=有亮点)
03
设计师应当掌握的版式基础及平面设计知识体系
提起平面设计,人们很容易联想到平面设计师。其实平面设计不仅是一种职业,更是一个重要的设计知识体系。
无论是UI设计还是其他设计领域,都应该去学习并掌握它。
平面设计(Graphic Design),也称为视觉传达设计,是指在二维平面内通过多种设计组合传递信息的视觉表现设计。
(1)平面构成
学习平面版式基础之前,我们需要先了解平面构成原理。平面构成是运用点、线、面和其他技法构成基本元素的设计方法。
平面构成的形式有重复构成形式、近似构成形式、渐变构成形式、发射构成形式、特异构成形式、密集构成形式、对比构成形式、肌理构成形式。
重复构成形式:用一个基本元素在一定形式下重复排列。
近似构成形式:使用相似的元素进行构成。
渐变构成形式:把基本元素的大小、方向、虚实、色彩等关系进行渐次变化排列。
发射构成形式:以一个点或多个点为中心向周围发射扩散的,具有较强的动感及节奏感的形式。
特异构成形式:在整体画面都有规律、有固定形态的情况下进行小部分的变异,以突破单调画面的形式。
密集构成形式:在画面中使用大量重复密集的元素,给观察者一种压迫感,使其感知元素与留白的对比的形式。
对比构成形式:通过使用元素的形状、大小、方向、位置、色彩、肌理等进行对比。
肌理构成形式:物体表面图案的纹理成为肌理。
(2)排版中的元素
在平面设计过程中,设计师其实就是在组织文字、图片、按钮、图标等最小元素的信息架构。
字体知识
字体是排版中最重要的元素,也是最直接的信息传达方式。
字体通常有中文字体和西文字体两种。
西文字体可以分为罗马字体、或衬线体、无衬线体、手写体、雕刻字系、典籍体字系、装饰体字系、当代字体字系、符号字系等。
而中文字体主要分为以下三种:
第一种是黑体(笔画上没有装饰),如苹方、微软雅黑、思源等;
第二种是由书法作品演变而来的字体,如宋体、楷体等;
第三种是美术字体,如综艺体、美黑体、娃娃体等。
另外,我们也可以通过字体的族类、字族、字重去了解字体的相关知识。
族类:常见的字体族类有衬线体(笔画结尾处有装饰性的处理)、无衬线体、手写体、梦幻字体族、等宽字体族五种。
字族:字族一般有正常(表正文内容)、窄体、斜体(表引用)、粗体(表强调)、粗斜体、黑体等。
字重:字重是指字体的粗细变化,一般有极细、细、标准、常规(用于正文内容)、中等、粗、特粗这些变化。
在使用文字排版时,我们需注意以下几点:
1)保证文字可读性;2)切勿使用三种以上的字体;3)英文标题要大写;4)文字的字间距一般为0,行间距为字号本身的1.5~2倍;5)文字大小必须为偶数;6)避免版式中出现中英混排;7)文本需要两端对齐;8)英文首字母需大写。
图片知识
设计师在进行设计工作时,一定会用到一些图片或者照片素材进行排版,但是无论哪种方法,我们都应当注意,使用的图片一定要与整体设计色调相符。
同时,也应当牢记一下三个尺寸,即:
①4:3 采用这种比例的图片,一般用于新闻客户端。
②16:9 采用这种比例的图片,一般用于视频网站的截图。
③1:1 采用这种比例的图片,一般用于电商平台的商品图片。
(3)排版的CRAP原则
在任何一个设计中都需要把各个元素进行分级,分清主次,这样才能更好地抓住重点。
为了能够分清各元素的主次,我们就需要用到CRAP原则,即对比、重复、对齐、亲密性原则。
对比(CONTRAST)
在同一个视觉区域内,逻辑不同的元素应该有所区别,以避免视觉上的相似,这样就能有效分清主次。在这里,对比的方式主要有色彩对比和大小对比。
重复(REPETITION)
如果相同的内容(如标题等)属于同一种逻辑关系,则应该使它们的颜色、字体、大小、留白尽量保持一致。
对齐(ALIGNMENT)
任何内容在版面上都应该尽量上、下、左、右对齐,随意摆放各种内容绝对是错误的。
亲密性(PROXIMITY)
在逻辑上有关系的两个元素应该尽量放在一起,因为两个有逻辑关系的视觉元素在一起就会变成一个视觉单元。
据研究表明,用户的浏览顺序会按照这种定律进行:从左到右;从上到下;从大到小;从重到轻;狩猎式;S曲线。
好了,今天就为大家分享到这里。想了解并学习UI设计的小伙伴可以点击加关注,我会定期为你们分享更多的UI知识。
分享是最好的学习,我是绛清,感谢你的阅读。