版式設(shè)計(jì)關(guān)注的是設(shè)計(jì)中文字和圖像的位置關(guān)系。 這些元素應(yīng)該如何擺放，它們彼此以及整體設(shè)計(jì)構(gòu)想的關(guān)系，都會影響到用戶對內(nèi)容的識別與接收，以及他們對內(nèi)容所產(chǎn)生的情緒反應(yīng)。利用親密性原則和對齊方式可以促進(jìn)用戶接收頁面中呈現(xiàn)的信息。

 對齊原則

什么是對齊方式：是指文字或圖片在垂直層面和水平層面頁面的位置。

下面列舉一些較為常見的對齊方式：

垂直對齊

文字的垂直對齊可以是居中對齊、上對齊或底端對齊

水平對齊

文字或圖片的水平對齊可以是左對齊、右對齊、居中對齊或兩端對齊。

對齊方式?jīng)Q定了整個(gè)畫面的流暢性，在做日常需求中明明有對齊的意識，但是為什么設(shè)計(jì)出來的頁面就是很奇怪呢？對齊方式的合理運(yùn)用絕大部份是體現(xiàn)在視覺維度上，而我們往往僅考慮物理對齊方式。

下面舉幾個(gè)我的需求案例來解決視覺對齊的幾點(diǎn)問題：

以視覺邊界線對齊

上圖案例好像看起來并沒有問題，但是在上半部分的列表中灰色背景承擔(dān)了兩端對齊的角色，而事實(shí)上文字的視覺重量大于背景，就會導(dǎo)致整個(gè)頁面的視覺重量不對等，視覺引導(dǎo)線發(fā)生形變。

而下圖中將列表數(shù)據(jù)做兩端對齊，讓整個(gè)畫面大方得體，視覺重量趨于一致，瀏覽閱讀上變得舒適。

小結(jié)：對齊邊緣以視覺引導(dǎo)線為準(zhǔn)。

以視覺流對齊

我們正常在看東西的時(shí)候會是從上到下，從左到右這樣進(jìn)行瀏覽閱讀信息，那么在頁面設(shè)計(jì)的時(shí)候也應(yīng)當(dāng)考慮一下。

 上圖兩個(gè)卡片的操作區(qū)域分別運(yùn)用了左、右對齊，兩種看起來沒有什么問題，但是考慮到視覺流向，會發(fā)現(xiàn)第二個(gè)的操作區(qū)域位置更為合理，也是視覺距離更近的方案。
 

小結(jié)：頁面的一個(gè)區(qū)塊內(nèi)，重要元素或者操作區(qū)往往會跟隨著視覺流向進(jìn)行布局。

多屬性對齊原則

上圖案例在對齊方式上列表標(biāo)題和內(nèi)容采用了左對齊的形式，形成了不規(guī)整的邊緣，視覺上就會參差不齊，操作流暢性大打折扣。

上圖為優(yōu)化后的版本，將列表標(biāo)題和內(nèi)容的對齊方式進(jìn)行單獨(dú)劃分，用戶在瀏覽中可以快速識別和區(qū)分信息。

小結(jié)：同一屬性的可以使用同一對齊方式。

那么通過解決這幾個(gè)常見問題，我們會發(fā)現(xiàn)，對齊原則是在滿足物理對齊原則的同時(shí)，在視覺上也要思考他適合哪種對齊方式，元素之間是如何對齊。

 親密性原則

首先通過一組物品來感受一下親密性原則。

這張圖片中的四個(gè)不同類別物品我們會感覺它們是一個(gè)整體。

當(dāng)我們移動了物體的位置之后，會感覺左面三個(gè)物品屬于一個(gè)區(qū)域整體。

同一組物品我們將它們分成不同顏色，同樣也是左面三個(gè)物品看起來是一個(gè)區(qū)域整體

通過上面的案例我們可以得出一種結(jié)論：距離較近，我們就會感覺它們之間存在著一定的關(guān)系同屬一個(gè)整體。

由此我們可以得知，親密性原則是在界面設(shè)計(jì)中相對靠近的元素，它們之間就會存在聯(lián)系。

那么在需求中我會用到兩種方法來對親密性實(shí)現(xiàn)和調(diào)優(yōu)的：

借助間距優(yōu)化親密性

上面這張?jiān)O(shè)計(jì)圖中，我們會感覺日期、評論、點(diǎn)贊量和下面的章節(jié)是一個(gè)區(qū)塊，在瀏覽的時(shí)候造成很大困擾。

而在優(yōu)化后，將三個(gè)信息點(diǎn)的距離拉近成為一個(gè)區(qū)塊，并且層級關(guān)系也一目了然。

小結(jié)：在信息容易產(chǎn)生誤解的時(shí)候，需要注意間距的把控

借助元素建立親密性

除了把控間距之外我們在處理親疏關(guān)系的時(shí)候還會借助一些輔助元素，下面介紹一下兩個(gè)常用的方式。

卡片工具

分割工具

小結(jié)：針對不同的頁面風(fēng)格和強(qiáng)弱，工具的使用也會有所差異，要適合頁面調(diào)性來選擇使用。

總結(jié)：通過幾個(gè)小的需求案例，希望可以給大家一些幫助～

原文：TCD設(shè)計(jì)中心

間距的重要性

當(dāng)我們想了解間距乃至更加標(biāo)準(zhǔn)的使用間距，首先我們要明白為什么要使用間距。間距的使用有很多作用，可以吸引用戶注意力、提升界面內(nèi)容的可讀性，闡述元素之間的關(guān)系。其實(shí)簡單來說，間距的作用可以歸納成一句話：建立視覺層級來簡化界面內(nèi)容，讓用戶更容易接受。那么我下面就先來看第一種今天要討論的間距：外邊距。

外邊距

我們今天說的邊距不是關(guān)于設(shè)計(jì)APP時(shí)需要留一定的屏幕間距，這個(gè)是最基礎(chǔ)的知識了，相信大家都懂，這里我們要研究的是圖文與屏幕邊距怎樣更好的表現(xiàn)。通常來說，在圖片和屏幕邊距之間保留一定像素邊距能夠更好的引導(dǎo)用戶豎向往下讀，如下圖所示：

但是當(dāng)圖片與屏幕邊距為0的時(shí)候，用戶的注意力更多的集中在圖片上，如下面對比圖所示：

由于沒有留白做視覺引導(dǎo)，視線在往下瀏覽時(shí)，會被圖片直接割裂，造成在圖片上停留的時(shí)間更長，因此通欄的設(shè)計(jì)大多更適合出現(xiàn)在頁面中間的運(yùn)營banner上，如下圖所示：

這種設(shè)計(jì)視覺上很容易就能吸引用戶的注意，但是也很容易喧賓奪主，因此目前來說圖片與屏幕邊距為0的情況使用的不是很多，個(gè)人認(rèn)為是有邊距的圖片或者banner可控性更強(qiáng)一點(diǎn)，也更推薦新手設(shè)計(jì)師借鑒。但是還有一個(gè)產(chǎn)品對于外邊距的處理有別的方法，如下圖所示：

MOO音樂的外邊距是30px，但是它左邊卡片的標(biāo)簽外邊距是20px，也就是說MOO對標(biāo)簽的處理是讓標(biāo)簽沖出卡片左邊10px，這樣的設(shè)計(jì)也讓用戶的注意力更集中在了標(biāo)簽上，值得借鑒。

字間距

1、圖文單行結(jié)合

首先要說的這種情況在我們平時(shí)使用的產(chǎn)品中是經(jīng)常見的，大字號搭配小字號，如下圖所示：

這種彼此對比明顯，能夠更好的進(jìn)行信息的主次傳遞，那么在大字號與小字號之間的間距使用多大比較合適呢？如下圖所示：

這里是以京東金融、淘寶、微信讀書和QQ讀書四個(gè)主流產(chǎn)品里的單行文字間距為例的，上圖中我們可以看出文字與文字之間的間隔大多在16-20px之間，至于選擇16px還是20px，個(gè)人認(rèn)為是通過左邊圖片的高度決定的，同時(shí)不論右邊的文字是兩行或者是三行，也都以左邊圖片的高度居中。除了文字和圖是左右搭配的，還有一種常見的情況是上下結(jié)構(gòu)的，如下圖所示：

這類卡片式的設(shè)計(jì)，在我們的設(shè)計(jì)中經(jīng)常用到，但行間距依然是一個(gè)難以讓界面看起來精致的點(diǎn)，從上圖中我們能夠看出來，標(biāo)題文字的大小是不一樣的，但行間距卻都是大概率的重合，因此個(gè)人認(rèn)為我們可以參考這種類型的行間距數(shù)值：16-20px ，而文字的部分有各自產(chǎn)品的設(shè)計(jì)規(guī)范。

2、圖文多行結(jié)合

圖文多行在設(shè)計(jì)里面算是比較復(fù)雜的情況，如下圖所示：

這種類型要考慮到的因素很多，標(biāo)題是否換行、多行的間距、字體大小這些都是我們在設(shè)計(jì)的時(shí)候需要處理的細(xì)節(jié)，首先我們先來看標(biāo)題只有單行的情況，如下圖所示：

從上圖中我們能夠看出來，雖然不存在折行的情況，但是因?yàn)檎故镜男畔⒑芏?，所以頁面設(shè)計(jì)的時(shí)候也會比較復(fù)雜，這種結(jié)構(gòu)大多出現(xiàn)在電商產(chǎn)品中，因?yàn)橥饴兜男畔⒈容^多，想要盡量在列表頁展示更多的信息來吸引用戶點(diǎn)擊。而這里需要遵循的方法有兩個(gè)，第一個(gè)是親密性原則，將你認(rèn)為是同組的信息做親密處理，上圖中藍(lán)色高亮的部分就是表示同組信息之間的行間距，而巧合的是，其中有三個(gè)產(chǎn)品的行間距都是16px，餓了么的行間距是20px。因此16px是在圖文設(shè)計(jì)時(shí)展示親密信息比較好的選擇。第二個(gè)原則是4的倍數(shù)定律，上圖中的所有間距都是4的倍數(shù)，這跟我們在設(shè)計(jì)頁面定間距是的道理是一樣的。

行間距

行間距也是我們平時(shí)要特別注意的小細(xì)節(jié)，因?yàn)椴恢来蠹野l(fā)現(xiàn)一個(gè)問題沒有，行間距沒有處理好，一旦界面的信息有點(diǎn)多，整體視覺上就會顯得很擁擠，不如我們先來看看線上的作品是如何解決這些問題的。這個(gè)問問題一般會有2種，我們現(xiàn)在就都來看看吧！

1、標(biāo)題行間距

這種情況一般出現(xiàn)在標(biāo)題會有折行的情況下，但是下面的內(nèi)容卻都是單行，如下圖所示：

上面四個(gè)產(chǎn)品中，除了京東的行間距是12px，其余的都是16px，個(gè)人認(rèn)為是因?yàn)榫〇|的商品組建部分信息很多，因此整體的字體也偏小，所以12px的行間距不會顯得太過擁擠。

2、正文行間距

這種情況是出現(xiàn)在標(biāo)題最多只有一行，但是正文都是折行的情況，如下圖所示：

在圖文列表的文字行間距都是12px，但是掌閱書籍詳情頁的文字行間距確是16px，關(guān)于行間距目前大部分的做法都是字體的大小乘以1.2~1.5倍，得出來的結(jié)果就是文字的行間距，但這種算法僅限于行間距，不適用于其他的間距。

元素間距

在元素之間的間距我們經(jīng)常犯的問題在于，設(shè)計(jì)的時(shí)候會讓別人無法看出哪個(gè)信息是同一組的，如下圖所示：

左圖中的問題在我們的作品中經(jīng)常見到，大組件之間的間距會與統(tǒng)一模塊的間距設(shè)置成一樣的高度，這樣就會造成模塊之間的關(guān)系不夠清晰，從圖中我們就可以看出來，元素間的間距也是親密原則，一起的就靠近，不同組的就分開，從視覺上就做出區(qū)分，這一點(diǎn)不僅僅用在界面中，圖標(biāo)中也同樣適用，如下圖所示：

 里面的內(nèi)容是一組的，因此間距會靠近，同時(shí)也會與外面的邊框間距近，雖然只是圖標(biāo)，也是從視覺上來簡化信息，便于用戶理解。

劃重點(diǎn)

從信息層級的角度上來說，級別越高的內(nèi)容間距越大，因?yàn)樵街匾膬?nèi)容就要越吸引用戶越多的注意力，運(yùn)用親密原則，能夠從視覺上減少用戶對文字信息處理的成本。面對多行和單行的信息處理，除了查找數(shù)值規(guī)律之外也要結(jié)合實(shí)際的項(xiàng)目情況，比如說文章中有提到的幾個(gè)特例，都是選擇了最適合產(chǎn)品的信息展示方式。

參考引文

《間距與邊距的設(shè)計(jì)要點(diǎn)》http://1t.click/buuV

原文地址：海鹽社（公眾號）

作者：潘團(tuán)子

1 使用光柵來更好的設(shè)計(jì)圖標(biāo)

UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會發(fā)現(xiàn)它們具有相同的視覺重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。

根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長圖標(biāo)更緊湊。

圖標(biāo)越緊湊，所需空間就越小。圖標(biāo)的邊緣越銳利，細(xì)節(jié)越多，它們占據(jù)的畫板空間就越多。

請注意，不要過分的依賴于網(wǎng)格來設(shè)計(jì)圖標(biāo)。它們是用來幫你而不是限制你的。如果一個(gè)圖標(biāo)的某些元素伸展出來更好看，那就順其自然讓它們伸出來。

2注意像素網(wǎng)格的重要性

在非視網(wǎng)膜屏幕上設(shè)計(jì)圖形的時(shí)候，要特別遵循使用像素網(wǎng)格，并優(yōu)先選用2像素的邊框作為圖標(biāo)的線條。因?yàn)樗梢宰寛D標(biāo)在這些顯示屏上更加清晰。

如果為圖標(biāo)設(shè)置1像素的邊框，這個(gè)時(shí)候，這些邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但不建議是居中的。如下圖，你可以看到他們的區(qū)別。

居中描邊的一像素邊框，雖然在放大它們的時(shí)候，它們看起來很清晰。但在100%比例大小顯示的時(shí)候，它們會模糊掉。所以，慎用~下面兩張圖是圖標(biāo)在居中描邊的時(shí)候所產(chǎn)生的效果：

根據(jù)像素的網(wǎng)格線來設(shè)置一條線的起點(diǎn)和終點(diǎn)，會讓你的圖標(biāo)看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時(shí)候，清晰度會比一些不常見的角度效果會更好，比如13.7°，81°等等。所以，盡量避免用這樣的數(shù)值。

3保持一定的圖標(biāo)細(xì)節(jié)

從一套圖標(biāo)中最復(fù)雜的那個(gè)開始來設(shè)計(jì)通常是最有效的，因?yàn)樗鼤椭覀兌x相同的視覺重量，讓所有的圖標(biāo)視覺重量保持一致。

當(dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會吸引用戶更多的注意力，而且視覺上看上去更重。

4控制最小的間隙尺寸

圖標(biāo)的相鄰元素之間空間在整個(gè)圖標(biāo)集中不應(yīng)太小或不一致。在任何情況下，都要定義最小間隙，以避免輪廓“粘滯”。比如下方的圖標(biāo)，太小的間隙，所產(chǎn)生的粘滯感要特別注意：

下面這個(gè)則是調(diào)整后的效果，是不是好多了？

對于線性圖標(biāo)來說，圖標(biāo)線段的最小間隙應(yīng)該等于線的粗度。另外，線條應(yīng)該明確的分開或者準(zhǔn)確的閉合連接。下圖是從錯(cuò)誤的例子：

下面這個(gè)則是修改后的效果，是不是好多了？

5去除重復(fù)部分

在一套圖標(biāo)集中，你很可能會重復(fù)一些細(xì)節(jié)，比如下圖這樣。但是盡量不要這么做，讓觀眾的注意力集中在不同的東西上。這就像數(shù)學(xué)中的分?jǐn)?shù)簡化一樣。您看到的圖形噪聲越少，用戶的理解就越清晰。

比如下方這個(gè)郵件收發(fā)主題的圖標(biāo)，當(dāng)用戶已經(jīng)非常熟知自己的具體操作，比如收郵件，發(fā)郵件，回復(fù)等等。那就不要在設(shè)計(jì)圖標(biāo)的時(shí)候反復(fù)強(qiáng)調(diào)“信封”這個(gè)圖形了。將它們簡化，效果反而更好。

此規(guī)則還涉及圖標(biāo)周圍的各種裝飾，框架，背景。如果它們沒有幫助幫助更好的閱讀圖標(biāo)，就讓它們更加簡化一點(diǎn)比較好。

6保持圖標(biāo)風(fēng)格統(tǒng)一

下面的兩幅圖可以很好的展示正確的和錯(cuò)誤的例子，比如一套家具的圖標(biāo)，如果一個(gè)圖標(biāo)的繪制角度是斜45°，那么其他的圖標(biāo)也盡量保持這樣的角度。而不能一個(gè)是正視，一個(gè)是斜視?？纯聪旅鎯煞鶊D，哪幅圖是正確的呢？

相同的原理適用于線性圖標(biāo)和填充圖標(biāo)。 如果你把它們混為一談，人們可能會認(rèn)為它們具有不同的重要性或地位。 當(dāng)然，除非你刻意想要那個(gè)。 例如，填充圖標(biāo)用于鍵命令，線圖標(biāo)用于其他命令。

當(dāng)然，我們可以用填充圖標(biāo)表示當(dāng)前態(tài)，線性圖標(biāo)代表非選中狀態(tài)，這樣也是不錯(cuò)的選擇。

7基于二倍數(shù)的度量系統(tǒng)來設(shè)計(jì)

與基于十進(jìn)制的大小調(diào)整相比，8像素網(wǎng)格和12列布局用于許多接口更靈活。 12可以分為2,3,4和6。因此，24或48像素圖標(biāo)區(qū)域已成為標(biāo)準(zhǔn)。 如果需要更大的尺寸，可以縮放這些圖標(biāo)。是時(shí)候補(bǔ)習(xí)下數(shù)學(xué)啦！

8保持輪廓的干凈和準(zhǔn)確

對于完美主義，設(shè)計(jì)師不能鉆牛角尖，因?yàn)闆]有完美的事物。但是在你的最終設(shè)計(jì)稿里邊，正確的，不扭曲的圖標(biāo)設(shè)計(jì)還是非常重要的。特別要注意，確保相鄰的節(jié)點(diǎn)和相鄰的元素是完全對齊或者沒有間隙的。

一定要避免 “8.999 px”或“100.001 px”這樣的尺寸。如果節(jié)點(diǎn)定位準(zhǔn)確，圖標(biāo)邊緣看起來很清晰。這個(gè)非常必要，保持整數(shù)吧！

9清理SVG圖標(biāo)中的垃圾代碼

我們都知道SVG圖標(biāo)最終是一串代碼。在Sketch中生成的SVG圖標(biāo)通常會包含很多不必要的冗余代碼，比如組，顏色圖層還有遮罩。下面的這個(gè)圖標(biāo)在Sketch中看起來很棒，但是…….

我們把Sketch生成的SVG圖標(biāo)在AI中打開的時(shí)候，你會發(fā)現(xiàn)它的圖層非?；靵y。這些混亂的圖層都可以會讓前端開發(fā)工程師在轉(zhuǎn)換代碼的時(shí)候出現(xiàn)問題。

我們可以把這些不必要的圖層刪除掉，這樣看起來簡潔多了：

10不要把本文當(dāng)公式

當(dāng)然，以上我們討論的建議只是建議，他們不是刻板的公式。如果你知道自己在做什么，則可以僅僅把它們當(dāng)作參考，而不一定要完全遵從它們。設(shè)計(jì)是靈活多變的，只要符合用戶體驗(yàn)的規(guī)律，都可以被我們所用。

作者：Slava Shestopalov

原文：https://medium.muz.li/icon-set-3b4fc87dc6b5

翻譯：靜電

ACDSee 9據(jù)說在快速瀏覽上下了很大的功夫，提供了多種新瀏覽模式。

ACDSee 9主要新功能如下：

