首页 黑客接单正文

app设计字体大小(app的字体大小怎样设置)

安卓/ios中,app设计时常见的尺寸有哪些

大家都知道手机采用的:一个是苹果的iOS系统,另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线,但是还没有真正运用在手机移动端上,小阿在这里期待着,希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的,简单来说就是不能别随意改动的,连图标都是必须带圆角的,对交互设计师很友好的。

而安卓系统就是开源的,界面可以随意改动,尺寸也没有特别的规范,图标、尺寸成千上万种,根据手机品牌不同,形状也不同,对于交互设计稍微有那么些许不友好。

今天我们的主题就是探讨iOS的界面尺寸规范。首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是plus版本,这种一般切图命名为@3X。

今天我们的主题就是探讨iOS的界面尺寸规范。

首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是Plus版本,这种一般切图命名为@3X。

苹果6s 的尺寸750px * 1334px,6s plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍,怎么说呢,就是6s之类的手机想要变成Plus,我们设计师稍微想要偷懒一下设计,只需要整体扩大1.5倍,比如图标。

来分析一下界面的尺寸规范:

首先是状态栏,就是信号电池栏的高度为40px。导航栏部分,就是“设置”栏高度为88px。

而下边的底部栏(导航栏)高度则为98px。

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分,我们就可以任意填充内容,Banner或者图标?

☆ 关于图标部分

苹果的图标极具有美感,完全符合栅格黄金比例,所以看起来十分协调。因为都是使用的网格进行规范化设计,所以一整套图标都保持着高统一性。

整个点击图标最小不能小于44px,一般大小为58px,圆角为12px,但是我们习惯取为整数60Px,就会非常的标准。为什么一定有最小的控制呢?因为我们手指有一个触碰面呀~低于上述的宽度,就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

注意分割线不是一条线,是一个宽度为1px的矩形,而且颜色多为灰色。

☆ 关于板块与板块之间

板块与板块之间的灰色条间隔是30-70之间,一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px,列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师,这一点是要考虑的是吧?

☆ 关于列表中的尺寸规范以及字体要求

☆ 关于左右间隔的安全区域

这个安全区域又称之为留白边距,iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整,宽度一般在16px--30px浮动,更大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

☆ 关于字体

iOS系统的字体是苹方字体,字体的颜色和粗细也大有讲究,标题等文字就是粗体,一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息,进行信息层级的划分。字体颜色很少采用纯黑色,一般用的是深灰色和浅灰色。

主标题的字体大小设置一般是32-36左右,加粗居中。列表中的文字就要小一些,字体大小为30,不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22,最小设置为20,再小就看不到啦。

另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。

APP界面设计中的字体设计原则

设计文字时应保证文字辨识度高和信息传达的准确性。相对于图片文字拥有更加清晰准确的表达能力,使得用户能更加清晰从APP中获取信息信息,界面内容也更加直观。文字设计要遵循以下原则:

用语要简洁,信息内容清楚,避免使用专业的语言,同时减少不必要的修饰词语,使得用户可以更加迅速的理解手机APP的功能,文字布局上也应做到排版布局合理,结构层次清晰。

1. 亲近感与柔和感

尖锐的物体会给人带来危险的感觉,文字也有同样的心理作用,想要文字给人带来温柔的感觉,首先应使用线条粗一些、前端 *** 的字体,更好是手写体;其次避免使用黑色或藏蓝色的文字,应选取与背景颜色亮度差异较小的暖色。

2. 未来性与先进性

应选择装饰性弱的无衬线体和黑体,或者利用图形组成具有“图形化”的文字,需要注意的是,越是抽象的字识别性越低,这种字可以用在logo上,注意小范围使用。颜色则可以考虑黑白灰这些简单的配色。

3. 纤细与美丽

女性化的文字通常给人优美、纤细的印象,需要选用线条细且有曲线的字体,流畅的手写细线体可以运用在女性产品上,更能给人带来娇媚的视觉效果。

4. 怀旧与复古

字体的设计具有流行性,所以字体的设计通常可以反映出流行的趋势。在字体设计时要选用与背景颜色差异大的色彩,比如黑色的粗字体配上明亮的背景色,视觉的冲击力在哪里运用都不会减弱。

字体设计的节奏感体现在字号对比、重量对比、色彩对比上。当字号越大时,文字就会显得越重要,字号的大小变化能让版面展现出强弱变化;最引人注意的标题,在版面中会比其他字体更粗;重要的文字可以换作其他颜色加以区分,红、黄、橙等暖色被称为前进色,它们比蓝、绿这些冷色更能起到吸引人眼球的作用。

以上就是APP界面设计中的字体设计相关分享,希望对大家的设计之路有所帮助。另外,小编想说, 不同风格的字体会给人带来不同的视觉体验,所以大家要关注这一点。

APP UI设计内容少的时候怎么把握字体大小

1. 留足空间

与普遍观点恰好相反,字体并非屏幕上弯弯曲曲的线条排列;它主要在于周围和相互间的空间。

字母本身对字体的影响,与构成它的空间相比,要小得多。

要理解这一点,了解字体从何而来很有帮助:字母o(还有b、c、p等等)中间的圆孔被称作“凹槽”。在最原始的印刷机上,铅字由金属雕刻而成,这些凹槽来自雕刻成型、排列在盘中的金属活字。之一个字体设计师所处理的模具,实际上并不能用于印刷。字母本身对字体的影响,与构成它的空间相比,要小得多。

谈到层次时,我们通常指的是h1到p,有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流,这是特殊的层次:字母间距小于字间距,字间距小于行间距,以此类推。

