Portfolio UX/UI DESIGNER
闫俊杰的作品集 yanjunjie2016@gmail.com
184-2806-6297
Content Part1 团队项目
Fitogether 早茶新闻 里程篮球俱乐部官网 mobile
web
web
Part2 兴趣爱好
游戏开发、视觉设计、摄影
Fitogether Mobile Design 2016.7-8 新加坡国立大学人机交互设计课程项目 这是一款健身类的社交 app，用户可以 通过 Fitgether 与朋友一同参与健身计 划，同时也可以通过浏览朋友分享的内 容丰富自己的健身知识。
为什么健身 / 减肥都很难成功？ 为了探究这个问题，我们决定采用亲和图法来进行研究：通过对用户进行访谈，从而收 集相关的定性数据。在访谈之后将亲和度高的数据进行聚类，以确定用户的主要需求并 得出相关的解决方法。
该设计什么？先从用户访谈开始 开始设计之前，用户访谈必不可少，不过进行用户访谈之前，需要先确定用户访谈的对象。 考虑到健身 / 减肥的场所主要是健身房以及操场，所以小组中的两人负责在 NUS 的操场 和学生健身房进行随机的用户访谈，用录音笔记录下所有的谈话内容。 同时另外两人从对认识的人中，挑选有过健身 / 减肥经验的人作为访谈对象，通过微信 等通讯工具进行访谈，并保存所有聊天记录。
操场拦访
音频记录文件
远程网络访谈
文本记录文件
来试试 Affinity Diagram 将音频记录文件和文本记录文件中的信息提取出来，按照“Key Observation”、“User Statements”和“Design Idea”三大属性进行分类，并记录在便签纸上。将意思相近、 亲和度高的便签纸贴在一起，以达到从零散数据中聚类出主要需求以及对应的解决办法 的目的。
KO
US
DI
提取记录文件信息
按照 KO、US、DI 三种 信息类型将便签分类
便签聚类 / 分组命名
不仅仅是贴一贴便签而已 我们在制作完亲和图之后，我们得出以下 3 组主要原因（主要来自每个便签组的 User Statements 和 Key Observation）： 1 孤独一人没有同伴，健身减肥很难坚持 2 缺少相关健身减肥知识，人们无从下手 3 健身减肥在短时间内很难见效 针对以上原因，我们采用头脑风暴，对每个便签组中的 Design Idea 进行扩充，之后再逐一 筛选。最终设计了以下三个功能： 1 以社交软件的形式，用户能够找到有相同 减肥健身目标的人
人脉圈
2 通过社区分享与健身减肥有关的文章 / 视 频等，满足用户的知识需求
快报
3 通过系统的健身减肥计划，让用户能够尽 可能地实现高效率地减肥健身
计划
用图说话 - 信息架构与原型制作 为了明确 App 的基本信息架构，我利用 xmind 将其层级关系进行梳理。然后小组四人通过 绘制线框图来确定 App 的交互逻辑。最后由我通过 sketch、墨刀制作可以进行交互的高保 真模型（包括视觉设计）。
基于健身内容 的社交 App WHAT:“计划”由用户群创建，设立运动目标，进行打卡；效果好评价 高的计划会被优先推荐。“快报”由用户进行创建，以健身 / 减肥相关 知识为主；与用户健身 / 减肥目标相关的计划会被推荐。 WHY： ：通过用户调查我们发现很多用户因为健身 / 减肥没有计划，导致 效率低下因而很容易产生放弃的念头，因而设计了“计划”。 针对用户在健身 / 减肥期间需要大量相关“干货”知识的增长，以此设 计了“快报”来填补用户的知识空缺。
针对性内容推荐 WHAT: 在用户初次使用 Fitogether 时，会让用户选择 基本健身 / 减肥目标。同时“计划”和“快报”也会针 对用户近段时间的减肥 / 健身目标来进行推荐。 WHY: 通过对相关知识的调查以及对用户进行访谈，我 们发现用户的健身 / 减肥过程分为不同时期：比如减肥 初期和减肥平台期中，用户所需要的运动是不同的。 所以针对用户所处的时期，来对用户推荐相应时期的 计划和快报。
互相鼓励 - 你不是一 个人在健身 / 减肥 WHAT： ：用户如果在一个计划中长时间没有打卡，则参 与相同计划的其他用户就会接收到推送：选择是否对 可能放弃健身 / 减肥的该用户进行鼓励。鼓励通过对话 消息的方式呈现在通知页面。 WHY： ：通过对于用户旅程地图的相关分析，用户如果 长期使用 App 但效果不显著的话，心理情绪会非常低 落，可能会减少打开 App 的频率。通过互相鼓励的方式， 让用户能够在心理上得到积极的鼓励，增加 App 的使 用频率，甚至与鼓励者建立比较长效的关系。
早茶新闻 Web Design 2016.12-2017.01 早茶新闻是一个新闻聚合类的网站，通过 网络爬虫收集各大新闻门户网站的热点 新闻，做到在一个网站即可将全网的热点 新闻尽收眼底。
不好意思，只有设计师可没法出产品 早茶新闻是一个准备上线参加竞赛的产品。为了达到这一目标，UX&UI designer（我） 与 Program engineer 的相互合作必不可少。
两名同学编写网络 爬虫，收集各大门 户网站的新闻
搭建后端服务器
确立基本的用户画 像，讨论网站的基 本功能以及技术限 制
实 现 前 端 UI 部 分 以及前端逻辑部分
绘制低保真原型， 并与队友反馈交流
完成视觉设计，并 配合前端实现设计 稿
从设计稿到 CSS 这个项目之中我使用 Figma 作为主要的工具。得益于 Figma 的 web App 的身份，将项 目的设计稿直接以链接的方式就可以分享给前端同学，组件之间的像素间距一目了然； 同时 FIgma 还有自动生成的 CSS 代码的功能，让设计与前端的协作更加亲密无间。
在五秒之内满足用户的需求 作为一个新闻门户网站，早茶新闻的首页放上了“热词”和“热闻”两个板块，让所有新 闻信息一目了然。“热词”展示当日的火爆话题，“热闻”展示当日的火爆新闻。 点击词 2
词1
词2
词3
新标签打开的新闻
词2
全部种类
全部种类
点击新闻
与词 2 有关的新闻
全部新闻
选 择 种 类
与种类1 相关的词
与种类1 相关的词
与种类1 相关的词
种类 1
与种类 1 相关的新闻
点击新闻
点击新闻
为高级用户准备的内容——热词榜 热词榜所呈现的内容是：全网所有热点话题按照相关新闻的数量大小进行逐一排列的榜单。 考虑到有少部分高级用户会有将所有词汇按照热度排序的需求，我们将热词榜作为早茶新 闻的第二个子页面。 同时针对部分“数据爱好者”，我们还准备了相关数据 API，以供其方便地获取他们想要 的新闻热度信息。
移动端 Web 端一个都不少 考虑到项目开发过程中的相关限制，我们暂时没有能力将网页进行移动端的优化。 不过我们推出了“订阅功能”：用户在用邮箱注册帐号之后，即可在我的订阅页面添加需 要订阅的话题和网站。早茶新闻会在每日的早茶时间（上午十一点左右），将订阅话题和 网站的更新内容发送到用户的邮箱之中。
结果 ... 虽然在开发过程之中有非常多的限制（诸如服务器性能受限需要尽量减少图片内容、设 计稿与前端的实现差异等问题）。不过早茶新闻还是获得了第七届华为杯智能设计大赛 一等奖 - 华为专项奖、四川省 - 物联网 + 大数据 - 二等奖、电子科技大学 - 一万个生活家 产品组 - 三等奖项。
里程篮球俱乐部网站 2017.12 Web Design UI/UX design /CSS 这是在校内的一个课程作业，要求是以三 人小组为单位，搭建里程篮球俱乐部的网 站。我负责主要的视觉设计以及编写部分 前端代码。
繁琐的工序用插件来完成 在用 Photoshop 完成设计稿之后，利用 Zeplin 将设计稿进行标注。并将颜色和文字进 行规范，以进一步减少代码编写时的负担。
HTML&CSS 单单完成设计稿还不够，我们必须保证实现效果也是像素级的精确。（我主要负责部分 CSS 代码的编写）
兴趣爱好 喜欢游戏、也做过游戏开发 偶尔摄影 偶尔即兴绘制一些扁平风格插画 对于一切数码产品有着极度的好奇心 对 App Store/Google Play 上的一切新鲜软件都想要尝试一下（128G 不够用啊） 喜欢听后摇滚和 Jazz HipHop 多一点，喜欢 walkman/ 黑胶唱片 最近小说看日本那边的比较多一点、同时也喜欢动漫
游戏开发 在大二下期的时候，我和另外三名同学组成独立游戏开发团队，利用免费开放的虚幻 4 引擎，准备酝酿自己所想要制 作的游戏。（其中我主要负责游戏场景制作以及利用引擎自带的 UMG 编辑器来实现 UI 的布局和动画。）
印刷物设计 虽然不是科班的设计师，但平日里也常常帮助同学设计相关的海报以及一些印刷刊物。 下图是帮助一个班级设计的优班竞选 X 展架海报。
视觉设计 虽然主要的求职方向是交互设计师，但是我时常也会进行一些视觉上的尝试。毕竟有时颜值有时也第一生产力，是 对一个产品最基本的要求。
摄影 得到相机应该做什么？当然是把快门按爆！
Thanks
在原研哉和阿部雅世的对话之中提到过“想做的事”和“能做的事”：“想做的事”需要用一生来寻找，而人 们应该先将“能做的事”给做好。身处一所纯理工科学校的我，想要做设计，并且决定从身边力所“能做的事” 开始做起：我参加新加坡国立大学的交换项目，在 NUS 人机交互实验室老师的指导下，对交互设计有了初步 的认识；与同学一起参与竞赛项目，考虑设计的限制和实现，让我对设计的理解从纸面地原型跨越到了实际的 开发；学习前端代码地编写，让我能够更加清楚地认识设计稿实现中的问题；与通过一起组成独立游戏开发团 队，希望能够有朝一日，将自己热爱地设计融入自己热爱的游戏之中 ... 我希望通过这些“能做的事”，一步 步地开启自己“想做的事”。 因为学校的教学制度，我在接下来的时间有六个月稳定的实习时间，我希望能够得到这份实习工作，能够融入 一个设计团队，能够和别人交流我心中所认知的设计。
Contact Me
yanjunjie2016@gmail.com 184-2806-6297