首页

浅析如何设计交互缺省页

分享达人

大纲



1 哪些状态需要缺省页  
2 缺省页的表现形式
3 缺省页的设计技巧

导语:缺省页指页面的信息内容为空或信息响应异常的状态;设计缺省状态的作用不仅是引导用户在异常边界状态的操作提示,同时也是安抚用户体验情绪的重要场景;更重要的是为边界场景营造出良好用户体验。通过分析缺省状态产生的原理,从而更为准确的把握交互缺省页的设计原则。


1 哪些状态需要缺省页 

谈到缺省页面可能是设计师最容易忽略输出的范围,可能直到对接的开发同学提出来,“这个页面,如果没有数据的时候,该怎么显示啊?”。为了更好的把控设计缺省页交互状态,首先要了解缺省页出现的原理。App页面内容(包括图片、文字、数据字段等等)都是请求服务器数据,顺利返回后,正常显示到客户端页面。在了解清楚基础实现逻辑后,就可以开始梳理整理缺省状态的设计思路。



图1 缺省状态的场景梳理图


缺省状态包括:系统层、信息层、空白层。
系统层:指当用户请求服务器时,返回提示请求提交失败,并检测到失败原因时呈现的页面;例如:加载失败、服务器异常、无网络等;页面一般会有重新请求的快捷按钮。文案上可做失败原因的细分描述,也可节约成本使用网络异常的统一文案。

                    


                                               
信息层:请求服务器数据成功,但返回的数据异常的页面;例如:内容已删除、内容已下架、内容不存在;文案内容以提示数据类型的缺失为主。显示形式除了常有的全屏缺省图,还会出现在数据列表下单一内容缺失的缺省模块化的情况,例如:单一作品在书架上显示已下架。





空白层:请求服务器数据成功,但显示无数据;内容页在无数据时需要缺省状态进行表达;例如:页面空数据、搜索无结果等。空白页面属于正常网络显示场景,所以一般会在缺省页附带有相似属性模块的用户引导,争取用户重复消费的目标,满足用户的操作的诉求。



最后根据每个不同的缺省状态,梳理产品相对应的场景。逐一根据场景特点来设计页面内容。那缺省页的设计有哪些表现形式呢?


 2 缺省页的表现形式 

没有用心设计的缺省页无法给用户带来良好用户体验,并可能给用户带来困扰,如下图:某小众直播平台的拉新邀请页面,无邀请记录状态下没有任何有效反馈信息,用户不能明确得知到底是网络问题还是账号同步出错亦或者是没有一次邀请。正确的缺省页设计内容理应明确表达出符合用户心理预期的视觉场景表达(图形);和使用易理解和语法恰当的表达当前的异常状态(标题)甚至于引导用户解决问题的文案描述。



图5 缺省页的错误示范

2-1视觉图案+文案

此类缺省设计形式一般应用于表达系统性无响应或初始空白态的缺省场景。视觉图案一般使用app吉祥物或主色调延展出的icon或插画来表示缺省状态;文字:通常为“标题”或“标题+描述”结构;标题通常是表达出现缺省的原因;描述文案则说明结束缺省状态的解决办法,如“请检查网络是否顺畅”  等等。



               
2-2 视觉图案+文案+引导

此类缺省设计形式一般运用于需要用户引导操作来达到业务目标的缺省场景。在视觉图案+文案的基础上加入引导模块,主要作用于避免用户在数据边界的状态下,会因为无法达到操作目而提高的跳出率。引导模块的内容包括:相似属性内容,相似行为目标按钮或解决缺省状态操作按钮,加入引导,用户进行某项行为或者感知某些信息,对于功能的教学和使用频率的提升有着重要作用。引导模块的形式也是日新月异,逐渐变成新用户业务引导的作用,不仅限于页面平铺,也可以做成固定气泡微动效,例如:抖音的发布缺省页。

 



                                 
3 缺省页的设计技巧 

缺省页除了常规的提示型设计方法,还有许多其他的设计技巧,帮助用户体验在遇到困难,更好地安抚用户的情绪。这些设计技巧有些是替代原来的缺省内容,让用户有更多地消费空间与深度。有些是拓展缺省状态的补充内容,让用户不容易跳出页面,增加用户的消费时长。具体如下:

3-1 使用推荐内容

缺省状态中的空白层非常影响边界情况的用户体验,提出一种假设,是否可以刻意推荐相同属性的内容呢?这样的界面既不会显得苍白无力又可以留住用户的注意力。相似性的内容也可以解决用户目标的迫切性。所以说,这种方法非常适合内容型产品中使用。例如:新用户在打开电商产品的购物车时候,理应是空白无消费行为的操作记录。那么平台方通过用户画像与热门排行算法推荐了一个商品流。这样可以解决用户无目标性挑选的诉求,增加消费时长。至于产品如果确定用户画像的推荐算法,可以通过获取第三方登录的个人基本数据之后,才给我推荐了数据库内相对应标签的热门商品,这样推荐的精准度也会高些。 
             




3-2 使用缓存

是否使用缓存内容代替缺省状态?根据产品特性来判断,工具类、金融类等同类型产品不适合使用缓存;因为用户交互操作的数据必须保持实时性与真实性。而内容型、电商类等类型产品适合使用缓存来代替缺省状态;理由:用户消费内容的转化路径是先消费后转化的行为特点,不存在系统操作门槛,且缓存内容可以代替产品的缺省状态,安抚用户操作失败所带来跳出率过高的风险。

3-3 情感化表达

当缺省页给到用户时,通常省时省力的做法就是老老实实告诉用户当前的状态,最多配上一个具有通识性的灰色icon。但是,秉持着以用户体验为己任的时代,我们其实可以把缺省内容表达得更加生动形象一些。在这里会加入一些情感化的表达,而不是仅仅只是做到准确的目标而已,比如加上活泼的插图故事,或者把文案写得更加拟人化、喜剧化一些。这些配图在让用户明白当前的状态的同时,往往也能引发用户会心一笑,从而弥补空白页面带来的失落感甚至可以带给用户一些正面的情感。如下图:
                 



3-4 提供新任务

通常缺省页的引导模块都着眼于解决当前任务。如果碰到没有解决方案的情况(例如:404,服务器崩溃等)可以提供给用户具有情感共情的新任务,让他们暂时忘记无法达到目标的挫败感,又有体谅的情怀。帮助建立正向积极的品牌价值观。例如:访问腾讯网时访问失败的时候,网页除了显示404状态之外,还会显示腾讯“宝贝回家”的公益寻人计划。将缺省页与公益内容相结合,不仅改善到用户缺省状态。也贯彻腾讯价值观“用户为本,科技向善”的输出。一个好的缺省页也可以承担社会责任,让公益传播到每个角落。



图10 腾讯网404公益任务缺省页

结语:作为设计师有时会听到需求方表述“这种极少出现的情况,我们可以暂且不管它。”但是细节见真章,所有优秀的体验设计都必须照顾到方方面面的缺省情况。让每个用户的流量价值发挥到最大,产生相互信任的良好的品牌关系。这样的平台生态是良性的,这样的产品会更有流量转化的商业化价值。


转自:ui中国-腾讯动漫TCD

最近爆火的小宇宙APP,有哪些值得关注的产品细节?

雪涛

「小宇宙」是即刻团队开发的播客App,目前已上架各大应用商店,仅能通过邀请码使用,导致一时间微博上出现「一码难求」的情况,那它与其他播客App有什么不同?

