常见界面设计在线视频

在前面的第六节

我们对用户界面设计

已经有了很清晰的了解

那么这一节我们将做一个归纳总结

并结合实际的案例

为大家介绍不同种类的界面设计

在这一节中我们将看到

网页界面设计 移动APP界面设计

桌面应用软件的界面设计以及游戏的界面设计

首先是网页界面设计

网页是构成互联网的基本单位

许多特定的形式的网页按照一定的秩序

组织在一起就构成了一个网站

网页一般由文字 图形图像 色彩等视觉元素

以及多媒体元素构成

用来提供某种特定的信息

作为中间媒体

网页为人机交流提供了很大的便利

在网页界面设计中

一般有五个重要的方面需要注意

第一是风格定位

第二是整体统一

第三是功能性

第四要强调重点

第五是强调对比

首先我们来了解一下风格定位

网站风格是指一个网站它的整体印象

所产生的综合感受

它体现了一个网站的思想倾向

以及文化内涵

在建设一个新的网站时

其基础就是对网页风格定位的把握

恰当的风格便于访客准确的解读信息

例如上面的两个网页

左边的图是政府机构网站

它就具有庄重的风格

右边的图是娱乐休闲类网站

具有活泼的风格

以上五个方面的重要内容

总结出来就是以下四个设计原则

第一鲜明的主题

第二整体的风格

第三艺术个性的突出

第四技术与艺术的有序结合

我们首先来讲一下第一点鲜明的主题

通过界面整体的视觉风格 网站信息内容

以及网站的色彩与视觉符号

可以将一个网站的主题直观的体现出来

因此在进行网页设计之前

应根据不同的网站需要

呈现出不同的功能

和需要表达出的不同感情

并按照视觉心理规律和形式主题

主动地将一系列信息传达给浏览者

这样才能够将网站的主题及时的被使用者接受

从而满足使用者的需求

因此这就要求视觉设计不但要简练 清晰和明确

更要注重通过独特的风格和强烈的视觉冲击

突出设计的主题

这样才能够充分的调动浏览者的视觉感受

吸引浏览者的视线关注

使网页界面能够最大化的传达信息

如图所示的儿童服装网站设计

在简洁的基础上

按照儿童的视觉心理规律

运用独特的设计风格突出儿童服饰的主题

充分调动了浏览者的视觉感受

准确高效的传达了网页信息

第二个网页界面设计的原则是整体的风格

整体的风格就是说网页界面的整体风格

必须在内容和形式上相互呼应

也就是要求网站高度的形象统一

我们大家都知道网站是由多元素 多页面组成的

虽然每个网页界面是分别设计和编排的

而且版面信息和内容也不尽相同

但整体的形式和内容必须从属于网站的主题

这就是整体风格

那么网页界面设计的整体统一原则

主要体现在哪些方面呢

第一是网页内容的整体统一

由于网页界面设计应用范围逐渐扩大

因此网站主题几乎覆盖了所有的行业

概括起来可以分为

门户类网站 企业类网站 娱乐类网站 休闲类网站

文化类网站 功能类网站和个人网站等

虽然不同的网站类型在内容和形式上各不相同

但同一个类型的网站所属的网页内容

必须整体统一于网站

第二网页形式的整体统一

对于是网页界面设计而言

网页形式的整体统一是一项基本要求

包括网页视觉形式的字体 色彩 页面布局等

基本元素都要统一

网页界面形式的整体统一

有利于塑造网站的整体形象

给人以专业 严谨的良好印象

也有利于网站的管理 开发和维护

第三是网站文化内涵的统一

随着网络技术的发展和经济的推动

相同类型的网站之间的差异性越来越小

网站的文化内涵被赋予了新的意义

网站的文化内涵是网站的灵魂

决定了网站内容和形式的整体统一

使网站的个性魅力和文化价值都得到了提升

网页界面设计的第三个原则是

艺术个性的突出

艺术个性的突出就是说

首先网页界面的设计应该符合网站的主题

在这个前提之下

当前所设计的页面

更加具有自己独特的艺术风格

从而更吸引更多的浏览者

与此同时

又可以鲜明的突出网页的主题以及网页的内容

这就是网页艺术个性的突出

网页界面设计的最后一个原则是

技术与艺术的有序结合

这一点的意思就是说

网页设计作为一门新型的学科

它的涉及面非常之广

主要涉及到计算机辅助设计

计算机技术等等相关学科的知识

它既属于艺术设计又包含了计算机技术的范畴

因此技术与艺术的相辅相成

