那些设计中容易被忽略的细节 | 盒子UI

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

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

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

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

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

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

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

需要考虑到各种状况

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

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

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

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

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

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

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

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

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

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

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