交互设计学习笔记一（认识控件）

交互设计是近几年开始热起来的概念，它大部分情况下指的是面向屏幕的交互，也有少部分指的是实物的装置。科班的教育会让你从调研开始，围绕一个课题一步步提出解决方案，从思维开始锻炼你的交互设计能力，但实际上交互设计究竟学的是什么？

我认为交互设计的学习，应该像语言、工具的学习一样，先认识它，学会使用它，最后才考虑怎样把它用好。从一个个组件开始到整体，最后灵活运用。因此，交互设计应该从控件开始学习（以下的交互设计特指界面上的交互）。

文章主要是个人的学习记录，学习方法参考了网络上的文章[1]，希望可以给同是新人的你们一点参考。

（一）控件有哪些？

每个平台的划分都不一样。以下将介绍iOS、Android、等平台的控件规范。

一、 Android

安卓的规范主要参考的是Material Design，官方的网站给出的控件多达23个，要逐个逐个解释会很无聊。这里给出一篇参考文章和官方的链接，可以更快地了解里面有什么控件。

先看最后部分的“MD设计规范-组建”就可以了。其他的感兴趣再继续浏览。

这部分需要一个个看，可以先浏览全貌，有基本的了解，之后再逐个细看。

另外，这里也大概介绍几个控件，以帮助大家建立起对它的概念。

控件一：菜单

安卓系统上，长按一个区域的时候会弹出菜单，选择对它的操作方式。

控件二：进度显示器

在执行一个进程的时候，在页面上端会出现一个进度条，在打开网页的时候经常见。

控件三：选择控制之开关

选择控制的方式总共有三种：单选框、多选框、开关。这里是其中一种。

iOS官方的控件分类为：按钮、文本菜单、编辑菜单、标签、页面控制、选择器、进程指示器、刷新控件、分段控件、滑块、步进器、开关、文本字段。

从名称上看，iOS的控件和Android的大同小异，差别在于具体的使用上，不同的平台有不同的规则。以后还会出一篇iOS和Android的设计规范差异的文章，这个阶段可以大概先有个印象，在网上也可以搜索到大量这样的总结文章，感兴趣的可以提前阅读。

是Mac端上的设计语言，和iOS的基本一致。

这里指的是windows系统上的设计规范，其中展示的一些控件包括：

导航类

· 标签页：在单独的标签页上向用户显示相关信息。

· 树视图：允许用户展开一个文件夹查看里面的内容。

控制类

· 方向键控制：允许用户显示或隐藏其他信息，包括数据、选项或命令。

· 滑块：允许用户从连续的值范围中进行选择。

· 步进器：允许用户在其关联的数字文本框中以增量方式更改值（+-1之类的）

另外一些设计团队也开发了自己的设计语言，感兴趣的可以收藏阅读。

链接：https://ant.design/index-cn

蚂蚁金服旗下的设计团队。

这个网站总结了网页端各种控件及其用法，可以直接查看代码，看完这个就可以大致了解网页设计了。

它的控件规范的叙述方式比上面Windows的要好，因为它的列表里有更为明确的分类，而且有更多可以操作的图形化控件，可以直观了解实际的情况是怎样的。

链接：https://element.eleme.cn/#/zh-CN/component/layout

这个为滑块的控件展示：

参考文章

[1] 入门交互设计的四个步骤！https://mp.weixin.qq.com/s/Eo_htRy4aJbT0ERByJWxbw

最后编辑于：2019.11.29 13:23:40