怎么判断app界面留白的合理性

❶ APP界面标注及切图注意事项

一、App屏幕适配通用知识简介

1. 标注时注意事项

一般情况要定位一个Icon只需给出 上/下边距，左/右边距

标注图标距离只需标到可点击范围外

通用型颜色、字体单独标明一份

通用型模块只需单独标明一份，如导航栏

手机可视区域一般为宽度固定，长度超出边界可滑动，所以，标注物体宽度时可按比例说明

如果要标注内容上下居中，左右居中，或等比可不标注

当绘制的是一个列表时且每一条内容一样时，只需标注一条，如果每条内容有少许不同时，只需标明差异              部分

当交付的是一张完整图片时，不需做机型适配，只需给高清图(1920*1080)即可，注意进行压缩

当背景是纯色时只需给出色值（iOS使用RGB色值，Android使用16进制色值）

图标应给出可点击区域

若图标在不同页面重复出现，且尺寸相差不大，直接给出最大一份切图，并在圆形图标明尺寸，程序会根据需求缩放

可点击按钮通常要给出两种状态：普通/点击(选中)

按钮如果只是矩形、圆角矩形、圆形、椭圆形，给出尺寸和色值，可程序设置

渐变效果可通过程序实现，只需给出起始和结束色值跟范围

2. 切图命名规范

背景：bg_xxx.png

按钮：btn_xxx_normal.png/btn_xxx_select.png

图片：img_xxx.png

标签：tab_xxx.png

图标：icon_xxx.png

照片：pht_xxx.png

导航：nav_xxx.png

图示：tip_xxx.png

菜单：menu_xxx.png

侧栏：sidebar_xxx.png

二、iOS应用屏幕适配

1. iOS究竟要是适配多少种机型，以哪款机型分辨率作为设计尺寸最好

2016-3

iOS只需兼容iPhone4，完美兼容iphone5以上机型

如果按矢量图制作设计图按1X尺寸作图，后期放大成2X、3X；如果按传统的px作图应用最大尺寸(3X)作为画布。

以3X作为画布(1242*2208)难记且不能整除，我们可直接以1280(640*2)作为宽度，完美缩放为1X、2X;

2X->3X以1.5来算尺寸和字号可得到较好效果

2. 界面尺寸

设备分辨率状态栏高度导航栏高度标签栏高度

iPhone6 plus1242*2208px60px132px146px

iPhone6750*1334px40px88px98px

iPhone5/5s/5c640*1136px40px88px98px

iPhone4/4s640*960px40px88px98px

iPad3/4/Air/Air2/mini22048*1536px40px88px98px

iPad1/21024*768px20px44px49px

iPad mini1024*768px20px44px49px

导航栏背景图中,如果考虑状态栏背景,则背景图尺寸为导航栏px+状态栏px,如果只改变导航栏颜色则只需要导航栏px

3. 图标尺寸

设备App Store程序应用主屏幕spotlight搜索标签栏工具栏和导航栏

iPhone6 plus1024*1024px180*180px144*144px87*87px75*75px66*66px

iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px

iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px

iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px

iPad mini1024*1024px90*90px72*72px50*50px25*25px22*22px

按钮切图建议以等宽高尺寸切图,且像素必须>=88、*88px , 当本身图片宽度或高度不足时,补充空白像素(透明像素).一般情况下,只需要普通状态下按钮切图即可

(适配不建议等比放大)

4. 参考文献

友盟设备指数

APP切图流程和APP切图命名规范详细完整版

APP切图详细规范终极指南

iOS和Android的app界面设计规范

APP界面切图命名和文件整理规范

三、Android应用屏幕适配

1.用px作为基础单位的缺陷

对比上图可以知道，ppi越低图片显示的越大，ppi越高图片显示的越小，造成不同手机上显示图片布局不统一！

使用dp作为单位所有机子显示统一

2. 衡量一个屏幕清晰度单位————屏幕密度(dpi==ppi)

计算公式：屏幕dpi = √ (屏幕长^2 + 屏幕宽^2) / 屏幕尺寸

名称密度代表分辨率Android单位与像素换算

mdpi120dpi~160dpi320*4801dp=1px

hdpi160dpi~240dpi480*8001dp=1.5px

