网站制作时注意的几个问题通过对网站制作的观察和总结，我发现很多新的互动设计师和产品人员在绘制线框时忽略了一些重要的内容，导致了与视觉设计师沟通成本较高、返工较多、工作效率较低、设计质量较低等重要问题。为了解决这些问题，一方面我们需要加强沟通，另一方面，我们需要从视觉的角度考虑线框的设计，这样每个人都可以更加默契地合作。
网站制作通过在工作中的观察和总结，我发现很多新的设计师和产品交互，在图表中画线会忽略一些重要的内容，导致和设计师沟通的成本增加，返工增加，工作效率降低，设计质量下降的问题。为了解决这些问题，一方面需要加强沟通，另一方面，也需要站在视觉设计的角度绘制线路图，使人们更加和谐的合作。
那么具体怎么做呢？以下是我在工作中积累的一些经验，希望对大家有所帮助。
那么我们能做些什么呢？以下是我在工作中积累的一些经验，希望对大家有所帮助。
1.通过明暗对比来表达
过去我用这种方式画线框图，可以很清楚的显示模块元素之间的布局关系。然后我将告诉愿景这些模块或元素之间的优先关系是什么。但令人头痛的是，当界面元素很复杂时，视觉很难一一记住它们。这时，反复交流是必要的，而在这个过程中视觉也是非常痛苦的。通常情况下，头部会发生变化，但仍然会有错误。
以前，我是在这样一个线框，它可以清楚地显示每个模块布局元素之间的关系。然后我会告诉视觉，这些模块或元素之间的优先关系是什么。麻烦的是，当界面元素非常复杂的时候，很难一一记住视觉，这一次就需要反复沟通，视觉在这个过程中是非常痛苦的，经常会把头都变大却有错误。
现在，我画一个这样的线图：
现在，我确实画了一条线
加入明暗对比后，界面元素重要层次之间的关系更加直观，所以我们不需要跑过去对视觉说：这是N个模块中最重要的，那是第二个……视觉的工作效率大大提高了。
经过明暗对比，界面元素之间的重要关系更加直观，我们不再需要用视觉跑过去说：这个N模块是最重要的，其次.视觉工作效率大大提高。
然而，应该注意的是，深色并不意味着它比浅色更重要，而是取决于色块之间的对比度。
但是请注意，深色并不意味着比浅色更重要，要看对比颜色之间的关系。
“所有商品的分类”非常重要。浅色用在深色块上，希望突出它，让人们更容易注意到。然而，视觉设计师可能会错误地认为浅色意味着不那么重要，所以这必须提前沟通好。
‘所有商品的分类’非常重要，黑暗中的光块，是希望使它脱颖而出，使人们更容易注意。但是视觉设计师可能会错误地认为光代表不那么重要，这必须提前沟通好。
第二，不要使用截图和颜色
不要搭配颜色使用。
为了更清楚地表达想法，许多产品人员将竞争产品的截图拼凑成一个页面。这是不标准的，它也在某种程度上干扰了视觉设计师。此外，不建议在线图上使用颜色，这也会对视觉设计者造成不必要的干扰。如果你真的对图案有一些想法，你可以告诉视觉设计师需要创造什么样的氛围和达到什么样的效果，而不是直接告诉他“画几个铜币飞出来，配一个帝国的名单……”
许多产品为了更好地表现创意，在截图中拼凑出各种竞争产品，组成一个页面。这样做是不规范的，对视觉设计者有一定的干扰。也不要在图表上推荐在线使用颜色，这样也会对视觉设计者造成不必要的干扰。如果有关于设计理念的东西，可以告诉视觉设计师需要营造什么样的氛围，达到什么样的效果，而不是直接告诉他’画几个硬币飞出来的样子，上面有皇帝的名单…”
三、标记第一屏高度
标记第一个屏幕高度
第一屏高度至关重要，最重要的内容、尤其是重要的操作按钮尽可能在第一屏内显示完全，不然会对转化率有较大的影响。第一屏高度在什么位置？在1024*768分辨率下，极限情况下可定为570像素；如果不那么严格的话，第一屏高度也可以定为600像素。在原型稿上标明即可，这样可以给视觉设计师一个参考。但不要为了保持第一屏高度而让内容过度拥挤，这样会给视觉设计师带来不小的麻烦。
第一个屏幕的高度非常重要，最重要的内容，特别重要的是尽可能完整地将操作按钮显示在第一个屏幕上，否则会对转化率产生很大的影响。第一个屏幕高度在什么位置？分辨率为1024*768时，极限大小写可设置为570像素；如果不太严格，第一个屏幕高度也可以设置为600像素。可以在原型版本中显示，这可以给视觉设计者一个参考。但不要为了保持第一个屏幕的高度而使内容过度拥挤，这将给视觉设计师带来不小的麻烦。
四、严格遵守栅格规范
严格遵守网格规范
很多产品人员或新人交互设计师都比较容易忽略这一点，没有按照栅格规范来布局，这样容易导致的结果就是：视觉设计师在按照栅格排版时，发现在交互稿中能排下的内容，在视觉稿中排不下了，这样就还得返回去改交互稿，或是修改需求内容。影响效率不说，可能还会影响最终的质量。所以在制作原型时，一定要注意这一点，同时也要保证交互稿中的字号、间距尽量符合视觉要求（比如间距最小10像素等)，以免给视觉造成不必要的困扰。但建议在确定栅格布局时，一定提前和视觉沟通商量好，以免影响视觉的发挥。
很多产品或者新的交互设计者都比较容易忽略这一点，没有按照网格来布局，所以很容易导致结果是：视觉设计者按照网格布局，发现在交互发布中可以安排内容，在视觉上却不在，所以就不得不回到修改过的交互稿，或者修改一个内容。效率的影响不是说，也可能影响最终的质量。所以在制作原型的时候，我们一定要注意这一点，还要尽可能保证交互稿中字体大小的距离，符合视觉要求（比如最小10像素之间的距离)，以免给视觉造成不必要的麻烦。但提案在确定网格布局时，必须事先和视觉传达讨论好，以免影响视觉显示。
五、合理的布局及间距
合理的布局和间距
许多产品人员根本不考虑布局标准和美观程度，只是把想要的内容堆在一起。这样，视觉只能重新考虑布局，这实际上耽误了很多时间。此外，如前所述，如果线框不是根据布局和间距标准绘制的，将很难准确计算出折叠上方的高度和每个模块的实际内容，这将大大增加视觉返工的机会。(下图是取消资格的反例)。这里也是如此。建议在确定界面布局时，提前与视觉传达进行讨论，以便给视觉合理的发挥空间。
许多产品人员没有考虑布局的标准和审美水平，只是把东西拼凑在一起。这种设想不得不重新考虑布局，不知不觉中浪费了很多时间。除了前面提到的，不按照布局和间距标准绘制画线，将很难准确计算出第一个屏幕的高度和每个模块的容量，大大增加了视觉返工的风险。(如下图所示。这不是限定的否定)。这里也是一样，建议在确定界面布局时，提前和视觉传达进行讨论，给出合理的视觉展示空间。
第六，清晰地表达用户界面逻辑
清晰的用户界面逻辑
当设计一个有很多内容元素和复杂逻辑层次的页面(比如一个表单)时，为了避免混淆，我们需要提前将这些内容整理出来，以保证文本的样式、链接、操作等。符合它们所代表的重要性，并将各种复杂的情况分类成有限的形式，给用户一个合理的视觉指引。(尽量控制字体大小为3-5，并根据情况匹配颜色)
在设计一个内容元素时，逻辑层次比较复杂的页面(如表单)，为了避免混淆，我们需要事先对内容进行整理，以保证文本、链接、操作等内容的风格与它们所代表的重要程度一致，并将每一种复杂情况的分类以某种形式加以限制，给用户一个合理的视觉引导。(尺寸控制在3-5，根据情况匹配颜色)
主色和修饰色最终由视觉设计者决定，它们可以在交互草图中指示出来。通过这些仔细的分类，最终的字体大小和颜色可以保证是合乎逻辑的，而不会给视觉设计者带来不必要的麻烦(视觉考虑更多的是关于美观而不是令人头痛的逻辑)。
主色和装饰色最终由视觉设计师决定，在互动版中展示。通过这些详细的分类，可以保证最终的尺寸和颜色符合逻辑，而不会给视觉设计师造成不必要的苦恼(视觉被认为更有吸引力，而不是令人烦恼的逻辑)。
七、了解视觉趋势
关注一些视觉趋势将有助于我们在美学上与视觉设计师站在一个更加一致的位置，并使我们的交流更加顺畅。
从上图可以看出，目前的视觉趋势大致如下：
1.渐变减少，视觉风格更加平坦。
2.用空白代替线条来划分区域。
3.布局更有规律。
4.单词之间的间距变大了。
5.蓝色链接越来越少，黑色字符越来越少，灰色字符越来越多。
6.圆角减少，直角增加。
7.色块叠加非常流行。
本文发表在中国尚品的网站制作服务提供商http://www.sino-web.net/,
原创文章，作者：搜够小编，如若转载，请注明出处：http://www.sogoubaike.cn/archives/114232
