下个阶段的设计师,为什么光做界面肯定是不行的?

王镇雷:刚做设计的时候,师傅教我们设计师不要过多的影响业务,把专业的事交给专业的人(产品经理/运营)去考虑。举个简单的例子,当设计界面时,我们只确定框架,如这里是一个可以填写文案的区块。但具体里面写什么,表达什么意思,都交给业务去判断,最多参谋参谋用户是否能理解。 就像装修房子一样,房间结构是基础,哪里可以挂画、哪里可以放桌子,这都是很早就确定的。但挂什么风格的画、用什么颜色的墙纸、放什么样的家具,却都由房间真正的主人来决定。 没错,我们并不是真正房子的主人。除了改变内饰,主人甚至还会要求把房子推翻重盖,结构也不是绝对稳固的。 这样只追求表面的设计,我做过很多。那时我认为用户体验设计(UE)需要的是“专业性”——不能拍脑袋做设计、不能想当然,而是要用数据说话、要在规范和框架内设计、要做好用户调研和访谈。我们几乎已经把自己放在了公司这个巨大机器中的一环,真正卖力地去扮演“螺丝钉”的角色。 不过慢慢地,我能嗅到整个环境和公司对设计师的要求在变,当然也可能,是随着工作经验增长,确实在逐渐进入下一个阶段。 光做界面,肯定是不行的 从现有规范(iOS、Android)和巨头产品中,几乎可以找到所有你想要的交互表达方式。细数手上做过的项目,哪个不是那些零碎组件的不断组合:文本、图片、按钮、表单……而要想跳出框架发明一套新的实现方式又谈何容易。 在现有方案能够支持的前提下,稳步实现就是最经济高效的做法。这意味着,在纯表现形式层面,用户体验的准入门槛极低,用过这么多 App 和网站,任何一个岗位都可以对你设计的体验说上几句,而你可能在大多数情况下都难以说服对方。 所以,几乎所有人都在想着如何用最少的时间、最高的效率去解决那些纯界面的工作。也正因为如此,招聘时看到你的作品只是在摆放界面,那多半也是没有机会了。 毕竟,所谓的体验绝不仅仅是按钮在左还是在右,也不是红色代表热情绿色代表生命……在淘宝上买一件商品,你所看到的界面(搜索、商品详情、购物车、下单……)大概只占整个商业流程的10%,冰上之下则是供应链、库存、渠道等等你所看不见的东西,而它们才是体验的本质。 业务千变万化,前端万变不离其宗 前两天和开发同学聊天,他说了一个今年的团队目标,诸如“如何实现品牌升级云云”,我愣了很久:这个目标放在产品团队,可能会觉得更加自然。无独有偶,除了最基本的体验提效、协作提效之外,对设计师也越来越要求“用设计影响业务”。换言之,这里所有人都在思考业务。 乍一看这是好事,因为大家的视野更加开阔了,不仅仅考虑眼前的界面或者代码,更多考虑的是商业这件事。但问题在于,我们终究不是业务的决策者,也无法获取足够的信息。在这个前提下,我们对业务的思考是不全面的、不准确的,甚至可能事倍功半,剑走偏锋。 另一方面,随着岗位交集的增加,对业务要求的提升,侧面反映了“纯专业能力”的占比在逐步下降。或者说,工程师也好,体验设计师也好,其专业能力已经逐渐和“业务”强绑定了。就像前面第一点所说的那样,脱离业务做设计,将极度苍白。 想象一下,就以电商卖货为例,商业模式发生180度转弯,前端呈现上却依然还是那些最基础的组件。虽然看起来是界面影响着用户,但实际上,确是商业模式的力量。 对设计师来说,适应变化是被动的,而产生变化,才是下一个阶段对我们的要求。 极速变化的行业中,商业才是根本 严格来说,商业目标是凌驾于体验目标之上的,并且这可能对任何产品都适用。 就拿经常号称依赖体验制胜的工具产品来说,虽然表面上是拼命迎合用户需求,做到让用户爽,但背后却可能是“分发渠道拓展”、“获取人际关系网”、“链接一切”等更上层的商业诉求。退一万步说,获取足够多的用户,也是商业生存的前提(投资者的要求)。 再以电商为例就更加清晰——用户体验最好的方式大概是免费、大概是自动高亮差评、大概是永远第一时间送货上门。为什么做不到?因为生意就是要赚钱,要平衡成本,目标就是让用户掏钱,让用户爽只是这个实现这个目标的手段。 这让很多用户体验至上的设计师一下子接受不了,难道不是用户需求第一吗?就像上面说的,当然不是。 从 PC 到无线再到未来的 AR/VR,这些东西年复一年发生着天翻地覆的变化,但是钱的流转、卖货买货、广告,这些东西却在百年来都没有本质的变化。只看当前,形式固然重要,但长远来看,形式能又最不重要。抓住形式,需要时刻了解行业动态,了解设计和产品趋势,了解新的竞争对手,这追求的是广度;而研究商业数据,了解模式背后的运作方式,则是深度。 随着年龄的增长,对广度的追求始终难以保持在一个高的态势。倒是深度,可能会成为体验设计的一层壁垒。 如果可以,设计师们都应该从表面转向业务深处。不仅仅决定样式,而要参与决定内容,决定内容产生的方式、决定内容的分发方式。 只有抓住冰山之下庞大的本体,才不至于像表面的冰层那般转瞬消融。 欢迎关注作者的微信公众号:

空心图标是否比实心图标难以识别?

