界面设计常见组件在线视频

同学们

大家好

今天我们来讲的是界面设计的常见组件

这一块我们将分为四个部分来给大家介绍

第一部分是控制元素

第二部分是筛选器

第三部分是表单控件

第四部分是图标

首先是控制元素

分为

活动指示器 进度指示器 页码控制器

刷新控件 滑动器 开关 步进器这几个部分

当我们使用手机和电脑等设备时

如果有任务或进程正在处理中

界面上就会出现旋转的图标

但其时间进程并不明确

如果想要明确表达一个已知时间的任务进度

则可使用进度指示器

进度条对于我们来说都非常熟悉

可以提示任务或过程已完成的比例

一般以线型 条状或者圆形呈现

页码控制器用于显示共有多少页视图

对于当前展示的视图起到一个提示的作用

可以将页面进行切换的同时

展示视图的顺序

刷新控件用于刷新当前页面内容

目前主流的有下拉刷新和上拉刷新两种方式

这两种交互方式有很大的区别

以新浪微博应用程序为例

我们在看当前页面的时候

使用向下拉动的动作

内容就实现了更新

如图知乎所示

向上拉动

实现了加载的内容指示

滑动器包含滑轨和滑块两部分

通过可选的图片

来传达左右两边代表的内容

如图所示

用户可以使用滚动条精确的控制值

或操控当前的进度

开关又叫切换器

用于切换两种互斥的选择或状态

如图所示

用户滑动开关按钮可以切换状态

步进器是由两个分段控件组成的

其中一个显示增加的符号

一个显示减少的符号

如图所示

用户可以单击一个分段来增加或者减少某个值

常见组件的第二个部分是筛选器

以下分为

选择器 日期时间选择器 分段控件

选项卡 排序 地区选择六个部分

当用户对于整组值的内容都有所了解时

使用选择器更加合适

但如果需要展示非常大量的值时

建议使用表格

方便用户滚动翻页

如图所示

当用户对整组值的内容有所了解时

选择器会更加合适

日期时间选择器

为用户选择日期或时间提供了一种简单的方法

如图所示

日期时间选择器最多有四个可独立旋转的滑轮

用户可以用滑动的方式进行选择

选项卡在Andriod和ios系统中都有所体现

在某些情况下

选项卡的功能等同于分段控件

通过明了的分段形式进行切换

在列表页中

用户需要根据几种条件要求

使用不同的排序方式

得到选择结果

现如今的外卖

购物应用程序中最为普遍

如图所示

在淘宝应用程序中

可列出下拉菜单

它的内容是选定列表中的标题

选取其中的一个作为排序关键词

以此来排序数据

地区选择

通常在电商类应用中出现

需要切换城市来筛选获取不同的信息

如图所示

一般采用下拉选择菜单的形式

常见组件的第三个部分是表单控件

其下分为

单选框 复选框 文本框 下拉框 表格 按钮

这六个部分

单选框适用于一组相关但互斥的选项中

用户且仅能选择一个选项

如图所示

选中状态与非选中状态应该有着明显的区别

单选框

适用于一组相关但内容不兼容的选项中

如图所示

淘宝应用中的收藏夹

用户可以选择一个或者同时选择多个选项

文本框

是可以接受用户输入文本的区域

当用户单击文本框时显示键盘

如图所示

当用户单击文本输入框时

即可显示键盘

下拉框又叫下拉菜单

用于从一组互斥值列表中进行选择

如图所示

用户能且仅能选择一个选项

在应用中

如果有很多信息需要归类

并且这些信息归类的维度很多

就需要使用表格的形式把这些信息归类

按钮是所有组件中最原始的部件

按钮控件的作用是引发即时操作

即当用户单击后

触发即时操作

按钮又可分为行为召唤按钮

和多状态按钮两种形式

右上图所示

行为召唤按钮是某个页面特定的工具

更重要的是

它是流程持有的工具

我们常在屏幕底端放置一个悬浮的行为召唤按钮

点击则显示更多选项

多状态按钮既有操作触发器

同时也是一个反馈机制

右图所示的ios系统

软件更新状态尤为突出

图标

英文译作Icon

起源于希腊语

原意为图像

字典中称为宗教图腾

源自古代宗教

希腊语中也常常被翻译成简笔画

绘画和图形符号

但是随着科技的发达与计算机的发展