xhdpi240dpi~320dpi720*12801dp=2px

xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px

xxxhdpi480dpi~640dpi2k~4k1dp=4px

屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画

320*480px48*48px32*32px16*16px24*24px不小于2px

480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小于3 px

720*1280px96*96px64*64px32*32px48*48px不小于4 px

1080*1920px144*144px96*96px48*48px72*72px不小于6 px

3.究竟要适配多少种机型

2016-3

得出结论： 只需适配高端的xxhdpi(720*1280/1080*1920)，低端的hdpi(480*800)

4. 度量单位与边框

可触摸控件都是以 48dp 为单位的

为什么是 48dp？一般情况下，48dp 在设备上的物理大小是 9mm (会有一些变化)。这刚好在触摸控件推荐的大小范围 (7-10mm) 内，而且这样的大小，用户用手指触摸起来也比较准确、容易。( xxhdpi标准下为144px )

边框 注意留白 界面元素之间的留白应当是 8dp 。

例：

5. 字体排版

Roboto 是Android系统的默认字体集，字体大小单位 sp（可缩放像素数，scaleable pixels）

根据Android设计规范，推荐使用 12 、 14 、 16 、 20 和 34 号 ，字体粗细可调

spHDPIXHDPIXXHDPI

12sp18px24px36px:

14sp21px28px42px

16sp24px32px48px

18sp27px36px54px

20sp30px40px60px

34sp51px68px102px

（注意：字号要为双数，且不可带小数位）

6. 9-patch 图制作

什么是9-patch图

为什么要用9-patch格式制作图

适应各种手机屏幕拉伸图片需求，有效缩减图片体积

什么情况下使用

当发现图片是背景时且可能拉伸被拉伸时，或图片过大时

如何制作patch9 图

图片外层增加一全透明像素，在透明像素区花4条纯黑色边

1. 宽度可拉伸区域

2. 高度可拉伸区域

3. 垂直内容区域

4. 水平内容区域

8. 参考文献

友盟设备指数

Android 设计指南简体中文版4.x

Material Design 中文版

Android设计中的.9.png

❷ 如何做好APP界面设计

APP界面设计经验总结
当我们打开一个APP时，从视觉层面分析，影响用户对APP整体感官体验的元素主要有：图片、文字、色彩、图标、留白等。

图片的合理运用、清晰的信息层级、舒适的色彩搭配都将会提高整个APP的美感，从而为整个的产品体验加分。

一个成功的产品，视觉层面只是其中的一部分，但是作为一个合格的UI设计师，我们要做的就是把这其中的一部分做到极致。

下面我们通过图片、文字、色彩、图标、留白这几个维度来解剖APP设计，发现那些微妙的细节。只需要比别人多提高1px的细节，你的APP设计就会更精致。

目录

1、图片，如同一个人的衣着品味；
2、文字，我只想知道重点在那里；
3、色彩，如何成为“色”计师；
4、图标，从会画到画好之间有多远；
5、留白，我只想要足够的空间。

正文

1、图片，如同一个人的衣着品味

图片在APP中是非常常见的，图片的展现形式和图片的质量都影响着用户对产品的感官体验。

图片的定位就如同一个人的衣着品味，不同的穿衣风格会使别人对你作出不同的判断，为你打上不同社会属性的标签。

下面我们一起来看看图片在APP设计中需要注意的关键点，将会从图片比例、一致性、图片质量与真实性等方面进行分析。

1.1、图片比例有什么讲究？

不同比例的图片所传达的信息主体不尽相同，根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。

通过体验一些主流的APP，我们会发现一些比较常用的图片比例，如 1:1、4:3、16:9、16:10等等；

也会发现一些打破常规比例的设计，我们需要分析它们的性格，结合自身产品的特点，才能在自己的APP设计中合理的加以运用。

1:1 强调主体的存在感

1:1的图片比例是比较常见的一种设计比例，利用此长宽比更容易将构图归整得简单，突出主体的存在感。

常用于产品展示、头像、特写展示等场景，在电商类APP中尤为常见。

4:3 图像紧凑、更易构图

4:3的图片比例可以使图像更紧凑，更易构图，方便设计师发挥。由于手机屏幕容量较小，作为全屏展示时，该比例在App设计布局上面占用空间较大。