在 UI设计中,空心图标和实心图标应该在什么场景下使用?有人说,空心图标在视觉上比实心图标看起来更复杂,实心图标比空心图标识别度更高。 对此,设计师们各抒己见,一部分人表示赞同,认为空心图标使用线形描绘,相对实心图标更难识别,但能给人轻松、精致的感觉。而另一种观点认为,图标识别度的高低并不取决于实心空心,而是取决于图形、颜色等其他因素。 一. 图标的功能 首先,这次讨论聚焦在一种特定类型的图标:功能性图标。我们先来回顾一下这类图标的基本功能。 功能性图标在生活中很常见,通常出现在机场、车站、酒店、商场等大型公共场所,给人们提供向导,如下图: UI设计中,图标是最常见的设计元素之一,图标的使用起源于Macintosh 1.0,甚至在更早的Xerox图形界面开始就有了。它们往往被赋予可操作,提示说明等作用。 从智能手机系统发布至今,图形界面的风格完成了拟物到扁平的演变。随着ios7推出,几乎所有APP中的图标都变得越来越扁平和纤细,其背后的原因,主要是避免因图标过分醒目降低内容的可读性。 总的来说,图标最基本的功能是迅速传达信息。 在现今的设计工作中,图标与文字的搭配已经到了走火入魔的地步。一些比较抽象的概念,用文字足以表达清楚,仍然要在文字旁设计一个图标,如果单看图标的话丝毫无法让人与其赋予的功能产生联系。 即便如此,图标依然很重要。因为图标不仅仅是在没有文字表达的时候“让用户一眼看出含义”,除此之外,图标还能快速定位,区分内容层次,增加界面的韵律。 拿一款音乐产品举例,只看图标不看文字的情况下,很难直接看出含义,但它们的作用远不在此。列表中的图标使用了空心图标,看起来轻松且精致,图标与文字放在一起形成了一个整体,起到了对齐的作用;如果去掉了图标,列表中的信息就会区分不开,视觉上有些混乱,用户更难聚焦到某一行的选项上了。 另外图标还能强化品牌形象,与本答案的讨论无关,不做赘述。 二. 实心图标比空心图标识别度高? 假设你在逛街的时候突然内急,冲进大商场找洗手间,实心和空心两种图标,那种能更快识别出洗手间的标志? 如果单纯从视觉吸引来讲,实心图标确实比空心图标更快被用户识别。下图展示的是对人眼构成吸引的要素作用大小(从左到右排序): 空心图标通过形状吸引眼球,实心图标通过色块吸引眼球,所以空心图标的辨识程度比实心图标低了一等。 对于实心图标是否比空心图标识别度更高的问题,早在iOS7系统推出之时,就已经有过一些讨论。一名从Viget毕业的体验设计师Curt Arledge特意写了一个APP,针对实心和空心图标做了1260个识别测试[1],来看测试结果: 结果发现,用户识别这两类图标的速度仅仅相差0.1秒。 其中第一组,实心图标取胜。这些图标源于生活,图标延续了其原本的含义,识别速度取决于色彩和形状对视觉的吸引程度,实心图标更容易辨认。 值得注意的是第二组的三个图标,空心图标识别度更高。 这三个图标的形态是对生活中事物的抽象化表现,其中speech bubble在现实生活中并不存在,人们在图形界面中创造了这个图形并赋予了含义;而垃圾桶和钥匙在现实生活中的形态过多,代表这两个事物的图标属于对生活中物体形态的抽象总结。在这种情况下,图形的形状更能够让用户快速识别出图标的含义,色块反而成为了干扰识别的因素。 所以,如果是延续了物体原本含义的图标,使用实心更容易识别;被人们赋予了含义的图标,空心更容易识别。 三. 什么情况下适合用实心图标,什么情况用空心的呢? 1. 运用实心图标和空心图标区分不同的状态 iOS7发布之后,苹果规范了图标的使用原则,将两种互补的图标风格用来表示两种状态:当图标不是当前选中状态时,它完全是空心的;而一旦这个图标被点击,或处于激活状态时,它便会被填充,这能帮助用户区分当前处在哪个功能页面中。 由于大部分UI中的图标使用都会遵循这个原则,因此,如果你错误地使用了图标的状态,将会让用户感到非常迷惑。 2. 运用实心图标用于分割层次,区分信息的重要程度 实心图标往往用于分割层次,区分信息的重要程度;空心图标由线性组成,能够给人轻松,精致的感觉,对信息方向有一定的引导作用。来看看它们的特征: 举个例子,在一排空心图标中插入一个实心的,和一排实心图标中放置一个空心的,对比之下就会发现,实心的图标相比较空心的而言,视觉注意力更有力度,让用户更容易抓到重点。 △  实心图标往往用于分割层次,区分信息的重要程度 3. 运用空心图标引导信息方向 空心图标由线性组成,能够给人轻松,精致的感觉,对信息方向有一定的引导作用。 在实际的设计中,实心和空心图标往往是结伴出现的,我们若能处理好它们之间的相互关系,将会使信息传达事半功倍。 △  左图采用实心和空心图标结合的设计,丰富了视觉内容层次,效果要比右图好。 … 继续阅读

从零开始制作设计规范的实用指南

为什么要做设计规范?(why) 如果说工作两年我养成了什么习惯的话,那一定是在做任何需求之前,都先问问自己“为什么要做这件事”。整理规范也是一样,做之前先要想清楚为什么要做规范?清楚的了解做一件事的价值有助于我们产生心理认同,从而更好的实施。 1. 保证平台统一性 统一性是交互设计的一个基本原则,在一个长期迭代多人合作的项目中,不同的设计师会负责不同的模块,每个人都有各自的思路,就有可能会对相同的元素做出了不同的方案,对于用户来说容易造成困惑,对品牌整体形象的建设也没有好处。所以对于较大型的产品,最好有设计规范来定义基本的元素,帮助众多设计师一起做出有统一性的产品。 2. 提升团队工作效率 对于同一个基本元素,如果没有设计规范,交互设计师需要设计一次交互方式,视觉设计师需要设计一次外形,UI开发同学需要开发一次,每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范,只需设计一次,团队中任何一个设计师需要用的时候直接拿来用就可以了,也不需要再进行视觉和开发,极大的提升了效率。 3. 打磨细节体验 在整理每个元素的规范时,设计师都需要对其场景、状态考虑清楚。在整理的过程中,经常会发现一些以前没注意到的问题,并进行优化。把一个小元素单独拎出来仔细考量,写成一篇完整规范的过程,其实就是在打磨细节的过程。 什么时候做设计规范?(when) 虽说最理想的情况是在做设计前把设计准则、风格、规范都定义清楚,但在实际项目中很少能有条件这样做。项目初期总是小步快跑、先上再说,产品在不断试错的同时设计也是在不断试错,在一开始就能定义一个完全“正确”的规范其实是不太现实的。 通常情况下,在产品发展日趋平稳,产品定位和品牌形象都比较确定的时候;参与设计的人越来越多,统一性和效率的问题渐渐显现出来的时候,就是需要定义和整理设计规范的时候。 什么样的规范是好规范?(what) 规范是给人阅读的,写好一篇规范就像是设计好一个界面,我们也应该确定目标用户、用户目标、设计目标后,再进行设计执行。 一. 用户目标 设计规范的目标用户有可能只是一个团队内的设计师,有可能是第三方的工作人员,有可能是公开给所有人都可以查看的。不管是哪种类型的用户,都会有一个基本一致的目标,那就是“快速的在规范中找到有效信息并获得指导”。在这个一致的目标下又有所不同之处。 1. 团队内设计师——准确使用 团队内的设计师通常情况下需要尽可能的依据规范做出“准确”的设计,保证元素使用在正确的场景下,保证整个平台的一致性。所以给团队内的设计师看的规范相对来说会详细很多,以腾讯云内部设计规范为例,需要包含实际的交互场景举例及说明帮助交互设计师理解和判断,需要包含视觉标注帮助视觉设计师和UI工程师查阅等。 2. 第三方团队——快速上手 给第三方工作人员的设计规范又有所不同,他们的目标更侧重在合作时快速上手,直接将团队内部详细的长篇大论拿给他们看很难保证他们有耐心阅读,因此很难保证他们遵循规范。针对这种情况,更适合整理出典型页面,UI Kit,加之简单易懂的说明给他们,让他们快速了解页面应该怎么布局,可以用现成的元素进行快速拼接就可以了。 3. 公开大众——寻求参考 公开给大众的设计规范有非常详细的,也有比较简单直接的,主要还是要根据公开的目的来确定。通常情况下只是起到参考作用的公开指南,内容会比团队内部的设计规范精炼的多,大都只是展示定义描述、样式,再配以正确和错误示范帮助理解。而某些公开规范同时起到给合作方使用的功能时,就会包含更多详细的内容,详细的描述、视觉标注、代码等等。 二. 设计目标 确定用户目标之后,设计目标就很清晰了,一个好的规范应该是高效的、简单易懂的,以内部设计规范为例,具体执行时,我们应该确保分类合理、规范本身保持一致、布局排版易读,来提升设计师查阅的效率;确保定义清晰、描述准确、场景完备,来帮助设计师理解和使用。 1. 分类合理 一整套规范的内容通常都很多,为了能让用户快速查找,合理的分类必不可少。 2. 保持一致 每篇规范包含的内容保持一致、格式保持一致可以给用户构建心理预期,让他们看一篇规范就知道每篇都包含哪些部分,可以找到哪些信息。 3. 排版易读 … 继续阅读

这样练习,你的UI自学才最有效

说了那么多方法论,但还是有很多同学不知道该怎么练习,怎么巩固基础,“多练多想“谁都会说,但关键是如何练?如何想? 今天菜心就来一步一步的告诉大家如何练习,需要注意什么,大纲如下: 细分后找到专项突破的点 退第一步——“放弃”原创 退第二步——跟着别人临摹 进一大步——总结规律 一. 细分后找到专项突破的点 假设我们现在要巩固基础,通过细分,我们知道自己需要巩固的对象有:图标、颜色、排版、字体、插画….,然后我们现在找到了第一个需要专项突破的点——图标。 其实说实话,细分并不难,以前说过很多遍了,这里就不过多陈述了。 关键是接下来怎么做? 二. 退第一步——“放弃”原创 我相信有很多朋友都和我一样,急着做出自己牛逼的原创作品,以此来震惊整个朋友圈,但现实是残酷的,做出的东西总是不到位,为什么? 来问大家一个问题,随便拿出几个图标,如下图: 不用你原创,就照着做,都能做出来吗? 也许你会觉得,这不是简单的要死。 我说的可不是用钢笔描出来,而是用布尔运算非常规范的做出来,理解每一个圆形、矩形存在的意义,例如网易云音乐: 可能你又会说,这不就是三个圆一个矩形组成的嘛,是的,最开始我也这么认为了,可当你真的去做的时候才发现,原来它并没有那么简单,我研究了好半天才研究出来怎么画出来: 这也就是为什么我们会眼高手低的原因,简单的东西都不知道能不能临摹好,就急着去做一些复杂的原创作品,老铁,你说咱能稳嘛! 如果你暂时还不能做出牛逼的原创作品,那就要试着退第一步了,暂时“放弃”原创,因为我从来都觉得:小的事情做不好,大的事情就一定做不好。 当然也不是就不做任何原创了,也可以临摹和原创并行,只是不要一门心思的想原创,导致自己过于浮躁。 练到什么程度呢? 不论看见什么图标,都能一眼就能析出它所运用的技法和创意(包括造型和质感),这时基本上就可以出师了。 三. 退第二步——跟着别人临摹 对于基础薄弱的同学,可能连临摹都会很吃力,例如上面个云音乐logo的布尔运算,根本不知道为什么要那样画,总问别人也不好意思,这是个非常大的问题,该怎么办呢? 这时候就该退第二步了:先找有教程的图标进行临摹。 如果我们要练习布尔运算画图标,可以先去找找网上有教程的图标练习,例如去设计网站搜一下“布尔运算”,可以得到很多教程,如下图: 找到后先不要直接看教程,先自己尝试做最后的效果,如果实在做不出来了,再去看原理,这样可以保证一定的独立思考。 四. 进一大步——总结规律 已经退了两步了,如何让自己进一大步呢,临摹咱不能白临啊,如果看着教程跟着做一遍,然后就结束了,其实和没做是一样的,关键是我们通过临摹最后学到了什么,悟出了什么原理。这里举个例子,例如我用布尔运算做了下面两个图标(参考教程): 这时就可以想想能够从这些临摹中得到点什么? 后来我发现一个规律,如下图: 凡是有尖角,有弧度的地方貌似都是用圆形切出来的,这就是我得到的一个规律,(这个规律不能覆盖所有场景),于是我找了另外一个没有教程的图标来进临摹,看看我总结的规律能否用的上: 首先将其分为两个单体(一样的),如下图: 通过分析知道,有尖角有弧度的地方是圆形切出来的,制作步骤如下: 于是尝试用两个小圆切出红色形状,两个大圆切出蓝色形状,得到绿色单体,通过复制翻转得到最后图形。 以上这就是通过临摹学到的东西,希望大家可以学到更多的规律,这才是临摹该有的价值。 … 继续阅读

如何根据你的网站创建一个移动 APP

如今,每一家具备在线业务的第三方公司都在考虑创建一个移动APP或移动版网站。今天,我们来讨论下哪种方式更方便,以及需要使用哪些技术用来征服移动市场。   从一开始,我想指出的是,几年前在“移动版本的网站”下,我们暗示了需要单独开发一个移动设备的独立版本,而现在这个术语只意味着创建自适应模式的方案。     移动APP或移动版网站   浮现在任何企业脑海中的第一个问题是选择什么——一个移动 APP或一个自适应模型?   决定到底什么样的商业策略适合于您,最重要的是从开始制定攻克手机市场的时刻开始,就要找出您行动的目标。 如果你从整体局势上来看,移动 APP似乎更可取,也更适合投资。   从界面的角度来看,移动APP总是看起来更美观,因为它们独立于每个移动设备的浏览器或者屏幕尺寸,他们是为特定的平台(比如 iOS)而创建的。安装移动APP后,很少需要上网做后续工作。   不过,选择移动APP也有一些缺点。最大的缺点是资源,移动应用在开发过程中需要更多的时间、金钱和人力资源。预估该项目的推出将更加困难,在应用商店中发布你的 APP可能需要花3天到几周的时间才行。   如果你不想从一种选择跳转到另一种选择,那么你需要了解项目的主要参数(可供选择的只有3个)——你想达到的目标,你的预算,你的目标受众。大多数情况下,了解你的预算就足够了——开发移动 APP更昂贵。如果你没有预算限制,最好是看一下主要目标:如果是这样,你只需要提高你的 Google索引(移动优先的方法),这比开发移动版本的网站还管用。   如果你仍然不知道该选择什么,那么我有一个折中的建议——带有浏览器组件的移动APP。   我可以给你举一个例子,就是著名的 IMDB应用程序。页面的主模板在应用程序中,而一些页面(即将上映的新电影)则是从浏览器中加载的。在这种情况下,你只需使用互联网来加载新的内容(电影),但是你的应用程序将会在没有网的情况下整体上稳定运行。     为什么人们选择移动APP开发   根据我们的经验,在创建移动APP时,根据你的目标,我们可以看到几个原因。主要的原因是你想要收集并扩大用户数据库,并且进入新的移动用户群。有时,是因为公司想要引领潮流,站在技术和创新的前沿。此外,看看你的竞争对手,如果他们当中的前五名都有移动APP,那么最好的方法是跟随他们,保持竞争力。   当你决定创建一个移动APP时从哪开始   选择平台   首先,你需要在平台上做出决定。你不需要同时为所有平台开发一款APP。此外,我们建议从一个平台开始,也许你根根就不需要其它类型的平台了。   要选择一个平台,你需要确定你的 … 继续阅读

20岁到30岁,设计师应该知道的真相

