首页

10分钟教你如何选择筛选组件

雪涛

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

生活需要筛选,App页面也一样。本文通过案例分析,从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。


筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时,通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏,本文暂不分析。


组件包括筛选按钮与筛选器,筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。



01


位于 Tab 栏的筛选组件


组件样式

筛选按钮位置:一般位于Tab栏最右侧视觉薄弱区域。


筛选器形式:点击按钮,筛选器以抽屉形式从Tab栏底部向下展开筛选条件,或以浮层形式从屏幕最右侧向左滑出筛选条件。


样式分析

当界面使用Tab栏时,已为内容做了第一层筛选,多数情况下已满足用户对内容的筛选需求。


当筛选类别较多且复杂时,就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低,屏幕右侧为视觉薄弱区域,这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。



案例一

Image title

案例来源于美团App


此页是对美食品类的选择,这里的筛选组件在Tab中是最常见的样式。对于用户而言,选择商家店铺优先考虑地域、美食类别、价格及综合评价,而用餐人数与餐厅服务等只是辅助选择条件。


筛选器使用了抽屉形式,如要选择此样式,建议在筛选条件不多且不超过一屏的场景使用。



案例二

Image title

案例来源于淘宝App


当用户从首页全局搜索后,出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后,由于筛选条件较多,很难一页展示完,用户往往需要上下滑动屏幕查看全部,因此使用右侧浮层展开的形式较适合。



案例三

Image title

案例来源于哔哩哔哩App


全局搜索后,Tab栏默认展开综合tab内容,用户对排序、时长、分区的筛选需求较高,因此直接把筛选类别放在了二级Tab栏,相比通过点击筛选按钮再展开类别的交互方式更简单直白。


点击筛选类别后,筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少(不超过4项),筛选项数量不多的场景。



02


底部按钮型筛选组件


组件样式

筛选按钮位置:以按钮或浮层形式固定在界面底部,便于用户操作。


筛选器形式:点击按钮,筛选器以抽屉形式从按钮底部向上展开筛选条件,或以界面浮层形式从底部向上展开筛选条件。


样式分析

使用底部筛选按钮的界面,内容区类别相对单一,通过筛选组件就能满足筛选需求,并对筛选的需求较大。而底部按钮作为常见的按钮形式,用户点击更方便,因此承载筛选组件较合适。


若使用此样式,点击筛选按钮后,筛选器的出现优先考虑从底部向上出现的抽屉式浮层。



案例一

Image title

案例来源于旅游类App Expedia


输入旅游目的地后进入此列表页,用户目的性明确,就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果,方便用户触达。并且筛选条件较多,无法一页展示完,使用了界面浮层的形式。


这里还有2个细节:


1、由于筛选类别较多,手动清除单个筛选条件太过繁琐,于是筛选器底部增加了清除按钮,操作更简便。但底部按钮一般为“确定”操作,“清除”放在底部样式上没有做误操作提示,可能会增加误操作机率。


2、筛选后,筛选按钮处会显示已选择的筛选类别数量,给用户带来良好的使用反馈。



案例二

Image title

案例来源于dribbble


当前页为地点搜索。需要先进行筛选操作,内容区再出现结果。筛选按钮位于底部浮层,筛选类别代替筛选按钮平铺展现,筛选器使用抽屉式从浮层底部向上展开。


此样式一般适合筛选类别较少,并且每个类别的筛选项不多的场景。优点是减少操作步骤,提高用户操作效率。并且可以学习一些体验细节:在筛选器中选择一个选项后,在其筛选类别处同步修改为该选项;筛选项与筛选类别选中状态一致,增加关联度。



03


浮层按钮型筛选组件


组件样式

筛选按钮位置:以浮层按钮的形式位于界面右下方,占用空间较少。

筛选器形式:点击按钮,筛选器以浮层形式为主,或在筛选按钮下方展开筛选条件。


样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间,比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时,它的位置也便于用户点击。

设计时按钮用色需要区别于内容区,内容形式尽量精简直观。若使用案例3中的扇形筛选器,则要求筛选类别为1-2类,筛选项数量少切文案精简。



案例一

Image title

案例来源于dribbble


筛选按钮位于界面右下方紧贴于右侧屏边,浮于被筛选内容上层,滑动屏幕时消失。点击筛选按钮后,从屏幕右侧展开筛选浮层,原筛选按钮变为确认按钮。


此按钮形式最大限度的让出空间留给内容区,且右下角为用户关注薄弱区,这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过,适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高,相对符合用户认知。体验细节上可学习的点还有按钮功能的改变,使得体验更便捷。



案例二

Image title案例来源于dribbble


筛选按钮位于界面右下方但没有贴屏边,筛选器以底部分层形式从底部向上展开。这里的筛选条件不多,因此使用了底部分层形式。



案例三

Image title

案例来源于dribbble


筛选按钮形式与上一案例相似,不同的是筛选按钮处直接显示筛选条件,可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。


点击按钮后,从按钮下层展开扇形筛选器,滑动选择筛选条件。此种筛选器样式使用场景较局限,多为选择时长或数量,并且单选居多。因此筛选器不需要“确定按钮”,只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。



04


举一反三


接下来我们拿个案例练练手。


下图界面中内容区为概览与各监控数据图表,需要设计一个筛选组件对内容区进行不同时段的筛选。


Image title


在设计之前需要确定几个需求:筛选组件的使用频次、筛选类别的数量、筛选项的数量,单复选关系、筛选条件之间的优先级。


进一步明确需求

筛选类别只有时间段1项,筛选数量不固定,为多项,单选关系。当用户进入此页,根据用户使用需求判断“1小时”基本满足用户查看数据的需求,默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求,可判断用户使用筛选组件的频次不高。


Image title


方案解析

方案一,Tab栏形式

Tab是对整页的筛选,多为不同维度,而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近,但用户对筛选组件的需求并不高,放在此位置占用了概览区空间。


方案二,底部按钮形式

底部按钮位于用户的习惯操作区,放这里使用层级略高,并且会使内容区的整体高度减少。


方案三,浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域,可以使用户浏览时不受按钮影响;但按钮拥有强对比色,在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现,可满足筛选项数量较多的场景。



05


小结


以上内容是我对常见筛选组件的思考,每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息,决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。



本文作者:TXD技术体验团队-喻杰(阿里巴巴视觉设计师)

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


在iPhone的UI设计背后,是一场关于注意力的战争 2018/09/06in 设计文章 & 教程评论区

雪涛

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

iPhone 诞生之后,世界发生的变化是翻天覆地的。以电容触摸屏为交互中心的智能手机以难以想象的速度,成为了人类生活中不可分割的部分,人与人之间的连接因此而更加紧密,同时也更加疏远。从某种意义上来说,iPhone 的创造是开创性的,也是不可替代的。而我们也不约而同地发现,以iPhone 为标竿而创造的智能手机和数字化的交互界面,让我们处于一个时刻都会被分心的境地。

令人上瘾的数字内容,让我们一刻都离不开智能手机,从某种意义上,它彻底改变了我们的生活,工作,甚至思考的方式。现如今,越来越多的人开始尝试戒除令人上瘾的智能手机,寻找更加健康自由的人机关系。根据今天的调研,过度使用智能手机,确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初,直到10年后的现在,在数字产品上瘾和用户注意力的控制这件事情上,开发团队本身就没有放松过。这次,Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司,并且很快就出任了公司的人机交互界面组的设计总监,在2006年前后,他也是作为 iPhone 项目核心的6人团的一员,加入到项目当中来。

