首页

关于设计的小插件,我只保留了这3个

seo达人



1、SimilarWeb – 网站流量来源和排名

图片可以看到一个网站的基本数据,比如浏览量,访客都来自世界的哪里?-都是通过什么途径访问的该网站等等

图片

图片

以上是我用B站来举例,可以看到一些基本信息,点击下面的按钮可以跳转到新页面用以查看很多的信息:图片图片

最关键的来了,最下面可以查看与该网站相似的网站,这条对设计师非常有帮助,很多设计师做网页设计的时候不会找竞品,这功能简直是福音啊:

图片

另外还有一点,比如你要去面试一个公司,很多人不知道面试说什么,你就可以用这个小插件来看看你要面试公司的网站数据情况,然后再结合你自己的设计作品链接起来,显摆你对他们公司客户群的了解,这样面试时候就可以做到侃侃而谈不失尴尬。

 

2、Nimbus 截幕 & 屏幕录像机

图片

功能非常多,各种模式的截图都有:

图片

 

3、也就是万人推荐的Muzli 2 – Stay Inspired

图片

图片

设计师必备的主页,每次打开都可以看到很多新鲜的设计资讯。

图片

你甚至可以直接搜索颜色,然后会出来很多设计作品。还可以搜索关键词,比如你搜索dasboard

图片

有条件的可以打开chrome检查看看自己是不是都安装了,如果你还有不错的插件推荐,可以在下面留言。

 

原文地址:追波范儿(公众号)

作者:terechen

转载请注明:学UI网》关于设计的小插件,我只保留了这3个

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

截屏2021-05-13 上午11.41.03.png

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

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



设计赋能商业变现初探

seo达人



关键词解读

为了更好的理解接下来的文章内容,笔者会首先对以下关键词进行解读:商业变现、设计赋能、价值链理论。

图片

关键词

1. 商业表现
杰克·韦尔奇在《商业的本质》一书中提到:商业归根结底是一项“团队运动”,必须依靠团队的力量。就企业而言,笔者解读为「商业」的本质是:企业团队(个体、群体)通过创造一系列的价值活动实现企业和外部客户之间价值交换的运行模式;而「变现」则是指在此系统中“企业收入-支出成本”所得的实际收入,提升收入总额和降低支出成本均可以实现“变现”的目标。

 

2. 设计赋能

设计师站在用户和业务的视角,能够从全链路的视角出发,洞察各利益相关者的关注点,运用专业的设计方法去挖掘产品和设计的机会点,最终促进业务持续健康向上发展。

 

3.“价值链”理论

价值链的概念最早是由美国哈佛商学院的迈克尔•波特教授在其著作《竞争优势》中提出的,称作“价值链分析法”。把企业内外价值增加的活动分为“基础活动和支持性活动”。基础活动即企业生产经营的主体活动,涉及产品的物质创造及销售、转移买方和售后服务的各种活动,支持活动是辅助基础活动,是通过提供采购、技术投入、人力资源、及公司范围的职能支持的活动。不同企业参与的价值活动中,并非每一个环节都会创造价值,只有特定的价值活动才能真正创造价值。企业要密切关注组织的资源状态,特别关注和培养企业在关键价值活动上获得竞争力。

企业保持竞争优势,既可以来源于价值活动所涉及的市场范围的调整,也可以来源于企业合作或调整价值链所带来的收益。

随着社会分工的细化和专业化以及互联网的普及和发展,价值链的内容也不断向前发展,目前已发展为“合作竞争的价值链”理论。

图片

合作竞争价值链

 

价值链理论包含4个构成要素:价值主张、运营模式、界面模式和盈利模式。

1.价值主张:包括价值主张、客户关系、客户细分三大部分。

  1. 价值主张:不但包含了企业的战略方向,而且包含了企业提供给客户满足其需求的价值项,比如“快捷的渲染服务-10s出高清效果图”。
  2. 客户细分:确定目标客户群体,并对其进行细分,探索不同细分市场的客户需求。
  3. 客户关系:是在明确用户需求的前提下,找到吸引顾客、留住顾客、转化顾客的方式,从而对所提供的产品和服务进行不断的改进以维系和形成良好的长期往来关系,C端业务中常见的客户关系即是“会员”。

图片

价值主张

2.运营模式:企业将资源和能力转化为产品服务的过程模式。包括关键业务、核心资源两大部分。企业的产品和服务作为企业价值创造的载体,需要通过一定的过程将资源和能力转化为产品和服务,通过优化流程、提高效率则可以减少该过程中涉及到的成本和费用。

3.界面模式:包含重要伙伴和渠道通路两个部分。通过渠道通路,企业可以将自身的产品和服务传递给客户,客户也可将信息、资源、能力等回馈给企业。而企业的合作伙伴,在一定程度上促成了企业的产品和服务的产生,是企业外部的重要资源。

4.盈利模式:包含包括成本结构和收入来源两个构造块,企业可以通过“开源节流”以实现商业的高效运作。

 

赋能维度提取

初步确定4个维度

可基于价值链模型从“公司角度”或“具体业务角度”去作分析,可更加灵活的应用该理论。但需注意,以上构成要素中,设计师很难全面切入,定要找准设计切入方向,才可发挥最大价值。

那么我们来看如何确定设计赋能维度?

一方面,在上述的价值链理论中,“客户关系”“重要伙伴”通常会有专业的商务、销售、售前、运营人员去维系,盈利和收入模式也会有高层管理人员进行制定和分析管理,设计师在工作链路上很难触达盈利模式和客户关系相关的内容。“重要伙伴”侧,设计师通常会进行客户调研、竞品分析等,以挖掘更多的产品机会点,促成业务价值达成,因此在赋能方向上,“重要伙伴”会合并到价值主张侧进行分析,不再单独展开来讲。

另一方面,基于价值链理论的指导,我们进一步提炼企业或具体业务的核心价值链:企业需要将资源和能力整合,去生产或研发承载企业价值的产品/服务;产品/服务经过销售到达客户侧,客户付费购买则企业产生营收。在这条关键链路中,「生产/研发链路」「产品/服务」「销售链路」「客户/用户」都是非常重要的环节且缺一不可。而设计师基于“全链路”的设计思维,利用丰富的设计研究等方法均可以在此四部分进行有效切入挖掘业务价值,因此初步确认将此四部分对应价值链中的「运营模式」「价值主张」「渠道通路」「客户细分」作为设计切入的赋能维度。「生产研发链路」和「销售链路」作为直接赋能“降本”和“增收”的关键链路可作为设计赋能的持续探索方向。

图片

确认赋能维度和方向

 

基于维度对业务进行分析,找到更加细分的赋能维度乃至设计机会点

虽然初步确认了赋能维度,但是对于设计师如何寻找设计赋能机会点尚没有清晰的思路,因此笔者从自己负责的房产业务入手,尝试进行分析和挖掘。以下为简要的分析,仅供大家参考。

 

1.价值主张:房企业务在当下重要的价值主张在于探索全链路的业务解决方案。

思考设计可以做什么:

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

设计做了什么:

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

图片

业务现状分析

 

2.客户细分:提供更加精细化的产品和运营策略。

思考设计可以做什么:

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

设计做了什么:

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

图片

目标客户分析

 

3.运营模式:将资源和能力转化为产品和服务的过程。前文已经提到,优化流程、提高效率均可以减少该过程中涉及到的成本和费用。针对此部分笔者还未进行系统分析,因此简单说明。

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

 

4.渠道通路:跟增收有直接的关联,在C端业务中表现为「购买转化链路」,而在面向大B客户的业务中,可细拆为“产品/服务”从「触达客户–>新签–>续约」的全链路。

图片

面向大B客户的转化链路

 

思考设计可以做什么:

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

图片

“转化链路”分析

 

首先,需要对线上和线下的触达客户渠道进行枚举和系统梳理。比如线上涉及到官网、推文;线下涉及到展会、沙龙。线下渠道包含宣传册、折页等,可透出二维码引流到线上渠道;线上渠道还可以通过推文转发分享、搜索等进行引流。

其次,在触达链路中我们期望的目标表现是什么呢?在这个过程中,我们期望越来越多的人进入官网;希望线上的推文被大量分享;希望线下触达的客户量越多越好,期望品牌曝光次数越多越好,因为品牌曝光意味着触达客户量的机会增加,触达客户量也有可能随之增加。

再者,如何衡量目标是否达成呢?最终指标:一方面是触达客户数量,触达量增加很可能意味着转化率提升;另一方面是咨询率,在触达客户增加的同时,咨询率提升意味着对业务感兴趣的客户多,转化的可能性就更大。过程性指标包括官网访问量,推文阅读量与分享量,单场活动触达客户量等。触达链路的主要目标是引流和拓客,最终转化与否还要依赖新签过程,因为转化率不会作为触达链路的最终指标。

(此处推荐大家使用GSM模型的方法确立目标表现及衡量指标,在后续的文章中会进行详解,本文暂不详细说明)

图片

GSM模型

 

最后,在触达链路中,切入赋能的方向在哪里呢?

一方面线上线下的渠道能否进一步拓宽?-分析现有渠道,线下客户扫码二维码后打开的是H5页面,关闭页面后无法再次查看页面,进而无法了解业务。因此建议增加“小程序”作为线上客户留存渠道,一方面可以依赖微信生态方便客户再次查看,另一方面在留存的同时还能提高客户间的传播分享。(下图是基于已有小程序时的触达链路)

另一方面,已有渠道的品牌曝光量能否增加?-分析现有的官网,在官网中透出“酷家乐地产业务”的入口较深,且布点少,这些都影响了业务曝光度;于此,我们可以去思考,SEO搜索酷家乐时是否可以透出“酷家乐地产业务”?线下渠道是否可以增加可被客户带走的物料?线下展会中播放配音视频,通过声音传达到更多客户处,然客户产生兴趣,吸引客户前来了解业务。

沿着上述的思路和方向,我们可以思考更多可切入的方向与机会点。

 

初步归纳整体研究思路

上述的分析是基于价值链理论,从「价值主张」「客户细分」「运营模式」「渠道通路」4个维度进行切入,从实际业务着手运用专业的设计方法进行分析,整理得出期望目标达成的具体表现,以及确定目标可衡量的数据指标或软性评估体系,最后挖掘出可赋能的方向以及机会点。

图片

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

 

由此,笔者也形成了相对清晰的研究思路:

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

图片

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

 

影响因素:

1.产品/业务的生命周期:

产品/业务所处的生命周期不同,所选择的维度也会存在差异性。笔者当前所负责的业务还属于从0->1阶段,业务品牌影响力需要不断增大,对外营销推广渠道也需要不断拓展,因此在业务的品牌影响力建设、渠道拓展方面都存在可深入挖掘的方向;而对于其他相对成熟的业务,赋能维度仍需要侧重在运营模式优化(内部流程优化、提效降本)和销售转化链路的优化与升级(直接影响营收)两个方向。

2.业务类型:

B端业务和C端业务的类型不同,可挖掘出赋能方向也会存在一定差异性。尤其是在销售变现链路上,B端业务重在分析「触达客户」->「新签客户」->「续约客户」的链路,需要对转化链路中涉及的商务、运营、市场人员的角色及其作用进行深入了解;C端业务更重在从消费者的角度对C端转化链路进行分析,包含「初识/了解」->「产生兴趣」->「下单购买」->「多次回购」->「分享推荐」的完整链路,更要侧重于分析消费者的心理和购买动机。由于目标用户/客户、转化链路、业务属性的差异性,赋能变现的切入方向也会存在一定的差异性。

 

总结

本文从“价值链”理论着手,选取设计赋能可切入的4个维度「价值主张」「客户细分」「运营模式」「渠道通路」。并且从实践出发,将上述维度落入到具体业务中进行分析,挖掘更加细分的赋能切入方向以及机会点。

读完该篇文章,希望各位设计师们可以达成以下2个目标:

1. 了解价值链理论的概念,并且将理论应用到当前自己负责的业务中进行分析。

2. 在设计赋能商业变现中找准设计赋能可切入的维度以及挖掘细分的维度和机会点,并且真正落实到具体业务中。

以上内容为设计赋能商业变现的初步探索,在后续的持续探索中会力求总结出更系统的理论框架和方法并分享给大家。

 

参考文章:

书籍:《竞争优势》

书籍:《商业的本质》

论文:价值链、商业模式相关的学术论文

 

原文链接:酷家乐用户体验设计(公众号)

作者:瑶一

 

转载请注明:学UI网》设计赋能商业变现初探

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

截屏2021-05-13 上午11.41.03.png

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

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



设计师如何让讲故事成为辅助利器!

涛涛

在日常的生活中,我们总是容易被一个故事吸引,而且更愿意倾听故事,对故事内容也更容易理解。讲故事,是一种比较自然的沟通方式。

作为一个用户体验设计师,你是否有想过,利用人类对故事天然的 “亲近感”,辅助我们在日常的设计工作中解决问题?

在本期的思考中,我试图从一个好故事所具备的特质中,找到我们日常设计工作中可以借鉴的方法。

本期提纲:

  • 为什么会思考 “体验设计师可以从讲故事中学到什么?”
  • 梳理故事要素,全面了解用户
  • 参考故事结构,引导完成任务
  • 明确主线支线,辅助聚焦目标
  • 结语

为什么会思考

“体验设计师可以从讲故事中学到什么?”

这要从 B 站那些的知识区 UP 主说起。

最近,在不知觉中,我养成了在 B 站追更知识区 UP 主的习惯。比如 “法外狂徒” 罗翔老师,常以 “张三” 为主角,将严肃枯燥的法律知识点,串联成一个个普法故事,妙趣横生。这些视频内容,都很擅长使用最简单的故事讲述复杂的专业问题,能够让没有专业背景的普通人听得懂,看进去,学习到知识。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

故事在复杂的知识和观众之间架起了一座沟通的桥梁。

因此,我开始思考,将故事中一些引人入胜的技巧和方法,用到体验设计中帮助用户理解信息、参与互动。

梳理故事要素,全面了解用户

以下哪段描述更吸引你呢?

  • “凯文到了理发店,在理发店等了一个小时,最后理了发。”
  • “上了一周班的凯文周末想剪头发。天气很热,走到时凯文已满头大汗。开门瞬间他心一沉,顾客挤满了理发店,他在旁无聊的等了一个小时,最后总算理了一个满意的发型。”

这两段描述其实讲的是一个事情,但是后者包含了讲故事最重要的六个要素:

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

因此,将这两段描述一起比较,前者是简陋生硬的流水账,后者则是完整生动的故事。从生动的故事中,我们更能体会到人物的所有行动以及情绪。

通过六个要素塑造一个人物角色的故事,让我们能快速在脑海构建一个立体的角色形象。在日常的设计工作中,每个产品需求对应的目标人群各有差异,设计师同样可以使用故事的六个要素,帮助快速了解我们的用户。

首先,在调研中,可以按照故事六要素设计的访谈问题,这样可以帮助了解到相对全面的用户信息。其次,调研后整理信息时,可以根据故事六要素,将素材加工成具体且有代表性的故事,能够帮助我们不被繁杂的原始信息束缚。

下面看看故事的六要素方法在微信记账本的改版方案中的实践。

这次改版的目的是为了解决记账本的流失问题。方案前期,我们根据故事的六个要素设计了访谈提纲,然后招募用户,进行了面对面的调研访谈。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

随后,由于访谈提纲与故事六个要素对应,因此按照这个对应关系,我们从原始的访谈资料中,整理出一个具有代表性的用户故事。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

通过这个故事,我对目标用户的身份、行为、习惯有了清晰直观的了解。同时,根据故事中情节描述,再对照记账本中的交互体验,可以看出,用户流失的核心问题主要在于,自身的记账习惯与记账本提供的体验不匹配,导致用起来有阻碍,用得不习惯。

用户的习惯是按日看账,但是记账本没有聚焦在每日的统计上。因此,方案中我将明细页按日分块区隔,不仅每日的信息更聚焦,而且方便用户进行日间的对比。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

同时,用户大部分时间都在关注当日的账,只在月底、月初等阶段性的时间节点,才会复盘整月的记账情况。因此,我设计了 Tab 页面结构,区分了用户的高低频行为。用户进入记账本时,会优先呈现明细,通过 Tab 页面切换,在需要时也可以看到该月的记账统计。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

这个方案在后续的用户调研中,得到了不少用户正向的反馈。由此可见,利用故事六要素设计,能帮助设计师了解用户,能从混乱的信息中抽丝剥茧,找到清晰方向。

参考故事结构引导完成任务

积木虽然只有几个形状,但是通过排列组合,能有无数种结果。这跟体验设计的工作的很像。日常工作中我们大部分时间不是在创造一个从未见过的事物,而是将已有的信息进行组织,让用户顺利的完成一段符合期待的旅程。

故事的结构就是一种组织信息的方式,可以串联起用户在页面、流程中的行动,让用户更容易朝着一个目标移动。

最常见的故事结构就是经典的三段式结构,开头铺垫情节,中间描述冲突,结尾给出解决方案或行动。这种方式符合人类的认识规律,也被无数荧幕经典验证过。

让我们再来跟随朋友会员的方案,感受如何用三段式的故事结构,构建起一个顺畅的任务流程。

为满足中小商家吸引顾客消费的需要,小账本提供了会员优惠活动的功能。但是我们的中小商家群体一般都缺少专业的运营经验,为了让他们顺利完成设置活动的目标,我参考故事中的三段式结构去呈现页面信息,帮助理解活动、完成设置。

  • 开头,对设置会员活动有什么好处进行了铺垫,说服商家的参与。
  • 中间,给商家提供会员活动,洞察商家可能会遇到选择活动的问题。
  • 结尾,提供活动建议,根据商家的建议进行活动推荐,解决问题。

在故事中,冲突和起伏是人为创造出来,甚至需要戏剧性的夸大表现。体验流程中,冲突是用户使用功能中可能会遇到的问题,我们要提出解决方案,避免冲突,让任务流程顺畅。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

当然讲故事的结构不止一种,故事结构的本质是为了将零碎的情节串联成一个自然的流程,方便用户和理解。

明确主线支线,辅助聚焦目标

在故事中,一般围绕着主角去展开故事。试想一下,西游记中如果将诸天神佛、各路妖怪的都安排成主角,那将是多么盘杂的信息量。因此故事才以师徒五人西行取经为线索展开。后面随着一路上斩妖除魔,整个奇幻诡谲的神话世界跃然纸上。因此,故事中,用区分主线为主、支线为辅的处理,避免用户的注意力被分散。

回到我们用户的旅程中也是一样,无关紧要的操作将会将用户分散用户的注意力,让用户脱离原本的目标。因此在实际的设计工作中,要根据用户的目标,区分清楚主线、支线。

想要区分主线支线,就必须取舍。将跟用户目标强相关的重要信息放在主线,可以让用户的操作更聚焦;同时,将次要的信息放在支线,辅助充实主线。用户有更深入的需求时,也能够有地方获取。

以顾客抽奖中让商家顺利完成一个抽奖活动的设置为例。如果要设置一个抽奖活动,需要设置奖品、活动周期以及开奖时间。这三项操作,我们如果让商家自行操作,他们的操作门槛会非常高。他们甚至会因为复杂的操作而放弃使用。

因此,根据与商家的交谈,我们将用户更重视的奖品信息设为整个活动的主线。按照商家会持续进行其他会员活动的习惯,默认设定了定期开奖,持续活动的通用规则。同时将只有部分用户需要的修改活动形式和开奖时间的高阶操作,收拢到支线中。保证主线通畅,用户能轻松开启活动。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

如果一些支线无法很好辅助主线,甚至影响主线信息的传递,我们也可以舍弃。

以朋友会员中为商家生成一张传播优惠信息的宣传海报为例。在过程中我们在针对为海报的设计了自定义宣传语编辑、海报主题选择等功能,后面发现用户在编辑宣传语、选择海报主题等支线任务上付出了不少时间。因此,最近的方案中,我们去掉了这个支线任务,虽然也是牺牲掉了一些自定义编辑的能力,但是对于复杂规则理解困难的商家而言,生成海报的路径变得简单清晰了。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

主线支线本质上就是一种明确任务优先级的方法,主线支线的安排要从达成的目标出发去取舍。

结语

以上就是讲故事的一些具体的方法在设计流程中的作用。总结一下:

  • 梳理故事要素,全面了解用户
  • 参考故事结构,引导完成任务
  • 明确主线支线,辅助聚焦目标

当然,因为时间的关系,以上的思考只是冰山一角,故事在设计中发挥的作用不止于此。比如讲故事还可以用在日常的合作沟通中,帮助快速达成共识;故事也能用在产品宣传中,让用户留下深刻的印象,等等。

故事在日常的设计工作中无处不在,如果你是一位用户体验设计师,说不定,你在平时的工作中就不知觉的就用到了讲故事的能力。斯蒂夫.乔布斯曾经说过:“世界上最有权利的人,是讲故事的人。他们设定了未来世界的场景、价值和流程”。


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

文章来源:优设   作者:We-Design

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

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

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



「设计系统」的完整框架

涛涛

很多年前刚听到这个概念的时候,一直觉得设计系统是个非常高大上和牛逼哄哄的事情,当时 Material Design 刚刚出来没多久,苹果的人机设计指南在设计圈称王称霸,虽然自己主要做的都是安卓系统,还是认真拜读了 IOS 的 Human Interface Guidelines。

然后,其实也没有什么然后了……

你怎么看待设计系统这件事呢?

关于设计系统,有的人会觉得类似于一种玄学,有的人认为它好是好,但容易被束之高阁,放着落灰,有的人认为它对于设计师是一种束缚……另外,还有很多和它相关的概念也经常被混淆:设计语言、设计原则、设计规范、设计风格、设计组件……

从3个方面,帮你快速掌握「设计系统」的完整框架

图 1: 设计系统词云图

为了理清设计系统到底是什么,我把上面的这些和设计系统经常出现的词语进行了分类。我认为,它们指出的,应该是基于不同角度对设计系统的解释。在这些词语里,有的解释了设计系统存在的原因:追求效率,保持一致性、避免重复劳动,有助于数字产品形成整体性等。有的解释了它的组成或者相关联的内容:设计规范、设计语言、设计原则、设计规范、设计风格、设计组件等。有的解释了设计系统容易出现的问题:玄学、束缚、高大上,理想化等。

存在原因

存在原因,也就是建设设计系统的目的,正是由于设计系统是为了帮助我们的工作工作更加有效率的一个整体工具,也就注定了设计系统的样式、组成和运作方式不会一层不变,每个公司都需要自己找出适合自己团队设计与开发之间最顺畅的那个系统。

要知道,虽然设计系统听起来很酷,但创建一个好的设计系统其实是非常消耗精力的。所以,设计系统的目的一定要清晰并且符合现状需要。

为什么还要去创建设计系统呢?

我认为,只有对于下面这几条,你或团队有强烈的需求,才是生成一个设计系统的好时机。

  • 以往的设计内容总是需要被快速重复使用
  • 需要释放设计资源,让人力更专注于更加复杂和有价值的问题。
  • 需要在多个团队或多个产品之间保持一致性
  • 需要帮助初级设计师的产出迅速达到更高级的要求

没有被需要的设计系统,就是未来束之高阁,等着落灰的一套“玄学”。

组成内容

系统这个词,是指由相互联系的要素构成的有特定结构和功能的有机整体。设计系统,自然也是一个整体性的有机集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 2:设计系统的组成内容

1. 设计原则

设计原则是引导设计系统建设的指导思想和战略方向,基于大量实际经验提炼的高度理论化概括。

设计原则这个概念并不是为了设计系统才出现的,从完形心理学流派运用过来的格式塔理论所包括的临近性、相似性、封闭性、连续性等设计原则,还有以“如非必要,勿增实体”为核心的简约设计原则,来自唐纳德诺曼的概念模式、反馈、限制范围、可感知的预设用途四条设计原则等等。

为了对抽象的设计原则有更具像化的体会,我们再来看看几个比较有名的设计系统的原则。

  • 苹果公司:美学整体,一致性,直接的操作性,反馈,隐喻,用户可控
  • 微软公司:自然而然的,符合直觉和有力的,引人入胜且沉浸
  • 谷歌公司:材料是一种隐喻,明显、图形化和有目的性的,有意义的动效

从3个方面,帮你快速掌握「设计系统」的完整框架

图 3: 三大设计系统的原则

突然发现就苹果公司没给自己的设计系统专门取一个名字啊~

可以发现,虽然三家公司的设计原则各有不同,但几乎都是从通用的设计原则中提炼优化的。

建设一个设计系统一定需要设定自己的设计原则吗?

我认为它不是必须的。

虽然设计原则很重要,但在设计系统初期的时候,遵循现有基础和通用的设计原则来指导建设整个系统也是可以的。总好过随随便便从基础通用的设计原则中拿出一些词语润色一下,简单的堆砌一些高大上的词语,空泛的放在那里,等着它们逐渐变成别人口中的“玄学”吧?

正因为原则是设计系统高度抽象化的结晶,所以它需要基于大量实际设计经验再去生成,不然,很难起到指导设计系统达到增加效率的目的。

2. 设计风格和规范

设计风格,是这个设计系统给人形成的一种代表性的图形印象。设计规范,是用于协调统一性的规则和范式。在 60 年代的《美孚品牌手册》和 70 年代的 《NASA 图形使用规范》中,就已经包含“颜色、字体、图形、用法和示例”等内容。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 4: 设计规范

有了设计风格和设计规范并不一定就能让使用这个设计系统的产品建立统一的品牌调性,只有当设计系统具有了一定辨识性的设计风格,并在设计规范指导下进行长期的设计产出后,才能够让使用这个设计系统的产品形成统一的品牌调性。

3. 设计组件和模式

对于设计系统里,我们最熟悉和常用的应该就是设计组件了,也就是 UI kits,包括输入框、按钮、文字、链接、下拉菜单等等。是组成界面的最小元素和这些元素的常用集合体。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 5: UI kits

设计模式,比元素更复杂一些,是完成任务所使用的一些基础的、常用的交互方式,是可以解决问题的小型设计方案。比如 Material design 里的 Confirmation and acknowledgement,它提供的就是为机器在执行操作之前向用户确认的一系列设计方案。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 6: 设计模式

简单点来说,设计组件就是一些元素,主要给设计师用的,设计模式就是一些交互方式,主要给研发工程师看的。由于两者很相似,如今更多的会把两者合起来看。

2013 年,前端工程师 Brad Forst 将原子理论运用在界面设计中,形成一套设计系统后,设计组件得到进一步扩展,可以形成比原来最初出现设计模式这个概念时更高层次的集合体,例如,大到几个完整的页面及其包含的交互方式,也可以成为某个设计系统的其中一个组件。

当然,由于各个产品的需求、场景和定位等不同,越大的合成组件将会越复杂。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 7: 原子设计理论

4. 内容资产

在某些设计系统的定义里,可能会把内容资产作为设计规范的一部分,但我这里想强调的是其作为资源的一部分。

由于设计系统是一个有机的整体,在它不断的服务于各产品线的同时,也一定会需要不断填充不同的内容,比如应用里使用的图标、字体、插画、模型等等,这些内容积累下来,也应该成为这个设计系统的一部分,如果有其他的应用或产品需要,就可以直接取用,从而提高整体的工作效率。

内容资产比较常见的有图标库、字体库和音效库,分别提供了多种图标、多种字体和多种音效可以给不同的产品或应用使用。随着插画风格、三维风格的留下,未来必然还会出现隶属于某个设计系统的插画库、模型库,以及在产品里经常使用的文案集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 8: 内容资产

5. 工具、流程

这两块主要是针对设计系统适用的具体环境,在协同性要求下我认为需要纳入设计系统的内容。简单的举例来说,就是如果使用蓝湖做自动化标注,就团队统一使用蓝湖,而不是有的人使用蓝湖,有的人使用摹客。

6. 设计语言和设计方针(guidelines)

还有两个经常提到,但我刚才画的设计系统图示里没有提到的概念。

设计语言:语言,是一个能够达到相互交流的符号系统。人类学家索绪尔认为,语言能反映出多变言语活动背后的稳定规律。所以,我认为这里的设计语言,应该等同于设计规范,是设计规范另一种表述。

设计指导方针(Design Guidelines):按照中文翻译理解,我认为它是说明、介绍设计系的文档,没有包含在设计系统内。

常见问题

最后,设计系统的词云图里出现的玄学、理论化、落灰、空中楼阁……这些都是创建设计系统时很容易遇到的一些问题,尤其是实用性最高的设计组件,更是首当其冲。之前我组织我们团队的设计师做复盘性质的workshop,单就设计系统的设计组件部分,大家就提出了20多条问题。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 9: 设计组件复盘 workshop

综合来说,设计系统常见的问题有三类:

1. 定义性问题

设计系统从大的框架性定义到具体设计组件的定义都不是件一蹴而就的事情,它从 0 开始,每一次的更新和迭代,对于当前的团队来说都需要是既关键又有效的。关键是指设计系统当前定义下来的内容是后面的产品线经常性使用的,有效是指这些定义确定下来的内容是可以使用现有的资源去完成的,即以现有团队的能力、时间和设备是可以完成并达成其效果的。

2. 使用性问题

目录不清晰,文档说明不全,包含资源不完整,这些都是使用时的问题。如果把设计系统看作一个产品,让用户(设计师或研发人员)觉得好用,才是它不会被束之高阁的解决方法。

3. 协作性问题

不知道有更新,收不到反馈,不了解使用者的情况……协作性的问题催生了市面上诸如蓝湖、摹客、墨刀、Codesign以及很多设计软件的云服务功能等。

虽然现在市面上有非常多优秀的设计系统可以参考,但正如在存在原因中提到的,由于它是为了帮助我们自己所在的团队更有效率的工作,终究还是需要靠自己基于实际情况去做变化。


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

文章来源:优设   作者:林影落 



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

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

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



axios 封装,API接口统一管理,支持动态API!

前端达人

分享一个自己封装的 axios 网络请求

主要的功能及其优点:

将所有的接口放在一个文件夹中管理(api.js)。并且可以支持动态接口,就是 api.js 文件中定义的接口可以使用 :xx 占位,根据需要动态的改变。动态接口用法模仿的是vue的动态路由,如果你不熟悉动态路由可以看看我的这篇文章:Vue路由传参详解(params 与 query)

1.封装请求:

  1. 首先在 src 目录下创建 http 目录。继续在 http 目录中创建 api.js 文件与 index.js 文件。
  2. 然后再 main.js 文件中导入 http 目录下的 index.js 文件。将请求注册为全局组件。
  3. 将下面封装所需代码代码粘到对应的文件夹

2.基本使用:

//示例:获取用户列表 getUsers() { const { data } = await this.$http({ url: 'users' //这里的 users 就是 api.js 中定义的“属性名” }) }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.动态接口的使用:

//示例:删除用户 deleteUser() { const { data } = await this.$http({ method: 'delete', //动态接口写法模仿的是vue的动态路由 //这里 params 携带的是动态参数,其中 “属性名” 需要与 api 接口中的 :id 对应 //也就是需要保证携带参数的 key 与 api 接口中的 :xx 一致 url: { // 这里的 name 值就是 api.js 接口中的 “属性名” name: 'usersEdit', params: { id: userinfo.id, }, }, }) }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4.不足:

封装的请求只能这样使用 this.$http() 。不能 this.$http.get() 或 this.$http.delete()

由于我感觉使用 this.$http() 这种就够了,所以没做其他的封装处理

如果你有更好的想法可以随时联系我

如下是封装所需代码:

  • api.js 管理所有的接口
// 如下接口地址根据自身项目定义 const API = { // base接口 baseURL: 'http://127.0.0.1:8888/api/private/v1/', // 用户 users: '/users', // “修改”与“删除”用户接口(动态接口) usersEdit: '/users/:id', } export default API 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • index.js 逻辑代码
// 这里请求封装的主要逻辑,你可以分析并将他优化,如果有更好的封装方法欢迎联系我Q:2356924146 import axios from 'axios' import API from './api.js' const instance = axios.create({ baseURL: API.baseURL, timeout: '8000', method: 'GET' }) // 请求拦截器 instance.interceptors.request.use( config => { // 此处编写请求拦截代码,一般用于加载弹窗,或者每个请求都需要携带的token console.log('正在请求...') // 请求携带的token config.headers.Authorization = sessionStorage.getItem('token') return config }, err => { console.log('请求失败', err) } ) // 响应拦截器 instance.interceptors.response.use( res => { console.log('响应成功') //该返回对象会绑定到响应对象中 return res }, err => { console.log('响应失败', err) } ) //options 接收 {method, url, params/data} export default function(options = {}) { return instance({ method: options.method, url: (function() { const URL = options.url if (typeof URL === 'object') { //拿到动态 url let DynamicURL = API[URL.name] //将 DynamicURL 中对应的 key 进行替换 for (const key of Object.keys(URL.params)) { DynamicURL = DynamicURL.replace(':' + key, URL.params[key]) } return DynamicURL } else { return API[URL] } })(), //获取查询字符串参数 params: options.params, //获取请求体字符串参数 data: options.data }) } 
  • 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
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • main.js 将请求注册为全局组件
import Vue from 'vue' // 会自动导入 http 目录中的 index.js 文件 import http from './http' Vue.prototype.$http = http

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

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

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

elementui导出数据为xlsx、excel表格

前端达人

我这里为了同学们好理解,把所有元素都写到一个页面。

1.第一步安装插件


  1. npm install file-saver
  2. npm install xlsx

2.第二步在mian.js中设置全局


  1. // vue中导出excel表格模板
  2. import FileSaver from 'file-saver'
  3. import XLSX from 'xlsx'
  4. Vue.prototype.$FileSaver = FileSaver; //设置全局
  5. Vue.prototype.$XLSX = XLSX; //设置全局

3.第三步使用 


  1. <template>
  2. <div class="daochu">
  3. <el-button @click="o" type="success" round>导出</el-button>
  4. <el-table
  5. id="ou"
  6. :data="tableData"
  7. style="width: 100%"
  8. :default-sort="{ prop: 'date', order: 'descending' }"
  9. >
  10. <el-table-column prop="date" label="日期" sortable width="180">
  11. </el-table-column>
  12. <el-table-column prop="name" label="姓名" sortable width="180">
  13. </el-table-column>
  14. <el-table-column prop="address" label="地址" :formatter="formatter">
  15. </el-table-column>
  16. </el-table>
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. tableData: [
  24. {
  25. date: "2016-05-02",
  26. name: "王小虎",
  27. address: "上海市普陀区金沙江路 1518 弄",
  28. },
  29. {
  30. date: "2016-05-04",
  31. name: "王小虎",
  32. address: "上海市普陀区金沙江路 1517 弄",
  33. }
  34. ],
  35. };
  36. },
  37. methods:{
  38. o() {
  39. let tables = document.getElementById("ou");
  40. let table_book = this.$XLSX.utils.table_to_book(tables);
  41. var table_write = this.$XLSX.write(table_book, {
  42. bookType: "xlsx",
  43. bookSST: true,
  44. type: "array",
  45. });
  46. try {
  47. this.$FileSaver.saveAs(
  48. new Blob([table_write], { type: "application/octet-stream" }),
  49. "sheetjs.xlsx"
  50. );
  51. } catch (e) {
  52. if (typeof console !== "undefined") console.log(e, table_write);
  53. }
  54. return table_write;
  55. },
  56. }
  57. }
  58. </script>

可以看到已经导出 

实际工作中导出按钮单独抽离出去做到可以复用才是比较合理的




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

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

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

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



国外大佬总结的这20条B端图表设计原则,简直太实用了!

涛涛

最近几年以来,大家能看到B端设计趋势已经越来越火热,在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计,让设计出来的图表高大上,符合业务需求,让业务方和总监对你赞不绝口,本文就必须看完和收藏了,因为实在是太实用!

彩云之前也在我的公众号上分享过一篇关于数据可视化的干货,《如何做好数据可视化设计,国外大神给出了十条实用建议》,今天的这篇算是更加系统和完善了。


应用设计越来越依赖数据驱动,对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表,但我们其实可以通过遵循一些简单的规则来改变这个情况。


1. 选择一个正确的图表可视化类型


选择错误的图表类型,或默认为最常见的数据可视化类型,可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容,可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。 


2. 根据正负值使用正确的绘图方向


当使用水平条时,在基线的左侧绘制负值,在右侧绘制正值。不要在基线的同一侧绘制负值和正值。 


3. 条形图总是以0基线开始


删数据起点会导致曲解。在下面的例子中,看左边的图表可以很快的得出结论,值B比D大3倍多,而实际上,两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。


4. 折线图应该要清晰体现y轴上的趋势变化


对于折线图,总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势,因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。 


5. 使用折线图时要考虑时间连贯性


折线图是由线连接的“标记”组成,通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的,并且对于较短的时间间隔非常有效,但当数据更新不频繁时,这可能会导致混淆。 

例如: 使用折线图来代表年度收入,如果数据是每月更新的,则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值,而在特定时间实际的收入数字是未知的,所以可能会产生误会。在这种情况下,使用垂直条形图可能是一个更好的选择。 


6. 不把折线图强行”平滑“


平滑的折线图可能在视觉上很好看,但它们错误地反映了背后的实际数据,而且过粗的线会模糊真正的“标记”位置。 


7. 避免使用比例不同的双轴折线图


通常,为了节省可视化空间,当有两个具有相同度量但大小不同的数据系列时,可能倾向于使用双轴图。但这些图表不仅难以阅读,而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例,只是浏览图表,然后就得出了错误的结论。 


8. 限制饼图中显示的切片数量


饼状图是最流行的也是经常被误用的图表之一。在大多数情况下,条形图是更好的选择。但如果你决定做一个饼状图,有2个比较好的建议:

1)不要超过5-7片,保持简单

2)可以将额外的最小段分组到“其他”切片 


9. 在图表上直接标注


如果没有适当的标签,无论你的图表有多好,它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。 


10. 不要在切片上贴数据


将数据放在切片上可能会导致多个问题,在可读性问题上和窄切片上都会有挑战。相反,添加黑色标签能清晰的链接到每个部分。 


11. 保持饼图切片秩序以提升阅读效率


在确定饼片秩序时,有几种常用的方法:

1)将最大的切片放在12点的位置,然后将下一片切片顺时针降序排列

2)把最大的切片放在12点的位置,第二大的放在顺时针相邻位置,第三大的放在11点的位置,其余的切片按顺时针降序排列 


12. 避免随机排列


同样的建议也适用于其他许多图表。不要默认采用字母排序,将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图),以确保最重要的数值占据最突出的空间,减少眼球运动和阅读图表所需的时间。 


13. 窄的饼图是难阅读的


饼图通常不是最容易阅读的图,因为比较相似的值非常困难。当我们把中间部分去掉,创建一个圆圈图表时,我们腾出了空间来显示额外的信息,但这样牺牲了清晰度,极端情况下,图表就会变得毫无用处。 


14. 视觉效果不要抢了数据风头


不必要的造型不仅会分散注意力,还可能导致对数据的误解和用户的错误印象。你应该避免:

1)3D元素,明暗面

2)阴影、渐变和其他扭曲的多彩色

3)斑马图案,过多的网格线

4)过度装饰,斜体,粗体或衬线字体 


15. 选择与数据性质相匹配的调色板


颜色是有效的数据可视化的组成部分,在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性,所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合,可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合,中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。 

看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以帮助你生成各种调色板。 


16. 设计的可访问性


根据美国国家眼科研究所(National Eye Institute)的数据,大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1)在调色板中使用不同的饱和度和亮度

2)把现有配色去色然后检查对比度和可读性。 


17. 关注易读性


确保排版能够准确传达信息,帮助用户专注于数据,而不是分散用户的注意力。

1)选择易读的字体,避免衬线和装饰过度的字体

2)避免使用斜体、粗体和全部大写

3)确保与背景有高对比度

4)不要旋转文字

 

18. 使用水平条形图代替旋转标签


这个简单的技巧将确保用户能够更有效地阅读图表,而不会扭伤他们的脖子。 


19. 事先选择合适的图表库


如果你的任务是在web和移动项目中添加交互式图表,你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现,并能提供大量交互想法。 


20. 做成动态图表


帮助用户通过改变参数,可视化数据进行探索。然后得出结论,最大化价值和洞察力。在下面的示例中,你可以看到IOS Health应用使用了各种数据表示的组合。 



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

文章来源:ui中国   作者:彩云Sky 

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

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

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




设计分割,你用对了吗?

涛涛

今天和大家聊聊设计中的分割,很多人新人做设计时,会经常纠结页面分割用什么方式处理,是用线还是留白,还是用投影?今天我们来系统的研究下,分割的类型以及设计时候我们如何去运用。

更多设计文章,设计交流,欢迎添加 | 微信ddm7212

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

一、分割线的作用

分割顾名思义就是做设计时候,分割页面的设计手法,它的目的是让我们的设计更加有序,不同内容在页面中呈现的方式更加让用户容易理解。是帮助内容组织的很重要方式。当然分割有很多种形式,色彩,线,间距,投影,图标,图文等等,今天我们来系统的研究下分割在设计中到底如何使用的,以及什么时候使用什么样的分割最合理,希望大家通过这一篇文章学会和掌握。

很多人提到页面分割,可能脑海第一个想到,就是分割线,或者是色块,其实不然,分割有很多种类型,不同类型在页面中效果也不太一样。那接下来,我们一起来看看页面分割到底有几种类型。

二、用线进行分隔

▲使用水平的分割线来区分页面内容,除了分割内容外,还做到分组的效果。如上图阿迪的app和电商app都是通过类似的方式来处理。常用在表单中,能使界面浏览效率更高,更快速去检索内容;是页面分割中最为常见的。

▲比如在airbnb的案例中,分割线就是用来分割内容,起到分组的作用,让页面阅读起来更加有节奏。

▲在dropbox的设计中,分割线也可以搭配icon来使用,让页面看起来视觉层次更强,同时分类更加明确。

▲分割线可以说是我们每天都在运用的,无论今天的内容设计,还是像dropbox这样的工具产品都离不开分割线。但是分割线运用时候,需要注意分割线颜色不要太深,否则会有山寨感。

▲线太深会让页面不够精致,显得山寨,所以常用的分割线一般是#CCCCCC,#EEEEEE,或者黑色的10%透明度

三、用色块分割

▲除了线以外,色块分割也是比较常用的,一般在页面中用灰色色块来分割,这个色块高度一般20px左右,常用于分割上下两组的内容为主。

▲华尔街新闻app设计中,大量运用色块对页面进行分割,页面模块更加清晰。

▲谷歌浏览器的设计中,运用了色块的分割,模块更加明确。如果你们的产品需要很明确的划分组和组的关系,可以运用这种方式。

▲在很多电商设计中,这种风格目前还是主流,对于页面内容比较复杂的页面,需要这种分割明显的样式去区分模块和功能。

缺点是风格陈旧

用色块分割,需要考虑产品整体的风格规则,这种分割方式一个最大弊端就是风格会有些陈旧,在当今留白,轻量化设计当道今天,太多色块割裂感强,会显得陈旧,所以使用的时候需要根据产品整体风格去把握。

四、用图标进行分割

▲除了线,色块还会通过一些插入式的图形进行分割,如上图,整个都是列表的信息流,在列表的前面适当加一些图标来锚定整个页面,会让页面看起来有更大的空间,浏览起来也更顺畅。

▲谷歌浏览器的设计,也是通过图形来锚定页面节奏,让设计看起来更加合理和秩序感。

▲谷歌新闻的列表设计,表单前面通过数字来锚定整个页面的节奏和空间,让大段文字看起来没那么累。

▲谷歌的产品系列中,表单前面增加图形或者文字会比较多,也成为他风格统一的非常重要的一个DNA。在表单前面加图标或者其他视觉元素能让页面呼吸和留白更加的通透。

五、用留白进行分隔

常用的的线,灰色色块,图标分割这些都比较传统,且对于页面来说一个最大缺点是占据了很多空间,本身移动端屏幕就很有限,线,色块,图标,无形增加了用户认知负担,所以随着设计趋势的发展,用户也更加关注内容本身,所以慢慢的设计开始尝试用空白去分割页面,同时还能消除了页面多余的视觉噪音。

留白在页面中是设计师没有放任何视觉元素,使得混乱的页面看起来有了喘息的空间,空白的原则创建了空间,通过格式塔的运用,用户自动在视线上形成了分割,同时空白为页面增加了很多呼吸空间,并且让设计看起来更加简洁,在当下也是越来越流行。

▲国外知名社交电影软件MUST整个页面都是采用的空白分割运用在它设计中,通过内容去区分页面模块信息。

▲有序的留白,从始至终贯穿着整个页面设计,这种风格也不需要任何线条就能将页面层次很好的传递出来。

▲知名艺术电商网站Artsy就是运用空白分割,页面干净富有艺术气息。空白来分割越来越成为一种主流设计手法。

六、用色彩进行分割

色彩也同样可以用来分割内容,将色彩运用的好,不仅能吸引用户将关注力停留在页面上,更主要是能让用户更方便的注意到你想表达信息内容。

▲Headspace整体页面大多是通过这样的色彩进行分割,色彩本身就是和其他内容有隔离关系,恰到好处的构图,加上色块的运用,很好的将内容和模块区别开来。

▲在他的产品中到处可见这样的设计,不仅让页面非常的年轻活泼,同时这样的配色也会让整体设计让人印象深刻。但是需要注意是不能色彩太花了,图形存在是为了内容做烘托的,最要还是让用户关注内容本身。

▲Stadium live这款直播产品,将色彩玩到了极致,整体页面就通过色彩来区分内容,非常符合娱乐化产品定位。

▲在它页面很多地方都随处可见色彩的大胆运用,这个对于设计师配色功底要求较高。

▲这款APP也是我非常喜欢的一款产品,大家感兴趣可以去下载体验。也是用色彩做分割非常成熟的一款产品。

七、用投影做分割

阴影在设计中是非常重要的一个设计元素,除了能给页面带来设计层次,同时也能很好的区分内容,业内最出名的莫过于的google的材料设计语言,其中就是大量运用投影来营造页面氛围。

▲在google系统产品中,运用投影来做页面分割非常多,投影除了能拉开页面的空间感,同时在视觉上能更加突出。google日历案例中,导航和核心操作加号按钮都加深了投影。

▲google新闻页面中同样如此,除了导航区域,在卡片上也通过投影方式来分割内容,增强层次。

▲在苹果新闻的产品上,同样看见了类似设计手法,通过按钮或图片的投影,增强页面深度的运用,不同于google的是苹果的投影更加柔和。

▲Instacart产品也是如此,通过投影来区分内容,他们的卡片外面都增加了投影加强页面深度。总之,投影是非常好的一种增强页面层次和细节的一种手法,大家运用时候定好场景和规则。

八、行业趋势

以上7种分割方法,基本覆盖了所有视觉的分割手法,虽然没有放品牌和网页的案例,但是大体都是相同的,今天无论我们选择哪种分割手法,本质都是没有错的,关键是要和整体的设计语言调性匹配起来,如果选择一种就运用一种,切忌多种混搭,这样就不会出现页面错乱的感觉。从整体移动端设计趋势来说,曲线、留白和投影来分割是一个大的方向趋势,值得我们多多关注。

最后

今天这篇文章只是一个设计中的基础,它在于帮助我们梳理设计的内容细节,别看一个小点的知识,当你掌握的这些小点知识多了后,你的知识体系就会形成面,最终帮你带来质的提升,今天这篇文章是让你打开系统的思考,希望大家在使用时候,根据自己场景去定义。设计没有一个绝对正确的标准答案,试了才知道。


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

文章来源:ui中国   作者:skys 

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

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

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



MAC上 nodejs express 安装

前端达人

最近在MAC上搭建 nodejs环境以及安装 express 框架,遇到了一些问题,不过最后总算还是安装成功了,下面是操作步骤

1.node js 安装

访问nodejs官网进入下载mac上的安装包 , 从这里下载    这里可以选mac installer 的 pkg 安装包,下载后直接点击安装就好,当然了也可以选择 binary 包进行安装,下载后用 tar -zxvf 命令先解压开然后 编译 在安装。新版本的安装包会把 npm(nodejs 的package管理工具)都会安装上,测试是否安装成功可以下方式测试。

用 node -v 和 npm -v 来查看各自的版本信息,如果node 命令找不到 可以先用 which node 命令来看看安装目录 ,然后就可以用了

其次可以按照nodejs 官网首页提供的 demo js 脚本,写一个hello world 程序, 然后在浏览器中访问看看是否ok,到这里 node js 安装完毕

2.express 安装

express 作为 node js 的一个框架,该框架提供了很多组件,方便了 nodejs 的快速开发。这个就类似与其他语言的一些快速的框架, php中的yii,yp、java中的 SSH。

安装express的时候也可以参考 express官网 的 Getting started 步骤去安装 , 但是我按照这个是没有安装起来。

现在最新的express版本都是 4.0以上 , express4.0以后版本把express命令行工具从express library 中分离出来了(https://github.com/expressjs/generator) , 所安装的方式也变化了。之前一直用

npm istall -g express

 

这个命令工具进行安装,显示成功了,但是命令行中无法使用 express 这个命令。

现在进行全局安装 , 这里根据自己的需求选择是否全局安装。命令如下

npm install -g express-generator 

等到上面的express命令行工具安装完毕后,就可以安装 express 框架

cd /var/www/node
express test && cd test //安装express框架依赖 npm install //启动test这个项目 npm start

这里启动过的时候 不要用 node app.js 这种方式, 你可以 用 vim 命令看看test目录下的 package.json 这个文件的内容,其中找到scripts 哪一行

接着就访问 http://localhost:3000 , 可以看到 welcome express !!!

到这就完毕了





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

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


在MAC环境下之以太坊(ethereum)开发环境安装

前端达人

先访问github上go语言开发客户端网址:

安装ethereum

在MAC上安装

brew tap ethereum/ethereum

brew install ethereum


dogiant@bogon : /usr/local $brew tap ethereum/ethereum
Updating Homebrew...
==> Tapping ethereum/ethereum
Cloning into '/usr/local/Homebrew/Library/Taps/ethereum/homebrew-ethereum'...
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 6 (delta 1), reused 1 (delta 0), pack-reused 0
Unpacking objects: 100% (6/6), done.
Checking connectivity... done.
Tapped 3 formulae (31 files, 33.9K)
dogiant@bogon : /usr/local $brew install ethereum
==> Installing ethereum from ethereum/ethereum
==> Installing dependencies for ethereum/ethereum/ethereum: go
==> Installing ethereum/ethereum/ethereum dependency: go
==> Downloadinghttps://homebrew.bintray.com/bottles/go-1.7.4_1.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring go-1.7.4_1.el_capitan.bottle.tar.gz
==> Caveats
As of go 1.2, a valid GOPATH is required to use the `go get` command:
  https://golang.org/doc/code.html#GOPATH

You may wish to add the GOROOT-based install location to your PATH:
  export PATH=$PATH:/usr/local/opt/go/libexec/bin
==> Summary
��  /usr/local/Cellar/go/1.7.4_1: 6,438 files, 250.7M
==> Installing ethereum/ethereum/ethereum
==> Cloninghttps://github.com/ethereum/go-ethereum.git
Cloning into '/Users/dogiant/Library/Caches/Homebrew/ethereum--git'...
remote: Counting objects: 2737, done.
remote: Compressing objects: 100% (2066/2066), done.
remote: Total 2737 (delta 963), reused 1654 (delta 553), pack-reused 0
Receiving objects: 100% (2737/2737), 14.91 MiB | 112.00 KiB/s, done.
Resolving deltas: 100% (963/963), done.
Checking connectivity... done.
Note: checking out 'ff07d54843ea7ed9997c420d216b4c007f9c80c3'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b <new-branch-name>

Checking out files: 100% (2487/2487), done.
==> Checking out tag v1.5.5
==> go env
==> make all
==> Caveats
To have launchd start ethereum/ethereum/ethereum now and restart at login:
  brew services start ethereum/ethereum/ethereum
==> Summary
��  /usr/local/Cellar/ethereum/1.5.5: 9 files, 47.7M, built in 5 minutes 30 seconds



安装完毕后

geth -h

列出当前的用户
geth account list 
显示空

dogiant@bogon : ~/ethereum/workspace $geth --datadir "~/ethdev" --dev
I1228 15:16:46.907316 cmd/utils/flags.go:615] WARNING: No etherbase set and no accounts found as default
I1228 15:16:46.907493 ethdb/database.go:83] Allotted 128MB cache and 1024 file handles to /Users/dogiant/ethdev/geth/chaindata
I1228 15:16:46.911765 ethdb/database.go:176] closed db:/Users/dogiant/ethdev/geth/chaindata
I1228 15:16:46.912892 node/node.go:176] instance: Geth/v1.5.5-stable-ff07d548/darwin/go1.7.4
I1228 15:16:46.912925 ethdb/database.go:83] Allotted 128MB cache and 1024 file handles to /Users/dogiant/ethdev/geth/chaindata
I1228 15:16:46.935109 eth/backend.go:280] Successfully wrote custom genesis block: e5be92145a301820111f91866566e3e99ee344d155569e4556a39bc71238f3bc
I1228 15:16:46.935127 eth/backend.go:299] ethash used in test mode
I1228 15:16:46.935536 eth/db_upgrade.go:346] upgrading db log bloom bins
I1228 15:16:46.935580 eth/db_upgrade.go:354] upgrade completed in 48.143µs
I1228 15:16:46.935601 eth/backend.go:191] Protocol Versions: [63 62], Network Id: 1
I1228 15:16:46.935744 eth/backend.go:219] Chain config: {ChainID: 1 Homestead: 1150000 DAO: 1920000 DAOSupport: true EIP150: 2463000 EIP155: 2675000 EIP158: 2675000}
I1228 15:16:46.935983 core/blockchain.go:219] Last header: #0 [e5be9214…] TD=131072
I1228 15:16:46.935998 core/blockchain.go:220] Last block: #0 [e5be9214…] TD=131072
I1228 15:16:46.936007 core/blockchain.go:221] Fast block: #0 [e5be9214…] TD=131072
I1228 15:16:46.936626 p2p/server.go:342] Starting Server
I1228 15:16:49.127910 p2p/discover/udp.go:227] Listening, enode://05399f51a43805c17f82e5016d5969d14b3092018cae87eec77ed52291d66c50c7d7bf024d953b0afcccd44c717f17aaf251b897d770054205ea268b49a3050b@10.0.37.126:58049
I1228 15:16:49.128111 whisper/whisperv2/whisper.go:176] Whisper started
I1228 15:16:49.128115 p2p/server.go:610] Listening on [::]:55739
I1228 15:16:49.129641 node/node.go:341] IPC endpoint opened: /Users/dogiant/ethdev/geth.ipc



dogiant@dubiaoqideMBP : ~ $geth --dev console 2>> file_to_log_output
Welcome to the Geth JavaScript console!

instance: Geth/v1.5.5-stable-ff07d548/darwin/go1.7.4
 modules: admin:1.0 debug:1.0 eth:1.0 miner:1.0 net:1.0 personal:1.0 rpc:1.0 shh:1.0 txpool:1.0 web3:1.0

> eth.accounts
[]
> personal.newAccount('123456')
"0x556d64ecb09b5df590a2ab842b53a8041e3961b4"
> eth.accounts
[
 "0x556d64ecb09b5df590a2ab842b53a8041e3961b4" ]
> eth.accounts
[
 "0x556d64ecb09b5df590a2ab842b53a8041e3961b4" ]
> personal.newAccount('123456')
"0xb0945a303834ff763695e21ed8acbe80aefee9bb"
> eth.accounts
[
 "0x556d64ecb09b5df590a2ab842b53a8041e3961b4" , "0xb0945a303834ff763695e21ed8acbe80aefee9bb" ]
>


dogiant@dubiaoqideMBP : ~ $geth --dev account list
Account #0: {556d64ecb09b5df590a2ab842b53a8041e3961b4} /var/folders/jy/q2f6pdjn6p11ytfx0xk8yp7m0000gn/T/ethereum_dev_mode/keystore/UTC--2016-12-28T07-20-52.337017793Z--556d64ecb09b5df590a2ab842b53a8041e3961b4
Account #1: {b0945a303834ff763695e21ed8acbe80aefee9bb} /var/folders/jy/q2f6pdjn6p11ytfx0xk8yp7m0000gn/T/ethereum_dev_mode/keystore/UTC--2016-12-28T07-25-51.683157537Z—b0945a303834ff763695e21ed8acbe80aefee9bb




> user1 = eth.accounts[0]
"0x556d64ecb09b5df590a2ab842b53a8041e3961b4"
> user2 = eth.accounts[1]
"0xb0945a303834ff763695e21ed8acbe80aefee9bb"
> user1
"0x556d64ecb09b5df590a2ab842b53a8041e3961b4"
> user2
"0xb0945a303834ff763695e21ed8acbe80aefee9bb"
> eth.getBalance(user1)
0
> eth.getBalance(user2)
0
> eth.blockNumber
0
> miner.start()
true
> eth.getBalance(user1)
390000000000000000000

> eth.getBalance(user2)
0
> miner.stop()
true
> eth.blockNumber
99
> eth.getBalance(user1)
495000000000000000000
> eth.getBalance(user2)
0
> eth.sendTransaction({from:user1,to:user2,value:web3.toWei(3,"ether")})
Error: account is locked
    at web3.js:3119:20
    at web3.js:6023:15
    at web3.js:4995:36
    at <anonymous>:1:1

> personal.unlockAccount("0x556d64ecb09b5df590a2ab842b53a8041e3961b4","123456")

true
> eth.sendTransaction({from:user1,to:user2,value:web3.toWei(3,"ether")})
"0x39d604a1df899f6c80ce33279abe88aec28b6d97f83e2dda5f062dd3c099fcf3"
> eth.getBalance(user2)
0
> miner.start()
true
> miner.stop()
true
> eth.getBalance(user2)
3000000000000000000


问题1:一开始用get account list总是看不到新建的用户,后来考虑是开发控制台创建的用户要跟开发一致 加了 —dev后看到正常显示账号

看日志以太币转账,转账后需要挖矿确认




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


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档