火星網校
26個實用的UI/UX設計技巧，一定不能錯過!
發(fā)布時間：2024-02-29 09:38:38 瀏覽量：227次
一個巧妙的技巧，能幫助我們更好地完成工作。本篇文章帶來了26個實實在在好用的設計技巧，分成頭像、按鈕、卡片排版、文字排版4個方面給大家講述，希望大家都能快速上手應用到實際工作中，所以，千萬別錯過哦。
Halo，這里是設計夾，今天為大家分享的是「設計技巧」。
本篇將從頭像、按鈕、卡片排版、文字排版4個方面，帶來26個實實在在好用的設計技巧，相信看完后，大家都能快速上手應用到實際工作中。
建議收藏起來，方便隨時查看～
一、用戶頭像篇
關于用戶頭像這個板塊的信息，如果采用昵稱向上對齊，ID向下對齊的方式，兩塊內容就會很分散，不夠聚焦。
如果頭像和背景的顏色有一部分接近或者顏色一樣，看起來會感覺頭像好像少了一塊，例如左圖。為頭像框添加描邊，讓頭像更有整體性，還可以讓文案對比更明顯，頁面看起來也會更精致。
當用戶使用手機注冊登錄后，新用戶沒有頭像的情況下，就要給一個默認頭像，或者使用品牌IP形象，增加用戶的品牌記憶。
二、按鈕篇
當一個頁面有兩個操作按鈕時，可以區(qū)分出來一個最重要的按鈕，引導用戶更容易去進行選擇。
當彈窗背景是白色的時候，會有點空蕩的感覺，顯得細節(jié)不夠，可以為背景豐富細節(jié)，增加耐看程度。
當使用亮色按鈕時，如果文字也比較亮，識別度就會很差。識別度對比一定要明顯，亮底暗字，暗底亮字，畫面一定不能出現(xiàn)識別模糊的情況。
登錄板塊，在用戶未輸入的狀態(tài)下，登錄/注冊按鈕呈現(xiàn)置灰狀態(tài)，給人不可點擊的感覺。輸入信息后，激活登錄按鈕高亮狀態(tài)，這樣可以更清晰地引導用戶操作下一步。
在這樣的登錄狀態(tài)中，輸入后與未輸入的文字顏色需要給予一定的區(qū)分，這樣便于用戶區(qū)分哪些是填寫和未填寫的。在輸入框可以增加對應的icon ，讓整體感覺更豐富。
三、卡片排版篇
關于投影的使用技巧，盡量選擇顏色微淺或者和卡片顏色相近的投影。左圖的投影使用比較深的顏色，會讓畫面太過沉重。
在圖文式卡片排版的場景中，圖片占比內容區(qū)域大，能起到突出重點的作用。
右圖內容少的時候使用的是黃金分割比法則 0.618:1的比例。當內容多的時候，左圖的布局也不錯，瀑布流排下去能避免過于死板。
卡片上有過多的小標簽時，可以加一個淡色的底，這樣不會給人文案很多的感覺，整體視覺不會很分散，且層級更加分明，讓用戶更快速的找到自己需要的信息。
卡片背景直接排上文案，背景會顯得很空，沒有層次和細節(jié)。所以在做背景的時候，適當加上一些細節(jié)，就會顯得耐看很多。
文案直接加在圖片上時，要去對應地處理圖片，例如給圖片加一個蒙版，這樣就不會導致文字的顏色和圖片疊加在一起看不清的情況。
在做效果圖的時候，有圖片需要添加到設計稿中，盡量選擇搭配起來比較和諧的圖片，比如：飽和度、色相、亮度等盡量保持差不多的感覺，這樣看起來會增加設計稿中的整體一致。
在有多個板塊需要做成滑動的時候，需要留出一個被遮住的板塊，代表還有內容可以滑動。在左圖中，多個板塊剛好做成一個寬度的內容，那么用戶不知道后面還有內容可以滑動。
四、文字排版篇
文字行間距的把控，對于較大的文字，行間距通常來說采用文字大小1.5倍的間距，文字較小時使用1.2倍的間距會比較合適。通常情況下，我會設置比1.5倍還大一些的間距，文字行間距太小不易于用戶閱讀，可適具體情況而定。
當主標題和副文案一樣長的時候，整體會顯得很呆板，且看著是一團字的感覺，這時就可以讓標題和副標題之間產生長短不一的顯示，就不會那么呆板。
在卡片上排列信息時，需要用到線條的時候，線太深給人感覺分割會很明顯，把線的顏色調淺，有一點感覺在會比較好。
接著上面的信息排列，另一種方案是可以把線去掉，增加上下兩者的間距，擴大留白也可以起到拉開信息之間的板塊區(qū)分，讓整個畫面更加簡潔和干凈。
信息已填寫與未填寫的一個區(qū)分，已填寫過的信息用深一些的顏色，未填寫的信息用淺一些的顏色，這樣利于用戶更快速找到需要修改和填寫的信息。
對于導航選中的欄目，選中的信息顯示和其他的欄目對比要拉開。對比弱的話，用戶一眼看不出來當前選擇的導航欄目是哪一個。針對選中的欄目，可以根據品牌形象去做延展，建立品牌認知感。
面對內容過多的場景，分別將兩組信息排在畫面里，例如左圖，會感覺整個畫面信息很多，而且很分散。
在右邊的排版中，加了一層背景包裹起來分別對應的信息時，會讓信息層級更加分明。
圖標和文字搭配的情況下，為圖標加一個底色，可以讓該頁面圖標的大小視覺保持一致，也會給予其重心的承載作用。
在需要突出信息的時候，左圖的排版方式并沒有達到需要突出的信息，看不到重要的信息。如前面所說，在做信息層級的時候對比一定要拉開，才能突出最重要的信息，讓用戶一眼get到主要信息。
文案信息板塊的排版，當文案層級對比不是很明顯的時候，如第三種，居中排列文案，會使閱讀體驗很差，視覺參差不齊的循環(huán)。當文案層級比較明顯的時候，居中對齊也是一種比較好的方式。
當文案標題需要加硬投影的時候，亮字下應該加顏色較暗的投影，例如右圖。如果亮字下面的投影顏色還是很亮，會出現(xiàn)標題文案識別不清晰，對比度不足。
五、最后
以上就是全部的UI/UX設計技巧，希望通過這些技巧能夠讓你對界面設計加入更多思考，打造更好用的產品！
專欄作家
作者：Clippp，微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。
本文原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于CC0協(xié)議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
4. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
9. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
最新文章