待在苹果的20多年时间里,他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计,直到他开始追求创造属于自己的公司和事业,才正式从苹果离职。也正是因为这样的契机,才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去,以及他留给苹果的那些遗产。

和许多设计师一样,他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息,他现在依然还不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型设计阶段,他就已经意识到了,这款产品最大的缺陷之一,就是它注定会分散甚至垄断用户的注意力。而与此同时,苹果也有意识的没有给予用户,对于iPhone 完全的控制权。下面,是访谈中能够对外公布的几个重要的内容摘录:

设计「请勿打扰」的功能

「我认为,从某种意义上来说,真正洞悉设计的设计师,大都能够预见到手机对于注意力的影响。在使用手机的时候,我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候,当我刚刚开始制作 iPhone 的原型之时,管束还不是那么多,我们当中有几个人还有幸把原型机带回家,这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系,iPhone 几乎隔一会儿就会亮一下,显示有新消息,叮叮咚咚响个不停,于是我意识到,和我们朝夕相处的手机需要一个管控功能。所以,在很早的阶段,我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事,苹果的内部产生了分歧

「其实,在苹果公司内部,想要大家都理解分心是一个影响用户生活的问题,还挺难的。乔布斯倒是很能理解的,但是公司内其他的同事,对于用户对于手机的控制权多少,其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权,不过这个事情对产品的营销和市场运作是有影响的。所以,当时内部也有声音说,如果真的给用户太多的控制权,那么这款手机就不酷了。」

「其实直到今天,iPhone 当中绝大多数的功能都是可控的,但是其中很多功能隐藏的比较深,彻底的掌控它们是比较困难的,如果你真得想让那些整天都在轰炸你的信息彻底远离,你需要花费很长的时间来摸索,用独特的方式逐个调整或者关闭才行。因此,对于那些熟练使用iPhone 的重度用户而言,确实是可以如臂使指地掌控这台设备,但是对于更换壁纸都不太会的用户,想要搞清楚iPhone ,让它如意随心,真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用,然后你不停地会收到提醒和通知,是否要授权使用相机,是否要授权获取你的位置,是否允许它给你发送通知,每个都要做决定。稍后,你可能会发现,Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了,总会有信息大半夜地推送到你的眼前,让你无法安生地休息。实际上,借助请勿打扰的功能,你可以一早上再查看它们。这套系统足够智能,能够判断出哪些应用之前就已经获得了许可,哪些仍然在后台获取数据,哪些通知实际上你并不关心。所以,这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系,手机会询问用户,你真的需要这些通知吗?或者是,你真的需要Facebook 使用你的电话簿的信息吗(因为你已经很久没有登录了)?等等。正确地设计了这套系统之后,提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情?

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量,它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨,而媒体和用户都发文吐槽,在呼声和压力之下,它们最终在iOS 12 中呈现了出来。这个局面之下,苹果没有选择的余地,必须对于舆论有回应。这对于每个人都是好事,因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品?当然算不上,因为现在的iOS系统是为了应对舆论和负面新闻而设计的,设计的意图并不对。如果是苹果主动作出这样的决策,才算得上是好产品。」

「对于苹果这种体量的大公司而言,产品设计其实复杂性非常的高。真的是这样。作为设计师,你需要服务于你的用户,你还得和公司的利益保持一致,同时,还需要对得起自己的底线和道德。服务于一个大型的企业,确实非常的难做抉择。对于用户而言,可以很轻松的直接怼苹果,说它没有做对的事情。但是身为其中的设计师,要平衡各方面的需求也压力,经常会进退维谷。有些用户因为iPhone 的一些功能,受到了负面的影响,有些人受到的影响比另一部分人更多。但是身为设计师,一个受到各方面制衡的设计师,即使是作出了改变,在很多时候也远远不够。至少在我看来,现在的改变还不够大。」

管理数字化的生活,就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起,我就用着黑色的壁纸。我不会将一大堆的东西塞进手机,减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要,或者说我推荐这么做,对于人和手机之间的关系,每个人都不一样,处理方式也都很个人。对于如何处理自己和手机之间的关系,有人让我提一些建议,我觉得没有必要,因为我的办法并不适合所有人。一天喝多少咖啡,抽几包烟,每个人的情况都不一样,没法一概而论。不过,心理健康是一件大事,你和你的智能设备之间,应该保持着平等的关系。这至少是一个大的设计趋势,是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样,你无法忽视认知压力的存在,认知设计也势在必行。」

界面设计的未来,以及不可避免的问题

「我观察到,界面设计在很自然地进化和发展着,从按钮到旋钮,从点击到手势操作,从语音交互到情感化设计,均是如此。无论是考虑到用户的情感诉求,还是进入语音交互的领域,都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题,点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互,都一定都会遭遇不自然的状况和问题,就这么简单。身为设计师,需要足够的预见性,才能真正领先于用户,预测到可能会遭遇的问题。」

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

 

比起设计和开发流程的选择,还有几个事情更重要

雪涛



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


在 Sarah 给 Jimmy 讲完了她在设计上的一些原则之后,Jimmy 就准备开始重新设计那个客户等着要的新的仪表盘界面了。与此同时,他所在的公司 Shmuckle 准备设置一个新的产品经理的职位,并且将会在公司内部选择合适的人员来任职。Jimmy 对此非常有兴趣,实际上,在当前的架构下, Jimmy 是一个非常合适的候选人。但是要担任这个职位,他必须证明自己能够胜任这个职位,证明自己知道如何管理项目和团队。

对于他正在做的这个控制面板的设计项目,他也正在挑选合适的产出流程。用敏捷(Agile)开发流程更好,还是应该用瀑布模型(Waterfall Model)?又或者是循环式开发流程?他觉得跟开发部的同事聊一聊会是更好的选择。

当他找到工程部的 Boris 的时候,他正在楼道里刷推特摸鱼。「用什么流程?那还用问,当然是敏捷啦。这个最好,过程清晰简单,现在没有什么办法比敏捷更好处理各种数字产品的设计和开发啦。」接着,Boris 去隔壁会议室拖出一个白板,并且说道:「给我一个小时,我告诉你关于敏捷开发的一切。接着还能捎带计划一下每周的工作内容,这样你就能完全明白要干啥了。哦,差点忘了,还有几个播客和视频可以帮你更加深入地了解敏捷。」

敏捷开发以用户的需求进化为核心,采用迭代、循序渐进的方法进行软件开发。在敏捷开发中,软件项目在构建初期被切分成多个子项目,各个子项目的成果都经过测试,具备可视、可集成和可运行使用的特征。换言之,就是把一个大项目分为多个相互联系,但也可独立运行的小项目,并分别完成,在此过程中软件一直处于可使用状态。

絮絮叨叨的 Boris 终于找到一个倾诉的对象,Jimmy 一时之间感到颇为尴尬,不知道如何回应。好在这个时候,开发部另外一个部门的 Floris 从门口路过,Jimmy 赶紧喊住他「Floris 我到处在找你,你怎么在这儿啊」说着就拉住 Floris 的手,窜进了另外一个办公室,远离了热情的 Boris。

「干啥?你俩在聊啥?」

「Boris在跟我说敏捷开发……」

「啥玩意儿?他跟你讲敏捷开发?快拉倒吧,他们部门里面唯一敏捷的就手头上的 Macbook。我们这边都用瀑布模型来作为产品开发的流程,因为它是线性的,有着更简单的结构,操作起来也简单,很少会发生混乱。」说着,Floris 从办公室的书架上摸出一堆文档压到 Jimmy 手上。「你要的东西都在里面,祝你好运。如果你需要任何帮助,请在公共的平台上跟我约时间,我们可以开个小会解决一下问题~」说着 Floris 回到自己的桌子边,开始继续干活儿。

瀑布模型(Waterfall Model) 是一个项目开发架构,开发过程是通过设计一系列阶段顺序展开的,从系统需求分析开始直到产品发布和维护,每个阶段都会产生循环反馈,因此,如果有信息未被覆盖或者发现了问题,那么最好「返回」上一个阶段并进行适当的修改,项目开发进程从一个阶段「流动」到下一个阶段,这也是瀑布模型名称的由来。包括软件工程开发、企业项目开发、产品生产以及市场销售等构造瀑布模型。

拿着一堆资料,回到自己的工位前,整个人都要陷入到怠惰的情绪里面,瘫坐在电脑椅上纠结了起来。信息太多了,不知道从何做起。在网上一搜也是成堆的内容,根本不知道从何入手。懵逼了。

Jimmy 决定采用最终的备用方案——万事不决问 Sarah。在 Jimmy 的工作经验当中,老领导 Sarah 总能给他靠谱的建议和可行的方案。

出问题的时候,先后退一步

Sarah 办公室的门从来都是敞开的。当 Jimmy 来找她的时候,Sarah 正在阅读一些有意思的东西。她的办公室里面有很多的书和绿植,漂亮的色彩让 Sarah 的整个工作区域仿佛能够唤起人的创造力和想象力,桌上打开的书页散发着油墨的味道,闻起来让人很有安全感,像家里的书房。「Hey,Sarah,我又有问题来麻烦你啦,你有空么?」

「我的门永远敞开着。这次有啥问题,看看我能怎么帮到你。」Sarah 听到声音就知道是谁,一边放下手头的文档,一边抬头笑着看到略显局促的 Jimmy 。说话间,Jimmy 非常熟悉地跑到办公桌另外一边的椅子上瘫坐下来,Sarah 笑着摇头,拿起咖啡壶给 Jimmy 倒上一杯咖啡。

回到自己椅子上的 Sarah 没有看自己的电脑,而是像心理咨询师一样,盯着 JImmy ,进入了等他倾诉的状态。而 Jimmy 此刻也惊讶于 Sarah 如此洒脱迅速地放下手头的工作,并专注地帮助自己,于是也不再放飞地瘫坐着,直起腰身,开始认真地陈述自己的问题:

「实际上,你之前跟我说的设计原则,让我获益匪浅。我按照你告诉我的方法,找到了症结,解决了问题。但是我现在不仅仅是要设计这个仪表盘界面,我需要开发和实现。有人说敏捷开发比较好,有人说瀑布模型很给力,这些开发方式到底有啥差别,优势具体在哪我并没有搞清楚。有人说我需要的是敏捷开发里面 Scrum,还有人说,它实际上是 shmum,也有人称之为 Bshmum,结果还有朋友告诉我说 Google 的 Design Sprint 才能帮我解决问题。我感觉脑子快要炸了。所以……Sarah 你明白么,我需要帮助了。 」

听到 Jimmy 说到后面,Sarah 就明白了他碰到什么问题了。「Jimmy,没事儿,我们总会在某些时候碰到问题,别人的指导总会派上用场。」

「我可以理解,如果在网上搜索这些相关的信息,会有太多杂乱的内容让你感到信息过载。幸运的是,如果你理解这些东西背后的基本原理,就可以相对轻松地梳理清楚所有的内容了。」

「早知道我应该一开始就来找 Sarah 问问。」Jimmy 不由得对自己抱怨了一句。说着,他在摸起咖啡杯旁边的纸和笔,准备做笔记,就像上次那样。Sarah 看穿了他的小心思,笑道:「不用记。」说着,喝了一口咖啡,然后继续道:「先想想看,我们为什么会有敏捷、瀑布模型、冲刺模型,为什么要用循环工作法呢?」

「为了?」Jimmy 下意识挠头。

「是的,但也不完全是这样。总的来说,我们需要一个过程来呈现产品,因为人类的思维是没有办法直接掌控混乱的事物。此外,一个清晰的、可遵循可记录的流程,能够确保你在完成后,确保产品的整个开发过程是可交付的,细节也是可回溯的。这就是为什么,我们需要这些流程。」

「最首要的问题,不是选择哪个流程,而是要了解这些流程为什么而存在,以及我们可能会碰到什么样的问题。无论你选择哪一个。」Sarah 看了一眼窗外,继续说道:「你有问过公司的其他的同事,他们都遵循什么样的流程么?」Sarah 问道。

「问过了,绝大多数都采用的敏捷和瀑布模型。」Jimmy 说到。

承诺是关键

「首先要告诉你的是,两种方法都很棒。但是绝大多数的公司只会在两种方法当中选择一种。因此,当人们采用敏捷或者瀑布的时候,我们更多看到的是他们所做的设计或者开发的小冲刺。以往,我们会看到团队会在3个月或者半年这样的时间尺度当中,一直保持着高强度冲刺的状态的。在旁观者眼中,会看到一个清晰的故事,或者说整个产品逐渐设计或者开发出来的景象。如今流行的做法是将冲刺划分为很多不同的阶段,这也是为什么如今被称为小冲刺。不过本质上,做的事情和内容并没有改变。」

「另外,很多人会使用敏捷的方法来做项目,过程中会不断的迭代修改。他们希望通过这样的方法来获得更好的结果。实际上,很多团队会持续不断地、长期地坚持这么做,几个月甚至一年半载都没有发布任何东西。如果你在这种情况下,会问自己,到底出了什么问题?我会告诉你,原因在于没有清晰的承诺,以及太多的事情让人分心。大家都不会承诺在一段时间内交付一些东西,使用各种借口不按时、按预算来完成项目。」

「如果这个时间只是一两周,一个月,好吧,或者说一年,这个周期并不重要。重要的是,你不需要拥有一个清晰的过程,并且承诺提供一些东西。当然,这是很有挑战性的。这意味着,在这个情况下,你必须作出一些选择,来完成任务。」Sarah 总结道。

阻碍前进的东西

「到底使用哪种敏捷的方法,采取多少个步骤,或者使用经典的瀑布模型,借助谷歌的设计冲刺,都可以,都没有问题。大家总会认为,采用哪种过程是关键,但是现实是,这个过程始终都只是达成目的一个手段而已。」

「真正的问题在于,人的天性是懒惰的,没有按照承诺交付东西。总是忍不住的拖延,膨胀的自我,办公室政治,爱来事儿的甲方,喜欢变卦的客户,它们还都会像拦路虎一样进入产品和设计的流程。无休止的辩论,不断改变的策略,不断膨胀来回拉锯的会议,最后你只能呆滞地坐在办公室当中,想想自己的生活到底出了什么问题。最后,我想说一下多年前,我自己所经历的一个项目。」Sarah 觉得她应该从具体案例上来说说这个事儿了。

「所以,首先你应该清楚,在一个特定的时间段内,交付一些东西出来。你要保证你的团队不会跳票和拖延,也不会让预算超出计划。你将要在约束中工作。约束其实是一种隐藏的优点,也许并不是每个人都明白。你需要完全保持专注,除了你的和参评之外,不会被其他的任何东西分心。就你的情况而言,你需要专注于这个仪表盘界面的设计和实现。」Sarah 说道。

「团队的规模很重要。不过那是后话,后面咱们再仔细聊。」

「假设,你有一个三个人组成的团队,他们共同负责开发并发布你的产品的下一个功能。具体到你的头上,就是为你开发并实现这个重设计的仪表盘。你需要确保公司的其他人不会前来干涉他们的工作,不会来和他们讨论这个项目以外的任何事情。」