1、快速瀏覽(Quick View)模式：改善廣為詬病的啟動慢問題。
2、相片快速修復(fù)：一鍵消除紅眼等。
3、陰影/加亮工具：讓舊照片恢復(fù)青春。
4、私人文件夾：保護(hù)個(gè)人隱私照片。
5、日歷瀏覽模式：按時(shí)間管理照片。
6、自動分類：方便組織照片。
7、“陳列室(Showroom)”：在桌面上瀏覽照片。
8、打印設(shè)計(jì)：輕松打印照片。
9、照片分類管理：可按關(guān)鍵字、大小、拍攝時(shí)間等對照片分門別類。
10、照片分類過濾：可只限制特定類別或等級的照片。
11、目錄瀏覽模式：快速分類搜索、選擇、瀏覽照片。

試用版下載地址：http://downloads.acdsystems.com/en/acdsee.exe

（點(diǎn)擊圖片看大圖）

 包裝

圖標(biāo)

安裝

提供了工具條按鈕

歡迎界面

主界面－看起來區(qū)別不大

（點(diǎn)擊圖片看大圖）

1：易用性：
按鈕名稱應(yīng)該易懂，用詞準(zhǔn)確，屏棄沒楞兩可的字眼，要與同一界面上的其他按鈕易于區(qū)分，能望文知意最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)的正確*作。

易用性細(xì)則：
1):完成相同或相近功能的按鈕用Frame框起來，常用按鈕要支持快捷方式。
2):完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動的距離。
3):按功能將界面劃分局域塊，用Frame框括起來,并要有功能說明或標(biāo)題。
4):界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能。
5):界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置。
6):同一界面上的控件數(shù)最好不要超過10個(gè)，多于10個(gè)時(shí)可以考慮使用分頁界面顯示。
7):分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab
8):默認(rèn)按鈕要支持Enter及選*作，即按Enter后自動執(zhí)行默認(rèn)按鈕對應(yīng)*作。
9):可寫控件檢測到非法輸入后應(yīng)給出說明并能自動獲得焦點(diǎn)。
10):Tab鍵的順序與控件排列順序要一直，目前流行總體從上到下，同時(shí)行間從左到右的方式。
11):復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。
12):復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇。
13):選項(xiàng)數(shù)相同時(shí)多用選項(xiàng)框而不用下拉列表框。
14):界面空間較小時(shí)使用下拉框而不用選項(xiàng)框。
15):選項(xiàng)數(shù)叫少時(shí)使用選項(xiàng)框，相反使用下拉列表框。
16):專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼。
2： 規(guī)范性：
通常界面設(shè)計(jì)都按Windows界面的規(guī)范來設(shè)計(jì)，即包含“菜單條、工具欄、工具廂、狀態(tài)欄、滾動條、右鍵快捷菜單”的標(biāo)準(zhǔn)格式，可以說：界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好。小型軟件一般不提供工具廂。

規(guī)范性細(xì)則：
1):常用菜單要有命令快捷方式。
2):完成相同或相近功能的菜單用橫線隔開放在同一位置。
3):菜單前的圖標(biāo)能直觀的代表要完成的*作。
4):菜單深度一般要求最多控制在三層以內(nèi)。
5):工具欄要求可以根據(jù)用戶的要求自己選擇定制。
6):相同或相近功能的工具欄放在一起。
7):工具欄中的每一個(gè)按鈕要有及時(shí)提示信息。
8):一條工具欄的長度最長不能超出屏幕寬度。
9): 工具欄的圖標(biāo)能直觀的代表要完成的*作。
10):系統(tǒng)常用的工具欄設(shè)置默認(rèn)放置位置。
11):工具欄太多時(shí)可以考慮使用工具廂。
12):工具廂要具有可增減性，由用戶自己根據(jù)需求定制。
13):工具廂的默認(rèn)總寬度不要超過屏幕寬度的1/5。
14): 狀態(tài)條要能顯示用戶切實(shí)需要的信息，常用的有：
目前的*作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯(cuò)誤信息等，如果某一*作需要的時(shí)間較長，還應(yīng)該顯示進(jìn)度條和進(jìn)程提示。
15)：滾動條的長度要根據(jù)顯示信息的長度或?qū)挾饶芗皶r(shí)變換，以利于用戶了解顯示信息的位置和百分比。
16)：狀態(tài)條的高度以放置五好字為宜，滾動條的寬度比狀態(tài)條的略窄。
17)：菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時(shí)仍有立體感。
18)：菜單和狀態(tài)條中通常使用5號字體。工具條一般比菜單要寬，但不要寬的太多，否則看起來很不協(xié)調(diào)。
19):右鍵快捷菜單采用與菜單相同的準(zhǔn)則。

3：幫助設(shè)施：
系統(tǒng)應(yīng)該提供詳盡而可靠的幫助文檔，在用戶使用產(chǎn)生迷惑時(shí)可以自己尋求解決方法。

幫助設(shè)施細(xì)則：
1)：幫助文檔中的性能介紹與說明要與系統(tǒng)性能配套一致。(我們的系統(tǒng)幫助文檔都是系統(tǒng)的祖先時(shí)期的說明，讓人困惑)。
2)：打包新系統(tǒng)時(shí)，對作了修改的地方在幫助文檔中要做相應(yīng)的修改。
3)：*作時(shí)要提供及時(shí)調(diào)用系統(tǒng)幫助的功能。常用F1。
4)：在界面上調(diào)用幫助時(shí)應(yīng)該能夠及時(shí)定位到與該*作相對的幫助位置。也就是說幫助要有即時(shí)針對性。
5)：最好提供目前流行的聯(lián)機(jī)幫助格式或HTML幫助格式。
6)：用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當(dāng)然也應(yīng)該提供幫助主題詞。
7)：如果沒有提供書面的幫助文檔的話，最好有打印幫助的功能。
8 )：在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式。

4：合理性：
屏幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。

合理性細(xì)則：
1)：父窗體或主窗體的中心位置應(yīng)該在對角線焦點(diǎn)附近。
2)：子窗體位置應(yīng)該在主窗體的左上角或正中。
3)：多個(gè)子窗體彈出時(shí)應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜。
4)：重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置。
5)：錯(cuò)誤使用容易引起界面退出或關(guān)閉的按鈕不應(yīng)該放在易點(diǎn)位置。橫排開頭或最后與豎排最后為易點(diǎn)位置。
6)：與正在進(jìn)行的*作無關(guān)的按鈕應(yīng)該加以屏蔽(Windows中用灰色顯示，沒法使用該按鈕)。
7)：對可能造成數(shù)據(jù)無法恢復(fù)的*作必須提供確認(rèn)信息,給用戶放棄選擇的機(jī)會。
8)：非法的輸入或*作應(yīng)有足夠的提示說明。
9): 對運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的地方要有提示，讓用戶明白錯(cuò)誤出處，避免形成無限期的等待。
10):提示、警告、或錯(cuò)誤說明應(yīng)該清楚、明了、恰當(dāng)。
5：美觀與協(xié)調(diào)性：
界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。

