ui除了金刚区还有什么区

UI即User Interface（用户界面）的简称。泛指用户的操作界面，UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。

01、界面设计尺寸及栏高度

（1）我们用Photoshop做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。

（2）目前主流的iOS设备iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。

（3）注意：在进行iphone x设计的时候我们依然可以采用熟悉的iphone 7的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

底板上图形设计区域约占底板区域的50%~65%之间，45°渐变可以让图标看上去更加有设计感，渐变的两色要在同一色系，渐变不要过于明显。整体金刚区图标底板色的饱和度和明度要尽量做成视觉统一。白色面性图标会使图标整体看上去更加简约，直接。

其实图片设计也有他的比例，按照比例设计，不仅会让界面更统一，同时也方便后期维护。

根据不同产品属性不同，用到的比例也有所差距。我们常见的图片比例有2：3、3：4、1：1、16：9、16：10这几种。下面分别针对这几种比例进行分析。

图片比例2：3

2：3≈0.666，较为靠近黄金比例，在相机拍照的全画幅尺寸比例即为2：3，其他尺寸均是通过裁切而成，因此在应用中看上去比较舒服。该比例多用于横图中，如商品列表、banner图中。

爱彼迎的界面体验模块和详情页面的图片，都是是使用2:3的比例

图片比例3：4

3：4的设计在界面中也很常见，相比于2：3，图像更为紧凑，多用于图片占比重较大的APP中，也多用于产品列表、banner中。

厨房故事相对于爱彼迎，美食需要更多的图片展示空间。

图片比例1：1

1：1也是正方形构图，这种构图图片占比比较大，因此多用于产品展示、头像、特写展示等场景的APP中，在电商设计中较为常见。

天猫也就是电商类的APP由于图片直接觉得用户的点击量，因此往往会采用1:1的这种可将图片展示最大化的方式。

图片比例16：9

16：9主要是电影中的常见构图，该构图给人视觉开阔的感受，多用于视频类APP中。

视频类APP大多使用这个比例，这是由于电影屏幕的尺寸比例，同时我们的设备大多也是这个比例。

黄金比例16：10

16：10=1.6是最接近黄金分割1：0.618=1.618的，因此现在一些设计也开始做16：10的设计。

打破常规比例

按照常规比例设计可以让我们设计更舒服，但是对于一些对设计把控比较好的，就算不按照比例设计也很出彩，因此我们在成长期可以遵循规则，在上升期也可以打破规则，如果规范得太死，所有界面都差不多了，毫无创意可言。

比如，IN他并没有按照我上面整理的比例进行设计但是界面照样统一舒服，因此我们需要灵活使用规则。

总结

1、根据产品自身特点选择对应图片比例。

2、界面设计中，不必拘泥于常规比例，有时候打破常规，会让界面更具创造力。

3、根据版面，结合其他设计原理，可将不同比例的图片搭配使用，这样会使界面更具节奏，让界面更活泼。

px（pixels）：像素单位（相对单位），在不同的设备(dpi)下大小不同

ppi(pixels per inch)：是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富

dpi（Dots Per Inch）：像素密度，即每英寸的像素数量

dp（Device Indepent Pixels）：是独立于px的单位，简称"dip"，与像素密度(dpi)有关。

像素比：不同的Android设备分辨率下，像素比不同（关联dpidppx）

sp（Scale-independent Pixel）：抽象像素，与dp类似。在Android开发中，一般作为文字单位大小。

当系统字体大小为正常时，1sp=1dp

当系统字体大小为大或者超大时，1sp>1dp

当前最流行的分辨率是1920*1080，在该分辨率下，页面中心区域为1200px以内都可以。在800*600分辨率下，导航栏尺寸规格保持在778px以内；在1024*768分辨率下，网页宽度保持在1002px以内。

如果没有指定的要求，以1920尺寸设计就好（这是目前最普遍的尺寸大小），前端开发人员会自行适配其他的分辨率。

扩展资料：

UI设计网页方法

一、呈现更新颖的内容

设计师在进行网页ui设计的过程中需要注意的是，想要让自己的网页看起来更加与众不同，但也不必过于夸大，可以用一些新鲜的理念和不同的布局来吸引用户访问。比如以一种动态的方式，将信息呈现给用户，以此来赢得用户更多的关注。

二、增强元素的设计感

相对于普通的网页ui设计而言，具有较强的设计感的网页往往会更容易吸引用户的注意。任何一个具有创意的网站开发设计方案，都会把目光更聚焦在网页的基本布局和色彩搭配上，而这也意味着网页上一般存在很多种不同的元素。

三、激励用户更多操作

网站开发的设计制作的类型有很多种，面对不同的类型，要有特定的网页ui设计方案。给用户提供一个寻找目标的简易方法，这样用户就容易沉浸到页面中来，同时也增加了用户操作的几率。