消息
登录即可查看消息记录
当前位置:首页>虎课读书> 写给大家看的UI设计书
音频
免费 写给大家看的UI设计书

柯皓 著

更新时间:2020-03-24 1.2万人已学

1课时 / 25分钟3秒

立即收听正在收听中继续收听 加入虎课读书VIP,全年免费听书收藏
已收藏
本书介绍

想要加入读书交流群、获取听书推荐的小伙伴,请加小虎微信:huke-2019,备注:读书入群。

       简介:

       对于想要进入UI这个领域的新人小白来说,如何入门、如何对UI设计有一个比较系统、全面的认识并不简单。这个过程可能是非常耗时,也很低效率。那如何快速了解UI是什么、UI设计的原则、以及实际操作中会遇到什么样的问题呢?

       来听听拥有10年UI设计经验的柯皓老师(@酸梅干超人)的这本《写给大家看的 UI 设计书》,作者倾情献声,讲解聚焦于UI设计师职能的第一步——如何设计出正确、优美的界面。

       关键词:

       UI设计、界面设计、配色方法

       内容亮点

       1.为什么说UI是个排版的过程?

       2.平面设计的四要素是什么?

       3.UI设计和配色需要注意什么?


       本期推荐书籍

       书名:《写给大家看的UI设计书》

       作者:柯皓

       出版社:电子工业出版社


       虎课读书主创团队:

       选书:主编刘莹

       撰稿人:本书作者柯皓

       审稿:主编刘莹

       主播:柯皓[酸梅干超人](作者版)

       校对上线:编辑之意


书籍目录(共1章)
  • 1
    【男声版】写给大家看的UI设计书
    1.2万人已学时长:00:24:56
本书文稿 (完整文稿)

想要加入读书交流群、获取听书推荐的小伙伴,请加小虎微信:huke-2019,备注:读书入群。

前言:

      大家好,欢迎来到虎课读书

       如何入门和对UI设计有一个比较系统、全面的认识,是困扰很多新人的问题,因为 UI 是一门驳杂的学科,需要掌握的知识种类丰富、维度广泛,但我们在网上只能搜索到一些碎片化的知识,且很难将它们串联起来,形成一个整体的概念,并始终对如何进行入门、展开学习有非常大的困惑,是新人首先要解决的问题。

       我呢,是一名拥有十年设计经验的设计师,曾就职奥美、小红书、学霸君等多家知名企业,负责相关的产品设计和设计团队管理。也在知乎、虎课、公众号上发布过大量的设计分享和教学,输出过许多转发和阅读量较高的文章,相信关注UI设计的同学有可能看过一些我的分享。

       我们本次要讲解的书籍,是我自己编写的一本面向零基础 UI 设计新人的读物,叫 《写给大家看的 UI 设计书 》。这本书的主要内容,是帮新人更系统的认识和理解 UI 视觉设计,并从零开始学会独立完成 UI 界面的视觉设计,正确的开启小白进阶之路。

       书中共有 9 个大章,从 UI 设计是什么这种基本的概念开始,对必要的知识做出扫盲和解释。并逐级拆分构成界面视觉的元素,独立讲解它们的设计方法以及要点,并通过这些知识点结合正确的流程,完成整个 APP 项目的设计。其中,我对文字应用、配色等难以掌握知识点做了一些特殊的总结,极大地降低了它们的学习门槛,让读者能更快地上手。

