ui网页设计字体大小规范

1、手机网页UI设计尺寸是多少

这个不同手机尺寸不一样，比如
iphone3 320*480 iphone4 640 * 960
android 240*320 320* 480 480* 854 这些比较常用，还有一些其他分辨率
看你具体是针对什么手机做的了！

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

3、UI设计网页设计字体规范应该要注意什么

可以参考常规字体的使用规范：

1、在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。

2、不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。

3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配，等。

(3)ui网页设计字体大小规范扩展资料：

网页设计

1、需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。

2、以业务目标为中心进行功能策划，制作出栏目结构关系图。

3、以满足用户体验设计为目标，使用axure rp或同类软件进行页面策划，制作出交互用例。

4、以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。

5、根据用户反馈，进行页面设计调整，以达到最优效果。

4、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的主页指示器的位置。

5、UI设计规范都有哪些

UI 设计规范包含颜色、文本样式、图层样式、图标、组件、品牌等规范，团队没有设计规范的话，建议在蓝湖搭建。

6、网页设计合适的页面尺寸是多少

网页设计选用的分辨率是72像素，使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计，一般采用全屏展示和两侧留白的方式。
全屏展示，是整个网站看起来大气一些，但是布局要合理安排，不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸，能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域，内容限时区域在好控制在1000px-1200px。

7、ui设计规范文档怎么写

ui设计规范；ui设计规范有哪些？这个问题对于ui设计师来说应该是比较关心的吧，因为作为ui设计师，ui整理设计规范也是设计能力的一种体现。所以，无论是自己设计创作还是推动产品开发，你的设计规范是否完善，对产品的质量起着决定性的关键作用。那么我们今天就来聊聊这个问题吧！

ui设计规范有几大分类组成：

1、Logo

品牌印象的直接感受，根据页面不同背景所使用的Logo图也不同。将产品中所使用到的Logo统一分类，以下引用Moby’s Petshop UI Style Guide的Logo资源例举说明。

Moby’s Petshop UI 的Logo由图形和文字组合而成，而品牌色为蓝色，Logo的使用也需要考虑到Footer黑色背景下的Logo。所以用Logo的横竖向排版和单个Logo图形来分类更好。

分类里面则展现品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。

2、标准色

颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。颜色大致可分为品牌色、文本颜色、背景色、线框色等。给颜色添加关键词，明确用于什么界面。

以下引用real-pixels UI Style Guide的颜色规范，可以借鉴的是每个颜色不仅标注了颜色值，而且右侧给出了颜色使用的场景，值得借鉴的是按钮Normal状态和Hover状态的颜色值放在一起，这样，对不同状态显示的颜色感受更直观。

对颜色值统一规范命名变量，提高开发效率的同时更好的维护设计规范。

在前端开发中，对颜色值进行编号，这样对代码也有着极大的优化。定义一个设计规范的CSS样式库，开发过程中就不用重复修改CSS参数值，直接引用定义好的变量名就可以，这样修改设计规范的成本大大降低。

3、字体

字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。

以下引用的是Retail Banking Service UI Style Guide中的字体规范，在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。

4、段落设置

在实际的产品设计中，段落有很多种样式，不同场景下的段落要求也不一样。比如：阅读内容的段落要求文本可阅读性强，所以对字体、字号、颜色、行间距等要求简单易读。而带有装饰性的段落文本则不需要那么严谨，装饰性强就可以。

需要注意的是：在定义段落默认字体的时候还需要定义一个后备字体，即默认字体不能正常显示情况下显示的字体。设计的水平层次就在于对细节的打磨，这也就是段落规范在设计中存在的意义。

5、图标

图标是重要的软件标识，在设计资源中是最重要的模块之一。在软件产品中甚至可能每个页面都存在图标，图标除了美化的作用以外，还有着明确指代含义的计算机图形。

具体分为以下三个作用：

图标是与其它网站链接以及让其它网站链接的标志和门户。图标是网站形象的重要体现。图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。

6、图片

图片也是属于设计规范最重要的部分之一，按照用途分类整理图片资源，设计风格系统化。

7、度量

在设计的过程中，我们经常会使用一套规范的度量标准，来保持产品的一致性，分别为圆角值、间距、大小。

对度量解释最好的是设计中经常使用到的栅格系统（Grid Systems），运用固定的格子设计版面布局，其风格工整简洁。这就是我们在网页和APP设计的过程中经常使用到栅格系统的原因。

8、阴影

阴影风格及参数也是设计规范中的一部分，在整理设计规范的时候，需要注意的是阴影的参数值是网页中控制阴影的参数值，而不是设计软件中的参数值。

