UI界面设计规范有哪些_ui页面设计规范

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。
UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。
UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。
从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，
好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。
总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。

图标规范
很多设计师以为UI设计
就是设计图标。虽然事实并非如此，但图标的设计在整个UI设计中是比较基础的一个环节。
图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计，而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。
UI设计师应该知道的UI设计规范
特别是对于新人，所以大家一起来看看图标设计的规范吧：
(1)像素对齐
需要严格的做到像素对齐，尤其是在做较小尺寸的图标时，如果不严格的遵循像素对齐，那最终的显示效果就会出现问题。
(2)多用布尔运算
在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点：
·让你的图标更加规范
·对图形结构理解更加深刻
·后期更改形状更加方便
UI设计师应该知道的UI设计规范
(3)独特的风格
在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。
在这里值得一提就是，我们在做线性图标时，一定要保证描边粗细相同、圆角相同，如果这些基础的规则都没有遵循，那也就谈不上风格的统一、创新了。
(4)视觉大小统一
在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。

总结:需要交付给开发的文件有
1,原图(png格式，三种分辨率750 1334,1242 2208,640 960，以750 1334为基准）

2,切图(2x,3x)

3,标注图(三种分辨率底下标注图,以7501334为基准)

4,流程图

为什么要以iphone6为基准？
是买不起iphone6plus吗
----------------背景知识参考分割线---------------------
iphone4s-6s iphone6/6s plus
状态栏 40px 60px
导航栏 88px 132px
标签栏 98px 146px
iphone4s iphone5/5c/5s iphone6/6s iphone6/6s plus
分辨率 640 960 640 1136 750 1334 1242 2208(10801920 downsampling)
物理尺寸 35 40 47 55
326ppi 326ppi 326ppi 401ppi
----------------背景知识参考分割线---------------------

与iphone5/5s比率一样
750/1334 = 640/1136 = 056
覆盖4个机型，中间尺寸，缩放自如
想一想:为什么基准不应该是iphone6plus？
试试iphone6plus的图放到iphone4s的效果
想一想:为什么基准不应该是iphone4
试试iphone4的图放到iphone6plus的效果

要以iphone6/6s为基准的次要原因-------------
黄太吉用户11月份机型统计占比列表
机型 新增用户(占比)
iPhone 6 3278%
iPhone 6 Plus 2544%
iPhone 6s 1178%
iPhone 5s Global 904%
iPhone 6s Plus 763%
iPhone 5 CDMA 499%
iPhone 4S 122%
iPhone 5s GSM 122%
iPhone 5c GSM 104%
iPhone 5c Global 085%
iPod touch 6G 042%
iPad mini 2G Wi-Fi 042%
iPod touch 5 038%
iPad Air 2 (WiFi) 038%
iPad 4 Wi-Fi 033%
iPad mini 1G 033%
iPad mini 3 (WiFi) 028%
iPad Air (WiFi) 024%
iPad2 Wi-Fi (R2) 019%
iPhone 5 GSM 014%
iPad Air 2 (LTE) 014%
iPad mini 4 (WiFi) 009%
iPad mini 3 (LTE) 005%

分辨率
12422208 3307%
750 x 1334 4556%
640 x 1136 1752%
640 x 960 122%
其他iPad分辨率 23%

我们原以为的高端iphone6 plus并非最多，最高4556%,分辨率是750 x 1334,请记住最高占比分辨率是750 x 1334

要以iphone6/6s为基准的次要原因三-------------
UI所用单位px
开发所用单位point
如果从px得到point
1242 2208 的尺寸/3 414 736
750 1334 的尺寸/2 375 667
假设一套app 50个界面，每个界面至少40个尺寸数 2000个数需要开发计算 请做2000个除以2和除以3的速度哪个快哪个慢

所以请务必采用750 x 1334分辨率做图，另外以偶数做标注，避免小数避免锯齿和边线模糊。

iphone 4s,iphone5,iphone5c,iphone5s,iphone6,iphone6s这六款机型使用的都是2x图 ,
iphone6s/6 plus的是3x图 ,
比如UI给40 60,起点(20,20)的按钮尺寸,开发是以20 30去定大小，(10,10)的坐标定位,iOS系统根据文件名的2x后缀自动渲染为2倍的比率,所以UI需要命名为button@2xpng这种格式
对应6plus的请以6090大小切图，命名为button@3xpng这种格式

-------------文件命名万能公式--------------
模块 类别 功能 状态@2xpng
模块 类别 功能 状态@3xpng
举个例子
order_button_buy_normal@2xpng
order_button_buy_selected@2xpng
订单 按钮 购买 默认
订单 按钮 购买 按下

尽量用英文，参考英文命名

字体，尺寸布局属于设计的范畴，码农的关注点在于实现。

画流程图的过程是梳理也是发现设计缺陷的过程。

比如eico早期设计了 帮助老婆订餐这种界面元素 想象相当美好，靠一两个界面元素就想实现界面交互，然而别的路径并没有考虑到老婆的关系怎么在程序中绑定，6个很好看的状态图最终也只用上了2个

比如在订单界面开通会员支付完之后界面的跳转和首页点击会员功能开通支付后跳转不一样，这个也是在开发过程中才发现有不同，临时再做更改，人为制造时间的黑洞。

总之，流程图能帮助验证需求，也验证UI元素增减是否合适，也让开发focus到功能的实现当中，提高效率。

UI中的几点建议
1，请避免为界面而界面

比如这个首页，大部分的界面被一个地图所占据 地图上面漂个地址，我是要订餐啊，
我订餐瞅着地图干啥呢，我又不是要自己跑出去买外卖
地图上也没有吃的，只有小摩托，小摩托跟我有啥关系呢，我要的是吃的啊

2，请考虑较为统一的界面转场效果
黄太吉界面转场 多处出现弹框 弹框关闭点 有在右上角 也有在底部
有从中间弹也有从底部弹 还有普通的转场，让用户的回退和下一步的操作产生困扰

可以回顾一下 现在app的弹框出现的普遍比早期少，微信的退出也从屏幕中间弹框转为底部全屏宽的提示界面，小屏幕里弹出小屏幕的感受并不美好

弹框的初衷是用来做提示的

我们还有从弹框里蹦出另外一个全屏幕这种交互

3，如果有改图，请考虑UI整体风格统一
比如首页的几个引导图，(图太大不贴了)

比如下面跟会员相关的三个图 我觉得风格是不统一的

所以要改来改去也是有事出有因，但是我们是能把三次以上的UI改动减为1-2次的，

我认为UI不能靠一两个控件的出彩 就像程序不能靠一两个写的比较好的函数方法出彩一样，都是要顾及到整体架构的

所以我觉得每次的UI控件元素的改动可以贴整张图看看效果

再放到整个系统的UI图里看看统不统一 ，以UI 专业的眼光必然可以发现问题

4，UI中可以多考虑手势和动效

既然要酷炫 为什么手势基本没有用到 一点动效都没有的怎么配得上 闪电连击和英雄砍杀这几个字

好扫兴。

参考资料
一张图帮你看懂 iPhone 6 Plus 屏幕分辨率
UI设计中我们为什么要动效
iPhone 6/6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸？
The iOS Design Guidelines

做什么 ：设计团队的协同

为什么 ：无规矩不成方圆；确保设计团队的同步，方便团队内部工作的交接

什么时候 ：在设计开始之前

谁做 ：设计同学

在团队合作的过程中，同步是最重要的也是基础的知识。第一次和其他小伙伴一起完成工作，总结了几项同步的知识点和方法。

命名的规范包括了画板、图标和组建。

在设计过程中，为了方便技术人员查看文档和设计稿，我们在画板命名时，以需求文档里的模块名称为准。当需求文档的划分不够细致，在需求文档的标题后面+横线+名称，（如图：命名-01)
将命名好的画板上传至蓝湖，然后排序排好，并按照模块分好类别，方便其他的设计小伙伴查看和修改，也方便技术人员查找。

