swing界面設計<四>
花了半天時間翻譯整理出來的,希望朋友們喜歡。水平有限,翻的不準的地方歡迎指正。
原地址:
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
高度的提取(復用)