交互设计分享(一).pdfVIP

交互设计分享 （一 ） 如果你看了很多优秀的设计 ，但是自己却仍然还觉得有 欠缺。来看看作者梳理的掌握交互 设计的方法吧。 最近两个月给公司的伙伴们做交互设计的分享 ，这是第一期分享的内容。在这次分享中 ，我认真梳 理了交互设计师掌握和精通这门技艺的方法。我认为 ，如果想成为拔尖的设计师 ，只有这条路可走 。 什么是交互设计 用户界面有两部分的设计 ：交互设计和视觉设计。在下图中 ，左边和右边分别是微信的交互设计和 视觉设计。 交互设计 vs. 视觉设计 交互设计的产出物是可交互的低保真原型 ，设计内容包括 ： 信息架构 ； 页面布局 ； 流程跳转 ； 1. 信息架构 信息架构 ，是为了让用户在使用A PP、软件、网页的时候 ，能够快速找到自己需要的信息、资料、 功能 ，并且在使用的过程不会迷路。它有层级、有逻辑顺序、要能反映信息 （功能 ）的重要程度和 关系。 信息架构的组成部分 ： 组织系统 ：关注如何组织信息。比如小说 ，按篇幅 ，可以分为短篇、中篇、长篇 ；按年代 ，可以 分为 ：古代、近代、现代、当代 ；按题材 ，可以分为武侠、推理、历史、言情等等……从哪个角度 来组织、到底多少层合适 ，需要设计者的判断和权衡。比如当当网的商品组织方式 ： 组织系统 导航系统 ：协助用户了解他在哪个位置 ，以及可以到何处去。比如微信的功能导航 ： 微信功能导航 豆瓣功能导航 有哪些信誉好的足球投注网站系统 ：关注用户如何有哪些信誉好的足球投注网站信息。比如淘宝的有哪些信誉好的足球投注网站 ： 有哪些信誉好的足球投注网站系统 标签系统 ：关注如何表示信息。我们可以把标签系统理解为如何为信息和它的组织方式命名。比如 我们刚才提到的小说按题材 ，可以分为武侠、推理、历史、言情等等 ，其中的武侠、推理这些就是 信息的标签。 一些大型网站 ，比如淘宝、当当、京东等 ，设有专门的信息架构师角色。而大部分的A PP、应用软 件中 ，信息架构由交互设计师设计。 2. 页面布局 页面布局的工作 ，就是确定每个页面有哪些元素 ，它们位置、顺序、分组 ，要突出什么元素 ，弱化 或隐藏什么元素。 在设计布局时 ，有一个要特别注意的事情 ，就是尽可能减少父页 （ 有布局抽象出来的模板 ）。比 如说360安全路由的A PP ，它的父页如下 ， 有页面布局 ，都是由这四个模板变化而来。这样的 软件 ，用户在使用时 ，会感觉统一、易学。 360安全路由 3. 流程跳转 设计页面之间的跳转逻辑。通过链接、按钮还是手势 ；单击还是双击 ；上划还是下划……我们在做 可交互的原型时 ，要尽可能贴近软件的最终效果。 交互和视觉的分工 交互设计师在设计页面布局时 ，为了突出主次 ，会设计字体大小、间距、颜色等内容 ，但这不是最 终效果。最终的字体、颜色、图片、图标、大小、间距等 ，由视觉设计师确定。 交互设计师在设计流程跳转时 ，会设计过场动画 ，但这同样不是最终效果。最终效果由视觉设计 师 （或动画设计师 ）确定。 区分交互和视觉有一种快速判断法 ，那就是web工程师平时写的css里的属性和参数 ，都属于视觉设 计的范畴。 以很多公司会多招几个UI设计师 ，他们不仅仅负责视觉设计 ，还负责输出css样式表。 交互和视觉对 的要求 交互设计和视觉设计对人的要求不同 ，并且往往越往深入做 ，这两者 需的性格、背景和思维方式 差别越大。可以简单地理解 ，交互设计是靠理性和逻辑驱动 ，而视觉设计是靠感性驱动。这也是为 什么目前的交互设计师中理工科院的学生占了很大比例。业界也有很多开发工程师转做交互设计的 成功案例。 以做开发 ，学交互设计有优势。 交互和视觉高度交叉 我上面说 ，交互设计和视觉设计的分工 ，也说它们对人的要求不同。这可能会让大家误以为 ，这两 个角色的工作比较独立 ，各自负责各自的内容。交互不用管视觉 ，视觉不用管交互。 但这是不对的。交互和视觉 ，是高度交叉的两个领域 ，无法简单的分隔。 首先 ，交互设计师一定要有很好的视觉设计的感觉 ，因为一个页面布局的好坏 ，会直接影响视觉的 发挥。如果