1.准备工作:npm下载相关包

1.1初始化npm得到package.json文件 (不初始化也可以之前初始化的文件获得package.json文件)

npm init --yes

1.2 express包   

npm i express 

1.3 multer 包

npm i multer

2.创建server文件:在同级文件夹下创建server文件(文件名可以自定义)

3.登录接口部分

 3.1 登录接口代码

    


        


            


            

        

        


            

                const express = require('express')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //将这个express的方法赋值给app
            

        

    

    


        


            


            

        

        


            

                const app = express()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //引入multer这个包
            

        

    

    


        


            


            

        

        


            

                const multer = require('multer')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //上传的文件会保存在这个目录下
            

        

    

    


        


            


            

        

        


            

                const upload = multer({ dest: 'uploads/' })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //使用中间件
            

        

    

    


        


            


            

        

        


            

                app.use(express.urlencoded());
            

        

    

    


        


            


            

        

        


            

                app.use(express.json());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //登录接口
            

        

    

    


        


            


            

        

        


            

                app.post('/api/login', (req, res) => {
            

        

    

    


        


            


            

        

        


            

                if (req.body.username && req.body.password) {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 0,
            

        

    

    


        


            


            

        

        


            

                "message": "登录成功",
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                // res.send(req.body)
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 1,
            

        

    

    


        


            


            

        

        


            

                "message": "登录失败",
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                // res.send(req.body)
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // res.send()
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.listen(8023, () => {
            

        

    

    


        


            


            

        

        


            

                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

3.2 终端运行代码

 3.3 在Postman中测试发送请求,填写必要参数返回结果:

3.4  在Postman中测试发送请求,不填写必要参数返回结果:

4. 获取接口部分:

4.1  获取接口代码

    


        


            


            

        

        


            

                //引入express框架 
            

        

    

    


        


            


            

        

        


            

                const express = require('express')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //将这个express的方法赋值给app
            

        

    

    


        


            


            

        

        


            

                const app = express()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //引入multer这个包
            

        

    

    


        


            


            

        

        


            

                const multer = require('multer')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //上传的文件会保存在这个目录下
            

        

    

    


        


            


            

        

        


            

                const upload = multer({ dest: 'uploads/' })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //使用中间件
            

        

    

    


        


            


            

        

        


            

                app.use(express.urlencoded());
            

        

    

    


        


            


            

        

        


            

                app.use(express.json());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //获取接口
            

        

    

    


        


            


            

        

        


            

                app.get('/my/user/userinfo', (req, res) => {
            

        

    

    


        


            


            

        

        


            

                if (req.body.Authorization) {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 0,
            

        

    

    


        


            


            

        

        


            

                "message": "获取成功",
            

        

    

    


        


            


            

        

        


            

                "data": {
            

        

    

    


        


            


            

        

        


            

                "id": 1,
            

        

    

    


        


            


            

        

        


            

                "username": "leopard",
            

        

    

    


        


            


            

        

        


            

                "nickname": "little-leopard",
            

        

    

    


        


            


            

        

        


            

                "email": "laotang@qq.com",
            

        

    

    


        


            


            

        

        


            

                "user_pic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAe"
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 1,
            

        

    

    


        


            


            

        

        


            

                "message": "获取失败",
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.listen(8023, () => {
            

        

    

    


        


            


            

        

        


            

                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

4.2 在终端运行

4.3 在Postman中测试发送请求,填写必要参数返回结果:

4.4 在Postman中测试发送请求,不填写必要参数返回结果:

5.post接口上传图片

 5.1 上传图片代码

    


        


            


            

        

        


            

                //引入express框架 
            

        

    

    


        


            


            

        

        


            

                const express = require('express')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //将这个express的方法赋值给app
            

        

    

    


        


            


            

        

        


            

                const app = express()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //引入multer这个包
            

        

    

    


        


            


            

        

        


            

                const multer = require('multer')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //上传的文件会保存在这个目录下
            

        

    

    


        


            


            

        

        


            

                const upload = multer({ dest: 'uploads/' })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //使用中间件
            

        

    

    


        


            


            

        

        


            

                app.use(express.urlencoded());
            

        

    

    


        


            


            

        

        


            

                app.use(express.json());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.post('/my/user/avatar', upload.single('avatar'), (req, res) => {
            

        

    

    


        


            


            

        

        


            

                console.log(req.file);
            

        

    

    


        


            


            

        

        


            

                if (req.file) {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 0,
            

        

    

    


        


            


            

        

        


            

                "message": "上传图片成功"
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 1,
            

        

    

    


        


            


            

        

        


            

                "message": "上传图片失败"
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.listen(8023, () => {
            

        

    

    


        


            


            

        

        


            

                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

5.2 Postman上传图片测试

 5.3终端查看

本文基于“价值链”理论、结合笔者当下支撑的业务去探究设计赋能商业变现的思路，旨在寻找设计赋能商业变现的理论方法，为设计师在商业层面如何发挥自身的最大价值以促进企业持续发展提供一定的方向指引。

关键词解读

关键词

合作竞争价值链

1. 价值主张：不但包含了企业的战略方向，而且包含了企业提供给客户满足其需求的价值项，比如“快捷的渲染服务-10s出高清效果图”。

2. 客户细分：确定目标客户群体，并对其进行细分，探索不同细分市场的客户需求。

3. 客户关系：是在明确用户需求的前提下，找到吸引顾客、留住顾客、转化顾客的方式，从而对所提供的产品和服务进行不断的改进以维系和形成良好的长期往来关系，C端业务中常见的客户关系即是“会员”。

价值主张

赋能维度提取

确认赋能维度和方向

1. 目前的解决方案是否完整，能否在房产上下游继续拓展。 
2. 已经有的解决方案客户是否真正用起来，能否真正满足客户的需求？ 
3. “数字化精装”到底如何做到数字化？ 
4. 竞品做了什么？ 
5. 如何链接到C端消费者？（客户对户型对喜好如何，对装修风格喜好如何） 
   ... 

1. 对新房营销客户的核心诉求进行分析，基于C端消费者的购房链路整理客户关注的数据，提供到产品侧进行参考。 
2. 对同类产品进行详细竞品分析梳理得出产品的基础功能、进阶功能、增值功能，并且将报告提供到产品侧在后续的产品设计中进行参考。 
3. 基于对业务现状的分析，整理出期望的业务表现，根据表现的内容整理出可衡量的指标以及寻找可切入的设计机会点。 

业务现状分析

1. 目标客户的类型？ 
2. 不同地产大客户的共性和差异性？ 
3. 形成清晰的地产客户画像？ 
4. 地产客户下的细分角色？不同角色的关注点？ 
   ... 

1. 通过“桌面调研、定性调研”的方法调研“新房营销”场景下的主要用户角色，梳理得出“决策者-营销总、管理者-案场销售主管、使用者-置业顾问”的用户角色画像，聚焦所服务客户（用户）的特征、动机、日常工作分析，为后续的产品功能规划提供参考。 
2. 根据当前客户细分情况，整理在客户细分侧期望的表现，整理可衡量标准以及可切入的机会点。 

目标客户分析

1. 一方面可以思考产研基建能力建设是否完善，是否有进一步优化的空间。 
2. 另一方面可以思考产研、商务、运营等角色涉及的协作流程是否高效，能否进一步提升人效。 

面向大B客户的转化链路

1. 运用链路分析法，对转化链路进行系统梳理，并明确链路中期望的目标表现，发现可用于衡量的数据指标和可挖掘的机会点。参考下图以“触达链路”为例进行详细说明：

“转化链路”分析

GSM模型

初步归纳整体研究思路

从业务着手，尝试挖掘赋能方向和机会点

由此，笔者也形成了相对清晰的研究思路：
基于价值链理论，选取赋能变现相关联的维度。从维度切入，运用专业的设计方法对业务进行系统梳理，挖掘维度下更细分的方向，并且确定相关的评估体系用以确保目标达成。由于单条业务挖掘的方向可能有限，因此后续需要对其他典型业务进行分析，尽可能从业务实践中抽离赋能方向，并且最后应用到其他业务实践中。

设计赋能商业变现的研究思路

总结

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

前言

提起中后台，除了高效、灵活和强大之外，不可忽视的还有它的海量数据。海量数据的筛选与呈现，直接决定决策人员的效率高低。我这边主要是结合自己在实际工作中遇到的表格设计问题，针对Web端数据呈现方式之一，表格的设计进行探讨。

首先了解下表格的构成：顶栏、表格主体、底栏

• 顶栏： 对表格信息进行概括，包含标题、筛选、搜索、操作按钮等功能

• 表格主体：承载数据内容，由 行 和 列 构成

• 底栏：主要用于设置当页条数及放置分页器

关于表格的文章有很多，这边我仅仅针对表格内部（即表格主体）与大家探讨需考虑哪些问题才能让表格整体的阅读体验更好！

“优秀的设计需要用心、规划、思考和理解人们的行为方式”

的确，表格作为中后台海量数据呈现的载体，能够【帮助用户快速“阅读数据”，获取有效信息，提高决策效率】，但是实际业务中，很多设计师往往没能够结合产品和业务场景，找到一个合适的方案。所以我结合了自己在实际工作中遇到的表格设计问题，总结出以下几点：

一、表格需自我解释 —【梳理数据关系，明确数据重点】

自我解释的最终目的就是让人看懂你，试想下用户面对一整张表格中数据却不知道表达什么意思，这极容易给用户带来阅读压力最终放弃。因为很多B端产品的数据面向的用户角色及场景都存在差异，所以在设计表格的时，我们首先需要对表格的表头（列）进行合理的排列。

如：管理员与普通用户所展示的数据内容就可能存在差异，所以需要根据阅读重点来定义表格 列的展示顺序（依据信息重要程度从左到右放置），且思考每列间的数据关系，来引导用户。

案例：运用同学常见的拉新数据，其中的数据包含：日期、渠道、新增用户数、活跃用户数、用户启动次数、累计用户数、版本信息等。

首先我们应思考运营同学关注点是什么？作为运营方案的成果数据，他们肯定最想知道是否完成KPI「是否有效获取到用户？这些用户活跃情况？哪几天拉新效果最好等」。如果我们不考虑用运营同学特定的目的，随便排列，就容易导致用户第一时间很难获取到自己想要的有效信息，极大影响阅读效率。但如果抓住了这个主要目的，对指标进行排列，那么我们表格的逻辑性便会更强，更清晰，也更加贴合业务述求。

二、【配置表头类型，提高阅读效率】

表头不仅仅有解释当前数据内容，还可以集成：批量操作、排序筛选、解释说明、分组、固定等查看操作，而这些功能均不是必要元素，需根据用户查看数据的需要（如：用户想快速找到拉新用户数最多的某天等），适当的选配。

2.1、批量操作

在展示信息的同时，可以对表格主体内容中的数据进行删除、下载等操作，帮助用户批量操作，提高效率。如：QQ邮箱我们批量删除邮件。

2.2、排序筛选

排序能让用户可以改变数据的排序，筛选则可以改变数据展示的类型，帮助用户更好的观察数据，发现数据规律。有两种形式，一种是使用上下按钮进行排序（正序与倒序），另一种是使用下拉菜单进行排序（适用于多种排序及筛选）。

2.3、解释说明

• 表头的字段名称理应简洁明了，但有时精简后的名称用户还是看不懂，这时就需要跟一个释义标识，鼠标悬停时出现该字段的详细解释，同时满足不同用户的需求。

• 有时候宽度不够，文字会溢出，则需要悬停时出现完整的字段名称。

2.4、分组

适用于多种所属关系的信息展示（如：地址>街道>街区>楼号>门牌号）

2.5、固定

固定不光可以固定 行，也可以固定 列，特殊情况可以同时固定 行 和 列。一般数据较多时，帮助用户在滚动过程中可以实时看到 行 和 列 对应的内容，提高阅读效率。

三、数据展示 —【规范展示方式，营造良好展示效果，提升数据阅读效率】

3.1、对齐方式

合适的对齐方式，能够让用户阅读时更加舒服。由于表格中的数据类型比较多，需根据数据内容选用合适的对齐方式。

• 数字：右对齐，有小数点的数值需按照小数点对齐，且数值较大时需每隔三位数使用 ， 隔开，便于用户阅读与对比数值。

• 文字：左对齐，符合人们从左到右的阅读习惯。

• 混合型文本：左对齐（混合型内容包含图片，进度，状态标签，人物头像，链接等）。

• 多选操作：居中对齐。

！！表头的对齐方式与数据展示的对齐方式必须保持一致，这样能够统一整个表格的表格对齐方式，便于提升阅读与对比的效率。

• 数字：数值、金额、比率

• 文本对齐：纯文本

• 文本：判断性文本

• 文本：时间日期

• 混合型文本：状态标签、进度条

• 混合型文本：人员（单人、多人样式）

• 混合型文本：操作

• 混合型文本：显示/隐藏

• 混合型文本：评价

• 可操作：多选

3.2、数据多层级

在复杂的表格中，由于数据量较多，并且数据有层级关系，所以会对数据表格进行分层处理，优先展示第一层级的数据内容，将二三层级的数据隐藏起来，用户点击后再展示（如：教育类产品中题目设置 章节信息编辑 知识点编辑）

3.3、数据修改

支持直接点击内容，出现输入框后进行编辑

3.4、展示统计

方便用户快速了解总数

四、表格分割线 —【建议选用水平线、斑马条纹，阅读舒适度最高】

表格行列的分割方式有：

• 网格式：类似excel，这样的方式很好的所有 行 和 列 进行分割，但是网格很容易给人造成视觉疲劳。

• 水平线：仅对 行 进行分割，通过间距与对齐的方式对 列 进行视觉上的分割，这样的方式可以很好的对数据进行划分，便于阅读。

• 斑马条纹：通过低饱和度的颜色交替的对 行 进行分割，同样很好的对数据进行划分，便于阅读。

• 留白，不分割：直接留白，通过间距来划分，不建议使用这样的方式，因为数据较多的时候，用户十分容易将行对应错，容易造成混乱。

五、空数据

5.1、表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗或误以为出现了bug？明智的做法，是无数据时用「-」来填充显示，数据为零时与上下数据单位、小数点相同的0来显示。

5.2、表格无内容

• 没有创建诉求的，数据是系统产生的，不是由用户创建的，直接告之暂无数据。

• 是用户有创建诉求，数据是由用户或系统产生的则直接示意用户创建数据

写在最后

通过合理的组织架构和呈现方式，使原本枯燥的数据呈现出生命力，这是一件很神奇的事。而用心、规划、思考和理解人们的行为方式，围绕用户目的与实际使用场景，提供易读性高且规范表格更是需要设计师反复思考的事情！

最后感谢您看到最后，希望通过本篇文章的讲述，能对大家有所启示~~~~~~~

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

以用户为中心的设计在设计领域取得了许多突破。

它提高了产品和界面的国际标准，扩大了设计中的创意机会，并协助了近代技术的发展。

以用户为中心的设计通过创建兼顾两者的解决方案来帮助消费者和公司设计产品。

可用性是这个设计过程的最前沿。每一步都是为了最大限度地提高设计团队创造令人满意和高效体验的能力。

什么是UCD？

以用户为中心的设计是一种设计过程，旨在通过根据用户的经验和要求创建设计解决方案来最大化可用性。

它是一个迭代设计过程，在很大程度上依赖于有关用户体验的反馈和数据，以创建适用于潜在消费者和企业的解决方案。它在数字产品的生成方法中很常见，在 UX/UI 设计中尤其重要。

例如，需要创建用户友好的网站界面的设计团队将应用 UCD 设计指南，以根据用户的观点、需求和愿望生成和完善解决方案。

原型将通过质量测试，并通过反馈和对其体验和行为的深入分析与用户合作，这将影响有关产品功能的决策。

为什么 UCD 很重要？

用户体验在产品设计、网页和界面设计以及营销方面很有价值。

消费者希望他们的生活变得简单。网站、应用程序或产品的存在是为了满足消费者，因此其成功取决于他们的经验。

以用户为中心的设计方法对公司的好处包括：

1) 不断返回业务的忠实用户

2) 销售额增加

3) 开发精致、高效且易于获取的产品

4) 深入理解问题，创造优秀解决方案

5) 客户和团队之间的协作

6) 避免常见错误

7) 提高竞争力

8) 帮助他们了解他们的市场

UCD 引领产品、软件和设计的发展，使我们更接近轻松、高效。

UCD 流程

交互设计协会强调了从头到尾考虑整个用户体验的必要性，并分4步定义了以用户为中心的设计方法：

1. 了解使用环境——这部分设计阶段至关重要。我们通过深入观察和采访用户来了解他们的行为和需求。这部分过程通常由行为科学专业人士执行，他们进行专家访谈。

2. 明确用户需求——一旦更好地了解用户，设计团队就可以编制一份用户需求和粗略概念列表，以指导他们如何设计成品。

3. 设计一个解决方案——这里的重点是“解决方案”。设计某产品的目的是为问题、需要或愿望提供解决方案。设计理念必须根据研究阶段发现的内容来解决问题。

4. 根据需求进行评估——一旦有了设计原型，就必须经过一个评估过程，在该过程中分析产品对发现的初始需求的满足程度。只要有差距，产品就会经历一个迭代过程，在这个过程中，将重新审视设计以填补这些差距，直到有一个满足所有用户需求的完整设计。通过可用性测试评估设计可以清楚地了解产品与用户需求之间的差异，从而推动流程向前发展。

最大化可用性的技巧

以用户为中心的设计过程旨在最大限度地提高可用性并满足消费者。上面提到的基本四步过程是一个基础。我们可以使用一些最大化可用性的技巧来充实它。

1. 同情和理解

同理心和理解是主要在用户研究阶段使用的关键设计技术，为团队提供关键见解。

同理心意味着理解和分享他人感受的能力。这是设计思维的第一步，因为深入了解各个级别的用户体验的本质有助于设计团队获得第一手的观点并确切知道要解决哪些问题。

移情设计略有不同。它是一种以用户为中心的设计方法，明确关注用户对产品的感受。这对于包含在以用户为中心的开发过程中也很重要。人们对产品的感受在消费者体验中至关重要。

一种产品可能提供了很好的解决方案并且效率很高，但它可能缺乏与消费者的情感联系和建立关系。用户需要感受到启发、关心和共鸣，才能取得成功。这就是视觉设计可以发挥重要作用的地方。

美观且鼓舞人心的界面和品牌大有帮助，并且是通过视觉品味吸引他们并与产品建立情感关系来与合适用户建立联系的门户。

2. 明确“为什么”

设计是一个高度有意的过程。它需要被规划出来，遵循步骤，最重要的是，以与业务目标一致为指导。

设计师必须知道他们为什么要创造一些东西，以便能够克服在实施阶段会出现的障碍。每个人都需要清楚为什么设计对用户和业务都有益。“为什么”是推动发展的动力。

它需要良好的项目管理和出色的领导能力——这是设计和商业成功的重要组成部分。

3. 使业务需求与用户需求保持一致

归根结底，企业也有必须满足的要求。只关注用户会存在局限性。一旦理解了他们的需求，他们就需要考虑收入、利益相关者和设计范围的业务目标和结果。

使用户需求与业务成功保持一致归结为目标和清晰的路线图。业务需求和目标需要从一开始就非常明确地规定，具有灵活性的空间来满足不可预见的用户需求，同时仍然与业务需求保持一致。这是商业模式将有助于指导设计过程的地方。

通过确保您拥有所需的所有资源、做出并履行承诺、与整体业务保持联系以及拥有高效的项目管理和领导能力，保持业务需求得到满足是从内部的角度为项目取得成功做好准备。

4. 磨练用户反馈循环

反馈是一个基本的设计原则，在任何设计过程中都是必不可少的。

用户反馈是响应用户输入的行为。用户反馈循环在以用户为中心的设计过程中至关重要，因为它向设计团队展示了改进和重新校准的地方。

它在产品或系统的整个存在过程中都得到维护，因此在产品或系统的整个存在过程中都将依赖于用户反馈循环或客户反馈循环。

它可以采用推荐和正面评论的形式，强调产品或系统运行良好的地方，因此可以保持原样或进一步改进该区域以获得更深层次的满意度。

5. 总是迭代

设计过程是一次又一次地尝试，直到它们奏效。

正如你们许多人所知，设计过程是一个迭代过程。这是一个贯穿开发和维护的持续过程，其中产品或系统不断得到改进。生活在如此快节奏的时代，对于必须掌握最新发展和技术的设计团队来说，意味着要做大量的工作。

迭代是任何设计过程和长期客户满意度的关键部分。在此过程中，原型将在重复循环中进行测试、调整和再次测试，直到找到解决方案。

在迭代过程中，原型将经过用户测试和可用性测试。用户将测试设计、被观察并提供反馈。

6. 轻松就是一切

设计中出色可用性的关键是使一切尽可能简单易行。友好的体验是一种愉快、轻松和令人满意的体验。创造简约是一门艺术。这是一个淘汰的过程。它需要深刻的理解。以用户为中心的设计实践通过以下方式带来便利：

1) 减少用户的工作量

2) 使用简单明了的语言

3) 让用户主导并赋予他们权力

4) 简化导航

5) 使信息完全清晰，并在轻松和复杂之间找到平衡。

优秀UCD的例子

以用户为中心的设计实例无处不在，尤其是在我们今天使用的大多数知名数字产品和软件工具中。我们列出了一些品牌的例子，这些品牌通过将用户体验放在他们所做的一切事情的中心，同时与业务需求保持一致而取得成功。

苹果网站

Apple 知道如何提供出色的用户体验。他们的成功归结为可用性。通过强调设计，品牌创造的一切都以简约和美为核心，既吸引用户，满足他们，也让他们的生活变得轻松。

Apple 网站使用户可以轻松访问。它在直观、组织良好的界面上以易于理解的语言提供有关产品的详细规格。

爱彼迎

另一个用户友好的直观设计解决方案的绝佳例子，在线度假租赁市场 Airbnb 通过专注于满足潜在消费者的每一个需求，将一个绝妙的想法提升到一个新的水平，从而取得了成功。

该应用程序是个性化的，易于导航，可以轻松查找和预订住宿，尤其是具有取消和退款等功能。他们还使用视觉设计作为激发用户的一种手段。

总结

你对以用户为中心的设计有更好的理解吗？

这个概念本身很简单。并且，这个过程是有效的，你现在应该可以知道了。它需要跨学科的专家团队、深入的分析和大量的迭代。如果我们不得不将其缩小到三个要点，它们将是：

1) 通过深入研究和同理心了解用户是设计解决方案的核心

2) 简单、轻松和愉快是我们的目标

3) 需要多次迭代才能取得成功