16:9 电影场景般的效果
16:9的图片比例可以呈现电影场景般的效果，多用于横向构图，是应用非常广泛的尺寸比例之一，能给用户一种视野开阔的体验。

在很多影视娱乐类APP设计中运用广泛，如腾讯视频、网易云音乐等。

16:10 拥抱黄金比例
黄金比例就像金字塔上的明珠，越接近她越有魅力，反之会魅力减弱，16:10的图片比例最为接近。

设计没有绝对的标准，我们可以遵循一些优秀的经验规则，但是也要敢于突破规则，尝试更多的可能性。

X:≤Y 瀑布流设计
X:≤Y代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用于用户没有很明确的目的，只是喜欢获取尽量多的信息的情况下采用这种设计方式。

X:≤Y的图片比例要注意高度的控制，不要超出屏幕可显示区域的范围，如花瓣网在750x1334px的设计中高度最大值为：848 px。

以上列举的仅为部分常用比例的分析与说明，还有更多的比例这里就不一一演示，分享的目的是让大家养成分析的习惯，结合自身产品特点选择适合的图片比例。

图片比例选择方式：
a. 以商品展示效果为准，选择能够充分表现商品特点的图片展示比例；
b. 以产品气质为准，选择符合产品内容气质的图片展示比例；
c. 结合产品特点选择合适的常用比例；
d. 根据版面布局灵活的自定义特殊的比例值；
e. 分析→打破→创新，创造出符合某种规律或者美学概念的比例值。

1.2、图片比例的一致性
当我们结合产品特点确定合适的图片展示比例以后，需要针对整体的布局与图片分布情况，规范出那些布局可以采用相同的图片展示比例。

在保障视觉效果与交互形式的情况下，相同的主体，在不同的页面中最好采用相同的比例呈现，这样的好处不仅可以保持视觉表达的一致性，也能给后期运营维护带来便利。

1.3、提高图片的质量
越来越多的产品对图片质量开始加以重视，比如网易严选对产品图片的拍摄与处理都有严格的规范，目的就是为了提升产品气质和在用户心中的印象。

我们在设计的时候更要以最佳的图片来烘托我们的设计稿，图片的质量影响着整个界面的格调。

很多伙伴儿会觉得图片都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

a. 最佳的设计输出是设计师专业的体现；
b. 把最好的效果呈现给决策者，增加他对你设计能力的印象；
c. 通过制定运营视觉规范来把控图片质量，是可以严格把控你对图片的视觉追求；
d. 你的态度会给你带来好运。

1.4、图片的真实还原

虽然前面提到图片质量的重要性，但是我们不能为了视觉效果选择一些与主题无关的配图，这样也会给决策者一种误导。

我们可以提高配图的质量，但是需要保证图片的真实还原，这样才能让你的设计作品更加真实合理。

在一些本土的产品设计中，对于国外图片素材的运用，需要谨慎对待。如案例中的模特形象，文案信息的传达更加偏向于国内的场景，

如果运用一张国外的模特素材也许逼格更高，可是却无法真实的还原产品场景，会给决策者传达一种错误的认知。

2、文字，我只想知道重点在那里

文字设计的层次感决定了信息的高效传达，通过对文字信息的层次处理可以有效的帮助用户获取信息，提高用户对产品的操作效率。

2.1、对文字信息进行层级区分
当我们拿到交互原型或者别的需求文档时，我们需要对文字的信息层级进行有效的区分，这样才能让用户快速的获取和理解信息传达的内容。

文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时，需要明确的梳理好信息之间的层级关系，提高用户对产品的整体体验。

通过对字体大小、颜色、留白、层级划分等处理，把相同属性的信息归类设计，让整个信息排列主次分明，层级清晰。

设计师在对文字进行视觉表现时，为了达到整体界面的视觉平衡也需要减少对文字样式的运用，不可为了突出文字信息而采用过多的表现样式。

2.2、预估好信息呈现的最大值
当我们在进行界面设计时，初级设计师往往会忽略文字信息的最大值，只是按照自己的习惯进行完美的布局。

最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息，此时就会出现返工的情况，给整体的产品开发进度带来风险。

