火星網校
掌握這些技巧，你的界面更加出彩
發(fā)布時間：2024-03-05 11:22:38 瀏覽量：114次
編輯導讀：人是視覺動物，相比于文字，人們更容易被圖片吸引。而如何在界面設計中運用好圖片，給用戶更好的視覺體驗，本文作者有自己的想法，一起來看看吧。
在UI設計中，配圖的好壞將直接影響著界面的品質及用戶的視覺體驗?？v觀如今高質量的界面設計，具有設計感的配圖不僅是吸引用戶的重要元素，能比原本平淡無奇的文字界面更讓人產生點擊欲望，還能體現出設計師的品味、以及相關方面的專業(yè)性。
在這個快節(jié)奏的時代，相比文字，圖像的傳達效率會更快、更高、更有助于用戶輕松理解及記憶。配圖用的好，往往能起到決定畫面基調、流程引導、視覺平衡等關鍵作用，所以，在同等樣式的布局下，因圖片的使用及處理方式的不同，界面的品質也會存在較大的差異。本篇文章將介紹一些在UI設計中配圖的基礎知識，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關界面設計無從下手時提供靈感，在選擇圖片、后續(xù)處理時如何做到有規(guī)律可循帶來一些思路。
一、了解UI設計中的圖片
1. 為什么要重視圖片
在文字出現之前，人們都是靠看到的圖像來理解信息內容，即便后來文字能表達出很豐富的內容，圖示也不可少，試想一下，當別人拿著密密麻麻的數據給你看時，能看的頭皮發(fā)麻，你更希望有一張清晰的圖表，但并不能說明別人的數據不清晰。所以，圖像相比文字能更具說服力、更容易傳達信息，使讀者產生共鳴、震撼內心，讓人看了一目了然，能直觀的與人產生互動。
當說到UI設計中的圖片非常重要時，并不是說文字就一定比圖片弱，好的文字也能帶給我們無限的遐想，只能說在更大的概率上圖片和文字哪個更吸引人，所以我更傾向于觀賞圖片，然后感受到帶來的美好。但是，如果非要問我選擇哪一個時，我只能說“只有小孩子才做選擇題，我（設計師）全都要”，圖片可以表達出豐富的內容，再用文字言簡意賅，是一個非常完美的組合。
2. 常用的圖片格式
圖片有多種格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI設計中，最常用的無非JPG、GIF、PNG三種。
JPG：目前為止使用最多的圖片格式，兼容各大操作系統(tǒng)瀏覽器及編輯軟件，非常方便被打開和處理，但不能顯示透明底，壓縮后會失去一部分原始信息。
PNG：如需編輯，PNG應該算是所有圖片格式中的最佳選擇，支持無損壓縮及透明底，但針對需要高保真的復雜圖片，壓縮后的文件較大，且有少數的瀏覽器不支持。
GIF：動效圖片，支持透明底及無損壓縮，通常由視頻格式的內容轉換而來，但對色彩有非常嚴格的要求，數量最多不超過256種，相比前面兩種，GIF格式的文件更大。
二、圖片的使用及處理方法
1. 圖片的使用比例
在移動端UI設計中，我歸納了最常用的幾個圖片比例，分別是1:1、3:2、4:3、16:9四種，這些比例都是源于最早的膠片攝影及現代相機的傳感器演變而來。當我們不知如何選擇比例時，首先需清楚的了解界面圖片的應用場景、來源用戶以及圖片比例背后的緣由，否則將很難把控，下面將針對這幾個比例作具體分析。
1）1:1 比例
因為相機結構的原因，早期最傳統(tǒng)的120膠片畫幅就是正方形（6*6cm），即1：1的比例，此比例更容易的將構圖規(guī)整，使其最大程度的突出照片主體。
在如今的電商APP中，商品圖片絕大多數都遵循了1：1的比例，不管橫向還是縱向都能將信息進行完整化的展示，且方便多場景、頁面的適配。另外，用戶頭像也都使用了這一比例。
2）3:2比例
起初135膠卷的比例就是3：2，主要是因相機取景框的大小而決定。在移動端，這一比例使用也比較廣泛，例如新聞、旅游類型產品，在拍照之后無需裁剪等處理，直接上傳使用，非常方便。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
9. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
