Dmitry Ukolov设计负责人提供的图片中按钮的历史:文本链接,拟态,平面和材料设计。
一切如何开始
在Internet的早期,所有内容都是文本颜色链接。后来,出现了按钮以指示转换或开始操作,可点击的广告横幅,大小与现代按钮的大小类似,等等。过去通过高光,图像gif,输血和彩虹图案的动画来吸引人们注意的按钮,但这主要涉及网站。
在界面中,开发人员使用其他方法将按钮与屏幕的其余内容分开。这样做是由于阴影或笔触造成的,此时按钮本身保持中性,并且肯定不会浮华。而且,如果您仍然使用颜色,则似乎是您在颜色中随机插入了一个滴管。
我敢肯定所有这一切都有技术上的解释,但是我不是技术专家,我以自己的眼睛和情感欣赏它。
![图片](https://habrastorage.org/getpro/habr/post_images/c06/003/cb5/c06003cb582d76752abdd9a5cf795d53.png)
拟态和按钮
还有更多!按钮变得越来越复杂:它们增加了体积,用不同的颜色绘制以吸引更多用户的注意,使它们成为“玻璃”,并呈现出一种形状-不仅是矩形和带有圆角的矩形,而且还具有圆形和椭圆形,有时甚至是按钮的形状很难称呼一些具体的东西。拟态和所有这些在相当长的一段时间内主导着网页设计。多亏了Apple,Apple彻底革新了移动设备,并开始将常用的物理工具转移到移动界面,以使用户不会迷路。应用程序和游戏的开发人员竞选苹果公司,然后就开始了-计算器,笔记,音频播放器,DJ混音器等。
![图片](https://habrastorage.org/getpro/habr/post_images/05d/1b2/01b/05d1b201be508c9204550fe196478919.jpg)
平面
. , , , . , , ! , , , , , . , , , – .
. , , , , – . . , , - - . , . , , , , . « », .
![图片](https://habrastorage.org/getpro/habr/post_images/28f/79a/812/28f79a812cc0dfee1e0035c291236b2e.jpg)
![图片](https://habrastorage.org/getpro/habr/post_images/2d0/75d/4dd/2d075d4dd06e8cdc6a37975ff9804f78.gif)
Material design
Material design, , . Google : , , « », . . Google.
![图片](https://habrastorage.org/getpro/habr/post_images/851/604/533/851604533e77a38febdf3d6ac7ace955.png)
![图片](https://habrastorage.org/getpro/habr/post_images/abb/849/5d4/abb8495d4136c13803e96a1a3d743ed7.png)
«»
![图片](https://habrastorage.org/getpro/habr/post_images/d46/996/90c/d4699690c9a80ac947bbb9d6d4553012.png)
![图片](https://habrastorage.org/getpro/habr/post_images/df8/cdb/538/df8cdb538fdc517e3da02ca3008f43fa.png)
Material design
CTA (Call to Action)
: «», «», «» .. . , , , , ..
![图片](https://habrastorage.org/getpro/habr/post_images/957/8c3/97f/9578c397fedbfde451f187402bb001d0.png)
«» Youtube
– , . , . , , – .
![图片](https://habrastorage.org/getpro/habr/post_images/1ff/a4a/6fb/1ffa4a6fb86c15c79ee79175cb79e46c.gif)
lagenceversions
![图片](https://habrastorage.org/getpro/habr/post_images/cf4/741/46a/cf474146a5c2eac8e19dd3665556e903.gif)
beaconrelief
![图片](https://habrastorage.org/getpro/habr/post_images/068/403/9b5/0684039b5dbced2109db8f1f06e1ec76.gif)
aconstitucion.com.ar
«»
. , . .
![图片](https://habrastorage.org/getpro/habr/post_images/30c/a35/0fa/30ca350fa0d4f0e82de7ee6621b05893.gif)
villerdl.ca
, . .
![图片](https://habrastorage.org/getpro/habr/post_images/b3c/f46/cf1/b3cf46cf17ae76de18e64891e62b88c2.png)
brandlovescore
, , , . , - ?
尝试,试验,建议和发明!
按钮从2009年到2017年的变化方式。
![图片](https://habrastorage.org/getpro/habr/post_images/4f3/23e/d81/4f323ed810c5e8320c59145184142dd0.gif)
Wojciech Dobry
![图片](https://habrastorage.org/getpro/habr/post_images/bd8/4ee/79b/bd84ee79bf04be9884ae5412adf094c6.gif)
塞思·科伦(Seth Coelen)