作为一名合格的UI设计师，我们需要预估好信息呈现的最大值，而不是取最小值或者随意进行设计，这样将会在执行的过程中遇到更多不可控的风险。

2.3、善于利用提示符进行设计

在一些会出现大篇幅文字信息的界面设计中，为了提高用户对信息的获取效率，我们会根据整体视觉效果选择合适的提示符进行设计。

很多初级设计师会过于遵循交互原型，往往对大篇幅文字的处理过于随意，只做着交互原型的美化，缺乏对用户体验的主动性。

在进行产品交互设计时，有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局，我们需要利用自己的专业来优化你觉得可以更好的地方，也能为你在整个产品环节中树立专业性。

关于提示符的设计表现形式主要有数字、字母、图形、色块等等，只要能有效的区分信息层级即可。

3、色彩，如何成为“色”计师

色彩给人的感受是最直观的，不同性格的配色传达不同的情感。关于配色有一些方法可寻，但是也存在一定的感性判断。

作为视觉设计师，我们需要学习理性的方法技巧，也要不断欣赏优秀的作品，提高自身的审美能力。

3.1、色彩基础知识
色彩分为无彩色系和有彩色系，无彩色系是指白色、黑色、各种深浅不同的灰色；有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。

关于色彩的更多理论知识这里不做展开，大家自行脑补色相、纯度、明度、对比、性格等等方面的理论知识。

3.2、建立色彩库
作为初级设计师我们对配色的把控不是很稳定，为了提高工作效率，我们需要通过一些理性的方式建立大量的色彩库，应对不同的需求。

下面列举部分个人比较常用的方式供大家参考，色彩收集的方法有很多，我们只需要掌握几个比较适合自己的即可，只要养成习惯并长期坚持，哪怕只运用一种方式，也是收获颇丰的。

a. 通过各类APP采集色彩

体验不同领域的APP，建立不同领域对APP色彩组合的选择，为后期项目设计奠定基础。根据主色进行分类，

如红色系列：网易云音乐、京东、网易严选、网易考拉等等；也可以根据产品气质分类，如文艺、时尚、科技、可爱等等。

b. 通过Dribbble采集色彩
在Dribbble上面，每一幅作品右侧都有该作品的配色文件，发现优秀的作品要养成这种采集配色文件的习惯。

c. 通过摄影作品采集色彩
通过优秀的摄影作品采集色彩也是常用的方法之一。

采集方式：
Photoshop打开图片 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器

d. 通过马赛克采集色彩
借助Photoshop滤镜将图片进行马赛克处理，可以得到优秀作品或者摄影图片的配色组合，特别适合采集同色系的配色。

采集方式：
Photoshop打开图片 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小

e. 从电影中采集色彩
相信大家都喜欢看大片，这部片子之所以能得到大家的追捧，必定有太多值得大家学习的元素。

作为神经敏感的设计师群体，那些刺激到我们神经元的优秀影片场景总是不能错过的。

3.3、提高审美，增强感性判断力

配色能力虽然可以通过一些理性的方法提高，但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。

我们需要不断的欣赏摄影、绘画、设计作品等等，综合的提高自身的审美，才能不断增强感性的判断力。

作为UI设计师，你不能只关注界面设计，你可以看平面作品、摄影绘画、影视动效，体验手工艺制作、运动娱乐、细心的体验生活中的每一次变化。

3.4、养成分析的习惯
要想拥有良好的配色能力，积累的过程是很重要的。当我们看到优秀的作品，要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。

只有不断的分析和总结才能逐步形式自己的思维方式，提高不同配色的把控能力。

分析的习惯不只是运用在色彩上面，对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结，掌握优秀作品的规则才能形成自我的标准习惯。

4、图标，从会画到画好之间有多远

图标是APP设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效的识别。图标也有一定的界面装饰作用，提高界面整体的美观度。

很多初级设计师都会忽略图标的重要性，也养成去素材网站下载复用的习惯，当这样的习惯养成后便会逐步丧失自己动手的驱动力，什么元素都希望能找到素材下载，工作数年之后很快就遇到了自己的瓶颈期。

设计师对图标设计的态度与把控能力，将会是拉开你与其他设计师差距的因素之一。

