福田做网站,福田网络公司,福田网站建设
网站建设、域名注册、虚拟主机、企业邮局、400电话等一站式服务!
返回首页 | 设为首页 | 收藏本站
网站首页 关于我们 建站套餐 成功案例 行业新闻 建站常识 网站优化 联系我们
新闻资讯  
行业新闻
建站常识
网站优化
网页设计
 
 
合作伙伴
网页设计 当前位置是:首 页 >> 网页设计
画线框图容易忽略的几件事
 双击自动滚屏
【字体: 】  发布时间:2013-4-3 12:37:08  返回上一页  

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

那么具体怎样做呢?以下就是我工作中积累的一些心得,希望对大家有所帮助。
 
一、通过明暗对比表达
 
以前,我是这样画线框图的,这样能非常清晰的展示各模块元素之间的布局关系。然后我会告诉视觉,这些模块或元素之间的优先级关系是怎样的。但头疼的是,当界面元素很复杂的时候,视觉就难以一一记住了,这个时候就需要反复的沟通,视觉在这个过程中也非常的痛苦,经常是改的头都大了但还是有错误。

现在,我这样画线框图:

加入了明暗对比之后,界面元素的重要级关系更直观,我们不再需要跑过去跟视觉说:这N个模块中这个最重要,那个其次…… 视觉的工作效率也大大的提高了。
 
但需要注意的是:深色并不意味着比浅色更重要,要看色块之间的对比关系。比如下图:
 


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

修改后:

二、不使用截图与颜色

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

三、标记第一屏高度

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

四、严格遵守栅格规范

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

五、合理的布局及间距

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


上一篇:没有了
下一篇:设计沟通的七条经验
Copyright 2012-2015 易创互联 - 福田做网站 Best View by 1024*768 All rights reserved
公司地址:深圳市宝安区龙华民治街道沙元埔大厦8003室 咨询电话:0755-29370123 咨询信箱:info@yeace.com 手机:15220210581 
我们承诺:《30天无条件退款声明》易创旗下网站:易创科技  易创博客  深圳网站建设  龙华做网站  龙岗做网站  观澜做网站  民治做网站  宝安做网站
分享到: