画线框图容易忽略的几件事

标签: 交互设计 | 发表时间:2013-03-30 22:32 | 作者:legene
出处:http://blog.sina.com.cn/legene

通过工作中的观察与总结,我发现不少新人交互设计师以及产品人员,在画线框图时都会忽略一些重要内容,导致和视觉设计师的沟通成本增高、返工增多、工作效率下降、设计质量下降等重要问题。为了解决这些问题,一方面需要加强沟通,另一方面还需要多站在视觉的角度考虑线框图的设计,使大家的配合更默契。


那么具体怎样做呢?以下就是我工作中积累的一些心得,希望对大家有所帮助。

 

一、通过明暗对比表达

 

以前,我是这样画线框图的,这样能非常清晰的展示各模块元素之间的布局关系。然后我会告诉视觉,这些模块或元素之间的优先级关系是怎样的。但头疼的是,当界面元素很复杂的时候,视觉就难以一一记住了,这个时候就需要反复的沟通,视觉在这个过程中也非常的痛苦,经常是改的头都大了但还是有错误。




现在,我这样画线框图:




加入了明暗对比之后,界面元素的重要级关系更直观,我们不再需要跑过去跟视觉说:这N个模块中这个最重要,那个其次…… 视觉的工作效率也大大的提高了。

 

但需要注意的是:深色并不意味着比浅色更重要,要看色块之间的对比关系。比如下图:

 



“全部商品分类”是非常重要的,在深色块上用了浅色,是希望把它突出出来,让人更容易注意到。但是视觉设计师有可能会误以为浅色代表不那么重要,这个一定要提前沟通好。

 

修改前:

修改后:



二、不使用截图与颜色


很多产品人员为了能更清楚的表现想法,拼凑各种竞品的截图,组成一个页面。这样做一来不规范,二来对视觉设计师也有一定的干扰。另外不太建议在线框图上使用色彩,这样同样会对视觉设计师造成不必要的干扰。如果真的有一些关于图案的想法,可以告诉视觉设计师需要营造什么样的氛围,达到什么效果,而不是直接告诉他“画几个铜钱飞出来的样子,配一个皇榜……”




三、标记第一屏高度


第一屏高度至关重要,最重要的内容、尤其是重要的操作按钮尽可能在第一屏内显示完全,不然会对转化率有较大的影响。第一屏高度在什么位置?在1024*768分辨率下,极限情况下可定为570px;如果不那么严格的话,第一屏高度也可以定为600px。在原型稿上标明即可,这样可以给视觉设计师一个参考。但不要为了保持第一屏高度而让内容过度拥挤,这样会给视觉设计师带来不小的麻烦。




四、严格遵守栅格规范


很多产品人员或新人交互设计师都比较容易忽略这一点,没有按照栅格规范来布局,这样容易导致的结果就是:视觉设计师在按照栅格排版时,发现在交互稿中能排下的内容,在视觉稿中排不下了,这样就还得返回去改交互稿,或是修改需求内容。影响效率不说,可能还会影响最终的质量。所以在制作原型时,一定要注意这一点,同时也要保证交互稿中的字号、间距尽量符合视觉要求(比如间距最小10像素等),以免给视觉造成不必要的困扰。




五、合理的布局及间距


很多产品人员完全不考虑布局标准及美观程度,随便就把想要的内容堆到一起。这样视觉就只能重新考虑布局,无形中耽误了很多时间。另外就是前面提到的,不按照布局及间距标准画线框图,将很难准确的计算第一屏高度及每个模块的实际内容量,导致视觉返工的几率大大增加。(如下图的这种就是一个不合格的反例)




六、表达清楚UI逻辑


当设计一个内容元素较多、逻辑层级较复杂的页面时(比如表单),为了避免混乱,我们需要提前整理一下这些内容,以保证文字、链接、操作等内容的样式符合它们所代表的重要程度,并把各种复杂的情况归类成有限的几种形式,以给用户一个合理的视觉引导。(字号尽量控制在3-5种,根据情况匹配颜色)



主色调和点缀色最终由视觉设计师确定,在交互稿中有所示意即可。通过这些细致的分类,可以保证最终的字号及颜色符合逻辑,而不会给视觉设计师造成不必要的困扰(视觉考虑更多的是美观,而非令人头疼的逻辑)。




七、了解视觉趋势


时刻关注一些视觉趋势,有助于我们在审美上和视觉设计师站在较为一致的立场上,使大家的沟通更加顺畅。

从上图可以看出,目前的视觉趋势大致如下(2012):

 

 

•渐变减少,视觉风格更平面化
•通过空隙和留白来分割区域,而不是用线
•布局更规整
•文字间距变大
•蓝色链接减少,黑色文字减少,灰色文字居多
•圆角减少,直角增多
•色块的叠加很流行
•去掉不必要的视觉元素

……


我们可以把这些发现应用在线框图的设计中。




如果在绘制线框图的时候,注意以上的几点,我们会发现,和视觉设计师的沟通越来越畅通。当然我这里说的沟通不一定是语言方面的,只要工作方法得当,即使不当面交流,你也会发现设计师更懂你的想法,而且往往一步就能到位,节省了大量的时间。


快来试试吧。


  青春就应该这样绽放   游戏测试:三国时期谁是你最好的兄弟!!   你不得不信的星座秘密

相关 [交互设计 ] 推荐:

让APP简约而不简单

