昨天产品经理训练营的课讲的也很棒，今天是讲营销，甚至比得红点奖的设计师讲座人还要来的多。营销大于设计，有广泛的受众。[呲牙]
我启发很大的一点是：凡事要从目标用户的角度去思考，定位要准确清晰，思考目标用户的需好需求，而非仅仅是自己的专业和能表达的东西。同学之间互为老师，同学们都很棒！把那些那古代的，最顶级的高人、牛人、圣人、伟人把它们挖掘出来，列在你的本子上，或者找出他们的画像，挂在墙上，挂在你的卧室里，挂在你随时看得见的地方。一有空你就研究他们说过什么话，他们最困难最低谷的时候是怎么度过的?他们看过什么书，他们学习过什么知识，他们年轻时候的榜样都有谁。不管他们离你几千年，还是离你几百年。你只要这么干了，你只要足够的诚心求教，放心好了，你就一定可以在跨时空的隧道里，让你感受到这个正向能量，让你充满力量，充满浩然之气，让你拥有源源不断的人生智慧，敬畏之心，感恩之心，知行合一，也要像礼物一样出现在他人的生命里。

今天是十月16号，周一，简直是被梦想叫醒的，六点多就起来了，五点多就想着公司的一些事情该怎么做才好呢？一件一件的在脑海里晃悠，那还是起床好了！昨天和同学聚会，收到一个同学的启发，他攒鸡毛凑掸子都要出书了，我平常也喜欢碎碎念的写一些东西，只是写的多在自己的自留地里面，关于生活，关于孩子，工作感悟种种。这次我准备写一个公司工作的方面的成长日记，把我们工作中遇到的方方面面的问题记录下来，作为一个回顾，给客户一个了解我们的途径。
我们公司成立已经是十二年了，中间也经历了许许多多的事情，我们也一步步的在长大，在成熟。要做小而精的公司，是一开始就想好的，就像我们公司的名字，兰亭妙微，取自兰亭序，群贤毕至，很开心的在一起做点事，妙在精微。

兰亭妙微，取自兰亭序，群贤毕至，很开心的在一起做点事，妙在精微。

人心惟危，道心惟微；惟精惟一，允执厥中。这十六个字源于尧舜禹禅让的故事。人心是危险难安的，道心却微妙难明。惟有精心体察，专心守住，才能坚持一条不偏不倚的正确路线。人心惟危，道心惟微；惟精惟一，允执厥中。人心惟危，道心惟微；惟精惟一，允执厥中。这十六个字源于尧舜禹禅让的故事。人心是危险难安的，道心却微妙难明。惟有精心体察，专心守住，才能坚持一条不偏不倚的正确路线。人心惟危，道心惟微；惟精惟一，允执厥中。这十六个字源于尧舜禹禅让的故事。人心是危险难安的，道心却微妙难明。惟有精心体察，专心守住，才能坚持一条不偏不倚的正确路线。在一个公司的成长中，不贪心，唯精唯一的提升自己的公司实力，处事公允，是多么重要的事情啊。

心是幽微难明的，坚持追求“诚”，持之以恒地去修炼。

我们不追求公司的大，就顺其自然就好了。能够像尧舜禹禅让一样，做一个能够传承的公司，一代一代有接班人，有做事的道德良心，能够给客户好的价值，就这样平平常常就很好。
所以今天我就开始记录这些日常啦。

要做一个好的UI设计公司,不仅要在能力上设计能力一直（十几年几十年）保持优秀稳定的保持输出，以及心态的平和宽广。创始人对做公司要有信心，合伙人之间要同甘共苦，遵守规则，做好表率。
只要持之以恒做好这些，不断学习。创业其实也不难。
贪嗔痴慢疑，是人性，
善良信任利他尊重包容也是人性，
一个公司能几十年长盛不衰，那不仅仅只是设计能力好的问题。
我们在这个过程中也完成了对自己的修炼。

2.全流程设计包括有什么主要内容和步骤？
1）明确设计目标，聚焦设计要解决的核心问题
2）明确目标用户，要明确产品价值要解决的用户群体，描述用户画像，提炼用户场景，挖掘用户需求。
从产品应用的具体场景，来研究和理解所涉及到的产品体验问题。这些可能是产品中已经出现的体验问题，也可能还包括有未满足的用户需求问题。通过不同的用户研究手段，了解已有的用户行为和使用习惯，进行策略分析，改变原有业务逻辑不合理的操作路径，进而提出有针对性的交互设计和视觉设计解决方案。
3）明确资源配比，了解技术方案，进行设计预估
通过项目启动会了解产品的功能列表和产品规划，避免做出现有功能相冲突/重叠的设计，进行合理的设计预估
4）确定方案流程，确定设计方案
方案流程可以是流程图也可以是交互原型图。最终完成的是高保真的交互原型、可交付开发实现的UI demo。在以最终的结果进行专家评审，确认无误后，进行可用性测试。
5）数据对比分析
在有条件的情况下，需要对于设计前后的数据进行对比分析，对比前流程与现流程的差异，关注某流程的耗时和步骤。大部分B端产品的设计初衷就是为了某业务流程的降本增效。关键就看设计的产品，在上线后给公司的降低了多少的成本，提高了多少的效率。所以成本和效率也是设计的产品是否合格的关键因素所在。B端产品设计可以进行用户可用性测试，了解设计带来的实际收益和效果。依托数据合理改正方案。

前一段时间，有一个客户（甲方主管研发工作的副总）向我提出了这个问题：如何提高公司程序员工程师的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设计公司的用户旅程图

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

使用用户旅程图的方法如下：
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咨询、用户体验公司、软件界面设计公司

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

蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

banner插画组件化设计—效率提升篇
李瑞昊

插画在互联网行业设计中有着大量地运用，合理地使用插画不仅能够增强视觉感染力，塑造品牌认知，而且可以提高用户活跃度和活动转化率。组件化设计可以解决插画风格不统一以及设计产出效率低，缺少情感化设计等因素。

[
(http://www.lanlanwork.com/blog/content/uploadfile/202308/e7181692615358.png)]

(http://www.lanlanwork.com/blog/content/uploadfile/202308/982b1692615532.jpg)