图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段，你现在属于哪个阶段呢？

4.1、下载复用

下载复用是很多初入行业的设计师习惯的工作方式之一，由于自身对软件技法、设计技巧、创意能力等方面的不足，无法从创意到标准制图完成一个合格的图标设计。

缺点：图标设计风格与细节处理都完全不统一，这样的习惯一旦养成就会逐步丧失自己的动手能力。

4.2、动手设计
对于大部分有设计追求的设计师，都会意识到图标设计的重要性，也会结合产品特点绘制统一风格的图标。

注意事项：图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

无论我们选择何种表现形式，在进行设计的时候都要保持风格的统一性，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡不尽相同，例如相同尺寸的正方形会比圆形显大。

因此，我们需要根据图标的体量对其大小做出相应的调整。

4.3、规范设计
当设计师养成自己动手的习惯以后，恭喜你已经进步了，保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性，运用标准的规范进行图标设计。

在标准设计的基础上面我们可以发挥自己的创意，也不一定要局限在标准里面，但是总体的本质需要符合设计规范。

4.4、融入品牌基因
图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的造型设计也几乎雷同，很多对设计比较讲究的产品，也开始根据自身品牌基因，进行图标定制化。

融入品牌基因的图标设计具有很强的品牌识别性，不仅可以形成独有的视觉差异化，也可以增强用户对产品的记忆。

5、留白，我只想要足够的空间

适当的留白可以让你的界面更有灵性，给信息之间预留更多的空间，也能更好的表达信息之间的层次感，相比拥挤的信息布局更能给人舒适的体验。

当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时，作为设计师我们可以从不同的方向试着表达自己的观点：

a. 设计出对比稿，把产品需要的方案和你觉得完美的方案进行对比；
b. 筛选出这样处理的优秀案例，以成功的案例说服产品接受你的方案；
c. 进行用户测试，选择一些目标用户进行体验，从用户心声入手设计最佳的方案；
d. 更多沟通的方法有待你去挖掘，最终的目的都是希望做出更好的产品。

设计小结

1. 不同的图片比例反应不同的特征，根据产品特点合理的选择；
2. 设计中保持相同的图片比例，不仅使视觉表达一致，也能给后期运营维护带来便利；
3. 通过提高图片的质量来提高设计作品的美感度，但是也要保证图片的真实还原；
4. 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等；
5. 养成不断建立和丰富色彩库的习惯；
6. 提高审美，增强感性判断力，养成分析的习惯；
7. 图标设计经历的几个环节：下载复用 → 动手设计 → 规范设计 → 融入品牌基因；
8. 适当的留白可以给人更加舒适的体验。

❸ APP界面色彩运用原则与规范!(一)

色彩布局合理

合理的色彩布局是做好UI色彩设计的重要原则，那么该怎样做好布局呢?设计师可以通过区分内容的主次关系从而建立视觉层级关系。因为色彩在饱和度、对比度、明度等方面存在明显差异对比，所以就会形成一个明显的层级，这样人们会不自觉先关注色彩鲜艳或者色彩偏重的事物。当然，色彩布局的合理性也会让整个设计更有主次之分。

节奏有序变化

作为设计师，你需要有自己的设计节奏，而且这个节奏是有序变化的。秩序是色彩美构成的最基本的也是较重要的形式，那么什么叫秩序呢?客观事物总是按照其自身的规律在有序状态下，有条不紊的发展演变，这就是秩序。一般情况下，在色彩构成中我们可以采用色相、明度、纯度级别差递增、递减的形式，这样可使各色按照一定的秩序有规律的变化，从而具有秩序美感，这种秩序美感就会形成自己的设计节奏。

以上是环球青藤小编为考生整理的APP界面色彩运用原则与规范的相关内容，希望对大家有帮助!更多技能资讯的相关内容尽在本平台，快来看看吧!

❹ app界面设计要注意哪些细节问题

您好： 手机APP界面设计的重点无非就是两个：一个是界面视觉设计，一个是考虑界面设计的用户体验。

❺ UI设计中怎么样让界面变得更干净

