赞助商
立即赞助

基础科普!超全面的 UI 元素尺寸设置指南(下)

UI设计3年前 (2021)更新 流光
2.5K 0 0

在上篇章《基础科普!超全面的 UI 元素尺寸设置指南(上)》中介绍了设置 UI 元素尺寸的基础规范,及控件尺寸的定义。

篇就要开始介绍前面没有说的文字设置,图标的尺寸,UI 的组件设计了。

一、界面的字号设置秘诀

字的尺寸至重要,但先解了控件再思考字,会更容易一些,它们之间有一些有趣的联系。

而在对控件和文字掌握熟练以,才能进面的组件设计认识。

首先知道,安卓和 iOS 应用的中英文字体各不相同,苹果是用苹方和 San Francisco,安卓使用思源黑体和 Robot。

基础科普!超全面的 UI 元素尺寸设置指南(下)

在后面主要以 iOS 作为说的对象,安卓可以直参照它的字体尺寸置。

1. 英文的字号

在苹果的官方建议中,有罗列比较完整的文字字号建议,但大家一定要谨记,那些就是建议,并不需要在非官方的组件中应用那些字号。下图是苹果默认字体尺寸,详见翻译的 iOS 规范第 124 页。

《iOS 12 设计规范——iOS 文规范更新啦!》

首先我们先划分出一文字字的范围,之后所字体的字设置就那里面挑选。

在 UI 中,最小字号的依据一般有两个,一个是人眼的可见,另一个是屏幕的显示极限,最小的字号应该在 9pt 。而最大的字号, iOS11 的标题字号 34pt 为准即可。

基础科普!超全面的 UI 元素尺寸设置指南(下)

从 9-34,论上中每一个整数都可使,但我还是建议要应一定的习惯。面,就是我在英应设计中会使的字体字号列表,为了于记忆,我就只拆分成种类,初者在使时直接照搬就可。

  • 标题:34、28、24、22、20
  • 阅读:18、16、14、12
  • 注释:11、10、9

在英应中,我们应的字号大小随项目复杂决定,通,尺寸会在五种上,两种标题、两种阅读、一种注释类字号,当然,我们还会通过字重和色彩进一步划分,在这再赘述。例如面我使五种字号尺寸设计来的原案例:

基础科普!超全面的 UI 元素尺寸设置指南(下)

在 iOS 中,尺寸小于 20pt 使 SF Pro Text,大于等于 20pt 时则使 SF Pro Display 字体,这点大需要牢记。

基础科普!超全面的 UI 元素尺寸设置指南(下)

数字字体可等同于英,但如果有需要展示数据的需求,那么最大尺寸就要靠自己的判断了。

基础科普!超全面的 UI 元素尺寸设置指南(下)

2. 中文字体

中文字体英文字体的差异于笔画数,很多中文的笔画结构都异常复杂,如 「嚷」、「饕」、「餐」,所以,小的尺寸不可能英文相。建议小中文字使用 11pt。

至于最大的中,因为苹方并没有 SF pro 字体那么丰富的字重,字号过大会有正负形失衡的违和感,,最大字号的尺寸应英小。

基础科普!超全面的 UI 元素尺寸设置指南(下)

面是我在中应中建议使的字号:

  • 标题:28、24、22、20
  • 正:18、16、14
  • 注释:12、11

前面做过的原,应的就是这些字号。

基础科普!超全面的 UI 元素尺寸设置指南(下)

中的字号择范围是英小的,并且,中字重数远于英,我们在做中的应版远远英应容易。很多手天真的为英更容易设计,那都是源自对英的陌生,只是将字符纯粹的当成有节奏变的几何形状而是来阅读的本。

3. 文字的边距

前面讲了字号的择范围,这里我们就要再来讨论一个问题,就是如何择。

首先,合理的字号应用是要和境息息相关的,而种联系最现在文区域的边距上。能被合理阅读的文段落,是需要留白的,拥挤的文字排列只造成阅读的不适。

因为前面已经说过控件的尺寸如何置,所以当在置文字,多候是根据控件定义的高度结边距来选择文字的字号,下面通过一些控件来举例。

例如我们定义了个 40pt 高按钮,在设文时,尝试将多文号入,过多距和过小距都会让按钮看起来不精致。合适体大小应该是 16pt。

基础科普!超全面的 UI 元素尺寸设置指南(下)

而如设了个 24pt 按钮,那么到结论应该是 12pt。

基础科普!超全面的 UI 元素尺寸设置指南(下)

输入框文应用和按钮相,也以上下距作为主要参考。

基础科普!超全面的 UI 元素尺寸设置指南(下)

号选择,除了本身定位(如标题或正文)以,是可以过比较出最优结。要稍微花时,像上案例演示样将设计元素复制排列出来,可以很快选出正确数值。

后,面到的关于文字字的设,结合控件的规范,就能下一节中决组件的设尺寸,缺一不可。

多做针对性练习,升对控件和字的掌握熟练是很有必要的。建议多做一些简单界面的摹,并套前面到的元素尺寸,这样很快就适应这种效规范的方式了。

二、界面图标的尺寸要怎么定?

这一节要讲讲于图标的尺寸,应该是最容易的地方,因为前面的容中,应该已经习惯使 4 的倍数,在图标中同样遵循这样的原则。从相的图标素材载就可发现这种规律,如 iconfont、iconsearch 等等。

基础科普!超全面的 UI 元素尺寸设置指南(下)

基础科普!超全面的 UI 元素尺寸设置指南(下)

1. 图标的权重

在设具体尺寸前,我们是要谈谈权问题。正常 APP,常会含大量图标,而这些图标,大小并不会完全样。如下案例:

基础科普!超全面的 UI 元素尺寸设置指南(下)

所以这些图标大小不样,和它们代表功能和权分不开关系。我们可以简单将应用内会出现图标分成 3 类,代表不级权。

高:页面中重的功能入口

基础科普!超全面的 UI 元素尺寸设置指南(下)

中:底部导航栏用的图标

基础科普!超全面的 UI 元素尺寸设置指南(下)

低:一般的具类图标

基础科普!超全面的 UI 元素尺寸设置指南(下)

当然,这我简化过的逻辑,类似淘宝、京东、携程这类型应用,就还可以划分出细致的权重类型。不同的权重实际就对应了不同尺寸的图标,如果 3 种权重,那么我们设的过程里就会设三种尺寸的图标。

2. 图标的尺寸

首先划重点,图标的尺寸,主指的图标应用中占据的矩形区域,不图标本身图形的区域。

基础科普!超全面的 UI 元素尺寸设置指南(下)

我们设具体图形,先通过确矩形区域的尺寸,再制作参考线然后行设的。不随意设了图标再对应缩到指的置。

例如,设计快速入口,一开始我们定义的这个组件为分割成两行列的卡片,每个入口的实际大小。

基础科普!超全面的 UI 元素尺寸设置指南(下)

,面就是我对矩形尺寸定义的建议:

  • :64、56、48
  • 中等:44、36、32
  • 最小:28、24、20

根据图标处区域的上间距,从上方挑合尺寸即可,过程与字号设置是一样的,这里就多做演示了。

还需要注意,在一套 App 中,图标出现的尺寸数尽能减少,尤其对新手,只需要应用 2-4 套不同的尺寸即,否则也对视验带来明显的破坏。

三、UI 的组件设计

最,就要说说组件的尺寸是怎么设置。

首先要知道组件是什,它是一个包含了控件、文字、图标的功能集。可以是一个独立的息展示,也可以完成一个复杂的操作流,是学习 App 计中最重要的环节。

基础科普!超全面的 UI 元素尺寸设置指南(下)

1. 组件的尺寸原则

定义组件的长和宽,方式有两种,一种是根据境定,一种是根据内容节。

第一种,即通过外部的素来确定组件的尺寸。例如要计一个头部的幻灯片组件,以左右可以滚动的形式展现。那首先要根据想要幻灯片在屏幕中的占比来制定高度,例如觉得大致要有屏幕 1/3 的比例,那可以定高度为 220pt(664除3),而根据上下对齐的则,左右就由屏幕宽减去左右内边距 16pt 即可。

基础科普!超全面的 UI 元素尺寸设置指南(下)