如果你关注过一些取得大成就的人,总会在他的成长故事中发现很多传奇的经历,比如少年时代的天赋异禀,或是30、40岁的大器晚成,为了做好某件事的废寝忘食等等…然后摸摸自己的胸脯说,他们是天才,我只是个普通人。 但你回头去看看身边的牛人,其实大多走的都是极其寻常的路。大学毕业求职,经历过职业低谷也取得过一些成绩。摸清了自己适合的方向,扎根在里面,积累足够的经验然后树立起了在行业和专业里的权威。 混沌给不了你安全感,做设计师最为混沌和宝贵的就是20-30岁这10年,有人混沌之后成了别人眼中的牛人,也有人混沌之后抱怨行业辛苦、抱怨竞争激烈,混迹底层或是转行专业。 虽说做设计从什么时候开始都不晚,但最重要的这十年却很容易拉开与别人的差距,20-30岁也许你最该知道的这些真相。 确定一条适合自己的路,而不是别人眼中有前途的路 广告行业兴盛的时候,一窝蜂的去做广告。听说UI设计师的薪水可观岗位好找,又琢磨着自己是不是该去试试。UI设计变得竞争越来越激烈的时候,又觉得好像电商设计的要求自己更容易驾驭….几年过了,年纪变得越来越大,却不知道自己是哪个领域的设计师。20-30岁可以转行,也应该多去尝试,但最重要的是摸清楚自己适合哪一个方向,并扎根于这个方向。 你会发现越优秀的设计师,越是会清楚的定义自己。强化自己擅长的领域并死守住这块领域。几年过去了,你知道自己是哪类设计师么?知道哪是你强大的地方比找到一条别人认为更有前景的路重要得多。   没有什么所谓的30岁总监之说 经常听到有人问是不是30岁做不到总监就应该改行了。不知道从什么时候,从哪里听到这样的一个定义。但你有没有想过为何是30岁,不是40、50岁?既然你都从业设计了,打着匠人的名义工作这么久,你看哪个匠人30岁的时候敢自称为总监? 级别是公司给于的,能力是自己修炼出来的,我刚过30,这几年一直觉得30岁之后才真的感觉像是入了设计这行。 哦,对了,我不是总监。   专业能力大于学历,个人修养决定在不在乎你的学历 总是被问起,做设计学历重不重要,专科的希望搞个本科学历,本科的希望升个研究生或是出国套个海龟的名头再回来。   做设计这行,学历肯定不重要。但学习能力很重要。 躺在学历上就能找到好工作的时代早就过去了。设计或是创意产业自始至终都是英雄不问出处,作品决定一切。 这个“作品”包含在一切求职开始到面试录用之前所有细节之中。包括你“设计过的简历”、邮件和沟通交流,这些都是作品之外你的“专业素养”。   个人修养重要么? 不是重不重要,而是太tm重要了。 和一个从日本学习工作回来的同事聊天。我在抱怨最近面试的设计师总是迟到,半小时算少,一小时以上很多,他们来了也没有半点感觉抱歉的意思啊~ 他苦笑了一声说:在日本比约定好的时间提前15分钟是一个基本规则。还迟到?这样直接就会被咔掉啊~ 有些人哪怕学历不高也会给人带来稳定和踏实感。有些人能力不高却因为附带的学历光环给自己增加了盲目的自信。所以,专业力大于学历,个人修养决定别人在不在乎你的学历。   别做低品质的勤奋者 看到别人在朋友圈晒个手绘、晒个ICON或是做个字体,自己也忍不住想要坚持个几天,美其名曰这是在刻意练习。把自己做的粗糙没有任何意义的“作品”丢到大的小的群里求评论求指点…这样的人在设计师的朋友圈里都遇到过。可悲的是,这样的“勤奋者”大多混迹在行业的底层。与其说是在刻意练习,不如说自己是盲目随从的“低品质勤奋者”。   什么叫低品质的勤奋者? 高效的勤奋者知道自己每一刻消耗的时间和精力花在哪里能获得什么。低品质勤奋者更在意我做了多少的“量”,我可以用来怎么“晒”。 真正花时间投入能获得了什么技能,这个技能能给自己的工作带来什么价值却从来都没有考虑过。因为别人这么做,所以我也想试试这么做。大把的时间和经历消耗过后,专业能力却一直没有提升。   涉猎太多会拖垮你,找到自己的能力边界 以前提过,股神巴菲特提出的这个概念叫:能力边界。找到自己的能力边界,然后躲在里面不出来。就是说,自己要知道自己做不了什么,不过度的分散精力做自己并不擅长的事情。把有限的精力用在自己能力边界之内的工作上。还是那句话,20-30岁最重要的是摸清楚自己不能做什么,然后别被诱惑,对这些有消耗的事情说不。   读书在任何时候都是最值得设计师去做的事 能把设计做得好的设计师很多,能把设计梳理出自己的思维体系的设计师却很少。每一个算得上大师的设计师,都有自己的一套设计理论体系。每一个大师也都有自己的阅读体系。当设计做的够好的时候,你的表达、你对设计结果背后的思考决定了你设计能力的边界。哪怕不做设计,读书也是一项值得终身陪伴的事。真的!   跟自己的坏习惯做长期的斗争吧 … 继续阅读

临摹练习后,我总结了5个图标绘制的实战技巧

“眼高手低”是大多数人的通病,尤其是我们视觉设计师。 当我们的执行力和野心差的太远时,要学会静下心来去思考沉淀,不要只顾着向前跑,停下来回头看看,自己的基础真的打牢了吗? 如果你能停下来,我建议可以多去临摹优秀的作品,感受细节的处理,质感的表达,图层样式的技巧等等,也许你会发现:原来自己还差的很远。 刚好最近临摹了一个锤子的胶囊,最终效果如下: 借着这个案例和大家分享一些技法和感受,大纲如下: 内阴影不仅可以做凹陷,还能做凸起 要想有质感,反光一定不能少 养成使用多层投影的习惯 投影的等高线选项,我猜你没改过 打动人的设计一定要符合现实 1. 内阴影不仅可以做凹陷,还能做凸起 一说到内阴影,我们的第一直觉是它是用来做凹陷的,如下图: 但其实它还可以做“凸起的”效果,例如我们在做这个胶囊的时候,就可以用内阴影来确定基本体积关系,(当然内发光也是可以的)如下图: 具体选项设置如下图: 2. 要想有质感,反光一定不能少 做拟物的物体,一定要记住加反光,这是增加细节和质感的必要条件,但只加反光还不够,反光处衔接的地方还有一块暗部,形成明暗交界线,效果如下: 3. 养成使用多层投影的习惯 接下来就需要给胶囊加投影了,这里需要注意,大多数情况下,一层投影是无法实现理想效果的,我们要使用双层投影甚至多层,来看看一层投影和多层投影的对比效果。 单层投影: 多层投影: 强调一点,多层投影的规律是,越外层投影越虚化,不然就会不自然。 4. 投影的等高线选项,我猜你没改过 我们看胶囊的投影: 有明有暗,一圈一圈的,这都是投影等高线选项的功劳,如下图: 默认的等高线选项是线性,为了增加层次,我将线性改成了画圆步骤,里面还有很多选项,大家可以多多尝试,切记不要死记硬背数值,要以最后效果为准! 5. 打动人的设计一定是符合现实的 如果你想让设计打动人心,那就一定要符合现实现象,例如在做这个胶囊的底板时,可以看看现实的胶囊底板纹理长什么样,我拍张照片给大家看下,原来长这个样子: 但为什么我做的底板纹理是这样的呢: 因为我没研究出来怎么做! 如果想把细节做好,这个纹理一定也要做好,不能应付了事,给大家留下这个问题,如果你想到了好的方法,欢迎告诉我,让菜心学习下,哈哈。 以上就是今天要分享的内容,其实眼高手低并不可怕,可怕的是没有提高执行力(巩固基础)的意识,从而让“手”和“眼”差的越来越远。 所以你懂得,不要再奔跑了,想要“速度70迈,心情是自由自在”,咱得先把基础练好! 欢迎关注作者的微信公众号:「菜心设计铺」

