`

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设计规范

    详尽的移动端UI设计规范,界面设计构成、布局原理、布局原理案例、图文排版及案例、桌面图标设计及案例、系统图标设计及案例、开发单位转换

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

    界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用...具体包括软件启动封面设计,软 件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。

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

    3.1.2 设计规范 9 3.2 字体 13 3.2.1 中文字体使用理念 13 3.2.2 中文字体设计规范以及使用模式 14 3.3 颜色 16 3.3.1 设计理念 16 3.3.2 系统界面色彩使用规范 20 3.4 图标 23 3.4.1 设计理念 23 3.4.2 设计规范 25...

    UI设计规范

    ui设计的一些规范,包括字体、 颜色、图形图标、图片、布局等

    UI图标盒子

    UI设计中图标规范模版

    苹果IOS11设计规范完整版(中文)

    IOS 11设计规范中文完整版,里面有规范预览、APP架构、用户交互、系统能力、图标和图像、UI栏等规范

    UI设计(流程/界面)规范

    基于这三部分的UI设计流程是从一个产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户...

    超强干货|APP规范实例-详细的UI设计规范

    本篇这一套UI设计规范,包含了界面布局、颜色、文字规范、按钮规范、图标规范、图片规范、列表规范、控件规范、弹出浮层,超级详细。

    数字APP图标常见尺寸与设计规范.docx

    数字APP交互与UI设计

    20个国际精美设计规范.zip

    先为大家整理了设计规范中的分类情况,UI设计规范有几大分类组成,分别是:Logo、标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。 1.Logo 品牌印象的直接感受,根据页面不同背景所使用的...

    产品经理必须了解的IOS平台设计规范

    简介:此文分别从控件+布局+模态情景+手势交互+动画+字体等六个方面介绍了一些iOS平台设计的基础规范,有志于App设计的童鞋推荐收藏起来,将来要做相关的设计可以直截了当戳进来学习。1、框架UI的元素分为4类:A:栏...

    苹果页面设计规范

    1.界面设计包括布局层,图文排版层,图标层。 iPhone界面布局讲究8px原则。所有间距和标准尺寸都是应该是8px的倍数。如iPhone678的状态栏40px,导航栏88px,导航栏下导航80px,列表卡片88px,按钮88px,小标题栏64px...

    BIG牛魔王UI

    教程名称: BIG牛魔王UI第01节快速提高手绘稿逼格_ 第02节布尔运算与锚点工具绘制小图标_ 第03节微扁平图标绘制_ 第04节中国风创作思路及技法_ 第05节方形透视及纸张质感_ 第06节重拟物设计思路及技法_ 第07...

    软件工程UI设计(PS+AI)日常+期末作业原文件

    使用软件:PS、AI,主要包括以下内容,每个小文件都有原文件,直接用ps或者AI打开即可,包含最终作业“美食app-UI设计(设计10个同一个程序下相关联风格的同种功能的UI界面)” 作业2(扁平化套标) 作业3(启动图标) ...

    Google750个material-design-icons 图标

    Google750个material-design-icons 官网下载很慢,免积分下载

    2018千锋UI视频教程-安卓手机主题的规范和表现形式

    本视频主要讲解了安卓手机主题的规范和表现...锁屏页所包含的内容以及设计规范和绘制,3.主题图标的规范和绘制,以及图标的导出,4.主界面效果图的设计。 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    专为微信设计的UI库WeUI.zip

    WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、...

    react-native-ui-kitten:基于Eva设计系统暗模式的React Native UI库

    UI小猫UI Kitten是一个React Native UI库,可让您创建出色的多品牌跨平台移动应用程序。 该库基于Eva Design ... SVG Eva Icons支持-480多个通用图标Eva设计系统支持-使用符合Eva规范的基本组件构造一个界面,它将始

    关于UI规范的制订

    首先有几些现成的提纲可供参考====第一个====ArtDesigner作业规范书1定义2作业环境ArtDesigner日常作业的主要编辑工具:软件图标主要编辑工具:各种Logo设计及印刷设计:其他常用的编辑工具:2.2ArtDesigner一般作业...

Global site tag (gtag.js) - Google Analytics