1实心和描线图标保持同名，用-o来区分，比如question-circle（实心） 和question-circle-o（描线）；

2有无-circle/-square区别于边框和非边框，有无-o区别于实心和空心（如图：命名-02）

 

3命名顺序：模块-图标名-形状-描线-方向。

1）模块，例如左侧导航栏模块的图标比较特殊，图标名前可加sidebar，常用模块英文：顶部导航栏navbar，底部导航栏tabbar，自定义模块命名根据实际需要选择性添加

2）图标名，常用的图标命名用习惯的英文单词命名，非常用和自定义的图标命名可用拼音，多参考其他网站的命名方式 图标命名参考网站

3）描线，只在区分同一个功能的图标描线和非描线状态下使用，如果图标风格就是描线，不用每个图标后面都加此后缀

4字体库的命名与运用

图标的托管网站是 iconfont ,在建立自己的项目时，电脑端的输入前缀pc，手机端输入前缀mb，fontfamily以公司名命名（如图：命名-03）

关于iconfont网站的字体库制作，可参考我的第一篇文章 字体库制作 ，里面详细介绍了制作过程和使用方法。

基于sketch软件的命名规范

关于symbol 是什么，有什么用，怎么制作，可以参考 夜雨y 的这篇文章，这里主要介绍命名规范