形成了网页界面设计的特点

同时在网页技术应用中也应该注意到以下几点

第一

网页技术的应用

应服务于网页的内容和表现形式

网页界面设计过程中

要充分考虑网页视觉表现的规律

技术的应用需要重视浏览者的心理

还要需要注重文字 图形 色彩等网页视觉元素

在静态和动态网页中的表现效果

要符合大众的审美需求

避免脱离网页设计的表象规律

而孤立地应用网页技术

第二

网页界面设计不能以技术为中心

计算机技术的快速发展

使得网页特效软件和技术不断涌现

为网页界面设计提供了丰富的技术资源

运用计算机技术如同一把双刃剑

在丰富网页艺术表现力的同时

也很容易片面追求新技术

以技术为中心

将各种新技术不管是否合适

盲目地用于网页设计中

势必造成网页内容与技术表现之间的脱节

第三

网页技术的应用要适合于网络环境

在网页界面设计过程中必须要考虑网络环境

不能一味的追求高清和特效

而盲目地使用高分辨率的图像

影响到网页的整体传输和浏览

从而影响到网页信息的有效传达

在认识了网页界面设计

和网页界面设计的相关内容后

我们来认识移动APP界面设计

我们将从APP的概念

移动UI的设计趋势

和移动APP设计流程

这三个方面为大家进行讲解

这三个方面为大家进行讲解

大家对APP已经不是很陌生了

APP就是指手机软件

也就是安装在手机上的软件

可以更新版本以完善原始系统的不足

而且满足了用户的个性化需求

移动APP的UI设计

几乎成为了UI设计的一个热点

受到了越来越多的关注

我们更加关注未来移动UI设计

会呈现怎样的变化

我们来看看移动UI的设计趋势

移动UI的设计趋势主要有以下六点

他们分别是

专注用户的体验

使用模糊的背景

简单的导航模式

大胆而醒目的字体运用

更简单的配色

用户界面的情感感知

那么首先什么是专注用户体验呢

现如今由于各种客户端的开发和接入

已经成为常态

移动端的APP的快速发展都是不争的事实

我们可以明显观察到APP在功能

设计和潜力上的快速增长

下面简单介绍APP移动端的设计趋势

第一点是专注用户体验

由于技术的发展

APP的更新迭代越来越快

用户对于用户体验的需求也越来越多

最主要的需求之一

是希望拥有个性化的用户体验

使得相当一部分APP的设计和开发者

选择专注于较少 较关键的功能

并逐步优化的用户体验

如图所示

是一款专注于理发的软件

用户可以预约发型师

并提前选择发型样式 长度和疏密

也可以在历史记录中查看一生的发型变化

第二个趋势是使用模糊的背景

早在iOS 7的界面中就见到了背景模糊的设计

有了iOS 7的亲身示范

越来越多应用在设计中采用了模糊的效果

既符合苹果新的审美观

还增加了反差和对比

提高了应用内容的易读性

模糊背景符合时下流行的扁平化和现代风的设计

帮助设计师规避复杂的设计

提升用户体验

那么在什么情况下使用模糊的背景呢

这种情况是背景图影响了主题内容

第二种情况是需要突出某部分的内容

在这两种情况下

可以使用模糊的背景

如图所示

设计师很好地把模糊的背景

和优雅的字体融合在一起

设计整体非常和谐和精致

第三个趋势是简单的导航模式

首先我们来说说

为什么底部导航如此重要呢

学者Steven Hoober

在关于移动设备使用状况的研究中发现

49%的人依靠一根手指完成手机上的操作

在左图手机操作示意图中

不同颜色表示用户能用拇指在屏幕上触及的区域

绿色表示轻易触及

黄色表示需要伸长手指

红色表示需要用户改变持握方式

所以

相比于华丽和花哨的菜单设计

类似于右图所示的

简单的下拉菜单和侧边栏则更符合设计的趋势

简单导航设计更加平稳 流畅 轻松和友好

其直观和便捷性

可以让用户更容易找到他们需要的东西

第四个趋势则是大胆而醒目的字体运用

大字体在移动端APP上的呈现会赋予界面以层次

提高特定元素和视觉重量

让用户难以忘怀

字体够大 够优雅 够独特 够贴合

也就能提升页面的气质 特色

使用高识别度的字体设计

加上吸引人的细节设计

的确是抓住用户注意力的利器

近些年来

移动应用的界面越来越扁平 越来越简约

不仅在布局

在配色方面也更加的简约

所以未来这种趋势仍然将保持

颜色跟其他事物一样

