1、为什么需要设计心理学页面排版布局离不开基本的视觉心理学知识，交互设计师需要学习和掌握的视觉心理学，以及如何将其应用到具体的页面设计中。 在日常生活中经常会有一些尴尬的场面，比如这些打不开的门，这里称之为诺曼门，因为诺曼在他的视觉心理学这本书里面特意强调过这种门。我们看来他是一个拉的指示，但是往往他需要推才能打开，除了这种打不开的门之外还有一些，数据线老是插不进去。 日常生活当中也出现了大量这种不美好的设计，糟糕的设计往往是有一些错误的视觉引导，复杂的一些信息分类。完全不符合我们平时一些阅读或者认知的习惯。使用过程中各种不爽，同样在互联网层面中，这样的设计也是随处可见。 比如说登录页面，大家看一下这个页面存在哪些问题。 这是某类技术类产品一个登录页面，在提供了网站账号登录的同时，为了让用户能够快速的登录这个平台，还提供了一个第三方登录，右侧的网易通行证，在市面上的普及率还是蛮高的。 在左右两侧分别是一个平等的账号登录，一个网易云账号一个网易通行证。两种账号是平等的地位，通过布局发现，网易通行证似乎属于网易云账号，视觉页面给我们这样一个误导。 第二个问题，这个区域，会发现很多干扰信息，这里我们只是想提供一个快速登录的入口，但是额外提供了一些很繁琐的小图标，但这些小图标对我们登录是没有任何实质性的效果的。 第三个问题，是顶部，网易云账号和通行证是平等的关系，通过这样一个视觉效果发现，好像网易通行证隶属于网易云账号。似乎是从它里面抽出来的一部分，其次是右上角的叉号，这样的布局会让大家以为。把网易通行证这个页面给叉掉。而不是把整个登录体系给关掉，有些问题是页面的视觉引导错误造成的。 因此掌握用户观察和思考的规律，才能设计出符号用户预期的产品。也才能谈得上极致的用户体验，为了让这种极致的体验做的更好，交互设计师往往会通过具体的视觉页面。来向用户展示使用场景，继而满足用户的需求。中间的视觉界面也成了连接业务流程和用户体验的一个重要桥梁。 通过视觉界面可以将，不可见的这种信息架构和任务流程转变成一种可知的用户体验。 在网易云阅读这个例子中，在网易云阅读支付的流程优化过程中，当时我们发现支付流程的流失率很高。很多人在阅读过程中需要去支付的时候，很多人都不愿意支付。主要原因是支付过程环节过于复杂，步骤过多。怎样优化这个流程，让整个流程通过业务流程图的方式绘制出来。 通过去除了购物车，合并了结算和充值的这个页面。来简化了整个支付的流程，看到流程中打叉和合并修改标注的地方，都是进行了一些优化的地方。这些流程优化的地方最终也落地成了一些用户可以见的产品界面。 简化的这个流程和页面，能够让用户在整个沉浸式的阅读过程中，它不得已要去完成支付的时候，能够以一种很快捷的方式去完成，然后在回到之前沉浸式阅读体验中，整个支付流程很流畅所以给用户提供了一种快速愉悦的支付体验。 这种流畅的用户体验，最终也转变成我们整个商业上的一个目的，能够有一个支付上的显著性提高 标注的数据可以看到支付量有一个明显的上升的，
最终的视觉页面才能满足产品和用户这种双方的一个需求。在实际过程中交互设计师会构建很多用户体验或者说是使用流程。 比如在异性偶遇这个页面里，通过滑动的效果让用户感觉到我们是随机的去翻看美女的感觉，有一种偶遇的体验在里面。 其次是朋友地图，有一种通过位置关系上的布局，让大家能够感知到。我自己和周围朋友之间的一个空间位置上的关系，能够感知到我的朋友都在什么地方，实际空间上的心理体验，反推到我们的具体页面设计上。 通过拼车页面能够实时模拟车上的一个场景，可以看到车上是坐了几个人。分别是谁来模拟现实中这样去拼车的一个用户体验。 网易云音乐的播放界面以黑胶唱片的形式，来模拟音乐播放的用户体验。让用户沉浸在黑胶唱片的播放过程中
以上这些都是交互设计师，通过具体的页面来构建了一个用户的使用场景和用户体验，交互设计师在实际工作中都是以线框图来展示具体的交互界面。而将具体页面的任务操作，信息排版以及信息间的层级关系传递给视觉设计师。 视觉设计师会在我们交互稿的基础上，来完成最终的视觉效果。即使交互设计师能够很好的传递上述所说的层级关系，页面布局的同时。也可能会出现纰漏
比如现在看到网易云信的例子，这是工具类产品移动端的着陆页，是一个H5页面，左侧是我们交互设计师提供的一个交互设计方案。这个方案是希望我们的用户在他的一个H5页面去查看我们网易云信的一些介绍，然后将具体的设计方案移交给我们的视觉同学。
视觉给我们的第一个方案，在这个方案里面背景是一个女性。一个很孤独的场景，会发现在这样一个工具性很强的一个产品里面，出现了一个极强的社交暗示的一个背景。 其实这里完全不符合我们整个产品的一个风格，也是不符号我们具体的设计方案的。经过和视觉去沟通，跟他去传递我们整个页面所需要传递的这种工具类，一种严谨的设计风格，最终我们得到了第二份稿子
在第二份方案里，我们看到通过纯色的背景，来渲染一种安全、稳定的情感在里面。它也完全符合我们网易云信，以真实稳定的IM服务标榜我们这样一个产品定位。 通过这个例子我们可以看到，出现这个纰漏是在我们的交互设计师。在传递我们具体的设计方案的过程中，缺失了对视觉界面情感元素的要求。因此也就造成了视觉设计师在去设计这个页面的时候，在情感把握上出现了一些纰漏。 交互设计师是要懂得视觉心理学，因为它能够帮助我们更好地去传递我们这个页面所需要传递的一些情感因素。
2、巧用视觉心理学设计页面
标题一和下面具体的内容，以及标题二我们会错误的认为标题二和内容是对应的关系。但实际上往往是期望标题一和内容是对应起来的。但是由于间距的关系会有这样的误解，但是通过一些调整比如是这样是不是好很多。
调研了标题和内容之间的间距，整个逻辑关系会清晰很多。为什么会有这样的关系了，这里就讲到第一个知识点。
这种亲近被大量用到了分组中，利用间距关系来做组建、分组的方式。被大量的用在windows Phone的设计里面。而且一直延续到至今这样的页面少去了中间的分隔线，整个页面看起来简洁干净
当用户看到两个文案的时候，同样是蓝色的字体，下划线我们期望的反馈是一样的，但是当我们去点击的时候重新发送密码找回邮件的时候，系统会触发一个发送邮件的程度，当我们点击下面的数字的时候却没有任何反馈。 但我们会通过上面的视觉信息来判断同样的蓝色字体，同样的下划线往往是一样的反馈。我们为什么会有这样的预期了，这里就讲到了相似性
上图的圆点会倾向于是纵向排列的，那么如果改变一组的颜色了
圆点马上会按照横向去排列了，颜色上的相似会强烈的引导我们的视觉，促使我们认为这些圆点是横向排列的，那么这些又怎样应用到我们的设计中了。 这是web端的一个表单页面，表单总共有5列，每一列的间距很大。看到这些表单的时候会倾向于纵向去阅读这些信息，但是我们往往希望用户去横向阅读信息
那么怎样帮助用户来做这样的阅读了，我们加了一个阴影，就不是纵向阅读而是横向阅读了。
这里所说的相似包括了很多层面的信息，背景色、颜色只是其中的一种，还包括方向、大小以及其他因素。
既然有相似它的对立面就有不相似，或者称之为对比。这些不相似或者相似，会被我们应用到大量的一些比如导航设计里面。 这里它有了4个导航页，我们设计了相同的视觉信息，让用户快速来判断它是4个导航页，但是又想让用户知道他当前处于哪个页面。在第一帧时间线这里。把logo的颜色做了一些变化，让用户感知到他当前属于时间线这个table页。 用户也可能会看到中间是有一个红色的入口，和其他table页是不一样的。我们点击看下效果
原来它是一个发送的入口，我们会看到它在设计上是和其他table页面是不一样的，做为一个快速入口，通过与其他的table页的一个区别。让用户快速识别到它和其它是不一样的，这里经常会用到一个对比。同样这些也可以用到我们一些网页设计里面来，像右边的这个案例。Mac端很普通的一个弹窗
底部是有一个按钮分别是删除、取消、存储，在这样一个弹窗里面，我们倾向于让用户做一些存储的操作。以避免给用户造成一些不可挽回的后果，不仅在布局上做一些调整，同样在存储按钮上加了一个底色，来帮助用户做这样的判断。 这里加一个小提示，叫相似性可以帮助我们来识别哪些是同类，做出快速的判断。而对比可以表明彼此之间的差异，做出适当的引导。
接近性可以帮助我们进行分组，像这种情况下有大量的信息丢在这里。即使我们通过一些间距的调整，但是依然看起来不是很清晰，也很难判断上下的一个组别关系，这里上下一共有两个组别，那么有没有好的方法
尝试性的加了一个边框，有没有突然间效果很明显了，而且能迅速的通过边框来知觉到上下是有两个分组的，那么为什么会有这样的效果了。
这里就讲到封闭性。封闭性就是倾向于将残缺的轮廓加以补充，使之成为一个完整的闭合，通俗来讲就是会将残缺的部分自行脑补，补成一个完整的图形，这些大量的用到logo设计里面，像左边这张图即可以快速分辨出这款PONY的鞋以及和艾克贝斯这个logo的结合 即使这个鞋是被镂空掉的，但是依然能看到logo在里面。在一些APP的页面里同样可以用这样的原理进行分组，前面分组讲到的间距，这里跟大家讲的是线框或者背景色。 图上右边是facebook的页面，这里是通过一个白色的背景或者白色的边框，将它的状态全部框在一起，他的头像、信息、发送的图片，以及下面的底部操作，让我们来知觉这些全部都是一组信息，这里就是用边框的方式来分组。
常见的分组模式都有哪些了， 第一个通过一些间距效果来达到把不同元素区分出来，来迅速的知觉到它们是不一样的。我们称之为点也就是前面讲的接近性。 第二个用横线的方式来表明组与组之间的差异，就这是之前讲到的相似性的一个反面应用，中间的横线与下面两个横线形成了鲜明的对比。能够帮我们快速知觉到上面和下面是两个分组 第三个通过白色的背景将整个活动框在里面，这就是刚刚讲的闭合性，也就是通常所说的面。
三个方式各有千秋，也是根据不同的使用场景，来具体应用到产品设计里面。
交互设计师时常也会谈到流程上的闭环，或者体验上的闭环实际上就是对一个完整状态，有个认知倾向。比如在购物车设计的时候，当我们点击了一个添加按钮，就需要系统给我们反馈是否添加成功，以及添加成功之后的一些效果。 这些都是地完整状态的一个倾向而已，在做流程设计的时候也要考虑到封闭性，封闭性不仅仅可以应用到具体的页面布局里，也可以应用到流程设计是来。
这里需求是说我们要拉很多人，去发起一次多人通话，但是底部的展示区域终究是有限的，怎么在有限的区域展示更多的人被选中了，第一个方案直列了四个被选中的头像，以及当前被选中的数量，显然不是最好的
第二种方案在最左边加了一个半遮挡人头，通过这种方案我们可以迅速的判断，原来左边还有人。也会倾向于认为它的左边还继续有人，但这种方案还不是很理想
我们在左边不仅仅露出半个头，会把左边所有没有展示的人的头像全部都叠加在一起，通过整个头像的叠加来暗示用户这里还有很多人，显然这种方案是最好的，最终也选择了第三种方案
为什么我们会认为我们看不到的地方，还会有很多信息存在呢，人做判断的一个依据是什么？
就是连续性。即使说有些信息我们看不到，但是我们通过它外周的信息来帮助我们，或让我们觉得这里还有很多的信息存在，可能在有些时候我们在UI设计里，称之为视觉流。但我们这里更习惯性称之为连续性。 图中是云信的一个客户案例，下面列举了使用云信的众多产品的一些logo图片，但是这个区域终究是有限的，那么怎样来告诉用户很多的产品在使用我们的云信了，这里采用了一个播放滚动的效果，当用户看到这里我们的logo是不断在滚动的。来暗示我们，你看到的仅仅是使用我们产品的一部分 还有很多你还没有看到，以此暗示我们有大批量的用户，除了在网页端在移动端我们还有一些什么样的使用方式了。
第一个是模拟现实中图片叠加的效果，当我们手动去滑动的时候，可以快速地翻动照片，第二个是采用了半遮挡的方式，可以迅速的看到右边图片是没有完全展示出来的，我们习惯性的或者下意识的会去滑动照片，来查看一些没有查看到的图片，第三个是通过右边的一个小箭头来暗示除了你现在看到的，还有大量的信息没有展示出来，三种方式并没有好坏之分。只不过根据当前用户的使用场景，或者说产品的目的来选择适当的方式而已
整个页面向右上角倾斜，有没有办法视觉更平衡一些，尝试移动按钮的位置，当我们把下部的按钮从左边移动到右边的时候，有没有感觉整个视觉更加平衡
因为这时候我们的整个视觉流是之字型的，整个是牌一个平衡的状态
为什么为觉得这样视觉就会平衡，看起来就会舒服了
这里就涉及到一个对称性，视觉元素是有重量的，根据颜色不同会赋予视觉物体不同的重量，会根据视觉元素重量的不同，来营造整个页面的平衡。 这里在web端产品，一个很标准的平衡设计方案，一个title然后下面四个元素，并不是每个页面都要做到平衡，我们可以做到不平衡。因为我们会依靠视觉的重量来引导用户的视觉流，什么叫视觉的重量了
一个杠杆上有一个大球一个小球的示例，同样颜色质地的两个球，大球被小球翘起来有没有感觉怪怪的。因为我们会认为同样颜色质地的两个球，重量必须是大的球重量会更大。但是重量大的反而被小的敲了起来，必须不符合用户的认知模型，如果我们把大球的颜色变谈，大球被小球翘了起来。
是不是整个都会变得合理一些了，这就是讲到的视觉重量。视觉重量或者视觉流，怎么样来运用到具体的页面设计中了，在很多官网或者首页里，会依据视觉重量来引导用户的视觉流
这个例子左右的一个对称布局，但是视觉流往往是之字形的
因为会根据页面的重量，来浏览整个页面。
当用户迫切需要拨打电话，但是由于各种原因，我们暂时不能提供这种服务，我们需要向用户表达一种歉意，以及安抚用户这种很急躁的心情，但是现在我们页面所表达的情感，是一只鸡很悠闲的坐在哪里，好像事件事情都跟它没关系一样，这时候用户的急躁情绪反而会被激怒，所以整个页面所要表达出的一种情感诉求，是没有准确传达出来的。 什么是页面所传达出的情感
就是我们一些视觉元素，或者色彩都有一定的情感在里面，比如说我们整个色彩可以帮助网站去营造整体的氛围，比如fitbit网站是一个运动网站，通过整个色调来传递出积极健康的一个整体氛围，而我们交互设计师需要知道，我们整个页面需要传递出的这种情感氛围是怎么样的。 但是我们有时候也并不是需要完完全全去懂得，怎么去运用这些色彩，但是我们可以把这些需求传递给我们视觉设计师。
就像我们实际过程中，我们需要明确每个页面需要传递出的情感需求，并准确的传递给视觉设计师，
接近性：物体之间的间距 做为交互设计师这些视觉知识，能够帮助我们，在设计方案中传递出整个页面的一个逻辑性关系，以及情感上的诉求来最终提升，来最终提升整个设计方案的质量 五步熟练掌握页面排版布局页面布局的基本步骤和基本知识
1、确定页面的任务目的页面是连接用户和产品的重要桥梁，用户对于产品的一个体验和感知，都是发生在具体的页面上的。
页面不只是手机APP中的一个界面，也可能是一个触摸板、是个投影、纸片、甚至是包装盒，这个页面实际上是承担了我们产品的功能，也饱含了设计师的设计理念在里面，最最重要的是页面满足了我们用户某方面的需求。 页面是非常非常重要的载体，那么如何判断这个载体的好与坏。如何来判断优与劣了
微信、陌陌、易信，查看附件的人，分别采取了不同的设计方案，到底哪个设计方案会更好一点了。如果直接这样分析会无从下手，如果真的要说也无外乎会说一些，颜色设计风格一类的评论，但终究不能从一个交互设计的角度来评判三个界面的好与坏。 微信页面是基于半熟人的社交，陌生人社交并不是最重要的，虽然在初期的时候，对微信帮助很大。但在这个页面重点是展示附近的人，以及这个人的个人信息，具体还是一个熟人社交、半熟人社交。 易信作为一个纯熟人的社交，朋友地图重点展示周围熟人的分布情况，而这些熟人都不需要展示详细的个人信息、性别，因为这些都是知道的都是熟人，重点展示的是他和我们之间的一个位置关系，三个页面的布局都满足了各自产品的需求，也都可以称之为比较优秀的页面设计。
页面最重要的衡量标准还是有用，能够满足用户和产品双方的需求。
用户带着他的目的和需求到我们页面上来的，用户到页面要做两件事情，获取信息和操作流程等于完成任务。
任务是比较广泛的意义，用户到页面后获取信息进行流程操作来完成他的任务，在不同的任务和目的下，也就决定了页面的排版布局是不一样的。
根据用户数据，用户到支付页面流失率很高成功率很低，很多用户会流失，支付宝经过这样的尝试。采用半遮罩的设计，能用户一种没有页面跳转的感觉，给用户一种我都是在当前页面操作这样一个体验，大大提高了用户在整个操作过程中，流畅的心理预期，也提高了整个用户的付款率、成功率。 想要设计出符合用户和产品两方面需求的页面：
2、信息元素的组织分类举例网易严选的页面设计：
第一步先对信息进行分类
比如易信改版过程中，对易信的信息架构进行了梳理，将每个独立的功能模块写在一张卡片上面，让用户按照自己的理解进行组织分类。
拿发现来举例，用户会把朋友圈、问一问、晒一晒..、更多功能都属于发现里面，用户认为免费短信、电话留言、传文件到电脑等，属于发现里面，但是又不同于刚才其他那几类，它们使用的频率可能没那么高，所以我们将发现里面刚才提到的这些功能，全部放到一个叫更多功能里面去。
逛商城通常会按照男装、女装去选择，比如杭州的银泰二楼女装，三楼男装。根据这个到了相应的楼层，然后再根据上装下装去进行选择，如果上上装会选择我是去买一件T恤还是买一件衬衣，导航设计就是现实生活当中的一个映射。 右图的分类组织完成按照我们日常生活中选择衣服的一种方式进行布局和设置的。用户在用的时候不需要额外的学习成本，不需要额外的思考就能够按照，导航去选择自己的商品。具有极高的易用性在里面
考拉海购的例子，并没有按照产品的成分进行分类，而是以具体的功效做为一个类别，因为我们都知道我们去减肥应该去选择一个减肥瘦身的补品，但是我们不知道我们具体去买蛋白粉了还是买其他什么的。我们可以不知道自己想要什么东西，但我们可以他具体具备什么样的功效。属于哪个类别
导航设计里面，按照用户的视角去设计的按照用户思考逻辑设计，如果让用户自己去思考用户就可能离开你了。 卡版分类法也用到排版设计中
回到网易严选产品页
如何将一个抽象的需求转变为一个具体的功能
将喜欢的商品收藏起来
列出的一些需要的功能点，面对这么多功能点怎么进行组织分类了
使用前面提到的卡片分类法得到结果
将业务需求和用户需求转变为功能点，将将功能点进行了组织分类 3、对组块进行排版布局
每个用户到具体的页面来的时候都是带着他的需求来的，都是为了获取自己的信息，然后进行自己需求完成的任务，可以通过具体来设计用户任务的一个方式，来确定页面上所有信息的主次关系，来帮助我们判断页面上内容的主次关系，以此来做出页面设计 比如在严选的推荐页里，主要任务是查看推荐的各类商品，包含已经上线的还有首发的新品，所以在整个页面的视觉设计上分为三个区块。 banner位：主要进行一些热推的商品展示，来做导流 主要任务是非常清晰的，用户到这里来查看我们所推荐给他的商品有哪些，大体分为三类。用户也会按照这样的一个视觉流，去查看我们页面的信息然后依次浏览下来，来帮助他选择所喜欢的一个商品。
并不是全部，但是要在工作中，时时去提醒自己要注意到的注意事项，分为三块。
眼动的效果图，用户的阅读习惯通常从左往右阅读，并遵循F型的阅读习惯在里面，在设计中也要遵循这样的习惯。 在注册设计里面，通常把注册项表单做成左对齐，用户在阅读的时候能从上到下去阅读，不会有视觉的跳转。 右图的例子本来输入框隐藏在输入框里面，当输入的时候放置在左侧整个，这样不仅会有很好的视觉效果，而且看起来很舒服。
用户的视觉中心往往会从页面的左上角开始，最后会终止于页面的右下角，合理运用这个法则帮助用户更好地去阅读网站。获取信息并采取行动，官网的例子就很经典。在官网整个阅读的时候在我们左上角是一个关于网站的LOGO首页是banner图，整个页面的右下角有一个操作按钮。当用户在看到这个页面的时候会遵循对角线法则。 此外他还有一个很巧妙的地方放置了一个大猩猩可以看到他的一个视觉流，他的视角看准了右下角这样一个操作按钮。所以这里称作动作或者物体的视觉引导，我们也会注意到右下角这样的操作按钮。这个页面做的非常漂亮的而且效果很明显。
这就要用到格式塔，前面关于逻辑关系的应用，里面重点讲了三个关于逻辑关系或者关于分组的。概括来说就是点线面
微信的登录页面，只有两类信息，一类是账号密码让用户去输入，在最底下有个更多。这里就是作为其他账号登录的入口，因为这里是用他之前登录的QQ账号去登录的，然后其他的登录信息在我们整个页面任务中，是没有那么重要的，优先级比较低。这里就故意做得比较弱化。 关于弱化是有很多手段在的，微信是选取了两种不同的样式，登录用了button按钮，而更多是用的文字链。两个的样式是不一样的，在其他设计里面可以用到颜色来区分。比较同样两个button一个颜色弱一点，另外一个button颜色具有很好的引导作用，可以在button上做强化一个功能和弱化一个功能的作用。
有些操作是不希望用户去进行的
二次验证或者说密码的二次确认，在他们看来连续输入两次密码是安全的，而设计师出于一种体验的考虑就会陷入一种纠结。
这个时候往往要从需求的根源来入手，来分析这个需求是不是真的站得住脚。那么二次验证终究是为了让用户确认自己的密码，但并不能防止用户去忘记这个密码。确认这个需求是产品强加给用户的，因为并非全部的用户都需要去确认这个密码是不是输对了，那有部分的用户体验就会因为这个功能受到损害。 那有没有好的方案，兼容部分用户想看密码而部分用户不想看密码这样的一个需求了。那这里有一个查看明文密码的功能就非常好。它能够满足和解决这个问题，所以从需求入手，我们认可这个需求。 但是我们可以从不同的角度来解决这个问题。来提供不同的解决方案，然后我们最终删除了确认密码这个功能，但是额外提供了一个查看密码这样一个功能入口来满足部分用户，想查看他密码这样一个需求。
在这个狭小的空间里面不能展示全部内容，用户在这个页面的主要任务是获取产品的信息。包括各种商品的细节、价格之类的，用户在第一次来的时候可能会有查看运费信息这样一个需求在，但是在之后的购买和体验过程中。 是基本不会太关注这个运费的，或者说不会太关注运费是如何去计算的。即使他想去关注，他也往往是想知道这个运费的具体价格是怎么样的。而具体相应的算法是什么样的，在后面的时候他已经不是很关注了，为了不干扰主要的任务流程。 但又不损失次要的任务场景，最终的策略就是将具体的运费计算方式收藏起来，当点击下拉框的时候才能查看相应的运费详情。 但是隐藏又不能做的太隐蔽。因为当用户想去查看的时候，他必须要有一个很好的视觉引导。让他去查看这些不是很重要，但是他又想知道的信息，所以通常我们会有些视觉引导在，暗示这里有更多的内容去查看。这里就用了一个下拉箭头的方式，
比如绝大多数产品的搜索功能都是提供简单粗暴的一个搜索，然后全部在哪搜索，但是如果我们需要精确的搜索，或者通过相应的设置来进行固定条件的搜索的时候，高级条件搜索功能就很有必要了，而这些高级功能往往都是隐藏起来的。 比如易信的头像功能，点击用户头像的时候，会出现三个入口。lofter在发图的时候产品方是期望用户能够更多的发高质量的单张图片，但终究会向用户的需求进行妥协。因为用户已经现在已经习惯去发多张图片，但是产品方向也并没有完全去缴械投降，所以特意将多选这个功能做的非常隐藏。需要长按才能唤起
移动端设计的时候要考虑到人体的极限，以右手为例，拇指的活动范围往往都集中在屏幕的左下方，右边的图，在这个区域内手指是活动的非常灵活的，可以准确点击到屏幕上的内容，所以将操作频率比较高的放在这个区域里面。比如购物的APP里将购买或者加入购物车等操作放在一个非常容易点击的位置，来减少用户的操作成本。 在之前的设计规范里也讲到了，在底部的时候我们会放置很多操作按钮在里面。会将操作比较频繁的返回放在左上角，这是碍于之前的设计规范不得已而为之的一个方案了。IOS里加入了左滑返回。
当手指也点击目标距离越近，而且目标越大的时候，这样的操作就越容易成功，用户的操作成本也越低
同样两个目标，距离我们近的会更容易点击，这里所说的就是设备当前位置和目标位的距离。距离越长所用的时间也越长
目标越大也越容易点击得到，当目标的大小。目标越大的时候，我们所用的时候就越短了。
之前关于易信建群的例子里，讲到了创建群的按钮做的相当大的，且保持也其他模块的距离，而且相对独立但又在拇指操作距离最佳里面，这样点击起来相当方便，而且不容易点击到其他区域去，很好的容错性在里面 费次定律有两个悖论
简单来说就是不能一味追求目标的大，按钮越大的时候反而会适得其反，毕竟面积达到一定程度的时候，你已经无法忍受它的丑了，因为实在太丑了，这个还是很好理解的。
有时候会缩短操作距离，通常会将操作按钮放在一起，这样用户操作起来比较方便。但是如果离的太近就会引发一些额外的麻烦，比如分组不清、界面混杂全部都混在一起、容错性低很容易点到其他按钮上去，造成错误的操作。 好比淘宝的例子做为一个用户已经无数次的删掉了，我们一些商品了，因为本来只是想找一些相似的商品，但是经常会有一些误操作存在，至于改进方案可以不要两个按钮距离那么近。或者使用两个不同的触发方式来唤起两个操作。
同样是IOS里不得不做的权限请求，三个产品采取了不同的方式。
交互设计师可能不需要知道，动效具体是怎么实现的。但是你需要知道你需要怎样的动效。你需要动效来表达怎样的效果，去效对于交互设计师来说不在于酷炫，而在于他是体验的一部分。 比如易信的例子里在，需要展示语音录制过程中的一个状态，加入了长按这样一个动效效果在里面，在发送的过程中有很好的视觉引导。 动效对于交互设计师的意义，他是整个产品用户体验非常重要的一环。 4、权衡规范和用户习惯
各平台都有自己的设计规范
13年的时候开始做易信这款产品，但是出于设计成本还有开发成本和维护成本，毕竟两个端开发人员也要分成两个端去做。维护成本会很高，最主要的是对市场前景的未确定性，毕竟当时做为新产品，很难去确定说这个产品能够被市场所接纳，基于现在的成本以及市场前景的未确定性。采用了多平台统一的设计方案，最终不论是安卓还是iOS端都采用了抽屉式导航 这里讲一下抽屉式导航，易信当时定位是基于熟人的通讯工具，聊天就是唯一或者说非常重要的功能。其他的朋友圈、朋友地图、周边功能都是比较边缘化。非用户的主要使用场景，在整个设计上采用抽屉式导航。
右下角是做了一个加号，点击的时候会民出发起聊天、免费短信、电话留言、扫一扫这样一些快捷入口
点击抽屉式导航，还隐藏了朋友地图、设置等好友功能，基于当时的定位更多考虑的是熟人间的通讯。
到2.0的时候做了调整，易信占据了很不错的市场份额，已经开启了熟人通信到陌生人社交这样功能性上的转变，功能上也不在与通讯一家独大。朋友圈、偶遇、问一问以及后续的一些社交功能，开始成为易信的一个发力点，原来的架构和导航已经不能满足整个产品的发展了。 改版也就势在必行了，对于设计师而言，是否依旧保留原来两个平台一个统一设计方案呢，还是遵循各自平台的一个设计方案。产品和设计团队进行了很多讨论，最终还是决定做一个区分化的设计。遵循了安卓端最新的设计规范。 促使我们做这样的决定有3个，第1点是当时安卓4.0整个规范已经很成熟而且赢得很多用户的青睐因此我们遵循它的设计规范，也能够得到一部分用户的青睐。第2点易信当时在人员储备、资金上已经很充足了，而且对于市场前景也是非常美好的。 第3点微信14年将安卓版也设计成完全遵循安卓4.0的设计规范，所以从市场的呼声和竞争对手的角度来考虑，也有必要做出相应的回应。 所以在2.0版本的时候，彻底将安卓版和iOS版本进行了分别的设计，
2.0调整了信息架构，开始使用标签式导航，
这里主要讲的是涉及到多平台的时候，思考的角度是什么样的，大家可以借鉴到自己的产品设计里面去。
win10出现的时候与其他两个平台统一了一些规范。我们在设计中考虑如何减少设计成本，一套设计方案能不能即满足两其他两个端上面的使用，也能满足win10在移动端和桌面上的使用。最终采用了安卓端一样，在顶部加入标签式导航，唯一不同的是加了icon，大大降低了用户跨平台使用的学习成本。
全面兼容了win10的移动版和桌面版，依据win10的设计框架能够实现，一个应用在不同windows终端上运行的一个梦想，我们通过调整应用的宽度，当他调到一个预限值的时候就可以切换到移动版的样式，当时也是遵循了这样的设计方案。 当我们将右侧win10桌面版去调整它的宽度的时候，当调整到规定的预限值的时候就会变成左倾的移动版的样式。
这样就只需要开发一个应用，在windows的移动端、平板端、桌面端去实现兼容，一个应用解决三个端的问题，这真的是一个很赞的方案。 除了兼容安卓和iOS两个端的设计规范之外，有没有更好的解决方案就是native和web设计
有没有更好的方案将两个设计结合起来了
混合设计方案就诞生了，可以用在哪些地方了
易信的星币商城，在整个页面的框架顶部采用了navtive设计，基于本地的开发，主体是用H5页面去构成的，这个页面的迭代性很强
5、页面排版的设计验证完成了上面四步过程进行了页面设计、页面排版，要问几个问题
易信的信息架构和微信是高度相似，消息、通讯录、发现、我。设计师陷入纠结中，就把发现改为应用，让用户来使用发现用户根本没发觉，直接问他的时候，他才知道这里有区别。有时候不要看用户怎么说，还要看他怎么做。
阶段一：因为自己的设置观还没有完全建立起来，更多的是从竞品上去汲取他们设计方案的精髓，会去借鉴很多竞品的设计方案。 阶段二：随着设计能力的不断提升，意识到这种借鉴有抄袭的嫌疑。但更多还是基于它的精髓在的。这时候会有意避免跟他一样，避免借鉴去做一些差异化的设计，比如易信是叫发现好还是叫应用好 阶段三：但真正当我们成熟到一定阶段的时候，发现这种刻意的避免是完全没有必要的，因为用户往往不会注意到你这里所谓一个架构上、样式上的相似性，他更多关注的是你这个产品能不能满足他在某方面的一些需求，能不能满足使用习惯。 这时候也到了设计的比较好的习惯，一个真正的正轨上，为了用户的使用习惯而去设计的，所以很多新人也会纠结关于借鉴与设计的前两个阶段，这点大家不用担心 随着对用户的理解、设计的理解不断加深，也就跨过了为了借鉴而借鉴。或者说为了借鉴而去做设计的这两个阶段，最终走入到以用户为中心，为用户使用习惯去设计，为用户的需求去设计的阶段。
这三个阶段对交互设计师非常重要，但前期没法快速使用。在实际过程中会采用一些改良的快速验证方法
五个步骤很严格会耗费很多时间，在快速迭代中往往做不到这一点，那么怎么去做了 改良版：
相对于标准流程我们在实际中会进行这样的专家评估，通俗来讲就是交互设计师的内部评审。 在整个评估过程中进行系统评估，做为介绍的同学会详尽的介绍整个项目的背景是怎么样的，以及项目需要解决的问题是什么，然后详细自己介绍自己的具体设计方案，具体的解决方案。 交互专家或资深设计师会依据自己的工作经验，或者说同学给他准备的可用性原则指标，对页面进行评估，在整个过程中甚至会对于你的需求提出质疑。 在整个过程中如果希望专家的评价是更多的倾向于可用性，那可以打印一些可用性原则的表单，这个网上有很多可以下载一份。让专家同学争对性的提出建议，最后整理结果做出修改和排期，这两个是要非常快速地去响应的。 在评估完后就要快速的给出解决方案，有些问题可能会比较严重，要适当的去考虑是本期就能够去修改的，还是延期到下一期，这五步是交互同学在工作中快速去验证我们设计方案，所采取的改良过的专家评估方法。
相对于标准的用户测试，粗暴用户测试并没有严格的用户分层，都是随机的去办公楼里，抓一些潜在用户，可能是开发人员、测试人员。并没有严格的测试环境，可能就在他的工位上，粗暴测试往往都是拿一些可见的设计方案，可能是图列的一些纸面原型，或者直接拿着电脑拿着手机上的demo就过去，直接让他们进行试用。 比如易信星币广场的时候，直接打印出了纸面的原型让用户来使用。这里说的用户就是在其他楼层上找到的同事，在工作中要善于利用这种非项目组同事的体验和反馈机会，除了在体验任务流程上之外，也可以进行对比测试，让用户去评价两个方案这里会发现，粗暴的用户测试包含了我们的任务走查法，让用户按照每个任务依次去走查每个页面，也有可能是AB测试，让用户看两个方案。 这些都是在极短的时间内，可能是一个下午，快速的几个用户来试用我们产品，让用户任务走查或AB测试，这里要基于当初我们所要验证的一个点，到底是验证流程上是否可靠还是优化前以后的差异上的改进。 如果为了检查整个页面的流程是否可靠，可以采用任务走查，如果是为了验证优化过的方案，比前个方案更加有效，可以采用AB测试。 在整个测试过程中，对很多类型用户测试的方法的精髓进行提炼了，然后把它应用到我们具体的设计开发里面去，应用到设计师快速的方案验证。 这里都是交互设计师的快速验证，并不是严格的用户测试，在这个阶段的专家验证、用户测试是非常非常重要的。
交互文档1、什么是交互文档
左边第一张图是一个布局方案图，不能称之为页面的设计方案。 右边三个图它很清晰地描述出了页面之间的跳转关系，页面之间的逻辑关系，但同样缺少了必要的交互说明。不能作为交互方案最好的展现形式，说了这么多其实两者都是完整的交互方案的一部分。但是却不能作为一个贯穿从设计到开发到测试流程中的一个完整的设计文档
2、交互文档使用流程在整个过程中谁会遇到交互文档，什么样的场景下使用，达到什么目的
不是产品出了所有需求交互才会参与，而是早早就参与进去，在这个阶段交互会使用简单的交互方案，可能是草图或动手画的草图与产品经理进行沟通，产品经理通过可视化的需求方式，来讨论整个需求的可行性。讨论需求是否能够确定下来。
初级使用粗糙的交互草稿，沟通需求满足情况，同时跟开发讨论方案的可行性，因为交互设计给出的不仅仅是完美的设计方案，也是需要能够落地的，如果没有具体方案讨论起来比较费劲，因为没法用可视能够形象化的方式来展现设计方案，即使粗糙的稿子也无妨我们进行讨论 确定了具体的方案整个开发过程中，不会有任何障碍，就可以完善和补缺交互稿。就可以移交下游的视觉同学了。
会关注页面表达的情感需求，交互除了将页面布局方案较为准确传递给视觉，页面具体所要表达的情感需求，也要通过比较合理的方式传递给视觉同学。
在整个开发过程中，需求的设计方案也会根据市场或者用户的需求有所调整，这时候也会将变动过的需求和设计方案，及时体现在交互稿中。这时候交互稿使用人员也就是开发人员也要注意到在整个交互稿中，有了哪些的变更哪些改动，
测试人员是交互稿最严格的执行者，因为他会依据我们整个交互设计文档来设计他的测试用例是什么，他会严格测试设计方案最终的实现效果。 他要保证整个产品上线前的质量，测试不仅是开发的好伙伴也是整个设计团队很好的朋友。因为他会帮我们review整个交互稿中是否有纰漏，他们关注的往往是一些具体实现上的细节，一些极端状态。 测试在具体的测试用例撰写过程中或测试过程中，会将我们之前遗漏过的交互细节反馈给我们。这时候要将之前遗漏的细节补充到交互文档里面去 其次在前面也提到在整个开发过程中或者版本迭代过程中交互稿会有所修改，也要将修改过的交互稿同步给测试，以免他还是采取老的测试方案去做一些方案性的测试，在整个版本的迭代过程中都要同步给测试。
根据交互文档细节做逐条验收
如何撰写高质量交互文档
建议使用Axure
1、交互文档展示
(1) 封面 会明确标出整个需求，隶属于哪个版本叫什么名称，涉及到人员有哪些，策划、设计、开发
(2) 修订记录
整个版本迭代，交互或者需求有些变更的地方，我们需要以很明确的方式，很方便我们测试和开发去阅读的方式在这里进行标明，比如按照时间的倒序，每条都是很细化到一个功能上的变动。每条下面都有超链接，方便开发、测试去阅读的时候减少阅读成本 (3) 需求及业务流程图
需求方或产品方产出的东西，但为了表示文档的完整性，也是放到交互文档中。有明确的需求分析过程，及整个业务逻辑及系统中的规则 (4) 信息架构
本次功能所包含的几个模块，以及模块之间的信息层级是怎么样的，方便交互设计师进行逻辑分析 (5) 流程图
在进行具体设计之前，流程设计很重要，也建议把整个流程设计的结果，就是功能流程图在交互文档里面展示。一来帮助交互梳理自己页面，二来帮助开发和测试去理解设计方案， (6) 设计方案
拿红包举例，在某一个功能模块里，会有详细的每个页面的逐层级的说明，比如发起页、具体页包括发送过程中
会将整个流程每个页面逐帧进行标注说明，因为这就是整个具体的设计方案
(7) 交互控件 要保证整个项目的完整性团队内的高度一致性，会把本次涉及到的交互控件在这里罗列出来， 2、交互文档详解(1) 封面
名称、隶属版本，方便我们项目跟进，以及项目排期，明确地描述了整个需求中所涉及到的一些相关人员，确保相关人员知晓这件事情。 (2) 目录
两个标准，一是结构清晰，二是命名准确，整个交互文档目录就是整个交互文档的信息架构，在检查新同学交互文档时，会先看整个文档结构是否清晰，如果架构都没搞清楚怎么证明设计方案是靠谱的 (3) 修订记录
实时更新，方便查看
(4) 业务流程图
一般放在产品需求文档，建议在交互稿里也体现，这样能够将需求进行很好的梳理，方便测试和开发在一份交互稿里面就能够去理解我们的业务需求是怎么样的。包括具体的实现方案 (5) 信息架构
整个信息架构和交互文档逻辑是一样的， (6) 交互流程图
(7) 交互方案
以上是错误的方式，正确的应该是包含具体页面流程是怎么样的，包含单个页面具体某些点的交互说明
交互方案从三个部分讲述
错误的方式：
推崇的方式：
清晰简洁的页面只说明一个事情，让条理很清晰，阅读者一眼能看明白。一个页面一个任务并不是说一个页面，一个任务涉及到多个页面，这里最好展示多个页面
在现有任务中增加一个新功能的时候，新功 |
|
|
来自： iamwinning > 《产品》
