「如何画出高颜值原型图」 💫
你们是不是经常在画原型的时候觉得自己的作品很丑，很想让它变得更好看一点呢?😭
其实，画原型最重要的是能够表达出功能逻辑，而不是外表美不美。
但是，如果你想让你的原型更加吸引人，也有一些小技巧可以帮助你哦~👇
主要有2点:
🎯 重点1:突出层级关系
🎯 重点2:使用统一规范
规范颜色、字体、间距、对齐、分布区分层级关系:
1️⃣ 尺寸:
手机端:宽375px，首屏高667px
PC端:宽1440px，首屏高900px，左侧菜单:宽200px ，顶部菜单:高60px
2️⃣ 颜色:
尽量使用黑白灰，Axure色板里的黑白灰完全满足要求。重点内容颜色深，辅助内容颜色浅。不建议严格按照色号，只要能够通过颜色区分出层级即可。
3️⃣ 字体:
使用1种字体，推荐使用Arial、微软雅黑、苹方。
4️⃣ 字号:
从12px→ 20px，从低层级 → 高层级。不需要特意去记，根据层级关系与实际效果再去调整。
5️⃣ 字重:
简单理解就是指加不加粗，如标题可以加粗。
6️⃣ 间距:
为了保证内容的可读性和层级关系，我们在画原型时一定要同时考虑到间距和对齐。
首先，在原型的两侧保留安全距离。可以选择10px或者20px。在间距上不建议抠像素，可选中每个模块，然后水平分布或垂直分布，但需要保证间距能达到分组的效果。
7️⃣ 对齐:
分为居左对齐、垂直居中对齐、居右对齐、顶部对齐、水平居中对齐、底部对齐。可以根据原型元素的不同，采用不同的对齐方式。
8️⃣ 分布:
是指在垂直分布、水平分布，将组件内容按照相同间距排列。当有相同内容≥3时，可以考虑使用自动分布，比如多个icon排列时，可以直接使用水平分布。
在实际画原型时，经常会将对齐与分布一起使用。
需要注意的是：
1、产品经理要注重产品、不要过度优化、干了UI的活等等，说的都对，在第2页里也特意提到「好看的原型是锦上添花」。如果你想把原型画好看，可以参考～
2、个人职场经历
1）我刚找工作的时候，我没有任何突出的优势，我需要有自己的亮点，就尽可能的把自己作品集做的好些。
但是找不到能让原型画好看的方法，所以只能自己总结。
现在我分享出来，希望每个想把自己东西做好的小白能有可以参考的东西，而不是像之前的我一样瞎找。
2）陪领导给客户演示原型，客户说了一句：你这demo那么丑，我怀疑你们的专业性。这就是我职业生涯里遇到的一件真实的事情，希望大家都不会遇到这种客户。
3、我不认同「好看的原型会干扰到UI」
黑白灰的原型会影响到一个专业的高级UI设计师出设计稿？
是原型字号用了14、16影响的，还是原型间距用了10px影响的？
那专业交互设计师出的交互稿会影响吗？
在花瓣找参考素材的时候会影响吗？
在做UI改版的时候会影响吗？
4、原型要不要画好看，和能不能画好看，这是2个问题。时间紧任务重，就画的一般点；时间松任务少，就可以根据自己的要求调整
5、引用up主蔡振原提到的一句话：「人们容易把体验不好，界面混乱归因成内容逻辑混乱」
评论(0)