首页

移动端选择器正确使用指南

涛涛

今天给大家详细的分析一下移动端选择器。


一.什么是选择器


选择器是一个输入字段, 用户必须在其中选择一个(或多个)选项,这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单,复选框,切换按钮,滑块等都是不同类型的选择器,但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量:一个或多个。



二.选择器的类别


-单选选择器

-多选选择器



1.单选选择器


单选选择器按效果又可以分为:点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。


特点:同一时间只能选择一个选项,当你已经选择完一项后,准备选取另一项,那么后选的一项会立刻使先选的一项被取消选择。

 

1-1点击选择器


点击选择器可分为两种状态,状态一为立即触发,当你点击后会立即跳到下一步操作;状态二为再次确认触发,当选中某项时,不会立即触发操作,而是需要再点击别的触发类组件(如保存按钮)后,再执行操作。

 

-立即触发式:


特点:直接进入,并没有再次确认的按钮,可以让你快速到达想要的目的。


建议:虽然目的能快速达到,不过也很可能会造成误操作,所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离,同时正因为是直接跳转,所以应当加入一些操作提示。


举例:汽车之家在用户选择二手车时就会出现此选择器,当我在汽车之家想要选择二手车时,它会弹出立即触发式选择器控件,我们在控件上可以看到有7个圆形选项,分别为:汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车,当我点击“奥迪”选项时就会立即跳转选择后的页面,为了让用户知道自己选择后的状态,在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。


-再次确认触发式:


特点:这是最为常见的选择器类型,当所在选项选上,除了选择另一个选项之外,便没法取消选中状态。(选且只能选择一个选项)


建议:在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项,甚至是否考虑给出一个重置按钮。


举例:我刚注册小红书时,在小红书填写信息页面中,它的默认选项是“男”,我点击“女”,则会自动取消掉“男”,它们两者并不能同时存在,并且只有我点击下一步按钮时才会正式确认我选择完成。


1-2滑动选择器


特点:滑动选择器是将需要选中的内容滑动至中部,然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。


建议:滑动选择器的展示区域有限,部分选项会被隐藏,最好是当用户对所有选项都比较熟悉、有预期的时候,才使用它。为了保证手机屏幕触控精度,以免发生误触,滚轮选择器建议控制在5列以内。


举例:在小红书填写年龄信息时,我们只需用手指在区域内滑动即可选择想要的选项。


1-3多联动选择器


特点:多联动选择器是由两个或两个以上的中继器制作而成,第一个中继器选择后,一般会对第二个中继器进行筛选,不过因为显示的区域有限,所以当你要切换时,还只能挨个切换,效率低下。


建议:可以通过数据以及功能来减少选择时间,例如在选择地区时,根据当前GPS定位地理位置,定位相关省级信息及名称,减少滑动操作。


举例:如下,当我选择了内蒙古自治区,那么2级内容就应该筛选掉内蒙古以外的城市,比较适用于省份-城市或者品牌-产品这种类似的选择,当然下面第一张多联动选择器也结合了滑动选择器。



多联动选择器展示的方式非常多,不仅可以用滑动形式展示,还可以用点击、平铺列表等形式展示。


在左图选择城市时,我们必须要先选择省份,再选择城市,最后才能选择县;


右图则没有先后顺序,不过当你首先选择颜色时,如果没有相同尺码的衣服,缺货的尺码则不会被选中,先选择尺码也是相同道理。


1-4切换开关选择器


特点:切换开关选择器有且只有两种选项,用来在开和关两种状态之间切换。开关属于触发类组件,拨动开关时,它所指挥的某个操作会立即生效,常见的使用就是授权。开关的默认状态并不都是关闭的,还要从产品本身的设定上来决策。


建议:如果某开关的功能是用户经常使用的状态,那么可以在默认状态下打开开关,不过需要注意的是在某些特殊的开关按钮需要打开时,必须要提前告知用户。


举例:当我打开UC浏览器的设置时,它的辅助功能就使用了切换开关选择器,切换的开关只需要点击即可。


1-5可搜索选择器


特点:可搜索选择器一般用于选择项较多时,特别是对于电商购物类的APP搜索选择器是必不可少的,搜索选择器会根据用户输入的内容,对中继器进行模糊的搜索,让用户快速找到并选择内容。


建议:在搜索区域输入文字时,可给予用户更多的文字提示以及以及引导类信息。


举例:小红书在搜索时就会出现数字化的信息提示,这样能够很好的引导用户进入到想要的搜索结果:笔记或者商品页面。


1-6地图选择器


特点:作为最特别的选择器,它的功能是复杂的,它的操作方式也是多样化的,地图选择器的操作可点击、可拖拽、可放大缩小等等,它多用于生活类APP。


建议:可以在选择器中加入更多趣味、互动、可感知的设计,如加入过节元素、车辆行驶路径、热门区域、甚至选取后手机的震动等。


举例:


打车类APP必用的地图选择器,滴滴出行的用户可以实时看到车辆信息,可以采用点击、拖拽、放大等操作来选取上车地点,选取后还有文字信息提示,让用户确认操作是否正确。


贝壳APP则用地图选择器来让用户选择二手房,同时也采用了联动式的效果,第一步是查看区域,可以明确看到区域的售房套数,点击选择区域后我们可以看到每个路段的房子套数,点击路段后就可以看到每个楼盘的套数以及均价,直到点击楼盘就会弹出详细信息框。这样有助于用户在选择二手房时从大数据分析二手房的情况,有更好的对比性与选择性。



2.多选选择器


当单选选择器不能满足用户需要时,这时我们就可以采用多选选择器,一般常用的多选选择器都是采用点击的方式,当然也有滑动类型的多选选择器。


2-1点击多选选择器


特点:当用户想要选择多个类别的情况下,我们就可以用点击多选选择器来展示提供给用户选择,通过屏幕点击选中或取消选中该选项,它不会立即触发操作,需要再点击别的触发类组件(如保存按钮)后,再执行操作。


建议:从用户的角度来讲尽量不要强制用户选择数量或者默认全部数量;多选项时触碰区域不能太小,以免造成误操作。


举例:小红书在选择感兴趣的内容时就采用了点击多选选择器,不过在选择兴趣时它就强制用户至少关注4个兴趣,而对于单兴趣或者少兴趣的用户来讲,这无疑会造成用户体验的不佳,被逼再次从中选择次要的兴趣。


2-2滑动多选选择器

特别注明:从用户的角度来看,它可以选择多个区域段的内容,所以我把它分为多选选择器中。


特点:当系统给出的选项不在自己的选择区间时,可以很好的自定义选择区间,把定义权限交在用户手里。同样,它需要再点击别的触发类组件(如保存按钮)后,再执行操作。


建议:在用户滑动操作期间要有明确的操作提示,让用户时刻感知目前处于的状态;滑动区域尽量不要超过100刻度,如果刻度距离太小,用户在滑动时也很难精准的选择范围。


举例:在汽车之家APP中,当我要选择汽车价格范围时就会出现此选择器,我们可以用手指滑动来选取它的价格区间,相对于上半部分的单选价格拓展性更强,用户可以自行选择上半部分的单选选择器,也可以选择滑动多选选择器,给予用户更多的选择。



三、选择器的十大应用要点


1、简单易懂


标题易懂:

在选择器中标题一定要简单明了,很快的让用户知道他在为什么做选择(如:当你关注某烹饪的APP后,它会让你勾选喜欢的菜谱,你的标题就可以用“选择菜谱”四个字,简单明了)


文字标签易懂:

一般使用短语而不是句子,也并不需要用标点符号来结尾。(如:当选择想要的菜谱时,菜谱后的文字不需要加入标点符号)


选取状态易懂:

用户能够明确感知什么是选中状态,什么是未选中状态,什么是禁用状态。(如:选中状态为高亮显示,未选中为普通显示,禁用状态为灰度显示)


反馈提示易懂:

当你在选择中遇到选项限制或是否需要确认操作时,反馈提示一定要一目了然。(如:当你选择某衣服时,S码不能选择,则会用灰度显示的文字代替,甚至可以用中横线划过文字,明确告诉用户不能选择)


2、基本排序


从逻辑顺序:

逻辑排序能让用户很快很准的找到自己需要的选项,特别是对于选择地址/时间/个数等常规的选项时,可以按照字母/远近/大小来进行排序。例如下面在选择地址时,就是按照A-Z字母排序,这样可以大大节省用户选择的时间。


从产品利益角度排列顺序:

当然为了产品自身的利益也可以自己优化排序方式,选项的顺序可以说服用户进行选择,用户可能因为第一个选项在列表中的位置而选择了第一个选项;可以辅助用户,也可以让用户向着产品所希望的方向倾斜。例如你在选择菜谱时,产品为了让用户选择更加优质的菜谱,就会把用户评价高的菜谱放在前列;当然商家也会这么做,例如你要去买某款商品,商家会在选项中把热门、优质的产品放在最上方,让你优先选择。


从用户体验排列顺序:

从用户角度来说哪些对用户体验好,那么就把它排在前面。例如汽车之家在进行车辆类别的排序中就把用户量最多的轿车排在第一位,而把用户量最少的轻客放在了最后一位;同样它在汽车品牌选择中,单独列出了热门品牌把它放在前列,让用户进行快速选择。


3、一致性


视觉布局一致:

每个元素之间的对齐、元素与元素之间的间距、按钮不同状态的视觉体现。一般情况下移动端更倾向于左对齐,这样有利于快速读取选择内容,可以提高用户的浏览效率并减少错误。


图片/插画风格统一:

在图文结合的选择器中,我们一定要保证图片(插画)的优质以及风格的统一。


4、合理运用默认选项

默认选项是选择器的开始状态。在不同的选择器中有不同的默认方式。


默认未选中:

这是最常见的一种状态,特别是对于选择年龄、生日这些个人隐私信息,系统也没有办法进行默认选择。


默认选中其中一个选项:

要想默认其中一项,必须考虑两点因素,因素一:你想要潜意识的像用户传达信息,在单选选择器中默认选择一项后,就可以潜意识的向用户传递信息必须要在这组单选项之中选择一个。因素二就是产品的倾向,例如此产品的性别9成都是女性,那么建议默认选项为女性。


默认选中全部:

其实默认选中全部在用户体验上来讲真的不是那么的友好,例如微博这个选择器界面,刚进这个界面时已经全部勾选中,并且当你没注意习惯性的点击下面的按钮时会生立即效,没有返回的余地。(吐槽:有些APP甚至没有一键取消功能,要一个个的点击取消...)这也是为了产品牺牲掉了部分用户体验吧!


5、给用户更多选择


单选选择器的更多选择:

如果用户不想做出选择,那么应该提供一个中立选项,为用户提供一个明确的方向,中立选项比勉强选择要好。例如在选择行业领域时,以上并没有你所处的领域或你不确定你的领域,你就可以选择“不限”或“其他”。


多选选择器的更多选择:

在多选选择器中,如果不能把控到用户的准确选项区间,那么可以考虑滑动多选选择器,让用户有更多的选择区间,不管是汽车之家还是懂车帝在选择车辆价格上两者都是采用的相同方式。


6、控件状态

选择控件在操作过程中必须更改其状态/外观,要明确让用户知道是否能选中,是否被选中。控件状态一般分为三种:未选中、选中、禁用。


未选中

选择器的开始状态,向用户表明,可对该选择控件进行操作。


选中

用户操作选取状态,选择控件处于被选中的状态。


禁用

一般情况会为灰色显示,用户将无法与选项进行交互。


7、操作提示

指的是用户在操作中让用户得到相应的反馈,用户根据这些反馈可以判断当前状态以及操作后状态。在选择器中,操作提示一般用辅助文案提示及非模态弹窗提示。


辅助文案提示(选择前与选择中):

辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明,例如下面是地区选择,我在选择不同层级的区域时,它的上方会出现辅助提示文案,让你明确的知道你上一层级选择的是什么。


同样,当我在选择价格区间时,滑动选择器的左上方一样有文字类的提示:


非模态弹窗提示(选择后):

非模态弹窗一般出现在用户操作完的跳转页面中,为了让用户感知所选的选项在页面的状态,如下,非模态弹窗告知用户一共有7辆车符合标准。


当然除了非模态弹窗外,还有模态弹窗,但是用户体验极差,目前很少使用,所以就不列出来了。


8、合理使用操作区域


扩大点击区域:

在选取按钮类的操作时,容易出现点击不到或误操作的现象,我们可以通过扩大点击区的交互区域来提高易用性,例如下图,虽然按钮在左边,但是可以把横向区域都列为可点击区域。


当然我们也可以从设计的角度来扩大视觉范围,从而也提高了点击范围,这样的处理不仅提升了视觉层面,还提升了交互体验。(图文结合方式)


注意交互间距:

在元素与元素之间一定要有合理的交互间距,不然很容易出现误选的情况。


合理利用有效区域:

在选项较多的选择器中,我们可以利用好选择主体控件之外的区域,例如在选择城市/品牌时,我们可以做A-Z index式字母交互区,帮助用户快速找到想要的选项。


9、趣味性

让用户选择本来就是一件枯燥乏味的事情,如果让这件事变得有趣那么会极大的提升用户体验。


从文本层面:

例如当用户填写性别信息时,你给予用户的文字信息并不是“男”/“女”,而是“帅气的boy”与“酷酷的girl”,这样会让用户觉得这是一件比较有趣的事情,而不是被动选择。(注:这样的取名一定要符合产品的特性)


从视觉层面:

加入可玩儿性的选项,例如汽车之家的头像切换,可以选择自己喜欢的头像。(头像并不是强制选择的,如果不进行操作则是默认选项)


从交互层面:

让用户去享受选择。例如Soul的星球首页就做的非常棒,在未选择状态他的人物会360度围绕着转动,当然你也可以快速拖拽,或者放大缩小,可玩儿性十足,并且在内部设定了最匹配/新人的高亮显示,协助用户去选择。


10、合理使用选择器


不同的产品在使用选择器时都各有不同,因为每个选择器都有他的利弊,而真正要怎么去选择还要根据产品本身来定。


那么我就拿目前市面上最常见的5个地址选择器的类型来分析一下利弊:


1/多联动选择器(平铺式)


货车帮采用的是多联动平铺式选择器,它最大的特点就是能够一眼就看清楚所有地址,不过地址多时需要花时间去找,只是当你经常使用此功能时便会形成记忆,再此搜索的时候就能形成记忆点击,效率很高,并且在操作外还有路径提示,不仅可以帮助你记住层级选项,还可以实时返回路径进行重新选择。


手势操作:点-点-点


2/多联动选择器(列表跳转式)


闲鱼采用的是多联动列表跳转式选择器,这个选择器最大的缺陷就是选择三级之后用户可能会忘了上一级的内容,那么就又要切换到上一级,闲鱼采用它的原因是因为它只有二级联动,不存在遗忘现象,不过这样列表式的选择效率并没有平铺的效率高,人眼习惯扫视横向内容,所以横向的内容获取往往要比纵向的多,在地址选择器上我个人是不太建议采用多联动列表跳转式,因为并不也不直观。


手势操作:滑-点-点


3/多联动选择器(列表式


转转采用的是多联动列表式选择器,它的优点是可以根据右侧字母来找城市,数据偏大也能够很快的查找。不过如果在层级的选项中出现错误,同样就要切换到上一级,并且在操作中没有辅助信息提示。


手势操作:滑/点-滑/点


4/多联动选择器(下滑式)


安居客采用的是多联动下滑式选择器,这种形式的选择器不会遮挡后面的主要内容信息,在选择完地址之后能立即看到地址的筛选结果。优点是能快速选择多级地址,并且层级分明,扩展性较强可以做成地址多选。缺点是不适合3个层级以上的地址选择。


手势操作:点-滑/点-点


5/地图选择器


美团外卖采用的是地图选择器,这个选择器一般用在需要精准定位的生活类APP中,它的优点就是能够快速精准定位,并且自动录取定位信息,它的缺点也显而易见,不能含带层级并且对范围也有约束。


文章来源:站酷   作者:黑狮力

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

深度解析设计系统

涛涛

你觉得设计系统重要吗?你了解设计系统吗?让我们一起来深度解析下设计系统,预计阅读时间为15分钟

你觉得设计系统重要吗?那目前手里的设计系统是在灵活运用?还是落灰、摆设?你对设计系统理解有多深?它在你的设计中有多大的用处?节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范?那怎么避免设计系统带来了统一和便利,但同时失去了变化和新鲜感?


设计系统是今年来热门的话题之一,想要带来良好的用户体验,设计系统就是其中重要的一环,那它和设计规范、设计模式、设计语言、设计原则有什么关系?


设计系统

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档,在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色,文案,字体等等),所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的,是需要维护与改进的。


设计模式

设计模式是一种经常性,可重复使用的解决方案,可用于解决设计问题,我们经常会说解决整个方案我们要运用什么样的设计模式。


设计语言

设计语言是把设计作为一种“沟通的方式”,用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。


设计原则

设计原则可以理解为设计语言中的语法,是构建设计语言系统的起点,用于传达品牌主张或设计理念,它将指引业务设计执行的方向。


比如Airbnb的设计原则可以简单归纳为几点:

设计规范

设计规范对于设计师来说并不陌生,日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率,同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。


那是不是只要制作一套设计系统,在团队进行扩散就可以了?那平台的统一性就解决了?


我曾经加入一个设计团队,看到平台风格不统一,当时很自豪很坚定的制定了一套平台设计规范,从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系,还有交互方面。当时一心想着有这个规范宝典在手,平台统一性指日可待,没想到这个规范就成了我自己的规范,仅仅是我在自嗨。

为什么已经建立设计规范了,还是没能解决平台统一的问题?这里延伸出另一个问题,为什么其他设计成员不用?协作不起来?是它不够好?我严格按照标准来,为什么推不起来?


那要追溯到设计体系的目的是什么?它的意义何在?

1-建立统一的设计文化体系

2-保证多团队成员共同参与的项目视觉一致性

3-提升品牌调性

4-节省与研发人员的沟通成本

5-将元素组件化,提升设计师和程序员的工作效率

6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。

7-在用户层方面,对某产品的体验一致性得到落实

8-减少设计出错率

……


整体可以归纳为

1-对内统一,对外区分

2-管理与协作变得方便

3-建立设计文化体系,建立品牌感

4-减少、优化错误出现


对内统一,对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一,一个品牌的设计风格,是要有别于同类竞品的,比如阿里云、腾讯云,他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分,一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站,各个页面的设计差异明显,像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。


undefined



管理与协作变得方便


for Designer:

多个设计成员协同一个产品,迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队,如果没有统一设计规范,那网站会变成什么样子。


for Developer:

在UI还原中,设计需要经常与前端进行沟通“这里这里这样做,那里那里这样做”,对于每一块的设计,前端都会询问你,这样大大增加了沟通的成本,把时间花在了无效的事情上。

设计规范统一后,减少了无效沟通,可以更专注创新方向,比如:要改变预先设定的一个辅助色,无论是设计还是开发,修改组件的颜色,全局使用到这个组件的地方都会改动,大大节省了设计时间。


建立设计文化体系,突出品牌感

做品牌的时候需要制定一整套VI规范手册,那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式,更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐,看到界面都可以立马识别出这是哪个app。



undefined


你能分出哪个是网易云播放界面,哪个是QQ音乐播放界面吗?


减少、优化错误出现

设计经常碰到设计完后需要修改一个点,然后就要找出设计稿中所有相同的地方进行修改,这样很容易漏,统一规范后只需要修改组件即可。尽可能的避免错误的出现。


设计规范的意义这么强大,对网站及品牌有至关重要的作用,那为什么还会出现没有应用起来的情况呢?

很多设计师会说:“设计不就应该是变化多端的吗?就是要表现创新力呀?制定了设计规范是不是就失去了变化和新鲜感?那设计还有什么意义?开发都可以做设计的事情了。”


这里就要看设计规范理解的深度—设计规范是分层次的平台规范归根结底是为了确保产品的易用性,是为了减少用户的学习成本


对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式,比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素,给用户一种统一的视觉形象,在跨界面、跨端、跨系统间有熟悉感,从而潜移默化地进行品牌的渗透。



增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定,对组合自由度较高的复合组件减少过于局限的限定条件,考虑各种拓展的可能性。组件在制定过程中要考虑多种状态,多种可能。



设计规范随着业务的发展或技术的变革终究是会过时的,是需要迭代的。

设计规范是需要迭代的,而不是我只要制作出来就放那了,就像女生买衣服,去年的衣服已经配不上今年的我,嘻嘻

~~希望我每天都有新衣服穿,做梦中~


对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力,设计师可以更多的时间去发挥创造性。


误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范,那我的创造性从哪发挥,界面都长的差不多。在设计中,设计目的是解决商业或用户的问题,并不仅仅是为了有创意而引入新的样式或交互方式。


有了设计体系,统一了整体品牌风格,不用把精力花费在比如调整间距、对齐元素等琐碎的事情上,更多的回去关注更全局的设计策略。


误解2-设计系统只关乎设计,可由设计师独立完成

它仅仅是设计软件上可复用的组件,所以可由设计师独立完成,这种想法是错误的,是需要来自不同角色支持和参与的,这里包括前端、品牌、动态设计、 用户研究等。


误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了,其实不然,对待设计规范就像对待产品一样,是需要维护和改进的,包括两个方面:一种是对内部使用的开发以及同事,一种是对用户的,应该定期收集用户以及同事的反馈,确保及时更新迭代。


误解4-设计系统的重要性

1-提高设计开发效率,最显而易见的好处就是,组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2-确保设计一致性,为用户提供连贯一致的用户体验,设计的一致性让用户能缩短的学习使用产品的周期,让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验,会让用户产生一种掌控感。

3-设计系统促进了公司内部的合作和交流,一个成功的设计系统是需要跨功能团队参与,设计系统因此促进了公司内部不同职位的合作和交流,这种文化的建立也会帮助公司更有效地推出新的产品或服务。


那我们要如何去执行呢?

已经了解了规范的目的/意义,那该怎么去着手呢?


  • 对于设计规范的意义要同步给设计人员,提高认知,这是一件提率的规范,规范必须落地。

在制定规范前期,不应该是一个人规定这个规范,设计团队的成员应积极参与,前期先把规范的基调定好,人人都参与进来了,规范也就能更好的运营,当时我就是一个人定了规范,只是单纯把规范发给其他设计人员,他们没有参与,自然不会使用规范,对里面的设计元素没有加深理解。


主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力,这样能把纰漏降到。

undefined


  • 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范,从UI的定义,User Interface—用户界面,用户与界面之间的交互关系,可以归纳规范其实可以包含两大类,一类是视觉规范,一类是交互规范。


视觉规范可以给用户传达统一的品牌形象,确保视觉一致性。后期的设计元素须复合规范的原则。


交互规范可以减少用户的学习成本,让用户有归属感。交互规范在制定的过程中,需要写好交互规则与条件,不然后期维护会混乱。像盖房子一样,地基都没打稳的话,整个楼都是偏的。


那在使用规范时,一定要遵循规范里的要求进行应用,否则会乱套,不仅起不到统一的品牌风格,反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。



设计规范的节点

节点和公司的进度搭边,看当前的产品是应该先独立风格还是先统一基础规范。


1-固定的设计风格规范,比如:google的“扁平”,微软的“磁贴”,可以全局使用,并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队,定好基调,不会走偏。


2-不断优化的设计规范,根据公司的节奏,有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后,进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。



建立规范


·制作原理—利用粒子构成的原理与三维解构

利用粒子构成的原理与三维解构,一个组件被科学的三维解析后由粒子再构成,理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变,高度灵活


·具体过程

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。


·元素是工具库的必要部分

并不是每个时刻都能够直接使用完整的组件,元素是我们工具库必不可少的部分,它可以更大的方便你修改组件,再造组件以及特殊的排版,方便拖拉拽。


·组件的命名规范化

规范组件命名,方便查找、方便协作。


协作

一键导出/同步组件到Sketch模板。

标注方面,目前我们团队使用的是蓝湖私有化。



那是不是所有的公司都需要创建设计系统?

一般情况下,公司有不同的产品线,且都需要长期的开发与迭代。

公司中,越来越多的设计师加入,设计风格需要统一。


那建立一套设计体系会面临什么挑战?

设计体系里面包含了设计语言、设计规范,需要与前端、品牌、动态设计、 用户研究等沟通,还是需要迭代优化的,这是非常繁琐耗时的项目,初期会非常的艰难,当设计师开始做组件时,也是非常耗时的工作,需要考虑不同场景下的使用情况以及设计的延展性,都需要投入大量的设计人力。


文章来源:站酷   作者:玛丽的设计笔记

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

那些很熟悉但又不知怎么用的设计法则:80/20法则

前端达人

在理解了80/20法则后,我们可以将此法则广泛的适用于各个场景中,如下:

  • 分析数据,确定20%的核心功能。
  • 排定优先级。关注最核心的功能,不断的优化。
  • 精简80%非关键性功能,减少投入,必要的时候需要忍痛割爱。

80/20法则也有一定的争议,但是还是适用于绝大部门场景,当然特殊场景还是要特殊对待。80/20法则可以帮助用户关注核心功能,最终达成目标。


腾讯设计师出品!帮你找到设计创意的情绪板设计

前端达人

很多时候我们会觉得情绪板设计可有可无,或者因为时间的关系不允许我们经过这一步。但,如我一开始提到的点,情绪板可以在前期帮助我们去打通很多思考的壁垒,辅助设计师在前期直观的与产品侧进行方向上的探讨,从而找到大方向上的共识。

「新拟物化」过时了!此刻你最应该拥抱的是「玻璃拟物化」!

前端达人

虽然「玻璃拟物化」并非是全新的事物,但是确实有越来越多的设计师正在尝试这样的设计风格,并且在这个多灾多难的2020年底能看到这样的新东西,总归会让我们对未来有那么一丝期待 。

斯坦福大学 Design School 所倡导设计思维的原则和步骤是什么?

前端达人

Design project的第三个特点是根据反馈快速迭代。我们的第一个想法是设计一个暑期实习计划,鼓励EPAPA学生到心仪的企业做一个简单的实习(即使是打杂也无不可),由学校和企业合作提供培训和导师,旨在帮助学生在进入大学之前就对感兴趣的职业有第一手的认知,例如我们认为如果你亲眼看过谷歌的工程师工作,就会对成为工程师需要什么知识更加有谱。我们拿着这个方案到学校和老师、学生交流,收集他们的反馈,发现其中一个较大的问题:学生自己分析和提取信息的能力较弱,很难从两个月的实习期当中收获很多有用的信息,我们设想中的“从实干中学习”很难实现。

那我们最终设计的方案是什么呢?在这里卖个关子,如果大家感兴趣可以去看我们小组final presentation的内容:

《产品设计中的容错性思考》

涛涛

使用互联网产品过程中,会有很多因素造成操作错误或失误,导致无法顺利完成任务。因此产品的容错性设计是交互设计中的重要内容。




用户在实际使用互联网产品的过程中,会有很多因素造成操作错误或者失误,而导致无法顺利完成任务,或者完成任务的效率很低。产品自身所具备的容错能力对于各种使用场景的有效覆盖,可以提升产品纠错效率、降低用户操作出错概率,因此产品的容错性设计是交互设计中的重要内容,也是提升用户体验不可忽视的一个环节。



1、容错性是什么


容错性概念源于计算机领域,容错性是指计算机系统在发生故障的情况下,依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。

本篇内容我们讨论的是容错性在互联网产品领域的内涵和意义。延伸到互联网产品设计领域,容错性的范畴更为宽泛,涉及产品对错误操作承载能力的多个方面,包括:如何降低用户操作的出错率,如何及时提供纠错帮助,以及如何给用户提供解决方案等内容。


2、为什么需要容错性设计

「 即便你的产品90%的时间都运行良好,但是如果在用户需要帮助时置之不理,他们是不会忘记这一点的。——《Getting Real》」

一个产品设计的无论多么简单,用户都难免在使用过程中因为各种原因而犯错。互联网产品面向的用户群体是复杂多样化,教育背景的不同,行为习惯的差异,复杂的使用场景,都会使得用户的真实操作相比产品设计之初的预期有一定出入。此外,一些产品本身存在的因素,例如产品路径复杂,逻辑不畅等,也有可能造成用户无法顺利完成任务,亦或是完成任务的效率低,出错率高。产品在遇到错误如不能够及时纠错帮用户挽回损失,会给用户带来不好的用户体验,也是产品的一种设计缺陷。因此设计师应具有良好的容错性设计思维,尽量避免用户错误操作的出现,当用户出现错误操作时,帮助用户识别、诊断,及时反馈问题所在,并提出有效的解决方案,帮助用户快速从错误中恢复。最终达到使产品更可用、更易用的目的,给用户带来更优的用户体验,使用户与产品的交流更加顺畅。


3、容错性的设计方法

互联网产品的容错设计可从用户使用产品的三个阶段来考虑,即操作前、操作中、操作后。可大致归纳为以下几方面内容:首先在用户操作前给予正确有效的引导;其次在重要的操作步骤给予用户及时有效的提示;当用户发生操作错误或失误时及时为用户纠错并提供有效的解决方案;最后帮助用户在错误发生后迅速回到正确状态。


3.1给予用户正确有效的引导

在用户开始任务操作前给出用户正确有效的提示,可减少错误操作的发生。需要注意的是,引导应尽量醒目且简单易理解,确保能引起用户注意,并且在用户注意到后快速获取信息,到有效的防错帮助。

产品常见的引导主要针对两种情况。第一种是针对于新手用户的功能介绍,不同于曾使用过产品的用户或者高级用户,新用户首次使用产品的过程其实是一个学习的过程,此时需要让用户快速了解产品核心功能及主要的操作,帮助他们更快地上手。

例如下图导航APP新版本的新手引导【如图1】,在用户首次启动产品时,产品用趣味性的图文形式给用户展示了打车、公交乘车、实时公交路线等功能的信息介绍,能够让新用户快速熟悉核心功能,并在正式使用产品的过程中提升效率,降低出错率。


undefined

图1-导航APP新手引导



第二种情况是针对产品上线的新功能或者较大的功能变动而设计的初次引导,产品的功能改动可能会是用户产生不同程度的陌生感,适当的提示可帮助用户快速熟悉新功能点或页面信息的调整。初次引导常见的方式有很多种,包括:遮罩式引导、弹窗式引导、气泡、浮层式引导等等。

例如版本升级后的音乐APP【如图2】,首页使用情感化图文设计加遮罩式的引导,可以有效将注意力集中到特定功能上,用户进入页面第一时间就注意到,确保了信息传达的有效性。

图2-新版首页的遮罩引导


以上列举的内容属于狭义层面的引导,用户尚处在被动接受引导的学习阶段,在此阶段引导的目的是提醒和防错。从广义的层面来讲,我们可将对用户的引导理解为”消减信息的不对称性“,当用户面对可影响其决策的因素时,给予用户关键性的信息提示和说明,可以促使用户做出正确的决策。

针对需要加工时间的特殊品类,如烘焙蛋糕,京东到家在用户决策的关键页面和步骤展示时效提醒【如图3】,避免用户在完成订单信息填写或结算后才发现商品的配送时间超出用户的期望,会给用户带来极为不好的购物体验。


图3-京东到家页面中的时效提醒



3.2 给予用户及时有效的提示

当用户进行一些如修改、删除、覆盖等不可逆操作时,系统需要在用户做出这类操作指令后告知其产生的后果,让用户自主决策是否选择继续执行。在此阶段的提示需要注意从以下两个角度考虑:一是提示的方式,二是提示的时机。


3.2.1提示的方式

在用户完成任务的操作路径中,大部分产品首先会选择以弹框的形式对用户进行信息提示。弹框可以分为模态弹框和非模态弹框两种大的类型【如图4】,主要区别在于是否强制用户进行交互操作。如何选择合适的弹框形式对用户进行提示,要依据提示信息的优先级和视觉权重的大小,同时要清楚不同类型的弹框适合的场景。


图4-弹框分类


模态弹窗是较重的提示方式,在用户进行重要且有风险的操作时可优先考虑使用。其优点是可以快速获取用户的视觉焦点,缺点是会打断用户当前的操作流程,用户需要进行如单击“确定”、“取消”、“关闭”按钮等操作指令将该对话框关闭后才可继续操作。

而非模态弹框属于轻量级的提示方式,其优点是不强制用户进行交互操作,或者用户依然可以在页面进行其他操作。弹框出现一段时间后会自动消失,所以但不利于承载过多文字信息。非模态弹框对用户造成的干扰较小,但也因此容易被用户忽视。


3.2.2 提示的时机

给用户的信息提示还有一点不可忽视的是反馈时机,应确保用户在关键的操作步骤得到及时的反馈,因为滞后的反馈可能会导致用户因为某一个环节的错误操作不得不重复操作一遍之前的流程,或者要修改关的一系列信息。

【如图5】中的登录页面,用户登录需要依次输入手机号、密码、图片验证码,但如果用户输错了密码并不能马上得到反馈,依然可以继续填写验证码,只有在全部信息填写完之后点击登录,系统才会校验密码,并提示用户密码错误重新确认,用户需要再次输入密码以及识别并输入一次验证码。但如果系统验证密码可以提前到输入图片验证码的步骤之前,在用户在得到密码填写错误提示后则可以停止操作后面的步骤,马上修改密码。


图5-登录页面中的提示滞后



3.3 为用户提供纠错帮助以及解决方案

一旦用户出现错误或失误操作的情况,系统需要为用户及时提供纠错帮助及有效的解决方案,以提高用户操作的成功率。
关于纠错文案的表达应注意尽量简洁清晰、精炼准确,避免使用难懂的术语,不要在出错信息中使用威胁或者责备的语气。应主动识别用户的情感状况,语气友好,让用户感受到“情感支持”,尽量为用户缓解因操作失误产生的挫败、焦虑等负面情绪。
此外,纠错信息内容不可仅描述场景,还需要向用户反馈出错原因,并且有明确的指向性,为用户指出错误出在什么地方。例如在填写部分内容较多的表单时【如图6】,当证件号填写出错时,系统及时为用户纠错并用一条红色的下划线明确指出了信息填写错误的位置,用户可以立即定位并修改错误信息。


同时,尽量为用户提供相应的解决方案,这样可以提升纠错信息有效性。BOSS直聘会因为手机储存空间不足给用户报错,并且会告知用户如何去管理储存空间,以解决此问题【如图7】。


图6-多行表单报错页面



图7-存储空间不足报错提醒


在产品设计中,为降低操作的出错率,限制也是一种方式。在可能造成错误操作的入口适当设置操作障碍或者禁止操作,增加不可逆操作的难度,可以有效规避错误操作发生风险、减少误操作概率。例如常见的页面信息置灰、按钮置灰的设计,可以有效避免用户的误操作。

此外通过让控件、动作、选项等变得可见,尽可能减少用户记忆负担,把需要记忆的内容作为辅助信息提供给用户,或帮助用户自动完成信息填写也可以帮助用户快捷地完成既定任务,降低出错率。例如【如图8】在信息填写的步骤,可在用户已复制的内容和上传的图片中自动识别姓名、电话、地址等内容,并在用户确认后自动帮用户填写对应信息,为用户大大节省时间和记忆成本,快捷地完成既定任务,降低出错率。


图8-系统自动识别用户复制文本中的姓名、电话、地址


3.4 帮助用户在错误发生后迅速回到正确状态

在用户执行操作后,应尽可能的为用户保留已操作的信息,以便在发生错误或失误后可撤销之前的操作。针对一些流程较为复杂的操作任务,记录用户在每一步骤的操作信息,让用户可以从出错的步骤上及时恢复到正确的流程上,或恢复到距离错误操作最近的步骤,可有效的帮用户挽回失误。例如很多图片编辑的APP都支持用户撤销当前的操作,在用户对照片进行多编辑后页面上会有回到上一步和下一步操作的按钮,可让用户有机会恢复到上一步操作结果上。


图9-图片编辑页面顶部切换上一步和下一步的操作按钮


总结

以上是关于互联网产品中容错设计的概念、重要性以及设计方法的一些阐述和思考。在产品设计的实际应用的中,可以模拟使用场景,对目标用户使用产品的真实操作进行行为观察,分析对比产品设计的操作路径与用户真实操作的差别,发现并收集用户可能发生错误或失误操作的关键步骤,验证产品的容错能力是否能达到有效覆盖。同时,也要通过产品数据的对比分析得出用户操作错误及失误的真实原因,指导并提升产品容错能力的设计优化,进而不断提升产品的可用性和易用性。



文章来源:站酷   作者:DXC设计体验中心

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





设计源于生活——浅谈格式塔原理

鹤鹤


设计源于生活,本文通过生活视角溯源格式塔原理,从生活到界面设计感受格式塔原理应用在方方面面。


一、什么是格式塔原理

格式塔即Gestalt,是德语中“形状”和“图形”的意思。是基于心理学对人类视觉系统的研究,人类的视觉系统自动对视觉输入构建结构。

最重要的格式塔原理有:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理、共同命运体 原理。

下面将进行详细分述


视觉会把互相靠近的物体看成一组,反之则不是。

下方示意图中A被看作三排,B被看作三列


【 生活中】

无论是在看阅兵还是军训,我们都有所经历,左右间距为一拳,前后间距为一臂。

列与列之间的间距远大于每个人之间的间距,互相靠近的则被看作一列。

(图片来源于网络,仅供交流学习)


【界面设计中】

个人中心中,同一组信息之间的间距远小于不同组,下图中我们明显可以感知到7组由图标和文字组成的信息

(图片来源于网络,仅供交流学习)


建议

设计过程当中可以控制元素与元素之间的间距,从而对元素进行视觉分组,就像排队一样,有利于元素排列更有规律,主次分明,易于用户获取信息。



视觉会把相似的物体看成一组,反之则不是

下方示意图中颜色相似的被看成一组,颜色较深的两个圆被看作一组


【 生活中】

大家都玩过跳棋,在全部棋子形状相同的情况下,通过颜色进行阵营区分。相同颜色的棋子很容易区分被分为一个阵营。

(图片来源于网络,仅供交流学习)


【界面设计中】

下图中01、02、03三个图标区域呈现不同的图标样式,通过样式的相似性进行了合理分组,体现了个人中心图标的强弱层级


建议

设计过程当中可以通过制造相似性,包括:颜色、形状、格式、质感等,使某些对象在视觉上成组。



视觉倾向于感知连续性,而不是零散的事物

下图中我们更倾向于把图形看作为两条不同颜色的线交叠,甚至是一个X。而不是一条浅色线段,两条深色线段


【 生活中】

被切开的水果我们依然可以感受到完整的样子,一看便知这是一个完整的橙子被切开之后的样子

(图片来源于网络,仅供交流学习)


【界面设计中】

利用连续性原理,我们将上图中的会员等级曲线看成是完整的曲线,而不是两段不同颜色的曲线

利用连续性,下图中依然可以感受到完整的一盘食物

(图片来源于网络,仅供交流学习)


建议

设计中可以利用连续性原理,只露出部分元素暗示完整元素,或用连续性来暗示走向趋势等。



视觉会将敞开的图形封闭起来,从而感知完整的物体

下图中我们不会将其看作三段曲线,而是很容易感知到是一个圆


【 生活中】

划分停车位的时候,即使不画出四面封闭的四边形,我们依然可以感知到完整的四边形车位

(图片来源于网络,仅供交流学习)


【界面设计中】

下图中的断点式icon设计,即使图形没有完全连续,我们依然可以感受到完整的图形

(图片来源于网络,仅供交流学习)


建议

设计中可以利用封闭性原理合理删减、断点等方式增加设计感、丰富度,强化页面趣味感、精细度



视觉会将复杂物体解析为符合对称规律的更简单的物体,从而降低复杂性

我们可以很快感知到下图是两个圆交叠,而不是其他更复杂的图形,因为一对圆的复杂度远小于其他


【 生活中】

河对岸的房子倒影在水面上,我们通常会最快地自动解析出水平的对称线,将其视为上下对称的两组房子

(图片来源于网络,仅供交流学习)


【界面设计中】

下图的网页排版,我们的视觉自动梳理出了左右对称的规律,即使左右的颜色并不一样,也有其他小字信息干扰。但对称的解析方式极大地降低了页面的复杂性

(图片来源于网络,仅供交流学习)


建议

设计中复杂图形可以通过简单图形复用得出,降低视觉理解难度。复杂的排版中可以制造对称性,从而降低页面的理解成本。



视觉将聚焦部分解析为主体其余解析为背景,或改变焦点时呈现不同的主体

大的矩形和圆形交叠时,我们倾向于把小的看作主体,矩形则视为背景。


【 生活中】

下图中将深色区域视为主体时我们看到了建筑,把浅色视为主体时我们看到了五角星,在五角星中我们把美队看作主体,天空看作背景

(图片来源于网络,仅供交流学习)


【界面设计中】

下图中弹窗的出现转移了页面的主体

(图片来源于网络,仅供交流学习)


建议

可以通过控制主体与背景,改变用户视线焦点,从而起到引导用户视觉的目的。



一起运动的物体被感知成一组或彼此关联

下图中三个运动的小球被看作一组


【 生活中】

舞蹈表演中,通向运动的舞蹈演员被我们归位同一组

(资料来源于网络,仅供交流学习)


【界面设计中】

背景的文字拥有一致的运动速度,因此原本零散的文字在动效过程中被我们视为同一层元素

(资料来源于网络,仅供交流学习)


建议

设计中不仅可以通过接近性、相似性,还可以通过同样的动态特征将物体成组,减少视觉凌乱感。



文章来源:UI中国   作者:JuneW

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

黑川雅之——日式禅意与工业设计的结合

前端达人

黑川雅之,世界著名工业设计师,将建筑的思维融入工业设计中,并开创东方日式美学和西方工业设计思维融合的先河,甚至对后来原研哉和深泽直人的创作都有重要的影响。黑川雅之被称为日本设计圈的达芬奇,作为日本建筑和工业造型设计界的代表人物,他个人本身就像是一部活的工业文明发展史。

说黑川雅之是日本战后将日本传统文化和西方现在工业设计完美结合的第一代设计师一点也不夸张。

在工业设计的世界里,黑川雅之将日式禅意美学与西方工业设计世界注重完整和功能性做了完美的融合。从他的工业设计中都可以看出来对空间和时间的反思和理解。

黑川雅之老师提倡设计应该关注通感,而不该只是注重外在的表象和造型。所以,黑川老师强调在视觉设计之余,要更加关注设计对象对其余感官的刺激,尤其是触觉。
代表作赏析——

结合传统的手工艺与现代感的设计,最有代表性的作品系列是Irony铸铁壶系列。沙模铸铁本身记录了铁的演变过程,在铁的表面能够清晰地看到这一由温度和时间共同留下的痕迹,驱散人们印象中光滑金属表面的冷质和距离感,金属表面也可以被打造得温润自然,既粗糙又美丽。
GOM系列

上世纪70年代是塑料和金属的全盛时期,也是注重视觉美感的年代,而GOM第一次以“材料”这个关键词登场,对于黑川来说带有向现代主义挑衅的意味。在他看来,如果说现代设计是日耳曼的理性审美意识和基督教价值观下白皙光亮的形象,而橡胶吸光的、黯黑的表面含有危险和不安的成分,黑色暗影有坏的意味,似乎是对明快现代设计的一种对抗。
PLPL餐具系列

在西方培养了盘子文化,在日本则演变为了碗的文化。 设计最重要的是通过款式、材料及材料的原始意义,将该物品周围的独特韵味表现出来。设计韵味,从而在人的内心深处引起情感上的共鸣。
黑川雅之说——
含而不露
日本设计讲求意境,不需要表达得太多,其余的要留给观赏和使用者以想象的空间。强化触感可以让材料当主角,款式的简单给视觉上禅意之美。

返璞归真
比起工业时代大规模生产语境下“追求体验”的产品,日本设计更加关注对“留白和空”的运用。不刻意去追求完美,天然的情景下或许存在杂质、存在结节、存在伤疤,但不完美本身也是一种完美,自然的哲理本身也包含着宇宙万物制衡的道理。

关注偶然
不是什么事情都会在计划下发生,人生充满了偶然和不确定性,承认并顺应偶然的存在才能迸发出无限的可能,设计也是一样。就好像在制造铸铁壶的过程中,由于不可控的温度和时间的作用,自然而随机地形成大大小小的气孔,这是偶然之力造就的美。


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

一个简单案例告诉你什么是设计思维(Design Thinking)

前端达人

设计思维(Design Thinking)是通过提出有意义的创意和想法,来解决特定人群的实际问题。设计思维可以帮助各个专业背景的人通过创新的解决方案解决问题。在“设计思维”在被不同的学者提出之后,IDEO是第一家将设计思维应用于商业问题的解决之中。IDEO的创始人,David Kelley,后来又在美国斯坦福大学创建了著名的D.School,斯坦福设计学院。

斯坦福设计学院将设计思维分成5大步骤:“Empathy同理心思考”、“Define需求定义”、“Ideate创意构思”、“Prototype原型实现”、“Test实际测试”。下面具体阐述。


第1步:移情/同理心

移情就是对他人的情感或情绪感同身受的能力。

第一步的目的是进行用户研究,从而了解人们真正关心的东西,我们需要真正了解他们的处境,比较常用的方法是用户访谈。

举个例子,如果你想帮助老年人进行设计,你可能会发现他们行动能力下降,但是他们想保持走动的能力。 在和他们进行访谈的过程中,他们可能会与你分享他们实现目标的不同方法。 在访谈后期可以进行深入挖掘,寻找个人故事或比较极端的场景。 理想情况下,你可以与多个访谈者人重做此过程。

第一步:对老年人进行用户研究

当然用户研究的方法不仅于此,还可以:

·进行民意调查或组件焦点小组进行调查。

·勤发电子邮件,了解受众对当前活动的反馈。

·统计数据、视觉跟踪软件也能派上大用场。

·嵌入代码,观察设计元素对交互的影响。

·通过社交网络、亲身交流对交互效果进行监控。

·对你的受众进行群体划分,了解不同群体对相似的产品、品牌或设计的反应。


第2步:定义问题

通过访谈,你现在可以了解人们在特定活动中实现的实际需求。 一种方法是对受访者在谈论他们的问题时提到的动词或活动进行重点分析:比如他们会说,他们喜欢去散步,结识老朋友喝茶,或者在街角商店购物。 通过深入分析,透过表面你可能会意识到,这不是老年人喜欢外出,而是他们希望彼此保持联系。 分析后,制定一个问题陈述:“有些老人害怕孤独。 希望保持联系。

第二步:梳理用户研究结果,定义问题


第3步:创意

现在只关注问题陈述并提出解决问题的想法。 重点不在于获得一个完美的想法,而是要想出尽可能多的想法,比如针对我们的例子,我们可以提出许多想法:独特的虚拟现实体验,高级友好悬停板或改装的手推车。 不管它是什么,请画出你的最佳想法,并将它们展示给你正在尝试提供帮助的人,这样你才能得到他们的反馈。

第三步:头脑风暴,进行创意设计

第4步:原型制作

现在花一点时间思考一下你从对话中了解到的不同想法。 问问自己,你的想法如何适应人们的实际生活。 你的解决方案可能是一个新想法和已经被使用的组合。 然后连接点,勾勒出最终的解决方案,并建立一个真正的原型,以进行测试。

第四步:进行原型制作

第5步:测试

现在寻找实际用户测试你的原型。 如果人们不喜欢它,要敢于接受意见,关键是要了解哪些是有效的,哪些没有,所以任何反馈都很好。 然后回到理念或原型,并运用你的技能。 重复这个过程直到你有一个能够解决实际问题的原型。

第五步:将原型放在场景中测试,并得到用户反馈



第6步:重复以上步骤进行迭代

反馈——原型——测试——反馈——原型.......

第六步:重复以上,不断迭代


荷兰埃因霍芬理工大学工业设计系博士在读

公众号:“用设计做研究”

知乎专栏:“用设计,做研究”

设计与研究/工业设计/荷兰留学 原创文章发布


原创:

工业设计李存


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


日历

链接

个人资料

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

存档