艾雪周刊 V.11—拖拽式UI设计项目与近期站点更新

关于本刊

这是艾雪期刊的第 11 期，作为一个独立系列进行更新，更新时间在周末，主要内容为周内内容汇集以及碎碎念，有时会分享一些有趣的项目，有时是一些生活的碎碎念

周刊地址：AIOVTUE-雪—艾雪周刊
RSS订阅：艾雪周刊
邮件订阅：艾雪周刊
微信公众号：AIOVTUE-雪
私信：任意前缀@yybb.us

本期内容

博客推荐

本期推荐的博客是！目的地-Destination，这是在随机访问时抽出来的，大家知道为什么选这个吗，哼哼，因为他有一些独特的小巧思，感觉很有意思，顺便一提，抽卡的时候大部分都是模版套壳，有点千篇一律了，突然来一个有设计的，就很眼前一亮

点我访问— 目的地-Destination

映入眼帘的就是首页，首页开始就有小巧思了，还是头一回看到把友链放在首页头图部分的，而且他这个设计很有意思，平时的时候友链只是半透明状态，也不会影响头图部分的文字标题这些的展示，鼠标选中的时候就反过来了，而且友链还会循环移动，简单的当成头图背景也很不错其实，其次就是他的文章列表，和大多数文章列表不一样，他这个更像是朋友圈那种，会直接展示配图，九宫格那样的，这种一眼就能把内容看的七七八八，缺点嘛，就是滑动的时候得滑很久，不过难免会有取舍嘛，不过有一点，雪看着比较难受，雪有点强迫症，他这个文章列表、详情页什么的都在左侧，页码什么的小组件也靠左，全屏了还是靠左，就有点难受，雪还是比较喜欢居中的布局，左右平滑一点点，这就因人而异啦~

另一个比较巧思的就是他有一个旅行足迹的页面，这个页面和雪之前做的一个旅行页面有点类似，但是雪那个由于各种原因移除了，他这个就很成功，是一个大大的国内地图，还会播放足迹动画，下面按照分类展示了各个足迹对应的文章，看到这里，也很羡慕，能够去那么多地方，真好啊

友链页面，作为进站必看的一个页面，他的设计也挺不错的，雪的友链是选中会展示站点截图，他这个则是展示友链的互动记录，比如近期评论，初次评论这些，不得不说，动态博客就是好啊，静态还是不要想了，负载不是一般的大，不过这个创意挺不错的，还有一点，他这个失联的友链，直接是灰色的，感觉和墓碑似的，而且直接就不让跳转了，有点意思，好啦，多的也不说啦，留点大家自己欣赏咯~

项目推荐

m3e-canvas

m3e-canvas 是一个拖拽式UI设计的项目，有点像figma那些，但是这个中文支持不错，他这个默认demo就很原始，雪之前做的一个软件和这个界面简直神似，除了手机页面，电脑页面也支持的，感觉用来构思想法会很不错，这个比figma那些好用多了，组件都是现成的，但是专业性可能会差一点，不过基础设计感觉也够用了，雪吐槽一下这个配色，感觉就很AI，哈哈，一起觉得这个色系很清新，现在觉得有点土土的

TO-DO-Panel

TO-DO-Panel 是一个常驻 macOS / Windows 屏幕顶部的本地工作台。Mac 默认折叠成物理刘海大小；Windows 显示为贴顶的 200 × 38 逻辑像素悬浮条，避开顶部任务栏。点击后从顶部展开，下面是项目写的特点，大家可以看一下

holo-card-studio

holo-card-studio 是一个skill项目，顾名思义是用来制作闪卡效果的，就是将一张图片变成一个可以互动的闪卡效果，雪看了那个效果，挺好看的，还有3D效果，感觉可以放在站点的一些特殊位置上，不过雪还没实际体验过，都是看的他们推荐的时候给出的闪卡效果，雪打算晚点去鼓捣一个玩玩，大家有兴趣也可以去鼓捣鼓捣哦

近期动向

近期呢，也是做了很多东西呢，哒哒哒，本站UI又更新啦，映入眼帘的就是站点增加了很多看板人物，三小只，相比大家也都看到了吧，就是下面这三小只

这三小只是雪画的啦，但是站点上的其他动作就是拿AI复刻的咯，毕竟一个个画那可太累啦，不得不说AI还是太好用了，有瑕疵的地方自己改改就好啦，大家都知道是哪些页面增加了看板人物嘛，哼哼，雪在这里简单列一下，看看你找的全不全哦：

