看啥推荐读物
专栏名称: 呆呆龙
有些话,年轻的时候羞于启齿,等到张得开嘴时,...
今天看啥  ›  专栏  ›  呆呆龙

整洁界面设计的五个技巧——UI

呆呆龙  · 简书  ·  · 2019-07-26 19:45

1、调整行间距两种方法

1)常规调整是+4(在字号的基础上+4)如文字大小是12px,行间距是16px

2)白银比例和黄金比例:文字大小X1.414,文字大小X1.616(所得值取四舍五入)

字号20X1.414=28.28行间距约等于28px;字号20X1.616=32.32行间距约等于32px

如字号24X1.414=33.936行间距约等于34px:24X1.616=38.784行间距约等于39px

字号28X1.414=39.592行间距约等于40px;28X1.616=45.248行间距约等于46px

字号32X1,414 =45.248行间距约等于46px;32X1.616=51.712行间距约等于52px

字号36X1.414=50.904行间距约等于51px;36X1.616=58.176行间距约等于58px

以下不一一举例了,上面主要是我做设计需要的字号,不全是基准。

有人问如何判断界面用多大的行间距?可以从以下方面分析:

1)看内容,APP展现界面内容丰富的,文字较多的,行间距可以适当小一些,可以运用+4原则,如淘宝,天猫。

2)APP界面内容少,展现内容少,文字较少的,需要加大留白昂阅读起来更加舒服一些的,可以运用白银和黄金比例原则,可先试用于白银原则(文字大小X1.414),如新闻阅读软件等服务型软件。

2、调整字间距(有待查找资料验证)

文章作者一英文为例,字间距在0.2~0.3之间,没有中文字间距,可信度有待验证)

3、减少线的使用(可不需要的)

减少不必要的线条,是界面看起来更加干净清爽利索。

减少线条使用的前提是:优先保证内容清晰,每个部分的内容是用户能够一眼明了,如果有些地方一定要使用线条,就一定使用,不要古板的把所有的线条都去掉,这样反而得不偿失。

减少线条之后,如果想更加明显的划分内容,使其具有层次感可以采用几种方式:

1)色块划分:通过两种色块划分内容,使更加清晰明了。背景色和内容色两种最为简单,也最为清晰,主要还是看设计的不同内容,多色会是界面凌乱不堪。

2)留白划分:适当的留白和空间感使得界面元素之间有呼吸,让用户阅读起来有舒服之感。

模块留白,利用背景色留白来区分信息内容,让界面更加清晰舒适。如下,留白区分以8为倍数,这里我使用的是16px。当然留白也需要字与边距的空隙,距离在28,32px适中。

来自简书

3)运用卡片式划分

使用卡片式能使界面信息内容的到很好的反馈,达到一种视觉效果,同时也让信息内容更加模块化。特别是在移动端使用,让界面看起来更加干净利落。如下,


来自喜马拉雅



原文地址:访问原文地址
快照地址: 访问文章快照