Cola Chan

可乐橙是一名设计师
这里是我记录生活和成长的地方

关注微信公众号[可乐橙]
一座见证我成长的后花园

功能性动画设计:优秀的转场效果

功能性动画是一种微妙的动画,有着明确、合理的目标。它能减少认知负荷,防止变化视盲,在空间上营造更好的印象。但还有一点,动画让用户界面鲜活起来。

通过组合与分割、改变形状和尺寸,运动可以使外表感觉鲜活。应当运用功能性的动画,流畅地在导航内容间引导用户,解释屏幕元素和排列的变化,并且强调元素层级。

成功的动效设计具有以下6个特征:

......

34

设计新趋势:化繁为简

我们在这个“极简主义”的世界生活已经有些时日了,之后又将去向何方?

过去几个月来,设计创新领域的先行者们,将“极简设计”推向了一个新的高度。Facebook、Airbnb和Apple都遵循着近似的原则,简化它们的核心产品,这种“化繁为简”(Complexion Reduction)的新趋势就在它们的移动端设计中得到......

17

表单中的勾选框和开关

Nick Babich

创建表单时,交互设计师总是会面临一个选择,选用哪种UI元素来表示可选项的操作。当然,我们每个人都有自己的法则。但是,在选用可选项控件时,仍然要多加考虑。

可选项可以用勾选框、开关、单选框和下拉菜单表示。选择得当的话,任何一种都非常出色。本文中,我们重点关注勾选框和开关。

勾选框

勾选框用在一系列选项中,用户可以*......

68

提升色盲用户的体验

据Colour Blind Awareness的统计,总人口的4.5%是色盲。如果你的用户多数是男性,则这个比例还要上升到8%。人们常常忘了为色盲设计,因为多数设计师*不是*色盲。本文中,我们提出13条建议来改善色盲用户的体验——这些对视觉正常的用户同样有益。

色盲是什么?

有许多种类的色盲,但最终都能分成这几类:无法清晰辨认颜色、色彩混杂、无法区分特定颜色。

这些问题在特定环境中愈发严重,比如浏览网站。这包括低分辨率显示器、糟糕的光线、小移动端屏幕、远离大屏幕电视而坐。

仅仅依靠色彩建立可读性和可见性,会让网站难以使用,最终影响了阅读和销售。

尽管下面这些建议并......

33

风格指南里该有什么,如何执行?

每个网站都需要一套风格指南。原因很简单,如果想要在整个项目中贯彻一致性,让所有人达成共识,风格指南的价值是无可估量的。

既然如此,我们先把它放在一旁,指南中究竟应该包含哪些东西?如何确保团队成员遵守规则,让视觉表现保持一致?那就更复杂了。这就是我们今天的话题。

品牌综述

style guide

如果你从没创建过风格指南,那可能令人望而生畏。新手可以先找一套......

5

从业余项目中学习

某些情况下,我们总是心怀一丝产品梦——总有个项目能让我们迫不及待为之日夜奋斗。在业余项目中,你得依靠自己的经验,独立作出抉择。对于创意你能够全权掌控,并且当你的想法脱离草图逐步落地时,也会沿途获得许多技能。

离开日常的轨迹,业余项目能刺激你、让你兴奋。于我而言,兴奋来自实验和回馈整个行业。但是,从一个好想法到将它推向合适的受众,业余项目包含......

22

移动端用户体验:获取用户权限的正确方式

你知道吗?平均每个应用在安装3天内就会流失80%的活跃用户。多数人下载一个应用,打开一次,然后就卸载了。这是因为用户尝试许多应用,在接下来几天内决定要卸载其中哪些。

是应用品质低劣导致用户这样的行为吗?不尽然,但一款应用的*首次交互*,在树立整体印象方面扮演重要角色(无论印象好与坏)。用户打开一款新应用时,最不想看到的,就是一大串弹框请求获......

26

超越触控的手势交互

未来的交互是多重方式的。但结合触控和隔空手势(还可能有语音输入)的方式,并非典型的UI设计任务。

在Exipple,我们的设计师与工程师协作打造各种环境中的界面,能够响应手势交互和用户移动等物理属性。我们从迭代式的设计、研发和评估过程中受益良多,我愿意在此分享我们在手势交互中的领悟与心得。

21

优秀配色方案的探索过程

选择配色方案往往是个难题,尽管网上有各种各样的色彩库,配色仍然至关重要,有时候最好还是亲自动手。而且这个过程也非常有意思。

为这类工作找到一套标准流程是不可能的,因为它天然具有创造性。我使用Sketch来进行这项工作,你当然也可以用Illustrator甚至Keynote和PPT来做。

提醒:品牌建设包含的远不止选......

7

用户体验设计中的分步导航

User Experience

