王 娅 楠 UI设计师 15921379653

王 娅 楠

目录 content

001

WEB

DESIGN

002-056

002

APP

DESIGN

056-083

003

C4D

DESIGN

083-090

004

other

DESIGN

083-090

王 娅 楠

001 web

作为吉利工业互联网平台的中台业务产品，Geega工业互联网应用商城，集成公司内所

有核心解决方案以及各类SaaS产品， IOT产品等，作为C端网站，在风格调性上做了诸

多尝试。

网站设计多以简洁明了的风格为主，结合C4D三维建模设计，呈现前沿明朗的视觉效

果。

Geega商城

项目梳理

002 web

about background

关于优化背景

作为吉利工业互联网平台的新网站，打造符合吉利品牌质量的C端网站任务应运而生。在之前的产品中，诸多问题导致产品的各方面质量不

能达到一个优质的标准。一个好的产品就是不停打磨，不停优化从而不停提升的过程。

希望通过产品的优化，实现产品、视觉、交互等多个纬度的质量提升。打造一个高效、便捷的应用商城。建立一个极致购买体验的工业互

联网应用商城。

003 web

Optimal Object

优化目标

功能优化

Function

交互友好

Interaction

视觉提升

Interaction

004 web

User Position

用户定位

本次迭代在原有业务梳理上，新增了部分功能板块，但是总体没有大的调整，通过分析功能数据和对基础用户调研，更精确的把握用户需

求，而非从新定义用户。

年龄占比

20—50岁 82%

其他年龄

Age Proportion

18%

性别占比

男 性 70%

女 性

Gender Proportion

30%

地域分布

一、二线城市 63%

其他城市

Regional Distribution

37%

用户画像

User Portrait

多来自传统工业想转型或者正在转型的中大型企业，对工业互联网的认知成熟度相对不够。对现有产品链功能用途，实际效果未知。用户希望能够在购买产品的时候

有专业易懂的产品介绍，使用场景的说明，以及成功且真实的案例呈现。且需要交易场景多样化，专业的销售跟进服务相辅。

005 web

question comb

问题梳理

功能复杂，内容过度饱和

在过去的商城中，由于产品来自各个部门，且需求多样性，导致网站功

能多而杂，页面承载的信息过多，内容冗余，影响用户使用，快速找到

合适的产品。

01

品牌调性不明，与竞品雷同

由于进入市场较晚，且是吉利的新平台。在商城构思时，多借鉴目前成

功的网站，品牌识别的定位也更新较快。导致品牌调性不明，与竞品雷

同，导致用户印象不深，没有记忆点。

03

功能入口重复，交互跳转复杂

由于功能多，且迭代次数频繁，部分开发延后。且跨部门协作，导致部

分功能入口重复，且跳转复杂。用户常常不能快速找到产品，且支付等

跳转绕路执行。

02

视觉负担重，规范性差

由于前期商城的设计师较多，且没有B端设计规范约束。整个商城视觉统

性不够，庞大的信息量多平铺，导致视觉负担过重。

04

006 web

redesign direction

优化方向

架构

Architecture

合并功能、精简模块

01 交互

Interaction

简化路径、扁平层级

02 视觉

Vision

降维减负、规范统一

03

007 web

home page

页面展示（部分）

首页采用三维视频，鼠标悬浮各个板块会有相应动画伴随介绍 产品列表板块结合统一三维元素突出重点产品

008 web

多个产品组合的核心解决方案展示，用户快速了解N+1产品

亮点辅以真实数据，使用户直观了解产品优势

成功的服务案例展示

009 web

other page

页面展示（部分）

其他页面banner展示 其他页面banner展示

业务中台部门主要项目产品，包含C端、B端、定制产品...

GO工作台的C端并非传统意义的C端产品，在业务逻辑和产品设计上

属于B端，但是在U I设计和交互体验上往C端靠拢。用户购买产品

后，在GO工作台上使用，查看相关信息、产品数据统计等。

GO工作台B端功能设计相对更复杂、遵从公司B端规范。是用户用以

上传产品、编辑功能、设置参数等。

010 web

GO工作台

GO工作台C端首页

011 web

other page

页面展示（部分）

C端登录页 修改密码

012 web

产品详情 产品域配置

消息中心 用户反馈

Geega控制台为GO项目的B端部分，用户用于管理订单、产品、合同、发票等相关业务

013 web

Geega控制台 页面展示（部分）

Geega控制台首页 定制版首页

014 web

other page

其他项目UI展示

Geega to B web Deign System

Geega B端规范

015 web

016 web

规范1.0封面 规范2.0封面

System

规范机制

Geega作为吉利工业互联网的主要业务体系，规范的存在是必然的。规范的迭代以季度为节点，进行小范围的修改和更替。以年为大节

点，进行大迭代。

017 web

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；

清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；

帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆

负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进

行决策；

结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语

言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和

文本、元素的位置等。

规范指南

018 web

Architecture

规范组成架构

主题样式

拓展控件 通用模版 业务组件

基础组件 框架模式

包括颜色、字体、图标、阴影、圆角、间距等

内容

包括卡片类、图表类、流程编辑类、图表编辑

类、数据图谱类等内容

包括登录注册页、验证类、缺省页、概览、

Dashboard、权限角色等内容

包括业务看板、商品列表、会员卡片等内容

包括按钮、输入框、单&复选框、上传、开关、

选择器、表单、表格、分页器、标签等内容

包括页面布局、适配、上下结构、左右结构、

综合结构等内容

019 web

品牌色彩是最直观的视觉元素之一，用来体现产品特性和传达理念。该规范在geega绿的基础上进行了亮度的弱化，提升了视觉舒适

度。而较上一个版本的颜色，又提升了饱和度，符合大众的审美，和活力的企业元素。应用场景包括:关键动作点、操作状态、重要

信息突出、图形等场景。

color

仅展示部分主题色

主题色（V-06）

主题色（V-01）

主题色（V-04） 主题色（V-05） 主题色（V-07）

主题色（V-02） 主题色（V-03）

#24B276

#F2FAF7 （6%） #E9F7F1 （10%）

#7ED2AE #20A06A #91D8BA （50%）

#A7E0C8

主题色，主要按钮、高亮、文字按钮、弹框标题等

辅助填色部分，用于选中效果、线条

用于输入框选中状态，边框颜色 用于按钮Hover移入 用于按钮pressed按下状态

用于线框悬停、按下、点击等外阴影颜色 用于主按钮不可点击状态

品牌色

020 web

icon

部分图标规范展示

网格的大小必须要是4或12的倍数。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、

48*48px。这里建议用48px做为常规图标设计尺寸。

图标尺寸

64 x 64px 48 x 48px 32 x 32px 24 x 24px 16 x 16px

图标绘制基于48x48px画布绘制的线性图标，线宽默认为4px，不同场景缩放比例使用：

图标为32x32px时，线宽3px（基准线宽）

图标为24x24px时，线宽2px（基准线宽）

图标为16x16px时，线宽2px（基准线宽）

021 web

中国民生投资股份有限公司（简称 “中国民投”）是由全国工商联发起，经国务院同意成立，由59家知名民营企业发起设立的大型投资公司。

是目前唯一一家带 “中国”字头的民营投资公司。在产业方面，中民投主要布局的领域包括新能源、居家养老、建筑工业化、通用航空等；在

金融方面，涉及保险、银行、租赁、资产管理等传统业务与互联网金融等。

中民投项目

022 web

中民未来作为中国民生投资集团旗下的一级子公

司，本次网站设计在风格上与中民投吉网保持一

致，继承中民投官网简洁、大气、低调务实的设

计风格，以显示与集团品牌的紧密关系，同时体

现了中民未来的值得信赖的企业形象。

中民未来官网涉及到更多的即是文字与图片的展

