005-元件名称_2

关於上篇提到的元件,对我而言,属於在讨论阶段,会比较经常拿出来讨论的元件。真正在实作以及管理画面时,这类型的元件由於外观上重复性高,使用 figma 制作画面时,强大的元件管理功能,可以让我快速的使用同一个母元件修改成我想要的样子,使用在我想要呈现的画面上。

而有些像是功能按钮的 icon,不同状态的 button ,不同显示方式的 card 等,一开始对於这些名称不了解时,除了在搜寻参考资料时会遇到一些困难之外,在想要好好整理元件时,自己也会瞬间卡住。更合况这些元件通常是需要多人协作时,不好好定位这些名称,未来都会遇到一定程度上的问题。因此此篇算是延续上篇的续集,继续介绍更多经常使用到的元件名称。

1.Badges - 会让强迫症患者牙起来的红点点,我以前很常使用「notification 的那个红点点」这种模糊的字眼与同事沟通,有些同事就会露出狐疑的眼神。後来找到了他的名称,也方便我在管理元件时,让他可以跟其他真正的 notification 做出区隔。

2.Card - 算是我目前所有元件中,内容最多的元件开头了。由於外形像一张一张的卡片,常被用来作为简略叙述这区块的功能。而因为这类型的元件其实用起来非常的广泛,我自己也还在寻找最佳的命名方式,让我在这部分的元件在管理时能够有更好的做法。

3.Checkbox - 通常为外型通常为方形外框,但也是有看过很多设计师使用了不一样的表现形式来呈现这类型的元件。而这个元件很常跟 Radio button 搞混,最大的差别就是 checkbox 可以多选,但 radio button 不行。

4.Dropdown - 下拉选单,通常我会设定一长串的 dropdown ,利用 figma 眼睛开关的功能,来达到各种不同长度的下拉选单都可以共用同一组母元件。

5.Popovers - 提示说明。有另外一种被称作 Tooltips 的提示说明,後面会提到。主要的功能用途是:Popovers 的使用涵盖比较多功能,像是可以有主副标的出现,可互动的按钮。

6.Radio button - 单一选择时使用的元件按钮,外型上通常为圆圈内含一个圆形的点点,这类型的元件就比较少被修改成其他样式的方式显示了。

7.Sliders - 滑杆,很常被用来作为价格区间,亮度等调整的元件。

8.Switch - 像是电灯按钮的开关功能,在四处都很常看到他。

9.Toast - 短时间出现的文字提示,属於会自动消失的类型,有时候也会附带着像是惊叹号等 icon 的显示。

10.Tooltips - 导引泡泡/教学泡泡。其实不太确定中文该怎麽形容这个元件,我自己比较常使用泡泡这个词来形容它。在网路上找到的说明文章里,把 Tooltips 涵盖在 Popovers 里面。这个元件很常在第一次登入 App ,或是在 App 有新功能时,为了加速使用者了解功能用途时,会使用的一种提示作法。


<<:  Day 19 ( 中级 ) 电风扇 ( 控制强度 )

>>:  【程序】职场上的那些刻板印象 转生成恶役菜鸟工程师避免 Bad End 的 30 件事 - 6

Longest Increasing Subsequence (最长递增子序列)

记录学习内容。看网路上大大们的文章和影片,做些纪录。 还不了解,内容可能有错误。 Longest I...

Day 12: ML APIs | Google Cloud

Practice Quest-Integrate with Machine Learning API...

Day 29 架设 Apache

Day 29 架设 Apache 其实介绍到今天简单架设一下 Apache,让虚拟机当作是一台服务器...

RDS程序开发

实作Visual Studio, 开发一个最简单的RDS程序. 建立一个C#主控台应用程序. 输入专...

这些日子我学到的JavaScript:Day23- localStorage

资料如何储存在浏览器? 透过 HTML 中的网页储存物件, 可以将网页中的资料储存在使用者的浏览器当...