美觀與協(xié)調(diào)性細(xì)則：
1): 長寬接近黃金點(diǎn)比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度。
2): 布局要合理,不宜過于密集，也不能過于空曠，合理的利用空間。
3): 按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。
4): 按鈕的大小要與界面的大小和空間要協(xié)調(diào)。
5): 避免空曠的界面上放置很大的按鈕。
6)：放置完控件后界面不應(yīng)有很大的空缺位置。
7): 字體的大小要與界面的大小比例協(xié)調(diào), 通常使用的字體中宋體9-12較為美觀，很少使用超過12號的字體。
8): 前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，最好少用深色，如大紅、大綠等。常用色考慮使用Windows界面色調(diào)。
9): 如果使用其他顏色，主色要柔和，具有親和力與磁力，堅(jiān)決杜絕刺目的顏色。
10): 大型系統(tǒng)常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等。
11): 界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。
12): 如果窗體支持最小化和最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。
13)：對于含有按鈕的界面一般不應(yīng)該支持縮放，即右上角只有關(guān)閉功能。
14): 通常父窗體支持縮放時(shí)，子窗體沒有必要縮放。
15)：如果能給用戶提供自定義界面風(fēng)格則更好，由用戶自己選擇顏色、字體等。

6：菜單位置：
菜單是界面上最重要的元素，菜單位置按照按功能來組織。

菜單設(shè)測試細(xì)則：
1)：菜單通常采用“常用–主要–次要–工具–幫助”的位置排列，符合流行的Windows風(fēng)格。
2):常用的有“文件”、“編輯”，“查看”等，幾乎每個(gè)系統(tǒng)都有這些選項(xiàng)，當(dāng)然要根據(jù)不同的系統(tǒng)有所取舍。
3):下拉菜單要根據(jù)菜單選項(xiàng)的含義進(jìn)行分組，并切按照一定的規(guī)則進(jìn)行排列，用橫線隔開。
4): 一組菜單的使用有先后要求或有向?qū)ё饔脮r(shí)，應(yīng)該按先后次序排列。
5): 沒有順序要求的菜單項(xiàng)按使用頻率和重要性排列，常用的放在開頭， 不常用的靠后放置；重要的放在開頭，次要的放在后邊。
6): 如果菜單選項(xiàng)較多，應(yīng)該采用加長菜單的長度而減少深度的原則排列。
7): 菜單深度一般要求最多控制在三層以內(nèi)。
8): 對常用的菜單要有快捷命令方式，組合原則見8。
9):對與進(jìn)行的*作無關(guān)的菜單要用屏蔽的方式加以處理，如果采用動態(tài)加載方式――即只有需要的菜單才顯示――最好。
10)：菜單前的圖標(biāo)不宜太大，與字高保持一直最好。
11):主菜單的寬度要接近，字?jǐn)?shù)不應(yīng)多于四個(gè)，每個(gè)菜單的字?jǐn)?shù)能相同最好。
12)：主菜單數(shù)目不應(yīng)太多，最好為單排布置。
。7:獨(dú)特性：
如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，則會喪失自己的個(gè)性.在框架符合以上規(guī)范的情況下，設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用。

1):安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標(biāo)。
2):主界面，最好是大多數(shù)界面上要有公司圖標(biāo)。
3):登錄界面上要有本產(chǎn)品的標(biāo)志，同時(shí)包含公司圖標(biāo)。
4):幫助菜單的“關(guān)于”中應(yīng)有版權(quán)和產(chǎn)品信息。
5):公司的系列產(chǎn)品要保持一直的界面風(fēng)格，如背景色、字體、菜單排列方式、圖標(biāo)、安裝過程、按鈕用語等應(yīng)該大體一致。

8：快捷方式的組合
在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶*作得更快一些 在西文Windows及其應(yīng)用軟件中快捷鍵的使用大多是一致的。
菜單中：
1):面向事務(wù)的組合有:
Ctrl-D 刪除 ；Ctrl-F 尋找 ；Ctrl ?H替換；Ctrl-I 插入 ；Ctrl-N 新記錄 ；Ctrl-S 保存 Ctrl-O 打開。
2)：列表:
Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分頁窗口或反序?yàn)g覽同一頁面控件；。
3):編輯:
Ctrl-A全選；Ctrl-C 拷貝；Ctrl-V 粘貼；Ctrl-X 剪切；Ctrl-Z撤消*作；Ctrl-Y恢復(fù)*作。
4)文件*作:
Ctrl-P 打??；Ctrl-W 關(guān)閉。
5):系統(tǒng)菜單
Alt-A文件；Alt-E編輯；Alt-T工具；Alt－W窗口；Alt－H幫助。
6):MS Windows保留鍵:
Ctrl-Esc 任務(wù)列表 ；Ctrl-F4 關(guān)閉窗口； Alt-F4 結(jié)束應(yīng)用；Alt-Tab 下一應(yīng)用 ；Enter 缺省按鈕/確認(rèn)*作 ；Esc 取消按鈕/取消*作 ；Shift-F1 上下文相關(guān)幫助 。
按鈕中：
可以根據(jù)系統(tǒng)需要而調(diào)節(jié)，以下只是常用的組合。
Alt-Y確定(是)；Alt-C取消；Alt-N 否；Alt-D刪除；Alt-Q退出；Alt-A添加；Alt-E編輯；Alt-B瀏覽；Alt-R讀；Alt-W寫。
這些快捷鍵也可以作為開發(fā)中文應(yīng)用軟件的標(biāo)準(zhǔn),但亦可使用漢語拼音的開頭字母。
9:安全性考慮：
在界面上通過下列方式來控制出錯(cuò)幾率，會大大減少系統(tǒng)因用戶人為的錯(cuò)誤引起的破壞。開發(fā)者應(yīng)當(dāng)盡量周全地考慮到各種可能發(fā)生的問題,使出錯(cuò)的可能降至最小。如應(yīng)用出現(xiàn)保護(hù)性錯(cuò)誤而退出系統(tǒng),這種錯(cuò)誤最容易使用戶對軟件失去信心。因?yàn)檫@意味著用戶要中斷思路,并費(fèi)時(shí)費(fèi)力地重新登錄,而且已進(jìn)行的*作也會因沒有存盤而全部丟失。

