浅析UE/UI 带你解脱像屎一样的产品

抛出一个话题：为啥科技公司的产品看起来很水（很垃圾）？一点基本的UE/UI都没有，整个系统看起来像是XP系统的老古董？太痛苦了，如下简析产品UE/UI 的基本优化方向

一、产品UE/UI 

        好的产品给体验着一个好的体验，垃圾的产品看3秒都是煎熬，一款产品友好体验性很差，客户是不会买单的，只有角逐UE/UI，不断优化系统，才能将一个产品不断的提高客户体验感

参考文档：饿了么组件：Element - The world's most popular Vue UI framework

二、如下简单说明UE/UI检查项

1、  登录页元素检查

        登录页即是一个产品的脸面，也是一家科技公司的“意志、象征”，检查如:公司LOGO、登录框等

2、面包屑层级展示

        不得不说好的层级展示会给客户体验产品好的产品指引，不好的层级展示这里不展开说了，懂的都懂

3、时间筛选器

        看时间筛选器组件是否通用，建议参考 饿了么 时间筛选器组件，跟着优秀的产品向前走

4、下拉单选

                跟着优秀的产品向前走，参考如下图

    

5、下拉多选

        跟着优秀的产品向前走，支持下拉多选

6、复选框

        跟着优秀的产品向前走，参考如下图

7、Input文本框

        文本输入框、表单中输入框 基本的长度限制是要有的 很水的产品不限制，很难受的

8、Alert弹框

        弹框提示与常规告警提示一不一样，看着心惊肉跳的，检查弹框提示、警示、正常、异常呈现方式，建议参考 饿了么标准组件，检查确认弹框、二次确认弹框样式设计、弹框停留时间（3s、5s）等

9、Tab按钮

        按钮悬浮、选中、点击、多次点击等均要有不同的显示效果

10、句柄切换

        现在很多系统页面均在一个页面中展示，很少点击某个地方打开新的页面了，如有就是很水的产品

11、数据列表展示

        数据列表基本是要包含： 翻页、分页功能的，很水的产品没有分页功能，拉起来真的拉

12、页面组件重叠展示

        页面重叠的组件展示效果还是可以看到重叠样式，无疑这样的产品是很水的

13、分辨率检查

        改变屏幕分辨率可以看到产品会不会自适应变化，很水的产品改变分辨率出来一堆不可思议的画面

14、滑动条展示

        滑动页面很多的话会使客户体验起来很不友好，想象一下数据列表没有分页组件，右侧滑动条要滑到死才可以到底，太痛苦

15、页面整体布局展示

        检查界面Element元素布局是否合理，优化布局，合理布局等

        组件、数据列表、功能权限树、字体、颜色、背景色、按钮、弹框、内外边框、交互样式、CSS样式等