前一段时间，有一个客户（甲方主管研发工作的副总）向我提出了这个问题：如何提高公司程序员工程师的UI审美？
他们公司UI设计师只设计其中很小的一部分页面，大部分页面要让程序员自己来做的，程序员开发出的页面看起来总是很丑，这是他觉得苦恼的地方。
在听到这个问题的时候，我很惊讶，觉得这个问题真的是个好问题。我以前关注的都是设计师如何提高自己的审美？没有想过让程序员提高自己的审美。
据我了解，他们公司的程序员非常忙，比我们UI设计公司的加班程度要多很多。我首先想到的是工作都这么辛苦了，能把功能任务完成就很不错了，也许能顾上提升UI设计审美的时间精力有限。
提高审美，不是短期内能够达到的事情，何况术业有专攻，工程师们有没有兴趣和精力做这件事情，也是另外的一个问题。
但是，这是一个很好的问题，在一个软件公司里工程师程序员是占大多数的，UI设计师相对人数比较少的。如果大量的工程师能够把审美提高易用性提高。确实，这个软件的整个UI水准就会提高。
如何提升整体软件的UI设计美的水准，让软件好用又统一？
我首先想到的是制定好的UI规范，做好全流程的交互设计原型。通过核心关键场景，关键页面的梳理，整理出一套设计语言，规定好UI规范。这份工作可以由设计师来做，把所有的字号颜色使用的元素组件都确定好，关键的场景和页面做一些模板，制定一份完善的UI规范，方便工程师按照这些去复用调用，降低难度。

出现原因（Reason）：

电脑，平板，智能手机的屏幕尺寸逐渐多样化，设备类型的增长增强了网页的适配需求。
注：屏幕尺寸为浏览器尺寸的上限

自适应（Responsive）：

自适应是根据设备分辨率的不同，分别为不同的屏幕进行布局定义，创建多个固定布局，即“多套设计，多套开发”。适用于阅读类交互多的网站，如知乎官网。

响应式（Self-adaptive）：

响应式是基于同一套代码、同一套设计语言，能够兼容多尺寸、多终端设备的展示，即“一套设计，一套开发”。 网页根据显示宽度（浏览器宽度）自动调整内容，适用于企业、产品等视觉展示型网站中，信息少图片多，如华为官网。

响应式好处（Advantage）：

开发成本更低，一套代码。
设计成本更低，一套设计。
业务迭代更快，一次运营。

响应式适配原则（Principle）：

拉伸布局：内容在屏幕显示区域进行相对拉伸，已达到完整布局。
等比缩放：内容在屏幕的相对位置上进行等比例缩放，一般用于图片。
扩展布局：内容可灵活按照屏幕尺寸进行增减，扩展为多行多列等。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效表格被公认是展现结构化数据最为清晰、高效的形式。常和按钮、搜索、筛选、分页等其他元素一起协同，构成表格页。表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效。

开发做的界面和设计稿差异巨大，或者完全不是一回事，是非常普遍的现象，也是最困扰UI设计师的问题之一。很多时候设计师辛辛苦苦设计了半天，最后落地的成品货不对板，这就等于对之前设计的全盘否定，让我们产生工作的内容毫无意义的想法。

蓝蓝写
画出用户旅程图是我特别喜欢的一个工作方法，可以与产品、研发、市场团队一起共创，优化产品。
用户旅程图是一种图形化工具，用于详细描述用户在使用产品或服务时所经历的各个阶段和步骤。它能够展示用户的整个使用过程，包括用户的需求、痛点、态度和行为，以及产品或服务如何与用户进行互动。作为产品设计者，我们可以通过用户旅程图更好地理解用户需求，提前发现后续的用户体验问题，并思考如何提升产品或服务的用户体验。
用户旅程图的应用广泛，不仅可以帮助我们进行流程分析，还可以识别痛点，定义问题域。同时，它也可以帮助我们进行用户反馈的收集和整理，为产品或服务的优化提供依据。然而，用户旅程图并不是一种一次性的工具。它需要我们不断地更新和完善，以适应不断变化的市场和用户需求。因此，即使我们所属的团队没有特别完善，也许我们在很长时间内都没有运用的环境，但是不要忘记，它依然是一个威力无比的工具。
现在我们就来重温一下，这是蓝蓝设计的用户旅程图~~~

UI设计公司的用户旅程图

这是乘坐飞机过程的用户旅程图~~~

使用用户旅程图的方法如下：
Step 1：明确用户和划定用户群
首先，我们需要明确研究的目标用户和所属的团队资源情况。在此基础上，我们可以确定需要映射的用户群体，并针对该群体的特定目标和场景进行旅程图的构建。
Step 2：梳理业务场景下用户行为流程
根据目标用户的任务和行为，我们可以梳理出该场景下用户的行为流程。这个流程包括用户需要经历的阶段、环节以及交互方式等。如果涉及主次任务流程，都需要一一梳理出来，并加以归类。这个过程需要深入的剖析，尽可能找出所有用户与软件产品产生交互的接触点，以便进一步拆分出每个阶段的用户目标、操作、接触点位置、用户想法以及用户感受。
Step 3：绘制用户想法和感受曲线
在梳理完用户行为流程之后，我们需要根据调研时记录的用户反馈和情感变化，绘制出用户的想法和感受曲线。这个曲线通常采用情绪曲线的形式来展示用户的情感变化，并标注出用户的痛点和爽点。
为了获取用户数据，我们采用了多元化的数据收集方法，例如：
用户行为观察：直接观察并记录用户在各个阶段中的实际操作行为。
用户测试：通过测试用例执行，评估用户在特定任务中的操作效率、反复性以及清晰度。
用户调查：以问卷或在线访谈的形式，收集用户对于任务完成情况的反馈以及他们的疑问和不满。
热图分析：通过热图工具分析用户在界面上的鼠标移动和点击行为，以评估操作的顺畅程度。
工单与客服反馈：收集并分析用户通过工单或客服途径反馈的问题和意见。
这些数据均应直接来源于真实的用户行为和反馈，而不是团队内部的推测或分析。在整理数据时，我们需要避免主观评价和情绪化的表达，坚持以客观事实为基础，并关注以下几类关键数据：
用户实际操作过程：观察并记录用户在各个阶段的具体操作步骤。
操作效率：通过测试数据评估用户完成特定任务的效率。
操作的反复性：记录用户在操作过程中重复操作的次数和频率。
操作过程的清晰度：通过用户调查或热图分析，了解用户对于当前操作流程的清晰程度和满意度。
任务完成情况：根据用户调查和工单反馈，统计任务完成率以及未完成的原因。
用户疑问：整理并分析用户在各个阶段中遇到的疑问和困惑。
用户不满：收集并分析用户对产品或服务的不满和抱怨。
用户情绪：通过工单、在线访谈或社交媒体分析，了解用户对产品或服务的情绪反应。
Step 4：总结解决方案和新的灵感切入点
在对这些数据进行痛点分析时，我们需要对这些痛点进行系统的梳理、分级以及深度挖掘，以洞察痛点背后用户的真实需求和期望。然后，基于这些痛点和需求，识别出产品或服务优化和改进的关键机会点。

通过回答这些问题，我们可以总结出相应的解决方案和新的灵感切入点，为产品或服务的优化提供参考。
在分析过程中，我们可以采用多种方法来拓宽思路和寻找可能的改进点，例如：
行业内成功做法借鉴：研究同行业其他成功案例，了解他们在解决类似问题时的策略和方法。
项目经验总结：回顾团队历史项目中的类似问题，提炼成功和失败的经验，以便应用于当前问题的解决。
专业判断与经验联想：依靠专业知识和行业经验，提出可能的问题解决方案，并联想类似场景中可能的优化策略。
用户视角思考：换位思考，从用户角度出发，尝试理解他们可能的痛点和需求，以及可能的解决方案。
头脑风暴：组织团队成员进行头脑风暴，鼓励发散性思维，尽可能多地提出可能的解决方案。

我们的目标并非仅仅是为了制作一张漂亮的图形或者报告，而是通过这种结构化的分析方法，尽可能客观地找出产品或服务中用户体验优化的关键机会点，以便为进一步的决策和实施提供明确的方向和依据。通过绘制图表，我们可以清晰地展示整个分析过程以及结果，提供一种可视化的视角以便团队成员更好地理解和评估产品的优势与不足。
多练习~~这是一个很有效的积思广议、从多角度解决问题的一个好方法。
祝大家使用顺利~~

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

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

改版前

改版后

页面框架

1.导航菜单

用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。

1.1.颜色

导航层和内容层划分明确，从本质上讲，这两个本身就属于不同的业务模块，通过颜色的区分，是最为直接，最简单的一种方式。左侧导航为深色，能够让用户更沉浸的体验，右侧内容区都为浅色，用户在使用时能够真正做到有区分。

1.2.侧边导航

将菜单栏放置在左侧，页面布局上为左右结构，将导航菜单放置左侧固定
优点：
扩展性较强（多级导航可以流畅展示，可以涵盖很多大而全的产品）
展示灵活（侧边导 航可收折，收折过后用户的横向核心空间将会增大大，页面展示效率也会大大提高）
快速定位（视觉启始线统一，用户可以根据首字进行查找，方便查找）

1.3.图标

线性图标是由直线、曲线、点在内等元素组合而成的图标样式，通过线来塑造轮廓。线性图标具有辨识度高，清晰，简约易识别等优点，不会对页面造成太多的视觉干扰。

2.树结构

用于承载有父子关系的结构化内容，提供内容层级的展示。

2.1.组织信息

树形结构可以帮助将信息进行层级分类，清晰地展现出信息之间的从属关系。这样，用户可以快速找到所需内容，降低了在应用中迷失的可能性。

2.2.帮助用户导航

在一个页面上展示多个层级的内容，用户通过点击展开或折叠相关节点，无需频繁地跳转页面。这种设计简化了导航过程，提高了用户满意度和黏性。

2.3.左树右表

根据人的视线流和操作顺序，将树结构放置在表格左侧，先帮助用户定义表格的具体内容，后引导用户进行表格内的操作

3.表格

表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分

3.1.斑马纹表格

斑马纹表格通过交替的数据行背景，可以引导用户的视线，使得大量数据看起来更加和谐和有条理。这使得用户能够更快地找到他们需要的信息，提高了数据的可读性和扫描性。同时可以减少视觉噪音和协助对比，从而帮助用户更加轻松地浏览表格数据，降低视觉疲劳。

3.2.居中对齐

居中对齐的文字和数据在视觉上更加均匀分布，可以让用户更加轻松地浏览和读取数据。特别是在处理包含大量数据的表格时，居中对齐能够减少视觉上的拥堵感，提高数据可读性。可以使整个表格的行高参差不齐的现象得到缓解，给用户一种视觉上的统一感。

3.3.颜色

品牌色用于选中和编辑，红色用于警示和禁止操作，绿色用于积极意义的信息或者操作。控制颜色数量，且不同颜色表达不同的含义，符合用户思维惯性，具有良好的反馈作用。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

首先看我们这次改版的对象：

如何给界面做减法，实现B端设计提效效果？

光凭第一印象，整体效果是还不错的，落实到每个局部的话，布局也是合理的，可以看到是有设计的细节在里面.jpg。

但是，再多看几眼，就会发现整体的效果似乎有点不和谐，但又找不出来问题具体在哪，不知道怎么改下去。问题的根源就是 —— 过度设计。

我们强调过很多次，表盘页的设计是作品集项目中最重要的页面，因为观看者对整体视觉和设计水准的印象是通过它建立起来的，不管你分析怎么写，我们首先关注的肯定也是设计的效果。

但重要不代表需要过度倾注和堆叠视觉元素，过度的设计会让界面看起来有 “飞机” 敢，不仅不真实的印象产生了，还会显得业余不够自信。同时任何项目中表盘页过度设计都会对整个项目造成负担，后续的页面要怎么设计才能不和它产生隔阂，保持一致性。

下面，我们根据原页面进行分析，来找出问题并优化：

问题 1：导航栏的图标

导航的顶部 LOGO 描边没有太大必要，以及图标的设计在这个尺寸下非常的局促，因为细节较多，不仅复杂性提升了，也缺乏图形辨识。

所以改动中，将多余的背景去掉，再简化图标本身的样式。

如何给界面做减法，实现B端设计提效效果？

问题 2：顶栏的设计

顶部栏本身设计单看是没有问题的，但是作为全局栏目和导航栏颜色缺乏区分，而且用了投影来强化层次，就让这个模块的权重被过度放大。

所以我们去掉了背景色，并适当增高栏目的高度，让局部更舒展。

如何给界面做减法，实现B端设计提效效果？

问题 3：统计数字的问题

统计数字在作品展示里用特殊字体很常见，因为要用更美观的字体来呈现重要的信息。但任何页面中的信息权重都要保持阶梯性，不能让加粗、深色、特殊字体几个要素作用在过多的信息上，这就让画面显得非常的“吵”。

所以要对字重和色彩做控制，创造对比来降低视觉的压力。

如何给界面做减法，实现B端设计提效效果？

问题 4：图表的应用

原图中的图表应用有一定的问题，第一个柱状的堆叠类型并不是太符合实际数据应用，下方的环形图中起始位置显然不对，并且色彩比较混乱。

所以是答案对它们做出优化，并调整了一些小细节。

如何给界面做减法，实现B端设计提效效果？

问题 5：配图类型选择

在引导卡片中，用的扁平插画素材一方面不高级，另一方面内容太碎，再加上用奇怪的字体和倾斜，使得这个卡片看起来非常别扭。

改动中替换新的图片素材（临时找的，理解意思就行），同时使用一般黑体的标题，以及增加背景色，来形成新的卡片样式。

如何给界面做减法，实现B端设计提效效果？

问题 6：装饰图标应用

在快速入口和日程模块中，都有使用装饰图标，显然大家也能理解他们对于目前的语境来讲还是细节过多了，所以需要做一些调整，让它们简化。

如何给界面做减法，实现B端设计提效效果？

最后，再加上一些细节的小改动，最终的样式就完成了。

如何给界面做减法，实现B端设计提效效果？

表盘的设计一定要在最后做检查，一些设计感强的元素是否有必要这么做，尤其是类似图标元素，做得很花哨是否对信息的识别能带来帮助？如果不行，那就可以果断的放弃。

表盘页的设计感来自 —— 全局元素和色彩的控制，而不是单一某个局部内容的加强。

文章来源：优设
作者：酸梅干超人

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

人工智能的崭新概念正在逐渐改变我们对设计的认识和实践方式。在这个数字化时代，AI不再仅仅是一种辅助工具，它已经成为设计师的得力助手，能够提供更高效、更智能的设计方案。在B端设计视觉中，AI的应用为我们开辟了一条通向更优质设计的道路，本文将深入探讨如何借助AI技术，辅助设计师完成B端设计视觉。无论你是刚刚踏入设计领域的小白，还是经验丰富的资深设计师，都可以利用AI工具来提升设计效率、优化视觉效果。

从几个月前AIGC的兴起到现在，各行各业已经有许多团队将之运用在工作流程当中。其中，Midjourney的到来，不仅在一定程度上提升了设计师们的工作效率，也为设计师提供了更多设计方式上的可能性。其快速出图的特点帮助设计师节省了设计初稿的时间，可圈可点的画面构图与光影关系又给设计师带来许多灵感与参考。那么，到底该如何运用Midjourney来帮助我们将一个项目落地呢？本文将以一个大型活动的主视觉设计案例，解析如何利用Midjourney，来帮助我们从最初的构思到最后项目落地。