网页设计七个实例！教你摆脱“照搬原型图”的设计

“〇〇君，这不是和蓝本图那样吗！”

这是做页面结构设计的这时候最不该听见不然了。我也桑利县的被此种斥责过，如此一来对前辈也说过反之亦然不然。

能说页面结构雕塑家们都历经过此种的末期。为何会被表示套用蓝本图呢？甚么样做就可以防止那个难题呢？这一场我想和我们撷取呵呵此种难题的其原因和未雨绸缪。

“影像感染力”和“重要信息认知及决议案潜能”

具体来说间接说明推论，能说，会被表示套用蓝本图的人是缺少“影像感染力”和“重要信息认知及决议案潜能”。

“影像感染力”是指从为数众多的画法中优先选择最合适的全面落实在影像中；“重要信息认知和决议案潜能”是指对，向谁，以哪种形式，传递甚么，要达至甚么样的效用等一连串难题的思索潜能。

纯粹此种说能能不好认知，接下去对这三种潜能对音乐创作的结论会答负面影响的难题，将以实战经验某种程度相同的四个数人例尖萼。

1、新员工A

潜能

影像感染力 ×  /  重要信息认知和决议案潜能  ×

状况

刚刚能保证不超时，对简易的蓝本图很少进行结构设计上的延伸。在没有深入认知内容的情况下，将蓝本图的内容和文字毫无怀疑的表现在结构设计当中。

结论

因为只是将蓝本图基本保持原样的反映在结构设计当中，从规划到实际操作的过程中没有提升UI界面的质量。再加上决议案中没有指示之外的内容，整个决议案的质量都不是很高。

指导者反馈

这不就和蓝本图那样吗？

2、有一年实战经验的B

潜能

影像感染力 ◯  /  重要信息认知和决议案潜能 △

状况

在实际工作中积累了各种各样的实战经验，能在一定某种程度上进行视觉表现。但对重要信息规划的认知潜能和决议案潜能还很缺少，尚停留在满足于蓝本图上的重要内容，不能提出更适合的见解。

结论

虽然在画面上能够完成的很漂亮，但由于没有作为结构设计者对重要信息的独特认知，不能达至蓝本图制作者或者客户的期望值，只是一种重复的反馈。

指导者反馈

那个嘛，暂时先用那个吧，谢谢！

3、五年实战经验的C

潜能

影像感染力 ◎ / 重要信息认知和决议案潜能 ◎

状况

从为数众多的结构设计形式当中，优先选择最最合适的UI表现形式，并结构设计出漂亮的界面，不仅能准确认知蓝本图的要素及其重要某种程度，更能在其中辨别出是否向用户清晰地传递了产品的内容，做出最适合用户的结构设计。

结论

即使蓝本图不能详细表现得内容也能很好地体现在结构设计当中，并从重要信息规划的视点对蓝本图以外的方法进行探究，灵活应对实际情况中的变化，从而大大提高了决议案的整体质量

指导者反馈

非常感谢！是此种！

三人潜能的比较

像此种伴随着三种潜能的提高，就能灵活应对，诸如从蓝本图中应该提取甚么重要信息，在结构设计时要如何表现等一连串难题。优秀的结构设计，往往都不是套用蓝本图的那种。

然而这三种潜能并非在短时间内就能掌握，而是需要踏踏实实地积累实战经验逐渐练就出来的。尽管我们以“没有捷径”为前提，也想要了解平时注意哪些问题，甚么样去做就可以更快地掌握这些潜能。

STEP 1 提升影像感染力

这三种潜能都非常重要，而结构雕塑家具体来说要掌握的是影像感染力。反复透彻地应用结构设计的基本原则，彻底掌握在页面结构设计中经常出现的UI画法，都是很重要的事情。无论哪一种都是需要很长时间就可以够达成，下面向我们介绍失踪将此种潜能更快掌握的要点。

1、自由的决定细节元素的尺寸和位置

蓝本图是为了确定像导航此种大模块的位置和顺序，大多还未考虑到模块内的布局。如何排版能更方便用户使用，结构雕塑家在结构设计的这时候应该有自己的考虑。具体来说要做的不是原封不动地按蓝本图布局，而是应该先在纸上尝试让重要信息更好传递的排版形式。

NO GOOD 结构设计图，标题和图标的位置，各要素的尺寸都基本和蓝本图一致。而GOOD 结构设计图，电话和邮件左右排列，体现了平衡感，邮件以按钮的形式出现，将重要信息的优先度很好地表现出来。

NO GOOD 结构设计图，将所有元素居中排列，看起来虽然很整齐，但其横向排列的形式完全和蓝本图那样。GOOD 结构设计图，将元素按层次划分，并改变了排版和字号，层次分明，易于认知。

NO GOOD 结构设计图，按照蓝本图进行排版，怎么看都缺少魅力。GOOD 结构设计图，大胆将英语放大，表现出视觉冲击力，去掉了按钮的样式，给人以考究的印象。对蓝本图此种的变化能达至更好的效用。

2、一定要找多个参考

界面和排版形式不止一种，重要的是，不要立刻采用呵呵子就能想到的形式，而是要坚持寻找更符合整体风格和需求的表现。在网站导航或者Google搜索中寻找接近自己项目的表现形式，作为制作时的参考。要点是，不要只局限于一种形式，要寻找三种以上作为参考，此种，有助于从更多角度去思索结构设计的表现。

