在设计师与工程师的团队合作过程中，常会面临到一个问题，就是规划好的视觉接口与操作流程，在实际程序实作时才发现许多冲突与不完整的地方，产生许多额外的来回沟通时间与修改调整的成本，这通常是因为没有事先规划出完整详细的操作流程 mockup，在 wireframe 产生后就着手进行视觉设计与雏形开发的分工，就很容易就发生这样的状况。
下图为其中的两个主要的页面（这里已将视觉完稿转成简单 mockup 表示），它是一个社群类的 App，左方的页面主要使用者要将自己的个人信息分享给已选定的其他人，在此页面可以勾选要分享的信息项目，也可以透过下方按钮个别新增额外的信息，完成后就按下完成按钮，就会将信息上传至服务器并分享给其他人，完成后就转场到右边的成功页面。
这个案子所提供的数据已经是精美设计完成过后的视觉图文件，它的色彩风格强烈，所有的控制组件都必须重新客制过，乍看下是个两个很正常又简单页面，感觉上没什么问题？
但是实际上这里就马上遭遇了两个问题，第一个是「加入更多信息的按钮」，在按下个这个按钮后，用户可以直接输入额外的个人信息。但是要怎么呈现呢？而客制化的输入文字框要放在哪里呢？而跳出的虚拟键盘也会影响文字框要出现在的方式与位置。
第二个则是按下「完成」按钮的后续动作，这是一个要透过网络沟通的动作，当牵扯的网络时，就必须要考虑到送出要求后等待响应的等待状态（读取状态的动画图示等）、以及传送失败时的状态与回馈，送出时按钮要呈现什么颜色呢？文案内容有需要更改成分享中吗？如果失败了要显示失败的弹出对话框还是要显示在页面中并且有重新送出的按钮？
这些似乎不是实作者可以擅自决定与完成的，于是这往来之间就无形中又增加了许多沟通的时间与成本。
接口设计并非单纯的平面视觉设计，在设计到开始实作之间，势必有些需要特别注意的地方，才能够避免遗漏掉许多应该考虑的状况，让整个设计更加完善。
需要考虑到各种状况
即使是单一的信息浏览页面中，也会有各种不同的状况与细节需要一并考虑，可以想象这些状况可能有：有信息的时候、没有信息的时候（空白状态 Blank State）、可以读取更多信息（more）的时候、已经没有更多信息的时候以及没有网络的时候。
而光是在空白状态中，就可能会需要提供不一样的接口与视觉设计，来提示用户进行其他的动作（见空白状态也可以发挥作用），另外还有当各种错误发生时的，可能会需要出现的警示讯息与接口以及不同的文字信息长短也是很常被遗忘的变量之一（见为变动的文字内容做准备）。
处理这些状态对于程序设计师来说是非常熟悉的，他们会需要针对个例外状况与状态来提供对应的功能与回馈，例如程序一打开，App 向远程服务器索取信息时，会有读取中的状态、读取失败的状态、等待使用者重新读取的状态、需要重新登入的状态等，这些都可能需要搭配接口元素来让用户能够清楚他们正处于什么阶段、让他们知道他们正在作什么。
但很可惜的是若视觉设计师只针对部分状态（以上图的例子来说，通常只有提供有信息的时候）或是理想的状态（搭配精美仿真图片与长短恰当的仿真信息内容）作优化设计，当进行工程师实作时才发现需要补上这个、补上那个，这样容易缺乏统整规划的设计。
视觉设计其实与互动、操作流程与方式是个相辅相成的好兄弟，他们之间需要良好的搭配才能一气呵成提供完美的使用经验，所以设计师在 mockup 的阶段，就需要针对各种可能遇到的状况，事先做好规划或保留弹性，可以有效加快实作时的效率。
介面操作是连续顺畅的动画
你可以想象网站或是程序的操作是一部由许多连续影格所组成的动画，而不是跳接的分格漫画，它是一个过程，不是一堆静态页面的拼接，也不是像浏览一本电子书一样，这也是为什么我们要在开发前需要做好操作流程的 mockup，只要在接口中有出现可操作的功能（例如一个按钮）我们都需要规划好操作它会出现什么样的「内容」。
这个「内容」指的不是笼统的概念，例如建立一个用户、开始上传图片等，它是透过具体的接口呈现与操作去完成一个任务，比如说我们作了一个具有账号密码登入的 App，视觉设计师可能会给你一张精美的登入页面如下：
但是即使是一个简单的登入页面，当使用者在操作这个页面时，就有可能会出现下面三种状况，如果你不是非常信赖程序实作者的设计，那么你最好也能够在设计时间就把这些情形考虑进去，并且提供这些视觉信息给工程师，节省反复来回沟通协调的时间。
在这里「登入」的按钮只是一个概念，而按下登入后出现的读取动画图标以及淡化的按钮则才是登入具体的「内容」。
虽然有很多问题本身就很难在仿真的操作流程中被显现出来，例如服务器后端开发好的 API 无法有效率的搭配规划设计出的操作流程与逻辑，也是很常在开发中期才发现，但视觉设计本身就会深深影响接口的操作，而当用户进行操作后，显示的画面势必会改变，画面的改变则势必又影响到视觉的呈现，所以设计师无可避免的在 mockup 阶段就需要花费心力去思考这些可能会发生的「变动的视觉细节」。
本文链接：http://www.mobileui.cn/easy-to-overlook-details.html本文标签: 细节, 视觉, 视觉设计
