笔记:《萌妹子教你玩转UI设计》
stevezhou 2016.01.13
。课程大纲
.界面设计
素材:收集&整理,制作素材、切图技巧
颜色:颜色属性,颜色模式,配色
字体:常用中英文字体,字体组合&运用
布局:扁平化风格,网站鉴赏和排版
-----------------------------------------------------
Face UI:
图形设计(研究界面),交互设计(研究人与界面spec),用户测试(研究人)
-----------------------------------------------------
1、界面设计的原则
2、网站排版的基本方式
。骨骼式:一种规范的分割方式,与报刊的版式相似
。全屏式排版:以图片充满整个页面,文字置于图片上
。分割式 :把整个页面分成上下或左右两部分,在页面中分别编排图片和文本,使两个部分形成明显对比。
。中轴式:指沿着浏览器窗口的中轴将图片或文字以水平或垂直方式排列
。曲线式
。倾斜式:将图片,文字呈现出倾斜的状态,产生强烈的动感有很强的视觉冲击力
。对称式:一般分为左右对称、上下对称、四角对称,可以产生稳定、理性的感受
。焦点式:通过文字、图片等 设计元素,将人们的视线集中到一个点上
。三角式:(除骨骼式外,最常用的一种),通过设计元素将网站中元素排列成三角形,产生稳定感同时又不失生动,给人以均衡的感受
。自由式:元素自由搭配,产生动感,应避免设计元素分布过于凌乱
小结:
。同一版面,不要使用过多的字体和颜色
。建立层级次序、优先级、视线引导
。特定留白,让版面呼吸
。多花点时间在布局上:挑选合适的字体和类型,培养敏锐度
-----------------------------------------------------
色彩配置
.颜色属性
色相:纯粹色彩相貌差异,如黄色、红色、绿色、蓝色
明度:色彩感觉的明亮或灰暗程度
纯度:颜色的鲜艳程序和彩度,又叫饱和度
.三原色
红、绿、蓝
.颜色模式(记录颜色的一种方式)
RGB:一种发光的色彩模式
CMYK:印刷四原色,一种依靠反光的色彩模式
HSB(HSV):是基于人对颜色的心理感受的一种颜色模式
位图模式:用两种颜色(黑和白)来表示图像中的像素,因此叫作黑白图像
灰度模式:可以使用多达256级灰度来表现图像,使图像的过渡更平滑细腻。灰度图像的每个像素有一个0(黑色)到255(白色)之间的亮度值
Lab颜色模式:由RGB三基色转换而来,它是由RGB模式转换为HSB和CMYK模式的桥梁
.配色的两种方式
1.通过色彩的色相、明度、纯度的对比来控制视觉刺激,达到配色效果
2.通过心理层面感观传达,间接性地改变颜色,从而达到配色的效果(冷暖色)
.颜色的使用风格
公司标准色
所在行业
个人爱好
.金、黑、白、灰属于无彩色
-----------------------------------------------------
排版&字体设计
.字体四大设计风格
秀丽柔美
稳重挺拔
活泼有趣
苍劲古朴
.中文字体中的数字及英文字母用英文字体
.中英文字体混合时,英文千万不要用软件中自带的中文字体
.衬线字体:在字转弯处有类似小三角这样的修饰
.无衬线字体:扁平化字体
排版
.网站排版的六个原则
对齐:相关内容必须对齐,次级标题必须缩进,方便读者的视线快速移动,一眼就看到最重要的信息
聚龙:相关内容都在一个区域中,段间距应该大于段内的行距
留白:千万不要把页面排得密密麻麻,要留出一定的空白,这本身就是对页面的分离,这样减少了页面的压迫感,又可以引导读者视线,突出重点内容
降噪:颜色过多、字数过多、图形过繁,都是分散读者注意力的“噪音”
重复:多页面排版时,注意各个页面设计上的一致性和连贯性,另外,在内容上,重要信息值得重复出现
对比:颜色对比、明暗对比、图形对比、空间对比,方便读者集中注意力阅读某一个子区域
.网站排版的要素
层次结构:前面介绍过的10种不同的排版方式
字体运用:F型或E型、Z型浏览模式的不同字体设计
间距问题:
.66个字符被认为是最佳的长度
.sans serif强调每一个字母,serif更强调于一个单词
.段落的行高设定为字体大小的1.5倍
.大写字母会比小写字母更难以扫读,正体字比斜体字更容易识别
.在正文文本和背景间合适的对比会提高清晰度,正如适宜的行宽和行高所产生的效果
颜色&调色板
-----------------------------------------------------
扁平化(flat design)
核心:去掉冗余的装饰效果,去掉多余的透视、斜角、纹理、渐变等能做出3D效果的元素,让‘信息’本身重新作为核心被凸显出来
设计元素:抽象、极简、符号化
理念:在两维的空间里面完成最终的设计,而且不丢失‘常见’界面所提供的任何功能
.目前所常见的扁平化设计元素:
1.带有长投影的扁平化设计:一般是45度角,投影一般为物体大小的2.5倍
2.似扁平化设计(Almost Flat Design):
带有渐变的扁平化设计;
带有阴影的扁平化设计;
3D扁平化设计;
带斜面的扁平化设计;
.设计技巧
简单的设计元素:
强调字体的运用:几乎所有扁平化里面字体都是无衬线字体
关注色彩
(下面是扁平化设计中常用色调)
简化的交互设计:简单的颜色和字体,搭配简单的图案
关注排版
.如何进行扁平化设计?
去掉各种类型的特效
一种主色以及与主色同色系的四五种辅色
避免饱和度过高的纯色
选择无衬线字体
由基础形状衍生出更多的组合形状(注意基础形状边不要超过6条),更多的转角设计
使用不同色块组合做出伪立体感
小结:
1、可用性总是比容貌更重要,一个web应用,移动应用程序或网站的主要目的始终都是清楚的向用户传达消息并提供一个易用、直观的界面
2、细节很重要,哪怕是一个圆角、一个斜面、一个字体
3、趋势和风格的使用应该和项目的目标一致
4、趋势仅仅是趋势,要试着创建伟大设计而且是适合最终用户的设计