火星網校
UI 設計:像素級的完美設計，你喜歡計算像素嗎?
發(fā)布時間：2023-12-01 02:48:09 瀏覽量：190次
導語：如果你計算常在設計工作中計算像素，那么這篇文章你可以放松觀看。當然如果沒有這個習慣或沒聽過，這篇文章我相信對你很重要。
像素級的完美設計提供最精確的創(chuàng)意內容，因為每個像素都被考慮和利用。
16像素UI元素的1像素網格，每個元素都設置為16px-16px，中心的正方形有圓角半徑，右側的正方形有完全圓角半徑且創(chuàng)建一個圓。
例如，靜態(tài) iPhoneX屏幕視口的尺寸為 375 x 812 像素（像素比約為 3），這為設計師提供了 304,500 像素進行設計。
對于設計藍圖或線框，界面元素需要分成單元。單位需要以實際像素或與設備界面尺寸百分比的比例指定。最大的用戶體驗，例如點擊、滾動和縮放，需要融入到設計元素中。
PIX ?升測量是設計理念指南，并且可以得到寫成EM / REM，基于CSS預設基礎EM / REM（根EM），例如，12像素的根字體大小div {font-size: 1.5rem;} = 18px.
優(yōu)先的UI元素，例如頂部狀態(tài)和底部工具欄，以精確的像素規(guī)格提示設計師。
在iPhoneX示例中，375 px wx 812px h，所需的UI元素是設計界面的一部分。
iPhone X UI 頂部狀態(tài)欄，由 iOS 預設
頂部的狀態(tài)欄附帶的44個像素的預定高度，這是一個重要的UI元素，添加了 44 像素的頂部邊距，從而已經減小了設計界面的整體尺寸。
iPhone X UI 界面底部選項卡/工具欄，由 iOS 預設
如果需要底部標簽/工具欄，作為預設的UI元素，它的高度為83像素。在83像素的高度，這個高度規(guī)格集成了最大的用戶手指敲擊交互。
因此，實際設計區(qū)域現在設置為375px寬x685px高，而實際界面尺寸在開始時為375px寬x812px高。
上面的參考圖說明了從一開始就掌握基于像素的設計的重要性
完美本身是設計師們熱烈討論的話題，一方面，設計師在流動狀態(tài)下進行創(chuàng)作，以開發(fā)一種輕松自在的界面體驗。
然而，以整合像素完美會給設計帶來完整性和品牌卓越。
為UI元素添加垂直 像素高度
下面參考圖說明了特定像素高度如何定義屏幕層次結構，此應用程序的主要元素是照片功能，約占總界面高度的一半，支持UI元素被劃分為剩余的界面空間。
一個低保真應用設計，專注于高度規(guī)格以調用主要功能——即照片
UI元素左對齊，并且當多個元素出現在一行中（由特定像素高度定義）時，它們被設置為列格式。
大/父單元像素完美簡化了，子單元或二級和三級單元的設計
一旦為特定UI單元設置了像素高度，就可以輕松設計該單元的細節(jié)。
次要UI元素的像素規(guī)格，42 像素高的行由 8 列組成
上圖說明了像素測量如何進一步定義使用像素高度的行進行設計以及分配列像素寬度和 UI 元素寬度的創(chuàng)意過程。
考慮到像素完美的設計可以為創(chuàng)作過程帶來極大的清晰度，即使它很復雜和困難
從過程一開始就習慣像素設計產生的結果可以很容易地改變，通過簡單的數學計算，增加或減少每個元素的像素。
總結
- 在界面設計開始時，注意界面的像素方形區(qū)域。
- 利用你的數學技能來計算每個像素，但是，首先要指定“行”。
- 首先利用垂直像素設置，然后深入研究列像素和UI元素像素。
- 觀察準確的低保真和中保真線框
記住它們，然后在下一個項目中嘗試。
這里是貓老師，下周再見。
熱門課程推薦
熱門資訊
-
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. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
9. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
