UI设计启示录:创意+对比+实战(培训教材版)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-08-12 07:17:32

点击下载

作者:王健

出版社:人民邮电出版社有限公司

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

UI设计启示录:创意+对比+实战(培训教材版)

UI设计启示录:创意+对比+实战(培训教材版)试读:

前言

Foreword

亲爱的读者,你们好!我们是BIGD团队,一个很小的团队,只有4个人;但是在设计行业里的名气,相比规模要大很多。我们的团队曾在很多UI设计比赛中获奖,很多志同道合的小伙伴希望同我们一起交流。因此,我们于2015年2月开设了“BIGD禁闲聊设计交流群”,群人数上限为2000人,结果从第1个群开设到了第8个群,也结识了非常多的小伙伴。

在交流群中,我们总是看到类似下面的对话场景。“我想设计一个和iPhone 8尺寸一样的界面,分辨率设置成300像素/英寸(1英寸=2.45厘米),这有什么错吗?300 像素/英寸的分辨率才是高清标准啊!”“我做了一套图标,然后给开发人员,后来被总监批评惨了,说我给的图标虚,尺寸也不对,我自己弄了半天也不知道为什么会虚,难道尺寸大小有什么规范吗?”“图层样式不就是加个浮雕、阴影吗?那些默认效果也都不好看,这个有什么值得学的。自己设置数值?怎么设置啊?”“做界面最难的就是从网上找素材,一套统一风格的图标难找,一个符合自己需求的插画难找,找一个符合自己产品定位的启动图标就更是难上加难了!好不容易找到了,又没有使用许可了!怎么办啊?”“PS不就是个修图软件吗,还能做界面?怎么做?怎么生成?怎么切图?”

……

类似上面的问题,几乎是每个初学者都会遇到的问题。为此,我们开设了在线UI直播课程,来帮助初学者解决基础问题。收费4880元,学时3个月。当时,我们团队4个人还在想,只要有10个人报名就开课,如果有20个人就更好了,所以新开了一个QQ群,名字叫作“BIGD第一期在线直播”。这个群没有做任何的宣传工作,号码也没有留在任何地方。万万没想到,有一天一个叫智允的小伙子申请加入群,我们很意外,通过了申请并问他怎么知道这个号码的,他说是搜索BIGD群看到的。还没有宣传,就有一个人加入,我们心里也踏实了很多。更没有想到的是,陆陆续续申请的人更多了。

2015 年7月,BIGD开设了第一期线上直播培训,在没有任何宣传的情况下,第一期80人名额就已经满了;2015年8月初,我们开始了第二期的预约报名,意想不到的是,短短90秒的时间,80个名额爆满,这让我们感到了莫大的荣幸,同样也体会到了巨大的责任。如何能够将知识更好地传授给他人,如何保证线上授课有趣、不枯燥,如何保证大家的自律性,如何让学习的内容和工作相结合,这些都是我们需要去解决的问题。

久而久之,我们发现了新的问题。第一是财务方面的问题,并不是每个人都能拿出4000多元的学费;第二是我们小班授课名额限制,每次80人,满了就不再招了,因为批改作业的质量必须要保证;第三是内容不能长期留存,好多回答过的问题,新人看不到,还要问第二次。于是,我们在网上做了很多售价几十块钱到几百块钱的视频课程,针对不同软件,如 Iustrator、Sketch、After Effects、Affinity、Adobe XD、C4D等,最大的特点在于课程内容不断更新且针对软件版本不断更新。我们还成立了自己的课程网站“1x1PX – 小世界,大梦想”,在上面可以学习我们研发的视频教程。后来,很多用户和高校建议我们把一些重要的内容提炼出来形成一本书,因为书本更容易携带和收藏,这一点和在线课程是完全不同的。于是,我们开始策划一套与市面上不同的UI系列图书,包含软件基础、设计规范、交互设计、用户体验等BIGD UI四部曲。这四部曲的内容好比设计思维中的“点、线、面、体”,学会了软件基础的点,才能连成设计规范的线,进一步规范的线形成了交互设计的面,而最终交互设计的面变成了用户体验的体,完成这一系列的学习才有可能成为真正懂得UI设计的互联网设计师。而本书就是针对“软件基础”的第一部。虽然这套书会耗费我们巨大的精力,但是我们相信这是值得的。

对于书的内容,我们思考了很久,目标是要让读者读完能够感受到这是一本有营养的书,所学内容能够被消化和吸收。因此,我们设置了“错误案例”和“优秀案例”,让初学UI的读者通过对比找到自己的设计存在的问题;其次,加入了很多的理论知识与工作实践,让大家知道设计的成果该用在哪,该怎么去做;最后,加入了一些针对学生作品的点评,让大家知道学会了本章内容以后,该如何发散思维。设计这些环节的目的就是希望读者在阅读后不是仅仅学会软件操作,而是学会 “设计”。