举个例子：网页中阴影对应的参数值为：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，这才是程序员需要的阴影参数值，否则最终开发出来的阴影会出现不一致的情况，无法达到规范的目的。

9、组件

常用的UI组件（Component）：Button控件、下拉框、选择框（单选复选框）、时间选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器、选项卡等。

Button控件

按钮是最常见的组件之一，按钮有5个状态：Normal、Hover、Active、Disabled 、Loading。

需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外还需要标注icon和按钮文本之间的间距和icon图标的大小。

10、下拉框

下拉框是为用户提供多个选择的单选组件，优点是用最简单的界面布局方式收纳了很多的选项，需要注意定义下拉选择框弹出的时候，鼠标移动上去的Normal、Hover、Active状态。

11、选择框（单选复选框）

顾名思义，单选框是众多选择里面选一个，而复选框是众多选择里面可以无限制选择。单选框和复选框都需要三个状态，即未选中状态、选中状态和不可点击状态。

时间选择器：

时间选择器是选择年月日的组件，分别对应年月日星期的信息，在设计的时候需要考虑到4个状态，分别是：Select、Not_Select、Hover和Disable，并且写进设计规范。

输入框：

输入文本框是我们软件产品设计必不可少的组件，文本输入框有4个状态：Normal、Active、Disable和Error。

搜索框：

和输入框相同的地方是都需要聚焦然后输入内容完成操作，应该有为Normal、Active、搜索下拉状态、Error状态。

进度条：

这个需要在规范中注明上传进度条的整个交互操作流程，对Normal状态、点击上传/拖拽上传状态、上传中、上传成功、上传失败，整个流程状态的整理。在上传过程中，任何用户操作都应该有及时响应的动作，这样用户在使用的过程中才不会迷茫。

分页器：

分页器是用于切换内容页面的复合组件，常规的分页器有上下页操作按钮、分页页码按钮、输入页码手动查找的搜索框，以及分页器的4个状态：Normal、Hover 、Active、Disabled。

提示框：

提示框是一个事件触发弹出面板显示的组件，经常使用提示框的地方是，删除按钮、疑难问题点、提示类弹出信息等。这个风格设计就比较多了，设计风格各不相同，定义底板样式、文字样式和阴影参数。

警告框：

页面报错时的显示样式，常用的警告类信息是：操作成功、提醒用户注意、警告用户注意等。

表格：

表格类信息居多，应重点整理表格样式以及文本颜色大小。

弹出面板：

弹出面板主要由4个部分组成，分别是面板内的文本信息、按钮、面板大小样式、蒙版颜色和透明度。

数字步进器：

数字步进器属于复合类型的组件，可以理解为按钮和输入框联动的组件，所以输入框和按钮拥有的属性状态，步进器都有。

选项卡：

切换选项卡即切换内容，和下拉选择框不同的是，选项卡是将多个选项都排列出来的单选组件，需要考虑4个状态：Normal 、Hover 、Active 、Disabled 。

 ui设计规范，ui设计规范有哪些？这个问题介绍到这里就介绍完了，现在你清楚ui设计了吗？设计规范对整个项目的规范性推动很强大，但是需要花时间和耐心细心打磨，所以需要花费很多时间和精力去整理资料、编辑素材、分类整合，最后还要在设计软件中将整个规范重新排列设计。如果你还有其他关于ui设计的问题欢迎持续关注易夏岚或者与我进行交流~

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

用户界面设计包含为机器和软件创建的所有界面设计，例如网站和移动应用程序的外观，以及它们的方向和易用性。GUI设计在用户与应用程序或网站的交互方式中起着至关重要的作用，这意味着唯一良好的UI设计是实现简化和无缝体验的设计。

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

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

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

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

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

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

7、视觉层次。
强烈的视觉层次会让画面有清晰的浏览次序。如果要在画面中添加一个视觉强烈的元素时，设计者应该要重新调整页面上所有元素的重量分配，来达到强烈视觉层次的效果。
了解用户界面设计原则是你做出优秀作品的必要条件，而掌握UI设计师必备的技能才是你决胜高薪的关键。

9、网页设计中,最小的字号应该是多少

网页设计中的字体一般设置成12px，如果网页的东西相对比较少，也可以设置成14px,关于导航和其他的一般是用ps处理出好的效果，如果是文本一般为14以上并且带加粗。

字体没有特别规定但是有常规的用法：

常规文字 12px；标题，页头 14px、16px；大标题，横幅等 18px。

(9)ui网页设计字体大小规范扩展资料：

网页设计，是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

网页设计主要以Adobe产品为主，常见的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代码工具，其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。