`

UI图标设计规范

阅读更多
图标样式应该有趣、色彩丰富且充满活力,因为现在的系统支持图标是32位图标,并且边缘非常平滑。在矢量程序中绘制完每个图标后,再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时,建议您与高水平的图形设计者一起工作,尤其是具有丰富的矢量和3D软件经验的图形设计者。

     图标设计概述的目的是让您熟悉WindowsXP的新样式,为创建图标做好准备。

图标样式特性
(1) 色彩丰富,是对WindowsXP外观的补充。
(2) 不同的角度和透视特性为图像增添了动态活力。
(3) 元素的边角十分柔和,并略微有些圆滑。
(4) 光源位于图标的左上角,同时有环绕光照亮图标的其它部分。
(5) 渐变效果使图标具有立体感,进而使图标的外观更加丰满。
(6) 投影使图标更具对比度和立体感。
(7) 添加轮廓可使图像更清晰。
(8) 日常对象(如计算机和设备)具有更现代化的个人外观。

图标设计尺寸
Windows XP图标有四种尺寸,建议使用以下四种尺寸:
(1) 48×48像素
(2) 32×32像素
(3) 24×24像素
(4) 16×16像素

图标色彩深度支持
WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑,且与背景相融合。
每个WindowsXP图标应包含以下三种色彩深度,以支持不同的显示器显示设置:
24位图像加上8位alpha通道(32位)
8位图像(256色),加上1位透明色
4位图像(16色),加上1位透明色

调色板
图标设计中使用的主要颜色。

对象的角度和分组
WindowsXP样式图标使用的透视网格:并非所有对象使用16×16的复杂图像都能获得较好效果。某些对象通常以直观图像显示:文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜)

除非创建重叠辅助对象可以更清楚地表达图标的含义,否则就可读性和完整性而言,还是应使用直观图像。还应考虑如何按组查看图标,以便确定如何将对象分组。

投影
使用投影后,WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果,本指南的后面部分将对此进行描述。若要为图像添加投影,请在 Photoshop中双击图像的图层,并选择Drop Shadow。然后将Angle更改为135,Distance更改为 2,Size更改为2。此时投影为75%不透明黑色。

轮廓
绘制XP样式图标时,为图像添加轮廓可使之更清晰,并可保证图像在不同背景色上都具有较好效果。

概念
设计图标时,请考虑以下因素:
使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现,以及如何作为图标集的一部分使用。考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时,请尽可能使其大众化。如果图标中的图像由多个对象组成,应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16×16的尺寸大小,还可考虑删除某些对象或简化图像使之更容易辨认。

透明工具
将Gif Movie Gear(GMG)打开一个对话框,其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG中选作透明背景色的颜色)。重复所有4位和8位帧。若要保存图标,请选择 File->Save Icon As...。

创建工具栏
Windows工具栏图标除不使用投影之外,使用的样式与其它图标相同。由于工具栏图标非常小,建议您使用简单的图像。如果以直观方式显示图像即可清晰地表达图标的含义,则不必使用其它复杂方式。

创建AVI
WindowsXP使用8位AVI。创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像,然后将其拖动到GMG 中。请按以下指导创建8位图标。若要使用GMG保存AVI,请转至File->Export As->AVI file。创建.avi文件时,请考虑以下因素:使用品红(R255 G0 B255)作为背景透明色。在Photoshop中,重要的一点是不要出现杂散像素。请将填充能力设置为0,并确认未选中取消锯齿
分享到:
评论

相关推荐

    滴滴乘客端UI设计规范.pdf

    3. 图标和按钮:各种功能按钮的设计规范、尺寸、形状、颜色以及使用情境,以及图标设计的标准和图标库的建立。 4. 导航结构:滴滴应用内页面导航的布局结构,包括顶部导航栏、底部导航栏等元素的风格和尺寸。 5. ...

    AmazeUI 图标

    此外,使用CSS类名引用图标是另一种常用的方法,这种方法的好处在于可以通过更改CSS属性轻松地调整图标的颜色、大小以及其它视觉样式,以符合设计规范和用户界面需求。 除了基础的使用方法,AmazeUI图标库还可能...

    windows 微软软件UI界面设计规范

    《Windows微软软件UI界面设计规范详解》 UI界面设计,作为软件专业化和标准化的重要组成部分,旨在提升用户体验,强化品牌形象。Windows软件UI设计涵盖了多个关键环节,包括启动封面、软件框架、按钮、面板、菜单、...

    UI设计规范详解 UI设计规范

    3. **图标设计**:图标是UI中的重要元素,它们需要统一风格,如扁平化、线性或填充式。规范应包含各种状态(如选中、禁用)和尺寸的图标标准。 4. **布局与网格系统**:布局决定了元素在屏幕上的排列方式。网格系统...

    云平台UI统一设计规范

    4. **图标设计**:图标是UI中的重要元素,规范会提供一套标准的图标库,涵盖各种功能和状态,确保图标的一致性和识别性。每个图标都有其特定含义,应避免引起混淆。 5. **布局与网格系统**:网格系统有助于保持界面...

    信息化系统建设-UI设计规范.pdf

    图标作为UI中的重要组成部分,不仅要求设计理念清晰,还需要按照一定的设计规范来实现视觉效果的统一。换肤功能的加入可以允许用户根据个人喜好或适应不同的使用环境,调整界面风格。 控件标准是本规范文档中最为...

    移动端UI设计规范

    移动端UI设计规范是移动应用开发中的重要组成部分,它关乎到用户体验和产品的易用性。这份详尽的规范涵盖了多个关键领域,旨在为设计师提供一套完整的指导原则,以创建出高效、美观且一致的用户界面。 首先,我们来...

    UI基本设计规范

    一套完善的UI设计规范会涵盖色彩、字体、图标、按钮等基础组件的设计标准,还包括间距、尺寸、状态变化等规则。例如,"《UI培训》.pptx"可能会系统地讲解如何建立设计系统,提供设计规范的构建步骤和案例分析。通过...

    ui设计规范大全

    《UI设计规范大全》 UI设计,全称用户界面设计,是软件开发过程中的关键环节,涉及用户体验、视觉效果和功能性等多个方面。本资源集合涵盖了丰富的UI设计实用规范和指导方法,旨在帮助设计师提升技能,无论是新手...

    webui图标素材

    这些图标可能已经按照特定的设计规范和尺寸制作,易于集成到现有的项目中,减少了开发者手动设计和调整图标的时间。 “基本满足一个web系统的图标使用”意味着这个素材包的覆盖范围广泛,包括了网页应用中常见的...

    苹果UI设计规范

    ### 苹果UI设计规范详解 #### 一、概述 苹果UI设计规范是苹果公司针对其产品和服务制定的一套详细的设计指南。这份文档不仅涵盖了macOS系统的UI设计原则,还包括了iOS界面的设计准则,旨在帮助开发者和设计师创建...

    软件UI设计规范.docx

    "软件UI设计规范" 软件UI设计规范是软件开发过程中不可或缺的一部分,它旨在确保软件的用户界面达到一定的质量标准,从而提高用户体验和软件的可用性。本文将对软件UI设计规范进行详细的介绍和解释。 首先,软件UI...

    信息化系统UI设计规范.docx

    信息化系统UI设计规范是指导界面设计的重要文档,旨在提升用户体验,增强系统易用性,确保设计的一致性和专业性。以下是对文档中涉及的关键知识点的详细说明: 1. **范围**: 这个规范涵盖了从基本设计原则到具体...

    APP UI设计规范

    ### APP UI设计规范详解 #### 一、引言 随着移动互联网的发展,用户对应用程序的体验要求越来越高。良好的用户界面(UI)设计不仅能够提升用户体验,还能有效提高产品的市场竞争力。本篇文章将详细介绍iOS和Android...

    新浪网UI设计规范

    【新浪网UI设计规范】是新浪产品设计团队为了提升用户体验和设计质量,针对WEB产品线制定的一套详细设计准则。这套规范旨在确保设计的一致性、逻辑性和扩展性,同时兼顾用户的文化背景与习惯,体现出人性化的设计...

    安卓UI设计规范

    综上所述,安卓4.1的UI设计规范着重于用户体验、一致性和创新,特别是三星的抽屉式操作界面,它代表了安卓系统在界面设计上的不断进步。对于开发者来说,理解和遵循这些规范,不仅可以打造出高质量的应用,还能赢得...

    12580第三方服务UI UE设计规范

    【12580第三方服务UI UE设计规范】 本规范主要针对无限讯奇信息技术有限公司的合作伙伴,旨在确保其合作业务产品在开发或升级过程中与12580综合信息门户保持一致性和兼容性的视觉和交互体验。这不仅关乎界面的易用...

    andriod UI图标

    在设计Android图标时,应遵循Google的Material Design指南,它提供了图标设计的规范,包括颜色、形状、尺寸、阴影等。例如,使用清晰的轮廓,避免过多的细节;颜色要统一且对比鲜明,以保证在各种背景下都能清晰可见...

    软件UIUE技术设计规范.pptx

    "软件UIUE技术设计规范" 软件UIUE技术设计规范是为了保证各类应用系统在开发实现过程中的页面风格统一,制定一套完整的UI规范。界面是系统/平台与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且...

Global site tag (gtag.js) - Google Analytics