小编: 初入职场的你，有没有遇到过产品经理和你说：“你的设计太中规中矩了，怎么和原型图一样？”听到这句是不是很内伤，那么我们如何摆脱这种困境呢？
正是曾经小白的小编有过同样的问题，所以今天和大家分享如下这篇文章。大家快来好好学习吧！感谢@灵智飞扬翻译社-丹丹的翻译。
“〇〇君，这不就是和原型图一样吗！”
这是做
网页设计的时候最不想听到的话了。我也无例外的被这样指责过，反过来对后辈也说过同样的话。
可以说
网页设计师们都经历过这样的时期。为什么会被指出照搬原型图呢？怎样做才能避免这个问题呢？这一次我想和大家分享一下这种问题的原因和对策。
“图像表现力”和“信息理解及提案能力”
首先直接表明结论，可以说，会被指出照搬原型图的人就是缺乏“图像表现力”和“信息理解及提案能力”。
“图像表现力”是指从众多的表现手法中选择合适的落实在图像中；“信息理解和提案能力”是指对于，向谁，以何种方式，传达什么，要达到怎样的效果等一系列问题的思考能力。
单纯这样说可以能不太好理解，接下来对于这两种能力对创作的结果会有何影响的问题，将以经验程度不同的三个人为例加以分析。
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、每周临摹一个设计优秀的网站
踏踏实实地进行临摹，对于积累更多表现手法来说是最有效果的。不是将参考网站截图，直接在上面进行临摹，而是以完全再现其质感和字号等元素为目标，一变观察，一变测量，试着做出一模一样的内容。虽然很浪费时间，但坚持三个月，就能明显地发觉自己积累了很多表现手法。重要的事情要再说一遍，这个方法是非常非常有效的。
这是我以前临摹的一个网页，图片是替换了从素材网站找到的相似图片。在实际的操作中可以学到很多东西。
原文地址：TomoyukiArasuna
译者：灵智飞扬翻译社-丹丹
转载请注明：灵智飞扬 » 七个实例教你摆脱“照搬原型图”的设计（上）
登录收藏
学UI就上灵智飞扬！越努力，越幸运！
“灵智飞扬www.lingzhifeiyang.com ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。 ，给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
“
APP截图站www.lingzhifeiyang.com” 海量
APP截图，让你灵感爆发！国内最好的APP截图站。
“国内最棒的UI设计导航站” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【灵智飞扬 原创文章 ，也可以找各个群的管理】
给灵智飞扬打气，加油 猛点这里 >>
本文来源：未知