安全性細(xì)則：
1)：最重要的是排除可能會使應(yīng)用非正常中止的錯(cuò)誤。
2)：應(yīng)當(dāng)注意盡可能避免用戶無意錄入無效的數(shù)據(jù)。
3)：采用相關(guān)控件限制用戶輸入值的種類。
4)：當(dāng)用戶作出選擇的可能性只有兩個(gè)時(shí),可以采用單選框。
5)：當(dāng)選擇的可能再多一些時(shí),可以采用復(fù)選框,每一種選擇都是有效的,用戶不可能輸入任何一種無效的選擇。
6)：當(dāng)選項(xiàng)特別多時(shí)，可以采用列表框，下拉式列表框。
7)：在一個(gè)應(yīng)用系統(tǒng)中,開發(fā)者應(yīng)當(dāng)避免用戶作出未經(jīng)授權(quán)或沒有意義的*作。
8)：對可能引起致命錯(cuò)誤或系統(tǒng)出錯(cuò)的輸入字符或動作要加限制或屏蔽。
9):對可能發(fā)生嚴(yán)重后果的*作要有補(bǔ)救措施。通過補(bǔ)救措施用戶可以回到原來的正確狀態(tài)。
10):對一些特殊符號的輸入、與系統(tǒng)使用的符號相沖突的字符等進(jìn)行判斷并阻止用戶輸入該字符。
11)：對錯(cuò)誤*作最好支持可逆性處理，如取消系列*作。
12):在輸入有效性字符之前應(yīng)該阻止用戶進(jìn)行只有輸入之后才可進(jìn)行的*作。
13):對可能造成等待時(shí)間較長的*作應(yīng)該提供取消功能。
14)：特殊字符常有；;’”><,｀‘：“［”｛、|｝］+=)-(_*&&^%$#@!~,.。?/還有空格。
15)：與系統(tǒng)采用的保留字符沖突的要加以限制。
16)：在讀入用戶所輸入的信息時(shí)，根據(jù)需要選擇是否去掉前后空格。
17)：有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實(shí)需要輸入中間空格，這時(shí)要在程序中加以處理。

10:多窗口的應(yīng)用與系統(tǒng)資源：
設(shè)計(jì)良好的軟件不僅要有完備的功能，而且要盡可能的占用最底限度的資源。
1)： 在多窗口系統(tǒng)中，有些界面要求必須保持在最頂層，避免用戶在打開多個(gè)窗口時(shí)，不停的切換甚至最小化其他窗口來顯示該窗口。

2)：在主界面載入完畢后自動卸出內(nèi)存，讓出所占用的WINDOWS系統(tǒng)資源。
3)：關(guān)閉所有窗體，系統(tǒng)退出后要釋放所占的所有系統(tǒng)資源 ，除非是需要后臺運(yùn)行的系統(tǒng)。
4)：盡量防止對系統(tǒng)的獨(dú)占使用。

一：遵循一致的準(zhǔn)則，確立標(biāo)準(zhǔn)并遵循
無論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。
這樣得到的好處：

1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個(gè)界面后，切換到另外一個(gè)界面能夠很輕松的推測出各種功能，語句理解也不需要費(fèi)神理解
2：降低培訓(xùn)、支持成本，支持人員不會行費(fèi)力逐個(gè)指導(dǎo)。
3：給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加

做法：
項(xiàng)目組有經(jīng)驗(yàn)人士，確立UI規(guī)范：
?美工提供色調(diào)配色方案，提供整體配色表
?界面控制程序人員、用戶體驗(yàn)人員提出合理統(tǒng)一使用的控件庫。參考標(biāo)準(zhǔn)界面使用規(guī)范：

控件功能遵循行業(yè)標(biāo)準(zhǔn)，windows平臺參見《Microsoft 用戶體驗(yàn)》(MSDN中有，中文已經(jīng)翻譯發(fā)行，項(xiàng)目組必須有一本)
控件樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)
參考其他軟件先進(jìn)操作，提取對本項(xiàng)目有用的功能，以使用，絕對不能盲從，漫無目的。
根據(jù)需要，設(shè)計(jì)特殊操作控件，準(zhǔn)則為：簡化操作、達(dá)到一定功能目的

?界面實(shí)施人員與美工商榷控件可實(shí)現(xiàn)性,(如不實(shí)行此步驟，將會導(dǎo)致各自對對方工作不滿意，也會產(chǎn)生不一致的混亂)。重復(fù)疊代上述工作。
?建立合理化文檔《UI標(biāo)準(zhǔn)》描述上述規(guī)范，
?強(qiáng)行界面設(shè)計(jì)者理解之，并作為開發(fā)準(zhǔn)則，
?SQA人員進(jìn)行監(jiān)控開發(fā)人員是否遵循，及時(shí)告誡開發(fā)人員。

二：(Color)顏色使用恰當(dāng)，遵循對比原則：
1：統(tǒng)一色調(diào)，針對軟件類型以及用戶工作環(huán)境選擇恰當(dāng)色調(diào)：
如：安全軟件，根據(jù)工業(yè)標(biāo)準(zhǔn)，可以選取黃色，綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時(shí)尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等
2：如果沒有自己的系列界面，采用標(biāo)準(zhǔn)界面則可以少考慮此方面，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表
3：色盲、色弱用戶，即使使用了特殊顏色表示重點(diǎn)或者特別的東西，也應(yīng)該使用特殊指示符，如”!”，”?”著重號，以及圖標(biāo)等
4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現(xiàn)每臺機(jī)器都不一樣，應(yīng)該經(jīng)過嚴(yán)格測試，不同機(jī)器進(jìn)行顏色測試
5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒有足夠反差，而藍(lán)色和白色反差很大。除非特殊場合，杜絕使用對比強(qiáng)烈，讓人產(chǎn)生憎惡感的顏色。
6：整個(gè)界面色彩盡量少的使用類別不同的顏色
itop色表
具體標(biāo)準(zhǔn)參考美術(shù)學(xué)統(tǒng)計(jì)學(xué)術(shù)標(biāo)準(zhǔn)。
色表的建設(shè)，對于美工在圖案設(shè)計(jì)、包裝設(shè)計(jì)上起著標(biāo)準(zhǔn)參考作用，對于程序界面設(shè)計(jì)人員設(shè)計(jì)控件、窗體調(diào)色起到有章可循的作用。

三：(Resource)資源
一個(gè)多姿多彩的人機(jī)交互界面，少不了精美的鼠標(biāo)光標(biāo)、圖標(biāo)以及指示圖片、底圖等。

1：也需要遵循統(tǒng)一的規(guī)則，包括上述顏色表的建立，圖標(biāo)的建立步驟也應(yīng)該盡可能的形成標(biāo)準(zhǔn)，參考itop的outlookbar圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)
2：有標(biāo)準(zhǔn)的圖標(biāo)風(fēng)格設(shè)計(jì)，有統(tǒng)一的構(gòu)圖布局，有統(tǒng)一的色調(diào)、對比度、色階，以及圖片風(fēng)格
3：底圖應(yīng)該融于底圖，使用淺色, 低對比，盡量少的使用顏色。
4：圖標(biāo)、圖像應(yīng)該很清晰的表達(dá)出意思，遵循常用標(biāo)準(zhǔn)，或者用戶機(jī)器容易聯(lián)想的到物件，絕對不允許畫出默認(rèn)奇妙的圖案。
5：鼠標(biāo)光標(biāo)樣式統(tǒng)一，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況，例如某些軟件中一個(gè)手的形狀就有4鐘不同的樣子。
如：《如何創(chuàng)建XP圖標(biāo)》http://www.microsoft.com/china/msdn…/winxpicons.asp
附件：Itop outlook howto.doc 描述itop項(xiàng)目中，outlookxp風(fēng)格圖標(biāo)的制作方法

