UED2022下半年工作总结

搜索规范的统一及落地
搜索迭代设计总结
1) 主要规范迭代内容：新增内容模块、视觉一致性、功能一致性、简单易用
2) 优化迭代信息流，更改标题及排版

全站规范的统一及制定

栅格系统实施规范计划：
梳理全站页面设计尺寸及样式
侧边栏：宽度按24列栅格，占比6个列宽(338px含间距)，线框颜色#F0F0F2
内容栏：内容按24列栅格，占比18个列宽(1042px含间距)，左右侧栏间距保持8的倍数且最小值为24px

颜色系统实施规范计划：

按钮色：主要提示按钮为圆形面性(#FC5531)/文字(#FFFFFF)，辅助按钮为线性白色皮肤下(#CCCCD8)/文字(#555666)
字体色：所有标题字白色皮肤色值均为(#222226)，辅助文案feed流摘要(#999AAA)，次要文案(CCCCD8)
线框色：白色背景下(#F0F0F2)暗色背景下(#F0F0F2，0.5)
总结：#FC5531#222226#555666#999AAA#CCCCD8#F0F0F2

字号系统实施计划：
将对文字字号进行字介与行高定义，形成一定的组合规律，以应用于多场景设计，保持良好的阅读感受和信息节奏。对于博客详情页及主站首页，字体的行高均按栅格规范8px为最小单位统一，内容与图片间距也同样遵循这一规范
信息流标题字18px 行高28px B500px
摘要文字14px 行高22px B500px
提示文字14px 行高22px B400px

图标实施计划：
图标上也将进行细节统一调整，目标及设计依据“风格简洁”、“表意明确”、“可延展性”等几个设计原则来保证图标再CSDN产品体系中达到易读、一致、美观的目的。根据CSDN产品形象，也会在主要功能icon上加入品牌形象基金，让icon更丰富有趣
功能类：大小16x16px面性，交互氛围默认(#999aaa)\Hover(#555666)\反馈(#FC5531)

2022年7月-12月进行搜索设计改版迭代

设计思考总结：本次迭代分涉更新设计理念分别从视觉一致性：相似元素以相同方式呈现，构成视觉一致性在认知和使用上保持一致。颜色、字体、尺寸、按钮，标签等组件在各类场景下复用保证体验设计一致性。功能一致性：目标明确，产品界面的框架布局、聚焦方式、信息优先级、操作流程都需要给到用户一致体验，让用户在操作过程中感受到自然、易理解的感受。简单易用：提升效率，相似的使用方式和相似的功能体验会构成功能的一致性。功能的一致性增加了产品的可预测性。

涉及调整方向：
Toolbar按钮全站统一圆角设计、搜索框位置变动（AB测试）
搜索结果页迭代设计：
目标：在搜索场景中，通过区分用户的意图，从而做到不同意图设计不同的策略和不同的结果样式展示，从而更好的满足用户的需求，给用户带来更好的搜索体验。
带着工程实现的思维思考页面布局，综合产品需求及业务需求，对页面侧边栏及内容区进行统一设计，对整体内容进行24列等分，支持多业务线共同使用，同一对齐原则
侧边栏：宽度按24列栅格，占比6个列宽(338px含间距)，线框颜色#F0F0F2
内容栏：内容按24列栅格，占比18个列宽(1042px含间距)，左右侧栏间距保持8的倍数且最 小值为24px
1）布局层级-图片与全站统一，由右侧改到左侧
2）针对专业术语类，query：Python
3）类型三：代码实操类，query：Python读取csv文件
4）类型四：代码报错类，query：error during websocket handshake: unexpected response code: 404
5）类型五：软件安装/下载类，query：mysql安装配置教程
6）结果页-博客列表、下载列表、代码列表

针对技能树行数过多留白多、Feed流信息复杂等问题，针对性找到准确的解决方案，提高用户解决问题的效率。

针对小白用户释放视频系列课程，帮助小白和进阶人员进行系统的提升。

猿如意结果页模块新增
1)一行代码——搜索问题精确答案，帮助用户快速解决问题，可快速复制代码。点击右上角语言logo切换代码分类，使用户检索答案范围变得更加精确，并将标题字号统一为18px，一级文字字体500px加粗处理，颜色为#222226，次级文字400px常规不加粗处理字体颜色为#777888进行统一规范

交互样式：
全屏复制、可以快速去到猿如意官网了解D端工具，右侧用户反馈可以快速体现代码质量。
搜索列表及猿如意搜索整体效果展示
主站首页UI迭代
–主站首页文字信息流的字号，行间距，段间距要确定一个最适合大部分用户的默认值
–WAP端首页UI设计迭代
–WAP端博客首页UI设计迭代
博客详情UI迭代
–目录UI调整：目的在一屏幕中减少目录高度，多曝光内容浏览
–评论UI调整：为相关推荐预留更多曝光空间，同时将评论点击交互到右侧方便同时浏览文章内容和评论内容
–增加评论红包打赏：目的将打赏和红包功能结合，即用户可对博主评论进行红包打赏，博主可拿到分成，其余额可让用户抢红包并增加打赏者曝光
–划线词样式迭代
博客分享卡片设计
–目的让用户产生分享欲望，增加留存和活跃度
开发者可视化地图UI设计（map.csdn.net）
–可视化地图：在全国地图上显示每个城市的 top N 博主，和其他事件
博客主页优化设计
–优化拆分流量细节，增加总访问量设计，交互展示所属流量来源渠道
–WAP端个人主页设计迭代
全站Toolbar设计迭代(目前只在设计稿提案阶段)
–当前主站 ToolBar 存在“入口信息过于密集”、“营销图标信息过多”问题，对此类问题进行样式上的调整优化
其它用户体验UI方面
–社区首页改版迭代设计
– View Design 官网首页设计

1.主站首页UI迭代
a.将文字信息流的字号，行间距，段间距要确定一个最适合大部分用户的默认值，收缩头条模块与热点模块，去掉左侧大图，改为小图方式，展示更多内容方便用户选择，同时在每条内容Hover时展示更多操作功能：

目的，将首屏幕内展示更多的内容让用户浏览，同时更多操作可以用户方便操作，赞/踩功能可以让内容推送更准确。同时针对空间的调整对首页的feed流空间进行调整，结构调整为左图右文结构，将标题与摘要对齐缩短标题高度，加入随机默认封面，使的信息结构统一效果如下：

b.WAP端首页UI设计迭代，目的提升更好的用户体验，并将WAP风格设计尽量与APP端统一，减少其它风格，使得整个产品线PC/移动两个端进行统一。涉及到统一点：1.将feed流右侧加入1:1图片；2.展示两行摘要，并按规范统一字号及颜色；

c.WAP端博客首页UI设计迭代，目的提升更好的用户体验，并将WAP风格设计尽量与APP端统一，减少其它风格，使得整个产品线PC/移动两个端进行统一。涉及到统一点：1.将feed流右侧加入1:1图片；2.展示两行摘要，并按规范统一字号及颜色；3.统一负反馈交互及样式，4，简化一类标签和二类标签的交互选择如图：

2.博客详情页面UI迭代
a.目录UI调整：目的在一屏幕中减少目录高度，更多曝光浏览内容，将目录字号调整为16px,行高24px并统一，颜色用为链接色（#222226）由于目录可以分为6个级别，每个级别将缩进48px并统一。每一行目录取消间距用字的行高间距已压缩整体目录行高。效果如图：

b.评论UI调整：为相关推荐预留更多曝光空间，同时将评论点击交互到右侧方便同时浏览文章内容和评论内容，并将打赏与红包功能合并，将评论登录后只展示一条放在文章底部，目的留更多空间展示相关推荐内容，点击评论按钮从右侧唤起评论列表流，既方便查看评论，又不遮挡左侧博文内容。同时用户还可对文章进行评论红包打赏，打赏者将获得更多曝光机会，被打上者将获得一部分固定红包份额奖励，其它用户还可在评论中抢的红包，效果如下：

c.划线词样式迭代，优化iocn细节、交互细节。统一icon在黑皮肤及白皮肤效果统一。将Hover显示文字内容为减少层级，将文字展示在icon下方，一目了然。效果如下：

3.博客分享卡片设计
目的让用户产生分享欲望，增加留存和活跃度。建立用户可选择的图片库，用户在hover分享icon同时可看到精美的图片分享框，同时可以用换一换按钮进行图片更换，图片类别氛围24节气图、IT行业图、职业类别图等，其中每快到节气时将自动设置当前节气分享图片，烘托分享氛围。同时也设置VIP用户权益通道，VIP用户可更换专属图片，详效果如下：

4.开发者可视化地图UI设计（map.csdn.net）
可视化地图：在全国地图上显示每个城市的 top N 博主，和其他事件。目的：a.展现 CSDN 几百万活跃用户的动态和状态 – 全世界只有 CSDN 能做到这个。b.鼓励CSDN 的博主发现同城的用户，帮助线下交流；c.鼓励CSDN 博主力争上游，占领某城市的top 位置；c.有更多的渠道去显示用户、社区的事件；d.展现用户直接更多的联系 – 我的铁粉都分布在什么地方？e.利用 “地图” 这个新的维度， 把一些探索性的元宇宙元素展现出来。 f.它做成一个独立的开源项目， 我们CSDN 整天鼓吹开源， 我们自己有什么开源的呢？这项目就是开源的的一个例子， 从 CSDN 的接口拿数据显示。 在开源项目中， CSDN 的接口（示意性接口）只提供测试性的数据， 实际运行的项目中， CSDN 的接口给的是真实的数据。效果如下：

数据可视化网址：map.csdn.net

5.博客主页优化设计
a.优化拆分流量细节，增加总访问量设计，交互展示所属流量来源渠道。问题：用户参与了很多其他活动 （发帖子，讨论，动态等），但是没有博客，他的首页显示 0 被访问。 用户比较迷惑和不满。改为总访问，【访问总数】= 博客，帖子，回答，blink，个人主页，技能树的知识点博客，下载资源 （所有有价值的内容）被访问的总和，效果如下：

6.全站Toolbar设计迭代(目前只在设计稿提案阶段)
当前主站 ToolBar 存在“入口信息过于密集”、“营销图标信息过多”问题，对此类问题进行样式上的调整优化。问题：a.当前主站 ToolBar 存在“入口信息过于密集”、“营销图标信息过多”问题，对此类问题进行样式上的调整优化；b.同时为核心功能“搜索”进行更有效的贡献上游入口流量。
设计思路：将Toolbar高度由48px调整为64px。目的为统一为导航增加活动标签。增宽中间搜索框，提高搜索效率。将右侧快捷入口调整为三个版本，分别为：1.简洁图标版本，好处节省空间使页面简洁。2.图标加文字版本，好处节省空间图标设计也可给页面增加设计感。3.文字版本，好处功能一目了然使用方便，缺点占据导航更多空间。效果如下：

7.其它用户体验UI方面
社区首页改版迭代设计，目的：优化页面布局，与整体产品页面保持一致。优化搜索交互，方便用户对社区精准搜索。提升页面美感，将页面整体分为上、中、下三部分。顶部为广告及快捷功能入口。中间为社区推荐、搜索。底部为社区feed流推荐。点击搜索后，向左展开宽度，下拉展示更多标签选择。效果如下：

View Design 官网首页设计，目的：优化页面布局，提升设计美感。将banner底部增加4个快捷功能入口，优化功能iocn融入科技感及3D风格并统一蓝色调。统一功能展示模板效果如下：

改版设计总使人望而生畏，有太多变化与未知。我们不仅仅是在外观上下赌注，也是在重新审视整个流程让设计交互更多的去主导方案。随着新功能的增加产品正在变得更复杂，我们依旧坚持着简洁易用的原则。意识到在不停的改版迭代期间要看清前方的路并不容易，所以要离开起初的舒适区，我们也在新的体验设计中做出转变：以"解决用户问题为导向"做设计，为APP 所设计的每一个屏幕画面，都需要仔细斟酌，让每一个操作都发挥它的作用。
1、App5.7.0-5.12.0更新迭代
App首页（feed流）
首页是我们优化的重点方向，细心的用户会发现推荐流，动态，关注等都有进行进行优化调整。卡片样式涉及推荐、关注、动态，内容类型有短图文、长图文、中视频、直播。对于动态内容的card会有规范标准的优化，在动态的热门、最新、投票、同城 中也进行统一优化。
设计思路：在这些页面我们要解决的是让用户快速浏览到自己感兴趣的内容，并且能够浏览到自己感兴趣的内容。首页导航条我们优化了样式；对于信息流逐步的优化了每条内容展示信息元素、主次区分、封面尺寸、字体、字号、间距等信息。我们希望信息流是简洁的，在浏览的时候不会觉得视觉疲劳。
推荐流：

关注流，视频流：

App信息流及相关推荐原生广告card设计
优化广告位样式，统一卡片流风格，降低用户因误操作点击跳出页面

App-关注流单用户列表优化
统一了新版卡片样式，让用户体验更佳～

App个人主页
增加个人IP属地

App嵌入H5导航栏优化
优化了顶部的关闭按钮位置，减少用户因为误操作从而退出页面的尴尬场景，希望大家使用时多多提出好的使用建议，我们会针对性的的去优化调整。

App搜索
搜索列表页信息结构调整
针对博客和下载卡片进行了优化调整，博客卡片优化了数据格式统一规范化展示，下载资源修改了关键词，大家可以根据搜索出来的文章资源热度进行选择性浏览
搜索toolbar默认词展示优化
在搜索框里会展示多个默认词，提供与用户自身相关的信息，提升搜索功能的使用频次
搜索中间页结构优化
主流App搜索中间页，推荐主要分为三大模块：搜索历史、推荐搜索、站内热点。
通过这三个模块对用户站内搜索需求的归类，按照分类前置搜索词，主打快捷搜索，通过优化现有入口，给予用户更多搜索推荐和体验优化
搜索结果_下载内容展示优化
在搜索结果页优化下载内容类型的展示资源样式，优化有下载需求用户在搜索场景的体验，让下载容易找、突出重点

App海报分享双端互通
完善博客的海报分享在App、PC功能体验的一致性，大家在阅读博文的时候可以选择自己喜欢的海报封面分享到主页或者朋友圈，再也不会因为分享模式单一而苦恼了

App分享组件优化
分享出去的不等同于看到的:例如用户A在APP上看到一片文章,分享出去到微信,但是用户B打开的时候,可能进去的是小程序,而我们的小程序的功能体验有些是缺失的,导致用户B看到的文章并不是完整的这片文章,用户体验大打折扣。我们的PC、APP、小程序、Wap,每个端的分享的体验都存在功能的差异性,一个用户在不同的端的分享体验不一致。就像是在几个不同的产品里，因此为了提升用户使用体验进行了统一优化

App博客详情页目录优化
同步PC端博客详情页目录浮窗功能，目录本质上是辅助阅读工具，用户进入到详情页进行阅读，主要关注点应该是在内容详情，目录占据过多篇幅也会影响用户的阅读体验和文章本身的排版效果，最终设计方案：app、wap移动端交互采用“悬浮工具方案”

App资源上传

App资源上传入口优化
用户手机端获取资料的场景越来越多，在手机端通过小程序或者app上传资源满足用户管理、上传资源需求

作者上传等级适配统一pc和app端的资源上传
新增资源发布形式，按照作者等级开放对应的发布权限，方便了用户在app端上传各类型资源量

App收藏模块优化设计
为了便于大家收藏优化了收藏交互体验，增加了快捷收藏方式用户可根据自己的喜好决定是否添加至多个收藏夹，在新建收藏夹设置中为用户贴心的增加了默认收藏夹设置，可以随时更改自己的收藏夹属性。我的收藏内列表也进行了优化调整，希望大家多多使用反馈使用体验结果给我们

App底部评论框规范统一
统一规范化详情页底部评论框样式，简化输入框去除过多的UI元素

wap引导下载页改版
wap端由于自动弹窗影响用户正常阅读体验，优化并进一步提升用户的使用体验

百度小程序
百度小程序技能树）、百度小程序个人主页展示ip地址、百度小程序-广告占位调整

感谢博主给予评价