第1部分,UI是什么?

       对于UI设计来说,它和平面设计有一定的差异,平面设计是一种用来浏览和阅读的静态视觉内容,让浏览者单方面接收画面的信息。UI的界面则是用来连接程序和用户的媒介,也就是说,我们要通过一种可视化的图形来帮助用户和机器进行交互。

       更近一步说起来,在过去,人类操作计算机、程序,需要通过键盘在系统键入一长串的代码、命令行,然后再让它们开始执行操作。但是随着图形化界面的产生,我们可以将本来生硬的代码转化成图形,比如一个软件中的下一步、返回都由图形元素表示出来,那么我们就可以通过鼠标或者触控的方式进行操作,大大降低了软件使用的门槛,操作成本。

       今天互联网行业已经成为一个主流的行业,有越来越多的人入行或从事 UI 设计,造成行业的门槛上升,竞争比过去更激烈。在网上,有非常多的声音唱衰这个行业,无论是行业饱和、互联网寒冬或是AI取代设计师的论调,这都是一些非常短视的观念。互联网和信息数字化发展的趋势是势不可挡的,基于前面所说的特征,未来只会有越来越多的设备、软件诞生,UI 设计的需求也只会越来越多,而不会随着时代的发展萎缩或者消亡。新手大可不必为这样的说法而产生忧虑,可以全情投入到这个行业的发展和学习中去。

       虽然 UI 设计未来还有很大的发展潜力,但它依旧只是一个新兴的职业,且从理论到应用的知识处于持续更新迭代的阶段,是一门非常注重实践的技能,我们的学习应该以实践作为主要的方向和手段,除了必要的知识点以外,不要过度沉迷理论内容。

       因为多数的专业理论界限模糊,易用性较低,很难转化成前期学习的成果。在我指导过的新人中,就有很多这样的例子,将大量的时间用来专研理论知识,但在设计作品的产出上却强差人意,因为没有足够的实践积累,不仅理解理论非常的吃力,并且也完全无法考虑如何应用到实践内容中去。

       比如关于人机交互领域的菲兹定律,提出任意一点移动到目标中心为止所需的时间,与目标距离正相关。也就是说如果页面中两个关联都需要操作的按钮离得越远,操作难度越大,它还给了一个比较复杂的计算距离和难度系数的公式。即使我们了解了这个理论,熟练应用公式计算,也没办法通过它来确定按钮之间的间距应该有多少,且没有一个统一的数值和范围可以应用到所有的布局环境中。它只能作为一个评估真实项目交互流程的标准之一,作为改版决策的参考。这是我们没法在别人的分享或者没有足够项目经验的情况下能正确理解的。

       或者我们在各种小说、电影中会看见的一个高大上的名次,奥卡姆剃刀原理,概括起来,即“如无必要,勿增实体”,也就是简单有效原理,是交互领域被高频引用的原则之一,是极简化思潮的重要理论武器。但是,我们在设计界面的时候,怎么评判元素是完全没必要出现的,尤其是在类似淘宝、京东这样的极其复杂的产品中,少一个注释文字会不会用户就看不懂了,少一个装饰性的图标会不会让画面看起来枯燥没有生气,这都需要设计师依靠自己的经验积累去做判断,否则这句话对我们的用处也非常有限。

       再者,对于平面设计来说,UI 设计的软件操作、技法其实是非常容易的。主流的扁平化 UI 界面,组成它们的视觉元素主要分为四种,分别是几何图形、文字、图标、图片。不信大家可以自己打开手机中的 APP,观察一下是不是由这四种元素组成。所以,设计 UI 界面的创作过程,实际上就是用正确的方式设计或引用这四种元素,并将它们有效、合理排版到对应的画布中去。UI 设计的过程更多是一个排版的过程,而不是平面设计的创作过程。

       这也是为什么我们在工作中进行 UI 设计的主要工具并不是使用 PS 或者 AI 的原因,因为它们太复杂了,而且操作效率较低,不利于排版操作的快速响应。所以,学习UI优先应该掌握的工具,是 Adobe XD、Sketch 或者 Figma 等适合界面排版布局的软件,它们也是工作中设计界面的主要工具。

       而我们了解的系统设计规范,以及屏幕分辨率相关的知识,就是保证这个排版过程正确的基础条件。

 

