首页

iOS 13 隐秘的细节②:原生APP的细节变化·上

ui设计分享达人

拆解iOS 13原生APP的细节变化,及其“影响”。

undefined


0.前言

在上一篇《iOS 13全局组件》中,主要讲述了新版系统中的分段控件、Switch、Sheet弹窗、Context Menu等组件的细化及影响。

从这篇开始,开始讲述iOS 13原生APP的设计细节,以及对设计师的影响。


开始前,依旧先明确下文中用到的机型和系统版本:

设备1:iPhone 7,iOS 12.4

设备2:iPhone X,iOS 12.2

设备3:iPhone 6S,iOS 13 Developer beta 6


-


下面开始原生APP的相关内容:




2.1 计时器

iPhone的计时器是个特别好用的功能。

日常生活中,类似“小睡一会”、“蒸煮东西”、“女友敷面膜”这些场景都能用到计时器。过去4年,我平均每天使用8次以上计时器。


虽然iPhone的计时器已经非常好用,但在某些场景下,尚有不足:

比如,设置一个80分钟的计时,中途看时间,虽然屏幕上显示还剩28分钟。但却无法直观掌握计时的进度(百分比)。有时睡迷糊了,忘了最初设置的总时长,导致不清楚睡了多长时间...

在iOS 13新版计时器中,Apple做了一些调整,很好的解决了上述问题:


变化1:新增圆形的进度条,如下图:

进度条可以方便用户掌握计时进度。


变化2:新增“到点”的时间(几点几分)

用户不用自己换算,就能知道计时结束的具体时间是几点几分。


变化3:铃声入口位置下移:

一般而言,用户在使用计时器时,通常的操作是:第一步:选择时长、第二步:点击开始。

并不会出现调整铃声这步操作,可以说,过去铃声放在中间的布局就很鸡肋。要么碍事、要么被忽略...

PS:过去四年,我从未察觉到有设置铃声的功能。囧

如何用“全链路思维”让设计更加符合需求方的预期

ui设计分享达人

篇首语:


随着互联网时代的发展,尤其近几年进入“互联网寒冬期”以及失去人口红利之后,企业对各个岗位要求都变得“非常”严格。对于UI设计而言,把作品做的非常牛X,显然已经无法满足市场需求和用人需求了。


前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。在一些企业你会发现有一些岗位上的缺失。出现这种情况最大的原因是,很多公司会把一些职能进行合并用来节省成本。现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。


说到这里大家可能会说,大企业资金雄厚,不缺少任何职能岗位。是的,没有错,但例如“华泰证券”,“浦东发展银行”等,不再是UI设计而是用户体验设计师了。那么作为UI设计师、运营设计师、品牌设计师(以上统称为视觉设计)的我们,该如何顺应时代发展,更加符合当下的市场规律,成为一名优秀的用户体验设计师呢?


当我们拿到需求方(产品或运营)的设计需求时,不再是盲目的直接找参考、找素材开始了,而是用产品思维模式,理解“产品目标”、锁定“目标用户”、切身体会“用户场景”、遵循“用户行为习惯”等的方式,充分理解需求方所提出的设计需求,进而设计出更加符合需求方心理预期的设计作品。


因为与需求方“同频”思考才会设计出符合需求的设计,难道不是么?


本文目的:本文引入“全链路思维”模式,帮助视觉设计师提升思维高度,通过“分析需求”、“拆解需求”、“竞品分析”等三个纬度思考,并将这些分析结果转化为设计方案


正文


一、全链路思维


最近所谓“全链路思维”的话题很火,但事实上,全链路早就不是什么新鲜的概念了,而且也并非什么岗位头衔(和全栈、什么都能干不是同一概念),更接近于一种设计思维与方法。


近几年,设计的发展趋势从UED(以用户为中心)变成UGD(以用户为中心,以业务增长为导向,不以结果导向的KPI都是耍流氓),对设计的价值考核也越来越清晰,同时对于设计师的能力体现要求更高。行业上升发展趋势要求设计师更懂行业(掌握行业间的差异)、更懂用户(洞察用户的需求)、更懂数据(善于分析业务数据)、更懂增长(投入产出比)。


在需求阶段,我们比较传统的一种流程,是被动从产品经理处接受已被加工为具体方案的需求,对需求产生的背景并没有什么深刻的接触和理解。而在进行全链路设计的业务场景中,需求方不会直接给你一个加工好的答案,甚至他们自己都没想清楚问题出在哪里、应该如何解决,而更多是带着一个提升某业务指标的原始诉求或一堆零散的原始用户反馈来找你;至于怎么从中引导对方发现问题、分析问题、归纳机会点、输出能帮助达到商业目标的产品设计方案、甚至协调推动落地,都需要设计师作为 Owner 去思考和负责。


“全链路”这个词应该是2016年从阿里出来的,对于“全链路”思维的理解,行内有不同的理解方式,笔者结合工作总结出以下几种方法:

需求分析 > 拆解需求 > 分析竞品 > 确立设计方案



二、用户体验


对于用户体验的理解,根据思考维度的不同其结果往往是众说纷纭,由于各个职能岗位之间工作侧重点以及专业度的不同,沟通起来是有成本的,只有用户为中心的“用户体验”思维才是各个职能岗位之间的唯一沟通《通用语》。例如:当产品向设计传达产品需求时,产品无法用视觉角度去阐述产品,设计也无法用视觉专业知识向产品解释设计理念,你只能用“用户体验”思维去解释你的设计方案。当然,如果对业务场景非常了解,两相结合,沟通起来效果更佳。


那么什么是用户体验,唯一的核心只有一个,那就是“解决问题”

解决用户具体某个需求点,让用户使用起来更佳容易,并且给用户留下深刻的印象(转化率)


解决了用户某个问题点并印象深刻,用户才觉得用着舒服。注意,这里的舒服指的是“舒爽”而非“酸爽”哦~。说到这里不得不再次提及老生常谈的,用户体验5要素:

表现层 > 框架层 > 结构层 > 范围层 > 战略层


那么以架构层与结构层为例

(一)、架构层:页面布局(各类控件及信息摆放),页面布局的核心点在于:恰好


当一个功能恰好出现在,用户期望出现的位置上,即符合了“用户的心理预期”,也符合了“用户行为习惯”,那么用户用着是否“舒爽”?所谓,以用户为中心指的就是,迎合用户的行为习惯及心理预期,让用户感到恰好、舒爽,同时感到被照顾、呵护的感觉:你好懂我~

大家都知道,一个页面最佳视域为:左上、右上、左下、右下,左上最佳,右下最次。功能类控件(如:评论,点赞,发布,分享)在一段信息区域的右侧,不是说右侧不好么,这是因为为了符合人体工程学,右侧好点击原理(左撇子除外)。


(二)、结构层:信息架构 (信息层级梳理及页面流),核心点在于:瘦身


结构层相对于架构层较为抽象,我们可以将他理解为“链接”。架构层是针对单页面结构设计,而结构层是将单页面链接在一起,从而形成了系统。

拿app举例:架构层决定了点击页面图标和按钮后页面跳转到哪一页。通过删除、组织,隐藏和转移,将复杂的结构变的简化,也是提高用户体验的手段。例如QQ5.0的升级,通过汉堡导航及tab标签将功能整合,似的应用在感觉上苗条了很多。


以阿里巴巴(1688) APP 8.0为例:


(三)、怎么做好页面布局及信息层级梳理:核心在于准确理解产品需求


也许大家都遇到过这样的情况:当产品经理看到你的设计方案时,突然找到你并且要求你,“这里放大,那里缩小,哦不,你给我放大的同时缩小,这个颜色我要五彩斑斓的黑,哦不,我的意思是@#¥%”


遇到这样的情况,设计师要无条件的遵循么?产品经理对于视觉有自己的审美,当他发出需求时脑子里已经有了2-3个设计方案,只是他不会做,设计方案没有符合他的心理预期(以至于指手画脚)。甚至他的审美经过这么多年优秀作品都熏陶,不会比任何一个设计差,只是他无法用设计专业知识去指导你罢了。


这个时候设计师该怎么做?出现这种情况只有这几种可能:没有同频思考、没有准确领悟产品目标(意图),进而对信息架构、信息层级理解有误、没有把重点信息清晰体现、功能类控件,没有做好有效的视觉引导。以上统称为:需求理解错了。


说到需求理解,据一个简单的例子:假如有个用户说:“我想吃蛋糕”,那么注意了,如果真的给用户蛋糕,那就完蛋了。首先分析用户为什么要吃蛋糕:就喜欢吃蛋糕?喜欢吃甜的点心(别的甜点能否替代)?还是说只是单纯的饿了,不知道该吃什么,只是突然想到了蛋糕,那么可否用其他我能提供的什么东西去替代?


所以,这个用户的需求不一定就是蛋糕,蛋糕只能是诉求,解决温饱的诉求而已,但不一定是需求,他的需求是,解决温饱的食物而已,如果不多问一句,不就产生了“放大的同时缩小,五次斑斓的黑”么?因为对需求的理解错误,没有准确的理解产品目标,才导致设计方案才会出现错误,难道不是这样的么?



二、需求分析


有人会问:“视觉设计师还需要像产品经理那样做需求分析么?”,正如上文中提到,要与产品经理保持“同频思考”,还要准确的理解产品需求。不需要做,但并不代表不会或者不去思考。因为需求分析是“全链路思维”模式的前提。那么对于视觉设计师而言,不需要像产品经理那种专业度,只需要思考以下几点即可:


(1)为什么要做这个需求(业务目标)

思考:业务方为什么要提出这个需求,为了提升转化率、用户留存、曝光/流?、点击率、访问率、注册率,也就是业务方的核心目的是什么。


(2)产品期望得到什么结果(产品目标)

思考:产品为了达到业务目标,采取的策略是什么,通过什么功能实现的。产品的核心功能及交互流程是什么。


(3)谁来使用这个功能(目标用户)

思考:此业务目标是针对哪些人群的,这些人群有什么共同的特点,和行为习惯。


4)他们为什么要使用这个功能(用户需求)

思考:这些人群有哪些共同的需求点,产品目标是否满足这类人群的核心需求,解决了哪些痛点。这些人群期望怎样的结果。设计师该如何引导用户,理解产品目标。


(5)他们在什么情况下使用这个功能(用户场景)

思考:在这样的业务目标下,用户在什么场景使用该功能,为什么使用,会不会有反感,如果我是用户,我的感受是什么。


其实,业务目标和用户的需求是矛盾的。比如,业务方希望提升注册率,但对于用户而言,注册与否并不敏感,或者根本不想走一遍繁琐的注册流程。这时产品就需要在特定的场景下,在某个功能流程中恰好出现注册功能,让用户不得不注册,因为用户不注册就得不到他刚好想要的服务或体验。这个时候设计师要考虑的是,通过设计营造一种喜悦的氛围,不让用户感到反感。因此设计师的核心价值在于,如何平衡业务目标和用户需求之间的矛盾,做出有效视觉引导。




三、拆解需求


拆解需求指的是,当设计师分析需求方的需求后,将需求拆解成其对应的视觉解决方案。上文中提到,需求分析不需要达到产品经理的专业度,但“拆解需求”必须达到专家级程度。因为这部分是需求分析后,如何理解需求方的需求(业务目标、产品目标)的关键所在。这时,我们视觉设计师要思考一下几点:


1、信息层级

(1)信息层级的分类(在明确需求后要对信息进行划分及拆解)

(a)用户能否在最短的时间阅读到信息、

(b)哪些信息是属于业务流程范围的、

(c)哪些信息是产品想要突出表现的、

(d)哪些信息看似不重要但没有还不行、

(e)信息描述前后是否统一,会不会给用户带来困惑


(2)信息层级的权重

在明确主要信息归类后,通过视觉上的,黑、白、灰,把层级表达清楚。明确信息权重,权重高的是否优先展示,有没有误导用户。


2、功能层级

(1)功能优先级权重划分(在明确功能后要对功能进行分类及拆解)

(a)哪些功能优先级最高,哪些是属于主业务流程及功能流程、哪些功能是子功能、

(b)哪些功能产品经理并不想突出,但用户却需要的、

(c)同一个页面,同一功能多次出现,产品经理的目的是什么、

(d)产品不同时期,功能的视觉变现是否有差异、


(2)交互层逻辑是否贴合用户场景

在明确业务目标与产品目标后,设计师要反复验证交互逻辑是否合理,逻辑是否符合该用户场景。


(3)交互体验是否流畅

在明确目标用户与使用场景后,把自己融入到使用场景中,反复验证交互流程。看是否符合业务目标与产品目标,同时看交互流程是否流畅,有没有给自己带来障碍。


(4)用户操作是否便捷

如果自己是用户,操作是否符合用户行为习惯,有没有恰好出现在该出现的位置上,视觉展示是否引导合理,视觉引导有没有给用户带来误区。


3、页面布局

在明确目标用户与使用场景后,把自己模拟成目标用户,思考页面布局是否符合用户行为习惯和心理预期。主流程下的控件是否在视觉上有点击欲望,会不会反感。(用户体验中已有详细说明)


4、状态的查缺补漏

各类交互状态,如,图标点击后的状态(移动端、pc端)、hover 状态(pc端)、非主业务流程下的功能提示(如:错误提示、缺省提示)。这些产品经理往往会忽略掉,或者文档里也会给出过,要注意观察及时查缺补漏。


5、视觉的有效引导

在准确的理解产品需求,做到“同频思考”后,分析信层级和功能优先级及权重划分,将这些在视觉设计的过程中做有效的引导,并时刻查缺补漏。这个时候对于哪些信息和功能需要突出,哪些信息和功能需要弱化,在头脑里有个清晰的认知和思路。让信息和功能恰好出现在用户期望的位置上,并且解决产品目标为目的,也就是上文中提到的用户体验的核心点,解

决问题。


值得注意的是

视觉设计师是对产品方案的进一步完善,以用户为中心的用户体验思想,用视觉引导的方式引导用户实现产品目标的,而非只会照着原型图毫无思想的画图。同时要让用户无论在视觉上还是体验上,都能感受到“舒爽”而非“酸爽”。


产品经理给出的原型,重心在业务逻辑,因此,为了提升用户体验、避免给用户带来误区和障碍,设计师要以产品思维(产品思维和业务思维是不一样的)在业务及产品目标、主功能逻辑不变的情况下,重新划分信息层级、做好页面布局,做好视觉引导。



四、竞品分析


通过需求分析(理解需求)、和拆解需求(明确设计目标)后,在正式进入视觉设计之前,视觉设计师们通常要先找一波资料(找参考),如果只是这样,那么仅仅是寻找视觉表现手法而已(什么风格、什么颜色)。本文中所提到的竞品分析,不是产品竞品分析也不是交互竞品分析,而是为了视觉设计而准备的视觉竞品分析。基于“全链路”思维模式下通常需要考虑一下几点:


1)我们的方案和竞品的区别在哪里,为什么不同。

跟竞品之间的区别很重要,因为每个产品业务目标与产品目标,以及产品处于的阶段都是不一样的,即便看着很类似也不可以盲目参考。


例如:产品阶段的不同,对于“搜索”功能的要求是不一样的,产品初期由于信息量不够,搜索不出太多的内容。属于没有还不行,有了还不能太明显,不能误导用户去搜索,而是要用分类功能。因此,即使产品经理给出了“”搜索”功能,在视觉上也要弱化变现。但你如果参考了成熟期的产品,可想而知你设计出的“搜索”会是什么样的了吧。


(2)竞品是怎么做的,优点在哪里,解决了哪些问题,他们为什么这么做

我们要找到与本产品业务目标与产品目标基本一致的竞品去对比,切勿只是原型基本类似就以为目标一致。因此,先要看这个竞品都解决了哪些问题。


3)什么是我们可以借鉴的,是否可以改进

在确定目标基本一致后,要分析哪些可以借鉴,能不能比他做的更好,如果只是抄袭,那就没有意思了。


4)那么设计该如何表达,比竞品做的更好

经过上述分析,在这个阶段对于视觉设计师而言,设计方案基本在脑子里已经成型了。这时对于什么风格、什么颜色,才基本符合产品预期。在结合需求拆解的方式,拿出可行的设计方案。


转自-站酷

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

如何通过竞品分析来解决问题

ui设计分享达人



1.竞品分析的定义


从专业的角度来讲,竞品分析是通过系统的分析方法去全面了解市场上位于前列的竞争对手的产品,能够让设计师快速了解自家产品所处的位置,从而来针对性的改进自身产品的一个方法。简而言之,就是要站在巨人的肩膀上去思考,以竞品分析的形式去学习其他优秀的产品,从而解决自身产品所存在的问题。



2.为什么要去做竞品分析


做一件事情之前一定要思考做这件事的价值和意义,只有你明白其重要和必要性,你才会知道该怎样去做这件事情,而不是一提起竞品分析就找一大堆专业框架和术语然后去填内容,这样虽然产出了很多,但是关键性的内容点其实还是不清楚。


说直白点,你需要通过这篇竞品分析去解决你工作或者创作中遇到的什么问题,带着疑惑和目的去分析在我看来是更有效率的。因此特分为以下几种情况:



因此我们要学会根据自己的不同需求,去制定不同的竞品分析方案,让分析的内容更聚焦。作为UI设计师来讲,通过竞品分析为自己的设计方案提供科学的理论依据,为自己赢得话语权,能够更好地科学产出内容。



3. 如何寻找竞品:


竞品的选择非常重要,如果找到错误的竞品,那么你所分析的一切结论可能都引向了一个错误的方向。从而让自己的努力都白费。那么怎样才能找到合适的竞品呢?分为以下三类情况


A.核心服务与目标用户相同的产品(直接竞品)


这一点是广大设计师都能想到的范畴,也称为直接竞品。即提供的核心服务、市场目标方向、客户群体等与我们的产品基本一致,产品功能和用户需求相似度极高的产品 。往往是通过业务关键词就能直接搜索到的竞品,比如音乐类产品,那么直接在应用商店,或者通过专业网站(易观千帆等)搜索关键词“音乐”即可搜索出排行前列的竞品。



B.目标人群不同,但功能模块和服务接近的产品(间接竞品):


这类竞品可以找起来并不那么直接,可以通过对应功能去逆推拥有此功能的产品,并进行相关搜索。


如果想不到,可以通过“人人都是产品经理” “36氪“等关于产品资讯的网站进行查询,甚至可以通过百度指数来进行发散思维,看一下跟你关键功能相接近的都有哪些。比如你研究外卖产品,除去饿了么和美团等直接竞品,你还可以在分析用户下单和购买流程中,去分析淘宝和京东等购物产品,也能得到一定的帮助。



C.目标人群和服务都不同,但交互或者视觉有可以参考的产品(关联竞品):


这里所选择的产品,定位和领域可以都完全不同,但是你要从这款产品中得到启发,从而让你的产品能够拥有其他竞品不同的特点或者功能模块。有一个很典型也熟知的的案例,就是卫龙辣条的设计案例,在卫龙推出之前,可以说是没人会想到辣条会和高端扯上关系,但是卫龙就是借鉴与其领域完全不同的苹果设计去做,从而在包装上独树一帜,从而吸引人们注意取得成功。因此通过不同领域跨行业的产品有时候也可以找到不错的思维方向。



4.如何进行商业分析:


进行商业分析,这里只提及到三个基本选项:商业背景、产品盈利模式以及用户人群。通过这三个基本要素,你能对所研究的竞品有一个大概的了解。当然深入了解还需要其他平台(官网网站、36Kr等)来查阅更多的相关性资料,下列是对QQ音乐商业背景的简要分析。




5. 如何进行交互分析:


我们在做交互分析时,我们需要进行必要的两点分析:用户路径和交互维度。


用户路径:指用户从某个开始行为事件直到结束事件的行为路径,即用户在使用某个功能的完整流程称之为用户路径。我们需要去观察和体验在这一个完整路径中涉及到的页面、动效、视觉到底是怎样的。就拿登录页来说,我们看看排行前列的竞品是怎么做的。通过相应的体验和对比分析,我们就可以找出这其中符合我们产品性质的最优解,从而提高我们的登录注册效率。



交互维度:交互维度和用户路径有所区别。这一层需要弄清楚产品的核心路径,从而能够更好的解析产品各个层面的逻辑关系,这就需要我们以用户的角度去逐个体验,整体联系,随后记录下来。使用过程中我们也要去观察APP中的交互小细节,怎样分享的,怎样展示的,比如音乐软件进行截屏后和点击喜欢按钮后的反馈是怎样的。




6. 如何进行视觉设计:


在进行视觉分析时,有一点需要注意,如果你需要详细分析某一模块,请用手机尺寸截图后拿到设计软件中进行测量,不要光靠眼睛观察,很多时候的小细节我们只有在手动测量后才能感受到,比如控件的尺寸大小,间距的大小,以及颜色的取值,都需要精准测量后才能得出靠谱的结论。


怎样进行视觉分析呢,我比较推荐从一个app 视觉语言最基本的五个维度去分析,即“形色字构质”



最近以音乐APP进行了一次竞品分析,以QQ音乐APP来举例进行分析(当然竞品分析并不能只分析一个,而应该根据你需要的功能找多个竞品进行对比分析,才能看到更多的维度,这里只拿一个举例):




6.1 图形元素的分析


首先我们以形进行分析,形即图形元素,具体来讲即LOGO和图标。LOGO的更新在2018年10月以后已完成更新。新版的主要图标整理归纳如下:



可以看到整体的图标色调更加清新,造型设计更加圆润,未选中状态的线形图标则采用4px的描边,粗线形描边让整体界面风格显得更加稳重的同时对用户的干扰也较小。新版的图标界面让界面保持稳重的同时又富有活力。



6.2 色彩体系的分析


其次则是对色这一类别进行分析,颜色其实是对于品牌调性有很大的影响,比如一想起QQ音乐就知道主色是绿,一想起网易云音乐就知道主色是红,对用户的记忆点更深刻。通过截屏测量进行分析,得出整体的颜色如下(由于手机屏幕的色差原因,不可避免会有些许误差)


从局部来看,分析颜色最重要的一点就是能够弄清楚一个页面中哪些元素用的是同一种颜色,观察成熟的产品是怎样用颜色(和字重)去区分层级关系的。



可以看到,用主色和三种辅色即可区分界面的整个层级关系,由此思考我们在制作自己的界面时也避免用太多的颜色,造成界面太过花哨。(颜色的具体色值可能有些许误差,更重要的是看颜色层级关系)



6.3 字体体系的分析


接下来是字的分析,字即字体体系,可具体到字体和字号。设计中字体一般来讲是苹方,字号则根据设计师的定义来进行相应的规范。通过页面的测量分析,可以拿到其具体的字号大小层级分析。(以下定义基于750的设计尺寸)



对于单个界面的分析,个人觉得要带有思考的眼光去看待,比如在首页中字号其实分配过多,像“更多”这种按钮就不应该再分一个字号,字号太多整体就显得有一点点乱了。虽然大厂的设计能在一定程度上给予我们参考,但并不是说他的每一个设计都是正确的,我们要学会用审视的眼光去看待出现在身边的设计。



6.4 界面构成分析


界面构成即界面的元素大小以及他们的布局,例如有时候我们不知道一个标准的搜索框的长宽具体多少才是合适的,这就需要我们去分析其他成熟的商业产品,通过测量来知道具体的数值,从而督促自己进行正确的设计。这里选取了一个默认的首页进行分析。



将一个页面用右边的形式进行原型化,去掉干扰可以把结构看得更清楚。间距之类的也可以通过软件进行测量。可以看到QQ9.0版本的去线化设计,利用大间距来区分各个模块,去掉了其他的干扰元素,整体的界面模块看起来非常整洁轻盈以及富有呼吸感。统一的圆角化设计也让整体设计符合流行趋势,显得更活泼。



6.5 质感与风格分析


关于界面的质感则是不同于扁平化的一个设计,即有的页面在你看来细节会更丰富,层级会更深。界面质感通过渐变,叠加,透明度等不同方式来呈现,比如在QQ音乐中的会员界面卡片,则体现了微质感:



上方的会员卡片就加入了渐变和图案叠加的方式来为卡片增加质感,让整个界面显得更精致。当然,叠加的图案都是与内容相关的,不能为了叠加而叠加。包括下方的权益图标,也采用了渐变的方式来让整个图标显得更精致和有质感。我们再处理质感的时候也可以用这种方式来进行。


以上通过“形色字构质”来分析是属于单个分析,相当于去拆解一个成熟产品中的每一个细节点,从而去学习和吸收。我们还要学会进行对比分析。把单独某一个功能模块拎出来,通过不同类型的对比从而归纳出这一类的设计方法和样式,进而总结相应规律。


比如某一天你需要设计一个歌单列表,你此时就需要分析所有TOP排行的歌单列表,看看分别都有什么,从而总结归纳出结构来,再进行分类。



通过分析提炼,形成以下结论并进行相应的概念风格展示设计:



这样,我们最后制作出来的方案才能涵盖比较全的解决方案,从而能够更好的助力设计产出。上图的产出可能稍显简陋,但只是做一个简单的示例,真正的产出应该更加有细节和落地,也要结合自己的工作需求做相应调整。



7.关注竞品的版本迭代和用户评价:



关注版本更迭,阅读竞品版本更新的详细说明,你可以从中得出版解决了什么问题,提升了哪些体验,添加了哪些功能,融合了什么流行的设计趋势。产品迭代就是团队通过用户需求对某个产品不断完善的一个过程。迭代对于一个产品来说是至关重要的,一个产品如果不想被对手超越,就必须不断的对版本进行更新迭代。


除了关注具体的内容,你还可以观察版本更新的提示信息,例如夸克浏览器在每次更新时总会用富有趣味的文案来打动你,从而让你更加情愿去更新,提升新版的使用率。


用户评价则更不用说,产品的最终服务对象就是用户,用户评价的重要性自然不言而言。不过我们要客观辩证地去看待用户的评价,吸收好的建议,屏蔽无脑的意见,从而能够正确地迭代版本。用户评价的查看可以使用App Store或者用户评价网站(https://appbot.co/)去查询。



总结


以上的篇幅较长,看下来可能会有一些累,那么此篇文章提及到的点在这里回顾一次:


1.竞品分析的定义-站在巨人的肩膀上去学习;

2.为什么做-基于自己的目的去进行对应的竞品分析,分析的最终目的是解决自己在设计过程中遇到的问题;

3.竞品分析分为三个层面:视觉分析、交互分析以及商业分析;

4.怎样进行商业分析(商业背景、盈利模式、用户人群);

5.怎样进行交互分析 (用户路径、核心路径、交互细节);

6.怎样进行视觉分析 (从“形色字构质”五个维度去分析以及如何对比分析应用);

7.竞品的迭代和用户评价的重要性。


自己有一个小习惯,看完每一篇文章,总会告诉自己一定要在脑海里回顾一遍,思考一下这一篇文章到底有什么观点是自己之前没有想到的,哪怕只有一点是没触及到的知识盲区,那么这篇文章之于自己就是有意义的。所以希望大家看完能有些许收获那便是最好的了。


写这篇文章的目的是给自己的竞品练习做一个总结,以输出倒逼输入是一种比较有效的学习方法。但基于自己的水平有限,在某些分析的地方仍然存在不足和疏漏之处,希望大家谅解并及时交流。感谢大家看到这里,希望大家每天都进步~


转自:站酷-进击的M 

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


如何更好的使用弹窗?

ui设计分享达人

弹窗在设计中运用的非常广泛,基本上每个应用都会涉及到。恰好这段时间我也在整理公司设计组件这一块,所以就想总结分享一下


设计师都会使用弹窗,但对于弹窗背后的分类及运用可能还不是特别了解,在写这篇文章之前,我查看了很多应用及资料,所以下面会有大量的案例,相信大家看完可以对弹窗的认识更明确,做设计规范的时候也能有自己的想法。


现在的弹窗分为两种,一种是模态弹窗(重提示),一种是非模态弹窗(轻提示)。

常见的模态弹窗:Dialog/Alert、Actionbar、Popover/Popup

常见的非模态弹窗:Toast/Hud、Tips、Snackbar、



Dialog/Alert  对话框

对话框是我们常用的弹窗,安卓开发语言是Dialog,iOS开发语言Alert,它通常出现在页面的中间,对话框/警示框的类别非常多,对用户的干扰比较大。前面之所以说模态弹窗是一种重提示,是因为它需要用户主动触发选择才可以继续当前的操作。


① 信息-选择确定

特点:这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等,通常只有1~3个主按钮,只需要用户进行简单的选择。


下图举例分析:

iOS询问是否删除APP,就属于重要提示弹窗,它一般会用在像删除、确认提交...一些比较重要的功能操作中。

小红书的这个是否允许使用网络弹窗,大家一定在许多APP中都见过,这属于一个系统自带的授权弹窗。

马蜂窝与天猫的消息提醒弹窗,一个属于初次使用APP时,系统自带的弹窗,一个属于使用后期APP为了推送消息,主动提示你开启消息通知。

有钱花和爱奇艺的版本升级弹窗,都属于偏运营类的弹窗,这一类的弹窗通常会弱化暂不升级的按钮,突出升级主按钮。




② 信息-输入勾选

特点:这类弹窗通常是输入一些比较少的信息或者勾选信息,常用于备注输入、规格选择、分组选择等,通常只有确定和取消两个按钮。


下图举例分析:

微博对于已关注人的分组及备注,都属于信息输入及勾选类弹窗,操作通常都比较简单。




③ 信息-传达展示

特点:这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗,主要是吸引用户点击及参加活动,这类运营弹窗通常会设计的比较吸引人,造型各异,会突出领取、查看等大按钮,弱化关闭按钮。


下图举例分析:

拼多多和饿了么这类的红包优惠弹窗,就不多说了,大家都懂,它们最主要的目的就是吸引用户点击,提升购买率。

美团的变黄送好礼弹窗,属于一次比较大的品牌升级,它主要目的是让用户更好的了解并接受品牌色升级。整体的元素及动效设计都非常清晰,视觉感很强。

支付宝的这个猜世界杯赢蚂蚁积分的弹窗,属于活动弹窗,它的整体设计非常贴合主题。




Actionbar操作栏

Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出,它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是,可以让用户清楚的感知当前的操作,比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。


① Action Views操作视图

特点:这类视图弹窗通常占屏比较多,以文字、图标等形式展示各种功能,也可以说这类的弹窗是一个小型的页面。它一般从底部弹出,不太强调归属,大多出现在购买、支付、分享等场景。


下图举例分析:

百度网盘的这个+号扩展弹窗比较特殊,它也可以说是浮层,占满整个屏幕,它最吸引人的还是它的小动效。

京东购买时的弹窗和支付宝付款时的弹窗,都是比较典型的,在各种电商产品及付款页面用的非常多。

转转这个的键盘与输入为一体的弹窗,设计的非常人性化,让用户一次就可以输入多个价格。大大提高了用户的操作效率。

网易云音乐的分享弹窗就是典型的以文字与图标来展示功能的。

微信读书的底部阅读设置弹窗,比较特殊,为了使用户沉浸阅读,它是比较隐藏的,而且非常轻量化。


undefined



② Action Sheets 操作列表

特点:操作列表相对于操作视图,它更单一。主要是以文字展示功能按钮,重要敏感的功能操作一般会用主题颜色或红色显示,主要运用在一些日常控件、功能选择、删除、保存等场景。


下图举例分析:

Keep的选择日期,属于iOS原生控件,非常常见。

淘宝的选择地址弹窗,整个展示的非常清晰全面,而且用户每选择一项,就会有相应的显示。

支付宝和天猫超市的两种列表弹窗,就不多说了,简单的功能选择都会采用这种。




③ 抽屉式弹窗

特点:这种抽屉式弹窗一般从左右两边弹出,经常运用在一些导航扩展和目录展示中,它能承载比较多的信息,基本上都是用来放一些不太常用的功能。


下图举例分析:

微信读书及一些其他阅读类产品,由于目录很长,而且一般是从上到下浏览的,所以基本都采用了这种抽屉式弹窗。

小红书的这个抽屉式弹窗,以图标和文字的形式展示了一些不是很常用的功能,为我的页面节约了不少空间。




Popover/Popup 浮层

Popover是ios的开发语言,popup是安卓的开发语言,浮层是指,用户点击某个功能后浮出一个临时气泡对其作出补充,它通常会伴随着半透明的遮罩或者投影衬底,用户需要点击功能区域操作,或者点击空白处取消,才能进入下一步操作。它与上面操作栏的最大区别就在于,它更强调归属,可以出现在页面的任何地方,而操作栏一般只出现在底部,不强调归属。


① 指向浮层

特点:这类的浮层一般伴随有小三角指向,强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示,主要运用在顶部加号补充、复制、分享转发等场景。


下图举例分析:

支付宝和美团的顶部加号补充浮层,展示形式是差不多的,只是UI样式不一样,一个是白色气泡黑色半透明遮罩,一个是深灰色气泡。

微信读书和微信的选择文字气泡,在文字复制中很常见,通常会与其他转发收藏小功能一起出现。




② 导航筛选浮层

特点:所谓导航筛选,自然是与导航分不开的,再加上浮层是比较强调归属的,所以它通常会与导航连在一起,一般出现在顶部。


下图举例分析:

美团的导航筛选,因为选项及开关很多,所以它的底部会有两个主按钮,一个完成,一个重置。

饿了么的这个只有一个功能选项,所以它一般是直接选择就收起浮层了。




③ 引导浮层

特点:引导浮层的作用就是引导用户更好的使用产品及交互,降低用户的学习成本。它通常会出现在用户首次进入APP的时候,一般只会出现一次,点击空白位置或我知道了浮层就会消失。


下图举例分析:

QQ音乐与微医的引导浮层都是用户首次进入应用时,给出的功能搬家提醒浮层。





Toast/Hud 提示框

Hud是ios的控件名词,Toast是安卓的控件名词,它们都属于一种轻提示,给予用户及时反馈,让用户知道自己当前所处的状态。

Hud一般只出现在屏幕的中央,以毛玻璃的样式表现,内容展示比较富丰富。

Toast可以出现在屏幕任意位置,通常以黑色半透明的小框来表现,内容一般是纯文字提示或者文字与图标结合提示。


① 状态提示

特点:状态提示的Toast,它们一般都是反馈用户当前操作的状态,只出现1到2秒就会自动消失,场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。


下图举例分析:

移动的属于操作遇阻提示。

京东的属于操作成功反馈。

iOS的音量控制属于毛玻璃Hud。

微信的清除缓存属于正在操作状态。




② 按键提示

特点:按键Toast提示与状态提示不同,它们一般自动出现或者点击触发才会出现,用于对功能点的补充说明,让用户对功能有更深的了解。


下图举例分析:

蚂蚁森林里点击树木就会出现相关信息,当然它也会自动出现,点击其他区域也会自动消失。 

知乎的消息标签不仅有小红点提示,还会在上方自动出现数字提示。




Snackbar

Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭,它没有Toast那么轻量,设置出现的时间会比Toast长,而且可以点击按钮进行交互。


下图举例分析:

UC浏览器的Snackbar,是在提示用户上滑,来查看更多内容,它需要滑动或者超时才能关闭。

京东的Snackbar,是在为用户推荐商品,提示用户点击箭头来查看喜欢的商品,它比UC浏览器多了一个关闭的按钮。




Tips提示

Tips与Snackbar最主要的区别就是:Tips它是内嵌在页面上的,而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失,一般用于需要用户感知到的通知信息,或者植入广告。


下图举例分析:

百度网盘在下载视频时,就会出现一个Tips的提示,让用户观看广告来得到加速下载。这种提示虽说是广告,但它抓住了用户的场景及心理,观看广告的几率大大提升。

爱奇艺的Tips提示就属于重要通知提示了,提示用户VIP即将到期,续费可优惠,它们都有一个主按钮及关闭按钮,需要用户主动触发提示才会消失。


undefined



规范总结

目前的弹窗样式非常多,你能想到的,你想不到的基本都可以技术实现。但这同时也带来一个问题,那就是“不规范”。以上提到的弹窗种类,你只需要选择符合你产品要求的几个类型,最好不要在一个产品中运用多个同种类型的弹窗,否则后期会很难规范及组件化,当然运营广告类弹窗可以另当别论。

转自:站酷

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


拆解「开关」背后的设计细节

ui设计分享达人






如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


小小开关中的大学问



一.生活中的反面案例


故事要从我搬到新出租屋开始讲起。半年前搬到新的出租屋后,房间里配置的洗衣机也比之前的大了一倍,而且操作区上分布着的密密麻麻的文字和按钮让洗衣机看起来更高级了,然而这种对它的好感并没有持续多久。在我第一次使用它时,我将衣物放进洗衣机后,选择好时间和洗涤方式,按下了启动按钮(如下图右侧白色按钮)。



按下后洗衣机发出了“滴”的一声,在我的认知里它应该是开始工作了,但是10秒过后没有任何抽水声和洗衣服的声音。我疑惑地想:“是不是刚才并没有成功启动?”,于是再次按下了启动按钮,又是“滴”的一声,但是这次我等了 1 分钟没有任何反应。之后的十分钟里,我与这台匪夷所思的机器“交涉”多次才理解了它的运行方式。这台洗衣机启动后需要等待大概十几秒才开始运行,但是在我按下启动按钮后我得不到任何反馈或者提示来告诉我洗衣机已经开始工作了,所以疑惑的我又按下了一次启动按钮,然而令人崩溃的是这台洗衣机的启动和暂停按钮是一体的,我第二次按下实际是进行了暂停操作,从而导致我第二次的困惑。


如果你是这台洗衣机的设计师,你会怎么解决上述的问题呢?


可能你的心中已经有了答案,在回答之前我们先试着探究问题的本质。


人们不管是使用日常物品还是与机器进行交互,都会面对两个阶段的问题。一个是「执行」,一个是「评估」。执行时用户需要理解如何操作,操作后可能会有什么结果。评估时用户需要知道具体发生了什么。作为设计师我们要通过合理的手段帮助用户解决这些问题,保证交互的可用性和流畅性。


通常我们会使用「意符」在用户执行前告知用户如何理解、如何操作、操作后会有什么结果。在评估前通过「反馈」告知用户结果是什么。


对于意符的定义,在《设计心理学 1-日常的设计》一书中,作者唐纳德·诺曼做出了这样的解释:


人们需要某种方式了解他们将要使用的产品或服务,某些标识表明的用途,会发生什么,有什么样的替代方案。人们寻找蛛丝马迹,寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号非常重要。设计师需要提供这些线索。人们所需要的和设计师必须提供的,就是意符。除此之外,优良的设计要求对产品的目的、结构和设备的操作与使用者进行良好的交代。那就是意符的作用。


简而言之,意符就是在用户使用前,机器为了让用户更好地理解和使用它而做出的提示。而反馈就更好理解了,机器在我们操作后做出的反应就是反馈,没有反应同样也是一种反馈。


下图展示了机器与用户如何进行交互。一个合理的设计可以让用户快速顺畅地进行 1234 四个步骤进而完成任务,而糟糕的设计会让用户不断重复这个流程。之所以会出现糟糕的设计,就是因为在步骤 1 和 3 没有进行合理的意符提示和反馈提示让用户摸不着头脑,进而导致用户根据自己的猜测和过往经验来进行操作,最后得到非预期的结果。



回到文章开始时的洗衣机开关问题,因为开始和暂停按钮是一体的,在没有任何意符和反馈的情况下我按下这个按钮时我并不知道我启动的是开始操作还是暂停操作。


我们可以就这个问题列出以下解决方案:

    1.增加文字提示,如启动时在显示屏上显示“已启动”,暂停时显示“已暂停”;

    2.增加语音提示,启动开关后使用语音告知用户“已启动”或“已暂停”。


当然解决方案有很多,每个人都可以根据场景想出不同的解决方案。


与现实机器的开关类似,在 UI 设计中我们如果进行开关设计也需要遵循相应的设计原则。


一个合理的开关设计主体包含的意符分别有两种:

    1.表示当前状态;

    2.表示操作后的状态。

主体之外我们还可以添加辅助提示更加清晰地传达意符和反馈。


接下来将介绍一些常见的开关类型和辅助提示类型,最后总结出体验优质的开关设计方法。



二.开关类型


1.icon


在 UI 设计中最常见的开关可能就是 icon 了,即由单一的 icon 通过颜色或图形的变化来表示开或关的状态。因为交互设计从古到今并没有统一的严格标准,所以到底是将开关 icon 的样式设计为「当前状态样式」还是设计为「按下之后的状态样式」并没有一个约定俗成的规则。然而,对比而言如今各类 App 设计中常见的且体验比较好的方案还是将开关样式设计为当前状态样式。如下图iPhone自带相机的实况照片开关icon就是显示当前状态。



然而,并不是说将开关样式设计为当前状态样式做法普遍且体验更好就可以这样做了,有些开关的设计因为使用广泛,已经在用户的心智中扎根,我们如果强行改变反而适得其反导致体验变差。最典型的就是视频和音乐的播放暂停开关,他们表示的就是操作后的状态而不是当前状态,如下图。



因此,大部分应用的开关类 icon 都是混用当前状态和操作后状态的,如下图哔哩哔哩的视频播放界面,播放暂停开关 icon 表示的是操作后状态,弹幕开关表示的是当前状态,而视频锁开关 icon 又变成了表示操作后状态了。



是否统一倒不是关键,关键是我们是否能够让用户理解相应的意符和反馈,目标是让用户在操作开关前能够知道当前状态是什么,操作开关后当前状态是什么。


举一个反例,下图中的美颜相机的夜拍模式开关就没有直观表现出当前是开还是关,这种有歧义的设计可能让新手用户手足无措,可能本来未开启的功能让用户误以为已开启,导致拍出来的照片不符合用户预期。


由此我们可以看出,单一的 icon 开关如果没有其他的辅助提示会造成意符和反馈的缺失,进而形成较大的歧义性,用户会在疑惑中按照自己固有的心理模型和过往经验进行判断,体验因此降低。



2.主体与开关分离(分离式)


上一部分举了美颜相机的反例,其意符和反馈不明产生的歧义问题导致了用户的困惑,但使用「主体与开关分离」(后文一致简称为“分离式”)的开关设计可以解决这个问题,它在意符和反馈层面都给予了用户提示,可视性很强,完全解决了开关状态无法被用户感知的问题。分离式开关指的是,主体不再充当开关,只当做开关的名称或icon,另外制作一个开关传达意符和反馈,解决了当前状态与操作后状态混淆的问题,其通常的样式如下图。



如下图,Faceu激萌不同于美颜相机设计方式就是将主体与开关分离,很清晰地传达了当前开关状态。



大部分App的设置页面使用的开关都是主体与开关分离的方式,如下图。



显而易见,分离式开关直观展示了当前状态,在消除歧义方面优于 icon 开关,但同时缺点也很明显,它占用了过多页面空间并美感欠佳。




3.名称变化


名称变化指的是开关依赖于其名称的变化告知用户开关的当前状态和操作,常见的类型如下:



部分 App 会将开关的名称变化的方式统一,但也有部分 App 会将这两类进行混用,即一个是表示当前状态,一个是表示操作。


下图为部分 App 的名称开关,我们可以将上图的开关名称类型的序号对号入座。



表示操作的按钮文字具有一定引导性,用户容易感知和触发,反之,表示状态的按钮文字由于不具有引导性,如果用户没有对这类按钮形成使用习惯甚至难以意识到它是可点击的,因此我们可以利用其特性进行逆向应用引导用户的行为。比如在直播App中,我们希望引导用户关注主播,又试图避免用户关注后又取关主播。我们就可以将“关注”制作为表示操作,文案写为“关注主播”(属于1.开启...)。将“取消关注”制作为表示当前状态,文案写为“已关注”(属于7.已开启...)。前后的颜色进行区分,“关注主播”的按钮制作得对比度强,吸引力大,“已关注”做得弱一些,让用户误以为不可点击,如下图的斗鱼直播。



然而,名称变化的开关由于语言的模糊性,仍然造成了部分歧义。我们可以发现很多App的名称变化开关设计中,都会在操作后加入其它提示来消除歧义(如:toast 提示),有些App则并未加入,因此在后文中会着重介绍辅助提示的优点和使用方法。



小结


icon、分离式、名称变化,如果按照消除歧义的优劣排列的话,大概是 分离式>名称变化>icon。


那这样的话是不是应该把开关都换成分离式呢?当然不是,分离式虽然在意符和反馈的层面很充分地消除了歧义,但是其也有明显的缺点,分离出的开关会占用部分空间,可能会影响美观,因此我们需要根据需求和页面结构选择最适合的开关类型。


那名称变化和 icon 类的开关如何消除歧义呢,我们可以通过添加下面介绍的辅助提示来解决。



三.辅助提示


1.环境暗示


环境暗示指的是用户在操作开关前,开关以外的区域给予用户的提示,这些提示本身存在于交互流程中并不是我们刻意加入的,用户根据这些提示可以判断当前状态以及按下开关后的状态。


例如在观看视频时,当用户去按下视频播放按钮前,用户会通过当前图像静止与无声音这个环境暗示明白当前状态是可能是视频未播放,所以应该按下播放按钮让视频播放。


再比如得到 App 的夜间模式,用户可以通过当前界面的样式判断当前是否已经开启了夜间模式,如下图。



看下图,如果没有环境暗示,你能分清得到的夜间模式的开关哪个当前状态是夜间哪个当前状态是日间吗?



因此,环境暗示的优势是我们不需要进行另外设计其他的意符和反馈告知用户当前状态,环境给予的暗示已经足够直观。



2.模态/非模态提示


当用户按下开关后模态和非模态提示可以在反馈层面告知用户,让用户知道自己是触发了开启还是关闭。


常见的模态提示控件是「警告框(Alerts)」,非模态提示控件是「提示框(Toast)」,前者提示强度大,使用在一些危险、重要的反馈中,后者则使用在一些轻量的提示中。


介绍 icon 开关的部分我们提到了美颜相机的夜拍模式的 icon 开关状态难以区分,但美图秀秀在这里使用了顶部的非模态提示在反馈层面告知用户当前状态,很好地解决了这个问题,如下图。



拉勾网的设置中,隐藏简历为危险操作,用户极有可能由于开关名称的歧义或由于疏忽触发开关导致简历被隐藏从而错过工作机会,因此此处设计了一个形式为警告框的模态提示来告知用户当前状态以及潜在风险。




3.辅助文案


辅助文案指的是在主体(主体可能是开关名称、icon 或二者皆有之)之外另外放置一些文案信息来充当意符和反馈。下图案例就是高德地图的下车提示的开关,开关的主体是名称,但是下面的一行辅助文案很清晰地传达了当前的开关是什么状态。




4.其他辅助提示


并不是所有提示都需要让用户看见,我们可以给予用户其他感官的信号告知用户当前开关的状态。


在现实生活中,我们会通过钥匙在锁中扭动发出的声音判断锁是否被打开,通过触摸感受摩托车是否继续震动判断其是否已经熄火。


同样,在 UI 设计中,我们也仍然可以使用听觉和触觉来消除开关的歧义。一个比较优秀的案例是高德地图,当用户打开下车提示之后,会出现语音提示“已开启下车提醒”,它充分考虑到身处户外的用户可能并不能很方便地获取屏幕上的视觉信息,因此使用语音的形式提示用户。



小结


辅助提示很好地补充了开关在消除歧义上的不足,但我们需要合理使用否则就会产生不必要的视觉噪声。如下图,试想音乐的暂停播放开关如果加入的 toast 提示会怎么样呢?由于我们已经可以通过“手机是否发出声音”这个环境暗示获知当前的开关状态,如果再加入 toast 提示必然会出现不必要的视觉噪声。




4.总结


介绍完开关类型和辅助提示后,我们如何将其应用到我们的产品中,设计出无歧义或低歧义的开关呢?


如果我们选择的开关类型已经足够的消除歧义,如分离式,我们就不太需要额外地增加辅助提示了。但是如果使用容易造成歧义的开关,我们可以按照(开关类型+辅助提示 1 +辅助提示 2 +......)的公式进行设计,即一种辅助提示不足够消除歧义,可以使用多种一起。


举个上文的例子,高德地图的下车提醒开关的设计就是「名称变化开关+辅助文案+语音提示」 的组合。


然而,任何设计都不是完美的,很多地方都需要我们做出妥协,虽然我们可以选择合适的开关类型和辅助提示解决歧义问题,但随之而来就可能出现其他问题。如分离式开关消除歧义效果很好,但是占用空间且不美观,模态和非模态提示给予用户的反馈比较强,但是可能打扰到用户。


综合上文提到的三款相机软件作为案例,如下图,我们可以发现在消除歧义的过程中避免不了对用户造成的干扰或页面美观度的降低。我们很难去评判Faceu激萌、美颜相机和美图秀秀哪个设计得更好,它们只是在易用性和美观性之间找到了它们所认为的平衡点。具体如何设计,还是要具体问题具体分析。



那么我们应该如何进行取舍呢,在这里我们要考虑另外的因素。我们可以从以下角度分析,使用频率、用户人群、潜在风险等。


使用频率:使用频率越高,用户对操作的熟悉度越高,歧义对用户造成的理解与记忆成本就降低了,设计可以偏向低干扰和美观度,反之使用频率越低,歧义对用户造成的理解与记忆成本升高,设计就应该偏向于易理解。


用户人群:不同的用户人群的风格偏好、认知能力是不一样的。例如,我们要设计一款目标用户为年轻人的相机产品,设计风格简约,此时我们比较偏向的设计方案可能就类似美颜相机。反之,如果我们的目标用户是中老年人,就要偏向于易用而牺牲美观度,方案转而偏向美图秀秀或 Faceu 激萌。


潜在风险:开关的切换如果会导致潜在风险,设计就应该偏向于易理解,且需要使用模态提示告知用户风险。例如用户如果关闭了推送通知开关,会导致接收不到实时重要的信息通知,此时不仅要使用易识别的开关类型,还需要添加模态提示告知用户风险。


我们可以将这些考虑角度放到雷达图,如下图所示,最终形成的面积越大我们越应该将按钮制作得易理解、易使用,反之我们可以偏向于将开关制作得更美观牺牲一些易用性。考虑到一些特殊产品的特殊用户属性,我们可以在下图中增加其他考虑角度,其并不是一成不变的。



以上是本次对开关设计的思考,看似小小的一个开关,包含的学问却不胜枚举。作为一个互联网产品设计从业者,一定要善于感受生活,用设计师细腻的内心去打量、洞察身边的一切事物,发现美与不足,思考改进方法,并在这个过程中逐渐提升自我的价值。

转自:站酷-Ballen贝林 


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


让用户多走一步,让产品前进一大步

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里



在产品交互设计中,

有些交互逻辑会“故意”让选择用户多走一步,


而短短的一小步,却会迸发出更多的价值!

(在不影响用户体验情况下)


而这次,我在体验这些产品当中,获取的一些思考分享给大家。

我们就来聊聊有哪些是多让我们做一步而让产品更加升华的一些APP吧!



文中涉及到的理论包括:


尼尔森十大可用性原则

第五原则-防错原则(Error prevention)

第六原则-易取原则(Recognition rather than recall)

第七原则-灵活原则(Flexibility and efficiency of use)

我们常能听到以上的十大原则之中的著名设计理论,

但可能还是不太清晰是什么意思


而这篇文章将会实际分析

涉及到的原则知识我将会在案例中分析讲解~



--------------------------------------我是分割线------------------------------------


以下是实例分析:



1-1 . 灵活原则(Flexibility and efficiency of use)

「中级用户的数量远高于初级和高级用户数。为大多数用户设计,

不要低估,也不可轻视,保持灵活。」



实例A网易云歌曲收藏功能和淘宝收藏功能对比

(收藏后选择歌单方便一步)




在网易云的歌曲收藏功能里,点击收藏需要再次选择你想放入的歌单才能收藏成功。相比于淘宝的点击收藏立马收藏成功,这样的做法明显是网易云多了一步,而个人观点分析这样做的是因为(网易云重度用户):


1.功能性来说:

歌单是早期网易云诞生的重要和特色功能


2.行为路径来说:

减少用户后期创建新歌单过程中 还要去重新收集歌曲,从而更容易定位快速创建自己的个人歌单

(歌单做分类 同时网易云歌单作为分享也占很大一部分)


总结来说:网易云是一个主打评论和歌单的音乐社区软件,先选择歌单多一步步骤,让用户后面听自己的歌单更为清晰的知道分类,也同时活跃于创建歌单的乐趣当中,让用户停留的时间越长,产品也就得到了一部份价值,从而增加了用户的粘性。这样就是“多一步”的特别之处。


实例B:爱彼迎的注册信息多步界面操作

(表单信息更便利一步)



爱彼迎在用户注册信息的时候,会把收集的资料分多次进行输入。

这样的设计解决了用户面对长篇表单填写的心理压力,同时告知余下的页面数,让用户心理存在预期考虑。


将复杂的表单分成若干步,并引导用户如何操作,并提示余下操作的步骤。一个这样的举动,不光是分段优化了表单的填写步骤的一小步,同时让新用户更轻松注册,提升了用户的注册转化率的一大步。


实例C:小红书淘宝等大部分app的隐藏退出功能
(隐藏退出更深一步)


目前近几年大部分应用的退出账号功能是做的比较隐藏(点击设置icon-最下方才能退出)
相比于早些年app在个人中心里最下方直接会出现退出登录
近年来隐藏二级或三级页面下的做法是在太普遍
而大概分析了如下App的的做法

(小红书)


小红书个人中心界面设置除去顶部个人信息展示

另外就是侧重笔记功能-收藏功能-赞过功能

因为这三个功能方便了用户能快速找到自己的收藏从而阅读或者自己发布,而设置功能仅用一个icon去代表,而整体布局就摒弃了传统的功能设置列表那样,更突出了产品功能侧重点,也迎合了产品的业务发展。


(淘宝)


淘宝的个人中心页面就十分大体量了 里面涵盖了诸多产品功能 一个很完备的生态系统 ,隐藏在二级的功能设置顺应了产品的向上的全面发展轨迹,设置功能(退出等)就属于一个超低频率的触发事件了。节约了界面的展示成本。

而存在较为直接展示退出账号的App吗?


答案肯定是有的~


(qq安全中心-Appstore)


此类应用首先功能比较单一,
就先拿qq安全中心来说,它是属于一个账户保护监管的应用,而为什么不把设置隐藏在更深的页面呢?
如图所示就大概看的出来,产品功能较为单一,再去添加一个设置功能二级入口就显得冗余了,且对于用户拥有多个账户 退出切换功能就比较重要了。


 Appstore也是如此 垂直于App的应用商店,在个人设置上功能较少,也是较为直观的放在底部。


存在的一些个人认为可调整的app

(印象笔记)



印象笔记的退出登录其实比较迷了 在个人中心界面放的犹为突出,而底部的现在同步功能我觉得在同类笔记中是较为重要。而这样本末倒置了,就是一个大的谜了。




--------------------------------------我是分割线------------------------------------




1.2 . 防错原则(Error prevention)

「比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择」


实例A:银行类(信用卡)app的重复验证功能

(增加双重验证一步)


拿招商银行推出的掌上生活App来说,在用户每次重新打开的同时都需要重新验证身份(各类平台存在 Face ID 手势密码 登录密码等),而你在付款或者交易的过程中,需要再次密码验证, 这样每次都多一步交互动作,其实都是为了更加安全的保障用户的个人财产,同时也突出了产品的安全性和可靠性。


那为啥QQ 微信每次不这样呢?(常用设备环境下)

微信qq虽然也有锁定功能,但考虑用户使用打开频率较高,所以只在支付层面上保护验证密码。
 

实例B:微信的侧滑删除功能对比淘宝侧滑删除宝贝功能

(增加确认删除一步)



微信聊天列表的滑动删除在一次点击后会继续显示“确认删除”按钮,其实也是二次保障让用户有一个心理预期,效果其实和大部分APP弹窗显示删除一样。


而淘宝收藏列表的商品侧滑删除点击就立马删除,由于没有提示“确认字样”,对于很少用该功能的用户来说,会带来一种不符合预期的想法。


当然淘宝和微信区分做法认为考虑的是 :

淘宝:让用户能够快速删除该商品,不需要造成不必要的二次确认,浪费时间。

微信:删除的是聊天记录,是不可逆的操作,聊天记录对用户价值比较大,而淘宝的商品是可以继续收藏回来,就比重来看的话,两个删除操作其实大有不同。



实例C:优酷等视频类App 4G网络下播放提示

(增加提示一步)



在大部分视频App中,当在无WIFI环境下的4g网络连接下,播放视频过程中会显示当前视频为流量播放单中,是否继续使用流量播放下去,这样一个小提示,避免了用户因为WiFi断开导致产生大量流量费用。



--------------------------------------我是分割线------------------------------------




1.3 .易取原则(Recognition rather than recall)

「尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。这也说了交互的一部分,比如填完表单,下一步应该生成表单,而不是下一步就是完成。」


实例A:淘宝人生账单

(增加表单全部展示一步)



在最近新出的淘宝人生账单中,会展示出自己消费的数据,

并在分享之前再次确认信息的完整度。这里为什么要需要最后展示一步呢?


而 同等逻辑下网易云音乐2018年度报告,

没在最后展示所有分析数据,我们是否质疑没做到很优秀呢?


(网易云音乐2018年度报告)


其实不然,首先网易云音乐的报告长度很长,放在最后面会导致长图分享,没有单页面展示效果好,也照顾到了大量数据长图表单分享的复杂性。


1.并且我们目前大部分年轻人分享某个页面的时候, 惯用的操作是立马截图,

而网易云音乐做到了每个页面都放置了当前的二维码 从而做到识别二维码快速分享,

也能让用户快速打开自己的年度报告。


2.心理层面深度分析下:部分数据的内容,其实用户不太想分享,如果网易云做了最后的长图分享,其实会让部分用户不愿意分享自己的某些不想让别人知道的私密歌曲或其他。造成多余的用户操作(裁切或者隐藏)给部分用户带来不便。



淘宝人生账单案例

展示完表单数据,下一步生成对应表单,让用户有意识性的能再次确认内容,从而分享转发,而不是盲目的完成,造成用户的上一页查看产生困扰。


网易云音乐

的做法,由于数据的复杂性和多样性,聪明的以现在的用户操作行为和心理研究等,每页嵌入二维码,做到了更发散思维的方法拓展。



更多一步实例:Youtobe视频开头广告

(增加5秒跳过广告一步)


youtobe的广告是业内运营的比较好的例子,他的好在于,在一段30秒的广告当中,让用户可以选择5秒后跳过此广告,但为什么要让用户不看完广告就可以跳过呢?这不就让广告没有价值了?


其实不然,youtobe也分析了用户的等待广告行为,在投放youtobe的30秒广告当中,5秒的广告,会让用户会更有耐心看完,因为时间短,用户愿意等待,而不是用户去上个洗手间,去冰箱拿个汽水之类的行为,用户会更加专注于5秒的广告当中,而广告投放商们,他们会更加把5秒的视频内容做的更加突出重点,短短5秒就呈现出该广告的优势所在,从而用户会激发点击欲望,从而达到商业价值。这里的产品增加跳过广告一步,其实蕴含的价值,推广远比完整30秒的广告更加优秀。



--------------------------------------我是分割线------------------------------------



总结:


以上的诸多“多一步”,其实是产品思维的多一步分析。

促使我们在设计界面和产品功能架构上,

更加了解各类App设计布局的深层次逻辑思考。


设计优化的不光是视觉,更是产品思维的层层剖析。
在参考的过程中,不要盲目的抄袭模仿布局架构,边做边思考。

从而形成自己对产品的理解。

转自:站酷-tronyoung


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

如何设计更好的表单

ui设计分享达人



如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


介绍表单设计里经常会犯的错误~

无论是注册流程,还是信息输入的界面,表单都是产品设计里最重要的组件之一。本文重点介绍了表单设计里常见的注意事项。不过这些只是通用的规则,实际应用中总有例外~



少于6个选项的情况,建议全部显示

把选项内容放在下拉框里,不仅隐藏了选项内容,而且需要两次点击。如果大于5个选项,建议用输入选择器,如果超过25个选项,建议加上搜索功能~



输入框长度可以暗示内容长度

输入内容的长度决定了输入框的长度。这种做法适合应用在一些固定长度信息的情况,比如银行卡号、电话号码、邮政编码等。



标签顶部对齐

相比左对齐,标签顶部对齐的表单用户完成率更高。移动设备屏幕大小有限,顶部对齐的效果也更好(标签文案长度不可控)。然而在大量数据输入时,还是可以考虑左对齐标签,因为浏览更,还能节省高度。



不要把占位符当做标签

用户在输入的时候就会看不到标签内容是什么了。详见Nielsen Norman团队的总结。

*也可以参考Google的做法,默认把占位符当作标签,输入时标签移动到输入框上方



将复选框/单选框上下排列

上下排列方便浏览阅读,横向排列选项内容会被选框控件隔开。



指出错误在哪

告诉用户具体哪里出错了,以及错误的原因。



等用户填完了再进行验证

不要在用户正在输入的时候就去验证,除非这能帮到他。例如在创建一个有字数限制的密码~



不要隐藏帮助信息

尽量默认显示帮助信息。如果信息太复杂,考虑在输入时放在输入框的旁边。



不要用*星号表示必填项,标出选填字段

用户不一定知道星号代表什么含义。还不如明确的标出哪些是选填字段。



标签和输入框成组

标签和对应的输入框形成一组,他们之间的间距要比组与组之间的间距小,这样用户不会困惑标签是属于上面还是下面。



按钮的文案描述具体意图

比如按钮上的文字建议写“注册”,而不是“提交”。



主次按钮有层次区分


关系近的内容成组

太长的表单让用户感到不知所措。有逻辑地分组能让用户更快地理解表单。

转自:站酷-大秘密mimi

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

如何通过竞品分析来解决问题

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


1.竞品分析的定义


从专业的角度来讲,竞品分析是通过系统的分析方法去全面了解市场上位于前列的竞争对手的产品,能够让设计师快速了解自家产品所处的位置,从而来针对性的改进自身产品的一个方法。简而言之,就是要站在巨人的肩膀上去思考,以竞品分析的形式去学习其他优秀的产品,从而解决自身产品所存在的问题。



2.为什么要去做竞品分析


做一件事情之前一定要思考做这件事的价值和意义,只有你明白其重要和必要性,你才会知道该怎样去做这件事情,而不是一提起竞品分析就找一大堆专业框架和术语然后去填内容,这样虽然产出了很多,但是关键性的内容点其实还是不清楚。


说直白点,你需要通过这篇竞品分析去解决你工作或者创作中遇到的什么问题,带着疑惑和目的去分析在我看来是更有效率的。因此特分为以下几种情况:



因此我们要学会根据自己的不同需求,去制定不同的竞品分析方案,让分析的内容更聚焦。作为UI设计师来讲,通过竞品分析为自己的设计方案提供科学的理论依据,为自己赢得话语权,能够更好地科学产出内容。



3. 如何寻找竞品:


竞品的选择非常重要,如果找到错误的竞品,那么你所分析的一切结论可能都引向了一个错误的方向。从而让自己的努力都白费。那么怎样才能找到合适的竞品呢?分为以下三类情况


A.核心服务与目标用户相同的产品(直接竞品)


这一点是广大设计师都能想到的范畴,也称为直接竞品。即提供的核心服务、市场目标方向、客户群体等与我们的产品基本一致,产品功能和用户需求相似度极高的产品 。往往是通过业务关键词就能直接搜索到的竞品,比如音乐类产品,那么直接在应用商店,或者通过专业网站(易观千帆等)搜索关键词“音乐”即可搜索出排行前列的竞品。



B.目标人群不同,但功能模块和服务接近的产品(间接竞品):


这类竞品可以找起来并不那么直接,可以通过对应功能去逆推拥有此功能的产品,并进行相关搜索。


如果想不到,可以通过“人人都是产品经理” “36氪“等关于产品资讯的网站进行查询,甚至可以通过百度指数来进行发散思维,看一下跟你关键功能相接近的都有哪些。比如你研究外卖产品,除去饿了么和美团等直接竞品,你还可以在分析用户下单和购买流程中,去分析淘宝和京东等购物产品,也能得到一定的帮助。



C.目标人群和服务都不同,但交互或者视觉有可以参考的产品(关联竞品):


这里所选择的产品,定位和领域可以都完全不同,但是你要从这款产品中得到启发,从而让你的产品能够拥有其他竞品不同的特点或者功能模块。有一个很典型也熟知的的案例,就是卫龙辣条的设计案例,在卫龙推出之前,可以说是没人会想到辣条会和高端扯上关系,但是卫龙就是借鉴与其领域完全不同的苹果设计去做,从而在包装上独树一帜,从而吸引人们注意取得成功。因此通过不同领域跨行业的产品有时候也可以找到不错的思维方向。



4.如何进行商业分析:


进行商业分析,这里只提及到三个基本选项:商业背景、产品盈利模式以及用户人群。通过这三个基本要素,你能对所研究的竞品有一个大概的了解。当然深入了解还需要其他平台(官网网站、36Kr等)来查阅更多的相关性资料,下列是对QQ音乐商业背景的简要分析。




5. 如何进行交互分析:


我们在做交互分析时,我们需要进行必要的两点分析:用户路径和交互维度。


用户路径:指用户从某个开始行为事件直到结束事件的行为路径,即用户在使用某个功能的完整流程称之为用户路径。我们需要去观察和体验在这一个完整路径中涉及到的页面、动效、视觉到底是怎样的。就拿登录页来说,我们看看排行前列的竞品是怎么做的。通过相应的体验和对比分析,我们就可以找出这其中符合我们产品性质的最优解,从而提高我们的登录注册效率。



交互维度:交互维度和用户路径有所区别。这一层需要弄清楚产品的核心路径,从而能够更好的解析产品各个层面的逻辑关系,这就需要我们以用户的角度去逐个体验,整体联系,随后记录下来。使用过程中我们也要去观察APP中的交互小细节,怎样分享的,怎样展示的,比如音乐软件进行截屏后和点击喜欢按钮后的反馈是怎样的。




6. 如何进行视觉设计:


在进行视觉分析时,有一点需要注意,如果你需要详细分析某一模块,请用手机尺寸截图后拿到设计软件中进行测量,不要光靠眼睛观察,很多时候的小细节我们只有在手动测量后才能感受到,比如控件的尺寸大小,间距的大小,以及颜色的取值,都需要精准测量后才能得出靠谱的结论。


怎样进行视觉分析呢,我比较推荐从一个app 视觉语言最基本的五个维度去分析,即“形色字构质”



最近以音乐APP进行了一次竞品分析,以QQ音乐APP来举例进行分析(当然竞品分析并不能只分析一个,而应该根据你需要的功能找多个竞品进行对比分析,才能看到更多的维度,这里只拿一个举例):




6.1 图形元素的分析


首先我们以形进行分析,形即图形元素,具体来讲即LOGO和图标。LOGO的更新在2018年10月以后已完成更新。新版的主要图标整理归纳如下:



可以看到整体的图标色调更加清新,造型设计更加圆润,未选中状态的线形图标则采用4px的描边,粗线形描边让整体界面风格显得更加稳重的同时对用户的干扰也较小。新版的图标界面让界面保持稳重的同时又富有活力。



6.2 色彩体系的分析


其次则是对色这一类别进行分析,颜色其实是对于品牌调性有很大的影响,比如一想起QQ音乐就知道主色是绿,一想起网易云音乐就知道主色是红,对用户的记忆点更深刻。通过截屏测量进行分析,得出整体的颜色如下(由于手机屏幕的色差原因,不可避免会有些许误差)


从局部来看,分析颜色最重要的一点就是能够弄清楚一个页面中哪些元素用的是同一种颜色,观察成熟的产品是怎样用颜色(和字重)去区分层级关系的。



可以看到,用主色和三种辅色即可区分界面的整个层级关系,由此思考我们在制作自己的界面时也避免用太多的颜色,造成界面太过花哨。(颜色的具体色值可能有些许误差,更重要的是看颜色层级关系)



6.3 字体体系的分析


接下来是字的分析,字即字体体系,可具体到字体和字号。设计中字体一般来讲是苹方,字号则根据设计师的定义来进行相应的规范。通过页面的测量分析,可以拿到其具体的字号大小层级分析。(以下定义基于750的设计尺寸)



对于单个界面的分析,个人觉得要带有思考的眼光去看待,比如在首页中字号其实分配过多,像“更多”这种按钮就不应该再分一个字号,字号太多整体就显得有一点点乱了。虽然大厂的设计能在一定程度上给予我们参考,但并不是说他的每一个设计都是正确的,我们要学会用审视的眼光去看待出现在身边的设计。



6.4 界面构成分析


界面构成即界面的元素大小以及他们的布局,例如有时候我们不知道一个标准的搜索框的长宽具体多少才是合适的,这就需要我们去分析其他成熟的商业产品,通过测量来知道具体的数值,从而督促自己进行正确的设计。这里选取了一个默认的首页进行分析。



将一个页面用右边的形式进行原型化,去掉干扰可以把结构看得更清楚。间距之类的也可以通过软件进行测量。可以看到QQ9.0版本的去线化设计,利用大间距来区分各个模块,去掉了其他的干扰元素,整体的界面模块看起来非常整洁轻盈以及富有呼吸感。统一的圆角化设计也让整体设计符合流行趋势,显得更活泼。



6.5 质感与风格分析


关于界面的质感则是不同于扁平化的一个设计,即有的页面在你看来细节会更丰富,层级会更深。界面质感通过渐变,叠加,透明度等不同方式来呈现,比如在QQ音乐中的会员界面卡片,则体现了微质感:



上方的会员卡片就加入了渐变和图案叠加的方式来为卡片增加质感,让整个界面显得更精致。当然,叠加的图案都是与内容相关的,不能为了叠加而叠加。包括下方的权益图标,也采用了渐变的方式来让整个图标显得更精致和有质感。我们再处理质感的时候也可以用这种方式来进行。


以上通过“形色字构质”来分析是属于单个分析,相当于去拆解一个成熟产品中的每一个细节点,从而去学习和吸收。我们还要学会进行对比分析。把单独某一个功能模块拎出来,通过不同类型的对比从而归纳出这一类的设计方法和样式,进而总结相应规律。


比如某一天你需要设计一个歌单列表,你此时就需要分析所有TOP排行的歌单列表,看看分别都有什么,从而总结归纳出结构来,再进行分类。



通过分析提炼,形成以下结论并进行相应的概念风格展示设计:



这样,我们最后制作出来的方案才能涵盖比较全的解决方案,从而能够更好的助力设计产出。上图的产出可能稍显简陋,但只是做一个简单的示例,真正的产出应该更加有细节和落地,也要结合自己的工作需求做相应调整。



7.关注竞品的版本迭代和用户评价:



关注版本更迭,阅读竞品版本更新的详细说明,你可以从中得出版解决了什么问题,提升了哪些体验,添加了哪些功能,融合了什么流行的设计趋势。产品迭代就是团队通过用户需求对某个产品不断完善的一个过程。迭代对于一个产品来说是至关重要的,一个产品如果不想被对手超越,就必须不断的对版本进行更新迭代。


除了关注具体的内容,你还可以观察版本更新的提示信息,例如夸克浏览器在每次更新时总会用富有趣味的文案来打动你,从而让你更加情愿去更新,提升新版的使用率。


用户评价则更不用说,产品的最终服务对象就是用户,用户评价的重要性自然不言而言。不过我们要客观辩证地去看待用户的评价,吸收好的建议,屏蔽无脑的意见,从而能够正确地迭代版本。用户评价的查看可以使用App Store或者用户评价网站(https://appbot.co/)去查询。



总结


以上的篇幅较长,看下来可能会有一些累,那么此篇文章提及到的点在这里回顾一次:


1.竞品分析的定义-站在巨人的肩膀上去学习;

2.为什么做-基于自己的目的去进行对应的竞品分析,分析的最终目的是解决自己在设计过程中遇到的问题;

3.竞品分析分为三个层面:视觉分析、交互分析以及商业分析;

4.怎样进行商业分析(商业背景、盈利模式、用户人群);

5.怎样进行交互分析 (用户路径、核心路径、交互细节);

6.怎样进行视觉分析 (从“形色字构质”五个维度去分析以及如何对比分析应用);

7.竞品的迭代和用户评价的重要性。


自己有一个小习惯,看完每一篇文章,总会告诉自己一定要在脑海里回顾一遍,思考一下这一篇文章到底有什么观点是自己之前没有想到的,哪怕只有一点是没触及到的知识盲区,那么这篇文章之于自己就是有意义的。所以希望大家看完能有些许收获那便是最好的了。

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

产品设计之「取消按钮」的使用详解 | 细节分析

ui设计分享达人



如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

通过对「取消按钮」的分析,指导各位正确的进行对于「按钮」的设计。


按钮,无论是在 Web 还是 App 上都被广泛地使用,而很少有设计师会注意到按钮当中的细节,导致在设计过程中出现一些低级的错误,使得用户在完成任务的过程中产生阻碍,无法顺利达成目的。


在许多优秀的产品中,关于按钮的设计已经有了一套相应的规范去执行。作为设计师,应该总结这些规范,并产出一套适用于自家产品的设计规则。这也是我写「按钮规范」系列文章的目的。


今天主要先与各位聊聊「取消按钮」的设计思路。


关于「取消」,大多数人对其理解还停留在 PC 端,认为「取消」的目的就是让用户停止操作上的流程。但时至今日,「取消按钮」的设计已经有许多解法与思路,如果不仔细研究与分析,可能会忽略一些用户行为上的细节。


所以我们从下面三个大点来聊聊「取消按钮」的设计:

  1. 按钮中的「召唤行为」(理清按钮设计的概念)

  2. 其背后的控制权(关于按钮的权重信息)

  3. 「取消按钮」的正确解法(重点)



按钮中的「召唤行为」


通常,我们在产品中会为了达成某种指标,需要在界面上引导用户去完成我们希望其完成的操作。且这类操作是可以达成某种目的的,我们把这类操作称为「召唤行为」,即从元素的角度引导用户完成任务。


这类「召唤行为」最常出现的,是在按钮设计的过程中。


用户如何将元素理解为按钮?就是通过对形状和颜色的控制,使该元素看起来像一个按钮。



它唯一的作用就是让用户点击,并且是主动让用户点击

我们经常在各类设计中见到这样的按钮设计,或许还有更多样式,如:



它们的目的一致,都是召唤用户进行点击,至于类型的选择一般根据功能界面的上下文情况进行判断。


其重要程度也是以此顺序排列:凸起 > 扁平 > 边框 > 文本。


这类设计的结果就是:无需让用户思考要点哪里,而是直接判断下一步是否进行。帮助用户简化一个思考点。


注:因为判断是否进行的操作还取决于功能本身以及文案的提示,与我们今天要聊的不是一回事。所以我们跳过这块,直接聊「召唤行为」与「取消按钮」的关系。


这段内容各位只要记住:按钮的行进与回退,基本遵循「召唤行为」的思路来设计。


这个概念知道了,我们就可以对后面的内容继续进行拆解了。



背后的控制权


接下来我们从多个角度来挖一下「取消按钮」的设计,分析其不同地位。


a. 安全性后退


「取消」在多数情况下,意为安全性地后退,并将界面恢复到原有的内容上,不对界面与功能本身造成破坏,防止对系统进行不必要地更改的「安全措施」。


所以正常来说,「取消按钮」不是「召唤行为」。以至于通常在设计上会被弱化,以表示该按钮在功能的流程中,不是主要的,且是提供给用户作为回退余地的操作。


如:



在这张图里,「登录」是「召唤行为」,所以突出显示。根据风格定义,用了扁平按钮。而取消在这个场景里属于「安全性后退」的操作,于是将其弱化。


这是多数产品采用的设计方式。


比如美团的这个页面:



产品希望用户登录,就会强化「登录」行为的按钮,弱化「回退」行为的按钮。


同样,我们在微信朋友圈的设计里也能见到这样的设计:



我们总是希望用户持续操作下去,但也要给用户提供回退的行为,所以在这些设计中,「取消按钮」会被弱化,「行进按钮」会被强化,因为「取消按钮」在这里不是产品人员期望的「召唤行为」。


这是一直以来的设计共识,但如今也发生了些许变化。「取消按钮」也开始具备「召唤行为」的属性。


b. 强化「取消按钮」


当我们不希望用户退出某个界面,或停止某个流程时,往往会选择将「取消按钮」强化。


如:



或:



通过对字体的加粗,以暗示用户不要轻易退出。在这个流程里,「取消按钮」具备了「召唤行为」属性。


也有产品通过改变「取消按钮」的文案,让其具备「召唤行为」的属性,使得用户在此过程中轻易不要退出该流程:



这里的「继续选座」就是「取消」,因为这里的「取消」成了「召唤行为」,所以通过改变文案的方式,确保用户留下来继续进行流程中的任务。


但是不可取的是,这里的「返回」反而给了用户一种需要思考的压力。返回?是留在这里,还是退出去?思考几秒后,反应过来,是退出去。这样的文案与只有在看到「继续选座」后进行对比,才能反应过来具体是什么意思,除非是用户具备操作习惯,知道「右边」是「行进」操作,才能很快理解。(当然还有个问题,我们在第三各模块来说明)


但是多数用户还是得思考一下,所以要改,最好两者文案都能改了,否则思考的「停顿」会让用户产生厌恶感。


且在一些产品界面里,为了避免用户在流程中终止行为,甚至会转移「取消」与「行进」两者的位置,如:



之前截图了某个产品的界面,写文这天发现已经改回来,这里就没放了。


各位谨记,最好不要这样进行设计,因为用户在 App 的操作上已经习惯左边取消,右边行进,调换位置虽然能暂时解决用户的退出行为,但容易产生误操作,与用户的期望不同,导致在产品体验上会被用户排斥。


所以到这里,先给一个结论,即在 App 的设计上,行进操作在右,回退操作在左,召唤属性根据场景对按钮做突出处理。


但是「取消按钮」真的应该具备召唤属性么?不着急,我们第三模块再细聊。下面我们先聊聊 Web 与 App 的之间的差异。


c. Web 与 App 的位置差异


我们现在见到越来越多的 Web 端产品,也开始遵循 App 产品的设计,把「取消按钮」放在左边,「召唤行为」按钮放在右边。


但在早期,Web 的「取消按钮」基本是放在右边,原因是鼠标的移动路径是根据眼动规则来,我们的视线会首先与文案聚焦到「召唤行为」的按钮上,也就是左边,这时候鼠标轻而易举地随之而来。


而手指行为的操作,会以右为前进导向,且右手手势因为便捷性,也会以右为确认操作。否则单手持机,且行进路径长的话,用户想进行确认操作会相对比较吃力。



这就是 Web 与 App 在按钮位置上的主要区别。


那会有同学问到说 Web 的「取消」到底是放在左边还是右边?这里我说点自己的想法。


如果根据眼动规则与鼠标的操作模式来说,Web 「取消按钮」当然是放在右边更为合适。但如今人们已经习惯了移动产品的「右行进,左取消」属性,且在界面上的视觉终点一般是在右边,能引导用户进行召唤行为。


但这不具备指导性原则,如果要拆开说,里面还有很多说法。


比如 windows 和 macOS 的设计规范里「取消按钮」的位置完全是相反的。win 的取消在右,macOS 的取消在左。



两套体系的按钮位置相互矛盾。这件事本身也说明,只要你在你的 Web 产品里规范好自己的设计体系,就没有对错之分。不要一会儿这个「取消」在左边,一会儿那个「取消」又在右边,给用户造成认知障碍即可。


但是!我更推崇 macOS 的设计规范。原因在于成熟度与一致性。


主观因素:众所周知,苹果是更擅长做设计的公司,体验过 Mac 的朋友应该能理解我说的这句话。一般来说,我只听过从 Win 切换到 Mac 的,没有说从 Mac 切换到 Win 的,除了少部分因为工作需求需要同步使用的。


客观因素:移动产品的普及,已经有相当成熟的设计体系支持行进按钮右侧化设计,统一 Web 或 PC 产品只会让用户的操作行为更方便。


这就是我本小节想聊的,关于 Web 与 App 按钮设计的差异。



「取消按钮」的正确解法


我相信,只要是平时稍微有认真观察的同学,都能知道我上述聊的内容。我个人也不认为这些内容具备任何需要总结的价值。但是如果不写出来,就没办法说明我接下来要聊的内容,也是我这篇文章的重点部分。


通过上述内容,我以不同类型的按钮案例来解释「取消按钮」的控制权。各位可以看出,即使是不同类型的「取消按钮」,在权重上的道理也都是一样的。


但我上面举的所有产品功能的例子,都不是最佳设计方案,包括微信。


那如何设计才是最佳方式呢?取消按钮真的具备召唤行为?


a. 界面层与弹框层


其实严谨点来说,界面层的「取消按钮」与弹框层的「取消按钮」的意义是不同的。


虽然都是安全性后退,但是前者多了一层含义:放弃属性。


还是微信朋友圈的界面:



这里的「取消按钮」有两个状态,一是用户刚点进来,无任何操作,点击取消,解散该页面;二是进来之后,附带操作行为,这时候点击取消,不仅仅是解散当前页面,还包括「放弃当前编辑的状态」。


所以会弹出第二层弹窗:



这时候无论点击「保留」还是「不保留」都是取消,退出当前编辑页面,不对系统产生变更行为,但都属于放弃了当前操作。

无非就是微信通过加粗「保留」来告诉用户,这里的召唤行为是它而已。


所以这层「取消」的含义,不仅仅是取消,还多了一步是否把你放弃的内容保留下来的逻辑。


因此在这层含义上,「取消按钮」也需要特殊处理。


如果说微信这里的「取消按钮」在设计上没有突出其特殊性,那 Twitter 同样的例子,就比微信高明很多:



同样是发布行为,Twitter 在「取消按钮」上选用了品牌色。因为在其编辑状态下点击取消,会出现与微信同样的情况:




而 Twitter 的高明之处不仅仅在其对于「取消按钮」的样式处理,还在于其对是否「保留」做了明确的设计区分:微信的保留等于 Twitter 的保存草稿,不保留等于删除。而在通用型设计规范里,删除内容在样式上应该区别于发布以及取消。


更甚者是,其弹出的这个弹框中,还保留了真正意义上的「取消」,即解散行为。在 Twitter 的这个设计上,两个取消虽然都叫取消,但是通过颜色进行区分,来表示它们之间在逻辑上的差异,这才是我说的高明之处 —— 对每个按钮的处理都恰到好处。


类似的还有微博,但是微博对于「取消按钮」的类型差异没有做出区分,原因在于它为了弱化界面层的取消,与弹框层的取消样式保持了一致。



虽然没什么太大问题,但从严格的逻辑上来说,这两者取消是存在歧义的。只是用户已经习惯且理解了,所以没要造成使用的负担。


微信的弹框虽然避免了这层歧义,但在操作上还是不够直观,我每次发微信朋友圈,点取消弹出「保留」与「不保留」我都要停顿一下谨慎地进行选择,生怕自己点错。


当然,这里面还有关于颜色的说法。


这时候再对比 Twitter 的界面就能看出设计师之间的差距了。


b. 弹框层「取消」颜色的差异


上面提到的许多例子中,还存在一个类似的问题:它们大多选用 iOS 自带的弹框直接做为操作对象。


我始终觉得在 iOS 提供的弹框中,两个操作的按钮颜色保持一致是不对的。


粗细有时候很难被直观感受,而颜色可以在第一时间被感知。


比如前面提到的这个案例:



理想情况下,即使用户知道右边是行进,左边是取消,但弹出这个弹框的时候,不免还是需要再次阅读一遍进行确认。


但如果改个颜色,好像就更好理解(当然文案也是问题,但优先级弱于颜色),毕竟弹框也是设计的一部分:



需要注意的是,用户既然已经选择取消,就尽量明确的告知用户,不要为了留存而留存,以至于模糊化该弹窗的选择结果。

所以召唤行为,并不是强迫用户去做,而是遵循用户的「旨意」去提供选择。这里的「返回」才是真正的召唤行为,而「取消」并不具备召唤属性。硬生生的给「取消」附上召唤属性,只会让用户在操作时摸不着头脑。


包括下图,我常常因为在使用 App 时,弹出这样的弹框,而不能在第一时间进行正确的点击,选择退出当前的 App。



这样例子还有很多。


但是我觉得做得好的,应该是这样的:



或:



这就是刻板印象造成的结果。我们应该学会适当地使用控件,并根据自己的产品对其进行优化。而不是一味跟风。


综上所述:界面层的取消,为了表示其作用性的不同,且界面元素众多,突出颜色是没问题的;但弹框层的取消与确认在颜色上没做区分,直接用不太明显的粗细效果让用户聚焦于这两个内容的选择上,其实是不友好的设计。


如果对 iOS 设计规范有足够的了解的同学就能知道:它们在弹框控件上给出的两个选择都不是真正意义上的召唤行为按钮,只是常规内容,且更适用于产品开发,而不是设计指导。


如果你仔细观察 macOS 的设计,就能发现他们为具备召唤行为的按钮位置与颜色都做了特殊处理,并不是简单的同色系,或用粗细表示。如图:



虽然用 macOS 来反驳 iOS 似乎不太合理,但我只是想说明在设计结果上,我们应该有自己的思考。


就这个问题,我在 Twitter 上咨询了前 Apple,后创办了 UXM 的产品设计师 Anthony。原因是,他曾经也就「取消按钮」的颜色提出过一些个人看法。


在我说了这些内容之后,他跟我说的第一句话是:

Hi Dai — While Apple is very good at design, they are not perfect.(Apple 非常擅长设计,但它们并不完美。) 

接着他继续说道:你这套理论非常棒,所以你完全可以按它去给自己的产品构建一套设计规范,并不一定要遵循 Apple。


借着这个机会,我还跟他聊了许多其他内容。而这件事本身再一次验证了我的想法:越牛逼的人越谦虚,且平易近人。


哦,不是,跑题了,应该是:不存在完美的设计规范,设计师在成长过程中并不一定要循规蹈矩,受到规则的限制,认为设计就该如此。而是学会独立思考,突破屏障,去挖掘更深层次的内容。


看完这篇文章,再去翻一翻 Google Material Design Guidelines,就会有一种「哇哦!原来如此!」的感触了。



小结


所以我这篇文章的内容结论是:

  1. 位置固定,左回退,右行进;

  2. 颜色区分,左浅色,右深色;

  3. 召唤行为不是用户想做的事,而是我们应该要让用户做的事,但不是强迫,所以正常情况下,「取消按钮」通常不具备召唤属性。


可能有人会觉得,这么一个小问题,不至于用这么长一篇文章来说明,不过人么,就是存在这样那样的区别。我认为需要就可以了。


本来这篇文章还有一段关于「手势按钮尺寸」的内容,不过到目前为止,文章内容太长了,所以我暂时去掉了,会在之后的文章里分享给大家。


当然,到此为止,我聊的内容基本适用于通用场景,且适用于大部分的产品设计,但在一些特殊场景下的按钮位置、颜色,也会有不同设计方式,这就要根据具体问题来具体分析。


我这里只是把「取消按钮」的设计差异、细节提供给大家,以便帮助各位在工作中有更深入的思考,而不是想当然的说就是放左边或右边,或者就应该是什么颜色等等。包括对待其他内容也一样。

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


日历

链接

个人资料

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

存档