Telegram、 WhatsApp+380637610482
瓦列里·丹尤克
瓦列里·丹尤克开发者为企业开发人工智能工具。高质量,价格实惠。通过 Telegram 联系
Duolingo — 此风格的网站预览

Duolingo

白纸上活泼的班级吉祥物

多邻国的界面设计如同儿童绘本:洁白的纸张,圆润饱满的字体,以及一种浓郁的绿色,让人一眼就能联想到“正确答案”。正文采用舒缓的中灰色调,让绿色及其点缀的蓝色承担起情感表达的重任——绿色用于进度条和标题,蓝色用于可点击的链接和附加操作。组件的形状如同药丸或圆角,并带有粗黑或彩色的边框,使得每个按钮都更像是贴在页面上的贴纸,而非扁平的用户界面控件。

页面各部分占据整个页面宽度,并以单列垂直排列,每部分高度约为 800 像素。内容最大宽度约为 1 像素,居中显示。左侧文字和右侧插图交替排列,各部分之间留有充足的垂直空间(80 像素)。页面没有网格卡片或多列布局——每个部分都是一个单独的文本块,搭配一幅插图。导航栏采用极简的顶部栏设计,包含徽标和语言选择器,以固定栏的形式出现在各部分之间。页脚是一条横跨整个页面宽度的绿色条带。页面布局遵循编辑节奏:标题、段落、行动号召、插图、重复。

本书的插图语言以扁平的二维吉祥物角色(猫头鹰杜特和各种人物形象)为特色,这些角色拥有圆润的几何形状、粗黑轮廓线以及粉色、紫色、黄色、橙色和蓝色的互补色调色板,而这些颜色在界面本身中从未出现过。插图位于每个章节右侧文本旁边,背景为纯白色,没有任何容器或背景。书中没有照片——角色本身就是视觉内容。图标采用粗轮廓线,与吉祥物的风格保持一致。图像密度适中:每个章节都包含一幅角色的大幅插图,页面的其余部分则用于排版和留白。

调色板

品牌

  • Eager Green #58cc02 — 绿色用于突出显示链接、标签和短语。它不应该用作行动号召的主要颜色。
  • Storybook Green #d7ffb8 — 浅色表面上的柔和高光,以及页脚导航标签后面的微妙背景色调。

中性的

  • Spark Blue #1cb0f6 — 蓝色用于突出显示链接、标签和短语。它不应该用作行动号召的主要颜色。
  • Fresh Leaf #a5ed6e — 绿色用于突出显示链接、标签和短语。它不应该用作行动号召的主要颜色。
  • Night Ink #000437 — 链接、标签和简短的突出显示短语以紫色突出显示。
  • Paper White #ffffff — 页面画布、纸板表面、绿色/深色背景上的按钮文字。
  • Charcoal #4b4b4b — 标题和正文 - 通用深色文本,使彩色标题更加醒目。
  • Pencil Gray #777777 — 正文段落用不显眼的字母突出显示,次要的描述性文字则退居背景,从而使彩色元素更加突出。

排版

从 13 像素到 64 像素 · 7 步

  • feather — 替代品: Inter · 轮廓 700 · 诸如“免费、有趣、有效”和“多邻国英语测试”之类的章节标题使用自定义圆角字体显示,赋予品牌活泼、友好、类似吉祥物的风格。请将其替换为相应字重的“Feather Bold”或“Nunito Black”字体。字间距:-0.0200em
  • duolingo-sans — 替代品: Inter · 轮廓 500 · 主要段落和导航链接使用 17px/500 的几何无衬线字体,既清晰易读,又能使 700 的行粗细突出显示重点。可替换为“DIN Next”、“Inter”或“Nunito Sans”。
  • duolingo-sans — 替代品: Inter · 轮廓 700 · 所有字重均设置为 700:导航标签中的大写字母为 15px(行距 0.0530em),副标题为 19px 和 32px,链接强调为 13px。字体与正文相同——视觉上的区别在于字重,而非字体本身。导航标签中大写字母的行距为 0.0530em。

音程和形式

目的意义
密度稠密
基本步骤12px
按钮半径12px
卡片半径12px
阴影无边框,取而代之的是阴影
各部分之间80-120px
页面宽度1200px

AI 将按照Duolingo风格构建您的网站并填充内容。

  • 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
  • 从旧网站迁移内容——只需指定地址即可。
  • 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
  • 全自动搜索引擎优化,支持搜索结果和神经网络推荐。

相似风格

  • Family — 奶油色羊皮纸上的童话故事
  • Say Briefly — 米色纸创意机构素描本
  • Flying Papers — 周六早晨卡通片中的忏悔
  • Portrait — 一面记忆之墙,用宝丽来照片记录在米色相纸上。一本明亮的米色剪贴簿,深蓝色墨水是唯一的文字、唯一的结构线和唯一的边框颜色——只有一道手绘彩虹,它只出现过一次,在“注册”按钮上和斜体字“永远”上,之后便再也没有出现过。
  • Karl — 阳光明媚的日子里,一个3D立体书风格的立体模型。
  • Navigate — 一大堆贴纸贴在板子上:粗体大字,形状像平板电脑,还有五个彩色图标,像标志一样重复出现。
  • Monte — 清晨的海岸,泛着锈红色的光芒
  • MotherDuck — 终端用彩色铅笔在米色纸上编码
  • Wise Design — 全球街头的霓虹灯市场摊位——一个鲜亮的绿色招牌在拥挤的市场中格外醒目,而招牌背后,则低调地呈现出一个精致的产品用户界面。
  • Hatch — 手绘风格的地下出版物设计,融合了柔和的糖果碗图案。奶油色的纸张画布上点缀着薄荷绿的装饰、五彩纸屑般的圆点和药丸状的行动号召,醒目的大号衬线字体暗示着趣味性,角落里还有一个蓝色的吉祥物在眨眼。
  • Superr — 午后柔和的阳光下,一本温暖的笔记本映入眼帘。米白色纸页,一支没盖笔帽的橙色马克笔,还有一叠等着撕下来的塑封姓名贴纸。
  • Mews — 黎明时分,酒店服务控制中心笼罩在一片粉红色之中。阳光洒满白墙工作区,醒目的黑色字体、温暖的米色卡片和一枚亮粉色的操作按钮,共同构成了每个屏幕——展现的是一种轻松自信,而非刻板的商务风格。