欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2018:01:24 19:11:13 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1539个文字,预计阅读时间4分钟
导语
本文作深入剖析了最新的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文件应该是橙色的。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:经验分享:APP视觉设计工作流程

下一篇:浅谈启动页/广告页/引导页设计思想

  • 18893 文章总数
  • 2299464访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信