UI设计文字排版有什么技巧?
一、选择合适字号
相当一部分设计师在进行页面设计的过程中,为了能够有效地区分出信息的优先级,会通过不同的字号来区分。正文作为文章的主题,我们可以先把它的字号确定下来,根据需要来调节大标题,小标题以及注释的字号。
二、处理好行间距
在进行设计工作的过程中,我们需要尽可能注意行与行之间的间距如果太宽,会使视线移动过长,进而给用户造成负担。一般行高会给字体大小的1.6-2倍,因为不同字体的固有高度不同,所以这个数值需要自己调节。
三、进行适度留白
事实上如果我们把页面中的文字按照一定的规律来排列,也可以在一定程度上增加文字的易读性。在此过程中,设计师需要尽可能遵循“字间距<行间距<段落间距”的排布方式,从而有效地提升用户阅读时的整体体验。
1、可读性
可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨,作为UI元素,其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体,甚至包括 Helvetica ,都没办法清晰分辨,字母i的大写形态I,和大写字母 L的小写形态 l,这在界面设计中无疑是有影响的。
2、适度
一款理想的UI界面所用的字体,不应当过于“显眼”,而该是悄无声息,“隐型”的。当用户在试图完成某项任务的时候,字体不应当给用户以“出戏”或者“显眼”的感觉,也就是说,字体不应当超出用户的认知负荷,而内容和信息才应该成为真正的关注点。
更多平面设计知识,请咨询华南电脑学校。
3、灵活
给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计,作为一个网页博客平台,我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度,包括输入法。
4、x高度的上限
x高度的参考标准是小写字母x的高度,同等尺寸下,x高度更大的字体更易于识别。不过x高度也不是越大越好,当x高度超过一定限度的时候,小写字母n和小写字母h就很难分辨了,这一点应当注意。
5、更大宽高比
字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高,字母在小屏幕上的识别度就越高。
6、宽松的字间距
字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性,而好的显示字体会更好的控制字母间距,确保单词在视觉上的“透气性”,甚至可以营造出一种韵律感。
7、低笔触对比度
许多字体不同的笔画粗细不同,而对于UI界面而言,笔触间的对比度越小识别度越好。较大的笔触对比度下,字体在小尺寸屏幕上,较细的笔画会难于分辨。
8、OpenType 功能
OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性,对于不同的语言和特殊的字符有着更为优良的兼容性。
9、备用字体
接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前,部分内容因为字体没有加载而无法显示。
10、Hinting
Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰,降低误读的可能性。
一、字体的变形设计
字体的变形常被运用到UI字体的设计中,它是在电脑字体的基本形态上做出稍微的变形,这样使得整体画面的线条显得更加圆滑,也是字体字型变得更有活力,当然这种变形调整需要依照具体的情况进行操作。当然字体的设计最终目的是让用户能够快速的获取信息,过于的字体变形会让字体变得模糊,使设计舍本求末,失去原有的意义。
二、字体的组合设计
我们应该明白,字体不会是孤立存在的,这不仅是字体的来源可以追溯到图像,也就是说文字的本身来源是人类生活情感的象形。在某种程度上来讲,文字来源于图形,因此图形与文字是同源的,只是文字更加抽象。字体与图片的相互相互融合,就能够更加清晰的理解和传达设计信息内容,并且取得良好的效果,设计的时候需考虑与周围的其他页面元素的协调一致,强化页面的整体氛围的营造。需要把握它们之间的融合点,使其更加和谐。
三、3D字体设计
人们生活在三维的立体生活中,对空间的感觉很为情切,因此在平面中营造一种具有空间感与层次感的字体设计,可能会让用户觉得更加真实,更加有冲击力。3D设计需要借助相关的电脑工具来完成,不管是3D软件辅助设计还是PS/AI,都能够使文字根据光感实现层次空间的变化。
四、字体颜色大小设计
文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。一个站点通常只使用一到两种标准色,为了保持颜色上的一致性,标准色一致或相近。比如,站点的主题色彩如果为红色,可能就需要将链接的色彩也改为红色。
在UI界面设计中,不单单是需要美术绘画,同样需要根据设计所要表达的意义对字体、字型的设计做出艺术性设计。判定一个界面设计的美感不是单纯的项目领导的肯定就可以了,而是应该以用户对于界面设计的满意度作为评价界面设计是否完美的标准,这需要最终用户对设计的感受,所以只有在设计中不断的与用户的视觉体验相连,才能够保证设计的完美。
helvetica,世界上知名度最高的字体,被无数的企业和网站所用。
Arial,微软的御用字体,设计的目的是在电脑屏幕和不同分辨率下的可读性,属于万能字体。
Gotham:字距表现优异,粗细变化很好。(字体偏圆)
steelfish:高瘦形,像模特一样优雅。
Optima:比较优雅。
英文衬线:
Adobe garamond:衬线字体的典范,经典的设计里常出现的。
Trajan:前身是古罗马的大写字母,常被用于各大电影的海报。
Bodoni:字体粗细比较强烈,给人优雅的感觉,常用于杂志书籍中。
Times / Time magazine/Vogue:三款比较类似,报刊杂志。
手写字体:
一、在ios中默认字体分为三类:
第一类:STHeiti-Light.ttc (黑体-简与黑体-繁的细体)和 STHeiti-Medium.ttc(黑体-简与黑体-繁的中黑) 代表的是中文字体,常用的方正黑体简体
第二类:_H_Helvetica.ttc 和 _H_HelveticaNeue.ttc 代表的是英文以及数字字体,常用的字体Helvetica
第三类:LockClock.ttf 代表的是锁屏时间字体
二、在Android中,英文字体使用Roboto,中文字体使用Noto(思源黑体)。
以前的设计中,中文字体主要是使用微软雅黑,但微软雅黑在界面中就显得有点厚重、臃肿。Google联合Adobe发布了「思源黑体」作为Android的默认中文字体,新的「思源黑体」不仅仅在字形上更易于在屏幕的阅读,并且拥有7个字重,充分满足了设计的需求。
三、ui界面设计一般用的字体是:微软雅黑
其他可以参考一些ui界面设计规范,里面都有一些很严谨的格式、字体、大小、颜色等数据规范的。
想要了解更多关于手机软件字体的相关信息推荐选择Pixso协同设计。Pixso可以多人云端协作设计,实时同步字号、边框、颜色等各种细节。Pixso不仅是一站式产品设计协作工具,更是一款专业的UI/UX设计工具,更多矢量网格、布尔运算、样式创建、智能排版等高阶功能,使设计师真正专注于创造本身。