四：(Font)字體
使用統(tǒng)一字體，字體標(biāo)準(zhǔn)的選擇依據(jù)操作系統(tǒng)類型決定。
中文采用標(biāo)準(zhǔn)字體，“宋體”，英文采用標(biāo)準(zhǔn) Microsoft Sans Serif 不考慮特殊字體(隸書、草書等,特殊情況可以使用圖片取代),保證每個(gè)用戶使用起來顯示都很正常。
字體大小根據(jù)系統(tǒng)標(biāo)準(zhǔn)字體來，例如 MSS字體8磅，宋體的小五號字(9磅)五號字（10.5磅）。
所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外情況
ITop采用BCB，所有控件默認(rèn)使用 parent font，不允許修改，這樣有利于統(tǒng)一調(diào)整。
?系統(tǒng)大小字體屬性改變的處理。
Windows系統(tǒng)有個(gè)桌面設(shè)置，設(shè)置大字體屬性，很多界面設(shè)計(jì)者常常為這個(gè)惱火，如果設(shè)計(jì)時(shí)遵循微軟的標(biāo)準(zhǔn)，全部使用相對大小作為控件的大小設(shè)置，當(dāng)切換大小字體的時(shí)候，相對不會有什么特殊問題。
但是由于常常方便使用點(diǎn)陣作為窗口設(shè)計(jì)單位，導(dǎo)致改變大字體后，出現(xiàn)版面混亂的問題。
這個(gè)情況下，應(yīng)該做相應(yīng)處理：
1：寫程序自動調(diào)節(jié)大小，點(diǎn)陣值乘以一個(gè)相應(yīng)比例
2：全部采用點(diǎn)陣作為單位，不理會系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。BCB/DELPHI中多采用這種方法，但是必然結(jié)果是和系統(tǒng)不統(tǒng)一。

五：(Text)文字表達(dá)
提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則：

1：口語化、客氣、多用您、請，不要用或少用專業(yè)術(shù)語，杜絕錯(cuò)別字
2：斷句逗號句號頓號分號的用法，\r\n 提示信息比較多的話，應(yīng)該分段，
3：警告、信息、錯(cuò)誤 使用對應(yīng)的表示方法
4：使用統(tǒng)一的語言描述，例如一個(gè)關(guān)閉功能按鈕，可以描述為退出、返回、關(guān)閉，則應(yīng)該統(tǒng)一規(guī)定。
5: 根據(jù)用戶不同采用相應(yīng)的詞語語氣語調(diào)，如專用軟件，可以出現(xiàn)很多專業(yè)屬于，用戶為兒童：這可以語氣親切和藹，老年用戶則應(yīng)該成熟穩(wěn)重。制定標(biāo)準(zhǔn)遵循之。

六：(STYLE)控件風(fēng)格，不要使用錯(cuò)誤控件，控件功能要專一
有設(shè)計(jì)好的同一風(fēng)格的控件，如果沒有能力設(shè)計(jì)出一套控件，則使用標(biāo)準(zhǔn)控件，絕對不能不倫不類，雜亂無章
?不要錯(cuò)誤使用控件，例如：
使用Button樣式做TTable的功能，拿主菜單條顯示版權(quán)信息，
?統(tǒng)一類型的控件操作方式相同，例如一個(gè)控件雙擊可以執(zhí)行某些動作，而同樣控件，雙擊卻沒有任何反映
?一個(gè)控件只做單一功能，不復(fù)用
很多人為了寫程序方便，喜歡把一個(gè)控件在不同情況下做不同功能用，這些對用戶初次理解增加難度，只有用戶熟悉后才能理解。
例如

改變紅色選項(xiàng)，左邊的參數(shù)代表不同的設(shè)置，可能由于為了節(jié)省控件或者編程量，但是只有熟練用戶才回使用，這種情況下解決方法：

1:分組，使用雙份控件.
2：使用TABLE頁，給用戶很明顯的視覺變化

七：(ALIGN)控件布局，窗口不擁擠，按功能組合控件，
1：屏幕不能擁擠
擁擠的屏幕讓人難以理解，因而難以使用。試驗(yàn)結(jié)果(Mayhew,1992年)屏幕總體覆蓋度不應(yīng)該超過40％，而分組鐘覆蓋度不應(yīng)該超過62％。
讓人看上去，不能太擁擠，也不能太松散。
整個(gè)項(xiàng)目，采用統(tǒng)一的控件間距，通過調(diào)整窗體大小達(dá)到一致，即使在窗體大小不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距。

2：區(qū)域排列
一行控件，縱向中對齊, 控件間距基本保持一致
行與行之間間距相同，靠窗體Border距離應(yīng)大于行間間距(間距加邊緣留空)。
當(dāng)屏幕有多個(gè)編輯區(qū)域，要以視覺效果和效率來組織這些區(qū)域。
3：數(shù)據(jù)對齊要適當(dāng)
說明文字，中文版應(yīng)使用中文全角冒號，縱向?qū)R時(shí)，并按冒號右對其，如圖。
縱向控件寬度盡量保持相通。并左對齊。
例如金額等字符穿應(yīng)根據(jù)小數(shù)點(diǎn)對齊，或者右對齊
4：有效組合
邏輯上相關(guān)聯(lián)的控件應(yīng)當(dāng)加以組合，以表示其關(guān)聯(lián)性，反之，任何不想光的項(xiàng)目應(yīng)當(dāng)風(fēng)格開，在項(xiàng)目集合間，用間隔對其進(jìn)行分組，或者使用方框劃分各自區(qū)域。
例如： 以下界面，選擇搜索方式來判斷號碼范圍是表示主叫號碼范圍還是被叫號碼范圍，和入帳方式無關(guān)，
則應(yīng)該修改為： 搜索方式和入帳方式調(diào)換位置。以免用戶產(chǎn)生誤解。
5：窗口縮放時(shí)，控件位置、布局：

為了使界面不出現(xiàn)跑版或者難看的局面，解決方法：
1：固定窗口大小，不允許改變尺寸，
2：改變尺寸的窗口，在Onsize的時(shí)候做控件位置、大小的相應(yīng)改變。
BCB/DELPHI的VCL中，大部分控件有布局屬性：
某些控件擁有alignment屬性，可以用來做布局調(diào)節(jié)：TcustomPanel，Tmemo等，考左靠右靠上靠下以及撐滿(Client)屬性，用來根據(jù)版面自動調(diào)節(jié)。
大部分控件有屬性Anchors，里面上下左右akLeft, akTop等如果為true，則表示相對各個(gè)邊緣的距離是否改變。這個(gè)可以進(jìn)一步設(shè)計(jì)好排版工作。

八：(TAB ORDER)TAB順序
習(xí)慣用法，閱讀順序，從從左到右，從上到下
窗體中控件的Tab按鍵激活順序，TabOrder,. BCB/DELPHI中使用窗體設(shè)計(jì)右鍵菜單選擇taborder設(shè)置，VC中窗體RES編輯區(qū)域使用ctrl+D

