项目总结-IT云Web界面设计优化
某为IT云账号权限管理web端全面优化改版,从构思,设计到实现历时1个多月,特此总结提炼。
项目背景:某为IT云的权限管理模块,对整个某为IT云上的服务做权限管控,举个例子,哪个角色可以访问什么级别的资源,有默认角色,也可自定义角色,并给自定义角色添加权限。原界面初步实现了功能,部分操作步骤繁琐,部分交互存在问题,界面样式较low,一言概之,即“基本能用,看着不美,用得不爽”。
用户群体:某为IT云服务中高级管理层,年龄26-45 ,事务繁忙,工作需要使用,希望能快速配置和删除权限

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

竞品分析:对比阿里云、腾讯云、参考其权限管理模块的布局排版,操作步骤等。
借鉴阿里云的操作指引,步骤图文并茂

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

优化风格:卡片式,简洁
(To B的后台界面注重易用性,使用流畅;用户群体大都事务繁忙,希望能快速进行操作解决问题,简洁直观)
前期准备:将目前存在的问题点罗列出来后,找BA进行沟通确认,要求在新一轮的需求澄清会议上向项目组所有成员展示,并要求高度还原高保真,由我进行视觉验收,从一开始让开发重视还原高保真问题,明确权利与责任,标明态度,有利于后续工作开展。

优化内容:
一、界面:
首页
优化前:首页中的常见问题和用户指南占据50%页面,并且以文字链接形式,造成界面浪费不说,并不能直观反馈问题
优化后:使用方法用简单4步骤直接演示,点击步骤时展示对应的画面,简单直观;“用户指南”加icon放置右边,不用时不干扰,用时在身边。
创建角色页面
优化前:4个步骤
优化后:3个步骤
创建成功界面
优化前:创建成功后弹窗提示“已创建成功”,需手动点击“好的”后弹窗消失
优化后:弹窗提示“创建成功”文字下面有较小文字“给新创建的账号添加角色”,用户可直接点击文字进入添加角色界面,省去用户切换到添加角色界面步骤,该提示5秒后自动消失,无需手动点击。
穿梭框
优化前:环境选项很多,下拉选择后不清楚选了哪些选项
优化后:采用穿梭框,左侧选中或取消某项选项,右侧实时观看
风格统一
优化前:样式老旧
优化后:卡片式,简洁直观
二、交互&用户体验:
创建角色
优化前:信息填写完成,点击提交后,弹窗提示不符合规范
优化后:填写信息时实时反馈,内容不符合规范时,及时红框提示正确规范
页码
优化前:页码在第一页时,上一页按钮点击效果同正常可点击效果一致;在最后一页时,下一页点击效果同正常可点击效果一致
优化后:页码在第一页时,上一页按钮不可点击;在最后一页时,下一页按钮不可点击
文字过长hover显示
优化前:文字过长显示部分,hover时,完整文字显示在离原文字较远的位置,用户需移动视角观看
优化后:文字过长显示部分,hover时,完整文字显示在原文字附近
开发实现:页码是直接调用组件库元件,开发表示无法直接修改,需借助BA升级问题,推动组件库开发人员进行修改,根据收益和工作量公式评定需求优先级,决定将该需求列入下一轮迭代。
结语:上线后并不代表着结束,关注数据,用户反馈讯息,从而判断所做工作是否正确,以及发现新问题,不断去更新迭代优化,呈现螺旋式上升。

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
























