App-UI配制篇



APP开发QQ群：347072638




背景
App-UI配制每个页面可能有不同的展现方式，不同的内容，不同的操作方式。那么这里就有一个需求就是根据用户定制这些不同的展现方式，不同的内容，不同的操作方式，在我们手机端就能正确的展示这些功能。如果一个应用app所有的UI都已经组件化，那么我只需要把这些组件组合拼装就行了，修改配制文件即可。友好的把配制文件的给服务端或者是产品组，让其很容易地修改配制文件。


应用场景
按照我们定义的XML规范进行，考虑到一些情况，除了一些有特殊需求的app，app之前有相似性，应用app的UI符合已有UI组件的要求，业务逻辑相同或相似，UI和业务逻辑分离。



实现原理
根据配制文件定义相关控件或组件，配制其属性。UI引擎解析配制文件，生成对应的控件或组件模型，在需要的时候添加到当前的VIew上。UI引擎大致分为如下几部分，
1.Builder生成器类,2.Element控件或者组件容器类，3.Controller控制器类，处理业务逻辑和UI，4View普通视图类，5.TableView视图类。


从两个方面来看。
第一方面，从程序运行流程来看。
1.当第一次程序运行起来之后，会用Element基类的扩展类RootElement(XMLBuilder),解析配制文件如XML。
2.Builder生成器类把XML里面的结点通过递归的方法，解析成相应的Element控件或组件容器。
3.最终会成一个树形结构在内存中，内存地址根据RootElement对象来取。
4.程序继续往下走，这时会创建一个Controller业务控制器类,这个Controller是从基础业务控制器继承下来。把RootElement的对象指针传给该Controller.
5.把业务控制器赋值给Window的rootViewController,同时让window可见。
6.让window可见时会加载View,系统回调业务控制类的loadView或者viewDidLoad来渲染UI.此时用视图类递归遍历RootElement,根据RootElement容器提供生成View的方法，生成相应的控件或者是组件，addSubView。此时UI渲染完成，呈现给用户了。


第二方面，从程序运行时来看。

我们知道message与方法的真正实现是在执行阶段绑定的，而非编译阶段。编译器会将消息发送转换成对objc_msgSend方法的调用。objc_msgSend(receiver, selector, arg1, arg2, …);
当用户点击设备屏幕时，IOS捕捉到一系列的触摸,将其打包到UIEvent对象中并放置到应用程序活动事件队列中。单例UIApplication对象管理应用程序，从事件队列中取出最前面的事件并将其分发以便处理。通常，其发送事件给应用程序的主窗口——即聚焦于用户交互的窗口——窗口对象代表窗口再发送事件给初始对象进行处理。

在iOS系统中有个很重要的概念：Responder。基本上所有的UI相关的控件，view和viewcontroller都是继承自UIResponder。事件的分发正是通过由控件树所构成的responder
 chain(响应链)所进行的。


例如一个简单的Button点击事件。
1.当button被按下的时候，系统接收这到个事件，事件经过传递，分发，最终在应用程序的交互窗口的初始控件对象处理。
2.在ButtonElement里监听到这个被按下的事件，先交给父类处理，然后处理自己的逻辑,。
3.依次在ButtonElement--LabelElement--RootElement--Element这个继承树上进行传递。
4.当传递到根结点时即Element，消息就开始分发，消息的分发是动态绑定的，编译器会将消息发送转换成对objc_msgSend方法的调用，objc_msgSend(receiver, selector, arg1, arg2, …);
5.最终消息会分发到指定的Controller里的方法里去执行。处理自己的业务逻辑。

什么是UI？

   UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。

   好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

   UI设计出发点：UI界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

   用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。




UI必备品质：

1.清晰

清晰是用户界面设计必须要具备的一条品质，如果说你的界面设计的很模糊，用户就无法在其中体验到较好的使用体验，这样会影响用户的整体印象。

2.简洁

UI设计除了清晰还不够，还需要简洁，看上去一目了然。如果界面上充斥着太多的东西，会让用户在查找内容的时候比较困难和乏味，而简洁的画面就能很好的解决这个问题。

