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

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

ui設計如何提升界面亮度與色彩的和諧性?

Time: 2021-08-30

我們在使用一個App時,App的界面設計可以說是最影響我們使用體驗的一大要素,尤其是在色彩方面,讓人舒適的色彩搭配,總會讓我們擁有更良好的體驗。那么ui設計如何提升界面亮度與色彩的和諧性呢?一起跟faceui來了解一下吧。


  ui設計如何提升界面亮度與色彩的和諧性?

  1、規(guī)則 60 30 10

  「規(guī)則 60 30 10」,這不是對超模的標準測量,而是成功組合顏色的比例。我們首先要選擇一種主色調,然后運用到60%的空間中。再選擇一種次要色調,在30%的空間中使用,最后剩下10%的空間使用最后一種顏色。這一理論曾在室內設計中被大量使用。

  2、暗≠黑、亮≠白

  當我們使用顏色來表達明暗時,有一個很普遍的錯誤,那就是使用不透明度的黑色表達陰影,不透明度的白色來表達光亮。但如果我們借鑒一下現(xiàn)實生活,會發(fā)現(xiàn)黑暗總是有一些基調的。

  黑暗從來都不是黑色的,黑暗只是被物體明度遮蔽的色調。就如上圖中,檸檬的影子是非常深的綠色,而木板的影子是非常的深棕色,它們都不是黑色的。只有在完全沒有光線的情況下,才會出現(xiàn)黑色。

  3、飽和度測試顏色和諧度

  想要讓我們作品中的配色更加和諧,可以將色調從顏色中移除,只保留光和影,光影會給人以真實感和深度。當只剩下灰度時,我們可以清晰的觀察到明暗之間的差異,這將有助于我們調整色彩之間的明暗程度和透明度,以搭配出更和諧的配色。

  我們中的許多人看到的顏色不夠飽和或不夠鮮艷,這是正常的,因為世界并不完美,顏色也不完美。我們大部分人都來自于一個只使用CMYK和顏色有限制的物理世界。

ui設計如何提升界面亮度

ui設計如何提升界面亮度(圖片來自網(wǎng)絡)


  UI設計中如何做出美觀實用的UI界面?

  1、深色主題

  深色主題是過去幾年中最需要的功能之一,蘋果和谷歌都將深色主題作為用戶界面設計重要的組成部分。深色主題降低了界面亮度,在深色環(huán)境中給用戶提供了適度安全感,也最大限度減少了用戶的眼疲勞。在設計產(chǎn)品的深色主題時需要了解8個技巧:避免純黑色、避免在深色主題上使用飽和色、符合無障礙色彩對比標準、文本使用“打開”顏色、不同的背景對顏色的感知也不同要考慮設計的情感方面、深度溝通、允許用戶從普通模式切換到深色模式、測試你在淺色和深色外觀的設計。

  2、 動效設計&微交互

  我們知道如果加入動畫會讓網(wǎng)頁內容增大,即使未來是5G網(wǎng)絡也會讓網(wǎng)頁加載時間增加,這對于使用手機訪問的用戶來說,是非常致命的,2020年依然建議使用微動效即可。一個優(yōu)秀的交互微動效,在設計上應該遵循以下三個核心原則:1)克制有度,控制時長和出現(xiàn)頻率,不增加額外操作,不干擾用戶;2)清晰聚焦,重點突出、符合邏輯,給與用戶充足的閱讀時間;3)自然流暢,保持視覺連續(xù)性,緩動過渡,做到不卡、不閃、不跳。

  3、漸變

  漸變給設計師帶來了更大的創(chuàng)作自由,還給設計引入了深度和維度,解決了扁平設計中一切都「太平」了的問題。漸變有幾種基礎類型,他們都會有一個中心起點,顏色從這里開始,然后逐漸融入其他顏色。如線性、徑向、錐形漸變。在設計漸變時一定要注意這幾點:1)注意漸變顏色的選取;2)漸變過程中注意平滑過渡;3)注意情緒的傳達;4)不要忘記顏色對比;5)選擇順手的漸變工具。

  4、UI插畫

  在UI設計中使用插畫不僅能夠承載充足的信息量,在一定程度上滿足公眾的情感訴求,還更容易強調UI界面的故事性和趣味性,加入插畫元素的UI界面更容易給公眾帶來愉悅的情緒體驗

ui設計如何提升界面亮度

ui設計如何提升界面亮度(圖片來自網(wǎng)絡)


  5個技巧讓界面更加干凈

  1、減少線條

  頁面上面線條太多,會讓人覺得頁面復雜,線條好了,看起來就會清爽干凈。

  2、合理留白,拉開信息層級

  合理的留白可以增加產(chǎn)品的品質,也可以讓主題更加突出,有些頁面上面有很多元素,看上去非常擁擠,如果適當留白,看上去更加清爽。

  3、運用卡片整合信息

  卡片式設計將信息、圖像歸類整合到一個方塊里,清晰直觀又避免頁面因為信息多而散亂??ㄆ呐帕蟹绞绞前戳谢蛘咝械姆绞竭M行對齊展示,視線沿著橫向或者縱向瀏覽能快速找到想要的信息,此外,這種固定大小的卡片方塊也有利于柵格化排版。

  4、加強行間距,+4原則或黃金比例

  行間距大家都知道,但是具體如何設計很多人不知道,一般常用規(guī)則是+4,比如文字大小是12PX,那么行間距就是16,依次類推文字是14那么行間距就是18。

  5、加大字間距:0.1或者0.2勿過大

  字間距同樣很重要,特別是做英文排版的時候,同樣的內容,字間距和行間距不合適,界面看起來就會相差很多,有的看著很舒服,有的看起來說不出來哪里不對。

  ui設計如何提升界面亮度與色彩之間的配合對于每一位設計者來說都是難題。也只有經(jīng)過不斷的嘗試,我們才能磨合出最優(yōu)秀的作品。如果各位還想學習更多有關內容,可以長期關注faceui。


合作咨詢

上海(總部)

上海市浦東新區(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
或保存二維碼在微信中打開