交互设计分享（一）

如果你看了很多优秀的设计，但是自己却仍然还觉得有所欠缺。来看看作者梳理的掌握交互设计的方法吧。

最近两个月给公司的伙伴们做交互设计的分享，这是第一期分享的内容。在这次分享中，我认真梳理了交互设计师掌握和精通这门技艺的方法。我认为，如果想成为拔尖的设计师，只有这条路可走。

用户界面有两部分的设计：交互设计和视觉设计。在下图中，左边和右边分别是微信的交互设计和视觉设计。

交互设计 vs. 视觉设计

交互设计的产出物是可交互的低保真原型，设计内容包括：

信息架构； 页面布局； 流程跳转；

1. 信息架构

信息架构，是为了让用户在使用APP、软件、网页的时候，能够快速找到自己需要的信息、资料、功能，并且在使用的过程不会迷路。它有层级、有逻辑顺序、要能反映信息（功能）的重要程度和关系。

信息架构的组成部分：

组织系统：关注如何组织信息。比如小说，按篇幅，可以分为短篇、中篇、长篇；按年代，可以分为：古代、近代、现代、当代；按题材，可以分为武侠、推理、历史、言情等等……从哪个角度来组织、到底多少层合适，需要设计者的判断和权衡。比如当当网的商品组织方式：

组织系统

导航系统：协助用户了解他在哪个位置，以及可以到何处去。比如微信的功能导航：

微信功能导航

豆瓣功能导航

搜索系统：关注用户如何搜索信息。比如淘宝的搜索：

搜索系统

标签系统：关注如何表示信息。我们可以把标签系统理解为如何为信息和它的组织方式命名。比如我们刚才提到的小说按题材，可以分为武侠、推理、历史、言情等等，其中的武侠、推理这些就是信息的标签。

一些大型网站，比如淘宝、当当、京东等，设有专门的信息架构师角色。而大部分的APP、应用软件中，信息架构由交互设计师设计。

2. 页面布局

页面布局的工作，就是确定每个页面有哪些元素，它们位置、顺序、分组，要突出什么元素，弱化或隐藏什么元素。

在设计布局时，有一个要特别注意的事情，就是尽可能减少父页（所有布局抽象出来的模板）。比如说360安全路由的APP，它的父页如下，所有页面布局，都是由这四个模板变化而来。这样的软件，用户在使用时，会感觉统一、易学。

360安全路由

3. 流程跳转

设计页面之间的跳转逻辑。通过链接、按钮还是手势；单击还是双击；上划还是下划……我们在做可交互的原型时，要尽可能贴近软件的最终效果。

交互和视觉的分工

交互设计师在设计页面布局时，为了突出主次，会设计字体大小、间距、颜色等内容，但这不是最终效果。最终的字体、颜色、图片、图标、大小、间距等，由视觉设计师确定。

交互设计师在设计流程跳转时，会设计过场动画，但这同样不是最终效果。最终效果由视觉设计师（或动画设计师）确定。

区分交互和视觉有一种快速判断法，那就是web工程师平时写的css里的属性和参数，都属于视觉设计的范畴。所以很多公司会多招几个UI设计师，他们不仅仅负责视觉设计，还负责输出css样式表。

交互和视觉对人的要求

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!