重新定义筑集采平台用户体验

　　一.序言这次筑集采互联网集采Web端5.0.0改版主要包括用户查看界面和管理后台操作界面，设计主旨在于提升用户体验。用户查看界面设计理念偏向于认知减负，用户在最短的时间内获取重要信息。管理后台操作界面更加偏向于更佳快速高效的工作效率，在最短的时间内实现发标议标审核等一系列操作。互联网集采平台定位于建筑供应链B2B集采平台，其主要的服务对象及用户群体都偏向于B端用户，建材供应商，建筑施工人员，管理人员，集团领导等。面对复杂的产品逻辑和用户群体，筑集采设计团队需要用专业的手段治理产品各链路里的疑难杂症，从内至外顾及各种牵连的细节进行整体治疗，从而让产品更加美观、健康、舒服。在历时很长的项目过程中，我们一步步地将公司的设计战略分解成产品体验方向，从设计概念落地到界面设计语言，在执行过程中又不断地平衡各种设计细节，才有最终的设计产出。所有的改变都是为了给用户营造更加良好的体验环境，那我们就先来看看这次升级针对的人群特征

(管理首页)二.用户群体根据平台研究数据分析得出用户群体主要集中在建材供应商，施工单位人员和集团管理人员，三类人员的出发点和目的性各有不同。建材供应商登陆平台浏览标书，筛选符合自己的标书进行投标。供应商关注的点在于标书的重要信息的提取，如送货地址关系到运输成本，招标内容，截标时间以及账期等，这些主要信息是重点展示。平台对于发标单位而言更加侧重于操作体验，如何在快速实现招标是用户体验设计部研究努力的方向。

　　三.交互设计方向

　　根据公司策略，业务和用户的发展变化，传统的交互设计已经不能满足需求。筑集采用户体验设计部对Web端进行改版，希望进一步提升用户体验设计。根据现平台发展进程提出了三大设计策略：认知减负，提高效率，多维度情感，作为高层次体验的指引。针对这三大策略，在改版上我们对当前版本的问题进行分析，同时对这几年的设计方向进行总结。

　　设计策略一：认知减负

　　从互联网集采前台用户查看页面整体设计上考虑，需要更加突出内容呈现，在内容化设计上需要更明确的认知，在同类型内容模块的设计表现也需一致，减少过多结构样式的表达，保持一定的韵律感和统一性，给用户信息突出还需结构简明的视觉认知。

(招标公告局部页面)

　　设计策略二：内容为王从业务和用户角度考虑提高工作效率，设计规划业务内容功能更加突出，功能版块独立，主次分明，业务流程操作顺畅，一键实现发布和审核。以及在业务流程操作过程中带来出其不意的惊喜。

(查看标书局部页面)

　　设计策略三：多维度情感多维度情感化主要表现产品在性能、视觉和彩蛋方面的体验。筑集采用户体验设计部在设计前期对互联网集采平台的业务流程和功能版块做了重新梳理，将复杂的流程简单化，高频功能点突出化。缩短在平台操作时间，提高用户的办公效率。同时用户在跟平台交互中的过程中平台也会给用户实现对话，用户的任何一个操作平台都会给予相对应的回馈。视觉设计体验在流程中埋了很多彩蛋，给予用户一些惊喜或者意想不到的小感动。

(404页面)

　　四.视觉设计方向

　　01设计思路

　　将筑集采互联网集采平台视觉体验进行整体走查，分为了框架结构类型、全局通用元素、业务特殊类型进行问题分析。发现整体结构布局、UI元素、业务统一组件以及拓展的设计都有很多优化空间，对内容重新理解，定义场景，重整框架，新的设计方式将界面呈现全新面貌，给用户整体的感知，达到想要的章法效果，有序可循，有理可依，有清晰的规划迭代。

　　02视觉界面

　　视觉体验就是最重视人的情绪体验，每一处的设计都能影响人的微妙情绪，由点到线再到面及整总体的感受，称之为视觉情绪管理。筑集采用户体验设计部发现原平台色彩单一、主次不突出、功能版块混乱、结构拥挤等感受。主要情绪--单调感、混乱感、挤压感。对应优化为缤纷丰富、主次层级突出、功能版块统一、视觉呼吸，引出3个新情绪--情绪愉悦、主次分明、视觉呼吸。

　　视觉设计理念：视觉吸引，浏览舒适、框架统一、元素一致

　　基于以上所述的前期探索引出四点设计理念，梳理清楚视觉的情绪方向，整体考虑表现的视觉美、结构美、体验美的细节等，还要更多思考的是以设计解决业务问题，因为是互联网集采平台Web端全新改版，原有用户对新平台可能需要学习和适应的基础上，设计部对原有老的业务逻辑和结构元素给予了一定的保留和传承。对特殊业务和重点业务模块设计给予了特殊处理，突出重点收敛次要。