内容推荐

进入App即展示「信息流」推荐,每日更新3条播客「信息流」推荐,听的时间越长,会推荐越多更加精准的播客内容。那用户如何判断推荐的单集是否有自己想要听的内容呢?如下图所示,页面上单集信息展示条目的空间较大,在首屏约能展示2条的单集内容,除了基础的节目封面、节目名称及单集名称外,小宇宙巧妙地通过将热门评论外显,辅以展示播放量及评论数量,引导用户点击进入二级页面,进而形成转化。

强大的搜索

不同于传统播客App仅能搜节目名称,小宇宙还支持搜索单集和用户,甚至是节目内页的内容也可以搜索到。对于那些「我对栏目本身不感兴趣,只想听其中的某一集」或者「我关注某个人或某个话题,想听听看关于他的一切」的节目,使用单集搜索功能可以更简单地直达所需。

让人惊喜的是,在节目内页长按选中任意词汇可以呼出「智能搜索」功能,这个智能体现在它允许用户选择用magi搜索和用互动百科搜索相关内容。这让我想到了Mac上一款很好用的工具PopClip(通过对文本内容的扩展来提升操作效率),小宇宙的智能搜索对于边听节目边扒关键词的「考据党」来说,无疑会大幅提升在听节目时获取资讯的效率。

更便捷的互动

在单集播放界面,除了常规的进度条拖拽、快速后退/前进等功能外,还有一个点赞功能,用户听到精彩的内容或引起共鸣的部分可以通过点赞进行互动,从点赞功能的反馈到进度条的高度的升起都能够进行实时的反馈,同时也可以帮助其他听众了解单集内容的关注点,以此为⽤⼾营造出符合他当时⾏为和感知的情景,可以达到提高用户的参与度的目的。

评论页的输入框常驻于页面底部,点击后输入框高度延伸,引导用户评论互动,此时用户如果是通过单集播放界面进入的评论页面,还会出现标记时点的选项,勾选后评论内容即带上了单集内容的时点。而时点高亮色+下划线的表现形式可以引导用户聚焦注意力和点击进行内容的收听,当其他用户点击带评论中的时点即可直接跳转至对应时间点播放单集内容,为⽤⼾之间的互动建⽴起羁绊,方便用户间的讨论交流,进而提升了点击率和单集的收听率。

另外,在用户输入评论时,输入框并不是以模态的形式出现,在用户评论的过程中依然可以滚动页面进行交互操作,这样做的好处在于不打断用户操作的连续性。以iPhone X的屏幕高度为例,除去标题栏+评论输入框+键盘高度外,留给评论本身的空间仅有大约1/3左右,在空间有限的情况下,用户滚动屏幕查阅感兴趣的评论或针对性进行回复的行为非常连贯,非模态的处理可以进一步降低用户互动的门槛。

这里有一个改进小建议,输入框内的预制文案可以换成引导性更强的内容或由系统自动生成一个场景适合的评论,这样不需要用户自己思考写什么内容,降低用户评论操作的成本,提高用户参与度。

小宇宙目前在社交上的尝试处于用户友好型状态,用户可以查看他人的播客订阅列表,发现同好,即「相近信息的收集爱好者容易获得共鸣」。如果这个有共同兴趣爱好的人刚好是用户收听的主播,就可以很容易拉近听众和主播的距离,主播对于听众来说不再是手机屏幕后面冷冰冰的声音,他更像你的一个朋友,你可以去了解他的喜好,讨论共同话题,更好地跟他进行互动。

情感化共鸣

不同的主题表达了不同情感,针对不同的社会群体的设计风格也会有所不同。

回到产品本身,小宇宙根据播客节目封面的主题色来适配不同播客信息页的视觉风格,营造出适合不同播客风格的氛围,以此来传达不同播客节目的特点。

若在热门的单集下评论,且评论点赞数最高,小宇宙领航员(官方账号)会给你留言,告知「你的评论上首页啦!」,通过这种与用户互动的方式激起⽤⼾的情感认同,提升用户评论的积极性。

点击「加入播放列表」,通过动效形式给予用户反馈,让信息的展示更生动自然,为产品增添趣味性的同时,给予用户更美好的操作体验。

下拉刷新动效中以「宇宙」图形为载体,将产品的Logo融入了其中,赋予产品独有的个性和灵气,让用户切身感受到这是一个可以探索的「宇宙」,而不是一个冰冷的工具,在减少用户等待过程中引发的负面情绪的同时强化了品牌形象。

可以改进的地方

产品中使用了较多无文字按钮,对于初次使用的用户来说存在一定认知负荷,不知道这些都是什么功能。

存在相同样式的图标承载不同功能操作的问题:「播放列表」功能在「我的播客」页中点击后是加入播放列表操作,而在播放列表模态弹窗中,点击后进入播放列表的编辑状态,同个样式的按钮承载了不同功能操作,容易引起用户困惑,带来冗余的学习成本。

当你收藏了一篇文章,收藏按钮状态从「收藏」变为「已收藏」,点击「已收藏」可以取消收藏状态,这是用户对于两个状态切换已有的认知。而小宇宙的加入播放列表功能,在点击加入播放列表后,再次点击「播放列表」按钮,会提示「已在播放列表」,而不是通常认知中的「取消加入播放列表」,容易带来认知错误。

列表右侧的「已订阅」按钮,视觉感知上像是不可点的状态,点击后提示「已取消」,再次点击提示「订阅成功」。对于有明显状态变化的功能性操作可以省去toast,这里通过「已订阅」和「订阅」状态的按钮样式变化已经给予用户清晰的传达反馈,再次提示反而多余。

小宇宙的体验分析就到这里,总的来说虽然存在一些需要优化的细节(毕竟还处于邀请码体验阶段),但是设计师可以学习的设计亮点有很多,感兴趣的小伙伴可以下载体验一番,也欢迎大家一起留言交流。

语音交互中的“等待体验”研究

分享达人

语音交互是最自然的人机交互方式,它极大地降低了人们与机器交互时的学习成本,已成为非常重要的人机交互方式。


回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。

 


进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然语言输出能力。感知能力使机器能听得懂人类语言,认知能力使机器能思考如何回答人类问题,自然语言输出能力使机器可以像人类一样表达——三种能力的综合运用将人机交互带入语音交互阶段。语音交互是最自然的人机交互方式,它极大地降低了人们与机器交互时的学习成本,将人机交互综合效率带上新的台阶,已成为非常重要的人机交互方式。

“等待体验”——语音交互体验的三分之一

生活中人与人的对话场景,对话是由“向对方说出一句话”、“等待对方回复”、“对方给出回复”三个阶段不断循环构成。其中“等待对方回复”是对话体验的“三分之一”,会对回复的满意度造成直接影响。在等待回复阶段,如果对方处于认真思考的状态,会让我们觉得被重视;然而,如果在等待过程中对方的注意力不在对话本身,即便对方给出的回复再好,我们也会心存疑虑。



对应到人机语音交互中的三个部分——“输入体验”、“等待体验”、“回复体验”,“等待体验”同样处于整个体验循环链的中间环节,在语音交互体验中起到了承上启下的重要作用。但是,关于语音交互中的“等待体验”在行业尚未被系统的研究,依旧处于模糊状态。

 

1. 响应时间一定是越短越好吗?

数字性能管理平台Dynatrace对用户浏览网页的行为进行了研究,发现当网页加载速度提升0.5秒,可促进用户在网站的行为转化核心数据提升10%。因此,在网页设计和App设计中,尽量缩短等待时间是产品设计的不懈追求。

 

不同于基于视觉的交互,语音交互天然附带情感属性。然而,情感的体验是复杂的,它不只受效率这个单一变量的控制。大多数情况下,在生活中人与人对话时,一个过快的回答会给用户带来轻浮感和抢话感,而一个过慢的回答会给用户带来迟缓感和愚钝感。


那么,在语音交互中,究竟什么样的响应时间能有最佳的体验呢?响应时间的体验趋势是怎样的呢?

 

2. 等待体验受哪些变量的影响?
在视觉设计领域,当设计页面的loading态时,为降低用户的跳出率,设计师时常会通过给出进度条,或采用趣味性的情感化设计来消除用户的不安情绪。

 

但是在语音交互领域,语音的承载体是无形的,或不确定形态的,我们甚至没有承载loading态的界面。在这种情况下等待体验又受哪些变量影响呢?影响的程度怎样呢?

 

综上,可以说在语音交互领域,等待体验虽然重要,但目前仍是“一团迷雾”。鉴于此,我们以目前语音交互的主要载体——智能音箱产品为例,对AI产品中的等待体验问题进行专题研究。

 

二、智能音箱的等待体验研究

目前的智能音箱,主要采用先语音唤醒后输入指令的语音交互流程。鉴于此,我们可以将智能音箱的使用过程分为两个主要阶段:

1)唤醒阶段:用户通过指定的唤醒词将音箱从等待态转换为就绪态,音箱被唤醒后才可以接收用户的语音指令。

2)用户请求及反馈阶段:用户给出语音指令内容以及智能音箱反馈结果满足用户的需求。

 


针对这两个阶段,我们先后通过以下三个实验进行研究。

实验一:唤醒阶段的响应时间对等待体验的影响;

实验二:用户请求及反馈阶段的响应时间对等待体验的影响;

实验三:视觉、声音等不同反馈方式对等待体验的影响。

下面我们对每个实验的结论进行逐一详述:

实验一:唤醒阶段的响应时间对等待体验的影响

为了全面考察唤醒阶段各种因素对等待体验的影响,在实验中,我们为用户提供了不同唤醒响应时间和不同唤醒反馈方式的智能音箱。用户完成实验任务后,需要对音箱的唤醒响应速度进行评价(5点量表:太快了,接受不了;有点快,能够接受;刚刚好;有点慢,能够接受;太慢了,接受不了)。



实验一的结果表明最佳的唤醒响应时间与唤醒反馈方式有关,不同唤醒反馈方式下,最佳响应时间不同:

1)当唤醒反馈为"灯光"反馈时,唤醒响应速度越快越好,在200ms时,用户响应舒适度最高(对响应时间评价为刚刚好的用户比例),73%的用户对速度满意。

2)当唤醒反馈为"灯光+音效"时,唤醒响应速度的舒适时间为300ms左右,76%的用户对速度满意。

3)当唤醒反馈为"灯光+人声"时,唤醒响应速度的舒适时间为500ms左右,74%的用户对速度满意。

(注意:本次实验设置了市面上主流的三种唤醒反馈方式:灯光、灯光+音效、灯光+人声,以给不同反馈情况的响应时间感受作参考,但对最优反馈方式,除了响应时间还受其他因素影响,将另着篇章探讨。)



实验二:用户请求及反馈阶段响应时间对等待体验的影响

 

由于用户请求及反馈阶段的响应在技术实现和用户预期上,与唤醒阶段的响应存在差异,因此我们通过第二个实验对用户请求及反馈阶段的最佳响应时间范围进行研究。在实验中,我们为用户提供了不同响应时间设置的智能音箱。



实验二的主要研究发现:

1)1250ms以内是用户认为响应速度较优的区间,其中650ms为最佳体验值。在450ms时,少量用户觉得响应速度太快了,用户会感觉到紧迫感和压力,难以接受。

2)在1450ms时,有53%的用户开始感觉响应有延时,但仍能够接受。

3)从2150ms开始,有20%的用户认为音箱响应太慢,不能够接受。我们认为20%的用户不满意,已经不足以被称为一个优秀的产品。



实验三:视觉、声音等不同反馈方式对等待体验的影响

由于目前市场上的智能音箱在请求反馈阶段的响应时间普遍在1.5秒以上,并没有达到实验二研究的理想响应区间。因此,我们通过实验三进一步研究反馈方式设计对用户响应速度感知的影响,我们为用户提供了五组具有不同反馈方式设计的方案。



在实验三的五组方案中,每组方案分别进行了不同响应时间设置。



实验三的主要研究发现,不同反馈方式设计会影响人们对音箱响应速度的感知



1)1250ms以内,方案D感受较差,人声反馈会产生抢话的感受,部分用户认为音箱响应太快。



2)1350ms到2150ms,方案D、E感知舒适的用户比例较高,加入人声/音效后,如方案D的语音应答“好的”,有助于缓解用户延迟感受,提升速度感知体验。



3)在3150ms及以上的响应时间,响应方式设计对缓解延时的作用已经不明显,应该尽量避免此类情况发生。


此外,实验三还发现响应速度预期与用户性别、任务类型有关。与男性相比,女性用户对响应时间容忍度更低,她们最长在音箱无反馈时可以容忍的平均响应时间长度低于男性,即她们希望在更短的时间内得到音箱的响应反馈。



与音乐类、问答类等任务相比,用户对控制类任务的响应时间容忍度更低,用户希望在控制类任务中有更加及时的响应反馈。



三、小结

本文针对语音交互中的等待体验进行了讨论,并以智能音箱为例,重点对唤醒阶段和请求反馈阶段的响应时间和反馈方式进行了人类工效学实验研究。由于实验设定的条件和样本数量等限制因素,实验研究结论可能不能代表所有智能音箱用户在家居环境的全部感受,但希望通过我们的研究和探索,可以指导人工智能语音对话产品响应时间和反馈方式的设计,帮助打造自然和的语音对话体验。

 转自:站酷-DUBEST

写一个脚本,将所有js文件后缀批量改成ts后缀

seo达人

做项目的时候准备把js项目重构成ts项目,需要把文件后缀改成ts,一个bat脚本搞定,命令如下:

@echo off

rem 正在搜索...

for /f "delims=" %%i in ('dir /b /a-d /s "*.js"') do ren "%%i" "%%~ni.ts" rem 搜索完毕 @pause

把脚本放到根目录下,双击运行完就可以了

2020年最火的新拟物化设计,需要思考的五个方面

雪涛

新拟物化设计只是一种风格吗?

最近正火的新拟物化风格(Neumorphism)在 2019 年底,设计师 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不仅被选为 2020 年界面趋势,又称为 soft UI。但这种风格在真实世界落地时,可视性上受到许多争议。

确实,新拟物化风格它算是一种风格,但又不是只有视觉上的风格这么简单,它延伸出来的议题,其实是扁平化跟拟物化之间的战争。

拟物化与扁平化的瑜亮情结

拟物化是 Apple 在早期设计中大量使用在界面上呈现对象属性、材质的方式。然而在 2013 年 ios7 发布时,Apple 开始为了画面简洁大量将界面元素扁平化,紧接着 Google 在 2015 年发布了 Material Design,宣示扁平化在 UI 设计中扮演着主导趋势的角色。2020 年真是百家争鸣的一年,首先是 BMW 发表的扁平化新 logo,接着是这一波新拟物化的反击。究竟代表新拟物化可能夺回界面风格主导权?或仅是 2020 年昙花一现的视觉风格呢?

扁平化VS 拟物化,我们可以思考的五件事

我认为新拟物化的概念其实是融合扁平化与拟物化的集大成,它建立在扁平化风格之上,又将组件带入了拟物化的元素,提高用户的判断力。不过在纠结于扁平化与拟物化哪个比较好时,有五个议题是可以让 UI、UX 设计师去思考的。

1. 多数年长者对于扁平化界面提供的视觉元素暗示无法理解。

大家身边一定都有那种已经把 Line 操作得滚瓜烂熟,但是每次要用 Line 加好友时,还是不知道怎么操作的长辈。最早期当人类还没进入屏幕时代前,我们所使用的界面大多是实体产品上的控制界面,而这些界面上的每个开关、按钮,都只有一个输入源,对应到一个功能(一对一),我们因此就这样与产品进行简单的交互动作。然而在屏幕上这个简单的交互模式被改变了,像是用键盘跟鼠标可以辅助我们,在系统中进行抽象与复杂的无限多任务(一对多)。

△ 你偏好用哪个微波炉加热咖啡呢?Image credit:Bence Mózer

让我们再来看看对长辈最重要的 Line 加好友功能,我们先不论这个功能在整个 APP 中被埋得多深,因为找到加好友的入口真的对长辈来说是看缘分~

在我引导长辈找出二维码画面的经验中,发现他们都是用死记的方式,把下一步要按哪个键、在画面的哪一个角落,记下来。但由于加好友功能并不是每天都会操作的,因此在学习上的效果,就像是高中时没有把课文理解、吸收就硬死背下来一样困难。

我们来看看「显示行动条码」在扫描二维码画面中,是否真的具有可以被点选的暗示。在扫描画面背景单纯的时候(如下图情况 1),「显示行动条码」的 button 底色是有透明度的黑、扁平化后没有阴影提供可以按的暗示,不过因为有大圆角的造型,勉强还是可以诱使人点点看;但一般情况下,扫面画面背景不会那么理想的无其他干扰(如下图情况2),button 原本的透明黑完全融入了后面的背景,这时候只剩下「显示行动条码」的文字,已经不具备可以被点选的提示。

△ 情况 2 中,显示行动条码的 button 看起来可以按吗?

扫描画面中的外框有一定的透明度,在可操作暗示(affordance)上已经不具有实体的特征,如果又放上有透明度的 button 在上面,让人充满不确定性,年长者无法将这样的情况与现实生活中的经验联想在一起。

2.以颜色做区别真的是最好的方法吗?

你知道同一个颜色,每个人看起来会不一样吗?而不同颜色在不同环境下,却又能看起来像同一个颜色吗?

不同意新拟物化设计的人中,有人主张运用颜色的引导用户操作界面的色彩元素不能从界面设计中抽离。但事实上,不同年龄、性别,视觉锥细胞中的活跃程度不一样。同一个颜色,不同人看,明度跟彩度会有差异。基于种种现实,由色彩的引导是好还是坏呢?

例子1:关于人类的视觉锥细胞

同一个颜色,不同人居然会看成不同颜色?

为什么阿嬷喜欢买大红大紫的衣服?这个偏好除了受到个人喜好影响外,也关系到阿嬷视觉锥细胞的活跃度。老年人在上了年纪后,部分视觉锥细胞开始退化,因此对于蓝色、绿色这类冷色系的颜色,老年人会开始接受不到这个区段的光带来的刺激。因为视觉锥细胞对冷色系的刺激降低,导致阿嬷在菜市场逛街时会被偏暖色系的物品吸引。所以会买热情系服饰不是阿嬷本人的意图,而是老化的锥细胞在作祟。

例子2:关于学习观察颜色这件事

不同颜色居然看成同一个颜色?

不同颜色却看起来很像,有可能是光线造成,也有可能是使用者必须学习去观察才知道的。日本的 JR 跟 Metro 系统,有着完整且细腻的视觉辨识系统。设计师理想中的情况是,我们将每条路线定义成不同颜色,可以让使用者更容易学习辨识路线。

但实地走访过东京的地下铁跟 JR,常常会发现跟错指示,才发现是潜意识辨认错文字或是颜色。我自己遇到过的经验是,在新宿站想要找都营大江户线时,因为在改札口看到了同样粉红色的标志,原本已经要哔卡进去,才发现那是京王新线的 IC 入口标志。

△ 新宿驶的改札口前,有两个同为粉红色的引导指标

所以说,高龄者或是天生视觉锥细胞有缺陷的人对于颜色无法清楚辨认外;大部分人可以借由学习来增强色彩辨识,除了可以对相似颜色进行更细节的判别外,也可以学着辨认不同光线(暖光、冷光)下造成的色彩差异。

但是,当我们在设计中,迫使用户学习、习惯我们制定颜色的意义。可能会在新手 onboarding 时造成适应上的负担,也有可能让他们在使用别的系统造成错乱。

3. 对于颜色被定义的意义各个文化、区域、种族都相同吗?

在不同文化之下,对于色彩的观察与运用也不一样,举个大家可能都有发现的例子,当你在不同城市旅游的时候,有没有发现不同城市的优先座颜色不一样?你能猜得出来,哪一个是台北捷运上优先座的颜色吗?

△ Image credit:wikipedia.org

当颜色在不同约定成俗下,有不一样的意义,又刚好缺乏文字或图像引导的时候,可能会让使用者解读成不同的意义。例如:红色具有热情、喜气、带来财运的意涵,但同时又具有危险的警示意义。

当设计师觉得红色可以引起使用者的注意,而把 button 设计为红色时,却可能让没看清楚文字的用户,认为按下这个 button 是危险的举动。

△ Image credit:photoAC

4. 光与影(明亮面跟阴暗面)给使用者的可操作暗示(affordance)一样吗?

新拟物化设计中假设了人在使用界面时,会运用与生俱来能判断光影效果的能力。这是真的吗?让我们来做个小实验:

为什么在台北车大厅席地而坐的人,会选择坐在黑色的棋盘格上呢?如果根据人类从大自然中所得到的可操作暗示来说,有阴影的地方可以提供人类休憩的功能,例如树阴下的阴影处。

△ Image credit:中央社、wikipedia.org

如果这样说得通的话,代表光亮的区域对人来说是可以行走、活动的地方;而阴影处则是休息与暂停处。

根据以上的推测,我们做个小实验,把车站中的 2 个不同区域的地面上分别涂上白色与黑色,来让受测者选出哪些区域可以暂停,哪些区域可以走动:

问题A:假设你要在车站的大厅等朋友,你会选择站在哪里等他呢?

假设:受测者会选 2,因黑色区域(影子)让人觉得可以暂停、休憩。

结果:符合假设

1:白色柱子前的白地面 32.5%; 2:白色柱子前的黑地面 67.5%

问题B:哪一边的楼梯是往上的方向呢?

假设:大家会选 1,因为黑色区域(影子)让人觉得可以踩上去。

结果:符合假设

1:白色立面+黑色地面 61.3%;2:黑色立面+白色地面 37.8%

由实验A、B可得证,虽然实验结果符合先前假设,大多数的受测者可从阴影判断要走哪条路,但还是有不少(30%以上)的受测者不认同。所以在用使用光亮阴影的设计暗示时,还是会遇到使用者感知的不同的问题。

5. 深度认知不同是导致判断物体距离的能力受影响,也就是所谓的视差。

新拟物化设计中,将界面组件以类 3D 的方式呈现,使用户在操作界面时必须去感知界面组件的远近以判断重要性,而在深度认知上有障碍的用户此时就会受到挑战。用户可能会遇到,不知道哪个组件才是浮在最上面、最重要的;若界面中的组件有三种以上的阴影深浅,会让用户在判断时要更花脑力判定物件在立体空间中的深浅。

总结

新拟物化风格中的光影表现提供了使用者人类最原始的操作意图:可操作暗示,是一个好的出发点,然而必须针对 APP 性质的不同而有所改良。在设计较走生活风格理念,而操作界面不复杂的 APP 时,非常适合用新拟物化风格来诠释:例如电子书服务、音乐软件;但在设计功能导向,且有大量信息化图表的界面,例如:移动网银,还是需要以扁平化的界面为主要信息架构,新拟物风格可能会是极少量界面元素中,拿来呈现生活中真实物的质感(例如:用户的信用卡)、或是作为亮点(例如:优惠卡片)的呈现方式,此类型 APP 中最重要的卡片与图表对于此种风格,一定要谨慎使用,必定三思三思再三思。

文章来源:优设    作者:Muse Chang

前英语流利说设计总监:从民房到纳斯达克的理想主义设计路

雪涛

可能对于一些人来说,流利说是一份工作,而对于我来说,流利说却是一段深刻的旅程,改变了我的生活,也塑造了我的性情、人格。从 2013 年作为第 7 号员工加入流利说,为之效力6年,从最早期民房创业,到纳斯达克 IPO,这段经历,我自认为颇具一个理想主义者的传奇色彩,有些故事,是我愿意,也值得分享的。

老王(流利说 CEO 王翌)以前总借他恩师的话说,人这一辈子能做一两件漂亮事就不错了。我觉得,流利说,算我过去做的一件漂亮事。以前,我也常和同事说,如果你现在一切的经历,在日后不足以用故事说与人听,可能你现在经历的还不够痛,你还不够刻苦。所幸,过去的经历,给我留下了几个故事。

这一次,我想分享当初选择加入流利说的故事,分享这个过程中我的思考、行动。一方面,单纯的想记录这段故事。因为随着年岁增加,记性却是退减的。文字是最好的保存记忆的方式;另一方面,常常遇到设计师朋友们聊如何选择工作机会,遇到创业的邀约机会怎么判断、决策的问题,我希望这个故事,能给遇到此类问题的朋友一些启发。

好,听故事吧。

缘起

2012 年,我退出了联合创立一年半的公司。而在一年半以前,我从阿里云公司离开,放弃了一笔可观的 RSU 股票,当时,我是阿里云最早的 28 位设计师之一。结束创业后,2012 年 11 月 14 日 19:17,我发了一条微博,表示想看看新的机会。这条微博,有 16 个转发。其中有 1 个转发,被流利说联合创始人 Ben 看到,他把这条微博转发给了联合创始人王翌(流利说 CEO)。

在此之前,我和 Ben、王翌素不相识,网友都谈不上。Ben 之所以看到那条转发,是因为他关注好友里面,有一位正是我一款浏览器插件产品 – 微博急简 的用户。

有一颗创作的心 – 微博急简

△ 使用「微博急简」前后,微博主页的对比

容我多说几句,介绍一下微博急简这款产品。2011 年左右,新浪微博的使用体验,非常糟糕,逐步商业化带来的各种广告,让原本不好的体验,变得更加让我无法容忍。很快,一个叫 stylish 的 Chrome 插件工具,在微博设计/技术圈子里流传。用户安装 stylish 插件后,通过修改 CSS 来定制自己的微博体验。同时,你还可以把 CSS 分享给其他用户。

这太好玩了!我按自己的使用喜好,给自己订制了一套极简体验的新浪微博。玩了几天后,我决定做一个改善微博体验的浏览器插件。为什么要重新做一个插件呢?我认为,stylish 的使用门槛、操作成本都太高,仅仅是专业人士的玩具。我希望普通人,也可以通过一键安装浏览器插件,获得舒服的微博体验。因此,我给插件取名 – 微博急简。看得出来,我是多么急迫的想简化微博的体验。

两周后,微博急简就上线了。几个版本后,体验就趋于稳定。高峰的时候,有 10 万左右的用户使用,相关微博话题有 600 万。有很多行业内的大咖成为我的用户,像冯大辉、少楠、方军等。获得了很多用户的好评,最让我嘚瑟的是现任丁香园产品总监少楠的评价:用一个插件秒杀了新浪UED团队。

通过微博急简这个产品,我想分享以下几点:

  • 设计师应该对体验保持敏感度。不要被体验糟糕的产品破坏了味蕾;
  • 如果有机会,就要试图去改变它;
  • 出于兴趣,单纯的为自己做设计、创作。即使没有金钱回报;

这三点,既是我的观点,也是我的特质。正是因为这样的特质,才遇到后面加入流利说的契机。

面对首次邀约

回到故事主线。

我发完那条微博后的 1 小时,王翌就给了我微博私信。老实说,今天是我第一次注意到这个「相隔 1 小时」的时间细节。王翌的行动力、执行力,对于人才的执着追求,着实让我佩服。这不仅仅是对我,对流利说早期的员工,以及后面的核心员工,都是如此。

他的消息里,有三个关键词:exciting、团队成立 2 个月、移动教育。对于这条消息,我礼貌的回应,但内心其实是「呵呵」的。即使,我看到他 LinkedIn 主页上 Google PM 的经历,很亮眼。呵呵的原因是,这个公司太早期了,才两个月。2013 年,移动教育是啥东西?而且,创始人还这么不务实,动不动就标榜是一个 exciting 的机会。

虽然,王翌后续一直联系我,但我基本是忽略的状态。期间,我短暂的加入了一个朋友的创业公司。2013 年 1 月底,春节前的几天,我再次收到王翌的私信:流利说 App 即将上架,想约我再聊一聊。于是,我们约在文二西路白鸦(有赞创始人)的贝塔咖啡。

△ 贝塔咖啡馆

那天晚上,王翌给我展示了流利说最早的 App,程序其实还不太稳定。但他仍旧极具信心的表达了对于语音互动的看好,以及发出盛情邀请。我对这个 App 的产品与交互的第一印象,是好的,但对于王翌的第一印象却是复杂的,既觉得这人有激情、有想法,同时又觉得不太靠得住,夸夸其谈,他太会说了。

如何设计深色模式?这3点因素需要考虑

雪涛

深色模式该从何处着手设计又要考虑哪些因素?一起来看看~

其实回顾我们常用的APP,有很多都更新了深色模式,而且每个APP对深色的定义和设计都有差异。

实际上深色模式已经来临,而且在很多产品中都能发现它的身影,之后也会愈加流行。那么设计师面对深色模式,该从何处着手设计又要考虑哪些因素呢?

本文就为大家提供一份全面的总结。文章目录如下:

选择深色模式的原因

1. 需求趋势

过去一年以来,Android 10和iOS 13上都适配了深色模式,而且Apple和Google也一直致力于将资源和注意力投入到深色模式中,这也让深色模式备受用户的关注。

2. 专注内容

深色模式在弱光环境下具有更好的可读性,让我们更专注于眼前的屏幕。同时深色的背景会降低内容周围元素的影响,特别是以图片和视频为主的应用,让用户更专注于内容。

作为内容消费型应用的Netflix ,把深色背景作为默认设计样式,深色的设计让用户更能集中注意力,延长使用时间。

3. 减轻刺激

相对于其他颜色,深色系的设计在夜晚看着最舒服。可能晚上玩手机不用担心光线太刺眼,但是深色模式对护眼并没有什么帮助,只能说可以减少对眼睛的刺激。

4. 提高续航

深色模式更省电只适用于OLED屏幕。OLED面板的每个像素点可以单独发光,当使用深色模式时,部分像素点被熄灭,只点亮部分像素,屏幕的一部分相当于处在休眠状态,所以会更加省电。

平台设计指南

1. iOS平台深色模式设计

在深色模式下,Apple重新审视了iOS中UI样式和颜色的含义,让我们来看看在iOS上设计深色模式带来的变化。

语义化颜色(Semantic Colors)

所谓语义化颜色,就是不再通过某一固定的RGB色值来描述颜色,而是根据用途来描述,让界面元素可以自动适配当前的外观模式。

淘宝团队就参考了苹果官方的适配建议,通过语义化颜色的方式进行适配,使适配成本大幅降低。设计师根据不同UI元素的特性先期制定颜色语义化规则,进而技术在框架层面通过「颜色自动反转」技术实现颜色反转。

系统颜色

除了语义化颜色,Apple还提供了9种预定义的系统颜色,在浅色和深色模式中,这些颜色会动态变化,支持整个系统的外观,同样也可以自适应选定的界面样式。

模糊与动态效果

在iOS13上,苹果引入了4种模糊效果和8种动态效果,它们自动适应iOS界面样式。这是在浅色和深色模式下不同的模糊效果。

苹果还在iOS深色模式排版套件中引入4种动态效果,其中3种为叠加效果,1种分隔效果。

2. Android平台深色模式设计

谷歌提供了广泛的文档支持,帮助设计师了解深色主题如何在Android生态系统中运行。

Elevation(阴影)

UI界面元素间的投影最能让用户清晰地感知用户界面的深度。在设计深色主题时,组件将保留与浅色主题相同的默认阴影组件。Elevation越靠上, 颜色就会越浅。

无障碍性与对比

深色UI设计中的背景应足够暗以显示白色文本。设计师要注意背景和文字之间至少使用15.8:1的对比度。这样可以确保将正文放在最前面时,能通过WCAG(Web内容无障碍指南,使网站内容更容易访问)的AA标准。

颜色

深色模式必须避免饱和的颜色,以免引起眼睛疲劳。相反,设计师应专注于使用不饱和的颜色,以增加清晰度。主色和辅色的选择还取决于对浅色和深色UI主题的考虑。

文字不透明度

在深色背景上设计浅色文字时,高度强调的文字不透明度为87%;一般提示文字的不透明度为60%;禁用文字的不透明度为38%。

深色模式的设计要点

苹果和谷歌都利用各自的设计原则,为深色模式设计做准备工作。在实际设计过程中,不单需要这些基本原则,更重要的是要注意设计深色模式的实用要点。

1. 背景灰度

设计深色背景时不是简单的把白变成黑,而是对背景使用比较暗的色调,以减少眼睛疲劳。

在浅色模式中,我们倾向于用细微的阴影来传达界面深度,使用起来更加自然。但是在大多数深色模式下,阴影的效果并不明显,通常用颜色的深浅来传达界面的层级关系。

关键点:注意应用场景

在知乎的深色模式中,背景的设计从深到浅使用了三级灰度,让页面的层级更分明。

一级灰度的应用场景主要是大的背景色,使用面积相对比较大颜色最深;二级灰度的应用场景是选项的背景色,根据选项的数量设置使用面积,位置排布比较灵活;三级灰度的颜色最浅,使用面积最小,通常用在分割线中。

2. 文字对比

白底黑字和黑底白字带给我们的用眼体验是不一样的。设计不当的深色模式常常因为强对比而变得很刺眼,同时为了提高对光线的吸收虹膜会张得更开,更容易造成眼部疲劳。

关键点:文字间的对比

深色模式中,文字的用色通常是纯灰色,不同位置的文字例如标题、正文和注释使用深浅不同的颜色作对比。上图是深色的微信,就利用这种方法来区分不同文字内容,展示文字层次关系。

另外每个应用的定位都不一样,界面中想传达的信息也有差异,所以要注意不同的设计思路。

关键点:文字与背景的对比

已经更新深色模式的应用主要分为两大类,一类属于工具型应用例如QQ、微信、百度网盘等,这类应用追求的是信息的有效传达,在设计时文字内容和背景色的区分比较明显。

上图是百度网盘的深色模式,可以看出来标题文字与背景有很明显的对比,保障了用户使用时的可操作性和易读性。

这样的设计不需要用户过于沉浸式的阅读,只需要帮助用户快速找到有用的信息并方便使用,这是工具型应用在设计深色模式时必备的原则。

另一类属于内容型应用例如知乎、简书等,这些应用更注重沉浸式的阅读体验,因为用户通常会在某个界面中停留很久来查看内容,所以需要文字与背景的低对比度为阅读营造柔和的氛围。

简书的深色模式中,文字与背景的对比关系就设计得很弱,整个界面呈现出灰色调,这样的设计有助于在弱光环境下的长时间阅读和浏览。

3. 图标/按钮

深色模式应该避免使用特别鲜艳的颜色,较高的明度和饱和度会与深色背景形成强烈的对比,让页面的可读性变差并加深刺激。

关键点:降低色彩明度

在由浅变深的过程中,知乎对改变了界面中所有图标的颜色。界面里面的图标和主题按钮的色彩,在色相、饱和度上都没有变化,但是明度被不同程度的降低,保证了在不同光照条件下的内容的可读性。

这是深色模式中处理色彩的一种方法,虽然在浅色界面中,我们更喜欢鲜艳的颜色,但明度低的颜色更适合深色主题。匹配这两个模式另一个比较好的方法是创建互补的色板。

结论

无论深色或者浅色,都只是产品向用户呈现的一种界面状态,最终的目的是为了更良好的使用体验。

不管选择什么样的模式,都要记得从产品自身出发,并牢记这几点:

  • 了解趋势:熟悉深色模式流行起来的原因,以及苹果和谷歌对此的相关研究。
  • 找对方向:在准备设计深色模式前,要先了解清楚产品对应的平台、满足的标准。

  • 掌握要点:设计深色模式更多要求的是颜色上的变化,利用灰度色阶拉开背景颜色,把握文字与背景间的强弱关系,适当降低图标的明度和饱和度。

文章来源:优设    作者:Clip设计夹

设计手记:给设计师参考会不会限制设计师的思维呢?

蓝蓝

蓝蓝设计 魏华写

     在承担ui设计项目中,常常碰到一些客户不给设计师看己往的软件或本公司设计师设计但没有被客户认可的设计方案,怕限制设计师的思路。那究竟给设计师参考会不会限制设计师的思维呢?


     实际上不会的,这是更多维度了解客户的思考和角度,排除己被尝试过的选项。


     在进行一个ui 设计前,深度方面应该要了解业务,用户角色,环境生态,交互流程,关键功能,核心价值,用户体验的峰值点和难点在哪里…….总之了解的越深越好。


     宽度方面,要看到竞品分析,行业趋势,国内外优秀案例欣赏,专业文章观点,应该是可以拓展设计师的思维。


     设计最核心的目标应该在于解决问题,而不是单纯的让界面好看。


      优秀的设计师要明确解决问题的目标,博采众长,独立思考,看众多的竞品是看众多的解题思路,多方位角度看问题。各产品资源,核心技术不同,取舍不同,理解信息架框,运营思路,用户特征,技术实现可能性,不会只照着您给的资料比猫画虎。


       因此,我认为,放心的给设计师参考资料吧,互相的了解,沟通越多,越容易出好的作品。



这五张图是最近蓝蓝设计的稿件,展现从一个模糊的概念性需求到一个可视化概念性方案的设计过程。

    点击查看原图

点击查看原图


点击查看原图

2看文章.png点击查看原图

循环设计,用户体验如何呼唤时代变革

分享达人

关于循环设计,可持续发展是商业领域非常关注的话题,作为UX需提前转变思维,给企业带来更多价值,一线大厂已在运用这种思维


本文共 3589 字,预计阅读 10 分钟

译者推荐|本文从“可持续”和“设计”的两点谈起,来论述从线性经济向可持续经济的转变,以及“可持续设计”的四个主要阶段:理解、定义、制造、发布。

“循环设计”不是为了追求时髦或者抬升设计地位,而是将这个已经日益庸俗化的“设计”冠为自己的定语,是设计本身发展所趋,以及可持续发展所需,设计界需要对自己的责任有所承担,形成一个全局观、系统性看待设计问题的方式。让回收利用和可持续发展成为一种规范,从而做到一劳永逸。

我们生活在一个呼唤变革的世界。在过去的50年中,现代社会所依赖的漫不经心和无休止的消费是不可持续的。我们从小就不关心自己的事情。如果有什么东西坏了,我们也就不修了。产品被设计成用完直接丢弃,而不是去修复。数字产品也不例外。然而,为了解决这些问题,出现了一种新的思维方式:循环设计(可持续设计)①。(益达说:其实这个理念和风格已经存在了很长的时间,大多应用在不为大众所知的能源、材料再生流程之中,然而随着时代的发展,循环设计可以变得更加普世。)

①注:循环设计是20世纪80-90年代产生的一种设计风格,他又称回收设计,是指实现广义收回和利用的方法,即在进行产品设计时,充分考虑产品零部件及材料回收的可能性,回收价值的大致方法,回收处理结构工艺性等于与回收有关的一系列问题,以达到零部件及材料资源和能源的再利用。它旨在通过设计来节约能源和材料,减少对环境的污染,使人类的设计物能多次反复利用,形成产品设计和使用的良性循环。

那么,循环设计方法意味着什么?在数字产品上要如何使用?在回答这些问题之前,首先,我们需要仔细观察我们是如何构建我们的世界,为什么这个世界已经不可持续了,并且要理解环保世界的需求是如何改变我们的思维方式,促使我们渴望从线性设计模型转变为循环设计模型。


向循环转变


我们的经济主要基于“按需配置”流程之上。在此线性系统中,我们构建了会在一段时间后淘汰的产品,并且将其组件视为垃圾。与此相反,循环设计方法将产品的生命周期视为一个闭环,其中资源不断地被重新利用。


在“经典”线性模型中,产品经历了生产、消费和破坏的各个阶段,最终以浪费告终。在设计一款循环产品过程中,我们使用的方法包含四大阶段,这四个阶段形成了一个闭环,并形成了一个恒定的循环,在这个循环中,不仅仅只有闪闪发亮的、新的,未使用过的材料才被受欢迎。

 

循环设计方法的四个阶段是:

理解 / 定义 / 制造 / 发布



当我们同时看线性设计和循环设计模型方法时,有一点吸引人的是,开始设计东西的时候,方法的差异。从只是生产某种东西,到对我们将要生产的产品做出深思熟虑的决定,以及在实施过程中付出的努力和关心,这是一个大转变。


看看我们现在的立场


为什么做出这种转变如此的重要?我确信每个看新闻的人都听说过气候变化。NASA 致力于解决环境问题,因此我们都可以非常详细地了解人类行为和无限增长对我们生态系统的影响。


但好消息是我们不必继续这样做,因为我们可以很容易从数字世界中“产生”方式中学习事物的产生。电力废弃物已成为现代世界的主要废弃物来源之一。大量的手机和电脑被扔掉,随之经济是建立在每年都有新东西的基础上的。


当您的手机屏幕意外碎裂时,我们该怎么办?我们知道如何处理它吗?我们知道如何修理吗?我们并不知道……但是幸运的是,有些设计师对此问题提出了解决方案。Fairphone② 是一种合乎情理,模块化的智能手机,其组件数量很少,可以轻松更换和回收。大公司也应朝这个方向迈出一步,让回收利用和可持续发展成为一种时尚和规范,一劳永逸。

② Fairphone:这家公司生产的手机希望实现全球手机供应链的公平贸易,具体而言就是不使用“冲突矿物”并且确保生产手机的工人没有被奴役和压榨,目前仍然坚持在非洲贫困和战乱的国家进口材料,已经在刚果和卢旺达境内找到了一些矿山,用更好的商业实践推动当地经济更健康地发展。


设计和设计师的重要性


设计师,比任何其他专业人士,都更有可能在一转变中产生巨大的影响的人。我还敢说,我们有责任采用可持续设计的方式行动和思考。因为是我们创造了那些最终出现在传送带上的东西。我们也有责任教育我们的用户。幸运的是,越来越多的人重视具有可持续发展目标的产品或品牌,或者重视起在产品背后有意义的故事。同样,可持续发展不仅成为流行语,而且成为一种价值观,被越来越多的人意识到基于有限资源的无限增长是无法实现的目标。但是,要从线性经济向可持续经济转变,我们需要学习不同的思维方式。幸运的是,智能设备和数字产品的时代带来了一种复杂的设计思维方法,可以作为物理世界中生产链的范例。


用户体验必须提供什么


地球上有一个地方,您不能随便丢东西:互联网。这是一个对已有产品进行再构思的地方,您只能去完善它,不能丢弃它,因为如果您一夜之间说:“我不喜欢我的网站,明天我将推出一个全新的网站”,那您便会失去用户。

如果我们看一下可持续发展设计方法的四个主要阶段,就会发现我们在用户体验设计中使用的方法与此很相似。

让我们再次看一下四个阶段,然后将其更详细地分解:

理解

当我们谈论与循环设计相关的理解时,我们谈论的是在开始设计一个未来的产品之前就了解它的用户和环境。研究一直是数字产品设计的基础。与数字产品的连接比与实体产品的连接要更多的涉及到人类的心理。因此不可避免地要开发出新的研究方法,以帮助我们洞察用户在使用某种产品时的想法、感受和行为。但这不仅与用户有关, 研究还必须深入到经济领域,并研究未来产品的组成部分,同时牢记它们必须可被再次利用。


定义

在此阶段,将定义(商业)目标,并构建一个商业模型画布作为生产过程的计划。用户体验使用这种方法已有一段时间了,让涉众参与其中,并在设计过程中更多地激活它们。为我们设计的产品设定一个目标是至关重要的,因为有了它,我们可以为用户创造额外的价值。因此,无论是制作商业模型画布还是举办精彩的价值主张研讨会,在生产方式中实施这些方法都会对当前的生产流程产生巨大的影响。


制造

这是关键部分。现在我们正在做的事情就好像没有明天一样。随着每种无法回收的产品的出现,我们产生的废料越来越多。但是循环方法是为产品创建一个原型,并定义将需要使用那些材料反映在产品原型上,并在定义阶段概述的商业模型上定义材料。原型设计和构思是用户体验设计过程中的关键要素,这也是为什么需要制作原型。


发布 

根据循环设计模型,随着产品的发布,生产周期进入了第四阶段,然同时理解阶段又重新开始了。对于数字产品来说,这是自然发生的事前:你发布一个产品,基于该版本收集反馈,然后构思它,周而复始,这个循环再次产生。


但是,观察这个循环并建立这些连接仅仅是冰山一角。在数字时代发展起来的设计思维给世界带来了许多反思。


变革中的大佬


幸运的是,已经有许多大品牌意识到转变的必要性,并采取和提出了数字设计思维方法来支持转变,并建立循环设计的时代。根据《循环设计指南》,“我们应该把我们设计的所有东西都看作软件产品和服务——这些产品和服务可以基于我们通过反馈得到的数据而不断的发。”


用户体验研究和用户体验设计一直是在做的一件事是:基于全面的研究和真实的用户需求来构建产品。上面的设计指南是非常复杂的工具,具有许多可能的方法。它强调了从产品到服务流程转变的重要性,并展示如何使用敏捷流程并将其实施到构建产品的方法之中。


IDEO(全球顶尖的设计咨询公司)与 Ellen Macarthur Foundation(艾伦·麦克阿瑟基金会)合作,试图“试图通过设计构建一个具有恢复性和再生性的经济框架”。在这里,您可以找到几乎每个生产方面和领域——例如食品、时装、经济和设计——并在每个领域中提出解决方案,以打破线性生产系统。


耐克还宣布了其基于循环设计模型生产高品质运动鞋的新方法原则。正如您已经看到的那样,无论您身处哪个经济领域,都可以为循环生产过程的蓬勃发展做贡献,并成为一支主导力量。


重要的结论


我认为,作为设计师,我们始终要为变革而努力,并始终努力与客户、产品或服务保持紧密的关系,并通过构思使其不断完善,以实现这一目标。这是因为伟大的事情只有通过时间和不断的反思才能实现。在离线世界中,数字设计过程也有很多东西可以贡献。希望通过教育,能有更多的大公司意识到用户真正想要的产品是具有更多功能并可持续使用的,而不仅仅是将它们当作一次性产品,一旦它们不像最初那样光鲜就把她扔掉。

转自:站酷-大猴儿er 


六个好用的程序员开发在线工具

seo达人

网上可以找到前端开发社区贡献的大量工具,这篇文章列出了我最喜欢的一些工具,这些工具给我的工作带来了许多便利。


1. EnjoyCSS


老实说,虽然我做过许多前端开发,但我并不擅长 CSS。当我陷入困境时,EnjoyCSS 是我的大救星。EnjoyCSS 提供了一个简单的交互界面,帮助我设计元素,然后自动输出相应的 CSS 代码。




EnjoyCSS 可以输出 CSS、LESS、SCSS 代码,并支持指定需要支持哪些浏览器及其版本。开发简单页面时用起来比较方便,但不太适合复杂一点的前端项目(这类项目往往需要引入 CSS 框架)。

2. Prettier Playground


Prettier 是一个代码格式化工具,支持格式化 JavaScript 代码(包括 ES2017、JSX、Angular、Vue、Flow、TypeScript 等)。Prettier 会移除代码原本的样式,替换为遵循最佳实践的标准化、一致的样式。IDE 大多支持 Prettier 工具,不过 Prettier 也有在线版本,让你可以在浏览器里格式化代码。




如果工作电脑不在手边,使用移动端设备或者临时借用别人的电脑查看代码时,Prettier Playground 非常好用。相比在 IDE 或编辑器下使用 Prettier,个人更推荐通过 git pre-commit hook 配置 Prettier:hook 可以保证整个团队使用统一的配置,免去各自分别配置 IDE 或编辑器的麻烦。如果是老项目,hook 还可以设置只格式化有改动的单个文件甚至有改动的代码段,避免在 IDE 或编辑器下使用 Prettier 时不小心格式了大量代码,淹没了 commit 的主要改动,让 review 代码变得十分痛苦。

3. Postman


Postman 一直在我的开发工具箱里,测试后端 API 接口时非常好用。GET、POST、DELETE、OPTIONS、PUT 这些方法都支持。毫无疑问,你应该使用这个工具。




Postman 之外,Insomnia 也是很流行的 REST API 测试工具,亮点是支持 GraphQL。不过 Postman 从 去年夏天发布的 v7.2 起也支持了 GraphQL。

4. StackBlitz


Chidume Nnamdi 盛赞这是每个用户最喜欢的在线 IDE。StackBlitz 将大家最喜欢、最常用的 IDE Visual Studio Code 搬进了浏览器。


StackBlitz 支持一键配置 Angular、React、Ionic、TypeScript、RxJS、Svelte 等 JavaScript 框架,也就是说,只需几秒你就可以开始写代码了。


我觉得这个在线 IDE 很有用,特别是可以在线尝试一些样例代码或者库,否则仅仅尝试一些新特性就需要花很多时间在新项目初始化配置上。有了 StackBlitz,无需在本地从头搭建环境,花上几分钟就可以试用一个 NPM 包。很棒,不是吗?




微软官方其实也提供了在线版本的 VSCode,可以在浏览器内使用 VSCode,并且支持开发 Node.js 项目(基于 Azure)。不过 StackBlitz 更专注于优化前端开发体验,界面更加直观一点,也推出了 beta 版本的 Node.js 支持(基于 GCP,需要填表申请)。

5. Bit.dev


软件开发的基本原则之一就是代码复用。代码复用减少了开发量,让你不用从头开发组件。


这正是 Bit.dev 做的事,分享可重用的组件和片段,降低开发量,加速开发进程。


除了公开分享,它还支持在团队分享,让团队协作更方便。


正如 Bit.dev 的口号「组件即设计体系。协同开发更好的组件。」所言,Bit.dev 可以用来创建设计体系,允许团队内的开发者和设计师一起协作,从头搭建一套设计体系。


Bit.dev 目前支持 React、Vue、Angular、Node 及其他 JavaScript 框架。




在 Bit.dev 上不仅可以搜索组件,还可以直接查看组件的依赖,浏览组件的代码,甚至在线编辑代码并查看预览效果!选好组件后可以通过 Bit.dev 的命令行工具 bit 在本地项目引入组件,也可以通过 npm、yarn 引入组件。

6. CanIUse


CanIUse是非常好用的在线工具,可以方便地查看各大浏览器对某个特性的支持程度。


我过去经常碰到自己开发的应用的一些功能在其他浏览器下不支持的情况。比如我的作品集项目使用的某个特性在 Safari 下不支持,直到项目上线几个月后我才意识到。这些经验教训让我意识到需要检查浏览器兼容性。


我们来看一个例子吧。哪些浏览器支持 WebP 图像格式?




如你所见,Safari 和 IE 目前不支持 WebP。这意味着需要为不兼容的浏览器提供回退选项,比如:


<picture>

CanIUse 还可以在命令行下使用,例如,在命令行下查看 WebP 图像格式的浏览器兼容性:caniuse webp(运行命令前需要事先通过 npm install -g caniuse-cmd安装命令行工具。


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档