UI设计的知识更新速度很快,需要时刻紧跟行业发展。比如,2015年我们讲iPhone 5设计尺寸规范视觉展现方式,到了2016年就要针对iPhone 6讲,2017年开始针对iPhone 7 Plus讲,2018年要讲用于iPhone X的设计规范。再比如,2015年流行的设计风格还是轻、重拟物,2016年流行渐变与散光,2017年流行MBE卡通断线,2018年又流行肌理插画。而软件的更新也相当频繁。所以说,一套课程想讲几年是不可能的,课件通常是3个月小更新,6个月大更新,这样才能保证大家所学的知识与时俱进,而这也是我们做分享需要承担的责任。

BIGD还在不断地学习和成长中,我们希望读者能够花更少的精力学到更有用的知识,希望读者通过学习本书能够喜欢上设计、爱上设计,同时也希望未来的产品界面设计中有各位读者的参与。如果读者的成功之路上有我们团队的陪伴,有这本书的帮助,那就是我们最大的荣耀。

最后,感谢每一份关注和支持!BIGD团队2020年3月资源与支持

本书由数艺社出品,“数艺社”社区(www.shuyishe.com)为您提供后续服务。

配套资源

书中案例的源文件

PPT课件

在线教学视频

资源获取请扫码“数艺社”社区平台,为艺术设计从业者提供专业的教育产品。

与我们联系

我们的联系邮箱是 szys@ptpress.com.cn。如果您对本书有任何疑问或建议,请您发邮件给我们,并请在邮件标题中注明本书书名及ISBN,以便我们更高效地做出反馈。

如果您有兴趣出版图书、录制教学课程,或者参与技术审校等工作,可以发邮件给我们;有意出版图书的作者也可以到“数艺社”社区平台在线投稿(直接访问 www.shuyishe.com 即可)。如果学校、培训机构或企业想批量购买本书或数艺社出版的其他图书,也可以发邮件联系我们。

如果您在网上发现针对数艺社出品图书的各种形式的盗版行为,包括对图书全部或部分内容的非授权传播,请您将怀疑有侵权行为的链接通过邮件发给我们。您的这一举动是对作者权益的保护,也是我们持续为您提供有价值的内容的动力之源。

关于数艺社

人民邮电出版社有限公司旗下品牌“数艺社”,专注于专业艺术设计类图书出版,为艺术设计从业者提供专业的图书、U书、课程等教育产品。出版领域涉及平面、三维、影视、摄影与后期等数字艺术门类,字体设计、品牌设计、色彩设计等设计理论与应用门类,UI设计、电商设计、新媒体设计、游戏设计、交互设计、原型设计等互联网设计门类,环艺设计手绘、插画设计手绘、工业设计手绘等设计手绘门类。更多服务请访问“数艺社”社区平台www.shuyishe.com。我们将提供及时、准确、专业的学习服务。第1章 UI设计基本概念

1.1 UI设计分类

1.2 UI设计理论常识

1.3 UI设计注意事项

1.4 UI设计中的Photoshop设置技巧1.1 UI设计分类

UI设计的种类很多,其中有几类是我们日常生活中最常见的和作为设计师最应该了解的。1.1.1 GUI

图形用户界面(Graphical User Interface,缩写为 GUI)又称图形用户接口,是指采用图形方式显示的计算机用户操作界面。手机移动端App产品PC端产品游戏操作界面智能家电图标设计车载系统数码产品软件产品1.1.2  WUI

WUI是Web User Interface的缩写,即网页设计。移动端网页PC端网页H5活动页面1.1.3  IXD

Interaction Design即交互设计,缩写为IXD。交互设计关注的是人和机器的相互“交流行为”,机器包含软件设备,同时也包含硬件设备。交互行为是在两个或者多个个体之间进行相互配合,并且达到某种目的,而交互设计则是为了让整体过程更顺畅、更完善。信息架构交互原型图页面布局1.1.4 UE/UX 

User Experience即用户体验,缩写为UE/UX,是用户在使用产品的过程中建立起来的一种纯主观感受。用户调研用户心理分析产品体验优化思考并创造让用户喜欢的产品用户需求研究1.2 UI设计理论常识

熟悉和了解了UI设计的分类以后,相信大家对UI已经有了一定的认识。UI全称为User Interface,意思是用户界面。它不仅仅是图标、移动端界面,还包括软件界面、硬件界面、特定的机器、设备和复杂工具等。

要更深刻地理解UI这个词的含义,就要去深入了解什么是“人机界面”。人机界面一般可以分为两个层面,物理层面和精神层面。其中,物理层面包括视觉、触觉和听觉的内容,精神层面则包括心理和情感的内容。

UI设计和其他设计不同,不是会用软件工具绘制几个图像,就掌握UI设计了。它需要设计师具备大量的学科知识,包括认知心理学、设计学、语言学和统计学等,这些知识在界面设计中扮演着重要的角色。

