系统讲述重新设计Adobe文件类型图标全过程

2018-01-24 19:10:31 来源：易采站长用户投稿作者：admin

　　本文做深化分析了最新的Adobe文件范例图标体系从头设想的思惟战历程，并分享其正在一个宏大的产物系列中开辟一个品牌体系所面对的应战时总结出去的经历。

　　做为Adobe的品牌设想团队，我们卖力为我们一切的桌里、挪动战收集产物做品牌设想。品牌元素包括许多工具，从您正在Dock栏中看到的单字母Logo，到产物的启动页里战用户利用产物中的随便功用图标皆属于品牌设想范围。

　　此中有一项是常常被疏忽却带有非常较着特性的元素是文件范例图标。文件范例是使用法式能够创立的特定文件范例的称号，好比 Word文件的文件范例是“.DOC”。文件范例图标用于区分文件的范例，您保留或翻开实践文件时屏幕上显现的谁人图标便是文件范例图标。

　　跟着本年春天最新公布的创意云，用户将看到我们一切的文件范例图标皆有了齐新的中不雅。正在那篇文章中，我将深化分析我们最新的Adobe文件范例图标体系从头设想的思惟战历程，并分享我们正在一个宏大的产物系列中开辟一个品牌体系所面对的应战时总结出去的经历。

　　1、熟悉那项事情的主要机能

　　很多客户能够出无意识到Adobe正在三个云盘上有超越100种产物战效劳：创意云、文档办理云盘战营销战阐发云盘。

　　那意味着，设想体系中的一个小变革会连带着全部产物体系发生数百项的变动。

　　当触及到文件范例图标时，人们凡是只思索使用法式的次要文件范例，好比：

　　Photoshop的 .PSD

　　Illustrator的 ·AI

　　InDesign的 ·INDD

　　但是，我们的年夜部门产物也能够导进战导出差别的帮助文件范例。(比方，单单Photoshop便能导出超越120个差别的文件范例，每一个范例有差别的图标。)

　　为了满意差别操纵体系的需供，我们的文件范例图标需求脚动将10 种差别尺寸的图标像素对齐，然后栅格化，挨包托付。图标图片会别离被转化成·ICNS(Mac)战·ICO(Windows)两种差别范例的文件。

　　当我们需求思索肯定每一个文件范例图标的巨细战格局的数目时，我们需求检察超越7000个资本(js、css、模板、图片、flash 等)文件，以便正在每一个公布周期中停止修正战办理。

　　以创意云盘的产物线正在已往四年中的增加速率去看，很较着，正在现有事情流中创立战保护那些文件范例图标所需的事情量没有容小觑。

　　第一步：检查战调研

　　正在我们开端从头设想那套图标体系之前，我们必需先查询拜访今朝正在我们产物中利用的那些图标。我们请每个产物的团队去协助我们对他们所卖力的产物中一切的文件范例图标停止汇总考核。

　　那时分您会发明，四处皆有冲突，那极可能是由两圆里果素形成的：

　　差别的团队皆具有本人的产物系统，因而正在设想气势派头上也出有同一的标准。

　　跟着新产物战其文件范例上线，单个的图标的设想是自力的，一次性被设想出去。

　　从我们的审计中搜集到的疑息，我们针对现有的文件范例系统构造做了一个俯瞰图。

　　尾先，我们产物范例构造回类文件范例图标，并穿插链接它们，看看正在多个使用法式之间同享哪些帮助文件范例，那样我们便能够消弭反复的图标。经由过程那样做，我们能够将主要文件范例图标的数目削减到之前的65%。

　　按产物范例分类的旧-文件范例图标构造图(部门)

　　然后我们将文件范例按功用分类，好比“图象”“视频”“代码”“3D”等。凡是去讲每一个文件范例图标城市有一个意味物(典范的形象)去表示它的次要功用。(好比， ·HTML文件范例会利用去暗示它的次要功用是取代码大概编码相干的。)

　　按产物功用分类的旧-文件范例图标构造图(部门)我们留意到一些文件范例利用了统一个意味物的几个版本，而另外一些则利用了一个更通用的图标去替换本该自界说的意味物。因而，我们按产物种别给每一个文件范例分派统一个意味物，并正在此根底上创立了一套文件范例的伞状分组图。那样一去，我们便能将我们产物本来的意味物数目削减一半以上。

　　旧-次级文件范例的意味图标(部门)

　　第两步：起草战设想