示，与中民投官网的图文井茂相符合。在设计上

采用LESS IS MORE（ 少即多）的设计理念，以

更加简洁的方式展现更多内容。

023 web

p

a

g

e

d

i

s

p

l

a

y

部

分

设

计

页

面

展

示

024 web

Other project

其他项目网页设计展示

025 APP

APP design

移动端UI项目——福萝贝

026 APP

福萝贝是一款金融类APP，主要是小额现金货款业务。针对有小额度借款需求的用户的产品，产品特性额度灵活、利息极低、认证流程少、审批速度快、放

款速度快。用户能在最少的时间内申请到借款，满足自己的用款需求。

在前期对同类竞品调研中得到总结：大多数被调研的产品设计上都偏向保守的风格，布局以简洁明了为主，交互上基本为传统的交互模式。部分大厂产品设

计上能够有序规范的承载大的内容体量，在微交互比如 tab切换动效和加载动效等都较有设计感。logo都以简单醒目直观的方式呈现，颜色方面以传统最常用

的色系：刺激用户眼球的红色、橙色，能让用户有货款冲动的视觉指向行为。偏商务正式的蓝色，能让用户信赖的平台的视觉感受。

用户画像从业务场景出发，实现数据商业变现重要方式。用户画像是数据思维运营过程中到一个重要闭环，帮助金融企业利用数据进行精细化运营和市场营

销，以及产品设计。用户画像就是一切以数据商业化运营为中心，以商业场景为中心，帮助产品深度分析客户，找准目标客户，更好迭代产品，提升用户体

验。（数据来源本产品1.0用户数据、合作三方用户数据、以及用户访谈等方式）

以下为部分本产品的数据信息：

关于产品

用户画像

About Project

User Portrait

027 APP

Data information 数据展示

028 APP

logo proposal

一些logo设计提案展示，创意来源产品福萝贝的文字、拼音缩写以及谐意胡萝卜的实物形象。

029 APP

home page

首页相关状态页面展示

030 APP

031 APP

other page

其他页面展示

032 APP

泰极贷

借款泰轻松 极速秒到账

图

标

提

案

i桌面图标思路主要是以APP名字发散思维。主要是以首字母为主，字母简单能提高用户辦识度增加记忆点，减少用户认知负担，闪电能体现放款快。泰极谐音太极，

以太极图加上金融属性，区别同类借贷产品。

033 APP

Onboarding

引导页

034 APP

APP UI

页面设计展示

035 APP

036 APP

other app

其他手机软件设计展示

037 c4d

cinema 4D

C4D设计图

038 c4D

practice

练习展示

039 c4d

Data model

临摹数据模型

040 c4D

practice

练习展示

041 c4d

Data model

项目数据模型

042 c4D

3d icon

项目中的图标设计

NAME: iCE

The IP Introduction Manual

043 c4D

044 c4D

BaseBit.ai Is a data and artificial intelligence high-tech service brand. With privacy security computing as the core, BaseBit.ai builds an

open ecological and data sharing and collaborative environment for government, medical, financial and other industries on the basis of

data security and personal privacy protection, and develops the ability of artificial intelligence on this basis. empower the industry

关于公司

About Company 01

045 c4D

IP角色设计灵感来自BaseBit.ai里i的字母。由i联想ice cream-冰淇淋。公司属性人

工智能算法等属性联想到机器人。于是结合两者，一个外形圆润可爱的宛如冰淇

淋的机器人iCE诞生。充满智慧，保护用户数据安全。

IP介绍

IP Introduction 02

046 c4D

iCE

BaseBit.ai IP

姓名：iCE

生日：11.26


性别：无定义机器人


性格：乐观、严谨、可靠

three-view drawing

模型三视图展示

047 c4D

身体上的logo标识 胳膊上的发光线条 后脑勺的纹理图案

Details Picture

一些细节图展示

048 c4D

Expression Picture

一些表情图展示