📄 eclipse 用户界面指南.htm
字号:
alt="sample of a project nature overlay in the upper right corner of the model object icon"
hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/ovr_projectnature_sample.gif"
width=180 border=0> </P><STRONG>辅助掩模</STRONG>
<P>辅助掩模用于各种类型的Tree视图。这种类型的掩模完全堆叠于模型对象 16×16
图标空间的左下角位置。</P>
<P><IMG height=180 alt="" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/ovr_auxiliary.gif"
width=180 border=0></P>
<P>辅助掩模可以很快地显示对象的<STRONG>状态</STRONG>。辅助掩模的例子有<EM>warning</EM>,<EM>error</EM>,<EM>failure</EM>,和<EM>success</EM>。
</P>
<P><STRONG>Java 掩模</STRONG></P>
<P>Java掩模用于
Outline,Hierarchy和Package视图。Java掩模附在模型对象图标上,因此扩大了16×16图标空间。它们位于模型对象图标的右边,
和16×16模型对象空间重叠了3个像素。 一个模型对象上最多可以放3个Java掩模。 </P>
<P>掩模显示的顺序取决于它们被分配的顺序。设计Java掩模时,重要的是要确认基础的对象图标能够支持附加的掩模而不会引起误读。注意有两个Java掩模通常会在下图中模型对象的右下角‘C’位置显示:<IMG
height=8 alt=""
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/synch_co.gif"
width=7 border=0> <STRONG>synchronized</STRONG> (方法)和 <IMG height=8 alt=""
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/run_co.gif"
width=7 border=0> <STRONG>run</STRONG> (类)。</P>
<P><IMG height=218
alt="size and location of the java overlays to the right of the model object icon"
hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/ovr_java.gif"
width=276 border=0> <IMG height=218
alt="sample of java overlays to the right of the model object icon" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/ovr_java_sample1.gif"
width=276 border=0> </P>
<P>Java 掩模定义了一个对象的<STRONG>attributes</STRONG>。
例子有<EM>static,</EM><EM>final,</EM><EM>abstract,</EM>和<EM>synchronized</EM>。</P>
<P><STRONG>注意:</STRONG>在Hierarchy和Outline
视图中,Java掩模附在模型对象的右边,如图所示。但是在Package视图中,
它们堆叠在模型对象上面。</P>
<P><STRONG>版本控制掩模</STRONG></P>
<P>版本控制掩模用于Navigator视图以及CVS中的Merge编?shy;器的Structure视图中显示。当它们在Navigator视图中显示时,该掩模完全堆叠在模型对象的16×16图标空间的右边。
</P>
<P><IMG height=180
alt="size and location of the version control overlays in the Navigator view in the lower right corner of the model object icon"
hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/ovr_versioncontrol.gif"
width=180 border=0></P>
<P>当版本控制掩模在CVS中
的Merge编?shy;器的Structure视图中显示时,它们附在模型对象上面,因此扩展了16×16的空间。
它们位于模型对象图标的右边,和16×16的模型对象图标重叠3个像素。在CVS中一个对象的右边最多可以有2个掩模。</P>
<P><IMG height=209
alt="size and location of the version control overlays in the Structure view of the Merge Editor in CVS at the right of the model object icon"
hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/ovr_versioncontrol_cvs.gif"
width=216 border=0> <IMG height=209
alt="sample of the version control overlays in the Structure view of the Merge Editor in CVS at the right of the model object icon"
hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/ovr_versioncontrol_cvs_samp.gif"
width=216 border=0>
</P>版本控制掩模定义了一个对象的<STRONG>transition-状态</STRONG>。CVS掩模的例子有
<EM>incoming</EM>,<EM>outgoing</EM>,<EM>in
conflict</EM>,<EM>added</EM>,<EM>deleted</EM>,和 <EM>changed</EM>。
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.8</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>遵?shy;不同类型图标的定位指南来优化这些元素相对其他元素的排列位置。</FONT><!-- ICON SPECIFICATION SECTION ENDS --><!-- WIZARD SPECIFICATION SECTION BEGINS --><!-- Wizard Specifications / Wizard Palette -->
</BLOCKQUOTE>
<H3><A name=WizSpecsPal_VDG>向导调色板</A></H3>
<P>向导调色板提供你在创建向导图形时需要的特殊的蓝色 183
色调色板。<BR>Eclipse风格向导横幅图形必须用特殊的蓝色183色调色板创建,如下所示。</P>
<P><IMG height=145 alt="" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/wizban183.gif"
width=194 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.9</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>用Eclipse的特殊蓝色183色调色板创建向导图形。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<!-- Wizard Specifications / Wizard Size & Placement -->
<H3><A name=WizSpecsSize_VDG>向导尺寸和放置</A></H3>
<P>这部分讨论关于创建向导标题(banner)图形的尺寸指南。<BR>所有的向导标题图形必须设计成可以放在一个向导的右上角的75像素宽×58像素高的屏幕空间内。
<BR></P>
<P><IMG height=175 alt="" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/wizban.gif"
width=395 border=0>
</P><BR>向导标题图形的实际尺寸可以根据其涉及的元素有所不同,但不能超过55像素宽×45
像素高。
<P>在向导标题的空间分配中,并没有严格的规则规定把向导标题图形放在哪里。
一般来说,图形垂直居中,水平位置偏左。</P><BR><IMG height=140 alt="" hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/wizbans.gif"
width=366 border=0> <BR>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.10</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.11</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>根据显示的特定摆放位置裁剪向导图形,以确保其在向导标题区域排列整齐。</FONT></BLOCKQUOTE>
<P></P><!-- WIZARD SPECIFICATION SECTION ENDS --><!-- IMPLEMENTATION CONVENTIONS SECTION BEGINS --><!-- Implementation Ready -->
<H3><A name=ConsistencyImp_VDG>实现惯例</A></H3>
<P>Eclipse提供了一套目录名称和结构用来存储和访问任何plug-in中的用户界面图形。
本节描述了Eclipse中使用的命名惯例和目录路径。如果遵?shy;这些惯例,你可以不做任何修改直接,在plug-in结构中使用预定义的目录名称和路径来放置图标和向导图形文件。</P>
<P>从你要求图标设计到它们的最后递交,命名和结构都是一样的。如果改变了用户界面目录名字或者多个目录来保存图片,请告知你的视觉设计者这些变化,以便他们也在同样的结构下工作。
另外,使用尽可能少的目录来保存你的图片,这样能很大程度地减少不必要的图片复制并简化资源管理。</P>
<H4>目录名称和结构</H4>
<P>一旦你的图标被概念化,设计,批准并且剪切,它们可以使用下面描述的命名惯例和结构进行存储。
</P>
<OL type=A>
<LI>一级目录的名字指Eclipse平台:在一个Eclipse plug-in中使用的图标叫做
<STRONG>org.eclipse.pluginname.ui_0.0.0</STRONG>. 这里
<STRONG>pluginname</STRONG> 用plug-in的名字代替,而 <STRONG>_0.0.0</STRONG>
用Eclipse版本号代替。例如 <STRONG>org.eclipse.debug.ui_2.1.0</STRONG> <BR>
<LI>每个为一个工具管理用户界面元素的plug-in包含一个二级目录,称为<STRONG>icons</STRONG>.
<BR>
<LI>在<STRONG>icons</STRONG>目录中,有很多分开的文件夹,名字分别表示图标的状态,类型和尺寸,
如下:
<OL>
<LI>文件夹名字的第一个字母表示图标的状态。字母 <STRONG>c</STRONG> 表示颜色,
<STRONG>d</STRONG> 表示不可用,而 <STRONG>e</STRONG> 表示可用。
<LI>接下来的3到6个字母表示图标类型:工具条(tool),局部工具条(lcl),视图或者透视图(view),模型对象(obj),掩模
(ovr),向导banner (wizban))。
<LI>文件夹名字的最后两个数字表示图标的尺寸。一般来说是 <STRONG>16</STRONG>
(表示16×16像素大小),但也可能是其他值(例如, <STRONG>32</STRONG>
表示32×32像素大小),这取决于plug-in的需求。</LI></OL></LI></OL>
<P>下图显示了一个plug-in完整的目录结构。</P>
<P><IMG height=230
alt="Image showing the complete directory structure for user interface graphics a plug-in, as described in text above"
hspace=40
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/impready_folderstructure.gif"
width=483 border=0> </P>
<P><STRONG>注意:</STRONG>
<OL>
<LI>对于很多plug-in来说,在<STRONG>icons</STRONG>目录下面,有一个文件夹叫做
“<STRONG>full</STRONG>”,它包含图标类型文件夹。在新的plug-in目录结构中,已这个
<STRONG>full</STRONG> 文件夹废弃不用了。上面所示的结构是推荐的图标目录结构。
<LI>你的plug-in可能不需要上面例子中所示的所有类型的图标。该例子显示了你可能在你的plug-in中用到的完整的图标类型。另外,有时候也可能有例外,某个特殊类型的图标没有包含在这个标准图标类型集中。
不过,这种情况很少见,我们希望你了解不同的图标类型和它们各自的状态,并使用上图所示的结构。
<LI>当一个图标有多种状态时,在活动 (color),
可用和不可用文件夹中文件名称都是相同的。
由于这种组织方式,使用提供的状态很重要,这样就可以避免如果在同一个文件夹保存所有这些文件时必须重命名你的图标的状态。
</LI></OL>
<P><IMG height=16
src="http://www.eclipse.org/articles/Article-UI-Guidelines/images/guidelineIndicator.gif"
width=16> <B><FONT color=#09448d>指南 2.12</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>使用预定义的目录结构和命名惯例。</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.13</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.14</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>在plug-in中把所有的图形保存在一个或尽量少的一级用户界面目录中以减少图形的复制。
</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.15</FONT></B>
<BLOCKQUOTE><FONT
color=#09448d>使用提供的活动,可用和不可用状态。</FONT></BLOCKQUOTE>
<P></P>
<HR>
<BR>
<H4>文件名</H4>
<P>在设计图标前先确定文件名可以帮助保证名字正确表达它们所代表的概念,并避免错误地使用图标和文件名重复。
如果你提前考虑好文件名,就能够很快地区分不同的图标类型,更容易地理解这些图标的意思,
尤其当你的图形资源大量增加时。</P>
<H4>关于文件名后缀的建议</H4>
<P>文件名后缀能让你区分不同类型的用户界面元素间的差别。
它们可以用来表示图标或者向导图形的位置或者功能。下表列出了在Eclipse中图形文件名使用的不同后缀:
</P>
<TABLE cellSpacing=2 cellPadding=2 width="100%" border=0>
<TBODY>
<TR bgColor=#c0c0c0>
<TD><STRONG>文件名后缀</STRONG></TD>
<TD><STRONG>在有下列功能或者位于以下位置的图标中使用:</STRONG></TD>
<TD><STRONG>图标类型和位置</STRONG></TD></TR>
<TR vAlign=top bgColor=#e4e4e4>
<TD>*_wiz.gif</TD>
<TD>调用一个向导,或者是向导中的图形</TD>
<TD>向导标题图形:在向导对话框窗口中使用。<BR>Wizard图标:在向导工具条中使用。
</TD></TR>
<TR vAlign=top>
<TD>*_exec</TD>
<TD>调用可执行文件</TD>
<TD>Toolbar图标:在级联菜单和全局工具条中使用。</TD></TR>
<TR vAlign=top bgColor=#e4e4e4>
<TD>*_edit</TD>
<TD>在编?shy;器视图中</TD>
<TD>Toolbar图标:在级联菜单和全局工具条中使用。</TD></TR>
<TR vAlign=top>
<TD>*_nav</TD>
<TD>在Navigator视图中</TD>
<TD>Toolbar图标:在级联菜单和全局工具条中使用。<BR>Local
Toolbar图标:在视图标题区域的最右边。
<BR>View图标和Perspective图标:在视图的左上角。 </TD></TR>
<TR vAlign=top bgColor=#e4e4e4>
<TD>*_misc</TD>
<TD>不适合归入任何其他类别的</TD>
<TD>Toolbar图标:在级联菜单和全局工具条中使用。<BR>View图标和Perspective图标:在视图的左上角。</TD></TR>
<TR vAlign=top>
<TD>*_tsk</TD>
<TD>表示用户可以做的任务</TD>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -