建材秒知道
登录
建材号 > 设计 > 正文

UI设计的规范标准有哪些

专一的美女
洁净的魔镜
2023-01-25 08:34:08

UI设计的规范标准有哪些

最佳答案
顺利的老鼠
自觉的热狗
2026-05-11 15:12:07

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

最新回答
清爽的橘子
内向的画板
2026-05-11 15:12:07

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计,也叫界面设计。UI 设计分为实体 UI 和虚拟UI,互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。

UI 设计师的职能大体包括三方面:一是图形设计,软件产品的产品“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量 UI 设计的合理性。

UI设计目前的前景还是很不错的,很多企业都缺少 UI设计师。而且可以看到的是,现在社会的发展,更多的智能机和智能机器人研发出现,这些都离不开UI 设计师。所以说 UI 设计的是很有前途的,是不会失业的。而且 UI 设计门槛不高,要入门也不难的。

从工作内容来说,UI 设计在当前的互联网领域、科技领域可以说无处不在,

好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向,一个是交互设计,另一个是视觉设计。

总的来说,UI 设计相比较于编程而言,还是非常适合大众学的并且就业前景很广阔。学完 UI 设计,能获得一份稳定而又不失乐趣的工作,同时有利于追求更高品质的生活,在艺术领域可以获得更多的启迪。

年轻的背包
舒心的月亮
2026-05-11 15:12:07

一、字体

                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

明亮的砖头
辛勤的刺猬
2026-05-11 15:12:07
概念,灵感,方法和工具概念:设计互联网产品,Style Guide / Pattern Library 和纯粹的 Specification 各具不同功能和作用,却都含“设计规范”的概念。1. Style Guide / Pattern Library:偏重视觉概念,一般以文档或图像格式呈现(不限定)。内容:对设计作品中的字体(Typeface)、字型(Font)、色板、品牌标识规范(Brand Guideline)、Icon 等要素作出展示和说明。主要作用于设计团队或设计师之间,展示产品的视觉设计风格。便于风格复用,规范第三方的品牌塑造(Branding)和接入。实例参考(更多参考下文中“灵感”):Brand Assets | KickstarterLogos &branding | Dropbox2. Style Guide / Pattern Library:偏重(Web 前端)开发概念,基本都以网页文档形式呈现。内容:对界面元素(UI Elements)的样式风格及实现其效果所对应的代码片段(HTML, CSS)作出说明解释,包含交互和动效设计(以 JavaScript 为主,更多信息参考:界面动效设计方法有哪些?)。例如:常见的基础布局(Grid System)、字体排版(Typography)、按钮、菜单、列表、对话框(Dialog)、Tooltip 等等。用于团队 Web 设计和开发协作,统一产品风格。复用时提升工作效率,同时也保证用户体验质量。实例参考(更多参考下文中“灵感”):Pattern Library | MailChimpMapbox styleguide | Mapbox概念 1 和 2 结合的实例(更多参考下文中“灵感”):Product Style Guide, Visual guidelines | SalesforceStyle Guide | Lonely Planet3. Specification (Spec):介于设计与开发之间,由设计师直接在视觉稿(Mockup)中创建。内容:主要由 Annotation(注释,国内俗称“标注”)和 Measurement(量度)构成。Annotation 既注释设计稿中界面元素所使用的字体字型、色值等,Measurement 则注明各元素的尺寸及它们的边距,留白等。用于设计师与开发人员之间沟通和工作交接,保证开发出地产品界面和视觉稿高度统一。______________________________________________________________________________________灵感:一些常用的项目和文档都有采用上述的“概念”,比如采用了概念 1 的:iOS Human Interface GuidelinesMaterial Guidelines采用概念 2 的:SkeletonPureBootstrap而概念 3 往往仅在公司或团队内部使用(详见下文“工具”)。灵感和实例资源:Website Style Guide Resources | 收录大量案例,该项目同时也收录了相关文章、工具、书籍、播客等。Find Guidelines | 一个直观的 Guideline 官方链接收集列表。Brand Style Guide Examples | 同上All The Style Guides | 同上,托管在 Tumblr ,以博客形式呈现。______________________________________________________________________________________方法和工具:1. Style Guide / Pattern Library:方法不限,以能够准确展现视觉设计风格和品牌识别(Identity)的规范为标准。正因其偏视觉化,编写文档不是必须的,可直接用图形编辑软件产出。例如:Airbnb UI Toolkit WebSalesforce1 UI KitHousing UI Style Guide也可借助工具:Style Inventory for Sketch | Sketch 插件,基于视觉稿生成 “Style Guide”。Style Tiles | 用于快速制作“Style Guide”的 PSD 模版,Frontify Style Guide | Frontify 是一个面向设计团队的协作平台,提供“Style Guide”生成和“Spec”工具。CSS Stats | 解析 URl 对应网站的 Style(主要依靠分析 CSS 文件),展示相关信息,比如字体尺寸(font-size)、色板、浮动(float)采用数量等。Stylify Me | 填入网站 URL,自动生成对应页面的“Style Guide”。提供 PDF 文件保存。2. Style Guide / Pattern Library:因要制作出网页文档,且其中含有大量的 Web 组件(代码片段)和元素(视觉),可借助前端框架高效产出,比如相对大众的 Bootstrap,Semantic UI。在大量的自由和开源前端框架项目中,选择有维护支持,自身喜欢或熟悉的即可。可用工具:设计师 Brad Frost 有一套叫做“原子设计(Atomic Design)”的 Web 设计理论,在该领域有一定影响,其核心概念就是复用“Pattern Library”,高率生产 Web 页面:Atomic Design | Brad Frost他为该理论创建了一个开源项目,基于 PHP:Pattern Lab | Build Atomic Design SystemsWeb Starter Kit(HTML, CSS, JS) | Google Web Fundamentals 提供的 Web 生产样板,支持创建“Pattern Library”形式的文档。Style Guide Boilerplate(PHP) | “Pattern Library”样板,类似 Pattern Lab。更多方法类文章和工具列表可参考:Website Style Guide Resources50 Style Guide Tools, Articles, Books and Resources | Tuts+3. Specification (Spec):“Spec”应以尽量降低设计师精力消耗,并能让开发人员清晰理解为标准。提高效率并保证质量的基础,是选择合适的工具。在绘制设计稿所用的图形编辑软件中启用扩展和插件,直接生产“Spec”,高效直击主题:specKing | Photoshop($19,推荐,正在使用)Specctr | Photoshop, Illustrator($49 ,PS 和 AI 单独出售)Markly App | Photoshop, Sketch($39.99,PS 和 Sketch 单独出售)Sketch Measure | Sketch(自由)一些其他插件也提供制作“Spec”功能,比如:PNG EXPRESS | Automated Design Delivery for Photoshop($29)Ink | A Photoshop documentor plugin(免费)团队协作平台和其他工具:Avocode | 简化设计师与开发人员之间的协作流程(Web 产品),提供 Slice(切图)、Spec、图层转 CSS 等功能。Zeplin | 同样是一款有质量的设计协作软件。目前仅支持 Sketch 设计稿,PS 支持仍在开发中。产品处于邀请内侧阶段。Frontify | 上文“Style Guide 工具”提到过,属协作平台,支持对设计稿“Spec”。Assistor PS | 可独立在系统中运行的 PS 协助软件,但需借用 PS 载入设计文档。提供 Slice,Spec 等功能。

如意的鞋垫
威武的服饰
2026-05-11 15:12:07
好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。

1.简易性

界面的简洁是要让用户便于使用、便于了解产品,并能减少用户发生错误选择的可能性。

2.用户语言

界面中要使用能反映用户本身的语言,而不是游戏设计者的语言。

3.记忆负担最小化

人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。

4.一致性

它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。

5.清楚

在视觉效果上便于理解和使用。

6.用户的熟悉程度

用户可通过已掌握的知识来使用界面,但不应超出一般常识。

7.从用户习惯考虑

想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。

通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。

8.排列

一个有序的界面[1] 能让用户轻松的使用。

9.安全性

用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。

10.灵活性

简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。

11.人性化

高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。

12.颜色不一样

UI设计师是随着网络而兴起的新兴设计行业,从事对软件的人机交互、操作逻辑、界面美观的整体设计工作

涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及跨媒介设计以人为本,以用户体验需求为基础,发展多元化是目前中国信息产业中最为抢手的人才之一。

勤恳的冬天
细腻的小猫咪
2026-05-11 15:12:07

1、简易性

界面的简洁是要让用户便于使用、便于了解产品,并能减少用户发生错误选择的可能性。

2、用户语言

界面中要使用能反映用户本身的语言,而不是游戏设计者的语言。

3、记忆负担最小化

人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。

4、一致性

它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。

5、清楚

在视觉效果上便于理解和使用。软件要为用户使用,用户必须可以理解软件各元素对应的功能。如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。

6、用户的熟悉程度

用户可通过已掌握的知识来使用界面,但不应超出一般常识。

7、从用户习惯考虑

想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。

通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。

8、排列

一个有序的界面能让用户轻松的使用。软件的交互流程,用户可以控制。功能的执行流程,用户可以控制。

9、安全性

用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。

10、灵活性

简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。

11、人性化

高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。