装修基础组件1.0

结合产品特点做了一套适合厚予的基础组件，让客户根据自己的需求自由配置所需页面。

项目介绍

厚予科技：致力于国内财富行业一站式资产交易服务saas平台，通过自主研发系统，科技赋能财富管理，提供基于机构/独立理财师与投资人投资撮合服务。

痛点分析

厚予科技给用户提供资产配置app开发、维护等全方位服务，如果面对不同客户提出的不同的需求，都要重新开发一套app页面，成本太高了。况且大多数客户的需求都有很多重叠的地方。

根据金融行业产品的特点，应用市场审核要求较多。平台对功能复用，避免再次开发就显得很重要。

设计目标

给tob用户提供自己配置页面的功能，不是简单的让用户搭建一个页面，还要保证用户在使用时的体验感受、使用流程的顺畅、信息展示的清晰性、行为效率的高效、甚至是否能有效的引导用户完成目标。

所以高效专业、轻量易用、独立个性就成为我们这次项目的设计目标。

骨骼-框架布局

结构简洁、布局清晰易用

每个客户对app使用场景要求不同，不同的场景需求就要求页面框架结构相对简洁，布局清晰易用。

复杂的页面结构，设计师很难串联模块，反而不容易让页面视觉更好的呈现。对于研发而言复杂的结构需要判断的逻辑更多，开发成本更高。

所以应该秉承b端设计追求产品的稳定性、结构逻辑清晰、框架布局灵活的主张，保证产品的安全、灵活、易用。

交互逻辑

因为这期不是实时可见的装修玩法，所以后台呈现的app页面和前端呈现的有真实数据的app页面不同，后台以图片映射的交互方式来提高用户体验。（未来会做后台实时可见，最大程度还原后台和前端真实数据）

标题和内容同时设计在一个卡片上，灵活布局，页面整体统一。后台组件自由增删、上下移动，发布后前端展示编辑结果页面。

为了保证页面的整体美感，其中任意一个组件移动至第一层时，默认与标题栏、状态栏融为同一个卡片。

细节

为了较大程度的提高美观个性，大胆尝试用24px圆角，让用户配置出来的页面更有设计感。

色彩-变量色

使用逻辑清晰、配色高端大气

为了配合换肤功能，要有一套拓展性高、可控性强的方法来维系产品的风格呈现。这里用主色和主渐变色，辅色和辅渐变色参与了换肤功能，哪些功能以及板块用了这四个变量色都要有清晰的思考，避免换肤时配色混乱，功能层级不清楚。

两个主色都有自己的渐变色以及透明度使用方式，保持用色逻辑不复杂的情况下增加了配色丰富度。

通过金融行业内的竞品分析和竞品调研，选了6套色相差异较大的配色方案衔接更多客户的品牌色，供用户切换风格主题。

色彩-产品色

低饱和度、用色面积较小

除了主色、辅色、功能色、中性色，还给每个产品分类配置了专属色，用于快速区分不同产品的组件。

客户运营app时自己上传的宣传物料和内容图片颜色肯定比较丰富，模块如果颜色突出，后期对宣传物料颜色的应用门槛就较高，页面效果不容易把控。

而且太过于丰富的颜色也会让配置的页面混乱，所以组件配色不适合饱和度高、颜色大面积使用。

如果有需要大面积使用颜色的地方，应该尽量选择透明度模式使用。无透明度纯色适合小面积点缀。

基础组件

满足多场景搭建个性页面

梳理和归纳很多复杂的产品体系和需求，设计了一套可组装、可复用的页面配置解决方案。

通过灵活的框架，通用的设计规则，使用者可以像组装乐高一样快速组装产品界面，满足不同场景不同需求，不用重复发版反复审核。