使用AI做UI设计系列教程：效果、外观面板和质感表现(下).pdfVIP

使用A I做U I设计系列教程 ：效果、外观面板和质感表现 （下 ） Hi ！又到了教程时间了 在系列教程 《使用A I做UI设计系列教程 ：效果、外观面板和质感表 现 （上 ）》里 ，讲述了 A do be Illust rat o r 里面的效果、外观面板的一些基本概念 ； 上一个教程 《使用A I做UI设计系列教程 ：效果、外观面板和质感表现 （中 ）》里 ，介绍了生活中常 见的几种材质的光学特性 ，并举了两个例子 ，介绍了如何用 A I 表现这样的材质 本次教程将要用一 个实例 ，介绍一个图标的质感表现 ，是如何使用 A I 里面的效果等手法来表现的 嗯对了 ，用来作 为 「模特」的图标就是这个 ，一个浏览器图标 ： 不过 ，在具体讨论这个图标是如何表现之前 ，还是先说说关于图标的一些基本知识吧 首先 ，大家 都可以看出来 ，这个图标是一个 「拟物化」 ，或者可以称作 「风格化」的图标 这种风格的图标使 用了类似阴影、渐变、高斯模糊、羽化等手段 ，来表现材质、光照、层次感等 ，使图标看上去比较 像现实世界中存在的一个物 体那样 通过真实世界中对应的隐喻 ，来让用户明白这个图标背后 A pp 的作用 ，并唤起用户的情感 当然了 ，与此像对应的 ，就是 「扁平化」风格的图标了 「扁平化」风格的图标 ，抽离掉了光影、 材质 ，只使用简单的图形、色彩来表现 「拟物化」与 「扁平化」风格的对比 ，大概就是下面的 样子 ： 大家应该都知道了 ，从 2012 年起 ， 「拟物化」保皇党与 「扁平化」革命军开始爆发流血冲突 特 别是在 2012 年 WW DC 后 ，由于 iO S 6 仍旧使用传统的 「拟物化」风格 ，造成 「扁平化」革命军 的不满 ，令流血冲突更是升级成为了全面战争 战争大概持续了一年 ，随着于 2013 年 WW DC 发 布的 iO S 7 系统内置的图标全面改为 「扁平化」风格 这场战争以 「扁平化」革命军胜利 ， 「拟 物化」保皇党的败走而终结 为什么会形成 「拟物化」保皇党和 「扁平化」革命军两派 ，并且爆发战争呢 ？在前些日子有不少讨 论了 ，每个设计师都有自己的说法 对此 ，我个人的观点 嘛 ，举个例子来说吧 ：以前 ，人们都过得 很困苦 ，很多人平时连馒头、面条、米饭都舍不得吃 ，一般吃饭就吃窝头、棒渣粥 ，就着点儿咸菜 ，像饺子这种 「美食」更 是一年才舍得吃一顿 改革开放后 ，大家都过上好日子了 ，就算是顿顿吃 饺子也吃得起 于是很多人经常吃大鱼大肉 ，哪个肉放的多、油放的多、盐放的多就吃啥 结果 是 「三高」啊 ，心血管疾病的病患数量急剧升高 再后来 ，很多人又开始回归粗粮、蔬菜等食品了 ，尽管大鱼大肉地吃他们也绝对负担得起 也就是说 ，虽然现在很多人喜欢吃粗粮 ，不过跟以前那会儿是有本质的区别的 区别就是 ，现在我 们可以选择吃精粮还是吃粗粮 ，以前没有这种选择 GUI 的演化也是如此 从前在 A pple II 和 IBM C 那个时代啊 ，不仅电脑屏幕小 ，分辨率还都很低 ，而且色彩表现能力极 为有限 比如曾经很流行的 ，曾用于 W indows 1.x、2.x 系列的 CGA 标准 ，一般分辨率只是 320×200 ，只有 16 种颜色可以显示 在这样的情况下 ，GUI 的表现受到了极大的限制 ，举几个古 时候的 GUI 作为例子 ： 这是 Visual Basic DO S 版 （嗯 ，V B 这货还有 DO S 版 ）的界面创建器 ，工作在 DO S 的字符模 式下 注意看 ，这个界面的一切元素 ，都是基于类似制表符、空格、小数点这样的字符来实现的 当时很多基于 DO S 带 GUI 的程序 ，比如晚期 DO S 里内置的ht t p://edit .co m 文本编辑器 ，都是通过 类似这样的 ，基于字符显示模式来表现 GUI V B f o r DO S 可以说是这这种基于字符 GUI 的极致了 ，仅用字符就实现了窗体和几乎所有常用的控件 ，甚至实现了窗体的阴影效果 现在这种字符 GUI 在某些场合、领域依然存在 ，普通人比较容易接触到的就是 C 机的 BIO S 界面 ，还有 Linux/Unix 里的一些程序至今依然使用这样的字符 UI 这个是我自己截取的 W indows 2.03 的截图 ，工作在 DO S 的图形模式下 ，V GA 屏 幕 （64 0×4 80 ，16 色 ） 可以看到图标都是简单的黑白图