使用需要恰到好处

如果设计师在配色方案中不超过三种基色

将会获得更好的效果

APP使用者更加喜欢微妙而富有质感的颜色

整洁和干净正在压倒华丽而浮夸的配色趋势

移动UI设计在如果想要提高用户体验的质量

在未来就要更加注重情感的感知

什么是情景感知呢

这是指智能手机或应用软件

可以依靠收集到的信息

对你的行为进行更加细致的猜测

从而帮助你完成日常的工作

拥有情景感知功能的APP是怎样的呢

它能够根据用户的背景信息

例如

位置 身份 活动和时间来识别当前的状况

并给予合理的反馈

如图所示

当你在午饭时间打开一个地图类的服务时

用户无需搜索

它会给你提供当前的位置信息

和周边饮食类的服务

在未来

用户界面的情景感知之一

设计趋势将会随着用户的需求不断放大

当然

良好的用户体验在移动app上的呈现

也不是一蹴而就的

现在的移动应用界面

已经形成了主流的设计流程

该流程主要包含四个阶段

四个阶段分别是

分析 设计 开发和验证

第一个阶段是分析

它包含了用户分析 场景分析 竞品分析

第二个阶段是设计

它采用了面向场景 事件 对象的设计方法

第三个阶段就是开发

通过用户交互图

是指说明用户与系统之间的联系

用户交互流程图

就是指说明交互和事件之间的联系

交互功能设计图

是指说明功能与交互的对应关系

最终得到设计产品

第四个阶段是验证

通过功能性对照进行可用性测试

除了以上两种界面设计

桌面应用软件界面设计可以说是诞生的较早

同时也是发展时间较长的一种界面设计类别

什么是应用软件的界面设计呢

软件界面也称作软件UI

是人机交互重要的部分

也是软件使用的第一印象

是软件设计的重要组成部分

软件界面设计越来越被软件设计重视

所谓的用户体验大部分就是指软件界面的设计

应用软件界面设计需要综合考虑使用者

使用环境 使用方式

即最终是为用户设计的

应用软件要为用户服务

是用户与程序沟通的途径

是为人而设计

所以需要简明易用 为用户考虑 清晰易懂

风格一致 操作灵活 人性化和安全防护

其中简单易用是指设计尽量美观 简洁

便于用户了解和使用

为用户考虑是指尽量使用通俗易懂的语言

避免专业术语

考虑用户对软件的熟悉程度

清晰易懂是指各种功能表达尽可能的清晰

便于理解

操作灵活是指让用户更加方便地使用软件

人性化是指

使用户根据自己的喜好与习惯定制界面

最后一点

安全防护是指

降低出错率

使用户对产品有信心

界面设计多种多样

这些年由于大型的网游 电子竞技的兴起

游戏的开发和设计

也成为互联网行业很火的一项内容

游戏的用户界面是玩家通过游戏界面

对游戏中的各个环节进行操作

切换的渠道

游戏界面则及时反馈玩家在游戏中的状态

游戏体验设计是非常复杂的工作

其界面的交互和视觉设计具有很高的难度

所需的专业技能和知识要精深

好比是界面设计中的一项皇冠

游戏的UI设计与前面几种UI设计

有着很多相似之处

也有五个基本的阶段

游戏UI的设计分为五个阶段依次是

需求阶段 分析设计 调查验证

方案改进和用户体验反馈

第一个步骤是需求阶段

设计者需要考虑用户 使用环境 使用方法

并作以需求分析

在设计之前

需要明确3个w

即who where why

并且需要分析同类竞争产品的优势与劣势

进而探索出更适合用户的产品

第二阶段是分析设计

通过分析上面的需求进入设计阶段

设计师可以设计出几套不同的界面备选

制作出体现用户定位的词坐标

第三个步骤是调查验证

需要填写的内容有

数据收集方式 测试时间 测试对象 测试区域

需要了解被测试者的基本情况

如作为游戏玩家的年龄等信息

最后需要得出的调研结果有

用户对各套方案的印象

最喜欢的方案是哪一个

用户对各方案的色彩 文字 图形和体验的打分

第四个步骤是方案改进

通过上一步的用户调研

了解用户喜好 想法

接着进一步修改

最后一个是用户体验反馈

设计者需要在产品上市以后

了解用户真正使用的感受

为版本迭代积累经验与资料

至此

常见界面设计的四个部分

网页界面设计 移动APP界面设计

桌面应用软件界面设计和游戏界面设计的讲解

就全部结束了

下一节

我们会为大家讲解设计的趋势