火星网校
UI 设计:像素级的完美设计，你喜欢计算像素吗?
发布时间：2023-12-01 02:48:09 浏览量：179次
导语：如果你计算常在设计工作中计算像素，那么这篇文章你可以放松观看。当然如果没有这个习惯或没听过，这篇文章我相信对你很重要。
像素级的完美设计提供最精确的创意内容，因为每个像素都被考虑和利用。
16像素UI元素的1像素网格，每个元素都设置为16px-16px，中心的正方形有圆角半径，右侧的正方形有完全圆角半径且创建一个圆。
例如，静态 iPhoneX屏幕视口的尺寸为 375 x 812 像素（像素比约为 3），这为设计师提供了 304,500 像素进行设计。
对于设计蓝图或线框，界面元素需要分成单元。单位需要以实际像素或与设备界面尺寸百分比的比例指定。最大的用户体验，例如点击、滚动和缩放，需要融入到设计元素中。
PIX Ë升测量是设计理念指南，并且可以得到写成EM / REM，基于CSS预设基础EM / REM（根EM），例如，12像素的根字体大小div {font-size: 1.5rem;} = 18px.
优先的UI元素，例如顶部状态和底部工具栏，以精确的像素规格提示设计师。
在iPhoneX示例中，375 px wx 812px h，所需的UI元素是设计界面的一部分。
iPhone X UI 顶部状态栏，由 iOS 预设
顶部的状态栏附带的44个像素的预定高度，这是一个重要的UI元素，添加了 44 像素的顶部边距，从而已经减小了设计界面的整体尺寸。
iPhone X UI 界面底部选项卡/工具栏，由 iOS 预设
如果需要底部标签/工具栏，作为预设的UI元素，它的高度为83像素。在83像素的高度，这个高度规格集成了最大的用户手指敲击交互。
因此，实际设计区域现在设置为375px宽x685px高，而实际界面尺寸在开始时为375px宽x812px高。
上面的参考图说明了从一开始就掌握基于像素的设计的重要性
完美本身是设计师们热烈讨论的话题，一方面，设计师在流动状态下进行创作，以开发一种轻松自在的界面体验。
然而，以整合像素完美会给设计带来完整性和品牌卓越。
为UI元素添加垂直 像素高度
下面参考图说明了特定像素高度如何定义屏幕层次结构，此应用程序的主要元素是照片功能，约占总界面高度的一半，支持UI元素被划分为剩余的界面空间。
一个低保真应用设计，专注于高度规格以调用主要功能——即照片
UI元素左对齐，并且当多个元素出现在一行中（由特定像素高度定义）时，它们被设置为列格式。
大/父单元像素完美简化了，子单元或二级和三级单元的设计
一旦为特定UI单元设置了像素高度，就可以轻松设计该单元的细节。
次要UI元素的像素规格，42 像素高的行由 8 列组成
上图说明了像素测量如何进一步定义使用像素高度的行进行设计以及分配列像素宽度和 UI 元素宽度的创意过程。
考虑到像素完美的设计可以为创作过程带来极大的清晰度，即使它很复杂和困难
从过程一开始就习惯像素设计产生的结果可以很容易地改变，通过简单的数学计算，增加或减少每个元素的像素。
总结
- 在界面设计开始时，注意界面的像素方形区域。
- 利用你的数学技能来计算每个像素，但是，首先要指定“行”。
- 首先利用垂直像素设置，然后深入研究列像素和UI元素像素。
- 观察准确的低保真和中保真线框
记住它们，然后在下一个项目中尝试。
这里是猫老师，下周再见。
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
学习平面设计要用到哪些软件？随着社会的发展，平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗？本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
最新文章