它早已不仅仅局限于原本的宗教范畴

而是广义上指所有有指示作用的标志

狭义上指运用到计算机显示器上

引导用户进行各种操作的图像

它最早由图形转化而来

在德语中又被广泛用于表示图形符号

界面设计也脱离不开四项原则

其一

识别性原则

也就是辨认和区别

所谓APP图标的识别性

就是让用户看到这个图标时

能够清楚的辨认图标上的元素

知道图标上表现的是什么

图标的图形应与目标的外形相似

用户看到一个图标

就可以清晰的明白这个图标的含义

图标含义准确

便于用户的操作及做出选择判断

前四个图标

用户能够轻易地识别它们的产品属于什么类别的应用

第五个图标从视觉上

很难传递给用户

相机拍摄照片等信息

其二是娱乐性原则

有趣的图标能够为界面增添动感

交互性更强

更易于在众多设计中脱颖而出

其三是美观性原则

也就是说

这个APP图标在视觉设计上

要有时代美感和艺术魅力

让用户看了不别扭

不生硬

给人以舒适的审美享受

APP图标的风格多样

但无论是哪种风格

都脱离不了美观原则

但是这种美观的要求不是抽象的

而是具象的

落实到设计的实施

就是要把握好字体

图形和颜色的完美搭配和排版

虽然每个APP图标

在巴掌大的屏幕上只有指甲那么大

设计师就更要进行精致的设计

就拿IE浏览器的 logo设计来说

2012年

微软将WIn8中IE10的Logo进行重新设计

IE10风格简约

纯蓝色

很符合扁平化趋势和微软的Metro化风格

其四是简约性原则

简约性界面设计

便于用户识记和编码的原因有两个

第一是元素简洁

第二是有创意而且独特

巴掌大小的手机屏幕上

APP图标的的大小也只有一厘米见方

在这一厘米里的设计必定不能是复杂的

否则让用户看上去只能是模糊一片

而看不清细节

其中

星巴克的logo设计被视为典型案例

从1971到2011年

星巴克的LOGO设计可以看出

形式越来越简洁

其五

一致性原则

一致性的设计显得整个应用既统一又完美

如果启动图标的设计是手绘体风格

而工具栏图标的设计是写实化风格

就会给用户一种错乱的感觉

感觉不是在浏览同一个应用

同时

同一个应用中的每个工具栏图标的风格

和图标大小也要保持一致性

这样才能使整个界面看起来既统一又丰富

其六是原创性原则

原创性就是由设计师

或者设计团队独立完成的创作

不存在挪用 复制别人设计的现象

这也是在任何设计中都强调的一个原则

但是现在的设计五花八门

原创性逐渐缺失

网络和现实生活中不断出现山寨产品

比如阿迪达斯

耐克常被人模仿

最后

我们讲一下图标设计的风格

第一点

写实化风格

写实性风格缺少吸引力

个性化不足

同时也缺少和用户之间的情感交流

一般写实风格造型相对复杂

简练不足

这使得用户与设计的碰撞与沟通相应的减少

而且如果没有把握好写实的力度和达意的标准

而是一味的把现实生活中的元素

完全的搬到设计中

便会缺少新意

降低美感

第二点

扁平化风格

在扁平化风格的APP图标设计中

颜色通常会比别的风格要明亮

因为没有了特效的修饰

色块就显得尤其重要

设计师要擅于运用色彩的鲜明对比

来提高视觉冲击力

比如运用一些对比色 互补色和色彩明度

来进行颜色的对比

漂亮的颜色对比会让图标增加美感

但并不是所有的图标都要用明亮的色彩

巧妙的使用黑白灰三种色彩

对于扁平化风格的设计也至关重要

如google的图表演变过程

将原始的阴影和浮雕效果取消

在实现扁平化设计的同时

让图标更加地时尚

第三点

手绘体风格

手绘体风格相对于拟物化风格和扁平化风格

手绘体风格是兼容并包的

手绘体可以写实

可以拟物

风格也是更加的鲜明

手绘体风格的APP图标在表现上更加随意和个性

给用户一种轻松 浪漫 随意 幽默的感觉

以上两个APP给人新颖的视觉冲击

第四点

摄影风格界面设计

摄影风格完全用摄影图片就可以代表程序应用

把摄影图片进行修剪和美化

从而当作APP图标

其识别性较高

让整个应用的阐释更加准确和轻松