2019最全UI设计知识树
2019-06-03 10:00:08 1 举报AI智能生成
详细讲述 UI 概念，手机屏幕理论，UI设计师的定位，需要学习的软件，基本理论知识，规范法则，设计风格，动效，UI设计学习习惯，资源网站推荐，UI书籍推荐
作者其他创作
大纲/内容
什么是UI？——UI相关概念
UI（User Interface）用户界面：泛指用户操作的界面，包含移动APP、网页、只能穿戴设备等。凡参人类与硬件进行信息交流的领域都存在着用户界面，他是硬件系统和用户之间进行交互和信息交互的媒介。
GUI（Graphical User Interface）图形化用户界面：区别于早期的“命令行界面”（不支持鼠标，只能通过键入指令的方式操作计算机），采用图形方式显示计算机的操作界面，由桌面、视窗、菜单、按钮、图标等组成，用户通过操作图形对象的方式使用计算机。
国内而言，目前一般把屏幕上显示的图形用户界面（GUI）都简称为UI。可能是UI这个概念比较难以被一般人理解，所以现在一般所说的UI设计师，也就是指GUI设计师，也就是图形界面设计师。
UX/UE（User Experience）用户体验：指用户在使用产品的过程中的个人主观感受，包括行为、情感、成就等各个方面。用户体验就是整体感受，受到用户界面、品牌、个人经验的综合影响。
UED（User Experience Design）用户体验设计：虽然童虎体验是个人主观感受，但是共性的体验是可以由良好的设计提升的。用户体验设计就是旨在提升用户使用产品的体验。
IxD（Interaction design）交互设计：“交互”指人和机器互动的过程。交互设计关注心理、文化、人体工程等多方面内容，使用有效的交互方式来让整个过程可用、易用，旨在让产品更容易被理解，用起来更顺手。
关于UI设计的误区：http://www.zcool.com.cn/article/ZNzgyOTY=.html
A《U1》01 - 不要再傻傻分不清楚_UI_教程_牛MO王 - 原创文章 - 站酷 (ZCOOL).pdf
理解手机屏幕相关概念
px（Pixel）像素：像素是屏幕上组成图像的最小单位，它是没有实际的物理尺寸的（即没有固定大小）
分辨率（Resolution）指显示器所能显示的像素数量，例如iPhone7的屏幕分辨率是750*1334，意思就是在这块4.7英寸的屏幕上，水平方向的像素数量是750，纵向的像素数量是1334.分辨率越高，显示效果就越精细和细腻。
dp（device independent pixels）设备独立像素，是安卓系统开发时用的抽象单位，它和设备的屏幕像素密度有关。根据不同的屏幕分辨率，与PX有不同的对应关系。
dp和px的换算公式：dp*ppi/160=px
dp和px的换算公式：dp*ppi/160=px
PPI（Pixels Per Inch）每英寸容纳的像素数量，描述像素密度。
DPI（Dots Per Inch）没英寸上的点的数量，最初用于衡量打印物上每英寸的点数密度。当DPI的概念用在计算机屏幕上时，就应称之为ppi。
栅格系统（Grid Systems）也叫网格系统，是利用垂直于水平的参考线，将画面简化成有规律的格子，再依托这些格子作业参考以构建秩序性版面的一种设计手法。
位图：也成为“点阵图”，图像是由多个“像素”组成的，当放大位图时可以逐渐看到赖以构成整个图像的无数个“方块”（即像素）。
优缺点：位图被缩放会导致图像失真，但是相比矢量图有更加细腻的色彩表现。
优缺点：位图被缩放会导致图像失真，但是相比矢量图有更加细腻的色彩表现。
矢量图：根据几何特性来绘制的图形，组成矢量的基本元素是带有形状、颜色、轮廓、大小和屏幕位置等信息的“对象”。
优缺点：矢量图放大不会失真，但是矢量图无法变现色彩层次丰富的逼真效果
拓展学习：http://www.zcool.com.cn/article/ZNDU2Mzky.html
B移动端APP_最新UI界面设计规范（尺寸大小篇）_UI_教程_Fiona云和月 - 原创文章 - 站酷 (ZCOOL).pdf
UI设计师需要做什么——UI设计师在项目中的位置
UI设计师工作内容
基础工作
负责web端和移动端的产品界面设计（有时会涉及交互设计）界面设计需要掌握的设计技能包括icon设计 插画设计 板式色彩设计 动效设计等
1、对APP界面进行标注
2、切图，按不同倍率导出命名好后交给程序员
参与设计体验，流程的规范和制定，达成统一的产品视觉风格（一般高级设计师制作设计规范）
可能涉及的工作（不同的公司要求不同）
专题活动设计、海报、插画等满足节日和日常推广需求
运营Banner
启动页、引导页
包括但不限于公司项目logo、海报、易拉宝、展板、折页、企业画册等品宣物料、活动KV等设计工作
会HTML+CSS技术及部分前端技术（能实现专题页面网页化）
拓展学习
设计师不是万能的美工，区别不同设计师的职能
C还不知道平面设计、网页设计、UI设计的区别的看这里_平面_教程_Joten - 原创文章 - 站酷 (ZCOOL).pdf
设计师需要学些什么？
D刚转行UI设计师如何系统学习 - 《UI》03_UI_教程_雨成 - 原创文章 - 站酷 (ZCOOL).pdf
产品设计流程及UI设计在整个产品项目设计流程中所处的位置
拓展学习
一个APP产品设计的基本流程
UI设计师在陈品实际流程中的产出
E UI也应该懂得产品工作流程_平面-UI-网页_观点_Vicky_丸 - 原创文章 - 站酷 (ZCOOL).pdf
UI设计师需要学习哪些软件
PS（Adobe Photoshop）简称“PS”，是由Adobe公司开发和发行的主要处理以像素所构成的数字图像的软件
AI（Adobe Illustrator）简称“AI”，是由Adobe公司开发和发行的主要用于处理矢量图形的软件
分享
F_Illustrator vs Photoshop.pdf
AE （Adobe After Effects）简称“AE”，是由Adobe公司推出的一款图形视频处理软件
Sketch 这是一款基于Mac打造的（没有Windows版本）功能强大的矢量图形绘制软件。除了PS，AI设计师中也有很多人使用苹果电脑+Sketch的工作配置。
拓展学习
UI需要掌握的软件
G《U1》04 - UI入门技能选择_UI_教程_牛MO王 - 原创文章 - 站酷 (ZCOOL).pdf
UI设计师需要掌握哪些理论知识
UI设计的基本原则
G优秀设计师必须知道哪些优秀的UI设计原则_UI_教程_tiah - 原创文章 - 站酷 (ZCOOL).pdf
关于排版你必须知道的基础知识
基础排版知识
H基础排版三大招！_平面_教程_michaelpst - 原创文章 - 站酷 (ZCOOL).pdf
文字排版技巧
I网页设计中文字排版的10点技巧_平面-UI-网页_教程_HolyhiLab - 原创文章 - 站酷 (ZCOOL).pdf
色彩基础概念以及搭配
RGB：全称是“RGB 色彩模式”，是指通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相 互之间的叠加来得到各式各样的颜色，能呈现 16777216(256 * 256 * 256)种颜色，这个标 准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。在屏幕上 显示的图像，都是采用 RGB 模式表现的。
CMYK：全称是“CMYK 色彩模式”，是彩色印刷时采用的一种套色模式，利用色料的三原色混色原 理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。 C：Cyan = 青色； M：Magenta = 品红色，又称为‘洋红色’；Y：Yellow = 黄色；K：Key Plate(blacK) = 定 位套版色（黑色）。
色彩的三要素（色相、饱和度、亮度）
色相（H）：指各类色彩的相貌称谓，如红橙黄绿青蓝紫。
饱和度（S）： 也叫纯度，指颜色的纯洁度，完全饱和的颜色是指没有渗入白光时的颜色。
亮度（B）：是色彩的明亮度。为 0 时即为黑色。最大亮度是色彩最鲜明的状态。取值范 围 0～100%。
三大构成
平面构成：运用点、线、面和律动组成结构严谨、富有极强抽象性和形式感的基础设计理 论和方法。
色彩构成：简而言之，就是研究色彩的科学。在人的感性认识之外，色彩有一套完整的科 学系统，色彩构成就是研究通过科学的色彩组合来达到需要的效果或者目的。
立体构成：也叫空间构成，用一定的材料、以视觉为基础，力学为依据，将造型要素，按 照一定的构成原则，组合成美好的形体的构成方法
高级灰
“高级灰”不是特指一个颜色，因为色彩的运用关键在于搭配，没有一个色是独立存在。“高 级灰”柔和，平静，稳重，和谐，统一，不强烈，不刺眼，没有冲突，色彩内含的元素是复 杂的而非单纯的。
“高级灰”在水粉画中特指一个色系或一组色，色彩经过调合，纯度通常偏低，给人的感觉 和谐。运用在家装、服饰中代表一种风格和态度，高级灰的热衷者一般是生活在城市里 的、有专业知识的、理性的、略带矜持的职业群体，中高档服装多用这种色调。
拓展学习
界面设计颜色的选择与搭配
J界面设计必备-色彩三刀流！_UI_教程_micu设计 - 原创文章 - 站酷 (ZCOOL).pdf
UI设计师需要遵从什么规范和法则？
iOS 10中不同模块的尺寸
UI 设计规范（Style Guide） 对设计作品中的字体、字型、色板、品牌标识规范、Icon 等要素进行归纳、展示和说明， 流通于设计团队或设计师之间，用于展示产品的视觉设计风格，便于风格复用。
UI Kit Kit 是套件、组件的意思，很多 UI 设计师会把一个项目使用的 icon、按钮、菜单、面板、 导航条、输入框等整理出来形成一个套件库，以方便观察风格、规范和后期的设计、开 发，使用套件非常的节省时间——可以自由选择套件中的元素，然后进行自己的实验。大 多数 UI 套件的格式是 PSD，非常易于编辑。
拓展学习
关于设计规范的新手教程
K新手教程-六步透视网易设计规范_网页_观点_LOTROCK - 原创文章 - 站酷 (ZCOOL).pdf
UI设计中有哪些设计风格
拟物化（Skeumorphism）
界面：模拟真实物体的材质、质感、细节、光亮等。
交互：模拟现实中的交互方式。
代表作品：iOS7.0 以下时代的大部分 app
举个栗子，这是 iOS 6 的部分图标：
扁平化（Flat）
扁平化核心：去除冗余、厚重和繁杂的装饰效果，提出者是谷歌。
界面：去掉多余的透视、纹理、渐变以及能做出 3D 效果的元素，这样可以让“信息”本身重 新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。
交互：因为扁平化设计的核心是对功能本身的使用（对内容本身的消费），所以去掉了冗 余的界面和交互，使用更直接的设计来完成任务。
代表作：iOS7.0 及以上，微软的 Metro U，Windows8 以上
举个例子，大家熟悉的 win10 系统（扁平化，还有毛玻璃效果）：
轻拟物化
顾名思义，轻微而不重的拟物化，就是介于拟物化和扁平化之间，既没有太多逼真的材质 感，又比纯粹的扁平化多些细节。
举个栗子：
ICON（图标）
图标是具有指代意义或者象征某种特殊含义的图形，在不同场景下图标的表达含义也会有 不同。
线性图标（Linear Icon）
一种图标风格，构成图标的元素是线条
举个栗子，下面的图标在线条基础上增加了一些装饰性的填色（图片来源：网易严选网 站）：
面性图标（Surface Icons）
一种图标风格，构成图标的元素是不同形状的面片。
举个栗子，支付宝这一列图标，就是面性图标。
拓展阅读
如何快速、高效地进行图标设计
M如何快速、高效地进行图标设计.pdf
长阴影
长阴影设计（Long Shadow Design）：是一种阴影设计样式，这些阴影有着特征性的水平 斜向下 45 度角以及较长的“身材”。
举个例子，见下图（图片来源：Pinterest）：
2.5D
一种设计方法和风格，就是在 2D 平面内表现出 3D 的一些特征，常见于插画、图标设计 中。
具体见下图（图片来源：Dribbble）：
MBE 风格
.MBE 风格 MBE 风格的原创作者是法国设计师 MBE 于 2015 年年底在 dribbble 网站上发布，红遍国 内国外网站，世界各地的设计师根据风格的特点做出了很多优秀的作品，这是设计师 MBE 的主页：https://dribbble.com/Madebyelvis
举个例子：
卡片
随着 Material Design 的流行，卡片式 UI 已经成为现代 web 设计的一部分。卡片，就是如 下图所用的信息展示方式，每一个信息单元被盛放在一张张卡片里
举个例子：
无框界面
越来越多的网站和应用，尤其是那些注重设计的，都有这样的趋势。曾经用来划分区域的 边框和边线逐渐消失，“卡片”的样子被淡化，但在干净的界面上，通过距离分割，各区域 的差别依旧清晰可辨。
举个例子：
拓展学习
没灵感？这里是最全的15个设计风格总结！
N没灵感？这里是最全的15个设计风格总结！ - 优设-UISDC.pdf
UI设计中动效
动效制作软件
扫盲！UI动效设计原来都是这些软件做的！
O扫盲！UI动效设计原来都是这些软件做的！_UI_教程_折腾先生 - 原创文章 - 站酷 (ZCOOL).pdf
比较全面的动效基础知识
超全面！产品动效设计全方位科普手册
O超全面！产品动效设计全方位科普手册 - 优设-UISDC.pdf
养成良好的UI设计学习习惯
魅族干货！作为UI设计师，平时应该具备怎样的好习惯？
P魅族干货！作为UI设计师，平时应该具备怎样的好习惯？ - 优设-UISDC.pdf
UI设计资源推荐
平台类网站（国内）
UI 中国（界面设计垂直社区、中国人气最高的图形界面交互设计平台）： http://www.ui.cn
站酷（中国人气设计师互动平台，以“让设计更有价值”为理念）：http://www.zcool.com.cn
优设网（中国人气网页设计师交流互动平台，坚持开放、分享、成长的宗旨）： http://www.uisdc.com
由优设网制作的设计师网址导航（罗列了很多素材类、灵感类网站，实用~）： http://hao.uisdc.com
盒子 UI（专注于以用户体验为中心的设计作品及相关设计理论知识的分享平台）： http://www.boxui.com
网易 UEDC（网易用户体验设计中心，是网易设计师们分享设计经验知识的博 客站点）
平台类网站（国外）
Dribbble （一个面向创作家、艺术工作者、设计师等创意类作品人群提供作品在线服务的 网站）：http://www.dribbble.com
Behance（著名设计社区，创意设计人士可以展示自己的作品，发现别人分享的创意作 品）：http://www.behance.com
Awwwards（一个专门为设计精美的网站以及富有创意的网站颁奖的网站） https://www.awwwards.com
The FWA（一个优秀网站展示平台，由评审团队每天、每个月、每年评选出“最佳网站”， 在网页设计、媒体创意领域十分权威）https://thefwa.com
Niice（一个设计师专用的视觉搜索引擎，内容质量极好哟~）https://niice.co
灵感收集网站
花瓣网（国内分享、收集素材的综合性网站）：http://www.huaban.com
Pinterest（分享、收集素材的综合性网站，需科学上网）https://www.pinterest.com
icon 类网站
NounProject（简单说就是一个集结全球设计师为所有名词绘制矢量图形的项目） https://thenounproject.com
IconFont-阿里巴巴矢量图标库（如名不解释~）：http://www.iconfont.cn
Icon8（一个丰富的图标下载平台，同时有可支持 PS、AI 等的 APP~）： https://icons8.com
配色网站
Color Scheme Designer 3（一个好用的在线配色器）：http://www.peise.net/tools/web
Color Hunt（收集了海量的完美色彩组合，看完心情莫名开心~）：http://colorhunt.co
Coolors.co（一个超级简单 又好看的配色方案生成器）：https://coolors.co
WebGradients by itmeo（收集了大量的美腻的渐变色搭配，整个网站的交互也是超级棒 ~）：https://webgradients.com
其他网站
HTML5 Tricks（前端已经实现出来的精彩 UI 设计）：http://www.html5tricks.com
HTML5 UP（提供大量的 HTML5 网站模版，响应式的噢~）：https://html5up.net
设计类公众号
网易（UEDCNetEase_UEDC）
庞门正道（Artman_Design）
做设计的面条（TTTink-D）
你丫才美工（Ymeigong）
UI 头条（uicner）
可能性与大设计（mali-design）
非科班设计
回音分享会（echo-share）
菜心设计铺
LOGO 大师（logods）
Goodmor 宁（g13188）
设计咖 UXCoffee（UXCoffee）
零设计（designil）
优秀网页设计（youshege）
优秀设计师的收藏夹
网易考拉海购 UI 负责人-张艺林
前 Lofter 主设计师，现网易考拉海购视觉负责人-丁慧霞
花瓣网个人收集： http://huaban.com/v6jrya2tes
LOFTER 个人作品： http://ding-design.lofter.com
网易视觉设计专家-杨魏
UI 中国作品： http://i.ui.cn/ucenter/105965.html
花瓣网个人收集： http://huaban.com/yangwei519834153
Dribbble 个人收集： https://dribbble.com/DavidYang
往期优秀学员推荐的设计师的 dribbble 主页
https://dribbble.com/ui_star
https://dribbble.com/7hp
https://dribbble.com/wxh609094894
https://dribbble.com/UI8
https://dribbble.com/STUDIOJQ
https://dribbble.com/weiming
https://dribbble.com/Ed_m
优秀学员推荐的设计师的花瓣收藏主页
http://huaban.com/jillboo/
http://huaban.com/kinsey/
http://huaban.com/ht7efgzqm4/
http://huaban.com/yana1125/
http://huaban.com/feng7708809/
UI设计书籍推荐
《心理学与生活》
设计师怎么能不懂心理学呢？！ 《心理学与生活》是一部心理学经典教科书，心理学导论类教材的典范之作，在美国及许 多国家的心理学界都有着很高的知名度。美国 ETS 将《心理学与生活》推荐为 GRE 心 理学专项考试的主要参考书。开创这本书的作者菲利普·津巴多是当今世界首屈一指的心理 学家，曾因其卓越的斯坦福监狱实验而闻名世界，更因撰写《心理学与生活》和主持电视 系列片《探索心理学》而被誉为“当代心理学的声音和面孔”。
《About Face 4 交互设计精髓》
《About Face 4: 交互设计精髓》是一本数字产品和系统的交互设计指南，全面系统地讲 述了交互设计的过程、原理和方法，涉及的产品和系统有个人计算机上的个人和商务软 件、Web 应用、手持设备、信息亭、数字医疗系统、数字工业系统等。运用《About Face 4: 交互设计精髓》的交互设计过程和方法，有助于了解使用者和产品之间的交互行 为，进而更好地设计出更具吸引力和更具市场竞争力的产品。
《七日掌握设计配色基础》
用豆瓣上的一段书评来说： “ 看了好几本色彩书籍，只听到作者说
这种配色表达了什么什么？但是总不说为什么会有 这种效果，然后给你罗列一大堆配色方案。但是这本书不一样，他告诉了你为什么要这样 配色，不这样会有什么缺点，并给你好几个实例，让人一看就懂。 ” 由于出版较早，可能风格上有些陈旧，但是作为参考还是不错的~
《配色设计原理》
《配色设计原理》通过简明易懂的示例作品，逐条讲解了绝对不可背离的配色理论；将具 体的设计案例进行修改前后的对比，分析了如何才能使配色更具效果和表现力；根据希望 达到的不同表现效果和目的，展现了设计师必须要了解的配色技巧；介绍了在理论无法适 用时应对的配色设计方法；讲解了基本的色彩知识和易用的 PhotoShop 技法；刊载了日本 目前最活跃、最权威的设计师的主题性访谈。
《写给大家看的设计书》
本书出自一位设计师之手。复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比这 4 个基本原则。作者以其简洁明快的风格，将设计所必须遵循的 4 个基本原则及其背后的 原理通俗易懂地展现在读者面前。本书包含大量的示例，让你了解怎样才能按照自己的方 式设计出美观且内容丰富的产品。
《设计心理学》
【01 以人为本+02 与复杂共生+03 情感化设计+04 人机交互】 诺曼博士在《设计心理学》里，始终强调以人为本的设计哲学，将认知心理学和行为学等 多学科的方法导入到设计之中。不仅着重于反思设计过程中出现的问题给用户带来的困 扰，更着重于解决问题，用这些基本原则帮助设计师找到真正的问题，及其解决之道。一 方面诺曼博士从多个角度分析，更新了大量的案例提醒设计师关注，并找到人们的真正需 求；另一方面诺曼也试图将大众转变为优秀的观察者，不仅能观察到糟糕的设计，也慢慢 学会欣赏优秀的设计。将优秀的设计原则与优秀的观察能力结合起来是非常强大的工具。
《为什么设计》
我们一直非常重视“设”这个词。现在“设计”已成了一个在全世界范围内频繁出现的词汇。这 是为什么呢？这也是该对话集的题目。我们的对话试图回答的正是这个问题。本书分为两 个部分：东京篇和柏林篇。东京篇以我接受采访的形式开始，柏林篇则是以我向阿部雅世 提问开始。我们用这种方式谈论了各自的背景和最近的爱好。话题看似散漫，却有其隐在 的联系。如果您有耐心反复阅读的话，就会感受到我们彼此间的那种交流。
《日本版式设计原理》
《日本版式设计原理》告诉你：
好设计，只差从左页到右页的距离。 这本书从左到右将让你：
布局杂乱无章 → 条理有序
文字难以阅读 → 清晰流畅
颜色没有风格 → 美观洗练
图片缺乏质感 → 吸引眼球
《认知与设计》
用户界面设计准则是人们在长期实践中总结出的规律。本书是交互设计领域的大师 Jeff Johnson 的新作，从简单的认知心理学理论出发，辅以丰富的案例，将设计与心理学有机 结合起来，阐明了一系列用户界面设计准则以及在实践中的运用。第 1 版大获成功，深受 专家和读者好评，第 2 版不仅更新了案例和研究数据，而且还增加了全新的章节讨论人类 如何做决定，以及手眼协调的规律。如果你在从事交互设计的工作，那么这本书必不可 少。
《Don't make me think》
可用性设计是 Web 设计中最重要也是难度最大的一项任务。本书作者根据多年从业的经 验,剖析用户的心理, 在用户使用模式、为扫描进行设计、导航设计、主页布局、 可用性 测试等方面提出了许多独特的观点,并给出了大量 简单、易行的可用性设计的建议。本书 短小精练,语言轻 松诙谐,书中穿插大量色彩丰富的屏幕截图、趣味丛生的 卡通插图以及 包含大量信息的图表,使枯燥的设计原理变 得平易近人。
优设网制作的不错的互联网行业的书库
http://hao.uisdc.com/book/
收藏
收藏
0 条评论
下一页
