在设计师与工程师的团队合作过程中，常会面对到一个问题，就是规划好的视觉介面与操作流程，在实际程序实作时才发现许多冲突与不完整的地方，产生很多额外的来回沟通时间与修改调整的成本，这通常是因为没有事先规划出完整的详细的操作流程模型，在线框产生后就着手进行视觉设计与雏形开发的分工，就很容易就发生这种情况。

以个人曾经接触过的案子为例，下图为其中的两个主要的页面（这里已将视觉完成稿转成简单的模型表示），它是一个社群类的App，左方的页面主要使用者要将自己的个人资讯分享给已扩展的其他人，在此页面可以切换到分享的资讯项目，也可以透过下方按钮另加额外的资讯，完成后就按下完成按钮，就会将资讯上传至伺服器并分享给其他人，完成后就转场到右边的成功页面。

这个案子所提供的资料已经是精美的设计完成过后的视觉图档，它的色彩风格强烈，所有的控制元件都必须重新客制过，乍看下是一个两个很正常又简单的页面，感觉上没什么问题？

但是实际上这里就马上遭遇了两个问题，第一个是“加入更多资讯的按钮”，在点击一个这个按钮后，使用者可以直接输入额外的个人资讯。但是要怎么呈现呢？而客制化的输入文字框要放在哪里呢？而跳出的虚拟键盘也会影响文字框要出现在的方式与位置。

第二个则是点击“完成”按钮的后续动作，这是一个要透过网路沟通的动作，当牵扯的网路时，就必须要考虑到送出要求后等待回应的等待状态（读取状态）的动画图示等），以及传送失败时的状态与回馈，送出时按钮要呈现什么颜色呢？文案内容有需要更改成分享中吗？如果失败了要显示失败的投放还是要显示在页面上中和有重新送出的按钮？

这些似乎不是实作者可以擅自决定与完成的，于是这往来之间就无形中又增加了许多沟通的时间与成本。

介面设计并非单纯的平面视觉设计，在设计到开始实作之间，势必有些需要特别注意的地方，才能够避免遗漏掉落许多应该考虑的状况，让整个设计更加完善。

需要考虑到各种状况

即使是单一的资讯浏览页面中，也会有各种不同的状况与细节需要一并考虑，可以想像这些状况可能有：有资讯的时候，没有资讯的时候（空白状态Blank State），可以读取更多资讯（更多）的时候，已经没有更多资讯的时候以及没有网路的时候。

而光是在空白状态中，就可能会需要提供不一样的介面与视觉设计，来提示使用者进行其他的动作，另外还有当各种错误发生时的，可能会需要出现的警示讯息与介面以及不同的文字资讯长短也是很常被遗忘的变数之一。

处理这些状态对于程式设计师而言是非常熟悉的，他们会需要针对个别例外状况与状态来提供对应的功能与回馈，例如程式一打开，App向远端伺服器索取资讯时，会有读取中的状态，读取失败的状态，等待用户重新读取的状态，需要重新登录的状态等，这些都可能需要搭配介面元素来让使用者能够清楚地知道他们正处于什么阶段，让他们知道他们正在作什么。

但很可惜的是若视觉设计师只针对部分状态（以上图的例子来说，通常只有提供有资讯的时候）或理想的状态（搭配精美模拟图片与长短恰当的模拟资讯内容）作优化设计，当进行工程师实作时才发现需要补上这个，补上那个，这样容易缺乏统整规划的设计。

视觉设计其实与互动，操作流程与方式是个相辅相成的好兄弟，他们之间需要良好的搭配才能一气呵成提供完美的使用经验，所以设计师在样机的阶段，就需要针对各种可能遇到的状况，事先做好规划或保留弹性，可以有效加快实作时的效率。

界面操作是连续顺畅的动画

你可以想像网站或是程式的操作是一部由许多连续影格所组成的动画，而不是跳接的分格漫画，它是一个过程，不是一堆静态页面的拼接，也不是像浏览一本电子书一样，这也是为什么我们要在开发前需要做好操作流程的模型，只要在介面中有出现可操作的功能（例如一个按钮）我们都需要规划好操作它会出现某种的“内容”。

这个「内容」指的不是笼统的概念，例如建立一个使用者，开始上传图片等，它是透过具体的介面呈现与操作去完成一个任务，例如说我们作了一个拥有帐号密码登入的App，视觉设计师可能会给你一张精美的登录页面如下：

但是即使是一个简单的登录页面，当使用者在操作此页面时，就有可能会出现下面某种状况，如果你不是非常值得信赖的程序实际作者的设计，那么你最好也能够在设计阶段就把这些出于考虑进去，并提供这些视觉资讯给工程师，减少反覆来回沟通协调的时间。

在这里「登入」的按钮只是一个概念，而按下登入后出现的读取动画图示以及淡化的按钮则才是登入具体的「内容」。

虽然有很多问题本身就很难在模拟的操作流程中被显露，例如伺服器逐步开发好的API无法有效率的搭配规划设计出的操作流程与逻辑，也是很常在开发中期才发现，但视觉设计本身就会深深影响介面的操作，而当使用者进行操作后，显示的画面势必会改变，画面的改变则势必又影响到视觉的呈现，所以设计师无可避免的在mockup阶段就需要花费心力去思考这些可能会发生的「变动的视觉细节」。