在本文中，我们了解了UCD 的关键原则、为什么它很重要，以及针对主要用户的设计的一些技巧。希望这些内容可以帮助到你的设计。

需求：供应链系统，销售价目表需要添加价目明细。

问题：思考【添加】【删除】按钮放置位置及交互方式

思考过程：

方案一：

这是系统已有页面。【添加】【删除】按钮固定于表格右上角。

适用于数据1~10条的情况。

方案二：以【轻流】举例

【添加】【删除】按钮固定于表格左上角。

表格中有勾选框，支持【批量删除】【部分删除】

同时在表格右侧固定【添加】按钮。

当鼠标位于序列号时，出现【弹框填写信息】按钮。

弹框页面支持上下数据切换。

方案三：

【添加】按钮位于表格下方左侧，不固定。【删除】按钮位于表格右侧，固定。

适用于数据10~100条的情况。

优点：相较于【方案一】，缩短了操作路径。

缺点：不适用于表格存在分页的情况。需要每个页面存在【添加】按钮。

          不适用于表格存在横向滚动条的情况。

方案四：以【简道云】举例

【添加】按钮位于表格外下方左侧，固定。

当鼠标位于表头左上角时，出现【切换】按钮，表格会单独在一个页面打开。

当鼠标位于序号时，出现表格【切换】按钮和【更多】按钮。

