首页

信息获取与适老化系统体验升级

涛涛


前言:

鉴于老年人一次次在“数字围城”中遭遇的困境,2020年11月,国务院办公厅印发《关于切实解决老年人运用智能技术困难实施方案》的通知,2021年1月起,工信部将在全国范围内开展为期一年的“互联网应用适老化及无障碍改造专项行动”,要求各地区、各部门建立工作台账,明确时间表和路线图,推进互联网网站和移动互联网应用(APP)适老化及无障碍改造。



此政策一出,引发了资管行业针对金融产品适老化改造的积极探索与思考,同时各金融机构研究团队也相应推出互联网金融产品适老化改造的改进方向和原则,信息无障碍理念是近年国家推进可持续发展的一项重要工作。在此也引发了我针对互联网金融产品适老化改造的深入探索。

本篇调研报告由以下五大部分构成:


- 行业分析—探讨适老化改造趋势背景

- 用户分析—研究用户对象习惯特征及需求痛点

- 改造方向—总结改造方向和部分具体措施

- 信息获取—以证券交易为例的信息列表优化

- 完成效果—分析目前各家产品适老化改造成果




一、适老化改造趋势背景


截至2019年年末,我国65周岁及以上人口1.76亿人,占总人口12.6%;至2024年,65岁及以上人口将突破2亿;若以60岁作为老年标准,至2050年,老年人口将达5亿。中高收入老年家庭数持续增加,金融服务需求将显著增长,2017年家庭月收入逾4000元的老人已超过1.06亿人,其中1600万老人的家庭月收入逾10000元。和许多无房无车年轻人相比,绝大多数老年人拥有一套或多套住房。



新生事物的发展也潜移默化的影响着老年人的消费思维方式。在如今互联网不断发展的今天,老年人的触网热情也不断提高。根据CNNIC发布的《中国互联网发展状况统计报告》,截至2019年6月,我国50-59岁网民群体占比达到6.7%,较2016年12月的5.4%提升了1.3个百分点;60岁及以上网民群体占比6.9%,较2016年12月的4.0%上升了2.9个百分点



二、老年人使用互联网产品存在的问题


从根本上分析,为什么老年人“不会用”,最根本的原因就是身体机能的衰弱。这是我们无法抗拒和改变的自然生理现象。



「适老化及无障碍改造」其实包括2个方面。

一方面是「适老化」,对老年人的关怀。另一方面是「无障碍改造」,针对残障人士,比如视力障碍、听力障碍、肢体障碍人士的关怀。

这两方面的改造,也统称为「信息无障碍改造」,需要过信息化手段弥补身体机能、所处环境等存在的差异,使任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)都能平等、方便、安全地获取、交互、使用信息。

整体来看,当前我国公共服务类网站及移动互联网应用(APP)无障碍化普及率较低,适老化水平有待提升。比如:

- 多数存在界面交互复杂、操作不友好等问题,使得老年人不敢用、不会用、不能用

- 普遍存在图片缺乏文本描述、验证码操作困难、相关功能与设备不兼容等问题,使得残疾人等群体在使用互联网过程中遇到多种障碍。

- 当前互联网应用中强制广告较多,容易误导老年人,特别是有些付款类操作的诱导式按键

目前国内「老年人」相比「残障人」的用户群体大很大,并且「适老化」和「无障碍改造」属于两个完全不同的改造方向,加上「适老化」改造难度低,普适性更强。所以目前国内的互联网产品,主要从「适老化」入手进行改造,「无障碍改造」开展的工作还非常有限。



三、3个方面着手,针对性提出建议


产品如何进行「适老化」改造?

首先我们可以看看,老年用户的几个特点:

1、视觉、听觉能力变差

2、记忆力、注意力下降

3、身体机能下降,对互联网认知不足



同时,工信部工信部「行动方案」中,对「适老化和无障碍改造」提出了几个基本要求:

1、大字体、大图标、高对比度文字。 2、操作简单、界面简洁,实现一键操作、文本输入提示等多种无障碍功能

3、提升方言识别能力,方便不会普通话的老人使用智能设备   4、 去广告,禁止诱导

从老年人的特点、工信部要求、以及当前互联网产品适老化实践中,我总结了3大产品「适老化」设计要点。



3.1视觉、听觉退化导致信息获取障碍

实验心理学家赤瑞特拉一项关于人类获取信息的来源显示,人类获取信息的83%来自视觉,11%来自听觉,3.5%来自嗅觉,1.5%来自触觉,1%来自味觉。


1. 字体选择

那么在获取信息的来源时文字,是产品界面中最重要的一个元素,当产品中的文本字号很小、文字辨认不清的时候,用户想阅读的意愿就会降低。产品的信息传达的目标就无法完成。所以在标准的文本传递信息的时候推荐使用非衬线体


衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线字体(serif)中文比较常见的如宋体、明体、白体;没有衬线的字体,则叫做无衬线体(sans-serif)。简单的理解就是非衬线体(例如黑体等)就是没有装饰性笔画的末尾,无衬线体则更统一、时尚、简约,中文常见的如黑体、微软雅黑。这种无衬线体也被广泛应用网页端或手机端的产品,所以非衬线字体有醒目而且轮廓清晰的特点,是提升屏幕可读性的首选。


*需要注意的是,在常规页面的设计过程中避免使用多种字体或者精心设计的造型字体,因为这可能会造成用户混淆。营销页面不在此列



2、字号大小

根据Ant Design设计语言中讲到关于计算最小字体的方法,通过肉眼到物体之间的距离、物体的高度以及人的最小可接受视角,构成的三角函数关系进行计算。

普通用户的最小视角为0.3度时阅读效率最好,一般眼睛距离电脑屏幕为50cm。有学者研究表明,老年人由于视觉能力下降,最小可接受视角为0.75度,视距为43cm,换算之后相当于字高为5.62mm,经过换算为16px。

在JIS规格对于印刷品等反射原稿中《不同年纪最小可阅读文字大小》的建议中,60岁以上的老年人,最小可接受的字体大小的绝对高度是4.9mm,经过换算为14px。


考虑针对老年人的应用使用的文字越大越好,建议最小使用16px字号。为什么文本字号要设计为16像素呢?有研究表明在我们屏幕上 16 像素的文本大小与印刷在书籍或杂志上的文本大小相同,这很符合人的阅读习惯。但是人阅读还有一个因素是不能忽视的,就是人和屏幕之间的距离。


换算网站:https://www.gaitubao.com/tools/pixel2cm.html



3、颜色选择

建议使用相对融合的中性色;使用对比强烈的互补色来突出重要元素信息内容和功能位置。同时要符合WCAG 2.0(Web Content Accessibility Guideline,Web 内容无障碍指南)中对颜色对比度的指导意见:


- 对比度(AA级):文本的视觉呈现以及文本图像至少7:1的对比度;大号文本(字重为Bold时大于18px,字重为Regular时大于24px)以及大文本图像至少有4.5:1的对比度。


- 对比度(AAA级):文本的视觉呈现以及文本图像至少要有4.5:1的对比度;大号文本(字重为Bold时大于18px,字重为Regular时大于24px)以及大文本图像至少有3:1的对比度。


可以通过WebAIM`s Color Contrast Checker、Contrast-ratio、EightShap es Contrast Grid、等网站点击进行测试对比查看是否满足 WCAG 2.0 AA 的「色彩无障碍设计」标准。


避免使用蓝色和紫色

由于老年人的晶状体变黄、变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显,因此页面中的重要元素要避免使用蓝色或不同深浅的紫色。




4、听力和身体机能的退化

听觉也是我们获取信息的重要来源,可以考虑使用语音通道获取信息。但随着年龄的增长,人的大脑听觉中枢开始退化,脑皮质逐渐萎缩,耳蜗的基底膜、听觉细胞及听神经也开始老化,导致老年人出现听力下降甚至“老年性耳聋”,主要表现:

1、听到声音,但听不清内容; 

2、正常语速的音/视频无法全部接收;

3、低频段声音听不到(如鼓声),高频段声音受不了(如尖细的刮擦声),立体声成为噪音;


因此在进行语音通道设计时,需要考虑:

1、加大音量,老年人听觉平均感知音量在67.5~75.3分贝之间,因此在视频开始播放时,我们对低于设定值的音量适当增加到约44%。同时处理掉环境声音,使内容声音更清晰。


2、为了保证老年人有效的接收到声音信息并进行理解,音/视频的播放速度也需要适当下降。因此,我们减少了高档位语速,并提供了高、中、低3档语速,使老年人选择适合自己的速度,更有效的获取声音信息。同时加入字幕等实时信息,实时播放双层保障老年人的信息获取


3、使用语音交互形式,帮助老年人更方便的进行信息输入及获取,如百度大字版的语音搜索功能及“今日要闻”点击播放功能、酷狗音乐大字版听歌识曲功能、支付宝关怀版客服语音功能等。



3.2记忆力、注意力下降


1、简化交互操作

人在手机上的交互手势会有很多种,根据不同的业务场景,我们使用的交互手势也不相同。

大致分为四类:单击(tap);长按(long press);双击(Double Tap);长按&拖拽(long press & Drag)。

这么多交互手势,甚至还有组合手势。老年人在使用过程中会显的很烦索。所以操作手势尽量简单、符合人的常规, 以“点击、滑动” 为主。或者是一种切换支持2种手势切换页面。

老年人除了生理上的手指偏大,身体机能退化引起控制能力下降、行动迟缓,动脉硬化、震颤麻痹、帕金森等疾病导致手部抖动,使得老年人无法进行精确、复杂的操作手势;因此针对老年人应用的操作手势应该注意:


- 简化操作手势:单指操作的手势比双指和多指手势更易用(比如电脑触控板的多指手势);

- 尽量使用单击:单击屏幕比双击、多击更易用。老年人手指不灵活无法在指定时间内完成连续点击屏幕两次。

- 大的点击热区:在移动端,按钮尺寸根据手指触摸屏幕的最小点触区域,平均长度在10-14mm之间,指尖的长度为8-10mm,所以10mm x 10mm就是一个最小触摸目标尺寸。按钮高度35px-50px之间,字号13pt-17pt,圆角4-8·web端:按钮高度24px-48px,字号12-18,圆角6-10。



2、精减功能、减少信息干扰

内容可以多,内容要做好清晰分类,清晰易懂。信息导航不要多个维度嵌套,不要让长辈晕头转向。信息层级不宜过深,2-3层为宜,不要让长辈迷路。

要考虑哪些功能该提供,哪些不该提供?是否要针对老人提供一些专属的功能或服务?

如果可以,结合自己的业务,提供老年群体的针对性内容和服务。比如:如果你是做资讯的,内容推荐符合老年人口味,视频、音频形式,就很重要。如果你是做医疗健康的,老年人慢病管理,用药提醒,就比较贴心。


如高德地图长辈版:减少了很多不必要的功能,附近、消息、我的、打车等等。只保留首页而且把长辈会关心的公共厕所、医院、银行、公园等目的地列出。方便快速出行。做好了一个地图工具箱的职责。不去做干扰的信息。美团长辈版也是只保留核心的点餐功能。把更多的页面空间都留给了餐厅的信息展示。方便长辈点餐。



3、流程明确化、减少每屏信息密度

能懂会用,可以有效减少老年人在使用线上产品时焦虑感和挫败感。让老年人知道看到的是什么,正在做什么,接下来要这么做,可以达成什么目标,这是在使用线上产品进行一切操作的基础条件。

如做一件事情共需要几步,当前是百分之多少,还需要多少才能完成,在过程中少一些选择,多一些指引,将容易混淆的内容进行提示,告诉你应该如何操作,减少判断和操作失误。在长任务中,给出明确的反馈和最终目标的提醒



3.3认知能力、身体机能退化


1、理解能力

更易辨识的图标、提供图标名称。由于在互联网时代、年轻人接受的信息非常多,日新月异比如我们现在流行的矢量化图标、线条极简风格的图标,对于老年人来说,存在认知障碍。他们可能并不理解这些图标代表着什么意思。学习需要过程,因此,在老年人未熟悉我们的常用图标前,可适当调整图标的设计方向,更加“拟物化”,符合他们的认知。消除认知水平带来的差距



2、提示反馈

例如在一些需要精确移动的操作,而这个功能又必不可少的情况下。应该怎么解决。可以通过线性的视觉提示,加上每一个颗粒度的移动都给到振动反馈,加强长辈用户的感知。而不是所有的提示都通过界面单一展示。也是可以在资讯版块加入语音播放的功能,通过声音来告知信息。



四.信息获取优化—以证券交易为例的信息展示优化



1、信息展示的重要性

新闻资讯和行情列表展示的字段很大程度上决定着用户对行情的了解。是否做出交易的行为。行情列表阅读的现状:在一些产品中,基于阅读模块的相关设计在关注度和方法论上都有所欠缺。线上的行情列表阅读版式(参考同花顺、东方财富)处理较陈旧,视觉体验较差,用户在使用过程中障碍较多。归根究底,由于整体的设计思路缺失,表面的调整一直是修修补补状态,没有根本解决阅读体验的问题。


因此在信息展示上,需要加强逻辑与秩序,在易认性和可读性上优化信息传达和记忆质量,最终给用户打造0干扰的阅读体验。

这里解释下几个概念:

易认性:(Legibility)针对文字,能准确无误的让读者阅读,不因为过于接近带来困惑。

可读性:(Readability)针对版式,阅读的容易程度,文字的组合呈现。

0干扰:能将自己的设计不动声色的隐藏起来,不以设计本身分散人的注意力,达到阅读的沉浸状态。



2、目前证券交易产品列表存在的问题,总结与分析

基于此现状,分析了几个头部证券交易产品的页面,梳理目前存在的一些问题,每个列表的盒子宽度不一致,有的宽有的窄,导致在整体阅读时跨越度比较大。盒子的宽度不同对字段数据范围理解不清晰,导致同一页面数据字体大小不统一。展示的信息过多,密度高、信息过载出现视觉疲劳。又或者间隔太大显示的太松散



通过各个维度的对比,总结出这个表格

一、字体分析

1、字体iOS端文字基本以苹方为主,数字字体以din为多数(部分调整)2、字号整体以32-34居多。4个平台文字与数字字号相同常规状态下)

3、字重以中文常规体,数字中黑体为主

二、盒子分析

1、固定盒子间距,盒子宽度根据字段调整

2、固定盒子宽度,间距。字体大小(牛牛)

3、盒子间距不固定,超过盒子部分缩小字体

三、适老/大号字体调节

1、牛牛/腾讯自选股/同花顺:字体大小5档,可以全局调整,也可以分区调整,牛牛:行情、交易、资讯、聊天室、其他(同花顺有长辈模式)

2、东方财富/新浪财经:支持全局字号的修改,但是支持的档位有所不同有2档3档5档

3、老虎:不支持调整/雪球:只支持调整资讯部分字体



3、确认展现形式,并验证可行性

经过总结各家产品的体验分析,开始了设计方案的尝试。首先考虑了字段数据高频出现的范围、考虑极限值情况,确定字体大小在32-38之间比较合适。第一屏内仅展示最新价、和涨跌幅即可。同时把对比表中出现的高频率行高、字号。统一进行对比,产生问卷调研进行盲试,选择觉得最舒服的列表方式。最终34号字体/104列表高度被最多的人选择。


在确定字号大小和列表高度之后,开始设计验证,把要展示的字段和常规、极限状态的数据放入盒子模型内。确保在不改变字号大小和盒子间隔的的情况下都能完整展示。最后在适配泛金融交易的,A股、港/美股、期货、外汇等列表信息。在标题、或者数据达到8个-9个的情况下依然能完整展示。



最后在进行字号大小的调整,适合长辈用户使用。在保障展示完整的情况下,同时调整字号和列表高度,字号以2个字号为一档支持5档调节,最大支持44号120行高。同时在涨跌幅处用色块做视觉吸引,增强涨跌感知。详情页内也是全局调整,不能像某些产品一样只是单纯的形式上的做“适老化”


开发实现与落地,在和开发同事了解相关背景后,相当于是皮肤系统对应不同字号拥有不同的UI展示。由于不是时实展示,实现难道不大。全局调整字体,可以实现。但是具体效果不好确定。主要是自适应布局方式产生的问题。面临部分页面需要重新编写。由于目前使用的是frame布局方式需要调整成和Auto Layout(自动)布局才能比较好的适应效果。



4、文章资讯展示优化与落地

屏幕阅读与纸质阅读不同

人的阅读习惯会根据阅读环境而改变,包括文本的书写格式、文本的媒介、语言符号等。基于屏幕的阅读行为,往往表现了如下特征:很少人会一字一句阅读页面,更多的是在浏览、关键词确认、非线性阅读、有选择性的阅读。因此文章的间距非常影响阅读体验。文字的间距包括两部分,第一是横向字与字的间距;其次是纵向行与行的间距。



1. 页面版式留白探索(行间距,段落间距等)

行间距是决定版面中的栏宽是否具有阅读性的重要因素。许多平面大师都非常注重行距,段落间距的设置。过窄与过宽的行距会有意识或无意识的让读者困惑,造成某种心理障碍。


行距过大会打破文本连续性,每一行会被孤立,缺乏紧凑感,会降慢阅读速度。行距太小会让页面灰度过重,读者眼睛承受过多的负担,无法集中阅读单独一行,时间久了会增加疲劳感。



根据当前现状,再结合行业设计经验,我们选择了字号与行高倍数组合的一系列方案,进行了眼动实验和用户访谈,确定用户可接受的行间距为1.50-1.70的范围,再通过对比不同机型下的屏幕显示效果,以及不同档位字体显示效果、阅读效率,最后确定了图文落地页正文文字,扩大行间距1.65倍行号的设计方案。



2. 对齐方式研究

研究完行间距显示,段落里文字对齐的研究也很重要。

文字对齐方式有:左对齐,右对齐,左右对齐,居中对齐这几种,大段落文字阅读右对齐或者居中对齐几乎没有,所以这里我们对比左对齐和左右对齐的优劣。来看下优劣对比:

左右对齐的优势较多,主要体现在视觉感受舒服(规规整整的版式),更主要是眼睛在固定位置换行,在易读性上做得比较好。

缺点也是有的,文章存在2种字间距,而左对齐优势在于只有一个固定字间距。好在新闻阅读文章长度并没有特别长,篇幅受限,影响也就不会扩大,且2个间距尺寸也是在可接受范围里。


综上对比,我们认为左右对齐的版式在新闻类阅读里,是明显优于左对齐版式。



3.引入概念—「垂直韵律」

「垂直韵律」是阅读节奏感的重中之重,打造一切视觉阅读节奏。行距,是垂直韵律的基础属性(同版式中的网格概念接近)。

版式规范中,中文汉字1.5~2倍的行距是最为适合的。整体来说,字号越小,行间距应该相对越大,反之亦然。

确定1.65倍行距最符合各项指标行距确定完后,基础间距就有了数值a,之后页面相关的元素纵向之间间距都依赖这个数值(a的n倍)。



倍数间距的引用,整体页面来看,所有的留白都有规律可循,形成自己的韵律感。

这么做的好处就是用户对规律间隔的理解度更高,有节奏的留白除了满足了它本身需要的功能属性,用户阅读过程中不容易受到来自间隔过多的干扰,这样易读性就提升了。同时由于字号大小的不同,行间距相应的调整。展现的效果也不一样

来看下我们看看不同字号版式页面样子,自带韵律感~



4.字体、字重选择

我们除了需要选择无衬线字体,更应该选择字重更全的字体我们发现目前在一些安卓手机上,一些字体在增加字重后出现沾粘情况,不能保证可读性。

字重,即字形的重量,字重的等级用来标明同一字体家族不同粗细笔画的字形。

但通常一个特定的字体家族仅会包含少数的可用重量。若一个指定的字重不存在时,CSS会就近匹配其他字重:较重的字重映射到更重的重量、较轻的字重会映射到更轻的重量。

目前落地页代码中字体的设置,安卓使用的第一顺位的字体字重仅2档字重,所以在小字场景和分辨率较低的安卓机型上,会匹配到更粗的字重,出现文字沾粘的情况。




这里插入一件趣事,当时我走查安卓UI页面时,发现粗体字体比设计稿上粗很多,又对比了一下ios的粗细,就让他们改细一点。

他们表示:“没问题”啪一下,我一看发现加粗完全没有了,变成常规体了。就说“在加粗一点啊”。

开发小哥看了我一眼“行”啪一下,又回到那么粗壮的状态。

就问“为什么加粗会这么粗,iOS没有这么粗啊,不要这么粗,要细一点的那种粗!”

他白了我一眼说:因为是系统字体不一样的原因,iOS 用的是Helvetica,安卓字体是Roboto,其字体本身就设计加粗效果就是这么粗。没有办法了!

我:……暂时受挫,退去了!回去之后我越看越不行,就选择查找解决方案,最终在csdn论坛找到了方法。并且发现了相同遭遇的设计师与开发小哥。果然这个粗细问题都让设计师无法接受!




最终通过找到的方案化解了这个问题,不过我们还是调整了font-family中的字体适配顺位,在安卓端优先适配字重更全的字体,保证安卓端加粗字体的展现,优化内容可读性。



五、各家产品适老化改造成果

如今已经到2022年的年初,各家app适老化做的怎么样。是应付要求,还是真的为老年人打造适合他们用的产品呢?接下来我那几个正反面案例给大家分析一下。谁才在真正用心做产品


反面教材 :

支付宝

辨识度:支付宝仅在辨识度上还比较可观,字体、图标的色彩对比度都可以较好的辨识。但是在易懂方面,支付宝做的比较差劲,整体的交互依旧沿用普通版的,没有对于理解性做调整,对于老人来说操作比较复杂,难以学会。而且支付宝的老年版并没有很用心的去精简功能,比如这个个人中心页面,对于老人来说,支付宝会员、余利宝、蚂蚁宝、相互宝这些几乎没有用处,存在于页面中只会让老人误触,支付类软件对于老人来说核心功能就是支付、收款、查余额、查账单,类似于工具类的产品。在首页部分还是保留了蚂蚁森林的部分,一方面是基于公益的性至,另外一方面还是需要用户的活跃度、留存率。理财页面功能布局上是保留了稳健的、较安全的债券产品,以及保险产品。相对来是比较合理,但是进入到下一级页面后,又回归了正常模式。


而支付宝的口碑页在老年版中应该直接拿掉,口碑里的每个业务单拿出来,体量都不亚于一个大型APP,而且每个业务的内页都并没有去适配老年化,点进去依然是普通版的,这样的页面存在于老年版的业务中,只会分散老人的注意力,加大老人的误触率与学习成本。在新版本中加入的生活模块,更是连字体大小都没有改变,完全没有适配。如果是没有时间加入适配,不如在老年版不上这个功能反而更加干爽。


虽然适老化涉及的页面可能很多,资源成本很大回报率低,但是作为国内首屈一指的金融产品,立足于全球化的目标。格局也可以大一点,并且未来随着中国老龄化人口越来越多,老年人掌握的财富会越来越多。针于他们做优化也不一定是“亏本买卖”




同花顺

作为头部的证券交易产品,适老化做的可以用灾难来形容了。本来主要的用户人群就是中老年较多,界面风格也偏沉稳,结果在适配上做的像是在应付交作业。首页上半部分是加大了的图标,选项栏也是加大字号。但是下面资讯的部分似乎和上半部分图标分割了一样毫无关系,依然是正常大小,详情页中也是如此。行情列表页中一级页面是老年版的放大效果,点击查看更多时,列表又回到正常状态。列表页的适配难度是最小的,并且外面一层已经有了,结果还做的如此糟糕。并且在长辈模式中,字体大小调整也暂停生效了,也无法调节长辈模式效果不好的字号大小。



正面教材今日头条大字版 :

今日头条

是国内最具影响力的综合类资讯平台,内容五花八门,涵盖的分类众多,但是今日头条的老年版(今日头条大字模式)却适配的非常好,进入个人中心,把老人不常用的功能收拢起来,给人感觉就没有过多的冗余元素,把每个模块的字号与间距都做了适当的调整,整体非常易于阅读。首先在图标颜色上,调整成对比度强的颜色,同时今日头条的老年版了解老人喜欢热闹与分享的心理,将头条分享做的更加突出,便于老人方便的把喜欢的资讯转发到“姑舅一家亲”中。1、首先在图标颜色上,调整成对比度强的颜色,增强识别度。

2、图形化图标改成文字按纽,单一的图标,因为认知方面的差异,老年入无法理解。改用文字形式方便老年人理解涵意。

3、在交互方面的调整,比如暂停、全屏的调整外置,更加方便操作。

4、信息布局适应调整,重点需求突出,优化不常用入口。图标与文字相结合强化提示。

5、字体变大的同时,行间距离也做了想应的调整。


综合来说今日头条的老年版的适老化是非常成功的,不论从辨识度,易学,易操作上,都针对老年群体做了专门的优化 ,这样的产品才是更适合老人使用的。而不像某些产品的只是单纯的大、大、大而已。




写在最后

其实通过总结经验 ,结合案例来看,做适老化不只是将一个产品的字体放大了,而是根据老人的生理与心里特性将APP重新设计了一番,做一款更适合老年人使用的产品,让老人更加容易的学习并使用。


互联网产品的适老化之路道阻且长,做适老化可能会影响企业的利益,也可能会增加产品的维护成本,受制于某些原因,推动解决老年人面对智能技术的问题解决也是重中之中。但是设计师也需要运用自己的专业性,来帮助目标人群融入数字化的生活中去。

因为在不久的将来,我们也会变成这个群体,当我们面对这些束手无策时,那时的设计又会是如何适老的呢?适老化设计是适合所有人的设计,所有的设计师都应该密切关注。我们也应该让老人群体更好的体验互联网带来的便捷,享受中国科技腾飞所带来的福利,这也是我门后一代人应尽的责任。


文章来源:站酷   作者:枫枫枫枫锋 

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

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

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



据分析体系构成框架

涛涛

数据对于产品的发展起着决定性的指导作用,那么公司在运营的过程中具体需要一个什么样的数据来支撑服务呢?本文作者列举了产品经理需要了解的数据分析体系,一起来看看吧。

本文来自于我的新书《高阶产品经理必修课》摘录。

一、为什么需要数据分析体系

在很多不成熟的公司中,虽然也有使用数据去验证产品的思路,但是他们在实际工作中往往是这样取用数据的:

产品部同事找到数据分析师,问他昨天刚上线的版本用户点击率是多少。

运营部同事找到数据分析师,问他前两天上线的拉新活动是否带来了用户量的增加。

领导找到数据分析师,问他这两天的订单量是否有所增长,上月交易额环比增长是多少。

可见,各个岗位都会有自己的数据需求,所以数据分析师只能逐个地进行数据计算。由于人力资源有限,数据分析师往往无法及时反馈所有的数据需求,这将会导致一些运营活动或产品规划错过最佳的时机。例如,在“双11”前夕想要准备“双11”促销活动,却迟迟拿不到过往的运营活动数据。

正是基于这样或那样的原因,很多企业演化出了一类数据产品——数据仪表盘,如图1所示。

▲图1 数据仪表盘

数据仪表盘就是将各个数据需求方常关注的数据汇总在一张报表中,这样大家可以在这里统一看到整个产品的用户数、交易数等的变化,能在一定程度上满足大家对数据的需求。

但是随之而来的新问题如下:

产品部的同事抱怨:虽然看到昨天新上的版本中用户转化率下跌了,但是根本看不出来原因是什么,说不定是运营部的活动导致的。

运营部的同事抱怨:我虽然看到了拉新数,但我有三个用户拉新渠道,到底哪个拉新渠道的拉新能力最强,带来的用户质量最高呢?

面对这样的进阶需求,就需要一套完整的数据分析体系来做支撑,进而来帮助我们掌握数据变化情况并快速定位变化背后的原因。

二、数据分析体系概念的常见误区

一提到数据分析体系,常见的一个认知误区就是将数据分析体系等同于单一的某一个数据分析产品,如活动运营监控平台、用户画像平台等。

其实这里最大的错误就是将一个体系割裂开来,只看到了承载数据的产品而没有重点关注使用者的使用方法,就好像认为数据分析一定要有一把“利刃”,但是却不去关心舞剑者的功力一样。

最早提出这一认知的是钱学森先生,他在系统工程学中提出了软系统概念:

任意一个体系要想发挥正确价值,必须通过产品与使用者这两部分共同协作,这两者合二为一称为软系统。

所以数据分析体系的正确定义应该是:

数据分析体系通常由数据使用者的分析模型和数据分析平台这两部分构成。

这也告诉我们在数据分析学习与搭建数据分析体系的过程中,掌握使用数据的方法,方能以正确的方法去解读数据。但在部分公司的运营过程中,往往忽视了这一点,导致搭建出的完整数据分析平台无人使用。

确切地说,是大家没有以正确的思维或方式去使用,还是以老式的思维使用新的系统,并没有在思维与认知上进行升级,从而无法发挥其应有的价值。这就好比我们给数据使用者一辆汽车,但他们还是在寻找缰绳以期驾驶汽车。

这时数据产品经理就应该化身企业内部的数据分析咨询师,帮助他们看懂数据背后所反应的价值。所以数据产品经理在一家公司中应该有如图2所示的双重身份。

▲图2 数据产品经理的双重身份

三、数据分析体系构成框架

搞清楚了数据分析体系的定义,接下来就是了解如何才能搭建一个完整的数据分析体系。

笔者曾看到部分数据产品经理候选人的简历中经常会写到自己精通数据分析框架的搭建。而当面试中被问到他们的数据分析体系究竟要怎么落地时,他们给出的回答却是针对DAU(Daily Active User,日活跃用户数量)、留存率等进行管理,但是数据分析体系中的平台建设,就仅仅是对这几个指标的管理吗?那么请问,当遇到了以下场景时,这几个指标要怎么解决我们的问题呢?

场景1:某天某电商出现了GMV(成交总额)下降,此时应该根据哪一个指标解决问题?

场景2:某公司拥有3条产品线,A产品线中又细分为商品运营、活动运营等,3条产品线的若干运营团队都看同一套指标体系吗?

坦白地说,单看孤零零的某个或者某些指标是无法解决问题的,此时就需要依靠数据分析框架来解决问题了。

由前面的数据分析体系可知,数据分析体系落地涉及两个维度。我在《高阶产品经理必修课》书中为大家介绍了两个维度来看看数据分析体系在工作场景中是如何落地的。

维度1:通用数据分析模型

以下是实现通用数据分析模型的方法。

设置目标:确定当下业务中你的目标及完成现状。

问题假说:穷举现状是由哪些问题导致的。

数据证明:通过数据来证明该问题会导致怎样的结果。

数据分析:分析该问题的成因并形成解决方案。

维度2:数据分析平台

在数据分析体系中,数据分析平台的构成包含三大核心要素,分别是北极星指标、数据建模和事件分析。

数据分析平台定义中各要素的具体解析如下所示。

北极星指标:每个阶段针对具体业务领域确立的商业/业务目标

数据建模(又称指标体系):DAU、GMV、留存率、订单量等

事件分析:漏斗模型、海盗模型、杜邦分析等

注意:北极星指标(North Star Metric)又叫作OMTM(One metric that matters),它是第一重要指标,为产品现阶段最为关键的指标。之所以叫北极星指标,是因为就像北极星一样,该指标可以指引全公司所有人员向着同一个方向迈进,是全公司统一的指标。

数据分析体系其实就是通过一系列的方法量化特定的业务,因为我们如果无法量化一个事物,那么本质上就无法衡量它的好坏,也就无法定位业务发展中的症结所在。因此好的数据分析框架就是在告诉我们:当下的整体业务是什么样?为什么会这样?应该怎么办?

回顾前面面试者所说的那几个指标,我们可以发现其根本无法清晰地反映业务上的这三个问题。

当然,这里只介绍了数据分析体系的宏观框架,还未涉及具体的数据分析体系搭建过程,在数据分析实战中还会涉及相应的方法论。

在我们知道了指标体系与其对应的作用后,接下来就要来学习如何为自身企业业务量身打造一套数据指标体系了。

要想搭建一套完整的指标体系,除了对业务有非常熟悉的敏感度之外,拥有一套正确的建设方法论也是必不可少的。

这里我直接给出一个标准的指标体系的建立方法,共分如下4步:

1)确定数据分析目标。

2)纵向指标维度定义(层级设计)。

3)横向指标维度定义(指标填空)。这其中,又分为自上而下探寻(业务域驱动指标定义)和自下而上探寻(功能逆推指标定义)。

4)各维度指标项定义。

文章来源:人人都是产品经理   作者:三爷爷

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

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

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



用户规模测算: 为用户增长设立目标

seo达人



通过问题定义、拆分成计算公式、公式中的每个指标可被量化赋值:

  1. 自上而下法,也被称之为「从供应端出发」,从产能方面,比较适合供给端存在瓶颈,供<求,例如下雨天不好打车,用户需求远远高于司机供给,只能通过司机能提供多少供给去测算单量。
  2. 自下而上法,也被称之为「从需求端出发」,从用户需求方面,比较适合供给端能满足用户需求的情况,供>求。

按照这类方法的特点是:

  1. 偏于宏观方面的估计;
  2. 测算方法相对成熟;
  3. 测算速度比较快,测算精度上有待不足。

测算精度的问题主要是基于每一步计算过程都是数量级的估算,导致颗粒度比较粗,但企业中一般存在相对精确的数据,因此可以使用市场规模测算的方法做出相对精确的测算,本文着重介绍市场规模测算中的自下而上法在企业中的应用。

 

Chapter One .
用户规模测算的使用场景?

对于公司来讲,产品上线之后,通常需要设立用户增长目标,设置过高的目标往往难以达成,过低的目标通常过于容易达成,进行用户规模测算可以为用户增长提供适当的参考范围。

  1. 对于不同的产品阶段都可以使用,比较推荐新产品上线阶段,这时候往往还没有那么快去设立增长目标,这时候业务方对于业务增长的信息较为模糊,通过用户规模测算可以设置一个较为清晰的目标和数量级。
  2. 在制定年度规划阶段,对于未来的增长目标不确定,可以通过此确定量级。

 

Chapter Two .
为什么不直接用数据库里面的数据去预测?

这个问题确实值得被考虑,而且在大数据分析领域中,也有各种模型预测,为什么不用数据分析模型去进行,而使用调研去获得相应的数据,如果数据层面有相应的行为数据可以进行相对准确地预测,则也可以数据模型预测,比如电商、快销品等。

实际上,除了行为数据之外,还有用户态度数据,比如需求情况、购买意愿、购买偏好等,这些很有可能无法通过数据库数据得到,因此可以通过问卷进行推算。

 

Chapter Three .
测算的流程是怎样的呢?

图片

先来划分一下市场:

  • 潜在市场:这个潜在的需求有多大,
  • 可服务市场:有多少需求已经被满足了,满足需求的形式不限。
  • 可获得市场:有多少需求被我们满足了。
  • 独占市场:有多少需求是别人无法满足的,只使用我们去满足的。

图片

如何去获得相应数据呢?

我们通过问卷抽样,来确定每个切分市场所代表的部分,然后按照问卷抽样推算总体的情况。

这个总体可以分成:域内总体和域外总体,总体由用户导流来决定,比如如果是一个新产品的孵化,一般会从域内先去导流,通过域内的流量能做前期的产品价值点验证,再逐步拓展。如果是领域有明显差别,需要从域外导流,那么后续的用户增长目标大概率由域外向域内的流量或者是线索。

 

第一步:通过问卷得到需求和使用数据

根据目标设计问卷问题,在总体用户中进行问卷投放,投放问卷得到相应占比。

图片

 

第二步:获得总体大盘的相应数据

如果是域内导流的产品,则总体数据既是大盘数据(特别地:抽样期间的大盘数据);如果是域外导流的产品,则总体数量可以选择市场占有率计算。市场占有率的计算方式,可以去第三方平台投递问卷,经过计算得到相应的数据。

 

第三步:计算产品数据

根据总体大盘数据和问卷相关比例,计算产品日活(highcase~lowcase)

  • highcase,属于最大需求量
  • basecase,属于某产品满足需求的情况,可以作为基准线,basecase可以
  • lowcase,属于某产品优先满足需求的情况,独占市场的份额

图片

 

第四步:计算细分需求量、使用情况等

除了日活、月活、销量等数据,还可以计算细分数据,比如行业、职业、会员等,可以采取同样的思路进行计算,为细分领域的拓展提供思路。在这里需要注意的是也需要考虑大盘中的量,最终的需求量、使用量是有总体大盘的数量、针对该产品的需求量来决定的。

需求占比=所在总体中的细分领域用户规模比例*细分领域有需求的用户占比。

 

Chapter Four .
案例

我们通过问卷获得了以下的数据:

图片

图片

看到最后,大家会不会好奇?

图片

 

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

作者:鱼日

转载请注明:学UI网》用户规模测算: 为用户增长设立目标

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

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

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

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


如何系统化的思考设计改版?

seo达人


1.为什么要改版?

如果你已经开始工作了,那么对于设计改版你应该不陌生。改版目的是为了优化产品体验,增加品牌粘性,提升数据转化。

一般情况下,产品在一年中至少会有一次大改版。其他情况下不会特别大的变动,毕竟每次改版都是会影响数据的变化,领导也不敢随便冒险。

那么到底什么情况下会改版?下面看一张图,就一目了然。

图片

从上图看出,通常在这些条件下,公司业务层、用研侧、设计侧驱动、年久未迭代、产品需求出发,企业基本就会做设计改版。

这里简要说下用研报告,用研团队和设计配合完成一份研究报告。那么这份报告里面就会有用户对产品主观评价,和测试过程中发现的一些体验问题或者产品问题,这些关键结论可作为设计改版的依据。

如果你在的团队有会每年都去改版,那么恭喜你,要好好把握每次机会,改版最能锻炼设计师的时候,也是设计师价值体现,平时小迭代版本真的就像小修小补一样。

 

2.改版中常出现的问题

  • 目标不清晰或者说不知道如何推导

在启动改版过程中,很多设计师不清晰设计目标,要达成什么要的效果。从大家作品集逻辑推导中就能看出,比如,很多设计师的目标关键词常出现的情况是:简洁、清晰、高级等等,我们可以想象下这样的词汇,是不是对任何产品都能用,没有体现出产品要真正解决的问题。

那么对于设计目标来说,我们应该从哪几个维度思考?

图片

在一般情况下,可从以上四个大维度去挖掘设计目标。设计师首先就需要对每个目标充分理解,最好能和老板、产品、领导对齐各方向目标后,开始去拆解可量化的设计目标。

这里补充说明下,如果只是单纯的视觉层面的改版,是很难得到多方协同支持,而且价值意义不是很大。所以,改版一定要挖掘出对产品产生明显影响的问题。

  • 不知所云的用户画像

在包装过程中,如果你只懂皮毛的用户画像,还是尽量不要把用户画像东西放进去,没有多大意义。放进去反让人觉得你是套模板,大家可以看看大厂公众号中改版文章,几乎很少看到用户画像。

那么用户画像一般什么情况下会出现?比如是0~1设计启动,这时候是需要细分人群定位,但是在设计侧角度来说,建议别放,除非你对这块非常懂。

 

3.设计改版流程

虽然网上流传出很多各种经典设计思维模型,比如斯坦福大学设计学院设计流程、尼尔森诺曼集团设计流程等,这些都大同小异。在真正做的过程中,还会有很多问题出现,我们还需从实际情况出发,遇到问题解问题。

图片

上图就是一个大致的改版设计方法,从洞察问题、目标确定、发散收拢、方案探索、结果汇报、推动落地等6个步骤,每个步骤都有很多事情要做,所以设计改版真的是一个很庞大的工程。

除了我们日常工作中这样去推进,在包装作品集思路时,也是可以使用这样的流程去思考,只是可以去掉最后两个步骤。

 

4.写在最后

前面有说到,我们真正在改版过程中可能并没有很顺,会出现很多突发状况,这也是考验设计师是否会灵活变通。最重要的一点是在启动项目的时候,不要单点去看产品的问题,最好能系统的思考和业务方对齐关键目标,找准发力点,循序渐进,这样也是为了减少设计过程中的返工问题,或者考虑不周的情况,不然会有失专业水准。

设计师路还很长,我们都需要在过程中学习成长,通过实战提高思维应变和设计能力,通过设计驱动价值体现。

 

原文地址:功夫UX(公众号)
作者: Tony
转载请注明:学UI网》如何系统化的思考设计改版?

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

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

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

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

用例驱动设计,让你的设计更严谨!

seo达人



图片

复杂的AutoCAD与Inventor工具

 

用例(Use Case)的概念早在1986年就已被提出,它是需求分析的好帮手,可有效的划定范围、锚定用户、区分关系、定义价值,通过不同颗粒度的抽象层次,不断瓦解复杂系统,使设计和管理有序化。本文基于早已发展成熟的用例驱动设计理念,试图从中找到一条适合体验设计师介入的小径,来应对复杂业务的产品设计。(备注:用例、参与者、UML等详细的内容不在阐述范围内,本文仅探索一条可行的方式。)

 

1、什么是用例

定义:参与者与系统交互的一系列活动的集合。

可以发现,一个用例以一组活动集合来表现,集合中包含两个角色,参与者、系统。参与者是“活的”(不一定是人类),TA的诉求驱动了这一系列活动,此诉求即用例的核心,也是价值的体现。一个参与者可以对系统有多个诉求,详见如下案例:

图片

由用例驱动的体验设计过程,着重关注对“行为”的设计。与系统的互动“行为”被协调的、有组织的设计后,为界面表现设计建立坚实基础,避免因逻辑的变更使界面设计反复推倒重来。试图通过在界面设计的过程中寻找线索和灵感,反向的去设计背后逻辑是本末倒置的,个中原由在于我们更易于把控具象的视觉感知,较难把控抽象的行为。

 

2、系统用例和业务用例的关系

在划分用例前,有必要澄清系统用例和业务用例的关系。

业务用例是从客户当前的业务逻辑中抽象出的用例,与数字产品无关,即便没有该产品服务,客户的业务体系也可以流转。新的产品服务实际上是对传统业务体系的替换关系,而系统用例就是从该产品服务中抽象出来的,图示业务侧和产品侧的对接关系:

图片

 

用例驱动设计的案例:

总述:

为清晰阐释我们是如何利用”用例“这个概念作为切入口,最终一步步驱动、解构、细化体验设计的,下面将完整展示一个注册登陆试用产品的案例进行讲解,本案例为虚拟案例,方便设计过程的串连。

图片

 

step1:  整理故事与确定用例

故事中包含了用户的行为及其所处情境,将更易于被理解、共情和传递,故事情节的内在联系,上下游的完整性也直指价值的辐射范畴。在开始设计前,我们能从各个渠道收集到相关、相似的诉求,整合这些信息后以“故事”的方式表达出来,非常重要。

本案例的注册登陆试用故事从”企业“、”用户“两个维度进行描述,能确保在用户诉求达成的情况下,也能达成商业诉求,和谐统一的以产品服务提供出去。

 

1.1 企业故事:

公司统一了Platform账号体系,在保证多设备产品端的一键畅通体验的同时,收集用户行为信息,以提供更精准的售后服务。同时与授权中心合作,通过网上商城定期开展活动,以下放试用天数,获得试用授权。产品经理与销售部门达成持续的合作,通过试用用户的手机号进行电话回访,提高购买转化率。同时软件的设计应能最大限度的提升客户自发购买行为,需要在何时的时机,合适的位置提供购买入口。

获取用例的方式:

  • sys_运营人员→获取用户信息
  • sys_运营人员→开展活动

 

1.2 用户故事

新家装项目开展在即,大量的图纸设计使张经理感到困难。在受到同行推荐的Platform出图软件后,回到办公室,通过Platform官网找到软件信息,并利用现场wifi网络下载安装;迫不及待的启动软件,虽没有购买,但软件提供了试用入口,张经理提交Platform账号后开始试用软件。连续使用了两天,后面每次自动登录提高了试用的体验过程,产品一键自动化生成图纸初步解决了张经理的烦恼。经过和集团沟通后,张经理在界面上找到购买入口,并购买软件正版。他将软件推荐给朋友刘经理,他是Platform造价产品的老用户,且已购买过Platform加密锁,启动软件后,界面自动显示为正式版, 不用登录试用让张经理艳羡不已。

获取用例的方式:

  • sys_采购经理→试用软件

 

step2: 快速描摹流程图

用户和企业的“故事”是一种情节式的、场景式的描述,它易于想象、理解和整合。但为了更清晰的辅助设计,我们需要根据描述,进一步梳理出流程关系,将其具象化。在绘制流程图时,可不用关注角色的职责关系,旨在快速描摹出所涉及到几个业务点的关系,将企业和客户的诉求点包含进去,并在反复确认过程中思考、推敲,大体设计出其中的基本结构。过程中,可能需要补足新的故事描绘,或对既有的故事描述进行修正,以达成一个诉求与技术实现的平衡点。

图片

 

step3: 泳道角色化

理清核心业务流程关系后,将进一步绘制其角色泳道图,每个泳道下对应参与的角色。泳道图仍然是分析过程的一步,它在这里的意义是可清晰的观察到各个模块间的协作互动,是细化过程,各个“对象”的职责不同,他们之间的交互关系存在进一步优化的可能,以保证整体行为的和谐,减低系统冗余。

图片

 

step4: 业务实体的获取

事实上,带有角色的泳道图仅是在很粗的层面描述了业务所参与的对象,是单纯从流程图层面归纳出来的“对象角色”。在面对详细的功能分析时略显不足,可能缺失实际参与的“对象角色”,如不分析出来,将导致用户与系统的交互”行为“的缺失。我们需要进一步挖掘其中涉及的各个参与“角色”,完整的描绘出其交互行为过程,才能对该封闭系统做完整的设计。

从哪里可以获取到全部业务实体呢?当然还是故事。业务实体天然的包含在用户或企业故事中,才得以支撑故事的完整发生,这与故事描述的程度有关,我们第一步就需要填充完整的故事。

备注:什么是业务实体——用于达成业务目标的实体与过程中的记录信息。诸如“点餐”用例中的“打印单”就是一个实体,打印单上的手机号是记录信息。外卖员之所以能将外卖送到你的手上是通过打印单,查看上面的手机号和地址才能找到你。

下面是结合”故事“,进一步获取业务实体的案例,把所涉的可见的业务实体标识出来。

 

4.1 企业故事:

公司统一了Platform账号体系,在保证多设备产品端的一键畅通体验的同时,收集用户行为信息,以提供更精准的售后服务。同时与授权中心合作,通过网上商城定期开展活动,以下放试用天数,获得试用授权。产品经理与销售部门达成持续的合作,通过试用用户的手机号进行电话回访,提高购买转化率。同时软件的设计应能最大限度的提升客户自发购买行为,需要在何时的时机,合适的位置提供购买入口。

图片

 

4.2 用户故事:

新家装项目开展在即,大量的图纸设计使张经理感到困难。在受到同行推荐的Platform出图软件后,回到办公室,通过Platform官网找到软件信息,并利用现场wifi网络下载安装;迫不及待的启动软件,虽没有购买,但软件提供了试用入口,张经理提交Platform账号后开始试用软件。连续使用了两天,后面每次自动登录提高了试用的体验过程,产品一键自动化生成图纸初步解决了张经理的烦恼。经过和集团沟通后,张经理在界面上找到购买入口,并购买软件正版。他将软件推荐给朋友刘经理,他是Platform产品的老用户,且已购买过Platform加密锁,启动软件后,界面自动显示为正式版, 不用登录试用让张经理艳羡不已。

图片

 

step5: 时序图的绘制

接下来,我们将进行最重要的一步:基于已明确的核心业务流程和已拆分出的业务实体,构造出一整套完整的系统行为。将使用到UML语言的重要工具——时序图。时序图能天然的表达多个对象间的复杂行为关系,在产品研发领域应用广泛。(时序图的绘制有一整套完整的语法,本文不讲解该部分内容)时序图的“对象对话”形式,原生的契合了“交互”这一概念,游戏大师Chris Crawford和设计专家Jon Kolko都对此有所定义:

发生在两个或多个活跃主体之间的循环过程,各方在此过程中交替地倾听、思考和发言,形成某种形式的对话(conversation)”

——《Chris Crawford on Interactive Storytelling, 2nd Edition》

“所谓交互设计,是指在人与产品、服务或系统之间创建一系列对话(dialogue)”

——《houghts on Interaction Design, Second Edition》

时序图重点强调了“行为”的发生与互动,使整体目标达成。一系列有边界的行为活动合集,就组成一个完成的、有意义的“用例”。让我们再次回到开头的“用例”上来,并将该用例系统化。

用例:

  • sys_运营人员→获取用户信息
  • sys_客户人员→试用软件
  • sys_客户人员→授权软件

图片

除确保能服务于运营人员、客户外的核心逻辑能达成外,为带来更好的使用体验。我们需要从诸多体验维度考虑各个系统行为。“体验因子”将作为系统行为的一部分目标,使整个交互活动更易于理解和顺畅。可直接借鉴一些通用的体验因子来评估,对于不同形态、业务的产品,体验因子有所偏重,诸如工具类产品对“操作便捷度”、“工具易学性”、“工具帮助引导”有较高要求。

回到注册案例上来,考虑到“易学性”和“帮助引导”两个体验因子,可以对用户“输入手机账号”的行为进行优化设计,提前或实时对手机账号进行校验,避免出错后再提示,徒增挫败感。同时提供“获取验证码”的触发入口,引导用户执行该操作,很大程度上降低系统的理解负担。在行为设计过程中,存在颗粒度问题,复杂系统涉及到大量互动会话行为,可以有粗细的逐步细化。

图片

 

step6: 触点行为的竞品调研

完成系统互动行为的设计后,可以开始正式的界面信息设计。“行为”的表达是极度精炼的,行为本身就是价值取向,并暗合用户的内心想法,由用例行为来驱动界面设计,才能真正做到按需设计。诸如“我感到肚子饿,第一想法是吃饭“、”早上该上班了,第一想法是走路去、打车去或坐地铁“。

在面对”输入手机号码“行为的界面设计时,除了个人创新外,也可调研市面上有哪些优秀的界面承载方式,作为一种”学习输入”,或者激发出新的创新行为。这种由内而外的驱动设计,能使设计过程变得更有序,且避免遗漏。

图片

 

step7: 触点支线、异常、极限情况的排查

最后一步是对支线、异常、极限情况的排查,得益于时序图系统行为的可视化表达,我们可以清晰、有序的排查每一个对话过程中可能出现的异常或错误,诸如“验证码无法到达”、“信息返回错误”等异常,都将被有效地排查出来。同时,还能从行为对话结构中,洞察到新的设计优化机会点,诸如“提交账号信息”环节,必然需要网络的通畅,故断网环境下需要给出明确的反馈。如下示例:信息返回错误、异常流程高发地、页面跳转……

图片

图片

时序图会话的先后顺序也将直接影响到界面的表达,图示中“输入手机账号”与“填写验证码”是有先后时间顺序的,如果同时在界面中展示两个输入信息,无疑造成并列的误解。(可惜市面上几乎大多数注册环节都如此,大家早已习惯)

 

3、找到体验的最大撬动点

总结

所谓用例驱动体验设计,是借用例的概念来定义问题和范围,并使用UML来分析问题,使整个设计过程变得有序、系统、严谨,在应对复杂系统、多链路多角色的业务时较为有效。用例在整个设计过程中是核心的存在,一旦模糊就会出现偏差,引入无关内容,同时也会失去对用户价值的把控。用例的获取很不容易,而精准统一的用例更难,涉及到颗粒度、抽象层次、参与者、受众等等内容,本文未对“用例的获取”做详细阐述,仅专注在用例如何驱动设计过程,有兴趣者可移步学习。

 

撬动点

以用例为中心的体验设计,从业务逻辑出发,转化为系统逻辑,在构建这个过程时就持续考虑体验因素,是把控体验的有效办法,我们站在结构上思考体验,将彻底的优化系统的体验。单纯从界面表现和框架呈现上做体验优化,上限明显,只有扎得更深,才能从结构上找到优化的“最大”杠杆点,带来体验提升,并有可能直接对研发程序设计带来指导。而UML的建模语言是有效的辅助工具,两者的配合使这一切成为可能。

图片

 

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

作者:同舟

转载请注明:学UI网》用例驱动设计,让你的设计更严谨!

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

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

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

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


设计如何做出高级感?

seo达人



图片

图片

图片

图片

图片

图片

图片

图片

图片

怎么样?满满的高级感有没有?这类设计为什么会有很高级的感觉呢?有哪些地方可以值得我们去借鉴、学习呢?
 
葱爷总结出了它们

9大特点:

1.使用纯色

渐变色可以做得很时尚很有个性,但要说高级,那还是纯色比较有优势,你看奢侈品牌就很少用渐变色,所以,如果想要高级的效果,版面的背景和色块要多使用纯色。

图片

图片

图片

 

 

2.使用素色

高级的设计不但喜欢用纯色,而且是喜欢用比较素的纯色,即饱和度比较低的颜色,比如米色、卡其色、灰色、白色等等,看起来很素雅。

图片

图片

图片

图片

 

 

3.衬线字体

除了色彩,字体对于设计作品是否高级也非常重要,一般来说,衬线体给人的感觉最高级,无衬线体次之,手写体排最后。当然,英文的效果会更好,所以我们在做设计的时候可以搭配一些罗马体英文,比如Bodoni、Didot、Voyage、Ogg等等都是不错的英文衬线体,文章末尾葱爷会分享几款英文字体的下载链接。

图片

图片

图片

图片

 

 

4.干净的图片

说完文字我们再说说图片,高级的版面,其图片一般比较干净,这个干净不是说一定要有很多留白,而是指颜色和元素不要太花、太杂,比如在下面这些作品中,模特穿的衣服也是比较简单的,这些图片本身看起来就很高级。

图片

图片

图片

图片

 

 

5.使用几何轮廓图片

除了矩形轮廓的图片,我们还可以试试把图片的形状设计成其他简单的几何状,比如圆形、椭圆形、圆角矩形、拱门形、菱形等等,这些形状会显得没那么常规,而且会给版面腾出更多的留白空间。当然,图片的轮廓要根据图片的内容来做选择,不能影响了图片内容的展示。

图片

图片

图片

图片

 

 

6.图片与线的组合

版面中仅仅是图片和文字,你可能会觉得很斋(单调),而如果加图形和色块又怕太突兀,或者抢走主要元素的风头,所以,加线条或者线图形是一种不错的方式,既能起到丰富版面、增强设计感的作用,又不会太抢戏。

图片

图片

 

 

7.圆弧形图片配弧线文字

版式对于设计的气质也会有很大影响,很多服装品牌的设计喜欢用一串文字,绕着圆弧形轮廓的图片排版,这种排版方式可以与版面的边界以及其他水平排列的文字,形成鲜明的对比,视觉效果很不错。

图片

图片

图片

图片

 

 

8.大文字、大留白、小图片
大图片、小文字的版面可能我们看的比较多,感觉比较大气,而大文字、小图片,再加上大面积的留白,又是完全不同的另一种感觉,相比前者会更有设计感、更富有变化,使用得当也会很高级。

图片

图片

图片

图片

 

 

9.克制
高级的设计往往是很克制的,包括对色彩、字体、元素、特效、技巧等方面的克制,例如下面的几件作品,除了必要的元素,几乎没有任何多余的东西,但设计师通过对字体、字号、字间距、行距、对齐、留白的控制,让版面显得并不单调,反倒很高级。

图片

图片

图片

 

 

图片
使用纯色、素色、衬线字体、干净的图片、几何轮廓图片、图片与线组合、圆弧图片配弧线文字、大文字大留白小图片、克制。记住啦,下次想做高级的设计时,不烦试试这几个技巧,然后多找一些服装品牌的网页设计来看看。不过使用技巧的时候切忌生搬硬套,根据具体情况灵活使用才是正解,希望这篇文章对你有所帮助。 
 
 
原文地址:葱爷(公众号)  
作者:葱爷  
转载请注明:学UI网》设计如何做出高级感?

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

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

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

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

五个案例教会你怎么做卡通 LOGO (一)

seo达人


 

图片

图片

 

事情的来源是今早 9 点零三分,我还在梦里吃着澳龙,突然微信的震动把我震醒了。我一拿手机,原来是我的恩师胡晓波给我发来一条消息,让我试着能不能写一篇关于卡通 LOGO 的教程。当然我是一个很乐于分享的好人,所以有了今天的这篇分享。

 

图片

 

准备好了吗?我要进去……哦不,我要开始了!

 

图片
图片 
做好一个卡通 LOGO,有几个关键的点需要注意。如果这几点做不好,那么你做出来的卡通 LOGO 总觉得带着一股乡村气息,总做不出那味儿。下面拿这个案例演示的时候,我会一一提到。

首先先去网上找一些关于青蛙的素材,当然,你可以找照片,也可以找一些青蛙的卡通形象参考。然后在网上我看到了这张图,觉得非常有意思。虎躯一震,决定把这个拿来当动作参考。

 

图片  
重点 1:

在做卡通logo的时候,找照片素材最好是找姿态、动作比较有故事性、有意思、有特点的,这样出来的形象也比较生动。

接着,把这张照片垫底,试着草图一下它,把它的轮廓先用 AI 钢笔工具勾出来,这样就得到了一个初始的外轮廓。

图片

再处理下这个外轮廓,得到这个初始的轮廓后,感觉这个形象完全可行,那么我们现在需要把它的线条变的更顺滑,整体的形象显得更可爱(既然是卡通,可爱一点会更好看)。

 

重点 2:

怎么能让一个形象变得 Q 萌可爱?长时间的研究卡通,我得出这么一个结论:形象偏矮胖、敦厚、圆润,就比较能突出可爱的特征,把你勾勒的初始轮廓适当压扁,让它变矮胖。

经过线条的优化(使其圆滑),外轮廓的压扁处理以后,就得到了最后的这个结果。

图片

整体形象确定以后,再给青蛙画五官,这里,我们再去网上找一些青蛙的卡通形象的处理方式(或者不局限于找青蛙也可以找一些与青蛙形象相近的动物,例如蜥蜴等等)。

图片

 

 

重点 3:

卡通的五官,处理方式其实很简单,尽量用几何图形去作为脸部的五官特征。

在这个案例上,因为主体是青蛙,所以不能单纯用一个小圆点去作为青蛙的眼睛,我们可以看到青蛙眼睛的特征,是有一个较大的眼白与较小点的眼珠。所以这边的处理方式,就是一个白色的大圆+黑色小圆。

图片

单单这个形象还是不太够,虽然这个坐姿已经比较生动了,我们可以根据这个形象展开联想,让它更充满故事性和趣味性,这里观察青蛙的姿势,这个屁股的角度,可以让它坐在跟大自然有关的物体上,加上这个双手护胸的动作,让它叼一根树枝,更能体现悠闲的气质。

图片

 

重点 4:

卡通吉祥物的标志,利用本身的的姿态动作,适当展开联想,加一些小物件可以让它更生动,更有趣。

接下来就是上色跟补充一些细节了。如果配色较差,可以去网上找一些配色的参考。这里我找到一个卡通的配色,刚好也是绿色为主,适合青蛙,且背景也可以参考它做一个叠底。

图片

最后,选个自己觉得较为合适的字体,如果会做字体的话最好是自己做个字儿,再做个排版,就OK 啦~

图片  
 
 

重点 5:

卡通 LOGO 的排版,不要太复杂,因为卡通标志本身的图形具象,排版简单更好看,用字的字体气质要符合图形。

图片
图片

前面的案例,想必大家都已经 get 到了步骤,还我还是要再演示一下这个案例,嘻嘻。

还是一样的,这张照片是我偶然看到的,觉得非常有感觉就保存到手机了。在做这个 LOGO 前突然想到有这么一张图,立马开始操作。

图片

其实大家在日常生活中看到比较有意思的图片,都可以保存下来,说不定哪天它就能变成一个好看的 LOGO 是不是呢?

 

好了不说废话,开始勾轮廓!

图片

这张图的松鼠,看起来还是比较饱满的,所以在后期调整优化曲线的时候会比较轻松,但是这个图的外轮廓,相比第一个案例的青蛙,是比较复杂的,这里需要耐心一些。

这里绘制的外轮廓,线条都不是合并的,但是我们发现,这个 LOGO 是需要做一些高光跟阴影的,所以这里先给大家普及一个基础知识。

图片

三种描边模式,我们选择第三种——使描边外侧对齐,因为我在给图形做剪切阴影或者是高光时,不可能 100% 沿着轮廓去勾勒,这样太累了,所以一般会超出外轮廓一些,再去做剪切,这样能省不少时间。

图片  

重点 6:

卡通 LOGO 的绘制,基本都是用到外轮廓,这样好做高光跟阴影的剪切。

回到主题,我们接着画这个松鼠。

图片

刚刚我们已经把草图大概勾勒出来了,现在把这个草图垫底,让它形成一个合并的状态(注意先观察草图找好锚点的起点,否则很难让整个轮廓连起来),并且过程中、优化线条曲线(这一步还是有点难度的,钢笔工具不太熟的同学需要多练习)。

勾勒完成后的线条是图 1 这样的,不少同学会有疑问,为什么有些地方会呈现双线的状态?别急,把它换成外描边模式你就明白了。

图片

因为外描边模式,当有两条相近的线条时,是有可能重叠的,这样就能形成一些细节线条。

图片

接着,我们继续调整有些不完美的地方,比如重叠到的地方线条粗细不统一等等,调整完后我们看下效果。

图片

 

到了这步以后,其实最难的点已经被你拿捏了,剩下的就是补一些细节。另外,松鼠的尾巴,这边是没有按照图片的线条去处理的,因为现在这个图形是往下走的趋势,如果尾巴还是往下垂,那整个图形的重心就不平衡了。

图片

这边尾巴的处理也可以网上找一些参考,因为上面说的平衡问题,所以我把松鼠尾巴处理成往上走的趋势。

大体造型已经完成,现在剩下的就是填补五官、填充颜色,加高光阴影。

图片 
 

重点 7:

阴影跟高光这部分,其实不需要过于严谨。没有美术功底的同学也不用发愁,在一些有交错,遮挡的部位加阴影,在头顶或者身体外边缘加高光,基本是没有什么大问题的。

 

这样图形就完成了,最后加上排版就完成了。

图片  
 
 
 
图片
图片

第三个案例跟前两个其实很相似,都是我在网上看到比较有意思的照片,下载下来做成卡通标志。废话不多说,上图了。

图片

其实我个人很喜欢做猴,当然大部分原因是因为我爱人叫……猴子,图片emmm好像离题了,收!

因为猴子本身是一种带着调皮、聪明、智慧性质的动物,做猴 LOGO 其实可以让它赋予多种性格。

图片

如上两个案例的方法,先大概绘制一下猴子的外轮廓,看一下图形大概的感觉(这里还是与第一个案例说的,图形整体看起来比较瘦高,可爱气质会偏弱,我们可以尝试压扁)。压扁后我觉得是我想要的一个高度,但是压扁后头部也会变形,那么接下去只要我们把这个压扁后的猴子轮廓复制一个,再使用第一版绘制的头部就 OK 了(这里不做具体演示)。

 

 

重点 8:

卡通类型的 LOGO,一般身体都会比较短,头比较大,圆,这样可爱的气质才会突显。

经过一番调整操作后得到这样一个轮廓,但是现在这猴子是没有尾巴的,所以我们要给它添加一根又粗又长……的尾巴。

图片

这样得到了一个最终的轮廓形态。接下来就是给它画上脸,五官,还有增加一些高光细节了。

这里看你想给猴子定义什么样的表情气质。原照片的这猴子,表情略带无辜,我觉得还蛮不错的。那么我们尝试一下画上表情,注意简化。

图片

委屈、无辜的表情,如果你不知道怎么画才能表现出来,可以对着镜子装个委屈的表情看下,或者度娘一下委屈、无辜的照片。一般委屈无辜,眼睛的形状都是呈现一个眼角往下的状态。

图片

加完五官以后,现在整个猴子的大致形象已经出来了,那现在这个姿势,需要加点什么才能让它变完整。原照片上,是两根分叉的树干,其实照着画也没什么不妥,那我们就给它画上树干,再上个色。

图片

画完树干,上完色后,整个图形是不稳的。原因是分叉的树干其实是个 V 字形,所以我们为了让它稳住,在底部加一个类似阴影的形状去压住它就完全 OK了。

图片

本以为到这,就完成了。端详许久,总觉得还差点啥,感觉这猴儿还不够灵性。这时候我突然想到我前几天买的毛线帽,然后想着,天冷了,给猴儿个帽子吧……

图片

画完后,又看了许久,不禁发出感叹,我 TMD 真是个天才……最后老规矩,加排版,完事儿!

图片  
 
 
 
图片
图片 

前面的都是根据一些照片去做的吉祥物卡通标志,其实创造性不属于特别高,我个人其实更喜欢是这类 MIX 标志,把两种不相关的物体结合起来,但却不违和,反而更显趣味创造性。

这个案例的灵感来源是我在 BE 上看到一个我很喜欢的设计师做的一个标志(下图) ,把老鼠与胡萝卜结合,非常有意思。

图片

做这个 LOGO 之前,我就一直想做个胡萝卜的创意性标志(出于对波哥的爱图片),这类型的卡通 LOGO,有时候就是灵感一瞬间迸发的事儿。但是没灵感的时候,我都会去网上瞎看,有时候看着看着,就能想到做啥了。偶然间看到几张坦克的照片,灵鸡一动,把胡萝卜跟坦克结合,因为刚好坦克的炮管,可以用胡萝卜代替(想到这里,我露出了姨母笑)。

那么胡萝卜跟坦克的造型怎么画呢?首先还是打开你的网页,可以先搜一下胡萝卜的造型,再搜坦克的图片(这里找到的坦克图片,已经是手绘图了,所以我们要把它概括简化一下)。

图片

我先不用管胡萝卜的部分,因为胡萝卜的角度是要根据坦克轮子的角度来做,所以我们先把坦克的部分绘制一下。仔细观察坦克底座的构造,拆解绘制。

图片

到这里大家可能会有点困惑,这样的图片我要怎么下手?不要急,其实不难。上面我们已经把坦克底座的部分拆解,现在只需要绘制一排车轮跟轮子上面的铁盖。这里需要注意的是,因为坦克的特征十分明显,就是一根长长的炮管与底部的一排轮子,所以只要把这两个特征能抓出来,基本不难看出是坦克了。

图片

 

 

重点 9:

当你要把一个实物/动物图片转化成卡通风格时,要仔细观察它原来的线条,使其更几何化,去繁从简。

 

坦克部分处理完就可以搞这个胡萝卜了,这里就不用做太多演示了,胡萝卜这么好画!注意跟坦克合上的角度就 OK 了!

图片

这个角度先画个草图,放上去试试合不合适。

图片

 

可以!

再观察下胡萝卜的细节,因为它要充当炮管,所以我们不加上面的叶子,但是这样会不会看不出是胡萝卜?那我们可以观察下胡萝卜身体部分有什么细节,再加上胡萝卜的橙红色,说看不出我不信!

特征:胡萝卜身上的划痕

图片

别急,现在看不出胡萝卜不要紧,上色以后一切都会好的~

好了,可以合体了!注意各个组件的图层关系。

图片

上色!排版!完事儿!

图片  
 
 
图片图片

这个案例跟上个案例其实非常相似,都是 MIX 系列的卡通 LOGO 这个 LOGO ,这个 LOGO 灵感来源于我偶然在网上看到了这张图片,以猕猴桃代替了鹦鹉的翅膀,配色也完全不违和,是非常优秀的作品了。

图片

萌生了想长做一个类似的 LOGO,当然我们不能再用猕猴桃的元素了。想想,其实很多水果可以做这样的「代替品」。但是这里需要注意的是,什么样的水果切开,还非常具有特征,让人一眼就能辨识出来。最后我选了西瓜,西瓜可以有半圆,也可以有三角形,这样的话,鸟的翅膀形态发挥空间就很大了。切开后的西瓜籽加上红色的瓜瓤十分具有辨识度。

图片

当然我们先要做的是「鸟」这个主体的造型。这边还是先去网上找一下鸟的图片,最终,我选用这张图片来作为这个 LOGO 的主体(因为它本身图片就有可爱的气质,更方便我们后面创作)。

图片

这里我只提取了这只鸟的身体跟嘴的部分,翅膀我们要用西瓜代替的,所以暂时先不去绘制。确定好身体部分以后,我们再尝试先画切开的一半的西瓜。这里也不难,网上搜一下西瓜,很多素材可以参考着画。

图片

画好的西瓜,我们再尝试旋转角度,跟鸟的身体部分合体一下。

图片

看起来真可以啊!

 

现在的造型看起来是不是还不戳!是吧~但是还没完!一般展翅的鸟儿,爪子是什么状态?别慌,继续度娘!

图片

可以看到,展翅后的鸟儿,爪子都是往前伸。我们秉着卡通能简化就简化的原则,把爪子处理成线的形式即可。加以上色,「西瓜鸟」就出来了。

图片

图形这样已经是完成了,现在就剩下排版。当我加上文字以后,发现这个 LOGO 越看越显得空,那咋办?加个背景色块其实就解决了(这里的背景色块,也是根据鸟的身体走势做的椭圆)!

图片  
 
 

重点 10:

当你的卡通 LOGO 做完后发现整体看起来不饱满,尝试加个背景色块,屡试不爽。

图片   
 
 

总结Tips:

  • 在做卡通 LOGO 的时候,找照片素材最好是找姿态,动作比较有故事性,有意思,有特点的,这样出来的形象也比较生动。
  • 怎么能让一个形象变得 Q 萌可爱?形象偏矮胖、敦厚、圆润,就比较能突出可爱的特征,把你勾勒的初始轮廓适当压扁,让它变矮胖。
  • 卡通的五官,处理方式其实很简单,尽量用几何图形去作为脸部的五官特征。
  • 卡通吉祥物的标志,利用本身的的姿态动作,适当展开联想,加一些小物件可以让它更生动,更有趣。
  • 卡通 LOGO 的排版,不要太复杂,因为卡通标志本身的图形具象,排版简单更好看,用字的字体气质要符合图形。
  • 卡通 LOGO 的绘制,基本都是用到外轮廓,这样好做高光跟阴影的剪切。
  • 阴影跟高光这部分,其实不需要过于严谨,在一些有交错,遮挡的部位加阴影,在头顶或者身体外边缘加高光,基本是没有什么大问题的。
  • 卡通类型的 LOGO,一般身体都会比较短,头比较大,圆,这样可爱的气质才会突显。
  • 当你要把一个实物/动物图片转化成卡通风格时,要仔细观察它原来的线条,使其更几何化,去繁从简。
  • 当你的卡通 LOGO 做完后发现整体看起来不饱满,尝试加个背景色块,屡试不爽。

 

初试卡通,或许效果没有很好,但是都是能靠多看,多练,练会的。喜欢它,你就能静下心去做它,练它,兴趣是最好的老师。所以如果你也喜欢卡通类型的 LOGO,让我们干起来吧!

 

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

作者:小章鱼

转载请注明:学UI网》五个案例教会你怎么做卡通 LOGO (一)

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

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

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

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


3种状态+5种模式,从UX角度分析加载设计

seo达人


三种加载状态

页面加载进程会受多方面的影响,例如页面里图片、图标的数量,页面中是否有三维场景或模型,是列表式设计还是卡片式设计…

 

逐一加载

对于可以同时进行多个加载任务的产品,更适合应用逐一加载的形式,这样做能减少用户对于等待的感知程度。任务列表逐一加载的过程会给用户带来一种秩序感。

图片

 

完全加载

进入一个网站或App,很多页面都会一下就显示出来所有内容,这种页面完全加载的形式对用户来说更熟悉。

同样,页面完全加载的形式会让用户的操作和浏览过程更流畅。

图片

 

延迟加载

延迟加载是用户主动触发的操作,根据操作系统反馈对应的结果。延迟加载包括三种形式:

  • 无限滚动当检测到用户快要到达列表或页面的末尾的时候,通过无限滚动来作为触发器,引导用户获取更多内容。

  • 加载更多:通过点击“加载更多”按钮来获取更多内容,这个过程由用户主导决定,是否选择点击。

图片

  • 分页加载:分页是在不同页面上进行的延迟加载。这个过程也是由用户主动选择,但和“加载更多”按钮不同的地方在于,分页是页面间的切换,并且用户能清楚地看到具体的页面数量。
图片

 

五种加载模式

加载模式需要依托场景去考虑。比如一个1秒就能加载的页面和一个需要5秒才能加载出来的页面,我们就需要考虑使用不同的加载模式设计,这样才能做到差异化设计

这里我做了一个表格,将页面加载需要的时间以及对应的加载模式进行了整合。

图片

 

0.1秒以内

如果加载时长低于0.1秒,用户不需要等待加载过程,内容就能即时呈现出来,有一种“还没开始就已经结束”的感觉。

0.1秒以内的加载不需要在页面中添加任何加载状态,但要一个场景需要格外注意,如果用户刚完成一系列复杂的操作,点击提交之后,考虑为用户提供撤消机制

图片

用谷歌邮箱发送邮件时,发送成功之后会弹出一个撤销提示,允许用户在5s内撤销刚才发送成功的邮件。

 

0.1-1秒间

大多数产品的页面加载速度都在这个区间,用户几乎不会注意到这种加载延迟。所以我们不需要增加额外的加载动效来填充这段加载时间,不然可能会起到画蛇添足的反面效果。

试想一下,如果在每个页面加载的过程中都加上加载动效,不仅会分散用户的注意力,并且屏幕上总出现不断跳动的内容,会让人感到很焦躁。

 

1-2秒间

如果加载时间超过1秒,用户就会感知到这个加载过程,这个时候我们就可以考虑适当添加加载动画,缓解用户等待的焦急感。

  • 微加载1-2秒的加载时间对用户来说,说长不长说短也不短,优先推荐轻量级的动画加载形式,为用户提供一种进度感。
图片

在下载内容的过程中,使用这种轻量级的环形动画来显示加载进度,简洁清晰,而且还能作为组件来复用,能够极大提升工作效率。

 

  • 骨架屏用于整页加载,这种加载形式在产品中的应用也越来越频繁。骨架屏可以让用户在等待加载的过程中,先了解页面的架构。

图片

在骨架屏基础上,可以“选装”一些好看的效果,增加页面加载时的视觉体验观感:

  • 微光效果在骨架屏基础上添加微光效果,光感的加入能将用户的注意力从等待中转移开,有效地减少等待感知。

图片

  • 脉冲效果:效果和微光效果很像,差异的地方在于脉冲效果用于单个的任务或卡片列表。

图片

 

2-10秒

这个加载时间对于用户来说已经很长了,对于设计师来说,需要对这段加载时间进行合理有效地设计,来提升用户体验。

  • 时间提示在开发中很难以分和秒为单位来精确地估计加载时间。

图片

如果在加载的过程中,想给用户一个期望的时间值,告诉用户整个加载过程需要多长时间,我们可以用“这可能需要几秒钟”这种提示方法,既能展示加载需要的时间,又能给用户一个时间预期。

  • 进度条:最常使用的加载形式,加载过程中使用缓入动画会让整个过程看起来更像在加速。

图片

  • 分步提示如果加载过程过长,可以将整个过程分为几个不同的步骤,帮助用户预估操作完成需要的时间。如果系统正在处理多个项目,分步提示的设计能让用户明确了解已完成的操作。

图片

 

10秒以上

  • 百分比加载使用百分比加载虽然不能告诉用户加载完成需要多长时间,但是能提供一种过程感,让用户自己来估计加载时间。圆形进度条+百分比是最常见的加载形式。需要注意的是,不要在加载到99%的时候让进度条卡住不动,这样会让用户感到焦急。

图片

  • 后台加载如果一项任务需要加载很长时间,我们不能让用户看着进度条干等,其他什么都做不了,这种情况我们可以考虑将任务放到后台去加载。

图片

在Google Drive中上传较大的文件时,系统会立即给出反馈,将任务窗口缩放到屏幕的右下角,我们可以通过这个小窗口检查上传进度和上传情况,而且还不耽误使用页面上的其他功能。

 

最后

把加载细分成这五种模式,可以覆盖很多使用场景,这样的对症下药既能保证用户体验,还能让产品丰富化,起到锦上添花的作用。

在对的时间和对的场景下做对的事,这句话用在什么地方都不为过,设计也是一样。

最后考虑到大家经常使用卡片式UI排版,为大家整理了90+个iOS卡片模板,源文件已经打包好,大家可后台领取。

领取方式:关注公众号,后台回复【小组件】获取源文件。

图片

慢慢来比较快,希望对你有帮助!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》3种状态+5种模式,从UX角度分析加载设计

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

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

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

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


2022的100种设计法!

seo达人



图片

 

01.字形再设计

通过对0和2字体的解构与再设计,衍生出了各种形式的数字图形组合,凌厉或圆润、抽象或具象,无不表现出了设计师强大的图形想象力,是很好的设计参考。

图片

图片

图片

图片

图片

图片

图片

图片
图片
图片
图片

图片图片

图片

图片

图片

图片
图片
图片
图片
图片
图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

02.插画与文字

热衷于插画设计的设计师们将文字巧妙的融合的图形元素中,这种形式更能传达设计师的想法,使其更为具象化的表现在欣赏者的面前。

图片

图片

图片

图片

图片

图片

图片

图片

图片
图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

03.3D设计

3D软件让设计师们不在拘泥于二维世界当中,更全面的视角和细腻的质感表达,让设计作品焕发出全新的力量!

图片
图片
图片
图片
图片
图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》2022的100种设计法!

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

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

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

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


三个小技巧,轻松提高设计转化率

seo达人


前言

影响APP转化率的因素有很多,设计也是其中重要组成部分,那设计师需要如何应对,才能助力用户转化呢?从用户角度来看,助力转化就是扫清理解障碍,提升浏览意愿与顺畅度。

想要以设计语言达成以上目的,快速传达有效信息是十分重要的一环,接下来,我们结合案例,聊聊快速传达重要信息是如何通过节省用户时间来助力转化的。

 

01.为什么要快速传达

研究表明,人类在面对非自身兴趣的事物时,注意力只能高度集中 10 分钟左右,短暂休息后再次集中注意力的时间则为7-10 分钟[1]。

图片

当用户使用服务类APP的时间超过这个阈值后,就会因为迟迟没有达到目的而产生焦躁情绪,随之而来的负面影响要么是跳出到其他APP,亦或者对软件产生厌烦感,而无论哪一种都不是我们想要看到的结果。这也就意味着,我们每次只有20分钟的时间让用户完成从筛选到下单的时间。

因此,在用户有限的时间与精力中,迅速的传达有效信息,不仅可以缩短用户从挑选到下单的流程,站在用户角度来说,因为可以快速的找到自己想要的信息,也可以让用户切实的感觉到这是“好用”的软件。

因此我们需要快速传达的理论依据就此成立:

图片

 

02.如何快速传达

那么如何快速传达有效信息呢?方法有很多,今天我们重点阐述以下三个技巧:

图片

接下来我们结合实际案例看看如何运用以上手段以达到快速传达的目的。

 · 塑造视觉焦点

什么是视觉焦点呢?就是画面中让我们能多停留几秒的视觉元素,可以是一个点,一条线,一个面,通俗来讲,就是页面中最引人注意的地方,视线上交汇集中的地方,这个位置就叫做视觉焦点,而焦点可以通过构图,色彩运用,比例等手段进行塑造。

图片

接下来我们结合十一活动的实际案例说说如何进行焦点塑造,我们需要先构建合理的视觉层次结构,好的层级能使观者快速浏览信息,位于层级顶层的信息也可以在最短的时间内让人注意到。

图片

根据人眼对画面的阅读习惯,位于顶部和正中这两个位置的信息会最先被注意到,我们应优先将重要信息放在此处,符合了阅读习惯之后,通过运用色彩对比,字号大小等差异化手段,可以将信息的层级提高。

图片

 图片

大字号更容易让人一眼看到信息,因此就算是同处高层级的信息,通过内部字号大小的对比,可以进一步细分层级,让视觉焦点更加具体

图片

饱和度与对比色的运用同样重要,我们将彩色的图片去掉颜色之后可以发现,色彩关系对画面层次的影响,通过对灰度,明暗和色相的使用,可以使焦点位信息产生视觉前推感。

视觉焦点在具体案例中的应用展示:

图片

58到家活动

小结:通过构建画面层级之后,运用字号大小和颜色对比等手段做出差异化设计,可以快速将用户注意力吸引至焦点区域,并被引导着跳过次要区域,视线按从上到下,从左到右的顺序,在各个焦点位中跳跃,从而达成我们优先传递重要信息的目的。

· 前置思考过程

我们平时在想要达成某种目的时,需要先获取大量信息,在脑内罗列整理,然后归纳出有用信息后,再进行处理。

图片

用户在使用APP时也是这样,比如想点餐时,要挑餐厅,挑口味,挑菜品,而这一系列的信息整理过程是十分繁琐又消耗耐性的,正因此,我们才经常面临:不知道吃啥啊 这样的难题。

而这个思考过程是可以通过设计语言来简化,甚至提前完成的。通过将页面中的信息分类后,将同类信息放置在不同组块中的相同位置,使用相同的颜色和格式,会帮助用户形成阅读惯性。

图片

 结合十一活动案例来看,每个组件中都会包含有几类基本信息:产品名,利益点,和下单跳转按钮,每个组件中的信息都在固定的区域展示.

图片

同时用高饱和度的红色来强调,在这样的固定排列中,用户想要取得什么样的信息时,可以第一时间去固定的位置寻找,大大提高了信息获取的效率。

前置思考在具体案例中的应用展示:

图片

小结:通过将画面中的信息整理并归类,我们可以缩短用户的信息获取与脑内整理归纳的时间,让用户将有限的时间更多的放在优惠对比与决策中去,这不但有助于提高下单率,易读的版式也更容易让用户产生“好用”的感觉。

· 米勒定律[2]

我们先来看以下两段数字

图片

是不是后一段更容易记忆,这涉及到一个叫“组块”的概念,人脑记忆一组信息的时候,这组信息内的元素数量小于7±2时最容易记忆,具体数量因人而异,老年人的记忆数量会显著降低。

因此一长串数字看起来毫无规律难以记忆,而3个数字一组分成多个组块后,则容易记忆很多,同一组块内的信息越少,越容易让用户记忆深刻。

这个定律对设计画面同样有着重要的影响,一个板块中如果包含了过多的组块,不仅会让用户对这个板块的内容难以记忆,也会因为信息过多且没有主次而大大增加筛选成本,用户将时间过多的花费在筛选上会延长下单之前的流程,也会提高下单之前的跳出率。

图片

结合我们的页面设计来看,每一区域内的组块分布都不超过5个,同时组块内的信息类别也只有图片、产品名、简要介绍与下游链接4部分组成,通过做减法,让重要信息可以迅速被提取,更容易被记忆。无论对于新老用户来说,都可以有效的降低筛选成本,新用户能更容易理解板块功能,老用户则更容易记住自己想找的功能在什么区域。

米勒定律在具体案例中的应用展示:

图片

图片

58到家电商首页展示

 小结:通过简化板块中的信息类别,能有效缩短新老用户寻找服务的时间,同时老用户也更容易记住想要的板块在什么位置,下次再使用的时候,迅速触达。

 

03.写在最后

作为设计师,兼顾商业化与用户体验是我们的必修课,好的设计不仅仅是要“好看”,更需要兼备用户与产品两方面的功能性,将视觉语言与心理学、行为学的结合运用,既可以有效的提升用户体验,提高粘性,又能缩短下单前的必要流程,提高转化率。

 

注释:

[1]出自《教书育人》2016年1期38页,【运用心理学规律提高课堂学习效率】章节 

[2]米勒(Miller,1956)的分析,人脑处理信息有一个魔法数字7(正负2)的限制,也就是说,人的大脑最多同时处理5到9个信息(chunks)。原因是短期记忆储存空间的限制,超过9个信息团,将会使得大脑出现错误的概率大大提高。


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

作者:环铁艺术家

转载请注明:学UI网》三个小技巧,轻松提高设计转化率

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

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

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

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


日历

链接

个人资料

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

存档