九：(ShortcutKey & Accelerator& PopMenu)快捷鍵、加速鍵和彈出菜單
?快捷鍵：

1：全局快捷鍵菜單中加以描述 CTRL+XXX 并入幫助列表。
2：快捷鍵寫入幫助，特殊說明，并在使用培訓(xùn)時(shí)強(qiáng)調(diào)使用

?加速鍵：

1：使用非破壞性缺省按鈕，回車、ESC鍵的正確使用

一個(gè)窗體，有默認(rèn)加速鍵，如回車表示激活當(dāng)前窗口設(shè)置為default的按鈕動作，esc表示關(guān)閉窗口。

在調(diào)用default按鈕動作和關(guān)閉動作時(shí)候，不應(yīng)該做有破壞性的操作，避免用戶錯(cuò)誤操作產(chǎn)生危害程度，例如不能把刪除數(shù)據(jù)等功能的按鈕作為缺省按鈕。當(dāng)用戶要提交很多數(shù)據(jù)時(shí)，應(yīng)該屏蔽esc，或者做退出提示，告誡用戶是否保存提交。

2：可接收動作控件必須擁有加速鍵，統(tǒng)一加速鍵描述(&A)

為結(jié)合鍵盤使用，可操作控件都應(yīng)該有加速鍵，加速鍵定義準(zhǔn)則，為英文單詞第一個(gè)字母，如果同一窗體重復(fù)則用第二個(gè)字母，以此類推，則加速方式為alt+這個(gè)加速鍵，用統(tǒng)一的方法標(biāo)識在界面中，如XXX(A) 或者wps的 A.XXX 英文可直接在字母下標(biāo)識下劃線 Cancel，

對于無法像button一樣顯示快捷鍵的Edit等控件，則在Edit描述的Label中顯示快捷鍵。

?彈出菜單

輔助菜單必須在可視化界面上擁有對應(yīng)的按鈕或者菜單選項(xiàng)。

由于輔助菜單由用戶點(diǎn)擊鼠標(biāo)左右鍵或者別的動作才能調(diào)出來顯示給用戶。無法清晰的顯示給用戶，所以對應(yīng)選項(xiàng)應(yīng)該可以通過別的途徑得到,例如界面上有相應(yīng)控件或彈出右鍵菜單的按鈕等。

十：(ACTION)用戶交互
1：disable而不是not visible

要使一個(gè)功能有時(shí)允許有時(shí)不允許用戶使用，則這個(gè)控件的不能隨便隱藏，應(yīng)該使用disable屬性進(jìn)行表示，以免用戶發(fā)現(xiàn)控件失蹤后措手無策

2：窗口彈出位置要明顯

點(diǎn)擊一個(gè)控件，彈出窗口或者菜單，應(yīng)該給人明顯提示，最低要求是覆蓋剛才點(diǎn)擊的位置，讓用戶輕松跳轉(zhuǎn)到新的界面。

3：執(zhí)行動作要提示

給用戶一個(gè)視覺感受的同時(shí)，寫程序的時(shí)候應(yīng)該注意用戶的交互感受，UI作為人機(jī)對話的工具，用戶做了任何動作，應(yīng)該給用戶一個(gè)視覺或者聽覺、觸覺提示。而且這個(gè)提示應(yīng)該行明顯，但不應(yīng)提示過長，可以有以下幾種方法：

當(dāng)用戶點(diǎn)擊按鈕等動作進(jìn)行一個(gè)工作時(shí)：

1：彈出交互對話框讓用戶點(diǎn)擊確認(rèn)。

2：改變UI中控件參數(shù)提示：(處理不用用戶確認(rèn)的提示，有一定延時(shí)，或者用戶按鍵后自動清除。)

如：改變標(biāo)題欄字符串，顯示“信息：提交成功”,或者專門設(shè)置一個(gè)狀態(tài)欄、TLable等用來進(jìn)行提示。

3：聽覺提示：

在確定有聲卡，用戶可以聽到聲音的時(shí)候，發(fā)出特殊聲音提示。一般作為重要提示的輔助。聲音不應(yīng)過長，緊急錯(cuò)誤提示應(yīng)該短促，頻率較高，成功提示應(yīng)該舒緩，輕松。等等……

十一：(HELP)聯(lián)機(jī)幫助：
什么時(shí)候要幫助，什么時(shí)候不要幫助

1：系統(tǒng)默認(rèn)、行業(yè)標(biāo)準(zhǔn)的控件操作不需要逐一描述，只需要對特殊控件加以描述

2：特殊操作、特殊功能界面，在界面上加控件直接連接到對應(yīng)的HELP文件中

3：特殊設(shè)置詳細(xì)，應(yīng)該在界面上用簡潔明了的語句說明，或者是好用Tiptool，并由第二步幫助

幫助文檔：

結(jié)構(gòu)化，按功能模塊劃分

必須闡述功能通過什么方法可以在軟件中實(shí)現(xiàn)

幫助文件是幫助用戶更好的使用軟件，措辭要恰當(dāng)、簡捷、通俗易懂,每一句話都應(yīng)該有目的，幫用戶解決問題

幫助文件不是廣告、商業(yè)軟件不允許打廣告。描述公司信息目的是為了方便用戶在沒有辦法的情況下找到售后支持，網(wǎng)址連接、信箱地址、電話號碼絕對不允許無效。

十二：發(fā)行時(shí)闡明規(guī)則
對統(tǒng)一的東西進(jìn)行逐一闡述，并加以典型描述，放入HELP和用戶手冊中，同時(shí)加有詞匯表

附錄：
美工何時(shí)參與進(jìn)來：

美工作為界面美化的主要人員，不但擁有藝術(shù)設(shè)計(jì)、包裝設(shè)計(jì)的才能，還應(yīng)該穿插整個(gè)項(xiàng)目，給界面程序設(shè)計(jì)人員提出系統(tǒng)參考意見。

1：軟件設(shè)計(jì)前期，美工參與需求了解，分析同類軟件界面有缺點(diǎn)，提出主色調(diào)、典型界面風(fēng)格、以及構(gòu)思整個(gè)美術(shù)包裝等。

2：界面原型設(shè)計(jì)過程中，與開發(fā)人員共同修改、商榷最終表現(xiàn)樣式，以及確立UI標(biāo)準(zhǔn)。

3：程序開發(fā)過程中，提供標(biāo)準(zhǔn)風(fēng)格的資源文件（icon,cur,bmp等），并總結(jié)出統(tǒng)一風(fēng)格的資源的設(shè)計(jì)過程，形成規(guī)范文檔* .

4：產(chǎn)品化方面，協(xié)助制作幫助文件、網(wǎng)站風(fēng)格以及參與制作，制作附帶宣傳圖片、動畫、產(chǎn)品包裝、海報(bào)等。