点击【切换】按钮，出现【弹框填写信息】。

点击【更多】按钮，出现【删除】和【复制到最后一行的】按钮。

总结：对于在表格中编辑的样式，基于业务场景，目前都是弱化删除按钮。我更倾向于选择【轻流】的方案。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

文章定位：

好的产品能为用户带来高效的解决方案，在迭代升级中实现用户价值。

以下文章主要探讨设计师 如何从用户角度出发打造产品体验，通过设计帮助产品带来高溢价。

01、用户思维

用户思维最基本就是 围绕用户 去设计，帮助他们 解决实际问题。

Q：为什么要围绕用户做设计？

A：想将自己产品打造成为好产品，最终留住用户。

Q：什么是好产品？

A：“让产品自然生长，不要去碰用户，不要去打扰他们，让他们自然形成一种互动关系”。不要强塞东西给用户，切切实实的在用户需要的时候能快速给到他们价值，解决某个问题，或满足他们的情感，情绪。

即：帮助用户解决实际问题，并提供解决该问题的优秀设计。

所以设计师产出设计方案前需思考的是：

1. 解决什么实际问题？

2. 应该提供怎样的设计？

02、确定用户面临的问题点

解决哪些实际问题是每个案子的核心，在该阶段设计师常容易陷入误区

如：我要做 一个…东西、我要怎么怎么做……下意识的就去研究怎么做，而不是首要思考具体解决什么问题，该误区到后期往往会造成设计偏离。

为了避免该情况，首要需确定问题，并将问题清晰表述出来，表述的越清晰解决起来就越容易。

那我们应该怎么去确定这个问题呢？

– 利用同理性图谱构建用户认知

好的设计需要与用户心智相符合，贴合用户当时情境下的诉求。

为了让优化方案更有依据，在发现问题的时候，需要从用户视角出发，结合当前产品的页面去分析是否符合当前用户的诉求。

——可以采用 同理心图谱 的方式：

从 说了什么、做了什么、想了什么、感觉到什么 四个维度去勾勒用户真实的想法感受。

以下以优化案为例：

在实际优化案中，可结合需改版页面按照四个维度走一遍，可让设计师更了解当前页面帮助用户做什么，后续有哪些优化方向。

如：QQ支付页面整体流程优化设计

① 用户需给好友发红包，在输入完红包金额点击支付时，向上滑出了支付面板，用户看到这个面板时候，其心理活动可能是怎样的呢？

② 用户想要更换支付方式，点击更换后看到下方页面，用户对该页面的的感受会是怎样的呢？

③ 用户输入密码后，以为马上就成功了，却发现卡里没钱了，这时候用户更加迫切的是什么呢？

通过以上这样 【移情】的方式，使我们更能了解用户，在没有用户访谈的情况下对他们的 愿望、需求、诉求点 有个概念，当有了这个 共鸣 在后续就可以将这个共鸣变成一个有着明确优化方向的 问题陈述。

– 自问自答式推理逐渐确定问题

在挖掘用户需求点过程中，可以采用不断询问不断回答的方式，将自己脑子里想的直接写出来，通过这样的方式构建自己思考的逻辑。

如：“在下单页转化率太低 > 在下单页用户无法快速验证信息 > 在下单页重点信息不集中，其余信息太显眼 >…..”

在这个过程其实就是刨根问底的过程，在反复的试错过程中也会离真相更近。

类似下面这张Julie Zhuo的自我审视图：

03、问题陈述（POV）

– 什么是问题陈述

通过陈述句将产品当前状态（问题）和期望状态（目标）的差距描述出来。POV有助于我们强调用户痛点，保证自己将重点始终放在用户身上。

– 问题陈述怎么写

那怎么陈述才能更好的将问题及规划表达好呢？以下有两个方式：

• 基于用户角度来说：我看QQ群里抢红包很热闹，我也想快速参与进去，但是轮到我发的时候，我因为我不是非常熟悉整个流程，导致我反应慢了，这让群里的人以为我故意这么慢才发，影响大家氛围，这让我有点沮丧。

• 基于用户研究来说（4W）：我们的初中生因为特别活跃，喜欢在群里踊跃发言参与活动，所以一旦群里有好玩的消息总是想第一时间参与进去。我们的解决方案应该 为他们 提供快速能够完成红包发送的链路与方式，不扫他们的兴。