3.熟悉

这里说的熟悉是只在设计UI的时候，要遵守一定的设计规范，就如有下划线的字符是有超链接的、叉号就是要退出或者删除，这样用户在使用的时候不但有熟悉的感觉，而且便于操控。

4.响应

良好的用户界面设计一定要响应迅速，不能让用户产生一种响应较慢的感受。而且界面应该有提醒的功能，让用户了解到一些反馈信息。

5.一致

在设计UI时，保持界面风格的一致性也是整个应用设计中很重要的环节，一致的风格不会让用户有错愕感.

6.美观

美好的事物总会让人有种愉悦之感，在页面设计的时候也要注重美观度的加强。




在度娘那里了解了UI设计后，下面我们再重新想想要怎么测试UI呢？




围绕UI设计的关键点，测试目标也就主要看UI是否满足了设计的初衷。下面为手机APP应用的UI测试内容：

总体目标：


1.看图标明其意。图标代表功能，一看图标就明白那代表什么功能，图标常见，走创新路线用户接受才算是成功的。

2.界面布局简洁：界面中的控制摆放位置，数量，间隔合理，颜色风格统一，不会花。

3.功能实现步骤简单：菜单级数控制，3级以内最佳，不然用户会觉得太过复杂。步骤合理菜单级数越少越好。




具体测试项：

一、图形测试

图形包括图片、边框、颜色、字体、背景、按钮等.

1.要确保图形有明确的用途，图片不要胡乱的堆在一起.

2.验证所有页面字体的风格是否一致.

3.背景颜色与字体颜色和背景色相搭配.

4.图片的大小和质量，清晰，容量越小越好.




二、界面测试

1.各个界面图标风格，背景（颜色，图片）是否一致。

2.各个界面布局是否合理：控件，文字，线条位置，数量，颜色是否合理，跟整体风格是否搭配。

3.界面文字是否有错别字。各界面文字大小，颜色，位置是否一致。比如：标题文字

4.图片显示是否清晰，大小是否合理。

5.各个界面同种图标是否一致

6.各种提示框风格是否一致。

7.提示语是否友好，简明。

8.列表型界面是否有上上滑动效果。

9.功能入口明显，易找（布局突出主要功能，用户要找到某个功能很快就能功能，操作简单）。




以下界面的测试要点：

1.标题栏

A.检查标题栏文字描述的正确性。

B.比较各个界面的标题栏效果是否一致。




2.文字

A.检查文字描述正确性。（跟软件功能相符）

B.文字是否有错别字。

C.文字的颜色，大小，位置是否一致。

D.文字用语一致。功能相同的地方，检查使用的文字是否相同。比如：“选项”“设置”。




3.控件

A.控件对齐了没有。

  并排关系控件－－左右对齐

  同行关系控件－－横向对齐

   所属关系控件－－是否应该缩进

B.控件状态：选中，未选中，可用，不可用（灰色为不可用）

C.Edit控件对输入有效性判断

 长度判断，合法性判断，数据大小判断等。

以上代表个人观点，不是很完整，大家可以补充，另此文主要为概括性语言，没有一一举例，大家主要明白测试目标即可，让测试有个方向。




本文出自 “测试路” 博客，请务必保留此出处http://yangliqin.blog.51cto.com/8836122/1411184

然后我们再来看看这个,就是说elementui给我们提供了一个案例

 



首先我们先去看看安装,,先去安装这个element-ui

cnpm i element-ui -S 实际上直接这样就可以了.

然后再去安装

cnpm install 这样就可以了,



安装以后可以看到他会下载对应的左侧的文件,可以看到在package.json中,多了个element-ui



然后我们先打开第一个注释 import App from './App_Container.vue' 这是一个布局容器,用elementui做的.

然后可以看到下面,我们new Vue(这里面是加载完#app要执行的内容.).$mount(''#app'')



然后我们去看效果



然后我们再去看表单的效果



 



然后再去看表单验证的效果



可以看到



对应验证效果也有了.

 

 



技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152

开通了个人技术微信公众号:credream,有需要的朋友可以添加相互学习