艺考网
当前位置:艺考网 > 经验技巧

UI改版技巧,首先调整一下行高

作者:王秋霜 发布时间:2024-01-23 18:00:54

1、适当留白,调整行高,提升用户的易读性。

2、将大块文本分离成更小部分,方便用户掌握、消化。

3、文本信息与背景相融合时,为图像添加一个渐变叠加。

4、使用圆角卡片时,对末元素使用双倍距离,对头像使用24px填充,并将图标间距加倍。

5、使用具有圆角元素时,在较大形状上使用两倍大圆角半径,头像使用18px圆角,卡片使用36px圆角。

UI改版技巧,首先调整一下行高

一、UI改版技巧

1、首先第一个是文本行高

使用排版的时候,我们应该适当的留白,文本越小,行高越大,文本越大行高就越小,所以我们应该适当的去调整一下行高,提升用户的易读性。

2、第二个是亲密层级

我们可以将大块的文本分别成更小的部分,这样可以让我们的用户掌握和消化,也是利用了就近原则老对彼此相关的相似信息进行去分组。

3、第三个是渐变蒙版

文本信息与背景相融合的时候,为图像添加一个简单的渐变叠加,使文本更易于阅读,可读性较高。

UI改版技巧,首先调整一下行高

4、第四个是双倍距离

使用圆角卡片的时候,对末元素使用双倍距离,UI看起来会更加平衡,对头像使用24px的填充,并将图标的间距加倍可以让视觉上的感受更加舒适。

5、双边框圆角半径

使用具有圆角的元素时,在较大的形状上使用两倍大的圆角半径,头像使用了18px的圆角,卡片使用36px的圆角。

6、给头像描边

在复杂背景使用时,头像往往会融入背景,为了防止混合给头像添加白色描边更加容易区分。

UI改版技巧,首先调整一下行高

二、什么是UI设计中的网格系统

1、网格系统是由一系列水平和垂直交叉参考线构成,将页面分割成若干个有规律的列或格子。

UI改版技巧,首先调整一下行高

2、再以这些格子为基准,控制页面元素之间的对齐和比例关系,从而搭建出一个具有高度秩序性的页面框架。

本文由作者上传并发布(或网友转载),本站仅提供信息发布平台,文章仅代表作者个人观点。
角色如何设计,先画出人物的头身
首先需要确定人物头身比,比如小孩子的头身比为4头身,而成年女性的头身比为6-7头身。确定人物头身比后,设计人物动作及形态,并找出重心、掌握好人体躯干、四肢在动态下的特点。绘制骨骼结构,并根据人体肌肉分布特点,于关节之间连接加入肌肉部分。完善
怎样让UI设计更高级,使用色彩和字重来创造层次结构
尝试结合色彩和字重来营造更好的对比效果。色彩方面,主要内容采用深色,次要内容采用灰色,辅助性内容采用浅灰色。字重方面,大多数的文本采用正常的字重,对于需要强调的文字采用较重的字重。选择一种基础色,然后调整色调和颜色深浅来增加均衡。使用微妙的
如何使用中心构图来设计版面,可以放大主体或进行色彩对比
放大主体:放大主体与周围元素制造视觉冲突,主辅元素对比形成落差,增强版面节奏、层次。色彩对比:合理运用色彩对比能突出重点、划分层次,好看的配色,可增强美观度,吸引读者聚焦主体。明暗对比:利用明暗对比,可以形成反差效果,第一时间抓住视觉焦点。