5个技巧让界面更加干净
1、减少线条
页面上面线条太多，会让人觉得页面复杂，线条好了，看起来就会清爽干净。
2、合理留白，拉开信息层级
合理的留白可以增加产品的品质，也可以让主题更加突出，有些页面上面有很多元素，看上去非常拥挤，如果适当留白，看上去更加清爽。
3、运用卡片整合信息
卡片式设计将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱。卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。
4、加强行间距，+4原则或黄金比例
行间距大家都知道，但是具体如何设计很多人不知道，一般常用规则是+4，比如文字大小是12PX，那么行间距就是16，依次类推文字是14那么行间距就是18。
5、加大字间距：0.1或者0.2勿过大
字间距同样很重要，特别是做英文排版的时候，同样的内容，字间距和行间距不合适，界面看起来就会相差很多，有的看着很舒服，有的看起来说不出来哪里不对。

❻ 为什么有的 APP 看起来很舒服UI 中的一致性怎么做

在产品设计中我们时刻留意着关键元素的一致性的运用，确保产品整体体验一致。遵循一致性的原则目的是为了减少用户认知负荷，在UI设计中我们可以从颜色、间距、字体、图标一致性、规则一致性、交互操作一致性去把控整个界面的一致性。

在使用颜色上需要严格去定义，我们从很多很多的产品中都可以得到一个公式:品牌色，提醒色（成功，错误，警告），具有色彩偏向的黑白灰。举个例子：从提醒色中可以发现这些颜色在生活中同样传达了一样的信息，比如绿色用于正确颜色，红色用于错误颜色，蓝色用于可点击颜色，黄色用于警告色。而这就是色彩情绪！

不同的颜色代表不同的情绪，比如支付宝的蓝色，金融行业的黑金色，抖音的红、蓝、紫等等都传达了不一样的情绪，同时也非常直观的传达了产品的特色。

布局遵循最小化设计原则，导航路径清晰可见，一级导航和二级导航一定要区分清楚，二者不可混用。排版布局上尽量遵循格式塔心理学原理！适当的使用网格系统来规范界面中间距留白

格式塔原则

最后，这些原则在我们设计中不是单一存在的，他们可以相互影响并且存在一个界面中。同时格式塔原理并不仅仅局限于UI设计、包括平面设计……

在日常设计中，并不是单使用一个原则，而是多种原理组合分析使用，只有这样我们的设计才会更加的科学、全面

操作模式，反馈机制要符合用户心理表真，常用功能操作流程要和外部环境保持一致，比如我点击界面蓝色文字这时候就要有正确的反馈机制，而不是出现一个错误提示。

在UI设计时，如何可以从重复、韵律、节奏三方面去把控设计元素，让它们保持一致性却有不失创新。

如按钮、卡片、列表样式重复使用。使用参数化原则去灵活设计一些控件。比如按钮、卡片圆角大小、可以随着控件大小的改变参数化的去调整圆角大小，而不是一直不变。

在布局上制定了一些规则，让我们更轻松的使用提高设计效率。比如卡片流的排布规则。

当然一个好的 APP 并不只有这么一些内容，而且上面的每个知识点都是有很大的可挖掘性。这些只是最基础的一部分，每一个设计要点都不是单独的使用，比如：用户在户外使用时 APP 的时候字体颜色与背景颜色的对比是否会影响识别度，使用户造成识别困难等问题

❼ 带你认识恐惧留白的心理效应（上篇）

最近在做app启动页的时候，做了2个不同的版本，一种的布局主要是在居中的位置并且所放置的信息也相对较多，另一种是页面底部只放置一个LOGO并且大面积留白。个人比较喜欢大面积留白的方案，2种方案排版类似下图，这里拿的是UC浏览器的不同版本的启动页做举例。

刚开始产品问我这样排版会不会太空了，我当时也没有更好的回答只是说这样比较有逼格.....后来产品自行查找了一些其他产品发现确实很多app采用这种排版形式。那么我们接下来探索一下，有没有什么理论来支撑这种大面积留白的布局形式呢？并且在我们面对他人质疑的时候如何有理有据的说服对方，说明我们的设计原由呢？而不是说这样就是好看，就是有逼格，到底谁更专业等站不住脚的解释。

