【UI-UE设计】笔记分享
以前上课的一些关于UI的笔记整理分享给大家，一来是巩固，二来发现一些基础知识可能还有分享价值（如有错误的地方望指出和批评）
前言：
分享一些关于UI-UE设计的个人学习资料，本文内容纯属基础知识。有兴趣可以仔细阅读望对您有帮助。如有不足或问题也可指出批评。
其内容包括：用户体验分析、app思路过程和思路方法、app页面设计原则（四原则）、app页面设计层次（五个层次）、app页面布局方法（六种常见方法）、app页面板式布局（七种常见形式）、app页面导航设计形式（七种常见设计形式）、app六步配色法、app logo设计思路、UI设计工程（适配）。
第一部
用户体验
定义：UI/UE （用户体验/交互设计），用户在使用产品、系统、服务的过程建立起来的主观感受。
核心：以用户为中心。
影响元素：主观感受、特定人群。
1、用户画像
思路方法：
人口属性（年龄、性别、身高、体重...）
社会属性（职业、职位、学历、收入...）
产品属性（偏好、消费能力、生活状态...）
(说明：此案例是举例说明用户体验从无到有的产生思路过程，并未针对此案例制作一套APP输出产品)。
b、用户需求
2、用户分析：分析用户需求
①、分析需求过程中，如果发现需求之间有矛盾，这就是一个很好的需求点（用户需求点是关键）。
②、所有的产品都是以“解决用户问题的”。
③、需求描述应该分析出用户当前需求不能很好地满足的问题。
a、找到用户需求的一个切入点
3、确定一个产品方向（选择一个切入点）
4、用户痛点分析：分析所选切入点的现有流程，并找到一个用户痛点
5、分析用户问题和解决办法
6、手绘故事版
7、竞品分析
a、找到三个或三个以上竞品进行对比分析（推荐工具：思维导图）：
截图对比、功能对比、页面对比、图标对比、颜色对比、逻辑对比、交互对比。
b、制作信息架构图（推荐工具：mindanager）
c、信息架构差异标注(推荐工具：keynote)
①、谁少标谁。
②、对比信息架构的信息层级，对比产品的优劣，提取相同点。
8、功能流程分析思路
9、规范产品主功能流程
10、绘制原型图
定义：原型是产品概念阶段的形态，并不一定是产品的最终形态，是一种理想状态。
作用：
a、产品概念阶段的形态。
b、可以低成本反复测试，验证产品。
c、帮助团队顺畅沟通。
形态:a、低保真原型图
b、高保真原型图
11、输出产品（产品规范可进产品官方网站查询）
①、iOS规范：6plus/6s plus （对应UI的倍数1倍，2倍，3倍）。
a、规定:iPhone 7plus[414px×736px]
高度（不可更改）:状态栏:20px
标题栏:44px
标签栏:49px，文字高度:10px
导航栏:≮40px
b、点击按钮:40px–44px，按钮文字:按钮高度的1/3——1/2
（要导出准确像素需做适配）
②、Android规范（对应倍数1·5倍，2倍，3倍）
a、设计尺寸:（1倍）[360×640px]
b、状态栏:24px
c、操作区域/标题栏:48px（最小）
d、可点击icon：最小24px-32px-48px
展示icon:最小12px-18px
e、标签栏:48px
f、图像尺寸:8的倍数
g、元素间最小间距:8px
按钮高:40px
第二部
App页面设计原则
1、 亲密:元素靠近一些，表现它是一个独立的单元。
①、将彼此相关的元素靠近，聚合在一起，能非常直接的表现元素之间存在的关联。
②、形成一个视觉单元，助于减少混乱，形成清晰的结构。
③、功能页面中，功能较多，根据元素之间的关联分成多个聚合的组，让界面更有条理。
2、对齐
①、将各个元素的外边界对齐，保证页面统一且更有调理。
②、不同的对齐标准可以清楚的区分内容之间的层级。
③、在整体的对齐基础上，偶尔打破对齐规则，可以增强页面的层级感或增加页面的视觉层级关系。
3、对比（例如:食色，豆瓣）
①、让两个元素在视觉上制造出截然不停的反差，可以吸引用户的眼球。
②、不同的元素在视觉上做明显的对比处理，可以获得非常清晰的层级关系。
③、强烈的对比关系，可以凸显某一个元素的优先级。
4、重复（例如:想去，36Kr）–以练代学
①、在整个产品的设计中重复使用相同的元素，可以增强界面风格的一致性和视觉的识别性。
②、重复的元素可以是字体、颜色、符号、空间关系、线条等任何元素。
第三部
App页面设计流程方法
第四部
App页面布局方法
1、归类页面元素：找相同
a、同类元素放在一起。
b、根据用户喜欢的顺序合并。
c、展现的归类元素有代表性。
2、把一些页面元素藏起来
躲猫猫：非核心、专家用户的、当前页面中次要的元素、不鼓励使用的。
3、合并相同目的的行为：搜索与标签合在一起。
4、分格展现元素：（格子铺、九宫格）用户需求分散、导航页。
5、切换展现更多元素（画中画）：元素同时展现切换元素不宜过多。
6、局部化页面改造（放大镜）：具有一体性的页面要有清晰的指引。
第五部
App页面板式布局形式
板式布局要以【目的导向】为原则
1、竖向分栏布局（竖向板式布局目前在APP板式设计中仍是主流）：从上到下层级：适用于新闻、咨询、音乐等
[竖向板式布局目前在APP板式设计中仍是主流]。
2、上下分格布局：适用于阅读、社交、视频等
3、中轴重复图版布局：适用于阅读、教程攻略、收藏各类
4、列表布局：适用于功能设置、信息浏览、内容分类等等
5、满版布局：适用于工具、展示、文艺等等
6、左右分割布局：适用于图片浏览和社交等等
7、宫格布局：适用于视频、阅读、工具等等
第六部
App导航的设计形式
定义：a、导航是“门”。
b、导航影响“结构”。
作用：1、引导访问，突出核心。
2、集合内容/功能，操作方便。
3、避免无关信息干扰。
4、优化布局，提高利用率。
形式：
1、宫格式「例：支付宝」又称界面导航
定义：使用矩形网格分割界面，形成每个独立功能的入口采用的导航形式。
类型：等分网格[九宫格、六宫格、四宫格]和不等分网格。
优点：app功能一目了然，扩展
适用：工具类应用分类信息导航应用，不适合需要频繁在几个信息入口间切换的情况。
缺点：a、看不到内容，用户压力大。
b、不利于突出核心。
c、不适用多功能切换产品。
2、列表式
定义：每个菜单都按照纵向逐条排列的导航形式。
类型：单行文字，图标+单行文字，图标+多行文字，卡片式列表、分组列表。
优点：容易扩展和分组，条理清晰，二级列表可以做展开和隐藏，方便用户查找。
适用：基本上每个app都包含，常用于设置消息或者分类等。
缺点：a、和宫格导航一样看不到内容。
b、样式缺乏趣味性。
c、不利于突出核心功能。
3、标签式 又称选项卡式「AB导航[标签页：最小不少于2，最大不多于5]」
定义：使用固定在屏幕底部或者顶部的图标文字切换不同信息入口的导航形式。
类型：iOS底部标签的图标+文字以及Android顶部标签或图标。
优点：简单可见，易操作，能快速在多个信息之间进行切换。
适用：大部分应用，iOS主推模式。
缺点：a、占用屏幕空间。
b、导航数量受限。
c、不能实现非顶级视图跳转。
4、抽屉式导航 又称侧边抽屉式
定义：通过点击或滑动展开折叠侧边隐藏菜单的导航。
类型：一般通过左上角的图标或者滑动手势触发。
优点：追求核心内容的突出，弱化导航界面，节省屏空间，实现非顶级视图的导航。
适用：功能类型单一信息流产品，或次要功能导航。
缺点：a、不易发现。
b、不易操作。
c、“左滑”冲突。
5、阵列式 又称瀑布式
定义：通过等分或不等分网格在界面中展示图片或图片+文字的导航形式。
类型：瀑布流或非瀑布流布局。
优点：内容可视化增强，直观展现，方便浏览，内容阵列。
适用：文章、视频、菜谱、美团、相册、旅游、设计、电影等。
缺点：a、不适合做一级导航。
b、容易显得杂乱。
c、图文阵列交互效果少。
6、菜单式 又称文字+下拉箭头
定义：通过点击呼出折叠的导航菜单或直接切换菜单选项的导航形式。
类型：标题提出文字+下拉箭头的提示，用户点击呼出导航菜单。
优点：以内容为主且界面连显性较好，展示和收起菜单对当前界面没有影响。
适用：有诸多类别的信息流产品，菜单选项较少[例：筛选、切换]。
缺点：a、趣味性低。
b、导航项不易过多。
c、不易突出重点，不易识别和操作。
7、点聚式导航「例：蚂蜂旅游」
定义：将用户最频繁使用的多个核心功能汇聚在主界面中一个按钮上，通过点击按钮呼出功能菜单的导航。
类型：通过一个按钮汇聚诸多功能的入口，点击后展开各个功能进行操作。
优点：空间资源占用少，操作方便快捷，增加app趣味性，使用灵活。
适用：a、不易发现，需要引导。
b、导航项不易过多。
c、不适用频繁操作的项目切换。
8、其他式导航/转盘式 又称走马灯式
定义：图片或者整块内容并列展示，用户通过左右手势滑动来切换当前内容。
类型：图片/整块内容+页码指示器。
优点：内容聚合程度高，信息少，用户容易聚焦到主题，背景有场景布入效果。
适用：卡片类展示应用[例：名片/文章。
9、仪表式 又称圆盘或指针
定义：采用图形布局具有指针或计数类的仪表盘的导航。
类型：仪表盘或者其他类型。
优点：使数据更加生动直观易读，增加app趣味性。
适用：工具类、数据分析类、数据可视化应用。
第七部
app六步配色法
1、联想：功能特征、行业特色、产品定位、用户特征、背景、文化、地域特征。
2、查找：摄影图片、设计、作品、工艺品。
3、提取：用软件分析提取重要颜色。
4、调色：a、不同明度的色彩形成空间关系。
b、强烈色彩对比强调重要内容——冷暖对比。
c、用明度饱和度调和多个色彩。
5、验证：a、色彩使用禁忌。
①、在背景色卡上使用相同颜色。
②、在深色背景上使深度相同的颜色。
③、在有色彩的背景上使用纯灰色。
④、文字和背景之间没有足够的明度变化。
⑤、在界面中使用太亮的颜色。
⑥、背景和内容上对比关系，同时具有较高饱和度。
6、定规范：整理设计规范，包括字体、色彩、图形、图标、间距、标注等最后输出设计图。
第八部
APP logo 设计思路
「尺寸：进官方网站查询」
1、优秀的APP logo应具备“三美四得”：
视觉美、情感美、意义美
看得懂、记得住、找得到、用得开
2、logo设计步骤：
创意：a、确定一个方向
b、充分展开想象
c、把想法画出来
设计：a、精确绘制形状
b、给logo配色
c、对比验证设计
呈现：a、宣传推广理论
b、APP内呈现
c、应用市场呈现
确定方向：目标用户、主要功能、slogan、产品认知度
充分展开想象：产品名称、核心理念、slogan、情感心理、用户群体、实物联系、产品属性、应用场景
把想法画出来：手绘、自己发挥、禁止评论
常见的logo形式：具象图形、抽象图形、文字/文字变形、文字+图片
对比验证设计：没有最好，只有合适
宣传推广呈现：网页广告、朋友圈/公众号、平面广告、二维码
APP呈现：启动页、引导页、用户提示、空白页、占位符、主功能图片
应用市场呈现：应用市场（APP下载场景）、截图：APP logo、视频、APP截图、watch
第九部
UI设计工程（适配）
「X1.5倍」
适配内容：
1、文字
分辨率相同，字体大小不变。
分辨率不同，字体大小根据分辨率的倍数进行换算。
如：@2x设计稿中24px的文字，对用@3x设计稿中的文字36px「24px X1.5=36px」。
2、图标/控件
分辨率相同，尺寸相同。
分辨率不同，尺寸根据ppi倍数进行比例换算。
如：@2x设计稿中40px X 40px的目标，对应@3x设计稿中的图标应该是60px X 60px。
3、图片适配
a、通栏图片：根据屏幕最大宽度比例缩放图片。
如：APP中常见的banner图。
b、非通栏图片：根据ppi倍数进行等比例缩放。
如：APP中常见的图文列表中的图片。
4、布局适配
a、当PPi相同，垂直方向尺寸不变，水平方向留白根据内容对齐或自动留白，如果水平方向有固定尺寸的间距不变。
b、当ppi不同时，垂直方向尺寸根据ppi倍数进行换算，水平方向留白根据内容对齐的方式留白，如果水平方向有固定尺寸的间距也按ppi倍数进行换算。
iOS |
|||
机型 |
iPhone6/7plus 5.5英寸 |
iPhone6/7 4.7英寸 |
iPhone5/5 4英寸 |
设计分辨率 |
1242x2208px |
750x1334px |
640x1136px |
以上是全部分享内容，望指教和批评。也欢迎点赞。😊
