界面设计风格在线视频

下面我们为大家介绍的是界面设计风格这一块

这块分为两个内容

什么是界面风格设计

如何确定风格

不同的设计作品会展现出不同的风格

界面设计也不例外

下面我们就将从两个方面

来对界面设计风格进行了解

开始设计一个界面时

首先应该用主要页面

来定下整个界面的一个设计风格

然后其他的页面按着统一的设计风格

进行细致的设计美化

统一设计风格

能给用户呈现整体一致的视觉体验

有利于传达产品整体的品牌形象

同时也方便设计团队制定设计规范

减少设计风格不一致带来的麻烦

界面设计风格简单来说

就是界面通过元素风格

颜色搭配和页面布局等

给用户呈现出的整体视觉感受

那我们就从这三个方面

来对界面设计风格做一个详细的了解

首先我们先来了解元素风格

在交互界面设计中

常见的有扁平化和拟物化两种风格

这两种风格各有它的优势和不足

不能简单地说哪一种风格更好

需要我们在设计的过程中

根据项目的需求来进行选择

我们先来说一说拟物化风格

拟物化的图标

模拟现实物品的造型和质感

通过叠加高光 纹理 材质 阴影等效果

对实物进行再现

当然也不能直接把实物照搬到界面中去

设计师还需要对其进行适当的变形和夸张

图中的这些图标 照片 时钟 日历 录音机等等

都是以实物为原型

通过简化和变形得来的

一眼就可以看出其所要表达的含义和内容

拟物化的界面

模拟真实物体以及相关环境

就像图中掌阅APP的书架界面

模拟了图书在书架上的状态

拟物化的设计会让你第一眼就认出

这是个什么东西

交互方式通常也会模拟现实生活的交互方式

比如图书翻页的动画效果

就是在模拟纸质图书翻页时的样子

让用户有传统的阅读体验

拟物化风格优点很明确

让用户有更真实的视觉感受和操作体验

然而大量的拟物化图标和界面

容易产生视觉上的疲劳

同时这种写实的图标很难表现出一个抽象的概念

比如天气 音乐

因此扁平化的设计开始流行起来

扁平化的图标

它忽略了高光 阴影等造成立体和透视感的效果

以平面剪影为基础

用简单的色彩和层次

通过抽象 简化 符号化的设计元素来表现

像图中的这些图标

用不同的形状的色块进行叠加

用户通过已有的认知和经验

就可以知道这些图标

代表天气 相机 时钟 音乐 设置等

不同的含义和内容

但在扁平化图标的设计中

图形的抽象度必须控制在一定范围内

否则识别度会降低

如果用户无法识别出图标所代表的含义

那么这个设计就会变得毫无意义可言

扁平化的界面

图中的这个界面

整体非常简洁

画面中基本由简单的线条和几何图形构成

字体统一

现代感特别强烈

这样的界面更便于用户进行阅读和操作

不会有多余的信息对其进行干涉

所以在设计中要尽量避免这种问题

可以利用色彩和图形让界面变得更加丰富

现在交互设计业界的主流是扁平化风格

因为这样设计有几个明显的好处

第一

扁平化设计的界面比较美观

简约大方

而且条理清晰

二

在设计元素上强调抽象 极简 符号化

去除了拟物化冗余的装饰效果

从而使得APP的文字图片等信息内容更加突出

第三

扁平化设计可以完美地兼容PC网站 安卓 IOS

等不同系统的平台和不同屏幕分辨率的设备

适应性比较强

同时也要注意不能过分的抽象化 简单化

要避免界面过分的单调和沉闷

除了元素风格外

色彩的搭配也是影响界面设计风格的重要元素之一

当你打开一个界面时

不同的主色调会带来不同的感受

那主色调又是什么呢

主色调其实是对一幅画面色彩外观的整体倾向的描述

主色调是一种大的色彩效果和趋势

而不纠结于细节

就像画面中三种不同风格的页面

图标中有许多种颜色

但整体看上去都有统一的色彩倾向

对于视觉体验来说

用户在面对画面呈现出的不同主色调

产生不同的心理暗示

鲜亮的红色 橙色能够令人精神兴奋

