UI設計原則詳述

2021-09-14 00:59:50 字數 2982 閱讀 4446

介面是使用者作業系統的視窗,而不是介面控制使用者。因此介面一定要適合使用者操作軟體的習慣,這是最基本的要求。介面的合理性既提倡外美內秀,又強調恰如其分。以使用者為中心應遵循以下要點:

1、使用者扮演主動角色,在需要自動執行任務時,允許使用者進行選擇或控制它的實現方式;

2、採取互動式和易於感應的視窗,使用者確定選項後應確保該模式是顯然的、可見的,並且容易取消;

3、在後台首席執行官程序時,保持前台式互動。例如,當正在列印乙個文件,即使該文件不能被改變,使用者也應該可以最小化該視窗;

4、提供使用者自定義設定,軟體應盡可能提供其他選項設定;

5、取消操作,應盡可能提供可逆轉或可還原的操作。

介面設計應易於理解,基於使用者現有的知識和經驗就可以理解不需特殊記憶,並不會產生歧義的方式設計介面。提高使用者介面可理解性的一些規則如下:

1、介面中的所有元素(如選單、工具條等)不會讓人誤解或錯誤;

2、所有的介面元素應當提供充分而必要的提示,例如當滑鼠移動到工具條上的某個圖示按鈕時,應當在該圖示旁邊出現功能提示;

3、介面結構能夠清晰地反映工作流程,以便使用者按部就班地操作;

4、對於複雜的使用者介面而言,最好提供介面「嚮導」,及時讓使用者知道自己在介面結構中所處的位置。例如對於基於web的應用軟體,應該在介面上顯示「當前位置」,否則使用者很容易在眾多的頁面中迷失方向。

同類介面元素應當有相同的視感和相同的操作方式。例如命令按鈕是最常見的介面元素,所有命令按鈕的形狀、色彩以及對滑鼠的響應方式都是一致的。

同類軟體的使用者介面應當一定程度的相似性,所有具有相同含義的術語應保持一致。例如microsoft公司的office家族裡有word、excel、powerpoint、outlook等軟體,這些軟體提供的「複製、剪下、貼上」功能的操作方式都是相同的。為保持介面設計清楚一致,應遵循以下要點:

1、相同含義的詞彙使用統一的術語。比如對於倉庫中存放的物料,不可同時稱為物品、貨物、備品、產品和材料等,應統一約定乙個稱謂,且此稱謂是使用者熟悉的和易於理解的;

2、使用一致的命令和介面來展示常見功能。例如,避免乙個"複製"命令在一種情況下立刻執行乙個操作,但在另一種情況顯示乙個對話方塊要求使用者鍵入目標然後才執行。應該使用同樣的命令來執行對使用者來說相似的功能;

3、操作環境內的一致。保持windows提供的互動操作和介面約定之間的高度一致,使用者將能很快熟悉軟體的使用;

4、使用隱喻的一致性。避免乙個特定行為有多種不同寓意;

5、建立專案保留字。通過建立保留字來明確和統一術語和操作命令;

6、提供可視反饋。在後台首席執行官程序時(時間超過1~10秒,視具體情況而定),必須提供進度條等資訊指示;

7、除非特別必要,不要提供聲音反饋。在有嚴重的問題發生時,可以使用聲音來提示使用者,但是通常應該允許使用者取消聲音;

8、保持文字內容清楚。資訊的表達要言簡意賅,易於理解而又不羅嗦;避免使用冗長的文字給使用者反饋。

程序顯示頁面是各系統通用的頁面,主要作用在於系統進行時間較長時候的操作時,以動態的方式,提示使用者目前系統的進行狀態,在一些資料載入或有一些資料延遲的操作中,均統一使用此程序等頁面,保證一致性。系統響應時間包括兩個方面:時間長度和時間的易變性。使用者響應時間應該適中,系統響應時間過長,使用者就會感到不安和沮喪,而響應時間過短有時會造成使用者加快操作節奏,從而導致錯誤。系統響應時間的易變性是指相對於平均響應時間的偏差。即使響應時間比較長,低的響應時間易變性也有助於使用者建立穩定的節奏。

設計使用者介面時必須考慮出錯處理,目的是讓使用者不必為避免犯錯誤而提心吊膽、小心翼翼地操作。常見的錯誤處理方式有:

1、提供對輸入資料進行校驗的功能。當使用者輸入錯誤的資料時,及時提醒使用者改正資料;

