當前位置:首頁 >教程首頁 > U I 設計 > AI+UX設計大師班 >你與優秀的UI設計師之間隻差這幾個小細節

你與優秀的UI設計師之間隻差這幾個小細節

發布時間:2021-08-25 10:05:31

你與優秀的UI設計師之間可能隻差這麼幾個小細節。作為一個初級UI設計通常我們的關注點都會放在整體風格的把控,色彩的選擇還有頁麵的規範性。而除了這些我們還需要注意的就是細節的表現。而這些細節恰恰是我們容易忽略的地方。掌控全局,把握細節,這才是一個優秀的UI設計師需要做到的。那麼,今天我們就來聊聊細節表現。

一、統一性和一致性

設計語言的一致性能夠使用戶在熟悉的環境中進行操作。讓產品給用戶留下更深刻的印象。頁麵風格、配色、裝飾元素、icon等都應該保持一致性。同時加強統一性和一致性的表現也是近一步加深用戶對於品牌的印象。

1.webp.jpg

以想去APP為例,從啟動圖標到啟動頁麵,再到首頁的一級導航的icon,延續使用時尖頭元素。在設計元素上統一性做得非常好。同時讓用戶對於這個元素印象深刻,從而到達加深品牌在用戶心目中的印象。

除了裝飾元素以外,在設計風格上也保持著統一的簡約風,以黑白色調為主,無論是啟動圖標,或者功能頁麵,整體性非常強。

二、讓每一個像素都清晰

你以為你在ps裏繪製的矢量控件就是矢量嗎?

放大後很多時候會發現有虛邊的情況,我們必須要檢查每一個控件的邊緣,不要出現半像素的情況。首先在繪製矢量圖形時盡可能保證偶數,同時避免多次縮放。同時我們還要記得勾選#對齊像素#並放大後檢查。

2.webp.jpg

左側圓角矩形在放大後垂直方向線條有很明顯的虛邊,右側圓角矩形則是清晰的。當我們設計icon或矢量元素時也要做到每一條直線都是清晰可見的。

三、頁麵信息的層級關係

初級設計師最容易忽略的問題就是頁麵的層級表現,這直接導致用戶在閱讀信息和使用產品時體驗感降低。

作為設計師,我們需要考慮所呈現的內容的優先級,通過大小、粗細啊、顏色、形式感的區分來體現。讓用戶先看到它最關注的信息,而不是讓用戶在海量信息裏尋找有用的信息。

同時我們還需要考慮用戶的交互習慣,例如按鈕的設計就需要有點擊感,識別度要高。

3.webp.jpg

當我們去對比前程無憂和智聯招聘的頁麵時可以非常清晰的感受到信息層級帶給用戶的最直觀的體驗。很明顯,智聯招聘的信息層級劃分更為清晰。用戶可以非常快的從中得到自己最關注的信息。

而不需要在頁麵中停留太多時間去找尋自己需要的信息。通過文字的粗細變化,顏色變化,重點文字顏色的變化等方式把簡單的文字內容劃分清晰。

前程無憂的頁麵設計裏,雖然也通過不同的形式劃分也內容層級,但是很明顯,層級沒有拉開,微弱的層級變化很難讓用戶分辨信息內容。所以在處理細節時我們不僅要注意拉開層級,同時也要敢於使用高對比的形式去表現頁麵層級。

除了以上幾點外,我們元素的對齊、分布、文字字體的統一等都是我們設計頁麵時需要注意的細節。做好這些是作為一個優秀的UI設計師的前提。優化細節,讓細節中閃現出更多精彩,讓我們設計的頁麵脫引而出。

作者:程瑩

來源:視覺半徑公眾號

华体会hth体育网 賞析
  • 2101期學員李思庭作品

    2101期學員李思庭作品

  • 2104期學員林雪茹作品

    2104期學員林雪茹作品

  • 2107期學員趙淩作品

    2107期學員趙淩作品

  • 2107期學員趙燃作品

    2107期學員趙燃作品

  • 2106期學員徐正浩作品

    2106期學員徐正浩作品

  • 2106期學員弓莉作品

    2106期學員弓莉作品

  • 2105期學員白羽新作品

    2105期學員白羽新作品

  • 2107期學員王佳蕊作品

    2107期學員王佳蕊作品

專業問題谘詢

你擔心的問題,火星幫你解答

微信掃碼入群領福利

掃碼領福利最新AI資訊

點擊谘詢
添加老師微信,馬上領取免費課程資源

1. 打開微信掃一掃,掃描左側二維碼

2. 添加老師微信,馬上領取免費課程資源

×

同學您好!

您已成功報名0元試學活動,老師會在第一時間與您取得聯係,請保持電話暢通!
確定