「这一点极为重要。他们必须保持专注。减少被打扰的机率——或者说不被打扰是最好的事情,他们能够专注而清晰的思考问题。除了手头的任务之外,他们不会需要去做其他的任何事情,不会被其他的工作内容所分心。对于如何做手头的工作,什么时候做,具体做什么,他们应当有足够的控制权和自主权。最后,请记住这一点:

团队必须足够小。如果太大,沟通问题一定会成为主要的障碍。每增加一个人,想让大家信息和想法保持一致的成本,就会成倍增加。如果你拥有太多的自由,太多的资源以及大量的人员,你不仅会得到过度的设计,超出常规的工作,需要超出计划的预算,以及一个没有重点,不够出彩的产品。」

问题总是会出现的

「如果你像我说的一样,后退一步来看问题,就会意识到,流程背后所存在的问题,并不是流程本身的优劣,也不关乎公司、人员、国家、文化或者其他。这是关于纪律和约束。不仅是团队本身需要纪律,负责人要有纪律感,业务也需要有纪律约束。如同我们所知道的,团队也好,产品也好,公司也好,它都是自上而下的,顶部的纪律、约束和眼界,决定了底部的纪律、调性和产出。」

「现在,你可能会问自己,如果你的项目出现了问题,会怎么办?那么首先,对于你想要达成的目标,需要一个清晰的愿景或者想法。除非你的愿景和目标足够清晰,否则你是没有办法来提供承诺的。在项目开始之前,这个愿景/目标必须有足够清晰的定义,是否能够达成,难度高低,是否具备可执行性,否则在过程中一定会有所偏离。在这里,给你几个小贴士,务必要记住:

不要自欺欺人,你需要提前计划好整个项目,避免出错。很多事情都会出错,所以你需要有目标有愿景,你需要向着目标前进,并且随时做好解决问题、纠偏的准备。一旦你被其他的因素影响,就很容易增加开发时间、增加预算、招募更多的人手。不要相信所谓的规划和蓝图,那什么都不是。问题是一定会出现的,出错了,就专注于最终目标,抓紧手头的项目,别无其他。」

Sarah 说道这里,Jimmy 已经开始有所思考了。「所以,在我告诉你这些事情以后,对于你你手头的这个仪表盘的项目,你打算下一步要怎么做?」

需要始终牢记的事情

Jimmy 的脑中仍然在反思 Sarah 刚刚说过的话,下意识回复道:「要有远见,目标清晰,为即将出现的错误与问题做好准备,组建一个足够独立的小团队,和公司其他的团队和部门隔离开来,这样可以在不被打断的情况下聚焦于当前的任务,最重要的是,要在承诺的日期前交付承诺的产品。但是我不知道团队要有多小,我应该带多少人?」Jimmy 问道。

「如果我说我知道你要带几个,那么我一定是在骗你。不过,通常而言,你这种规模不算太大的产品,我建议控制在3人以内。你是这个项目的主管设计师,也是产品经理,在设计上已经没有大的问题,你还需要两个开发人员,一个负责前端,一个负责后端,这样足矣。」Sarah 回答道。

「那么我应该花费多少人在这个上面呢?」Jimmy 又问道。

「这个是你的项目,时间应该由你来衡量。不过,你需要一开始就清楚你手头有多少资源,你有多少时间来投入这个项目,有多少可供调用的预算,以及管理团队的耐心达到了什么程度。而且,这个事情最关键的并不是时间,而是你的承诺,以及到达约定时间之后要交付的东西。这不仅是对上层的责任,对于你和你的项目而言,也是一个可供奋斗的目标和清晰的边界。你的项目看起来并不算小,这个人员工作量之下,可能需要花费一个月的时间来进行开发。但是请记住,在一个月的时间内,你必须提交出一个可用的产品出来。从我的角度上来看,我是不允许增加预算和时间的。约束对双方其实都是有利的。」Sarah 说道。

「那么我还是想问最开始的那个问题,到底应该使用敏捷还是瀑布模型?」Jimmy 还是忍不住问道。

「我不知道。」Sarah 坦言道:「你的项目应该由你来决定。对我而言,选择哪个流程其实并不算最重要的问题,相反我刚刚说道的,流程之前的种种问题才是最重要的,关于承诺,团队的构建和管理,这些因素产生的影响更为深远。如果你清楚的知道最终要产出的产品,流程就仅仅只是手段了。」Sarah 笑着总结道。说话间,她伸手去拿之前没看完的文档。「谢谢,Sarah,」Jimmy 笑道:「你好像又救了我一次。」说着 Jimmy 走出了Sarah 的办公室。

「我的门一直都敞开着。」Sarah 低声说道,走远了 Jimmy 大概并没有听到这句低语。

结语

在设计和开发数字产品的时候,每个团队的负责人可以选择自己习惯的或者自己青睐的流程和方法。使用什么样的方法无关紧要,在未来10年,我们可能还会碰到更多的新方法,新的策略。而唯一不变的,始终还是最基本的问题,团队,承诺和交付。

我注意到,有人把产品所使用的敏捷和瀑布模型这类流程称为「项目的上帝」。但是实际上,不管哪种流程,依然会陷入无休止的扯皮会议和无意义的辩论,出现了问题之后,开始修改时间表。「我们无法按时完成功能A,因此我们无法开发模块B,开发人员又需要参与下一个项目,因此我们资源是不够用的,所以呢,这个项目不得不停一个月。」这情况很常见,也是典型的反面案例。

我相信,产品团队应该高度专注于当前的产品,和其他产品的需求、各种无关的事务隔离开来。「Hey,Angela,我们的大客户要求这个今天上线,能不能把你的项目放一边,帮我们把这个产品弄上线?」这也是一个反面案例。拒绝。


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

 



布局怎么做到不单调而有层次?来看高手的9个技巧

雪涛

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

简单布局怎么做到不单调而有层次?看看设计师 Czékmány Zoltán 的9个技巧。

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

全面易懂!写给新手的信息架构设计指南

雪涛


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

很多产品设计师,在画原型或者设计 UI 的时候痴迷于工具的使用,拿到需求文档之后急于动手画图,忽略了信息架构设计对于产品的作用。


信息架构作为一个产品的骨架,是产品非常重要的一部分,它决定了一个产品

的布局和未来的发展方向以及用户对一个产品的最初印象和整体体验。毫不夸张的说,好的产品信息架构是产品成功的一半。

那么到底什么是产品的信息架构呢?该如何设计产品的信息架构?如何评判一个产品信息架构的好坏?我们接着往下看:

一、信息架构的概念

让我们来看一个例子:

一个饭店需要有哪些设施,如果你是饭店的老板如何合理的排布这些设施,可以让客户感觉很舒服的用餐,这个过程就是一个信息架构的过程。他可以让客户对你的饭店产生好感,从而下次用餐的时候还会想到来你这里吃饭。

在排布饭店设施的过程中我们要遵循一些规范,比如用户的习惯或者施工规范等,正是因为需要遵循这些规范,所以我们需要一个信息架构来体现这些。

比较官方的信息架构解释是这样的:信息架构设计是对信息进行结构、组织以及归类的设计,好让使用者与用户容易使用与理解的一项艺术与科学。

简单来说,信息架构设计就是让用户可以 容易地理解你的产品是怎样的。让他们在使用你产品的时候可以更顺利更自然。就像一进入饭店就会有一种感觉,门口是等餐的地方,进去就应该吃饭,如果找洗手间一定不会往门口走,而会往深处走。这就是信息架构的好处:他让用户使用同类产品时更容易上手和理解,让产品更容易被接受。