　　平台每一点UI元素都是经过全局考虑精心斟酌，对于如此庞大的产品包来说多一点元素都是负担，视觉退一步服务于产品内容，使内容更加突出展示及清爽大方，当然在需要视觉氛围重渲染的情况还是该有它的出彩，每一点的斟酌都只为整体品质，点线面的重新塑造筑集采互联网集采的用户体验和品牌文化。

　　视觉设计理念一：视觉吸引

　　颜色往往是第一时间被察觉，原来扁平单一的色彩需要赋予色彩和功能，色彩缤纷、明亮亲和、功能突出。颜色使用明度和亮度略低一点的单色，主色一直传承着筑集采的企业色橙色，辅色我们一直不断的调试最合筑集采的颜色，既要要充满生机活力及友好，又要不能过于突出和夸张。颜色筛选需每位设计师对色彩高度敏感与把握，调得浅亮易粉嫩刺眼，调得深暗易厚重不通透等，都很影响用户的观感，所以在用色方面需很细心讲究。辅助色在一些操作功能上也起到引导作用，按钮不同状态的颜色切换，增强点击引导，比如新增状态，退回至供应商，确认结算单，支付，上传附件等业务需重点引导的操作。我们也设定了文本的功能性颜色使用，比如普通正文为黑，辅助为灰，查看和删除色为蓝，进行时状态为橙色，完成时状态为绿色，非正常状态为红色。基础链路界面定义使用筑集采企业色橙主色样式，不同场景如不适用可微调，饱和度明度相同、渐变角度统一即可。

　　01色彩规范

　　02字体规范

　　03图标规范

　　04文本框规范

　　05按钮规范

　　视觉设计理念二：浏览舒适 视觉扁平，视觉呼吸，简明统一，高效浏览

　　01视觉扁平：梳理了筑集采互联网集采框架结构及表现层，整体视觉框架尽可能扁平处理，减少多余设计元素，用颜色和模块区分出不同层级的内容，能用一层元素区隔就不用第二层。用卡片式设计方式来划分功能版块，分割线减少及统一浅色值，板块分割统一参数这些细节，让内容更清爽的呈现，让用户清晰关注重要信息元素。

(首页页面展示)

　　02视觉呼吸：

　　页面设计排版一致遵循设计大师原研哉少即是多的设计原理，图文组合板块适当增加空间，调整到最舒适平衡的视觉结构，有视觉呼吸感，让用户在浏览页面信息时处于高效及相对舒适状态。比如在登陆页面，后台管理首页等，设计师进行的视觉呼吸的常态工具卡系列设计，就很符合设计理念。

(登陆页面展示)

　　03简明统一：

　　不增加结构的复杂性，不增加用户的认知成本，整体保持一致的韵律感。尽量将同类型场景、内容模版统一，达到简明统一的效果。比如招标公告和中标公示模块统一样式，解决用户对同类型内容的认知。

　　

(中标公示局部页面展示)04高效浏览：

　　突出界面重点信息展示，通过模块间的版式设计区域间的功能，减少用户眼睛太多纵横交错及断点的转动。

　　

(首页找项目展示)

　　视觉设计理念三：框架统一 用户查看界面框架，管理后台操作界面框架，公用界面框架。

　　筑集采互联网集采Web端5.0.0改版设计主要包括用户查看界面和管理后台操作界面。由于两者所针对的功能点和用户体验略有区别，所以框架结构有所区别，但两者之间也有公用模块框架，及称作为公用界面框架。

　　01用户查看界面框架

(页眉元素展示)

　　

(导航栏和搜索栏)

　　

　　(底栏和页尾)

　　

(分页导航)02管理后台操作界面框架

(管理首页导航栏根据不同的分辨率自动缩放)

　　03公用界面框架

(弹框/工具提示样式)

　　视觉设计理念四：元素一致

　　根据单点设计元素组成系列形成一套设计语言，全面链路的应用设计样式/组件DNA，形成筑集采互联网集采产品自身设计语言风格，每个业务根据规范应用及灵活变化，掌握及提取风格基因去渗透在各自设计中，形成完整的新筑集采面貌，共建完成统一的视觉体验，给用户统一的品牌认知。每个设计师的做法都有出入，所以必须反复沟通设计理念及规范的一致理解，反复走查优化来达到产品UI大统一的形象。

(严格遵循统一设计元素，形成弹框规范)

　　嘟囔两句筑集采V5.0.0改版上线已经过去差不多快一个月了，回顾之前的入坑和爬坑的过程其实对最终呈现出来的效果还是有些不满意的，因为是大改版，即要推陈出新也要兼顾之前的习惯，加上产品本身就是B端产品主要用户群体是建筑行业人群，主要用户群体本身的信息化认知并不高，很多新颖的方案并不是很难接受所以在设计过程中经常处于一个纠结的状态。权衡是这次改版最深刻的认知。作者：Eric King团队成员：Eric King(设计总监) 舒小妞妞兒 王书洲

*请认真填写需求信息，我们会在24小时内与您取得联系。