个人网站开发
西安/设计爱好者/2年前/70浏览
版权
个人网站开发
作为一个UI设计师，想做一个属于自己的网站，从刚入行不久就成为了我的目标，认为自己只要会画图就可以设计出自己的网站。后来发现终是小看了产品设计，虽然并不是什么大网站，但却包含了一系列的产品设计流程，这在当时的我是无法完成的。
2022年左右，我得到了契机，公司需要我负责纯静态界面开发（其余功能实现由后台同事负责），其实我是从three.js（网页三维交互场景）接触的代码，接触前对html和css只是懂一些，大概能知道什么样式能实现的程度。
后来正式学习html+css，走上了UI+静态界面开发的道路，越来越觉得，UI是个非常有门槛的工作，如何设计的好看实用且易于开发不是简简单单画个图就可以的，设计稿想落地必须建立在实践的基础上，不然就是飞机稿，开发也会各种吐槽设计稿。
之后，我也有幸能站在更高的层面上去思考如何设计UI。
随着不断的积累，我在代码中发现了大量的规律并总结成文档，在领导的支持下为同事开了数次分享会。
头脑风暴→规划内容→规划架构→原型图→详细设计→作品整理→最终设计→代码开发→迭代调整→添加动画→最终评审。
这是我实现这个网站的流程，这个流程对我也是综合的考核。
网站在视觉层面上涵盖了UI作品集、建模、插画、摄影，在产品层面上涵盖了一系列的思维导图架构，在技术层面上涵盖了预处理器less、gsap动画、js基础以及各种事件监听。
感谢一路上指点我的伙伴。
加载完成后点击即可播放录屏。
—————————————————————————————————————————
- UI设计+静态界面开发html+less+JavaScript事件监听。
- 产品助理，负责梳理需求、交互设计、用户体验设计、设计规范建立。
- 负责三维建模、动效制作（软件制作和代码开发）。
- 负责画册、卡片、海报等小物料设计。
- 界面开发方面会使用swiper、gsap、echart、three这四种封装库。通过拆解、查阅、猜想、验证来不断学习它们更多的功能。
- 使用swiper创建轮播图、使用导航和指示器控制翻页。
- 使用gsap和创建动画，结合js事件、计时器控制交互设计，使用scrollTrigger绑定动画和滚动条，以及splitText对文字的接续动画。
- 使用echart为柱状图、折线图、雷达图等修改样式。
- 使用three创建可交互三维场景，赋予材质、灯光等。
—————————————————————————————————————————
以下是网页部分截图-网站首页
- 左上角文字是接续翻转放大淡出动画，展示我常用的技术或者软件。
- 正中心的蓝色图形是本网站的logo。中轴线是视觉中心，logo在网站中起重要的识别作用，简易的图形也能让用户记住。
- 右上角分三个一级菜单，代表本网站主要内容，分为【网站首页】【用户界面】【视觉开发】，其中【用户界面】为移动端、PC端UI作品以及概念设计作品。
- 最右边两个图标从左到右依次为【音乐播放控制】和【折叠菜单】，它们会一直做动画，吸引用户查看。
- 正中间模型是【红警2天气控制器】，使用three.js搭建的三维场景，可以进行旋转查看的交互。比较新颖的视觉效果，可以提升用户体验。
- 背景左侧非常淡的两列文字上下缓慢移动，起装饰作用。大而粗的文字显稳重、大气。
- 整体保持简洁、信息明确。
- 正中间标明我目前工作主方向，即围绕着用户体验和交互设计的UI设计。不设置其余干扰信息，用户一眼能看到本网站的重点。
- 文字背景圆角八角形缓慢旋转，文字背景右上至左下缓慢移动，鼠标悬停至文字时，文字不再扭曲。交互动画吸引用户点击，跳转至【视觉开发】部分。
- 科技风系列UI作品，基于当下流行的风格所做。
- 随着滚动条向下滚动，内容从右向左平移，由gsap的scrollTrigger实现动画与滚动条绑定。移动端作品在PC端中，横向排列能容纳更多的数量。且这种查看方式非常节省空间。
- 鼠标悬停后，单图宽度增长，弹窗内容向上推移，显示单图介绍。滚动过程中极易触发的悬停，用户发现内容后会挑选合适的查看。
- 作品内模型和模型动画由C4D实现，动效由Ae实现，图标由Ai和Figma绘制。
- 由three.js搭建的网页三维交互场景。模型自发性的做旋转运动，也可以交互查看。大多数用户会对艺术品的旋转感到舒适，如果它们停止不动则容易被忽略。
- three支持导入模型，并且渲染在场景中。
- 每个界面的底部，描述整个网站的所有内容以及框架，下方是我的联系方式，由于站酷属于公众平台，在此不做展示。
- 当鼠标移入底部时，联系方式后面的【复制】文字按钮显示。
用户界面
- 弹窗左上角为卷轴动画。
- 左半部分是项目信息说明，包含项目名称、简介、标签、工期、载体类型、我负责的内容等。
- 右侧是项目说明，包含设计理念、设计流程等。
- 右侧圆形按钮为【关闭】。
视觉开发
- 视觉开发banner，视觉中心类似于表盘构造，由大到小进入，指针先是迅速反转再缓慢正转，同时表盘缓慢反转。
- 钟表代表快节奏下的高效，把时间变位可见的一分一秒，吸引用户思考。
- banner背景，蓝色斑点是鼠标划过的轨迹，提升画面的数字科技风。
—————————————————————————————————————————
另外还有【创作与提升】和【关于网站】两个部分放置在下拉菜单中。里面涉及个人信息，这里不做展示。
0
Report
声明
收藏
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
You may like
相关收藏夹
Log in
推荐Log in and synchronize recommended records
收藏Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share