网页设计

非专业转行学设计怎样更高效?6大方向帮你理清学习路径

2018-07-14  本文已影响146人  AAA学院

亲爱的小伙伴,欢迎你的到来!针对非专业想转行设计的小伙伴,小A帮大家6个方向总结了成长路径,包括:

视觉类,交互类,UI类,UX(UE)类,产品类,前端类

希望可以帮助小伙伴们从自身擅长的领域或喜欢的方向,尽早并尽快步入设计行业

如果你看完之后觉得有用,希望可以分享给你身边的小伙伴哦!

【特别说明】

不管是视觉、前端、UI还是交互、UE、产品,都是一名优秀的设计师需要了解学习的,以下只是根据侧重方向不同将其分为6大方向,特此说明。

一、视觉类

1、什么是视觉设计?

视觉设计是通过对文字,符号,图片的有意设计达到视觉上的和谐交流。

视觉设计师的工作主要是通过色彩布局、创意构思来设计易于识别的、艺术外观更完美、更具有视觉吸引力的图像,并利用一些媒体、元素来形象的表达出其特定的意义。

2、主要学习内容

a.入门阶段

• 三大构成:平面构成、立体构成、色彩构成

• 素描基础:光影变化及透视结构变化规律

• 色彩搭配:色彩的基础概念(色相、明度、纯度等)、色彩情绪、色彩心理、配色技巧

• 版式基础:即学习如何将文字、图片(图形)及色彩等视觉传达信息要素,在预先设定的有限版面内,运用造型要素和形式原则进行有序组织,从而实现艺术与技术的高度统一。

b.进阶阶段

• 字体基础:应用规范及简单的字体设计

• 排版布局:掌握版式形成原理、网格系统理论、网页的基本元素类型等

• 图形设计:练习抽象概括实物的能力,如logo设计、字体设计等

• 企业VI基础(包括logo,宣传海报,名片,三折页及基础印刷知识等)

• 各类风格海报设计

c.中阶阶段

• 文案技巧

• H5设计

• Banner设计

• 店铺/官网等网页界面设计

• 活动/热点等专题页设计

d.高阶阶段

• UI设计知识(包括跨平台设计规范)

• 人机交互知识

• 产品思维

• 用户心理

• 动效设计

3、基础软件

• Photoshop:位图处理软件,设计师必备软件。

• Illustrator:矢量图编辑软件,Logo, Icon, 插画的最爱。

• InDesign: 排版软件,尤其在处理段落字体排版上无出其右。

• After Effects/C4D:动效特效软件

4、阶段发展方向

UI设计,平面设计(又分为传统平面印刷与互联网视觉设计两个方向),品牌设计,电商设计,插画师等

二、交互类

1、什么是交互设计?

交互设计(Interaction Design),是定义、设计人造系统的行为的设计领域。

交互可能存在于人与人之间,也可能存在于人于物之间。

对于交互设计师来说,这个物可以是电脑、手机、智能手表……一切需要你work on的产品。

「你来我往」谓之「交互」;这里的「你来」指的是「输入(input)」,「我往」是「反馈(feedback)或输出(output)」。

如果只有「你来」没有「我往」就不能称之为交互。

你点一下鼠标,电脑屏幕马上告诉你「你的资料下载完成了」

这里「点鼠标」是「你来」,屏幕的提示是电脑给你回馈的「我往」。

这就是最简单的一个交互。

2、主要学习内容

a.入门阶段(适合初入行的小白)

• 设计美学知识

• 交互设计原则

• 平台特性及其设计规范

• 交互设计方案(流程图、原型图、交互规范文档)

b.进阶阶段(适合有3个月以上项目经验者)

• 特定控件设计(标签栏、列表界面、弹窗等)

• 特定界面设计(应用程序首页、个人资料、数据界面等)

• 独立常用功能设计(注册登录、刷新、功能引导等)及其背后的技术知识和产品策略

c.中阶阶段(适合有一个以上完整项目经验者)

• 多项功能设计及对应的设计方法和架构思路

• 方法和已有的设计风格研究总结,并应用

• 竞品和优秀产品分析

• 最新的系统和产品分析

d.高阶阶段

• 产品架构

• 设计趋势研究

• 产品趋势研究

• 互联网及相关行业发展动态

• 项目管理及团队管理

3、主要软件

• PS/AI:图形图像处理软件

• Sketch/Axure/墨刀:交互原型

• AE:动效制作

XMind/MindMannage:思维导图

4、阶段发展方向

交互设计,产品经理,产品运营等

相关专业/行业分析

其实很多交互设计师并不是专业出身,而是来自计算机、医学、生物学、法律、金融、心理学、文学、电影、音乐、电子工程等领域

a.技术工程类(计算机、电子工程、机械工程等)

这些背景可以带来缜密的逻辑思维和技术能力,恰是交互设计最关键也最难以掌握的关键部分之一。

b.创意类(音乐、电影、文学等)

这些创意类专业的教育方式、思考方式、思考维度,很多都是与交互设计相通的。

c.其他(心理学、医学、金融等)

交互设计师设计的不是设计本身,而是产品,所以来自其他行业背景的交互设计师有先天优势。

如心理学、数据分析等背景的人在用户研究上就很有优势,还有其行业内的优势

三、UI类

1、什么是UI设计?

UI,即User Interface(用户界面),是对软件的人机交互、操作逻辑、界面美观的整体设计。

UI是用户界面,实际上还包括用户与界面之间的交互关系,所以这样可分为3个方向,他们分别是:用户研究、交互设计、界面设计。

好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。

>>>具体请参阅《什么是UI设计?这里有关于UI的详细介绍》

2、主要学习内容

a.入门阶段

• 设计理论:三大构成、基础美术知识(如素描)

• 色彩基础:色彩理论和搭配原则、色彩组成形式等

• 设计素养:UI发展史,中外设计发展等设计常识

b.进阶阶段

平面设计

• 字体设计

• 版式

• 色彩搭配

• 海报设计

• 商业项目,如企业VI(logo、名片、折页等)

网页与前端

• 网页基础规范

• Banner设计

• 专题页设计:节日热点、促销活动等

• 产品页设计:电商产品、官网产品页等

• 前端实现基础:html,CSS、jQuery、H5推广等

• 商业项目:企业店铺、行业网站、个人网站等

c.中阶阶段

• 图标设计与制作(多类风格)

• 跨平台规范:IOS/Android/iPad/Apple Watch等

• 完整APP界面:首页,登录注册,引导页,加载页,产品详情,设置等

• 交互动效

• 商业项目:电商APP,社交APP,游戏APP,数据展示类APP等

d.高阶阶段

产品

• 产品策划

• 调研与需求文档

• 原型与视觉设计

• 功能设计

• 交互设计

• 发布与运营

• 数据分析

• 项目管理

• 团队管理

特效

• AE基础动效实现

• 基础动画:进度条,等待动态等

• UI类静态3D图

3、主要软件

• PS:图形图像处理软件

• AI/Coreldraw:矢量图软件

• InDesign:排版工具

• AE/C4D:动效特效软件

• Sketch/Axure/墨刀:交互原型

• XMind/MindMannage:思维导图

• Cutterman/Pxcook:APP切图与标注工具

4、阶段发展方向

UI设计,交互设计,UX设计,产品经理,运营等

四、UX(UE)类

1、什么是UX设计?

即User Experience,也简称为UE,用户体验。UX设计指以用户体验为中心的设计,偏向于研究用户与系统之间的交互过程,是对产品和服务的综合体验,可以包括UI。

UED(User Experience Design),用户体验设计,是以用户为中心的一种设计手段,以用户需求为目标而进行的设计。设计过程注重以用户为中心,用户体验的概念从开发的最早期就开始进入整个流程,并贯穿始终。

UED团队包括:

交互设计师(Interaction Designer)、视觉设计师(Vision Designer)、用户体验设计师(User Experience Designer)、用户界面设计师(User Interface Designer)和前端开发工程师(Web Developer)等等。

2、主要学习内容

