广东快3>WIKI库>学习产品设计>原型线框图视频

原型线框图视频



轻松画好线框图


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


1.通过明暗对比表达


界面元素很复杂的时候,视觉就会忘记一些事情,很难一一记住。这时就要反复的沟通,视觉在这个过程中需要经常地修改,但还是有错误的地方。


video1.png


2.不要使用截图与颜色


很多产品人员为了能够清楚地表达想法,拼凑各种精品的截图,组成一个页面。这样做,一是不规范,二是对视觉设计师有一定的干扰。另外不太建议在新框图上使用色彩,这同样会给视觉设计师造成不必要的困扰。如果真的需要加入一些图案、想法,可以告诉设计师需要营造一个什么样的氛围、达到什么样的结果,这样设计师会根据需求进行设计。


video2.png


3.标记第一屏的高度


第一屏的高度至关重要,在重要的内容尤其是重要的操作按钮尽可能都放在第一屏内显示完全,不然会对转化率有较大的影响。第一屏的位置,一般在1024与768的分辨率下,我们将它定为750像素。如果不是那么严格的话,第一屏高度就定为600,在原型稿上标明即可,这样是给设计师一个参考。但是不要为了保持第一屏高度而让内容过度的拥挤,这样回个视觉设计师带来不小的麻烦。


video3.png


4.严格遵守栅格规范


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


video4.png


5.合理的布局,清楚UI逻辑关系


很多产品人员完全不考虑布局标准及美观程度,随便吧想要的内容对到一起,这样视觉就要重新考虑布局,无形中耽误很多时间。当设计一个内容元素比较多、逻辑层级复杂的页面时,为了避免混乱,我们需要提前整理一下文字内容、连接操作等。把各种复杂的情况归类,给用户一个合理的视觉引导。


video5.png



Axure画线框图


打开Axure软件,制作一个商城的线框图。


广东快3在产品开发之前我们进行了需求分析,接下来产品人员制作一个线框图的阶段。我们导入某商城的截图,是为了我们方便参考上面的一些页面信息,左侧为商品导航栏,右侧为广告位推送,中间是图片轮播大概可以看为三栏。所以我们拉一下辅助线并锁定,辅助线和网格是为了方便我们更精准的找到位置。先看一下顶部都有什么,找到“文字标签”双击,“送至北京”,平行拖拽。“您好,请登录”,复制拖拽,调整一下位置,把它转化为模板,可以看到左侧有一个新增模板。拖拽一个矩形,是顶部广告位,再往下可以设一个logo,接下来就是“搜索”,复制,可以拼凑成一个颜色,调整位置。接下来就是“购物车”。再往下看,左侧全为商品分类,填充并调整颜色。标题,调整位置等。删掉图片,拖进一个矩形,是图片轮播的位置。拖拽单位符,“今日推送”,还有广告位。右侧是“京东快报”,下面拖拽复制、调整位置。这就是利用Axure制作的一个线框图。


video6.png


video7.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录