本书讲了什么

本书是一本系统全面的UI入门教材，从零开始讲解UI设计的方方面面。是平面设计师、交互设计师、产品经理等相关人士的必读之书。

作者什么来头

火星时代 ，已经成为代表北京市的创意动漫龙头企业，目前火星时代已成为Autodesk公司在中国唯一认可的标准认证教材研发机构，并成为Auto 3ds Max/Maya授权认证教师培训中心。

第1课 UI名词的由来

UI即User Interface，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计主要包括视觉设计、交互设计、用户体验三个部分。

GUI:Graphical User Interface，图形用户界面。

HUI:Handset User Interface，手持设备用户界面。

IA:Information Architecture,信息架构。

UX:User Experience，用户体验。

IxD:Interaction Design,交互设计。

VD:Visual Design，视觉设计。

CD:Content Design，文案设计。

UR:User Research,用户研究。

BI:Business Intelligence，市场分析。

第2课 UI的分类

目前UI的设计范畴主要包括：

网页界面、手持设备界面；

亚板电脑、电脑系统、应用软件与游戏界面；

智能电视界面、可穿戴设备界面；

医疗及各种数码机床等自动化控制界面；

远程会议监控、虚拟现实等界面。

第3课 图形界面发展史

各种操作系统及手机的演化史，略。

第4课 UI行业发展前景

就是各种有前景。

第5课 常用软件介绍

第6课 设计师必备技能

熟练操作绘图软件；

理解需求文档和手绘能力；

文档整理规范。

第7课 UI设计工作流程

自主软件产品开发流程

外包公司开发流程

网站推出流程

公司体制和文化环境对你的影响

以客户需求为导向的公司；

以用户需求为导向的公司/*首选*/；

以开发技术为导向的公司；

以设计视觉为导向的公司；

以运营平台为导向的公司；

创业型公司及小团队/*全面*/；

国企及事业型垄断企业。

设计师的能力和性格对设计的影响

设计师本身的眼界；

设计师的沟通能力；

设计师的技术表现；

设计师的整合能力。

第8课 图标设计

图标分类

分为像素图标、二维剪影标、3D立体图标、写实拟物图标、扁平化图标。

图标设计的基础流程

确定图标功能，先提炼特点.再设计图形语义剪影，然后绘制细节润色

像素图标

像素图标是点阵式图像，像素图标属于位图，像素图标更强调清晰的轮廓和明确的色彩，常用gif格式，它的尺寸精致，信息容量小，常被用在早期的计算机界面，QQ秀，手机信号栏上的图标，BBS的徽章等。

剪影2D图标

剪影2D图标一般都都是成套出现在系统功能类中，所以外观统一和识别性非常重要，网上有大量素材，新手容易犯的错误就是东抠西挖导致风格不统一。统一风格应注意：倒角和圆角一致、线的宽度一致、体积感一致、外轮廓造型一致、倾斜角度上一致、透视角度上一致。

扁平化图标

常用设计技法：为剪影图标加一个底、彩色拼贴图标、折纸风格图标、长投影图标、透明质感图标、伪扁平轻质感图标。

写实图标

写实并不是画的像照片一样，而是让创造的图标比较逼真，但又超越现实，比如方形的西瓜、糖果质感的篮球等。

3D图标

制作3D图标的常用用软件有Cinema

4D、3ds Max、Maya。

手机系统主题图标

主题设计比赛是UI设计师大显身手的游乐场，是个名利双收的好机会。

第9课 界面设计

界面设计之APP

界面设计之Web设计

8个Web设计趋势：单页面、色块设计、聚焦简介、视差滚动、用照片做背景、超大号的图片、响应式设计、强调字体/*自检表略*/

第10课 系统控件设计

一水而过。

第11课 LOGO/Banner设计

LOGO设计

用色要符合企业和品牌的形象；

造型要有寓意；

不同尺寸下具有识别性；

看起来浑然一体。

Banner的元素

对主体物的图片进行抠图处理；

确定Banner的配色；

确定物体的摆放、LOGO构图和色块分割；

设计一级标题文字突出，二级文字小字体补充说明；

搜集小元素做点缀，要和主题呼应；

对背景陪衬进行修饰和优化，使Banner主次分明。

第12课 产品包装设计

软件包装盒、软件启动页、软件新手导引、软件说明书、软件的光盘、海报易拉宝这6类产品的包装设计，如果是针对同一款产品，那么它们的用色和风格应该是统一或是有关联的。