a.入门阶段

• 了解UX发展历程与趋势

• UX项目流程与基本规范

• 用户认知

b.进阶阶段

• 视觉设计规范:排版、配色、字体等

• 案例临摹

• 产品研发流程

• 调研与竞品分析

• 平台规范:PC端、移动端、其他职能设备端等

• 用户心理研究

c.中阶阶段

• UI原型

• 线框图

• 交互设计与实现

• 前端实现

• 设计提案

• 产品分析与测试

d.高阶阶段

• 项目实践与提升

• 项目与团队管理

……

3、主要软件

• PS:图形图像处理软件

• AI/Coreldraw:矢量图软件

• InDesign:排版工具

• Sketch/Axure/Mockplus:线框和原型设计

• AE/C4D:动效特效软件

• XMind/MindMannage:思维导图

• Cutterman/Pxcook:APP切图与标注工具

……

4、阶段发展方向

UX设计,UI设计,交互设计,产品经理,运营等

五、产品类

1、什么是产品设计?

产品设计,就是外型设计+结构设计+功能设计,是将人的某种目的或需要转换为一个具体的物理或工具的过程。

典型的产品设计过程包含四个阶段:概念开发和产品规划阶段、详细设计阶段、小规模生产阶段、增量生产阶段。

2、主要学习内容

a.入门阶段

• 产品经理职责与工作流程

• 初步养成产品思维:用户认知与定位、数据导向等

• 产品设计基础理论

b.进阶阶段

• 产品定位

• 用户需求分析挖掘

• 数据分析

• 市场调研

• 产品案例分析:web应用及网站,APP产品等的定位及用户需求、数据等

• 平台规范:PC端、移动端及其他平台

c.中阶阶段

• 原型与视觉设计

• 产品架构与功能设计:前端、动效等

• 交互设计

• 用户体验优化

d.高阶阶段

• 竞品分析

• 产品策划与提案

• 功能测试与分析

• 发布与运营

• 项目与团队管理

3、主要软件

• PS:图形图像处理软件

• Sketch/Axure:产品原型

• Visio:流程图制作

• XMind/MindMannage:思维导图

4、阶段发展方向

产品经理,产品运营等

六、前端类

1、什么是前端开发?

前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。

Web前端开发是从网页制作演变而来,早期网站主要内容都是静态,以图片和文字为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。

前端技术包括4个部分:

前端美工、浏览器兼容、CSS、HTML「传统」技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等。

2、主要学习内容

a.入门阶段

• 前端架构流程

• HTML基础:语法规范,常用标签及属性,网页间的链接跳转等

• CSS基础:基本语法,盒模型,常用布局模型等

• JavaScript基础:基本语法,数据类型及转换,函数,数组等

• 静态网页设计

b.进阶阶段

• HTML5

• CSS3

• JavaScrip进阶:框架、语言内部机制、demo编程、Ajax编程

• JQuery

• 网页特效实现

c.中阶阶段

• 服务端编程:基本概念,服务器搭建,XML与JSON

• PHP:基础语法,服务端编程

• AJAX:基本编程接口,异步数据交互,跨域等

• 移动Web开发:响应式布局,Bootstrap框架等

d.高阶阶段

• JavaScript精通:通过构造函数创建对象,原型对象,原型链,作用域链,闭包,沙箱模式等

• 开发常见模式与思想:开闭原则,MVC思想,工厂模式等

• 框架封装:选择器框架,CSS操作封装,属性操作封装,其他DOM操作封装等

• 代码管理:Svn与Git

• 代码构建:Grunt,Gulp等

……

3、主要软件

主要是编程语言和运行环境配置,比如上面提到的CSS、JavaScript等

4、阶段发展方向

UI设计(前端开发方向),前端开发工程师,Android和IOS开发,交互设计等

【学习建议】

前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识

而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。

【学习资源领取】

学习教程+书单推荐/下载+素材网站/下载

公众号对话框回复【简书+你想要的阶段资源】,小A会在12小时内将资源链接发送给你哦

上一篇下一篇

猜你喜欢

热点阅读