📄 eclipse 用户界面指南.htm
字号:
width=16><B><FONT color=#09448d>指南 1.8</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>如果出现一个错误需要用户的明确输入或者立刻注意，使用模态对话框。
</FONT></BLOCKQUOTE>
<HR>
<BR>如果在产品中出现编程错误，就必须使用错误对话框报告给用户。同时你也必须使用workbench的错误记录机制来记录错误。这样就给了用户机会，可以重启平台，卸载相关的功能，以及和系统管理员联系。
<P>Plug-in必须在错误对话框的详细内容区域中提供以下信息：
<UL>
<LI>提供者名字
<LI>plug-in名称（用户友好的名字）
<LI>plug-in ID
<LI>版本 </LI></UL><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16><B><FONT color=#09448d>指南 1.9</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>如果产品中出现编程错误，使用模态对话框，并且log出错信息。</FONT></BLOCKQUOTE>
<H2><A name=Introduction_VDG></A>可视化设计</H2>
<P>所有为Eclipse创建的可视化用户界面元素都遵?shy;一个公共风格，称做<STRONG><I>Eclipse可视风格</I></STRONG>或者<STRONG><I>Eclipse风格</I></STRONG>。在下面的指南中，你可以找到基本的设计信息，以及在基于Eclipse框架的工具中，实现Eclipse风格图标和向导图片的规范。
<P>遵?shy;这些指南可以保证可视用户界面元素以及它们在Eclipse工具和plug-in中实现的一致性。这些元素的一致性包括：可视元素的语意，风格以及实现上的考虑。下面的部分将讨论这些话题。
<!-- CONSISTENCY SECTION STARTS --><!-- Consistency -->
<H4><A name=Consistency_VDG>一致性</A></H4>
<P>在Eclipse风格图标的发展中，形成了一种用来描述用户界面中不同概念的可视化语言。这些概念现在通过一大批小的可视符号表现出来，
通过使用Eclipse工具你会知道有很多这样的可视符号。</P>
<P>为了保证用户获得一致的视觉体验，通过工具理解这些概念，并且避免混淆，
我们建议你尽可能重用Ecplise风格图形元素。</P>
<H4><A name=ConsistencyConcept_VDG>图标重用</A></H4>
<P>在Eclipse可视风格中已?shy;创建了很多图标，因此你很可能在里面找到你需要的图标或图形元素。下表就是一个例子。每个元素有自己特定的含义，因此使用时要注意让它们保持?shy;有的含义。</P>
<P><IMG height=423 alt="metaphor example" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/metaphor_concepts.gif"
width=658 border=0></P>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.1</FONT></B>
<BLOCKQUOTE><FONT color=#09448d>重用核心可视化概念来保持它们在Eclipse
plug-in中表现方式和含义的一致性。</FONT><!-- ICON SPECIFICATION SECTION STARTS -->
<!-- Icon Specifications / Icon Palettes --><BR></BLOCKQUOTE>
<H3><A name=IconSpecsPal_VDG>图标调色板</A></H3>
<P>创建Eclipse风格图标时可以采用多种调色板。有3种不同的调色板用来创建3种不同的图标状态，如下：</P>
<UL>
<LI><STRONG>256 色调色板</STRONG>
用于图标的活动或者选中状态，也称为图标的“彩色”状态。
<LI><STRONG>8 色灰度调色板</STRONG>
用于preseptive，视图，工具条，工具条向导以及局部工具条图标的可用状态。
<LI><STRONG>2 色灰度调色板</STRONG>
用于工具条，工具条向导以及局部工具条图标的不可用状态。 </LI></UL>
<H4>256 色调色板</H4>
<P>Eclipse风格图标必须用一个特殊的256色调色板来设计，该调色板包括20个标准色和236个用户自定义颜色，如下。
<P><IMG height=193 alt=newwin256.act hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/256palette.gif"
width=194 border=0> </P>
<P><STRONG>注意：</STRONG>虽然显示的调色板是基于来自Adobe Photoshop的标准windows
.aco调色板，但是，这两种调色板是不同的，而且只有显示的调色板才能用于Eclipse风格图标的创建。</P>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.2</FONT></B>
<BLOCKQUOTE><FONT color=#09448d>使用Eclipse
256色调色板来创建所有类型图标的活动或选中状态。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<H4>8 色灰度调色板</H4>
<P>为了创建你全彩色图标的灰度可用状态的版本，你会需要用到下面的8 色调色板：
</P><BR><IMG height=80 alt="enabled colors" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/enabledcolors.gif"
width=401 border=0>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.3</FONT></B>
<BLOCKQUOTE><FONT color=#09448d>使用Eclipse 8
色调色板来创建透视图，视图，工具栏，工具栏向导和局部工具栏图标的可用状态。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<H4>2 色灰度调色板</H4>
<P>To create grayscale, disabled versions of your full color and enabled icons,
you will need to use a subset of the 8 color palette, that consists of the 2
colors shown below: <BR>为了创建你的全彩色图标的灰度的不可用状态版本，你可以用8
色调色板的一个子集，其中包括以下两种颜色：</P><IMG height=50
alt="disabled colors" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/disabledcolors.gif"
width=158 border=0>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.4</FONT></B>
<BLOCKQUOTE><FONT color=#09448d>使用Eclipse 2
色调色板创建工具条，工具条向导和局部工具条图标的不可用状态。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<!-- Icon Specifications / Icon Types -->
<H3><A name=IconSpecsTypes_VDG>图标类型</A></H3>
<P>Eclipse风格图标都被划分成不同的类别，这样可以根据它们在用户界面中的不同位置进行优化。下面就显示了不同的图标分类和它们所处的位置。（译：在下面图标类型的章节中，图标类型只作部分?shy;译（如：View
Icon就?shy;译成View图标），以保证文字和下图的对应一致。）</P><BR><IMG
height=345 alt="icon types" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/icon_types.gif"
width=539 border=0> <BR>
<P><STRONG><FONT size=4>A </FONT>Product</STRONG>
<BR>Prodcut图标表示产品的标识，通常处于窗口标题栏的最左边，在透视图，文档和产品名称的前面。</P>
<P><STRONG><FONT size=4>B </FONT>Perspective 和
Fastview</STRONG>
<BR>Perspective和Fastview图标在workbench的左下方。这些图标让用户可以快速地在不同的透视图之间切换，或者调用被作为Fastview创建的视图。</P>
<P><STRONG><FONT
size=4>C </FONT>Toolbar<BR></STRONG>Toolbar图标在workbench顶部的主工具条中。
这些图标都可以调用命令，包括全局命令和编?shy;器内的命令。</P>
<P><STRONG><FONT size=4>D </FONT>Toolbar
Wizard<BR></STRONG>Toolbar Wizard图标可以在workbench顶部的主工具条中找到。
这些图标带有棍子和火花图形，很容易看到。选中这些图标的一个会启动一个向导。</P>
<P><STRONG><FONT
size=4>E </FONT>View<BR></STRONG>View图标位于workbench中每个视图标题栏的左边。
这些图标表示了每个视图的功能。</P>
<P><STRONG><FONT size=4>F </FONT>Local (View)
Toolbar<BR></STRONG>Local (View)
Toolbar图标位于workbench中每个视图标题栏中View图标的右边。
这些图标会调用那个视图中的命令。局部工具条图标也可以出现在所有的菜单，包括主菜单，下?shy;菜单和上下文菜单中。
</P>
<P><STRONG><FONT size=4>G </FONT>Model Object<BR></STRONG>Model
Object图标可以在workbench中的tree视图，list视图和编?shy;器标签（Editor
Tab）中找到 （例如文件，文件夹，项目等等）。</P>
<P><STRONG><FONT size=4>H </FONT>Object
Overlay<BR></STRONG>Object
Overlay图标也位于tree视图或者list视图中。它们附在模型对象图标的角上，用来表示某些变化。
</P>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.5</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>在用户界面中适当的位置使用适当的图标。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<!-- Icon Specifications / Icon Size & Placement -->
<H3><A name=IconSpecsSize_VDG>图标尺寸和放置</A></H3>
<P>除了少数例外，Eclipse风格图标一般设计在 16×16
像素组成的区域内。在该区域内，15×15像素的空间是给图像本身用的，剩下一行和一列空像素，可以让你把图像放在界面中合适的位置。注意看一下下图例子中空像素的位置。
图标按照特定位置进行裁减以保证在用户界面中可以排列整齐。</P>
<P>下面的图显示了不同类型图标的正确尺寸，以及他们在所分配的屏幕空间中合适的摆放位置。</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top width=200><IMG height=185 alt="view real estate" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/view_realestate.gif"
width=180 border=0> </TD>
<TD vAlign=top>
<P><B>View
图标<BR></B><BR>最大16×16像素，总是居中。<BR>空像素位于左边和下面。</P></TD></TR>
<TR>
<TD vAlign=top><IMG height=185 alt="perspective real estate" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/perspective_realestate.gif"
width=180 border=0> </TD>
<TD vAlign=top>
<P><B>Perspective 图标</B> <BR><B>Fastview 图标</B> </P>
<P>最大16×16像素，总是居中。<BR>空像素位于右边和下面。</P></TD></TR>
<TR>
<TD vAlign=top><IMG height=185 alt="toolbar real estate" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/toolbar_realestate.gif"
width=180 border=0> </TD>
<TD vAlign=top>
<P><B>Toolbar 图标<BR></B><B>Toolbar Wizard 图标</B><BR><B>Local Toolbar
</B><B>图标</B></P>
<P>最大16×16像素，总是居中。<BR>空像素位于左边和上面。</P></TD></TR>
<TR>
<TD vAlign=top><IMG height=185 alt="view real estate" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/view_realestate.gif"
width=180 border=0> </TD>
<TD vAlign=top>
<P><B>Model Object
图标<BR></B><BR>最大16×16像素，总是居中。<BR>模型对象图标不能大于15像素高。
<P></P></TD></TR>
<TR>
<TD vAlign=top><IMG height=105 alt="overlay real estate" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/overlay_realestate.gif"
width=180 border=0> </TD>
<TD vAlign=top>
<P><B>Object Overlay
图标<BR></B><BR>对象掩模是唯一的一个例外，它不是16×16像素大小的。
<BR>最大7像素宽 ×
8像素高，总是居中。<BR>该图标必须有一条白色的外边线用来把它和其附着的图标分开。
<BR>关于如何在不同类型的对象掩模图标上使用外边线，查看下一节图标定位。</P></TD></TR></TD></TR></TBODY></TABLE>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.6</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>对于每个类型的图标遵?shy;其特定的尺寸规范。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.7</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>按照图示的特定位置裁减图标以保证其在用户界面中排列整齐。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<!-- Icon Specifications / Icon Positioning --><BR><BR>
<H3><A name=IconSpecsPos_VDG>图标定位</A></H3>
<P>为了遵?shy;不同类型图标在其所分配的屏幕空间中特定的尺寸和摆放位置，下面的定位指南可以让这些元素相对于其他元素排列整齐，并创建出一个组织很好的，美观的用户界面。（所有的度量单位为像素。）</P>
<H4>概况</H4><IMG height=350
alt="overview image of the four different icon position areas detailed below"
hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/iconposition_main.gif"
border=0> <BR><BR><BR>
<H4>1. Toolbar 图标</H4>
<P class=sub>（包括Toolbar图标和Toolbar Wizard图标）</P>
<P><IMG height=260 alt="toolbar specifications" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/toolbar_specs.gif"
border=0> </P>
<TABLE cellSpacing=2 cellPadding=4 border=0><!-- 1st row : table categories -->
<TBODY>
<TR>
<TD width=40 rowSpan=12></TD>
<TD> </TD>
<TD>
<DIV align=center><STRONG>项目</STRONG></DIV></TD>《
<TD>
<DIV align=center><STRONG>定位和间隔</STRONG></DIV></TD></TR><!-- 2nd row : beginning of table contents -->
<TR>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -