版式設計關注的是設計中文字和圖像的位置關系。 這些元素應該如何擺放，它們彼此以及整體設計構想的關系，都會影響到用戶對內容的識別與接收，以及他們對內容所產生的情緒反應。利用親密性原則和對齊方式可以促進用戶接收頁面中呈現的信息。

 對齊原則

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

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

垂直對齊

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

水平對齊

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

對齊方式決定了整個畫面的流暢性，在做日常需求中明明有對齊的意識，但是為什么設計出來的頁面就是很奇怪呢？對齊方式的合理運用絕大部份是體現在視覺維度上，而我們往往僅考慮物理對齊方式。

下面舉幾個我的需求案例來解決視覺對齊的幾點問題：

以視覺邊界線對齊

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

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

小結：對齊邊緣以視覺引導線為準。

以視覺流對齊

我們正常在看東西的時候會是從上到下，從左到右這樣進行瀏覽閱讀信息，那么在頁面設計的時候也應當考慮一下。

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

小結：頁面的一個區塊內，重要元素或者操作區往往會跟隨著視覺流向進行布局。

多屬性對齊原則

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

上圖為優化后的版本，將列表標題和內容的對齊方式進行單獨劃分，用戶在瀏覽中可以快速識別和區分信息。

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

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

 親密性原則

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

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

當我們移動了物體的位置之后，會感覺左面三個物品屬于一個區域整體。

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

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

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

那么在需求中我會用到兩種方法來對親密性實現和調優的：

借助間距優化親密性

上面這張設計圖中，我們會感覺日期、評論、點贊量和下面的章節是一個區塊，在瀏覽的時候造成很大困擾。

而在優化后，將三個信息點的距離拉近成為一個區塊，并且層級關系也一目了然。

小結：在信息容易產生誤解的時候，需要注意間距的把控

借助元素建立親密性

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

卡片工具

分割工具

小結：針對不同的頁面風格和強弱，工具的使用也會有所差異，要適合頁面調性來選擇使用。

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

原文：TCD設計中心

間距的重要性

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

外邊距

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

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

由于沒有留白做視覺引導，視線在往下瀏覽時，會被圖片直接割裂，造成在圖片上停留的時間更長，因此通欄的設計大多更適合出現在頁面中間的運營banner上，如下圖所示：

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

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

字間距

1、圖文單行結合

首先要說的這種情況在我們平時使用的產品中是經常見的，大字號搭配小字號，如下圖所示：

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

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

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

2、圖文多行結合

圖文多行在設計里面算是比較復雜的情況，如下圖所示：

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

從上圖中我們能夠看出來，雖然不存在折行的情況，但是因為展示的信息很多，所以頁面設計的時候也會比較復雜，這種結構大多出現在電商產品中，因為外露的信息比較多，想要盡量在列表頁展示更多的信息來吸引用戶點擊。而這里需要遵循的方法有兩個，第一個是親密性原則，將你認為是同組的信息做親密處理，上圖中藍色高亮的部分就是表示同組信息之間的行間距，而巧合的是，其中有三個產品的行間距都是16px，餓了么的行間距是20px。因此16px是在圖文設計時展示親密信息比較好的選擇。第二個原則是4的倍數定律，上圖中的所有間距都是4的倍數，這跟我們在設計頁面定間距是的道理是一樣的。

行間距

行間距也是我們平時要特別注意的小細節，因為不知道大家發現一個問題沒有，行間距沒有處理好，一旦界面的信息有點多，整體視覺上就會顯得很擁擠，不如我們先來看看線上的作品是如何解決這些問題的。這個問問題一般會有2種，我們現在就都來看看吧！

1、標題行間距

這種情況一般出現在標題會有折行的情況下，但是下面的內容卻都是單行，如下圖所示：

上面四個產品中，除了京東的行間距是12px，其余的都是16px，個人認為是因為京東的商品組建部分信息很多，因此整體的字體也偏小，所以12px的行間距不會顯得太過擁擠。

