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

用户头像
深圳/UI设计师/7年前/346浏览
项目总结-IT云Web界面设计优化
用户头像
简珊

某为IT云账号权限管理web端全面优化改版,从构思,设计到实现历时1个多月,特此总结提炼。

项目背景:某为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升级问题,推动组件库开发人员进行修改,根据收益和工作量公式评定需求优先级,决定将该需求列入下一轮迭代。


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


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

2
举报
|
1
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
登录注册