Page 1

MARCUS FEI

Portfolio 2018 marcusfei.com


关 于 我 2

费浩林 平面 / UI 设计师

California College of the Arts 平面设计本科在读 2016~2020

互联网常用 ID:@MakicLin 英文名 Marcus Fei

简历

English Portfolio LinkedIn

Dribbble

marcusfei.com


目 录 3

小世界

品牌设计 / UI / VR

智能手表表盘

4-7

14-15

声音恐惧酒 葡萄酒贴标

录音机图标 图标 / 动效

8-10

16-17

少数派付费栏目 插画 / 信息长图

少数派 iOS 图标设计

11-13

18-20


小世界

小 世 界 4

品牌设计 / UI / VR

为异地恋设计的情侣应用 小世界是 VR + 移动平台的情侣应用。我们打造了沉浸式的 VR 约会体

在小世界中,异地恋情侣可以:

距离感并且为异地恋情侣们提供一个只属于他们的私密空间。

·一起看电影,做游戏

验,帮助异地恋情侣保持感情热度。小世界可以缩短异地恋情侣之间的 我在团队中负责品牌形象设计,移动端 UI 设计以及部分 VR 界面设计。 小世界是 UXDAward 2017 参赛项目,获得全国三等奖。

·共同计划未来

·有温度,有互动的语音聊天

·系统自动保存精彩互动瞬间 ·更多在一起的体验...


小 世 界

拥抱

在一起

私密空间

最终版

小 世 界 ,在 一 起

小世界的品牌形象希望传达一种「在一起」的感觉。小世界的标志代表两个独立的个 体,他们在地理位置上并没有「在一起」 ,但在小世界里,他们有了联系。

小世界并没有使用情侣应用常用的粉色作为主色调,新鲜可爱的蓝色也可以有恋爱的

感觉。同时,蓝色也让人们联想到科技,共同的未来等等小世界相关的东西。也让作为 情侣应用的小世界看起来更加独特,新鲜。

Little World

爱心

5


小 世 界 6

认真对待每个时刻

小世界移动端是让用户记录重大瞬间的地方,用户可以 随时在 App 中记录一起做的事情。对于异地恋来说,任 何一起的经历,回忆和事件都变得异常重要。

小世界像异地恋情侣一样,认真对待每个瞬间。在视觉

风格统一的情况下时间线上的所有事件都被精心设计, 无论是发帖,倒计时,未来规划的样式都独一无二。


小 世 界

通话状态组件

7

组件化界面

文件操作组件

小世界 VR 是异地恋情侣一起浪费时光的地

方。为了创造更加沉浸的 VR 约会体验,小世 界的 VR 界面设计直接明了,在没有文字标

签辅助的情况下也可以使用。统一组件化的 控件贯穿于小世界的每个角落,小世界内所 有功能都采用大致相同的控件样式,大大降 低用户学习成本。

主功能组件 二级功能组件

选择组件 系统状态组件

VR 时光穿梭

VR KTV

VR 首页

VR 配音秀


声音恐惧酒 葡萄酒贴标

恐 惧 与 酒 ,何 来 之 有 ?

在 California College of the Arts 平面设计 1 课程上,期末课题是设计 一个「基于个人恐惧症的葡萄酒品牌」 ,我选择了恐惧症是「声音恐惧

症」。于是如何让声音视觉化,并让对声音的恐惧和葡萄酒结合在一起 变成了本次设计的难点。

声 音 恐 惧 酒 8


声 音 恐 惧 酒 9

     

     

 

     

     

ALC 13.5% by vol., 750ml ALC 13.5% by vol., 750ml 

 ALC 13.5% by vol., 750ml

早期尝试草稿

声音视觉化: 莫列波纹

在早期的设计中,我尝试了许多体现声音 的方式,尤其是去尝试一些表达聒噪的, 危险的声音。

随后我发现了「莫列波纹」 ,这是一种在栅

栏状条纹重叠下所产生的干涉影像,同时 也是一种非常吵闹的视觉呈现。

莫列波纹试验

ALC 13.5% by vol., 750ml ALC 13.5% by vol., 750ml


制造恐惧

发现莫列波纹已经非常幸运了,但这还远 远不够。我开始对莫列波纹进行修改,尝

试让莫列波纹更加混乱,添加更多噪声与 恐慌的感觉。经过近四十次尝试与修改, 达到了最终的版本。

其中最有趣的尝试是将莫列波纹打印出

来,并且放入扫描仪中,在扫描过程中移 动纸张,达到混乱的效果,如左图。

声 音 恐 惧 酒

10


少数派付费栏目 插画 / 信息长图

少数派的首次尝试

少数派是国内著名的科技生活方式媒体,它基于 UGC(用户生产内容) 模式。在 2017 年夏天,他们开始尝试推出一些精品付费内容。相比少 数派上的其他文章,这些付费栏目拥有更高质量和更深度的内容。

在此之前,少数派没有尝试过推出付费内容,同类的媒体也鲜有尝试,

于是首发阵容非常重要。我的负责为三个首发课程制作信息长图,其中 包括课程简介,作者介绍,课程目录等内容。这些长图帮助潜在购买者

了解课程并提高购买意愿。信息图在微博上传播,并作为课程介绍的重 要部分。

少数派付费栏目网页

少 数 派 付 费 栏 目 11


少 数 派 付 费 栏 目 12

对于防治颈椎病的专题内容,我选择不去展示颈椎病 X 光片 之类会带来恐惧感的图片。这些可爱有趣的卡通风格插画让

