交互网页怎样设计 第1篇
到这一步进行交互流程案例的说明，首先是根据前面的规划准备好对应的原型：
然后确定交互解释应用的图形元素，如连线、标识、说明文本区域等（虽然本次用不到太多连线）。
然后，就是先做个大标题，并将整体展示内的页面合并在一起，使用一个说明文本卡片来做基本的解释即可，具体的说明放在后面。
真实项目里做交互说明，重点是页面的交互逻辑，而不是按作品集的做法写“八股”，只把关键的信息记录进去，尤其是团队成员都参与项目了解项目背景和业务的话，更不需写一大堆废话，这是没人愿意看的。所以我的添加内容如下：
文档说明：本文档内主要展示苹果应用商店中 App Watch S9 的交互流程说明，旁边是该流程中包含的几个主要状态的完整页面，可以简单的预览。具体交互说明见右侧。
默认页面：用户进入选购页后页面的状态，还未选购
全选页面：用户完成商品所有选项后的状态
然后，再开始进入右侧的具体解释部分，同样要包含对应的大标题，然后把页面和文本区域绘制出来，并完相关的排列。
交互的解释一定要遵循先总体后细节的顺序，先对层级高的事件做说明，再解释层级低的。
比如默认状态页面，主要描述的对象是头部的图片区域和下方的按钮栏，表壳的选择是在下个阶段才进行的交互，所以我的描述内容如下：
顶部图片区域：
主要展示商品图片，默认显示图例为商品默认展示图和价格文案
这个模块包含 5 个阶段，除了当前默认，还有表盘、表壳、尺寸、表带四个阶段，每个阶段会展示对应选择后的图例
交互网页怎样设计 第2篇
页面布局的基本步骤和基本知识
页面是连接用户和产品的重要桥梁，用户对于产品的一个体验和感知，都是发生在具体的页面上的。
页面不只是手机APP中的一个界面，也可能是一个触摸板、是个投影、纸片、甚至是包装盒，这个页面实际上是承担了我们产品的功能，也饱含了设计师的设计理念在里面，最最重要的是页面满足了我们用户某方面的需求。
页面是非常非常重要的载体，那么如何判断这个载体的好与坏。如何来判断优与劣了
微信、陌陌、易信，查看附件的人，分别采取了不同的设计方案，到底哪个设计方案会更好一点了。如果直接这样分析会无从下手，如果真的要说也无外乎会说一些，颜色设计风格一类的评论，但终究不能从一个交互设计的角度来评判三个界面的好与坏。
微信页面是基于半熟人的社交，陌生人社交并不是最重要的，虽然在初期的时候，对微信帮助很大。但在这个页面重点是展示附近的人，以及这个人的个人信息，具体还是一个熟人社交、半熟人社交。
陌陌基于约炮的纯陌生人社交，在页面上更加突出了人的照片，以大图的形式展示个人的魅力。以达到吸引异性的目的，这是陌陌的做法
易信作为一个纯熟人的社交，朋友地图重点展示周围熟人的分布情况，而这些熟人都不需要展示详细的个人信息、性别，因为这些都是知道的都是熟人，重点展示的是他和我们之间的一个位置关系，三个页面的布局都满足了各自产品的需求，也都可以称之为比较优秀的页面设计。
页面最重要的衡量标准还是有用，能够满足用户和产品双方的需求。
用户带着他的目的和需求到我们页面上来的，用户到页面要做两件事情，获取信息和操作流程等于完成任务。
任务是比较广泛的意义，用户到页面后获取信息进行流程操作来完成他的任务，在不同的任务和目的下，也就决定了页面的排版布局是不一样的。
根据用户数据，用户到支付页面流失率很高成功率很低，很多用户会流失，支付宝经过这样的尝试。采用半遮罩的设计，能用户一种没有页面跳转的感觉，给用户一种我都是在当前页面操作这样一个体验，大大提高了用户在整个操作过程中，流畅的心理预期，也提高了整个用户的付款率、成功率。
想要设计出符合用户和产品两方面需求的页面：
反是脱离这一点，或者说没有想清楚这一点，页面的设计就无从谈起。
举例网易严选的页面设计：
第一步先对信息进行分类
比如易信改版过程中，对易信的信息架构进行了梳理，将每个独立的功能模块写在一张卡片上面，让用户按照自己的理解进行组织分类。
拿发现来举例，用户会把朋友圈、问一问、晒一晒..、更多功能都属于发现里面，用户认为免费短信、电话留言、传文件到电脑等，属于发现里面，但是又不同于刚才其他那几类，它们使用的频率可能没那么高，所以我们将发现里面刚才提到的这些功能，全部放到一个叫更多功能里面去。
逛商城通常会按照男装、女装去选择，比如杭州的银泰二楼女装，三楼男装。根据这个到了相应的楼层，然后再根据上装下装去进行选择，如果上上装会选择我是去买一件T恤还是买一件衬衣，导航设计就是现实生活当中的一个映射。
右图的分类组织完成按照我们日常生活中选择衣服的一种方式进行布局和设置的。用户在用的时候不需要额外的学习成本，不需要额外的思考就能够按照，导航去选择自己的商品。具有极高的易用性在里面
考拉海购的例子，并没有按照产品的成分进行分类，而是以具体的功效做为一个类别，因为我们都知道我们去减肥应该去选择一个减肥瘦身的补品，但是我们不知道我们具体去买蛋白粉了还是买其他什么的。我们可以不知道自己想要什么东西，但我们可以他具体具备什么样的功效。属于哪个类别
导航设计里面，按照用户的视角去设计的按照用户思考逻辑设计，如果让用户自己去思考用户就可能离开你了。
卡版分类法也用到排版设计中
回到网易严选产品页
如何将一个抽象的需求转变为一个具体的功能
用户说他想要一匹更快的马，其实他想要的是更快的速度，所以经典的福特汽车就诞生了。
将喜欢的商品收藏起来
列出的一些需要的功能点，面对这么多功能点怎么进行组织分类了
使用前面提到的卡片分类法得到结果
将业务需求和用户需求转变为功能点，将将功能点进行了组织分类
每个用户到具体的页面来的时候都是带着他的需求来的，都是为了获取自己的信息，然后进行自己需求完成的任务，可以通过具体来设计用户任务的一个方式，来确定页面上所有信息的主次关系，来帮助我们判断页面上内容的主次关系，以此来做出页面设计
比如在严选的推荐页里，主要任务是查看推荐的各类商品，包含已经上线的还有首发的新品，所以在整个页面的视觉设计上分为三个区块。
banner位：主要进行一些热推的商品展示，来做导流
新品首先：推荐刚刚上线的一新新品，引导用户查看信息或者进行购买
人气推荐：卖得比较好的商品
主要任务是非常清晰的，用户到这里来查看我们所推荐给他的商品有哪些，大体分为三类。用户也会按照这样的一个视觉流，去查看我们页面的信息然后依次浏览下来，来帮助他选择所喜欢的一个商品。
并不是全部，但是要在工作中，时时去提醒自己要注意到的注意事项，分为三块。
眼动的效果图，用户的阅读习惯通常从左往右阅读，并遵循F型的阅读习惯在里面，在设计中也要遵循这样的习惯。
在注册设计里面，通常把注册项表单做成左对齐，用户在阅读的时候能从上到下去阅读，不会有视觉的跳转。
右图的例子本来输入框隐藏在输入框里面，当输入的时候放置在左侧整个，这样不仅会有很好的视觉效果，而且看起来很舒服。
用户的视觉中心往往会从页面的左上角开始，最后会终止于页面的右下角，合理运用这个法则帮助用户更好地去阅读网站。获取信息并采取行动，官网的例子就很经典。在官网整个阅读的时候在我们左上角是一个关于网站的LOGO首页是banner图，整个页面的右下角有一个操作按钮。当用户在看到这个页面的时候会遵循对角线法则。
此外他还有一个很巧妙的地方放置了一个大猩猩可以看到他的一个视觉流，他的视角看准了右下角这样一个操作按钮。所以这里称作动作或者物体的视觉引导，我们也会注意到右下角这样的操作按钮。这个页面做的非常漂亮的而且效果很明显。
这就要用到格式塔，前面关于逻辑关系的应用，里面重点讲了三个关于逻辑关系或者关于分组的。概括来说就是点线面
微信的登录页面，只有两类信息，一类是账号密码让用户去输入，在最底下有个更多。这里就是作为其他账号登录的入口，因为这里是用他之前登录的QQ账号去登录的，然后其他的登录信息在我们整个页面任务中，是没有那么重要的，优先级比较低。这里就故意做得比较弱化。
关于弱化是有很多手段在的，微信是选取了两种不同的样式，登录用了button按钮，而更多是用的文字链。两个的样式是不一样的，在其他设计里面可以用到颜色来区分。比较同样两个button一个颜色弱一点，另外一个button颜色具有很好的引导作用，可以在button上做强化一个功能和弱化一个功能的作用。
有些操作是不希望用户去进行的
二次验证或者说密码的二次确认，在他们看来连续输入两次密码是安全的，而设计师出于一种体验的考虑就会陷入一种纠结。
这个时候往往要从需求的根源来入手，来分析这个需求是不是真的站得住脚。那么二次验证终究是为了让用户确认自己的密码，但并不能防止用户去忘记这个密码。确认这个需求是产品强加给用户的，因为并非全部的用户都需要去确认这个密码是不是输对了，那有部分的用户体验就会因为这个功能受到损害。
那有没有好的方案，兼容部分用户想看密码而部分用户不想看密码这样的一个需求了。那这里有一个查看明文密码的功能就非常好。它能够满足和解决这个问题，所以从需求入手，我们认可这个需求。
但是我们可以从不同的角度来解决这个问题。来提供不同的解决方案，然后我们最终删除了确认密码这个功能，但是额外提供了一个查看密码这样一个功能入口来满足部分用户，想查看他密码这样一个需求。
在这个狭小的空间里面不能展示全部内容，用户在这个页面的主要任务是获取产品的信息。包括各种商品的细节、价格之类的，用户在第一次来的时候可能会有查看运费信息这样一个需求在，但是在之后的购买和体验过程中。
是基本不会太关注这个运费的，或者说不会太关注运费是如何去计算的。即使他想去关注，他也往往是想知道这个运费的具体价格是怎么样的。而具体相应的算法是什么样的，在后面的时候他已经不是很关注了，为了不干扰主要的任务流程。
交互网页怎样设计 第3篇
建议使用Axure
(1) 封面
会明确标出整个需求，隶属于哪个版本叫什么名称，涉及到人员有哪些，策划、设计、开发
(2) 修订记录
整个版本迭代，交互或者需求有些变更的地方，我们需要以很明确的方式，很方便我们测试和开发去阅读的方式在这里进行标明，比如按照时间的倒序，每条都是很细化到一个功能上的变动。每条下面都有超链接，方便开发、测试去阅读的时候减少阅读成本
(3) 需求及业务流程图
需求方或产品方产出的东西，但为了表示文档的完整性，也是放到交互文档中。有明确的需求分析过程，及整个业务逻辑及系统中的规则
(4) 信息架构
本次功能所包含的几个模块，以及模块之间的信息层级是怎么样的，方便交互设计师进行逻辑分析
(5) 流程图
在进行具体设计之前，流程设计很重要，也建议把整个流程设计的结果，就是功能流程图在交互文档里面展示。一来帮助交互梳理自己页面，二来帮助开发和测试去理解设计方案，
(6) 设计方案
拿红包举例，在某一个功能模块里，会有详细的每个页面的逐层级的说明，比如发起页、具体页包括发送过程中
会将整个流程每个页面逐帧进行标注说明，因为这就是整个具体的设计方案
(7) 交互控件
要保证整个项目的完整性团队内的高度一致性，会把本次涉及到的交互控件在这里罗列出来，
(1) 封面
名称、隶属版本，方便我们项目跟进，以及项目排期，明确地描述了整个需求中所涉及到的一些相关人员，确保相关人员知晓这件事情。
(2) 目录
两个标准，一是结构清晰，二是命名准确，整个交互文档目录就是整个交互文档的信息架构，在检查新同学交互文档时，会先看整个文档结构是否清晰，如果架构都没搞清楚怎么证明设计方案是靠谱的
(3) 修订记录
实时更新，方便查看
(4) 业务流程图
一般放在产品需求文档，建议在交互稿里也体现，这样能够将需求进行很好的梳理，方便测试和开发在一份交互稿里面就能够去理解我们的业务需求是怎么样的。包括具体的实现方案
(5) 信息架构
整个信息架构和交互文档逻辑是一样的，
(6) 交互流程图
(7) 交互方案
以上是错误的方式，正确的应该是包含具体页面流程是怎么样的，包含单个页面具体某些点的交互说明
交互方案从三个部分讲述
错误的方式：
推崇的方式：
清晰简洁的页面只说明一个事情，让条理很清晰，阅读者一眼能看明白。一个页面一个任务并不是说一个页面，一个任务涉及到多个页面，这里最好展示多个页面
在现有任务中增加一个新功能的时候，新功
来自： iamwinning > 《产品》
0条评论
发表
请遵守用户 评论公约
我是这样做交互的 – 人人都是产品经理
考虑到做交互是一个迭代过程，我会在设计稿的首页为设计的产品做一份交互更新日志，记录下交互更新时间、版本名称、更新类型、更新内容、参考需求文档与交互负责人。这部分工作不一定是由交互人员来确...
7大UI设计法则助你创造更美视觉体验
7大UI设计法则助你创造更美视觉体验。所以整理了7条设计规则，帮助ui设计师做出更好的设计。所以这个也适用于设计，这样的小交互设计能...
手机产品设计8种交付物
手机产品设计在流程上跟互联网产品设计出入不大，在交付物上也有交叉点。大公司由于职能细分，可能会有项目经理、产品经理、产品设计师...
收藏！一线互联网公司产品设计流程下篇来了
一线互联网公司产品设计流程下篇来了。产品需求文档（PRD）会经历整个产品周期被项目成员查看，遇到问题需要逐步完善并更新，当需求文档...
天津ui设计培训，工作3年我总结了这6个设计流程
天津ui设计培训，工作3年我总结了这6个设计流程。谁抓住了用户的眼球谁就更好的把控了市场，明年的UI设计更是企业产品关注的核心，那么...
一篇文章玩转UED团队设计流程
互联网大厂UED团队设计流程，通常有以下流程阶段：产品需求 >需求评审 >交互设计 >交互评审 >视觉设计 >视觉评审 >开...
竞品分析
功能范围：产品功能图，功能对比，特色功能。产品/市场/运营：相对于倾向竞品的产品分析、用户分析、策略分析。从0到1的新产品比较适合...
天天用，用户体验无时无刻不在身边
尽管互联网产品千差万别，但其用户体验设计过程一般都可划分为产品策划、交互设计、视觉设计、页面重构、产品研发、产品测试和产品发布...
用户体验设计成长之路
用户体验设计成长之路
微信扫码，在手机上查看选中内容
微信扫码，在手机上查看选中内容