当然启动页的作用是为了加载整个app，为app的呈现所预留时间。大量的留白也是带给用户遐想和期待。当然留白的情况也并非一定适用，具体还要根据产品策略来设计。

中国清代的青花瓷

其实留白恐惧症从古至今是普遍存在的现象，最具有代表性的是清代的青花瓷的图案纹样。我从小就一直不能理解这样密集的图案有什么美感可言，对我来说倒不如是密集恐惧。

意大利时期的绘画代表

当然不止中国清代的青花瓷，欧洲维多利亚时期也一度出现了更为凌乱冗杂的艺术风格,甚至在平面设计领域出现了维多利亚风格。

当时意大利出生的着名文学和艺术评论家 Mario Praz 创造过一个拉丁语词汇，Horror Vacui，意为对留白的恐惧。其实就是针对维多利时期的绘画和设计风格的吐槽，绘画和设计上的矫揉造作，繁琐装饰，每一个细小的空间都需要被填充、塞满，推动这一“设计趋势”的，其实就是对留白的恐惧。

虽然当然由于在长期和平繁荣发展的前途下不可避免的现象，但是也体现了物质富足的人们的精神世界对空白空间的恐惧。

那么相反 中国写意山水画 为什么偏向于那么多留白呢？

古人看画和现代人不同，现代人由于互联网的普及，我们看到的画大多是一览众山小。而古人是拿到的画通常是很大的卷轴，一点点的展开细细品味浏览山河间的每一处景致。走到山林密集之间，就需要一些远山水景色交相呼应。这里的留白其实是山水的延伸，以无相表达意向，言有尽而意无穷。没有这些“留白”就无法烘托山水的壮阔。

那么话说回来到底什么是留白呢？人们为什么会恐惧留白？

留白的定义：

想象一下上面这幅画如果整个画面画满了水波纹，效果是不是大打折扣呢？

很多人理解的留白就是空白，其实留白是空间的一个负值。它并不一定非得是白色，它相对于其他元素也同属于设计空间布局框架的一部分。留白的使用可以替代分割线将内容、文本、图形、图标等众多视觉元素进行合理的分割，让视觉更容易向内容聚焦。

那么在移动端我们对留白的定义可以理解为：

留白是同属于空间布局框架的一部分，小面积的留白可以起到分割、归纳信息的作用，大的留白可以使用户更专注于内容。

关于恐惧留白：

恐俱留白这句拉丁文，指的是渴望用资讯或物品将空白处填满。就风格而言，正好与极简主义相反。自亚里士多德以来，虽然这个词语在不同领域有不同的意义，但在今天，主要是用来形容不留白的艺术和设计风格。

恐俱留白越高，价值感就越低

我们可以看下上图的不同服装店的展示草图设计方案，最左边的橱窗摆放了模特并悬挂堆叠了很多衣服。中间的橱窗摆放了4个模特，最右边的只放了2个。那么相对的那家店给人感觉这家的衣服更贵呢？哪家感觉最便宜呢？显然是摆放最密集的最贵，摆放留白最多的最贵。

在绘画中留白，留白的主要作用是衬托主要景物以营造意境氛围，再者就是构图分布的需要了。那么我们套用到移动端留白的重要性有哪些呢？

·突出核心内容，使能容更益于阅读

·阐述视觉、信息元素间的关系

·对复杂性的信息归纳整理

·提升app的易用性，摒弃过多的视觉干扰元素

关于以上作用的理解，将在下篇结合关于留白的适用性和不适用性进行讲解方便理解。并探讨下如何回应客户留白太多的疑问。

❽ UI设计中怎么样让界面变得更干净

无论是APP还是网站，干净简洁的设计风格都会被大多数人所接受，而那些看起来复杂、充满大量的信息的APP或者网站却会让用户不由自主的拒绝。因为简洁干净的页面更让人觉得轻松，而且也可以更加突出想要表达的信息。那么在UI设计中怎样让界面变得更简洁干净呢？

5个技巧让界面更加干净

1、减少线条

页面上面线条太多，会让人觉得页面复杂，线条好了，看起来就会清爽干净。

2、合理留白，拉开信息层级

合理的留白可以增加产品的品质，也可以让主题更加突出，有些页面上面有很多元素，看上去非常拥挤，如果适当留白，看上去更加清爽。

