本章包括3小节：交互设计概述、设计工具Axure、设计规范与设计模式
1、交互设计概述
1.1、走进交互设计
交互定义：交互是指产品和他的使用者之间的互动过程。交互设计就是利用用户的场景、用户的心理去设计用户的行为，从而使用户能用、易用、爱用我们的产品。
能力要求：需求分析、信息架构、流程设计、原型设计、测试评估、用户体验。逻辑思维、表达、沟通协调、熟悉技术、相关岗位。
行业需求：天气、购物、出行、医疗、银行、音乐、视频、游戏等行业。
1.2、产品开发流程
第一步：确定目标、需求挖掘。
由产品经理和用户研究员去市场上挖掘需求，挖掘产品要做什么、产品的商业模式。（产品要服务哪些用户，要解决什么用户需求）
产出物：基于用户调研结果，输出用户画像。线上竞品分析。线下相关商业模式分析。
第二步：定义产品。
基于前期研究结果，由产品经理和交互设计师进一步定义产品。例如产品形态，是一个移动端产品还是移动端和pc共有的产品，产品会有怎样的功能。
产出物：首先产品来定义产品，通过树状结构图，输出产品大概会包含的功能。之后产品和交互一起定义产品，输出功能流程图，说明产品具体会包含哪些功能。
第三步：交互设计和ui设计
交互设计比ui设计更前置。两者相互影响，相互穿插。
产出物：交互拿到产品需求后，先快速做一些纸面原型图，和产品经理进行深入讨论，确定设计方向。确认纸面线框图后，再去绘制交互线框图。视觉基于交互线框图输出视觉稿、设计规范、切图。
第四步：产品开发
具体的产品开发，也就是代码阶段，由前端工程师、开发工程师完成。
第五步：测试优化
由用户研究员、测试，来测试优化产品。一是代码性能的测试优化，二是用户体验层面的优化。
交互需要参与进来，检查产品体验上的问题。
第六步：正式发布
正式发布后，由运营、运维、产品经理继续跟进，寻找产品在线上发布后遇到的问题，寻找产品中可优化的点，规划后续的产品迭代。一个好的互联网产品就是在不停的迭代中变得越来越优秀。
交互需要做数据分析，搜集用户反馈。了解产品存在的问题，以及用户对产品的反映。
交互和上游产品的配合
产品经理，侧重需求讨论和用户调研，确认产品到底要做什么，目标用户是什么，目标用户到底需要什么。
交互设计师，侧重于落地需求，形成真正的功能流程和界面原型。
交互和下游ui、前段开发的配合
交互设计师需要输出交互原型图和交互设计文档给下游。审核视觉稿，是否完成了用户体验目标。走查开发出的产品，用户是否能顺利使用。
1.3、交互设计关键着用户体验
用户体验定义
举例：不能共用两个插孔的插座。而160度插座，多功能扩展插座，就可以解决前面的问题。用户体验涉及到我们生活的方方面面，衣 食 住 行。用户体验，是用户对于使用或期望使用的产品、系统或者服务的主观感受和反应。它强调的是用户的心理主观感受和反应。
影响用户体验的三个因素
系统：产品所运行的软硬件环境。用户：使用产品的人群和对象。环境：用户使用产品所处在的自然环境、社会环境
交互设计影响着用户体验
举例：网易云音乐。向用户推荐歌曲，向朋友分享歌曲，操作体验。向用户推荐歌曲：私人FM，根据用户平时听歌类型给予个性化推荐；歌单、电台，采用瀑布流的形式支持用户自己发现内容。听歌识曲，在任何有歌曲播放的环境，识别播放的是哪首歌。向朋友分享歌曲：长按歌词，直接分享歌词；通过朋友圈分享歌曲。操作体验：播放歌曲时，仿真黑胶唱片开始随着音乐旋转，唱针开始摆动，带来很强的临场即视感；切歌时，向左或向右滑动黑胶唱片，直接切换，是个很有意思很生活化的用户交互的手势设计。
交互设计处于用户体验的那些层面
从Garrett提出的五个用户体验层次出发，交互设计主要关注框架层、结构层。
框架层，主要关注结构的布局设计。例如网易云音乐的首页，界面布局清晰，主功能突出，用户一进入软件，想要做的事情就可以在最快时间内做好。例如音乐播放界面，按操作的频繁程度、人体视觉习惯程度设计出层次，避免用户误操作。结构层，主要关注功能和信息层次的设计。例如网易云音乐的注册交互。好的设计师还要和其他部门进行沟通和配合，关注到表现层、范围层、战略层的设计。
2、设计工具Axure
2.1、使用基础
软件界面包括工具栏、页面、元件库、检视、母板、概要几个部分。页面，就是交互稿的目录。元件库，就是一个素材库，界面上的所有元素都是从元件库拖出来，经过一些改变得到的。检视：就是属性面板，可以控制页面或元素的属性。共享功能，因为Axure的服务器在国外，访问速度很慢，不建议使用。
2.2、实例演示
一个交互界面包括：界面标题、界面、流程线、交互说明（标记和文字说明）。
这一节主要讲了页面绘制技巧。
绘制交互稿之前会先画一些草图。可以把草图拖进axure，参照绘制。
绘制时，先拖一个底板，加上投影。（x=0，y=1，模糊=8，透明度=15）
接着绘制导航栏，边框可见性中隐藏左、右、上边框。
导航栏标题字号为17号、加粗。导航栏两侧文字字号及正文字号为15、不加粗。
按住option，可以拖动复制导航栏、文字，修改后得到其他部分。
按住option+shift键，可以垂直复制。
超出页面的形状，可以通过布尔运算裁剪。
列表行内的文字，左边距为16。
置灰按钮，通过修改透明度实现，设置为30%。可用状态，设置为100%
弹窗中的标题文字，和导航栏中的标题文字样式相同。
长页面可以转化为动态面板，从而裁剪到一屏高度。
2.3、交互文档攥写
一个交互稿文档包括：封面、更新日志、设计过程、交互稿主体、废纸篓。
封面。交待当前交互稿的版本信息，例如版本名称、版本号、交互日期、相关人员。
更新日志。包括日期、终端、所在页面（做一个链接索引）、变更内容、变更原因（例如需求变更、交互考虑不周）、设计师、备注。
设计过程。包括产品需求（需求呈现形式举例：列表、截图）、需求分析、用户调研、竞品情况、功能树形图。
交互稿主体。层级一为各个端，Android、iOS、windows、Mac、Web。层级二为功能模块，模块1、模块2...。功能模块上方为全局交互说明。层级三为用户角色。层级四为功能、子功能。
交互页面。背景为浅灰色，显示并对齐网格，网格间距为40。顶部显示页面标题，标题右侧显示作者姓名和联系方式，转化为动态面板，固定到浏览器顶部，尺寸为1920*40。一个页面只放一个流程。每个界面显示界面标题。流程线沿着网格串起来，纵向贴第一个网格线，横向对齐界面顶部。交互说明纵向在界面底部排列，间距一格，可以横向扩展，间距两格。
2.4、可交互原型
可交互原型一般用于：演示新功能，设计阶段的‘用户测试’。
Axure可交互原型功能的缺陷：操作相对复杂、动效支持较弱。
其他主流可交互原型软件：principle、flinto、origami、hype3。
以网易新闻客户端为例，演示底部tab切换（内容区域可滚动）、顶部二级tab切换（手势侧滑切换）、页面的切换（列表和详情页间切换）。
页面切换，主要通过动态面板来实现。过程动画，时长设置为300ms。
2.5、实用干货
交互稿模版、实用元件库、iconfont网站（Axhub官网可下载chrome插件）、托管平台（Axhub、摹客、产品大牛）、Ant Design（便后台，有代码的DPL，design pattern library 设计库）、Element。
第3节 设计规范与设计模式
3.1、iOS与Android设计规范
平台布局规范
不同平台设计不同，例如网易云音乐、知乎。
iOS端，经典的延续。
页眉--导航栏，用于实现在应用不同信息层级结构间的导航，有时候也可用于管理当前屏幕内容。
页脚—工具栏，用于放置操作当前屏幕中各个对象的控件。
页脚—标签栏，让用户在不同的任务、界面和模式中进行切换。
安卓端，变化与统一。
2009年，安卓推出1.5系统。
2010.12，安卓推出2.3版本，此时的按键缺少规范，比较混乱。
2011.2，安卓推出3.0版本，第一次为平板而设计的安卓系统，第一次在平板上出现了虚拟按钮。
2011.10，安卓推出4.0版本，统一了手机和平板规范，在3.0的基础上延续了虚拟导航的存在。
2014.10，安卓推出5.0版本，《material design》一个更详细的设计规范，并且影响了后续每个版本的安卓开发。
2015.9，安卓推出6.0。Marshmallow 棉花糖。
2016.8，安卓推出7.0。Nougat 牛轧糖。
2017.8，安卓推出8.0。Oreo 奥利奥。
2018.8，安卓推出9.0。Pie 派。
4.0是一个标志性的时刻，谷歌在安卓系统上实现了平板和手机的统一，将虚拟按钮作为4.0的标配。从4.0开始，没有配备硬件按钮的设备将显示导航栏这一虚拟的系统栏。页眉—操作栏（Action Bar）操作栏用于实现App内视图的切换和层级间的导航（返回上层），还会放置一些重要控件。
5.0扁平化时代下的material design。页眉—应用栏（APP Bar）应用栏在以前的版本中叫做操作栏，是用来显示应用的标识、应用导航、内容搜索以及其他操作。
常见控件。控件，用户通过控件来操作界面状态或设定状态。
常见手势。手势操作大多源于生活。例如APP翻页效果。
3.2、移动端设计模式—导航
导航，就像是一本书的目录。
底部标签式导航。
iOS中最为常见。如果APP有多个重要功能且相互之间切换频繁，这是可以采用标签式导航。特点：入口扁平化；导航控件占据面积大，能够轻松进行点击操作，进行功能间快速切换。
顶部标签式导航
被大量应用在安卓设计里面，可以避免导航与底部虚拟按钮之间发生冲突，引发误操作。
滚动式标签导航
用在标签个数超过5个的情况。需要给用户一定提示，说明页面外导航的存在。
分段式导航
由分段式控件所控制的一种导航模式。尺寸较小，能轻松地融入界面，不占用空间。一般会分成两段或三段。他只是iOS的标准控件。不适合作为一级导航，往往作为二级导航与标签导航嵌套使用。
舵式导航
App有多个重要功能且相互之间切换频繁，但是有一个功能最为重要，是App的核心功能或操作，这是可以使用舵式导航。底部标签式导航的变体。
抽屉式导航
App有多个功能，但是只有一个功能特别重要。特点：隐藏不重要功能，让用户更专注核心功能。能够大大减少主界面中的导航控件数量。例如打车软件。
下拉菜单导航
安卓4.0。特点：收起时体积小巧，节省空间；展开时能显示丰富的导航条目；往往没有关闭按钮。
滚动标签：显示数目有限，但是能够快速切换下拉菜单：可以显示很多条目，但是切换麻烦两者结合，可以优势互补。
3.3、移动端设计模式—列表
大多内容都是通过列表进行展示。
垂直列表
纵向罗列多个条目，这是一个最基本的列表形式。要做好列表条目详细程度和页面展示条目数量之间的平衡。例如外卖订单列表、联系人列表。常见的垂直列表有标准模式、图文结合式、控制模式。垂直列表还有两种特殊模式：时间轴形式、对话框形式。
横向轮播面板
有大图展示型、小图展示型。轮播面板需要指示器，来提示用户，表示屏幕外面还有着内容。
网格列表
以图片展示为主，有时也会配合文字说明。适合集中展示大量图片。网格列表更加富有情感化，让界面富有感染力。而垂直列表，大多用于展示文字，显得很清晰干净。网格列表的变种，瀑布流。田字格在排版上比较严谨。瀑布流的排布比较随意。
小结
垂直列表，冷静清晰。轮播面板，隐藏很多内容，充分利用空间。网格列表，可以显示大量图片，提高界面魅力。
垂直列表导航
垂直列表应用于导航模式。简单清晰，易于理解。可以帮助用户快速定位到对应的内容。常见于App的二级导航、多级导航。如果App功能层级比较浅，且功能间切换不频繁，也可以作为一级导航。例如邮箱。
宫格导航
宫格列表应用于导航模式。在睫毛上平铺显示使用频率相近，但是彼此又相互独立的功能条目。宫格导航，相比较于列表导航，可以充分利用屏幕空间。
3.4、web端设计模式
网页布局
搜索类网站，例如谷歌。
右上角显示网页内容及登录。中间模块显示了logo、搜索模块。底部放置一些其他信息。
博客类网站，例如微博。
顶部显示网页一级导航和目录。左侧有二级树状导航。中间显示微博发文、他人发布的博客内容。下面显示详细微博内容。右侧显示不太重要的博主信息、推荐广告位、其他信息。
商场网站，例如淘宝。
顶部显示用户信息、网页大的布局情况、导航。下面一行左侧显示logo，中间显示主要的搜索功能。搜索下方显示一级导航，淘宝旗下的子品牌。页面左侧显示二级栏目。中间是首页的首推位置，显示网站热卖商品、活动。页面右侧显示不太重要的其余信息、网格导航，公告、论坛、安全等。最右侧是三级导航，我常逛的一些品类细分。
图片类网站，例如pinterest。
顶部显示搜索栏、个人信息。下面是网站的主体，图片展示区域。右下角显示网站的其他辅助功能。
新闻类网站，例如凤凰网。
左上角显示logo。右上角显示个人信息，登录、搜索。下面是网站导航。接下来是banner广告位。下面是新闻网站的主体。
产品类网站，例如苹果。
顶部放整个网站的导航，以端来划分。中间是公司产品的主要内容，首推热卖产品。
其他新颖的形式。
卡片式布局。滚动视图布局。动态效果。
页面设计
首先，网站上有什么需要展示的。logo，导航，用户信息，推广信息，广告，其他。
其次，网站布局通常会把logo放在左上角。顶部放置网站的一级导航。如果页面很复杂或功能很复杂，左侧会放一个二级导航。
然后，结合自身情况考虑。
自适应设计
自适应网页设计，可以自动识别屏幕宽度，并作出相应调整的网页设计。
3.5、移动端交互规范解读
每次更新应该关注那些内容？
关注差异性和兼容型。
关注技术和落地应用。
关注设计细节。
网友评论