随着互联网的快速发展,社会对UI设计人才的需求越来越多。越来越多的人从事UI设计,或者打算从事UI设计。在这一过程中,不管是参加培训还是自学,相信每个UI设计师所应具备相应的技能和知识能力。设计夹经常收到一些从事或者打算从事UI设计的小伙伴的问题,今天就UI设计师怎么自学这个问题,小编收集整理了各种自学资源资源,希望对大家有所帮助。
首先,我们来明确一下,什么是UI?
所谓的UI是用户界面(User interface)简称 ,泛指用户的操作界面。用户界面是一个比较广泛的概念,指人和机器互动过程中的界面样式,美观程度。以手机为例,手机上的界面都属于用户界面,而设计这套界面视觉的人称呼为UI设计师。
我们再来了解一下UI设计师的工作流程。
1、PM提出产品设计需求;
2、根据原型图,找素材,找感觉,构图!
3、进行设计,输出高保真的设计图!
4、设计输出,切图+标注,交付程序员!
了解完基本的概念和流程,我们正式进入主题,以下部分将如何从技能学习,到相关知识获取,从设计资源获取到寻找创意灵感等八个方面内容全面地给你介绍一些设计资源,让你在UI自学的道路上更便捷。
一、设计软件
第一部分我们介绍下UI设计师常用的软件,包括PS、AI、Sketch、Ps Play、马克鳗、C4D R17等。
1.Photoshop——Adobe最为出名的图像处理软件之一
2.Adobe Illustrator CC——
Adobe矢量绘图的软件
3.Sketch 3.7.2——全新矢量绘图软件
4.Ps Play 1.5 ——通过Wi-Fi,实时在终端设备上预览电脑上的设计稿
5.马克鳗——高效的设计稿标注、测量工具
6.C4D R17
—— 3D绘图软件,有着强大的渲染插件
二、设计字体
1.iOS默认字体苹方
2.Android默认字体思源简体
3.Android默认字体思源繁体
4.110款UI设计师必备中文字体
5.精选300款字体
三、设计指南和规范整理集合
UI设计过程中,对各平台的规范必须了解,这是设计的依据,以下收集的是个平台的设计规范,该集合包括不限于以下这些方面内容:
具体链接:http://rrd.me/bpdQG
(一)、平台系统设计指南:
iOS 10人机界面指南(中文)
iOS 10人机界面设计指南 (一)
iOS 10人机界面设计指南 (二)
iOS 10人机界面设计指南 (三)
iOS 10人机界面设计指南 (四)
l iOS 10人机界面设计指南(英文原版)
IOS 9人机界面指南(中文)
iOS 9人机界面指南(一):UI设计基础(ISUX译)
iOS 9人机界面指南(二):设计策略(ISUX译)
iOS 9人机界面指南(三):iOS 技术 (上)(ISUX译)
iOS 9人机界面指南(三):iOS 技术 (下)(ISUX译)
iOS 9人机界面指南(四):UI元素(ISUX译)
iOS 9人机界面指南(五):图标与图形设计(ISUX译)
iOS和Android的app界面设计规范
APPLE WATCH人机界面指南
Apple Watch人机界面设计指南(中文)
Apple Watch人机界面设计指南(英文原版)
APPLE TV 人机界面指南
Apple TV 人机界面指南(中文)
Apple TV 人机界面指南(英文原版)
GOOGLE设计指南
Google视觉资产指南-上(中文)
Google视觉资产指南-下(中文)
Google Material Design 中文版
Goolgle Material Design(英文原版)
中文版 GitHub 仓库
Material Design人机界面指南深度解析(中文)
Android Watch人机界面指南(中文)
iOS和Android的app界面设计规范(中文)
(二)、国内各大企业设计规范&观点
阿里巴巴用户体验专家告诉你,如何建立用户体验规范?
天猫视觉设计规范
蚂蚁金服体验技术部ANT Design设计规范
淘宝网设计规范及设计禁忌
京东APP设计视觉规范iOS完整版参考
腾讯应用宝UI设计规范
腾讯网Web页面设计规范 / PDF文档阅读
腾讯CDC关于红绿灯与设计规范
微信移动UI设计规范
六步透视网易设计规范
网易设计规范网
大众点评UED团队的设计流程规范
搜狐设计师:一份超实用的设计规范制定指南
新浪网产品设计指南(含UI规范)
以《新浪微博》为例的安卓设计规范
(三)、设计师常用的设计规范
各平台屏幕尺寸规范
跨平台UI适配方法
H5页面首屏高定位(浏览器版)
最新常用字体规范
其他设计规范/设计风格指南
(四)、国内开放平台应用规范
微博开放平台应用设计规范
腾讯开放平台应用设计规范
百度开发者应用UI设计规范
360应用开放平台体验提升指南
四、国外免费优质设计资源网站
此部分收集了国外优质的资源网站,不仅可以下载到优质的设计资源还能找到设计灵感。
具体链接为:http://rrd.me/bpbRq
Dribbble 【优质免费资源】
Freebbble 【优质免费设计资源】
Graphic Burger 【设计资源】
Pixel Buddha 【职业设计资源】
Material Design UI Kit 【Google Material Design用户界面设计工具】
Premium Pixels 【创意工具及设计资源】
Fribbble 【Gilbert Pellegrom策展的PSD资源】
Freebiesbug 【PSD资源】
365 Psd 【PSD资源】
Dbf 【Dribbble Behance最佳免费设计资源】
Marvel 【手工制作的优质资源】
UI Space 【著名设计师的免费资源】
Free Section of Pixeden 【免费设计资源】
Free Section of Creative Market 【限时免费优质设计资源】
Teehan+Lax 【DiOS 8 GUI PSD (iPhone 6)】
Teehan+Lax 【iPad GUI PSD】
Freepik 【免费图像资源】
Tech&All 【设计资源与科技新闻】
Tethr 【最好看的IOS设计工具包】
五、视频教程
软件技能是UI设计的必要技能,下面推荐的一些教学视频可以作为软件入门的学习材料。以下教程都可以直接下载。
李涛PS初级班教程
7天精通UI交互设计
李凤辉UI设计教程
AI CS5初级视频教程
六、国内设计博客
自学UI设计开始的时候可以多逛逛国内一些优秀的设计博客,,以下推荐的这些就是国内比较好的互联网设计团队的所创建的一些博客。
网秦UEC:http://uec.nq.com
百度MUX:http://mux.baidu.com
畅游CDC:http://vc.changyou.com
腾讯MXD:http://mxd.tencent.com
腾讯CDC:http://cdc.tencent.com
腾讯ISUX:http://isux.tencent.com
腾讯UED:http://ued.qq.com
携程UED:http://ued.ctrip.com
百度UED:http://ued.baidu.com
网易UEDC:http://uedc.163.com
七、免费图库
MaterialUp—— 每日 Material Design 设计案例;
Pexels—— 集中了最好的免费图片;
All The Free Stock—— 免费的图片,图标,和视频;
Designers Pics—— 免费提供个人及商业用途图片;
Splashbase—— 搜索和发现免费高清图片及视频;
Startup Stock Photos—— 免费提供个人及商业用途图片;
Jay Mantri—— 可用于任何用途的免费图片(无版权);
Travel Coffee Book—— 分享美好的旅行时刻;
Unsplash—— 免费(定制)高清图片;
Death yo the Stock Photo—— 每个月将免费图片发送给你;
Free Nature Stock——免费个人和商业使用;
StockSnap——免费个人和商业使用;
Realistic Shots——每周更新7张免费图片;
Barn Images——免费个人和商业使用;
PicJumbo——提供各种免费的照片,不需要注册;
Life of Pix——提供免费高画质相片,采用CC0 无著作权授权;
Foter——提供3亿张免费高清图片;
八、配色方案
图片取色配色:https://www.design-seeds.com/blog/
色彩设计方法:http://rrd.me/bpbCC
色彩搭配思维:http://rrd.me/bpbFK
色彩设计层次:http://rrd.me/bpbGa
扁平化配色:http://color.koya.io/
在线渐变色:http://uigradients.com
MaterialDesign配色方案:http://rrd.me/bpbJf
以上就是小编所整理的一些优质资源,希望对大家有所帮助。