UI设计中的文字

文字是UI设计中一个重要的组成元素,文字使用的好坏会极大影响产品的用户体验。想象一下用户打开你的app,发现界面中的文字都是同一个字体,同样大的字号,连颜色都是一样的。这样的文字搭配用户读起来会很累,费时费力。用不了多久他们就可能会卸载你的产品,转而使用另一个界面设计更加友好,文字搭配更加合理的产app。文字对界面设计的重要性可见一斑,但是文字经常会被我们忽视,这篇文章中我对UI设计中文字的使用做了一个简单的分析和总结。   建立视觉层级 设计师的一个主要职责就是将页面中的元素整合起来,以一种清晰可见的形式呈现给用户。当然我们都知道一个页面中不同元素的重要性是不一样的,有优先级之分。文字也是一样,有些文字比较重要,我们更希望用户看到,有些文字比较鸡肋我们不希望用户看到。为了达到这个目的,我们给界面的文字建立视觉层级,将文字大致分为三类:主标题,次标题和正文。   主标题 主标题是对于整个页面内容的一个总结,合格的主标题用户看了一眼就应该知道这个页面的大致内容。主标题是用户进入一个页面第一眼就应该看到的文字。主标题应该用字号要足够的大,要加粗,这样才可以更好的吸引用户的注意力。此外,为了更好的节约用户时间,主标题应该简练。根据Jacob Nielsen的一项研究表明,主标题5-6个单词(英文状态下)最合适,最长不要达到一句话的长度。   我们强调要突出主标题来吸引用户注意力,但是不要过度突出。因为用户对于具象元素(插画,icon,图像或摄影图等)的感知能力远比文字要强得多。如果我们想宣传一款产品,那么最好的方案就是直接给用户展示产品图片。文字和图片搭配使用的时候,文字起到的只是辅助说明的作用。我们不能过度放大主标题的尺寸造成对图片的遮盖,这样是本末倒置的。   次标题 将所有的信息都塞进主标题是不太现实的,这也是我们需要次标题的原因。次标题的要求和主标题类似,都要求文字简洁干练,概括性强。和主标题一样,次标题也要进行加粗处理,当然为了和主标题区分,字号要稍微小点。   正文 正文是提供详细说明和解释的文字,从页面层级的角度来说重要性要低于主标题和次标题。正文文字长度没有定论,有人认为长的文案可以给用户提供更为详细的信息,而且看起来更加正规严谨。但是也有人认为用户不喜欢阅读过长的文字。两种观点都有自己的道理,对于使用长文案还是短文案我做了以下总结: 设备 短文案适用于移动端。移动端相对来说空间有限,文字太多会显得比较拥挤,影响页面美观程度的同时也会降低用户的阅读体验。   长文字更适用于PC端,PC有足够的空间来展示特定内容的详细信息或者用户不太熟悉的内容(需要用户仔细阅读)。   这是一个家禽百科全书网站,这里面虽然包含了大量的文字,但是设计师将文字在逻辑上分为了许多简短而集中的文字块。这些文字块配以突出的标题和引人入胜的插图就变得具有活力。这种设计模式打破了传统教育类网站沉闷的页面布局,更能吸引用户特别是青少年的注意力。 产品定位 产品的定位对于正文文案的选用是具有决定性意义的。例如,你要设计一个读书,旅行这类偏文艺小众的界面,正文文案要足够的短,页面中要有大量的留白,这样的页面会给用户一种透气、从容、开放、平静、自由的感觉,而这些感觉都是与产品的风格相契合的。相反,如果这类页面中元素都挤在一起,就会导致视觉压力,引发用户紧张。当然并不是所有拥挤的页面设计都会引发紧张情绪,如果文字和页面中其他元素之间的空间处理的合适,行间距留的足够大,那么也可以做到做保持内容的可读性的同时保留了页面的“呼吸感”。   PS:正文因为字体尺寸比较小,所以我建议使用无衬线字体。因为设备显示器的像素不足以表现小字体上细小的衬线,会出现锯齿效果,对易读性影响很大。所以我建议正文使用无衬线字体,如果非要使用衬线字体,需要在不同的设备上测试字体的实现效果。   行为召唤元素 想让自己设计出来的界面不那么死板,具有可交互性,我们就要学会使用行为召唤元素。当然一些行为召唤元素不需要文字也可以完成,比如我们的接电话按钮或者短信提示,都是使用图标来完成。但是在一些特点情况下,内容过于抽象无法用图标来诠释的时候,我们应该使用文字。   行为召唤元素对于文字长度的要求极其严苛,最好是一个单词或者2-4个单词组成的短语(英文状态下)。 轻型文字的趋势 从2016年开始,源于对干净精致界面的追求,轻型文字越来越受到设计师的欢迎。归根结底,轻型文字是简约设计趋势的产物,字体越来越细长。但是我们要记住,这种过于狭长字体在节省页面空间的同时,牺牲的是文字的易读性,这是我们在权衡是否使用轻型文字时需要考虑的问题。 不过iOS10的Apple Music界面中开始对字体加粗,所以未来字体是变得越来越粗还是越来越细,我们拭目以待。   总结 总而言之,对于设计师来说,文字是一个可以很好提升产品用户体验的武器,希望这篇文章能够给各位设计师带来收获。 作者:王M争 文章来源:ui.cn

Dashboard设计思考(上篇)

文刀:在企业类应用服务(SaaS)、检测工具(手机安全助手)、量化自我工具(智能手环)等后台管理系统中,使用Dashboard可以帮助用户监控和分析数据,快速获取重要信息。但如果对Dashboard设计缺乏认知,就很可能会造成Dashboard呈现的信息杂乱,充斥着无关紧要的指标、文本信息及各种半成品的图表等,让用户抓不到重点。 那么,设计师该如何设计内容精确、体验友好的Dashboard以满足用户需求呢?文章将从以下几个方面思考: Dashboard是什么? 主要场景是什么?能为用户带来什么价值? 目标用户分析 选定Dashboard内容 Dashboard内容结构 功能特性 信息设计 一. Dashboard是什么? 在了解Dashboard之前,可以先了解下汽车仪表盘和报表。 Dashboard的中文翻译是“仪表盘”,与汽车的仪表盘相同——一种反映车辆各系统工作状况的装置,有车速里程表、转速表、燃油表等。同时,还会有各式各样的指示灯或警报灯,例如冷却液液面警报灯、燃油量指示灯、充电指示灯等。司机可以很方便地从汽车仪表盘中获得汽车整体状况。而对于报表,简单的说就是用表格、图表等格式来显示汇总数据。同时,因为常用于定期汇报场景(如每月账本汇总),报表也要考虑纸质打印的限制。 △  汽车仪表盘(左)和报表(右) 而Dashboard沿袭了汽车仪表盘理念,在一个屏幕上有预设性地显示对用户关键的信息,并实时告知用户正在发生的情况。同时,Dashboard进一步结合计算机互动的功能显示和传输信息,突破了报表要考虑纸面打印输出的限制。在Dashboard页面中,用户不仅可以直接对数据和图表进行分析,还可以通过控件来控制数据的显示、计算、过滤和分组等等。 在Stephen Few的《Information Dashboard Design》一书中指出:Dashboard对重要信息做视觉呈现,这些重要信息是为了达成一个或者多个目标而被统一组织在一屏内,以便能够一眼就得到监控。 二. 主要场景是什么?能为用户带来什么价值? Dashboard一般通过重要内容和核心数据来告知用户:“业务整体状况如何?有哪些关键指标?各指标的运行情况分别如何?哪些指标出现异常?需要用户做些什么?”。由此可知,Dashboard主要应用于监控、分析和概览三大场景。 △  Dashboard三大主要使用场景 首先,在监控场景中,Dashboard主要为用户集中提供便捷的关键指标实时监测,及时告知异常状态,并引导用户定位问题。 △  Dashboard监控场景 其次,在分析场景中,Dashboard主要通过数据图表,配合控件进行不同维度的数据分析。例如,用户可以通过时间筛选控件过滤图表上的数据范围等。 △  Dashboard分析场景 最后,在复杂业务中,Dashboard还用于概览场景,集中呈现业务分散的重点信息,用户还可以通过提供的入口快速跳转至相关模块。 △  Dashboard概览场景 通常,Dashboard三大主要使用场景是相互配合使用的。例如,用户通常先通过概览Dashboard了解业务整体信息,观察监控数据的情况,如需要进一步分析,用户可以对数据进行多维度分析已获取更多信息。 在监控、分析和概览主要场景中,总结提炼了Dashboard能为用户带来的直接价值主要如下几点: 监控告警,并引导用户定位问题 深入分析数据,获知细节信息 快速获取业务整体重点信息,管理资源 三. 目标用户分析 在对Dashboard有基础了解后并开始设计Dashboard,首先需要清楚:Dashboard的目标用户是谁?他们在什么环境中会使用到Dashboard?做什么事情等?考虑这些问题,有助于确定Dashboard的大致轮廓。例如,在分析用户时获知运维人员在工作时间需要监视机器健康状况,设计时可考虑在Dashboard中呈现正常、异常机器数,并引导用户定位到出现异常的机器,排查问题。 在做目标用户分析时,可以从用户、场景和任务这三方面考虑,以了解用户特点和目标等相关信息。 … 继续阅读

在UI设计中色彩的运用

颜色和其他东西一样,使用起来需要适度。在一个界面中颜色过多会让人找不到重点,而太少友让画面太单调。此时配色方案就是为了摆脱设计中对颜色难以取舍的困难而要必须去做的,以其为基准,在你的设计中灵活运用,让颜色使画面饱满而不杂乱。那如何做到颜色在设计中的平衡,如何让颜色成为你设计的一大利器,我们就此来讨论下。   Color does not add a pleasant quality to design — it reinforces it. ——波纳尔(Pierre Bonnard,1867-1947)(颜色不是给设计添加了优点而是强化了它)   在你的默认的调色板满足不了你的需求时,利用色相、饱和度、明度做出对应调整,将会提供一种不同的表现方式。   60–30–10 原则   室内设计原则是一个永恒的装饰技术,从室内装饰的配色中,可以去年轻松完成你设计的配色方案。60%+30%+10%的比例分配指的是画面中颜色的面积占比,从而让画面的色彩平衡。这种平衡让我们的眼睛从一个焦点自然过渡到另一个焦点。坚持这个原则达到平衡也是很容易做到的。   60%是你的主色调,30%是二色,10%是重音色。   色彩意义   科学家们研究了几个世纪以来某些颜色的生理作用。研究显示,颜色的含义可以根据文化和环境而有所不同。除了理论,色彩是情感和联想的创造者,不同的颜色会让人产生不同情感,也会让人产生无限的联想。这就是为什么你会看到黑白时装店。他们想显得优雅和崇高。   红色:激情,爱,危险 蓝色:平静,负责,安全 黑色:神秘,优雅,邪恶 白色:纯净,沉默,清洁 绿色:新生,新鲜,自然     首先考虑单色设计   在项目设计初期,我们通常从挑选颜色设计配色方案开始,但是这个习惯总会让我们在花了3个小时调整基色后发现,挑选的颜色跟我们的设计初衷不符合,都用不了。   相反,如果强迫自己从开始就专注于间距和布局元素,那会节省很多时间。从单色开始设计的界面虽看上去简单,但从另一方面讲,通过控件元素和分区排版的设计,它看起来并不乏味。如果你想让整个作品看起来更好,可以尝试不同的饱和度或者明度来进行调整。   … 继续阅读

超全面的用户引导设计指南

网易UEDC-任轶:用户引导,在生活中随处可见。医院的科室指向标、交通警察的指挥手势、男厕内为了达到“精准射击”的小苍蝇…… 然而,当我们看到不知是该“推”还是“拉”的门把手、看不出状态的开关、摸不清头绪的指示标,便会产生迷惑甚至焦躁。 引导是通过某种手段或方法,干预目标对象的决策和发展,促使其更快地接近目标。 工作中,臭脸君经常纠结如何告知用户功能新增和变更、如何让用户按照我们的预期顺利使用产品。为什么说纠结,因为既然是引导,都是附加在原有产品功能之上的,往往不是用户心理预期之内出现的东西。正因如此,我们更需要谨慎思考,选择最恰当的方式实现我们的既定目标。 用户引导的目的 从用户的角度来说:降低学习成本,迅速上手使用产品;告知有价值的信息,减少时间和精力开支;提前预知帮助,愉快的学习使用产品。 例如App Store的精华产品Paper,作为绘图软件它的交互建立在很多特殊手势之上,还定义了一些带有品牌特色的操作规范。要知道用户没有多少时间和耐心去摸索一个完全陌生的产品,因此Paper为用户使用初期做了大量的引导。 从产品的角度来说:需要通过用户引导,让新用户快速了解使用产品;吸引用户使用操作新功能或指定对象;提前给予用户帮助,提升产品体验的愉悦度。 用户引导三要素 如何做引导设计?首先我们需要想清楚以下三个要素之间的关系 目的:我们想达到的目标是什么?用户能从中得到什么好处?我们能从中得到什么好处? 用户:目标用户是谁?新用户还是老用户?活跃用户还是轻度用户? 场景:被引导对象的使用场景是怎样的?需要在什么场景下触发? 不同的用户、不同时期、在不同状态下,希望得到的帮助不尽相同。譬如高级功能在新用户早期就不应给于引导,收效不大还会提升了学习成本。 我们不妨多反问自己几个问题 1,这个功能真的很必要引导和提醒用户吗? 2,这个功能是需要让所有用户都知道还是某一类用户知道就可以了? 3,这个提醒是需要所有场景都提示,还是到某一类特定场景才来提示呢? …… 如果以上几个问题你都能胸有成竹,那就开始吧骚年~ 触发点的选择 用户引导的触发点,就是在什么地方触发引导。是用户打开程序时触发?到达特定页面后触发?操作了指定功能后触发?到了某个时间点触发? 作为设计师我们一定要懂得取舍和克制,什么都想说就等于什么都没说。想象一下用户隔三差五就能碰到引导提示,你的好意成为埋伏在产品中的地雷,而用户也被你一手培养成“拆弹专家”。 切勿像下图这样,一股脑的将所有东西抛给用户。 举一个触发点相关的小栗子 扫一扫功能中,易信和微信都很贴心的引入照明功能。目的是为了满足光线不好时可以辅助用户完成扫描功能。 左边是易信的界面,“照明”按钮是默认显示在取景框下方,位置选在页面中间倒也很好发现。而右边微信对场景进行了细分,环境光线理想时不显示照明提示按钮,当设备检查到环境较暗,“轻触照亮”按钮便会出现。一对比便高下立见,微信不但保障了正常状态下页面的纯净,而且从无到有的闪现比默认常置更能引起用户注意。 引导的类型 信息提示类 用信息展示的方式,帮助用户理解产品的功能和所需要执行的操作。最常见的就是“小红点”“未读提醒”“更新提醒”这样的提示。 从左到右依次为:云音乐页面中的红点和数字标识、聚划算中的结束时间提示、唯品会中清空购物车的倒计时。 功能提醒类 出于有些icon达意不明确、有些功能被收起或隐藏在手势中、主打功能希望被用户快速掌握等原因,需要加以引导降低用户的学习成本。 类似的提示案例很多,在这里就不赘述了,下面分享两个臭脸君觉得不错的例子。 左图是微信预知引导发图的功能,当检测到相册里有新增图片时,一定时间内点击微信的“+”,就会出现一个发图的小浮层。此功能引导已成为很多应用模仿学习的对象。 右图是支付宝的对话页面。你是否遇到过这样的情况,当你打开支付宝想给对方转账时,点击“发送”后才发现发过去的是个文本信息= =。应该是支付宝的设计师也嗅到了这个痛点,将此问题优化为检测到用户输入了纯数字内容时,便在键盘的上方出现一个“给对方转账n元”的按钮。 臭脸君最近一次脑袋短路时,看到此按钮的瞬间就感动到内牛满面。“你懂我”的认同感油然而生~~ 操作引导类 … 继续阅读