第2部分,平面设计四要素

       在这章节中,我想和大家介绍一个极其重要的设计理论,即对齐、亲密、对比和重复四个要素。可以说,平面四要素是 UI 视觉表现中最重要的基础

       它们脱胎于格式塔原理,该原理是心理学八大分支之一,它指出我们的眼睛和大脑会自行对接收的视觉图像作出组织、简化、统一的解释,以符合人类的思维习惯,即将我们所见的视觉材料更快地加工成能快速被大脑理解的内容,总结了类似接近、闭合、连续、简单、均衡等诸多有关人类视觉习惯的特征。但是这些特征记忆起来不仅名称拗口,而且对不是心理学专业的同学来说有比较大的理解负担,所以平面四要素,就是将这一系列特征进行浓缩,以适应我们实践过程中所需要的理论。

       接下来我们分别解释下四要素的相关特征。首先谈谈对齐要素,这是我们接触设计前就已经掌握的理论了,如果相关的事物摆放没有对齐,那么看起来就会显得杂乱无章。而在界面设计过程中,对齐还可以确定画面的重心,引导用户视觉的查看顺序。比如我们可以看本次分享文稿中的配图案例,在这个商品详情页面中,上下方的元素分别使用了左对齐和右对齐,而且需要我们理解、重要的信息则主要使用左对齐的方式排列,适应了我们正常的阅读习惯,保证了画面整体的整齐感。

       再说说亲密性,亲密性是指在画面中,靠的越近的元素,证明它们关联性越高。比如在该配图案例中,我们可以看见商品的标题和小标题之间的间距,是小于它们到价格和下方标签的距离的,因为标题和小标题的逻辑更亲密,所以它们的距离就理应更小。在一个界面中,我们可以通过亲密性的原则,将逻辑接近的元素组织到一起,这样用户就可以自然而然地辨认不同的模块和功能。就像我们走在街上的时候,可以很快地认出陌生人中有哪些是相互认识的,可能是好友或者有一些亲密的关系,而不认识的人之间的间距是比较大的,所以我们日常生活中有很多方面和领域,都可以简单地依靠间距这个概念来帮助我们组织逻辑和关联性。

       很多同学在最初接触UI设计时,会有“自己的设计稿总是有些杂乱无章”的感觉,会显得乱?那这就有可能是违反了亲密性的原则。初学者常有一个误区是,觉得用很多元素堆砌能够突出设计,但有时善用空间上的距离亲疏,更能达到这种“突出效果”,有一种“无声胜有声”的感觉。

       接着,我们还可以用这个案例来理解对比要素,对比是一个用来升华界面视觉体验的关键。那么,还是在这个配图中,价格、优惠券、购买、加入购物车等元素都采用了一些比较突出的色彩,而在文字中,一些描述性的文字诸如领券、已选等,不仅文字的色彩没商品的标题强,字号、粗细也更小,这就是对比,可以通过这种大小、强弱的对比更多地吸引用户关注到重要的内容上去,也方便它们区分不同的元素内容。如果缺乏对比,所有的元素使用相同的颜色,所有的文字使用相同的样式大小,那么这个界面不仅视觉体验会非常无聊,并且不具备基本的实用性,因为我们无法判断画面中哪些元素是信息,哪些是可以操作的按钮,这会造成用户的理解困难,用户需要一个元素一个元素理解。可以说,对比的使用,就是将画面中重要的元素突出,次要的元素弱化,而对比要素的加入除了丰富我们的界面视觉体验外,也会引导设计师在设计过程中通过元素重要性的思考去深入理解交互和产品。

       虽然画面中必须有对比的体现,但并不代表每一个元素都要使用不同的样式,重复原则指出,我们可以将一些含义相同,重要性相近的元素使用一样的样式。例如在这个配图案例中,领券、已选、送至这些注释性文字就使用了相同的样式。而在我们设计一整套应用的时候,往往有数十上百个界面,要保证这么多的界面视觉上的统一,就更要遵循这个要素,保证逻辑一致、功能一致的按钮、图片、标签、文字等元素重复使用相同的样式。而重复要素,就是我们建立项目视觉规范和应用的根源。

       之所以重点强调平面四要素,作为我们学习 UI 设计的切入点,是因为优秀的 UI 设计作品一定会遵循某种理性和严谨的思考方式而产生,而不是仅仅依靠设计师的审美或者灵光乍现,而平面四要素就是最简单使用的思维方式。

 

