你不懂UI设计,是因为你没有看过这本书(一)

大家好,本周我为大家分享的这本书叫《UI设计师入门必读的书》。

这本书涵盖了大量的硬核UI知识,简单易懂,就算是刚入行的设计小白也能学会它,掌握它。

它就像UI工作字典一样,当您需要解决设计工作中的某个问题时,您就可以在本书中找到最精确的解决方法。

为了帮助更多的互联网设计师以及非科班出身的设计爱好者,作者郗鉴耗费了两年的时间终于写完并出版了这本书。

《UI设计师入门必读的书》

郗鉴,站酷人气最高的设计师之一,参加过国内外诸多比赛和品牌跨界合作,并多次担任设计比赛评委等。

他是我的设计启蒙老师,也是国内大多数互联网设计师的启蒙老师。

郗鉴老师站酷地址:https://:.zcool.com.cn/
郗鉴老师的部分站酷作品

下面是我根据这本书整理出来的重要知识点,希望能帮助到大家,如有不足之处,欢迎大家指正。当然,对本书有兴趣的小伙伴也可以去某宝购买哦~


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设计师来说,手绘逐渐成为一项不可忽视的的技能,那么我们该如何去学习美术知识呢?

作者:Mike

首先,设计师要了解的是美术中最重要的三大基本关系,即结构关系、素描关系、色彩关系。

(1)结构关系

在结构关系中最重要的知识点就是透视关系,也就是近大远小的空间关系。

灭点是指立体图形各条边延伸所产生的相交点,即透视的消失点(图片来源:郗鉴)  

生活中,主要有以下四种透视关系:

第一种透视:平视(一个物体如果是正面或者没有近大远小的关系,那么该物体横竖对齐即可)

平视,没有近大远小(图片来源:郗鉴)  

第二种透视:一点透视(透视来源于一个点,形状的变化与改点的距离相关)

一点透视(图片来源:郗鉴)  

第三种透视:两点透视(即通过两个灭点建立透视)

两点透视(图片来源:郗鉴)  

第四种透视:三点透视(通过两个灭点和延长线进行辅助)

三点透视(图片来源:郗鉴)  

(2)素描关系

素描关系中,我们需要掌握的知识就是三大面五大调。

三大面:黑、白、灰 (因受光程度不同而产生的)

(图片来源:郗鉴)  

五大调:灰面、亮面、明暗交界线、反光、阴影

(图片来源:郗鉴)  

(3)色彩关系

在色彩关系中,我们首先要了解三原色。

三原色是指色彩中不可再分解的三种基本颜色,三原色相互混合可以产生所有的颜色。黑、白、灰属于无彩色。

三原色又分色彩三原色、屏幕三原色和印刷三原色。

色彩三原色是指红、黄、蓝;屏幕三原色:红、绿、蓝;印刷三原色:青、品红、黄。

屏幕三原色:红、绿、蓝(图片来源:郗鉴)  
印刷三原色:青、品红、黄(图片来源:郗鉴)  

然后我们要了解的是,色彩的三种属性,即色相(H)、亮度(B)、饱和度(S)。

色相:色相就是颜色本身的样子,它决定着”是什么颜色“。

亮度:亮度与颜色的敏感程度有关。色彩的亮度最低时是黑色,亮度最高时是白色。亮度高的色彩会给人清新、明快的感觉,反之亮度的色彩给人沉重、稳定的感觉。

饱和度:饱和度是指色彩的纯粹度,也是色彩的纯净度、鲜艳程度。太高了会刺眼,太低了色相就会不明显。

(图片来源:郗鉴)  

最后我们要了解的是,色彩关系中的最后一个要点:互补色、对比色、邻近色、同类色以及固有色、光源色、环境色的含义

互补色:在色环上相隔180°的两种颜色,是对比最强的色组。经典互补色有:黄+紫、黄+蓝、红+绿。

对比色:指在色环上相距120°~180°的两种颜色。需要指出的是,互补色一定是对比色,但对比色不一定是互补色。

邻近色:指相互接近的颜色在色环上相距90°,或者相隔五六个数位的两色。

同类色:指色相性质相同,但色度有深浅之分,在色环上相距15°以内的颜色。

色彩关系(图片来源:郗鉴)  

固有色:最简单的理解是物体本身的颜色。

光源色:一切物体只有在光源的点亮下才能观察到它们的色彩。光源有自然光源(太阳、天光)和人造光源(灯)。

环境色:物体周围环境的颜色就是环境色。

Workplace by Igor Kozak for Rocketboy(图片来源:郗鉴)

(4)色彩心理学

色彩心理学是美术知识学习中非常重要的一部分。它所研究的是色彩通过对人视觉上的刺激,而引发人情感和感官上的变化。

例如人们常用”亮不亮“”艳不艳“”中国红“等词语形容物体的色彩。再比如”为什么交通灯用红色表示停止通行而不用绿色呢“这都涉及到色彩心理学的相关知识。

运用好色彩心理学知识,可以带给用户极佳的视觉体验,引导用户的内心情感和思维沿着设计师预期的方向发展。

下面就让我来为大家揭露每种颜色背后所代表的情感。

黑色:代表品质、权威、稳重、时尚,同时含有冷漠、悲伤、防御的消极情绪。

(配色技巧:黑+红=引人注目;黑+金=活力突出、有亮点)

白色:传递简单、纯真、高雅、精致、信任、开放、干净、畅快、朴素的情感。

灰色:代表睿智、老实、执着、严肃、压抑的情感。

红色:传递喜庆、自信、斗志、权威、性感的情感,同时也代表了警示、告诫。

绿色:代表生命力、青春、希望、宁静、和平、舒适、安全的情感。

蓝色:代表永恒、灵性、清新、自由、放松、舒适、宁静、商务、忠诚的情感。

紫色:代表优雅、浪漫、高贵、时尚、神秘、梦幻、灵性、创造性,也是儿童和有创造力的人喜欢的颜色。

(紫+粉=女性化;紫加黑=沉闷、压抑;紫加白=女性魅力)

黄色:代表阳光、青春、活力、时尚、尊贵、年轻、轻快、辉煌、希望。

(黄+蓝=流行;黄+黑=有亮点)


03

设计师应当掌握的版式基础及平面设计知识体系

提起平面设计,人们很容易联想到平面设计师。其实平面设计不仅是一种职业,更是一个重要的设计知识体系。

无论是UI设计还是其他设计领域,都应该去学习并掌握它。

平面设计(Graphic Design),也称为视觉传达设计,是指在二维平面内通过多种设计组合传递信息的视觉表现设计。

平面海报  作者:阿新I任星星

(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知识。

分享是最好的学习,我是绛清,感谢你的阅读。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容