UED2022下半年工作总结
统一规范在搜索中的实施及其效果分析
本次搜索引擎迭代设计的核心工作汇报
- 关于搜索规范的更新与实施：包括新增功能模块、提升页面美观性、优化操作一致性和增强操作便捷性等核心内容
- 在信息流优化方面：通过调整信息展示顺序以提升用户体验，并对页面标题和格式进行系统性改进以增强可读性和专业性
全站规范的统一及制定
根据栅格系统实施规范制定计划：规划全站页面的设计尺寸和样式方案。左侧区域宽度设置为24列栅格单元，并占用了6个单元（总计宽度338像素包含间隙），线条轮廓采用#F0F0F2色。右侧区域按照24列栅格单元划分，并占据18个单元（共计宽度1042像素包含间隙）。两侧边栏之间的间隔设置为8的整数倍，并确保最小间隔不小于24像素。
颜色系统实施规范计划：
主功能按钮采用圆形平面（#FC5531）并配合主功能字体颜色（#FFFFFF）；而次级功能按钮则采用线性纯白色背景（#CCCCD8）并搭配次级功能字体颜色（#555666）。在字体设置方面，默认情况下标题字体选用纯白色皮肤色调值（CCT skin tone #FFCCCB），该色调值适用于所有标题字体；对于非标题类文本内容，则根据具体需求分别采用不同的摘要色调值（Summary skin tone #FFAAAA）与次要内容色调值（Minor content skin tone #AAAAAA）。在视觉效果上，默认情况下所有边框组件均以纯白色背景-tone (#FFF4FC) 基础设计；而对于特殊场景应用，则可进一步结合暗色调 (#FFF4FC, 1/4 alpha) 实现更好的视觉层次感。
字号系统实施计划：
本计划旨在对文字的字号进行字距与行高的设定，并形成一套合理的组合规律。这些规定将适用于多种场景的设计需求，在确保良好的阅读体验的同时也能维持适当的节奏感。
对于博客详情页及主站首页的内容布局来说，在设计时会遵循以下原则：
首先，在字体尺寸方面做出了统一规划：
一、信息流标题字号设定为18磅（pt），其行高配置为28磅（pt），B级字体。
二、摘要部分则采用14磅（pt）字号大小，在行间高度上设定为22磅（pt），使用B级字体。
三、提示类文本同样采用14磅（pt）字号大小，在行间高度上设定为22磅（pt），使用A级字体。
图标实施计划：
将对图标的细节进行统一调整，并遵循"风格简洁""表意明确""可延展性"等设计原则以实现 icons 在 产品体系中的易读、一致性和美观目标。基于 产品的形象，在主要功能 icon 上加入品牌形象基金以使 icon 更具趣味性和丰富性。功能类：大小 16x16px 面性，默认交互氛围为 (#999aaa) 按钮悬停 (#555666) 按钮点击反馈 (#FC5531)
2022年7月-12月进行搜索设计改版迭代
设计师在本次迭代中主要更新了设计理念。从视觉一致性角度来看，在各认知与使用层面均需实现高度的一致性，在视觉感知和使用体验上保持高度协调统一。具体而言，在颜色搭配、字体样式、尺寸规范以及按钮设计等核心元素方面实现了统一的设计标准，在不同场景下进行复用应用以确保体验设计的一致性。在功能设计方面则强调了核心目标清晰化原则，在产品界面布局框架、聚焦方式指引以及信息显示优先级等方面实现了统一的方向性指导，在操作流程中需带给用户一致的体验感受以增强其自然易懂的特点。通过优化各功能模块之间的逻辑关联度来提高整体系统的运行效率水平，并通过实现功能体系的一致化来使产品具备更强的可预测性和稳定性
涉及调整方向：
Toolbar按钮将实现全站统一的圆角设计，并对搜索框的位置进行AB测试优化
搜索结果页迭代优化目标：
在搜索场景中根据不同用户意图划分不同策略，并分别设计不同的效果展示样式以满足用户需求与体验的最佳化表现
基于工程化思维对页面布局进行全面设计，在满足产品与业务需求的同时实现多业务线资源的有效共享与协同
采用24列等分栅格方式进行整体布局规划：侧边栏占位宽度为6个列宽（338px包含间距），内容区域为18个列宽（1042px包含间距），确保左右侧栏间距符合8倍数且最小值不低于24px
主要页面布局调整方案包括：将布局层级由右侧转向左侧排列；针对专业术语类问题（如query：Python）建立专门知识库；对代码实操类问题（如query：Python读取csv文件）提供专项指导；针对代码报错类问题（如query：error during websocket handshake: unexpected response code: 404）制定快速排查流程；建立软件安装与下载知识库（如query：mysql安装配置教程）以及提供相关工具支持；最后完成搜索结果展示界面的设计与开发（包括博客列表、下载列表、代码列表）
为了解决技能树行数过多且留白较多、Feed流信息过于繁杂等问题，有针对性地寻找精准的解决方案，并通过这些措施有效提升用户的解题效率
针对小白用户释放视频系列课程，帮助小白和进阶人员进行系统的提升。
猿如意结果页模块新增
1)新增一条代码指令——搜索问题精确答案
2)帮助用户快速获取解决方案
3)操作简便
4)便于用户复制粘贴使用
5)点击右上角语言logo切换代码分类
6)提升信息检索的精准度
7)统一设置标题字号为18px
8)一级文字采用500px加粗显示
9)二级文字采用400px常规字体显示
10）设置标题颜色为#222226
11）次级文字颜色统一为#777888
交互样式：
全屏显示：快速引导至猿如意官网查看D端工具的详细信息。
右侧用户反馈区可直观展示代码质量情况：左侧区域集中展示用户反馈信息。
搜索列表及整体效果展示：
主站首页界面优化方案：包括但不限于文字信息流布局优化方案。
WAP端首页及博客首页界面优化方案：重点在于布局和元素分布的合理安排。
博客详情界面优化方案：
目录区布局方案：旨在减少屏幕内目录区高度以提升内容曝光率。
评论区布局方案：将评论点击交互设置于右侧以实现内容与评论同步浏览。
红包打赏功能集成方案：实现打赏与红包功能结合以增强互动体验。
划线词样式设计：
卡片式分享页面设计目标：通过视觉化引导用户主动分享以提升留存率。
开发者可视化地图界面设计（map..net）：
全国城市top N博主及其相关事件一目了然展示。
博客主页交互优化设计方案：
流量细节拆分方案实施以提升总访问量并明确流量来源渠道。
WAP端个人主页界面优化方案：
基于当前Toolbar存在的入口信息密集和营销图标过多等问题进行样式优化调整。
其他用户体验领域：
社区首页改版设计方案已初步完成并进入测试阶段。
官方首页View Design设计方案已完成初稿并进入完善阶段。
1.主站首页UI迭代
设置为适合大多数用户的默认文字信息流字号、行距及段距参数，并对头条和热点区域进行压缩处理；移除左侧大图标并采用小图标展示形式以增加内容可读性；优化布局使更多信息呈现以便于用户浏览；同时在每条具体内容元素悬停状态时动态展示更多交互功能以提升用户体验
目标在于优化首页界面以呈现丰富的内容供用户浏览，并确保便捷的操作让用户体验更加顺畅。此外, 点赞/踩踏机制能提升内容分发的精准度. 同时, 通过优化首页的空间布局以改善视觉体验, 重新规划版块布局为左图右文结构, 将标题与摘要对齐并适当缩短标题长度, 并随机设置默认封面图片以提升整体美观度. 效果如下: 通过优化布局和功能设计使信息呈现更加协调美观.
b. WAP端首页的UI设计进行了迭代优化, 其目标是提升用户的更好体验感, 并通过将WAP风格的设计方案尽可能与APP端保持一致, 从而避免其他风格的存在, 实现产品线中PC和移动终端的统一性。具体包括以下几点:首先, 在Feed流右侧增加1:1比例的图片;其次, 展示两行摘要内容, 并严格按照格式规范统一字号和颜色搭配
c.WAP端博客首页的用户界面（UI）设计进行了迭代优化, 目的是为了提升用户的更好体验, 并尽量使WAP风格的设计与APP端保持一致, 减少其他风格的存在, 从而实现整个产品线中PC端和移动端的统一规划。具体措施包括: 在feed流右侧插入1:1比例的照片; 展示摘要内容分为两行, 并确保字号和颜色均符合规范要求; 整合所有平台的一致性负面反馈交互界面及其样式设计; 简化交互选择流程并附图说明
2.博客详情页面UI迭代
在UI设计中进行优化：首先是为了在一个屏幕上减少目录的垂直占用空间并增加内容的可见度。具体操作包括将字号设置为16px，并行高统一为24px；颜色采用链接色（#222226）。此外，考虑到目录包含六个层级结构，则将每一级的缩进量统一设置为48px。同时，在取消缩进后的间距处理上已优化整体布局。
b. 优化后的UI设计包括以下几点：首先，在推荐区域增加了显著的曝光面积；其次，在不影响主要内容浏览的前提下将评论互动功能移动至右侧界面；此外，在优化后设置为登录用户仅显示一条评论置于文章底部；最后，在操作体验上进行了多项改进：点击评论按钮切换至右侧显示评论列表流；操作过程更加便捷：既便于查看每条评论而不影响左侧博文阅读体验；同时在视觉布局上实现了各要素之间的合理协调；此外还特别考虑了用户体验细节：通过合理的分屏设计提升了使用效率；具体效果如下：
c.样式迭代优化IOCn的细节和交互细节。统一IC符号在不同肤色下呈现一致的效果。使得Hover显示的文字内容减少层级，并将其放在IC符号下方以实现直观易懂的效果。
3.博客分享卡片设计
该平台旨在激发用户的社交传播欲望，并有效提升用户的留存率与活跃度。本平台创建一个多选的图片库供用户选择，并设计了完善的互动功能：当用户悬停在分享图标时，默认会展示一个精美且直观的图片展示框；此外，在更换背景时还可以通过"换一换"按钮快速切换至不同背景图像。平台特别设置了节气主题背景切换功能：当快到下一个节气时，默认会更新为对应的节气主题背景图像；同时为VIP用户提供专属化的服务通道，在此过程中享有专属更换权利。
4.开发者可视化地图UI设计（map..net）
可视化地图旨在在全球范围内展示各城市的主要网络红人及其互动情况，并与各类事件活动相结合。其主要目标包括：
- 展示全球千万级别的活跃用户动态及状态；
- 鼓励博主发现同城用户以促进线下交流；
- 鼓励主创争取成为某一城市的首位红人；
- 提供更多展示用户、社区活动信息的渠道；
- 揭示用户的地理位置分布情况；
- 将元宇宙探索元素融入可视化界面；
- 将接口数据转换为开源项目形式。
效果呈现如下：
数据可视化网址：map..net
5.博客主页优化设计
访问总数
访问总数
6.全站Toolbar设计迭代(目前只在设计稿提案阶段)
当前主站ToolBar存在入口信息过于密集及营销图标信息过载的问题
7.其它用户体验UI方面
优化方案
官方首页设计工作主要负责对banner底部的功能入口进行了增配，并整合了科技元素与立体艺术风格结合的界面元素以通融蓝白色系的整体视觉理念。
每次改版都让人倍感压力，并非仅仅是外表上的投入与变革，在重新评估流程的基础上优化了交互逻辑以主导方案走向。随着新增的功能丰富性提高产品变得愈发复杂 但我们始终坚守简单易用的设计理念 认识到在持续更新的过程中规划未来并非易事 因此需要突破现有的舒适区 在新的体验设计中我们将重点转向以解决用户问题为核心的设计策略 每个屏幕界面都需要精心考虑其功能和用户体验 确保每个操作都能有效传达信息或完成预期功能
8、App5.7.0-5.12.0更新迭代
App首页（feed流）
设计思路
推荐流
关注流，视频流：
App信息展示形式及相关推荐自然式广告版块设计 通过调整各广告位的样式设计, 协调统一整体视觉风格, 减少由于操作失误导致的跳转至其他页面的情况
App-关注流单用户列表优化
统一了新版卡片样式，让用户体验更佳～
App个人主页
增加个人IP属地
App嵌入式H5导航栏经过优化
App搜寻功能已全面上线
通过多级分类索引系统实现了用户的个性化查询偏好管理
在结果页面中新增了内容分发模块
提升 blog 平台的 海报 分享体验 双端互通 确保 在 移动端 和 电脑 端 的 功能 体验 高度 一致 让 大家 根据 自己 的 喜欢 选择 喜欢 的 图片 作为 文章 底部 或 侧面 展示 页 封面 让 用户 经历 到 更加 方便 和 丰富 的 互动 方式
App中的分发组件优化工作已展开。需要注意的是，“分发出去”的行为并不等同于直接在该平台看到的内容。以用户A为例，在APP上阅读的一篇文章如果被分发到微信，则可能导致用户的B跳转至小程序界面进行查看。由于当前小程序的功能体验存在一些缺失（例如某些核心模块尚未完善），这会导致部分信息无法完整呈现给用户B（即他们所见的内容并不完全等同于原文章）。这种差距的存在直接影响用户体验水平下降。值得注意的是，在PC端、APP端以及小程序等多个入口下，“分发效果”的一致性表现得不够理想：不同场景下的用户体验出现了明显差异（类似于使用不同版本的产品），因此我们决定对各端口进行统一优化工作
优化App端博客详情页目录页面以提升用户体验
App资源上传
在手机端通过小程序或App优化资源上传入口以满足用户高效管理及上传所需资源的需求
作者支持PC和APP端统一的资源上传功能
App 收藏模块优化设计
为了便于大家实现收藏交互体验的提升
优化App底部评论输入框并规范化其样式设计
wap端的导航下载页面进行了全面升级。
wap端受自动弹窗打扰而影响了用户体验，在经过优化后显著提升了用户体验。
百度官方小程序平台提供丰富的功能组件服务
属于该团队制作的总结内容之一，在此期间其余总结将在2023年上半年持续更新迭代中。