花了半天时间翻译整理出来的,希望朋友们喜欢。水平有限,翻的不准的地方欢迎指正。
原地址:
http://gceclub.sun.com.cn/java_one_online/2006/JOO2006/TS-1099/TS-1099.pdf
---------------------------------------------
Principles
法则
● Small changes can break the design balance
小的改动可以破坏整个设计的平衡
● Small things add up
界面上的东西越简洁越好
● Direct attention to the content, not the design
主要的精力放在功能上,不要放在设计上
● Change only what you understand well!
只改变你熟悉和明白的东西!
● Don't touch what you don't understand!
不要碰你不明白的东西!
Don’t Change Colors!
不要随便改变颜色
● Do not add colors to the desktop
不要随便给界面增加颜色
● Do not add colors to the Swing L&F
不要随便给Swing的感官和皮肤增加颜色
● Avoid heavily saturated colors
尽量避免使用深颜色
Don’t Change Fonts!
不要随便改变字体
● Use native fonts
尽量使用本地的字体
● Use native font sizes
尽量使用本地的字体大小
● Use native font weights (normal vs. bold)
尽量使用本地字体的风格(加粗或不加粗)
● Raster fonts like the native rasterizer
(pixel, anti-aliased, subpixel-AA)
尽量使用本地字体的光栅
(像素,抗锯齿,渐变)
Don’t Break the Icon Design!
不要破坏图标设计
● Use icons that work well with the OS, w.r.t.
使用的图标要和操作系统的风格搭配
● Design, size, color scheme
给大小,颜色设计一个配置文件
● Use a consistent icon set
使用风格一致的图标库
● Remove questionable icons
不要使用有问题的图标
Remove Clutter!
把一团糟的东西除掉
● Remove clutter and visual noise
除掉一团糟的污染视线的东西
● Remove duplicate borders
除去重复的边
● Favor separators over (titled) borders
推荐在titleborders的上面使用分割线
● Write short texts
文字越简洁越少越好
Critical Components
使用时需要注意的组件
● Remove unnecessary JSplitPane borders
除去不必要的JSplitPane的边线
● Avoid nested borders
避免边和边重叠在一起
● Avoid BevelBorders
尽量不要使用BevelBorders
● Avoid TitledBorders
尽量不要使用TitleBorders
Use TitledBorder Carefully!
谨慎使用TitleBorder
● Often has 3 unnecessary lines
它有3条不必要的边
● Difficult to align
不方便定位布局
● Difficult to align its content
它里面内容不好定位布局
● Favor separators over TitledBorders
在它上面建议使用一条分割线
● If you need TitledBorders, don’t nest them!
如果你一定需要使用它,尽量不要重叠使用
Add Negative Space!
保持间隔距离
● White space is not wasted space
空白的地方不是浪费
● It's a powerful tool for design
间隔空间是一个设计的强大工具
● Isolate and separate groups
将群体之间用间隔分开
● Wrap components with white space
用空白的区域将组件包围起来
● Favor white space over separators
推荐在分割线上面使用空白空间
Align!
排列
● Align component bounds
排列好组件的位置
● Consider using a grid and grid system
考虑使用网格来帮助布局和定位
Difficult
难点
● Align fonts along the baseline
将文字顺着基线排列
● Align component bounds and the baseline
顺着基线排列组件
Beware Inconsistent Micro Design
提防不要让设计的细处不协调
● Inconsistent component sizes
不一致的组件大小
● Inconsistent component insets
不一致的组件位置
● Font baselines not aligned, or component bounds
文字和组件没有按基线排列
● Poor or wrong pseudo 3D effects
错误的或差劲的仿3D效果
Group and Relate!
关联与分组
● Learn to group
学着分组
● Make similar content equally wide
将相似的内容设置相同的宽度
● Make similar content equally high
将相似的内容设置相同的高度
● But again: avoid the TitledBorder
再重复一次:尽量不要用TitleBorder
Balance the Design!
设计保持平衡
● Learn about perceived axes and visual weight
学着感知轴线和视觉重心
● Find the optical balance point
寻找光照平衡点
● Consider to center a single view
考虑将视觉集中在某处
● Consider to use symmetry
考虑使用对称
Be Consistent!
注意保持一致性!
● Button sizes, order, gaps
按钮的大小,顺序,间隔
● Design of dialogs, panels, button bars
对话框、面板、按钮条的设计
● Micro design of the L&F components
感官和皮肤组件的微小设计
● Use icons that 'work' with the L&F colors
使用的图标和皮肤要搭配
● Use a few fonts and font sizes only
不要使用太多的字体和字体大小
Use Contrast Effectively
有效的使用差异
● Equalize contrasts
使差异互补
● Add white space where necessary
在必要的地方使用空白空间
● Avoid large dark areas
避免不要使大块的区域为黑色
● Use large white panels judiciously
(otherwise the user gets tired)
灵活的使用大块的白色面板
(不然用户容易感觉疲劳)
● Learn the squint test
使用颜色的渐变
Use Aesthetic Aspect Ratios
使用美学的比例
● Stable aspect ratios
保持一致的比例
● 1:1
● 4:5
● 4:3
● 16:9
● Consistency: use a few aspect ratios
比例的样式不要太多
Static vs. Flexible Design
使用动态的还是静态的设计
● Again: reduce the design to its essence
再说一次,尽量避免过度的设计
● Prefer static to flexible design
相比之下宁可使用静态的设计而不是动态的设计
● Use static design where possible
尽量使用静态的设计
● Add flexibility where necessary
只在必要的时候才使用动态设计
● Static, splitted, multi-splitted, docking, windows
静态的,分离的,多层分离的,可停靠的,视窗化的
Let Users Enjoy Your Application
让用户喜爱你的应用程序
● Until now we’ve only reduced the UI
之前我们只减少了使用UI
● Now you can carefully add
现在你可以谨慎的添加
● Color
颜色
● Advanced typography
高级凹凸排版样式
● Images
图片
● Animation
动画
Benefit From the Powerful JFC
从强大的JFC中获益
● Advanced graphics operations (Java 2D.)
高级图形操作(Java 2D)
● Translucency
透明效果处理
● Glasspane
玻璃效果处理
● Pluggable look and feel
可拔插的感官和皮肤
● Enables high-level abstractions
高度的提取(复用)