- 木鱼猫 - 雪鸮的啁啾
想要APP好用,就要往里不停塞东西,这似乎已经成了一种“常识”. 结果往往是,一坨,惨不忍睹,你懂的. 因为这其实也是设计师最该做的事儿,在一堆限制条件的重压下找到创新的解决方案. 这里总结了一些比较可行的方法,和大家分享. 之所以觉得还有提的必要,是因为这才是创新的源泉和交互设计师的安身立命之本,同时也在实际中面临着很大的困难.

我怎样做交互

- Cary - 网易用户体验设计中心博客
尽管很多谈及交互的书上都已经回答过了:. 发现用户需要,建立明确需求. 还是有很多对交互设计有兴趣的朋友会问我这个问题,并希望我能回答得详细,具体到我工作中的每个细节. 其实交互设计需要做什么,会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别. 下面分享下我是怎样做交互,方式不一定是最合适,希望大家多指点,共同学习进步.

POKA-YOKE – 避免无心的错误

- galaxy - 百度MUX
在1961年, 工业工程领域世界著名的品质管理专家新江滋生(Shingeo Shingo)先生根据其长期从事现场质量改进的丰富经验,首创了POKA-YOKE的概念. 简单地翻译一下,就是:避免(yokeru)无心的(inadvertent)错误(poka). 为了避免我们可爱的用户在使用产品的过程中出错,请看看设计师们都做了些什么吧:.

解决方案,而不是功能

- sam - 网易用户体验设计中心
扪心自问,你真正了解你卖给用户的是什么玩意么. 你所认为革命性的,一定会震惊世界的功能、特色,用户真的买单么. 我的意思是,我们总是习惯性的忘记一个事实:我们并不是向用户出售一款产品或者服务;我们是向用户出售一个能够搞掂问题的解决方案,它能够为用户创造价值,并让用户为这个问题少操心一点. 举个简单的例子:当你认为你在卖钻子的时候,其实用户想买的是洞.

Android 3.0(蜂巢)交互&UI设计规范

- kent.zhu - 游戏用户体验设计 | 昆仑UED团队博客
Android OS自上市以来,由于缺乏统一规划,使得不同设备在 1.5、1.6、2.0、2.1、2.2、2.3几大版本徘徊,本人用的HTC Hero(俗称G3)也是从1.5~2.3一个个版本,10多个rom手动刷机试过来的,过程及其纠结 ~. 多系统版本带来的问题就是缺乏交互、UI的一致性,外加硬件厂商HTC、摩托罗拉、三星、夏普(创新工场点心OS)、小米(MIUI)等公司热衷于UI的个性化发挥,以及民间高手的DIY rom 等因素,影响着安卓饭儿的用户体验,使各阶层用户徒增学习使用成本,也让APP开发者在不同版本兼容性间疲于奔命.

Android应用程序需不需要手动退出?

- jk - 网易用户体验设计中心博客
不止一次,也不止一个人问过这个问题. 我们不妨从了解这个系统对于应用程序管理的一些内部机制开始说明原因. 对于Android系统而言,包含”进程”和”服务”. ”进程”有正在运行的,也有刚刚离开在后台缓存的. ”服务”是一个无界面、长时间运行的应用功能,并且不会轻易被终止. 我们知道,在Android中可以快速通过主页键(home)或者使用返回键(←)逐步离开应用程序.

竞品分析

- MooM - 网易用户体验设计中心博客
关于竞品分析,之前天行(@天行Aeros)有篇文章《设计公式:简单有效的竞品分析》已经进行了介绍,本文在该文章的基础之上再进行一些分享,希望对大家有用. 竞品分析(Competitive Analysis)一词最早源于经济学领域. 市场营销和战略管理方面的竞品分析是指对现有的或潜在的竞争产品的优势和劣势进行评价.

打造难以自拔的产品

- - 雪鸮的啁啾
曾经有一个著名的心理学实验,把电极接在小白鼠的快乐中枢上,然后把开关放在小白鼠够得着的地方. 然后,小白鼠就会不停地按开关,不吃不喝、不眠不休,直到体力衰竭昏死过去. 虽然说出来不太好听,但这的确是大多数服务提供商(IT业和传统行业)梦寐以求的境界,尽可能多的占据用户的时间和精力. 当然,也算值得万幸的事,这个梦想大多停留在白日梦阶段,能基本圆梦的只有毒品之于大人,网游之于小孩.

卓越用户体验的5个共同点

- - 马健 Jerry Ma 专注于产品设计,让生活更简单
如果你已经在用移动社交的Path,你一定会非常享受其卓越的用户体验. Path拥有非常精致的设计,而且非常易于使用. 换句话说就是Path拥有非常棒的用户体验. 这不是一个高科技产品是否需要采用的决定性元素,但确是能够决定多少用户来使用的重中之重. 好的用户体验是离不开UI的,而且作用很大. 尽管我不是一个合格的Path用户,但是当打开的时候,我还是会浏览一遍.

设计师的危机感

- - 雪鸮的啁啾
有读者跟我吐槽说,你最近都不怎么更新微信公共账号了,也太没有规律了. 在这里要向大家道歉,因为这几天晚上回到家的时间都用来学习Ruby on Rails开发框架了. 新东西,学起来比较吃力,也就没空更新文章了. Ruby On Rail是37singal的David Heinemeier Hansson在开发basecamp.com的过程中分离出来的一套Ruby语言的开发框架,适用于敏捷开发Web APP,我们目前这个团队正在用它.