当许多新人开始做移动 UI 设计时往往不太清楚界面的一些尺寸规范。大多数时候,他们用自己的感受和经验来绘制界面。他们心中没有明确的概念,导致设计出来的页面总是不尽如人意。本文总结了界面设计(iOS 系统)中一些常用的尺寸规范和方法,如控制间距、适应性、标记、切割等。设计师在设计时不必严格遵守,但是需要应该理解并整合这些规范。
一、界面设计尺寸及栏高
目前主流的 iOS 设备主要有 iPhone SE(4 英寸)、iPhone 6s/7/8(4.7 英寸)、iPhone 6s/7/8Plus (5.5 英寸)、iPhone X (5.8 英寸),它们都采用了 Retina iPhone 屏幕,其中 iPhone iPhones/7/8Plus X 采用 3 倍分辨率,其他采用 2 倍分辨率,无论是栏高度还是应用图标,设计师为开发人员提供切片尺寸,前者总是后者的 1.5 倍,以 @3x 和 @2x 命名,程序根据不同分辨率自动加载 @3x 或 @2x 切片。如果设计师们记不住这些具体规范,也可以使用相关快捷工具。
https://js.design/community?category=search&search=%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83&source=bz&plan=qy0719
二、边距和间距
在移动页面的设计中,页面中元素的边距和间距的设计规范非常重要。页面是否美观、简洁、透明,与边距的设计规范密切相关,因此有必要了解它们。
全局边距是指页面内容与屏幕边缘之间的距离,应规范整个应用界面,实现页面整体视觉效果的统一。全局边距的设置可以更好地引导用户垂直阅读。 在实际应用中,应根据不同的产品气质采用不同的边距,使边距成为界面的设计语言。常用的全局边距为 32px、30px、24px、20px 等,当然,除了这些,还有更大或更小的边距,但上面提到的是最常用的,其中一个特点是所有的值都是偶数。
在移动页面设计中,卡布局是一种非常常见的布局方式。至于卡与卡之间的距离,需要根据界面的风格和卡承载的信息量来定义。通常,最小间距不小于 16px。间距太小会引起用户的紧张,最大间距为 20px、24px、30px、40px,当然间距不宜过大,间距过大会使界面松动,间距的颜色设置可以与分割线一致,也可以较浅。 结论:卡间距设置灵活,必须根据产品气质和实际需要设置,通常也可以测量各种截图 APP 如何设置卡片间距,多看多融合,卡片间距设置自然会更合理,更方便。
一款 APP 除各种栏 (状态栏、导航栏、标签栏、工具栏) 和控件外 icon 就是内容,内容的布局形式多种多样,这里不讨论具体内容应该如何布局,我们来谈谈内容的间距设置。 首先,格式塔原则的一个重要原则是相邻性。格式塔相邻性原则认为,单个元素之间的相对距离会影响我们对它是否以及如何组织在一起的感知。相互靠近的元素看起来属于一组,而那些距离较远的元素会自动划分为组外,距离较近的元素会密切相关。
三、内容布局
APP 内容的布局形式多种多样,这里介绍两种最常用的布局形式,列表式布局和卡片式布局。
列表式布局很常见,随便打开一个 APP,这种布局基本上都存在,其布局形式的特点是可以在较小的屏幕上显示多个信息,用户可以通过上下滑动的手势获得大量的信息反馈。列表也是一种非常容易理解的显示形式。 以我们最常用的微信和 QQ 为例,其「信息」页面是列表布局,在使用这种布局形式时,应注意列表舒适体验的最小高度为 80px,最大高度取决于内容的数量。
形式非常灵活。其特点是每张卡的内容和形式可以相互独立,不受干扰,因此不同的卡可以在同一页面上携带不同的内容。因为每张卡都是独立的,所以它的信息量可以比列表更丰富。 使用卡片布局时,注意卡片本身一般为白色,卡片间距颜色一般为浅灰色,当然,不同产品风格颜色可能不同,有些为浅灰色、蓝色等。
四、界面图设计比例
在在 UI 设计中,对图片的尺寸和比例没有严格的规范。设计师经常根据自己的经验和感受来设置一个看起来不错的尺寸,但事实上,我们有章可循。通过科学手段设置图片尺寸,可以获得最佳方案。常见图片尺寸为 16:9、4:3、3:2、1:1 和 1:0.618 (黄金比例) 等。 这些比例没有根据,它们都与图片的大小有关。16:9 根据人体工程学的研究,发现两只眼睛的视野范围是 16% 的长宽比:9 的长方形,4:3 勾三股四弦五,在摄影中很常见...
五、建立统一风格的图标
在应用界面的设计中,功能图标不是单独的个体,通常由许多不同的图标组成,它们贯穿整个产品应用程序的所有页面,并将信息传递给用户。 一套应用程序图标应具有相同的风格,包括形状规则、圆角大小、线框厚度、图形风格和个性细节。
六、APP 版式设计规范
布局设计也被称为布局编辑,即在有限的布局空间中,布局的组成要素,如文本、图片、控件等,根据特定的内容进行组合和排列。优秀的排版应考虑用户的阅读习惯和设计美,在 UI 设计中布局设计的原则是什么呢?
七、界面文字设计规范 文字是 APP 核心元素是产品传达给用户的主要内容,所以文字在于 APP 设计很重要,那么,如何选择字体,如何设置字体大小,是否加厚,如何设置颜色呢? 在一款 APP 里,字号范围一般在 20-36 之间 (@2x) ,字号要根据产品属性来设置。另外需要注意的是,所有字号设置必须为偶数,上下级内容字号的极差关系为 2-4。