UI方面总结

一、UI是什么：

User Interface（用户界面），简称ui，对软件的人机互交、操作逻辑、界面美观的整体设计。

UI设计分三个分支：

1、研究界面—-图形设计师Graphic UI designer，简称GUI,国内目前大部分UI工作者都是从事这个行业。包括（网页设计，软件界面，移动端界面设计），每天工作做着各种界面设计。
2、交互设计师，做整个项目的交互流程。
3、用户体验研究师，主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面，从而对这个项目的总体性体验做决策的。
小技巧：在导出ICON的时候，假如你的ICON实际尺寸是32×32，那么你可以导出50x50PNG透明背景的ICON，重点是加了透明区域。这样就更方便点击了。

二、IOS图标的大小，图标圆角的大小：

App icon(iPhone4) ──────────────────────114px (20px)

App icon(iPad) ────────────────────────72px (12px) 

App icon(iPhone 3G/3GS) ─────────────────57px(10px) 

Spotlight/Settings icon icon(iPhone4) ──────────58px (10px)

Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ──29px (9px)

三、字体的大小规范：

在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。字体与背景的层次要分明,确保字体样式与色调气氛相匹配。选用字体大小的时候一定要选择偶数的字号。

移动端（72像素/英寸）

IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。

导航主标题字号：40-42px（偏小的40px字号，显得精致些）

大的正文字号32px，

副文是26px，

小字20px。

新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性的加粗。

列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,小字20px。

划分类别的提示文案26px的字号

页面的大按钮36px的字号

Android:英文字体：Roboto          中文字体：Noto、Droid sans/思源黑体

网页端

网页中文字字号一般都是宋体12px或14px(无状态)，大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px，一般使用双数字号，单数的字体在显示的时候会有毛边。

1. 平平稳稳：微软雅黑/方正中黑

微软雅黑系列：大标题用加粗字体，正文用常规字体。

方正正中黑系列：用在标题文字中

2. 与时俱进：方正兰亭系列

方正兰亭系列：个人最推荐的就是这个系类的字体，整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合，不仅能保证字体的统一感，还能很好的区分出文本的层次。

3. 刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑

适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式，让文字显得更为活力。

在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。

4.常用字体颜色

界面中的文字分为三个层级，主文、副文、提示文案等。

白色的背景下，字体的颜色层次其实就是黑、深灰、灰色。

字体常用的色值是#333333；#666666；#999999

界面背景色#eeeeee

分割线则采用#e5e5e5或#cccccc的颜色值，一个深一些，一个浅一些。

毛笔字网站

http://www.51poca.com/                   http://www.epinv.com/online/

http;//www.akuziti.com/mb/               http;//www.qiuziti.com/（找字体）

四、按钮做成多大的，才好点击：

食指点击目标尺寸是44 x 44像素，拇指是72 x72像素。所以在画界面的时候，要注意这2个尺寸。

五、各个栏目的高度、间距大小(http://www.jianshu.com/p/a2a4c18c1900)

1.android边框和边距

（1）设计事采用间隔为8dp的基准网格，所有的组件都与8dp网格对齐；

  文字则是与间隔为4dp的网格对齐。

（2）工具条中的图标与间隔为4dp的基准网格对齐。

  状态栏：高度24dp

  导航栏：高度56dp，标题文字居左

  列表页：带有多行信息的单个列表最小高度72dp不可互交的当行信息单个列表最小高度48dp

（3）垂直边框和水平外边距

  左右各有16dp的垂直边框。带有图标或者头像的内容有72dp的左边距。

（4）基本界面元素之间的间距为8dp。

（5）页面最小触摸目标最小尺寸为48x48dp，当为图标（24dp）或者头像（40dp）时，触摸触发区域不与触摸目标重叠。

2.IOS边框与边距

（1）状态栏：高度40px，高度始终不变，位置最顶部，颜色：#fff、#000或者全透明。

（2）导航栏：高度88px，高度在屏幕旋转时可自动调整，位置顶部，半透明。

栏内字体：字号34pt，加粗效果，标题居中

栏内图标：44x44px

（3）标签栏：高度98px，位置底部，栏内图标：44x44px

（4）工具栏：高度88px，高度在屏幕旋转时可自动调整，iPhone上在底部出现，iPad上在顶部出现

栏内图标：50x50px（最大96x64px）

（5）内容视图：标题文字加粗效果，正文一般使用34px字号，每一档文字大小行间距差异为2pt

（6）可交互性文字采用颜色表示高亮，不可交互性文字除非是十分重要的强调式文字否则不予颜色

（7）页面可交互元素最小尺寸为44x44px

（8）最小文字不应小于22px