交互式网站设计
啥是交互规划
用户界面有两部分的规划：交互规划和视觉规划。鄙人图中，左面和右边分别是微信的交互规划和视觉规划。
jiaohu1
jiaohu1
交互规划 vs. 视觉规划
交互规划的产出物是可交互的低保真原型，规划内容包含：
信息架构； 页面规划； 流程跳转；
1. 信息架构
信息架构，是为了让用户在运用APP、软件、页面的时分，可以疾速找到自个需要的信息、材料、功用，而且在运用的进程不会走失。它有层级、有逻辑次序、要能反映信息（功用）的首要程度和联系。
信息架构的组成部分：
安排体系：重视如何安排信息。比方小说，按篇幅，可以分为短篇、中篇、长篇；按时代，可以分为：古代、近代、现代、今世；按体裁，可以分为武侠、推理、前史、言情等等……从哪个视点来安排、究竟多少层适宜，需要规划者的判别和权衡。比方当当网的商品安排方法：
jiaohu2
jiaohu2
安排体系
导航体系：帮忙用户了解他在哪个方位，以及可以到何处去。比方微信的功用导航：
jiaohu3
jiaohu3
微信功用导航
jiaohu4
jiaohu4
豆瓣功用导航
查找体系：重视用户如何查找信息。比方淘宝的查找：
jiaohu5
jiaohu5
查找体系
标签体系：重视如何表明信息。咱们可以把标签体系了解为如何为信息和它的安排方法命名。比方咱们方才说到的小说按体裁，可以分为武侠、推理、前史、言情等等，其间的武侠、推理这些即是信息的标签。
一些大型网站，比方淘宝、当当、京东等，设有专门的信息架构师人物。而大多数的APP、运用软件中，信息架构由交互规划师规划。
2. 页面规划
页面规划的工作，即是断定每个页面有哪些元素，它们方位、次序、分组，要杰出啥元素，弱化或躲藏啥元素。
jiaohu6
jiaohu6
在规划规划时，有一个要特别留意的工作，即是尽也许削减父页（一切规划抽象出来的模板）。比方说360安全路由的APP，它的父页如下，一切页面规划，都是由这四个模板变化而来。这样的软件，用户在运用时，会感受一致、易学。
jiaohu7
jiaohu7
360安全路由
3. 流程跳转
规划页面之间的跳转逻辑。经过连接、按钮仍是手势；单击仍是双击；上划仍是下划……咱们在做可交互的原型时，要尽也许靠近软件的终究作用。
jiaohu8
jiaohu8
交互和视觉的分工
交互规划师在规划页面规划时，为了杰出主次，会规划字体巨细、距离、色彩等内容，但这不是终究作用。终究的字体、色彩、图像、图标、巨细、距离等，由视觉规划师断定。
交互规划师在规划流程跳转时，会规划过场动画，但这同样不是终究作用。终究作用由视觉规划师（或动画规划师）断定。
区别交互和视觉有一种疾速判别法，那即是web工程师平常写的css里的特点和参数，都归于视觉规划的范畴。所以许多公司会多招几个UI规划师，他们不仅仅担任视觉规划，还担任输出css样式表。
交互和视觉对人的需要
交互规划和视觉规划对人的需要不相同，而且通常越往深化做，这两者所需的性情、布景和思想方法不同越大。可以简略地了解，交互规划是靠理性和逻辑驱动，而视觉规划是靠感性驱动。这也是为啥当前的交互规划师中理工科院的学生占了很大比例。业界也有许多开发工程师转做交互规划的成功案例。所以做开发，学交互规划有优势。
交互和视觉高度穿插
我上面说，交互规划和视觉规划的分工，也说它们对人的需要不相同。这也许会让我们误以为，这两个人物的工作比照独立，各自担任各自的内容。交互不必管视觉，视觉不必管交互。
但这是不对的。交互和视觉，是高度穿插的两个范畴，无法简略的分隔。
首要，交互规划师必定要有极好的视觉规划的感受，因为一个页面规划的好坏，会直接影响视觉的发挥。假如交互规划师导入一个没主次，结构很差劲的规划给视觉规划师，他只要两个挑选，一、降低自个的水平，随意做一个；二、自个着手，从头规划一个。
其次，交互规划会影响视觉规划，视觉规划也有也许反过来，让交互规划做修正。举个例子，咱们近来正在做的一个功用。
jiaohu9
jiaohu9
最早的交互规划里没有列表挑选功用。后来在视觉规划进程中发现，咱们的窗口巨细，假如要保证视频旁边不呈现黑边，也许会留很大得空地，假如规划满了，又会致使视频呈现黑边。一种方法，是把底下的点赞、共享、评论移上来，放到右边，但这样的排版如何也不会满足。况且咱们这个页面最中心的意图，是让用户看视频。后来咱们想了一下，增加了选集的功用，尽管这样增加了开发工作量，可是对用户来说，在这页面可以直接导航到其它视频，运用体会更好，也处理了咱们看视频黑边的疑问。
说这些想要表达的是，咱们要时刻留意，自个是在同视觉规划师合作完成一个著作。咱们规划的好坏，会影响他的工作。所以在介入实在项当前，咱们要经过许多的学习+操练，到达准规划师水平。
如何学习交互规划
1.看
交互规划师需要有好的视觉规划的感受，需要有底子的审美才能。如何提高审美才能？只要一种方法，看。
咱们要看许多优异的规划著作。如今有许多渠道可以很简单的找到世界上顶尖的规划师们规划的东西。比方behance、pinterest、FWA、dribbble等等……假如嫌国外的拜访太慢，也可以挑选国内的，比方花瓣。
不要只看软件界面，也看看其它范畴的规划著作，好的商品、好的修建、好的电影海报、好的拍摄著作、好的艺术著作。看到喜爱的，把它们搜集起来。
看了后，该如何判别自个的审美才能有提高呢？
隔几个月去看看自个前几个月喜爱的东西，其时觉得不错，如今是不是觉得丑的掉渣？假如是的话，审美水平就在前进。
还有一种方法，把自个平常喜爱的、会共享的规划，同规划范畴的人交流，听听他们的定见。一个专业的规划师，不会只说，这个好，那个欠好，他们说为啥好，为啥欠好，比方「这个界面主次不可杰出，要点元素没有着重出来」、「没有引导用户的视野」等等等等……
2.用
咱们在dribble、在花瓣，看的都是单个页面。交互规划不仅仅规划一个个页面，它还得把页面串起来。所以看单个页面还不可，咱们要用、要体会实践的商品，看看他人是如何把一个个页面组合成商品，页面和页面间的过场是如何的。
如何用呢？很简略，咱们每个人都有手机或pad。去下载优异的APP，每个APP花20分钟，把一切页面、一切功用跑一遍。优异的APP来历，可以是运用商场每个分类下的Top20，也可以来自一些优异的安排、用户引荐，如最美运用、如知乎上的APP引荐等。
我还有一个很诚恳的建议。假如有条件的话，最佳买个MAC。为啥规划师喜爱用MAC？咱们看几张比照图。
PC和MAC上的QQ。
jiaohu10
jiaohu10
PC和MAC上的运用商场。
jiaohu11
jiaohu11
PC上的「精巧」PPT模板，和MAC上的keynote模板。
jiaohu12
jiaohu12
MAC的软件比PC的软件高雅太多，彻底不在一个level。假如咱们每天看的、用的都是最佳的商品，咱们的审美才能自然会提高，对啥是好规划，啥是坏规划会更敏锐，更有感受。
3. 想
认知科学研究发现：
世界上最佳的象棋选手之间的距离，本来并不是他们考虑才能的差异，或者是否能走出一招妙棋，而是他们了解的棋谱的多寡。
做交互规划也是这样，决议交互规划师的规划水平，是在做规划时，规划师可以想起多少个类似的的规划，并学习、组合、改善它们，变成自个的规划。
咱们看了那么多优异的规划，咱们用了那么多优异的商品，如何样才能在需要的时分记起它们呢？认知科学给出的答案很简略，去想，去考虑。
相同东西进入咱们的大脑，假如咱们没有考虑过，大脑会以为这个东西没用，就扔掉它，不存下来。但假如咱们细心考虑过它，大脑就会自个做个判别，以为今后有也许要再度想起它，就把它存下来。
所以不只要看，要用，还要想。
比方咱们看到这个页面，要想：
1.信息架构是如何的？有没有层级，有没有逻辑次序？能不能反映它们的首要程度和联系？ 2.页面规划是如何的？它们方位、次序是如何的？它是如何分块的？它是如何杰出首要任务的？ 3.有没有其它规划亮点，比方好的隐喻，比方视觉如何营建空气。
jiaohu13
jiaohu13
把一切考虑成果记录下来。记住多了，构成自个的观念后写成文章，同其他人共享。
4. 做
一开始仿照，在这个进程中，学习东西的运用，把它用熟。
为啥要先把东西用熟呢？道理很简略，假如东西还不了解，大脑会把首要精力都耗费在东西的运用上，底子腾不出空间来考虑规划的事。
当东西运用没有任何疑问后，做实在的商品规划。
咱们可以直接在项目中实践，但大多数人应当没这个条件，那如何做？
从头规划现有的商品。比方咱们可以从头规划微信，从头规划简书；咱们觉得某个软件规划的不可好，从头规划它。经过这种练习方法，提高规划技能，到达准规划师的水平。
那么，一个商品（或功用）的规划流程，是如何的呢？
1.清晰运用场景
咱们常常看到一个被分化后的功用目标项如下：
我要一个长途操控的功用。教师可以操控某个学生的电脑。
假如依照这个需要做的话，在商品主页加一个长途操控的按钮，点一下，教师可以挑选某个学生进行操控，这个功用就规划好了。
可是实践上教师是如何用的呢？咱们和商品经理（或用户）交流，会发现教师运用这个功用的场景是：
1.教师检查屏幕预览图，觉得某个学生也许做的不错，双击检查学生完好的屏幕。发现学生做的极好，就转播给其他学生看，在这个进程中会帮忙学生微调工作。 2.学生有疑问时，举手恳求教师帮忙，教师在讲台上帮忙处理疑问，（并将这个帮忙进程广播给其它同学。
这即是运用场景。场景十分十分首要。它决议了功用入口放在哪里比照适宜，应当杰出它，仍是弱化它。它的前一步是啥，下一步是啥。
只要清晰了实在的运用场景，才能规划出用户可用的商品。
2.搜集资料
去前面说到的规划网站，或是平常用的软件商找同类规划来比照和剖析，看看其他人是如何规划的。比方长途帮忙，可以看看QQ是如何规划的。把它的全部流程跑几遍，而且把每个进程截图下来。学习它规划好的地方。
jiaohu14
jiaohu14
3.画草图
有了主意今后，在纸上画草图。
草图里面，首要是把每个页面都有哪些功用、元素，摆放次序定明白。这个即是整理咱们规划思路的进程。
这个进程必定要有。千万不要一上来就做原型，那会花许多时刻在对齐、排版等等琐碎的工作上，咱们也没方法一会儿看到全貌，把每个页面都想明白了，页面流程如何跳转都想好了，再搬到Axure上。
4.画低保真原型
把草图搬到Axure上。这个进程还会调整，修正。
5.可用性测试，调整规划
做完动态的、可交互的原型后，找三个用户试用下（不必定要实在的终究用户，别的，不必太多用户，三个用户就现已可以发现70%要害疑问），调查他们在运用的时分会碰到啥疑问，找出最要害的疑问，进行调整。
这个期间完成后，就可以提交开发了。
6.弥补细节规划
有一些很细节的流程，咱们没方法在一个交互稿里面彻底体现，比方页面内容为空时，如何办；数据加载犯错时，如何办。这个时分用文档来弥补这些分支流程。咱们就像写开发文档相同，把全部软件的一切分支流程、反常流程都过一遍，记下来，然后提交开发。文档形式不首要，只要能传递考虑成果就行。
以上仅仅一个大约的流程，在实践操做的时分，还会碰到许多疑问。有一些东西我会在后面共享的时分再细讲，还有一些东西，也许就需要我们实践着手，自个去摸索和沉积。
