要成為優(yōu)秀UI設(shè)計師必看的幾大UI設(shè)計原則

世界級圖形設(shè)計大師Paul Rand(保羅。蘭德)曾經(jīng)說過:“設(shè)計絕不是簡單的排列組合與簡單地再編輯,它該當充溢著價值和意義,去說明道理,去刪繁就簡,去闡明演繹,去修飾美化,去夸獎褒揚,使其有戲劇意味,讓人們信服你所言……”,由此可見,設(shè)計絕非輕而易舉之事,優(yōu)秀的設(shè)計更是難上加難。
下面小編為大家?guī)硪蔀閮?yōu)秀UI設(shè)計師必看的幾大UI設(shè)計原則,一起來看看吧
界面清晰最重要
界面清晰是UI設(shè)計的第一步,要想讓用戶喜歡你設(shè)計的UI,首先必須讓用戶認可它、知道怎么樣使用它。讓用戶在使用時預期會發(fā)生什么,并方便地與它交互。
▲ 正確示范|界面沒有任何的操作提示,用戶就明白通過左右滑動屏幕來查看更多卡片,還知道卡片是以扇形為運動軌跡。
全力維護用戶的注意力
在閱讀的時候,總是會有事物分散我們的注意力。因此,在設(shè)計界面的時候,能夠吸引用戶的注意力很關(guān)鍵,千萬不要將界面的周圍設(shè)計得亂七八糟。
▲ 正確示范|干凈簡潔的界面可以讓用戶更加沉浸在閱讀的世界里。
讓界面處于用戶的掌控之中
人類往往對能夠掌控自己和周圍的環(huán)境感到舒服,不考慮用戶感受的設(shè)計往往會讓這種舒適感消失。保證界面處于用戶的掌控之中,讓用戶自己感受主動權(quán)。
▲ 錯誤示范|用戶不知道如何查看很多的卡片,除了查看第一張卡片的詳情,其他的卡片脫離了用戶的掌控。
直接操作的感覺最棒
當能夠直接操作物體時,用戶的感覺是最棒的。在設(shè)計界面時,我們增加的圖標往往并不是必需的,比如我們過多的使用按鈕、選項等等其他繁瑣的東西僅僅是為了填滿界面,這些都是畫蛇添足。
▲ 正確示范|圖標的作用是以圖形化的視覺形象給用戶快速引導,如果只是裝飾,就不如不要。
每個屏幕只提供一個操作主題
我們設(shè)計的每一個畫面都應該有單一的主題,這樣不僅能夠讓用戶使用到它真正的價值,也使得上手容易,使用起來也更方便。如果一個屏幕支持兩個或兩個以上的主題,立馬會讓整個界面看起來混亂不堪。
▲ 錯誤示范|這個界面是讓用戶輸入登錄,卻將注冊放在與登錄同等重要的位置,干擾用戶操作,會導致操作錯誤。比較好的做法是,將注冊放在右下或登錄按鈕下方。
界面過渡自然
界面的交互都是關(guān)聯(lián)的,所以要認真地考慮到下一步的交互是怎樣的,并且通過設(shè)計將其實現(xiàn)。當用戶已經(jīng)完成該做的步驟,不要讓他們不知所措,給他們自然而然繼續(xù)下去的方法,以達成目的。
▲ 正確示范|界面的交互非常清晰,點擊向下展開,再次點擊向上收起。
表里如一
如果它看上去像個按鈕,那么它就應該具備按鈕的功能。設(shè)計師不應該在基本的交互問題上耍小聰明,要在更高層次的問題上發(fā)揮創(chuàng)造力。
▲ 錯誤示范|界面非常漂亮,但登錄被弱化,并且表現(xiàn)形式雷同輸入的提示文字,用戶不易察覺。
區(qū)別對待一致性
如果屏幕元素各自的功能不同,那么它們的外觀也理應不同。反之,如果功能相同或相近,那么它們看起來就應該是一樣的。
▲ 正確示范|元素排版整齊且統(tǒng)一,功能清晰明了。
強烈的視覺層次感
強烈的視覺層次感是通過界面上視覺元素提供的清晰瀏覽順序來實現(xiàn)的,也就是說,用戶每次都能按照同一個順序瀏覽同一些元素。弱化的視覺層次沒有給用戶提供如何瀏覽的線索,用戶會感到困惑和混亂。當一切都是粗體時,就沒有主次之分了。
▲ 正確示范|界面以用戶的閱讀習慣將層次拉開,從左到右,從上到下,元素之間互不干擾。
恰當?shù)慕M織UI能夠降低認知難度
正如John Maeda在他的書中所說,對屏幕元素的恰當組織能夠使頁面顯得簡潔,這能夠幫助用戶更容易并且更快地理解你的界面。
▲ 正確示范|將零散的元素進行組合,并以生活中常見的物品展示,用戶更易理解。
顏色不是決定性因素
物體的顏色會隨著光線的變化而變化,顏色是一個變化的性質(zhì),不應該在界面上起決定性作用。它可以用于提醒,但是不應該是唯一的區(qū)分元素。
▲ 正確示范|通過鮮艷的色彩來提醒需要用戶關(guān)注的內(nèi)容,但是tiah不太認同顏色不能作為唯一的區(qū)分的觀點,現(xiàn)在有很多天氣、記事、時鐘類APP極簡的設(shè)計,常常采用色彩進行區(qū)分也非常贊。
漸進展示
在每個屏幕上只顯示必要的內(nèi)容,如果用戶在做選擇,那么給他們顯示足夠的信息,然后在各自的頁面上展示詳情,避免在某個界面過度展示所有細節(jié)。
▲ 正確示范|用戶只單純地想播放音樂,所以列表頁只需要當前播放狀態(tài)、演唱者、專輯名和歌曲名,無需太多的信息。
零狀態(tài)的界面
第一次訪問界面是最重要的,但經(jīng)常被設(shè)計者忽視。為了幫助用戶適應,應該提供啟動的方向和引導。
▲ 正確示范|零狀態(tài)結(jié)果本身對用戶體驗極其不好,更需要情感化或引導性的設(shè)計來降低用戶焦躁的情緒。
優(yōu)秀的設(shè)計是無形的
優(yōu)秀的設(shè)計是沒有痕跡的,如果設(shè)計是成功的,那么用戶可以只關(guān)注自己的目的,而不是界面,不依賴于界面。
▲ 正確示范|要想做到這點非常不易,B哥認為Yo做到了。
界面是被人使用的
只有用戶使用你設(shè)計的界面時,才是成功的。如果一件衣服很漂亮,但是穿起來不舒服,那么設(shè)計是失敗的。
▲ 錯誤示范|視覺效果非常好,但是用戶體驗上非常糟糕,當前狀態(tài)與主界面關(guān)聯(lián)太弱,弧形軌跡閱讀太累。
以上就是要成為優(yōu)秀UI設(shè)計師必看的幾大UI設(shè)計原則介紹,希望這篇教程能對大家有所幫助!
相關(guān)文章
全畫幅不是半畫幅的兩倍有什么區(qū)別? 聊聊相機的傳感器尺寸
說到相機畫幅,估計平時聽到最多的可能就是全畫幅與半畫幅了,以至于不少人認為中畫幅比全畫幅要小,為了避免這種常識性錯誤,這篇文章就來和大家說說相機的不同畫幅,所謂2025-04-07- 4紙和A5紙因其尺寸適中,使用尤為廣泛,但你知道它們之間有何區(qū)別嗎?今天,就讓我們一起來探討這個話題2025-02-01
各類商務(wù)印刷品的尺寸怎么選? 印刷設(shè)計常用的尺寸紙張/克重都在這里了
日常經(jīng)常印刷各種東西,哪些尺寸,紙張更合適呢?本文為大家整理了常用印刷尺寸,方便圖文廣告店、印企在日常接單生產(chǎn)中能夠快速掌握客戶關(guān)鍵性信息,詳細請看下文介紹2024-02-10- 現(xiàn)如今,證件照已成為我們生活中不可或缺的一部分,無論是求職應聘,還是入學注冊,亦或是辦理各種證件,都需要提交符合規(guī)定格式和要求的證件照,那么,這些證件照的尺寸和2024-02-10
- 平面設(shè)計是一個注重視覺效果的設(shè)計,簡單的排版方式有時候不能滿足視覺突出的效果,業(yè)務(wù)很難達到吸引用戶的眼球,下面我們就來看看8個平面設(shè)計技巧分享2023-10-08
- 每個設(shè)計師都有自己最喜歡的設(shè)計軟件,并把軟件作為自己的第二語言,今天我們來推薦10款UI設(shè)計不可或缺的工具,詳細請看下文介紹2023-10-08
夏日電影風怎么調(diào)色調(diào)色? 適合夏季的柔和綠色調(diào)調(diào)色分享
夏日電影風怎么調(diào)色調(diào)色?夏天快到了,想要調(diào)節(jié)夏季電影風的畫面,該怎么操作呢?下面我們就來看看適合夏季的柔和綠色調(diào)調(diào)色分享2023-04-02什么是真RAW 什么是偽RAW? 簡單說說真 RAW 和 偽RAW
隨著索尼α7RV(ILCE-7RM5)正式發(fā)售,近期有不少網(wǎng)友跟我咨詢索尼相機“無損壓縮(M)”和“無損壓縮(S)”RAW的問題,今天做一個統(tǒng)一答復2022-12-24手機UI設(shè)計尺寸有哪些? 超全面的UI元素尺寸設(shè)置指南
手機UI設(shè)計尺寸有哪些?作為新手在設(shè)計手機ui的頁面的時候,發(fā)現(xiàn)自己設(shè)計的尺寸都很奇怪,如果能有元素尺寸介紹就好了,下面就來看看我們匯總的超全面的UI元素尺寸設(shè)置指南2021-08-06- 常用照片尺寸有哪幾個?我們經(jīng)常說一寸照片,二寸照片,這些照片的尺寸是怎么計算的?下面我們就來看看照片標準尺寸/像素對照表匯總2021-08-06