DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 簡潔易用的用戶UI界面設計的9個基本原則
簡潔易用的用戶UI界面設計的9個基本原則
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:用戶UI界面設計的奧秘:如何保持簡單易用.

設計真正偉大的用戶界面沒有什麼偉大的奧秘可言,做到保持簡單易用就可以。‘保持簡單易用’意味著不要讓用戶分心。好的UI讓用戶達成目標後,相應的培訓和維護費用便降低,同時獲得更開心、滿足和高效率的用戶。

當你面對一個全新的界面設計時,別忘了上面的最基本的原則。

下面細化介紹界面設計的9個原則:(原來有10個的但是十牌認為可以精簡為9個")

1. 了解你的用戶“關注用戶:如果在關注競爭對手還是用戶之間選擇,答案總是後者。工作總是首先從用戶開始。”——Jeff Bezos

了解用戶,因為用戶的目標就是你的目標。試著重述用戶,了解他們的技能水平和體驗,以及什麼是他們需要的。找出用戶偏好什麼樣的界面,並觀察他們在界面中如何操作。不要迷戀於追逐設計趨勢的更新,或是不斷添加新的功能。首要的任務是關注你的用戶,這樣才能創造出一個能讓用戶達成目標的界面。

2. 重視模型在系統軟件中用戶的大部分時間都消耗在界面操作中(數據錄入、數據修改、數據查閱、等等),這點與浏覽為主的網站類頁面的用戶操作完全不同。我們無需畫蛇添足,用戶希望在新創造的界面中看到那些、已有的、相似功能的、或遵循基本操作方式的軟件界面。所以利用已成慣例的UI模型,將使用戶感覺像在家中一樣熟悉。

3. 保持一致性“用戶的期望越多的被正確驗證,用戶就越覺得系統在自己掌控之中,從而也就更喜愛它(系統)。”——Jakob Nielson

用戶需要一致性。操作的一致以及頁面風格的一致。用戶需要知道一旦他們學會做某項操作,那麼下次操作也同樣可行。語言、布局和設計是需要保持一致性的幾個界面元素。一致性的界面可以讓用戶對於如何操作有更好的理解,從而提升效率。

4. 運用視覺等級“設計師要從混亂中找到統一;要通過組織來操控文字、圖片,從而清晰地傳達設計意圖。”—— Jeffery Veen

設計時,要讓用戶把注意力放在最重要的地方。每一個元素的尺寸、顏色還有位置,它們為理解界面共同指明了道路。清晰的層級關系將對降低外觀和操作的復雜性起到重要作用。

5. 提供反饋界面要始終保持和用戶進行溝通,不管當他/她們的行為對錯與否。隨時提示用戶的行為:狀態更改、出現錯誤或者異常信息等。視覺提示或是簡單文字提醒都能告訴用戶,他/她們的行為是否能夠達到預期的結果。

6. 界面保持寬容無論設計的界面多麼的清晰明了,用戶都會犯錯。所以在設計界面時應當考慮如何允許並寬容的對待用戶的錯誤。例如要為用戶提供可以撤銷行為的方式和入口;對不同的輸入數據盡量寬容(沒人願意只是因為填錯了生日的格式而重頭再來)。另外如果用戶的行為引起了一個錯誤,在恰當的時機運用信息顯示什麼行為是錯誤的,並確保他/她們明白如何防止這種錯誤的再次發生。

7. 鼓勵用戶一旦用戶在完成了關鍵操作,要及時告知用戶(彈出對話框等)。

值得注意的是把一個復雜的流程任務分解為若干簡單步驟將會更顯繁復和讓人精力分散。所以無論正在執行的任務有多麼復雜和漫長在界面上要保持流程的不間斷性。

8. 融入用戶的語言“如果對每個像素、每個圖標、每個字體都要考慮再三,那麼同樣需要斟酌每個詞語。” —— Getting Real

所有的界面或多或少都有文字在上。讓文稿盡量口語化,減少華美辭藻的堆砌。為行為提供清晰、簡明的標簽,保持簡樸的文字敘述。用戶對此將會很贊賞,因為他們不再是聽命於他人的官腔——他們聽到的是如朋友般甚至自己說話的表述方式。

9. 保持簡潔“創造復雜的界面很簡單,但如何將復雜的界面簡化卻很難”—— Per Almqvist

正所謂:大音希聲、大象無形。優秀的系統類軟件頁面中,你看不到華而不實的UI修飾,更看不到那些用不到的設計元素。換而言之,必須出現的元素一定是簡潔且有意義的。所以當想著是否要在界面上加一個新功能或是新元素的時候,再思考一下:“用戶或者界面中真的需要這些麼?”,“為什麼用戶想要在這裡當這個小巧的動態圖標?”。是否只是因為出於自我喜好和頁面的漂亮而去添加這些元素?優秀的UI工程師做出來的系統類界面不會十分華麗,頁面中沒有任何分散用戶注意力打攪用戶操作的元素。甚至應該達到在用戶使用系統的時候完全注意不到頁面和操作復雜的問題,一切都應該是順理成章的。

系統類用戶界面設計的最終目的就是:將軟件設計成原本就應該展現的那樣子。

來自:Kyle Sollenberger

整理:十牌

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved