ui设计规范文档怎么写（ui设计规范文档怎么写好）

大家好！今天让小编来大家介绍下关于ui设计规范文档怎么写的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，相关业务请拨打电话：175-8598-2043，或添加微信：1454722008

文章目录列表:

• 1、UI界面设计规范有哪些？

• 2、UI设计中的标注规范，你知道吗？

• 3、UI设计的规范标准有哪些

• 4、UI设计规范-字体

一、UI界面设计规范有哪些？

一、字体

                iOS的字体：

                                  中文字体：苹方 / PingFang SC

                                   CSS：Font-Family：PingFang SC

                                   英文、数字：Helvetial

               Andioid的字体：

                                  中文字体：思源黑体 / Noto Sans Han

                                   英文、数字：Roboto

二、规范

            1、  iPhone界面尺寸

2、  iPhone图标尺寸

3、  iPad的设计尺寸

4、 iPad的图标尺寸

5、 Andioid的图标尺寸

6、Andioid的dp/sp/px换算表

三：小结

                    iPhone的主流设计尺寸：750x1334 px

                                                          1242x2208 px

                    Andioid的主流设计尺寸：720x1280 px

                                                           1080x1920 px

二、UI设计中的标注规范，你知道吗？

1.尺寸

我们要将页面上有所需要告知尺寸的内容进行标注，例如图标、图片、头像等等。关于尺寸维度的标注我们需要注意的是：有圆角的地方，需要将圆角半径标出。

对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如按压状态、无效状态、选中状态等等，如果你不标明，开会就会默认没有这些效果。一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。

所以正确的标注方法是给出按钮两边的间距，让整个按钮的宽度自适应(当然高度还是要固定的),这样不论遇到哪种分辨率的尺寸，都能够保持相同的视觉效果，扩展性极强。

2.文字

文字，需要标注文字的大小、字体、颜色、透明度、行高等等，当然也可以和开发进行沟通，对一些内容进行删减。关于文字的标注需要注意的事项：文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚。

3.间距

有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题。

4.颜色

需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项：切记文字的颜色已经归类到文字属性里面，不用重复标注，思路一定要保持清晰。

以上就是小编关于UI设计中的标注规范的分享，希望对大家有所帮助，想要了解更多UI设计相关内容，请关注本平台，小编会做及时的整理并发布的，大家注意查看哦!

三、UI设计的规范标准有哪些

UI即User Interface(用户界面)的简称，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

在飞速发展的电子产品中，界面设计工作一点点的被重视起来，做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”，其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点，一个产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，是建立在科学性之上的艺术设计，那么，UI设计的规范标准有哪些呢？

一、轴

轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心。

简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来。

1、对齐

轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人。

最简单的一个例子就是iTunes程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐，围绕虚线轴轴对称。

2、强化

虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的。

最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈。

从产品设计的角度上来看，Twitter的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。

3、运动

当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动。两个端点决定了线，界定了开始和结束的地方，线或者说轴线的存在会引导和提示运动的方向。

SoundCloud中，音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动（具体可查看马海祥博客《如何利用动效设计吸引访客的注意力》的相关介绍）。

4、连续性

如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动，直到你找到感兴趣的东西，或者感到厌倦并关闭应用。

在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去，但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法。

Pinterest的APP中就是这样做的，持续不断的图片沿着中轴线的方向持续不断地滚动下去，只要你有兴趣一直观看下去。

二、对称

当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称。

1、平衡

对称令整个设计更加平衡，当元素与控件在轴线两侧处于相同位置之时，会给人以协调和谐的设计感。

当我们在规划街道两侧的房屋建设的时候，如果左右两侧都是5间大小一致的房子，当你走在街上的时候这种平衡的设计会令人非常舒适，这是平衡给人的感受。

Rdio的APP设计就遵循着这样的设计规则，屏幕两侧的控件是相同的规格，这类布局很适宜阅读，用户会自觉地自上到下，从左向右查看。

2、不对称

如果轴线两侧的控件布置不再是一一对应尺寸相近，那就是不对称的设计，不对称的设计会给人明显的失衡感，可能会令人不舒服，但是也能造就残缺美，当然这要看你具体怎么做。

虽然Pinteret的APP设计在整体上是沿着中轴线对称的(宽度一致)，但是两边的界面控件并非是对称的，它们的高度并不一致，位置也是错落的，稍微一点的落差都会被眼睛捕捉到，而这样的差异让用户无法准确地左右顺序阅读，不对称设计打破了设计的平衡性和舒适性，但是也可以缓解了规律性设计带来的视觉疲劳。

三、层级

当某个元素出现在比其他元素更重要的位置的时候，层级就出现了。

1、尺寸

如果一个设计元素在尺寸上比其他的控件更大，就会区分出层级。毫无疑问，我们查看某个设计的时候，通常会被最大的元素吸引到。如果一个建筑物有5个出窗户，其中一个是其他四个的两倍大，我们的注意力自然而然会被吸引过去。

通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket，顶部的轮播文章拥有更大的图片，它的位置和尺寸会令我们一眼注意到（具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍）。

2、形状

如果一个控件在形状和形态上同其他的不一样，也可以让它独立出一个层级，不规则的设计同样会令人侧目，建筑物的正面拥有五个相同的窗户和一闪大门，你会立刻注意到门的独特之处。

在Instagram的个人信息页中，圆形的个人头像在方形的图片中别具一格，非常抓人眼球。它会让人意识到，这个独特的东西，更为重要。

3、位置

位置的存在同样能彰显层级的不一样，在圆圈之内，中心位置的东西比边缘部分的看起来更重要，位于轴线顶端的控件会显得比其他部分的优先级更高。

以设计应用Path的设计为例，时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要，而这个地方正好展示的也是用户头像。

四、韵律

UI设计和建筑设计同样有着韵律之美，重复的模式会营造出独特的节奏之美。

1、模式

理解韵律最直接的方式就是听歌，音乐拥有节奏感，绝大多数的音乐遵循着相同的节拍，节拍就是音乐模式的一部分。

这方面最典型的APP是Airbnb，APP列表中每一间房子都占据一个模块，模块中有着大小相同的图片，价格、位置和房东信息和图片的相对位置一定，且排版匀称舒服，两个模块之间的间距也相同，当你浏览的时候，熟悉的节奏会让你清楚地知道上哪看关键信息。

2、间断

当节奏被间隔打断的时候，会形成不同的层级，听歌的时候，均匀的节奏被其他的音乐元素打断的时候，你会意识到这是比较特别的部分。

在Twitter的APP中，推文和推文保持着相同的样式，均匀的节奏，但是其中的“推荐用户”一项有着不同的样式，它插入到推文列表中，打破了整个信息流的节奏，凸显出不同的层级，会很快抓住你的注意力。

四、UI设计规范-字体

App 开发过程很多时候，字体规范会被所忽略。我们接下来简单的说下，关于字体规范所注意的一些东西。

合理使用不同的字体，例如：金额元素的数字字体，中文文本的苹方字体，以及英文文本的相关字体等等，

字体尺寸相关输出，我们通常会借助于，蓝湖或者Pxcook等相关设计网址方便开发使用，一般字体的尺寸，不是多大的字体的它的高度就是多少。这时候需要设计师，为字体多预留高度。自己可以尝试一下

参考链接：https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

参考资源：这是我向苹果中邮件咨询的结果

邮件中我的提问：苹方字体可以商用吗？如果不可以有相关文件说明吗？

以下图片即为苹果法律顾问给出的详细告知，其中我翻译内容为以下

致相关人士:

感谢您联系苹果公司。

关于您下面的询问，我们请您参阅https://www.apple.com/legal/sla/上的软件许可协议。选择“操作系统、软件工具和服务器”后，选择最新的苹果软件，并参考字体部分。

字体本中提供的字体可用于在Mac上运行的苹果软件上创建、显示和打印内容。此类内容可用于个人或商业目的。然而，用户被禁止复制和分发的电子字体文件提供在字体本上使用非苹果的硬件。

如果你不确定你的权利，你应该适当联系你的法律顾问。

感谢你对苹果的关注。

以上就是小编对于ui设计规范文档怎么写问题和相关问题的解答了，如有疑问，可拨打网站上的电话，或添加微信。

推荐阅读：

ui设计图片素材高清（ui设计 图片）

ui设计主要学什么内容（ui设计需要学的软件）

如何看自己的抖音ID（如何看自己的抖音UID）

哪些商标是销售商标？销售商标和制造商标的区别

中国手游排行榜（手游排行榜前十名）