第3部分,关于UI设计

       第三部分,我们主要来学习一些 UI 的基础元素设计。UI 设计和平面设计在设计过程中有一个巨大的不同点,就是,UI 操作中,我们是在属性栏中调整元素数值的方法来定义元素的样式,而不是使用鼠标拖拽

       比如,我们要在一个独立的登录页面中,创建两个输入框和一个登录按钮,那这个设计过程,就不是我们用鼠标拖入三个矩形,然后分别拖动它们的尺寸来完成的。比如设计输入框,要方便点击,且往里面输入的文字能便于阅读,不会太小,也不会太大。这样的要求,就客观的约束了输入框的尺寸数值。所以,行业的发展,逐渐形成了一套对不同元素参数设置的范围体系,专业的设计师在设计这个输入框的时候,会使用输入长宽数值的方法来确定它的尺寸,而不是通过鼠标拖动元素边框尺寸。

       比如输入框和按钮,在尺寸上是比较接近的元素,我们会用 44pt 这个最符合我们手指触摸的热点数值作为标准,如果要设计得紧凑一点,就会适当在这个数值上减少,如果要设计得宽松一点,就会在这个数值上增加。但到这里,我们一样要面对一个问题,就是应该增减多少数值合适?如果没有一个标准,岂不是和鼠标拖动的设计没有区别。

       基于显示器显示习惯,像素是一个页面最小的单位,所以必须应用整数,在这个前提下,奇数没办法在屏幕中完美的实现居中对齐,比如13、15没办法被整数等分,再考虑到不同像素密度的屏幕之间适配问题,最后就得出 4 的倍数数值是我们在设置元素尽量要满足的特性。基于这个特性,我们就可以通过 44 递增或递减 4 来确定元素的尺寸,比如我们要做一个小一点的输入框,就可以通过 40、36、32,大一点就 48、52、56 等等。这个递进的方式,就可以很好的缩小我们选择的范围,因为4这个数值在真实的界面当中,每进或者减一档,可以明显地发现在视觉体验中的区别,所以可以很快选出我们觉得合适的那一个尺寸。这种手动输入元素尺寸的方法,是我们展开 UI 设计最重要的习惯之一。

       而一个页面的组成,除了我前面提及的四个基础元素,还有一些更复杂高级的元素,是 UI 界面中专属的一些模块。比如,文字和矩形组合,可以形成按钮、输入框、标签等,原型和矩形组合,可以形成开关、音量滑块等等。在 UI 界面中,一些最基本的交互单位,我将其定义为控件。但是控件这样的单位太基础,比如我们在朋友圈或者微博浏览一个用户发布的动态,每一条动态就是一个更复杂的单位,这样的单位我们肯定也需要又一个形容方式,我们称其为组件,一个组件内可以包含多种控件、文字、图片或其它基础元素。最终,不同组件的拼接,就可以形成一个完整的界面。

       换句话说,一个界面的框架,就是由基础元素、控件、组件所组成的。在书中,我们就比较具体的讲解了一些控件定义的数值和组件的设计方法,就不在这边做出详细的罗列了。我们想要设计好界面,该做的就是学会这些基础元素、控件的定义数值区间和方法,从基础开始逐级向上探索。而当我们觉得设计的界面不合理的时候,也可以非常轻松的定位出是哪一个部分出了问题,然后寻找解决的方案,或者是制定对应的提升计划。

 

