项目总结-IT云Web界面设计优化

项目背景：某为IT云的权限管理模块，对整个某为IT云上的服务做权限管控，举个例子，哪个角色可以访问什么级别的资源，有默认角色，也可自定义角色，并给自定义角色添加权限。原界面初步实现了功能，部分操作步骤繁琐，部分交互存在问题，界面样式较low，一言概之，即“基本能用，看着不美，用得不爽”。

用户群体：某为IT云服务中高级管理层，年龄26-45 ，事务繁忙，工作需要使用，希望能快速配置和删除权限

优化思路：整体到局部，了解业务后，代入用户角色自行操作界面，记录下过程问题点，使用Xmind将界面存在问题点罗列出来，以界面为单位，进而在每个界面上细分，将待确认点使用红旗标签做记号，便于后续同BA（business analysis）和开发确认

竞品分析：对比阿里云、腾讯云、参考其权限管理模块的布局排版，操作步骤等。

1. 借鉴阿里云的操作指引，步骤图文并茂

   
   

   
   

2. 借鉴腾讯云卡片式风格，内容分卡片管理，布局清晰直观

   
   

优化风格：卡片式，简洁

（To B的后台界面注重易用性，使用流畅；用户群体大都事务繁忙，希望能快速进行操作解决问题，简洁直观）

前期准备：将目前存在的问题点罗列出来后，找BA进行沟通确认，要求在新一轮的需求澄清会议上向项目组所有成员展示，并要求高度还原高保真，由我进行视觉验收，从一开始让开发重视还原高保真问题，明确权利与责任，标明态度，有利于后续工作开展。

优化内容：

一、界面：

1. 首页

   优化前：首页中的常见问题和用户指南占据50%页面，并且以文字链接形式，造成界面浪费不说，并不能直观反馈问题

   优化后：使用方法用简单4步骤直接演示，点击步骤时展示对应的画面，简单直观；“用户指南”加icon放置右边，不用时不干扰，用时在身边。

2. 创建角色页面

   优化前：4个步骤

   优化后：3个步骤

3. 创建成功界面

   优化前：创建成功后弹窗提示“已创建成功”，需手动点击“好的”后弹窗消失

   优化后：弹窗提示“创建成功”文字下面有较小文字“给新创建的账号添加角色”，用户可直接点击文字进入添加角色界面，省去用户切换到添加角色界面步骤，该提示5秒后自动消失，无需手动点击。

4. 穿梭框

   优化前：环境选项很多，下拉选择后不清楚选了哪些选项

   优化后：采用穿梭框，左侧选中或取消某项选项，右侧实时观看

5. 风格统一

   优化前：样式老旧

   优化后：卡片式，简洁直观

   
   

二、交互&用户体验：

1. 创建角色

   优化前：信息填写完成，点击提交后，弹窗提示不符合规范

   优化后：填写信息时实时反馈，内容不符合规范时，及时红框提示正确规范

2. 页码

   优化前：页码在第一页时，上一页按钮点击效果同正常可点击效果一致；在最后一页时，下一页点击效果同正常可点击效果一致

   优化后：页码在第一页时，上一页按钮不可点击；在最后一页时，下一页按钮不可点击

3. 文字过长hover显示

   优化前：文字过长显示部分，hover时，完整文字显示在离原文字较远的位置，用户需移动视角观看

   优化后：文字过长显示部分，hover时，完整文字显示在原文字附近

   
   

开发实现：页码是直接调用组件库元件，开发表示无法直接修改，需借助BA升级问题，推动组件库开发人员进行修改，根据收益和工作量公式评定需求优先级，决定将该需求列入下一轮迭代。

结语：上线后并不代表着结束，关注数据，用户反馈讯息，从而判断所做工作是否正确，以及发现新问题，不断去更新迭代优化，呈现螺旋式上升。

注：信息安全原因，设计界面无法展示，图片仅是配图