火星網校
UI設計須掌握的7個設計技巧
發(fā)布時間：2024-01-24 13:20:25 瀏覽量：244次
大家在日常的計中，都不可避免地遇到需要做出視覺設計決策的情況，這個時候，我們可以通過一些技巧來提升你的設計
以下是可以用來改善設計的七個設計小技巧
01、用顏色和字體粗細區(qū)分層次
在UI設計的過程中，設計師有時候會太過依賴字體的大小來控制設計的主次結構。
比如這段文字很重要，因此字體要大這段文字比較次要，因此文字要小
設計畫面的主次結構中，決定文字字體大小的時候不能單單只看內容，而是要放到整個設計當中去考量與思考，因為有對比才產生畫面中的主次之分。
- 在顏色的選擇上，我們可以使用3種顏色來進行主次的區(qū)
- 標題 / 重要的內文信息，通過以加粗的樣式呈現(xiàn)
- 輔助信息 / 次要信息，通常以較細的字體呈現(xiàn)
02、不要在彩色背景上使用灰色字
在白色背景上使用淺灰色的文本色是弱化它的好方法，但是在彩色的背景上并不好，因為我在白色上看到淺灰色的字其實是降低了對比度，所以被弱化。
在日常設計中，使文本色更接近背景顏色實際上有助于創(chuàng)建層次結構。
在處理彩色背景時，有兩種方法可以減少對比度:
1、 減少白色文本的不透明度
使用白色文字，降低不透明度。這樣可以讓背景色滲透一點，在不與背景沖突的情況下降低文本的強調度。
2. 根據(jù)背景顏色手動選擇一種顏色
當你的背景是一幅圖像或圖案時，或者當降低不透明度使文本感覺太枯燥或被洗掉時，使用手動選擇效果會更好。
03、抵消陰影
不要使用很大的陰影模糊和擴展值來讓陰影更明顯，嘗試添加一個垂直（Y值）的偏移量。這樣讓它看起來更自然，因為它模擬了一個光源從上面照下來，就像在真實世界中受到光源投影的樣子。
這適用于嵌入陰影，比如下圖的輸入框的陰影:
04、使用更少的邊界
當你需要在兩個元素之間創(chuàng)建分隔時，請盡量避免設計觸及邊界。
雖然邊框是區(qū)分兩個元素的好方法，但這并不是唯一的方法，使用太多邊框會讓您的設計感覺繁忙和混亂。
下次當你發(fā)現(xiàn)自己要到設計邊界時，不妨試試下面的方法:
1. 使用方框陰影
陰影可以很好地勾勒元素的輪廓，就像描邊的邊框一樣，但陰影可以更真實貼近現(xiàn)實的物理情況，在不分散注意力的情況下實現(xiàn)相同的目標。
2. 使用兩種不同的背景顏色
給相鄰的元素稍微不同的背景顏色，并嘗試把線條去除。
3.添加額外的間距
除了簡單地增加元素之間的分離之外，還有什么更好的方法來區(qū)分不用的區(qū)域呢?在不引入任何新元素的情況下，將組塊之間的距離拉大，可以幫助我們區(qū)分開不用的內容。
05、不要過度放大沒有細節(jié)的圖標
我們經常會在一些icon網站上下載一些icon來使用，有時候因為畫面需要，我們會將他們放大到很大的尺寸，直到可以填充滿你需要的畫面。因為他們都是矢量的icon，所以我們可以無線把他們放大。
雖然矢量圖像的質量不會隨著尺寸的增大而下降，但是當你把它們放大到原來的3倍或4倍時，16-24px繪制的圖標看起來就不那么專業(yè)了。缺乏細節(jié)。
如果你只有小圖標，可以嘗試著把它們包圍在另一個形狀，給形狀一個背景色
這樣可以使實際圖標更接近其預期大小，同時仍然填充更大的空間。
06、 為邊框添加一條色彩
如何使一個簡單的設計更加彩色呢？下面這個簡單的技巧可以給到你答案，那就是在界面的某些部分添加色彩鮮艷的邊框，這樣可以使界面不這么乏味平淡，增添色彩。
例如，在警告消息的旁邊:
突出顯示活動導航項:
整個布局的頂部:
在你的設計中添加一個彩色矩形并不需要任何的思考，它可以讓你的視覺高更加出彩在色彩的選擇上，可以使用公司的品牌色或者輔助色。
07、 不是每個按鈕都需要背景色
當用戶可以在一個頁面上執(zhí)行多個操作時，很容易陷入基于按鈕含義來定義按鈕顏色的陷阱
Bootstrap這樣的框架鼓勵你這樣做，當你添加一個新按鈕時，它會給你一個語義風格的菜單供你選擇:
這是一個確定按鈕，因此按鈕要設計成綠色
這是一個刪除的按鈕，因為需要設計成紅色
按鈕的文案是決定按鈕設計的重要組成部分，但還有一個更重要的維度通常容易被遺忘:層次結構。
頁面上的每個動作都位于一個重要的結構關系之中。大多數(shù)頁面只有一個真正的主操作按鈕、兩個不太重要的次要操作按鈕和很少使用的第三個操作按鈕。
在設計這些操作按鈕時，理清楚它們在層次結構中的位置非常重要。
1、主要按鈕應該是顯而易見的。純色、高對比度的背景色在這里效果非常好。2、次要按鈕應明確，但不應突出。輪廓樣式或低對比度的背景色都是不錯的選擇。3、三級按鈕應該是可發(fā)現(xiàn)的，但不應該太突兀。將這些操作樣式化為鏈接通常是最好的方法。
“那么刪除和退出等按鈕?它們不應該總是紅色的嗎?”
答案是不一定的!如果刪除或退出按鈕不是頁面上的主要操作，那么最好對其進行次要或三級按鈕處理。
如下圖，當時刪除按鈕作為界面的主要按鈕和動作時，才需對它進行設計。
感謝你的閱讀，希望對大家有幫助
本文由「像素有毒」公眾號翻譯撰寫,轉載請注明出處，謝謝
熱門課程推薦
熱門資訊
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
2. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
6. 史上最全，平面設計UI設計必備的77個國內外素材、設計資源網站
ui設計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設計... 對于品牌設計師來說,除了圖案素材收集之外,還有一個很重要的,就是設計故...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
最新文章
