-
Notifications
You must be signed in to change notification settings - Fork 43
Figma Design File Change Logs
vistaing edited this page Apr 7, 2023
·
54 revisions
本页面用于记录设计稿的修改历史，并非网站的更新记录。
- 条目页面中「章节」子页面的设计
- 为全局错误页面创作 Bangumi 娘主题的小插图
- 修改评论组件的设计，将用户 ID 后面的签名、被引用的内容字号从 16px 调至 14px，将头像变长从 60px 调至 40px（同步修改后面的锁定等 Logo 的宽度），删除原置于评论内容下方的「回复」「+1」等功能按钮，改为置于一条评论的右上角、以图标替代按钮文字
- 将人物、小组等页面中评论区的各行之间宽度由 10px 调整至 12px 以匹配上一条修改
- 新增「贴贴」功能的相关设计
- 在章节信息编辑页面中新增了管理员可见的功能按钮，暂置于最底部、与提交按钮平行
- 完成刷新页面的设计，设计稿中演示的是已输入 ID 后预览对应条目信息的情况，建议未输入 ID 时仅显示输入框、提交按钮
- 完成合并、解锁页面的设计，在设计文档中批注了一些设计提示
- 调整了评论中 +1 样式的行间距，待研究是否把这些文字内容的字体大小、头像大小进一步缩小
- 优化关联角色、人物、条目等子页面中涉及的已关联内容列表的交互表现，默认直接展示拖动把手、删除按钮而不再是鼠标移过时才展示，并引入了已有的数字排序功能设计，方便编辑者直接编辑每一行的序号，从而直接得到排序结果；顺手将拖动、删除按钮组件化，方便日后统一管理
- 完成了对详细描述页面入门编辑模式的交互修改，更紧凑且易用；由于 Figma 的原型展示效果有限，在涉及的 Figma 组件上批注了一些动效设计提示
- 调整了详细描述的入门模式和维基模式页面宽度，同时调整页面内部的间距、元素宽度等
- 调整并统一了维基编辑器页面中所有右边栏的文字行间距，现在每一个以多行文本为主要内容的模块中（比如条目修订历史），模块标题与内容的间距为 20px 不变，但内容的行间距缩为 12px（与其他页面的边栏保持一致），更具体的说就是让文字与分隔线之间的距离都是 12px
- 小组帖子页面中，将右边栏的「小组信息」标题行去掉
- 原来提交回复的按钮偏小，全局统一调整为 38px 高
- 为浮于上层的弹出菜单新增了投影效果，截至目前涉及了顶级导航栏下来菜单、搜索结果页面中每个结果下方收藏按钮 hover 效果两处有变化
- 忘记给小组里面的帖文页面设置楼主的编辑、删除功能了，已在小组帖文页面顶上补上了，在楼主正文、按时间浏览控件之间左对齐，与各楼的控件设计保持一致，这里加了一个「评论」按钮，点击它可以快速跳转到最底下的文本编辑器，方便楼层很高时使用
- 将小组页面中二级子页面导航栏的颜色从蓝改为粉
- 调整小组部分子页面右边栏设计，去掉了帖子页面上的顶部发新帖组件，将发新帖、加入小组按钮合并至了下方的小组信息模块中；暂时隐藏了发新帖页面的边栏组件
- 调整了修订概况子页面的宽度及内容，缩减了展示在边栏的修订历史记录的内容，仅保留用户名、修订行为（可缩略）、编辑时间（距今多久，在设计稿中展示了我觉得比较合适的时间颗粒度）
- 调整小组页面的小组发帖子页面的宽度及相关设计，暂时隐去了原来边栏上的「文档信息」组件（因为原本就有点聊胜于无的字数统计、语法帮助都在其他地方有了）；修改了边栏中当前小组信息的设计，把三个子页面的按钮调到文字简介上方，并缩减文案使按钮更紧凑
- 调整搜索结果页面中两栏之间的间距（从 20px 改为 30px），右边栏宽度不变、左栏缩窄，同步调整上方搜索栏三组件之间的间距（从 20px 改为 30px）
- 调整通知页面中两栏之间的间距（从 20px 改为 30px），左右两栏等幅缩窄
- 调整带控件的文本编辑器设计（对应名为
contentInput、commentInput、message的组件），统一在文本框内、控件行的最右端增加字数统计，统一删除原位于提交按钮右侧的字数统计 - 应宽度调整，删去原来位于每条私信标题后的「last reply @ 」字样
- 调整页脚的宽度，对应名为
footer的组件
- 搜索结果页面宽度改为 1200px
- 调整顶级导航栏下方的搜索栏内元素间距，稍微增加了输入框的宽度，使输入框、两个筛选器三者之间的间距同为 20px
- 调整页面布局，将左右分栏比例改为 7:2，实际上几乎保留了原设计中左栏的绝对宽度、缩减了右边栏的宽度；略微增加每个搜索结果的内容的宽度（未改缩略图大小，调整了文字部分的宽度，同时缩小了左右栏之间的空隙至 20px（这样也就让左右栏的空隙与上方搜索栏内元素间隙对齐）
- 调整「搜索结果」页面中单条搜索结果最下方「收藏」按钮的设计（对应名为
searchResultFavoriteButton的组件），将高度从 34px 改为 38px，重构了 hover 状态的设计（对视觉效果几乎没有影响，但原来的按钮中文字未垂直居中），修改了用户已打分条目的「收藏」按钮样式 - 调整了页码按钮组的设计，（对应名为
paging的组件），将高度从 34px 改为 38px
- 调整全站顶级导航栏宽度，微调了导航栏中各元素（组）之间的间距（菜单项目间的间距未变）；考虑到宽度缩减，为了不那么拥挤，先去掉了右侧头像旁的「设置」图标，后续再看要不要去掉「通知」按钮，删除了注销状态下「注册|登录」的 Hover 状态并收紧间距
- 缩短「搜索结果」页面中搜索框的默认宽度，并去掉之前塞在「Enter」图标右侧的「精准匹配」选项（以后放到右侧边栏里面）
- 调整了 Tab 导航栏中「刷新」「合并」「锁定」三个项目的宽度，不再保持 Tab 中各项宽度一致，而是根据 Tab 名字数来确定宽度
- 调整了「详细描述」子页面中「入门模式」编辑工具的设计与交互
- 完善了「修订历史」子页面的设计，增加了比较两条编辑记录的功能，并在 Figma 中的相应位置备注了交互的建议（总体跟现在用的那个脚本一致，我只是稍微调整了下视觉风格）
- 新增「章节信息」「更新」「合并」「锁定」四个子页面，相应调整了导航栏（各新子页面正在施工）
- 微调了「关联人物」子页面右侧边栏中「条目信息预览」的行间距
- 将「详细描述」子页面中「入门模式」的交互做了微调，增加了二级项目名的样式；当 Wiki 编辑者在入门模式下新增行时，在每行的第一格新增了空白状态下的引导文本
- 为「入门模式」下项目名的层级改变引入了新交互（并在表格的顶部增加提示文本），建议使用 Tab 和 Backspace 作为快捷键，一级项目名按 Tab 变为右对齐的二级，二级项目名则是将光标移至已输入文本最左端、按 Backspace 变为左对齐的一级
- 将主要用于文字的三个颜色标准（
Text/Gray 100、Text/Gray 80、Text/Gray 60）、与之搭配较多（比如分隔线）的装饰色（BG/Gray 10）做了调整，统一提高了灰度水平
- 完成了「关联条目」「修订历史」子页面
- 修改了「条目封面」子页面中与封面缩略图的交互
- 完成了「关联人物」子页面