点融理财4.0改版踩过的那些坑

Doris:来点融将近两年的时间里经历了三次大改版,我们团队也从开始的十人左右渐渐壮大到了三十多人,这次的改版和不同领域的小伙伴们合作,确实获益良多。如果说第一个大版本只是实现基本投资功能流程,第二个大版本是优化界面设计,那这次的四点零就是加入了产品运营、最新设计趋势和情感化,让一个app从能用,好看,到让用户喜欢,也算是一种产品成长和成熟的历程。此次撰文,就是想和大家说说我们在App进化过程中曾经踩过的那些坑,由此收获的经验教训,以及一些不成熟的总结,与君共勉。 △ 产品迭代版本的目标 改版关键词 这次4.0改版的核心目标主要为两大部分。第一是在产品层面上,针对新用户,设计了特定使用场景的优化体验,并且从长远运营维护的角度去思考和优化各页面的信息架构。第二则是设计表现力上的优化,以情感化为主要手段,结合动效的渲染和烘托。 年前接到大改版需求的时候,我们先是分析了一下现有版本的不足之处。首先是在产品层面缺乏了一个新老用户的衔接流程,运营活动略显单薄,其次设计表现的主要问题为品牌色运用太重,而信息结构上的问题是由于之前设计的时候对于未来迭代功能没有提前预估引起的,拓展性很差,后期添加新功能的时候只能强行塞进页面,导致界面承载的信息过多,难分主次。 △ 先前版本存在的问题 针对这些问题,结合我们产品现有的阶段目标,对于用户人群的特征及接受程度进行了分析,最终总结出我们此次4.0改版目标——把“色彩、信息、情感化”作为针对改进的目标点和关键词,同时加入运营的体系化设计,让整个App活灵活现起来。 △ 新版本4TAB 一. 色彩的重新选择 之前的版本Title Bar运用了品牌绿,强行强调一波品牌的同时也带来了不少困扰,尤其是在一些顶部有运营banner的情况下,更容易产生视觉干扰。另外单一的品牌色也很容易带来视觉疲劳。所以这次改版我们毅然决然的去掉了这头顶的一抹绿;让用户把视线焦点更多的聚集在页面主要内容上。 △ 颜色定义 整体的感觉是比较“轻”新的。在颜色的选取上,为了去除原先的单一感,除了原先的品牌绿色,又新增了两个暖色作为辅色,同时为了避免产生白纸黑字的过强对比,也更新了原先使用的标题色黑色,使用了一个偏蓝的颜色和绿色搭配更为和谐。 二. 信息为王,装饰点睛 现在屏幕越来越大,屏幕上的信息也越来越多,所以在处理页面的时候,一方面是信息重构,交互的童鞋重新梳理了所有主页面和主流程,另外在视觉上,为了清晰明了的展现信息,文字由原先的Light改为了Regular量级。 Light字体相信许多设计师曾经使用过,确实可以让界面显得轻盈纤巧,但对于需要阅读信息的用户来说,就没有加粗之后的字体那么友好易读了,所以我们也可以看到在现在的中文设计趋势中,大家更多的会去实用regular为初始的文字量级,Medium作为加粗的量级了,这也是信息为王在设计趋势中的一种体现吧。其他的方法例如增加留白,把重要的信息凸显出来。最后在icon的使用上,可以参考下图我们对于icon的分类定义。 △ ICON的定义 三. 情感化体现 情感化是我们此次4.0改版的一个重头戏,一个App如果实现了其所有功能的流畅易用,界面清晰明了,那只能说是一个“可以解决用户问题”的App,但要做一个让用户喜欢、依赖、并且乐于去分享的App,情感化元素的加入是必不可少的。就像我们这次启动页所说,“全新4.0,为你而生”,这次改版我们主要是从新手引导、点小融形象的运用和加强动效设计这三方面入手来丰富App的情感化体验。 1、新手体验是用户对App的初体验,这次我们特地在产品层面区分了新老用户的引导路线,在首页设置了新手专区,用户可以清晰的看到自己的新手任务以及可获得的奖励,每个任务完成的时候也会有动画提示,成就感满满。 △ 新手引导 2、点小融形象在点融用户中广受好评,所以我们的设计师Kooper在此基础上精心设计了一系列的点小融形象,增加了点小融的使用场景,比如在首页底部的上拉彩蛋,在团详情页会提醒用户优惠券即将到期等等,更多惊喜就请大家下载新版App尝试啦。 △ 点小融 最后说一下本次改版的动效设计。现在很多App都开始注意到动效的问题,并且越来越多的使用动效,这是一个喜闻乐见的现象,一方面说明机器性能日新月异(硬件支持),另一方面也说明大家都开始花心思了。但是要注意的是,动效相对于静态页面是个强引导,非常的吸引人注意力,太多的动效反而会让人眼花缭乱,分散了对重点信息的注意力。而动效的主要作用提现在不同视图的焦点引导;当用户完成了一个手势后,提示用户将会发生什么;明确元素之间的层级和控件关系;当程序加载较慢、运行出错时分散用户的注意力;润色整个App;提供个性化、令人愉悦的使用体验。这次4.0的动效由我们专业的动效设计师Snow负责,贯穿全局,从加载到弹框到特制的场景化动效,都经过了严密的思考和调试,让动效能够最大化的为内容来服务。比如: △  下拉刷新 △ 列表入场 由于这次大改版几乎涉及了所有页面的风格更新,在完成主要风格定义之后,需要一个规范去推进其他页面的设计和页面铺开。在此我作为两代视觉规范的作者,总结一下个人制定视觉规范的经验。首先是全局框架,主要是定义内容边距padding,接下来是颜色和字体这两个最为基础的“地基”部分。由于点融理财是一款投资App,其中有很多的数字展现是非常重要的,所以这次我们引入了特殊的数字字体Roboto和RobotoCondensed来提升数字的感染力。 △ … 继续阅读