• 加载动画
• 页脚分割线
• 周刊页挂件
• 密码输入页面
• 加工页面
• 回忆页面
• 关于页面
• 留言页面
• 404页面

你找全了嘛，哼哼，没找全的可以去逛逛欣赏一下哦，本来是想搞动图的，但是生成视频的画质还是太低了，并且绿幕抠图的效果着实不怎么样，并且直接转成gif的大小简支是太大了，一个有20几MB，很无奈，只能拆分之后自己拼接重绘了，但是工作量也太大了，最后就只弄了加载动画这个，并且由于扣绿幕，边缘看着糊糊的

回忆页面

下面是近期改动比较大的页面，首先就是这个回忆页面，由于资源加载需要的东西比较多，首次访问并不能带来完整的体验，因此建议加载之后重新站内跳转一下（由于需要播放bgm，直接刷新会没有声音），页面开头是一段回忆快闪效果，并非是视频哦，而是通过图片现场渲染哒，就是图片加载比较慢，有时候会出现空白的情况，不过加载一次后会在本地缓存，后续访问就不会啦，进入页面之后，电脑端和手机端的设计简直是天壤之别，不过主题都是回忆，电脑端采用的是左侧音乐右侧文章的布局，音乐也是会自动播放的，并且，切换一下深浅色有惊喜哦，由于是突出回忆，因此只展示头图，循环播放，增加沉静感，手机端则是使用交卷的设计，这个雪不好描述，大家自己看吧

关于页面

关于页面，一直没啥想法，又有小伙伴说太单调，要更新关于页面，只好绞尽脑汁设计了一版，也是灵光一现，同样的，由于用到了大量图片，导致页面加载可能会比较慢，初次访问体验可能不好，建议加载完之后二次访问，采用的是对话效果进行交互，顺便一提，有一些小彩蛋哦，哼哼，是什么我不说，有没有小伙伴能发现呢，下面简单展示一下效果截图吧，更多的就请移步亲自体验咯，雪就不剧透啦哈哈~

AI支持

本站接入AI啦，但是方式有点别致~ 嘿嘿，起因是制作关于页面的时候，觉得单纯的对话有点单调，想增加一些自定义功能，直接和AI对话，于是便考虑接入AI，但是直接用付费的吧，那么将是一笔不小的费用，免费的话，免费用量也撑不了多久吧，为了限制就只能设置一些限制，例如限制对话频率，对话数这些，但是又会很影响体验，并且，为了接入AI，需要给网站架构增加对应的api功能，雪不是很想给站点加这些，只想让站点是一个纯粹的静态博客，以便于部署在任何地方，于是，便有了本次方案

本站内置AI相关功能，但是没有接入模型api，给出的方案是使用浏览器运行本地AI小模型，需要在每个访客的电脑本地缓存模型，选取了能够支持基本对话的最小模型，大小在700Mb左右，属于是一个适中的大小，简单的对话没有问题，就是智商略显低，其实还有一个更小的，只有300Mb，但是太傻了，前言不搭后语，经测试，这个是能够满足基本对话需求的，作为聊天对话和文章总结来说可谓是绰绰有余了，不过没什么记忆，上下文比较低，但是也不影响，本来也没打算做的多么智能，并且这个模型大小很不错，适配大部分电脑，哪怕是一些比较旧的老电脑都能正常运行，不过需要浏览器升级到比较新的版本哦，毕竟是基于浏览器运行的，初次下载模型后，后续再次访问会直接访问本地缓存，在文章列表右侧部分也增加了AI问答相关功能，点击后可以对本文进行问答，实测效果还行，简要总结问答这些没什么问题，不过主要是用来做关于页面人物对话的啦~

结语

好啦，本期内容又要结束啦，不知道里面的东西对你又没有用呢，雪最满意的还是里面的这些小更新啦，尤其是那个对话部分，还挺好玩的，省的雪单独拿ollama运行ai了，直接在浏览器就能玩，后续也打算思考一下本地ai能用来干其他的事情，不过大概率这个小模型吃不消了，换大模型又可能适配性不那么广，先这样咯，后面在看啦，顺便一提，手机端没开放AI相关功能哦，比较谁没事在手机端运行本地AI~ 小心手机变得烫烫的哦，好啦，我们下期不见不散哦~