二、为何需要信息架构设计

那对于线上产品来说为什么需要合理的信息架构呢?大家来看下边3组 app 的 tab栏截图。你能仅仅从 tab栏就看出这款 app 是什么类型的 app,如何使用吗?

很明显的,第一个是一款购物类 app,第二个是一款图片社交类的 app,第三个是微信的 tab,虽然首页名称是微信,但是我相信如果把名称换成「聊天」,你还是能认出这是微信的 tab栏。

从底部标签栏就可以大致看出产品是用来干嘛的,这就是信息架构的作用。一个合理的信息架构可以让产品非常容易被用户理解,可以让用户第一眼对产品有一个简单的认知,指导自己可以用产品做什么事,指导产品提供什么服务。

再看一组反例:

这三组 tab栏就让人很困惑了,看了半天你也许根本不知道这几款 app 是做什么用的,以及如何使用。如果你让用户很困惑,他会分分钟抛弃你的 app。

所以信息架构的核心目标是为用户提供更好的体验,获得更高的留存率。

一款信息架构良好的产品必然遵循以下两个标准:

  • 让用户打开 app 的第一秒就知道这是一款什么 app,怎么用;
  • 用户想要使用某一功能时,能够第一时间找到。

我们通过这两个标准来印证下上边3个正面案例的信息架构:

相信你能很快速的识别出这款软件的用途和用法,这就给提升留存提供了基础。

那么如果信息架构像架构一个饭店一样简单,那么信息架构为何需要设计?

因为你的实际产品功能可能有这么多:

毕竟我们不是支付宝,没办法把功能像豆腐块一样堆叠起来,我们需要一些科学的设计方法。

三、如何设计信息架构

合理的信息架构设计需要考虑5个步骤:

下面我来分步讲解一下。

1. 了解用户,场景,习惯

首先你的产品是给到用户用,你当然要最大限度的了解你的用户,我们先来看下一个概念:「心智模型」。

心智模型是经由经验及学习,脑海中对某些事物发展的过程,所写下的剧本。人类在经历或学习某些事件之后,会对事物的发展及变化,归纳出一些结论,然后像是写剧本一样,把这些经验浓缩成一本一本的剧本,等到重复或类似的事情再度发生,我们便不自觉的应用这些先前写好的剧本,来预测事物的发展变化。心智模型是你对事物运行发展的预测。再说得清楚一点,你「希望」事物将如何发展,并不是心智模型,但你「认为」事物将如何发展,就是你的心智模型了。

假设你从没见过 iPad,而我刚递给你一台并告诉你可以用它来看书。在你打开 iPad 使用它之前,你头脑里会有一个在 iPad 上如何阅读的模型。你会假想书在 iPad 屏幕上是怎样的,你可以做什么事情,比如翻页或使用书签,以及这些事情的大致做法。即使你以前从没有使用过 iPad,你也有一个用 iPad 看书的「心智模型」。你头脑里的心智模型的样式和运作方式取决于很多因素。

用户往往带着以往使用 APP 的一些习惯来使用产品;线下做同一件事的习惯、生活习惯、心智模型等。要考虑哪些是可以创新的,哪些是用户习惯,要在不妨碍用户习惯的情况下作出更能让用户接受的创新。

你要考虑清楚4个问题:

用户通常用你的产品做什么?

用户用你的产品来做什么?用来看新闻还是用来聊天?一定要考虑清楚用户的核心流程。从核心流程中提取信息架构的基础形式。

用户用这类产品最关心什么?

用新闻app 时咨询的真实性实效性,购物类app 精准搜索和售后功能,就是你的用户关注点在哪里,这是一个很好的突破口。

用户有哪些思维定式?

和用户年龄身份相关的属性,产品体验符合相应用户的思维模式,心智模型,用户就会比较容易接受。

用户用什么类似的产品?

类似的产品也会带来一些用户习惯,迎合这些习惯也会让用户快速上手接受产品。

了解了你的用户场景和使用习惯之后你会知道如何做出符合用户心智的,容易被接受的产品,你不需要担心做的产品没有差异性或者没有竞争力,我们可以在核心流程之外做出创新点,让用户觉得你的产品又好用又有些不一样。

2. 了解业务

这里的业务包括与产品接触的内部及外部的人提出的需求,比如公司的运营,市场,销售,BD,公司的外部合作伙伴等。

这些人的需求我们也要收集,比如运营人员想更方便的管理注册用户,销售想更多的添加广告位,市场推广人员要求能统计不同渠道带来产品的下载量,注册数,活跃数,合作伙伴需要进行账号,内容互通等,总之只要与业务有关的人的意见,尽可能的在产品设计前多收集,即使做不了,也告诉他们原因,要不然产品上线后就等着被他们吐槽吧。

3. 调研竞品的信息架构

在做一款 app 时,我们面临了和无数竞品争抢用户的局面,这时候分析竞品就非常必要,我们需要在知己知彼的前提下,做好核心流程功能,再思考如何在差异功能上做好突破。

首先我们需要把竞品功能梳理成思维导图:

其实思维导图就是信息架构比较基础的形式了,但是光有思维导图没用,我们需要对思维导图进行分析。

我以前做过的一款人脉 app 为例,当初对比了领英、赤兔和脉脉,分析了这4款 app 的思维导图后得出的共性和差异点:

共性就是要符合用户使用习惯的地方,如果你调研的3-5个产品都这么做了,很可能这里是产生用户习惯的地方,是我们需要去遵循的,这是获得用户好感度的基础。

分析产品时你一定也会得出一些产品差异的地方,而这些差异就是你的产品竞争点,也是别人用你的 app 不用其他 app 的理由。比如人脉软件都会有社交相关的功能,但是脉脉会比较注重职场招聘、直播等互联网职场人比较关心的点,这样对应的用户群体就比较会吃你这套,会提升用户的粘性。

相信你在梳理了竞品的信息架构,总结了共性和差异点之后对产品的信息架构已经有一个比较清晰的认知了,在做自己产品信息架构的时候也会更胸有成竹。但是最后还有一件事我们可以做,就是对我们的要做的产品功能做卡片分类。

4. 卡片分类

卡片分类法是我们工作中常用到的一种方法,它可以在用户侧再一次印证和检测我们的产品信息架构。

卡片分类法就是让用户对功能卡片进行分类,组织,并给相关功能的集合重新定义名称的一种自下而上的整理方法。

说直白点就是准备一堆卡片,在这些卡片上写上你所需要包含的功能名称,然后给到用户侧,让用户进行分类,让用户进行组织,来了解用户到底觉得这些功能应该怎么合并怎么归类的一种方法。它可以帮助你站在用户角度去了解用户是怎么认定这些功能的,也可以在卡片分类法的过程中更加了解用户是怎么想的。

卡片分类法大概的步骤和注意点是这样的:

卡片分类法最终会产出这样的一个树形图:

5. 产出信息架构

其实到这一步信息架构大概的雏形已经有了,你可以用 axure 或者类似 mindnode 的软件把信息架构梳理出来。

接下来你要对信息架构进行重要性分级,这样在产品开发的前期可以帮助梳理产品研发的优先级,集中精力解决用户的最大痛点。在产出页面时也可以更好的把控页面元素的大小层级,位置关系等。

最后你需要注意层和度的平衡:层一般不超过5层,超过操作困难。度过多会让用户认知成本增加,容易找不到想找的内容。这里的度指的是同一页面展示的信息量。


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


3个步骤,让你把握设计切入点

雪涛

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

如何从众多的设计点中找到一个清晰的设计主线呢?只需从3个方面切入。

小明的设计故事:身为设计师的小明,刚刚遇到下发的设计需求,看了半天需求,无从下手。于是疯狂寻找竞品去借鉴,去素材网站寻找素材拼凑。

如果在设计工作中遇到与小明相同的情况:没有设计头绪,大脑一片空白,画着不一定能过审的草稿时,请继续阅读下面的文章,希望大家能从作者的设计总结中有所启发。

目录:

  • 从业务目标切入
  • 从用户行为切入
  • 从设计方法上切入

什么是设计点?

设计点是设计师通过设计手段介入设计任务的一个节点,比如:设计目标 、设计风格 、用户行为 、用户情绪 、信息表达等都是设计的切入点,设计点能够影响设计的风格走向和设计师的创作思路。

那如何从众多的设计点中找到一个清晰的设计主线呢?只需从3个方面切入。

一、从业务目标来切入:晒讲义案例

下图是阿里巴巴UED 的设计理论,同程序员提倡的「不造重复的轮子」一样,设计理论也没有必要去反复总结类似的。目前阿里的这个设计理论,很好的支持了包含大型项目到中型项目的各个环节,易于理解,且和我们的工作认知贴近,是一个很好的入门方法。

我们通过定义业务目标和聚焦设计目标,来最终实现设计的产出。

下图是平台营销活动的设计5个要义,其核心也是业务目标。

通过几个的设计方法的展示,我们可以看出,处于上游业务目标的重要性。

只有业务目标和设计目标一致的时候,我们的设计工作才有意义。当我们评判我们的设计结果时,除了设计的数据指标外,能快速判断设计方案比迭代之前更优的指标就是是否符合业务目标,是否更贴近用户的诉求。

1. 切入模型

根据工具模型我们从业务目标出发,去定义设计目标从而得出设计方向。

2. 明确业务诉求

3. 得出业务目标

用分享讲义的策略给用户带来学习交流机会和学习成就感,达到拉新和活跃用户目的。

4. 视觉推导

5. 案例

二、从用户行为切入

视觉设计师,尤其是运营设计师一定要具有交互思维,作为全链路设计目标的我们,掌握交互思维,能更好的理解产品文档和规避更多的设计错误,从而准确引导用户操作路径。

方法:了解页面中的功能交互流程,梳理用户操作行为路径,可以对行为步骤中的信息内容进行归类分组提供依据。

切入模型:

三、从设计方法上切入

常见的方法有:情感化、原子化、组件化、游戏化等等。

方法:分解设计需求,归纳设计模块,运用已知的设计类型进行视觉化设计。

1. 提取仪式感设计点-晒成绩项目

仪式感的作用:通过用户在体验过程中由产品功能实现—交互操作—体验心理变化建立,形成对价值观的建立,是给用户带来更高层次的享受。

从四个层面理解仪式感:权威感、尊重存在感、期待感、荣誉感的意义。通过分解设计内容来发现机会点,插入仪式感设计方法。

视觉推导:

案例:

2. 提取情感化设计点

情感化设计3要素:

案例:

3. 提取游戏化设计点

将游戏机制运用于非游戏场景。比如:要想鼓励用户多参与交互,你可以在 APP 加入「挑战」这类的游戏元素,用户可以参与挑战,通过连续抽奖,并获得相应奖赏,从而达到预期目的。

案例:

寻找设计点就是拆解与分析的过程。

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

如何快速制作一款有个人风格的字体?来看阿里设计师的方法!

雪涛

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

专注于做好一件小事,哪怕是做不好也用心去做,小到搭建一个精美的网格系统,做好一个字体的拐角……先看一下我的往期设计案例。

如何从无到有设计一款字体

对于很多刚接触字体设计的同学经常会遇到一种情况那就是想法高大上,结果很悲伤,为什么会造成这样的结果?归根结底是对字体设计本身了解还不够细致就照葫芦画瓢直接上,为了避免这种尴尬的结果,我们应该在开始着手做字体之前要做好各项准备工作,不断去浏览优秀的字体设计从中寻找设计的感觉,确定感觉后建立网格系统,开始逐步设计字体。我在做字体设计的时候会把握几个步骤「建网格」——「选字体」——「拆字体」——「绘笔画」——「绑骨架」——「粗与细」——「取与舍」——「磨细节」——「去感受」。

下面我们就以大家最常见的矩阵字体为例来给大家分享如何制作字体。

1. 建网格

建立网格系统,万丈高楼平地起,要做一款扎实的字体离不开网格系统的规范。

2. 拆字体

以「燃」为例——选取一个默认字体,按照字体结构对笔画进行拆分。

3. 绘笔画

将拆分出的笔画用横线和竖线在网格系统里进行笔画重绘,此时不要做细节,撇、捺和点根据自身走向和结构特点也归属为横竖线。

4. 绑骨架

拆分绘制的字体笔画就是字体的骨骼,笔画间的连接处可以理解成是人体的关节,关节的意义在于保证字体稳固的同时又灵活多变,字体的笔画可以根据视觉需要围绕关节在一定范围内做活动,也可调整长短比例。

5. 粗与细

笔画的粗细与硬度由你想要的字体气质来决定,细笔画与曲笔画柔美气质,粗笔画与直笔画沉稳大气,虽说设计是一种感觉,但是这种感觉对于初学者来说很难把控,所以跟大家共享一下常用的几种笔画的粗细,在1000PX*1000PX画板里采用6px,10px和20px为基础笔画粗细,根据想要的业务气质选取即可。

6. 解与构

常见的字体结构有「上下结构」「上中下结构」「左右结构」「左中右结构」「半包围结构」和「全包围结构」。其中「上下结构」中着重强调占比较小的那部分笔画,进而达到字体本身的平衡,例如「感」字着重设计心字;「上中下结构」中一般会在不影响识别性的前提下去掉中间部分横行笔画,进而达到字体本身的平衡,例如「享」字着重设计口字;左中右结构中在不影响识别性的前提下会简化左边部分笔画,进而达到字体本身的平衡,例如「燃」字着重设计火字。

7. 取与舍

笔画变粗后整个字体笔画间的空间比例会受到一定影响,因此为了字体的美观度和透气性我们会对字体结构进行一些取舍和整合。

8. 磨细节

为了让字体看起来更加舒适,我们将字体的拐角做圆,做圆角的同时也要根据网格系统来调整圆的度数。

9. 去感受

打磨整体字体,继续刻画细节。

注意:在一组字里,每个单字的结构都存在差异,适当调整字体内部的比例,形成感官上舒适的笔势,对保持视觉上大小一致很重要。汉字字体类型繁多,但是如果我们用几何法则来划分字体类型其实大致可以归纳为三种:方形,圆形和三角形,从面积上来看方形和圆形的面积最大,三角形次之,所以我们为了保持字重大小的一致性需要调整他们之间的大小比例,做到大小均匀,笔画一致,结构严谨和间隙适中。

△ 图源:ElethomHunter

为了拉出字体的气质,一般会把字体做的稍微偏瘦长一些。

字体设计的手段是多种多样的,每个设计师都有自己擅长的切入点,最后的结果是自己想要的就好。上述的分享希望能给字体设计初学者一点帮助,也欢迎各位同行大神交流切磋。

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

如何让界面任务流程更清晰 ?向导式设计了解下

雪涛

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

向导式设计属于交互设计的常识,包括步骤条设计,引导标签等。本文从向导式设计的作用、使用场景、设计类型、需要注意的问题等,给你带来全面的基础科普。

一、向导式设计是什么?

软件界面设计中的「向导式界面」这个术语源自英语中的「Wizard」一词。意思为「男巫、奇才」的意思;延伸意为「向导」。向导,顾名思义,就是能带领或指引别人到达目的地的人。在实际使用中,这种交互方式的确像一个向导一样,一步步地引领用户向前,把复杂的任务进行拆解并有步骤地完成。

向导式设计也是流程设计的一种方式,这种方式通常目的性明确。在很多商业领域使用非常广泛,比如购物,酒店预订,银行业务等等,尤其适合新用户第一次体验产品时使用,让用户对产品使用和任务快速上手,节约时间,提升效率。

二、向导式设计的主要作用

1. 引导新手操作

让新用户在最短的时间内了解产品/任务,明白如何快速上手使用。

2. 纵观信息全局

让用户操作时对整体流程可控,心里有底,可以提前预估操作/完成时间。

3. 简化操作任务

对复杂任务进行拆解,提升用户操作的效率,同时也降低出错率。

4. 较少操作决策

固定任务操作路径,节约用户思考&做操作决策时间,快速完成任务。

三、向导式设计的使用场景

一般情况下,标准向导步骤条的使用场景为:2-5 步比较合适。< 2 步,> 10步,使用是不合适的。因为 < 2 步没必要;> 10 步太夸张,会吓到用户,本能认为你的产品使用过于繁琐,拒绝尝试和使用。

四、向导式设计的类型

  • 手风琴向导
  • 标准向导
  • 横向标准向导
  • 纵向标准向导
  • 弹框向导
  • Tab 栏向导
  • 标签向导

五、向导设计类型案例场景分析

1. 手风琴向导

手风琴向导式设计类型,一般适用于 2B 类后台业务数据较多,任务指向性相对明确,流程基本固定。例如用户帮助文档以及 Q&A 的场景; PC 端页面的注册引导;电商网站的购物支付等流程。

手风琴向导,除了可满足任务引导,步骤拆解,直观展示等作用;更主要的是能对大量的数据信息进行收纳整理,凸显信息层级的清晰度,并在收纳信息的同时节约页面空间,让页面更有节奏和呼吸感。

2. 标准向导 – 横向向导

横向标准向导也可以称为横向步骤条,这样表述大家比较容易理解。此类向导式设计是大家最常见的,也是最常规的一种横向向导的设计,主要作用是对复杂的任务进行拆解,按照固定顺序明确步骤,让用户对即将要操作的任务时间和内容有一个可控的心理预期。一般用户可以一目了然总览共有几步,目前每个步骤的状态(例如已完成/进行中/未开始),和自己当前的操作位置。

目前很多行业内的组件库对横向步骤条的 UI 设计基本都采用以下表现形式(图片来源 阿里巴巴 TXD-AISC 组件库),只是在细节上有稍许的差异。

具体差异主要表现在状态色彩的使用和上下图文的布局中。例如阿里-蚂蚁金服的 Ant Design 横向步骤条的设计图文布局为左图右文,这样设计的好处是,如果流程步骤相对较少时,文字也可作横向指向的一部分,避免页面太过空旷。同时 Ant Design 对步骤条的使用场景做了更多细分,除了简单的步骤条,还有迷你版和带图标的步骤条。

除了上面标准的组件库中常有的步骤条样式,还有以下的常用样式,例如电商类购物和支付的场景,除了对已完成的状态进行确认显示,色块箭头的设计,向导指引性更强。

类似上一个案例的 UI 美化升级版,其实功能原理都是相通的。

除了上面相对比较简单场景的步骤条,其实在 2B 业务中还有相对比较复杂的步骤条的设计,具体对应的是复杂的业务场景,例如覆盖多产品线参与,多角色审批,包含父子步骤审批的业务场景,简单常规的标准向导式设计是不能够满足业务场景的,需要对简化版的横向向导继续深入拓展和优化。

上面两种普通常见的横向向导式步骤条,业务场景相对更偏向 2B 中后台,风格相对保守和严谨。其实网上还有很多设计感和趣味性较强的步骤条设计,UI 风格创意十足,但原理都是相通的,具体 UI 样式详解就不再赘述。可参考作者的设计板。整体资料 UI 风格如下:

3. 标准向导 – 纵向向导

纵向标准向导也可称为纵向步骤条向导,主要使用场景为内容数据较多,需要分页/板块展现的场景,B端业务使用的场景较多;纵向向导设计陈列在左侧的目的也为了能对大量数据进行快速筛选和定位,同时此类数据之间无需进行对比查看,如下图:

4. 弹出框向导

弹出框向导设计主要使用的场景为注册页/登录页/轻量任务操作页,都在弹出框内,步骤较少,能够快速完成。如下图:

5. Tab 栏向导

Tab 栏向导其实是Tab栏+步骤条元素,组建成的一个新的横向向导模式,它的主要使用场景相对来说比较灵活,可以用在登录和注册页等轻量页面场景中,也可用在有固定任务流程的详情页面中,不过一般 PC 端的详情页会采用单独的 Tab 和步骤条展示,为让信息层级更清晰明确。

6. 标签向导

标签性向导设计主要使用在移动端居多,较少标明固定的操作顺序,但是基本的操作路径有一定的秩序在,主要使用的场景是对特定事物进行快速引导定位和查找,在众多商品类目中,快速找到自己需要的。例如浏览器的搜索和电商平台的商品分类检索,还有外卖类和旅行类对食物以及景点的查找中,都常常会用到标签向导:

六、向导设计中需要注意的问题

任务流程本身并不复杂的时候,尽量不要使用,避免弄巧成拙,画蛇添足;

每一步骤都需定义清楚,明确用户当前所在的进度节点,清晰展现此刻具体步骤及状态;

颜色不要乱用,避免产生寓意分歧和过度设计,一般情况下「已完成」采用蓝色/绿色都可以,但是需标注「已完成」 icon,「进行中」为蓝色高亮,「未开始」置灰;不过也可根据品牌色做出对应调整,避免采用太多颜色,让用户感觉眼花缭乱,不知所措;

及时对状态进行追踪&反馈,避免用户不知道自己操作是否生效,混淆认知;

任何向导设计中最好是提供随时撤销的选项,让误操作有可逆场景,给任何误操作提供返回和修改的机会。

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

比尔晴还烦人!用户最讨厌的三种UI设计方式

雪涛

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


阅读之前,温馨提示下,文中提到的 UI设计方式不一定有对错,如果使用得当,它们都有很大的可能性。

一、弹窗

也许你会知道这种感觉,当你打开一个新的网页,阅读到一半时,突然被一个巨大的浮层打断,要求填写电子邮箱。大多数人第一反应是关闭弹窗或关闭整个网页。

这么多网站都会使用这种方式,其用意显而易见。然而,这种方式对用户产生了非常负面的影响——中断了用户正在做的事(对用户来说重要的事)并将注意力集中在另一件事情上(对网站来说重要的事)。在你试图要求获取用户信息之前,最好等用户完成当前的事情(例如,阅读并熟悉内容)。让他们有机会选择是否做某件事情,而不是强迫他们去做。

二、无限滚动

无限滚动是指用户可以通过无限地向下滚动浏览页面大量内容。当您向下滚动页面时,它可以一直刷出新的内容。虽然听起来很好,但这种方式并不适用于所有网站,也不是 APP 的通用解决方案。

△ 图片来源:Geo Law

这种方式的缺点也是它的优势——它是没有终点的。用户访问到网页的某一个位置,他们无法记录当前浏览位置以便于稍后回到同一位置。当用户离开了网站,他们将失去之前访问的所有进度,不得不再次向下滚动页面返回到同一位置。这种方式无法确定用户的滚动位置,不仅会对用户造成烦扰或混淆,而且还会使整体用户体验变差。

2012年,Etsy 花了很多时间实现电商网站的无限滚动界面,但是却发现新界面的体验不如翻页。虽然购买数量没有什么变化,但用户参与度却下降了(人们有目的地使用搜索的次数下降)。

正如 Dmitry Fadeyev 指出:

人们会想回到搜索结果列表中查看刚才看到的内容,并与他们在列表中发现的其他内容进行比较。无限滚动不仅打破了这种对比,也使列表上下移动变得困难,尤其是当你下次回到页面,发现自己又回到了顶部,需要再次向下滚动列表并等待内容加载。在这种情况下,无限滚动界面就比翻页慢多了。

设计师在设计中加入无限滚动之前,应该权衡它的优缺点。选择取决于场景以及内容的传递方式。一般来说,无限滚动适用于像 Twitter、Instagram 这样的产品,用户在消耗无穷无尽的数据流时不会特别寻找特定的内容。

译者注:作者在《UX: Infinite Scrolling vs. Pagination》中提到无限滚动的优缺点:

1. 无限滚动的优点

用户停留的时间更长,提升用户参与度。当用户没有特定寻找的内容时,可以通过浏览海量信息找到自己喜欢的内容(如Pinterest、Facebook)。

滚动比点击操作更快更容易,分页展示每次内容更新都需要额外点击等待加载。无限滚动对于移动设备很友好,移动设备的手势控制让滚动更自然。

2. 无限滚动的缺点

影响页面性能,加载速度慢,用户无限的向下滚动,加载更多的内容,页面的性能会越来越低。

无法定位到上一次浏览的位置,需要重新不断下拉回到同一位置。

网站右侧的滚动条变得无关紧要,反映不出数据量,当你以为快要接近底部,引诱你继续向下滚动,结果更多的内容又呈现出来。

缺少页脚,用户有时候需要查看某些信息,去页脚查看发现没有。这些信息可以展示在别的地方,或者加上「加载更多」的按钮来响应用户对更多内容的需求。

结论:无限滚动适用于用户没有特定目的的原创内容网站(Twitter,Facebook)或者视觉(Pinterest,Instagram)的网站和 app,分页则适用于用户在寻找特定信息的搜索结果列表,以及用户浏览位置重要的地方。谷歌的图片用了无限滚动,相对于文本搜索,用户可以更快地浏览和操作图片,文本搜索则需要花费更长的时间。

3. 使用无限滚动的建议

  • 当你使用无限滚动时,可以保持导航栏可见,以便于快速进入其他页面。
  • 页面需要页脚时,使用「加载更多」的按钮。
  • 为特定项目增加收藏或书签,以便于保存下来。
  • 加载新内容的时候提供视觉反馈,让用户知道发生了什么。

三、推送通知

您是否注意过每天从各种应用收到的通知和提醒消息的数量?其中您真正关心的通知有多少?

每天用户都会被没用的推送轰炸,分散日常活动的注意力,并感到恼火。

恼人的推送通知是人们卸载移动应用程序的首要原因(根据调查受访者的比例为71%)。

当用户开始使用 APP 时,如果推送内容足以让用户「愿意被打断」,他们就不会那么在意收到推送消息,换句话说,这意味着推送消息必须让用户觉得足够有用和有趣。因此,为用户推送有感染力并使之愉悦的定制化内容才是关键。

推送通知是一项特权,因为用户信任你,才允许你直接向他们发送消息,你不能滥用这个特权。

为用户设计有用,相关和及时的通知非常重要。推送通知可以成为企业直接与用户沟通的强大工具,并在适当的时间和地点传递正确的信息,以促进互动。

译者注:作者在《Mobile UX Design: What Makes a Good Notification?》、《How to create effective push notifications》中提到推送通知需要注意几点:

适当的时间。尊重当地的时间,不要在用户睡眠的时候发送通知,比如国际化的 APP 针对不同的地区调整推送时间。Andrew Chen 收集了一些数据显示推送打开率在下午6点后更高,当用户参与度最高的时候,在下午6-8点时发送推送通知。

△ 图片来源:Andrew Chen和 Leanplum

限制次数。设置一个合理的推送次数,一些 APP 只要触发了与你相关的信息就会提醒你,过多的推送可能会引起用户的不适。

个性化定制不同的推送内容给不同的用户,推送对用户有价值的内容。比如根据用户的浏览历史做相关用户感兴趣的推送。

发送消息之前应该确定好目标,跟踪数据,确认推送是否达到了效果。


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

7个案例解析:复选框 vs 切换开关

雪涛

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

本文介绍在设计表单体验时,决定这两个控件之间的指导性原则和案例分享。

表单提供了几个可以更轻松收集用户输入的控件。设计表单时,在正确的位置使用正确的控件是一项挑战。


复选框控件有三种状态:unselected(非勾选态)、selected(勾选态)和indeterminate(未确定态)。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。


切换开关代表允许用户打开或关闭物体的物理开关,如灯的开关。


点击切换开关需要两个操作步骤:选择和执行,但复选框只有一个选项,其执行通常需要另一个控件。


在选中复选框和切换开关控件之间时,最好关注使用的环境而不是其功能。


下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。



案例1:即时回复


使用切换开关时,


1. 应用设置的立即响应是无需明确操作的。


2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。


3. 用户需要执行不需要审核或确认的即时操作。


Image title

如果需要即时响应的选项最好选择使用切换开关


案例2:设置确认


使用复选框时,


1. 应用设置需要在提交之前由用户确认和审核。


2. 在显示结果前,设置定义需要执行提交、确定、下一步、等应用操作。


3. 用户必须执行其他步骤才能使更改生效。


Image title

如果需要显式操作来应用设置,则首选复选框


案例3:多项选择


使用复选框时,


1. 有多个选项可供使用,用户必须从中选择一个或多个选项。


2. 逐个单击多个切换开关,每次单击后等待查看结果是需要额外的时间。


Image title

在列表中选择多个选项,复选框能提供更好的体验


案例4:不确定状态


使用复选框时,


1. 当多个子选项在父选项下分组时,需要中间选择状态。中间状态表示在列表中选择了多个子选项(但不是全部)。


Image title

使用复选框最好地显示不确定状态


案例5:清晰的视觉状态


使用复选框时,


1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。


2. 需要提供明确的勾选状态或未勾选状态。


Image title

有时切换开关不能清晰地显示它是状态还是动作


案例6:相关项目


使用复选框时,


1. 用户必须从相关项目列表中选择选项。


Image title

用复选框显示要选择列表中的相关项


使用时切换开关时,


1. 用户切换独立的功能或行为。


Image title

独立项目可使用切换开关进行选择


案例7:单选项


使用复选框时,


1. 提供单个二进制是/否选择。


2. 只有选择或取消选择一个显而易见的选项。


Image title

单个是/否选项更适用于复选框


使用切换开关时,


1. 需要单一选择,并且您希望为开/关类型的决策提供两个选项。


Image title

使用切换开关可以最好地理解单个开/关决定


结论


重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项,若用户必须进行额外点击才能填写信息,对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。



参考文献


1. Control and Patterns《控制和模式》


2. When to Use a Switch or Checkbox《何时使用开关或复选框》


3. Selection Controls《选择控制》


4. UX Design: Checkbox and Toggle in Forms《UX设计:表单中的复选框和切换》

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

 

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档