用户 图标 功能 项目背景近些年,WPS 组件页在完善基础功能的同时,增加了许多新功能。新功能的持续增多,虽然满足了用户更广泛的需求,但也使界面中的功能入口越来越多,一定程度上增加了用户的认知负担。在日常使用 WPS Office 办公时,图标是用户接触最频繁的界面元素之一。它通过更直观、轻松的阅读体验来指导用户的操作行为,从而有效提高产品的易用性。为此,我们以 “让用户更高效地完成工作” 为目标,用了大半年的时间,完成了 WPS Office 组件页 3000 个功能图标的视觉升级。WPS 改版案例合集:升级过程本文将从圈定核心范围、正确处理表意、制定协作模式和适应不同场景等几个方面来详细阐述我们对组件页功能图标视觉升级的全过程。紧密结合数据,圈定核心范围面对数量如此庞大的功能图标,我们必须从中找到最核心的一批图标重点突破。如果能快速确定核心图标的视觉风格,其他图标也能由此展开快速推进。为此,我们找到了产品同学,详细了解了功能的使用情况。 我们计算了 3 月份 PC 端三大组件功能区各个功能的日均点击次数,从高到低排序,得到了点击排名前 50 的功能。为了更直观地体现排序情况,我们制作了表格:根据排序情况,我们圈定了点击量 Top50 功能的图标作为核心图标,重点围绕这批图标进行了设计和优化。深入理解功能,正确处理表意确定了核心图标之后,我们又开始了新的思考。用户能否清晰地理解图标的含义?用户能否快速找到自己想要的功能?带着这些疑问,我们进行了深入的研讨。1. 如何正确处理表意?要想正确处理表意,必须深入理解功能。我们针对核心功能进行了反复地体验与透彻地研究,确保大家都能准确理解这个功能是什么、有什么作用,从而明确、统一了图标的表达形式和重点元素。除了结合自身深刻的理解,我们也找了同类产品进行对比,力争寻找出最符合用户认知的图形表达方案。2. 如何正确验证表意?功能图标产出后,我们积极邀请产品同学进行审核,针对有争议的图标,我们进行了充分地讨论,并结合双方的要求输出优化方案。同时,我们也通过用户访谈的方式去访问公司里的同事,观察他们的反应、操作过程以及操作结束后的反馈,最终选择了更能快速传达这个功能的图标。反复打磨推敲,制定协作模式我们需要绘制将近 3000 个功能图标。为了应对如此庞大的工作量,组内提出了协作绘制的方案,确保能在规定时间内完成目标。这个项目是我们首次使用多人协作的工作模式。在实施过程中,我们遇到了例如绘制流程不规范、项目进度难把握、质量标准难统一等诸多问题。为了解决这些问题,我们实施了 3 个措施。1. 制定流程为了更好地协作绘制图标,我们制定了规范化的流程。这个流程可以帮助我们严格管控好每一环节,规范好每一步,让每一位同学都能快速上手,了解绘制图标的工序,规范地展开工作,最终完成图标绘制任务。2. 专人统筹我们以小组为单位,根据各组人数分配不同数量的图标,并结合各组所负责的业务发放对应的图标。图标绘制工作是列入到各组的需求安排里,以业务需求去安排人员和交付时间。考虑到各组人员紧缺与业务繁重的情况,我们有专门的统筹人把这 3000 个图标进行分批处理和分发,按批次定量绘制图标,减少堆积压力。作为统筹人,需要跟进各组图标分配情况、沟通协调、绘制进度、绘制指引、质量把控等多个事项。同时,也要做到定时收集反馈和提出优化建议,逐步完善多人协作绘制图标的模式,确保图标绘制项目如期完成。3. 严格控质为后续产出的图标达到一个专业的水平。我们制定了一套系统的 2021 版图标绘制规范,解决现存图标绘制表意不清晰、风格不统一、体量不一致等问题。通过严格规范图标的绘制,能够让大家绘制出来的图标质量是符合标准的。每一批图标绘制完成后,都需要自行进行图标设计自查。各组自查没问题就会统一交付到统筹人,再一遍又一遍审核,如遇不通过图标,将通知返稿直到调整通过才算是绘制完成。套色技术支持,适应不同场景图标绘制完成后,还剩下最关键的一步 —— 套色。WPS 2021 的功能图标需要兼容四大组件(WPS、WPP、ET、PDF)、适配深浅色皮肤和个性皮肤、同时还要尽量降低资源包大小,因此图标的适应性对于我们来说是个很大的问题,此时就需要用套色来解决。套色的原理是通过修改 SVG 图标文件中的代码来修改图标的颜色。设计只需要对输出的图标文件进行颜色标记,然后研发再通过这些标记替换颜色,实现图标颜色的变化。目前,这种套色方式已经在组内试验完成并在各个业务的图标绘制工作中进行了推广。套色给我们的工作提供了很大的便利,主要体现在 3 个方面:这个套色工具我们命名为「Style Icon」。通过这个套色工具,我们实现了不同主题皮肤的兼容,这是落地后的部分皮肤界面效果。后续如果有更多的皮肤需要适配,都能很好的适应。总结在设计层面,经历了不同阶段的探索和优化,我们逐渐找到了设计上需要关注的平衡,例如创新与易用的平衡、认知与行为的平衡、用户习惯的平衡等。平衡好这些,会为我们的产品迭代提供很好的指引。在协作层面,第一次使用多人协作的模式,快速完成了 3000 个 图标的绘制,并取得了预期成效。在持续不断的图标迭代上,还会面临越来越多的挑战。我们将继续完善多人协作模式,并将这种模式运用到更多项目中去。在套色工具层面,为了让一套图标适应到不同的场景,是我们一直以来的难题。 如今,设计研究的套色工具就可以完美解决了,这对于我们来说,是非常大的突破,也是设计价值体现之一。感谢阅读!本篇来源:优设网原文地址:https://www.uisdc.com/wps-3000-icon-redesign
后台 高级 功能 FE内容付费系统可应用于付费阅读文章、付费看图片、付费下载、付费视频播放、付费音频播放的网站建设。自带手机版、电脑版,支持微信、QQ等移动端应用访问与分享。功能和模板可通过插件形式扩展。程序特点:1、功能完善:网站各种SEO属性设置、留言评论、会员投稿、会员积分功能、管理员管理、数据库备份还原、遍布全站的广告位、后台操作日志详细记录、无限级栏目、自动检测首次安装环境、文章管理、文章列表条目自动伸缩、评论功能、批量采集、站外分享、移动端自动适配等2、自动化程度高:自动提取自定义字数的摘要作为预览内容免费查看自动设置文章第一张图片为缩略图自动检测首次安装环境自动补充页面空缺,文章列表条目自动伸缩自动适配手机与电脑版自动生成导航栏3级下拉菜单自动生成首页左侧竖向导航栏,并支持3级下拉批量设置栏目下所有文章付费阅读,也可单独设置某篇文章付费阅读自动判断会员等级及积分,满足条件自动显示查看的内容。否则会根据等级或积分提示会员进行充值登录后自动跳转回原页面自动采集文章、自动发布文章、自动生成静态(高级功能)自动定时发布(高级功能)自动搜索引擎推送(高级功能)自动图片本地保存(高级功能)自动过滤危险提交(高级功能)会员充值自动到账(高级功能)支持支付宝、微信在线充值(高级功能)3、一键更换的功能与模板高级功能插件带来丰富的扩展,在后台一键安装所有的模板可随意切换更换,在后台一键安装每个模板都支持至少10种颜色的切换(高级功能)模板布局在后台可视化调整(高级功能)模板的单个模块在后台可视化开关(高级功能)4、支持微信小程序、APP、百度MIP、微站可扩展出微信小程序、APP、百度MIP、微站,一个后台进行管理(高级功能)5、搜索引擎友好整站具备静态化、动态化、伪静态化的功能具备搜索引擎主动提交、自动提交、sitemap生成(高级功能)整站写入标准的html标签,有利于SEO整站可生成全局内链关键词更多功能请亲自体验吧后台登录地址:http://你的网址/admin登录账号:admin登录密码:admin更新日志 V4.52:优化客服插件安装接口