【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站

前言

当下的自媒体时代，体现在一个爱折腾的程序猿身上，那么最好的方式莫过于 —— 搭建自己的个人网站。网站上可以有自己的个人介绍，技术博客，项目总结，生活分享等等。简直是COOL ！（面试神器有木有????）

就像上图这样，绝对原创设计，盗图必究！????

有了想法就去实现它！我们都知道传统的软件开发流程大致可分为分析，设计，编码，测试，部署，上线，运维等七大阶段。 这里就做一个链接合集，记录一下我本次项目的开发历程（有觉悟的童鞋建议跟我一起动手哦）：

• 【个人网站开发 · 记录一】立项分析阶段 —— 产品角度分析如何去做一个个人网站
• 【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
• 【个人网站开发 · 记录三】制定开发方案阶段 —— 技术角度分析如何去做一个个人网站
• 【个人网站开发 · 记录四】开发阶段一 —— VuePress + Gitee Pages 快速搭建和部署个人网站

---

---

???? UI设计阶段 ????

---

---

文章目录

• • 一. LOGO设计
  • 二. 色彩搭配
  • 三. 风格基调
  • 写在最后

我想大部分的程序猿对于UI设计都不太感冒，所以一直都有一切从简，模板至上的原则。这里我就不多BB了，本篇仅作为我个人的简单记录。

一. LOGO设计

虽然说这次项目完全是我自己的一时兴起，但该有的细节还是不能少的。这个LOGO设计也是做的很全面，包括了文字LOGO，图形LOGO以及彩色版本和各种排版的变形（响应式LOGO）

1.1 文字LOGO

采用字重较大的非衬线字体，然后做换行的处理，再加上能体现代码的元素 —— 双引号 ( " ) 和尖括号 ( > )

1.2 图形LOGO

图形化的LOGO也是提取了名称里的首字母CZJ，整体依靠同心圆之间的布尔运算得到。简洁干练！

组合起来的黑白灰三色效果分别如下：

1.3 彩色版本

黑白配色的基础上搭配时下流行的霓虹渐变的彩色背景，再给代码元素赋予红色和紫色的点缀。整体效果立马变得靓丽活泼起来。红色版本看起来也不错的亚子？

1.4 响应式LOGO

在页面响应式开发的同时，LOGO的设计也应该是响应式的，不是吗？

二. 色彩搭配

在彩版LOGO的设计中已经有所体现，没错，就是霓虹渐变中的红色为主色调，辅以紫色。

三. 风格基调

其实霓虹渐变的风格是很绚丽的，比如下图这样的：

当然这里我只是想用其中的色彩搭配，主体的风格还是以简约为主 —— 经久不衰的卡片式和大标题的设计语言。

---

写在最后

后续有关UI设计的更多内容，我会整理出来放到站酷上，感兴趣的小伙伴可以期待一下。之后来更新链接。

现在我已经从UI设计的层面初步实现了我的想法，之后就是动手编码了！

本文地址：https://blog.csdn.net/JZevin/article/details/108812625