　　一旦我们对旧的图标体系有了片面的理解，我们即可以开端为新的图标系统造定根本的本则：

　　只要主文件范例需求利用取产物Logo联系关系色彩。举个栗子： ·PSD文件该当是蓝色的，·AI文件该当是橙色的。

　　给为多个使用法式供给撑持的帮助文件范例创立一个通用的调色板。例如道，Photoshop战Illustrator该当利用一样的·PNG文件范例图标，而没有是具有各自的规格(Photoshop的·PNG是蓝色的，Illustrator的·PNG是橙色的)。

　　一组旧文件范例图标(反例)

　　我们开端思索那个新框架的草图。

　　晚期的一些草图

　　从头设想那些图标的次要目标之一是，要正在没有减少它们自己寄义的条件下，只管简化来除过量的没必要要的元素。我们来失落了之前的tag，然后把文件范例的字母放正在了图标的底部。我们借删除图标左上角的页里合角去简化设想，缔造出更当代的视觉言语。

　　Adobe文件范例图标的演化

　　另外一个十分主要的目标是造定一套Adobe的UI设想标准。为了告竣那个目标，我们先把文件范例图标放正在一边，而是先创立了一个意味物图标数据库，此后的图标设想要末便利用那个数据库中固有的形象图标，要末便创立出取数据库里形象气势派头分歧的新图标。

　　Adobe系统图标数据库

　　最初，我们正在文件范例图标中参加了亮堂的颜色表面，以共同我们产物LOGO的现有品牌特征。那种变革不只使视觉更散焦，而且新的图标可以更好天正在漆黑的界里中展现，而我们的旧图标正在漆黑的页里里险些会被吞没。

　　正在漆黑页里上的UI色彩比照研讨

　　第三步：迭代战完成

　　正在肯定了设想标的目的以后，我们正在团体的产物情况中中测试了新的文件范例图标。正在开端的审计阶段，我们查询拜访了每一个文件范例图标会呈现正在哪些差别的操纵体系战我们本人产物的哪些范畴中。我们借检察了正在每一个利用情况中每一个图标利用差别尺寸战分辩率的合用性。

　　正在Mac战Windows电脑屏幕上，我们需求按照差别的尺寸列出一个网格视图的图标列表(最小16px，最年夜512px)。借有“明战暗”的UI成绩，好比Mac桌里上的“近来的项目”或“Spotlight搜刮”。

　　然后我们检察了我们产物的文件图标正在产物系统中会呈现的处所，好比：素材里板，媒体阅读器对话框，借有您第一次启动法式时呈现的欢送界里。

　　能够设想，那个历程很快便把我们带到了那些文件范例图标会呈现的却被我们疏忽战忘记的角降。那是一个很有代价的历程，我们必需愈加片面天来考虑，一遍又一各处来查漏补缺。

　　呈现正在差别情况中的文件范例图标(部门)

　　最初是要检察文件范例图标正在Web端战挪动端所供给的效劳中的UI真现，好比：Adobe Acrobat战Creative Cloud Libraries中。因为那些效劳也由差别的设想团队办理，我们不能不来和谐许多人，促进我们的方案去修正文件范例设想体系。

　　我们对终极的成果感应骄傲，果为新的设想言语更明晰、更分歧，代表了Adobe视觉品牌体系退化到一个新的阶段。

　　Adobe齐新的文件范例的图标体系

　　第四步：设想新的事情流

　　我们创立了一个新的事情流程，操纵剧本，只需按下一个按钮，便能够主动输出 ·PNG文件。那个新的事情形式为我们节流了几十个小时疾苦迟缓的脚工事情工夫。

　　我们借需求一个更便利的办法将那些栅格化的 ·PNG文件转化成成 .ICNS (Mac) 战 .ICO (Windows)文件。

　　正在已往，我们利用从IconFactory下载的IconBuilder插件共同我们的事情。可是，正在新的事情形式中，我们期望有更灵敏的方法去处理我们的需供：能够随便拖拽 ·PNG文件，并能主动转换输出为准确尺寸的.ICO 战 .ICNS格局。

　　正在多圆测验考试了许多第三圆东西以后，我们决议借是劳烦我们的工程师给我们做一个内部利用的东西，专项定造处理我们的需供。他们做了一个十分奇异的东西，我们喜好叫它“Captain Icon”，我们利用它挨包了一切我们的新邦畿标。(Captain Icon今朝借正在内部测试阶段，我们的工程师期望正在远期将它分享正在GitHub上，供我们的开辟者社区利用!)