很多刚入行的UI设计师在遇到一些不熟悉的词时会充满问号,往往会纠结用什么尺寸最合适。设计师在设计UI的时候不一定要严格遵守设计规范,但是要了解规范,整合,灵活处理。为了解决新手的“十万个为什么”,本文将带你了解UI设计规范。
1、移动UI设计的基本知识
移动UI设计是手持设备的图形用户界面设计。狭义上是手机和PPC,广义上可以推广到手机、移动电视、车载系统、手持游戏机、MP4。所有手持移动设备的界面UI设计,如GPS。众所周知,移动设备的屏幕尺寸非常大,碎片化严重。屏幕尺寸、分辨率和像素密度有什么关系?
屏幕尺寸(主屏幕):手机尺寸代表手机屏幕的对角线长度。英寸和厘米的转换公式为1英寸。(inch)=2.54厘米(cm),例如,苹果13标准版本是6.1英寸,也可理解为13.15厘米×6.42厘米。实际上,屏幕尺寸与设计关系不大,主要用于计算屏幕密度。
分辨率:指手机屏幕上的像素点数,例如750×1334屏幕由750行和1334列的像素组成。每一点发出不同颜色的光线,构成我们看到的画面。由于Android的分辨率跨度很大,因此Android将各种设备的像素密度划分为几个范围,为不同范围的设备定义不同的倍率,以确保显示效果相似。
像素密度(PPI):每英寸屏幕拥有的像素数与之前手机屏幕的大小相同,也是对角线的长度,即在一个对角线长度为1英寸的正方形中拥有的像素数。简单理解就是屏幕密度越大,画面越逼真细腻
每英寸点数(DPI):它是一个测量空间点密度的单位,最初用于印刷技术,表示每英寸可以印刷的墨滴数量。较小的DPI会产生不清晰的图片。
综上所述,屏幕的清晰度实际上是由分辨率和尺寸决定的,用PPI指数来衡量屏幕的清晰度更准确。每次设计的时候计算尺寸都会很麻烦,所以我们只需要简单的理解上面的概念。接下来,我们以常见的iOS和安卓为例,谈谈UI设计尺寸规格。
2、UI设计规范Android
2.1 基本单位
DP:以160DPI屏幕为基准,Android开发专用单位称为双图。1DP=1PX(计算公式:DP x DPI / 160 = PX)。
SP:特殊字体单位Android。160 如果标有DPI屏幕,则1SP=1PX(计算公式:SP x DPI/160=PX)
2.2 单位和度量
2.3 图片缩放
2.4 字体
中文字体:思源黑体Source Han Sans / Noto(同一字体,名称不同);
英文字体:Roboto;
字体粗细:Noto CJK 有和 Roboto 匹配的 7 种字体粗细(Thin、Light、DemiLight、Regular、Medium、Bold和 Black),使用与英文相同的字体粗细设置;
字体大小:从标题开始(Title)到说明文字(Caption)样式、字体大小都与相应的英文样式相比。 1px。对大于标题的样式,则使用与英文相同的字体大小;
3、UI设计规范iOS
iPhoneOS是苹果为其移动设备开发的移动操作系统,支持包括iPhone在内的设备iPad、iPod 下面我们来看看iOS的UI设计规范。
3.1 尺寸
iOS 设备的屏幕尺寸多种多样,人们可以纵向或横向使用。iPhone X和iPad 在边缘到边缘的设备中,如Pro,显示屏具有与设备整体尺寸紧密匹配的圆角。其它设备(例如iPhone SE和iPad Air)有矩形显示屏。
3.2 布局
自动布局是用来构建自适应界面的开发工具。通过使用即时设计的自动布局,您可以定义控制应用程序中内容的规则(称为约束)。例如,您可以限制按钮,使其始终处于中间水平,并将其放置在图像下方的八个点,而无需管理屏幕的大小。
3.3 字体
IOS9:中文字体为冬青黑体,英文字体为Helveticaa Neue
IOS10、IOS11:中文字体为苹方(Ping Fang SC Light),San是英文字体 Francisco
从iOS 从14开始,系统以可变字体格式提供San Francisco和New York字体。这种格式将不同的字体风格组合到一个文件中,并支持在风格之间插值以创建中间风格。因为 SF Pro 和 NY 它是兼容的,所以你可以通过多种方式将排版对比度和多样性融合到一起。iOS 在接口中,同时保持相同的外观和感觉。举例来说,使用这两种字体可以帮助你创建更强的视觉层次结构,或者突出显示内容中的语义差异。
大小规范:
标题:导航栏: 32-36PX;
标题文字: 30-32px;
内容区文字:24-28px;
辅助文本: 20-24px;
动态文本大小:动态类型为读者选择自己喜欢的文本大小提供了额外的灵活性。以下是每种不同动态文本大小的文本风格的粗细、大小和行距值。
即时设计 - 可实时协作的专业 UI 设计工具
随着移动端操作系统的不断升级和更新,设计标准也在不断变化。设计师需要实时了解,以避免设计前期的一些不必要的错误,这将大大提高我们的工作效率。看完上面的分享,如果你有自己的想法和想法,不妨打开即时设计工作台,尝试设计一个符合标准的UI设计。如果您想了解更多关于设计标准的信息,请访问即时设计的设计技巧和案例教程进行交流和学习。