ui知识点以及制作步骤（UI新手必须知道的步骤）
ui知识点以及制作步骤（UI新手必须知道的步骤）②挖掘用户的真实期望和目的①对用户体验有正确的评估③产品研发（视觉设计/后台搭建/前端研发）④测试上线（测试/修改/上线/迭代）3.用户体验设计
1.Teambition（团队协作软件）
2.移动端产品设计流程
①产品设计（市场调研/用户调研/需求分析）
②交互设计（产品原型/交互逻辑）
③产品研发（视觉设计/后台搭建/前端研发）
④测试上线（测试/修改/上线/迭代）
3.用户体验设计
①对用户体验有正确的评估
②挖掘用户的真实期望和目的
③在还能够以低成本加以修改的时候，对设计进行修正
④保证功能核心同ui之间的协调工作
4.以用户为中心
角色---目标---任务场景
用户画像：
①来自用户研究的提炼
②是该类产品的典型用户的代表
③是产品设计的目标对象
④让用户需求变得更真实
5.了解产品用户
用户研究、市场调研、用户访谈
用户研究方法：
①问卷调查：避免过于专业问题；避免笼统，抽象；避免主观引导；考虑是否容易回答。
25.原型图包涵元素
①界面（图标、按钮、内容、版式）
②交互（逻辑、反馈、提示、热区、手势、动效）
③注释（数量、尺寸、点击范围）
26.纸模到原型图步骤
①导航设计-用户操作路径
②功能排列-布局功能、预留内容区
③内容展示-移动端版式和内容层级划分
27.功能排列
①考虑眼部热区和手部热区（通常情况下页面上半部分为阅读区，下半部分为操作区，先看后操作）
②权衡功能的重要程度（从多角度考虑。重要的阅读顺序靠前；视觉放大；做差异化设计；放在好操作的地方）
③用户使用的顺序和频次
④反相操作弱化处理
28.导航设计（导航就像是房间里的门，门会影响房屋结构，导航会影响整个产品的结构）
作用：①引导访问，突出核心 ②聚合内容/功能，操作方便 ③避免无关信息干扰 ④优化布局，提高利用率
29.导航分类：（标签导航、抽屉导航、tab导航、轮播导航、列表导航、宫格导航、组合导航）
①标签导航（舵式导航、FAB导航、tab导航）
优点：直观，易操作，能快速在多个模块入口之间进行切换，适用于大部分应用，IOS主推模式。
缺点：占用屏幕空间，数量受限。
②抽屉导航（左侧边栏、右侧边栏、顶部下拉）
优点：突出内容，弱化操作，节省空间，适用于辅助功能的信息流产品，或次要功能导航。
缺点：不易发现，不易操作
30.低保真原型图特点：
①交互逻辑清楚 ②界面功能明确 ③版式布局合理 ④内容划分层级
31.内容的版式布局：内容的版式布局以{目的导向}为原则
高效浏览（竖向分栏、竖向列表、宫格）
内容展示（竖向分栏、上下分割、中轴重复图版、左右分割）
功能展示（列表、宫格）
①竖向分栏布局（新闻、资讯、音乐、电商、视频...）
自上而下区分内容层级，首屏卡展示丰富内容，有助于提高浏览率，给人严谨、理性的感觉，适用推广。缺点是信息过多，易杂乱。
②竖向卡片布局（深度阅读、教程攻略、收藏分类...）
将图片和文字上下分开，通栏大图&文章预览-便于引导阅读，卡片可添加更多的功能，提升App的使用效率。缺点是一屏展示内容减少，信息量降低。
③中轴重复图版布局（深度阅读、教程攻略、收藏分类...）
突出标题，高图版率，视觉冲击力强。但是对背景图要求较高，需要：风格统一、精致、高度契合标题，好的背景图会显得界面更高级。
④列表布局（功能设置、信息浏览、内容分类、资讯...）
简洁明了展示内容，便于集中浏览，突出效率。缺点是通常以文字为主，形式比较呆板，视觉冲击力弱。
⑤左右分割布局（图片浏览、社交、深度阅读）
兼顾竖幅和横幅图片的展示效果，符合人眼本能的看图顺序和习惯，排版更活泼，多以瀑布流形式呈现。缺点是信息层级不明显，不易区分主次。
⑥宫格布局（视频、深度阅读，工具）
整体感很强，近似传统平面及网站的布局，适合陈列内容。缺点是信息层级不明显，不易区分主次，在首页使用时缺乏气势。
⑦满版布局（工具、展示、文艺、启动页、登录注册页）
图片可以充满整个版面，视觉效果直观而强烈，适合品牌传递。缺点是偏视觉展示，实用性较低。
32.Axure（制作原型图）
连接：界面与界面之间的交互关系。按住空格键可调整点的位置。
元件库：载入元件库---载入移动组件
33.IOS基础及尺寸规范
①尺寸
photoshop内的设计尺寸
机型
iphoneX
8plus 7plus 6splus 6plus
8 7 6s 6
SE
单位像素
458ppi
401ppi
326ppi
326ppi
屏幕分辨率
1125*2436px
1080*1920px
750*1334px
640*1136px
设计分辨率
1125*2436px
1242*2208px
750*1334px
640*1136px
sketch内的栏高设计尺寸
机型
X
8/7/6/6S plus
8/7/6/6S
SE
界面
375*812
414*736
375*667
320*568
状态栏
44px
20px
20px
20px
导航栏
44px
44px
44px
44px
标签栏
49px
49px
49px
49px
工具栏
44px
44px
44px
44px
虚拟home
34px
ps里的大小
3倍
3倍
2倍
2倍
②界面
状态栏--文字只有黑白两色，根据背景色或图片的明度自适应，20px。
导航栏--又叫标题栏，可放置页面名称、按钮、icon、搜索等，ios标题居中时，每侧最多两个功能按钮，文字15-22号，高44px。
标签栏--ios主推的导航样式，可放置2-5个标签，居中等分原则，高度49px。
工具栏--对当前页面进行操作，高度44px。
输入框--40-49px。
搜索框--44px。
分段式选择器、可点击图标--22-30px。
34.页面原型设计的步骤（位置、大小、距离、形式、色彩）
①位置：视觉优先网上放，操作频繁的往下放。先把元素按顺序排布位置。
②大小：重要信息放大后适当下移位置，次重要信息但内容较少适当上移。给重要信息更大的地盘。
③距离：距离上一个焦点近的层级高，调整间距引导用户的视觉浏览顺序。
④形式：图片的层级更高，文字最低，跳脱页面风格的内容形式层级更高。
⑤色彩：高反差颜色层级更高。
35.色彩
六步配色法：（调色软件spectrum）
确定主色
①联想：根据产品特性联想关键词（功能特征、行业特征、产品定位、地域特征、流行趋势、用户群特征、品牌文化、背景故事、相关事物、相关形容词...）
②查找：摄影图片、设计作品、工艺品
③提取：用软件分析提取主要色彩（将图片像素化提取颜色）
完成配色
④调色：色彩调和搭配形成配色方案
⑤验证：与产品特性比对
完美执行
⑥定规范：指定合理的色彩使用规范
36.Android尺寸和规范
①获取设计尺寸——官方GUI数据&设备截屏
②尺寸：sketch：720*1280
photoshop：1080*1920 2160*3840
屏幕大小
启动图标
操作栏图标
上下文图标
系统通知图标
最细画笔
状态栏
导航栏
标签栏
720*1280
96*96px
64*64px
32*32px
48*48px
不小于4px
50px
96px
96px
1080*1920
144*144px
96*96px
48*48px
72*72px
不小于6px
60px
144px
150px
37.启动图标
①优秀APP的特点：三美四得
视觉美、情感美、意义美、看得懂、记得住、找得到、用得开
②logo设计步骤
创意
分析产品定位、确定一个方向（目标用户、主要功能、slogan、产品认知度）
充分展开想象
头脑风暴、提取关键词（产品名称、核心理念、slogan、情感&心理、用户群体、事物联想&比喻、产品属性、应用场景）
设计手绘稿
坚持使用纯手绘。可借助简单的辅助工具。自由发挥，单/多个关键词、二次联想。追求数量，不要求质量。禁止评论。
呈现
宣传推广呈现 （网页广告、微信朋友圈、宣传彩页、平面广告、视频媒体、二维码）
APP内呈现（深入产品细节，可出现在启动页、引导页、用户提示、空白页、错误页、加载动效...）
应用市场呈现（APPlogo、应用截图、应用介绍视频、文字说明）4-5页应用市场页
③APP logo常见形式
①具象图形
②抽象图形
③文字/文字变形