2、對於在某些情況下不應該使用的選單項和命令按鈕,將其「失效」(遮蔽)可以有效防止該項功能被錯誤地使用。例如:對於某些管理軟體,不同的使用者有不同的操作許可權。如果低許可權的使用者登入到系統,那些只有高階許可權使用者才能使用的功能應當被遮蔽(如變成「灰色」不可操作);

3、提供undo功能,用以撤銷不期望的操作;

4、執行破壞性的操作之前,應當獲得使用者的確認。例如使用者刪除乙個檔案時,應當彈出對話方塊:「真的要刪除該檔案嗎」,當使用者確認後才真正刪除檔案。

首先,介面的布局應當符合邏輯,符合使用者的思維方式與操作習慣。介面設計人員只有仔細地分析軟體的需求,才能提取對介面布局有價值的資訊。

其次,介面的布局應當整潔(整齊清爽)。介面元素應當在水平或者垂直方向對齊,行、列的間距保持一致。窗體的尺寸要合適,各種控制項不能過分擁擠也不能過分寬鬆。要善於利用窗體和控制項的空白,以及分割用的線條。

1、使用者介面應該是簡單(但不是硬性刪簡)易用的。介面中應該提供了訪問該程式的所有功能。建立強大的功能和保持介面簡單是具有矛盾的,有效的設計做出了有效的折中。

盡量壓縮交流的資訊。如選單命令及訊息提醒一定要簡明扼要。詞不達意或羅里羅嗦的資訊會給使用者發現想要的資訊造成困難;

·使用自然的對映和語法。元素的擺放位置和顯示狀態會影響使用者的理解。

2、美觀主要取決於介面的布局和色彩搭配。實現「合理的布局」相對比較容易,「合諧的色彩」相對困難。因為色彩的組合千變萬化,並且人們對顏色的喜好也極不相同。了解一些介面色彩的設計原則是非常有益的:

·正確配置介面的前景、背景色彩。前景與背景在色彩上要有鮮明的區別,形成明暗的對比。一般以單色或特定的簡單圖形做背景,但對比不能過於強烈,否則刺激太大,使人產生疲勞。文字一般在深色或中度色調背景上用白字或黃字;在淺色的背景上用深色字。再例如動畫設計,一般選擇深色作為底色,動靜部分使用對比強烈的色彩,以區分不同的功能;

·每次顯示使用顏色不宜過多。使用過多顏色的螢幕反而不利於區分顏色及使用顏色的含義。在不必要的情況下,顯示使用的顏色寧少勿多;

·同屏顏色組合對比度適當。在同一螢幕上使用多種顏色時,選擇使用適當對比度的顏色組合。對比度大的顏色可以一起使用而不易引起混淆,而如果使用過於相近的顏色,則會影響辨別,因為當亮度發生變化時,原先相近的顏色在視覺效果上可能混淆起來。例如,在高亮度下易於分辨的黃色和橙色,當亮度變暗時,學習者看到的這兩種顏色都與褐色相像;

·輔助資訊顏色使用強調柔和、平淡。使用低飽和度、低亮度顏色來顯示不需強調的輔助資訊,如使用柔和、平淡的顏色;

·使用顏色的時候應當保持一致性,例如錯誤提示資訊用紅色表示,正常資訊用綠色表示,那麼切勿濫用紅色和綠色。

UI設計原則

原則1 使用者介面應該是基於使用者的心裡模型,而不是基於工程實現模型 就是把後台本來很複雜的事情通過設計符合使用者日常生活中常用的瀏覽方式或操作方式。其實這一點是設計師把生活中的細節和資料結合的凝聚點,使用者的心理模型抓的越準,介面就會越優秀。左邊介面 大眾點評新版的 的搜尋就比之前改得更符合使用者...

UI設計原則 Material Design

什麼是material?環境 material屬性 高度和陰影 animation 真實的動作 互動相應 有意義的轉場動畫 打動使用者的細節 style 色彩 圖示 影象 文字排版 書寫 layout 準則 單位和長度 度量與邊框 結構 自適應 components 底部視窗 bottom shee...

UI設計原則 Material Design

什麼是material?環境 material屬性 高度和陰影 animation 真實的動作 互動相應 有意義的轉場動畫 打動使用者的細節 style 色彩 圖示 影象 文字排版 書寫 layout 準則 單位和長度 度量與邊框 結構 自適應 components 底部視窗 bottom shee...