而橙色给人亲切 坦率 开朗和健康的感觉

可以很好地表现激情与参与的理念

例如手机淘宝应用界面

就运用橙色作为主色调

给人以活力的感觉

蓝色和绿色通常会使人感到平静和舒缓

其中蓝色作为灵性和知性兼具的色彩

更是被众多APP选为主色调进行设计

比如希望表达知性 权威感的知乎应用界面

想要表达诚信 信赖感的支付宝应用界面

都采用了蓝色作为主色调

而绿色则会给人无限安全的感受

象征自由和平 新鲜舒适 清新活力

例如美团应用设计界面就采用了绿色作为主色调

在确立主色调这个大方向之后

我们要开始关注色彩搭配的细节

界面中可以由丰富的色彩来增加表现力

也可以用单色来体现简洁之美

还可以利用黑白灰等无彩色来调和以及烘托主题

色彩丰富有其独特的美感

可以活跃画面气氛

还可以增强画面的吸引力

尤其是对一些特定主题来说

丰富的色彩是展现主题意义的有效方法

但这并不是说颜色可以随意的选择和推测

这样反而会因为颜色混乱而影响用户的体验

在界面中一定要让色彩的变化与对比

协调 统一 有序

我们可以通过以下几种办法进行调节

一

可以使用同类色和邻近色来创建色彩的对比与协调

比如图中红色与橙黄色

蓝色与绿色都是邻近色

这些颜色在画面中通过不同的比例

相互之间有所配合

既保证了画面整体颜色的统一

又为画面赋予了色彩的丰富感和韵律感

第二

通过弱化一方的力量来协调补色对比

与邻近色相比

补色具有更强的视觉冲击力

容易破坏画面平衡

因此我们通常会将一方进行弱化

图中深蓝色与橙黄色是一对补色

将深蓝色作为底色

降低纯度

并在上面用其他色彩进行疏密有致的点缀

这样就有效的降低了补色所带来的视觉刺激

第三

使用无彩色进行调和

利用黑白灰等在众多色彩中做周旋

尤其当画面中有两种强烈的对比色旗鼓相当时

无彩色的介入可以立刻让人

从这种不安的感觉转为舒适平静

第四

统一进行消色处理

是指统一对画面中所有颜色

原有的色彩性质进行一定程度的撤销

同时使所有颜色统一地在一定程度

趋向于一种新的色彩倾向

从而达到

使原有的色彩

对比趋于统一与协调的效果

对于用户来说

与丰富的色彩感受

所带来的绚丽 活跃 雍容之感不同

单色风总是给人以简约 干练 明快的感觉

极具现代感 时尚感和专业感

因其颜色统一 整体

在视觉上非常具有冲击力

单色风不等于不使用色彩变化

局部变换颜色

适当地调整明度和饱和度

可以丰富画面气氛

不会让用户感到呆板

图中的界面采用蓝色作为主色调

用少量的白色 黄色进行点缀

简洁地表现出夜空 白熊和星球的含义

不同明度蓝色的运用

也给画面带来了丰富的变化

使其给用户的视觉体验

不至于太过呆板和无趣

在单色风格界面设计中

通常也会使用统一消色的方法

使界面中所有色彩趋向于同一种主色调

同时

无彩色的应用

也可以给单色风界面带来丰富的变化

在多色彩和单色风的介绍中

我们都提到了一个概念

无彩色

黑 白 灰

还有金 银五种颜色都被称为无彩色

也称中性色

对于视觉的审美感受主要有两方面的作用

第一 调和有色彩

无彩色就相当于画面的调节器

可以使界面风格更加协调和统一

黑白灰任意一个由彩色相配都是协调的

同时

如果两种有彩色发生矛盾 冲突

无彩色会起到连接和调和的作用

第二 给以独特的色彩情感象征

黑色给人感觉庄重 肃穆

或是炫酷 个性的感觉

白色具有发散扩张感

给人以明朗 透气 清静 纯洁 轻快的感觉

灰色作为中间色

给人以柔和 多变的感觉

除了色彩之外

丰富的明暗变化

也可以表现出不同的交互界面风格

如同许多传统艺术家们在绘画上对光影的运用

设计师们也通常

通过明暗来营造美感

在众多界面设计作品中

明暗关系主要以

主要手段和辅助性手段

这两种方式来发挥塑造美感的作用

第一种是围绕明暗效果来组织其他设计元素

第二种则是以隐秘的方式出现在画面的背景

或是局部之中

为整体的视觉感受

增加一些丰富感 层次感和细腻的感觉

在设计过程中

设计师通常会使用一些方法来创建明暗布局

比如

添加半透明图层

利用照片原有的明暗美感

通过色彩渐变创建明暗

通过其他元素的运用来创建明暗关系等等

除了界面设计

图标设计也经常会利用明暗

来达到一定的视觉效果

光影明暗的变化会使用户的视觉中心

随之发生改变

所感受到的空间位置也会有所不同

第三 页面布局也是界面设计风格的要点之一

布局方式一般有

数据可视化 卡片式 瀑布流式 透视

宫格式 立体 大背景 通栏等等

在布局中利用数据可视化

可以在更小的屏幕空间内

更立体化的展示内容

可以让用户更直观地读取数据所呈现出的信息

比如

天气预报的界面

可以让用户清楚地知道

接下来几天或者几个小时内的天气和温度的变化

现在有许多智能穿戴设备

会将数据汇总到手机应用中

这同样需要将数据转变为可视化的信息

如柱状图 折线图 饼状图等

便于用户查看 阅读 记录和比较

卡片式设计的优点则在于

可以增强用户的点击感

整个界面排版整齐

所有信息以模块化的方式陈列在用户面前

便于用户进行选择

在许多购物应用中

经常可以见到卡片式的布局设计

方便顾客对商品进行选购

卡片方块的高度和宽度的大小都是可以调整的

正是因为这种特性

卡片式很适合用在响应式设计里

在不同的平台展示

由于分辨率不同

卡片可以自适应地展示

瀑布流

又称瀑布流式布局

是现在比较流行的一种网站页面布局

视觉表现为参差不齐的多栏布局

随着页面滚动条向下滚动

这种布局还会不断加载数据

并附加至当前尾部

最早采用此布局的网站是Pinterest

之后逐渐在国内逐渐流行开来

比如花瓣网这种集图分享网站

这种布局便于图片的展示和分类

以及点评分享等功能

在我们日常接触最多的宫格类布局

也许就是美图秀秀了

美图秀秀是有一个包含多种功能的图片处理应用程序

其每一种功能图标

都在界面中

以单元的形式排列

类似九宫格的形式

方便用户选取自己所需要的功能

用通栏的图片作为背景

也成为今年的一个流行趋势

它可以是作为整个APP的背景

也可以是作为内容区块的背景

这样既提升了视觉表现力度

又丰富了APP情感化元素

一些信息或操作

浮动在图片上

这种设计方法

对字体和排版设计要求更高

难度也更高

但极容易渲染出氛围

这种布局在一些专题类分享页面会较为常见

大视野背景图风格也分为两种

一种像Secret The Whole Pantry这样的

内容区块中采用大视野背景图

好处是可以利用图片做区块分割

难度是图片拼接后的效果不一定好看

所以可能还需要配合描边 留白

等设计手段优化拼接

另外一种就是像

Vsco Flink Mindie Soundwave这样的

全屏背景图

甚至打通状态栏

前景做内容排版 导航 操作

好处是设计非常具有生命力

但风险也是很明显的

前景的文字内容可读性会变弱

所以需要把重要操作用明确的按钮区隔出来

阅读型文字跟背景图要用明显的反色

还是不行的话就把文字浮在半透明蒙层上

解决可读性问题

界面设计风格从视觉效果上

至少给用户传达了两个信息

一是界面的整体基调

二是产品的目标人群

也就是说

界面设计风格

可以通过对目标人群的研究和整体基调来确定

第一

移动APP产品的设计

首先应该跟紧业界的主流设计风格

扁平化设计

其优势已在前面详细说明

第二

根据产品定位 产品目标人群

匹配用户人群的喜好 符合产品的定位

第三

界面的颜色搭配和布局

需要考虑不同用户的喜好

和体会配色及布局给用户带来的视觉感受