以上两种陈述方式都是针对同一个问题，只是表述方式不同。所以只要你足够专注用户，理解他们需要什么以及为什么需要，就可以快速构建你后续的设计方案。

– 问题陈述注意点

① 用户与他们的需求是问题陈述的核心，避免：我们应该怎么做、产品应该…作为开头。

② 保持陈述的宽泛性，不要过早抛出细致的解决方案、技术限制等内容，避免团队发散受限。

③ 专注一点，不要让用户的需求和目标过于宽泛，导致自己很难找到一个合适解决方案。所以不要视图在一个问题陈述中解决太多用户需求，一次解决一个就很好了。

04、如何打磨设计方案

在经过问题陈述我们对要解决的问题了然于胸，在解决方案上，设计师需要考虑 易用性、易理解性、及着力提升用户任务效率，给用户一个更好的体验。面对不同的项目，可考虑以下几点：

– 结构简洁，重点突出

例1：

该例子非常能体现出 诉求 与 解决方案 的契合。

首先工作人员唯一的目的性就是 筛查 有问题的人，所以在众多人中需 快速判断，这个转化到设计上解决方式：

通过大面积的 色块直观反馈；

通过实时的 滚动时间+滚动背景反馈真实性；

在结合下方核酸与疫苗辅助判断，整体非常贴合实际诉求，重点突出，有节奏感。

例2：

通过体验核心信息，将内容合理布局，重点突出，操作划分明确，有助于信息获取与确定。

– 管理复杂（满足不同诉求）

人的认知资源有限，天生不善于处理复杂信息，所以在面对复杂信息时设计师需将复杂的内容以一定秩序逻辑管理，分而治之，减少用户的选择，让正确的行为变得自然和明显。

例1：

在58二手车页面的改版中，可以看出在面对不同用户诉求的情况下在 模块化结构 与 坪效 找到了平衡：

顶部按钮直接 分流 不同目的用户；

中间模块展示用户 最关心的维度：价格、品牌、车类型；

下方 透出推荐内容 吸引用户往下逛。

– 注重情感化

情感化不一定都是很精美的插画、动效等表现层面上的，有时候 贴心的记录、舒缓的内容、小游戏…… 也可以起到 情绪调节 的作用，提高用户看到复杂信息的 忍耐度。

– 场景化设计（预判你的预判）

多考虑用户使用场景，挖掘一些场景是可以通过我们的设计 帮助用户多走一步，帮他们排除障碍，减少负担。

例1：

打车软件在特定时间点自动浮出目的地，以及截图后立刻打开微信聊天窗，图片自动在对话框中浮出的方式都是通过用户的行为预判了用户下一步的行为，

例2：

用户输入密码后下意识认为操作成功，但却被告知失败，对用户而言是一次打击，若这时直接前置化用户后续可能会的操作，将条路径重新接上，可以让整个过程更加高效。

所以在具体设计方案上，设计师需要不断的去思考打磨设计方案，让自己的设计：

① 显而易见的，让用户体验后觉得「没错，就应该是这样」；

② 有价值的，它为用户解决实际的问题；

③ 与用户的心理模型相符，它不意味着更多的设计。

05、验证体系

验证方式有很多，目前市场上有几大比较成熟的体验度量体系，针对不同的关注点进行 定性+定量 检测。

除去性能表现外，主要都是围绕用户行为数据及使用感受来进行度量

在行为数据上，主要关注：访问频率、留存率、页面访问次数…

在用户感受上，主要关注：满意度、用户评价、推荐度…

– 设计师怎么确定自己设计方案的验证指标

对于设计师而言，不需要做的这么全面，我们只需要针对我们 具体优化页面、场景 找到可以直接验证的指标即可。

例：

在上述的发红包支付页面的优化设计中，由于主要优化的方向是为了让用户更聚焦，提升整体支付体验，所以基于这个目的，我们可以以 整体的支付成功率 来验证大致优化效果；

其次，可以从 每个触点的转化漏斗、和 各页面停留时长 上分析具体页面改版效果。

– 面向真实用户验证设计

除去行为数据上的验证，用户真实反馈同样重要，我们可以采用用户调研的方式了解用户对产品体验的反馈，主要可以从下面三个方面执行：

① 可用性测试：可针对核心优化的功能点设定测评任务，来观察用户的完成情况，如：如果你余额不足，你会怎么做？

② 满意度测试：采用界面可用性问卷调研，可以采用SUS问卷收集反馈

③ 推荐度测试：通过NPS量表来衡量，通过将分值划分为：0~6分为贬损者，7~8分为被动者，分值高于8分为推荐者，带入计算公式（NPS值=推荐者% – 贬损者%）算出推荐度数值，数值越高，说明用户满意度越好，用户的推荐意向越高。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务