最近看了很多设计师的作品，发现很多站酷上很多app设计都是几年前那种风格，竟然还能上首页推荐，真是越来越不明白站酷的推荐机制了！作为公司的一名设计师，一个小小的主管，这些年，我看过很多应聘者的作品，我基本都是十来秒的时间去筛选ui设计师的作品，一看过去就知道这个app界面做的耐不耐看了,主要包括几点：

只要碰到好看的作品，我才会停下时间去仔细研究，基本有80%的作品逃不过我的法眼，哈哈~~

来！废话不多说，今天直接从这几个维度去分析，怎么做好app界面设计~~~~

第一篇：《图标》

图标作为一个界面必不可少的元素，直接影响着界面给人的第一感觉。一个好的图标就需要保持粗细、大小、圆角度、风格、修饰元素一致

1.1、图标粗细、大小

同一模块图标的大小、粗细需保持一致，比如底部标签栏：

芒果TV底部的五个图标都是3px,土豆视频的五个图标都是，3px，粗细一样，大小视觉上统一

1.2、图标-圆角度

同一模块图标圆角度也需要一样：

比如支付宝的四个图标圆角度都为8px，图标圆角度一样会让图标，更加统一，更像一个整体

1.3、图标-风格

现在图标风格多种多月，有走简洁的、艳丽的、双色的、渐变的、断线风格的，2.5D风格......

整体的图标风格也要统一

1.4、修饰元素

修饰图标的一些小元素要保持一致，不能这个图标有修饰元素，那个图标没有，也不能用不一样的修饰元素：

比如爱奇艺的底部图标内部，都带有相同样式的修饰元素，这样的图标看起来就像是精心设计的，而不是

纯素材堆砌

切忌不经过思考，纯套用素材！！！

直接用现成的素材图标粗细很难保持一致，界面风格也会不统一，那不能直接用网上的素材，自己又不知道怎么画的时候，应该怎么办呢？

这个时候我们可以先定好一种参考风格，借鉴素材的“形”，然后改成自己要的那种风格，其他界面的图标也都按照这个标准来

直接用  最后把所有图标放在一起，对样式和大小进行微调，使各个图标达到视觉上的统一，更整体

第二篇：《分割方式》

直接  界面分割的作用是区分内容信息，而为了在区分内容的同时保持整体性、给用户一个良好的视觉体验，我们需要制定统一的分割样式，是用线、面、还是留白，以及它们使用的场景

2.1 线分割

线分割有两种样式：

1.通栏的分割线

2.不通栏分割线（左边留白、右边留白、左右留白）

需要注意的是分割线的色值不能过深，不然会导致页面的割裂感过强

2.2 面分割

面分割同样的色值不要过深，面分割时的高度有16px，20px

（在二倍图的状态下）

2.3 留白分割

留白来区分模块的时候需要注意留白的大小，以及模块的层级关系

模块间间距

模块内部间距

两个模块之间的间距（图中橙色区域）要比模块内部之间（图中紫色区域）的距离大（具体可查询格式原理）

分割保持统一，注意使用场景

在做页面的时候，定义好分割方式之后，还需要定义它们所使用的场景、以腾讯视频举例

首页大模块与大模块之间采用的是线分割，那么其他页面相同模块也需要用线

分割保持统一，注意使用场景

除了上述所说的模块与模块之间的分割方式，还需要定义模块内部元素之间分割方式，最常用出现的就是列表页，比如土豆“我的页面”用的是留白，

那么，“我的收藏”、“我的缓存”页面用的也是留白，与之对应

第三篇：《数字字体》

界面字体普遍用的都是默认字体，但其实我们在一些数字的时候，可以自定义一个字体，这点在金融类产品里尤为明显

第四篇：《投影》

参考真实世界的投影，真实世界的投影都带有物体本身的颜色。所以在制作投影的时候，可以采用图片叠加的方式，使投影更加通透，立的起来，也使得界面更有细节

明显左边的图更有细节，不只是简单的投影，

那么具体操作方法是什么？

首先将图片复制一个置于下方，然后缩小一点，高斯模糊。

第五篇：《边距与间距》

在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。

全局边距

卡片间距

内容间距

1.全局边距

全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。

全局边距的设置可以更好的引导用户竖向向下阅读。

在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，

常用的全局边距有32px、30px、24px、20px等等，

当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。

再以微信和支付宝为例，他们的边距分别是20px和24px。

通常左右边距最小为20px，这样的距离可以展示更多的内容，不建议比20还小，否则就会使界面内容过于拥挤，给用户的浏览带来视觉负担。

卡片通栏设计

还有一种是不留边距，通常被应用在卡片式布局中图片通栏显示，比如站酷APP（当然站酷APP也进行了改版，首页已经采用了不通栏的卡片式设计）。

通栏设计的作用

图片通栏显示：会更容易让用户将注意力集中到每个图文的内容本身，其视觉流在向下浏览时因为没有留白的引导被图片直接割裂，会让用户在图片上停留更长时间。

2.卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

以iOS（750*1334px）为例：

A.设置页面不需要承载太多的信息，因此采用了较大的70px作为卡片间距，有利于减轻用户的阅读负担

B.通知中心承载了大量的信息，过大的间距会让浏览变得不连贯和界面视觉松散，因此采用了较小的16px作为卡片的间距。

3.内容间距

邻近性原则

在UI设计中内容布局时，一定要重视邻近性原则的运用，比如在下面这款轻芒阅读APP的主界面中，每一个应用名称都远离其他图标，与对应的图标距离较近，保持亲密的关系，也让用户的浏览变得更直观，如果应用名称与上下图标距离相同，就分不出它是属于上面还是下面，从而让用户产生错乱的感觉。

再来看一个案例，日日煮APP，上面图片与文字较近，下面图片与文字较远，所以我们清晰的知道文字是属于上面的图片的。

第六篇：《内容布局》

在APP的设计中内容的布局形式多种多样，这里介绍最常用的两种布局形式，列表式布局和卡片式布局。

1.列表式布局

其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px，最大的高度要视内容的多少而定。

单行文字列表

双行文字列表

图文列表

卡片式布局

形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富。

在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等。

卡片式布局分类：单栏卡片布局、双栏卡片布局、多栏卡片布局

双栏卡片的布局形式，比较常见于以图片信息为主导的App。例如一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。

第七篇：《界面图片设计比例》

在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，

常见图片尺寸有:16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。

这些比例不无根据，它们都和图片尺寸有关。16:9 是根据人体工程学的研究，发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形，4:3 是勾三股四弦五，在摄影中非常常见……。

第八篇：《分组》

物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户的面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。

第九篇：《行高》

app常用行高是1.2-1.5倍

1.行间距与字号的对应

从图上，我们可以看出1.2倍显得有些拥挤，1.3倍看着比较正常，1.4倍间距比1.3倍有些偏大一点，但是视觉上看着也比较舒服，

结论：行数很少的文本，1.3倍和1.4倍的行高都是很舒服的视觉范围内。

那么这种间距一般用到哪里呢？

例如，动态、评论、或者消息等页面，这种文字间距行数一般都不是很多，这里需要注意一个点，如果文字的字号乘以相应的倍数计算出现小数点，那我们行高就要四舍五入取整数，最好为偶数。

（例：32号字，行高用的是1.3倍，32x1.3=41.6这里我们行高可以用42px）

2.密集文字行高的设定

上面我们说的文字间距为1.3、1.4倍适合用于行数很少的文本，但是如果对于那种文字比较多或者图文编辑类或者写文章类型的产品，就显得阅读性和视觉感不是很舒服

竞品了20个一些主流的图文编辑软件和文章类型的软件，发现：大部分这种文章类型的APP基本上用到了1.6倍和1.7倍的行高，1.8倍呢，就显得有些空旷一些，

总结：密集文字行高设定最佳视觉建议设置为1.6倍或者1.7倍的行高，（我个人而言，比较常用的是1.7倍的）然后也是用四舍五入进行取整。

3.多行文字与其他元素的间距差

当我们设置了行高的时候，第一行文本起始文本和最后一行结束的文本本事自带了行高，设置的文本行高对于y轴的元素，是有一定影响的。

比如说（如下图）我们文本是42px那么我们的行高就是56，我们如果想设置距离上方图片间距为30px，但是我们的文本是带着间距的。

所以我们可以用（右下图）的计算方法算下，用行高减去文字大小得出的是文本上下的间距，再除以2就可以得出上面间距，最后用总高度减去上面间距就得出了实际的高度，最后我们四舍五入得到了24px。

4.文字与数字

我们都知道中国的汉字和阿拉伯数字是有大小区别的，正常情况下数字比汉子小2Px左右，

那么我们在做设计稿时候就像关注数量或者金额等地方的数字显示，就要比规范上的字号大两号，这样看来的整体视觉才会保持统一性。

分享完毕，感谢大家的观看，希望对正在努力中的你们有小小帮助~