https://hugo.djzy.cc/Recent content in 首页 on 蝶境设计Hugozh-CNMon, 10 Jun 2024 00:00:00 +0000https://hugo.djzy.cc/projects/music-app/Mon, 10 Jun 2024 00:00:00 +0000https://hugo.djzy.cc/projects/music-app/<h2 id="项目背景">项目背景</h2> <p>为某音乐平台设计全新的移动端应用，目标用户为18-30岁的音乐爱好者。</p> <h2 id="设计亮点">设计亮点</h2> <ul> <li>沉浸式全屏播放界面，专辑封面动态模糊背景</li> <li>智能推荐歌单，基于用户听歌习惯的个性化首页</li> <li>歌词同步滚动，支持逐字高亮</li> <li>深色主题为主，减少视觉疲劳</li> <li>流畅的页面转场动效</li> </ul> <h2 id="工具">工具</h2> <ul> <li>Figma（界面设计）</li> <li>Principle（动效原型）</li> <li>Maze（可用性测试）</li> </ul>https://hugo.djzy.cc/posts/design-trends-2024/Wed, 15 May 2024 00:00:00 +0000https://hugo.djzy.cc/posts/design-trends-2024/<p>2024年的UI设计呈现出几个明显的趋势。</p> <h2 id="玻璃拟态-glassmorphism">玻璃拟态 (Glassmorphism)</h2> <p>半透明背景 + 模糊效果 + 微妙边框，营造出玻璃般的质感。</p> <h2 id="大胆渐变">大胆渐变</h2> <p>从柔和的双色渐变到多色渐变，色彩越来越丰富。</p> <h2 id="3d-元素">3D 元素</h2> <p>越来越多的网站开始融入 3D 插图和动画。</p> <h2 id="微交互">微交互</h2> <p>小而精致的交互动画，提升用户体验的愉悦感。</p>https://hugo.djzy.cc/projects/ecommerce-web/Sat, 20 Apr 2024 00:00:00 +0000https://hugo.djzy.cc/projects/ecommerce-web/<h2 id="项目概述">项目概述</h2> <p>为某轻奢品牌重新设计电商官网，需要兼顾品牌调性和购物转化率。</p> <h2 id="成果">成果</h2> <ul> <li>首页跳出率降低 32%</li> <li>商品详情页转化率提升 28%</li> <li>平均停留时长增加 45%</li> <li>Lighthouse 性能评分 96</li> </ul> <h2 id="技术栈">技术栈</h2> <ul> <li>Hugo 静态生成</li> <li>Tailwind CSS</li> <li>GSAP 动画</li> <li>Stripe 支付集成</li> </ul>https://hugo.djzy.cc/posts/hugo-vs-nextjs/Wed, 20 Mar 2024 00:00:00 +0000https://hugo.djzy.cc/posts/hugo-vs-nextjs/<h2 id="hugo-的优势">Hugo 的优势</h2> <ul> <li>构建速度极快（毫秒级）</li> <li>零运行时依赖</li> <li>部署简单（纯静态文件）</li> <li>安全性高</li> </ul> <h2 id="nextjs-的优势">Next.js 的优势</h2> <ul> <li>服务端渲染 (SSR)</li> <li>动态内容支持</li> <li>React 生态</li> <li>API Routes</li> </ul> <h2 id="如何选择">如何选择？</h2> <ul> <li>博客/文档/展示站 → Hugo</li> <li>需要用户登录/动态内容 → Next.js</li> <li>追求极致性能 → Hugo</li> <li>需要复杂前端交互 → Next.js</li> </ul>https://hugo.djzy.cc/projects/dashboard/Fri, 15 Mar 2024 00:00:00 +0000https://hugo.djzy.cc/projects/dashboard/<h2 id="设计要点">设计要点</h2> <ul> <li>深色主题，适合长时间监控场景</li> <li>清晰的信息层次：核心指标 → 趋势图表 → 明细数据</li> <li>响应式布局，适配 1080p 到 4K 屏幕</li> <li>实时数据 WebSocket 推送</li> <li>支持全屏演示模式</li> </ul>https://hugo.djzy.cc/posts/freelance-tips/Wed, 10 Jan 2024 00:00:00 +0000https://hugo.djzy.cc/posts/freelance-tips/<p>自由职业两年，踩过不少坑，总结一些经验。</p> <h2 id="获客渠道">获客渠道</h2> <ul> <li>作品集网站（最重要）</li> <li>设计社区（Dribbble, Behance）</li> <li>口碑推荐</li> <li>社交媒体</li> </ul> <h2 id="定价策略">定价策略</h2> <p>不要按小时收费，按项目价值收费。</p> <h2 id="项目管理">项目管理</h2> <ul> <li>明确需求文档</li> <li>分阶段交付</li> <li>及时沟通</li> <li>留出buffer时间</li> </ul>https://hugo.djzy.cc/projects/design-system/Mon, 08 Jan 2024 00:00:00 +0000https://hugo.djzy.cc/projects/design-system/<h2 id="项目背景">项目背景</h2> <p>公司旗下 5 款产品视觉风格不统一，开发重复造轮子，需要一套完整的设计系统。</p> <h2 id="交付内容">交付内容</h2> <ul> <li>设计 Token（颜色、字体、间距、圆角等）</li> <li>50+ 组件库（按钮、表单、卡片、导航等）</li> <li>图标库（200+ 图标）</li> <li>Figma 组件库同步</li> <li>开发文档与代码示例</li> </ul> <h2 id="成果">成果</h2> <ul> <li>新功能开发效率提升 40%</li> <li>产品间视觉一致性达 95%</li> <li>设计到开发交付时间缩短 60%</li> </ul>https://hugo.djzy.cc/projects/brand-identity/Mon, 20 Nov 2023 00:00:00 +0000https://hugo.djzy.cc/projects/brand-identity/<h2 id="品牌故事">品牌故事</h2> <p>「慢时光」是一个主打手冲精品咖啡的新品牌，目标是传递「慢下来，享受一杯好咖啡」的理念。</p> <h2 id="设计内容">设计内容</h2> <ul> <li>Logo 设计（咖啡豆 + 时钟指针融合）</li> <li>品牌色彩系统（暖棕色 + 奶白色 + 深绿色）</li> <li>品牌字体选型</li> <li>包装设计（咖啡袋、杯套、纸杯）</li> <li>门店物料（菜单、名片、手提袋）</li> <li>社交媒体视觉模板</li> </ul>https://hugo.djzy.cc/projects/travel-blog/Tue, 05 Sep 2023 00:00:00 +0000https://hugo.djzy.cc/projects/travel-blog/<h2 id="主题特性">主题特性</h2> <ul> <li>首页世界地图标注已到访地点</li> <li>图片瀑布流展示</li> <li>文章内嵌地图路线</li> <li>响应式设计，移动端优先</li> <li>暗色/亮色模式</li> <li>多语言支持</li> <li>Hugo Pipes 资源处理</li> <li>Lighthouse 满分</li> </ul> <h2 id="技术实现">技术实现</h2> <ul> <li>Hugo 静态生成</li> <li>Leaflet.js 地图</li> <li>CSS Grid 瀑布流</li> <li>Intersection Observer 懒加载</li> </ul>