UI设计之扁平化设计的魅力

扁平化优劣分析:


优点

1.降低移动设备的硬件需求,延长待机时间;

2.可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生;

3.随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。

缺点

1.降低用户体验,在非移动设备上令人反感;

2.缺乏直观,需要一定的学习成本;

3.传达的感情不丰富,甚至过于冰冷。

对于复杂需要大量的视觉效果来堆砌的界面以及某些复杂的插图慢慢的已经退出历史舞台,取而代之的是扁平化的崛起,这种简单直观的风格给予了用户最好的体验,功能展示更加鲜明,形象展示更加简单。

传统场景之间的对比

UI设计之扁平化设计的魅力

UI设计之扁平化设计的魅力

游戏原画之间的对比

UI设计之扁平化设计的魅力

UI设计之扁平化设计的魅力

扁平化设计五大原则:

1.拒绝特效:抛弃所有繁琐的特效,简单的色块。

UI设计之扁平化设计的魅力

2.仅使用简单的元素:去掉复杂元素,凸出主题。

UI设计之扁平化设计的魅力

3.注重排版:更加注重排版,因为简单。

UI设计之扁平化设计的魅力

4.关注色彩:颜色选择更加重要。

UI设计之扁平化设计的魅力

5.极简主义:简单明了,信息传达准确。

UI设计之扁平化设计的魅力

附加:“准”扁平化

UI设计之扁平化设计的魅力

扁平化设计概念

扁平化概念的核心意义是:去除冗(rong)余、厚重和繁杂的装饰效果,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。

例如:Windows、Mac OS、iOS、Android等操作系统的设计已经往“扁平化设计”发展。

应用范围:

APP ,web,插画,各种benner。

总结:皮影戏引入UI设计之扁平化设计的魅力最早的扁平化,中国传统。

UI设计之扁平化设计的魅力

用到工具:

新建:UI设计之扁平化设计的魅力命名,数值:随便输入手机大小新建,分辨率:一般使用像素/英寸,RGB:不牵扯打印的情况用RGB。背景内容:通常选择白色。

图层:UI设计之扁平化设计的魅力图层顺序类似书页,在上地会覆盖下面的。图层工具:文件夹和新建还有删除的用法和作用:强调拖入到新建会复制,拖入到垃圾桶会删除UI设计之扁平化设计的魅力

放大工具:UI设计之扁平化设计的魅力按住ALT会变化放大镜的放大缩小图标。拖动或者直接点击画布会进行放大和缩小。

移动工具:UI设计之扁平化设计的魅力画布移动工具。移动图层上面的所有图像。

小黑,小白:UI设计之扁平化设计的魅力,形状路径图形选择工具,锚点选择工具,锚点选择可以调整杠杆。

钢笔工具:在没有进行调整的情况下,默认是路径,填充和描边从一个端点出发,按住Ctrl转换为小白选择工具。调整杠杆可以任意变换弯曲形状,按住Alt打断。

图像大小调整:Ctrl+T,鼠标左键进行拖动按住Shift进行等比缩放。

扁平化卡通形象设计理念

1.教学方法,以圆形为基础通过对圆形的变形来创造卡通形象。各种圆形对比各种脸型相同五官下的效果。

UI设计之扁平化设计的魅力

2.结合其他形状制图

UI设计之扁平化设计的魅力

扁平风格卡通人物肖像绘制(定制头像)


UI设计之扁平化设计的魅力

1.路径绘制:通过小白工具进行下端点的调整,拾取想要的颜色

UI设计之扁平化设计的魅力

2.两个小椭圆放在脸的背后,颜色加深。

UI设计之扁平化设计的魅力

3.类似耳朵的方法绘制腮红:

UI设计之扁平化设计的魅力

4.绘制眼睛,四个圆形。

UI设计之扁平化设计的魅力然后进行打组。

5.水平翻转添加眼睛,

UI设计之扁平化设计的魅力

6.耳朵和嘴:

UI设计之扁平化设计的魅力

7.两个圆形,一个在前一个在后,绘制出一个头发的基本型。

UI设计之扁平化设计的魅力

8.脖子和头发细节的绘制。脖子利用圆角工具进行绘制。

UI设计之扁平化设计的魅力

9.衣服的绘制,两个圆角矩形相交。

UI设计之扁平化设计的魅力

10.衣领的绘制

UI设计之扁平化设计的魅力

11.最后添加矢量蒙版。

UI设计之扁平化设计的魅力

头像绘制成功,可以换一些其他发型。

本次讲解就到这里,源码时代各校区UI设计班将在6月开班,敬请关注。


分享到:


相關文章: