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

温馨提示:答案为网友推荐,仅供参考
第1个回答  2020-03-02
用户界面设计包含为机器和软件创建的所有界面设计,例如网站和移动应用程序的外观,以及它们的方向和易用性。GUI设计在用户与应用程序或网站的交互方式中起着至关重要的作用,这意味着唯一良好的UI设计是实现简化和无缝体验的设计。

用户界面设计要遵循哪些原则?
1、明确。
对任何界面而言,“明确”是首要的也是最重要的一点。设计师们在设计的时候,要去关心人们为何会使用这个应用,去了解什么样的界面是能帮助他们与之互动的,去预测人们在使用时的行为并能够成功地反馈给他们。

2、交互。
界面的存在是为了让人和我们的世界产生互动。它的功用和效果是可以被测量的。但是它们不是功利性的。优秀的界面不但能够让我们做事有效率,还能够激发、唤起和加强我们与这个世界的联系。

3、直观操作。
要抓住直观操作这个最初的目标,界面设计要尽可能的简洁,更多的可识别的惯用自然手势。理想情况下,界面会变得非常细微,用户在会有直观操作的感觉。

4、让用户掌控一切。
人们会在自己能掌控的环境中感觉最舒心、最放松。通过定期的梳理系统状态,描述因果关系,并且在每一步操作都给出提示,让用户感觉每一步操作都在他的掌控中。

5、遵循用户行为。
人总是对符合期望的行为最感舒适。因此,设计出来的元素,看起来应该像它们本身特征一样。在具体操作中,这意味着用户只要看到这个界面元素,就应该能猜测出这个元素是做什么的。

6、前后一致。
为了保持一致性,新手设计师通常在会把相同的视觉处理(重用代码)方式用在,应该用不同的视觉处理方式的元素上。

7、视觉层次。
强烈的视觉层次会让画面有清晰的浏览次序。如果要在画面中添加一个视觉强烈的元素时,设计者应该要重新调整页面上所有元素的重量分配,来达到强烈视觉层次的效果。
了解用户界面设计原则是你做出优秀作品的必要条件,而掌握UI设计师必备的技能才是你决胜高薪的关键。本回答被网友采纳
第2个回答  2016-08-29
在百度文库搜索一下“UI设计(流程/界面)规范”吧
节摘:
规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。 1.2范围 l 界面设计
l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述
UI设计包括交互设计,用户研究,与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计,并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求,以保证每个环节的工作质量。 1.4 基本介绍 A、需求阶段
软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人...
第3个回答  2021-12-13
UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计,也叫界面设计。UI 设计分为实体 UI 和虚拟UI,互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。

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

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

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

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

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

  想要学习UI,那你知道UI设计的基本规范有哪些吗?

  一、设计原则

  统一性:每个设计应该是统一的,不能有太多个性差异化的特征;

  内容:用户更多关注的是内容,而非设计本身;

  确定性:在设计中减少不确定的因素,和预期。

  二、色彩系统

  设计中三大元素,色彩,字体,图形,我们在建立一个系统时候,色彩是很重要一部分,我们需要定义好我们整个系统的色彩架构体系,色彩体系一旦建立好,后面我们的设计都将围绕这些色彩进行设计,色彩包括:品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色,主色盘,辅助色盘,色盘延伸等。

  三、图形

  图形,设计中很重要元素之一,我们插画风格图形如何定义,图标,背景图形都属于图形一部分。插画在设计运用类型有几种,比如atlassian对于他们插画类型进行了规范,插画需要有隐秘和故事性在里面,插画必须有构建的感觉,定义了人物特征以及颜色规范。包括对于空白页图形定义,对图标风格定义,包括色彩关系,对于头像,定义了有五官和无五官风格定义,包括整个规范的正确示范和错误示范,图标规范等。

  四、栅格系统

  栅格是为了保证页面中更好的布局,保证布局统一性。栅格系统里面又分最小单位和间距,在airbnb中对于间距,他们运用了8的倍数,所有的规范都是很有弹性的,8,16,24,48,64来建立。网格系统中的列,也有叫栏,网格系统中的行,网格系统中的水槽,网格系统中的边距。

  五、字体

  界面中出现最多的内容字体,字体除了传统意义上大小之外,还有字间距、行间距、字重对比、字体颜色等。字重,就是字体粗细,通过字重可以加强层级;字体大小以及运用场景,字体在界面中什么样场景运用多大字号,以及对应的字间距,行间距等等都是需要我们去定义的;字体颜色,什么时候用品牌色,成功,错过,超链接出错等等各个状态的颜色如何去定义,后面文章我会详细说明。

  六、投影

  在设计系统中我们需要定义好投影关系,投影需要去定义不同的强度大小,以满足页面中需要,一般通过透明度,以及投影远近来定义。

  七、图文关系

  图片和文字在界面中如何处理,多色调如何运用,黑色图片上放文字怎么处理,白色图片放文字如何处理都是需要我们去详细定义的。

  设计一套设计语言是一个很复杂的过程,前期一般需要比较资深的的设计师来完成,设计完成后,对于基础的颜色,字体不要经常变动动,成本会比较高,至少需要保证这些基础元素,一年内不要频繁变动,今天和大家分享的只是一个大概框架,后续我将会拆解里面每个模块,逐步和大家分享如何去设计一个语言。

  八、边距和间距

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

  全局边距

  全局边距是指页面内容到屏幕边缘的距离,整个应用的界面都应该以此来进行规范,以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。

  卡片间距

  在移动端页面设计中卡片式布局是非常常见的布局方式,至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定,通常最小不低于16px,卡片间距的设置是灵活多变的,一定要根据产品的气质和实际需求去设置,平时也可以多截图测量一下各类 APP 的卡片间距都是怎么设置的,看的多了并融会贯通,卡片间距设置自然会更加合理,更加得心应手。

  内容间距

  一款 APP 除了状态栏、导航栏、标签栏、工具栏和控件icon就是内容了,内容的布局形式多种多样。格式塔邻近性原则认为:单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起,互相靠近的元素看起来属于一组,而那些距离较远的则自动划分组外,距离近的关系紧密。

  九、内容布局

  在 APP 的设计中内容的布局形式多种多样,最常用的两种布局形式就是列表式布局和卡片式布局。

  列表式布局

  列表式布局方式非常普遍,随便打开一个 APP,基本都存在这种布局方式,其布局形式的特点在于能够在较小的屏幕中显示多条信息,用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

  卡片式布局

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

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

  十、界面图片设计比例

  在 UI设计中,对于图片的尺寸和比例没有严格的规范,设计师往往凭借经验和感觉设置一个看起来不错的尺寸,但事实上我们是有章可循的。运用科学的手段设置图片的尺寸,可以获得最优的方案,常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618(黄金比例)等。

  十一、APP版式设计规范

  版式设计又叫做版面编辑,即在有限的版面空间里,将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感,在 UI设计中版面设计的原则有哪些呢?

  十二、界面文字设计规范

  文字是 APP 中最核心的元素,是产品传达给用户的主要内容,所以说文字在 APP 的设计中是非常重要的,那么,文字的字体如何选择,字号如何设定,是否加粗,颜色如何设置

  在一款 APP 中字号范围一般在20-36之间(@2x),当然 iOS 11中出现了大标题的设计,字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。关于字体。

  十三、切图规范

  当界面设计定稿之后,设计师需要对图标进行切片提供给开发工程师,通常我们只需要对 icon 进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

  输出切片

  先将设计稿中的图标重新排列在一张新的画布中,保证同样尺寸的图标间距相同,这样做的好处是为图标建立一个控件库,有利于图标的整理。

  给每一个图标建立好参考线之后,用 PS 自带的切片功能,沿着建立好的每个图标的参考线画框即可,注意最后要输出 PNG 格式的切片(PNG 格式拥有更多的颜色和细节并且支持透明)。

  在具体操作时首先要将画布背景色去掉,让画布变成透明,做好切片后执行文件-存储为 Web 所用格式,在对话框中选择 PNG 格式,点击「存储」即可

  切片命名

  切片命名的通用规范是,界面_功能_状态.png。名称应使用英文命名,不要使用数字或者符号作为开头,使用下划线进行连接,例如一个首页处于正常状态下的按钮命名是 [email protected]设计基本规范网页链接。其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性,设计师需要先和合作的开发工程师进行沟通确认。

  十四、设计稿标注

  当界面设计定稿之后,设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率,常用的标注工具有 Mark Man 或 PX Cook。

  在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度;界面的背景颜色、不透明度;各个图标、列表、文字之间的间距。

  十五、程序的对应控件

  Label的自身属性:颜色、字号、字体、行间距、对齐方式、透明度;

  Image View的自身属性:宽高、间距、距离、透明度。

  如今使用本地化插件Sketch Measure,几乎不用手工标注,标注导出HTML后,直接给开发,他们想看什么属性自己点击查看。而一些线上工具的插件,比如蓝湖、墨刀、Mockplus等,功能更加丰富。

本回答被网友采纳
相似回答