插画的顺序符合读者阅读从上至下阅读的顺序。

读者的体验更加舒适愉悦。

爆炸的卡通人夸张体现了任务管理有多么难学。这些夸张的 表达带来了幽默感。

有 趣 ,引 人 注 意

这些付费栏目如同少数派的日常文章,有着非常广泛的选题范围。首发 的三个付费栏目分别是:

《用更现代的方式做任务管理》

《久坐的你,要保证正确的坐姿》 《从零开始做好个人记账》

这些话题可能有些严肃,有些距离。为了降低读者的心里门槛,我选择 了鲜明的配色以及卡通风格的插画。

这是给《用更现代的方式做任务管理》制作的封面,儿童玩 具风格的插画降低了读者学习的心里门槛。


少 数 派 付 费 栏 目 13

为手机屏幕优化

由于这些长图主要在微博和少数派应用中出现,长图的尺寸专门为手

机屏幕优化。在 4.7 英寸屏幕的手机上也不会出现无法阅读的情况。而 且手机的每一屏都可以将一个段内容显示完整,还可以显示上一段和 下一段的一小部分。 少数派付费栏目页面


智能手表表盘

安 静 ,干 净

白色不仅是一种颜色,它还可以代表空间以及容器。在排版领域,页面 四边的留白就是一种空间。物理学中,白色光可以折射出五颜六色,白

色就是一种容器。白足够干净,可以容纳任何颜色;白足够安静,不会打 扰到使用者。

「白」可用于 Android Wear 设备

可在「嘀嗒表盘」应用中下载(酷安)

图中的设备是摩托罗拉 moto 360 并非设计的一部分


白 15

Minute

24

4

Hour

时间是种感觉

当我们看指针手表的时候,会有一种「时间感」。因为指针的角度和时间 是有关系的,我们可以知道这一天过去了多少,还剩多少时间。但使用 数字显示时间的电子表完全没有「时间感」。作为一个运行在电子设备 上的表盘,我试图找回「时间感」。

「白」将表盘平均分为 12 份,每一份代表一小时。查看时间时,所在的 那一份小时会亮起,就可以知道一天已经过了多少。

当然, 「白」也有夜间模式,虽然是黑色的。但请记得,白不只是颜色。 「白」可用于 Android Wear 设备

可在「嘀嗒表盘」应用中下载(酷安)


录音机图标 图标 / 动效

扁平与拟物的平衡点

从 iOS7 开始,UI 设计领域很快转向了扁平化的风格。有一段时间,图

标的风格是追求完全平面的。如你所见,当今的 UI 设计的流行风格又

由完全扁平转向了稍立体的风格。随之而来的还有阴影和丰富的动效。 我相信在扁平和拟物之间是有一个平衡点的,而这个平衡点由硬件尺

寸,应用类型等等条件决定。平衡的手法应该是提取真实物体的一些重 要特征,并用最简洁的手法表示这些重要特征。这个录音机图标是我寻 找这个平衡点的尝试。图标由 ZOOM h4n 型录音机简化而来。 查看动效 (Dribbble)

录 音 机 图 标 16


录 音 机 图 标 17

00:50

01:04

01:20

克制而有细节的动画

我认为动效是现在以及未来 UI 设计中不可或缺的重要元素。在制作完

图标之后,我开始考虑这枚图标该如何动起来,如何「录制」 ,如何消失。 在动效设计方面,图标和消失是比较现代的风格,而在中途模拟录音机 开机的时候,有一个屏幕亮度降低的小细节。这真实模拟了单色显示屏 开机时的样子。 干说无味,点击下面链接去看看真实效果吧! 查看动效 (Dribbble)

01:32

01:58

02:20

04:19


少数派 iOS

iOS

少 数 派

图标设计

新 应 用 ,新 图 标

在 2017 年五月份,国内著名的科技生活方式媒体少数派计划推出自己 的 iOS App。但是他们对早期设计的图标并不是很满意。我参与重新设 计了应用内的全套图标,做到了图标风格统一,美观。 少数派应用已上架 App Store

18

设计目标:

· 形状简单

· 尽可能的差异化

· 拥有一到两个特色图标 · 无需文字标签辅助


after

before

before

after

iOS

before

少 数 派 19

tab bar iterations

文章分类按钮 Tab bar 首页图标

早期版本的一些图标有三维物体的感觉,在整套图标中 显得格格不入。在我的版本中修复了这些问题。

由于少数派 iOS 的首页是类似新闻流的形式,卡片图标 相比房子图标更加切题, 也更加特别。

before

after

重要信息

由于少数派的内容源自于高质量用户, 「文章过审」和「

被推荐到首页」这些通知对于内容生产型的用户是非常

final version

Tab bar 发现图标

重要的。这套图标中有一个小旗子,专门用来代表这些

小灯泡图标让人想起那些奇妙点子出现的瞬间,正如在

感和成就感。

的小星星让「切换 tab」这件事儿变得更有乐趣。

重要信息。希望用户收到重要信息的时候,会有一种满足

少数派里面发现有趣文章的感觉。只在选中状态下出现


iOS

少 数 派 20

首页

通知

文章

文章评论


浏览愉快。 费浩林 平面 / UI 设计师

California College of the Arts 平面设计本科在读 2016~2020

互联网 ID:@MakicLin 英文名 Marcus Fei

微信/ QQ:813800591

微博

简历

English Portfolio LinkedIn

Dribbble

marcusfei.com

Profile for makiclin

费浩林_2018作品集  

费浩林_2018作品集  

Profile for makiclin
Advertisement