Joshua Porter談優秀的UI設計原則

2021-09-06 05:46:03 字數 2882 閱讀 8217

joshua porter是hubspot公司的ui工程師,他在「principles of user inte***ce design」一文中總結了若干優秀的ui設計原則。

介面清晰最重要

介面清晰是ui設計過程的第一步,也是最重要的工作。要想你設計的ui被人喜歡,首先必須讓使用者能夠認可它,讓使用者知道為什麼使用它。比如當使用者使用時,能夠預期發生什麼,並方便地與它互動。

介面是為促進互動而存在的

介面的存在,促進了使用者和世界之間的互動。優秀的介面不但能夠讓我們做事有效率,還能夠激發、喚起和加強我們與這個世界的聯絡。 

全力維護使用者的注意力

我們生活在被打擾的時代,比如閱讀的時候,總是會有事物分散我們的注意力。因此,在進行介面設計的時候,能夠吸引使用者的注意力是很關鍵的,所以千萬 不要將應用的周圍設計得亂七八糟,謹記螢幕整潔能夠吸引注意力的重要性。如果你非要顯示廣告,那麼請在使用者閱讀完畢之後再顯示。​​​

讓介面處於使用者的掌控之中

人類往往對能夠掌控自己和周圍的環境感到很舒服心。不考慮使用者感受的軟體往往會讓這種舒適感消失,迫使使用者不得不進行額外的互動,這會讓使用者很不舒服。保證介面處於使用者的掌控之中,讓使用者自己感受系統狀態。 

直接操作的感覺最好

當能夠直接操作物體時,使用者的感覺是最棒的,但這並不太容易實現,因為在介面設計時,我們增加的圖示往往並不是必需的,比如我們過多的使用按鈕、選 項等等其他繁瑣的東西以便我們最終操縱ui元素而不是重要的事情。理想情況下,介面設計要簡潔,讓使用者有乙個直接操作的感覺。 

每個螢幕只提供乙個操作主題

我們設計的每乙個畫面都應該有單一的主題,這樣不僅能夠讓使用者使用到它真正的價值,也使得上手容易,使用起來也更方便,在必要的時候更容易進行修 改。如果乙個螢幕支援兩個或兩個以上的主題,立馬會讓整個介面看起來混亂不堪。正如文章應該有乙個單一的主題以及強有力的論點,我們的介面設計也應該如 此,這也是介面存在的理由。 

過渡自然

介面的互動都是關聯的,所以要認真地考慮到下一步的互動是怎樣的,並且通過設計將其實現。這就好比我們的日常談話,要為進一步交談提供途徑。當使用者已經完成該做的步驟,不要讓他們不知所措,給他們自然而然繼續下去的方法,以達成目標。 

表裡如一

人總是對符合期望的行為最感舒適。當其他人、動物、事物或者軟體的行為始終符合我們的期望時,我們會感到與之關係良好。這也是與人打交道的設計應該 做到的。在實踐中,這意味著使用者只要看一眼就可以知道接下來將會有什麼的動作發生,如果它看上去像個按鈕,那麼它就應該具備按鈕的功能。設計師不應該在基 本的互動問題上耍小聰明,要在更高層次的問題上發揮創造力。 

區別對待一致性

如果螢幕元素各自的功能不同,那麼它們的外觀也理應不同。反之,如果功能相同或相近,那麼它們看起來就應該是一樣的。為了保持一致性,菜鳥設計師往往對應該加以區分的元素採用相同的視覺處理效果,其實採用不同的視覺效果才是合適的。 

強烈的視覺層次感

強烈的視覺層次感是通過螢幕上視覺元素提供的清晰瀏覽順序來實現的。也就是說,使用者每次都能按照同乙個順序瀏覽同一些元素。弱化的視覺層次沒有給用 戶提供如何瀏覽的線索,使用者會感到困惑和混亂。在變化巨大的視覺環境中,難以維護強烈的視覺層次,因為視覺權重是相對的:當一切都是粗體時,就顯示不出粗 體的效果了。​ ​

