UI设计
① 2018.09 闽南传统文化传承APP “匠忆”
项目简要概述:该项目基于三维建模技术,模拟闽南传统房屋结构的搭建过程。其目的在于弘扬闽南传统建筑文化,用户可以通过组合房屋零部件的交互操作来搭建闽南传统房屋结构。
项目主要用户群:传统文化爱好者;对房屋搭建感兴趣的手机用户;传统文化推广者。
原型设计思路:本项目主要分为首页、社区、体验、商城和我的五大模块。在原型设计的过程中,首先确定每个模块所需功能,再根据其功能划分确定整体框架。
界面设计思路:本项目的主题为传统文化传承,因此在设计前期,首先确定了App的整体基调是偏传统、国风的。进而根据功能模块划分和原型来进行界面设计。
设计存在不足:由于该项目为我学生时代的第一个UI设计项目,在设计过程中没有进行严格的设计规范。其次,在一些icon和字体等的大小比例上较不合理,一些布局仅考虑到美观性,没有考虑开发可行性和交互逻辑。
主要UI界面展示
② 2018.05-2018.07 兴海物联AI智能开放平台
项目简要概述:该项目是在兴海物联实习期间和其余五位同学共同完成的,主要负责其AI智能开放平台的策划与开发工作,我在其中主要负责网页的界面设计。该AI开放平台不仅仅适用于用人工智能接口盈利,而且可用于展示兴海物联的人工智能发展实力以及人工智能团队,从而吸引更多需要人工智能接口的企业与兴海物联长期合作。主要倾向于与公司形成多方面的合作伙伴关系,并在业务实践和解决等方面给予优质创业企业资源支持。
项目主要用户群:互联网产品用户。
原型设计思路:根据公司的需求,确定管理员端和用户端,并确定网站框架。其中管理员端包括登录界面、权限管理、接口调用、博客更新等模块,用户端主要包括主页、应用场景、文档中心、产品服务、试用演示等模块。
界面设计思路:根据公司需求,确定网站风格为科技简约风。因此在整体设计时,根据模块选择合适的图片来展示内容,并根据设计规范来进行界面设计。除此之外,在进行一些Icon和banner的设计时,要注重其整体性,根据模块来确定其表现方式。
设计存在不足:此项目为我参与的第一个完整的公司项目,在项目进行过程中,根据设计经理的意见进行了多次的迭代修改。但由于项目周期短,所需页面设计较多,在此阶段仍然缺少相关UI设计理论的系统学习。整体上原型的交互逻辑没有较大的问题,部分页面仍有优化的空间。
主要UI界面展示
由于项目仍未投入使用,在此只展示其部分页面:
③ 2018.07 厦大官网改版设计(练习)
存在不足:①配色:整体颜色黯淡,搭配不合理。其中的渐变用的有些莫名其妙;②排版:将所有内容全部铺在首页,让人觉得界面臃肿冗杂,不便于读者阅读。下方出现的模块没有进行明显的区分(如主题网站、学术讲座和通知公告,杂糅在一起),抓不到重点。图片排版随意。有些图片无法体现重点。③风格:轮播图与整体的风格相差太多。④导航栏:下拉之后为一整列,不方便阅读。⑤文案内容:只给出标题,无法让读者知道新闻的具体消息,可能会让读者错过这个消息。⑥轮播图:只能通过点击下方的小点自己更替或者等待轮播图自动滚动。而一般情况下,在大多数有轮播图的地方,会提供左右按键,方便用户自己快速滚动轮播图。
修改设计思路:①导航栏:将导航栏固定在网页上方,使得页面及时下滑导航栏依旧在最上方,避免用户需要重新滑到最上方进行导航栏的相关操作。同时,下拉菜单改为竖式菜单,方便阅读。②轮播图:添加了左右自由更替轮播图的按键。③左侧边栏:将首页的内容进行精确的分配(此位置不变,一直存在),点击每一个模块,则在右方出现点击模块的内容。相比于把所有内容放在同一个界面,分类更明确,排版更简洁。④内容板块:避免只列举出新闻标题,而是通过一个个的模块对每个新闻内容进行概括,使读者在阅读之前对内容有一定的理解。如果显示欣新闻很多,可以在这里设置一个滑动条。
④ 2019.01-2020.03 基于人工智能的多动症儿童认知康复训练系统
项目简要概述:本项目将基于交互游戏与 Unity3D 技术,通过游戏训练的形式,辅助多动症患儿的治疗。通过有针对性的游戏对患儿的能力加以训练,在游戏进程中以语音、动画等形式诱导培养患儿认知能力;通过游戏数据监控智能分析调整进度与游戏情节及难度;通过资讯推送、医疗咨询入口、社区论坛等形式为患儿家长提供医疗科普与支持。本项目旨在帮助患儿早日克服病情提高能力融入社会,帮助家长科学治疗患儿,为儿童多动症治疗做出贡献。
项目主要用户群:本项目的目标是帮助多动症儿童的家长更好地照顾和治疗自己的孩子,因此我们的主要用户群体是多动症患儿的家长,这一群体中,大部分人年龄在24~35岁之间。
24~35岁之间的人群,熟悉电子设备,经常使用手机app,有相对老一辈与未成年人来说更为成熟的辨别能力,有一定社交需求和通过网络寻找解决方案的能力;同时由于大部分人有工作和生活压力,对APP的耐心与容错度较低。
原型设计思路:基于前期的项目策划和用户调研,确定四大功能模块,分别是:社区交流、医疗咨询、康复训练和个人中心。根据四大功能进行界面划分,进行原型设计。
界面设计思路:该系统的界面设计充分考虑了页面布局、配色、细节设计对用户体验产生的综合影响,以需求的实现为核心,综合了美感、心理学、逻辑等方面的因素,做出了完善的设计方案。界面采用了扁平化样式、双渐变配色、弱化边框分栏的风格,在一些表单的设计中多用标签化的样式,图标样式和颜色的选择、标签圆角大小、阴影浓度的平衡都使界面效果柔和、简洁友好。
另外,Elfriend的训练模块中,游戏部分是最直接与患儿产生联系的部分,其用户体验有多方面的影响因素。在此模块的设计中,我们通过查资料、采访、问卷调研等方式多角度、多方位地尽力贴合患儿的心理状态与情感诉求,旨在从功能、视觉、交互方面提升用户体验。Elfriend 对游戏部分的交互设计主要着重关注了以下几个方面:①在游戏中,采用较为绚丽集中的色彩,吸引玩家的注意力,每个关卡采用主题设计的形式,提供更好的沉浸感;②游戏的界面元素以场景为主,界面框架尽量简洁,避免对患儿进行干扰而影响游戏体验和训练效果;③游戏的UI与整个APP的UI风格适配,但更偏低龄化、卡通化,营造儿童友好的环境。
主要UI界面展示
主要游戏界面展示
⑤ 2019.07-2019.09 员工自助差旅系统移动端界面优化
项目简要概述:本项目主要基于已有的自助差旅系统,对齐UI进行优化。员工自助差旅系统主要用于建信金融内部员工进行差旅申请、预定、报销等操作。
主要UI界面展示
⑥ 2019.11-2020.06 基于AR技术的虚拟穿戴系统AR Wearer
项目简要概述:《AR Wearer》是一款关注于饰品线上购物的App,使用Unity 3D为主要的开发平台和工具,以AR技术为基础,将饰品的三维展示、虚拟穿戴和增强现实技术进行结合,使用户能够轻松地跳脱出传统的图片浏览模式,并通过各自的智能设备,足不出户进行各种饰品的虚拟穿戴,为用户提供更丰富的购物体验。该系统主要分为“首页”、“分类”、“社区”和“我的”四大模块。其中首页模块为用户提供最新的商品推荐、品牌推荐以及时尚流行趋势;分类模块将所有商品分成五大专区,分别是:戒指、手镯、手表、帽子和眼镜,用户可以分类别寻找商品;社区模块是用户进行动态分享、品牌进行商品宣传的模块,为用户提供日常交流分享的平台;我的模块是用户进行个人资料管理和记录查询的模块。另外,本系统的核心功能为商品的三维展示和虚拟穿戴,该功能贯穿在四大模块里,只要选择商品、进入商品详情、点击对应按键就可以通过跳转到达该功能界面。
项目主要用户群:本项目的目标是为消费者提供一种全新的线上购物方式,改善他们的购物体验。因此我们的主要用户群体是有独立的经济能力且有购买饰品习惯的年轻消费者,尤其是女性消费者。这一群体中,大部分用户的年龄在20至35岁之间。这一个年龄段的人,有比较稳定的收入来源,会愿意花钱去购买自己喜欢的东西。另外,他们对美和个性的追求较高,愿意花金钱和精力去打扮自己;同时他们熟悉电子产品的使用,并且对AR技术的接受度高,不会出现不会使用APP的情况。
原型设计思路:基于前期的项目策划和用户调研,确定四大功能模块,分别是:商品资讯、社区交流、商品展示和个人中心。根据四大功能进行界面划分,进行原型设计。
界面设计思路:根据原型确定系统框架。在界面设计时,确定设计风格为扁平化风格,选择矢量形状与线框式图标,弱化组件存在感。在颜色的选择上,以深蓝为主,凸显APP的高级感、时尚感;以浅蓝和粉色为辅,避免深蓝色的过度使用而带来的乏味,注入年轻与活力的风格。底色选择白色、超浅灰或者灰白渐变,目的是为了给商品信息做服务,突出信息内容。同时,在设计的时候,通过各组件的搭配使界面和谐,增强用户体验。