要在移动端创造更佳易读性,尤其要注意这些特殊层次,这些格式塔式的词语、行、段落的文字组合,在自然光环境下同样至关重要。

2. 行宽与行高

行宽是一行文字的长度。或者确切的说,是一行文字的理想长度,因为很难让每一行都精确吻合。

众所周知,舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度,取决于字体的设计、字间距(见下文)和你使用的具体文字。本文开篇的65个字符(译者注:此处请参见英文原文),用PT Serif字体是26.875em宽,用Open Sans是28.4375em宽,用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节,还会有更大的差异。

在桌面端浏览器中,65个字符很难触及边缘,但在移动设备上,65个字符(如果至少大到看得清)会超出浏览器的边界。所以,在移动设备上,你必须得缩减行宽。

移动端并没有普遍认可的行宽标准。不过传统上,报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验,它在移动端字体上也运转良好。

3. 宽松行距、紧凑行距

行距是行之间的空间,行距太紧凑,会让视线难以从行尾扫视到下一行首。行距太宽松,字间距会开始形成队列,产生了我们通常意义上的河流,阻断了行的视觉流。

从左至右:理想行距、太紧凑、太宽松。

行距的标准通常是1.4em,但以我的经验,这对于屏幕来说太紧凑了:在屏幕上表现良好的字体都有一个关键特征——大的凹槽,大凹槽需要更大一些的行距来保持空间层次。

反过来,更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点,同时记得将移动端的设置得紧凑些。

4. 找到更佳或是最舒服的状态

所有字体至少都有一种更佳状态,在屏幕上展现更佳的尺寸,还有在浏览器中最能保持字形的抗锯齿选项。

更佳状态下,多数笔画通常都能排列在像素网格中——像素字体,如果你还记得的话,那些字体仅仅在字号调整到更佳状态下才有效。

将字体设为更佳状态能形成更强烈的对比。为移动端设计时,对比尤其重要,因为户外的强光可能分散注意。

你会发现,微调行距会使每行脱离完美像素匹配。我觉得,在移动设备屏幕上,对比的重要性胜过行距。所以如果你不得不在行距上妥协,来保持每行契合像素网格,那就这么做吧。

通常设计师通过基线网格来排列文字。但在移动设备上,我们需要使用x高度来代替(x高度顾名思义,就是小写字母x的高度)。从易读性研究中,我们知道大脑识别的是文字顶部,而不是底部。所以要成就更加平顺的视觉流,我们要确保字符顶部最契合像素网格。

5. 不要忽视起伏边

起伏边是一段文字的边缘。你读的多数内容是居左对齐的(至少对于拉丁语系而言),导致右边沿参差不齐。

当视线从行尾跳至下一行首时,大脑更好要能判断出下一次跳跃的角度和距离。把每次跳跃都想象成跑过跳板,如果间距保持一致,就会快很多。因此,文字左侧边缘应该是平的,每行从同一个地方开始(对于从右至左的语言,恰好相反)。

因此你绝不应该将两三行以上的文字居中对齐。

通常文字会设置成两端对齐,这意味着每行文字所占空间相等,所以两侧都不会有起伏边。我怀疑两端对齐的流行和响应式设计有关,它教设计师们以块状形态思考。两端对齐的文字产生的留白不统一。最糟的情况会导致一行中只有几个字,相当不协调。更窄的行宽会加重两端对齐的问题,所以两端对齐的文字在移动端是难以阅读的。

从左至右:左对齐、居中对其、两端对齐。

如果整洁真的非常重要,那么使用连字符号来让起伏边更平滑,绝不能在移动端使用两端对齐。

文字右侧是起伏边在移动端还有一项额外好处:人们通常在易分心的场合阅读文字,读者视线频繁地从文字上移开——查看站名,或是接 *** 。起伏边创造了一个随机形状,让右撇子的视线可以通过重读最少的文字,回到刚才的位置。

6. 减少反差

增强文字与背景对比的同时,我们也要减少不同层次文字间的反差。

在移动端,实际可见的文字更少,所以反差被放大了。

其原因是我们的大脑基于环境来判断重要性。在桌面端,标题可能是正文字号的两倍甚至三倍,因为屏幕上有更多文字,所以这是有效的。在移动端,实际可见的文字更少,所以反差被放大了。

多数设计师使用斐波那契数列式的字号组合。在移动端,应该缩小比率来减少字号间的反差。比如,如果你使用黄金比例1.618与字号相乘。在移动端,应该用更小的比例1.382来替代。

桌面端屏幕比移动端容许更夸张的字号缩放。

7. 按比例调整字间距

为移动端调整字号时,我们要意识到字间距发生了必要的变化。

(先说一句,不应该调整固有字距。固有字距是两个字母相互组合时的距离,使它们的间距与其他字母间距在视觉上统一。创作字体时,就纳入了固有字距的考量,这个过程可能要花上数月。如果你选用了一款专业的字体,它的固有字距就是合适的,如果你觉得不对,请换一个字体。)

字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。

大字号是个例外,拿标题和小号文字(比如脚注)举例。大号文字需要减少字间距,小号文字需要增加字间距。前者是考虑到分组,后者则是为了增强对比。如果你在调整标题,或是用了通常字间距紧密的艺术字体,缩小时可能就需要把字间距放开一点。

移动端APPUI设计之字体排版设计总结:

字体是一门工艺,设计师终其一生都在精心打磨。的确如此,因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。

假如你追求易读性,要牢记三条原则:行内的视觉流要平顺,空间层级要清晰,要有足够的对比。这尤其适用于移动端页面。

没有不可撼动的规则,全凭你双眼决断。不过此回答可以作为理想的出发点,让你在移动设备上优美地排列文字。希望能帮到你,望采纳!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。