UI设计整理

】UI设计

全称 User Interface，中文叫用户界面设计。

】UI设计类型

按[ 用户和界面 ]来可分成四种UI设计。分别是移动端UI设计，PC端UI设计，游戏UI设计，以及其它UI设计。

移动端UID

---就是手机界面设计，即手机上的所有界面都是移动端UI设计

PC端UID

---是以电脑软件界面设计为主，就是电脑版的操作界面设计。如电脑端的QQ、微信、PS等软件。

游戏UID

---就是网游和手游上的界面设计。

目前来说中国的游戏市场主要以腾讯，网易两家公司垄断；游戏公司对游戏UI设计师的要求特别高，如学历，经验，是否科班出身都有严格的限制，但是游戏UI设计师是目前UI设计师里面工资最高的。

其它UID

---VR界面、AR界面、ATM(银行取款机)界面、自助取票机，智能手表的界面等一些智能设备的界面，比如智能电视、车载系统等。

】UI设计软件

win版主要分为5款

Mac版主要是

【】Axure__原型设计，注册码可以网上搜，来正常使用

【】sketch___界面设计，以画板交互+预览，注册码可以网上搜，来正常使用

【】figma___界面设计，以frame交互+预览，有网页版+软件版

-----figma主要是英文界面，网页版好处可直接翻译；

-----软件版，目前最大问题打开非常慢，用着还是很难受-1；但交互预览用着不错+1；

【】principle__交互设计，即界面切换跳转设计；

-----收费，这个软件破解很难找，所以谨慎使用；

-----交互操作易上手

_________________________________________

】ui设计界面设计有哪些

引导类- 即【用户引导】界面设计

闪屏引导页、新手引导页、功能性引导、操作引导、对话式引导

弹框引导、局部引导、全局引导、读取引导、文字提示、toast引导

=】闪屏引导页

主要为在启动页时，向用户展示产品新功能的页面

=】新手引导页

主要以 页面遮罩提示方式展示；

---使用场景：：

------新用户，首次使用打开应用时的引导

------新增功能时，提示介绍引导

=】功能性引导

主要是触及某个点时，出现的引导类型；针对隐蔽性的功能层面，来做的引导设计

---使用场景：：

如：支付宝聊天窗口，输入数字时，显示给聊天对象转账的引导；

截图后，引导分享至第三方平台的引导页面；

微信，自动捕获针对手机应用中的截图行为，在编辑框右下角加好按钮处，自动显示刚刚的截图信息，来方便快速发送

=】操作引导

这类目的，需要用户完成某种指定的操作，且不强制用户完成；一般采用悬浮按钮（FAB）控件、特殊设计引导

---使用场景：：

如完善个人资料、身份认证、充值会员、点击收藏/关注、签到&

=】对话式引导

比较常见，以悬浮方式显示，几秒后自动消失

=】弹框引导

这类引导会打断用户使用产品

一般为组合方式：黑色遮罩(60%-80% #000000)+文字/插图+ 触发button +关闭button。

使用场景：：

退出登录提示，错误提示，活动提示

=】局部引导

一般在页面 顶部出现；通常用于 警示作用，引起用户的重视；

通常的组合方式：文字+ 红色/黄色等警示类色块 +关闭button

使用场景：：

消息提醒未打开，网络异常

=】全局引导

页面方式，来显示引导提示；

使用场景：：一般为空页面情况时提示，即无信息显示；

无关注，购物车为空，断网，

=】读取引导

常见为未读消息；针对未读信息数量提示。

=】文字提示

常见为促销活动时广告目的的提示引导。

=】toast引导

常见为下拉刷新后的 数据提示或引导点击查看；通常为操作后的反馈提示。

toast出现的时间都很短

气泡/浮层

一种量级轻，目的性强的引导方式

一般是半透明浮层，结合文案的设计模式。

_________________________________________

】UI设计尺寸

Android设计标准尺寸

_________________________________________

IOS设计标准尺寸

_________________________________________

web设计标准尺寸

参：尺寸规范

Mac13寸：屏幕内容展区为 1366 x 760

注：屏幕内容展区是除去浏览器自带的顶部栏(108px)，主要显示网页内容的区域。

大屏手机尺寸：720 x 1600px

底部导航尺寸与位置：

设计尺寸720x1552

h112px

位置，1436，以4个像素占位

位置，1440，以8个像素占位

h96px

位置，1452，以4个像素占位

_________________________________________

】字体规范

=== Android常规字体

中文字体：：Source Han Sans / Noto

英文字体：：Roboto

=== IOS常规字体

中文字体：：PingFang SC （苹方）

英文字体：：SF UI Text 、SF UI Display

其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字

===字重类型

uili极细，thin纤细，Light细体，Regular正常，Medium中黑，Semi-Bold中粗

===标题字号：

H1：一级标题 36px

H2：二级标题 32px

常规：正文 28px

字号磅像素对照：http://t.zoukankan.com/9527y-p-3782366.html

_________________________________________

】UI设计规范

=】文字颜色：：常规

=】分隔线颜色：：常规

=】字号：：行高

参考3C原理，英文行高是字号的1.2倍，中文行高是1.5-2倍；

英文行高一般是1.2倍，如英文的字号20，行高是24；国外设计师较多采用黄金比例的行高，如1.414倍、1.618倍、1.717倍数等。

中文行高一般是1.5倍，即字号+4原则，如字号20，行高是24；字号28，行高32

行高大小设定，要考虑界面效果、内容、用户群体来定义紧凑或疏密；根据项目需求来设定行高。

服务的不同用户群体，如年龄段、行业、服务类型，字体行高产生的界面视觉效果需求是不同的。

=】颜色常规

颜色序号

规律:越大颜色浅，如000黑色,999,灰色,FFF白色

numb：0-9

letter：A-F

=】图标icon

图标分为 应用图标、系统图标、快捷图标

：：应用图标 product icon，即是APP应用图标；也就是APP应用的logo，具有标识性作用。

：：系统图标 system icon，即是APP系统内的界面控件性、标识性的图标；应用界面内的图标。

：：快捷图标 shortcut icon，个解为快速操作类的控件，如APP中的发布按钮。

】iconsize尺寸常规

图标网格尺寸常规：

24网格

：：应用图标

：：系统图标

：：快捷图标

】iOS和Android需要几套切图？

iOS的屏幕精度分为：retina和 非retina，2种；320px屏幕和640px屏幕；

Android的屏幕精度分为：mdpi(360px屏幕)，hdpi(480px屏幕)，xhdpi(720px屏幕)，3种。

一套设计切5个版本，很耗时费力；一般只需要切 任一版本的最大尺寸：

：：Android的 xhdpi(720px屏幕)；

：：iOS的 retina@2x

然后由开发 使用自动缩放比例方式来完成其余4个尺寸；或者使用 神器 一键生成5套尺寸的切图。

】iOS和Android的切图命名格式？

】文件整理

注意1：命名

注意1：切图类型 归纳

：：：如底部导航类

注意1：打包—— 每页一个文件包

】切图命名规范

参：命名规范

：：系统控件库，指 列表栏 类型的组件。如搜索栏、导航栏、弹窗、工具栏、开关。

搜索栏 Search bar 、 导航栏 Navigation bar、 弹窗 Popup 、 工具栏 Tool bar

开关 Switch

：：界面命名，指 具有页面内容的控件名。如首页、发现、联系人、日历、相机、视频、地图、个人中心。

首页 Home、 发现 Find、 联系人 Contacts、 日历 Calendar、 照片 Photo、

相机 Camera、 视频 Video、 地图 Maps、 个人中心 Personal center

：：功能命名，指 具有处理操作的功能控件。如确定、取消、返回、下载、等待、发送、刷新等。

确定 Ok、 取消 Cancel、 返回 Back、 下载 Download、 等待 Waiting、

发送 Send、 刷新 Refresh、 更多 More、 选择 Select、 搜索 Search、

暂停 Pause、 继续 Continue、 查看 View

：：资源类型，指 页面中内容资源性质的类型。如滚动条、下拉框、编辑框、列表、图标、背景。

滚动条 Scroll、 下拉框 Combo、 编辑框 Edit、 列表 List、 图标 Icon、

背景 Backgroud、 进度条 Progress、 动画 Animation、 图片 Image、 单选框 Radio

：：状态类型，指 页面中偏操作时 提示状态，一般web常用。如普通、默认、按下、悬停、点击、禁用。

普通 Normal、 默认 Default、 按下 Press、 悬停 Hover、 点击 Highlight、

禁用 Disabled、 完成 Complete、 错误 Error、 空白 Blank、 选中 Selected

：：位置排序命名，指 页面中个组件的位置。如顶部、底部、最后、第一、第二、中间。

顶部 Top、 底部 Bottom、 最后 Last、 第一 First、 第二 Second、 中间Middle

待耕