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

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

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

 

谈到前端的建设初始，是先要知道客户的需求是什么。以及所要面对的使用人群是什么。一个好的产品体现在很多开始细节的处理上。让用户使用客户的产品，在使用的产品过程中，既要保证产品的功能需求，又要有很好的用户操控体验。这才是前端建设初始的最终目的。只有先期做好了这些工作。才会有后面的完善工作，最终成为一个好的产品。如果前期马虎应付，到后期很可能该项目面临改需求、改版、甚至胎死腹中。造成很多的无用功。

 

由于移动前端有一个共性，就是移动终端的屏幕相比较电脑屏幕而言小了很多。一些发生在互联网前端的行为在手机上套用并不合适。例如，鼠标点击。我们使用鼠标的时候，可以精确到1px.基本上很小的地方，都可以使用鼠标来进行点击。但在移动端上很小的地方就不能点击到了。因为手指的宽度远远大于鼠标指针手的宽度。

 

鉴于此，一些互联网前端的架构原型搭建和前端设计是不能应用到移动前端来的。比如导航条文字、按钮等等。这也就决定了移动端的大多数导航设计都采用较大面积的原型设计。例如将导航条设计成为ICON性质的图标按钮。这种按钮在用户体验上要比使用文字链接要好的多。这个就是良好的用户体验。所以，也可以这样说。良好的用户体验决定了UE/UI架构原型的搭建和前端设计的理念。无论何时，产品是开发给用户使用的。良好的用户体验永远排在第一位！请牢记这点。

 

下面我们来初步谈一谈UE架构原型的搭建，一般说来架构原型从结构方面来说可以分为：上下结构、上中下结构、左右结构、和整体结构。从使用习惯来分又可以划分竖屏模式和横屏模式等。这些结构灵活的搭配应用会启到很好的效果。例如，举个例子。有一个产品它包括宣传动画、产品分类、产品展示、视频介绍、文字信息等等功能。那么如何进行搭建架构呢？首先就要进行各频道内容的侧重分析。哪个重些。哪个轻一些。要根据产品特性以及客户要表达的理念先让自己有一个主观的判断。同时要考虑用户体验来进行架构搭建。结合内容展示方法的侧重点来进行排版布局。从视觉上分析，一般的我们可以得出这样的优先级结论：动画》图片》视频》文字。这样展示有主次，有层次结构，不会出现喧宾夺主，主题模糊、重点次重点展示方式颠倒等等。根据刚才的例子，采用一个较普通的架构搭建方式，我设计了几张草图来进行表示。

将宣传动画设置为重点，人都有一个先入为主的概念。利用动画方式加深用户印象。所以我采用了整体结构布局。如草图：

这个动画一定要考虑用户网速等问题。所以必要时一定要加个跳过的功能按钮。避免因动画文件较大出现客户等待时间长等情况。做产品我们应该考虑最多的是最坏的情况下也不影响产品的使用为准。而不能用我们的主观意识去强奸用户的体验。

剩下的四个频道，采用按钮导航的方式进行布局。见下面草图。

 

根据产品的宣传的侧重点以及重要性。四个按钮位置可以适当进行位置调整。单击每个按钮就进入了相应的具体频道。这里我只画了一个模版，表达一些意思即可。见下图。

该布局采用上中下结构，有头部、中间内容部分以及下面的导航部分。头部显示的当前的频道名称。加了一个返回首页按钮。方便用户操作。下面的导航部分方便用户进行各个频道进行切换。这样一个初步的产品架构就搭建成功了。剩下的工作就是根据需求来完善各个频道的内容框架搭建了。记住一点。主次搭配，图文并茂。布局简单明了。设计到功能按钮一定要醒目和操作方便顺畅的原则就可以了。这里因为篇幅问题每个频道的内容框架搭建在这里就不详细一一列举了。

 

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

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