网页设计师和平面设计师有什么不同?
首先大家要注意“整体”两个字,网页设计有时会与平面设计重叠, 做好网页设计的人可以再去转行平面设计,但会做平面设计的人很难直接就设计好网页,因为往往一个以网页设计作品为骄傲的设计师,还必须熟悉和 了解网站代码相关知识,今天我们只简单了解一下网页设计的平面设计知识。
一:走向是指网站访客在体验网站时的视觉移动方向。走向涉及到对深度、颜色、层级 、形状和线条的恰当使用。走向具包括视角、间距和面朝方向等。
二:平衡与比例,这一点是指视觉的稳定性与均衡性。比例可以分为两种:对称与不对 称。比例通常用来强调重要元素,进而完善信息的走向。
三:颜色是网页设计的核心,其有助于设计主题和主旨的构建。另外,颜色设计还具有 心理层面的作用,也就是说颜色能够影响网站访客看待网站用户体验的方式。
四:间距这一点非常简单明了。它是指不同元素之间的距离。网站要有优秀的用户体验 就必须具有妥当的间距安排。一般来说,间距的大小应该要保证不同的元素具有足够的呼吸空间,同时又不能太大以免影响阅读,关键就是如何权衡, 也就是我国的中庸思想。
平面设计综合课程
平面设计综合阶段 | ||
---|---|---|
Ps | 1.介绍软 件(应用领域、优势)/软件界面与设置/视图缩放与移动/选择工具/屏幕显示模式/包装效果图/选区自由变换/保存格式/文字(文字海报)/ 形状工具(绘制简单形状)/填充(前景色、背景色) | |
2.色 彩基础知识/色阶/曲线/ 亮度对比度等/色彩平衡/色相饱和度/可选颜色/画布大小调整/建立快速蒙版/LAB颜色模式 | ||
3.软件界面/软件基本设置/导入图片/视图 的基本操作/调色命令/文件导出 | ||
4.光影知识/涂抹、锐化、模糊工具/加深、 减淡工具/消失点,液化滤镜、仿制源/渐变工具、吸管工具/肤色调整/色彩知识(色彩搭配训练) | ||
5.素描三大关系/色彩构成/透视/产品修图 案例 | ||
6.基础抠图工具/基本形状工具/钢笔工具/ 文本工具/字体排版技巧/变形变换 | ||
7.抽出命令/通道抠图/调整边缘抠图/插件 抠图/抠图总结 | ||
8.图层混合模式/合成基础知识/合成案例 | ||
9.滤镜(下)扭曲,渲染/图层样式内阴影 ,斜面与浮雕,颜色,渐变,图案叠加/详情页 | ||
10.自定义形状工具/3D工具/直通车制作 | ||
11.图层样式概念/图层样式分类/图层样式 案例/APP界面 | ||
12.网页 设计基础/动画设计 总结 | ||
Ai | 1.介绍软件/新建文件设置/软件界面认识/ 文字工具/文字大小改变、旋转、复制 | |
2.其他格式:制表符、文字属性复制轮廓/ 简历制作 | ||
3.选择工具、基础绘图学习/颜色填充、渐 变工具、吸管工具/锚点编辑工具 | ||
4.钢笔铅笔工具、路径橡皮擦、美工刀、剪 刀.群组与复合路径、对齐和分布 | ||
5.排列、锁定、隐藏、路径查找器(焊接、 相交、修剪)、剪切蒙版 | ||
6.描边面板/对象/路径/内部填充(网格工 具、实时上色) | ||
7.变形工具/封套扭曲/变换工具 | ||
8.画笔/符号/符号喷枪工具 | ||
9.混合工具(带过,CDR中详说)、透明蒙 版(结合剪切蒙版使用) | ||
10.外观面板、图形样式/描边、外观的使用 /图层面板(多图层整理) | ||
11.图表/位图转矢量图/透明度面板(中叠 加方式的使用) | ||
12.效果菜单(凸出和斜角、绕转、风格化 )软件相互间格式的处理 | ||
Cdr | 1.软件介绍(应用领域、优势、缺点)/软 件界面(调色板) | |
2.基本操作(新建文件、设置文件大小、出 血、保存、导出、再制等) | ||
3.排版需注意的事宜(字号、字体、出血、 文字安全框等) | ||
4.文本格式:文字方向、字符格式、段落格 式、段落文本换行(图文混排)、分栏 | ||
5.基础绘图(矩形、椭圆、多边形、图纸、 螺旋线、完美形状、智能绘图) | ||
6.移动工具、填色(内部、轮廓)/视图工 具(抓手、缩放、显示性能) | ||
7.排列、锁定、造形/图框精确裁剪/群组与 结合、对齐和分布 | ||
8.手绘、艺术笔/贝塞尔、钢笔/折线、三点 曲线、连线、度量工具 | ||
9.形状工具:A.直接编辑基本形状/文字; B.转换成曲线后编辑 | ||
10.涂抹、粗糙、变换工具/裁切、刻刀、橡 皮檫、虚拟段删除/线条填色 | ||
11.均匀、渐变、图样、纹理、PS填充/交互 式填充、网状填充吸管油漆桶 | ||
12.交互调和、轮廓 | ||
13.变形、阴影、透明 | ||
14.立体(立体字设计、扁平投影效果、添加 纹理立体字、渐变立体字) | ||
15.封套 | ||
16.位图处理/转换(跟踪位图)位图遮罩/ 滤镜效果(卷页)/效果菜单 | ||
17.表格处理/插入条码、OLE对象(图表)/ 对象管理器/页面设置、打印 | ||
品牌电商 | 1.学习美术黑白灰三大调设计原则,掌握人 像精修技巧,方便易记,快速出效果。 | |
2.学习电商设计中的阴影处理,熟练掌握护 肤产品的设计风格与特性,使用检查标准提高页面效果。 | ||
3.学习设计中的对比法则,对于画面的把控 能力,得心应手。 | ||
4.学习字体设计,掌握检查和修改自己作品 的方法和技巧。 | ||
5.熟悉天猫京东首页banner广告位的设计风 格与规则。 | ||
6.学习设计轮方法,系统学习设计创意逻辑 ,让创意设计变得简单、快捷、 。 | ||
7.掌握图像创意合成方法,快速出效果。 | ||
8.**独创方法分析电商各类出色作品的标 准,为自行创作提供有效的方法。 | ||
品牌logo | 1.学习logo图形设计的基本原则、设计流程 、思维方法和技巧要点,**剖析多个案例提升logo图形设计实战技能。 | |
2.**中 文、英文和数字阐述logo字体的设计原理,并提供五种捷径帮助学员有效快速掌握设计方法。 | ||
3.熟悉VI设计效果图制作方法,快速出效果 。 | ||
4.熟悉VI手册设计规范,学习各项基础设计 细节并明确了解其作用。 | ||
5.**天琥自创标志鉴赏十六字,检验标志 对错好坏。深入解析有关logo品牌形象上抄袭和借鉴的区别。深入一层从含义、图形、文字、形态和色彩五要素进行创作,塑造出色logo案例。 | ||
品牌物料 | 1.根据多个案例实战学习商业型和创意型海 报设计的法则、规范与流程。 | |
2.掌握单张X展架的特点。包括尺寸大小、 折叠打孔位置设定等设计规范,实战中快速制作出符合要求的宣传单张和展架画面设计。 | ||
3.掌握宣传折页的特点,包括折法、尺寸、 出血等设计规范,实战中快速制作出吸金无数的宣传折页。 | ||
4.**案例学习包装设计鉴赏、包装材料、 包装纸盒结构设计以及包装印刷工艺。 | ||
5.文案思维对于设计具有指导性的意义,学 习广告语,可以给各类型设计作品加分。 | ||
6.**多个案例学习画册的版式类型和基本 原理。**点评作品,让学员快速掌握版式设计的技巧、原则和规范。 | ||
7.天琥独创研发理论,结合实操,提升对设 计的认知。 | ||
8.天琥独创四大诀窍提升品牌设计文化深度 ,借以提升设计作品的价值和价格。 | ||
9.运用品牌设计思维,实战操作整个品牌的 各项设计,运用六尺评判标准,从看想写做说五种能力掌握项目设计的交付标准,让学员真正成为一名独当一面的全能型视觉创意设计师。 | ||
Dw | 1.认识DW界面、工作区,熟练DW基本操作, 学习表格,切片 | |
2.掌握超链接、锚链接、富媒体、框架网页 、浮动框架的使用,建立简单的传统网页站点 | ||
3.html css:学习CSS三种嵌入形式、选择符 、盒模型、浮动等,熟悉页面布局方法 | ||
4.html css:项目列表与导航,常用css样式 、css3样式补充,居中等 | ||
5.掌握和熟悉横版网页的制作技巧和注意事 项,让网站与众不同 | ||
6.熟练掌握竖版网站的制作规范和技巧,不 再做网站的“小白” | ||
7.表单,表单创建与表单样式 | ||
8.下拉列表,dl、dt、dd下拉效果 | ||
9.spry卡式、折叠式、工具提示 | ||
10.学会如何套用和调用已有的JS代码,让 网站妙趣横生,引人夺目 | ||
网页设计 | 1.了解网站与网页的关系,学习标杆管理, 与设计中标杆的应用。 | |
2.了解网站首页的组成部分,系统学习网站 设计的组成。熟练掌握WUI设计的规范。 | ||
3.了解网页的前世今生与设计趋势。分辨各 种不同网站类型的设计风格。重点学习网站设计的内容布局。 | ||
4.了解一个网站诞生的过程。**企业网站 案例对网站设计进行梳理,了解网页设计流程。 | ||
5.学习展示型网站、信息型网站、功能型网 站、品牌网站、活动网站等网站类型的设计规范。 | ||
6.了解整 站设计与整站设计中不同功能的页面。**实际项目案例学习了解电子商务网站。 | ||
7.重点掌握整站设计中的不同页面元素与设 计时该注意的规范重点。 | ||
电商设计 | 1.重点学 习阿里/天猫/淘宝开店流程、装修流程、上架流程。 | |
2.学习钻展广告位的作用及规范。了解排版 原则,信息传达原则,文字排版标杆布局,色彩关系的区分。 | ||
3.学习直通车的作用及规范,重点掌握直通 车广告设计方法与技巧。 | ||
4.学习宝贝主图的作用及规范。重点掌握宝 贝主图的设计方法与详情页的设计流程和技巧。 | ||
5.了解品牌电商的设计思路,**案例学习 不同品牌电商的设计方法与技巧。 | ||
6.学习店铺装修代码与淘宝代码生成平台的 应用。重点掌握代码的修改与热点图。 | ||
7.学习淘宝页面的移动端设计转变形式。重 点学习网站响应式设计。 | ||
8.了解实际工作中网页电商设计师的定位于 发展趋势。指导简历的制作思路与毕业作品的设计。 | ||
Icon | 1.学习Photoshop和Illustrator绘制线性和 块状剪影图标的技法,达到能绘制不同行业图标的能力 | |
2.学习图层样式初级使用,掌握扁平化,长 投影等风格的图标绘制技法 | ||
3.学习图层样式的高级使用,掌握图标颜色 的搭配技巧,达到能绘制不同风格轻拟物图标的能力 | ||
4.学习重拟物图标中的透视角度、光影关系 、材质表现知识,掌握一些常见材质图标的刻画技法 | ||
5.学习手机应用主题设计规范,做一套完整 的手机应用主题,包括系统图标、桌面插件、锁屏界面 | ||
Axure交互 | 1.学习Axure软件基础知识,掌握低保真原 型绘制能力,并学习条件判断语句使用方法 | |
2.深入学习Axure动态面板元件,掌握动态 面板的切换与循环。 | ||
3.学习Axure软件高级知识,了解Axure软件 中变量的使用,并能够做一些高级交互效果 | ||
移动端UI | 1.学习iOS10人机界面指南,深入学习iOS设 计理念,掌握iOS界面尺寸以及字体规范 | |
2.学习APP界面设计配色技巧以及常见类型 导航设计知识,并结合项目开始设计项目界面 | ||
3.学习用户体验理论知识,了解UED部门人 员的配备以及各职能人员的实际工作,能够运用用户体验的知识重新审视自己使用的产品,并能在后期的设计中站在用户体验的高度去设计自己的产品 | ||
4.学习产品开发流程,熟悉用户调研的方法 、竞品分析的维度,了解产品经理的工作内容 | ||
5.了解交互设计师的工作内容,熟悉移动端 交互热区的范围,学习交互手势在设计中的应用,学会书写交互说明文档 | ||
6.学习并掌握移动端界面设计中的列表式布 局方法,了解移动端界面设计意识。 | ||
7.学习Google大力推崇的Material Design 的设计语言,掌握MD设计规范,深入理解MD设计思想 | ||
8.利用MD设计理念结合项目需求设计MD风格 的界面 | ||
9.了解APP引导页的功能分类,掌握引导页 的常见表现形式以及常见扁平风小插画的绘制技法 | ||
10.学习移动端应用图标的6种表现技法,并 制作前期项目的应用图标。 | ||
11.学习并掌握移动端界面适配法则以及切 图和标注的方法,从而后期更好配合程序人员 | ||
12.学习微信公众号平台中微商城的知识, 并学习微信新的小程序设计规范,深入理解微信设计理念 | ||
13.掌握H5场景制作平台的操作技巧,学会 制作H5动态展示页面 | ||
14.深入学习H5场景制作平台操作技巧,按 照项目需求制作H5动态展示页面 | ||
15.总结整个阶段学习的知识,做知识梳理 ,查缺补漏,复习前面所学知识 | ||
简历面试 | 1.学习UI设计师简历制作的要求,制作高端 的UI设计师个人简历作品集,为后期找工作做好准备 | |
2.深入探讨UI面试中经常被问到的一些概念 性问题,用**为适合的语言去组织问题的答案,为后期的面试做准备 | ||
作品集包装 | 1.以总部研发部指定作品标准,严格把控学 员就业作品。帮助学员查漏补缺,精益求精,做出能拿得出手的作品。 | |
2.至少一次真实项目完整实战指导。会给到 一个较长的周期,了解实际工作流程,项目流程。与参与制作。 | ||
就业服务 | 1.实行一对一的心理辅导,学习就业面试技 巧。模拟面试训练与定期的招聘会。 | |
2.就业有保障。 |
想成为设计总监?先学会如何树立品牌意识
编者按:许多同学在娴熟地掌握了Photoshop、Illustrator、Indesign等设计工具后,仍然无法触碰大公司的橄榄枝。原因很多,但其中有一点需要单独挑出来说说——很多设计师都没考虑过的品牌意识。今天前网易UED主管@刘津legene?亲自上阵,教你在设计里树立品牌意识。
为什么要单独谈谈品牌呢?这是源于一件让我印象非常深刻的事情:有一个大公司的设计师,在公司**方博客上发表了一篇有关iPhone的文章,由于他在文章中把“iPhone”拼成了“iphone”,遭到了一个读者愤怒的指责。这名读者激动的斥责作者以及他所在的公司,是多么多么的不专业。
这件事让我很愧疚,因为如果当时让我去拼,我也一定会拼错。从这件事情里,我总结出了三点:
品牌有什么作用呢?我个人认为:好的品牌可以成为一种信仰:对内凝聚员工;对外树立形象 。
图1 品牌的作用
品牌怎样凝聚员工?
好的品牌会吸引专业人士加盟、会提高员工的忠诚度;
品牌怎样树立形象?
好的品牌让用户更容易信任、给用户带来更大的附加价值(为什么很多人喜欢买名牌包?其实更重要的是拥有这个品牌给自己带来的满足感)。因此作为一个专业的设计师,一定要具备品牌意识。
品牌管理其实是个复杂的工程。logo、slogan、用户体验、名誉等等等等,都和品牌有关。那么到底该由谁来负责对品牌的维护呢?市场部?公关部?技术部?设计部?……貌似推到哪个部门都有道理。或者专门成立一个部门?也不太现实。其实塑造、维护品牌靠的是所有人的努力,更是自觉。对于我们设计师来说,我们确实不是专门做品牌的。但我们可以**做好本职工作,为品牌建设添砖加瓦,这也是设计师专业度的体现。
怎样才算是做好本职工作?很多设计师都希望自己的作品独树一帜,精美绝伦。但作为产品设计中的一员,有时候正确的表达比美观的设计更重要。前面我们提到过:用户体验设计的目标其实就是要解决用户需求、减少用户理解和操作的成本、给用户留下美好而深刻的印象。
解决用户需求是**位的、也是**基本的要求,达到这个程度可以算是“合格”;让产品更易用、减少理解和操作成本,这是更进一步的要求,达到这个程度可算是“专业”;让产品深深的吸引用户,给用户留下美好而深刻的印象,达到这个程度可谓“出色”。我们在第五、第六章已经详细阐述了具体的设计方法。做好这些,其实就已经是为品牌建设贡献了一份力量。
在这一章节,我还想再介绍一些实用的原则,它们对提升品牌形象有着更直接的作用:
图2 提升品牌形象的一些设计规则
首先,你要保证你设计的东西是和产品相关的,做不到这点就不算一个合格的作品。这看起来很简单,但做起来并不容易。因为设计师必须真正的了解产品定位:产品功能、目标群体、产品特色。否则就有可能设计出外表华丽,但却和产品方向相差甚远的作品。所以,要正确的理解产品。
拿iPhone应用的图标来举例子。icon要体现这个产品的名称、功能或者特色(目标群体间接体现了功能或特色),千万别弄个“三不沾”。
图3 一些优秀的移动应用图标
借鉴产品在Web端(Facebook)、实体店(星巴克)的图标、描述产品名称(每日壁纸杂志);**图片描述产品性质(天气预报、电池管家、计算器);借鉴应用界面的样式和材质(Cellar)……这些方法,均可提高产品的识别度及用户的忠诚度。
再来看看下面两个移动应用图标,它们有什么问题呢?
图4 京东和丁丁优惠券的图标(2011年)
每次点击京东的图标,我都会不由自主的想到淘宝(和京东Web端的风格不太像,和淘宝客户端的图标倒是很像,现已更改)……至于第二个图标,你能猜出来这个应用是做什么的吗?
与产品内容相关联只是**基础的一步,是每个合格的设计师都应该做到的,要想成为专业的设计师,光有这点还不够。就像我前面提到的,还要注重对基本规则的学习和研究,融会贯通,使设计出来的作品不仅正确,并且有很好的易用性,间接提升品牌形象。
应用内一致:
我们接触一款产品,就好像接触一个人,他的外观、衣着、谈吐、性格都会影响我们对他的印象和判断。一个相貌堂堂、衣着得体、谈吐优雅、表里一致、温文尔雅的人一定会给我们留下深刻的印象,对其产生好感,愿意与他成为朋友,甚至莫逆之交;相反,;一个外形邋遢、毫无品味、表里不一的人只会让我们敬而远之。
初次见面三部曲
图5 风格一致的icon、启动画面和首页
中国人常说:一而再,再而三;事不过三;一鼓作气,再而衰,三而竭……可见“三”这个数字对于人的记忆、认知、影响起到重要的作用。初次见面,凭借这三轮轰炸,想不记住这个应用都难啊。“Etsy”的一致性给我留下深刻的印象。
来看一个反例:
图6 风格不一致的图标、启动画面和首页
该例中图标、启动画面、首页的风格都不一致。图标中的“100”和启动画面中的“100”颜色不同,背景也不同。你可能会使用这样的应用,但它未必会给你留下很深的印象。所以,设计师在设计这三个部分时,一定要放在一起对比一下。
衣着品味
我们都知道,西装不能配球鞋穿。应用的界面也是一样,不仅内外要协调,上下也要搭配呼应,至少要看起来协调。
图7 配色协调的界面
另外,配色要尽量统一。我们常听人说,身上的服装颜色不要超过三种。界面也是一样,太过花哨的界面让人找不到重点,更难以记住你的品牌。比如下面这个应用,以黑白为主色调,需要强调的部分用橙黄色突出。底部标签栏上有一个橙色的窄条,与上面很好的呼应。
图8 配色简练、识别度高的界面
表里如一
为了避免用户在理解上发生歧义,因此同样性质的元素应该表里如一;不同性质的元素应该尽量避免样式相近。
比如花田图标上的这个小元素,有的时候是红色的,而有的时候又是绿色的。图标代表了一个产品的形象,因此这种现象应该尽量避免。
图9 代表同样含义的元素应保持样式一致
如果界面元素的性质不一致,则应该在外观上尽量区别开:下面这个例子中,首页的图标样式(不可点)和其他页面的“返回”按钮(可点)做成了类似的样式,使用户极容易误操作(以为首页的图标可点)。
图10 代表不同含义的元素应避免样式接近
虽然元素的样式需要根据情况仔细考虑,但控件风格应该保持一致。同类型的控件,**好不要一会儿用图形、一会儿用按钮;一会儿有阴影、一会儿没阴影;一会儿有渐变、一会儿无渐变等。虽然面对这么多界面、面对这么多控件,保持一致的风格并不容易,但这样可以让让你的