雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關于 服務 案例
首頁 案例 服務 關于 face+

產(chǎn)品ui設計需要注意哪些細節(jié),快速提升ui設計效果的小技巧

Time: 2021-11-12

       設計的目的就是為了展示成功,產(chǎn)品就是設計的最終展示。產(chǎn)品ui設計要想成為大眾認可的產(chǎn)品,需要關注細節(jié)。今天就讓faceui為大家介紹產(chǎn)品ui設計需要注意哪些細節(jié),快速提升ui設計效果的小技巧。

  產(chǎn)品ui設計需要注意哪些細節(jié)

  1、形式對比

  什么是形式呢,就是組件在相同功能和元素下,排版、視覺的呈現(xiàn)方式。形式的對比,就是在一個頁面中,不同組件呈現(xiàn)方式上是否能行成差異性,讓頁面看起來更豐富多元化。

  2、色彩對比

  色彩對比,是很關鍵的對比,色彩決定作品的第一印象。那么如何為色彩做出對比呢?無非就是鮮艷對比淺色、深色對比亮色、暖色對比冷色,不用特意套用配色的理論,用比較直觀的感受判斷就可以。開始配色的過程,首先是確定主色和背景色。

  3、文字對比

  文字對比是最容易被忽視的細節(jié),很多設計師都認為只要看得清就行,樣式變化越少越好,這是非常錯誤的思路。

  文字樣式的多少主要取決于文字的類型和需要重點體現(xiàn)的內容數(shù)量,而不是沒有理由的精簡到最少。例如看一篇排版成熟的期刊或是論文,其中標題、副標題、正文、引用、標注等格式,都會有不同的文字樣式幫助我們區(qū)分,如果重頭到尾出現(xiàn)的所有文字都應用一樣的格式,那么就毫無可讀性。

  文字的對比,主要通過以下幾個屬性表現(xiàn):大小、字重、色彩等。即越重要的文字字號越大、字重越高、色彩越深,權重越低的則反之。

產(chǎn)品ui設計

  圖片來源于網(wǎng)絡

  4、層級對比

  最后一個,就是層級的對比。這么命名實際上比較拗口,它就是元素在 Y 軸上的高度,即元素的投影應用,比如谷歌官方的解釋。投影的使用既是視覺樣式,也是一個用來制造景深的技巧。只要在一個扁平的界面中,為任何一個元素添加了投影,那么這個界面就存在了上下的空間關系,處于上方的元素就會得到凸顯。

  既然是空間關系,就要有前后的落差對比,我們要為最重要的元素增加投影,而不是把它當成設計風格進行統(tǒng)一的設置,所有元素都帶投影,就沒有了對比,可看性也會大打折扣。

  快速提升ui設計效果的小技巧

  1、用微妙的雙重投影來讓你的卡片看起來更加清晰

  在某些元素周圍使用多個放置陰影或非常精細的邊框(僅比實際陰影暗一點)可以使這些元素看起來更清晰、更清晰,并幫助你避免那些看起來渾濁的陰影。

  2、減少標題上的字母間距以提供更好的光學平衡

  你的標題很可能會比正文更大,也比正文更重,所以字母之間的間距有時會看起來更大,減少一點間距,就可以使你的標題更加清晰。

  3、為了保持一致性,請確保圖標共享相同的視覺樣式

  在ui中實現(xiàn)圖標時,保持一致。確保它們具有相同的視覺風格;相同的重量,或者填充,或者輪廓。

  4、在你的設計中只用一種字體就好了

  在創(chuàng)建設計時只使用一種字體是比較好的,這樣做實際上可以幫助你產(chǎn)生統(tǒng)一的設計效果。使用字重、大小和顏色的組合,你還是可以用一個單獨的字體表達清晰的文字的結構。

  5、留白

  留白可以讓你的設計具有呼吸感,更加舒適。

  6、選擇底色,然后使用色調和陰影來增加一致

  通過選擇一個基色,然后使用你選擇的顏色的色調和陰影,可以以最簡單的方式為你的設計增加一致性。

  7、提高用戶的入職體驗。拇指法則記住

  允許用戶隨時跳過你的移動應用程序登錄序列,并將該跳過鏈接放在拇指容易觸及的位置。只是一個簡單的調整,可以讓你的用戶有更好的體驗。

產(chǎn)品ui設計

  圖片來源于網(wǎng)絡

  8、光影需要是來自同一個光源

  確保你的陰影總是來自同一個光源,會素描的同學很好理解,光源關系一致表達空間統(tǒng)一性的基礎。

  9、提高文本和圖像之間的對比度

  基本的處理方式是,在圖片上增加一個透明漸變蒙版來使得字體看的更加清楚。

  10、同一種字體時,使用多字重的字體

  如果只使用一個字體,盡量選擇有多字重的字體,比如:阿里巴巴普惠體、思源、OPPO。

  11、在淺色背景上你的文字可見性需要注意

  在淺色背景下工作時,文字顏色不要太淺,雖然看起來很舒服,但可見性不較差,不利于閱讀。

  12、長文本中,文字閱讀感不要太搶眼

  當涉及到長格式的內容時,某些常規(guī)的粗體字體在屏幕上看起來還是有點太重,太呆板了。建議,選擇像深灰色(即# 4f4f)來降低文本的色調,這樣閱讀起來會更加舒服。

  以上就是faceui為大家介紹的關于產(chǎn)品ui設計的相關內容。做好ui設計并不像想象中的這么簡單,很多時候都是需要對細節(jié)的修改調整,在產(chǎn)品ui設計中將這些小技巧用上可能會更好。

合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務 | 關于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開