DAPP design

DAPP设计

DAPP design

DAPP设计

DAPP design

DAPP设计

20UI DESIGN 曹佳豪のUI作品

24

作品集

ABME

基本信息Infor姓名：

年龄：

学历：

经验：

专业：

曹佳豪

24

本科

4年经验

动画设计专RESUME

简历

BOUT

Ermation 联系方式Contact

电话：

微信：

QQ：

邮箱：

18986358315

cjh254154

2541543330

2541543330@qq.com

业（VR技术方向）

CATALOG

目录

移动端设计 PC端设计

专题设计 插画设计

MOBILE TERMINAL

移动端设计

Design Preface

DESIGN BACKGROUND

设计背景

设计前言

socool是一款原创的音乐APP，

分为我的、乐库、发现三大功能

模块，以主题歌单、音乐类型、

个性化、社交为核心要素，这是

一款专属于年轻人的音乐社区。

Logo

标识

LOGO 字母S

字母O叠加

代表无限 声波

Logo

标识

1x 1x

1x

1x

1x

1x

Tone

色调

#ED6D3E

#FF5A82

#CA5298

Font Specification

字体规范

Aa

ABCDEFGHIJK

abcdefghijk

123456789

苹方-简体 ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

123456789

123456789

123456789

123456789

123456789

123456789

UItralight

Thin

Light

Regular

Medium

Semiblod

120x

50x

Segoe-UI

Aa

ABCDEFGHIJK

abcdefghijk

123456789

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

123456789

123456789

123456789

123456789

123456789

123456789

Light

Semilight

Regular

Semiblod

Bold

Black

120x

50x

socool音乐主要分为乐库、歌单

、发现三大功能模块。

每个功能都能进入个人中心进行

个人偏好设置。

同时在任何页面都能从底下tab

栏直接进入当前音乐播放界面。

Subsection 1

分段 1

爵士音乐

官方出品

1740万人在听

流行音乐

我的喜好

4885万人在听

摇滚音乐

今日热门

3260万人在听

钢琴乐

好友推荐

2110万人在听

民谣

好友推荐

9820万人在听

蓝调音乐

今日热门

1100万人在听

电子音乐

官方出品

2644万人在听

古风音乐

我的喜好

4885万人在听

心情 场景 主题 类型

每日推荐

“耶嘿，找到你了”

[纯音乐]错落一身宁

静，深海沉浮摘星

520 爱意点点，朵

朵浪漫，无一不是你

错把时间当良药，谁

料只愈皮外伤

[流行]难以忘记一见

钟情的美好

[Riddim Dubstep]

黑暗炸裂的节奏

柔软思绪-躺在旋律

的天鹅绒上放空

我将玫瑰藏于身后，

时刻期盼与你奔赴

Subsection 2

分段 2 歌单详情 落日飛車/橘子海/甜約棱鏡/事後煙/deca

SPARKLINGWINE

简介：由于四处漂泊游吟诗人得以穿过不同人们居他们总是结伴而行，从北到南，有人被其歌声感动礼，他在同伴中名声大振，展示死前灵魂的高贵和他在大地上得到的回赠是永世盛名。

浪漫播放 收藏 分享 2018-02-13创建

歌曲列表 评论（522） 收01 Let There Be Light Again 恋人的预感

友道第二宫

我想你是可能的

银河小回

人间椅子

如果你在

爱的乐园回

太阳与你

难过的小蛇

02

03

04

05

06

07

08

09

10

视频

約翰/

居住的土地。

动，慷慨赠

生命之光。

漫/情歌

下载

收藏着

3:22

5:29

3:45

1:33

6:01

3:56

4:20

3:56

5:37

2:38

你啊你啊

专辑：我是歌手 第六季

歌手：

Design Preface

DESIGN BACKGROUND

设计背景

设计前言

对我而言，大标题、大间距、大

留白、新颖的排版样式，这些本

身不太合乎设计规范的设计语言

就是年轻和酷。在颜色方面，用

丰富的撞色渐变区分音乐类型。

这种强烈独特的风格具有直接的

视觉冲击力，也是年轻和酷。

socool希望给年轻人带来玩味、

共鸣和启发。玩世不恭，酷却有

爱，这就是socool！

Icon Display

图标展示

Page display

页面展示

Page display

页面展示

Wechat Applet

微信小程序

MUNCHING YOUR WAY

专注于打卡的小程序

Design Background

设计背景

MOKID 是一款专注于打卡的小

程序，主要为小朋友学习英语绘

本打卡设计。我们将绘本与专业

的英语教师点评相结合，为小朋

友提供优质的英语学习服务。

DESIGN IDEA

[ 习惯 ] 是生活中非常重要的一

部分，习惯决定命运，所以我们

要培养好习惯，而且习惯的培养

也不是件容易的事情。

理念

User Population

用户人群

良好的习惯才是步向成功的钥匙

好习惯一旦形成，它就极具稳定

性。

心理上的行为习惯左右着我们的

思维方式，决定我们的待人接物

生理上的行为习惯左右着我们的

行为发生，决定我们的生活起居

STUDENT

小朋友在进入MOKID小程序后

直接通过微信账号登录，方便快

捷。

学生

TEACHER

在进入MOKID小科序后，通过

输入教师账号密码登录，安全而

便于管埋。

老师

Visual Style

视觉风格

明亮的、温暖的、鲜艳的、快乐

的、娇美的、柔软的、生动活泼

的、纯真的等色彩都是儿童喜欢

的。比如温暖的橙色，饱和度比

较低的红色，黄色，粉红，纯度

高的蓝色、绿色等，还有一些中

性色彩，如紫色、绿色也是合适

的。

COLORFUL

多彩

FREEDOM

自由

QUIET

安静

Design Element

设计元素

字体基于小朋友的的特殊性，整

体字号较大，字号基于2的整数

倍进行放大。

FONTS 字体 苹方-简UItralighThin

Light

Regular

Medium

Semiblo120x

50x

Aa

ABCDEFGHIJK

abcdefghijk

123456789

简体

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

ABCDEFGHIJK

123456789

123456789

123456789

123456789

123456789

123456789

ht

mod

Design Element

设计元素

多彩的图标设计给小朋友一种亲

切的感觉，减少他们的认知学习

成本，提高图标的辨识效率。

Icon 图标 48 px

72 px

135 px

Design Element

设计元素

选择明快的黄色为主品牌色以外，

所有辅助色及字体配色均保持相同

的色彩倾向。

COLOR 颜色

#3C8CEB

#80D043 #FFB123 #F75900 #8861D9

Sections Function

板块与功能

不同的用户登录后，小程序会进入

不同的用户首页。首页主要包括公

告提示、用户信息、绘本打卡或绘

本点评等功能。

用户权限主要分为三种：免费用

户、付费用户与教师。每种权限

可以浏览的版块也不相同。

PERMISSION

用户限制

Sections Function

板块与功能

绘本打卡是MOKID的核心能。

支持左右滑动翻页，每页均配有

精美插画及例句，还能播放示范

音频。

PICTURE BOOK PUNCH

绘本打卡