颜色的网址:colorhunt(百度搜,里面有非常好看的配色)
站酷(很牛逼,中国权威的网站),花瓣,阿里巴巴矢量图库(iconfont)
觅元素(免费下载网址),摄图网,千库网,千图网
dribbble(插画的网站)
90设计(电商的) 包图
500px大片网站国外
产品的软件:axure(RP),xmind,墨刀(不常用)
设计软件:ps,ai,sketch(只能在苹果系统上使用)。
只要是渐变和透明相关的就要把填充关为0。
第一节:UI和IXD和UE/UX的区别:IXD是交互设计;UE和UX都是用户体验设计师
按照图标的属性分类:功能图标和启动图标;
按照表现形式分类:3D图标,2.5D图标,2D图标
按照设计风格分类:像素图标,拟物图标,扁平图标,手绘图标
第三节:app的大门登陆注册页面
登陆注册页面出现在哪里:
1:刚下载的时候,点击图标会提示用户登陆注册。
2:在个人中心页里面。
构成:
登陆页面:输入文本框,忘记密码,登录,注册, 第三方登录,logo;
注册页面:输入文本框,验证码,设置密码,同意注册协议,注册,第三方登录,已有账号登录,logo。
特例:无第三方登录按钮,头像登录(一般是第二次往后的登录);
按钮式,选项卡式
注册的方式:邮箱,第三方,混合式登录,手机号注册
登录分类:1.无需登录(手机自带的天气等等 柴扉app)2.无需强制登录(网易云音乐, 微博,抖音等等)3.强制登录(QQ,支付宝,微信)
注册登录4种方式:邮箱登录,第三方登录,混合式登录,手机号注册。
状态栏的高度是40像素。
第四节:ai的字体设计
字体形式:有无衬线(宋体是有衬线字体,黑体是无衬线字体)
书法字体:叶根友

,公用法

,叠加法

,分解重构法

, 尖角法

,断肢法

,减细法(直接是钢笔造字)

,错落摆放法


设计原则:直观性,生动行;个性化,象征性;说服性,感染性
推荐:微博,id名为字体设计; 微信公众号:刘兵克
第五节:banner
常见的banner尺寸:16:9、4:3、3:2、1:1和1:0.618(黄金比例)

banner里都有:文字,图片,图形
文字层级:文字大小;文字颜色;文字粗细;
文字排版:居中(高端,贵气,霸气,文字比较短的,);左对齐(方便阅读);右对齐(少,海报,banner设计);全部对齐,左右对齐(详情的文案里)
图形:1.图形做背景2.使用图形丰富画面
图片:图片做背景,也可以用作装饰,
地产宣传海报一般用局中对齐的方式; app里的段落文字一般是左对齐
banner构图:文案;商品/模特;背景;点缀元素;logo







banner展示风格: 年轻化banner(颜色鲜活),波点banner(孟菲斯风格 );文艺类banner;品牌版banner ;高端大气类banner(颜色深色)
banner背景处理技巧: 渐变(多适用于电商类的)

;纹理(质感,高端商务类的及金融类的)

;临近对比(低饱和)

;层次

;
banner布局方式:左图右文字

;右图左文字

;中央布局

背景小圆点的制作方法:先画一个小圆圈,复制一个共复制4个,上下各两个,保持距离是一样的,然后这四个图层转换成智能对象,双击进去,然后调整画布大小,现有的px加上距离,然后在编辑里面定义图案。
汉宜超粗体

第六节:拟物化图标:

拟物化的优点:

拟物化的缺点:

拟物化的设计方式:1.设计拟物:2.交互上的拟物(翻书的效果)
总结:
第七节:拟物化图标:光影关系:

第七节:扁平化图标:
三种绘制技法: 通过显示物品绘制;通过拟物化图标绘制;通过剪影图标绘制;
转成智能对象
第八节:功能图标之分类大法:
功能图标:在图标中具有功能意义的图形;每个页面中的返回功能图标;
功能图标的设计原则:1.要注释 2.图文一致3。功能>美观
按照属性栏分类:栏图标(标签栏图标,属性栏图标),小图标。
按照表现形式分类: 线性图标,面性图标,线面结合;
按下态是线面组合,非按下态是线性
第九节:功能图标的设计技法:
线性图标(单色,拼色,渐变,断一个点,断两个点,加拟人元素 )
面性图标(单色,拼色,渐变,加背板,加光影(投影),降低不透明度 ,加元素 ,加高光 )
可以看看笔记里的截图
注意事项:1.定义准确形象2.造型完整简明3.符合用户行为习惯4.统一性
第10节:启动页加引导页加动效:
有启动页的意义:1.提高用户体验,减少用户焦虑2.传递品牌效应或产品的人文情怀。3 .商业需求
启动页的种类:1.快速启动页(手机自带的一些,国外比较流行)
2.品牌类(宣传产品自身的形象如:京东,饿了么,钉钉 ),有宣传标语,logo
3.情感共鸣类(如微信,网易云音乐)
4.节日类。
5.广告类 (给别人打广告 )
启动页的设计流程:1.产品分析 2.确定启动页种类3.了解产品的特点4.特点具像化5.排版整合
引导页定义:加载完启动页画面之后进入界面首页之前用户所见到的一系列画面。往往是第一次打开应用时出现的画面且仅出现一次,一般滑动好几次。
引导页出现在两个地方1.首次下载app。2.重大更新完成之后才会打开。
引导页的作用:在用户使用产品之前提前告知其主要功能与特点。(亮点功能 )
引导页中的元素: 图形,图片,文案,关闭或跳过按钮,分页点(最后一=一页由进入按钮代替分页点)数量要合理,一般在3到4页左右
引导页的展示形式:文字与界面的组合;文字与插图的组合(吸引眼球但设计时间长);动态效果与视频
做动画的时候一定要转换成智能对象
第11节:axure和xmind
xmind(绘制功能导图):双击就会出现一个自由主题;
按tab键就会分支主题;分支主题2要出现的话直接在分支主题1那里按住enter回车键。
(按住tab键就是横着出现(同等级),按enter键就是竖竖的初出现(儿子 ))
tab添加选中主题的子主题,enter减加选中主题的兄弟主题;(必须在英文输入法的状态下 )/收缩所有主题;*展开所有主题。
加超链接:右击插入选择超链接。
外框就类似于打一个组。
axure(绘制原型图):
按住command+回车键添加子页面 (右击添加页面之后 )
按住f5可以看预览,
第二个是载入苹果 元件
添加跳转:在右边属性栏鼠标单击时。
做手机轮播图的话:有一个动态面板,画好之后双击进去,选图片,双击交互载入时,找到设置面板状态
网友评论