2、正文行間距

這種情況是出現在標題最多只有一行，但是正文都是折行的情況，如下圖所示：

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

元素間距

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

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

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

劃重點

從信息層級的角度上來說，級別越高的內容間距越大，因為越重要的內容就要越吸引用戶越多的注意力，運用親密原則，能夠從視覺上減少用戶對文字信息處理的成本。面對多行和單行的信息處理，除了查找數值規律之外也要結合實際的項目情況，比如說文章中有提到的幾個特例，都是選擇了最適合產品的信息展示方式。

參考引文

《間距與邊距的設計要點》http://1t.click/buuV

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

作者：潘團子

1 使用光柵來更好的設計圖標

UI界面的圖標通常可以近似的看做以下的基本格式之一：橫向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會發現它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。

根據圖標形狀，將它們放在相應的框架中。你就會發現，方形圖標比三角形或細長圖標更緊湊。

圖標越緊湊，所需空間就越小。圖標的邊緣越銳利，細節越多，它們占據的畫板空間就越多。

請注意，不要過分的依賴于網格來設計圖標。它們是用來幫你而不是限制你的。如果一個圖標的某些元素伸展出來更好看，那就順其自然讓它們伸出來。

2注意像素網格的重要性

在非視網膜屏幕上設計圖形的時候，要特別遵循使用像素網格，并優先選用2像素的邊框作為圖標的線條。因為它可以讓圖標在這些顯示屏上更加清晰。

如果為圖標設置1像素的邊框，這個時候，這些邊框應該使用外部或內部的描邊樣式，但不建議是居中的。如下圖，你可以看到他們的區別。

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

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

3保持一定的圖標細節

從一套圖標中最復雜的那個開始來設計通常是最有效的，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。

當圖標具有不同的細節層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。

4控制最小的間隙尺寸

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

下面這個則是調整后的效果，是不是好多了？

對于線性圖標來說，圖標線段的最小間隙應該等于線的粗度。另外，線條應該明確的分開或者準確的閉合連接。下圖是從錯誤的例子：

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

5去除重復部分

在一套圖標集中，你很可能會重復一些細節，比如下圖這樣。但是盡量不要這么做，讓觀眾的注意力集中在不同的東西上。這就像數學中的分數簡化一樣。您看到的圖形噪聲越少，用戶的理解就越清晰。

比如下方這個郵件收發主題的圖標，當用戶已經非常熟知自己的具體操作，比如收郵件，發郵件，回復等等。那就不要在設計圖標的時候反復強調“信封”這個圖形了。將它們簡化，效果反而更好。

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

6保持圖標風格統一

下面的兩幅圖可以很好的展示正確的和錯誤的例子，比如一套家具的圖標，如果一個圖標的繪制角度是斜45°，那么其他的圖標也盡量保持這樣的角度。而不能一個是正視，一個是斜視。看看下面兩幅圖，哪幅圖是正確的呢？

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

當然，我們可以用填充圖標表示當前態，線性圖標代表非選中狀態，這樣也是不錯的選擇。

7基于二倍數的度量系統來設計

與基于十進制的大小調整相比，8像素網格和12列布局用于許多接口更靈活。 12可以分為2,3,4和6。因此，24或48像素圖標區域已成為標準。 如果需要更大的尺寸，可以縮放這些圖標。是時候補習下數學啦！

8保持輪廓的干凈和準確

對于完美主義，設計師不能鉆牛角尖，因為沒有完美的事物。但是在你的最終設計稿里邊，正確的，不扭曲的圖標設計還是非常重要的。特別要注意，確保相鄰的節點和相鄰的元素是完全對齊或者沒有間隙的。

一定要避免 “8.999 px”或“100.001 px”這樣的尺寸。如果節點定位準確，圖標邊緣看起來很清晰。這個非常必要，保持整數吧！

9清理SVG圖標中的垃圾代碼

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

