image

Roominess 2.0 网站改版

一览
「Roominess」是我网站的名称,也是我个人的小小空间。最近我觉的我的家稍微有些杂乱。因此,我考虑要好好打扫一下房间,再邀请各位到我们家来作客。
所用工具
Figma、 Hugo
负责部分
全流程Solo
时间周期
5 周

改版原因

旧版网站 预览

图片预览

旧版界面速览1

作品集网站1.0 首页

旧版界面速览2

作品集网站1.0 正文页

改版初衷

  1. 1.0 版本界面问题有些多。
  2. 自己独立的全面的从0到1搭建博客,体会从设计到开发的全流程。
  3. 巩固前端知识,成为一个更好的自己。
  4. 根据自己的需求来重新改版,更加的私人定制化

设计需求

设计需求
  • UI界面更加的清新、柔和
  • 网站整体体验提升
    • 使用懒加载
    • 正文从透明度 0 - 100% 动画加载
    • 响应式布局
  • 模块化展示
    • 专门的设置页面来调整整体模块
    • 模块顺序调整方便
    • 模块内容增删方便
  • 正文阅读体验感提升
    • 标题、正文、图片等相互搭配的细节需要舒适
    • 文章内容页阅读体验感提升
      • 舒缓的背景音乐(默认关闭)
      • 快速设置正文背景(十六进制色彩、图片填充)
    • 支持多种格式
      • 视频类:mp4、mov、avi、mkv
      • 图片类:GIF、APNG、JPG、PNG
      • 其他:P5.js、Processing、3D模型
  • 下载作品集简历功能
    • 调用阿里云盘链接
    • 增加简单加密,一定程度上减少作品集泄漏可能
  • 添加 联系我 的功能

前期调研

原有问题点

主页

  1. 时间仓促、套用主题模板,仅替换内容与图片,非个人定制化。
  2. 首页内容繁杂,不适合国内快速筛选的需求。
  3. 主题风格过于平淡、功能侧重点不够明确。
  4. 主题自带动画效果增加负担。

正文

  1. 原有主题排版以英文为主,对中文不够友好。
  2. 文字字号、字重、行间距、色彩等不适合大段文本阅读、阅读体验感较差。
  3. 整体布局不够大气,右侧提示信息可有可无。
  4. 不支持展示Processing代码。

竞品分析

竞品分析-01

竞品分析-02

网站生成器对比

网站生成器对比

经过上手难度、网友评价、文档支持、是否付费等各个方面的对比后,我最终选择了Hugo作为我这次博客的静态网站生成器。

设计规范

色彩

色彩规范

布局

参照Ant Design采用,网站也采用了24栅格体系。

栅格

24 栅栏

字体、投影、尺寸规范

其余规范

实操中的问题

栅格

设计图是规定的 24 栅格,但是对于前端新手来说,需要用到Bootstrap框架。但是Bootstrap是基于12栅格。

  • 内容框架不是很复杂的时候,没必要使用24栅格体系。
  • 按照具体的业务要求来,不能完全参照大厂规范。

动态交付方式

动态交付格式

  • GIF 占用大,品质低
  • APNG 占用大,品质高(但由于套用 CDN ,又拍云自动将 PNG 转化为 Webp 格式,成为静态图)
  • Webp 占用小,品质低
  • Svga 占用小,品质高(暂时没导出成功过)

现在考虑使用 PNG 静态人物配合 JS写的文字运动代码,一方面减小体积,另一方面能让文字与鼠标有一定的交互。

使用体验提升

细节调整

菜单栏样式

毛玻璃效果 / 菜单栏高度提升

正文宽度调整

宽度8:12

宽度 8:12( 正文区域偏少 )

宽度10:12

宽度 10:12( 正文区域适中 )

不同端口布局

头部 - 移动端

头部 - 移动端

头部 - 桌面端

头部 - 桌面端

项目列表 - 移动端

项目列表 - 移动端

项目列表 - 桌面端

项目列表 - 桌面端
  • 菜单栏所在模块示意( 方便了解现在所在菜单项 )
  • 简历在线查看 ( 直接打开 PDF → 图片形式 + 下载按钮 )
  • 不生硬的动画效果、自然的过渡
  • 压缩图片,缩短加载时间
  • 套用 CDN ,提升各个地区访问速度
  • 使用 lazyload ,提升用户体验
  • 替换图标库,减小资源加载量

新增功能

  • 增加一览、所用工具等介绍( 快速了解项目大体情况 )
  • 目录功能( 方便读者自由选择不同的部分 )
  • 加入平面模块( UI设计师也需要有一定的平面设计能力 )
  • 双栏、三栏布局( 方便一览、左图右介绍 )
  • 黑暗模式(待完成)

项目总结

项目库文件历经 60 多次修改,从设计到开发,各方面理解都有所提升。

项目已经在 Gitee 开源,欢迎 Star.

单位考虑

  • 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px
  • 对于需要适配各种移动设备,使用rem

暗黑模式

  • 对于前端开发不熟悉,设计稿有色彩规范,但并没有基于规范设置自定义属性
  • 未设置颜色组件,没办法一次性调整网站相同色彩
  • 网站部分配图有白底,暗黑模式下体验不佳

参考