第二种,是根据面添加的素来确定宽和高。例如在首页幻灯片下方,添加左右滚动的卡片,那先定面的控件和文字尺寸,然后再通过制定内边距的形式确定组件的尺寸。

基础科普!超全面的 UI 元素尺寸设置指南(下)

当然,也有混的定义方式,如一开始订好宽,根据内容定高,像花瓣瀑布流的卡片,或者定义好高来调节宽。体使用什形式,就要因地制宜了。

下会过几个常见组件案例,来演示如何定义它们尺寸。

2. 动态卡片

动态卡片是很常用组件,常以卡片形展现。条动态常占据内容区域列,即左右减去制定好内边距 16pt,那么是 375-32 = 343pt 宽。而高度,要根据里所含元素了,如下图所示。

基础科普!超全面的 UI 元素尺寸设置指南(下)

3. 设置列表

置列表中,由高度相同的列表项组成,它的高和宽应该是根据计的风格一开始就制定好,如比较紧凑的风格采用 48pt 的高,比较宽的风格就采用 64pt 的高。然后再排列内部的素,进行水居中。

基础科普!超全面的 UI 元素尺寸设置指南(下)

4. 班次信息

常见的班次信息,我们在定义它尺寸时,也是根据内容来考虑的。首先确认它是一个撑满屏幕的组件即 375pt 宽,填对应的字段内容。

这候可以将上下的内容拆成3个不同的模块,班次、间、更多操作,班次和更多操作采用固定高度 44pt 的方式,间则根据内容置边距的方式,最后得的高度总和,就是班次息组件的高度。

基础科普!超全面的 UI 元素尺寸设置指南(下)

5. 瓷片区

主流的瓷区,其也由子模块组合而成,而淘宝类有很瓷区并列的状态,我们优先要考虑的,是每个瓷区在屏幕中的占比,也就是先定义瓷区的高度,拆分内容的子模块。

例如划为行的瓷片,总高度为 280pt,上方的模块高度为 180pt,下方的模块高度为 100pt,面的素,再根据这个内容域进行排版。

基础科普!超全面的 UI 元素尺寸设置指南(下)

完成一个完整的组件,是根据它的内容和周围的环决定,只要觉前面个部所说的参数置进行解,就可以轻的定义出组件的实际尺寸。而无论任何组件,它都没有固定的尺寸值,需要大家不断的练习掌握制定的思路。之后再计完整的页面,或整套应用,就能大大提升效率和计质量。

总结

有目的和逻辑性的对参数进行置,是 UI 计中最重要的一环!想要真正掌握它,就一定要多做练习进行巩固。相任何人都可以在这个过程中发现 UI 计的趣。

欢迎关注作者微信公众号:「电话亭」

基础科普!超全面的 UI 元素尺寸设置指南(下)

图片素材作者:Timo Kuilder

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

不知道大家有没有遇到过这种情况?当你在面对一个空白版面的时候,脑子里面也是一片空白,这说明你缺乏构图意识。其实我们在...
平面
在日常的设计工作中,往往优秀的作品能在第一时间抓住用户的眼球、吸引注意力,而沉闷的作品恰恰会令其大打折扣,不利于整体...
平面设计
Icons8 最早是一家制作免费图标的公司,后来也开始提供各种类型素材,像是免费向量图插图下载 Icons8 Illustrations Icons...
Animated icons 2.0
写在前面 你们在日常工作中是否会有这样的思考,设计能给业务带来多大的价值?或者你从现在的工作中能够感受到多少价值?难道...
ui设计
有趣的灵魂万里挑一,人们对正面情绪的向往使“有趣”成为沟通交流中不可或缺的情感特征。随着越来越多的品牌涌入市场,用户对...
ui设计
对于设计趋势,我们一直都在定期总结和梳理。但是以往的设计趋势总结通常只会聚焦在某个很小的、特定的点上。实际上,在设计...
2019设计趋势
很高兴你能打开标题,进来阅读这篇关于桌面应用设计的文章。 阅读过我前两篇文章的朋友可以看出那两篇其实分享的是交互设计...
GUI
栅格的前世今生 产品设计从理解用户到定义问题,再到探索方案并输出草图乃至视觉稿,每一个阶段都关系到一个产品的成败。而其...
ui设计