第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

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

时间:2018-01-24 14:58来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
本文作深入剖析了最新的Adobe文件类型图标系统重新设计的思想和过程,并分享其在一个庞大的产品系列中开发一个品牌系统所面临的挑战时总结出来的经验。 作为Adobe的品牌设计团队,我们

  本文作深入剖析了最新的Adobe文件类型图标系统重新设计的思想和过程,并分享其在一个庞大的产品系列中开发一个品牌系统所面临的挑战时总结出来的经验。

  

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

  作为Adobe的品牌设计团队,我们负责为我们所有的桌面、移动和网络产品做品牌设计。品牌元素囊括很多东西,从你在Dock栏中看到的双字母Logo,到产品的启动页面和用户使用产品中的任意功能图标都属于品牌设计范畴。

  其中有一项是经常被忽略却带有十分明显特征的元素是文件类型图标。文件类型是应用程序可以创建的特定文件类型的名称,比如 Word文件的文件类型是“.DOC”。文件类型图标用于区别文件的类型,你保存或打开实际文件时屏幕上显示的那个图标就是文件类型图标。

  随着今年秋天最新发布的创意云,用户将看到我们所有的文件类型图标都有了全新的外观。在这篇文章中,我将深入剖析我们最新的Adobe文件类型图标系统重新设计的思想和过程,并分享我们在一个庞大的产品系列中开发一个品牌系统所面临的挑战时总结出来的经验。

  一、认识这项工作的重要性能

  许多客户可能没有意识到Adobe在三个云盘上有超过100种产品和服务:创意云、文档管理云盘和营销和分析云盘。

  这意味着,设计系统中的一个小变化会连带着整个产品系统产生数百项的更改。

  当涉及到文件类型图标时,人们通常只考虑应用程序的主要文件类型,比如:

  Photoshop的 .PSD

  Illustrator的 ·AI

  InDesign的 ·INDD

  然而,我们的大部分产品也可以导入和导出不同的辅助文件类型。(例如,单单Photoshop就能导出超过120个不同的文件类型,每个类型有不同的图标。)

  为了满足不同操作系统的需求,我们的文件类型图标需要手动将10 种不同尺寸的图标像素对齐,然后栅格化,打包交付。图标图片会分别被转化成·ICNS(Mac)和·ICO(Windows)两种不同类型的文件。

  当我们需要考虑确定每个文件类型图标的大小和格式的数量时,我们需要查看超过7000个资源(js、css、模板、图片、flash 等)文件,以便在每个发布周期中进行修改和管理。

  以创意云盘的产品线在过去四年中的增长速度来看,很明显,在现有工作流中创建和维护这些文件类型图标所需的工作量不容小觑。

  第一步:审查和调研

  在我们开始重新设计这套图标系统之前,我们必须先调查目前在我们产品中使用的那些图标。我们请每一个产品的团队来帮助我们对他们所负责的产品中所有的文件类型图标进行汇总审核。

  这时候你会发现,到处都有矛盾,这很可能是由两方面因素造成的:

  不同的团队都拥有自己的产品体系,因此在设计风格上也没有统一的规范。

  随着新产品和其文件类型上线,单个的图标的设计是独立的,一次性被设计出来。

  从我们的审计中收集到的信息,我们针对现有的文件类型体系结构做了一个鸟瞰图。

  首先,我们产品类型组织归类文件类型图标,并交叉链接它们,看看在多个应用程序之间共享哪些辅助文件类型,这样我们就可以消除重复的图标。通过这样做,我们可以将次要文件类型图标的数量减少到之前的65%。

  

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

  按产品类型分类的旧-文件类型图标结构图(部分)

  然后我们将文件类型按功能分类,比如“图像”“视频”“代码”“3D”等。通常来讲每个文件类型图标都会有一个象征物(典型的形象)来表现它的主要功能。(比如, ·HTML文件类型会使用 来表示它的主要功能是与代码或者编码相关的。)

  

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

  按产品功能分类的旧-文件类型图标结构图(部分)我们注意到一些文件类型使用了同一个象征物的几个版本,而另一些则使用了一个更通用的图标来替代本该自定义的象征物。于是,我们按产品类别给每个文件类型分配同一个象征物,并在此基础上创建了一套文件类型的伞状分组图。这样一来,我们就能将我们产品原来的象征物数量减少一半以上。

  

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

  旧-次级文件类型的象征图标(部分)

  第二步:草拟和设计

  一旦我们对旧的图标系统有了全面的了解,我们便可以开始为新的图标体系制定基本的原则:

  只有主文件类型需要使用与产品Logo关联颜色。举个栗子: ·PSD文件应该是蓝色的,·AI文件应该是橙色的。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