首页

医疗行业优秀设计分享之一:app设计界面欣赏

雪涛

医疗小程序Redesign
医疗小程序Redesign
医疗小程序Redesign
医疗小程序Redesign

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

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

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

如何通过SEO、SEM和微信公众号运营获取精准用户,达到最大转化

蓝蓝

一、把SEO当作网站运营推广的手段之一,而不是全部

SEO,即搜索引擎优化。可以简单理解为通过利用搜索引擎的算法规则来提升网站在搜索结果页面的排名。当你对某一产品产生兴趣时,想要进一步去了解时,你一般会这么做?

相信很多人会通过这两种方式去了解:

  • 直接找朋友去询问(涉及到品牌知名度)
  • 自己到网上去搜搜看(针对主流搜索引擎)

而SEO,就是让用户在网上搜索相关词语时,你的网站信息能够出现在搜索结果页面的前面,从而更容易的先被用户看到。

如何利用SEO技术做到零预算让网站的精准流量成倍增长?如何使用SEO技巧为其他媒体平台(如公众号、知乎等)有效引流?

(1)找对正确的关键词

A、与公司的业务相关

分析所在行业实际情况,通过公司的相关领导、市场部、销售部了解公司具体业务。根据公司的业务范围,目标用户分布情况、行业、产品专用词汇,以及公司对客户的了解,来选择关键词。

B、符合用户的真实搜索情况

  • 当用户知道你,想要通过网络进一步了解你时,一般会直接搜索公司,品牌词来查看。
  • 当用户只是有意向或有兴趣要查找某一行业的产品时,通常会搜索产品词,行业通用词以及相应的长尾词来查看。
  • 当用户并不知道你也无意向了解时,只是在上网搜索相关的行业资料或者浏览行业资讯时,会通过某些行业通用词和人群词搜索,也可能在无意中看到你,从而知道了你并引发兴趣。

这些词的词性不同,同样也代表着搜索用户的意向程度不同。一方面可以通过百度指数等数据,另一方面可以通过用户调研,了解用户搜索喜好。

C、能够竞争得过同行网站

通过竞争对手网站选择的关键词及实力,百度指数的高低,以及同行业关键词竞争度,来了解这个关键词优化的难易度。根据自己的资源和能力选择对应的关键词,才有可能获得良好的排名。

例如,“钢琴”,“钢琴培训”,“深圳钢琴培训”,“深圳钢琴初学者培训机构”,不同的词搜索量不同,竞争程度及优化难度也不同。

选择与公司的业务相关,符合用户的真实搜索情况,具备一定的搜索量,并且结合自己的资源和能力能够竞争得过同行网站,这样的词才是能给你网站带来精准有效流量的词,而不是靠自己的主观臆断。

来源:小马宋

从SEO的角度来讲,关键词可以分为核心关键词(品牌词,产品词)和长尾关键词(其他的词、长词及由关键词组合成的词)。核心关键词通常布局网站主页,是主要的优化词。而长尾词因为竞争小,搜索量小,但更加精准,同样是SEO必须重视和研究的。

(2)网站引流主要有两种方式

A、通过提升网站关键词排名来获取流量

SEO流量=站点的展现量x页面的点击率

虽然一般网站选择的核心关键词的搜索量会比较大,但因为竞争的关系,一个网站所能优化上去的核心关键词的数量是很有限的,其排名能够占据的首页位置数量也有限,所以除了依靠网站核心关键词的排名来获取流量,我们还应该利用大量长尾词的排名来收割流量。某些长尾关键词优势发挥的效果更佳明显。

例如,一个搜索“篮球鞋”和一个搜索“耐克2018年新款男士篮球鞋”的人,谁的了解和购买意向会更加强烈?

通过对网站专题页或内容页保持持续定期的优质内容建设,做好标题关键词及文章内容关键词的布局(四处一词),注重网站的内外链优化,注重权重的传递,让尽可能多的长尾词获得良好的排名,从而得到更多的展现和点击机会。

做SEO不能单纯的只为做排名而做排名。

传统的SEO往往只是利用搜索引擎算法规则来堆砌排名影响因素,唯一的目的就是把排名做上去就行,往往忽略了网站及内容运营的重要性。

在越来越重视用户体验的时代下,SEO同样要重视分析用户的搜索需求,了解用户搜索这个关键词时是希望得到什么,根据不同的关键词来制作不同的优质的着陆页内容,不然即使把排名做上去了,用户点击后发现不是自己想要的,页面内容也不能马上吸引到他,随即关掉了,又有什么意义。

优质的内容能够吸引用户的关注和兴趣,好的内容设计是可以直接达到特定的转化效果的。

所以,通过良好的核心关键词和大量的长尾关键词排名,在搜索结果页面占据更多的流量入口,来为网站获取到大量的浏览用户。

B、通过网站外部来获取流量

许多人会在知乎里面回答问题,而在个人签名和答案里面通常会提及自己的公众号,或者品牌、产品名字等。还有就是在答案中放置相关内容或者其他推荐内容的链接,如果这个链接同样是链到知乎内的,这种链接我们称为内链,而如果是链接到知乎外的,例如自己的网站,微信文章,这种链接我们称为外链。而这就是我们利用SEO外链技巧来为网站或其他媒体平台最精准有效的引流方式之一。

巧用账号名称及签名

巧用锚文本外链做诱饵

你可以用带有关键词,或者与你网站内容相关的标题,寻找与你行业相关或符合目标用户群体特性的网站平台上,通过放置锚文本外链的方式来为自己的网站或平台带来流量。当然也要注意遵守每个平台的规则,当有些平台不给放置链接时,则用植入某些关键词或软文方式来引流。

另外,通过第三方平台,例如自媒体,论坛,门户,百度产品类,新闻源等等,有意识的选择带有特定的关键词或长尾关键词文章标题进行优质文章的编写和发布,一来是借助这些平台本身的流量,二来是这些内容很可能同样被搜索引擎收录并获得好的排名;而针对今日头条,大鱼号,企鹅号等采用算法分发机制,针对不同人群,千人千面推荐不同内容的平台,我们则要注重平台规则及用户的喜好来设置好标题风格及内容,从而获得更多的曝光率。

就这样,通过尽可能多的第三方平台,利用大量关键词、长尾词及内容形成矩阵化布局。经过长时间积累,甚至可以达到全网覆盖的效果。从而抢占更多的排名和曝光,为网站带来大量源源不断精准流量。

例如我们当时因为同行业并不注重互联网宣传,关键词竞争力度小,无疑给我们很好的机会,最终当用户搜索行业内的某些相关行业关键词时,我们的产品信息占到了60%以上,为网站的自然流量带来数十倍的增长。

当网站开始有了固定的流量后,更深入的就是分析网站流量来源及用户的浏览行为路径,停留时间,转化等,来调整网站的内容规划以及进行不同渠道的筛选。

讲完网站引流的免费方法,现在我们接下来讲另一种付费的。

二、SEM的本质就是购买精准流量

魏泽西事件发生后,虽然对竞价行业造成了很大的影响,但通过对身边很多朋友,同事以及咨询过来的用户的了解,其实大部分人依旧不懂的区分竞价和自然排名,而在非医疗类的行业,对于真正有需求的人来说,并不会在意这些,能找到需要的东西,才是最重要的。

SEM广告与自然排名的区分

1、购买流量的本质是购买有效用户

相对于SEO,SEM在创意展现和页面内容创作上更加的自由,其排名与关键词设置及出价等有关,不受搜索引擎规则影响。

竞价投放除了推广技巧,同样考究对自身产品与竞品的了解,及对目标受众群体心理的把握,从关键词的挖掘,竞价账户的搭建,再到关键词出价策略,地域、时段的投放,创意文案的编写,营销着陆页的设计引导,以及客服/销售的沟通等都会影响最终的结果。整个过程从展现,点击,访问,咨询,订单(有些行业访问后直接就到注册或下单)等各个环节转化呈漏斗形态。

来源:百度

在讲SEO时,我们提到用户会多次搜索不同的关键词来了解我们,这些词的词性不同,也代表着搜索用户的购买意向程度不同。而由于信息的多样性,大部分用户在了解信息时往往会进行多次搜索了解对比后,才会产生购买或进一步行为。

简单来说,用户在搜索阶段的转化行为就是一个需求过度的阶段。

  • 第一阶段:有了兴趣,收集信息,了解相关产品介绍 —— 搜索量大,转化低
  • 第二阶段:产品对比,集合自己需求对比优势,价格等 —— 搜索量中等,转化中
  • 第三阶段:品牌选择,已产生明确意向,有一定信任度 —— 搜索量小,转化高

从知晓-熟悉-考虑-购买的过程

这对于SEM来说,如何把握好用户在每个环节的心态,要更为注重。因为涉及到广告费用的快速消耗,SEM要更加注重最终的转化效果,如何获取更多的精准流量,减少用户在每个环节的流失率,提高每个环节的转化率,最终获得有效用户促成订单,是降低CAC(获客成本),提高ROI(投产比)的重要手段。

推广转化漏斗及各环节影响转化的因素

2、SEM如何用更低的成本,做到最大的转化?

(1)账户优化要开源节流

SEM广告展现的范围和精准程度离不开关键词的选择和出价。从漏斗的思维上看,账户的优化要把握好四个字:开源节流,开源就是打开流量,节流就是阻止无效流量。提高预算,扩宽匹配模式,降低关键词出价等都是开源的办法,而缩窄匹配模式,做好否词等则是节流的办法。

在关键词的选择上,一方面我们要最大化的圈定潜在客户群体,另一方面则要精准锁定目标客户群体。

(2)精细化的账户搭建

我比较推崇对整个账户做精细化管理,在最初搭建账户时,就对账户结构做细致的分类,例如将同一个维度的关键词进行长尾和核心划分,便于高效管理。也可以根据不同的受众心态层次,消费能力等进行关键词的划分,以目标受众群体的特征来参照。

来源:网络

(3)针对不同的关键词编写不同的创意

不同的关键词代表了不同用户的不同需求,针对不同的关键词及受众人群有针对性的编写不同的创意,多采用短句的形式,突出产品特点及目标受众的吸引点,同时注重关键词的飘红。从而获得更多目标用户的兴趣和点击。

例如奶茶加盟,有资本有投资经验的用户更注重的是投资回报率,创意中可以突出“年收入XX万”;而有些资金少,无经验的用户可能更关注的是如何用最少成本开店运营,这时创意里可以突出“0加盟费,0押金,全程培训指导”等。

(4)针对不同的创意设计不同的着陆页

可以把关键词及对应的创意做一个归类,针对不同的人群,及创意内容,来设计不同的着陆页内容。

着陆页是最直接涉及到是否能直接达到销售或转化的目的,所以着陆页的设计是整个推广环节中最为重要的转化环节之一。

做访谈,做调研。制作着陆页之前,一定要真正做到了解行业特点,站在用户的角度上去了解用户需求,挖掘用户真正的痛点,找到用户的不满,为用户消除不满,告诉他怎么解决,这样可以解决。即站在用户的角度上去思考问题,去帮他解决问题,帮他找出说服他自己的理由。(想起曾跟在商超大姐大妈身后学习了近一个月的售货技巧,产品思维和用户思维成交率差别真的很大)

例如:

针对品牌词,我们用的是品牌实力+产品特色+产品价值+用户信任感+咨询优惠的内容来设计着陆页内容;而针对产品词,我们用的是品牌实力+用户痛点+解决方案+产品对比+用户信任感+咨询优惠的内容来设计着陆页内容。

由此来提高页面的咨询(下单/注册)转化效果,也可通过A/B测试进行对比,逐渐调整页面,提高咨询(下单/注册)量。

同时做好账户数据积累,数据对比观察,分析数据之间的差别化,及时发现问题来源,根据数据信息来决定整个账户的优化方向。

运用这些方法调整,我们在预算不变的情况下,咨询量提升了2倍以上。

通过常用的渠道铺设,占据流量入口;而通过品牌传播,占据用户认知。公众号则是我们传播品牌,进行目标用户积累,培养和转化的其中一个重要方式。

三、微信公众号运营,价值决定成败

我们所在的是一个非常细分的ToB垂直行业,属于某个行业专用的管理类系统,具体是哪个的不说了。我们在全国的潜在目标用户,即有购买决策权的用户人数在2~3万左右,而属于该同行业的人群大约在7~8万左右。用户年龄在35~55岁之间。而产品具有高价,复购率低,项目实施周期长等特点……

To C和To B 用户的本质区别

2016年初的时候我们公司开始做微信公众号。当时小编负责运营公众号内容,后来我帮忙建立社群,做会议直播,创建微课堂邀请行业的大伽来线上讲课等等。再后来当竞价账户稳定了之后招了新的SEMer来负责,我开始专注研究起公众号的运营策划。通过学习其他行业公众号做粉丝裂变,做用户活动等,3个多月的时间,公众号粉丝人数翻了1倍,头条平均阅读量提高了3倍以上,通过公众号来的月有效咨询数量提高了数十倍。并在8千多粉丝时做出行业内第一篇阅读量10万+的文章。

1、微信的红利真的过去了吗?

从我们公众号上转化成我们的产品咨询用户的很少是靠我们的营销活动,绝大部分都是用户的主动咨询。

目前我们还仅仅是靠粉丝的拉新和促活,在几乎不主动营销的情况下,只是提供一个了解和咨询产品的诱导入口,自然就做到的粉丝转化。(其实我们并不提供软件试用,也没有任何优惠活动)

公众号菜单入口

而这些信息通过我们销售打电话联系后,确认有明确了解意向并进入下一步沟通的占到70%左右。而这些筛选后的信息我们才称为是有效咨询(信息)。

相对于微信刚出现的前几年,现在微信所起到的效果确实并不如从前,一是随着公众号的数量越来越多,内容上人们的可选择性太多了;二是各种平台,例如直播,头条等的出现,也在不断瓜分着人们的碎片化时间。但不管变的是新的内容承载形式,还是新的内容展现形式,内容价值本身的重要性却是一直是不变的。

如何利用公众号提供与众不同的内容,对用户真正有价值和被认可的东西,未来将会变得越来重要。相对于在内容越来越多和竞争越来越大的大众领域,垂直细分行业内容的稀缺性和专业性,则要更具有优势。

2、企业公众号除了写产品还能干什么?

从一开始我们所有的工作都坚持围绕精准粉丝来做,为了扩大品牌影响力,我们也仅是把目标放大到该行业里的人群里。因为行业特性的关系,我们很清楚非精准粉丝对我们的实际工作并不会有任何的帮助,而精准粉丝才是我们最终能够转化并获得收入的真正用户。

(1)以用户为中心,为用户提供有价值的东西

如何为用户提供有价值的东西?用户需要什么?所有的推广运营工作之前都需要先对你的用户做一个清晰的画像,从职业,年龄,城市,家庭,收入,兴趣,标签等等维度去分析用户的特征,真正去了解你的用户,知道他们想要什么,对什么感兴趣。

最开始时,我们自己准备了一张清单,列举了一些用户可能会关注的内容,以及微信的使用行为习惯等,并让市场部提供给我们一张已经购买过我们产品的用户名单,然后一个个打电话过去询问。通过这种方式来决定每天公众号要提供的内容类型,以及推送频率和时间。当时最尴尬的是遇到不少上了年纪的用户微信使用频率低,甚至不会基础的微信操作,也是靠很长的时间才把一部分用户习惯培养起来,这也是我们文章阅读率偏低于其他行业的原因。后面则通过社群及公众号后台的数据来判断用户的喜好,由此来测试和调整内容。

通过为粉丝用户提供行业内的政策资讯,知识干货,微课堂,学术会议直播,社群运营等不同形式的内容来留住用户和促活;通过后台文章的阅读量、转发分享量、点赞数等数据分析,判断文章价值和用户喜好,来筛选调整内容类型,通过提高内容转发分享来拉新。

另一方面,经过几种不同方式的测试,目前对于我们用户群体来说拉新最好的效果还是资料干货分享裂变。微课堂最近也开始尝试做裂变的分享,以前用的是填报名表收集用户信息。

也尝试过收费,但效果一般,我们一般都是以免费为主,因为我们也并不靠这个牟利,目的还是在于品牌的传播。但从最近一次课程裂变的效果来看同样并不如意,一方面是新增用户的抵触心理,也可能和用户特性(身份地位,岗位竞争压力低,学习动力不足)以及课程内容(只作为增长管理知识补充了解,而不是专业技能培训)有关系,导致裂变比率偏低。

所以我们也打算尝试改变方式,一方面可以让新增用户先听课,取得他们的信任感和对课程的认可,后面再采取裂变的方式;另一方面可以采用先关注公众号后进群,转发分享的人可以参与抽奖,通过这种方式来的吸引更多的人主动来转发裂变。在促活的前提下再考虑拉新和转化问题。

接下来也打算把一部分目标放在行业内即将及刚晋升管理层的用户身上,他们相对于老一任更为年轻,对新鲜事物的熟悉和接受程度更高,也对学习有较高的兴趣。

(2)帮助用户,你得到的会是用户的友谊和信任

  • 有用户打电话过来问我们出不出书,说一直看我们的公众号内容,对他的帮助很大。其实我们的内容大部分也都是从网上收集整理来的,有时会进行二次编辑,原创很少。
  • 有咨询我们产品的用户自己会这样说,觉得我们的每天发的内容写得好,微课堂的老师也讲得不错,我们的产品肯定也不差。
  • 还有在某个行业群上看到有人提及到我们的产品时说,产品不知道好不好用,但经常能看到他们的信息,说的还是挺好的。
  • 也有遇到过当别人有需求找熟人询问时,对方说自己用的其他家的产品不满意,觉得我们的应该不错,推荐他用我们的。

……

3、全国目标用户群体不到10万,粉丝只有8千多,如何能做到10万+文章?

后台文章数据

最初是受了某些垂直类公众号的启发,做的一次尝试,利用粉丝群体的特性,找到粉丝与群体大众的一个连接点,一开始也没想到真的就10万+了,确实也有些运气的存在。

我们当时利用的是行业的一个政策热点,其实我们在这之前的上一周也发布过一篇同样的政策资讯,但当时阅读量只有1千左右,而两篇文章的不同在于,第一篇完全是针对业内的政策资讯,而第二篇我们则把这个政策对民生的影响,以及网上对这一政策的反应被赞同较多的且有争议性的观点整理了出来,而通过我们的粉丝群体,无疑是在该领域比较有权威,以及比较接近事实真相的人转发扩散出去,就这样火来起来。

之所以能够突破目标群体总数的限制,除了内容本身具有传播性(价值或情感驱动),最主要还是粉丝群体里kol属性的发挥了作用。

例如某个针对医生的平台发布了一条疾病预防或健康保养信息,一开始可能只是会在医生的小圈子里扩散而已,而你发的信息首先引起医生们的赞同和重视,具有他们愿意去主动传播的价值或动力。医生在各自的圈子里的健康领域都有一定的影响力,通过一个医生的转发出去效果是有限的,但如果你平台的粉丝都是医生,当有100个,1000甚至更多的医生都在对外转发时,普通群众无疑会更相信由医生发出来的信息,再次转发相互告知,这样造成传播的量级就更加庞大了。

就像现在很多品牌做活动时都会去找符合自己目标群体的KOL合作一样,想想如果你的公众号粉丝其实天生就具备某些KOL属性呢?

这样会不会带来粉丝不精准?

总阅读量20万+的文章给我们带来了近2000的粉丝增长,从我们公众号后台的前后半个月数据来看,20万+前后几天取关人数只在100人左右,一个月内取关的人数和以前基本持平,并没有异常波动,而粉丝增长之后的文章阅读量都在明显增长。这可能也与我们文章头部和底部引导关注公众号时对自己有清晰的定位有关。

10w+前后取关数据

四、找准适合自己的渠道才重要

比较可惜的是,因为行业和产品,以及目标群体特性的原因,很多新的媒体平台的玩法都不适合我们,例如我们的用户很少有上微博的;投放神马几乎没有流量;通过今日头条投放得到的用户信息相比其他渠道信息质量太差,CAC太高等等。

不过,接下来还会继续研究尝试其他的渠道以及不同的运营方法。一方面是为了开拓渠道寻找业绩突破点,另一方面任何一个特定的方法和特定的渠道内能获取的总流量是有限的,随着时间的增长效果也会越来越差,成本越来越高。

好了,这次的分享就到这里了,希望以后有更多机会能够再次和大家一起学习交流。

 

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

作者:彦心

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

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


设计驱动!体验UP!高手设计师必备工具包

seo达人



图片

作为一名设计师,除了支持日常业务需求,对产品体验进行整体把控也是我们工作很重要的一部分。

即使体验再优秀的产品,也会不断出现各种各样的体验问题。这些问题累积到一定程度,就需要通过「驱动体验优化专项」来解决问题。

比如:新产品上线,以功能实现为主,缺少对体验细节的推敲,容易引起体验问题;产品竞争白热化,需要与竞品的体验拉齐;产品日常运营过程中,不断收到用户反馈、不断发现体验问题。

主导和推进体验优化专项是对设计师综合能力的考验,也是成为高手设计师必会的事情。

但业内相关文章并不多。

于是我们针对「设计师如何主导和推进体验优化专项」进行研究,从「定」—「找」—「解」—「推」四个环节进行总结,并为大家提供相关工具包和实际案例,以期可以开箱即用,并抛砖引玉、启发大家更多的思考。

图片

共分为方法和案例两篇。本篇为方法篇。

 

图片

无论是发现了问题进行集中地优化,还是作为一种优化制度持续优化,优化专项持续的时间都不会太短。为保证顺利进行,在前期需要作出明确的规划。

规划需要结合产品的目标与规划,与产品侧形成合力。所以规划要与产品、技术共同制定。

制定体验规划的五个要素

一般需要明确以下内容:优化范围、问题获取、优化目标、参与人员、时间节点。

图片

体验专项的五个阶段

需要注意的是,规划要清晰、明确、可执行。

可以将整个项目划分为前期启动、问题获取、方案产出、需求落地、项目复盘五个阶段。

每个阶段均需明确:「时间」、「人物」、「任务」、「产出」。

图片

 

图片

在这个环节,我们需要整理已有的体验问题,并在必要时进行补充调研,对问题有更全面、更细节的认识。

如何获得体验问题?

体验问题通常来自五个方面:用户挖掘、设计走查、竞品参考、老板反馈和产品提供。

图片

如何使用这些方法?

以上方法可以综合使用,例如用户反馈某个功能有问题,可以设计自查看问题是否清晰,可以做用户观察看实际使用情况,可以通过数据分析获取操作细节,也可以参考竞品了解不同的解决方案。

将方法按照使用场景、问题的指向性和结论类型进行分类,大家可以根据具体情况灵活选择:

图片

 

图片

区分坏点、优化点和需求点

首先我们来明确三个概念:

坏点:有明显体验问题的问题点,体验层面。

优化点:针对一个或多个坏点的解决方案,设计层面。

需求点:一个或多个相关优化点组成的需求点,或目前没有满足的需求,产品层面。

从问题解决角度来说,它们不仅仅是不同阶段的产物:

我们获得问题的最初,坏点、优化点、需求点可能同时出现在各种信息源中,混杂在一起。后续需要把坏点转化为优化点,成为问题解决方案。解决方案再拆分整合成为一个个需求点,进入产品计划,推动落地。

而且对于把握问题的本质,也至关重要:

优化点、需求点,如果追根溯源,都可以对应到体验上的坏点。我们收集到的优化点和需求点,可能并不是当前最好的解决方案,需要挖掘出对应的坏点,制定最优方案。

如何还原为坏点——追问法

只要不断地追问,就可以挖掘出坏点。

例如在审批流程中:

用户:我想要个点一下系统就能发通知给处理人提醒TA审批的功能。(这显然是个需求,需要还原为坏点)

追问:什么情况下要提醒TA审批?

用户:有时候时间紧迫,不审批就耽误事了;有时候虽然不耽误事,可领导没批感觉心里不踏实。

追问:什么时候比较紧迫?

用户:比如考勤,我今天请假,但明天就是考勤截止日了,必须立即批才行。

追问:为什么想要系统发通知?

用户:因为如果我直接提醒老板,我不太好意思,感觉系统提醒能好一些。

图片

ok,至此,我们基本明确了用户的体验坏点:部分紧急流程需要及时去提醒审批,部分流程审批人想尽快结束,但申请人又不想以个人身份去提醒。

这个坏点需要深入洞察审批人未及时审批的原因,再给出解决方案很多,且不一定要采用用户提出的解决方案,而应该综合考虑,选用最佳方案。

归类—推导—转化

1.将问题点归类

分组是为了把同类或者相关的问题点聚合,寻找系统性的解决方案,而不是「头疼医头,脚疼医脚」。

举个例子:

可按照不同页面、控件、功能、流程、系统来进行归类,如:申请表(页面)、目录树(控件)、收藏(功能)、审批单(流程)、导航(系统)。

2.推导出优化方案

这个也是设计师最拿手的议题——「如何解决问题」,即针对一个/组用户痛点去设计方案。这里可以应用平时方案产出的各种推导方法,包括创意方法。

同时应该注意到,问题也许不能仅通过设计手段解决,所以此过程需要产研同学参与,确保方案有效且可实现。

3.转化为具体需求

方案只有转化为具体需求,才能进入产品规划、落地上线。这也是重要的一步。

优化方案和需求的粒度不同:有时候需要把优化方案拆成不同的需求分拆上线,有时候一个需求又能同时涵盖多个优化方案。这需要根据优先价值,结合产品侧的规划进行。

如何判断优化价值

每个问题优化价值是不同的,我们可以从产品侧、用户侧、数据侧三个方面去衡量:

产品侧:看可行性。是否契合产品的中长期目标?是否符合产品的发展节奏?是否易于技术实现?时间资源成本如何?

用户侧:看影响力。是否是用户使用的核心流程、关键页面?影响的用户范围多大?用户角色的权重(主要指B端)是否较大?

设计侧:看价值感。设计的ROI如何?能否体现设计的专业度?能否提升设计的话语权?

图片

 

图片

设计师虽然主导了体验优化专项,但又不掌握开发资源,如何更好地推动落地呢?需要掌握一些技巧。

推动落地中的四个对齐

对齐是为了及时对齐信息,减少团队中的信息差,使团队成员互通有无。不但可以提升协作效率,还能使大家感到被尊重和需要,使大家拧成一股绳。

四个对齐包括目标对齐、进度对齐、方案对齐和效果对齐。

图片

目标对齐:确保在项目启动和各个阶段产品、设计、技术各方达成统一的目标。可以通过启动会和重要节点会议进行对齐。

进度对齐:项目周期比较长时,需要注意各阶段的进度对齐,掌握进度和风险。方式有排期进度表、定期例会、定期邮件等。

方案对齐:这是比较容易忽略的一点。需要产品、设计、技术甚至用户做方案对齐。我们目标明确,是为了切实解决用户的体验问题的,方案一定要有效,且可以实现。所以要关注方案是否能解决用户问题(方案评估、测试)、是否能够技术实现(方案评审)、方案实现效果(方案验收)。这点做得不好,优化效果就要大打折扣。

效果对齐:上线后需要针对两个效果进行对齐:一是优化效果如何、是否达成了目标(效果评估)。二是项目运行得如何,有什么经验和教训(复盘总结)。及时的团队复盘,有利于大家扬长避短、取得更好的成绩。

形成长期的体验优化机制

对于体验问题,我们不能寄希望于体验优化专项「毕其功于一役」,而是要建立长期的体验优化机制。

包括:定期整理用户反馈、定期走查、定期与产品技术沟通优化计划、阶段性复盘等,建立良好的体验优化通路。

 

图片

相信看完文章后,大家对「主导和推进体验优化专项」的方法有了一定了解。后续我们将会发布实战篇,分享具体实例。

 

原文地址: 58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网 » 设计驱动!体验UP!高手设计师必备工具包

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用色块打开排版的思路,简单好用!

seo达人


❶ 色块要有明显的主次,要有大小对比、色彩对比、轮廓对比等。

图片

图片

❷ 色块的数量要适当控制,太少了显得单调,太多了会很碎。

图片

▲比如上图的色块就过于零碎了。

图片

▲上图就要好很多。

❸ 不要把所有色块都严格对齐,否则会很死板。

图片

图片

❹ 由于几何色块本身比较单调、生硬,所以色块内的信息和图形可以灵活一点,可以增加一些细节,比如装饰元素。

图片

❺ 不一定要把所有的信息都放进色块里,把个别信息、元素放出来,可以使版面看起来更灵活。

图片

图片

下面葱爷给大家分享几个案例,来看看色块排版具体是怎么操作的。

 

案例一:服装画册目录设计

下图是某服装画册的目录页设计,其实也是用了色块来排版,但是整体很混乱,信息分组不明确,而且很不精致,所以需要对它进行调整。

图片

❶ 原稿几乎把所有信息都放在一个大色块一中,这么做色块就没起到区隔信息的作用,所以我把背景分成了三块(颜色全来自图片),最上面的放标题,下面两块分别放两组内容并对齐排版,使信息更清晰、更易读。配图保留原稿把图片放入方形色块的方式,只是去掉了多余的描边。

图片

❷ 重新设计标题。黑色太过突兀,所以我把它改成了粉色,并给副标题也加了一个绿色块,副标题与标题以及下方的绿色块叠加,既增加了画面的层次感和设计感,也加强了上下两个空间的联系。

图片

❸ 将内文的排得更精致一点。首先,选了一个欧式风格的字体,给内文中的四组信息分别加上序号,在风格与排版上与其他元素形成鲜明的对比。其次,把内文的颜色从黑色改成与对应色块的深色,融合性更好。最后,在小标题和正文之间加入短线条,做区隔和装饰的作用,并适当调整正文的行距。

图片

图片

❹ 用网格系统稍作规范就完成了。

图片

图片

 

方案二:儿童蛋白粉单张设计

下图是该版面需要展示的主要内容,文字较多,而且基本上是大段大段的,但信息组别并不多,大概可以分为四五个部分。

图片

❶ 将属于不同组别的信息和元素分别放入色块中进行区隔,色块颜色来自于品牌logo和包装。

图片

❷ 这样划分色块层级太少,而且矩形色块太硬,不太适合儿童产品,所以把标题和小标题都单独拿出来了,并把色块做了圆角处理。色块缩小后,产品图片有一半露在外面,正好起到打破方块的作用。

图片

❸ 标题需要突出设计一下,但由于左上角有Logo,所以如果把标题拉大,那么左边就会有点拥挤,右边则会比较空,所以把产品图片和产品介绍的文字左右调换一下更好。功效证明的文字太多,句子也很长,所以我把它分成了两栏,提高文字的易读性。

图片

❹ 把标题字体改成宋体和衬线体,并把产品图片下方的色块改成圆形,加强视觉上的对比效果和灵活性。

图片

❺ 把标题的文字改成右对齐,并跟与下边功效证明文字的右栏对齐,这样左上角的留白会更舒服一些,平衡性也更好。

图片

两个正文的大色块里全是文字所以略显单调,于是我在文字上下加了一组波浪线,细节上会更精致一点,到这里这个单张就排完了。

图片

 

方案三:移动宽带海报设计

下图是移动宽带的一则促销海报,也是用了色块排版,该画面中的信息其实挺清晰的,主次分明,也有一定的视觉冲击力。问题在于美观性不够、形式过于普通不时尚、排版很呆板,下面我们来对它进行优化:

图片

❶ 将该画面中的信息一一用色块框起来,原方案把“100M宽带优惠用”放在一个大色块里,层级关系太少,视觉变化不够丰富,所以我把它分成了三个色块(由于移动的调性还是比较年轻的,所以我打算用孟菲斯风格来做)。另外,原方案中的优惠套餐被处理成三个很平均的色块,看起来既分散又缺少变化,所以我把他们组合在了一起。

图片

❷ 将“100M宽带优惠用”这几个色块进行适当错位排版,并在其下面增加一个大的色块(可以看作是电视机的屏幕),以使版面变得灵活且主次分明。

图片

❸ 给文字色块加上立体效果,加强版面的空间感和信息之间的层次感。

图片

❹ 只有文字和矩形色块的画面太过单调和生硬,所以我加了一些与宽带相关的图形元素进来,比如代表视频的播放器符号、代表网速快的闪电符号、代表互联网的箭头、代表网线的曲线。整个版面变得生动、活泼了很多。

图片

❺ 在背景中加入网格底纹,使背景与主体形成呼应,视觉上也没那么单调,并把活动时间和办理方式从最下面的色块中调出来放在视觉主体的下方,与其他的文字色块形成对比,

图片

❻ 再调整一点细节就做完了。

图片

图片

色块排版的用法还有很多,通过改变色块的风格、造型、组合方式等等,可以创造出非常多样的效果,所以用色块排版也不一定会很死板、很粗暴,比较适合表现时尚、冲击力强的设计需求,但确实不太适合用于表现高端、高级的视觉,这点需要注意一下。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》用色块打开排版的思路,简单好用!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



想把表单设计做到极致,居然有这么多细节需要注意,学到了!

seo达人



图片

比如以登录为例,当你把密码输错后,网站清空你刚刚才填好的表单,是不是非常让你崩溃?删除所有数据对用户来说很烦人,这会让你必须重新输入用户名和密码,即便只是拼错了密码而已。

因此,任何专业的用户体验设计师不仅应该考虑顺利的流程情况,还应该考虑失败时应该怎么办。

 

一、错误提示

错误提示应该让用户容易找到原因并方便理解。否则,他们可能没办法解决这些错误。所以对于设计师来说,一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么,如果可能的话,最好也提供解决方案。

图片

左边的错误信息很清晰的解释了发生的问题,右边的错误信息对用户来说非常困惑。

1.1什么时候告知用户发生了错误比较好?

当用户出错后,首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式:

  • 内联/实时:在输入时或移开焦点后立即提供反馈。
  • 提交后/客户端:当用户点击提交按钮之后
  • 服务器端:当请求发送到服务器后再返回反馈给用户

这些方法中的每一种都有其优点和缺点。

1.2内联验证

一般来说,当表单非常短小时用内联验证,因为它允许在内存中的数据仍然最新时更正错误。

图片

你可以用内联验证立即告诉用户哪里错了。

”尽可能的进行内联验证“”这种类型的错误消息很容易被察觉“,此外,输入完成后立即告知错误,对用户的交互成本最低——UX专家Rachel Krause

另一位专家Luke Wroblewski建议,当问题的答案不明显时,可以使用内联验证。例如,在选择用户名时,用户可能不知道哪些用户名可用。在这种情况下,在用户输入数据时立即告知错误可能会有所帮助。

1.3提交后验证

另一方面,当表单很大且需要保持关注时,你希望帮助用户保持专注,而不是通过不断显示错误来打断他们。

“使用内联验证,用户必须在两种截然不同的思维模式之间反复切换:填写表单和纠正错误。这减慢了用户的速度,增加了认知努力,通常会降低用户的满意度。”Jessica Enders在她的书《设计UX:表单》中写道

1.4服务器端验证

服务器端验证是最不友好的方式,但却为网站提供了很高的稳定性。当需要二次检查用户的数据时,这种方法最有效。

1.5如何提示用户错误?

错误提示告诉用户他们做错了,但是他们究竟做错了什么,要如何修复它?很显然,清楚地说明错误,而不仅仅是显示Error:90803,对用户有很大帮助。

图片

使用用户能理解的话,而不是用专业术语

1.6使用积极语言而不是消极语言

错误提示措辞要使用积极语言而不是消极语言。例如,如果用户遗漏了一个字段,与其说”该字段不应该是空的“,不如说”请填写此字段“。当使用积极语言时,用户不会因为一个错误而受到责备,这能减少用户的焦虑感,减少流失。

1.7必要时提供帮助

在某些情况下,用户无法自己修复错误,他需要额外的帮助。例如,当用户无法登录时,大多数应用只提供找回密码,而没有找回用户名。但事实上,用户名和密码都可能会忘记。因此,在这种情况下,尝试提供所有必要的操作和信息资源来帮助用户解决问题。

 

二、标签

标签是表单可用性最关键的组成部分。如果标签不清晰,那么其他元素就算把可用性做得再好也没意义。所以,不要让用户来猜测这里面到底要填什么内容。

图片

不要用一些模棱两可的词,比如”数字“可能会让人感到困惑,一定要明确意思。

2.1将标签放在输入字段的顶部

许多研究表明,将标签放置在输入字段的顶部可以帮助用户更快地填写表单,因为它允许用户遵循一条垂直线而不是Z模式。但是,如果它占用太多的垂直空间,您也可以使用浮动标签。因此,如果你希望用户更快地填充表单,请将他们放置在字段的顶部。

图片

将标签放置在字段的顶部和使用浮动标签,这两种方式都很有效

2.2将标签放在输入字段的左侧

另一方面,当你询问用户比较复杂的问题,用户需要更多时间思考问题答案的时候,研究表明将标签放在输入框的左侧会比较好。

图片

当用户需要思考答案时,将标签放在输入框的左侧会更好

2.3标签应该是可见的,无论什么输入状态

无论你用什么方式,确保当用户填完内容后,标签是可见的。因为,当用户需要再次确认表单内容的时候,他们不用删除填好的数据来查看系统需要他们填什么。

图片

不管输入状态如何,标签都应该是可见的

2.4减少不必要的输入项

要填的表单越多,用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到,可以将必填和非必填的字段区分开,减少用户的负担。

2.5可见性

不管状态如何,字段都应该是清晰可辨的。此外,活动字段和非活动字段之间的区别应该要明显。

图片

输入字段应该有高对比度,在所有状态下都是可见的。

2.6自动激活PC端表单的第一个字段

自动激活表单的第一个字段,这可以提高处理效率,避免用户额外点击。

2.7帮用户预先填好

在某些情况下,你可以帮用户预先填好字段。例如,可以很容易地检测到邮政编码,或者某些数值可能是频繁的。在这些情况下,为用户填充字段。

2.8格式

含有大量小数的数字很难读懂。因此,当要求较大的数字时,需要考虑添加格式以支持可读性。例如,在询问卡号时,使用自动格式化:读取5678-9876-9738-8394比读取5678987697388394容易得多。

此外,当请求需要特定格式化数据时,要包含一个实例,让用户准确理解要填什么。

图片

帮助用户了解如何格式化数据

2.9表单区域大小

输入框的大小应该要与所填的内容长度相匹配。比如,当要用户填写用户名时,如果显示的填写区域是一个长段输入框会让用户感到困惑。另一方面,如果你希望用户写一些反馈,但只能看到所写内容的最后一小段,那就很难用了。(彩云注:我就经常在一些体验不好的产品上碰到过这种情况,简直太难受了。)

如果你不能准确预测信息的长短,比如留言反馈,建议表单区域最好是能在用户填写内容触碰边界时,自动变高。

图片

输入字段的大小应该与它预期的数据大小相对应

2.10为桌面系统设计灵活的表单

在键盘和鼠标之间切换很烦人。在理想的情况下,用户应该只使用一种媒介来填写表单,但有时,这是不可能实现的。因此,如果用户需要多种媒介来填写表单,至少要尽量减少切换。为此,将需要同一种工具的输入组合在一起。

另外,当创建一个网页表单时,要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。

2.11为移动端系统设计灵活的表单

当在移动设备上时,将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点,但几乎很少有APP显示支持输入电子邮件地址的键盘。

图片

支持通过显示正确的键盘输入电子邮件

 

三、下拉菜单vs单选按钮

下拉框的使用比单选按钮更有挑战性,因为它需要额外的点击来打开它们。此外,用户无法提前看到选项,这可能会让他们感到困惑。因此,如果你只有少量的选项,使用单选按钮。如果选项的数量超过4个,下拉菜单的效果会更好。

3.1复选框

通过勾选复选框,用户应该是同意某些内容。我的意思是,他们应该说,“是的,我想要这个”,而不是,“是的,我不想要这个”。不幸的是,我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时,你又必须勾选复选框,像这样的伎俩对信誉是不合适的,所以不要动心使用它们。

图片

通过勾选复选框,用户应该同意某些内容,而不是确认他们不同意。

 

四、结构

一个结构充分的表单就像一个与用户的良好对话。所以记住这一点,仔细规划结构。

4.1从简单的问题开始

从简单的问题开始,从用户已经很清楚知道答案的问题开始,像名字、邮件这类。然后再循序渐进问稍微复杂的问题,像账户信息之类的。

首先,一个很自然的顺序,当你第一次见某些人的时候,你会找一些比较好切入的问题,比如叫什么名字啊之类的。其次,当用户已经填了一些字段之后,那么之后会增加他填完表单的机会。

4.2创建逻辑信息块

将不相关的信息按逻辑分组。例如,你可以将结帐表单分为“个人信息”和“帐户信息”组,将信息分组可以帮助用户一次只考虑一个主题。

图片

通过对相关信息进行分组,使表单可被快速扫描

4.3单步VS多步表单

当你有很多问题要问的时候,你可能想知道哪一个最有效:单步流程还是多步流程。一般来说,单步表单的转化率更高,因为它看起来更小,而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单,单步表单就非常不错。

当用户被要求必须填写更多复杂信息时,多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心,可以给到进度条,提示还剩多少步。

4.4单列vs多列布局

一般来说,用单列布局会更好,因为可以帮助用户更好地扫描,也可以尽量减少用户遗漏填写。

但当用户多次填写同一个表单时,他们更喜欢多列表单,因为这样不会浪费时间滚动。一般来说,在B端应用中这种多列表单会比较合适。

 

五、按钮

设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊,会容易劝退新手用户。

图片

根据用户按下按钮会发生什么来命名按钮

5.1提高用户的容错率

对于更复杂的表单来说,按钮最重要的一点是,应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子,如果用户点了在线帮助时,他已经填好的数据不应该被丢失。或者,如果用户由于意外点击了按钮,请求不应该被提交。

5.2主要按钮和次要按钮应该很容易区分

为了避免点击错误的按钮,用户应该能比较容易地区分主要和次要按钮。另外,最好不要只依赖颜色,样式上最好有比较大的差异。

图片

让主要和次要的按钮样式上有比较大的区分度

5.3正确的标签按钮

按功能明确地标注按钮。例如,如果按一个按钮可以创建一个账户,在按钮上的文案叫”创建账户”要好过“提交”

 

总结

当用户打开表单时,他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。

不幸的是,这里面提到的许多错误,并不需要多么高级的技巧,而是因为设计没有同理心。仔细思考你的设计流程,检查是否能让所有内容对不同背景和专业知识的人都是清晰的。

通常来说,一般要达到以下目的,大多数指导原则都来自这些规则:

  • 用户应该只输入一次数据
  • 用户应该填尽可能少的信息
  • 用户应该只需要记住少量的信息
  • 用户检查和恢复错误内容应该要很容易

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》想把表单设计做到极致,居然有这么多细节需要注意,学到了!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



探索优秀LOGO背后的技法与思路!

seo达人


话说自从著名资本家胡晓波先生对训练营的同学下达坚持打卡两年送一台苹果手机的许诺之后,同学们纷纷战意满满,激情四设,每天就是手机碎片+1,手机碎片+1 的做练习…而本意是激励大家好好练习的波哥,整日忧心忡忡,省吃俭用…好怕自己两年后被原地榨干…

为了更好的协助大家吸资本家的血,丰富自己的武器库。本次教程整理了八个由易到难的 LOGO 设计方向与相应的 Ai 技法,大家可以用闯关的方式一各一个的逐个攻破,体验感会更好哦!话不多说,我们开始吧!

文章末尾另附视频版本,对步骤有疑惑的同学可以跟着一起实操一遍,嗯,是真的想教会你呢。

PS:本文所有案例均来源于网络,只用作分析技法。

 

 

图片

首先出场的是一个雪花造型的 logo,复杂的线条纹路让它看起来既神秘又迷人,虽然看起来很麻烦,但其实我们很容易就能发现它的规律性:

1. 由六个相同的单一元素旋转复制得到;

2. 线条倾斜角度均为 60 度。

OK,掌握了这个规律,我们用网格大法很轻易就可以将它绘制出来,来,上步骤!

图片

首先我们先画出网格,用几条等距的直线,然后群组整体旋转 60 度复制左右两组,即可得到。

想要做这种倾斜角度相同的线条,网格可以帮助你更好的进行规范。

图片

然后我们沿着网格将单一元素的路径用钢笔工具绘制出来,这里需要注意两点:一是每一个端点处最好对齐网格的点;二是有转折的地方要一笔连过来,方便后面加圆角处理。

图片

画好路径后我们将它转曲,然后添加圆角,注意添加圆角的规律,一般外圆角会比内圆角大一些,而且相同的角度一定要设定相同大小的圆角。

图片

单一元素处理好之后,我们把它沿着中心点旋转复制 60 度绕一圈,就可以得到我们想要的图形了,一般操作就是复制一个然后 CTRL+D 进行重复即可。

图片

最后添加颜色和排版就可以了。

一般越复杂的 logo 想要做的出彩,往往都需要一些规则性在里面,而网格能够很好的帮助我们去实现这种规则性。

 

 

图片

这是今年意大利申办 2030 年世博会的 LOGO,整体造型由罗马古城门向内进行线条发散组合而成,寓意各国文化的友好交流。这种线条混合发散的 LOGO 既简单又出效果,用混合工具即可轻松完成,下面我们来看一下在制作过程中有哪些需要注意的点。

图片

首先我们将需要混合的部件准备好,也就是建筑的外轮廓以及大门的外轮廓。注意一定要保证左右对称,否则混合起来会十分混乱,然后下面的底部先不要连接上。

图片

这一步需要注意下面连接处不要合并,不然会出 bug。

图片

选择混合工具,分别点击城堡和大门,将指定步数改为一定的数值,数值越大,越密集,这里设定为 35。然后就得到了向内混合发散的感觉了!

图片

混合完成之后我们扩展出来,将最外圈轮廓直接向外扩大复制出轮廓线即可。

图片

最后我们整体进行转曲,然后添加颜色就搞定了!可能有的同学会觉得这种多线混合的 logo 过于复杂,会不会不太好应用,但其实这种属于活动型 logo,并不需要用个五年十载,活动型 logo 更着重考虑当下,可以做得更个性,一切以视觉为出发点!

 

 

图片

看完了国外的,再来欣赏一下这个极具中国风的湖州城市 LOGO。这个 LOGO 的亮点在于它的正形背景部分是由不规则的水墨感条纹组合而成的,文化气息拉满的同时让图形更加活力生动,我们来看看这种非对称条纹该怎么绘制。

图片

首先我们将椭圆部分的线画出来,第一步找到最高点和最低点,然后用混合工具进行混合,得到由曲线逐渐变成直线的过程线段。

图片

然后手动的将各个线条扩大到椭圆轮廓的位置,并调整好粗细和间距。

图片

到了最关键的一步了!我们将每条线的描边配置改为这个不规则的样式,在描边窗口最下面就可以找到,记得适当调整粗细保持过渡自然。

图片

然后我们把每一条线都改成这个描边样式,并将下半部分水波纹的地方也绘制出来,注意下面的地方描边可以调的细一些。

图片

画好背景后,我们将负形部分的塔形建筑放到条纹的中间,并居中对齐,改为白色。

图片

光变成白色肯定不行!我们要的是镂空!这里直接选择所有图形,然后用路径查找器里面的分割,可以将所有图形分隔开,然后用魔棒工具选择白色部分,直接 Del 删除即可。

图片

最后加入渐变色!效果就拉满了!这种非对称式的线条相较于普通的线条,更加灵活生动,也天生自带中式笔触的感觉,以后大家碰到中式 logo 的命题,可以考虑尝试一下这个风格。

 

 

图片

这个 LOGO 在 2D 平面的基础上,融入了褶皱感 3D 立体的感觉,同时它的组合结构是类似于飘带这种飘逸柔和的造型,比普通的方形更加优美。下面我们来看看如何做这种飘逸的结构以及如何进行视觉 3D 化的实现。

图片

其实如果你的钢笔工具玩的 6 的话,直接画也是可以的,但是相信在座的各位钢笔都不太行,甚至很多同学经常被只会 Flash 的胡晓波嘲讽,那能忍吗?这里教大家一个曲线救国之路,先画一条直线,然后选择扭曲和变换里的波纹效果,大小设为 100,隆起数改为 1,就得到了一个…emmmm,优美又不太对劲的曲线。

图片

将这个波纹线砍掉一半,嗯,总算正常一些了。

图片

把它向下复制为六个,并适当调整一下间距。

图片

将组合好的图形向右镜像复制一个,然后放到它的下面,对齐左边的端点并连接,形成一个翅膀的感觉。

图片

然后再次左右镜像复制一遍,基本的造型就出来了。

图片

选择实时上色工具,分别按路径填充黑色部分。

图片

最后删除掉多余的描边,并合并黑色部分,效果就出来啦!用这个方法可以做出来很多种曲折线,大家可以尝试一下,肯定可以组合出各种好玩的样式出来。

 

 

图片

像素化风格的 LOGO 也是常年比较流行的,不光光是游戏行业,其实很多企业类的 LOGO 也可以非常好的利用像素化进行视觉呈现,很多同学只闻其名,不懂其法。下面我们用这个案例来看一下像素化 LOGO 的设计步骤。

图片

由于是企业类的 logo,在造型上就相对严谨一些,除了正常的方形,这里再给大家介绍几个常用的比例(如上图),经过比较,发现青铜比较接近于原 logo…那我们就用青铜的比例,做出王者的效果。

图片

绘制网格有两种方法,一个是画好矩形之后,选择对象→路径→分割为网格,二是直接用矩形网格工具绘制。这里因为我们提前画好了矩形,所以直接用第一种方法,行数和列数分别设为 52 和 11。

图片

画好网格之后,就可以请出我们的老朋友实时上色工具,在网格中挥洒你的创意。

图片

用实时上色工具画好之后,需要扩展一下,才能提取出画出来的部分。

图片

最后我们将网格线删除,就可以得到我们画好的图形了!纯纯矢量的像素化就这么搞出来了!这个方法是通用的,你可以通过改变不同的网格数量,来绘制不同像素块造型的图案,比如你想绘制常规的正方形像素块,那行数和列数设为相同的即可,之后就在里面进行填充色块,真真正正体验到画画的快乐!

 

 

图片

平面构成作为设计学的基础学科,通过点、线、面三者规则或不规则的编排和组合,形成极强的抽象性和形式感,它在 LOGO 的实际应用中也非常容易出效果。这个 LOGO 就是通过线与面的结合来进行抽象创作,下面我们来看一下具体的实操过程。

图片

第一步我们先把六边形轮廓和中间的三角形画出来,其实就相当于我们新建一张画板,在里面进行设计是一个道理。

图片

第二步我们画三条辅助线来方便后续的操作,注意这里的线都是有规律的,比如最下面的线是与三角形形成 90 度相交,而另外两条线都是沿着三角形的边进行延伸。

图片

第三步我们将下半部分的线绘制出来,具体操作如下:

1. 沿中心画一条直线,再沿六边形边画一条直线;

2. 两者进行混合,步数设为 24;

3. 左右进行镜像对称复制;

PS:这一步其实也是在画辅助线。

图片

第四步我们接着用实时上色工具,将我们需要的部分提取出来,这里实时上色工具其实就是充当了马克笔的作用,大家可以想象一下,这样比较好理解。

图片

画好其中一个部分了,剩下的我们直接旋转 120 度复制出来就可以,这里也是软件操作的方便之处,比在纸上快多了,容错率也高。

图片

旋转之后我们发现左半边部分黑色会大出来一块,所以我们需要取消编组后,将这个部分单独置于底层,就可以了。

绘制这类 LOGO 的核心要素就是画好辅助线,同时特别锻炼人的思维和创意能力,它更像一件数学与美术结合的艺术品,当你成功完成之后,一定会成就感满满。

 

 

图片

这一趴给大家带来的是苹果 2022 发布会 LOGO 中多层彩色混合渐变设计小技巧。既然大家都是即将拥有 iphone16 的人,那实时掌握自己手机的未来动向也是必须要做的事情。来吧!学起!

图片

第一步肯定是要先画好基本造型,不管是苹果也好,是梨也好,造型画不好,再好看的渐变也救不了你啊!

图片

然后我们先给它添加渐变色,这个大家应该都会。

图片

接着我们需要给它添加一个描边,这里要把透明度模式由正常改为柔光,并适当降低透明度,这样外轮廓不会过于生硬,能够更好的与图形渐变进行过渡。

图片

到了最关键的一步,我们将图形向内缩小复制一个,给它填充上黑色,然后用混合工具将两者进行混合,就可以得到一个由外向内逐渐消失的渐变效果了。

图片

然后我们选择比例缩放工具,向内缩小 80% 并复制出来,接着按 CTRL+D 重复复制即可。

图片

其他几个苹果只需要更改相应的渐变配色就可以啦。

图片

身体做完了,上面的小叶子也是用同样的方法就可以搞定了,右下角另一个版本的用相同的做法也同样能够实现,但是想要完全还原它的投影效果可能要用到 AE 插件来完成,这里挖个小坑,感兴趣的同学可以尝试一下。

 

 

图片

东京奥运会作为史上极具争议的一届奥运,带来了不少热点和话题。相较于它鬼畜的开幕式和一些莫名其妙的的比赛细节,它的 logo 却实实在在的堪称顶尖硬货。由很多很多不规则的小方块堆积而成,看似琐碎无章法,但其实拥有极强的数学逻辑和艺术美感,下面我们就来看一下它的设计过程。

图片

看到这个图,是不是就能瞬间明白一些东西了?原来确确实实是有规律的,所以我们只需尝试画出其中一个部分,剩下的重复复制即可。

图片

先画出一个十二边形,然后复制一个旋转 90 度,将它们进行居中对齐,这里需要手动调整一下大小,保证里面的顶点对齐到外面的边上,中间我们画一个小圆,方便后面找到中心点。

图片

这一步我们先在最上面画出三个菱形,具体操作如图。

图片

然后再找到中间部分,一样通过已经存在的三角形来进行旋转 180 度复制,之后合并出新的菱形。

图片

和之前一样的手法,一样的配方,继续画菱形…

图片

继续拼贴菱形,不过新加入的红色部分和之前的黄色部分是重复的,所以我们直接复制过来就可以了。

图片

继续增加红色部分菱形,具体操作步骤如图。

图片

右边再添加最后一块菱形,这一部分就算完成了!

图片

下一步我们需要找到各个边的中心点,将它们进行连接,这里给大家安利一个比较常见的小插件(百度搜索 Ai 插件很多下载地点,由于版权问题就不直接分享了)里面的等分路径可以快速帮你定位到线段的中心点。另外里面还有很多其他的野路子,大家可以自己慢慢玩。

图片

找到中心点之后(如上图左)就可以将它们分别连接起来,画出方块!如果说之前的几步完全不知道在干嘛的话,那么到这一步是不是有种豁然开朗的感觉?

图片

后将画好的部分绕中心旋转一圈,再删除掉外轮廓线,终于完成了…头发掉了好多…向大师们致敬,salute!这个方法其实也是平面构成中的一种,大家可以跟着自己做一遍,一定会有自己的收获。

Okkkkk,那么今天的教程到这里也就结束了,不知道你们能攻克到第几关呢?临摹不是目的,学会举一反三才是最重要的。觉得意犹未尽的朋友抓紧跟着下方视频版本再来温习一遍!!总之,是很感谢今晚的相伴,感谢三连支持,朋友们,giao 辞!

 

▼ 点击图片前往原文观看视频版

 

原文地址:胡晓波工作室(公众号)

作者:告白天

转载请注明:学UI网》探索优秀LOGO背后的技法与思路!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



刷新设计的千奇百态(UI设计)

seo达人


前言

刷新在产品中属于基础功能,方便用户获取最新动态,是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等,设计发挥的可控性较大。

今天黑马哥就结合一些优秀的线上案例,和大家聊一下关于产品刷新设计的千奇百态,希望抛砖引玉,和大家一起进步。

 

分享目录

一、关于刷新设计

二、刷新的设计形式

三、线上优秀案例分析

四、总结

 

一、关于刷新设计

在产品中刷新对于用户来说并不陌生,是经常使用的基础功能,便于用户获取新动态。在一些可以提供内容更新的产品中,刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为下拉刷新,其实刷新的动作不仅限于下拉手势交互,也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时,底部标签栏首页图标会变为刷新的操作,通过点击实现页面内容的刷新;也有产品在上滑页面时实时加载完成刷新,就像很多影视类产品或者瀑布流设计的产品。

 

图片

 

刷新动作不仅可以满足用户的求知欲,也能通过源源不断的内容增加用户黏性,提高用户的使用体验。

 

 

二、刷新的设计形式

简单的刷新动作已经不是简单的设计了,在产品设计师的创新中呈现出了众多的优秀案例,下面为大家梳理一下不同的设计表达形式。

2.1、系统级表达

系统级表达是采用系统默认的一些处理形式,类似于花瓣循环的动态形式,属于比较常规的表达。也有很多产品采用系统级形式,用户理解度较高,设计创新的角度来说欠缺一些,表现形式比较生硬。

图片

 

2.2、情感化文案表达

为了带给用户更有温度的设计,除了在图形层面进行情感化设计发挥,在文案上面也可以更加情感化。有产品使用俏皮可爱的话术,每次用户刷新都呈现不同的文案,与用户产生情感共鸣。

图片

 

2.3、动态形式结合

刷新的动态表达形式非常普遍,图形动效和动作演变等,能够体现出加载的动作。动态形式结合可以使得趣味性更强,动画演变的过程也能降低加载等待过程中的焦虑感。

图片

 

2.4、IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感,也能带来更加情感化的体验。IP 形象结合到刷新设计中,伴随着动态演变,以此来体现加载的过程。设计形式动感化,趣味性强且感官体验较佳。

图片

 

2.5、品牌基因结合

立足于品牌做设计,品牌感可以带来差异化的设计表达,也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中,带来差异化的刷新体验。

图片

 

2.6、业务属性结合

根据业务特征设计刷新图形,让用户在刷新的过程中感知产品的业务属性,也是强化记忆点的有效形式。

图片

 

2.7、多功能结合

刷新设计更多的还是为了给用户提供更多动态内容,除了这个底层需求以外,也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”,进入活动空间或者其他功能模块,也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法,在有限的资源空间发挥更多操作价值。

图片

 

2.8、其他设计形式

随着体验的重要性升级,产品设计师会在更细微之处探索出更优的解决方案,做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计,从感官层面带来更多视觉感的表现,从体验层面结合更多辅助功能或者业务,发挥更多使用价值。

 

 

三、线上优秀案例分析

通过以上的梳理我们对刷新设计有了深入的了解,下面通过一些优秀的线上案例来进行分析,辅助大家掌握更多差异化的设计表达。

3.1、情感化的文案设计

刷新除了在图形设计和动效层面发挥以外,多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊,通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时,都会显示不同的文案内容,有功能引导的提示文案,也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度,不失为一种差异化的功能设计探索。

图片

 

3.2、动态化 IP 形象

针对下拉刷新这一常规操作,设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作,被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处,下拉刷新时两只耳朵摇摆非常俏皮可爱,松开后 IP 形象露出,还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现,拉近与用户之间的亲和力,带给用户更人性化的使用体验。

图片

 

3.3、刷新带来美食诱惑

在完成刷新功能属性的同时,还能将产品的属性或者服务卖点强化出来,赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中,采用汉堡形象结合层级动效进行表达,让人眼前一亮。动效拉长的汉堡不仅体现出份量感,激发用户的食欲;汉堡形象就十分麦当劳,展现出品牌关联性。

[优化输出图像]

 

3.4、趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多,不仅可以带来情感化的体验,也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象,还通过下拉的程度将形象拉长,最后再配合表情和动态营造出趣味性。

[优化输出图像]

 

3.5、动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在,在下拉刷新过程中完美的结合了转动条,还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点,装饰元素的动态效果也强化了氛围感,非常符合产品的属性,是一个不错的刷新设计案例。

图片

 

3.6、品牌化路径动效

刷新设计中采用路径动效的表现形式比较多,主要集中在图形路径动效和品牌文字路径动效,图形通常是品牌 LOGO 为主,这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效,完美的匹配了图形轮廓,动效的流畅度也比较自然。

图片

 

从品牌层面着手于刷新设计,如果放弃图形层面的元素选择,品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中,以路径动效的形式进行表达,最终将笔画打散散开。设计表达依然延续了品牌感,也区别于其他产品的刷新设计,在差异化方面呈现出了自身的品牌特征。

[优化输出图像]

 

3.7、一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽,下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影,下拉不松手就会一直处于骑行状态,下拉的反馈体验度做得很好。

图片

 

3.8、漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多,特别是行走和跑步,这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中,在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达,流畅的动效完美的呈现了学生放学或者上学时,背着书包漫步的场景。这样的呈现方式不仅贴合功能含义,也能与用户产生更好的情感共鸣。

图片

 

3.9、业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程,带有业务属性的图标不仅可以直观的突出产品特性,3D 图标化之后视觉感十足。图标切换带来的动效流畅自然,匹配刷新动作的差异化也非常明显。

图片

 

3.10、刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求,一些电商类产品也赋予了刷新多功能的属性,带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时,短距离下拉依然属于刷新范围,继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下,融入了多功能场景,开发出功能或者活动的全新曝光入口。

图片

 

在商品详情页时下拉则无法提供刷新服务,为了给予更好的反馈设计,下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈,足迹的提供也更方便用户做出选择。

图片

 

同一个产品也并非只能呈现出一种刷新设计方案,不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点,刷新的过程以动态形式表达品牌字,简单粗暴的传递出品牌感。

图片

 

3.11、结合 Slogan 完成刷新

刷新不仅只是内容的更新,产品设计中呈现出更丰富的表达,比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命,带来丰富多样的使用体验。

58 同城首页在下拉刷新时,除了体现刷新动态以外,也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度,更快的将产品的定位传递给用户,增加用户对产品的好感度。

图片

 

3.12、保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计,区别于常规的氛围营造,设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺,在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程,整体的过度和衔接也恰到好处。

图片

图片

 

3.13、探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外,背景层发挥的案例相对较少,除了配合传播性质的设计。

AcFun 在下拉刷新时,背景层设计成类似于宇宙空间的插画场景,刷新的过程就像探索一样。配合卡通形象左顾右盼的动效,带来的感官效果也是非常不错的。

图片

 

关于刷新设计的优秀案例很多,这里就不一一例举了,以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品,总结更多的优秀案例。

 

 

四、总结

刷新设计作为产品中使用较为频繁的基础功能,与用户的接触也是非常密切的,设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验,或者是多功能结合等,都是产品设计师重点发挥的模块之一。

本文以案例分析为引导,为大家梳理了刷新设计的形式与思路,希望可以抛砖引玉,带给大家更多的设计灵感。总结观点属于个人理解后的呈现,如有欠缺大家选择性吸收和修正补全。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》刷新设计的千奇百态(UI设计)

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



头像篇 | 帮你快速掌握头像基础设计知识!

seo达人

最真实的例子,当我们在某社交软件将头像设置成帅哥/美女,搭讪与被搭讪的概率会成倍提升,这也是为什么行骗的人总是会先设置一个美女头像(背后抠脚大汉)总能提高成功率的原因,头像的魔力可见一斑。不论是真实社交、虚拟网络,甚至跟社交毫不沾边,任何应用只要有用户的概念,就会有头像的存在,只不过产品头像权重、用户重视程度不同而已。在这个“看脸的时代”,跟陌生人搭讪的成本很高,第一步就用看头像来确定是否建立社交关系是最直接快速的方式。

UI设计中,95%以上的应用会涉及到头像元素,例如消息列表、个人中心/主页、会员服务、评价、排行榜等功能版块,明明用昵称或几个文字就能说清楚的地方,偏偏设计了一个头像、而且还占据该信息组的主视觉。那么,看起来简简单单、或方或圆的小头像到底还有哪些我们不知道的细节知识,今天笔者就通过这篇文章跟大家聊聊头像元素的方方面面,希望对大家有所帮助,欢迎共同探讨,相互交流。

图片

 

一、头像在UI界面中的作用

1. 多账号区分

出于特殊原因,很多销售、客服等职业,在同一个应用中可能会存在多个账号,需要确认自己当前登录的是哪个账号时,查看头像就是最好的区分(需设置不同的头像)方式,当然也有一些非正常需要的用户有另外的小号,相信头像也会有所区别,其作用这里不便多说,避免「社死」。另外,如QQ登录、微信账号切换页面,也会利用突出的头像来快速区分账号信息。

图片

2. 凸显自身形象

某个用户使用了一张成熟稳重、端庄得体的形象照作为个人头像时,在大多数情况下,这个人一定不是个动不动就爆粗口的键盘侠或网络喷子,虽然“隔着屏幕你又打不到我”,但在发表内容时会注意自己的措辞,潜意识的维护自己的网络形象(头像),这就是现实与网络中头像的人格映射。当碰到匿名社交时,为自己戴上面具后就会变得肆无忌惮,与前者相比,至少不再那么约束。

图片

3. “面对面”沟通代表

很多时候,不管是跟好友聊天、还是在不同的应用中留言评论,有头像的用户总感觉是在进行平等交流,这么说感觉很抽象,下面举个例子:

如果是一个单身男性,当社交应用中有人加好友或请教问题时,针对有美女头像的用户,其响应效率、质量都会比其他头像的用户要高,这是不争的事实(别杠,我们不谈个例),这也说明自己时刻都在注意在对方心中的形象,总担心被对方看“穿”。

图片

二、各场景中的头像类型

1. 默认头像

非强制登录的应用,切换到个人中心时,一般会有一个默认头像占位,可以是人物形象剪影或品牌吉祥物,以确保用户在登录之前保持页面的完整性。另外,即便用户登录后有上传自己的头像,但遇到网络延迟、头像加载失败、匿名操作等情况,系统默认头像都可起到临时替补的作用。常见的默认头像有灰色、彩色两种色彩模式,其二者各有利弊。

1)灰色头像

灰色头像色彩感较弱,可能会导致视觉不平衡,打破画面的美感,但也正好通过这一丝的不和谐,用一种明显且突兀的方式提醒用户去更换头像,强迫症患者几乎无法抵抗。

图片

2)彩色头像

绝大多数是结合品牌色、吉祥物等进行展示,还能起到丰富画面、增加趣味性的作用,相比灰色头像则更加生动,不管用户是否登录、有无更换头像,都能保持界面的视觉平衡,唯一的缺点可能降低用户更换头像的欲望。

图片

2. 系统推荐头像

1)用户选择

大家早期接触的QQ就是最典型的案例,系统提供了多种头像以供用户选择,甚至将部分头像纳入了QQ会员功能,当用户没有合适的图片作为头像且难以抉择时,使用系统推荐的头像不仅能降低用户的选择成本,还能满足部分个性化需求。如果默认头像跟产品相关联,也可作为品牌传播途径,两全其美的选择。

另外,最近很火的匿名社交应用Soul 只能使用系统头像(可自定义调整),不允许上传图片,这源于平台希望用户抛开颜值,通过不同的个体审美、价值观等进行心灵交流,找到真正的灵魂伴侣。同时,因为庞大的用户量,图片是否合法、质量的好坏带来了一系列的监管问题,使用系统推荐头像,在很大程度上能降低图片管理成本。

(PS:强制使用系统头像跟产品定位有着绝对的关系,并非拍脑门决定)

图片

2)系统选择

注册成功后,系统会随机匹配个人头像,相比用户自己在列表手动选择,则多了一份神秘感与期待感,让头像的设置变的更有趣,例如小红书、B站等应用。

图片

3. 文字头像

常出现在移动办公类应用中,由系统自动处理,基于OA类应用社交属性并不强,大多用于内部团队工作中的沟通交流,例如钉钉、纷享销客、飞书等。为了更清晰的获取对方个人信息,这类产品头像更倾向于上传自己的真实照片(部分企业强制),在用户未上传照片的情况下,系统会提取中文名字中的后两个字(两个字的全名显示)、英文名字前两个字母作为个人头像使用,方便团队成员更好的辨认。

图片

4. 群组头像

只出现在群聊中,由多个群成员的头像组合而成,不同的应用对头像上限的设定不同,最为常见的是4个、9个两种。群组头像大多数不支持自定义上传,会根据当前群成员的数量(1-4人、1-9人)进行宫格排列,且不会超出设定的上限,例如钉钉群、微信群、QQ群等。

图片

5. 用户头像组

在部分应用场景中,产品将多个用户头像堆叠组合在一起,通过“羊群效应”引导后续用户产生从众心理,以提高转化率,例如有多少用户已购买、多少用户已中奖等。另外,视频平台的直播间也会将排名靠前的用户头像组合排列并展示出来,吸引其他用户关注。

图片

6. 历史头像

1)同平台

QQ会将用户之前使用过的头像搜集起来并单独提供一个入口,用户需要换头像时,可再次选择使用,虽然重新使用的几率并不高,但也不失为一种情怀,用户能清楚知道头像更换的历史轨迹,满满的回忆感。

设置微信头像时,也可选择使用上一张头像,方便用户设置新头像后反悔,可以理解为撤销本次更换操作,如果需要对图片进行裁切,也方便用户跟上一张头像反复对比。

图片

2)跨平台

第三方登录的标配,用户无需重新编辑,就可以无差别继承第三方账号的头像、昵称等信息,节省了大量的时间及操作成本,例如微信、QQ、支付宝、微博授权登录等。

图片

7. 其他头像

除了上述头像类型外,还有如视频头像、GIF头像、轮播头像等,这些并不常用,了解一下就好。另外就是之前刮起的一阵虚拟形象社交风潮而爆火的捏脸头像,极具针对性的新型头像类型,如果感兴趣,可以去下载Soul、崽崽APP体验,这里不多做赘述。

 

三、头像状态与附加操作

1. 不同的用户状态

用彩色头像和黑白头像来区分用户是否在线是最直观的表现方式,例如打开QQ好友列表,对方当前是否在线一目了然。除此之外,QQ的在线状态还延展了多种子级状态,例如:离开、忙碌、听歌中、请勿打扰…等,设置成功后,会以小图标的样式重叠在头像右下角,好友看到后能清晰感知当前状态下是否可以立即联系你。抖音采用了较为简单的方式,头像右下角有绿色小圆点显示表示在线,没有则代表离线。

图片

2. 事件通知

常用于非社交类应用(社交应用有更专业的处理方式)的未读消息/事件通知,显示在头像右上角,点击查看后会消失。可设计不同的样式以体现视觉的强弱关系,对用户产生不同程度的引导。

  • 弱提示:小圆点提示,填充红色或主体色,提示程度较弱;
  • 中等提示:白色圆形+数字提示,数字色彩可以是红色或主体色;
  • 强提示:圆形白色描边及红色填充+数字反白,较突兀的提示方式。

图片

3. 挂件/装饰

很多挂件只是纯粹的装饰品,能起到美化、娱乐、趣味性的作用;增值服务、特权服务、认证类的标识更是一种身份的象征,体现出荣誉、尊贵的感觉;有小部分应用将用户的勋章标识重叠在头像某个位置,时刻给用户带来一种坚持完成任务之后的成就感,满足其虚荣心的表现。

图片

4. 交互操作

在很多应用中,个人中心页面的头像区域隐藏了设置功能,点击后会进入到个人主页、个人信息页或更换头像页面。还有一些无实际功能作用、纯趣味化的交互,例如双击微信好友的头像“拍一拍”、拖动即刻个人中心头像会出现一个红心等,不同程度的给用户制造意外惊喜。

图片

还有部分应用,在头像右下角通过有明确指向含义的图标引导用户操作。例如在完成表单过程中需要添加头像,上传成功后,头像右下角会出现删除图标;Soul个人中心头像右下角增加了个性商城入口;QQ、即刻则通过相机图标提示用户点击可直接更换头像,这种引导性的图标都相对较小,需要精准点击,为避免无效操作,在不影响其他交互的情况下,请尽量扩大图标热区范围。

图片

 

四、方形与圆形的定义

虽然我们用过、研究过大量的互联网产品,但也许真的没怎么关注过头像的形状,以当前几个主流的产品为例,QQ、抖音是圆形头像,而微信、钉钉则是方形(圆角)头像,如果真的要分出个胜负,那么很明显,大部分产品使用的都是圆形。方形和圆形到底有什么区别?设计时该如何选择?下面我们就一起来唠一唠。

  • 方形头像对照片的空间利用率更高、降低空间损失,圆形通过裁剪让空间更平衡、看起来更精致;
  • 方形对四角、中心点均可构成聚焦区域,使用灵活,圆形则边界完美,没有聚焦冲突,可突出核心;
  • 古埃及曾认为圆形是神赐予人们的神圣图形,因图形边界完美,能给人公正、信任感,但矩形却能给人一种专业、稳定的感觉;
  • 圆形被认为是活泼,方形则显得比较严肃;
  • QQ团队曾给出答案,因产品定位就要是给人一种年轻化、活跃的感觉,且人的脸也接近圆形,裁切后更能凸显人的脸部特征(看脸时代),明显使用圆形更适合。微信设计师的说法是图片本来就是方形(扯远了),方形头像能最大程度的降低图片损失,而且微信的定位相对成熟,方形还能给用户一种稳定可靠的感觉,更符合用户习惯,如果一定要用圆形,将头像处理成圆形即可,方/圆兼具;
  • ……

图片

说了这么多,依然不知道如何选择,那么笔者将根据一些常用到头像的三个模块给你一些建议:

  • 个人中心/主页:如无特别需要,大部分情况下使用圆形,不会出错;
  • 消息列表/即时会话:根据产品定位、上述的参考比较后决定,没有明确的要求,使用其中一种形状后,在其他同等级页面统一即可;
  • 评论/交流区:直接圆形,没有为什么。头像本来就小,裁切掉无关信息会更聚焦。

 

五、头像设置步骤

1. 头像来源

用移动端设备上传头像时,来源主要为系统推荐、历史头像、从相册选择、拍照这几种方式,电脑端因设备限制等原因,一般只有系统推荐和上传本地图片。

2. 上传限制

上传图片时,一般会对图片的格式(JPG/PNG/GIF等)、尺寸(宽*高)、文件大小(多少KB/M)作出限制,这些需要给予明确的提示,避免用户因操作多次失败而受挫离开,同时也能避免因用户不知道平台可使用GIF、视频等头像格式,而雪藏了产品的多元化服务。

3. 图片裁剪

因图片来源、拍摄手法不一,针对横图、竖图,系统会贴着边缘(避免压缩/拉伸)先进行一次自动裁剪进行取方,然后用户可自行调整大小,选取最佳位置。

4. 效果预览

需要给用户提供真实的效果预览图,避免用户因操作失误或对处理后的头像不满意再次重复整个更换流程。所见即所得,通过降低用户重复操作的概率也是提升用户满意度的方式之一。

图片

 

六、引导用户上传头像

1. 文案引导

当产品要求用户组做某件事情时,即便是为用户考虑,也需要给予一个合理的理由,可使用趣味、情感化或鼓励性质的文案引导用户主动上传头像,例如社交类应用“一切都很完美、就差一个帅气的头像了”、“换个好头像会让更多人认识你”等。或者用户在编辑个人信息时给予鼓励“恭喜你,只差最后一步了,换个头像就十分完美了”。

2. 第三方授权

前面讲到过第三方登录的方式,相信这也是对懒癌症患者上传头像最直接粗暴的方式了。

3. 纳入注册流程

部分社交类应用将上传头像作为注册流程中的必选步骤,任何用户都无法跳过,切记这种方式非必要不可滥用/乱用,这相当于对用户注册增加了门槛,任何产品每多一点操作成本,都会有一批用户离开,需根据产品定位以及强制上传头像的重要性来决定,避免得不偿失。

图片

 

七、结语

「无头像不社交」,在设计界面之前,设计师应该考虑清楚产品社交属性的等级,再来决定头像在界面中的权重、占比,至于如何使用,还需根据产品的实际情况并结合用户头像的基础知识合理的做出判断。

「麻雀最小、五脏俱全」,头像看似一个很简单的UI元素,但在设计过程中需考虑的知识点还是有很多,这就需要我们平时不断的积累、探索,并多多总结,再融合到实际的UI设计中,做出有理有据的设计。

最后,分享一个图片转插画头像的工具:https://newprofilepic.com,非常好用,如果感兴趣就试试吧!

 

原文地址:能量眼球

作者:大漠飞鹰CYSJ

转载请注明:学UI网》头像篇 | 帮你快速掌握头像基础设计知识!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



设计基础(6): 表单基础知识解析

seo达人


 

一、表单的构成

1、表单的组成

按照原子理论,表单应该属于一种“组织”。包括了以下组成部分:

图片

  • 标签

主要是用来说明表单数据域的含义和填写内容;当标签无法明确引导用户或者具有一定的内容限制时,需要增加帮助或者说明信息,方便用户更好地填写内容。

  • 表单数据域

通常是数据录入型组件,需要用户以填写、选择的方式完成内容输入。

  • 操作按钮

用来提交、保存数据信息,完成表单操作。

2、表单的类型

在B端产品审批流程中,不同的用户会面对不同的表单形式。

对于流程发起者,需要填写内容后提交审批,这类表单偏向于任务操作,也是我们最常见、最典型的表单形式。

而对于审批者而言,表单主要是传递信息,审批人依据内容做出审批决策,这类表单偏向于信息展示。由于审批类的表单相对简单,所以我们将主要的精力放在操作型表单上。

 

二、表单的设计关注点

1、表单布局

表单存在两种布局方式:单列布局和多列布局。

  • 单列布局

单列布局信息自上而下,用户视觉动线更加稳定,横向的视觉跨度更短。所以信息阅读和填写的效率更高,是首选的布局方式。但是在长表单场景下,用户需要滚动屏幕才能查看完整的表单信息。

图片

  • 多列布局

多列布局下,一屏可以容纳更多信息、屏效更高,有效地避免出现滚动条。对于高频的长表单操作,采用多列布局的方式,可以减少滚动条带来的用户困扰。

当然多列布局表单信息密度也更大。一般为左右两列布局,列数最好不要超过2列,否则会影响用户的填写效率。

图片

常见的搜索表单大都与表格宽度一致,可以容纳3列或4列。主要是搜索关键词与表格一致,业务属性不强,并且表单项没有强制性,用户可以自由填写,不会存在漏填的情况。采用多列布局对用户操作影响不大。

2、标签排列

标签排列方式历来都是设计师比较纠结的问题,常见的标签有3种:左对齐标签、右对齐标签、顶部标签。另外还有内联标签、浮动标签等形式。

先看阅读效率数据。

2006年,有专家就对3种对齐方式进行了眼动仪数据分析。研究结论表明,顶部标签移动到输入框效率最高,只要 50 毫秒;右对齐标签次之,需要 240 毫秒左右;而左对齐需要消耗“500 毫秒”,效率最低。单从效率上来说,肯定首选顶部标签。但是面对不同的场景,需要选择合理的排列方式。

  • 顶部标签

图片

(图片来源于网络)

顶部标签的排列方式符合用户自上而下的浏览习惯,标签与输入域联系更加紧密,视觉横向移动距离小。所以信息读取的效率更高。

另外标签单独占据一行空间,信息扩展性更强。问题也显而易见,标签挤占了纵向空间,会增加表单的总体长度。

所以我个人认为,顶部标签更适合信息量不大、简单的表单场景。例如登录、注册等。

  • 右对齐标签

图片

(图片来源于网络)

右对齐布局拉近了标签与表单域的距离,并形成固定间距。但是由于标签的长度不同,视线起始点会发生跳跃,从而影响用户的阅读效率。

不过对于普通表单,右对齐标签可以兼顾效率和页面空间,因此在B端产品中应用比较广泛。

  • 左对齐标签

图片

(图片来源于网络)

从整体性上来看,左对齐视觉结构性更强,有利于标签信息阅读。用户视线不会受到输入框的干扰,可以非常顺畅地扫视标签,方便用户快速搜寻必填项。

但是由于标签长度不一,为了保证所有标签都可以正常显示,会增加标签与表单域的间距,导致信息读取效率偏低。

左对齐标签可以用在复杂场景中,减缓用户的填写速度,尤其是那些有大量可选输入框,结合必*标识符快速定位必填项。或者在高级设置的场景中,字段信息对用户相对比较陌生时,让用户可以仔细考虑表单中的每个信息项。

  • 内联标签

内联标签是将标签放在输入域内显示,标签代替了占位提示文字,告诉用户应该填写什么内容。常见于注册登录页,如下图。

内联标签解决了标签文字过长的问题,并且可以降低表单的视觉信息量。

图片

但是这也带来了另一个问题,就是内置的标签信息会随着内容信息输入而消失。通常仅用于登录页面,因为用户对登录页的内容模式已经非常熟悉了,学习成本很低,不会带给用户困扰。

如果用在其他类型的表单页面,就容易让用户产生疑惑。特别是出错的场景下,信息提醒不到位,很容易增加用户的理解成本和使用难度。

  • 浮动标签

浮动标签是指用户在录入时,内部标题(输入性提示信息)进行浮动位移。这在一定程度上弥补了内联标签消失的问题。不过需要额外的开发工作量,并且拓展性不强,不适合作为主要的标签形式应用在业务表单中。

图片

一个系统中最好采用相对一致、稳定的标签排列方式,否则频繁变化的对齐方式也容易让用户无所适从。

 

三、表单的存在形式

表单信息量可大可小。有的可能只有一个字段,有的可能是包含多层卡片内容,甚至是相互嵌套。不同的表单信息有着不同的存在形式,梳理归纳后,主要有以下5种。

1、即时表单

常见于表格或者详情页面,通过编辑或新增功能触发。即时表单与原有内容保持一致,更强调操作的快捷性。

图片

图片

2、浮层表单

同样是一种轻量化的表单方式,一般用于定向修改特定内容。通常浮层空间较小,不用来承载大量的信息内容。另外浮层紧随修改内容,操作效率更高。

图片

3、弹窗表单

在抽屉组件出现之前,弹窗应该是最为常见的表单交互形式。相比页面跳转,弹窗操作成本更低,但是空间比较受限,应对大表单信息会有一定的难度。另外表单填写时,可能会出现多层弹窗的情况。

4、抽屉

抽屉组件既可以承载较多的表单信息量,又可以和弹窗一样在当前页面完成操作,并且相对于居中弹窗,不会对页面核心内容造成过多遮挡。因此在B端产品中应用越来越广泛。

图片

5、页面

页面表单通常用于信息量较多的场景。一般会增加页头明确告知用户在做什么,同时也要配置返回按钮,方便用户退出表单页面。

图片

以上就是表单基础知识的解析。

下期我们来分析下表单设计的技巧~

 

原文地址:子牧UXD(公众号)

作者:子牧先生

转载请注明:学UI网》设计基础(6): 表单基础知识解析

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




让UI界面好用的几个技巧

纯纯

呼吸感

这里指的页面之间的呼吸感,比如模块之间的间距,栅格的间距等,在2020年之前很多App在设计侧边栏的时候大多都是在留12px(1倍图)的间距,但是随着现在业务的不断拓展, 产品内可能会出现很多业务模块我们如果继续留12px就会造成没有张力。

随着ios15系统的到来,苹果设计系统也对页面进行了大间距、大留白的定义,因此我们未来设计时可以适当的加大页面的侧边距。

收起标题

一般在页面首屏无任何操作时顶部都会具有标题,当用户进行操作时候,我们可以进行缩小或者隐藏,这样的话在交互过程中增加页面展示空间,并营造出呼吸感。

卡片圆角

我们在改版或者优化页面时,都会卡片的角度,不同的度数能传达出不同的感觉,像直角卡片传递的感知正向为:严谨、沉稳、高级,反向:危险、尖锐,而圆角则传递出柔和、安全、轻量,不同的产品在定义风格时需要慎重考虑,这与后续的设计联动较大。

直角卡片风格适合金融理财、高端制造、珠宝方向等价值上较高的产品

而圆角卡片大多能兼顾很多产品风格,只需要调整圆角的大小,如餐饮、工具、教育等等,例如产品是针对的儿童圆角可以进行加大处理。

多利用配图

人是视觉动物,UI设计中的图像可以分为两种,照片和插图,在设计中我们可以尽可能的使用插图传达信息,插图的视觉效果大于纯文字和图标,并且插图的信息传达效率也大于文字。

动效

动效可以在信息传达上更加直观,并且能够展示出产品页面之间的细节,一个好的动效在情感化上也可以触动人心,在设计的过程中如果可以添加动效,我还是建议使用一些微动画去表现,如加载、空状态等无聊的页面,就可以通过动效方式减少用户枯燥的感知。




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

魏华的微信.png

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

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档