那些设计中容易被忽略的细节

标签: 设计理念 设计 设计细节 | 发表时间:2013-09-23 08:47 | 作者:dream
出处:http://www.boxui.com

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

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

example

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

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

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

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

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

需要考虑到各种状况

 

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

status status

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

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

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

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

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

 

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

mockup

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

login

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

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

login

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

相关 [设计] 推荐:

为了设计而设计

- - 幻风阁|kent.zhu'sBlog
我有个习惯,每天晚上睡前会搜罗一遍最新的App用用. 最开始的时候ios的App还相对比较朴实,强调功能的实用性,后来不知何故吹起一阵ios的App必须足够精美的怪风. 于是乎,各类App纷纷上演换装游戏,一个比一个做的精美,即使是一个很工具性的应用也把自己浓妆艳抹的往坐台小姐的风格搞……. 上周末跟Tony和Angela在下厨房喝茶闲聊,我说目前的移动产品设计可以分为2类,一类是做给用户用的,一类是做给设计师们欣赏与收藏的.

杯盖设计

- Yu - 创意设计-有趣、时尚、另类的创意
微向上的设计,在倒水完毕的时候可以让水滴顺着杯盖回流到杯子中,而不会随意的滴下来. 虽然是细小的设计,但是考虑的却是生活的便利.

再设计Redesign

- Mark - 腾讯CDC
  一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来.   对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

简约设计

- - 淘宝网通用产品团队博客
写下这个标题,那么首先得要明确什么叫简约. 简约就是让用户操作简单,让用户更快的达到自己的目的. 一个产品在于解决一个需求,如何让用户最好的完成需求就成为一个产品经理首先得要解决的问题. 那么在日常工作中,我们又有什么可以做的呢. 在《简约至上》里面有四种策略,但是有的东西太高级了,在平时的工作未必能够用得上,所以我自己来提炼一下,看看日常工作中能够遇到并且可以解决问题的方法.

再设计Redesign

- 小趴 八足趴 八足 ramener - 互联网的那点事...
一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来. 对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

HBase表设计

- - 互联网 - ITeye博客
默认情况下,在创建HBase表的时候会自动创建一个region分区,当导入数据的时候,所有的HBase客户端都向这一个region写数据, 直到这 个region足够大了才进行切分. 一种可以加快批量写入速度的方法是通过预先创建一些空的regions,这样当数据写入HBase时,会按 照 region分区情况,在集群内做数据的负载均衡.

ODS设计

- - 开源软件 - ITeye博客
在一般的数据仓库应用系统中,根据系统体系结构的不同,数据仓库设计的内容和范围不尽相同,并且设计方法也不尽相同,下面的两幅图示分别表示带有ODS的 数据仓库应用系统体系结构和不带ODS的数据仓库应用系统体系结构. 本文将说明两个体系结构上的差异以及这种差异造成的设计方法的不同,并且重点介绍带有 ODS的体系结构中数据仓库的设计方法.

HBase Schema 设计

- - IT瘾-dev
HBase 与传统关系数据库(例如MySQL,PostgreSQL,Oracle等)在架构的设计以及为应用程序提供的功能方面有很大的不同. HBase 权衡了其中一些功能,以实现更好的可扩展性以及更灵活的模式. 与关系数据库相比,HBase 表的设计有很大的不同. 下面将通过解释数据模型向您介绍 HBase 表设计的基础知识,并通过一个例子深入探讨 HBase 表的设计.

HBase RowKey 设计

- - IT瘾-dev
1.1 RowKey对查询的影响. HBase中 RowKey 用来唯一标识一行记录. 在 HBase 中检索数据有以下三种方式:. 通过 get 方式,指定 RowKey 获取唯一一条记录. 通过 scan 方式,设置 startRow 和 endRow 参数进行范围匹配. 全表扫描,即直接扫描整张表中所有行记录.