主页/ 电商学院/网站开发/APP开发原型图设计方法

APP开发原型图设计方法

归类:网站开发
在APP开发项目中,在进行原型设计时,画线框图时都会忽略一些重要内容,导致和视觉设计师的沟通成本增高、返工增多、工作效率下降、设计质量下降等重要问题。

为了解决这些问题,一方面需要加强沟通,另一方面还需要多站在视觉的角度考虑线框图的设计,使大家的配合更默契。



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

不使用竞品截图拼凑与颜色
很多产品人员为了能更清楚的表现想法,拼凑各种竞品的截图,组成一个页面。这样做一来不规范,二来对视觉设计师也有一定的干扰。如果真的有一些关于图案的想法,可以告诉视觉设计师需要营造什么样的氛围,达到什么效果。

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

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

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

表达清楚UI逻辑
当设计一个内容元素较多、逻辑层级较复杂的页面时,为了避免混乱,我们需要提前整理一下这些内容,以保证文字、链接、操作等内容的样式符合它们所代表的重要程度,并把各种复杂的情况归类成有限的几种形式,以给用户一个合理的视觉引导。

如果在绘制线框图的时候,注意以上的几点,我们会发现,和视觉设计师的沟通越来越畅通。
0 喜欢
368 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交