第4部分,关于UI配色

       配色的学习是一个困扰所有新人设计师的问题,因为配色具有非常玄学的属性,一样的颜色,给不同的人看,或处于不同的场景、时间、天气下,都会产生不一样的效果,所以无论哪种传统的色彩学习方式,都是非常复杂且耗费时间和精力的。

       配色过程不能凭感觉,一定要有明确的目标和方法。而 APP 配色的目标,就是为每套界面找出合适的主色、中性色和辅助色。主色就是每套应用的核心色彩,用来呈现品牌的调性和识别性,比如美团的黄色、饿了么的蓝色、豆瓣的绿色。主色对于一款应用的识别来说是至关重要的,也方便这款应用给用户留下深刻印象,而辅助色则是除主色外,应用到界面元素中的不同颜色,比如在主色是蓝色的饿了么中,会使用红色辅助色来表现价格、评分,会使用黄色辅助色应用在表示会员积分的数字或图标上。而中性色,则是界面中普通背景、文字等元素使用的色彩,比如我们前面讲解对比的这个案例中,文字上使用的颜色不同会产生对比,但这种不同都还是在灰色的范畴里变化,而这种不同的灰度,就是我们所说的中性色,当灰度最高时就是黑色,最低时则是白色。

       确定完主色、辅助色、中性色这三种配色的目标以后,我们再分别展开学习它们各自选配的方法,就可以很快掌握 UI 设计中配色的诀窍。其中,主色我们通常只是用一种颜色,且会使用饱和度和明度较高的颜色,换句话讲,就是比较鲜艳的色彩,而很少会使用平淡、昏暗、模糊的颜色,大家可以自己打开手机 APP 的列表,看看已安装的应用图标是不是都使用了这种鲜艳的配色。

       辅助色的应用则根据具体的使用场景来赋予,就像前面讲的收藏、折扣、价格等元素,我们需要因地制宜,而不是只在有主色的基础上直接硬配辅助色,这其实是多数新手学不好配色的本质原因。

       最后说的中性色,则是在从白到黑选择出不同强弱的灰色,分配到合适的背景和文字元素上去。

       配色的过程是按顺序分别完成的,虽然色值的选择理论上也不容易,但 UI 的选色并不如其它设计类型的配色那么复杂,因为 UI 的色彩是由显示器显示出来的,而这种色彩显示方式有诸多的限制,不仅体现在客观技术上,还包括对人生理的影响上。比如荧光黄、荧光绿等颜色,如果在屏幕中大范围出现,那么任何人都会觉得不适和反感。

       而饱和度、明度较低的颜色,且往往比发着纯白或纯黑光源的背景色还没存在感。所以 UI 设计中,色彩的使用有非常大的局限性和偏向性,这对于学习配色来说是一件非常幸运的事情。因为我们在选择配色的过程中已经有了非常大的限制,所以大大缩小了我们可选颜色的范围,这就让配色更简单。

       对于配色,我在书中具体介绍了主色、辅助色、中性色这三种色彩类型的主流选取方式,那么接下来,你的配色过程就会变得非常的简单,让我们可以很快速的完成页面的配色,并可以通过这样的方法,针对一套页面反复进行配色的尝试和练习,可以快速提升相应的水准和认识,并能从中发现配色的乐趣,而不只是痛苦的煎熬。


结语:

       以上就是关于本书部分内容的详细介绍,接着我们来进行总结,帮助大家巩固知识点。

       第一部分,我们说了 UI 是一种通过视觉元素来帮助人类与程序进行交互的学科。随着互联网的发展和范围扩大,未来对于 UI 界面的需求只会逐步上升。虽然这是一个重要的领域,视觉表现也是这个职业的第一要求,但是 UI 设计在技巧上并不复杂,因为页面只依靠几何图形、文字、图标、图像四个元素组成,UI 设计的过程就是对它们进行正确排版的过程。

       第二部分,则简单介绍了平面四要素,对齐、亲密、对比、重复,它们对于设计出正确界面的重要性。其中,对比是我们最要重视的要素,因为对比需要我们分析页面内容的重要性,不仅提升页面的视觉体验,也帮助我们更深入地思考交互与产品。

       第三部分,就开始进入到正式的 UI 界面设计中去,认识 UI 界面是由基础设计元素、控件、组件依次组合而成。而我们学习 UI 界面设计的方法,就要先掌握它们各自设计的规则和数值范围,由低级到高级,循序渐进。

       第四部分,是针对 UI 配色方法的总结,我们要做的就是为界面分别确定主色、辅助色、中性色三种色彩类型的不同色值。UI 配色和其它设计专业最大的不同点,在于显示器显示彩色光的特性,所以色彩的选用范围狭小很多,而这三种色彩类型都有非常固定的选择区间和方法,在书中会有更具体的图文演示,帮助大家更轻松地学习UI有关的配色知识。

       当然,本书包含的内容并不止上面所说的这四个方面而已,还有包括分辨率的认识、字体设置方法、图标设计规范、APP项目设计方法等内容,可以极大的丰富大家对 UI 基础知识的积累。想要进一步了解的同学,可以去了解下。

       最后,如果想要进入到这个行业中,那么可以关注我在虎课网开设的 “零基础UI实战班(可点击报名)”(更多内容,点击进入“酸梅干超人的主页)。这门课程是专门针对零基础和基础薄弱的设计新人设立的,课程中包含了系统的 UI 初级知识体系,通过大量的案例和经验分享,带领大家高效的学习 UI 相关的技巧和知识点,成功实现转行和职业提升。


虎课商城有售纸质版书籍
写给大家看的UI设计书
5虎课币+53.00元79.00
去购买
限时包邮
写给大家看的UI设计书
    120本精品书籍讲解

    虎课读书,遇见更优秀的自己

    • 为什么要读书?

      读书,可以在不经意间治愈困惑;

      读书,可以不被他人的想法绑架;

      读书,可以拥有更多选择的权利;

      读书,可以遇见更加优秀的自己。

    • 为什么要买虎课读书VIP?

      性价高!99元一年,每天只需0.27元!

      品质佳!音频、文稿、思维导图,带你思考不停

      范围广!设计艺术、职场进阶、经管营销等

    • 为什么买虎课读书VIP?

      任何建议或者想法都可以通过客服反馈给我们,或者搜索微信服务号:虎课读书,关注后点击【联系我们】。我们期待您宝贵的建议~

    我要成为VIP

    00:00
    00:00历史记录
    收听历史清空列表
      最底部了,木有了,回家休息吧!
      倍数

      3.0x

      2.0x

      1.5x

      1.25x

      1.0x

      0.75x

      好的知识 你值得拥有

      成为VIP 立享每年120本精品书籍讲解

      成为虎课读书VIP

      好的知识 你值得拥有

      试听已结束,成为VIP立即解锁完整版书籍收听

      解锁完整书籍

      好的知识 值得分享

      分享书籍 微信扫一扫二维码

      特惠
      充值
      7折购
      今日还在继续学习的你,太棒了!
      7
      折扣券可用于
      年费无限VIP
      立 即
      使 用
      此活动优惠不可与其他活动叠加使用
      有效期:000000
      手机版
      虎课移动APP
      支持视频下载,随时随地学习
      桌面客户端 >
      邀新有礼
      建议意见
      官方客服

      官方客服

      您可以与在线客服进行沟通或者拨打客服热线获得帮助

      客服热线:400-862-9191工作日:9:30-18:30

      在线咨询:联系客服工作日:9:00-22:00

      节假日:9:00-18:00

      虎课积分

      恭喜你,领取成功

      开课时间:

      新人免费领取免费¥99

      扫码开通训练营权限

      打开微信“扫一扫”功能
      扫码上方二维码

      免费学习100000+个教程!
      配套素材、源文件一键下载!
      昨日学员已学习了106,490
      并提交了2,757份作业!
      登录后立即学习!
      loading
      微信扫码关注即可登录
      您需要同意协议才可以进行登录
      已连续签到0
      第一天
      5个虎课币
      第二天
      10个虎课币
      第三天
      15个虎课币
      第四天
      20个虎课币
      第五天
      40个虎课币
      第六天
      20个虎课币
      第七天
      20个虎课币
      立即签到
      已签到
      每周一重置签到奖励
      已连续签到0
      本周斩获110个虎课币,下周也要来哦
      我知道了
      已连续签到0
      哎呀,签到失败了!
      再次签到
      哎呀,系统出现错误,请稍后重试!
      恭喜!签到成功,获得 10 个虎课币
      上上签 ·21August.2018
      尽管眼下十分艰难,可日后这段经历说不定就会开花结果
      — 唐代文学家 韩愈
      训练营坚持完成打卡任务 报名费全额返更多>>
      直播公开课学员好评率95%以上更多>>
      登录虎课网,每天免费学课程全站 100000+ 视频会员教程 | 每日可免费学 1