3、运用卡片整合信息

卡片式设计将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱。卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。

4、加强行间距，+4原则或黄金比例

行间距大家都知道，但是具体如何设计很多人不知道，一般常用规则是+4，比如文字大小是12PX，那么行间距就是16，依次类推文字是14那么行间距就是18。

5、加大字间距：0.1或者0.2勿过大

字间距同样很重要，特别是做英文排版的时候，同样的内容，字间距和行间距不合适，界面看起来就会相差很多，有的看着很舒服，有的看起来说不出来哪里不对。

❾ APP界面设计思路是怎样的

注重人机交互

人在操作手机时，主要以人的意识为主体，手机起到辅助作用。设计师应考虑到人与手机的各自特点，使得两者之间相互协调，从而使工作条件达到最优。在使用手机的过程中应尽量减少人的计算和记忆负担，从而有效地提高对手机的使用效率。

颜色搭配方案

色彩是APP界面设计中的重中之重，这关乎是否能够正确表现出产品气质和定位。主色决定了手机APP界面的整体设计风格，这个主色代表了产品的文化方向，同时也向用户传达了产品的情感。

在设计线框图之前，研发团队的每个人就应明确产品的定位，提炼出最贴切产品的主色。许多手机APP界面的主色都是选择了此款APP应用图标的主色，在不同界面中主色的面积会发生大小变化，可能会有同色系渐变界面，也可能出现同色的系功能图标，但主色的视觉效果依然是占主导地位的。

界面设计原则

①保证功能性和实用性。我们在对手机APP 界面进行设计时，需要考虑APP本身的使用特点，保证大多数用户都能获得使用体验，保证APP功能的合理性，这样的界面会使得用户操作更加方便流畅，也能相应地减少手机的运算负担。

②内涵丰富，寓意明确。设计时应在有限的二维空间中调整图形、文字、按键、符号等元素的位置关系和比例大小，增加对界面内容表达的准确性和界面操控的灵活性。

③图形简洁，易识别。设计师应考虑界面中的点、线、面的构成，界面既要做到简洁并具有概括性，使用户能更容易理解和接受;又要做到内容丰富，不让人感觉单调乏味。

以上就是APP界面设计思路分享，与传统PC桌面不同，手机屏幕的尺寸更加小巧操作，方式也已触控为主，APP界面设计不但要保证APP功能的完整性和合理性，又要保证APP的功能性和实用性，在保证其拥有流畅的操作感受的同时，满足人们的审美需求。

❿ UI设计中如何进行留白

【导读】留白的设计可以让我们的界面变得更有呼吸感，相比于紧凑的设计，适当的留白可以让人在阅读时更加具有放松的心理暗示，但是在有限的手机屏幕内容中，我们需要清楚哪些位置或内容可以做到适当留白?如果进行UI设计留白?

1、增加边距留白

适当增加内容与内容之间、内容与屏幕之间的间距来优化界面的空间感，达到留白的效果，增强内容的聚焦。

2、顶部留白

在界面的顶部减少内容的呈现或加大内容与界面顶部的间距来达到留白的方式，让使用者从一开始的就降低视觉压迫性。例如在一些设计APP的游戏详情页、个人资料页等较为常见。

3、借助标题留白

模块与模块之间使用较大号的字体，通过大字体的支撑产生更加自然舒适的空间留白。例如iOS的系统界面的顶部大标题设计。

4、去线留白

通过减少线的使用以及间距的调整来达到留白的效果，强调内容的自然视觉分区，减少线对内容的信息干扰。例如在一些列表或具有明确大标题的内容模块下可以尝试减少线的使用。

5、减少重色

减少大面积的重颜色使用，降低视觉层次，让整体界面的设计更加轻量化、扁平化。例如上下导航的颜色，在无需过渡强调品牌色的情况下，可以考虑使用白色或浅色来增强整体界面的呼吸感和留白效果。

设计留白也是UI设计技巧之一，总之，在手机屏幕空间相对有限的情况下，我们的视觉会更加聚焦。过于密集的设计往往更会造成视觉疲劳，因此更需要多去思考内容设计的空间感，适当的留白可以降低视觉疲劳，提高视觉聚焦和阅读效率。