2023年最新版UI设计师知识地图
2023-11-23 18:39:25 5 举报2023年最新版UI设计师知识地图
作者其他创作
大纲/内容
花瓣网
元素大小与间距
UI设计师
图标风格
展示状态
新鲜 清洁 健康
卡片
UI的原意是[用户界面]，是由英文User Interface翻译而来的，概括成一句话就是——连接人和工具的界面。
单色搭配
四个颜色相连可以得到一个矩形
加互补色
同时对比错觉
似动现象
格式塔原理是人类视觉系统的原理，人眼对视觉元素的感知。格式塔原理的核心是：整体不同于部分之和。强调的是结构的整体作用和产生知觉的组成部分之间的联系
3
图形用户界面
采用三种均匀分布的颜色，三个颜色相连可以形成一个等边三角形
色彩模式
我们能看见的颜色都可以用Lab表示，Lab分别代表Luminosity亮度（L）、从洋红色到绿色的范围（A）、从黄色到蓝色的范围（B）。
整体与部分
喜庆 性感 热烈
标题
你看是水平线还是不规则的斜线？
iOS APP图标设计尺寸
相似色搭配
对角线构图
对比原则
有彩色就是包含了彩调，即红、白、蓝等几个色族，这些色族便叫
三元色搭配
LOGO
大小
勇气 沉着 理智
需求分析
混合图标
2.5D图标
顿悟
相对颜色的两侧配色
设计的优劣可以判断
1
副标题
信心 希望 快乐
用户体验
元素大小与距离
例：把两个同色的物体分别放在不同对比度的背景色上，会使两个物体呈现不同的颜色
例：左侧的蓝色块看起来比右侧明度要高一些，但是两侧的色块明度是一致的
96*96
用户任务
Behance
W·科勒在一次实验中用绳子把一只香蕉悬挂在笼子的顶棚上。笼子里只有惟一的一只木箱可以使用。6只黑猩猩看到香蕉时跳跃起来竭力想抓住香蕉，但是徒劳。有一只名叫苏尔坦的黑猩猩马上停止了这些白费力气的努力，开始从各个方向打量箱子。忽然它停在箱子前面，抓起它并径直朝目标走去。它把木箱迅速放到地上，爬上箱子，从木箱上面使劲跳起，终于抓住了香蕉。
是否符合用户习惯
例：垂直线段与水平线段等长时，垂直线段看起来比水平线段长
亲密性原则就是将彼此相关的项靠近，归组在一起
设
B
CMYK模式
橙黄色
Dribbble
艾宾浩斯错觉
是否需要颜色辅助
在色轮上使用彼此相邻的色彩
加黑
167px*167px（83.5pt*83.5pt@2x）
绿色
需求沟通
152px*152px（76pt*76pt@2x）
UI的定义
均衡构图
版式设计的四大基本原则
A
512*512
C
对话框
在设计中的应用
72*72
Material APP图标设计尺寸
ipad，iPad mini
图标和旁边元素最小间距
ID/IXD交互设计
色相环
色相
iphone
界面易用性
人们在观察熟悉的视觉形象时，会把不完整的局部形象当作一个整体的形象来感知，这种知觉上的结束称为闭合
简单
设计草图
这张螺旋图是静态还是动态的？
明暗交接处是天然强点对于画面中的人，人脸是天然强点人脸中，人的眼睛是天然强点
LAB模式
ProcessOn是谁
是否产生歧义
交互原型
192*192
FD前端设计
色彩向我们展示了世界的精神和活生生的灵魂
8
实物图标
是指色彩的鲜艳程度，我们视觉能辨认的有色相感的色，都有一定程度的鲜艳度
你数数看有几个黑点？
GUI图形用户界面
120px*120px（60pt*60pt@2x）
形状
Accept
形状闭合
The FWA
媒体
接近
ACTION 1
图标设计尺寸
2
色彩搭配
辅助文字
例：左侧中间的圆看起来比右侧中间的圆小一些，实际上同等大小
48
成果检验
设计规范
蓝绿色
语言命令用户界面
多媒体用户界面
构
图标设计要点
我们的眼睛在观看时，眼和脑并不是在一开始就区分一个个组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。
黄色
Put your modal message content down here .Keep it concise and to-the-point.
加灰
研究界面
简单原理暗合构图法则
例：轮廓线亮度与对比度的组合不同时，色彩的扩散效果看起来不同
ProcessOn是一款免费的思维导图流程图工具和知识分享社区，支持流程图、思维导图、原型图、网络拓扑图、UML等多种图形绘制，表达你的出色与高效。在这里，你不仅可以轻松绘制各类图形，还能享受海量模板资源。
黑色酒瓶是图形，白色叉子是背景；在另一种情况下，黑色酒瓶是背景，白色叉子是图形。
ipad Pro
图标
是指色彩的明暗程度、深浅程度。最亮的是白，最暗是黑。
48*48
设计评审
1024px*1024px（1024pt*1024pt@1x）
拿回产品的主导权
互补色搭配
36
24
蓝色
在HSB模式中，H表示色相，S表示纯度，B表示明度，所对应的媒介是人眼。
概述
菲克错觉
UI设计师的设计范围包括高级网页设计、移动应用界面设计，是中国信息产业中最抢手的人才之一
FL
亲密性原则
UI设计与用户体验的关系范畴
均势
180px*180px（60pt*60pt@3x）
图
本图版权及解释权归北京大麦地信息技术有限公司所有，转载及引用请注明来源，商业合作请添加微信号：ProcessOn。
UI设计
闭合
生机 自然 成功
ACTION 2
互补色彼此相对
向心式构图
小女孩和气球被战略性的放置，以创造一个字母「R」的错觉
程
明度
缩略图
新用户扫码 免费领30天会员
紫色
单个视觉元素之间无限接近，视觉上会形成一个较大的整体。距离近的单个视觉元素会融为一个整体，而单个视觉元素的个性会减弱
RGB模式
App Store
Greyhound divisively hello coldly wonderfully marginally far upon excludind.
奢华 浪漫 创意
重复原则
紫红色
保障设计效果的实现
4
设计规划
多通道用户界面
HSB模式
底色图标
我们的眼睛很容易关注那些外表相似的物体，且不管它们的位置是不是相邻，总把它们联系起来
线性图标
Title goes here
红色
对称平衡可以在视觉上形成稳定性
制图工具：ProcessOn
白天鹅和黑天鹅可以互充图形与背景的关系
虚拟现实用户界面
巧
站酷网
负形闭合
144*144
是否正确表达用途
功能识别
是否符合产品风格
UI用户界面
黄绿色
7
色彩的情感
芒克白错觉
按钮
信息架构
计
强点优先
Unsplash
波根多夫错觉
制图人：ProcessOn模板达人克克
Modal Title
UI设计常用软件
设计实施
橙色
由于我们的拇指有一定的大小，所以图标的大小必须要让拇指有效点击，最小尺寸不能小于48dp*48dp
扫码获取更多优质内容
容器
橙红色
试验研究
蓝紫色
加白
是否提供用户反馈
技
重复原则就是让设计中的视觉要素在画面中重复出现
四元色搭配
项目跟进
对齐是最常见的排版方式，元素围绕轴线环绕排列会使界面更加有序
Secondary text
情感化设计
RGB通过颜色发光原理设定，有红（R）、绿（G）、蓝（B）三种颜色，利用这三种颜色的加法混合，产生各种各样的颜色。
是否能被用户看懂
6
产出规范的设计稿
信息源
图标最小尺寸
相似
2023年 UI设计师知识地图
CMYK是反光原理产生的，通过三原色混色叠加成四色，这四个颜色分别是青色(C)、洋紅色(M)、黃色(Y)、黑色(K)。
5
颜色选择
卡片容器
分裂互补色搭配
水彩错觉
流
色彩
UE/UX用户体验
例：末端加上向外的两条斜线的线段比末端加上向内的的两条斜线的线段看起来长一些，但其实两条线段等长
人与界面
缪勒-莱尔错觉
例：一条直线以某个角度消失于一个实体表面后，随机又出现在该实体的另一侧，看上去会有些”错位“
色彩三要素
X形构图构图
Decline
从用户需求到设计草图
黄金分割线，1234是强点
是否能增加用户的喜爱
构图心理学
为了不误触图标旁边的元素，图标与周围应保持一定的距离，间距为：8dp
垂直构图
纯度
UI的发展历程
Process
面性图标
是否干扰用户思考
通过物理学规律给画面支撑，保持视觉中心的平衡
UI设计中醒目而富有现代气息的色彩，更容易被人们识别、记忆，从而更好地增强用户的体验感
降低纯度的四种方法
稳定性
对齐原则
交互说明
在色轮上使用一个颜色或色调，运用饱和度和色值的知识来创造变化
用户研究
避免页面的元素太过相似，让页面引人入目，形成对比是最主要的方式之一
拟物图标
0 条评论
下一页