即使一个标签也有线框和色块等各种各样的表现方法，要根据自己项目的整体风格进行定位。

相互联系的五个圆形构成的企业图，有像参考1那样加入产品图片，产生丰富效用的画法，也有像参考2那样用半透明的圆形相互重叠的简约画法。哪一种手法能在用户那里产生更高的效用，制作之前认真思索呵呵更相同的表现方法。

3、每天按模块整理结构设计参考

和上文要多找参考不然题有关，找到的参考无论包含了甚么手法，都要分模块进行整理。能将截图整理到Pinterest或Tumblr，也能将网址整理在表格中。每天踏踏实实地积累素材，做结构设计的这时候就能节省很多找参考的时间。

举个例子，我将能参考的动效表现整理了一个表格。

4、每周临摹一个结构设计优秀的网站

踏踏实实地进行临摹，对积累更多画法来说是最有效用的。不是将参考网站截图，间接在上面进行临摹，而是以完全再现其质感和字号等元素为目标，一变观察，一变测量，试着做出一模那样的内容。虽然很浪费时间，但坚持四个月，就能明显地发觉自己积累了很多画法。重要的事情要再说一遍，那个方法是非常非常有效的。

这是我以前临摹的一个页面，图片是替换了从素材网站找到的相似图片。在实际的操作中能学到很多东西。

STEP 2  认知说明重要信息，提出+α的见解

掌握了影像感染力，接下去就要认知和说明重要信息，提出+α的见解。+α是指超出影像制作责任之外对结构设计的决议案，或者对交互难题的决议案。最理想的决议案是以，解释蓝本图中的重要信息，目标用户是谁，想要传递甚么，甚么样去传递，希望达至甚么样的效用，等一连串难题为基础的。方法有很多，这里介绍三种容易上手的示例。

1、影像的内容自己决定

制作蓝本图的人希望影像能够更好地补充文章内容，所以经常使用图形语言。这这时候，具体来说要彻底认知文章的内容。将表现氛围和实际样子的照片，换成将关联性和数值更易向观者传递的图形也是一种很好的优先选择。哪一种形式更最合适，需要结构设计者仔细阅读内容之后进行判断。

那个内容最想传递的是，标题所阐述的“销售优先还是采购优先”的难题。使用抽象的住宅照片也是一种方法，但比起来，使用icon来表现的关系图却能更好地传递文章的内容。

2、调整已经决定的文案

虽然项目中文案一个字也不能修改的情况也存在，并非此种情况的这时候，结构设计者能积极地提出文章修改意见是很好的。因为语言也是一种很重要的界面表现。要知道蓝本图所使用的表现也不一定是最最合适的。

尤其要注意的是，标题就传递了推论的情况。用户根据推论是否是自己的兴趣点而优先选择是否阅读以后的内容，当蓝本图不能满足此种条件的这时候，结构设计者就应该积极地提出意见。

阅读蓝本图记述的文章内容，间接将推论提炼出作为标题，能极大的提升重要信息传递的容易某种程度。

即使是一篇冗长的文章，阅读内容提炼出小标题，也能大大减轻读者的负担。

3、积极地提出最最合适的交互意见

在甚么样传递重要信息这一部分，结构设计者一个重要的职责是提出交互的想法。由于蓝本图主要表示要素和重要某种程度等重要信息，交互上的研究可能还没有特别的深入。此种情况下，结构设计者还是积极地提出表现方法为好。

那个这时候，不要以此种表现很有趣就去使用，而是应该以此种表现对用户来说更易于使用，更易于认知，更友好为出发点，思索交互形式。对用户没有好处就没有价值。不要以满足结构设计者的表现欲为目标，而要以满足用户为目的。

上例为省略琐碎的说明文字，鼠标悬停时照片的颜色改变，并加上一层遮罩，说明文字立即从下方滑入的交互形式。

总结

对套用蓝本图的难题，这次介绍了各种各样的技巧和决议案示例。文章的结尾没有甚么立即有效地绝招，而是每天孜孜不倦地积累表现方法，认真阅读内容，踏实努力的观点。

从结构设计者的角度来看，同“这不是套用蓝本图”的斥责相对应，判断不了能改变还是不能改变的人也有很多。对不能参加客户的需求会，陷入已经订好的蓝本图中的结构设计者来说，纠结于此种的难题也不是没有道理的。

虽然确认改变了更好，还是不能改变也是结构设计者的一个苦恼，根本上最重要的是，本着立足用户的自信，深刻思索甚么样做就可以让用户更易认知和使用。具备了此种的高度，极端地说，即使完全改变了蓝本图也是好的。

由于这些都不是短时间就能掌握的技能，因此平时的结构设计工作中陷入苦战的人还是很多。然而，就像棒球那样，结构设计者接到蓝本图的这时候就好比进入击球区的瞬间。如果之前没有经过各种刻苦的训练，就不能打出华丽的一击。

从现在开始，我们能以不被斥责“套用蓝本图”为目标，参考这里介绍的方法，踏踏实实的学习便是笔者的荣幸。

本作品由站酷网：M菌_ 原创，未经许可请勿作商业用途。

优秀原创结构设计一网打尽！

喜欢最IN的原创结构设计资讯？

点击了解更多精彩内容

↓↓↓