我們把Sketch生成的SVG圖標在AI中打開的時候，你會發現它的圖層非常混亂。這些混亂的圖層都可以會讓前端開發工程師在轉換代碼的時候出現問題。

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

10不要把本文當公式

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

作者：Slava Shestopalov

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

翻譯：靜電

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

ACDSee 9主要新功能如下：

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

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

（點擊圖片看大圖）

 包裝

圖標

安裝

提供了工具條按鈕

歡迎界面

主界面－看起來區別不大

（點擊圖片看大圖）

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

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

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

3：幫助設施：
系統應該提供詳盡而可靠的幫助文檔，在用戶使用產生迷惑時可以自己尋求解決方法。

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

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

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

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

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

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

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

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

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

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

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

一：遵循一致的準則，確立標準并遵循
無論是控件使用，提示信息措辭，還是顏色、窗口布局風格，遵循統一的標準，做到真正的一致。
這樣得到的好處：

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

做法：
項目組有經驗人士，確立UI規范：
?美工提供色調配色方案，提供整體配色表
?界面控制程序人員、用戶體驗人員提出合理統一使用的控件庫。參考標準界面使用規范：

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

?界面實施人員與美工商榷控件可實現性,(如不實行此步驟，將會導致各自對對方工作不滿意，也會產生不一致的混亂)。重復疊代上述工作。
?建立合理化文檔《UI標準》描述上述規范，
?強行界面設計者理解之，并作為開發準則，
?SQA人員進行監控開發人員是否遵循，及時告誡開發人員。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1：全局快捷鍵菜單中加以描述 CTRL+XXX 并入幫助列表。
2：快捷鍵寫入幫助，特殊說明，并在使用培訓時強調使用

?加速鍵：

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

一個窗體，有默認加速鍵，如回車表示激活當前窗口設置為default的按鈕動作，esc表示關閉窗口。

在調用default按鈕動作和關閉動作時候，不應該做有破壞性的操作，避免用戶錯誤操作產生危害程度，例如不能把刪除數據等功能的按鈕作為缺省按鈕。當用戶要提交很多數據時，應該屏蔽esc，或者做退出提示，告誡用戶是否保存提交。

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

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

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

?彈出菜單

輔助菜單必須在可視化界面上擁有對應的按鈕或者菜單選項。

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

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

要使一個功能有時允許有時不允許用戶使用，則這個控件的不能隨便隱藏，應該使用disable屬性進行表示，以免用戶發現控件失蹤后措手無策

2：窗口彈出位置要明顯

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

3：執行動作要提示

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

當用戶點擊按鈕等動作進行一個工作時：

1：彈出交互對話框讓用戶點擊確認。

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

如：改變標題欄字符串，顯示“信息：提交成功”,或者專門設置一個狀態欄、TLable等用來進行提示。

3：聽覺提示：

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

十一：(HELP)聯機幫助：
什么時候要幫助，什么時候不要幫助

1：系統默認、行業標準的控件操作不需要逐一描述，只需要對特殊控件加以描述

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

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

幫助文檔：

結構化，按功能模塊劃分

必須闡述功能通過什么方法可以在軟件中實現

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

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

十二：發行時闡明規則
對統一的東西進行逐一闡述，并加以典型描述，放入HELP和用戶手冊中，同時加有詞匯表

附錄：
美工何時參與進來：

美工作為界面美化的主要人員，不但擁有藝術設計、包裝設計的才能，還應該穿插整個項目，給界面程序設計人員提出系統參考意見。

1：軟件設計前期，美工參與需求了解，分析同類軟件界面有缺點，提出主色調、典型界面風格、以及構思整個美術包裝等。

2：界面原型設計過程中，與開發人員共同修改、商榷最終表現樣式，以及確立UI標準。

3：程序開發過程中，提供標準風格的資源文件（icon,cur,bmp等），并總結出統一風格的資源的設計過程，形成規范文檔* .

4：產品化方面，協助制作幫助文件、網站風格以及參與制作，制作附帶宣傳圖片、動畫、產品包裝、海報等。