交互设计学习笔记一(认识控件)

2019-11-29  本文已影响0人  一麻酱

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

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

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

(一)控件有哪些?

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

一、 Android

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

1. 初识Material Design设计规范 https://www.zcool.com.cn/article/ZMTA1MzUwNA==.html

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

2. Material Design https://material.io/components/

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

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

控件一:菜单

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

控件二:进度显示器

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

控件三:选择控制之开关

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

二、 iOS

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

官方的链接为,打开会有点慢:https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes

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

三、 MacOS

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

官方链接为:https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes

四、 Win-desktop app

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

导航类

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

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

控制类

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

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

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

直接跳转官方网站查看全部内容:https://docs.microsoft.com/zh-cn/windows/win32/uxguide/controls

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

五、 Ant design

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

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

六、 Element - 网站快速成型工具

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

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

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

这个为滑块的控件展示:

参考文章

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

上一篇下一篇

猜你喜欢

热点阅读