202109 - 设计每日一贴---北京兰亭妙微/UI设计公司

082021-9

交互设计师该如何高效地分析问题

ui设计分享达人

一. 明确和理解问题

明确和理解问题就是要看透这个问题的本质是什么，明确要解决这个问题可以用到的资源都有哪些。

理解问题的重要步骤：1.问题痛点梳理；2.产品功能流程图梳理；3、用户画像分析；4.数据分析（热力分析、留存分析、事件流分析）

二. 拆分问题

拆分问题就是问题痛点的出现核心问题，拆分问题涉及的维度的关联性拓展有哪些。

拆分问题的重要步骤：1.用户的核心行为路径分析；2.功能头脑风暴；3.解决方案的探讨

案例：配送管理的业务组件【打印交互组件重构】

【背景】

配送的打印功能主要服务于行政管理人员，每天对配送模块的订单和司机管理，进行打印操作，打印前会频繁配置不同打印需求

【现有问题】

1、满足功能上，体验上缺乏引导，导致用户学习成本较高；

2、历史包袱，随着功能需求不停迭代，功能层级划分混乱，导致用户操作理解时间成本较高；

【前期准备】

理解问题模块—问题的梳理：

交互上：操作复杂，交互组件错误使用，体验感差，难用

功能上：功能臃肿，层级划分混乱，难理解

【理解问题模块—功能流程图梳理】

【解决问题模块—数据分析（热力分析、留存分析、事件流分析）】

1.热力分析（GIO）

配置的需求基本上30天数据反馈可以看出，没必要进行“配置页”为主路径。

这里可得出：是否存在每次打印设置的需求，为以后的交互迭代提供快捷配置的可能性。

2.拆分问题—用户的核心行为路径分析：

主路径：查看列表——批量打印——打印完毕（80%）

特殊：查看列表——批量打印——设置模版——打印完毕（20%）

3.拆分问题—解决方案的探讨：【核心：以人为中心解决问题】

交互上：操作复杂，体验感差，难用

功能上：功能臃肿，层级划分混乱，难理解

【功能层：功能梳理重组】

【交互层：信息关联】

1.交互关联性更强，现在是联级反馈，解决点击一级内容不知道二级内容的编辑的可视区域；

2.功能信息更直观，布局界面可看出功能逻辑，勾选后及时反馈，解决经常忘记勾选打印的选项；

【方案输出】

方案一：配置页的构想，假设在设置模块有单独承载打印配置的区块，而当前对话框的勾选内容是便捷选项，如需要更深设置，需跳转到打印配置区块

方案二：列表的打印功能添加，全局设置，与当前对话框选择设置进行协助配置，如：列表全局的打印功能设置“不再弹出窗口”设置，点击当前的对话框，是直接打印操作

【可用性测试】

采用行为观察法。

【迭代成果】

迭代前迭代后

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

文章来源：站酷作者：麦海欣

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

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

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

评论(0) 浏览(1621)

082021-9

一、社会背景 Social Context

2020年因为疫情，让协作、云端、即时通讯、远程会议、AI智能等等，成为了远程办公的必需品。目前，疫情在国内已经获得了控制，后疫情时代已经到来，许多最初没有的习惯，在发现新的工作模式更加有效率后，也即继续保留了下来，这些保留下来的习惯，也将在2021年会更进一步的发展。

1.大厂的变化

在视觉设计层面，个大设计语言陆续推出了新的设计版本，更为突出个各自设计风格，以建立自己的视觉护城河，谷歌发布了 Android 11，Apple发布了 IOS 14，微软持续宣传他的 Fluent UI 设计理念，在国内的办公领域，腾讯文档推出了类似 Fluent UI 设计理念风格，石墨文档依旧保持独特的东方韵味，飞书发布了飞书文档，继承飞书本身简洁的 UI ，以及活泼的插画风格。

谷歌的 Aandroid 11

基于 Material Design 设计的 Android 11 ,装饰上运用简洁的几何图形，UI 细节上开始趋向圆角的运用，色彩方面选择了更为协调的配色，对比之前版本纯度有所降低，显得更为高级。视频链接：file:///Users/javascript/Desktop/0bf2miadcaaa7eamerkc6fqfaywdgfraamia.f10003.mp4

苹果的 IOS 14

UI 设计延续原有的风格，清晰的字体，大圆角的运用，加上丰富的动态效果，并且新增了许多贴心的新功能，例如悬浮播放视频、主屏幕的Widget。

微软的 Fluent UI

这是微软为跨平台，而提出的设计解决方案。支撑设计概念的关键词有深度、材质、动画、光线等等，这听起来感觉与 Material Densign 特别相似。不过在最终的视觉呈现上微软会更接近于真实世界。例如，透明的毛玻璃效果，或更为立体的图标等。

2.社区中的热门设计

Behance 和 Dribbble 在2020年出现了许多以 3D 插画为主视觉的设计方案，因为技术的发展，设计师借助 Figma 或 Dimensions 就可以轻松的创作所需的 3D 素材。关键的这不是设计方案中的“花瓶”，因为在Mac的最新系统 Big Sur 中，已经开始运用了 3D 的图标，相信在以后的 3D 的运用场景将会不断的被挖掘出来。

2020年初时在Dribbble流行起来的一个风格叫“新拟态”，这是将投影运用到极致后出现的效果，正如作者所说的：让我们想象一下，如果在移动界面设计中，投影的形式发展的更好的话，那将来的界面将会是什么样子的，这是我的愿景”。新拟态在视觉上表现确实很惊艳，为此Aandroid还制作了一个新拟态的12宣传视频，但是主观感觉这应该很难广泛运用到实际产品当中。

二、UI设计 User Interface

1. 设计服务与内容

设计专注于表现内容，这是从包豪斯到现在一直遵循的规则，而这个理念也将会持续下去。设计目标终将是需要把关键信息传达到用户手中，让用户知道自己为什么在这，这里有什么，并且能到哪里去。

技术的发展，形式也一直在发生变化，提升信息传达效率，这已经不单是平面设计专属。学会运用动效，交互或智能推荐等综合的方法，来达到设计目标，会是将来常用的设计手法。

2.更大的圆角

在以前由于屏幕分辨率太低，窗口四角正常会运用直角，因为圆角会出现锯齿或者模糊，影响界面美观。而现如今移动屏幕质量早已超过纸媒的印刷技术，圆角也开始被广泛的运用。另一方面圆角在之前的认知中，是儿童的专属，是更为亲和力的表现形式。而经过几年的发展，这个偏见正在慢慢改变，因为圆角也可以做的很高大上，也能设计的很潮流。

苹果总是第一个吃螃蟹的公司，Mac 的最新系统 Big Sur 整体变得更加圆润，窗口四角从以前的 10px 增加到 20px ，并且全新的控制中心也沿用了 IOS 14 的设计风格和设计布局。值得在一提的是，微软 Win 10 的概念稿中也开始尝试运用起了圆角。所以这个趋势是蛮值得关注的一点。

3.用有含义的插画提升用户体验

设计师常常会陷入形式主义，而忽略了本该表达的内容，特别是在插画上。也许这个道理每位设计师都懂，但为何还是会前仆后继的扑倒在自我满足的陷阱中呢？也许原因中会有一点是，当内容过于直接表达，或者元素过于普通，就很容易让作品变得毫无趣味，这就是矛盾所在了。

那如果设计师既不想脱离内容，又不想设计出乏味的设计，怎么办？这就需要让插画具有含义，而不是沦为纯粹的形式。优秀的插画多承载的信息量，能够远比文字或界面UI来的丰富。

4. 新材料新拟态

包豪斯有个教学目标，“培养感觉清晰，认知准确的设计师”。因此在包豪斯的基础教学中，会让学员研究各种材料的不同属性。在 UI 设计当中，我们也能制作出各种各样的材料，在拟物化的时代就能证明这一点。但在 2020 年初时，当某位设计师发现了一种新材料，并把这种材料运用到了 UI 设计当中，一时间火爆整个社区，这就是上面提到的“新拟态”。

这世界是充满可能的，所以我相信在未来还会有更多的材料会被发现，或者被以新的方式使用。例如，在 2020 下半年又有一种风格开始回归“毛玻璃”，其中我们所知道的钉钉，在钉钉 6.0 的设计概念中就融入了毛玻璃的效果。在社区中，毛玻璃也被运用到 UI 的各种场景中卡片、弹窗或图标等。实话实说，毛玻璃的材质的确能增加许多品质感。

5. 自然的界面和运动效果

这里所说的自然，是能让人感到熟悉和安心，是以人为本的设计。王敏老师说过：“科技求真，艺术为美，设计从善，设计可以作为结点，让真善美实现统一。”链接人与产品之间的纽带是 UI 界面，它需要承载不仅是信息内容，还有用户体验，因此，以人为本的设计终会赢得用户的喜爱。

自然运动效果，不是那种大开大合的炫酷效果，而是让界面过渡更为自然合理。想要让界面体验更为自然，那必然要遵循真实世界的物理规则。例如，重力、摩擦力、向心力、浮力等动态效果。

6. 来自未来的风格

科学技术的快速发展，让我们感觉未来近在咫尺，但又十分迷茫不知何去何从。我相信承载UI的媒介，必然不仅仅是现在我们所使用的各种设备。VR、AR 或全息影像等技术发展，将使得UI设计会有更多的可能性。赛博朋克2077也许真的离我们不远，那种满世界无处不在屏读的社会，怎样的设计才能真正满足需求呢？这是我们需要长期思考的问题。

7. 深色模式

在2020年各大厂都推出了暗色调模式，这已成了如今APP的标配。除了深色模式外，以后还会在可视性、场景和现实成本等因素方面，更近一步的打磨。

三、插画风格 Illustration

1.更具装饰性的平面插画风格

虽然在 2020 年不管是社区，还是实际项目，许多设计师都开始热衷于 3D 插画，就连苹果微软也不例外。但是 Google 却继续坚守自己的设计风格，扁平的装饰性插画，例如 Android 11 就运用简单的几何图形进行装饰，相关的插画也是更多运用的扁平风格，这种坚持必然会有其重要的原因。

装饰性插画在各种屏幕的适配性更广泛，并且在绘制成本和实现成本方面也会更有优势。在屏幕媒介还没发生颠覆性改变前，我认为扁平的装饰性插画在未来将还会大放异彩。

2.情感化的插画设计

后疫情时代的远程办公，我们需更加考虑如何缓解合作的疏离感。如何拉近人与人之间的协作，打破远程的空间桎梏，让合作更具沉浸感。这时情感化的设计就能充分体现它的价值，例如，这几年开始火的 emoji 头像，或者各种表情包，它们让沟通的双方产生情感共鸣，而不是面对着冷冰冰的屏幕。

3. 插画的组件化与创新

皮克斯运用技术的创新，提升了质量和效率，从而改变了整个动画的历史。对于我们来说，未来的插画需求会越来越多，并且还要求独特的创新性，这就需要有更优的解决方案。

Ant Design 的 HiTu 在 SEE Conf 的时候提出了解放图形化生产力，那就是将插画各部件组件化，这有效的提升插画效率。然而在插画库的维护方面，还需要设计的创新。因为效率的提升，让设计师能有更多时间，专注于更有创造性的工作，然后将新的创意理念融入部件，最终完善整个插画组件库。

四、交互方式 IInteraction

1. 多屏协同办公

凯文凯利在《必然》里讨论了关于未来的生活方式，他认为我们的未来环境会充满各种屏幕，它将会在各种事物的表面出现，屏读会从我们起床开始到晚上睡觉，一直出现在我们视野中。如今的人们每人都有各种各样设备，因此，多屏协同办公是必然的趋势，不管你是与人合作，还是独立工作。

万物互联已经是很久的话题了。在 2020 年华为的鸿蒙系统，发布了跨设备进行的分布式交互，实现了多屏协同。我感觉，这将是很重要的一步。

2. 秒验身份认证

身份认证是信息安全最关键的一步。我们通常会用身份 ID 加密码进行登录，并且为了验证你不是机器人，还会加上人工输入验证码，如果再有其他的设置选项，那我们的登录交互就会被拉的很长，有时还会出现登录失败的情况。在如今浮躁的社会，许多用户也许在前几步就已经失去了耐心。

移动设备拥有有丰富的传感器，并且精度也在逐年的提高。随着指纹、面部、虹膜等等技术成本的降低，这些技术也开始越来越普及化。如今使用新的识别技术，很轻松就能完成各种身份认证。

3. 单手交互的挑战

当年乔帮主一直坚持的单手操作，而如今，手机屏幕逐渐越来越大，单手操作已是一种奢望。为此，各手机品牌想方设法的改变交互方式，为的就是能实现单手操作，并且为此作为宣传的噱头。iPhone 轻点两下 home 键或向下轻滑虚拟 home 键，就能让整个内容向下移动半屏，从而方便单手操作顶部功能。

想达到目标的第一步，就是办法让拇指能触及到功能。但我们还需要进一步思考的是，拇指本身的灵活性并不高，并且也只能是单点触控，那怎样的交互形式能满足日益复杂的交互需求呢？

4. 折叠屏

屏幕可拓展，将会是移动办公的重要转折点。不管是需要长篇编辑的文字，还是画板无限大的表格，或者是需要强大美化功能的演示，这都需要足够大的屏幕才能有更优的体验。折叠屏的出现让手机能代替平板，满足更多使用场景。折叠屏目前由于成本的原因，在大众眼中还属于新事物。但我相信成本在未来不会是问题，更重要的问题是，屏幕形式的变化，对于交互来说将会有哪些影响，并且如何挖掘其中真正的潜力。

五、技术升级 Iechnology

1. 关注隐私保护

自 MIUI12 隐私功能发布后，APP 访问隐私频次大幅下降，这使得应用的行为越来越规范，也因此获得了用户、国家相关机构和媒体的认可。

在凯文·凯利的《必然》中描述了这样的一个未来景象，我们的各种状态将会被设备所跟踪，大到你的地理位置，小到你的心跳，你所经历的一切都将被上传到网上，设备能通过对过往的分析，给你推荐各种商品或服务。这很美好，但同时也存在许多风险。在《窃听风云》的电影情节中，就是由于先进的窃听技术，造成了各种无法预估的灾难。所以这是一把双刃剑，在技术进步的同时，我们也需要时时刻刻关注隐私的保护。

2. 智能自动化办公

在 2019 的 Google I/O 大会上，Google Lens 展示的 AR 点菜功能可以智能识别用户扫描的菜单并将美食网站上的相关推荐直接呈现在屏幕上。当识别到小票信息时，可快速提取小票上的金额，且可自动弹起计算器快速帮助用户计算人均消费，节省人工计算的时间成本。

在办公场景下，如何帮助用户减少无谓的工作，让更多精力专注于内容。把排版规范、素材提取、文件管理、功能查找等琐碎的事情，交给人工智能来完成。在以前工业时期有机器的赋能下，人们的生产效率进行了一次飞跃，而下次的效率提升将会是人工智能。

3. 脑机

是否希望自己学会“量子阅读法”呢？也许 5 分钟实现十万字快速阅读不是梦。Neuralink 发布了 Link V0.9 版的脑机接口，并且已经在动物上进行实验，他们通过把一块微芯片植入猴子的大脑，然后让其通过意念玩电子游戏。虽然这产品在人类普及的概率几乎为零，但是这也算是人类向前迈出了一大步。

这只是一个开始，未来的设备将不局限于可穿戴，而会是与人体紧密相连。或许可以想象一下，在未来人们会像在医院预约挂号一样，在科技公司楼下排队更新升级身体里的“机械器官”。

4. 虚拟现实&增强现实

如果要说接下去哪个技术变革，将对我们生活工作产生重大影响，我认为将会是 VR 和 AR。在沟通方面，体验将会变得更为真实。远程沟通常常效率很低，其中很重要的一点是空间的距离感，而空间的距离会产生双方链接的不稳定性，因为双方无法达成眼神、肢体等信息的交流，有时候一个眼神或者动作就能完成的事情，需要反复的语言交流，甚至会陷入各种尴尬的境地。

除了沟通之外，在工作、生活、学习等领域，VR 和 AR 也将会有更多可能，媒介的属性不再是二维平面，而是三维空间，这使得它能提供更为沉浸式的交互体验。

5. 5G 运用

依稀记得上大学时 4G 时代的到来，旁边的人都在说网速多快多快，听歌看视频一点都不卡。

而如今 5G 开始普及，网速也再次提升，但外界对其的评价褒贬不一，其中最为常见的话题就是“5G 对我们的生活将会有什么改变呢？”，有人觉得它只会提高我们每个月的话费，也有人提出 VR/AR 全景直播、高清远程会议、无人机作业、自动驾驶等技术将会更为成熟。

不管如此，5G 在 2020 年度过各种坎坷，最终普及到我们每个人身上。5G 对许多领域都会有质的影响，特别是依赖网络环境的场景。其中就有办公领域，大文件上云、协同办公或远程会议，5G 将会给这些场景提供更好的体验，也会让更多可能变为现实。

这篇文章是对当下的思考，也希望能对 2021 年的工作带来些许帮助。在这过程中越是总结，越是对未来的趋势感到迷茫，一篇文章并不能囊括所有内容，不足之处也希望理解。在未来或许会有数不尽的黑天鹅，也可能因为技术爆炸，使得新的潮流突然的兴起，未来是无法预测的，所以，就让我们一起拥抱变化吧～

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

文章来源：站酷作者：篮子瑶

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

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

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

评论(0) 浏览(2168)

082021-9

如何与利益攸关方合作进行医疗设计项目？

ui设计分享达人

一些有用的建议和工具帮助你与患者、医生、医院管理人员和其他医疗保健利益相关者一起进行设计。

近年来，医疗保健组织开始使用“设计师”方法进行创新，以提高患者和护理人员在设计和提供医疗服务的参与度。然而，将设计方法引入医疗部门也是困难重重：思维方式的差异可能导致双方关系紧张，同时我们仍需要提供更多的证据，证明设计实践会给医疗保健部门带来更多的价值。

1.调整所有人的目标

在处理服务设计项目时，无论是参与式还是共创式，我们需要从一开始确保所有利益相关者的目标和期望一致，以促进合作顺利有效，产生有意义的成果。

所以我们可以用到Expectation Map或者the Alignment Canvas这两个工具可以帮助理解人类的愿景和优先排序，从而使团队对项目的理解同步起来。

这两个工具在项目初期调整成员目标，构想用户对服务的期待，建立同理心，全面地呈现了不同的观点。

这个工具包提供的帆布是个简单的表格，帮助确定每个涉众的价值和目标，突出公共点和交叉点，利用不同角色不同价值的可视化卡片填充画布。

建议

-每个利益相关者可以从卡片中选择自己的价值观或添加价值观，讨论相同点和冲突点，制定共同目标。
-如果项目涉及三个以上的利益相关者，可以采用相同的概念模型来反映所有价值观和共同点。

2.了解项目生态系统

医疗服务中有各类行为者，行为者之间以及行为者与用户之间存在特殊的关系。因此，我们必须清楚当前设计服务的影响人，以及影响程度。

使用利益相关者地图反映不同行为者的角色和责任，以便更清楚地了解你正在设计的服务生态系统。

利益相关者地图不仅有助于可视化服务系统和用户体验中的不同利益相关者，还可以可视化相关者与主要用户的互动程度。这个模版将医疗领域的利益相关者分为三类：医疗经营者，辅助人员和大型病人群体。

建议

-将代表主要用户或利益相关者的行为者卡片放在中心位置。
-将行为者卡片按照利益相关者群体进行分类，并将卡片放在画布的相应区域。
-将那些与主要利益相关者互动程度较高的行为者放在内圈；除了医疗系统外，还要考虑的更广阔的生态系统。

3.反应不同的用户类型

研究项目背景，收集服务生态系统中人们的行为、动机和特点等第一手资料。构建角色有助于更好地了解设计医疗服务中的病人和医生（或其他医疗经营者）的需求、习惯和态度。

为了更好地促进这一阶段的分析，工具包中的角色模板记录了病人和医生简历上的一些具体的医疗信息，如疾病类型和医疗知识。

建议

-对于病人角色，首先选择病人和疾病类型。
-对于医生角色，首先选择医生简历，记录痛点。
-利用卡片，选择与角色互动的环境和行为者，喜欢的互动渠道，价值观和经历的情感。

4.分析经历构想更好的服务流程

我们都清楚，用户旅程是一个强大的工具，能够绘制服务体验，包括现有服务和待设计的服务。

我们也可以与病人或医疗行业的其他利益相关者共同绘制用户旅程，建立对用户体验的理解。

你也可以直接与利益相关者合作，确定具体痛点和在服务中可能造成摩擦的其他因素。

这套工具所建议的医疗旅程图可以用来分析病人和/或医疗操作者的体验并进行可视化，涉及到体验的所有成分：角色，行为，方式以及在接受或执行医疗服务时所经历的感情变化。

建议

-写出用户旅程地图需要的人物简历。

-卡片用为触发材料，促进病人和医疗相关人员分享经验，讲述故事。

-选择每个动作所经历的情绪，并将其垂直投射在相应的动作上。

-患者的用户旅程可以按照整个治疗过程绘制，有助于理解不同医疗步骤之间和相关部门之间的交叉点，以及可能出现的问题，形成一个全面的体验观。

5.通过评估确定想法的优先性

在建立背景框架，分析了观点和体验之后，我们开始设计解决方案。让不同的利益相关者参与概念生成，方便作出改变或促进相关方接受新服务。

一旦确定了解决方案，接下来就要挑选最有潜力或最合适的解决方案，这项任务也十分困难，尤其是在复杂的环境中，比如与医疗有关的环境中。

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

文章来源：站酷作者：马克笔设计留学

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

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

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

评论(0) 浏览(1612)

082021-9

Conflux智能合约——1.入门篇

前端达人

Conflux移植了EVM，兼容以太坊的合约虚拟机，使用solidity作为合约语言。所以，开发需要使用remix进行合约十六进制码的生成。

Conflux合约需要相应的sdk部署到链上，形成智能合约地址，再使用call或send的方法，调用在链上的合约。

我们使用node.js作为开发环境，需要安装node.js的环境和java sdk。node.js使用express框架，而合约部署需要对应的 js-conflux-sdk（npm install即为最新版）。建立文件夹sol，存放下面的.sol和两个.json文件，其它安装和检查办法略去2000字。

remix下删除所有的原来.sol文件，添加自己的test.sol文件，代码：

pragma solidity ^0.5.0;

contract Counter { uint public count=0; event SelfEvent(address indexed sender, uint current);

    constructor() public {
    } function inc(uint num) public returns (uint){ return count += num;
    } function self() public { emit SelfEvent(msg.sender, count);
    }
}

然后按图示选择配置，完成编译，分别生成一个abi.json和一个bytecode.json。

将bytecode文件里的bytecode字段保留值，其余内容都删除，另存为code.json。code.json内的内容仅为：“0x60.......”。例如：

"0x6080604052600080553480156100145......5056fea265627a7a72315820b814......0ff600baf64736f6c63430005110032"

写调用合约的代码deploy.js或者call.js。deploy.js 源码：

 // 私钥地址,即所用conflux的钱包私钥，注意保密 const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e'; // 合约地址 const CONTRACT = ''; const { Conflux } = require('js-conflux-sdk'); async function main() { const cfx = new Conflux({ // 节点的地址和端口号，这里用的测试网。实际最好用最新的主网地址 url: 'http://testnet-jsonrpc.conflux-chain.org:12537',
    defaultGasPrice: 100,
    defaultGas: 1000000,
    logger: console,
  }); const account = cfx.Account(PRIVATE_KEY); // create account instance console.log(account.address); // create contract instance const contract = cfx.Contract({
    abi: require('./sol/abi.json'),
    code: require('./sol/code.json'),
  }); // deploy the contract const contractinfo = await contract.constructor()

    .sendTransaction({ from: account,

      gas: 100000000, // if not set gas, will use 'cfx.defaultGas' })
    .confirmed(); console.log(contractinfo.contractCreated);
}
main().catch(e => console.error(e));

而call.js源码：

 const { Conflux, util } = require('js-conflux-sdk'); // 这个地址是上面打印出来的 contractAddress 变量，钱包地址及私钥 const contractAddress = '0x2c692d83b1e4781fa9d894924f8a027c401ea9fa'; const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e'; async function main() { const cfx = new Conflux({
    url: 'http://testnet-jsonrpc.conflux-chain.org:12537',
    defaultGasPrice: 100,
    defaultGas: 1000000,
  }); const contract = cfx.Contract({
    address : contractAddress,
    abi: require('./sol/abi.json'),
  }); // 不进行记录。注意，这里的inc就是定义在test.sol中的方法。.sol文件定义合约方法，被外部调用以实现应用目的 console.log("1输出" + await contract.inc(10)); const account = cfx.Account(PRIVATE_KEY); // 进行记录并花费燃油 const balance = await contract.inc(10).sendTransaction({ from: account }).confirmed();

}
main().catch(e => console.error(e));

call.js里的inc()就是定义在test.sol中的方法。.sol文件定义合约方法，被外部调用以实现应用目的。

将deploy.js和call.js放置在nodejs的工作目录下。

如果.js中的函数无错，链上节点正常使用，sdk版本匹配，启动node deploy.js或node call.js即可。如果有错误会有明显的error提示。

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

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

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

评论(0) 浏览(3127)

082021-9

超级实用的干货 . 《部署智能合约到conflux公链》

前端达人

找到了一位大佬的文章，受到了许多启发

一、准备合约

本节课程教大家如何讲智能合约部署到conflux公链上，首先大家可以看到下面的这个智能合约是不是很简单。我们将会以这个合约演示部署到conflux公链的过程。

pragma solidity ^0.5.0;

contract Counter {
    uint public count=0;
    event SelfEvent(address indexed sender, uint current);

    constructor() public {
    }

    function inc(uint num) public returns (uint){
        return count += num;
    }

    function self() public {
        emit SelfEvent(msg.sender, count);
    }
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17

二、conflux的sdk安装

我们使用js-conflux-sdk作为本教程的web教程，交互首先我们需要进行安装nodejs作为我们的运行环境。飞机票一张收下吧，我们安装好nodejs后，就可以来玩我们的sdk了。废话不多说，直接开始撸。

我们使用WIN + R键打开命令行，然后创建一个文件夹（温馨提示切换到非系统盘玩切换方式“D:”就切换到D盘了）使用“mkdir my-project && cd my-project” 创建好项目后自动进入文件夹，然后我们运行“npm init” 进行初始化node项目，这一步会让你确认一些东西，如果你是小白一路回车（Enter键）就好。如果你是前端大神，我也没啥好教的我也不太懂。为了稳定我们使用固定版本号方式安装依赖，我们运行 “npm install js-conflux-sdk@0.9.2” 命令进行安装js-conflux-sdk的0.9.2版本依赖（可以使用“npm uninstall package-name” 命令删除对应依赖）。前置准备到这里基本已经完成。

三、编写调用合约js代码

下面请看我的目录结构跟随我一起来学习，下面的目录结构请不要直接看到了就创建，因为你不知道都是什么意思，看玩我的解释在回头创建。

小伙伴应该已经发现了 node_modules、package-lock.json、package.json 这些文件是我们在进行安装 sdk依赖时自动生成的。其他文件目前都没有，我们来按顺序生成他们。

先创建sol这个文件夹，然后创建这三个文件。test.sol就是上面我们的合约代码直接拷入文件中。abi.json和code.json两个文件是通过这个工具 remix 在线生成的。我来说下生成过程。
首先我们将里面的文件全部删除，然后点击这里找到我们的项目目录下的test.sol 文件

我们应该看到下方我框出来的两个按钮了吧，那两个按钮就是abi.json和code.json文件的来源。abi.json我们可以直接复制过去，code.json文件我们要改点东西。

首先我们看到的code文件应该是这样的

{
    "linkReferences": {},
    "object": "608060405260...c63430005110032",
    "opcodes": "PUSH1 0x80 PUSH1 ... 1100 ORIGIN ",
    "sourceMap": "27:337:0 ... 37;;;;;;"
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

代码有省略，太长不好看，我们看到object这个key值了吧，我们把它的值考出来然后在头部加0x 就好了放在code.json文件中。code.js文件中只存放object的内容前面加0x，也就是下面的代码，其他信息都不要，千万记住了。这点很重要！！！！

"0x608060405260...c63430005110032" 


    
        1

就是这样的。然后我们在写另外两个call和deploy两个文件

先写deploy文件

 // 私钥地址
const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e';
// 合约地址
const CONTRACT = '';
const { Conflux } = require('js-conflux-sdk');

async function main() {
  const cfx = new Conflux({
    url: 'http://mainnet-jsonrpc.conflux-chain.org:12537',
    defaultGasPrice: 100,
    defaultGas: 1000000,
  });
  const account = cfx.Account(PRIVATE_KEY); // create account instance
  console.log(account.address); 

  // create contract instance
  const contract = cfx.Contract({
    abi: require('./sol/RC20.abi.json'),
    bytecode: require('./sol/RC20.code.json'),
  });

  const receipt = await contract.constructor()
    .sendTransaction({ from: account })
    .confirmed();
  console.log(receipt.contractCreated); 
}
main().catch(e => console.error(e)); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28

打开项目cmd窗口在上面的目录下运行命令 “node deploy.js”就将合约部署上去了

receipt.contractCreated 这个会打印出合约地址。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
来源：csdn
作者：淡淡的夏日忧伤
原文链接：https://blog.csdn.net/pizhi1461/article/details/106967255

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

评论(0) 浏览(1728)

072021-9

yarn的安装和使用

前端达人

yarn的简介：

Yarn是facebook发布的一款取代npm的包管理工具。

yarn的特点：

速度超快。
- Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。
超级安全。
- 在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
超级可靠。
- 使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

yarn的安装:

下载node.js，使用npm安装
npm install -g yarn
查看版本：yarn --version
安装node.js,下载yarn的安装程序:
提供一个.msi文件，在运行时将引导您在Windows上安装Yarn
Yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn的常用命令：

安装yarn
- npm install -g yarn
安装成功后，查看版本号：
- yarn --version
创建文件夹 yarn
- md yarn
进入yarn文件夹
- cd yarn
初始化项目
- yarn init // 同npm init，执行输入信息后，会生成package.json文件
yarn的配置项：
- yarn config list // 显示所有配置项
- yarn config get <key> //显示某配置项
- yarn config delete <key> //删除某配置项
- yarn config set <key> <value> [-g|--global] //设置配置项
安装包：
- yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
- yarn install --flat //安装一个包的单一版本
- yarn install --force //强制重新下载所有包
- yarn install --production //只安装dependencies里的包
- yarn install --no-lockfile //不读取或生成yarn.lock
- yarn install --pure-lockfile //不生成yarn.lock
添加包（会更新package.json和yarn.lock）：
- yarn add [package] // 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
- yarn add [package]@[version] // 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
- yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）
//不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
- yarn add --dev/-D // 加到 devDependencies
- yarn add --peer/-P // 加到 peerDependencies
- yarn add --optional/-O // 加到 optionalDependencies
//默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
- yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
- yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0
发布包
- yarn publish
移除一个包
- yarn remove <packageName>：移除一个包，会自动更新package.json和yarn.lock
更新一个依赖
- yarn upgrade 用于更新包到基于规范范围的最新版本
运行脚本
- yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本
显示某个包的信息
- yarn info <packageName> 可以用来查看某个模块的最新版本信息
缓存
- yarn cache
  - yarn cache list # 列出已缓存的每个包 yarn cache dir # 返回全局缓存位置 yarn cache clean # 清除缓存

npm 与 yarn命令比较:

这里写图片描述

npm 与 yarn相关问题比较:

npm模块的依赖:

npm存在一些历史遗留问题，请看下图：

比如说你的项目模块依赖是图中描述的，@1.2.1代表这个模块的版本。在你安装A的时候需要安装依赖C和D，很多依赖不会指定版本号，默认会安装最新的版本，这样就会出现问题：比如今天安装模块的时候C和D是某一个版本，而当以后C、D更新的时候，再次安装模块就会安装C和D的最新版本，如果新的版本无法兼容你的项目，你的程序可能就会出BUG，甚至无法运行。这就是npm的弊端，而yarn为了解决这个问题推出了yarn.lock的机制，这是作者项目中的yarn.lock文件。

yarn.lock文件格式:

这里写图片描述

大家会看到，这个文件已经把依赖模块的版本号全部锁定，当你执行yarn install的时候，yarn会读取这个文件获得依赖的版本号，然后依照这个版本号去安装对应的依赖模块，这样依赖就会被锁定，以后再也不用担心版本号的问题了。其他人或者其他环境下使用的时候，把这个yarn.lock拷贝到相应的环境项目下再安装即可。
注意：这个文件不要手动修改它，当你使用一些操作如yarn add时，yarn会自动更新yarn.lock。

使用yrm工具管理一些npm源

安装

yarn global add yrm

查看可用源

yrm ls

选择源

yrm use yarn

快速删除node_modules

手动删除真的很慢：

安装： npm install rimraf -g
使用：rimraf node_modules

rimraf是node的一个包，可以快速删除node_modules，再也不用等半天了

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

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

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

评论(0) 浏览(1517)

072021-9

npm，cnpm，yarn，tyarn 区别与安装

前端达人

做前端的应该都用过标题提到的包管理器。简单说一下这4个包管理器的区别。

npm

这应该是最常用的，在某些情况会出现丢包，而且由于某种原因会下载很慢，通常会配置国内镜像。我已经很少用npm了，主要用它下载 cnpm 或 yarn。

cnpm

这个就是npm的国内镜像了。

yarn

它和npm最大区别是，yarn是并行下载的，所以下载速度很快，当然也是要配置国内镜像。

tyarn

这个就是yarn的国内镜像了。淘宝开发的。我主要就是用 tyarn。

一、安装

1.1 安装node.js

下载地址，选择自己的安装位置，一直next即可。

注：.msi安装程序会自动添加node.js路径到系统环境配量

image.png

安装完成目录结构：

# 查看版本号
H:\Users\M>npm -v
6.4.1

H:\Users\M>node -v
v10.15.1

1.2 安装cnpm

打开cmd命令窗口，执行：

npm install -g cnpm --registry=https://registry.npm.taobao.org
# 默认cnpm会会安装在自己的用户下面，并且自动配置了用户环境变量
# 比如我的安装在：H:\Users\M\AppData\Roaming\npm

# 查看版本号
H:\Users\M>cnpm -v
cnpm@6.0.0 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.8.0 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib
\npm.js)
node@10.15.1 (D:\Develop\nodejs\node.exe)
npminstall@3.20.2 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\node_modules
\npminstall\lib\index.js)
prefix=H:\Users\M\AppData\Roaming\npm
win32 x64 6.1.7601
registry=https://registry.npm.taobao.org

1.3 安装tyarn

# 国内源 $ cnpm i yarn tyarn -g #  $ tyarn -v

1.4 安装umi

$ tyarn global add umi
$ umi -v

1.5安装静态服务

cnpm install -g serve

0人点赞

善工利器

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
来源：csdn 与简书
作者：境与界
链接：https://www.jianshu.com/p/647328be9491
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2928)

062021-9

设计沉淀录：如何让你的设计更有价值

ui设计分享达人

前言：如何让你的设计更有价值，设计有价值代表你的方案有价值，你的方案有价值代表你的理论有价值、你的理论有价值代表你的专业能力体现，归根到底，说明了什么人作出什么样的作品的同时会带来相应的价值。站在设计师的角度看，在公司里，属于站在用户体验上的提出的设计建议或者设计方案，基于“以用户为中心”理念和交互设计原则，通过自己的设计思维与专业能力，为公司创造更大的价值，不单只是一个美观的输出。

目录：

一、设计行业的发展趋势

a）设计与产品的关系

b）找到自身价值的重要性

二、了解设计师的价值分层

a）设计协同

b）推动业务增长

c）设计驱动产品

三、设计师需要具备的哪些思维？

a）双钻模型解决问题

b）“五度”设计成果评估模型

c）培养数据思维，利用数据提升设计的价值

一、设计行业的发展趋势

a）设计与产品的关系

以前，设计师在团队里的位置会比较尴尬，因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临，设计的价值变得显性化，作为与用户关系密切的设计师，善用好数据，可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力，为公司创造更大的价值，不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切，是整个行业发展的必然趋势。

举一个设计以小成提高业务的实例。这是我之前做的分拣软件迭代首页的自定义配置组件。在改动前分拣首页功能多，甚至有时候需要滑动寻找。寻找点击率大概是不到16%，改动后提高到了40%，不消耗任何其他人力、物力成本，就可以用设计让CTR翻倍。

设计目标：减少首页模块寻找的时间，加大成功点击率，考虑延展性发展

现有问题：主次功能混淆、视觉点不够集中、点击按钮不明显

优化方案：1、主次布局调整，主上次下；2、面积放大提高模块命中率；3、色彩区分主次按钮；4、添加“➕”自定义配置首页主功能，加入人性化设计理念。

体验连接：https://www.growingio.com/projects/lPQ7bOj9/product-analytics/heatmap/j9yvlyRy（账户/密码miaomiao/liuge1)

b）找到自身价值的重要性

自身价值顾名思义就是你的工作成果会带来什么价值，按照公司更看重我们的设计能给产品的发展带来多大的价值。虽然职位的性质已经很明确你的价值的体现，但是这里注重成果的价值，设计师的成果更多是设计方案，方案成果的价值的接受度也是需要从易到难的渐进的。

举一个设计价值体现的实例。这是我之前做的新Station组件库——GM Design。设置组件和设计规范不仅保持了产品的统一性，且减少用户在使用过程中的行为认知负担，快速同事达成合作，还可以减少不必要的操作和排查，提高易用性。

设计目标：保持产品的统一性，减少认知负担，降低时间和人力成本，提高易用性

现有问题：同个功能存在组件多样、组件学习成本高、反复修改，

优化方案：1、建立组件库；2、功能类型划分，采用同一个组件的变形处理；3、组件集中化；

体验连接：https://lanhuapp.com/url/rKmeX

二、了解设计师的价值分层

设计师的价值可以分为以下三层：设计协同、设计推动业务增长、设计驱动产品。

a）设计协同

一个完美的执行者，能够在拿到需求后高效又完美地实现落地。简单地说就是手上功夫好。

做好这个阶段需要有优秀的专业能力，良好的沟通能力，并参与到产品的探索与构思中来。

举一个设计协调的实例。Q2阶段的B-Shop商城交互迭代。前期输出设计基础和设计规范，有助于开发高效实现，实时跟进UI进度和设计协助。在产品的探索中发现数字键盘组件的问题点，由于自己写的数字组件具有局限性，导致体验上无法满足部分需求，如：输入框的定位在数字键盘之上。基于这个问题点，我们提出A/B方案，A方案是自己写的数字组件，B方案是自己写的数字组件延用原生的逻辑，从用户测试得出，A方案是更符合用户操作习惯。

设计目标：组件高效快捷输入，侧重交互体验提升，视觉优化，提高易用性

现有问题：学习成本高、缺少设计基础、信息分层不明显、体验差

优化方案：1、划分主次信息，阅读更直观；2、建立设计规范；3、组件优化，符合用户操作习惯；4、图文结合，按钮优化，加强页面指导性

体验连接：https://bshop.guanmai.cn/?cms_key=miaotest&timestamp=1561085945884#/product(账户/密码miaomiao/1qaz2wsx)

b）推动业务增长

这个阶段的设计师，会比上一个阶段更能体现设计师的设计价值，并对产品产生一定的影响力。能在以用户为中心的基础上，推动业务的增长，所以这个阶段的设计也被称为UGD（User Growth Design）。

需要设计师具备用户洞见力，数据分析能力，从这两个维度出发，去熟悉业务、分析业务，从而推动业务。

举一个推动业务增长的实例。Q2阶段的采购APP的交互迭代。表头的功能布局与标签栏的“➕”添加功能的调整，其实在用户调研阶段的热力图数据和观察法分析得出，工具类移动端侧重点在功能区，需要一目了然知道我的当前任务数是很重要的信息，且是高频操作，所以放置顶部；标签栏的添加功能是为了快速添加采购单据和询价为目的，用户群体特殊性，需要一键新建添加的需求。

设计目标：侧重交互体验提升，提高工作效率，提高易用性

现有问题：学习成本高、缺少设计基础、操作路径长、体验差

优化方案：1、操作路径简化，采用路径集合弹框；2、建立设计规范；3、组件优化，符合用户操作习惯；4、一键新建“➕”的功能，达到快速新建

体验连接：http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login（账户/密码zhangsan0001/ liuge1)

c）设计驱动产品

这个阶段的设计师，在团队中的价值可以说是非常大了。从被动的需求接收方，转化为从战略层，能主动提出需求的一方。也是UXD发展的终极方向。

三、设计师需要具备的哪些思维？

a）双钻模型解决问题

什么是双钻模型?

双钻设计模型由英国设计协会提出，该设计模型的核心是：发现正确的问题、发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。

双钻设计模型把设计过程分成4个阶段：发现问题（挖掘）、定义问题（创意）、构思方案（制作）和交付方案（落地）。

采购APP进行双钻模型思维构建的基础，提供交互迭代的底层设计理论支持，在挖掘需求阶段，属于用户调研阶段；创意阶段，关注点在于问题梳理、实现目的、设计层面；制作阶段，寻找潜在的解决方案；落地阶段，解决方案的分析和验证，输出最适合一个。

b）“五度”设计成果评估模型

用户体验周期（由阿里巴巴UED提出概念）

用户体验周期指的是用户与产品的关系随着时间变化而形成的不同周期阶段。用户体验周期可以分为「当前」和「长远」两个阶段，每个阶段中有不同的细分。

「当前」阶段，分为 3 个过程：

触达：用户来访问网站，包括第一次访问网站的新用户和再一次访问网站的老用户；
行动：用户在网站上进行相关操作；

感知：用户在操作完成后对产品形成的主观感受。

「长远」阶段：分为 2 种表现：

回访：用户自己再次使用该产品；
传播：用户推荐给其他人使用该产品。

如何在具体项目中体现呢？下图，运用一个具体项目举例：

c）培养数据思维，利用数据提升设计的价值

项目与需求上线后，去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较，没有比较就不能进步。

关于数据的用处有很多，举个例子，当两个人对各自的方案争执不休，分别觉得对方不好，但站在各自的逻辑上似乎都能说得通，那怎么办呢？分别做一个A/B测试，数据不会说谎，哪一个方案更有效，一目了然。

那么如何将数据结合到我们的设计中呢？首先在设计前,我们需要先定一个目标，而每一个目标就应有一项对应的数据指标。比如，提高了某一块的CTR（点击通过率），提高CVR（转化率），提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。

拿到了数据之后，还需要分析数据。不管是有没有达到目标，都要去分析原因，进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验—失败了就找失败的原因，方便以后避开同样的错误；成功了就分析成功的原因，并将成功的策略复制运用到今后的工作中，增加以后的成功率。如此，不管有没有成功，都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。

小结：

以上就是今天所要分享的全部内容。再带大家回顾一下，一共分为三部分：第一个是了解设计师的发展趋势，第二个是趋势下的设计师价值分层（设计协同、设计推动增长、设计驱动），第三个就是在价值分层的逐步递升中所需要培养的双钻模型、GSA的策略、数据增长思维等。

文章来源：站酷作者：麦海欣

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

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

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

评论(0) 浏览(1963)

062021-9

正态分布模型在体验设计中的分析及应用举例

ui设计分享达人

B端产品往往都具有较长的业务流程和操作步骤，需要用户循规蹈矩、通过较多的步骤找到相应的页面，来触达相应的用户目标。落实到体验设计中，需要设计师充分考虑用户在操作路径中的操作权重（频率&停留时长），进一步以核心步骤为中心向路径两端延伸，完成页面布局。

如何分析和评估用户在操作路径中的权重呢？今天介绍一下，本人从统计学中借用的一个概念——正态分布模型，并将其应用到体验设计的流程中。

1 首先，什么是正态分布模型呢？

正态分布，也称“常态分布”，或高斯分布，是一个在数学、物理及工程等领域都非常重要的概率分布，在统计学的许多方面有着重大的影响力。

如果一个指标受到若干独立因素共同影响，且每个因素不能产生支配性的影响，不管每个因素本身是什么分布，它们叠加后影响的这个指标平均值就是正态分布。

如图：

标准正态分布模型

正态曲线呈钟型，两头低，中间高，左右对称因其曲线呈钟形，因此，人们又经常称之为钟形曲线。

标准的正态分布模型包含了中心极限定理的三要素，影响因素独立，因素影响程度随机但无法支配，各个因素之间是相加的关系。

中心极限定理三要素

当然，在体验设计中正态分布模型就没有那么复杂，而且用户的操作也不是随机分布。那如何在体验设计中如何应用呢？

接下来，介绍一下基于用户体验，提炼的正态分布模型。

如图：

体验设计中标准正态分布模型

总的来说，体验设计中的正态分布模型，是一种用来探讨用户在某一功能的操作过程（或产品的整个生命周期）中，操作频率（权重）所集中的区间与页面布局、信息架构之间关系的方法与思维。

这个模型涉及两个维度：

一是带有指向性的操作路径（步骤/功能模块），可以是一个功能的详细、单一的操作路径，也可以是一个产品从使用到停止使用的生命周期中，用户对整体功能使用流程；

二是频率，操作路径中的步骤或者核心功能被使用的频率，即权重。这个维度可以直观的反应出用户的关注重点和高频操作，便于后续的用户引导及页面布局等。

将用户的操作频率按流程顺序放置到坐标中，即可得到类似于正态曲线的图形，直观的反映出用户在功能步骤（模块）上的关注度。

2 体验设计中正态模型的类型

根据分析功能的颗粒度不同，得到正态分布模型的验证结果也不相同。

由此，体验设计中的正态模型，大体上可分为两类：

第一类是具体的功能（功能型），通过该功能的起始到完成，获得该功能高频操作及核心页面，可有助于功能路径优化及页面布局、功能排布，让用户更方便的获取高频操作。

第二是产品整体功能（产品型），通过用户从使用到停止使用该产品的全部路径，获取用户在使用产品时关注的功能，有利于明确产品定位、优化功能架构，在B端产品上还可以进行角色和权限的管理。

接下来，我们就详细探讨一下两种类型的正态分布模型。

2.1 功能型的正态分布模型

功能型的正态分布模型多用于优化产品功能及路径。这种类型的模型关注更加聚焦，结论也更加直接，甚至可以直接应用到设计方案上。因此在分析功能路径时，要简化相关联的分支路径，避免其对聚焦问题的干扰，使分析结论更加精准。

例如，一个手机TB的购物流程，如果要研究用户购买行为，就需要更多的关注用户对商品的选择、比较等操作，同时简化用户的支付操作路径；如果研究的是购物流程中用户的支付行为，就应该相应的简化用户选择产品的路径。

如图：

举例：淘宝购物流程分析

另外，这种类型分析结果的落地，需要格外关注功能操作路径的入口及其他功能的衔接，保证在更大层级上的操作不会出现断点，保证使用流畅。

2.2、产品型的正态分布模型

产品型的正态分布模型，可以看作众多功能型路径的简化提炼版本，忽略操作细节，着眼于业务在功能模块之间的流转，多用于产品定位升级或架构调整。这种类型的模型是将产品的拓扑图，按照用户从开始使用到停止使用的的操作路径（产品的生命周期），将其映射到坐标轴上，来直观表现出产品的核心功能。

如图:

产品型&功能型

其结果属于定性结论，在设计方案时更多的是参考意义，只有在进行产品定位迭代及架构调整时，才具有指导意义。因此，在不同场景下用合适的模型才能更具有说服力。

正态分布模型的可以应用到B/C/G等多种类型的产品上，根据不同类型的产品，该模型还会有其他功能的扩展。

例如，B/G端产品往往都具有长流程、多角色、多模块的特点，当正态分布模型在B/G端产品上应用时，还可以清晰凸显角色、权限的结构，有利于对用户权限和角色的定义与管理。

3 案例分析

在本人所从事的安防行业中，实时报警的处理是较为高频、且重要的业务功能。本文仅对功能型模型进行案例分析，希望该方法（思维）的表达更加清晰明确，也能够帮到大家。

3.1 业务概述：

实时报警的业务流程大致是这样的：在监控中心或岗亭，保安人员对园区的安防状态进行警戒时，如果有异常状况触发了报警，系统会反馈推送给安保人员，安保人员通过录像抓图等信息判断报警的紧急程度以及处理方式。

3.2 业务定性

该功能是典型的“海岛事件”，具有偶然性和急迫性的特点。所谓海岛事件，是本人对具有偶然性与急迫性特点业务的概括统称，后续可以写文章专门探讨该问题。

3.3 场景推演

安保人员每时每刻都全神贯注监管整个区域的安全状态，是不可能的，更何况这类海岛事件呢？所以，在发生报警时安保人员大概率处在“摸鱼”状态。

当有报警进入时，安保人员第一时间需要确认的是报警的类型以及位置，从而快速判断如何处理。只有当报警信息不明确时，安保人员才会进一步通过录像、抓图、关联的监控来进一步判断报警信息。

实时报警场景推演

3.4 报警业务处理的正态模型分析

在整个场景推演过程中，用户的关注重点是报警详情以及报警信息的确认过程，会有较少的概率查看辅助信息，因此需要保留辅助信息的入口。

如图：

3.5 方案展示

方案采用瀑布流式，高权重的关键信息拥有更高的页面权重，用户可以快速获取信息，以判断处理方式。同时，渐进式展示确认信、辅助信息，如抓图、录像、关联视频等，一方面可以减少对用户决策的干扰，同时能够快速获取这些信息，辅助用户做出判断。

由于方案涉及到公司项目，所以方案不方便直接展示，这里只展示页面信息布局。

我们都知道，在页面纵向布局上，随着视觉流的下移，用户的关注度会逐步降低，因此，在实时报警处理页面布局上，将从上到下信息的重要性逐级降低。

首先是实时报警处理的核心区，分为两个部分基本信息区与视频辅助区，这两部分信息是判断实时报警性质以及处理方式的主要依据。其中，基本信息区是最重要的，用户可以根据报警的基本信息，来确定如何处理报警。对于大部分的报警信息，用户可直接判断报警是否需要处理，或是进一步的确认及验证，尽可能的减少用户的操作；因此，报警的处理入口，紧随基本信息。

而视频辅助区是对部分报警的回放确认，是在查看基本信息后的进一步操作，频率相对较低，因此虽然属于核心区，但是层级却低于基本信息的展示。

辅助验证区放置的报警期间的连续抓图，可以满足用户的放大查看，进行报警辅助确认，随着用户视觉流下移，其重要程度迅速降低，相应的操作的步骤也较为复杂，页面视觉权重也有较大的压缩。

最后，对于极少的报警信息，用户需要通过关联视频的信息进行验证，可通过页面底部的关联视频入口，点击展开关联视频浮层，进行报警信息验证。这是整个实时报警的最后一个层级信息展示。

4 写在最后

正态分布模型不仅仅是一个工具、方法，同时，也是一种设计思维。

在设计之初，充分理解功能的定位，完善功能入口，让用户更容易触达产品的核心功能。然后通过核心功能向业务两侧进行延伸，进而覆盖整个业务，完成产品的框架与流程的构建。

在设计之中，关注高频的核心步骤，让用户的高频操作具有更简便的操作空间，把用户更想知道、更想操作的内容推送到用户面前，让用户在整个操作流程中的操作频率与页面布局的权重分布相匹配，而不是想当然。

只有这样，设计才更具价值，才能培养更忠诚的用户。

文章来源：站酷作者：体验设计思

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

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

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

评论(0) 浏览(1863)

首页

什么是金字塔原理

金字塔原则在生活各处可用

一. 明确和理解问题

二. 拆分问题

案例：配送管理的业务组件【打印交互组件重构】

一、社会背景 Social Context

1.大厂的变化

谷歌的 Aandroid 11

苹果的 IOS 14

微软的 Fluent UI

2.社区中的热门设计

二、UI设计 User Interface

1. 设计服务与内容

2.更大的圆角

3.用有含义的插画提升用户体验

4. 新材料新拟态

5. 自然的界面和运动效果

6. 来自未来的风格

7. 深色模式

三、插画风格 Illustration

1.更具装饰性的平面插画风格

2.情感化的插画设计

3. 插画的组件化与创新

四、交互方式 IInteraction

1. 多屏协同办公

2. 秒验身份认证

3. 单手交互的挑战

4. 折叠屏

五、技术升级 Iechnology

1. 关注隐私保护

2. 智能自动化办公

3. 脑机

4. 虚拟现实&增强现实

5. 5G 运用

找到了一位大佬的文章，受到了许多启发

一、准备合约

二、conflux的sdk安装

三、编写调用合约js代码

yarn的简介：

yarn的特点：

yarn的安装:

yarn的常用命令：

npm 与 yarn命令比较:

npm 与 yarn相关问题比较:

npm模块的依赖:

yarn.lock文件格式:

使用yrm工具管理一些npm源

安装

查看可用源

选择源

快速删除node_modules

一、安装

1.1 安装node.js

1.2 安装cnpm

1.3 安装tyarn

1.4 安装umi

1.5安装静态服务

小结：

分类

日历

链接

个人资料

存档