第13课 质感表现精讲

固有色、环境、光照，粗糙度、透明度、密度、自发光、纹理是质感表现的8个属性要素。此外，还有9类材质表现：透明材质、般透明材质、厚实材质、粗糙暗雅材质、光滑坚硬材质、柔软材质、流体材质、粒子形态材质、常见金属材质。在绘制之前先去搜一些相关质感的参考图片，提取它的固有色、环境、光照.、粗糙度、透明度、自发光、纹理等细节，然后描绘出来。

第14 课色彩与构图精讲

色彩

RGB为自发光模式，主要以红绿色和蓝色为原色，它是一种叠加后会变亮的模式，最终混合是白色。例如阳光、显示屏等一切能自发光的物体所遵循的模式。CMYK为反射光模式，它是一种叠加后颜色会变深的模式，例如印刷油墨、绘画颜料，我们眼睛看到的一切不会发光的物体的颜色。原理是物质吸收了发光物体光谱中的一部分颜色，把不吸收的颜色反射到我们的眼睛中。

网页设计的四大块配色：主体色，辅助色，点睛色，背景色。

配色卡

Design-seeds.com/一个网页一股一般由主色调40%~70%、辅色20%~30%、点晴色小于10%、背景色等几部分构成。色卡可以帮助你快速找到网站需要的主色调。使用的时候，可以增加和减少色块比重来调和整个画面，甚至可以用两张相似的色卡来达到增加颜色细节的目的。

构图元素

构图中除了点、线、面外，我们常用的构图形状为方、圆、三角和矩形四种。四种图形随意复制、组合、排列、布尔加减后，可以得到各种复杂的图形和构图。

设计中的构图要素

排列—成组、对齐、节奏感。

强调—重心、对比、夸张、层次、远近。

清晰—高清图片、色 彩分明、文字辨识度。

简洁—留白、空灵、意境、不要过度设计。

风格—整体统一、品质感、精致、新颖。

语气—适度、态度、情感、易理解。

第15课 元素风格精讲

网页UI常用风格:科技风格、现代简约、清新风格、怀旧浪漫、女性专题、趣味卡通等风格。游戏UI常用风格:中国风、魔幻科幻、蒸汽朋克、哥特欧式、体育竞技日韩可爱等风格。通过不同元素、造型、配色、质感、纹理等的组合，可以创造出无穷无尽的设计风格。

第16课 优秀案例赏析（略）

第17课 扁平化UI

扁平化，flat design，指摒弃高光、纹理、材质、阴影等能造成透视感的效果，通过抽象、简化、符号化的设计元素来表现。界面上极简抽象、矩形色块、大字体、光滑、现代感十足，让你去体会这是什么，其交互核心在于功能本身的使用，所以去掉了冗余的界面和交互/*对大部分GUI设计师来说，先学AE且注意微质感风格及可穿戴设备的界面吧*/

第18课 产品需求分析

竞品分析

描述性：和竞品有哪些差距。

定性分析：差距在哪里。

定量分析：差距有多大。

分析的6个方向

视觉设计：整体视觉风格、图标设计（识别、精美）、颜色搭配、字体。

信息架构：导航、分类、标签、搜索、布局。

交互流程：功能入口、操作步骤、流程指引、随行帮助。

交互细节：操作前中后提示、成功提示、出错提示、文案表达、交互效果。

功能设计：主要功能、堆叠功能、附属功能、扩展功能、关联功能。

运营模式：推广渠道、营销模式、运营渠道、盈利模式。

第19课 交互设计入门

第20课 用户体验入门

真的就是入门，略。

第21课 交互动态特效（略）

第22课 Android和iOS平台规范

官网看最新文档就好，略。

第23课 手机应用APP的设计

简述流程，黑了下工程师，一泛而过。

第24课 专题网站的UI设计

创建网页地图。

确定每页线框图。

确定网页配色和风格。

设计效果图。

开发切片。

上线测试。

后期维护。

第25课 什么人闯进UI设计

大多UI设计师不是美术专业，所以没有基础一样可以做UI。要花时间去积累美术基础。行业内所谓不抄袭，只是不完全抄袭，都是找很多作品和素材提炼特征，融合到自己的作品。

第26课 不得不说的秘密

外包报价=时薪*项目时间*3，签合同付30%订金，给初版效果图可以改三次，多一次加10%，定稿后，拿30%制作费。切图后再交30%，上线调整完毕后再交10%。

UI设计师KPI考核模型蛮厉害的，略了。