UI设计中插画那些事

在互联网产品刚刚兴起的阶段,app设计非常简陋甚至直接就是网页端的另一种打开方式,用户对app的期望也不高,只需要看懂即可。但是随着手机与人们生活联系日益紧密,如今我们清晨醒来,做的第一件事情就是打开手机,或是晚上让手机伴我们入眠。手机不仅仅是工具,它开始变成了我们身体的一部分,或者说是身体的延伸。用户对于app的要求也水涨船高起来,对于他们而言,app不仅仅是功能的集合,还要满足他们的情感需求。网站也面临同样的挑战。如何让产品满足用户的情感需求进而与之建立联系开始成为了设计师们的一个共同的课题。插画的合理应用或许可以帮助到我们。 人性化处理 用户对于传统互联网产品一大吐槽就是过于“机械感”,对此设计师们对产品进行了人性化处理。拿谷歌日历举例,一般的日历类应用界面可以做的很简单,直接给用户展示一个“日历”就行了,用户同样可以看懂。但是谷歌日历很聪明的使用了插画,而且每一个月份都会更换,这可以很好的拉近用户与产品之间的距离。 同样的,我们可以看到宁波银行直销银行,其图标背后的插画每个季度都会更换。定期更换的图标/插画打破了传统的一成不变,不断带来新鲜感更能获得用户的好评。 谷歌日历对于插画的偏爱不止于此,我们发现在用户的个人日程中,比如你添加了一项活动安排“晚上8点和同事Jimmy喝咖啡”,那么这个活动背景就会配上很俏皮可爱的咖啡插画。用户的情绪能够被调动起来,特别是对于低年龄段和女性用户来说,她们很喜欢这种趣味性插画。 高效的信息传达 此外用户对于具象元素(插画,icon,图像或摄影图等)的感知能力远比文字要强得多。所以同样的一个日程安排,使用了插画了以后,用户可以在极短时间内明白,这个是和同事的咖啡约会,那个是要去牙医那里看病。 根据尼尔森的一项统计显示,用户平均只读每页文本内容的28%。这意味着,面对大段文字,用户很少去读,他们更多的是“扫描”。 以Intercom为例,该网站几乎每个页面都配有Quentin Vijoux的插画。其不拘一格,异想天开的风格令人着迷。当然这里插画可不仅仅是好看,每幅插画都是与其页面内容紧密联系。用户甚至不用看文字,通过插画上所描绘的场景就可以知道该页面的大致内容。换言之插画在这里替代了传统意义上“标题”的作用,不过这种象形结合的“标题”更加高效。 Intercom中插画的应用更可以帮助其品牌树立形象。目前市场上有大量功能相近且设计相类似的产品,用户最终选择使用的是哪款产品可能就是因为他觉得有个页面中那副长颈鹿插图很好看。 增加产品趣味性 Know Lupus是一个旨在向人们科普狼疮这种疾病的网站。众所周知医学知识晦涩难懂,并且学习过程漫长又枯燥乏味。为了改变这个窘境,设计师们将学习过程做成了一个卡片问答游戏。寓教于乐,并且引入了插画和动效,使整个学习过程充满了趣味性。   插画or图像 具象元素不仅可以更好的完成信息的传达,更能吸引用户的注意力。那么插画能够做的事情图片(摄影图)也能做到吗?并不完全能。 这是一个大学生就业网站页面,左侧是一些重要的就业信息,右侧为大学生讨论时的照片。蓝色的小点代表了用户注意力所分布的区域,研究表明在有更为重要内容的前提下或者图像本身不具有任何意义,图像仅作为一个装饰物的存在很容易被用户忽视。 当然这并不意味着,我们需要把页面中所有的图像全部给删掉,图像依旧是一个重要的设计元素,我们要学会的是如何正确的去使用。 在下面这个页面中,用户可以看到团队中团员信息,我们发现用户的注意力都会集中团员的头像上。为什么同样是图像,所获得的待遇就差的那么多呢?因为这里的图像(头像)是有意义的,具有功能性,而不是一个装饰物。用户通过头像可以迅速准确的获知组员身份,这比一个个去看组员姓名要快得多,所以用户会更多的将注意力放在图像上。 在上面这个例子中,图像成为了传递信息的载体,它们不再只是内容的装饰物,它们本身就是内容。 此外,插画比图像应用更广泛的一个原因是插画在UI设计中更具有实际意义。因为无论是插画还是图像都是为了让用户更好的接受页面中内容,而现在内容在页面中正在变的越来越抽象,图像很难直接来表现。 Dropbox Carousel是一个为Dropbox用户管理照片和视频的app。即使这款app管理的主要都是摄影图,但是设计师在进行UI设计的时候还是摒弃了摄影图。因为他们认为,用户看到一张照片,只要主角不是本人,他们就很难产生关联感。比如图中的那个过生日场景,这里采用插画会给我们一种很温馨的感觉。如果是真人出镜这种感觉就会减弱,因为那个人不是我啊。相比于图片,用户对于插画更具有代入感。 此外还有我之前上面说到的Konw Lupus网站采用插画的原因之一就是,如果直接给用户展示现实生活中狼疮病人的照片可能会引起他们的不适。插画可以对病人进行卡通化处理,这里还特意省略了病人的面部表情。 总结 我们一直常说要给用户好的体验,但是究竟什么才是好的体验呢。我认为好的体验应该超出用户预期,并且让用户有所感知。我相信插画的合理应用可以很好的帮助用户了解你的产品,实现差异化设计。希望这篇文章可以给各位同行在未来的插画设计中提供一些帮助。   原作者:Blair Culbreth 作者:王M争 文章来源:ui.cn

IOS 10 VS 11:一份全面深入的UI对比分析报告

WWDC 2017 Keynote 结束没几天,相信很多对 UI 设计有兴趣的朋友应该很好奇 iOS 11 详细的设计变动有哪些,但是自己的手机又不方便装开发者版本,所以就让我替各位踩雷吧。 两个版本分别是 iOS 10.3,以及 iOS 11 beta 1,而由于后者尚未正式推出,因此某些设计有问题的地方,Apple 可能会在后续版本变动或修正,不过整体来说应该不会有大改变了。 本篇文章会从三个大方向来观察新设计,分别是: 功能与操作体验 设计语汇 产品策略 并再细分成几个小主题,而剩下较零碎的比对就列在后面;太细微的变化我不会列出,毕竟要截出大量的相同画面真的很费工夫。 对了,我只会列出不同的地方,并且推测其设计意图,不会有太多评论,我想这留给各位自行思考比较有趣。 1. 功能与操作体验 大幅简化的主画面结构 从 iOS 7 到 iOS 10 以来,随着功能的增加,锁定画面、主画面、通知中心这三者的结构越来越复杂,其中的操作逻辑和视觉线索就产生了明显的矛盾,例如下面这是 iOS 10 的主画面结构: 以上的画面有些非常相似,但出现的时机和细部功能又不太相同,而这点在 iOS 11 获得了明显改善,可以看到操作逻辑的结构变得简单多了: 这设计一定是有变得更好、更合理,但我不确定这样大幅改变对于使用者的习惯来说是不是好事。 以下的左右比较图都是「左旧右新」。 解锁画面 解锁的数字键 base 变成实心,除了配合新的设计语言外(后面会详细观察),推测是避免框线和细字的搭配会干扰阅读。 主画面 App 名称的字变粗,改进阅读体验。 … 继续阅读