如果想设计一个完整的UI页面,至少要先学会卡片式设计。常见的卡片式设计,其中包含标题、文本、按钮、图片等多种元素,把这些基本的元素都学会了,我们就能做出来一个卡片式设计,紧接着就能设计一个完整的页面。
1) 突出标题对比度
对于大多数复杂的UI页面,都会包含H1、H2、H3等各种级别的标题,设计师要做的就是利用不同级别的标题建立明确的层级关系,让用户明白页面内容。
增加标题间的对比,提升标题的可读性和识别度。字号的大小/粗细的对比度,有助于读者更快地理解每段文字的重要性。
2) 压缩标题行高
对于大段的文本内容,1.5~2倍字号大小的行高,会让用户阅读起来更舒服。
而标题的字号通常很大,如果再用1.5~2倍字号的行高,光是标题部分就会占用很大的页面空间,显然不适合用在“寸土寸金”的APP页面中。
3) 调整标题的字间距
刚才提到适当减小标题的行高,可以压缩标题纵向空间,让画面更平衡。除了行高之外,标题的字间距是另一个可以控制画面平衡的点,用来控制标题的横向空间。
4) 避免过度设计标题
同一个页面上使用的字体种类不要超过3种,不只是字体的种类,字体的粗细、大小、样式等都要有限制。不然过于复杂的字体样式会让阅读变得困难。
主标题和副标题之间构建清晰的层次结构,做到既不会破坏文字的节奏,还能让用户有清晰的认知。
5) 在标题上方设置分隔线
分隔线的目的是为了把当前的信息与上一条信息区分开,在标题上方设置分隔线,能更清晰地表明阅读结构和顺序。
6) 使用描述性标签
合理的标签就像是标题和内容之间的一座桥,指导用户正确前进。
标签可以用来辅助标题,帮助文章精确分类,还能节省时间,方便用户更精准地找到需要的内容。
7) 标题跟内容相匹配
在阅读标题与内容不匹配的内容时,读者就像是受到了欺骗,这对用户来说非常不友好。
相信每个人都不喜欢标题党,虽然夸张的标题能吸引用户的点击,但同时也伴随着更高的跳出率,不利于产品长期的发展。
8) 标题尽量简洁
为了保证标题的统一性,标题的字数通常会在后限定好,比如标题最多展示10个字,多余的字用“…”来代替。
如果标题太长,多余的内容无法显现出来,这样用户也无法一眼看到完整的标题,很可能会降低转化率。
最后
标题设计是「UI基础必看系列」的第一部分内容,后续设计夹会分享关于文本、排版、网格、图像等其他一系列的设计技巧