恰當的組織ui能夠降低認知難度

正如john maeda在他的書中所說,對螢幕元素的恰當組織能夠使頁面顯得簡潔。這能夠幫助大家更容易並且更快地理解你的介面。把元素組織起來,通過位置和方向來展示自然的關係。

顏色可以起到提醒的作用,但不是決定性因素

物體的顏色會隨著光線的變化而變化。在現實世界中,顏色是乙個變化的性質,不應該在介面上起決定性作用。它可以用於提醒,但是不應該是唯一的區別成分。​

漸進展示​

在每個螢幕上只顯示必要的內容。如果使用者在做選擇,那麼給他們顯示足夠的選項資訊,然後在各自的頁面上展示詳情。避免過度解釋或者一次顯示所有細節。

適當的幫助資訊

在理想情況下,幫助資訊是不必要的,因為介面能夠讓使用者理解和使用。但現實情況下,很難做到這一點,所以幫助資訊應該是上下文相關的,只有在它需要出現的時間和位置才應該出現,在其他位置就應該隱藏在幕後。要求使用者開啟幫助文件尋找答案是在推卸設計師的責任。

關鍵時刻:零狀態

第一次訪問見面是最重要的時刻,但經常被設計者忽視。為了幫助使用者適應,最好從零狀態開始設計,也就是在一切都沒發生的情況下。這種狀態不應該是空白介面......應該提供啟動的方向和指導。​

現有問題最值得重視

使用者總是為已有的問題尋找答案,而不是潛在的問題或者未來的問題。因此,堅持為已知問題建立介面,觀察現有行為。

出色的設計是無形的​

出色設計的關鍵特質是它經常無形的施加於使用者上。如果設計是成功的,那麼使用者可以只關注自己的目的,而不是介面...當他們完成目標之後,不會在依賴於介面。這對設計師來說是困難的,因為設計出色時,沒有多少掌聲。

依賴其他的設計規則

視覺設計、排版等都是介面設計的一部分。不要看不起這些規則,根據自己的情況來使用這些規則,同時從其他領域,如程式設計、印刷等領域尋找可以借鑑的經驗。

介面是被人使用的

在這麼多設計規則中,請記住只有使用者使用你設計的介面時,你才是成功的。如果一把椅子很漂亮,但是做起來不舒服,那麼設計是失敗的。​

更多有關的內容請檢視原文,也歡迎讀者朋友發表自己對設計方面的意見。

《Joe談優秀軟體開發方法》(1)

這本書我個人認為是非常棒的,第一次從圖書館借回來,看了不到一半,到期了,覺得沒什麼,就還回去了,過了一段時間,由於工作上的經歷,對書中的一些內容慢慢有了感悟,才覺得這本書不錯,於是又第二次從圖書館借了回來細細看,現將一些感悟寫下來。先來說說加班。ea的加班非常嚴重,他們的hr甚至有這樣一種思想 ea...

也談優秀 我們真的必須知道什麼嗎?

我向來喜歡跟風,首先幫dudu預先整理一下列表 乙個優秀.net程式設計師的技能樹 我心目中的優秀開發人員標準 兼談oo和設計模式 net 方向的 coder designer 應當掌握什麼技能?何必言精通 十年雜感 兼談其它 我心中的優秀開發人員 再說一下我的看法,我以前就說過,首先要搞清楚自己的...

讀《Joel談優秀軟體開發方法》之「填補鴻溝」

看 joel談優秀軟體開發方法 這本書,讓我印象最深,收穫最多的是eric sink的幾篇文章。在前面已經寫過了關於 雇用人員 這篇就寫 填補鴻溝 吧 這篇文章寫的是如何填補 產品 顧客 之間的鴻溝,其講述的主要是銷售方面。不知道是這篇文章淺顯易懂呢,還是我沒有這方面的知識,感覺寫得非常不錯。有兩種...