前言
做好界面设计的基石是了解界面设计的工作流程并掌握基础设计方法。
UI设计师不仅仅是做视觉设计，还要了解软件的人机交互，操作逻辑和界面视觉的整体设计。
UI设计离不开人机交互，离不开用户体验。
第一章 界面类型
1.1 闪屏页（启动页）
闪屏页的目标是：定位明确、吸引人。
闪屏页分为品牌宣传型、节假关怀型和活动推广型三种。
品牌宣传型产品页包括：产品名称+产品形象+产品广告语。
品牌宣传型产品页的要求是设计精简，体现品牌特点。
节假关怀型闪屏页可以加强与客户的情感交流，加深用户对品牌的印象。
活动推广型闪品页多以插画方式呈现，体现活动的主题和时间节点，营造热闹的活动氛围。
1.2 引导页
一个好的引导页能够迅速抓住使用者的眼球，让他们快速了解App的价值和功能。
引导页分为功能介绍型（信息展示一针见血，分为带按钮型和不带按钮型）、情感代入型（要求设计形象化、生动化和立体化，通过文案和配图，表达用户需求）和搞笑型（需要设计师学会扮角色和讲故事）。
1.3 浮层引导页
一般出现在操作演示中，使用箭头和圆圈来进行设计，用高亮颜色突出信息，以蒙版方式加强和突出功能。
1.4 空白页
空白页分为首次进入型（引导用户操作）和错误提示型（指引用户解决问题）的设计要简洁明了。
1.5 首页
首页最常见的表现形式有：1）列表型；2）卡片型；3）图标型；4）综合型（要特别注意分割线和背景颜色的区分不能太明显，要保证页面的整体性）。
1.6 个人中心页
个人中心页由头像、个人信息和内容模块构成，通常头像居中对齐方式设计，以展示当前页面的信息都与我有关，头像多为圆形，那样做的优点是看起来协调，画面饱满。
1.7 列表页
列表页有：1）单行列表（左图+右文字，图引导用户点击，文字解释商品）；2）双行列表（卡片方式展示，上图下文字，可让页面饱满）；3）时间轴（左时间轴，右内容）；4）图库（正方形方式呈现）。
1.8 播放页面
1.9 详情页
一般使用大字号来突出标题和内容
1.10 可输入页面
可输入页面设计要易用简便。
第二章 界面构图
2.1 九宫格构图
该构图主要用在以分类为主的一级页面，起到功能分类的作用。优点是：操作便捷，功能凸显，给用户一目了然的感觉。
2.2 圆心放射构图
2.3 三角形构图
2.4 S型构图
2.5 F型构图
第三章 版面布局
3.1 界面版率
有留白的页面给人高级典雅的感受，少留白的页面会更丰富和有活力。
3.2 抠图法
使用留白的极简主义是现在设计的大趋势之一。
3.3 破界法
破界法可以增加层次感和冲击力，以凸显主题。一定要记得，设定好的内容范围是为了页面显得整体化。
3.4 局部提取
3.5 对齐原则
在界面设计中，齐行、居左和剧中是常见的对齐方式。
3.6 间距使用
在间距设定中，一般以10px为基本单位来设计，这样更便于统计和规范，也更易操作。
通过间距及分割线来分组，可以让信息显得有秩序感，可以让用户在视觉上得到合理的“休息”。
3.7 视觉层次
视觉层次是从视觉上认知的一种空间关系，也就是我们经常说的前后关系。
在设计时从视觉上进行区分，可以让用户找到自己感兴趣的点和内容，这样有助于留住用户。
常用的手段时大小对比，冷暖对比，视线规则和中心点引导等方式。
第四章 元素之道
4.1 点线面
点的作用是丰富页面，提升氛围，线的作用是引导阅读。面的作用是突出重点，区分层次关系。
4.2 极简至上
4.3 品牌灵魂
品牌能否被用户记住非常重要，找到产品的特点是展示品牌灵魂的关键。做一个深入人心的产品，要先从Logo开始找元素，再打造其独特性。把从Logo提炼出来的元素进行延展，能使整个产品的品牌传达性更为一致，这个是让产品发出光芒最有效的办法。
4.4 形象灵魂化
产品的主题形象就是产品的用户角色，好的形象能反映出产品的用户行为，让用户身临其境，找到共同点和爱好。将用户的性格、行为和场景化身在产品角色中，这样的产品才能化腐朽为神奇，找到自己的灵魂。
4.5 运动赋予生命
动画元素可以让这个整个设计拥有了生命感。好的设计能让用户感知到它的温度。
4.6 菜单设定
菜单图标设计分为基础型、品牌类和互动类三类。
第五章 “色诱”用户
5.1 感知色彩
颜色的感知属于心理感受，感受每个颜色的不同有助于判断一个产品的颜色方向。
对于一位设计师来说，感知色彩是必备的技能之一。
红色象征激情和理想。它的饱和度非常高，所以，提示性比较强。
橙色象征着温暖，有促进食欲的特性。
黄色象征着活力，很醒目，易带来视觉疲劳。
绿色象征着自然，给人安全舒服的感觉。
蓝色象征着智力和理性，是最安静的颜色。
粉色象征可爱、童真和甜蜜。
黑色象征着个性，是一种富有时尚品味的颜色。
5.2 色不过三
不超过三种颜色的搭配，是指不超过3种色相的搭配。
单一的色相，丰富的明度和饱和度可以让界面看起来更有层次感，处理起来也更容易同意和把控。
5.3 主色、辅助色及点睛笔
按照色彩的功能划分，色彩的主次可以分为主色、辅助色和点睛色。
在网页设计和界面设计中，通常将主色运用在导航和关键信息中；Banner和海报为了在页面中更为醒目，主色通常用在背景色中。
辅助色的作用是平衡画面、让品牌主色更有层次感和突出性。
点睛（点缀）色占用的面积较小，视觉对比效果比较醒目。它可被用来活跃气氛。
5.4 如何配色
定义界面主色的时候要选择饱和度高的颜色，那样设计出来的界面会很稳定。
颜色搭配可以考虑互补色搭配、冷暖色搭配。
第六章 设计原则及规范
6.1 IOS的五大设计规范
设计的原则是通过极致的设计（给用户带来惊喜）去追求用户的易用性。
苹果的设计在视觉上注意：主次分明、去粗取精、醒目易懂。
IOS的设计原则：凸显内容（可以提高信息的聚合度）；统一化（指的是视觉统一和交互统一）；适应化原则（指的是场景适应和屏幕适应）；层级性原则（从阅读的实现来讲，先垂直，后水平，从左向右，从上到下）；易操作性（按钮和按钮之间间距要够）原则。
在404、错误页面以及空白页面要引导客户反馈，并引领客户找到目标。
6.2 IOS界面尺寸及控件设计规范
苹果手机以iphone6（750px*1134px）为准进行设计。
ipad以2048*1536px为准。
6.3 安卓设计原则及规范
安卓原生的设计语言叫质感设计（Material Design），核心理念是：还原最真实的体验，保留最原始的形态、空间和对渡变化，它最重视跨平台的适配性。
安卓系统界面大小一般为1080px*1920px。
6.4 常用字体规范
字体推荐方正兰亭系列，它比较细腻，有科技时尚感。
在设计时，最好选择同一系列的字体，以保持字体风格的一致性。
iphone的字体叫“苹方”，安卓的叫Note和Roboto系列。
6.5 建立一套设计规范
制定设计规范不仅可以提高效率，更重要的是能够提高团队的协作能力。
设计规范包括：1）色彩控件规范；2）按钮控件规范；3）分割线规范；4）头像规范；5）提示框规范；
6）文字规范；7）间距规范；8）图标规范。
第七章 切图与标注
7.1 高效切图
一般设计师在出图时的制作方式是出一套“IOS的效果图+标注+切图”。
通常制作好的切图和标注会输出3个文件包，分别是安卓切图包、苹果切图包和一个标注图的mark文件包。
7.2 界面标注
常见的标注软件是pxCook(像素大厨)和MarkMan(马克鳗)。