首页

一款软件界面设计的重要性

seo达人

 

这周继续做我们的作品,感觉实现了功能不是很多,而我们把更多的精力投到了界面的修饰上,感觉以前的界面太不好看,和人家正规的浏览器相比简直不堪一击.在这周我感受最深的就是一款软件的成功以否不仅仅在于功能的强大以否上,界面也占了其成功因素的半壁江山. 

  作品开始准备以前就听八期的师哥师姐说,界面的美观,协调,布置合理等是一款软件成功不可或缺的因素.前几次作品展最后获胜的都是界面漂亮,和谐,布置合理,非常吸引人的作品,例如宝宝乐园等,他们运用了Flash等工具,的确非常漂亮吸引人!通过这周的做作品和观察比较流行,受欢迎的软件,我发现一款软件界面的重要性和设计界面需要注意的事项。

  重要性

1,软件的界面相当于我们人的整体外表,相当于我们人的气质等。谁都知道我们希望自己漂亮一些,希望自己有气质一些,这些不仅可以增加我们的人气,更可以帮助我们披荆斩棘,更加顺利走向我们的目标。当然,软件的界面美观与否,直接影响着人们使用此软件时的心情,进而影响人们对此软件的喜欢与否。而那些所谓的强大的功能是在人们喜欢这款软件之后再考虑的问题。

  2,功能菜单的布局,这个布局合理与否,是否符合大众的使用习惯。也直接影响着使用者对此软件的喜欢与否。如果一款软件的各项功能菜单布局不合理,不符合大众化,那么再强大的功能,使用者也找不着,那样也白搭。所以界面的布局也是非常重要的。

总而言之,界面的设计,直接决定着使用者对这款软件的第一印象,直接决定着使用者对其的青睐与否。

在这里我想向大家提出几点注意事项

1,色调的选择,在这里主要以和谐,舒适感为目标。色调的选择要是使用者感到非常舒服,色彩的搭配更要凸显界面的和谐优美。

2,功能菜单简洁明确,主次分明。按钮的功能要简单明了,易于使用掌握,主次要分清,分清使用者使用此软件的主要功能,常用功能和附加功能,处处以使用者的角度去想问题.设计软件.

3,符合常规逻辑思维,给用户以很好的引导作用,良好的界面布局,会给用户操作带来方便和引导,软件使用起来流畅自然。设计不合理的界面,用户往往要费一些时间去找功能块啦、按钮啦、定位文本框啦,甚至根本不明白软件再说什么,还得自己去理解它的意思。

4,我们在制作软件时,要懂得虚心向别人请教,尤其是界面问题,往往我们的缺点我们自己难于发现。如果必要的话,我们可以做问卷调查,向更多的用户调查需求,从而更有助于我们做出符合大众需求的软件产品。

总而言之,界面是软件非常重要的一大项,我们要对他重视起来,不要一味的把心思全投放到功能的实现上。当然我们做软件的每一点都要以使用者的心态,使用者的需求去设计,界面是软件的门户,更是如此。如何让使用者用着更方便,更开心,更简捷,我们就如何设计,完全贯彻“全心全意为人民服务”的理念。

 

文章来源:CNDN   作者:iteyey_45

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

 

管理学 - 抽屉式管理法

鹤鹤

实用的管理方法


抽屉式管理法是一种通俗形象的管理术语,在现代管理中也叫做职务分析。抽屉式管理的主要含义是在每个管理人员的办公桌的抽屉里,都有一个明确的职务工作规范。它包括两个方面的含义

 

 - 每个人所从事的等四个方面进行明确的规定,做到四者统一;


 - 明确每个人所从事的管理和主要专业业务,分工协作关系,横向纵向联合事宜,以及上下左右的对口单位等,达到理顺企业管理关联的目的。


抽屉式管理是近几年世界上最为流行的管理方法。

他的主要内容包括两个方面

 

 - 业务部门的职务分析,即职能权限范围。业务部门的职责权限范围分析,应根据企业的总体目标、生产经营指标,以及专业对口的要求和协作关系进行层层的分析、逐级落实、明确规定;


 - 管理人员的职务分析,即职务说明或职务规范;


管理人员的能力分析要根据管理层次的不同划分来进行,它的关键是处理好集权分权的关系。例如一家设计公司,美术指导要对设计总监负责,资深设计师要对美术指导负责,设计师要对资深设计师负责,设计助理要对设计师负责,实习生要对设计助理负责。

 

企业在施行抽屉式管理方法时,首先要组织一个由各个部门结成的职务分析小组。并对职务分析小组进行短期培训,以掌握抽屉式管理的概念和内涵。其次,企业应围绕企业的总体目标、生产经营指标、根据业务对口,编制业务职责权限范围。

 

企业应分层进行管理人员分析,按职、责、权、利四者统一,制定管理人员职务说明或职务规范。最后,企业需要制定必要的考核、奖惩机制,与职务分析法配套执行。

 

 


流行的管理方法


在一些商业企业中,不同程度的存在着职责分不清,分工不明确,权利与责任相分离等问题,造成办事效率低,拖拉等状况,它们一般都表现在

 

 - 各部门分工不明确,一些工作上的事情谁都不管,有些事情又都想插手,造成互相扯皮,严重影响了实际工作效率;


 - 企业内部横向联系比较差,协调能力弱,使执行人员只能听四方指示,八方汇报,大大的延长了工作流程,极大的影响了实际工作效率与人员浪费;


 - 企业用人多少缺乏一个客观标准,容易受魅力偏见的影响,强壮的和漂亮的应聘者更受欢迎;对于设计行业而言作品造假,作品集过度包装引起的能力与职位不匹配的问题,没有一个较为标准的审查机制,都属于个人的主观因素。


 

企业要进行策略管理,就必须明确企业内部各个岗位的主要职责以及各职务之间的分工协作关系,它能大大的提高企业战略管理的科学性、系统性和有效性。

 

抽屉式管理在人力资源管理中一般用于职务分析。随着社会经济的发展,抽屉式管理的公司也越来越普遍,人们认为抽屉式管理是21世纪初现代化管理发展的新趋势

 

当前一些经济发达国家的大中型企业都非常重视抽屉式管理和职位分类,并且都在抽屉式管理的基础上,不同程度的建立了职位分类制度。绝大部分世界500强企业都在实施抽屉式管理,这一工具在福特经理们的心目中,具有非常重要的地位,几乎每一个经理人都在管理下级之中应用了这一工具。

 

 

 

抽屉式管理的步骤


第一步 - 建立一个由各部门组成的职务分析小组


考评小组的组成人员包括:


 - 企业领导者:可以保障部门权责设定与企业整体目标一致,保障权威性与决策的有效性。

 - 人力资源管理领导者:抽屉式管理模式的主管者,有利于人力资源管理精准性的提升。

 - 各部门角领导者和员工代表:促进决策的民主性和科学性。



第二步 - 正确处理企业内部的集权和分权关系

 

要考虑与正确划分,在哪些领域或事项上集权,在哪些工作上分权,部门权责考评小组要以整体绩效为基准。


第三步 - 围绕企业的总体目标,层层分解、逐级落实职责权限范围

 

层层分解与逐级落实是“抽屉式”管理模式的核心环节,或者说是管理落实与职权细化的关键性步骤。整体目标指的是企业战略总目标,实现企业经济效益、提升管理绩效与职权分解、落实是目标与手段的关系。



第四步 - 编写职务说明书,制定出每个职务工作的要求准则

 

职务说明书包括两部分,即对部门领导者和员工的职务都进行规范化说明。其次制定员工职务说明书,通过书面化的形式将员工工作相关内容进行明确规定。哪个员工在哪个环节上出了问题,只要拿出放在抽屉内的职务说明书即可进行查询。


第五步 - 制定考核与奖惩制度,与职务分析法配套执行

 

绩效考核与奖惩制度是抽屉式管理模式的保障性措施,也是提升管理有效性的配套手段。制定与权、责相配套的奖惩、晋升制度。以职务说明书为依据,通过绩效考核反馈给予认真履职者奖励,给予玩忽职守者相应的惩罚。



总结:其实抽屉式管理法就是管理层的一种管理手段,在抽屉里放一些对于员工的职务职责的约束规则,在心理上给员工施压,进而使之完善所做的工作;在规则上也同样施压,一旦员工的工作不饱和,又或没有完善部分工作,就可以直接拿规则说事儿,企业也挺鸡贼的。


对于员工而言还是要不断完善自身能力,自己没有问题别人也挑不出问题,其次要注意沟通协作的问题,把自己工作做好的同时,如果有精力和能力也帮助同事提升能力和帮助完善部分工作,对自己负责,对公司负责,同事和公司才会对你负责,更看重你。

文章来源:站酷   作者:罗耀_系列

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

设计定义

鹤鹤

人类一切创造性活动造物活动都可以称为设计,这是从广义角度去理解设计的定义。从狭义角度理解设计的定义,设计就是构想和解决问题的过程。应以人为本,通过系统化的方法满足消费者的市场需求,进而产生功能价值审美价值


除了广义与狭义的设计定义,处在不同时期不同的人站在的角度和立场均不同,产生的观点是各抒己见,各不相同。在国内考研只用采用其中一种定义就可以了,但知识是要去学习和理解的,这里我研读了近100本书籍,把所有关于设计的定义都整理出来供大家学习与参考。

 


设计的定义


彼得·劳伦斯(美国设计学会创始人):设计是一种手段,通过这种手段可以提高生活质量,并能有效的满足人类的需求


王受之教授:设计是把计划、规划、设想、解决问题的方式,通过视觉化的形式传达出来的过程


《大不列颠百科词典》(1786年 / 工业革命前):设计指的是立体、色彩、结构、轮廓、线条、形状、比例、动态和审美方面的协调

 

《大不列颠百科词典》(1976年 / 工业革命后):设计常指拟定计划的过程,又特指记在心中或者制作成草图的具体计划

6:19 STUDIO - slava balbek / Nata Kurylenko

 


《简明不列颠百科全书》(1985年 / 中美编译):Design包含两个层面,第一个层面指“心理上的计划”,即计划的思考与拟定计划的过程;第二个层面指“艺术计划”,即把计划中的想法制成草图的具体计划。

 

《韦伯斯特大辞典》(名词方面):针对某一目的在脑中形成的规划;根据对象预先所作出的模型;文学、戏剧作品的轮廓;音乐作品的框架;视觉艺术作品的线条、细节、外观等方面的相互关系

 

《韦伯斯特大辞典》(动词方面):头脑中的想象与计划;策划;创造功能;为了达到目的而进行的创造、规划和计算;用商标、符号表达;对物象的描绘;零部件的形状与配置

 

《牛津英文词典》(1588年):设计是由人所设想一种计划,或是为了实现某物而做的纲要

6:19 STUDIO - slava balbek / Nata Kurylenko


《授予博士硕士学位和培养研究生的学科专业简介》(1999年):设计是一门多学科交叉的、实用性的艺术科学,其内涵是按照文化艺术与科学技术相结合的规律,创造人类生活的物质产品和精神产品的一门科学

 

柳冠中教授《工业设计学概论》:设计应该被认为是一种方法论,应提高‘一切人为事物’的角度来认识

 

李砚祖教授:设计是人类改变原有事物,使其变化、增益、更新、发展的创造性活动,设计是构想和解决问题的过程,它涉及人类一切有目的的价值创造活动

 

尹定邦教授:设计其实就是人类把自己的意志加在自然界之上,用以创造人类文明的一种广泛的活动,设计是一种文明

6:19 STUDIO - slava balbek / Nata Kurylenko

  


我国《高级汉语大词典》:按照任务的目的和要求,预先设定好工作方案和计划,绘制出为解决这个问题而设计的图案

 

我国综合字典《辞海》:设计指“按照任务的目的和要求,预先定出工作方案和计划,绘出图样,为解决这个问题而专门设计的图案”

 

赫伯特·西蒙《人工科学》书中的一段话:凡是以现存情形改变成向往情形,为目标而构思行动方案的人都是在搞设计

6:19 STUDIO - slava balbek / Nata Kurylenko  



阿切尔:设计是围绕目标的问题求解的活动

 

路甬祥:设计是在一定的约束条件下,最合理的满足社会的需求


佩齐:设计是从客观现实向未来可能富有想象力的跨越

6:19 STUDIO - slava balbek / Nata Kurylenko

 


保克:设计是获得足够把握前,对未来产品尽可能多地模仿

 

乔尼斯:设计是表达一种精粹信念的活动

 

里斯维克:设计是从无到有的创造,创造新的、有用的事物

 

 


考研知识


国内的知识大多数采用国内教育工作者对设计的定义,例如我们在网上查关于设计的定义,一般都会出现相同的搜索结果,也就是《现代汉语词典》对设计的定义,即“在正式做某件工作之前,根据一定目的的要求,预先制定方法、图样等。

6:19 STUDIO - slava balbek / Nata Kurylenko

 

另外考研的知识点还有设计的核心内容知识,包括以下三个阶段;


第一阶段 计划,构思的形成

第二阶段 将计划、构思、设想、解决问题的方式利用视觉化的传达方式表现出来,如图纸、制作效果图、模型等

第三阶段 将设计的方案实施完成    

 

 

 

附加知识


以上指的设计的定义是不包含工程设计的,工程设计主要解决人造物(机械、设备、交通工具、建筑等等)中的物与物之间的关系,包括产品的内部功能、结构、传动原理、组装条件等。


工程设计主要是研究和实施建筑、城市、景观设计与工业产品(建筑属于工业)、造型设计、功能性设计、结构设计、可靠性设计、生产工艺设计、生产系统集成设计等的工程技术领域,工程设计更注重产品的实施与落地。

6:19 STUDIO - slava balbek / Nata Kurylenko

工业设计就是对工业产品的使用方式、人机关系、外观造型等做设计和定义的过程。他将产品的功能通过有型的方式创造性的体现,使得工业产品和人的适当的、高效的,甚至有情感的交流得以实现。是一种产品与人沟通的语言,是工业产品和人之间的重要纽带,是用户体验的决定性组成部分。


文章中提到的设计是解决物与物关系的同时,更侧重于解决物与人的关系问题,考虑产品对人的生理、心理的作用。因此设计是包含艺术审美同时又有科学技术的人文科学、社会科学相结合的艺术。

文章来源:站酷   作者:罗耀_系列

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

微信产品设计 80 个为什么(2):设计和理念

鹤鹤

这 80 个问答将分为 7 篇,每天更新一篇:

  • 《诞生和发展》
  • 《设计和理念》
  • 《聊天》
  • 《摇一摇、附近的人和漂流瓶》
  • 《朋友圈、视频动态和状态》
  • 《小程序和微信支付》
  • 《公众号、看一看和视频号》

资料主要来源于:

  • 张小龙公开演讲和媒体采访报道。
  • 陆树燊(前支付宝资深产品经理,微信创始团队成员)的微信公众号:行者慎思。
  • Genie(微信产品经理)的产品分享。
  • KantZhou(拼多多用户端产品总监,前微信产品经理)的产品分享。
  • 啃饼(微信研发工程师)的微信公众号:啃饼随想。

设计和理念

问: 微信的页面设计很少改,那微信的设计师们每天在做什么呢?很闲吗?

陆树燊答: 张小龙评审微信的功能有一个习惯:不看原型图,不看设计稿,也不看 Demo,要体验前后台代码开发好后的产品。这就意味着:如果一个功能在给到用户之前有过 N 个方案,则微信设计师已经设计了 N 个方案,前后端开发人员已经开发过 N 个版本的代码。给张小龙体验,然后 100 个需求能砍掉 70 个。其中 30 个再优化 N 次,才真正发布给用户使用。

问: 对做微信的设计师有什么特别的要求吗?

张小龙答: 在广研(微信事业群前身)里面我们禁止使用竞争对手的产品,特别是 UI 设计师。因为大家知道,一旦你用了竞争对手的产品,你一定会受它的影响。你会觉得“哦,那样做是最好的”,你会摆脱不了它的影子。之前我们也经常发生这样的情况,UI 设计师一旦用了竞争对手的产品以后,设计里面就会不自觉地带有对方的影子。所以后来我们干脆规定不允许使用竞争对手的产品。这个问题对我们公司来说其实蛮严重的,有很多时候可能我们觉得只是借鉴一下,但是一旦借鉴就会受到影响。所以最直接的方法就是禁止使用。希望大家所在的团队也可以尝试使用这个方法。这个方法不会让大家损失任何东西。

但我们要了解竞争对手怎么办?我们可以让产品经理去体验竞品,让产品经理总结哪些体验是挺好的,UI 设计师知道这些体验是很好的,但是 UI 设计师要自己想办法去实现好的体验,而不是被对手所牵制和影响。

问: 对于微信来说,最关注的体验是什么?

张小龙答: 操作的响应速度永远是第一体验。我们在做邮箱时思考:对于一个好产品来说,可能需要满足几个要求,比如“切入要准”“功能设计得要好”。但我们把速度这项单独列出来,就是“速度一定要快”,这个速度是指系统响应的速度。

我们回顾 QQ 邮箱能做起来,有两点是最重要的:第一是简单;第二是速度快。简单和速度快,合起来是「简捷」,简单快捷。「简单和“快捷”是用户体验里面 最重要的两个关键词。

在微信 4.0 的时候,点击进入一个会话群的响应速度是挺慢的,我们做了很多的改进来保证进入速度得到提高。而在微信的朋友圈里,时间线的流畅度也非常重要,我们的开发在这里做了很多次的重构才保证了流畅的体验感,保证我们速度能超越所有有时间线的产品。虽然为了提升这里的速度,开发的代价很大,但是这样的代价是值得的。

问: 微信 UI 设计最看重哪方面?

张小龙答:UI 里面最重要的是条理清晰。有时我们会误认为 UI 就是怎么把用户界面表现得更绚丽一些,但是所有的视觉表现都不如条理清晰重要。

举个例子。微信的语音输入条经过了很多进化,现在用的是最下面的式样。

微信产品设计 80 个为什么(2):设计和理念

最下面的式样具有美感,字体也很清晰,「加好友」按钮在右边也很顺手。这都是经过了很多变迁的。前两个设计,在语音和文字切换的时候,还需要通过菜单来完成。后来一个 UI 设计师朋友提出意见,觉得这个地方使用不方便,每次切换都要用菜单多点一下。但是语音文字的切换是最常用的,应该放在左边固定。我觉得他说得很有道理,我们就在下一个版本里面修改了。

所以 UI 做得绚丽并不是最重要的。微信里面用的东西都很朴实,你不会看到花花绿绿的东西,能用系统控件的就用系统控件,而且尽可能保持一致的式样,包括一种字体、一种控件、一种背景,所有的东西最好只使用一种,不要增加两种或者更多种。

我们也一直鼓励每个界面只有一个主题。学习过摄影的同事都知道,一张照片里面只有一个主题。所以我们不会做两分式的设计,并且每个界面都会突出这个主题,把别的主题都虚化掉,或者把它放到一边去。每个对话框都有一个明显的默认按钮。比如每个对话框右上角都有一个完成按钮,并且是蓝色的。我们还用了文字来规定必须这样做。因为我们要让用户进到一个对话框后立即可以找到哪里可以完成,所以按钮一定要很显眼。

这是一个反面例子:

微信产品设计 80 个为什么(2):设计和理念

这个界面右上角有一个按钮,底下有两个按钮,会让人觉得很迷惑。很多用户跟我们说,以前他是压缩发图,但是现在有两个按钮,他就会点原图发送了。然后就忘记去点完成了,造成了一定的迷惑。这是一个不好的例子,是我们需要优化的地方。

问: 为什么微信的主题色是绿色?

张小龙答: 最初版的微信主色调是蓝色,后来换成了绿色。其实我们现在有点后悔用绿色,因为在很多安卓手机上,绿色的偏色很严重,看起来就是黄绿黄绿的。

刚开始是蓝色的,因为第一个版本是比较匆忙的,当时用的是系统的颜色。后来我们有一个版本就觉得应该调整一下颜色,就换成了绿色了。然而,这个时候微信的产品形态已经基本定型了,用户数也非常庞大,这时再去调整品牌颜色是不太可能了。其实我们现在很纠结,但现在改起来就对形象有影响了。

问: 为什么拼多多喜欢挖微信的产品经理?

答: 微信产品经理通过微信观察到了全中国网民的使用习惯,拼多多挖走微信的产品经理,因此才能设计出更符合在微信环境内传播的接地气方案。

问: 为什么微信只有 4 个 Tab?能把朋友圈做成第 5 个 Tab 吗?

张小龙答: 源起 Tony (腾讯前 CTO 张志东),他经常向微信团队提一些需求要加东西,我说没地方放了,他就说没关系,你们只有 4 个 Tab,还可以加一个。我说不能这样。过几天 Tony 又有一个需求,我说没地方放了,他又说,可以加一个 Tab。我想这样的需求反复几次,最后会没完没了。然后我就跟 Tony 定一个君子协议,两年之内,微信只有 4 个 Tab,不允许再有第五个,因为 4 个最简单了,一旦变成 5 个就变复杂了,不好了,对整个产品会有破坏性的打击,然后 Tony 也认同了,最终变成一个协议就确定下来了。这样就很好啊,我们在做朋友圈的时候,也没有把它放成第五个 Tab。然后 Tony 说这个朋友圈的入口是不是太深了。我们说,已定过协议了,所以不能放出来,我们自己不能破坏这个协议。当然“朋友圈”能不能放在第五个 Tab 上,还有别的原因。它总是有好处有坏处的,至少我们现在能保证两年之内只有 4 个 Tab,但一切也不是绝对的。如果有一个非常大的诱惑,说不定还是会加第五个 Tab 的。

问: 微信里是怎么引导用户设置头像的?

张小龙答: 在我们最早的微信版本里面,用户自己说的话是不带自己头像的,后面才把自己的头像展现出来,当用户看到自己的头像没有设置的时候,很快就会去设置头像了。可见这样的设计比经由别的环节去引导用户设置头像要自然很多。因为这是用户自发的,而不是被“引导”的。

问: 为什么微信里很少出现新手引导 Tips?

张小龙答: 我们在讨论其他产品的设计的时候,常常会想,怎么才能不打扰到用户,特别是我们想把新功能体现给用户的时候。现在很常见的是用 Tips 去提示新功能,看似体贴,实则让人烦躁,用户会觉得为什么要把这些提示强加到我当前的操作里面,感觉被打扰了。

需要文字解释的功能不是好体验。做 UI 的同事尽量不需要通过文字的解释就把这个功能做好,最好也不要用 Tips 这样的东西。刚才微博的同事还跟我聊到,做微博的时候,有新功能了需要通过弹 Tips 来告诉用户。我问为什么要这样做呢,他说怕用户不知道。但其实用户不知道就不知道吧,又不会损失什么。为什么所有东西都要用户知道呢?所以产品里面最好能立一个规定,能不用就最好不要用。但是微信也还没做到完全不用。因为微信还有一些地方没处理到位,所以偶尔也会用到 Tips。但是自己要知道一点:每一次都是因为做得不好才用 Tips。

问: 为什么 QQ 的头像是圆的?微信的头像是方的?

QQ 设计师答:

  • 相比方形,人的头像更接近圆形。圆形 QQ 头像能更突出头像弱化背景,也更鼓励用户使用真实自拍作为 QQ 头像。
  • QQ 作为平台会接入游戏和第三方应用内容,圆形 QQ 头像在这些方形、异形图标环境中提高辨识度,降低用户的认知门槛。
  • QQ 希望给用户传递乐在沟通,展现年轻个性的态度,圆形 QQ 头像更具灵动和活力,与之无缝衔接的头像挂件也为用户带来更个性化的搭配和丰富的自我展示。

微信设计师答: 因为照片本来是方的,方头像更符合用户习惯。

问: 微信的启动画面是一个小人站在地球还是月球?为什么是站在月球上看地球而不是在火星上看地球?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 其实第一个版本是在地球上看月球,但是后来就变成在月球上看地球,有了突破性的变化。但是这个变化并不重要。有些人甚至做了一些调研:用户看到这个画面到底有什么感觉?然后把调研结果分享给我,发现用户各种感觉都有,很不一样。然后问他,我们到底是怎么想的。我回答:能让用户有不同的感觉就对了。如果思路太统一就变成乌合之众和愚昧了。所以这样是最好的。

但是如果我们把微信的 LOGO 放在那里闪啊闪的,那就没意思了,没有任何想象的空间了。这个画面也让我们看到人类的孤独感(这个小人都离开地球了,感到孤独了)。而孤独是永恒的主题。

问: 为什么微信没有“系统管理员”这种官方账号?

张小龙答: 大概在两三年(这里指 2009 年)以前,我突发奇想,为什么我们给 QQ 邮箱用户的通知信都是“系统管理员”作为发信方,为什么不是我们自己的美女产品经理作为发信方,这不是显得更加人性化一些吗?从那个时候开始,我们就再也不用“系统管理员”这个账号来给用户发信了。用户收到的每一封来自“系统管理员”的邮件,都被替换为一个真实的产品经理。如图中案例所示,会看到真实的产品经理的落款,有她的头像和名字。

微信产品设计 80 个为什么(2):设计和理念

问: 为什么微信 3.0 版本的启动页面上放出了迈克尔·杰克逊的图,写了一句话:“你说我是错的,那你最好证明你是对的。“?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 之前的微信版本被批评得挺多的,特别是被业界的评论家批评。所以我想了这个办法回应一下。刚好在那段时间里,我在上班下班的路上,MJ 的音乐听得很多。也觉得他的音乐跟我们的产品有某种关联性,因此觉得非常需要去感谢一下 MJ。直到有一天这种感觉越来越强烈,就做了这个设计。为了能做出这个效果,我还特地请同事们到他的车里去听 MJ 的音乐,觉得这样效果会好一点,让他们能找到做这个页面的感觉。通过这个设计我们向外界所有的评论家表达:如果你说我是错的,最好证明你是对的。

问: 为什么微信 4.2 的启动画面写着「是时候放下手机,和朋友面对面了」?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 拿一个停留时长衡量一个 App,这个跟我对互联网的初心的认知是背离的。每个人一天只有 24 个小时。互联网人的使命不应该是让所有人除了吃喝拉撒,把时间都花在看手机上面。一个用户每天的时间是有限的,这是次要的。最主要的是,技术的使命应该是帮助人类提高效率。比如作为一个好的沟通工具,一定要高效。

用户其实并不会按照你的内容多少来决定它的时间分配,但我觉得这是很合理的。 如果我们非要停留时间更长的话,我们当然有很多办法来做到这一点。但是这只会让用户觉得不爽,因为他的社交效率降低了。如果非要把他半个小时能完成的事情延续到一个小时的话,只能代表效率降低。微信永远都不会把用户停留时长作为一个目标。

问: 微信 7.0 UI 改版那么多用户不满,为什么不改回去?

张小龙答: 其实任何一个大的改版都会带来用户的不满,因为人习惯于自己熟悉的界面,觉得是最好的。我们没办法让 10 亿人来投票决定什么是好的,也投不出来。那怎么才能通过改变寻求设计的优化,让它变得更好呢?这个决策必须遵循好的设计原则

就像微信 7.0 版本的时候我们内部使用了很长时间,我自己一直在两个版本不停的切换,当我用了一段时间,我不愿意切换到旧的版本去。也许用户一下子不能接受,但是我相信他们适应以后也会接受。重要的是我们必须要用我们的产品不停的适应时代,而不是因为害怕用户的抱怨就不去改变它。

尤其是 UI 上,我们永远不可能让所有的人满意。但是,我们比如让产品越来越美,符合甚至引导当前用户的审美,而不是落伍于时代。

问: 微信 7.0 版本启动页是一朵花,包括你写的看见之类的话,灵感是来自王阳明吗?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 跟王阳明的书有一定关系。当时写的是,「因你看见,所以存在」。王阳明的书里是说,一朵花长在山里的石头缝,你不看它,它就不在,你看它,它就在那里。在 7.0 版本,我们想表达的是说,看见的力量。如果按照王阳明的心学,心的力量是很大的。同理到社交上,如果你看不见这个朋友,这个朋友十年没见了,他其实不是你的朋友了。当你看见他,他才是你的朋友。王阳明的书还可以跟量子力学结合。我们微信 7.0 那句话,「因你看见,所以存在」,完全符合量子力学的角度。因为一个粒子,当你观察它的时候,它才存在。你不观察它,它就是一道波。

微信产品设计 80 个为什么(2):设计和理念

问: 微信 8.0 的启动页是怎么设计的?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 做产品其实是个很枯燥,很理性的过程,无法把个人情绪和情感带入。唯一有机会带入的地方就是启动页,你可以有一些情绪的发泄。微信 8.0 的启动页,有个故事我跟同事们说过,有次我在开一个很正经的会,中间我开小差了,拿了当时的一张纸,在上面写了现在开屏页的这几句话。我觉得可以代表这次更新的每一个功能,刚好连起来了,而且我也觉得特别简洁,没有任何修饰和形容词。我自己觉得挺好的。我看见你,代表了通过视频号看到另一个身份的你。笑脸,代表了你的状态。烟花,是代表新的表情。一首歌代表了新的音乐播放。你看见了你,其实代表直播,通过你的眼来看到你眼前的世界。

问: 为什么张小龙说「好的产品应该是用完即走」?

张小龙答: 我发现大家对于这个词有特别多的一些误解。大家都会说,因为大家都离不开微信,所以才会说“用完即走”,去年对这点可能没有解释得特别清楚,我其实只说了上半句话,用完即走,但其实还有下半句话,走了还会回来。

用完即走的本质是任何一个工具都是帮助用户完成一个任务,越高的效率越好。 当我们完成一个任务以后,我们当然希望用户能做别的事情,而不是一定耗在一个工具里。

比如说用微信,我们当然希望微信能给用户带来更多的帮助,但并不意味着我们希望用户一直低效率地在微信里处理事情,如果他一天信息的处理要用两个小时,那我们应该帮助用户尽可能在两个小时之内处理完,而不是说一定要把两个小时的任务变成三个小时,让他在微信里花费更多的时间,我认为如果那样就不是一个用完即走的概念。

所以用完即走和用户再回来,其实并不矛盾,相反只有当一个用户在一个工具里用得很愉悦,用得很高效,他才会下一次回过头来使用这个工具。我们现在说的小程序也是这样的,小程序应该是帮助用户尽可能在短的时间里面完成一个任务,并且离开这个小程序,这样的话他才会有很好的体验,下一次他会继续回来用这样一个小程序。

问: 微信一直倡导用完即走,但 8.0 版本怎么给人感觉用完不走了?比如视频号加了更多推荐内容,似乎增加了用户的停留时长

张小龙答: 推荐的东西,如果把它定义为是娱乐时段的话,那么它是在这里娱乐消费的。目标是消耗时间的。在这一个板块,并不是说非要他立即就走。用完即走并不是说用户必须使用的时间越短越好。就像一个 120 分钟的剧,不是说为了让你用完即走,我用技术让你 60 分钟看完,这样就不合理了。

问: 微信的「悠闲」表情怎么戒烟了?

微信产品设计 80 个为什么(2):设计和理念

答: 很早之前,QQ 和新浪微博就撤除了吸烟表情。据悉这是北京控烟协会活动的结果,控烟协会认为这些软件在日常生活中使用频率非常高,每一次发送都会产生潜移默化的影响,有诱导青少年吸烟的倾向。

问: 为什么微信对用户称呼统一都是“你”而不是“您”?

张小龙答: 我们并不需要用一个很尊敬的态度称呼用户,而是应该当朋友一样称呼,所以应该是一种很平等的关系,这个写进我们的产品条约里面去了。

问: 微信是工具还是平台?

张小龙答: 在我们对公司的一次培训里面,有个同事问我微信的战略是什么?我当时只说了一句话,我说微信只是一个工具,我们应当想如何做好这个工具。在同事们的心目中,微信并不仅仅是一个工具,大家认为微信是一个平台。但我认为微信是一个工具,这是一个非常宏大的目标,我并不认为一个工具是一个很低层面的东西,事实上人类从原始人进化智能人类的过程,就是因为人会制造工具,我们所用的绝大部分的产品本质上来说都是工具,但是工具有好坏之分,能够做一个非常好的工具其实难度是非常大的,但是如果说我们要做一个平台,我会不知道我们要做什么?一个好的工具应该有一个很强的属性,就是提高效率,用完即走。

问: 为什么微信的设计很克制?

张小龙答: 克制这个词从来没有在我的脑袋里面出现过,如果说做一些事情我们要求自己很克制的话,那是一种什么样行为?那是一种自我压制的行为,但是我并不认为我们在做这样的决定时我们要自我压制,或者说自己切割掉我们很多想要做的事情,那不是一个很好的状态。

相反的,我们在做很多很多决定的时候,反而要去判断什么样的东西是最合理的,合理性才是这里面要考虑的一个最重要的因素,我们会舍弃掉很多很多本来想要做,后来发现做不好的东西,这种舍弃并不是因为说我们很克制,所以我们少做一点,而是说我们发现有很多事情做不好,或者说有很多决定它一开头是错的,或者说很多的想法,最后验证可能是行不通的,那我们如果硬要去做这些事情是不合理的,我们会把它舍弃掉,而不是说我们要克制。

问: 为什么微信 8.0 浮窗从悬浮改成了左上角?

张小龙答: 我其实一直很不喜欢浮窗。因为它就像狗皮膏药。这也是 PC 时代大部分网页浏览的体验都不好的一个原因。

为了解决一篇文章要很久才看完,而中途要不断处理微信消息的需要,我们有了浮窗功能。但它并不完美。很多时候,一篇文章,一个长视频,是要分很多次才看完的,如果每次都要先拖到浮窗,也是很繁琐的。

现在,微信提供了一个尚未看完的内容的列表,方便可以随时找回这些内容继续看完。尤其是对于长视频,更加需要随时可以切走,然后又能快速找到。直播也一样需要。

问: 为什么微信安卓版不采用 Android Design 设计风格?

Kantzou 答: 我每次在「知乎」上吐槽 Android Design 的时候,总是会有人在下面说,“哎呦,原来「微信」的安卓版做那么 Low 是嫌 Android Design 做的不好啊。”这种评论,我都不会回复。

我讲一下为什么差呢,举个例子:我给我爸买了个安卓手机,给他用。「微信」在那个时候,Tab 栏是在顶部的,然后我告诉他,“哎,左右滑动是可以切换的。”

微信产品设计 80 个为什么(2):设计和理念

我观察他用,我会发现:4.7 寸屏,他往上按的时候,他不会去滑的,因为他看到那里有个字,他就会去按,因为他没有学习到那个程度。Android Design 的问题在于太超前,我这么说,那些喜欢 Android Design 的人心里会不会更舒服一点?

为什么乔布斯那么牛 B?是因为他知道,触摸屏出来以后,人的自然反应就是「press」,而不是「滑」。「滑」在现今这个阶段还不够自然。Android Design 在这个问题上解决的不好,因为绝大多数的大众不像我们,我们是已经充分学习了的。我相信很多大众,比方说不是我们这个专业的学生,你去让他们用一下 Android Design,我相信大多数人都是点,很费劲的点,Android Design 为什么会做成这样?他觉得啊:大屏一定要做的让人方便,所以操作是滑动,这样不用让他点击,就不会让他觉得那么累。所以我为什么觉得谷歌是一个除了个别 App 设计的不错,其他 App 设计的都很烂的公司。谷歌设计的真的不好,我说的设计的不好,不是皮毛上面,所以你不要跟我纠结这些细节,我说的是他的逻辑不对,谷歌是一个太工程师思维的公司。

Android Design 有个「应用抽屉」,我跟我爸说,“我给你装微信了”。

微信产品设计 80 个为什么(2):设计和理念

他问,“在哪里啊?”我说,“点那个地方。”“哦”他说,“知道了。”下次又问,“微信在哪里啊?”我跟他说,“点那个地方。”三次还是不知道,为什么?因为 Android Design 在给他二维的导航,因为你要在桌面上面滑动,如果桌面上面滑动没有,你还要给他一个「应用抽屉」,在一个新的地方左右滑动,简直 Unbelievable,但是对于安卓的技术思维的人来讲,这个很合情合理啊。

问: 微信「设置」里为什么会有个「插件」?

张小龙答: 给用户选择权。为了保持微信的简单,在微信里面,除了核心功能,大部分的功能都做成插件的形式。这个方向很早就定下来了。这让我们就算加了很多东西,也没有把微信变得复杂。

陆树燊答: 微信团队的基因里原来就有实验室文化的,这个要从微信的历史说起。

微信团队在做微信之前做的是 QQ 邮箱。QQ 邮箱里面有一个功能叫“邮箱体验室”,用户在这里开通一些新奇的功能。QQ 邮箱正是靠一次次的实验,尝试各种功能,才从一个烂到没人用的鸡肋邮箱,慢慢变成雄踞行业第一位置的七星级邮箱。

微信产品设计 80 个为什么(2):设计和理念

而微信从创始之初,就一直在继承 QQ 邮箱的「遗产」,从邮箱的 QQ 对话功能到微信的「QQ 离线消息」,从邮箱「漂流瓶」到微信「漂流瓶」,从「附件收藏」到「微信收藏」,从邮箱的「阅读空间」和「邮件订阅」到微信的公众号……

同样的,微信也继承邮箱的体验室,有了「第一个实验室」,那时的名字叫「插件」。所谓插件,就是把功能选择的权限给到用户,用户觉得喜欢和需要,就「安装」插件,觉得不需要,就「卸载」插件。而开发团队届可以通过看用户安装和卸载的情况来决定插件的去留。

于是,有的插件试着试着就变成不可插拔的功能了,比如朋友圈,现在已经不能卸载了;有的插件试着试着就不见了,比如微博阅读。

后来,大概在 13 年,微信 5.0 发布前后,微信插件改叫「功能」,深埋在微信的设置选项里面。因为随着微信用户量的增长,用户习惯的改变,早期的那些插件功能已经被证明不需要了,但又有个别老用户在用,不好删除,就把它们的入口深埋起来。比如语音记事本、QQ 离线助手、QQ 邮箱提醒、群发助手。

这个修改,某种程度上意味着,微信的第一个实验室时代结束了。这一轮实验,基本伴随着微信团队在移动互联网的探索和成长。实验之后,微信也奠定了它的行业地位,所谓的「移动互联网船票」。

问: 微信为什么重视产品设计而很少提到运营?

张小龙答: 对于一个产品,我们更应该偏向产品本身还是运营?这是一个老生常谈的问题。这里也没有绝对的衡量标准,只是看各家的特长和偏好了。而且对于不同的产品,也会有不同的偏重点。

而我的观点是做一劳永逸的事情是最好的。很多开发的同事知道,在开发上我们到底是要做「类型」还是做一个一个「实例」?如果我们不是把各种订阅内容抽象为一个订阅平台的话,可能就会做了很多很多的「实例」出来,产品变得非常复杂。比如微信的「漂流瓶」和邮箱的「漂流瓶」到底有什么不同?除了微信的「漂流瓶」可以发语音,在产品结构上的不同在哪里呢?邮箱里面的「漂流瓶」有不同种类,比如「同城瓶」「交友瓶」,它更偏运营一些;而微信里面的「漂流瓶」就只有一种。因此我们发现,在邮箱里面这样做,我们会因为用户的需求类型增加,需要不断地增加内容才能满足用户,可以想象这么运营下去,会把大家都累死。所以我们更加倾向直接做到最本质的东西,至于它能满足用户什么需求,那是用户自己的行为。我们做一个「类型」,而用户自己来产生「实例」就可以了,也就是说,我们用「类型」的思路,把所有「实例」都做了。

我们按此方法做完很多特性以后,发现已经没有改进的空间了,也不需要去改进了,一改进可能就不对了。因为一改进就可能变成去把它「具体化」,一旦开始「具体化」以后,就需要不断地「具体化」,就没有可以想象的空间了。

文章来源:优设   作者:龙爪槐守望者

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

用户消费决策的路径和影响因素——以电商产品为例

涛涛

导语:对于消费者来说,购买一件商品的过程可能会需要花费很长时间,期间会受到各种因素的影响。本文作者将从人货场的角度,来分析用户消费决策的路径和影响因素,希望对你有帮助。

消费决策类产品,下个定义是以促进用户购买决策为导向的产品,如排行榜、直播、视频、评论、买家秀、问答。

一个用户完成购买流程的路径为:种草->品类决策->商品决策->购后交流,对应的平台视角即为售前->售中->售后3个阶段,售前对应种草,售中聚焦商品决策。

电商是以销售目的为导向,所以在商品被用户加入购物车之前,宽泛的说除购物车结算外几乎所有产品线都属于泛消费决策类的范围,都具有导购的属性。这样的定义过于宽泛,因为如搜索、推荐等产品已经很独立。

普通人常说的消费决策,往往聚焦在售中环节的商品决策,场景为用户进入到商品详情页,判断一个意向商品是否值得购买,决策的结果是收藏、加购或立即购买,当然也可能直接离开。

今天我们就围绕售中的商品决策进行分析。

概括的看,商品决策环节有以下3个影响因素:商品属性、购买心理、用户场景。

电商是人货场的统一,产品功能和商品、内容的运营共同影响用户,现有介绍消费决策类的文章,多数都是在讲用户消费决策的心理,也有一些讲了路径,缺乏对人货场的统一介绍,也缺少对相关产品运营的介绍。

还原场景,一个用户来到商品详情页,是怎么考虑的,进而完成下一步操作呢?

从人货场的3个因素,笔者说说自己的看法。

一、商品属性

商品属性涉及品类、价格、优惠、品牌、商品适用性、是否标品,以及平台属性、销量等相关项,涉及的产品模块,除商品详情页的商品信息、服务信息、店铺信息展示之外,还有评论、问答以及买家秀。

价格与优惠影响最明显。

除了少数的土豪用户,买东西影响最明显的因素就是价格,价格在商品详情页一直被放在商品图之下最显要的位置,很多甚至把价格标注到商品图上。对于某一件商品的价格,用户感知更强烈的是能够占便宜(优惠),而不是最便宜,因为商品的价格一直处于变动中,又会叠加不同的促销,在pc时代的比价产品下线后,用户已经很难搞清楚商品的最低价。

所以在价格模块,电商平台经常呈现给大家的是优惠了多少钱,以及最终的价格,让用户感觉到占便宜是第一要点。一般来看用户消费决策的成本,低价商品低于高价商品,比如买一本几十元的书的决策成本要远低于买一台千元的3C数码。限时优惠能直接刺激用户完成消费决策。

品牌与平台属性紧密相关。

在同一平台中,有品牌的商品消费决策的成本往往低于无品牌商品,更容易获得用户信赖。品牌不仅涉及到商品,店铺也会有品牌的维度。在淘宝中,天猫店相比于淘宝店就具有品牌优势,品质容易获得更用户信赖。在淘宝店中,店铺评分、皇冠的数量就是店铺的品牌等级。

在拼多多,因为大量存在的都是无品牌商品,所以用户购买的关注点就变成了价格和销量。而对于一些品质电商,比如网易严选,品牌的概念就会相对弱化,有大量无品牌的好货供用户选择。

标品比非标品更容易完成消费决策。

比如图书相比于服装,一本书对用户都是相同的,用户只需要判断内容是否适合自己。而对于服装,在判断是否适合自己的身形时,就要考虑大小、美观等更多因素。

不同的品类,在单品页适合不同的呈现模块,比如淘宝的买家秀,对展示服装天然友好,吸引用户看穿着的效果,而对图书却极度雷同,用户拍的都是清一色的图书封面图。

不同的细分品类,同一产品模块也可以呈现不同的内容,比如图书品类的教辅和小说,因为用户群体天然的差别,在评论模块的内容需求就会有差别。教辅购买者是家长,更关心书籍的内容是否正确,不能有错别字等。而小说的读者,更关注内容是否吸引自己,适合自己阅读。

最后说说商品适用性,对于母婴类商品,商品的品质影响宝宝的健康,使得消费决策成本相应提高。再比如一些老年人的食品,一定会被精挑细选。

二、购买心理

用户的心理和思维特点,主要表现就是快思维与慢思维的区别。这就是在《思考,快与慢》中,丹尼尔·卡尼曼详细介绍的大脑有快与慢两种做决定的方式。

电商平台现在总是希望把用户留下来,让用户逛起来,希望用户像逛街一样逛电商平台,直播电商中那些没有明确购买目的,刷直播的用户,也是一样,在不断的逛中,很多用户就会依据快思维,不断地剁手下单。对于这类快思维主导的用户,在直播的场景中很多用户不再进入商品详情页,随着主播口中的3、2、1倒计时,迅速下单。冲动是魔鬼,直播电商的高退货率正是用户对这种思维的一种事后反悔。

而对于那些慢思维为主,理性决策的用户,他们的购买路径甚至会延长,有些用户会在商品决策阶段去其它电商app,三家比价。有些会在购买前到知乎、小红书等平台查看评测,主动做功课。排行榜也是这类用户常用的产品功能。这类型用户的完整购买路径会变成,种草—>查看攻略—>品类决策->商品决策->三家比价->购后交流。

三、用户场景

场景对用户消费决策的影响更加直接。

今时今日,电商平台成为拔草工具的倾向愈发严重。当用户在小红书被种草后,下一步会直接到电商平台搜索对应商品,如果是品牌商品,很多用户会直接进入旗舰店直接下单购买,品类决策和商品决策会大大弱化。

使用环境也会产生影响,在小程序的环境中,用户的购买场景发生变化,很多用户是在微信群中看到kol的推荐,点击kol发送的商品链接,直达商品详情页完成购买。当购买场景发生变化后,用户的购买路径也会对应改变。

购买的用途也会产生影响,比如买一本童书,如果是送给自己亲戚的孩子,往往会参照排行榜上畅销的童书购买,而不会关注书中具体的内容;而为自己的买一本小说,则要更多关注书中的内容是否吸引自己。

这就是用户消费决策的购买路径与影响因子,理解商品属性、购买心理、用户场景对消费决策的影响,才能更好地提升电商平台的效能,提升购买转化。

文章来源:人人都是产品经理   作者:左手思

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


B端Dashboard设计指南系列

鹤鹤

Dashboard的含义

前言

Dashboard在B端设计的工作中是一个绕不开的话题,在此我根据自己工作中实际的一些经验总结给大家归纳出一篇更符合工作场景中Web端的Dashboard设计内容。


什么是Dashboard?

Dashboard的中文直译是仪表盘,最初与dashboard相关在界面出现的是苹果电脑系统Mac OS X v10.4 Tiger操作系统中的应用程序,用作称为“widget”的小型应用程序之运行基础。



B端常见Dashboard

2013年Stephen Few写的《Information Dashboard Design》中指出“仪表盘是为了实现某些特定目标而对重要信息进行的视觉传达,对一屏上的内容进行组织呈现使人一瞥便能掌握其所传达的信息。简单点来说就是:为用户提供全局概览,让用户快速掌握工作进展及进入工作状态并可以访问最重要的数据,功能和控件。



Dashboard设计案例

以下是Dashboard常见4点设计不是很好的案例,现在带大家一个个看下怎么才是更为合理。


案例一:右边Dashboard上的信息做了层级的区分,相对左边更加直观。


案例二:左边Dashboard颜色偏荧光色,色彩语言相对右边不适合长期工作使用。


案例三:设计方案时没有采用格栅格化解决适配对不齐等等问题


案例四:dashboard模块之间间距没有呼吸感。



B端Dashboard的功能分类

设计师需要了解的功能分类

B端设计中,设计师要实时了解哪些是重要内容以及核心数据。Dashboard可以直接传递出:“业务整体状况如何?有哪些关键指标?各指标的运行情况分别如何?哪些指标出现异常?需要用户做些什么?”。由此可知,B端Dashboard产品中大多数都以看为主,辅以功能控制。主要分为监控操作、分析处理两大场景。当业务较为复杂时,可以用战略概览场景提供快速入口。



1.监控操作:

使用户可以一目了然地检查其状态,提供关键指标实时监测并且告知异常状态。更重视实时观看状态。


2.分析处理:

通过数据图表,配合控件进行不同维度的数据分析。以数据为中心,并显示尽可能多的相关数据视图。


数据性Dashboard。数据概览可视化展示为主。帮助用户提供较为直观数据维度,更好分析决策。


综合性Dashboard,既有提供数据全局概览可视化,同时也能快速在页面进行操作完成工作。国内B端产品最常出现的Dashboard功能模式。本篇文章也是着重介绍如何完成这个类型需求


3.战略概览:

在复杂的业务中,可以呈现业务分散的重点信息,用户可以通过提供入口快速跳转至相关模块。



设计前分析

了解Dashboard的用户

B端设计过程中每多了解一个维度分析就更有利于下一步Dashboard框架搭建。因此在对Dashboard有了一些简单了解之后,我们再来了解下用户场景。例如:用户是财务人员审批商户充值申请。工作人员进入dashboard之后先是进行充值打款申请。那么设计时可以考虑在Dashboard中加入常用功能:充值。并且需要给到相应充值数据概览:账户余额。每个B端产品都有自己特定工作场景。因此从用户、场景和任务这三方面考虑,可以做到帮助设计师更清晰设计dashboard布局以及设计自查。

因此以上这些信息都是需要在设计Dashboard时弄清楚的内容。



信息处理

当弄清楚需要呈现信息内容后,需要进一步对信息做处理。从用户的角度,举个例子在FMS财务系统记账中,财务需要查看季度报表。那么数据的单位以默认季度呈现会更为符合使用用户需求,准确且高效。具体可以从以下四个维度来做进一步处理:覆盖范围、时间跨度、粒度、个性定制。一般核心指标不超过7个,确定核心指标的联系及优先级。

合理的信息结构能够帮助用户高效阅读,理解内容。如何将信息碎片有逻辑地组合在一起,合理呈现和布局,选择使用什么结构视内容而定。


举个例子:

对于管理者的角色来说使用Dashboard的诉求是:及时把控业务情况

信息处理内容:

1.掌握重要业务数据:经营数据,订单数据,客户数据;

2.了解员工工作进度;

3.处理急需解决的工作任务。

对于执行者的角色来说使用Dashboard的诉求是:高效完成工作任务

信息处理内容:

1.急需解决的工作任务:待发货订单,待退款,待跟进客户

2.了解自己的工作进度

3.经常使用的功能:发布商品,添加客户,开单

4.查看重要通知公告:公司发布的公告


了解Dashboard的表现设计类型

Dashboard表现结构常见两种类型:卡片型、流程型。


卡片型

最常见就是卡片型。即将有相关联的内容进行分组呈现,让Dashboard内容归类而不杂乱无章。


流程型

内容相互之间具有一定的逻辑关系,如地理位置关系、数字包含关系、对象父子关系等,这种结构可以让对象之间的逻辑关系十分直观。很直观的呈现了资源对象之间的相互关系。



Dashboard的设计

Dashboard的表现构成

国内B端产品一般是由以下这几个部分组成的。全局导航、数据概览、待办事项、常用功能、任务进展、平台推送、数据图表。下面带大家仔细看下具体每个部分具体如何设计。


1.全局导航

在B端Dashboard中,全局导航一般由三个部分组成。平台LOGO、功能入口导航、快捷功能导航。


1.1平台LOGO

一般这里都会放LOGO,对于一些壁垒标准化B端服务,这里通常是给好标准规则,后台自动配不同客户的LOGO。因此要考虑到区域的色彩是否适用各种不同LOGO。如果是OA或是定制化B端服务,那么就可以直接定制设计。


1.2功能入口导航

就是菜单导航,在B端Dashboard一般都是在侧边。建议最多不要超过9个,遵循7±2原则。尽量将同类型归类,好好利用下二级分类。另外入口不要太深,用户容易找不到入口。尽量设计优化合并来减少用户使用负担。


在国内B端产品中,最常就是将功能入口导航放在侧边。适用于更专注功能和快速操作的系统

优点:

拓展性,一级导航的数目可以展示更多;

层级清晰,一二三级导航都可以流畅展示;

操作效率高,用户在操作和浏览中可以快速定位和切换当前位置。

缺点:

视觉动线左右折回,比顶部导航更易疲劳,

内容区的排版空间更小,需要考虑适配问题。


在国内B端结构比较庞大的后台中,通常会将功能入口导航设计为混合模式。混合模式就是将功能入口分为顶部与侧边两边都有。这是因为侧边模式已经无法层级扩展性已经无法很好的满足产品架构了。

优点:

层级拓展性强,可达四、五级导航。

缺点:

操作难度上升、视觉动线更复杂。



还有一种模式:顶部模式,这种模式在国外产品中较多,在国内的B端产品中较为少应用。原因之一是起初最早的国内B端产品就采用这种排版模式,在国内形成了一种用户操作习惯。国外最常见的B端顶部导航:saleforces、hubspot、zoho。

优点:

沉浸感比侧边以及混合都要强,几乎不会对于用户的阅读行为有干扰,因为Web也有顶部浏览器菜单。

缺点:

一级导航栏的栏数及字段内容受限严重。国内B端产品会有很多快捷功能就更不利用采用这种模式



1.3快捷功能导航

一般包含:消息通知、账号信息、帮助中心、设置。在国内B端产品中基本上都是在右上角







2.数据概览

在B端Dashboard中,数据概览通常都是选取最关注的数据指标来展示,而不是全部数据;选取最关注的时间段,而非全部时间段。

构成:数据名称+数字

这个模块在设计表现上最重要就是信息层级的设计处理。如何能够让用户一眼就看到最关注的数据内容指标。设计时注意突出数据才是关键。设计时关键数字上就要字号大一点,甚至可以采用特殊的数字字体,例如DIN系列,来加强对比。



3.待办事项

待办事项模块通常是应用在执行角色的Dashboard中。节省工作人员寻找任务的时间,避免遗漏任务。

构成:待办事项名称+数字+可点击跳转的链接

待办事项的展示方式可以是数据可视化也可以是数据概览。但是有一点,数据必须是要能够点击的,因为待办事项就是要有入口去操作。同时也可以把待办事项平铺出来,平铺几个可以根据具体情况定。如果待办样式本身很多的情况下,可以采用tap切换的样式全部展示出来。



4.常用功能

用户高频操作快捷入口,点击跳转相应操作页面。这个模块每个b端产品都不一样,需要仔细反复斟酌是否是用户需要的高频功能。



5.任务进展

用户当前最关心的任务,常用进度条或者时间轴的形式表示。



6.平台推送

平台用来触达企业的信息,一般有产品更新动态,学习培训,客服,广告推送,活动消息(这个一般比较常出现在平台类的b端产品中)



7.卡片式数据图表

卡片式数据图表可以拆分成图表+辅助两种组成部分


7.1图表

B端设计师需要准确通过图表来表达出用户需要的维度信息。

7.1.1折线图

随时间(连续内容)而变化的连续数据,适合表现趋势。Y 轴刻度值选择要合理,以数据波动要最大化的显示


7.1.2面积图

面积图和折线图比较类似,针对只有单个数据类型有面积区域的表达效果比折线图好。数据类型尽量不要超过2个,有2个数据类型时,注意调整面积区域的透明度以及色系保持统一



7.1.3柱状图

通常用来统计累积叠加数据,数据之间能够非常清晰直观对比。柱状图的单位宽度不要是固定值,单位宽度之间间距在不同分辨率屏幕下的对比要合理。不用大圆角元素,不够严谨,太活泼。最多使用两种颜色,一种默认,一种hover或tap,保持界面统一性



7.1.4扇形图

有共同的上一级层级作为统计总合,数据之间平级且有占比。数据必须是正整数,至少两个以上数据,且用不同颜色表示




7.1.5环形图

与扇形图很相似,但是比扇形图更加直观浏览且不被抢视觉。避免过于太细太粗,控制好留白呼吸感




以上是常用的图形图表,绝不是全部。有兴趣的同学可以到以下两个网站可以利用碎片化时间扩展学习

EChart:

https://echarts.apache.org/examples/zh/index.html

AntV:

https://antv.gitee.io/zh](https://antv.gitee.io/zh




7.2辅助元素

卡片型图表的第二部分也就是辅助元素。辅助元素里面还有很多细节元素组成:标题、轴、提示信息、标签、气泡信息、功能(筛选、导出、保存)。当然在实际设计中,会根据场景去修饰删减一些元素,以此来减少冗余信息,帮助用户快速达成目标,在最少的时间内获取更多的信息。



7.2.1标题

标题是区分卡片信息,迅速让用户了解卡片图表的重要元素。通常需要斟酌严谨不重复,简洁概括。



7.2.2轴

轴上最重要的内容就是单位,将每个数据在同一轴上都是维持同种基准。便于进行数据测量。



7.2.2.1轴的细节

现在知道了轴由哪几部分构成,那么接着了解细节



轴线

轴线细节一般只考虑是否显示,在有网格线的情况下,可以考虑隐藏x/y轴线。通常显示数据的轴作为隐藏,突出视觉重点,减少不必要的线条。


轴刻度

轴刻度是轴线上的间距不宜过密,确保信息可读性以及呼吸感,根据 7±2 法则,在可见的卡片内尽量保持这个规则,可以利用抽样显示的手段来优化轴标签重叠的问题,这种一般是在连续性内容上可以使用。若轴上单位信息确实过多,虽然是连续性内容例如展示30天单位,由于本身卡片信息不是过于最重要层级,设计在相对狭小空间尺寸中,那么建议考虑在轴线上安排滚动条,并将重看单位放置前位。设计特别注意点,将滚动条设计作为辅助元素不宜抢视觉。


网格线

网格线是用来辅助图表数据直观对比的,增加数据更快速的阅读性。举个例子:数据展示轴线在左边。那么离左边最近的数据图形可能不需要网格线就能立即对应到相应数字。但是越靠近右边的数据图形就相对比左边的数据图形就比较难一眼识别。因此网格线也担任了刻度尺的功能。在设计网格线时要注意网格线更多是辅助的角色。表现类型可以选择虚线或是实线。但是要把握好颜色选用不抢视觉重点又能看到。




7.2.3提示信息

以对照的方式来理解可视化对象的项目归类信息,总结图形形状和文本组成内容。



7.2.4标签

在图表中,标签是对当前的一组数据进行的内容标注。根据不同的图表类型选择使用。



7.2.5气泡信息

当标签默认不显示,气泡信息一般是鼠标tap或者hover时,显示该位置的数据。在简洁的页面中,也能让用户直观看到信息对应数据结果



7.2.6功能

这个模块涉及的内容偏多,在表单页面更常出现,以后有机会可以单独说。一般常用功能如筛选、导出、保存。可以让用户控制和友好的体验



确定B端产品的设计风格

首先tob的产品dashboard说到底还是给使用用户所使用,也就是“人”。所以通常情况下dashboard除了传递出用户想要的数据信息,还要传递服务于人。此外最重要的是B端设计师需要理解项目背景。例如某个财务应用平台不属于科技未来感,而是突出一种安全,高效,具有客户亲和力的商业产品特性。那么关键词:服务、轻松、高效、亲和、精致。那么一个干净、相对轻量、统一的Dashboard UI界面就提炼出来。



色彩

常说色彩是一种情绪版,在Dashboard设计中,色彩也是映射关键词的非常重要一个环节



字体

B端产品一般都是以数据为主要信息源,针对一些关键信息指标时,可以采用特殊的数字字体。由于本身数字字体包内存不大,所以也方便调用。例如DIN系列等等



设计稿尺寸

本篇内容都是针对pc端内容,具体移动端以后有机会会分享。大多数B端设计师都知道以1440x900设计,但是在工作中会以埋点数据了解到事实上真实场景还是以1920x1080的尺寸为多数。毕竟时代不一样了。以1440做设计主要还是考虑从上下兼容的角度的。B端与C端不同,C端往往照顾大多数的用户群体或是主要消费力群体。但是B端一般不会放弃任何一个用户,哪怕定制化。这个在C端是不太现实的。因此适配对于B端产品来说也是尤为重要。



设计原则

上面的内容更多是阐述每个部分的内容,实际工作中设计Dashboard时不一定按照那个顺序进行,因此在此再强调下设计Dashboard的设计顺序以及原则。要先弄清楚目标用户以及使用场景,确定好关键的大约7个核心指标。将用户整个流程梳理流畅之后,再开始考虑Dashboard设计执行。


同时在设计执行上也要特别注意几个点:

1.突出核心指标(7个左右)

2.信息层级区分

3.减少用户选择,尽可能默认给到用户需要的数据维度

4.界面简洁严谨

5.避免过多颜色与不统一

6.数据维度正确图表选择



设计的注意事项以及建议

1.tob的设计师要了解业务所处的周期在什么样的阶段。在探索期建议dashboard的设计应用于市面上现成的组件进行搭建,以便与研发团队一起为业务助力。更好更快的发展。

2.在tob的dashboard设计中,设计师要特别注意数据表现的落地效果

3.当dashboard只在设计层面改版,并且改版内容过大时,推荐保留旧版入口,提前进行埋点用户以便应对用户对于大版本适应缓解焦虑。如果有新功能或功能调整要及时加入一些引导设计,以便减少用户的学习成本。关于引导设计的内容欢迎参考我的上一篇文章:《B端必看的引导设计(一)》

4.允许用户定制和共享dashboard,虽然不适用于所有的B端产品,如果类似于团队协作中多种角色共用一套的dashboard平台,可以考虑引入这个功能。几组定制模块可以满足于不同角色的用户需求,并且能够增加dashboard的使用率

5.dashboard关键信息数据尽量设计在一屏以内,作为数据可视化,内容快速浏览获知全局,并且完成任务是比较重要的。

6. 突出统计数据的变化并对异常情况作出反应

7.数字设置不一定要设置为右对齐,但是单位是金额,那么要将金额设置为右对齐,为了使用用户识别方便,快速比较。

8.设计完Dashboard一定要自查一遍,是否真的符合工作人员的使用场景。有没有理解不准确的地方。



最后

为什么b端设计师要懂得Dashboard,在很多b端业务场景中,有个特点,设计师常常会接到大量数据展示要求。如果设计师对dashboard缺乏认知,就有很大的可能性会造成信息杂乱,并且在Dashboard的界面中充斥着一些无关紧要的指标,这就是失去了Dashboard存在的意义。另一方面在b端产品中,Dashboard往往是以首页的形式出现的,是非常重要的。

文章来源:站酷   作者:一九互七

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

探索“流畅感”—谈手势动效体验设计

鹤鹤

当我们设计师输出了精美的设计稿,然后附带了一个流畅的手势动画,交付给开发的时候,也期待着开发大佬搞出和自己预期一样体验流畅。但是等到实际体验的时候,却发现有一种说不出的闹心。

“这个感觉不好按...”


“划起来咋这么费劲呢?”


“怎么感觉动画怪怪的。”



Chapter 1

——————————

我们与流畅的距离


当你正准备和开发一通友好探讨的时候,这个时候开发向你发起了一系列灵魂拷问:


“你这个左滑的手势,划多少才算触发?划多快才算触发?如果划了一半划回去算不算触发?如果我先点击后滑动算不算触发?松手之后的动画是多快的速度?什么速度曲线?要不要回弹效果?回弹阻尼系数是多少?”


这个时候你发现,自己提出的设计需求根本太天真了。



系统组件无法直接调用了

刚才的问题真实原因是,在做很多手势识别或者一些我们看起来日常的效果,其实是蕴含了很多复杂逻辑的。


这些复杂逻辑原本被封装在操作系统内,在系统内时可以随时调用。但是一旦脱离了操作系统,那手势的处理逻辑就会比较简陋,导致最终的体验不佳。


那这个时候也许你会想问,我们怎么会脱离操作系统呢?我们的手机不都是iOS和Android的吗?不都是操作系统吗?其实这里指的操作系统,是指操作系统的原生组件。这类组件只有在原生开发中才能被调用。



如今,很多App都使用前端语言来开发内部页面(HTML/CSS/JS)。随着Web混合开发,Flutter等跨端技术栈的出现,越来越多的团队开始拥抱这样的跨平台技术栈。在节约了开发成本的同时,随之而来的就是,在日常开发过程中,离纯原生组件越来越遥远。


在这样的背景下,研发团队的体验设计师需要自己来研究用户行为,手势、组件和动效,实现原生组件类似的复杂逻辑,才能最大程度的接近甚至超越原生组件的体验。



不加处理的直接调用前端接口

其实使用各个技术框架,也是有内置一些接口的。例如一些事件监听器 / 动效曲线等。这也是腾讯文档之前一直在使用的,但是会遇到一些问题。总结下来,主要有以下几个问题:



无法精确操作:用户的操作和操作反馈被自己的手指挡住,无法完成精确操作。


手势识别误触:同一热区支持了多个手势,可是用户的实操时的手势动作又没那么标准,导致用户误触其他手势。


手势触发费力:滑动费劲,需要滑动很长距离才能触发预期的动作。


动画不流畅:各个技术框架自带的动画曲线和插值器,良莠不齐,体验不统一且不够流畅。



系统组件背后的复杂逻辑

对于原生组件,我们习以为常的系统控件和手势设计,里面蕴含的智慧远比我想象的更多。


举个简单的例子:iOS系统的首页,它可以支持横竖各个方向的滑动,并且在触发一个方向的手势之后,就无法再触发其他手势了。



但是其实有个问题,手指和平时演示的不太一样。


就是手指贴合上屏幕的时候,手指与屏幕的贴合面,并不是均匀向四周扩散的,而是向下的扩散更大一些。对于触摸中心点,在触摸的过程中,就会有向下的一个偏移。



如果直接识别,这个偏移直接被识别为向下滑动,那就会无法触发左右滑动的手势。


例如在iOS内的手势识别,有一个专门的接口来做识别:PanGestureRecognizer,这个接口会在10px内先判定手指移动的方向和距离,再对具体触发的手势来做定义。例如下图,虽然刚开始手指位置有些许下移,但是最终还是可以左滑判定成功。


所以你会发现,如果在iOS桌面上轻微的向左右滑动(10pt内),桌面是不会有任何响应的。就是因为在10pt内,系统还无法确认手势的方向。


另外,系统还自带了很多手势反馈操作,包括回弹效果,甩出效果。里面的小逻辑设计需要非常精准。并且对于滑动的手势还带了回弹效果,看起来非常爽。




打造流畅体验设计


腾讯文档是基于Web / Flutter的应用,并且接管了很多原生系统的能力,包括排版能力、光标选区能力,拖动能力等。因此,很多基于Native开发能很简单解决的问题,在Web下就要重新打磨一套我们日常习以为常却逻辑复杂的组件。



Chapter 2

——————————

精准且适应性的规则


由于腾讯文档是基于Web的的应用,接管了很多原生系统的能力,所以不能使用系统的Gesture Recognizer,也不能使用系统的选区光标能力。


如果是简单的使用前端的操作监听器,那会要求用户使用极其标准的手势操作才能触发,否则就会触发失败。因此需要设计更精准且适应性的规则,来包容用户不那么标准的实操手势。需要帮助用户在粗糙的实操手势下,猜测用户原图,并精准完成的操作。



常用手势的进阶定义

可能你以为手势操作并不常用,其实并不是的。


一个单击,一个双击,其实本质上都是手势。


不过,很多人可能会认为,按说这些操作都有原生的监听器,不需要再去定义。但是其实如果不做一些进阶定义,就会出现操作不灵敏的问题。例如下面这个问题。


在很多安卓手机上,或者是我们自己的腾讯文档里,时常遇到一个问题:就是原本以为双击文本区域可以选中文字,可是却发现这个双击成了一个玄学事件。双击有时生效而有时不生效。


理想的双击大概是这样的,是需要2次有效的Tap事件:



这个Bug让我们来定位一下。让我们还原一下事情的经过:



哦!原来是因为双击的其中一稍微偏移了一下,拖动到了光标,导致系统判定是一次Tap一次Drag的行为,这样就没有办法触发双击行为了。


解决方法也很简单。把10px偏移距离内的滑动行为都判定为点击行为就可以了。从这里看,我们其实需要做的是,规范“点击”这个手势的定义。


因为原来的系统自带定义,容易造成误操作,而且手指贴上屏幕的时候,都会产生轻微位移,或者一不小心滑动了页面,或者不小心拖动了光标,导致手势识别的不灵敏。


原定义:“点击并在500ms内在原处松手”。


需重新定义为:“点击并在在500ms内,在10px以内处松手”。


另外,文档移动端也定义了一系列更进阶的手势的操作,在这样对手势的进阶定义后,操作可以被更精准和智能的判断。这些定义被写在了设计规范中,包括了单击 / 双击 / 长按 / 拖拽





光标拖动&长按选中

腾讯文档的整个文本编辑区域都是使用Canvas实现的,由前端自主控制渲染。因此,选区光标就无法直接使用系统能力,需要设计师来设计一套选区光标,并且支持系统的各种选区光标的手势。


由于腾讯文档的光标选区是非常基础基础的编辑组件。这个组件在一般的产品中,都是直接复用的系统组件,但是在腾讯文档中,就需要重新去考虑光标组件。


首先有个需求,光标是可以在文本中快速拖动的。


经常会遇到拖动。无论是光标拖动,还是长按选中,我们都希望能清楚的看到光标的位置,所以我们在用户拖动光标和选区的时候,使被拖动的组件放大1.5倍,使用户可以看到拖动效果。



这就够了吗?不够的。


如果用户想要精准的控制光标,首先要让用户完整的看到光标。用户在拖动光标的时候,手指经常会不自觉的向下移动。这是为了让自己看清光标,这个时候,我们不应该把这个移动当做是把光标向下移动一行,光标本身不应该跟随向下,应该只在同一行,并且只响应左右移动。



但是当我向下拖更多距离的时候,光标就应该一直保持在手的上方,以确保用户可以精确操作。



同样,我们定义了长按后可以拖动选择的手势。在拖动的过程中,允许用户向下偏移一定的区域,来看清选区的具体边界位置。



手机端的光标选区,一个我们日常习以为常的光标,里面竟然有那么多小细节在里面,才能让光标变得好用。



滑动触发规则

当一个滑动手势被触发时,我应该如何判断这个手势已经被触发了呢?这个判断并非简单的横划竖划,而是针对的不同的场景,去做特殊的处理的。


案例1:向下滑动手势


例如说,一个非常简单的手势,半屏向下滑动关闭。我们通常来说我们的日常体验,会是一个对距离的判断,当手指拖动容器超过一定的距离,然后松手,就可以触发手势。


但是仅仅判断距离是不够的。因为手势是对现实世界的映射。很多时候用户希望滑动很短的距离,把东西“甩”出去。


如果仅仅判断距离,那就很难“甩”出去。这时候就还需要判定用户手指在离屏时的速度了。最后能达成一个比较轻松就能触发手势的结果。




案例2:左右切换相机


这是腾讯文档的文档扫描页面。上半屏是大面积的取景画面,底部是文档类型的选择。


因为取景页面可以点击对焦和测光,因此轻微的滑动不应该导致整个取景页面或者底部Tab的滑动,应当是当整个页面检测到一个比较大的滑动动作之后,才自动移动切换。


但是如果需要离手才能触发,如果用户划动的速度比较慢,整个体验也会随之变得过于拖沓。所以这里还加了一条逻辑:当手指滑动速度的加速度急剧减小时,不用松手也可以触发手势。这样的体验感会觉得流畅很多。





Chapter 3

——————————

愉悦且有意义的动画


在腾讯文档中,点击、滑动、悬浮、长按等手势操作贯穿用户的使用过程,动画效果是所有交互操作的视觉反馈,也许它没有那么的「高逼格」,但它却是这台精密仪器运转不可缺少的“润滑剂”,流畅愉悦的动效能够让体验更美好。


但是由于腾讯文档起初是基于web混合开发,后面又加入了Flutter框架,这就导致多个平台、框架的动效逻辑混在一起,在这个背景下,设计师们就需要从多方面重新梳理并定义动画的基础规则。





自然流畅

自然流畅是腾讯文档内所有动效运行的基础原则。


由于腾讯文档是基于Web、flutter等多框架混合开发的应用,动画曲线又都是基于各自框架自带的贝塞尔曲线(cubic-bezier),这就经常导致一些同类型的手势操作,最后所呈现的动画效果却相差很多。并且原生的动画曲线,在实际使用上并没有达到很好的效果,只是能够比没有动画要强上一些。因此,确定一套统一、自然并且适合腾讯文档的动画曲线,是设计师优先要解决的问题。


为此我们根据动画使用的场景,定义了四种标准曲线。同时输出给开发同学,作为标准可调用的曲线。



缓动(Ease Both)

缓动曲线应用的场景最为广泛,也是腾讯文档的默认曲线。相对于传统web端或者flutter框架内的默认曲线,腾讯文档的缓动曲线开始时会比较迅速,这样能给用户及时反馈、高效运行的感受;在运动快结束的阶段,为了避免快速反馈带来急躁的负面感受,曲线会更加平缓,进而使正在运动的元素吸引用户的注意力,并让用户能够有一定的思考时间,保证动画的合理性。




缓出(Ease Out)

即减速曲线。运动元素在开始阶段时位移变化会很大,但是后面会越来越小。缓出曲线前期快速运动,不需要过多让用户留意,在结束的时候逐渐减慢速度,让用户关注到其新的状态,用户就可以提前切入到定位寻找的阶段,等动画停止后就可以立即进行操作。这种类型的曲线通常是用在元素进入界面时使用。



弹性(Spring)

弹性曲线是一种基于阻尼弹性振荡的原理实现的复杂曲线,阻尼比决定了曲线具体动画感受,根绝阻尼比的不同,弹性曲线可以分为三种,分别是欠阻尼运动、临界阻尼运动及过阻尼运动。在腾讯文档中,通常只会使用到欠阻尼运动及临界阻尼运动。



弹性曲线却并不适合在所有的使用场景中,因为这种运动一般情况会需要相对多一些的时间来完成整个运动过程,让整个过程变得过于拖沓。同时过于活泼的弹性动画也会过分的吸引用户注意力,打断主进程的操作,影响效率。



运动时长

时长是元素移动所需的时间,在创建自然流畅的动画中起着重要作用。如果动画太慢,会使用户感到卡顿和厌烦;但是如果速度太快,就会给人紧张急迫的感觉。因此动画的持续时间应该给与用户充分的反应时间,同时又不用过久等待为标准。


在移动端上,我们设定动画的持续时间在300-400ms。而在web端上,我们设定动画的持续时间在200-300ms内。具体的运动时长视具体动画而定,时长并不一成不变。





积极肯定

曲线是动效的灵魂,有时候你觉得平凡的动画,或许只需要简单地拨动那条运动曲线,就可以让这个动画瞬间变得充满灵气。尽管曲线可以解决大部分动效问题,但在动画的实际落地中,还是有一些问题,是它无法解决的。这就会涉及到动画更底层的渲染及逻辑。比如说在web端,前端动画卡顿与否其实是和动画本身实现性能有关系的,浏览器的屏幕刷新率都可能被代码拖慢。这也是腾讯文档在初期并没有在web端增加太多动画的原因,过多的动画效果其实意味着需要更多的性能资源倾斜到动画上。




高效愉悦

在动画上除了希望提供自然流畅的积极体验,我们也希望继续深入,“让工具褪去冷冰的外壳,走进与智能隔空对话的新世界”。让体验更有情感,让用户更愉悦。


在待办事项上,优化前每当用户点击完成一项事项时,完成动画仅仅是机械的从未完成向完成图标的替换,反馈效果非常“高效”的完成了它的任务,但是这样就足够了么?不一定,当一项事项被列为待办时,就证明这件事对于用户来说是重要的。在现实中,当重要的事情完成时,我们都是欢欣的,就像心里在放烟花,完成待办时候的动画理应如此,让用户在完成的那一刻体验到“烟花”的绽放。




Chapter 4

——————————

关于流畅感...


但是总有一些产品,或者是通用性的考虑,或者是一些历史原因,或者是一些成本考量,走上了非原生开发的路,这样的产品在未经打磨的情况下直接一把梭搞出来,的确会显得卡顿,或者难用。


这其中不仅需要工程师一点一滴的性能优化,这也对体验设计师对细节的把控提出了更高的要求。只有对用户的行为处处关照,才能无限接近最极致的体验。


文章来源:站酷   作者:腾讯ISUX

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


体验设计遇到品牌升级

涛涛

编辑导语:用户的体验感对于一个产品来说,是至关重要的。一个好的产品能够充分照顾到用户的感受,从而拥有大批的忠实用户,而品牌升级则是体现产品定位和发展策略的不二之选。当体验设计遇到品牌升级,设计师该如何做?本文作者对此展开分析讨论,一起来看看~

01 用户体验设计的现状

1. 同质化的现象

过去,我们在用户体验中一直强调以用户为中心,追求给用户带来更好的体验,不断强调一致性、易用性、可用性等等。但如今,我们放眼手机里的app的用户体验,在过去十几年的积累下,用户的使用习惯、用户的认知都得到了很大的提升,产品的基础体验也基本都做到了使用流畅、一致性的现状。

但这却带来一个问题:同质化严重。

比如,当我们打开电商类的app,发现某东越来越像某宝,xx越来越像xx。可能我们抹去了logo之后就不知道这究竟是哪家app了。

甚至,我还发现有的公司在设计时是从B抄个设计样式,再从A抄个设计样式,最后在从T上抄个样式,最后设计结果成了大家看到的现象:设计越来越趋同。

2. 品牌升级的现象及价值

大厂的动向

最近这两年,我们频频看到大厂的一些设计动作:品牌升级、设计语言升级。

很多外行人站在一个旁观者角色对升级的设计嗤之以鼻:“这升级了什么?怎么跟没做一样?”“花了几百万就做了个这,真不值”…………

实际上,其中的背后不是简单的设计样式更换,而是战略定位的调整。

比如支付宝去年突然换了logo的颜色,而这背后的战略调整是支付宝升级成生活开放平台的战略。

比如淘宝去年也换了字体logo的设计,而这背后的战略是新淘宝要更好的链接内容、用户、商业。

3. 品牌升级并不是仅仅换个logo

所以,看到这里,我们首先明确了品牌升级、设计语言升级不仅仅是设计样式变化,不是设计师随随便便设计画了个图形,随随便便吸了个颜色,而是基于品牌定位与品牌战略调整的背景,是通过多维度调研,积累了很多有价值的信息,经过科学的分析推导明确了设计方向,最终才形成可落地的品牌升级设计方案。

那么,问题来了!既然品牌升级了,在用户体验设计中如何体现新升级的品牌感呢,如何能体现品牌的定位和战略呢?

02 体验设计中如何体现品牌感

当我们在收到品牌设计方案后,就开始面临到体验设计升级如何体现品牌感了,这个时候不是仓促的先定义新升级的颜色等样式问题,而是需要先充分理解战略背后的意义,理解用户、理解目标、理解新商业方向……,再聚焦收拢在关键点上,从而针对体验设计中的设计体系定义好设计原则,在最终落地到设计元素上,比如颜色、控件、交互等。

设计过程:品牌战略理解-收拢关键点-定义设计规则-落地设计元素

1. 理解战略

战略理解实质上就是公司未来业务调整,方向调整,目标调整,我们的设计一定是基于这个方向的。

比如2016年我在公司一次红蓝战略定位后进行了2.0生态电商改版,这个红蓝战略从字面意思理解很抽象,但实质是内容化、视频化的业务方向,我根据这样的战略定位设计了创新的2.0的生态电商设计方案获得了认可。

2. 收拢-发散-聚焦

理解完战略方向后,一般会进行一些发散性的收集。比如滴滴在早期几年前的一次品牌升级分享案例里,那时候升级前品牌语是“滴滴一下美好出行”,后来在专车、顺风车业务发展后,各业务定位模糊,需要针对业务重新定位梳理,经过发散了很多关键词,最后针对不同业务线聚焦在舒适、活力、正式三个关键词,形成新的滴滴设计语言。

资料来源:滴滴李大声《c12d调分享》

3. 设计规则

设计原则也就是我们设计中的一份指南,是建立在前面的分析推导后,他所传达的是设计价值观。指导我们在设计中什么该做什么不该做。

说到这里,这就让我想起来经常看到很多设计团队定义自己的设计原则是:清晰、高效、简洁。这么一看没毛病,的确设计是要保持信息的清晰传达、有效的展示、简洁一些。但这些定义太过宽泛,毫无意义,根本无法指导实际的设计。

设计规则应符合什么规则呢?

首先,设计规则要贴近业务,真实而有效。

比如做外卖的要突出快、服务、准时的定位。做出行的要突出安全的定位。做金融的要突出收益增长等等,我们不能就笼统的把所有的不同行业业务规则都定义成清晰、高效、简洁,这并不能形成差异。

以平台要升级为“安全”为例,我们需要知道什么才是“安全”的设计规则,除了绿色、蓝色,还有什么行为才会产生产生信任安全感。比如规范、统一、征信公信力、理性的设计。

这样我们就可以针对升级“安全”的设计体系规范起来,把信息以用理性化的设计来呈现表达。

设计规则要有态度

实际上,每个设计都是有意义的,每个规则的背后都是不平凡的工作。举个动效的例子,有的设计师会认为动效看起来很酷,那就加的越多越好,结果适得其反,用户可能因为动效太多太酷不知道该干什么了。

谷歌在他的设计体系里提到“每个动效都是有意义的”,可见谷歌对动效的态度表达了自己独特的设计规则的魅力。

蚂蚁金服在自己设计体系里提到的独特四点设计价值观:自然、确定、生长、意义

  • 自然:感知自然、行为自然
  • 确定:设计确定,保持克制、探索设计规律,用户确定,体验一致
  • 意义:明确目标,挑战过程
  • 生长:价值连接、人际共生

这每一点都不是简单的“清晰高效”这么简单,具有深远的设计指导意义。以“自然”为例,用户对图形、色彩、图标等视觉感受的信息,遵从自然规律,降低用户认知成本。举例:明明红色是总所周知的警戒颜色,我们用绿色来做警戒色,这就违背了自然规律。

说到这里,我们大概就能清楚明白设计原则的意义了,当面对市面各种设计潮流:抽屉设计风、大字体设计风、新拟物设计风来临时,我们就可以从设计原则来理性判断如何取其精华,去其糟粕,为我们的业务和品牌传播来使用,而不是盲目的追赶潮流

4. 设计元素强化品牌记忆点

最后,从设计规则推导出来后,到具体的设计元素:颜色、图标、配图、文字设计等,我们还需要结合品牌找到具有记忆性的点,形成dna记忆符号,这个记忆符号给用户在视觉、触觉等感官上加深印象。

说到最具有品牌记忆点的无疑是耐克、阿迪、可口可乐这些图形深入人心,还有蒂芙尼蓝等等。

比如最近要上市的知乎,核心定位是社区价值,他的logo以及app的开屏都体现了社区交流的属性。

比如最具阿里云更新的品牌升级,利用光标这个符号贯穿整个设计体系,形成独特的超级符号,可以说是一个很经典的案例。

资料来源:阿里公众号

当然,提炼出具有记忆点的品牌dna的超级符号是需要经过长期推演和长期传播形成的品牌记忆点。

最后,总的来说,当体验设计遇到品牌升级,不是简单的画个图形,吸个颜色,每个设计背后都有遵循的依据,都有背后的科学分析推导。所以,我们不要再盲目拿清晰、高效、简洁来作为设计语言的理念了,需要探索真正有独特观点,贴近业务,贴近战略规划的设计价值理念,来指导未来长远的设计发展。


文章来源:人人都是产品经理   作者:Hellen咏舍

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





目标导向设计介绍

涛涛

前言

设计驱动已经成为 vivo品牌重要的产品和服务理念。作为设计师,这意味着我们在承接日常设计需求外,还要主动发现并解决产品中存在的问题。设计提案,就是针对某个问题或机会点,系统分析产品现状并给出解决方案,以实现设计驱动的重要途径。

除了设计提案外,设计方法复盘、行业分析报告、流程规范建设等也可作为产出对象,受限于篇幅,本文所介绍的方法主要针对设计提案的选题。

合理的选题让设计提案事半功倍

过去的两年里,UED 团队的同学们共输出 40+篇设计提案,我本人也写过几篇,踩过一些坑,也积累了一些经验。总体来说,一份优秀的设计提案当然离不开严谨的分析过程、合理的模型选取和可落地性强的解决方案,但更前置的往往是设计提案的选题。

选题体现了我们是否定位了产品中存在的重要问题或设计机会点,决定了选用什么模型分析问题、产出什么解决方案。

大厂都在用的目标导向设计,快来学会!

△ 图1 设计提案的执行过程

选题不当可能会导致:写了一半才发现设计侧根本无法解决该问题(比如解决问题主要依赖于内容引进),或者产出了方案但因问题优先级低而无法落地。因此本文主要基于 UED 团队的实践经验,对目标导向的选题常用方法进行介绍,以确保我们的提案在“解决正确的问题”。

什么是目标导向的提案选题方法

设计提案的目的是解决问题,但难点在于:要解决的问题并不是每次都显而易见,且不是每个问题都适合用提案的方式去解决,产品有什么体验问题、哪些需要用提案来解决,很多时候需要我们主动去发现和定义。

目标导向的选题方法,就是指从不同的目标出发,通过分析或拆解目标,来定位问题或机会点的选题方法(除此之外,我们还可以通过用户体验地图分析、行业趋势分析等来发现问题,这些本文暂不涉及)。

“设计是围绕目标的求解活动① “L. Bruce Archer

按照双钻模型,确保”做正确的事”需要经历发现到收敛的过程,将其用于选题便是选题收集、选题评估两个阶段。在选题收集阶段,我们从体验设计所针对的不同目标出发,通过对目标的分析和拆解找到待解决问题,初步确定多个选题方向。在选题评估阶段,我们需要对前一阶段得到的若干选题进行价值和提升空间评估,最终定义出合理的选题方向。

大厂都在用的目标导向设计,快来学会!

△ 图2 目标导向的提案选题方法

1. 选题收集阶段

体验设计是用设计的思维和方法达到某种目标,互联网产品的体验设计重点关心的目标主要有商业目标、用户满意度、战略规划。因此,以目标为导向来收集选题,就是指通过分析影响以上 3 个目标达成的关键因素,来收集多个备选选题。

通过拆解商业目标收集选题

通过对留存率、日活数等核心数据指标的拆解来定位关键影响因素、确定提案方向,能够让提案结果更易量化、产出方案更易落地。

Step 1 了解产品当前阶段的主要商业目标

一般来说,产品侧每个季度或每年都制定 OKR 或 KPI(如将 vivo 商城复购率从 x%提升至 y%、将浏览器的日活从 x 万提升至 y 万)。设计师需要明确产品的核心数据指标是什么,尤其关注其中与用户体验相关度高的指标。以信息流产品来说,如果其内容主要来自于合作商,那么我们更应该关注阅读时长和留存等指标,而非资讯内容丰富度指标。

Step 2 对商业目标按多个维度逐层拆解

明确目标后,需要对其进行拆解,才能将结果目标转化为设计可发力的过程目标。目标的拆解需要确保每次拆解都要符合 MECE(同一维度、不重不漏)原则,常用的拆解维度如下所示。

大厂都在用的目标导向设计,快来学会!

△ 图3 商业目标的常用拆解维度

以 vivo 商城为例,假设其 2021 年的目标是:成交转化率提升 47.6%,达到 0.26%(数据已经过脱敏处理)。我们可以对影响目标达成的要素按照行为路径进行如下拆解(本案例也可按公式法进行拆解):

大厂都在用的目标导向设计,快来学会!

△ 图4 成交转化率拆解案例

Step 3 定位影响目标达成的关键因素

结构化拆解目标后,即可结合产品迭代历史和现状,对影响目标达成的关键要素进行定位,进而初步确定提案方向。接上文案例,由于下单→支付环节(即结算页)的体验优化刚进行不久,且通过购物车下单的用户占比较少,因此可将提案方向定位至商品详页下单转化率提升,初步确定选题“商品详页下单转化率提升设计提案”。

通过产品战略规划分析收集选题

如果说商业目标是产品预期达到的结果,那么战略规划就是达到结果所计划采取的路径。从战略规划出发,构建新功能、解决新问题,协助产品达成战略规划,是提案可尝试的重要方向。

方法 1 通过构建新功能帮助产品达成规划

不同于商业目标,战略规划往往已经给出了接下来要重点发力方向、或给出了功能范围。但一些情况下,规划并不会具体到该方向上要做哪些功能以及做成什么样。因此,设计师可以基于战略规划,以提案的形式对设计机会点和方案进行详细分析,以协助产品达成规划。

以 vivo 的一款视频产品为例,为了提升时长,产品侧计划 Q1 季度提升视频内容消费深度,但尚未给出从功能层面具体要做哪些改进。因此我们将提升用户消费深度为提案目标,深入分析了深度消费的现状和场景,提出了若干设计优化建议。

方法 2 通过解决新问题帮助产品达成规划

由于产品功能模块之间存在耦合关系,规划中的新增业务可能使得已有功能体验跟不上业务要求(比如信息流产品发力视频方向,可能会对下载视频的体验带来新要求)。通过分析新增业务涉及的场景和使用链路,发现链路中可能出现的新问题,是从战略规划出发确定选题的方法之一。

以 vivo 帐号业务为例,有个性化头像昵称的帐号一直以来占比都较少,由于之前社交场景较少,这种现状对产品体验影响不大。但随着公司在直播、视频等内容产品投入的增加,社交场景逐渐变多,头像和昵称也逐渐成为用户社交的阻碍因素(比如使得主播与观众无法正常打招呼)。因此我们对现状造成的问题进行了系统摸排,确定了将“提升帐号用户信息完整度”作为提案方向。

通过用户满意度分析收集选题

除帮助产品达成商业目标和战略规划外,提升用户满意度也是体验设计的重要目标。基于产品用户满意度现状和目标分析,我们有望快速定位产品中的低满意度模块,确定提案方向和范围。

方法 1 通过满意度调研数据定位问题

选题前期可广泛阅读相关调研资料和用户反馈,对产品的满意度情况有较为全面的认识。用户满意度可能来自于以下渠道:

  • 用研团队提供的用户调研报告
  • 可用性测试所发现的问题或优化建议
  • 论坛或内部员工的体验问题反馈

由于不同渠道(甚至同一份报告)得到的满意度数据可能较为分散,我们需要将低满因素按功能模块归类,以便更好地定位问题。以 vivo 商城为例,通过阅读商品详页用户满意度报告,并对低满意度反馈进行归类,我们发现低满因素主要集中于以下两个方面:

大厂都在用的目标导向设计,快来学会!

△ 图5 商品详情页评价数据归类

明确了低满模块及问题归因,便可从问题出发得出提案主题。通过对 vivo 商城商详页问题的归因,可确定如下提案主题:“商品详情页信息展示优化设计提案”或“评论发表率提升设计提案”。

方法 2 通过用户情绪曲线分析定位问题

即使没有满意度调研数据,或有整体满意度数据但没有具体到功能,我们仍然可以通过绘制用户体验地图、分析用户情绪曲线,来定位满意度低的模块、确定选题方向。

绘制用户体验地图的方法和传统过程的区别不大:首先明确产品中用户的主要任务或目标,列举出用户的主要行为路径;然后基于用户的目标,考虑用户在每个环节想要的是什么,分析当前行为路径中可能存在的用户痛点或机会点。需要注意的是,由于只是收集提案选题,对场景和问题的分析不必过于深入,只需发现哪个任务或模块体验问题较多即可。

比如通过对 vivo 视频用户观影行为的兴趣曲线分析,我们发现看剧方面的体验问题不大,但找剧(尤其是看剧前的找剧)存在的痛点较多,因此可将找剧行为优化作为提案方向。

大厂都在用的目标导向设计,快来学会!

△ 图6 追剧行为用户体验地图(已简化,仅供参考)

方法 3 通过产品功能竞品分析定位问题

如果说情绪曲线是通过分析用户执行任务的流程来发现问题,那么竞品分析则是通过分析产品所满足的用户需求来发现问题。虽然功能多并不能代表体验好,但基础功能的缺失也可能带来体验问题。因此从功能范围的维度进行竞品分析,定位基础体验较差、或设计机会点较多的模块,也是收集提案选题的方法之一。

为了让我们在做竞品分析时更加聚焦,对于复杂度较高的产品,我们有必要先按照功能模块拆分,复杂度越高拆分粒度越细,反之则越粗。以 vivo 浏览器为例,若只拆分为搜索、信息流模块则粒度太粗,可将某个模块继续拆分,以便进行竞品对比时更加聚焦。

大厂都在用的目标导向设计,快来学会!

△ 图7 浏览器信息流功能模块拆分示例

拆分功能模块后,接下来就是选择竞品了。需要强调的是,针对某个模块做竞品分析,竞品应优先选取该功能模块做的相对成熟的、有特点的竞品,而不是只选择主属性相同的产品。比如要分析浏览器信息流评论功能与竞品的差距,选取的竞品可不局限于浏览器类产品,网易云音乐、今日头条等 APP 都可作为对比对象。

选取竞品后,可从结构层、框架层等方面对本品和竞品间的体验进行对比,以便发现存在明显体验短板的功能模块。为了方便定位问题,可通过模块子功能对照表对完整性进行可视化对比。当然也可以从操作反馈、美观度等维度对比。

大厂都在用的目标导向设计,快来学会!

△ 图8 信息流评论与主流竞品功能对比

找出功能缺失严重、或使用体验明显低于竞品的模块后,可考虑将优化该模块的体验作为选题。比如通过将浏览器信息流评论模块与竞品对比后发现,其整体体验均远低于竞品,因此可考虑将“信息流评论优化设计”作为提案选题方向。

小结

以上是 3 个以目标为导向发现问题、收集提案方向的方法,可根据产品现状选择部分或全部使用。发现问题阶段一般来说需要至少得到 3 个以上待选提案主题,以便进一步评估确定。

2. 选题评估阶段

得到多个备选主题后,接下来我们需要对其进行综合评估,并最终筛选确定一个(如果是多人参与,也可以确定多个)当前阶段重点着手解决的问题。

规范化选题描述

仅仅一行选题题目并不能帮助我们清晰地了解其价值和背景,为了方便评估和对比,我们需要将选题的描述规范化。由于设计提案选题和研究论文选题过程类似,因此可以借用《研究是一门艺术》②中给出的论文选题三段式模板:“我打算写_,因为我想_,这样就能_”来清楚定义选题的题目、要解决的问题、以及期望达成的目标。比如,我们打算以提升商城评价发表率为提案方向,可将其规范化描述如下:

大厂都在用的目标导向设计,快来学会!

△ 图9 提案选题描述模板

对选题的价值和预期结果进行评估

通过模板我们描述了提案要解决什么问题、以及解决该问题给业务带来的价值。接下来需要对备选选题按业务价值和提升空间两个维度进行评估,目的是排除“问题存在但价值较小”或“价值大但设计侧难以解决”的选题。

当备选选题难以决策时,我们也可以绘制一个简单的二维坐标对其进行量化评估。比如,假设选题 1 是优化购物车使用体验,选题 2 是提升商品搜索效率,如果前期预研发现设计侧提升空间差异不大,但优化搜索带来的价值相对较高,那我们就可初步确定选题 2 为提案方向。

大厂都在用的目标导向设计,快来学会!

△ 图10 提案选题评估维度

与设计 leader 或产品经理沟通确认

受限于经验和视野,设计师个人对选题价值的评估和设计 leader、产品经理间可能有所不同。因此正式敲定选题前,最好与设计 leader 及产品经理进行同步,达成一致后方可正式开始提案的撰写。

小结

该阶段的目的是对前期发散得到的选题方向进行评估筛选,以便将个人精力聚焦在提升空间大、价值大的选题上。为此我们首先需要按模板对选题方向进行整理,再对选题按设计侧提升空间、业务价值大小两个维度进行评估,最后与相关方沟通确认,最终敲定选题方向。


文章来源:优设   作者:VMIC UED.Vector

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


聊基金,不如聊聊基金那些设计

鹤鹤

过去的一周,基金应该算是热门话题中的顶流。微信里各种设计群、校友群、带货群、滑雪群都充斥着一片财富缩水的哀嚎。 
每逢这个时候,大家也就开始顺势讨论起各种基金投资APP好不好用的问题。 
今天抽点时间,聊聊 招商银行、 蚂蚁财富、 天天基金这三家APP的基金详情页设计。 

undefined

基金产品的详情页大体是围绕一只基金的概况、盘中行情、历史数据、持仓情况、基金经理介绍、基金档案、交易规则等一级模块,来“客观包装”这只基金。 
一级模块的信息下包含了众多层次级信息,各家APP对于同一个次级信息,是否曝光在详情页的一级模块里,都有着独立的思考,这在很大程度上决定着信息分发和触达的效率。 
为什么要强调“客观包装”,因为无论你看到与否,信息都在那里,而信息曝光的顺序却直接影响到用户对基金的认知。 
就好像我们了解一个人,如果只是看他的穿搭、气质、体态,可能会觉得这是一个艺术家。 
但你若先把眼睛蒙上,听他讲量化策略、深度学习,你发现这人居然是个技术男! 
比如我们挑一只基金,来看看它在三个APP的详情页里,分别长啥样。 


01/ 招商银行

总体观感舒适,没有信息密度过高导致的视觉焦躁感。用色非常克制,留白空间较多。段落式结构清晰,文本层级和对比度清晰,便于信息检索,但分段式布局有点old fashion。 
undefined
基金概况:在日内涨跌幅和最新净值基础上,补充了近1年收益率,可能是考虑到进入该详情页以后,行情模块会默认定位到“成立以来收益率”(其他会普遍定位到近1年收益率),可能是给投资者建立“基金需要长线投资”的心理预期。 
信任力背书:白底通栏形式与整体UI规范相融,完全被淹没在页面里,不易被识别。应当在视觉表现层有所凸显。 
数据看板:这是基金详情里最重要的模块之一,值得注意的是,业绩走势&净值估算、业绩排名&历史回测这在别家往往会分成两个模块。 
这两个模块里有信息重叠交叉,比如近1月~近1年的收益情况在折线图和列表里都能看到,与同类基金的相对位置关系也能可视化,但列表更具有量化结果的优势,因而更受到专业投资者的青睐。 
而招行根据历史收益、净值、盘中估算3个维度整合成了一个模块。一个模块的优势是折线图和列表数据可以联动观察。只不过默认配置的三行数据有点少,查看更多就得跳转。 
招行这个模块令人诟病的点在于,一是收益走势里缺了近6个月的维度,二是折线图采用了曲线,且线宽过粗,导致不能像折现那样直观地反映出时间颗粒度,得手动长按触发对应交易日的明细。 

undefined

基金诊断:招行自有的一套评估体系,内置有业绩回测、夏普比率、最大回撤、基金经理任期评估等信息,相对更专业。而详情页一级模块里展示的这个4个定性维度,怎么看都有点偏小白。 
基金持仓:这是最重要的模块之二,如果把基金比作一道菜,这就是菜谱。跟做菜一样,对每一道食材的烹调和火候把控决定了最终呈现出的风味。 
基金重仓股的盘中行情对于基金经理而言,就是每一道食材在制作中的状态,可以帮助经验投资者了解基金的布局在当下的市场状况,以便做出决策。 
而限于银行体系内无法接入证券交易所数据,招行在基金持仓这块的盘中行情是空缺的,只能显示持仓占比和市值估算。对于老手来说,难免是个缺憾。 

undefined

基金经理介绍:这一块在布局结构上有点bug,按常理“现任经理”和“刘某某”属于从属关系,所以标题栏右侧放置“历任经理”并且用两端封闭式分割线就不太合理。 

招行估计是考虑到没有配置现任经理的详情,又不想浪费标题右侧的空间,才作此设计。

其他相关:这部分包含的基金公司、基金档案、交易规则属于并列关系,理应出现的分割线却没有体现,虽不影响投资者使用但反映出UI组件规范缺乏一定逻辑性。

交易规则:在购买时间点缺少了T日(交易日)收盘时间(15:00前)提示和周历提示。页面空间是富余的,完全可以将信息曝光提高投资者的时间感知度,而不是跳转二级页面才能了解详情。



02/ 天天基金

功能模块十分丰富,cover了关于一只基金的所有直接和间接描述。直接的包含了概况、行情、历史回测、持仓、经理介绍等内容,间接的包含了问答、讨论、资讯、公告等内容。

在产品的广度与深度方面,天天基金选择了把广度拉宽,将很多二级内容拍平,嵌入到一级页面中,可以说非常适合经验型投资者,但随之而来的劣势也十分明显 - 页面过长。

undefined

非常直观,天天的基金页面长度是招行(或蚂蚁)的两倍不止。

有了上面招行基金详情页的大致结构做支撑,这里就不把天天基金的页面逐个模块拆解分析了,我们挑一些有意思的来说。

基金概况:跟随涨跌变化的红/绿页头,这是天天最具标志性的设计之一,个人对此保留意见,这么大面积绿色在过去的一周,实在是令人焦虑。

净值行情/历史数据:天天基金在净值模块单列出了“单位净值”和“累计净值”的走势图,还直接标明了不同时段区间内的最高最低值。(“累计净值”是基金自成立之日起至今的净值表现,“单位净值”是基金运作期间扣除分红和份额拆分影响之后的净值表现。)

undefined

听说这是区分老基民和新人小白最直接的一道坎,当然作为一个UX设计师,我也就掺这一句,毕竟资格还远远够不上老基民。

非常贴心的一点是,天天在这添加了定投该产品的收益可视化。根据历史收益率回测和不同定投算法,进行一段时间内的收益率估算。与此类似设计的产品还有涨乐财富通。

undefined

特色数据:这也是经验投资者非常重视的三个指标。波动率反映收益率波动的程度,越小越好;夏普比率指基金每承受一点风险能够获得多少超额收益,越高越好;最大回撤指基金净值从最高到最低的降幅,越小越好。

基金持仓:这又是一个老基民的福利专区。上面分析过招行基金持仓tab的优势,而天天直接把带有重仓股盘中行情的持仓列表、资产/行业分布饼图直接嵌入到一级页面里,虽然默认只显示前五只重仓股,但对于了解相关板块行情也很有帮助。

undefined

这一模块的二级页面也支持投资者切换时间去观察基金经理每一季度的调仓风格。其实我个人更倾向于直接把十大重仓股行情全都放进来,默认折叠需要时展开。毕竟调仓不是个高频动作,我不会需要频繁地跳进二级页面去观察调仓。

基金经理:作为后台烹饪的cook,这块的简介过于“简洁”了。其实次一级的经理详情页里有非常详实的背景概述和任期间业绩回报评估,完全可以精选一些标签化的内容在一级模块里完善包装。

社交化:然后比较有意思的就是“社区”概念。天天基金上每只基金都分别有两个“bar”,一个问答吧一个贴吧,贴吧包含了问答吧。

这里能体现出天天对于细分场景的重视。贴吧里的话题天南海北,吐槽的、围观的、提问的、表态的、发小作文的、晒收益/亏损的,啥都有。

天天的产品经理还是为提问用户单独开辟了一片净土,让内容的传播与触达更加高效。

回到UI层面,天天基金页面的文本内容在逻辑结构上比较复杂,但视觉上没有将不同层级的对比度拉开,导致文本信息过于平均,不利于重点信息的快速检索。



03/ 蚂蚁财富

蚂蚁的基金详情页遵循整体UI风格采用了卡片式布局,信息架构更清楚。与前两个案例中的文本信息相比,设计质感好了不少。 
页头的蓝色背景标志着蚂蚁集团的品牌基因,强化投资者对品牌的感知力度。且开辟了一个入口支持基金公司财富号里关于产品的宣导视频。 

undefined

财富号视频:视频可以展开和收起。产品还给它配置了观看人次,侧面为该基金公司和旗下基金产品做热度营销。

基金概况:除了基金相关的基本信息以外,模块内展示了晨星评级和关注人气。既有客观权威评估体系,也有用户层的氛围烘托,通过两层信任力建设占领用户心智。

信任力背书:“支付宝金选”是由支付宝理财智库、中国证券报联合推出的一套理财产品评估体系,背后有一些专家KOL背书。能够筛选出部分历史业绩表现优异、基金经理业绩突出的产品。

相比于前几个信任力的营造,这一点的重要性和优先级远远胜出。因此在视觉层面也用黑金配色体现出权威性和尊享感。

能够很明显地察觉到互金平台和金融机构在产品包装上的玩法不同:互金平台倾向于权威背书和人气营销,金融机构倾向于指标构建和数据展示。

行情/数据:这一模块增加了一个可以手动关闭的tag,是关于“风险回报比率”的描述,一个听上去类似“夏普比率”的指标。优势在于蚂蚁直接量化转译了指标的结果——“好于同类98%基金”,省去了投资者分析指标的过程。

基金经理介绍:关于这部分,虽然在基金经理介绍的二级详情页里,天天基金比蚂蚁财富要详实得多,但一级模块里蚂蚁的人物包装还是更到位。“金牛奖得主”和学历/从业背景简述能直观地提高产品在用户侧的信任力。

持仓行情:这可以说是该页面视觉创新的重头戏。蚂蚁财富由于相关个股数据缺失,并不能像招行和天天基金那样横向比对每个季度基金经理的调仓动作,对于经验投资者研判这只基金来说,少了一个观察维度。

undefined

而视觉层面的创新则显得十分取巧,原本枯燥的个股行情列表被转译为可视化的矩阵,矩形的大小和底色能直接映射该股票的持仓占比和实时行情。并且横向滑动的组件也支持在不跳转的情况下完整显示10只重仓股。

对于持有或长期关注这只基金的用户而言,除非你要分析调仓,否则是不需要频繁进入二级页面查看持仓明细的。

以及细致到小数点后两位的持仓占比,意义也不大,了解大致的配比关系即可。蚂蚁这个可视化组件在带来新颖视觉观感的同时,也解决了这一问题。



结语

对于产品而言,信息架构往往是最容易有争议的部分。而金融产品的信息深度和业务复杂度尤为明显,与之俱来的必然是各平台在架构策略上百花齐放。

文章来源:站酷    作者:loven

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

日历

链接

个人资料

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

存档