本文记录了一位程序员搭建个人网站的UI设计过程，包括LOGO设计的各个版本（文字、图形、彩色及响应式），色彩搭配的选择，以及简约风格的基调设定。设计师采用霓虹渐变色彩，结合红色和紫色点缀，创建出既时尚又简约的视觉效果。后续将分享更多UI设计内容。
前言
当下的自媒体时代，体现在一个爱折腾的程序猿身上，那么最好的方式莫过于 —— 搭建自己的个人网站。网站上可以有自己的个人介绍，技术博客，项目总结，生活分享等等。简直是COOL ！（面试神器有木有🐶）
就像上图这样，绝对原创设计，盗图必究！🐶
有了想法就去实现它！我们都知道传统的软件开发流程大致可分为分析，设计，编码，测试，部署，上线，运维等七大阶段。 这里就做一个链接合集，记录一下我本次项目的开发历程（有觉悟的童鞋建议跟我一起动手哦）：
- 【个人网站开发 · 记录一】立项分析阶段 —— 产品角度分析如何去做一个个人网站
- 【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
- 【个人网站开发 · 记录三】制定开发方案阶段 —— 技术角度分析如何去做一个个人网站
- 【个人网站开发 · 记录四】开发阶段一 —— 原生VuePress开发（上）手动搭建个人博客网站的详细记录
我想大部分的程序猿对于UI设计都不太感冒，所以一直都有一切从简，模板至上的原则。这里我就不多BB了，本篇仅作为我个人的简单记录。
一. LOGO设计
虽然说这次项目完全是我自己的一时兴起，但该有的细节还是不能少的。这个LOGO设计也是做的很全面，包括了文字LOGO，图形LOGO以及彩色版本和各种排版的变形（响应式LOGO）
1.1 文字LOGO
采用字重较大的非衬线字体，然后做换行的处理，再加上能体现代码的元素 —— 双引号 ( " ) 和尖括号 ( > )
1.2 图形LOGO
图形化的LOGO也是提取了名称里的首字母CZJ，整体依靠同心圆之间的布尔运算得到。简洁干练！
组合起来的黑白灰三色效果分别如下：
1.3 彩色版本
黑白配色的基础上搭配时下流行的霓虹渐变的彩色背景，再给代码元素赋予红色和紫色的点缀。整体效果立马变得靓丽活泼起来。红色版本看起来也不错的亚子？
1.4 响应式LOGO
在页面响应式开发的同时，LOGO的设计也应该是响应式的，不是吗？
二. 色彩搭配
在彩版LOGO的设计中已经有所体现，没错，就是霓虹渐变中的红色为主色调，辅以紫色。
三. 风格基调
其实霓虹渐变的风格是很绚丽的，比如下图这样的：
当然这里我只是想用其中的色彩搭配，主体的风格还是以简约为主 —— 经久不衰的卡片式和大标题的设计语言。
写在最后
后续有关UI设计的更多内容，我会整理出来放到站酷上，感兴趣的小伙伴可以期待一下。之后来更新链接。
现在我已经从UI设计的层面初步实现了我的想法，之后就是动手编码了！
扫一扫
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
