交互杂记

1.并发：整个网站或APP在同一时间访问的人数（并发超过服务器，则会在使用中制动关闭）

2.迭代：版本更新

3.UI（user interface）：用户界面

GUI：图形界面设计

UED/UXD（user experience）：用户体验设计

IXD(interaction design)：交互设计（任何机器互动的过程，通过了解人的心理，目标，期望，使用有效的交互方式让整个过程好用，易用）

UID（user interface design）：用户界面设计

UCD（user center design）：以用户为中心的设计

4.APP：手机的第三方应用程序

5.启动图标icon按功能分：（1）启动图标 （2）应用图标

启动图标icon按设计风格分类：（1）剪影图标 （2）扁平图标 （3）拟物图标  （4）主题图标

6.图标设计的三大原则：

（1）识别性：图标的图形，要能准确表达相应的操作。

（2）一致性：设计要做一个协调统一，具有自己的风格。

（3）兼容性：要考虑不同系统，不同硬件的双重兼容（不同的使用场景兼容）

7.图标设计的步骤：

（1）确定主题：

首先明确设计的主题与客户的要求

分析内容，针对的人群，APP行业的特性、场景、习惯

搜集行业内或相关成果APP的方案

确立主题构图，以及大概的色彩方向

（2）关键词

在提炼的主题基础上将关键词写下来（头脑风暴）

考虑用户的特殊要求

(3)图形化

将提炼的关键词罗列出来之后，可以视觉化元素，将象征元素提炼出来

提炼完毕后寻找相关素材

（4）筛检

将不直观，不美观，与企业形象出入较大的素材筛除

不要刻意，直接使用所找素材，进行二次加工

（5）出图

确定色调

画草图

将草图实现，输出最终稿

8.图标设计技巧：

（1）隐喻（辨识度）

图标作为一个入口，引导用户进入应用，应简约明确，但不能让用户去猜，意思要表达明确。

一般选用一种或两种辨识度较高，能代表其概念的物体。

（2）栅格线（整体感）

能够更好的匹配，界面中的图标整体感强。

（3）色彩鲜明（跳跃感）

明亮的色彩能够带来趣味性和活力感，也易于在多种背景中脱颖而出。

（4）删繁就简（易读性）

图标本身就是一种设计语言，所以要避免信息量过载，尽量减少文字。

（5）适度立体（层次感）

多尝试加入一些投影或者渐变，使得图标更有层次感，而不能单一的纯扁平化

（6）风格一致（套系感）

要刻意去培养自身的整体感，一致的风格设计，是用户情感化的体现于需要

（7）追求完美（可读性）

追求细节做到画面不可模糊，严格控制像素，使得画面精致。

9.扁平图标的种类：

（1）纯平面：

特点：纯色，剪影

优点：简洁，清晰，清晰，舒服，色彩明朗，视觉识别高。

(2）轻折叠：

特点：纯色，折痕，轻投影

优点：比纯平面更加丰富，有轻微视觉空间感，色彩明朗，视觉统一性较好。

（3）轻质感：

特点：轻渐变，简单层次，轻投影

优点：干净，简洁，内容丰富，更有质感

（4）折纸风

特点：折叠，投影，结构

优点：层次丰富，结构明显，易于创造空间立体感，几何感明显。

（5）有明显投影（长投影）

特点：层次，投影

优点：色彩对比度大，有明显而单纯的投影，从而创造鲜明的层次感和空间感，视觉冲击力大。

（6）有厚度

特点：厚度，立体感，细节

优点：有明显的厚度，即有明显的立体感，有一定的细节描绘

缺点：相对复杂，统一性没有以上风格高。

10.黄金比例1.618（即长段为全段的0.618）

裴波那契数：0,1,1,2,3,5,8,13,21......(前面两个数之和等于第三数)

黄金比例应用:

(1)布局:将尺寸设置成黄金比例

(2)间距:使用黄金螺旋线布局;位置的布局和留白一样都可以通过黄金螺旋线布置.

(3)内容:沿着黄金螺旋线的轨道,保证视觉的平衡

(4)图形:黄金比例图形

11.MBE风格图标

特点:

(1)特粗描边线条

(2)Q版卡通形象

(3)圆滑的线条

(4)颜色鲜明

(5)没有渐变色

(6)能快速用矢量去绘制

(7)能快速创作动效

12.轻拟物图标

特点：对显示中的物体所做的模仿，不追求完全的真实感。

13.拟物化图标

特点：界面模拟真是物体的材质，质感，细节，光亮等。对于光影处理的要求高。

14.交互分为人人交互和人机交互

人机交互：任何机器在互动的过程中，设计师通过了解用户的心里，目标，期望，定义的一个行为。用户使用搞这些有效的行为达到他们的目标，并使得整个过程易用。

15.交互四要素：用户，目标，行为，反馈

16.简化四策略：

（1）删除：去掉所有不必要的按钮（功能），直至减到不能再减为止

（2）组织：按照有意义的标准将按钮划分为组

（3）隐藏：把那些不是很重要的按钮隐藏起来，避免分散用户注意力

（4）转移：只保留最基本的功能按钮，其他的转移菜单或其他更深的地方

17.UED（用户体验）的五个重要部分：

（1）人机交互：设备与用户之间的信息船体与反馈

（2）状态：在写交互说明的时候总是更多的考虑正常状态，却忽略一些特殊状态，但对于开发来说，各种状态都不能丢失

（3）操作与反馈：反馈对用户动作的一种回复，向他们展示操作的结果，更新他们的任务进程

（4）工作流：让用户明白按哪里可以做什么，以及接下来会发生什么

（5）故障

18.移动端开发的流程：

愿景——背景调研——用户访谈——行为数据分析——需求和任务分析——用例分析（市场研究，用户研究）——设计定位——产品概念设计——信息架构设计——交互流程设计——核心界面设计——原型开发——细节界面设计——用户测试——控件输出——交互说明文档，视觉规范（概念设计，交互设计，视觉设计）——编程开发——测试bug——部署与发布（代码开发）——推广与运营——运营数据分析——迭代

19.用户体验要素（产品设计的五层）：

战略层：用户需求、网站目标（产品定位）

范围层：功能规格、内容需求（1.功能设计，竞品分析  2.需求调研与分析）

结构层：交互设计、信息架构（业务流程梳理，操作流程梳理，信息流程梳理，数据流程梳理）

框架层：界面设计、导航设计、信息设计（页面布局，用户场景分析）

表现层：视觉设计（界面设计）

20.五导图：

21.场景故事的表达分析——六维度分析（6W）   ——   越是底层越是刚需

（1）who（什么人）：产品的目标用户是谁？是一类还是几类群体？通过用户群额年龄，性别，特质，区域，习惯，兴趣，爱好，收入，消费......

（2）when（什么时间）：用户在什么时候使用产品？在产品推荐时，必须选择合适的时间，同时还要考虑用户停留时间，使用高峰时间，离开时间

（3）where（什么地方）：用户可能在那些条件和环境下使用产品，针对不同的操作环境，不同的地理环境，要有不同的方案

（4）why（为什么）：用于了解功能的目的，有没有真正满足用户的需求

（5）what（是什么）：产品功能分析，用来分析产品的基本功能和辅助功能之间的关系。用户真正需要的功能是什么

（6）which（哪些）：除了此产品外，市面上还有哪些可代替的竞品

22.用户模型（用户画像）：目标群体，真是的特质。是真是用户的综合原型

23.用户行为路径：做一件事，从开始到结束期间所发生的一些行为，并记录行为（包括正确和错误的行为）

24.体验者旅程：先看用户目前行为流程，在从情绪上判定体验的好坏

25.同理心地图：学会换位思考，让自己站在用户的维度去思考问题

26.调研方法：

（1）问卷调查

（2）焦点访谈

（3）现场观察

（4）二手资料调研

（5）相关人访问

（6）竞品分析

27.用户登陆注册系统分为两大类：

（1）自建用户系统：通过手机号，邮箱，用户名登陆

（2）第三方账号授权用户系统：QQ，微信，微博

28.错误反馈实例：

（1）手控类型错误：

一般在使用移动端时遇到。——可以加入新手指引或错误反馈。

（2）词语/拼音错误：

主要在使用搜索或者输入的是有遇到。

（3）内容不符合规则：

主要常见于表单填写，最常见就是登入注册。——提示要简单明了，及时给予用户反馈。

29.访问错误类型：

（1）功能不能使用：

告诉用户不能使用该功能的原因，方便用户及时修改。

告诉用户解决办法。

（2）页面不能打开：

要有情感化设计，通过设计求得用户的谅解。

给予用户解决办法。

30.低保真原型：

有限的功能和交互原型设计。

作用：

主要用于用户沟通，测试，和进一步绘制高保真效果图。

31.iOS设计三大原则：

（1）遵从内容：UI应该有助于用户更好的理解内容并与之交互。

充分利用这个屏幕

慎重使用拟物设计（减少渐变、阴影）

尝试使用半透明底板，来暗示背后的内容（毛玻璃效果）

（2）清晰：文字、图标应该清晰易读，去除多余的修饰，突出重点

使用大量留白

让颜色简化UI

通过使用系统字体确保易读性

使用无边框的按钮

（3）深度：视觉的一个层次感和生动的交互动画会赋予UI新的活力

32.iOS的四种类型：

（1）栏（Bar   导航栏，标签栏，状态栏）：

包含了上下文信息来指引用户他们所在的位置，以及控件来帮助用户导航或者执行操作

（2）内容视图(content views)：

包含了应用的具体内容以及某些操作（比如：content views  删除，插入，排序）

（3）控件(controls)：

用户执行操作或展示信息

（4）临时视图（temporary views  弹窗）：

短暂出现给予用户重要信息或提供更多的选择和功能。

33.在页面布局上考虑以下几点：

（1）强调重要内容或功能：让用户容易集中注意力在主要任务上

（2）主次关系：使用不同的视觉化重量和平衡来告诉用户当前屏幕元素的主次关系

（3）对齐：使用对齐来让阅读更舒服

（4）默认尺寸：确保用户在内容出于默认尺寸时可以清楚明白它的主要内容和含义

（5）字体大小：根据需求制定字体大小

（6）尽量避免UI上不一致的表现：建议类似的功能外观都保持一致

（7）给每个互动的元素充足的空间：让用户容易操作这些内容和控件（常用的点类控件的大小是44px*44px）

34.iOS尺寸规范：

Iphone1.2.3(IpodTouch1.2.3)——320px*480px

Iphone4.4s——640px*960px

Iphone5.5c.5s——640px*1136px

Iphone6.6s.7——750px*1334px

Iphone6P.6sP.7P物理尺寸——1080px*1920px

设计尺寸：1242px*2208px

（物理尺寸就是实际屏幕像素、设计尺寸就是截图6P界面拖入PS中所量出来的尺寸）

Iphone1.2.3（@1X）

状态栏：20px         导航栏：44px         标签栏：49px

Iphone4.4s

/Iphone5.5c.5s.SE /Iphone6.6s.7（@2X）

状态栏：40px         导航栏：88px          标签栏：98px

Iphone6P.6sP.7P（@3X）

状态栏：60px         导航栏：132px         标签栏：146px

以@2X为前提：字体大小20——38px

顶部操作栏文字：34——38px

标题文字：28——34px

正文文字：26——30px

辅助性文字大小：20——24px

Tab bar 文字：20px

内容列表页：最低高度为80px

卡片外边距：16px ,10——20px

搜索框高度：58——66px

搜索框模块高度：88,90px

按钮大小：76——96px 

分段控件min高度：44px

Tab切换：76——150px

分割块：16px

头部位置：128px

35.常见标签栏汇总：

（1）标签式导航（微信，QQ）

优点：

清楚当前所在入口位置

能频繁跳转且不会迷失方向

直接展示重要入口的内容信息

缺点：

功能入口过多时，该模式显示笨重不实用

占用一定的高度空间

（2）顶部导航（QQ音乐，酷狗音乐）

优点：

腾出下方位置提供更重要的操作

可以提供沉浸式体验

缺点：

单手操作，在大屏幕上难以点击

（3）舵式导航（微博）

中间功能为核心功能

优点：

迅速引导至核心功能

缺点：

开发比较复杂

（4）列表式导航（网易，设置）信息类

优点：

可以展示内容较长的标题

可以展示标题的次级内容

层次展示清晰（有先后级）

缺点：

排版灵活性不高

同级内容过多时，用户浏览时容易产生疲惫

（5）跳板式导航（支付宝，淘宝）

优点：

清晰展示多个各个入口

容易记住各个入口的位置，方便快速找到

缺点：

各个入口之间切换不灵活（点击进入后，要返回功能跳板式界面，才能点击进入下一个入口）

容易形成更深的路径

（6）抽屉式导航（知乎，QQ，亚马逊）

优点：

扩展性好

兼容多种模式

缺点：

对功能入口隐藏较深

单手操作时存在盲区

（7）陈列馆式导航（bilibili）

、

优点：

直观展示各项内容

方便阅览经常要更新的内容

缺点：

容易形成界面内容过多，显得杂乱

（8）轮播式导航（探探，读书类用   其余很少用）

优点：

专题性强

易于阅读（单页内容整体性强）

缺点：

不适合展示过多的页面

不能跳跃式的查看阅读页面只能按顺序查看相邻的页面

36.引导页：

当用户安装后，第一次打开应用，App一般会呈现连续3-4张页面，这些页面会提前告知用户App的主要功能和特点，这类似迎宾引导的作用，这些页面我们称之为引导页

37.引导页一般只出现一次。除非清除应用程序（仅限安卓用户）相当于初始化的APP，或卸载后重装才会再次看到引导页。有跳过按钮。

38.引导页按目的分类：

（1）功能介绍类：

对产品的主要功能进行展示，大多采用文字配合界面，插图的方式来展现

（2）使用说明类：

用户在使用产品过程中可能会遇到困难，不清楚的操作，进行提前告知，这一类大多结合手绘风格居多

（3）推广类：
这一类引导页，更多是想传达产品的态度，让用户知道这个产品的情怀，这一类需啊哟制作精良有趣。现在市面APP的引导页最长使用的类型 （4）问题解决类：

描述实际生活中所遇到的问题，直击用户的通点，最好通过解决方案让用户情感上产生练习增强用户黏度

39.引导页从表现形式上分类：

（1）文字与界面类：（多用于功能介绍类或使用说明类）

这是最为常见的，简短的文字界面

缺点：过于模式化

（2）文字与插图组合：（推广类，问题解决类）

插图多为具象，以使用场景，照片为主，来表现文字内容

（3）动态效果与音乐：

除了静态页面外，开始流行具有动效的页面，可以加入一些音乐与动效节奏相符合。（常见唱吧，全民k歌）

（4）视频类展示：

这种方式多用于偏向于生活记录类应用，如拍照，运动类应用。

缺点：应用较大，视频播放的时候可能会出现卡顿的情况。（常见网易云音乐，虾米，keep）

40.安卓尺寸规范

屏幕                                            尺寸                                          比例                                  程序启动图标

MDPI                                        320*480                                        1                                        48*48px

HDPI                                        480*800                                        1:1.5                                  72*72px

XHDPI                                    720*1280                                       1:2                                      96*96px

XXHDPI                                  1080*1920                                    1:3                                      144*144px

XXXHDPI                                1440*2560                                    1:4                                      192*192px

41.Android组件换算代为——DP

1DP在HDPI尺寸下=1.5PX

1DP在XHDPI尺寸下=2PX

1DP在XXHDPI尺寸下=3PX

1DP在XXXHDPI尺寸下=4PX

42.Android设计以720*1280px为前提：

状态栏：50px=25DP

导航栏：96px=48DP

选项卡：96px=48DP

标签栏：96px=48DP

按钮:80px=40DP

文本信息框高度:112PX=56DP

Android的字体：Droid sans fallback（Google自己的字体，像微软雅黑），字体12sp-28sp（SP换算跟DP一样）

在设计安卓是间距，尺寸都要以8DP，16px的倍数来设计

43.iOS与Android的区别：

（1）状态栏：

IOS的状态栏提供3种样式，分别为浅色、深色、深色半透明，高度固定

Android会因各个手机厂商自定Rom不同，会有多种样式（如MIUI中根据不同主题会有变化）

（2）导航栏：

IOS导航栏高度固定，放置在顶部，标题放置于中间，左右两侧放置按钮

Android会因不同情况去承担导航栏和选项卡，标题一般放置于左侧

（3）标签栏：

IOS高度固定，放置在底部，界面一般放置图标或者按钮

Android当顶部操作栏空间不够放置更多按钮时，会出现在底部，底部操作栏是在Android 4.0中引入的

（4）开关

IOS的开关只有一种样式

Android的开关类似IOS、复选、单选等开关

（5）对话框：

这个主要是风格不同，作用类似（Android 4.0之前，确定一般在左侧；4.0之后确定变到右侧）

（6）排版：

IOS居中排版

Android左对齐，越左对齐越Android

（7）文字：

IOS为苹方，Android为Droid sans fallback，字体大小区间也不同

（8）浮窗

Android里可以看到各种浮窗（流量、清理内存..）

IOS暂不支持这样的浮窗