【转】移动前端工作的那些事---UE/UI架构原型搭建和前端设计之前端设计

首先感谢原作者：webApp赵海洋

附上文章原地址：移动前端工作的那些事---UE/UI架构原型搭建和前端设计之前端设计


一个好的成功的架构原型，决定后面的后续工作是否能够顺利进行。架构清晰，布局合理会给UI前端设计带来很大的便利性。架构原型就好比房屋的主体结构。而UI前端设计则是内部装修。二者相辅相成缺一不可。

关于UI前端设计，在架构原型的基础上进行加添视觉效果、美化等工作。让产品有了一个更加直观的印象。可以这么说，一个产品的关键之处，就决定于这个步骤。这个就像是一个门脸房一样。打扮的越漂亮。就越受欢迎。有一次，我在网上看了一则这样的新闻报道。是关于苹果公司的。大体内容综合是这样的。

“在微软公司，技术人员的地位是最高的，一切前期工作都是围绕技术为核心而进行的。而在苹果公司则是设计人员的地位是最高的，所有的工作都是配合设计来完成。”

微软是靠windows系统起家，其注重技术毋容置疑，这和公司的定位有莫大的关系。而苹果则更注重于用户体验。用户体验在抛开功能上的因素后，其影响用户的就是设计因素。绚丽的界面，高光效果的按钮。使得苹果公司IPhone一上市，立刻就开始风靡全球。彻底颠覆传统的手机模式。而其中设计因素占有很大一部分原因。这也是苹果公司获得巨大成功的因素。

一个好的设计人员，不光要有全局观，还要有敏锐的观察力，能够找出捕捉用户眼球的亮点。同时还要有深厚的美术功底，优秀的创意。把握产品定型的风格等等。其实，设计这个环节是个承上启下的关键环节。它不光要完成架构原型工作的延伸，同时还要兼顾后面制作工作的延续。所以进行设计的同时，一些微小的细节也要注意并做好。

这里，我只讲几点小细节方面的注意事项。例如：

1、设计时一定要考虑到是否要适配各种不同分辨率的手机。这种webapp的设计不同于APP的设计。因为APP的设计一般情况下都有固定的尺寸。而webapp考虑的更多情况下是兼容各种不同分辨率和系统的手机。如果要进行适配的话。就要考虑平铺、拉伸等因素是否会影响到图像的显示效果。关于布局虽然说主要取决于制作方面的CSS。但在设计的时候就要考虑到。在做背景的时候，尽量使用一些可以进行平铺、循环、渐变而不产生视觉变化的设计。尽量避免使用图案多、杂乱无章的整体图片。

2、养成各个设计原件独立为文件包或是组合成一个整体。这样会为后面的制作人员方便取图、切图。一般情况下，涉及到原件分层时，少用叠加等和下层元素有关联的效果。前端设计不同于平面设计，平面设计只要有效果就可以了。一般都是拿去印刷。但前端设计不一样。它是要拿去切图生成页面文件的。所以良好合理的分层整合，对后面的切图制作工作可以起到事半功倍的效果。

3、除特殊要求，尽量使设计整体简洁明了。层次清楚。效果不一定要做很多。尽量不要做很大的图片。要保证后面制作的人在导出图片时尽量使文件小一些。过多的图形效果处理会影响导出图片的大小。图片过大会影响网站的加载速度。使用户过多时间去等待加载网站。这里面不光是要制作时进行页面优化等工作。从源头设计时就要注意。手机网速不同于电脑网速。虽说有WIFI，但大多数情况下还是使用3G网的。

这里，做了几个以前webapp的项目设计图，放几套供大家参考吧。



















首先感谢原作者：webApp赵海洋

附上文章原地址：移动前端工作的那些事---UE/UI架构原型搭建和前端设计之前端设计