组件的命名是要用英文输入法的 / 作为分割，如果一级为最小级，一般命名是三级/二级/一级。这里可以参考微信小程序的UI组件命名

小单位的组件，比如按钮的命名顺序：模块-形状-颜色？-状态？。（如图：命名-04）
1）图层样式的命名也是用英文输入法的 / 用来分割父子级，命名规范：模块-颜色？（如图：命名-05）list/line则是父子级

2）文本的样式命名规范：字号-备注？（如图：命名-06）

1、先把做好组件库保存

2打开sketch-preferences-libraries-add library 添加保存的组件库即可 （如图：共享-01）

3修改组件直接双击，点击弹窗最右边按钮>>修改完组件库保存>>在设计稿点击紫色按钮同步组件库即可（如图：共享-02，共享-03）
当然想要团队合作更方便，可以借助 蓝湖 这类的软件，nans也是团队合作，文件同步的有效工具。

成都优就业作为一个专业的培训机构，在课程设计和学员服务上，都坚持从零基础学员的实际情况出发进行培训。
首先从UI行业基础知识开始：PS软件、AI软件，合成海报，不同风格海报制作，印刷常识，综合修图与调色。
然后是品牌设计：造型基础，插画人物及场景设计，现代设计构成，版式设计，字体创意，品牌，CIS，品牌标志，吉祥物设计，商业创意，海报招贴，展架，DM单，折页与画册设计，ID软件。
再进一步学习电商设计：包括电商行业，产品拍摄，后期精修，主图，详情页，三维场景，商业合成，文案策划，专题页，营销策划，推广图。
综合起来就是UI交互设计的学习。包括Sketch，图标设计使用场景与设计规范，运营banner组件化与活动胶囊设计，瓷片区与结构流设计，移动端界面强化，启动页设计，IP置入，引导页设计，ASO市场推广页设计，弹窗设计，PC端设计，项目流程，用户体验，全局交互，设计趋势，风格定位，Material设计语言，公众号，小程序，切图标注，AE，情感动效。
最后通过名企项目实战进阶通过实际操作，学习品牌思维，数据思维，评审思维，设计思维，迭代思维，用户思维，交互思维，项目思维，B端项目与中台产品设计，数据可视化与大屏终端设计，FUI与VUI、XUI设计。

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