本书将重点讲解如何提升视觉方面的能力,因为这是UI设计师应具备的重要能力之一。其次,在讲解视觉执行及软件操作的同时,还会介绍很多关于交互和心理学方面的知识,让大家通过对本书的学习,从一名“美工”变成可以独当一面的“UI设计师”。1.3 UI设计注意事项

UI设计中需要注意7个事项,下面分别进行介绍。1.3.1  清晰

清晰不仅仅是说作品的设计元素要棱角清晰分明,还包括布局、结构、色彩,确保用户看到设计时能够一目了然,明确设计师所要表达的,找到自己想要的。1.3.2  简洁

减少不必要的设计。UI设计和其他设计最大的不同是,能简化多少就简化多少,能做到多简洁就做到多简洁。因为UI设计是人机交互,确保人与机器的交互过程更快速、更方便,才是最重要的事情。1.3.3  易用

一个好的UI设计应能让用户方便使用,简单使用,甚至达到“无脑使用”的程度。这里的“无脑使用”并不是贬义词,是指好的设计应该是让用户不需要思考、不需要猜测、不需要查阅大量的阅读说明就能操作的设计。1.3.4  适应

优秀的设计应该能适应各种环境、各种设备,甚至在不同分辨率下的表现都足够良好。目前虽然有响应式(响应式设计是指设计的网页在手机、平板设备、大显示器上都可以完整显示,并且自动适应不同的尺寸分辨率)技术的支撑,但是设计师在设计时也应将“适应”作为考虑重点,以确保后期灵活布局(灵活布局相当于每个界面和模块均可以进行自定义的移动、拖曳和组合)时的呈现效果。1.3.5  统一

统一并不单指风格的统一,它还包括色彩的统一、线条的统一、操作方式的统一,甚至圆角度数的统一。可以说,一套好的设计是建立在有规则、有秩序的前提下的,而不是随意或者随心所欲进行的。1.3.6  视觉

创作美的作品,是设计师的目标和愿望,但是要注意一点,美并不是纯艺术。这里的美所表达的是优化设计和追求完美的设计,而纯艺术从某种角度说则是无所顾忌的、只符合少数人审美的艺术形式。产品和艺术之间有一定的共通点,却也有着不同之处。1.3.7  识别

所谓识别,就是要准确地符合用户习惯。使用户看到这样的造型和色彩不会产生歧义,并且设计元素的语义表达完整、准确,能够辅助主体且便于用户进行认知,确保用户不会产生过于复杂的联想。1.4 UI设计中的Photoshop设置技巧

在利用Photoshop做UI设计之前,我们需要针对软件工具进行设置,在“编辑>首选项”菜单命令中设置参数。

在弹出的“首选项”对话框中选择“工具”选项。

选择图中所显示选项,它们的功能在于使整数矢量图形元素不会虚化或者无法对齐像素块,避免出现虚边或模糊的情况。

新版本的Photoshop软件中,快速导出是一个非常好用的工具。设置为PNG格式会让快速导出功能更便捷。

将标尺和文字单位改成像素,这样的设置更加符合UI设计的需求。

启用远程链接工具,并且设置一个服务器名称和密码,可以配合手机应用Photoshop Play等工具,实现使用手机观看计算机上的设计效果,这也是做App界面的必备条件。第2章 复古像素图标设计

2.1 像素图标在手游及网页UI设计中的应用场景

2.2 像素图标设计注意事项

2.3 像素设计中不出现虚边的原理及技法

2.4 像素图标操作实例

2.5 拓展练习2.1  像素图标在手游及网页UI设计中的应用场景

早期手机上应用的图标就是像素图标,因为十几年前的屏幕显示分辨率有限,显示精度并没有现在的智能手机这么高。随着科技的发展,图标效果越来越出色,精度也越来越高,像素图标开始淡出时代。但是,从2014年开始,一些热门的手机游戏开始走复古像素风,并且引领了风潮。这说明“没有过时的设计,只有使用不当的设计”。《FLappy bird》是颇具代表性的一款像素游戏,它利用非常简单的像素元素,打造出了最纯粹的娱乐方式。随后,像素游戏大量出现,我们经常会在手机应用商店中看到像素风格游戏。

同时,横幅、广告、订阅号、海报、艺术插画都大批量采用像素设计风。这种设计门槛低,并且上手快,因此是UI设计入门的首选方式。

16 像素是像素设计中单位最小尺寸,虽然在移动端使用非常少(移动端最易点击范围为44像素),但是在网页端仍然有很多地方在使用。而在很多游戏UI界面中,16像素的状态展示同样是必不可少的,其功能趋向于展示信息,而非点击。2.2 像素图标设计注意事项

1 没有层次

2 出现虚边

3 像素设计出现了圆形

4 三角形使用错误

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载