程序代码和UI设计共同需要的几种状态

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-21 11:22:44.0

    产品开发完成之后,在产品进行测试时,我们很难去发现一些问题.因为这时候的测试人员最初是团队编代码的人或者是团队测试人员.他们往往是在考虑产品数据填充之后的状态.所以很多微小的问题,往往是发现不了的.发现的时候,可能是在产品发布之后用户的反馈或者是通过一些不熟悉你产品的人进行测试.但是这时候,可能就会造成用户的流失率会提高,耗费的成本也会提高.

    

    如何解决这个问题,就需要参与项目团队的人,明确产品的功能不同的状态,编码的人在编代码时,就会写出几种状态的代码,UI设计的人,就会设计出几种状态的界面,测试的人当然也会从这几个方面入手.下面列出产品功能需要的多种状态.(参考 Vince Speelman 写的 The Nine States of Design. 原文链接在文章最后)


1.初始化

   当产品第一次被人看到时,产品应该显示成什么样子. 用户需要去做什么.或者呈现用户什么样信息.总之这是产品UI的初始效果.


2.数据载入

   也就是数据加载时,该呈现出什么样的状态.理想状态下,用户很难,用户可能看不到这个效果,但是如果在网络不好的地方查看,那会是什么状态.我们不能只想单方面.而忽略了其他重要的地方.有很多方法可以很好的处理这方面的事情,比如像Facebook中的,使用条目占位来完成这种状态.


3.数据为空

   当界面完成初始化状态,加载状态后,如果数据为空,则可能需要提醒用户需要做一些操作,来教会用户该怎么实现界面的活跃感(用户的参与度).



4.第一次添加数据

处于空状态的界面, 在用户输入后进入为这个状态。比如

输入框在用户输入第一个字符之后的状态,或者空列表在添加第一个条目之后的状态。


5.一些数据

这个状态往往是团队开发或者设计人员最先考虑的状态,界面数据载入后,界面显示了一些数据,用户也开始慢慢熟悉你的产品.


6.很多数据

    用户使用产品后,数据会慢慢的增多,一个界面可能就显示不了那么复杂.我们需要做的就是怎么更好的进行显示.比如常见的做法,给界面分页(当然还可以更友好的设计,看自己的情况)


7.错误提醒

    用户在输入数据后,数据有误,做好一些提醒.


8.正确提醒

   用户输入正确后,也应该给予正确的提示.



9.完成提醒

    用户经过一个时间,正确的完成输入后,应该给予正确的提示,当然这个正确实体,可能是一些鼓励或者一些有意思的话语等等.


   

以上这几种状态在不同的功能中可能都会出现.所以我们需要更贴近的与用户交互,尽可能的多考虑用的角度,在完成代码或者UI设计的时候也应遵循这个原则.才能使产品完整化.


参考文章原文: https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85#.bx0mk11oy