前言：这段时间还算比较空闲，我准备把过去做过的有些形形色色，甚至有些奇怪的研究总结一下，也许刚好有人用的着也不一定，不枉为之抓耳挠腮的时光和浪费的电力。以前有个客户提出要在RCP程序中添加一个banner栏，研究了很久才搞定。代码是基于eclipse4.3.2的。
先看一下效果预览：
为了添加一个banner栏，我们必须重写RCP程序最外层的layout类，即TrimmedPartLayout.java。这个layout类是用来控制menu，toolbar等最基本的layout布局的。我们写一个CustomTrimmedPartLayout 类，继承自TrimmedPartLayout：
public class CustomTrimmedPartLayout extends TrimmedPartLayout {
* This layout is used to support parts that want trim for their containing
* composites.
* @param trimOwner
public CustomTrimmedPartLayout(Composite parent) {
super(parent);
= new Composite(parent, SWT.NONE); GridLayout gridLayout = new GridLayout(1, false); gridLayout.horizontalSpacing=0; gridLayout.verticalSpacing = 0; gridLayout.marginHeight = 0; gridLayout.marginWidth = 0
banner.setLayout(gridLayout);
//banner.setLayoutData(new GridData(GridData.FILL_BOTH));
protected void layout(Composite composite, boolean flushCache) {
Rectangle ca = composite.getClientArea();
Rectangle caRect = new Rectangle(ca.x, ca.y, ca.width, ca.height);
// 'banner' spans the entire area if (banner != null && banner.isVisible() ) { Point bannerSize = puteSize(caRect.width, SWT.DEFAULT, true); // Don't layout unless we've changed Rectangle newBounds = new Rectangle(caRect.x, caRect.y, bannerSize.x, bannerSize.y); caRect.y += bannerSize.y; caRect.height -= bannerSize.y; if (!
newBounds.equals(banner.getBounds())) {
banner.setBounds(newBounds);
// 'Top' spans the entire area
if (top != null && top.isVisible()) {
Point topSize = puteSize(caRect.width, SWT.DEFAULT, true);
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x, caRect.y, caRect.width,
topSize.y);
if (!newBounds.equals(top.getBounds())) {
top.setBounds(newBounds);
caRect.y += topSize.y;
caRect.height -= topSize.y;
// Include the gutter whether there is a top area or not.
caRect.y += gutterT
caRect.height -= gutterT
// 'Bottom' spans the entire area
if (bottom != null && bottom.isVisible()) {
Point bottomSize = puteSize(caRect.width, SWT.DEFAULT,
caRect.height -= bottomSize.y;
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x, caRect.y
+ caRect.height, caRect.width, bottomSize.y);
if (!newBounds.equals(bottom.getBounds())) {
bottom.setBounds(newBounds);
caRect.height -= gutterB
// 'Left' spans between 'top' and 'bottom'
if (left != null && left.isVisible()) {
Point leftSize = puteSize(SWT.DEFAULT, caRect.height, true);
caRect.x += leftSize.x;
caRect.width -= leftSize.x;
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x - leftSize.x,
caRect.y, leftSize.x, caRect.height);
if (!newBounds.equals(left.getBounds())) {
left.setBounds(newBounds);
caRect.x += gutterL
caRect.width -= gutterL
// 'Right' spans between 'top' and 'bottom'
if (right != null && right.isVisible()) {
Point rightSize = puteSize(SWT.DEFAULT, caRect.height,
caRect.width -= rightSize.x;
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x + caRect.width,
caRect.y, rightSize.x, caRect.height);
if (!newBounds.equals(right.getBounds())) {
right.setBounds(newBounds);
caRect.width -= gutterR
// Don't layout unless we've changed
if (!caRect.equals(clientArea.getBounds())) {
clientArea.setBounds(caRect);
如果我们希望Banner放在工具栏下面，而不是上面，只要稍微修改一下代码的位置
public class CustomTrimmedPartLayout extends TrimmedPartLayout {
* This layout is used to support parts that want trim for their containing
* composites.
* @param trimOwner
public CustomTrimmedPartLayout(Composite parent) {
super(parent);
= new Composite(parent, SWT.NONE); GridLayout gridLayout = new GridLayout(1, false); gridLayout.horizontalSpacing=0; gridLayout.verticalSpacing = 0; gridLayout.marginHeight = 0; gridLayout.marginWidth = 0
banner.setLayout(gridLayout);
//banner.setLayoutData(new GridData(GridData.FILL_BOTH));
protected void layout(Composite composite, boolean flushCache) {
Rectangle ca = composite.getClientArea();
Rectangle caRect = new Rectangle(ca.x, ca.y, ca.width, ca.height);
// 'Top' spans the entire area
if (top != null && top.isVisible()) {
Point topSize = puteSize(caRect.width, SWT.DEFAULT, true);
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x, caRect.y, caRect.width,
topSize.y);
if (!newBounds.equals(top.getBounds())) {
top.setBounds(newBounds);
caRect.y += topSize.y;
caRect.height -= topSize.y;
// 'banner' spans the entire area if (banner != null && banner.isVisible()) { Point bannerSize = puteSize(caRect.width, SWT.DEFAULT, true); // Don't layout unless we've changed Rectangle newBounds = new Rectangle(caRect.x, caRect.y, bannerSize.x, bannerSize.y); caRect.y += bannerSize.y; caRect.height -= bannerSize.y; if (!
newBounds.equals(banner.getBounds())) {
banner.setBounds(newBounds);
// Include the gutter whether there is a top area or not.
caRect.y += gutterT
caRect.height -= gutterT
// 'Bottom' spans the entire area
if (bottom != null && bottom.isVisible()) {
Point bottomSize = puteSize(caRect.width, SWT.DEFAULT,
caRect.height -= bottomSize.y;
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x, caRect.y
+ caRect.height, caRect.width, bottomSize.y);
if (!newBounds.equals(bottom.getBounds())) {
bottom.setBounds(newBounds);
caRect.height -= gutterB
// 'Left' spans between 'top' and 'bottom'
if (left != null && left.isVisible()) {
Point leftSize = puteSize(SWT.DEFAULT, caRect.height, true);
caRect.x += leftSize.x;
caRect.width -= leftSize.x;
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x - leftSize.x,
caRect.y, leftSize.x, caRect.height);
if (!newBounds.equals(left.getBounds())) {
left.setBounds(newBounds);
caRect.x += gutterL
caRect.width -= gutterL
// 'Right' spans between 'top' and 'bottom'
if (right != null && right.isVisible()) {
Point rightSize = puteSize(SWT.DEFAULT, caRect.height,
caRect.width -= rightSize.x;
// Don't layout unless we've changed
Rectangle newBounds = new Rectangle(caRect.x + caRect.width,
caRect.y, rightSize.x, caRect.height);
if (!newBounds.equals(right.getBounds())) {
right.setBounds(newBounds);
caRect.width -= gutterR
// Don't layout unless we've changed
if (!caRect.equals(clientArea.getBounds())) {
clientArea.setBounds(caRect);
最后，我们需要把shell加载的layout从TrimmedPartLayout替换为CustomTrimmedPartLayout。
在ApplicationWorkbenchWindowAdvisor 的preWindowOpen中添加如下代码：
public class ApplicationWorkbenchWindowAdvisor extends WorkbenchWindowAdvisor {
public void preWindowOpen() {
IWorkbenchWindowConfigurer configurer = getWindowConfigurer();
configurer.setInitialSize(new Point(600, 400));
configurer.setShowCoolBar(true);
configurer.setShowPerspectiveBar(true);
configurer.setShowStatusLine(true);
configurer.setShowProgressIndicator(false);
configurer.setShowFastViewBars(false);
IWorkbenchWindow workbenchWindow=
configurer.getWindow();
workbenchWindow=
configurer.getWindow();
Shell shell
= workbenchWindow.getShell(); TrimmedPartLayout layout = (TrimmedPartLayout)shell.getLayout(); CustomTrimmedPartLayout customLayout = new CustomTrimmedPartLayout(layout.clientArea.getParent()); customLayout.clientArea =
layout.clientA
shell.setLayout(customLayout);
Label bannerLabel
= new Label(customLayout.banner, SWT.SIMPLE|SWT.CENTER); customLayout.banner.setBackground(&); GridData gridData = new GridData(SWT.FILL, SWT.FILL, true, true); bannerLabel.setLayoutData(gridData); Image image =
Activator.getImageDescriptor(bannerExtensionPoint.getImage()).createImage();
bannerLabel.setImage(image);
标记为绿色的代码是用来替换Layout类的
标记为蓝色的代码是用来在banner中创建一个Label，并加载一张作为banner的图片。
阅读(...) 评论()你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
首页 Banner 对于一个网站的美观有着举足轻重的作用。如何合理设置首页Banner？本文为你解答。
第一步：获取合理的Banner尺寸大小。
参考演示站点 Banner 尺寸。进入对应模板的演示站点首页，使用以下两种方式获取演示站点Banner尺寸。
A 如果Banner 是不Flash播放模式，用360、火狐、谷歌等浏览器右击图片，选择查看审查元素。
B 如果Banner采用了FLASH播放模式，可用QQ截图获取。在截图时光标处会显示所截图片的尺寸。
第二步：设置Banner展示方式及尺寸。
A:首页Banner展示方式及尺寸设置方法：网站后台--外观--电脑--设置-首页--大图轮播设置
如果只有一个选项，则表示宽度是固定的，只能调整banner高度值；
B：列表页banner设置方法：网站后台--外观--电脑--设置-列表页--内页大图轮播设置；
两种展示方式，可以跟首页一致，也可以点击更多自定义设置；
第三步：点击自定义设置，进入Banner管理添加Banner图片。
第四步：设置图片所属栏目。
第五步：设置Banner展示方式。
没看懂 我的还是不行 能不能详细解说写步骤
请问为什么我找不到宽度设置？只能看到高度设置这一个选项？
1920的宽度 无法实现吗？metx5模板的飘来！
我的banner设置里面没有这个样式&{样式一}
我的banner设置是这个样子的
banner滚动时间在哪里设置？
要回复问题请先或
浏览: 4702
关注: 7 人查看: 1741|回复: 0
如何快速设计好Banner？6个步骤帮你速成！
本帖最后由 soyiko 于
13:25 编辑
世界看脸，网站看Banner，门面当然要漂亮，不过很多同学以为做Banner是门技术活儿，自己学艺不精做不了。如果你看了今天这篇文，就会明白，技术于Banner，就像刀法于人，虽有招式，但无内功支撑，久战必败。而这篇好文，就是Banner的内功修炼心法，按6个步骤来，速成可待。
@Heidixie（阿里巴巴资深交互设计师） ：团队小伙伴问到这个问题，发了一封邮件分享自己的思路，顺便贴过来。
适用前提：
非专业视觉设计师 没太多空闲时间去做。 为什么要做banner？banner是用来传达信息的。一切不以传达有效信息、有效传达信息的banner都是yy. baner是用来促使用户行动的，也即Call To Action。无法让用户产生你所期望的banner都是无效的。
所以，先摆脱一个错误的认识：banner仅仅是用来装饰用的，仅仅是为了吸引人注意啥的想法。
所以，我们既然是非专业设计师，就要回归到做banner的本源，为了达到以上效果，同时兼顾美观、大方、好看。
大方和好看的banner未必需要高深的视觉技巧，和繁琐的PS功能，但是要兼顾视觉的几个原则，我稍后会列出。
第一步：定义要传达什么信息
这一步，和视觉、审美什么的都没关系。
比如，半月谈，我们要传达的信息有：
品牌LOGO，让用户一眼就知道哪里出品，下次形成条件反射，所谓的视觉认知是需要一定的重复的，只有不断重复才能加深用户印象。 子品牌LOGO，让用户知道我们出了什么东西，并且有系列感。
以上就是我们要传达的核心信息了。你也可以认为这就是一个BANNER，只是——看起来没那么好看而已。
但是，我们发现信息还不够，我们还想要传达：
我们的内容大概是什么，从而让用户形成期待 既然是系列，我们希望用户能够知道这是第几期，从而当他们想要从某一期有兴趣时点击到全部，也有地方去。
所以，我们把信息又放出来。现在我们有4类信息。
第二步：定义信息的优先级
虽然我们有4类信息，但是优先级肯定不一样的，所以对应到设计上，我们给它放的版块的大小、颜色的突出是不一样的。
第三步：考虑用户视觉路径
也即你想引导用户先看哪里，再看哪里，然后再做什么。
通常，用户的阅读从上到下，从左到右边，所以一般重要的内容会放到左上角。
不过这个规则可以用醒目的图片、刺眼的颜色轻易打破，但是我建议你不要轻易这么做，所有的图片和颜色都要有意义，为什么要用这个图片为什么要用这个颜色。
确保用户一开始有视觉中心，如果用户一眼不知道先看什么，那么这个banner就是失败的。
有了视觉焦点后，你可以从视觉焦点引申开来，使用视觉里的亲密性原则（把内容相近的地理位置靠近一些、对比原则等等），引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。
第四步：考虑标准识别颜色
既然我们要传达品牌形象，请确保用色从我们的标准VI色盘中选择，而不要随便用。
我是配色弱怎么办？有这3个板斧打遍天下：《6条网页设计配色原则》
记住，品牌传达，重复性很重要。就像我们看到红、黄、白配色会想到麦当劳，看到绿和黑就想到星巴克一样。
第五步：做视觉的排版
（不要考虑太多设计技能，否则就陷入到：我不是专业的，所以我不会做设计上）
排版上，信息已经完整，优先级已经出来，无非就是把它变得好看一些而已。
让banner好看的几个要诀：
很好办吧，让内容纵向、横向都有一条线，可以对齐。要么居中，要么底部。尽量确保页面上不要有一个元素，没有任何元素和它能够形成对齐的关系。
不要让所有内容都没有聚集地堆在一起，让那些关系比较亲密的内容聚合成一个区域，不要让一个banner上的区域超过4个。
3. 简单质感：
千万不要加任何PS的滤镜、阴影、能不渐变就不渐变，因为已经不流行了，不要盲目使用各种样式。4. 如果要用图标，尽量选择样式统一，且能够保持你的优先级次序的图表。比如我们引导用户先看左边，再看右边，结果你在右边的图标里选择了一个血红的，可能用户的视线立马被吸引过来了。5. 不要让字体超过3种。尽量用宋体、黑体、方正黑体，不要用什么魏碑体、行楷等，一看就比较山寨。
第六步：做更多的美化
如果你不想做，其实上面也可以了。
想做的话，我们可以：
比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点，不要为了装饰而装饰，所有的装饰都要有意义、让背景更加有质感。比如加点磨砂感觉。 比如，你还可以适当变换下别的排版，比如：居中的排版，更容易引导用户从上到下的阅读视角，也是很多人偷懒比较喜欢的排版风格。
综上所述，做banner有一大半的精力是梳理信息、设定优先级、设定用户浏览次序，和PS的技能没有太多关系，所以，每个人都可以去尝试做好一张看似很有设计感，但是实际上又没花什么精力的banner。
来源：优设网
Powered by