设计大型电商网站或者复杂的在线服务时,你很可能需要设计一套系统,来梳理顺序与结构。把它设计得简单直观,让用户顺利通过,是提升转化率的关键。沿途所有的挫败都可能导致他们离开,去选择其他的产品。

易用的分步流程有助于用户避免挫败,成功地完成主要任务。本文中,我们来了解分步导航的各种形式,看如何使用它们。

分步导......

49

为儿童设计可不是儿戏

或许你已经看到了:孩子们已经离不开平板电脑和智能手机了,用他们软乎乎的小手指,在上面大胆地滑动。从机场和餐馆,到家庭甚至学校,移动设备充斥着如今的童年生活。苹果公司去年在App Store中发布了一个专属于“儿童”的分类,如今已经有超过*80,000*个应用了。

有如此众多的儿童类应用,可能你自己也会想设计一个。“为儿童设计能有多难呢?”你可能会这么想。但是,不要被表象蒙蔽了。尽管情节简单、音调低龄化,但为儿童设计是一件严肃的活。并不是套用成年人的内容,然后将它幼儿化。实际上,有许多理由表明,为儿童设计比为成年人设计*更加*复杂。

本文中,我会通过下列用户体验的考量,指出如何避......

19

设计的7条心理学原则和定律

在设计中,心理学无处不在。正因为心理学,我们才了解红色很适合用于餐饮业的logo——因为它能增进食欲——或者让首屏的行动指令按钮产生更多转化。

Pyschology

也就是说,作为设计师,你不能忽视心理学。因为人类大脑的这些原则,决定了人们对你的设计作何反应、如何相互作用。回顾这7条心理学原则和定律,你能够将它们结合到实际运用中。......

89

优秀设计主管必备的品质(下篇)

编者按:我们每周会征询一些设计主管的建议。本周的议题是“你觉得优秀的设计主管需要哪些必备的品质?”下面请看Libby Bawcombe和Chris Thelwell的分享。

还有,请别错过Peter Merholz和Uday Gajendar的回答。

11

优秀设计主管必备的品质(上篇)

编者按:我们每周会征询一些设计主管的建议。本周的议题是“你觉得优秀的设计主管需要哪些必备的品质?”下面我们给出Peter Merholz和Uday Gajendar的回答。

13

巧用色彩为卡片设计加分

得益于Material Design日益增长的人气,卡片式界面已经随处可见了。这种时尚且注重功能的美学,运用块状的设计元素承载多种多样的信息。如果想要利用这种多才多艺的手法,你的卡片设计必须别具一格。

色彩就是方法之一。优美的色彩选用、令人振奋的色彩搭配、和有趣的结合,能创造重点、提升易用性,并且吸引用户深入你的设计项目。

卡片式设计基础

要运......

18

Harry Beck,伦敦地铁图背后的天才设计师

译者注:在上一期《11名顶尖设计师的职业忠告》中,我们提到过伦敦地铁图的设计,这是人们首次通过设计抽象化绘制出的地图,将错综复杂的系统变成了易于理解的网络。关于这个话题,可乐橙意犹未尽,本期带来这篇地铁图背后的故事,还有它的传奇作者。

49

11名顶尖设计师的职业忠告

优秀的设计师活到老学到老。

在Springboard,我们把用户体验和数据科学方面的导师与学员相互组队,这对于聆听前辈的建议有重大意义。

我们整合了许多顶尖从业者的建议,用来编写我们的用户体验职业指南。

因此,我们采访了11位了不起的用户体验设计师,问他们从何处获得灵感,有什么用户体验方面的建议要给其他从业者。

我们......

11

为虚拟现实而设计

虚拟现实,这种体验自从80年代中期就出现了,但似乎科技总是在拖后腿。终于,智能手机和相关科技的发展,使虚拟现实的惊人潜力触手可及。如今,我们正处于一场虚拟现实的革命当中。

从价值上千美元的高端平台,到可运行在智能手机上的系统,虚拟现实的设计仅仅展露了其冰山一角。从根本上说,它仍是一片蛮荒,亟待崭新概念的探索开垦,Google敲开了这扇大门。

18

让你的Logo被采纳:8步优化设计流程

Creating an identity that expresses who you are and tap into your customers’ emotions

在Dribbble上,品牌设计师只占少数。Dribbble社区的主导力量由界面、用户体验和动画的设计者构成。当我去年七月去波兰Gdańsk市参加第一届Dr......

14

设计师个人品牌指南

Viens-la

个人品牌是人们将自己和事业作为一个品牌推广出去。如今,空有一门好手艺已经不够了,独特和真实可信方可过关,但前提是人们得知道你。正如Michael Simmons所写道,在数字时代,真实才是关键。强有力的个人品牌可以创造大量机会,获得充分认可。

个人品牌在所有行业都开始成为关键因素。技能和无聊的简历再也不能给你任何保障。你确实应该开始发掘自己的......

83