如何在网页上画线框图(网页线框图手绘)

如何在网页上画线框图,网页线框图手绘

内容导航：

怎样在网页中画线条

网页线框图怎么做

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

3D怎么渲染线框图

一、怎样在网页中画线条

如果你是在网页中编写代码的话如HTML的话加上这么一句就OK了

至于按键你可以写一个程序让他画出直线也可以

二、网页线框图怎么做

制作方法还是很多的，你可以通过CS+DIV的方式来实现也可以用内联式。
方法很多的。
看你实际的掌握情况。
你给目标图形一个线框材质，那他就显示线框了。
使用vr，贴图里面选择vrayedgedtex，然后把这个材质给相应的图形，就可以了。
在全局覆盖材质那里贴一个vray标准材质，在vray标准材质的漫反射颜色那里选白色，然后在通道那里贴一个vray边界纹理贴图，vray边界纹理贴图颜色选成黑色。
像素是边界纹理的大小，像素你可以自己把握

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

一、通过明暗对比表达

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

现在，我这样画线框图：

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

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

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

修改前：

修改后：

二、不使用截图与颜色

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

三、标记第一屏高度

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

四、严格遵守栅格规范

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

五、合理的布局及间距

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

六、表达清楚UI逻辑

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

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

七、了解视觉趋势

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

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

?渐变减少，视觉风格更平面化

?通过空隙和留白来分割区域，而不是用线

?布局更规整

?文字间距变大

?蓝色链接减少，黑色文字减少，灰色文字居多

?圆角减少，直角增多

?色块的叠加很流行

?去掉不必要的视觉元素

……

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

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

四、3D怎么渲染线框图

答：1、首先，打开你要渲染的文件；2、全选所有模型，给同一个材质球；3、打开VR渲染面板，找到“Overr…”这一栏，关联复制材质球；4、在材质球“位图”处给予“EdgestTex”这个材质；5、左边颜色，代表线框显示的颜色，右边数字，代表线框的粗细；6、然后渲染，看看是不是你想要的。