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