如何利用网格系统科学地打造APP界面?

在视觉设计师设计一款APP的时候,最先要制定一套完善可行的设计规范,其中会详细定义颜色、文字、图标、结构、布局、间距等要素。但是很多设计师往往会忽视一个重要的东西,那就是网格系统的构建。网格系统可以说是整个页面的骨架,它将页面中所有的设计元素高效有序地组织起来,从而让整个APP的设计具有高度的一致性和规律性,提高设计师工作效率,避免凭感觉做设计。 本文将从网格系统的基本概念介绍出发,逐步探寻构建网格系统的必要性、网格系统的实际运用方法、以及使用网格系统可能遇到的坑。 什么是网格系统? (1)网格系统的定义 网格系统是利用一系列垂直和水平的参考线,将页面分割成若干个有规律的列或格子,再以这些格子为基准,控制页面元素之间的对齐和比例关系,从而搭建出一个具有高度秩序性的页面框架。例如:谷歌的Material Design中,将整个页面看做是一个网格,所有页面元素都与网格线对齐,并且将这一规则贯穿于整个产品的设计中。 (2)网格系统的由来 早在20世纪初,德国、荷兰、瑞士等国的平面设计师们就开始提倡用客观的设计原理进行文字的编排,二战后这种理念在瑞士得到了良好的发展,直到20世纪40年代后期,第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 约瑟夫·米勒-布罗克曼 所著的《平面设计中的网格系统》一书,自1961年出版以来畅销至今,对设计界有着深远的影响。 目前,网格系统已经广泛地运用在杂志、平面设计、网页设计、移动端界面设计之中。 为什么要学习网格系统? 1.  提高团队协作设计效率 当多名设计师共同设计一款APP的时候,一个经过深思熟虑的网格系统就变得尤为重要。每个设计师都有一套自己的设计方法和习惯,如果没有一个统一的框架去约束的话,有可能在设计类似的组件或页面时,不同设计师会给出不同的设计解法,这样的话整个APP内的页面都会比较混乱。 例如下图,设计师A和B都各自遵循一套尺寸规范去搭建页面,但是设计结果给人的感觉却完全不一样。 因此,拥有一套统一的网格系统,就能保证设计师们的产出具有高度的一致性、规律性,合作起来更加地高效。 2.  更加理性的做设计 不同于纯感性创作出来的艺术品,UI设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够让你的设计更有秩序和节奏感,页面信息的展现更加清晰,提高阅读效率,从而提供给用户舒适的使用体验。 3.  减少做决定的时间 作为强迫症高发人群,很多设计师在处理页面细节的时候,经常会为了一个更好的视觉效果反复推敲,甚至为了一个图标到底应该使用20px好还是24px好而发愁,这样十分影响设计效率。即便几个页面的设计都达到了自己满意的视觉效果,也很有可能因为使用了不同的尺寸规则,而让设计缺乏了统一性。 制定完善的网格系统,能让设计师在页面布局和细节处理上更明确、自信、高效,一切设计行为都是有据可循的,减少因为一些细节推敲而造成的不必要的时间成本,拒绝拍脑袋做设计。 网格系统的基本构成要素 1.  单元格 前面我们介绍了网格系统是由水平和垂直的线,将页面划分成一个个细小的正方形格子,那么这个正方形的格子,就是网格系统里面最基本的元素“单元格”,即图中黄颜色的区域。 作为接受过九年义务教育的好青年,想必大家在中学的时候都接触过化学的基础知识,物质的最小单位是原子,原子组成分子,分子组成有机物……我们可以把这个单元格看做是一个原子,那么图标、按钮就是分子,整个页面就是由无数原子组成的有机物。 2.  外边距 在APP页面中,所有内容都会显示在中间的内容区域里,那么内容区域与屏幕的左右两端所留出的空间,就被称为外边距。 外边距数值越大,页面显得越宽松,数值越小越显得比较“满”,因此需要根据自己实际的情况去确定具体数值。例如:Airbnb的产品调性就是简约大气,整体布局比较宽松,因此在外边距的数值上选择的是48px。再例如:网易云音乐,页面中以专辑、歌单等的封面为主,侧重于表现图片的视觉冲击力。因此页面内容区域比例会比较大,外边距的数值选择了12px。 3.  列和水槽 页面的内容区域由N个列和(N-1)个水槽组成。在WEB端设计中,N的数值一般会采用12、16、24,但是在移动端设计中,列的数量不宜过多,因为手机屏幕宽度有限,列的数量越多,页面就会被分割的越“碎”,在页面设计时就会越难把控。 水槽宽度数值对页面的影响,与外边距大体类似,即数值越大页面越宽松,反之亦然。例如:Airbnb选择的是24px,而网易云音乐则是6px。 4.  横向间距 在杂志的设计排版中,会经常使用到基线系统,即水平方向会分布着一条条间距相同的参考线,用以规范文字和图片在水平方向的节奏关系。然而平面排版中尺寸相对固定,移动端的屏幕宽度和元素组件高度确都具有不确定性,因此这套基线系统不能直接照搬过来,需要视情况使用。 在文本段落中,横向间距就可以使用基线系统,用以规范水平方向上文字的节奏关系,这种情况多出现于阅读类产品的正文页。基线的间距数值,则根据自身产品实际情况而定。例如下图中基线的间距设定为4px,则字号和行间距均使用4px的整数倍,因此每一行字都会准确压在基线上,保证了视觉节奏的一致性。 而组件与组件之间的横向间距,就和纵向间距的使用规律保持一致,即选用最小单元格整数倍的一系列数值,来规范组件在水平方向上的节奏关系。例如下图中的最小单元格设置为8px,那么横向间距的数值就会选用8px、16px、24px、32px等。 如何在APP设计中运用网格系统? 第1步:定义最小单元格 最小单元格的数值,大多数APP会选择4-10这个范围内一个偶数。那么选用哪个值最为合适呢? 这需要从两方面考虑: … 继续阅读

在这些因素的制约之下,才能选取出科学的配色方案

Tubik Studio :我们的日常生活中总是面临着无尽的选择,大量的挑战。设计的决策也是如此,一个正确的决策会受到很多不同因素的影响,经验,知识,事实依据,还有别人的建议等等。在进行UI设计的时候,配色方案的选取是需要通过合理的决策来判断的,是使用深色系的配色比较好,还是浅色系的配色合适? 影响配色方案的因素 正如同我们所熟知的,配色方案的最终确定受到多方面因素的影响,它不仅涉及到用户,而且还受到业务目标,市场条件和当前设计趋势的影响。让我们简单回顾一下在这个问题上必须考虑的基本因素吧。 可读性和易读性 这两个概念都和文本内容的感知直接相关。可读性指的是人们是否可以轻松阅读单词、短语和内容块的高低,而易读性则指的是用户能否便捷快速地识别特定字体中字母的度量。 在进行配色的时候,应该将这些因素纳入到考虑当中来,特别是涉及到需要填充大量文本的界面的时候。配色方案对于界面中文本的感知有效度有着至关重要的影响。在白色或者浅色的背景上,显示黑色的文本,比起在黑色的背景上显示白色的文本,看起来要更显著、清晰度也更大一些。较差的可读性将会直接带来更差的用户体验,用户无法快速扫视数据,甚至会在视觉上产生莫名其妙的混乱,甚至导致用户错过关键信息。 这是否意味着浅色背景的可读性更强呢?并不一定。著名的UX设计大师 Jacob Nielsen 曾经提到过:“文字和背景之间应该采用高对比度的色彩。白色背景上的黑色文字(正文本)和黑色背景上的白色文字(负文本),在对比度和易读性上几乎是完全一样,但是后者和日常的阅读习惯并不一致,这种倒置的配色方案会让人在阅读速度上更慢。当文本比纯黑更浅一些,而背景并非纯白的时候,易读性会相应的变得更弱一些。”如果设计师对于不同的配色和字体特性上有足够的了解和探索,很多配色方案都可以具备良好的易读性和可读性。 不过,在上世纪80年代的一系列科学研究表明,对于大量的文本而言,浅色背景是更多用户的选择。为了研究广告背后的运作机制,D.Bauer 和 C.R.Cavonius 在他们的文章《Improving the legibility of visual display units through contrast reversal》中分享了他们的探索结果。文中特别提到一点,相比于深色背景和浅色文本,他们发现参与调研的用户在白色背景深色文本上的阅读正确率高出了26%。 为什么会这样?来自 Sensory Perception and Interaction Research Group 的 Jason Harrison 是这样解释这一现象的:双眼有散光(根据调研大概50%的人会出现这样的状况)的用户会更难以感知黑纸白字中的文本内容。在感知屏幕内容的时候,如果是白底黑字,双眼虹膜会有更多的部分会选择闭合,晶状体的形变相对较少。在黑底白字的情况下,虹膜会有更多的部分会选择开合,提高对光线的吸收,晶状体的形变会更大,相应的结果是眼睛更容易模糊失焦。因此,如果界面中包含大量的文本内容,使用的浅色背景和深色文本对于用户会更加友好。 可访问性 可访问性通常指的是 Web 页面或者 … 继续阅读

你设计的图标,能顺利通过图标的可用性测试吗?

在业务迭代周期内,产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中,有时会出现一些拿捏不定的设计细节。比如,试图推出某个新功能时所设计的图标,它的应用效果如何?如果你还在头疼诸如此类的问题,那现在就可以take it easy了,因为你即将拥有一个得力助手——图标的可用性测试,来帮你排解疑惑。如何拥有呢?还请认真阅读本期内容。 图标的可用性测试,测的是什么? 以下有4个指标,用于判断图标是否可用。 可查找性(Find-ability):用户是否能在某页面上找到该图标。 可识性(Recognition):用户是否能够理解图标所代表的意思。 预测性(Information scent):用户能否猜到点击图标会发生什么。 吸引力(Attractiveness):图标是否美观。 以上这些都是关乎设计是否成功的关键方面,在思考如何改进一个图标的时候,必须分别考虑。 如何进行图标的可用性测试? 图标的可用性测试的方法,可以主要分为2个类别:脱离情境的测试(out-of-context testing)和情境之中的测试(in-context testing )。选择哪种类别,取决于测试时,图标是单独呈现给用户,还是在真实完整的界面之中呈现给用户,前者是脱离情境的测试,而后者则是情境之中的测试。 1. 可查找性(Find-ability)测试 图标需要被展示在完整的真实界面中。 因此,需要采用情境之中的测试,它可以帮助你明确,是否存在多个过于相似的图标,使得被访者需要花较长的时间去区分它们;是否图标被隐藏在相似背景色之中,或者广告很多的地方,使得被访者忽视了图标。 其中,定位所需的时间测试(time-to-locate tests)为最佳方式。 测试中,被访者需要按任务点击图标,你需要计算被访者成功找到目标图标的操作时间,首次点击的正确率。 首次点击的正确率,指的是用户第一次点击即选中目标图标的频率,错误的选择暗示着图标之间的差异不够明显。 2. 可识性(Recognition)测试 用户需要猜出他看到的图标代表了什么,有什么作用。 因此,选择脱离情境的测试,它让图标在没有文本标签,或者其他界面元素的情况下,被单独展示。 从用户的描述中,获得他对于图标的理解。如果用户的理解与图标想要表达的意义不符,就意味着需要重新设计图标。 不推荐的方式:如果图标将伴随着文本(文案)标签,在测试的时候,给用户呈现文本标签,然后让他在几种可能的图标中选择最能代表标签意思的图标。 不推荐的理由:在现实情境中,有的用户会忽略文字标签,只看图标。 3. 预测性(Information scent)的测试 图标的可用性测试目的,不仅是测出用户理解出这个图标的意义,还需要测出用户推断这个图标所代表的功能。 因此,选择脱离情境的测试,询问用户当他点击图标后,将会发生什么。 4. 吸引力(Attractiveness)的测试 增加视觉的吸引力,是使用图标的一个常见原因。 最简单的测试方式:让用户给每一个图标打分,最高分7分,最低分1分. … 继续阅读

UX写作:让UI界面为更好的用户体验而发声

在过去的2年当中,设计领域一直在探讨UX写作(UX Writing)这一“新兴”的设计分支。实际上,即使是对于许多专业的UX/UI 从业者而言,这个词汇其实还是挺令人懵逼的。有些人认为这是“用户体验设计”的新提法,有人认为它只是与UX设计相关的文案。在今天的文章当中我们将会探讨清楚,UX写作到底是什么,以及正确的使用方法。 UX写作是什么 这个词汇可能比较新,但是UX写作的这种设计流程,在实际的设计应用当中,其实已经存在很长时间了。UX写作,实质上指的是,为了更好地引导用户,并且帮助用户在实际交互中更好地运用产品,而合理地打磨出拥有更好用户体验的文案的过程。UX写作,主要的目标是解决用户和数字产品之间沟通的过程。 UX设计师在进行UX写作过程中所产生的文案,通常也被称为微文案(Microcopy),指所以有这个称谓,是因为这些文案是为了服务用户,提供引导和提示而存在,以区别于其他的目的性更强的普通文案。更具体的说,微文案主要存在于按钮和菜单这类UI控件当中,还涵盖了错误提示、安全说明、服务条款以及其他用于提示和引导的产品界面中的控件。 为何需要UX写作? 微文案是APP和网站不可或缺的组成部分。为什么会将写微文案的过程表述为UX写作呢? UX写作能成为现在这样一个相对独立的分支,原因之一是UI中的文案得到了越来越多的重视。营销和设计领域的专家认为界面中文案对于用户的影响越来越大。错误的文案表述可能会毁掉优秀的UI设计,而通过用户测试,我们发现它直接影响着整个UI的信息架构和导航体系,重要性不言而喻。 如果我们从用户的角度来看待产品,我们会发现这些微文案和小提醒对于整个交互行为,作用是如此的巨大。当用户第一次打开某个应用的时候,设计优秀的简短文字提示会让整个新生流程快速而有效。专业的微文案,会让整个导航体系清晰而直观。 考虑到微文案对于用户体验的积极影响,UX写作这个新领域就逐步建立了起来。从这一刻开始,我们可以有意识地通过文案这一微小的元素开始着手强化APP和网站的用户体验设计。 谁来执行UX写作的任务? UX写作的范围和界定都已经明确了,那么这个环节要谁来执行呢? 毫无疑问,UX写作所输出的微文案对于产品是巨大的,理论上UX写作这一任务背后应该有专家坐镇。实际上,我们发现现在许多公司已经开始开辟出类似的职位,让专人负责UI中微文案的写作。他们的职责是通过微文案来提升产品体验的愉悦感,并且创造更加优秀的导航体系。 UX写作是一个有前景的职业方向,而优秀的微文案往往能让营销人员和文案设计师的工作更好开展。在UX写作这一概念出来之前,这些负责微文案的UX设计师/文案设计师就已经开始了微文案的创作,而现在,它变成了正式的职业,并且从隐性的要求演变称为了具体的工作。 不过,并不是只有专门的文案能够创建UX微文案。设计师也常常会参与到UX写作的创作过程,虽然他们可能无法在文案处理上媲美专职文案,但是他们对于产品设计、信息架构和导航系统有着无与伦比的了解。基于UI/UX设计师的职业本能和专精领域,他们了解用户如何感知视觉信息。 专职文案和设计人员可以共同参与到UX写作当中来,这两个职位的协同能够带来良好的微文案和用户体验。如果专职负责信息架构的人员也能参与进来,能够让产品导航嗯好地引导用户。如果公司旗下有许多不同的产品线,那么有必要雇佣专人来负责UX写作了,这样能够最大程度提升团队的生产力和效率。 高效UX写作的秘诀 很多人认为,UX写作是一件并不耗时的事情,因为在界面的很多地方,它都只是以小段话,甚至几个单词。但是,真正想创造出强有力的CTA元素,往往需要花费远超预期的时间和精力。 微文案通常可以是一个单词也可以是一个短句,这些内容一般会具备一定的功能性。牵涉到用户体验的每一个词语都是重要的,它们一定不能模棱两可。但是在功能上,它应该是多重的:一方面它要微用户提供明确无误的指引性,另一方面,它也需要传递出情绪,促使用户去点击。在每个CTA按钮背后,通常都会有商业目标,而这个因素也是UX写作者需要考虑的。 UX微文案应该足够清晰,在宏观上还得是足够一致的。用户要能够一目了然地明白微文案所表达的意思,而无需琢磨。它的指向性得足够明显,确保交互的顺畅无误。如果用户没有感到刻意的被引导,那么这个微文案就是成功的。另外,微文案应该是基于上下文环境和目标受众来设计的。 之所以说微文案是一种设计元素,是因为它高度依赖于视觉呈现。UX写作者要让它看起来符合整个设计体系,这样就不会显得貌合神离。而这也微文案设计的难点和限制之一。 关于UX写作的实用建议 现如今,相关的专家们仍然在探索有效的UX写作技巧和方法。不过就目前而言,虽然系统的策略还没有,但是已经有一些相对分散的UX写作技巧可供分享。 1、站在用户的视角。如果你想要创造真正对用户有用的文案,最好是要站在用户的角度来看待问题,了解什么样表达才能帮到他们。用户调研有助于了解目标受众。 2、不要使用复杂的词汇。正如同我们在前面所说的,有效的UX写作所输出的内容应该是清晰而简单的,微文案应该易于理解,这也是为什么进阶的词汇很多时候不可行。 3、文案要尽可能短。微文案之所以被成为微文案,是因为这些文案必须短小精悍,这才能对应上“微”这个字。它应该表情达意,同时不会引起太多的注意。 4、面向不同的用户测试这些文案。通过测试的文案才能更加经得起考验。如果你没有和目标受众匹配的测试用户,那么你最好可以拿你的朋友和同事来测试,了解他们的感受。 5、保持创意。微文案通常只会使用简短直白的语句,但是并不意味着让它无聊。试着去创造一些积极有趣的内容,例如在报错信息当中加入一个真正能够触动用户的笑话,打破出错的紧张感,然后帮助用户解决问题。当然,你的创新尽量不要太过于特立独行,过度的设计可能会让用户抵触。 6、搭配图片。在出现错误或者需要对用户进行引导的时候,可以搭配漂亮的图片和指引性的插画,帮助用户理解。 7、突出品牌特征。不要忘记,产品所有的文案和内容通常都会被视作品牌的组成部分,因此,在设计微文案之前,你要对品牌的特色有足够的了解,以便最终的微文案能够和品牌形象保持一致。 结语 微文案,或者是UX写作是一个充满潜力的新方向。UX从业者应该将微文案视作为用户和产品交互的一个重要组成部分,在这样的语境下进行UX写作,能够提升产品的满意度。 来源:优设

APP设计中,6种常见组件的区别与用法

在APP设计中,有很多组件有着类似的功能和用法。如何正确使用这些组件?这些组件之间有什么区别?一起看看作者的解读。 在设计iOS版和Android版的APP过程中会涉及到很多组件。不同的场景使用的组件也不一样。这篇文章讲述六组常见的相似组件的区别和用法。 警示框(alert)和底部操作列表(action sheet) 标签栏(tab bar)和工具栏(tool bar) 底部动作条(bottom sheets)和菜单(menus) 选择器(selector)和底部操作列表(action sheet) 下拉菜单(drop-down menu)、底部操作列表(action sheet)及活动视图控制器(activity view controller) snackbar和toast 一. 警示框(Alert)和底部操作列表(Action Sheet) 警示框是传达应用或设备某些状态的信息,并且常常需要用户来点击操作。 底部操作列表展示了与用户触发的操作直接相关的一系列选项,包含两个或以上的按钮。 一般含有三种以上操作使用底部操作列表,一种或者两种操作使用警示框或底部操作列表。 例如:iOS原生邮箱,点击「更多」出现底部操作列表,展示四种操作选项。推特的退出登录需要二次确认,使用的是警示框。 对于警示框(alert)和底部操作列表(action sheet)的困惑多用于二次确认上,例如微信的退出登录使用的是底部操作列表,而qq用的是警示框。 警示框(alert)和底部操作列表(action sheet)的区别于用法: 警示框侧重提示文字,进而表示提示文字的内容优先级较高; 底部操作列表侧重选择按钮,进而表示选择按钮的功能优先级较高; 按钮为0-2个时,建议使用警示框; 按钮为2-n个时,建议使用底部操作列表; 当然有的场景需要强阻断操作,例如提示没有网络,版本升级,这种情况需要使用警示框; 具体情况可根据产品对待。例如微信退出登录用的是底部操作列表,阻断性不强,对用户的打扰程度较低。 二. 标签栏(Tab bar)和工具栏(Tool bar) 标签栏:让用户在不同的子任务、视图和模式中进行切换。 工具栏:放置着用于操作当前屏幕中各对象的组件,在iPhone上,工具栏始终位于屏幕底部,而在iPad上则有可能出现在顶部。 … 继续阅读

没人带的设计师,如何学会用自驱力帮自己成长?

苏大牙牙牙:众所周知,像专业知识、设计技法、设计的方法论,对于设计师来说非常重要,也是立足之本。但是,随着工作的时间越久越发现,自驱力、工作态度、个人性格,等等的方面,同样影响着我们的职业生涯。 尤其是“自驱力”,决定着我们在设计道路上,能走多远、做多深。它也是从工作以来,对我个人成长影响最大的一个因素。 所以跟大家分享下,我运用自驱力的成长方式和培养自驱力的方法,希望对你们有所帮助。 1. 什么是自驱力? 我尝试着把它定义为:做某件事情时,不受外界因素影响,不局限于眼前利益,而为了自己长期目标和获得成就感,而自我驱动完成的方式。 2. 我的自驱成长路径 为了对不同阶段的同学都有所帮助,下面分为三个阶段,以自己亲身经历,来分享如何在不同环境下,利用自驱力得到成长的。分别是:a.创业团队,b.中型公司,c.大的平台。 a.创业团队 这是大家经常碰到的问题,包括公众号后台,也好多人跟我留言抱怨。 其实在我刚毕业的第一年,2013年,也是在创业团队。去了没几天带我的FC同学离职创业了。接下来,我自己独立负责移动端项目,从刚开始的一个终端,到最后同时负责4个端:iOS,安卓,TV,Pad。对于刚毕业的我来说,是个很大的挑战,只能白天工作,晚上自学。很多时候,都是晚上发现了好的设计或者有了好的想法,白天就在自己产品上尝试。 在没人带的情况下,我的自驱学习方法是:1.看;2.玩;3.练;4.读。 1.看 看,不仅要多看,还要精看。在设计初期,辨别好的设计的办法,是选择好的设计平台。比如:Dribbble、Behance、Pinterest,还有一些国内的优秀设计网站,等等。选择对的平台,吸收优秀设计,也是帮助你少走弯路的一个方式。 2.玩 这里说的“玩”,是“玩”各种APP,有目的和优先级的“玩”。 首先,“玩”自己产品的竞品。比如,你是做视频类的产品,那么,你先从传统视频软件玩起:优酷、土豆、爱奇艺、腾讯视频,再玩:YY语音,斗鱼、花椒、映客、等等偏UGC的视频软件。(有助于了解自己产品的整个市场环境,及差异化。) 其次,“玩”同一属性产品。比如,视频类产品属于娱乐类的,所以你还应该玩除了视频以外,用户用来娱乐消遣类的相关产品。(帮你发现更多同一属性产品的优秀体验和好的点子。) 最后,玩各种优秀的产品,去Appstore的各种分类里挑选自己感兴趣的产品把玩儿。(培养对优秀产品的敏感度,保持对事物的好奇心。) 有目的和优先级的玩各种APP,是一个很好的学习和积累的过程,同时,记录他们的产品、交互、视觉值得我们学习的地方。 这是我在2013年的时候对APP进行分析做的笔记:   3.练 完成前两步的“看”,“玩”之后,接下来要开始“练”。首先,可以先临摹,临摹比较好的设计作品,每个细节都需要考虑和临摹到极致(注重技法);然后,再模仿,这个阶段需要你把看到的好设计点子提取出来,尝试运用到自己的设计上(注重思考);最后,原创/创新,根据自己的产品,去做符合自己品牌的设计(注重创新)。 4.读 最后是“读”。阅读书籍,不局限于视觉设计。需要涉及到产品,交互,视觉。这样有助于培养宏观思考能力。同时帮助在小规模公司的你,正确的了解不同职位(产品、交互、视觉、运营、商务、用研、QA、等等)所负责的工作内容,方便合作于沟通。 下面推荐当时对我影响比较大的三本书: 以上是我在创业团队“没人带”的阶段,自学方法。 还有,当你在一家公司想要跳槽时,首先要问自己“还能利用这个平台得到什么?”。 这里说的“利用”,并不是贬义,因为一个好的平台自然会提供给员工“利用”的价值,来帮助他们成长的同时,也会给公司创造更大的价值。 那么,在创业团队,你能利用这个平台获得什么呢? 1.宏观思考 身为创业团队的设计师,不能把自己局限为一个螺丝钉,因为扁平化的管理,让你更有机会接收到一手信息、产品走向,等等。因此你应该利用这个机会提升自己宏观思考的能力、产品和交互思维,而不是天天局限在画几个小icon。 2.主导设计 创业团队,比任何平台都容易让工作年限少的设计师,去主导设计。它使你更有责任心、学会平衡利弊、处理优先级、提升沟通能力,等等的方面。认真主导一个线上产品,远比输出酷炫概念稿,更能让你得到全方位的提升。 3.创新尝试 小步快跑的创业公司,更愿意让你去尝试创新的设计。因此,在创业团队,更容易把你的创新想法、流行趋势,得到落地。 那么,如果说在创业团队的你,已经达到了以上所说的三点,同时自己也有能力挑战更好的平台,再考虑跳槽也不迟,而不要盲目的吐槽,被动的工作。 总结一句话:没有大牛带,你也可以快速成长。 … 继续阅读

iPhone X 适配 手Q H5页面通用解决方案

腾讯ISUX :目前的 H5 页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下: 一. 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏 banner 的效果,由于 iPhone X 在状态栏增加了24px的高度,对于现在通栏 banner 规范的内容区域会有遮挡情况。 解决方案:对于通栏页面在页面顶部增加一层高度44px的黑色适配层,整个页面往下挪44px。 这种做法虽然不符合苹果要求的设计规范,但由于短时间内更新全部 banner 的成本太高,可以先这样简单处理,后续再优化 banner 的设计展现。 底部 Tab 栏 / 操作栏 有些页面使用了底部 Tab 栏 / 操作栏,由于 iPhone X 去掉了底部 Home 键,取而代之是34px高度的 Home Indicator ,对于目前的底部 Tab … 继续阅读

看起来更舒爽!Android 8.1换上全新字体

这周手机圈的热点,被iPhone X无情的霸占着,连谷歌发布了Android 8.1预览版这样的大事,都几乎无人关心,不管怎么样这个新系统的正式版将在12月被推送。 对于Android 8.1系统来说,谷歌依然是优化设备续航,提升设备流畅性和易用性,同时系统还对无线设备连接做了更好的优化,毕竟抛弃3.5mm耳机接口已经是谷歌表明的态度。   现在谷歌还展示Android 8.1首个版本的一些细节,比如新系统换上了全新的名为“Product Sans”字体,这依然是他们自己设计并制作的字体,如果你想体验新字体也很容易,其已经被提取出来,并可供任何愿意安装在手机上的用户使用。 至于新字体的变化,文字字体显示边缘看起来过度更圆润,不会是以直线的方式终止,这对于阅读体验和排版都是有极大的帮助,有开发者表示,新字体调整后让系统阅读起来会更舒爽。      

UI设计中的字体配色方法总结

王M争: 今天来给大家分享产品设计中文字配色的一些知识点。要给文字配色,首先我们要知道你的产品(界面)中有哪些文字。在这里,我将产品中的文字主要分为以下四种:标题类、正文类、提示类和交互类。 标题类 首先来说标题类,标题,顾名思义要让用户在短时间内了解界面的大致内容,讲究简洁明了。在app中,标题类一般有的顶部栏标题,底部栏标题,列表标题、表单标题等。 给标题类文字配色相对来说比较简单,选项比较少,我们一般只会使用深灰色或者企业色。因为标题虽然很重要,但是也不能过于抢眼。 而根据重要性程度我们可以把标题分为不同的等级,一般来说,层级越低的标题颜色越浅。深浅的搭配可以给你的界面带来意想不到的效果。 例如,微信中的好友列表和聊天界面中,用户名和聊天记录的文字颜色深浅正好是反过来的。这个其实也很好理解,好友列表中用户关注的是好友是谁,而到了聊天界面用户更关注的是好友说了什么。所以这里用深浅不同的文字来帮助用户加以区分。 我们可以看下使用同样的配色的效果,感受一下不同。 我不太建议给标题使用企业色,因为你要调整企业色的饱和度来区分不同的等级,个人觉得这样不太合理。 此外如果标题体系过于繁杂,仅从颜色深浅已经无法让用户从视觉上进行识别。我们还可以用字号来帮助完成区分,事实上现在大多数产品都是通过字号的不同来完成等级区分的。 正文类 正文类文字是给用户提供详细说明和解释的,正文类文字要比标题类要浅一些。一是因为用户对于正文都不太感兴趣,很少去读,我们没有必要在这里使用配色来吸引他们的注意力。其二,因为正文字数一般比较多,过于花哨的配色会使整个界面显得凌乱,造成主次不分。 提示类 提示类文字顾名思义就是要给用户以引导和提示。这个就意味着提示类文字要足够的显眼,如果用户都注意不到你,还怎么提示呢? 提示类文字一个主要用途就是给用户展示当前的状态。 我们来设想一个场景,你在一个理财平台上购买了一款理财产品。不同的时间段会有不同的状态。你看到这款理财产品收益率不错,投了3000元,这时的状态是“确认中”;过了几天这个产品开始起息就进入了“起息中”状态;又过了一段时间,你临时有事急需要用钱,就把产品转让给别人,又会依次进入“转让中”和“转让成功”。不同的状态我们在设计上给用户加以区分来帮助用户进行更好的识别。一般常见的方法就是使用不同的配色来进行区分,但是这个是适用于产品状态较少的情况。如果你的产品状态过多,每一个状态都配以一款颜色的话,那么整个界面就会显得很乱。 最常见的状态就是成功和失败,一般来说在用户心中都默认为绿色和红色了。当然现在把企业色作为成功也很常见。这里就会出现一个问题,如果你的产品主色调恰好是红色,这个时候就可能会引起用户混淆。 交互类 接下来,我们来谈谈交互类文字。交互类文字,简单来说就是能够让用户完成点击操作的文字。交互类文字设计的首要目标是让用户觉得你的文字是可以点击的。主要的办法有三个: 1.使用配色 目前来说用户觉得带有颜色的字体都是可以点击的,比如企业色。 当然如果你觉得界面中企业色出现的过于频繁,你还可以使用蓝色。蓝色在配色领域绝对是万金油型的,不管你的产品界面主色系是什么,用户一看到蓝色文字就会明白是可以点击的。 2.icon 文字加icon的组合也可以让用户产生点击的欲望。以知乎为例,左边的帖子用户只能看到答者和内容简介,这里的点赞和评论都是纯文字,用户无法直接进行点赞,但是点击进去以后,是icon和文字的样式,这里用户是可以直接进行点赞,评论,打赏和收藏。 ps.大家有没有注意到上面我只提到不能点赞,没说不能评论,其实是可以评论的。知乎里一个帖子的字数都是比较多的,用户只看到简介就点赞或者评论没有什么意义。后来我又去看了简书,发现简书是不支持用户在没有看完文章的情况下就支持点赞和评论的。 所以我不知道知乎这么做是出于什么考虑,反正我是没弄明白。 3.行为召唤语句 我们会遇到一些情况,不能使用配色,也不能使用icon样式。例如,登录界面中,我们希望用户的注意力在登录按钮上,所以下方的“忘记密码”和“快速注册”我们要进行弱化。弱化了还能让用户认为你是可点击的吗?当然可以,只要你的文字行为召唤一点,多使用动词就可以了。 交互类文字和按钮 其实我一直觉得设计师应该对每一个设计组件(元素)都做到充分了解。因为设计师的工作就是把那些元素以一种合理的方式放在一个界面(画布)里。所以你必须要了解他们。这里给大家推荐一个网站设计组件,里面一些基本组件都有。 回到主题上来,交互类文字和按钮其实有很多共同点。首先它们都支持点击跳转,也都可以展示状态的切换。交互类文字与按钮相比更加的轻量化,适用于极简风格设计。但是按钮也有自己的优势,按钮可以展示复杂的动效。 欢迎关注作者的微信公众号:「王M争」

网易严选APP的品牌设计过程全揭秘

网易UEDC – 董俊豪 :品牌设计,是品牌之间形成差异化的根本原因。它可以让用户明确、清晰地记住并识别品牌的个性,是驱动用户认同、喜欢乃至爱上一个品牌的主要力量。拿保时捷汽车前车灯的设计为例,这种特殊的外观设计被严格地应用到所有保时捷的汽车产品当中,就算遮住品牌也能一眼分辨出该品牌,这就是品牌的力量。 回归到我们视觉设计,我们在接需求的时候,经常会听到运营及产品对页面设计的要求是品牌感,那么怎么样设计才有品牌感?下面就谈谈网易严选App,在品牌设计方面的尝试,在这之前我们先来了解下网易严选。 品牌分析 网易严选,是网易自营类家居生活品牌App,秉承严谨的态度甄选天下优品。严表示严谨的态度,选是甄选,甄选天下好物。 设计原则 网易严选的品牌理念是「好的生活,没那么贵」。可以想象以下场景,躺在懒人沙发上悠闲的看着书,坐在窗边惬意的喝着茶,抑或是靠在阳台上享受午后的阳光。他们不紧不慢,追求品质,享受宁静,所以品牌关键字是品质、生活、宁静。从品牌关键字提取到的设计语言是细节化、场景化、简约化。 细节感是指精致,比如商品的光影,产品中的对齐法则等。场景化讲究的是自然和谐统一;简约化是去除一切多余的元素,只留下素材或者产品本身。 品牌设计 了解了品牌性格,品牌关键字及品牌设计语言,我们将这些应用到具体的设计中,包括品牌logo、版式、图标、动效、图片等。 1.Logo设计 品牌Logo以形象、直观的形式向消费者传达品牌信息,以创造品牌认知、品牌联想和消费者的品牌依赖,从而给品牌带来更多价值。 严选Logo设计结合了小楷的轻重协衡,质朴平淡及刻本的一丝不苟,精雕细琢,表现出对产品的选择保持严谨的态度,对产品服务保持无限的追求。由于网易logo品牌色是红色,且从色彩心理学角度出发,红色更容易刺激购物。所以颜色继承了网易品牌的基因。 从品牌色延伸出来一些其它颜色,以便适用在不同的场景中,如活动色,成功色,会员色以及不同程度的灰色。 辅助图形是品牌不可或缺的一部分。它能更好地配合品牌logo,传递品牌价值,从设计上也起到调和的作用。当然也可以单独作为背景底纹、辅助元素等场景运用,既丰富整体内容,又起到强化品牌的作用。如图所示就是将品牌Logo进行拆分重组而成的辅助图案及应用场景。 在App个人中心中运用的辅助图形。 2.版式设计 严选App首页版面采用两栏布局进行设计,在内容的展现上做到适度克制,从而简化了内容,再配以浅色背景或者大面积的白色,把核心展示都留给了商品本身,整体给人简约,宁静的感受,不强制,不给人压迫感,相比其他电商App的四栏乃至更多的内容呈现,从视觉上做到了较强的辨识度。 3.图标设计 在界面中,icon图标是不可轻视一个品牌设计环节,也是造就品牌感较直接的方式。 底栏icon 严选底栏icon的图标设计均以家居物品为原型衍化而来,给人以场景感,真实且生活化的感受,传达了品牌价值。 为空设计 严选为空设计以生活中日常的元素为原型,并采用手绘线条断开的样式,加上块状的阴影及修饰等元素,营造场景化及画面感,为品牌设计带来了一丝情感。 4.动效设计 在App中做动效设计的优势在于生动性地传达品牌个性。 登录页动效设计 在登录页及明星商品页大面积留白空间的商品图上都加入了自然的投影,给人营造简约中带着场景感,细节感,无形之中透露着品质,生活,宁静。 Loading设计 Loading的设计创意来源于打开包裹时,商品呈现在面前的惊喜感以及生活的仪式感。所以设计的思路是随着手向下拉,箱子缓缓打开,松开手的时候弹出「好的生活,没那么贵」。这里寓意严选有你想要的商品,且品质及服务给用户带来惊喜,从而达到了品牌价值的传达。 5.图片设计 心理学研究证明,图片比文字更直观地、更优先地传达,所以在App中图片的品质直接传递着品牌的感受。 单品设计 在产品设计中,既要体现品牌的气质,体现品牌的品质,又要保证页面不平,所以在登录页及明星商品页大面积留白空间的商品图上都加入了自然的光影效果,给人营造简约中带着的场景感及细节感,无形之中透露着品质,生活,宁静。 这是运用在登录页及单品详情页的具体设计页面。 SKU规范 电商里面最难部分就是商品图的控制,需要对每个商品图拍摄,角度,色彩都控制的很好,除此之外对商品在页面的呈现也做了规范处理: 所有产品放置在米字格园内,分为大圆、小圆、迷你圆,分别对应偏大、常规、偏小尺寸。 产品角度以15度为基础变量单位。如15、30、45等。 … 继续阅读

如何将视错觉运用到UI设计界面中?

视觉原理在当下红火的机械视觉中是必不可少的,那么在我们日常工作的UI产品设计中又有什么可能性的呢?今天,我从「视错觉」这个角度,探索下如何运用在UI上。 视错觉历史 古希腊哲学家亚里士多德的《灵魂论》里阐述了人类五感:视觉、触觉、味觉、嗅觉和听觉。我们视觉设计师暂时无法在长方形盒子(泛指各种电子设备)内设计味觉、嗅觉和听觉,而对于触觉,说到底,我们始终在与这个长方形盒子接触,但是无法通过对设计内物体的真实触摸而得到感觉,实际伸出手探寻或步行而感受到距离等,去比较大小、距离等进行认知。因为这个客观存在,也更加需要我们视觉设计师运用视觉原理与技法让用户更容易与机器进行交互。因为这样的认识, 我思考了以下这些可能性: 一. 蓬佐错觉-Line 蓬佐错觉是有关长短的视错觉。自从意大利心理学家马里奥·蓬佐(Mario Ponzo,1882~1960)发表了相关论文后,这一视错觉便被称为蓬佐错觉,但在这之前,它就早已被人们所熟知。 上图上下并列的两条横线,上面的看起来比下面的长。有一种观点认为这是因为横线外侧的斜线使大脑觉得有纵深感,认为上面的线更远一些。长度相同的线段,位于远处的应该更长一些,因此上面的横线会让人觉得比下面的短。 这一视错觉在UI运用上,第一个让我想到的就是Input、Cell或段落间的分割线。各App的长短不同,大多数App都按照iOS或Android Guideline,在各控件左右留P的距离。也有一些不走寻常路的App。 △ 1.摄影图片分享App-iOS系统;2.回家吃饭-iOS系统;3.记账软件-Android系统 △ 1.日志软件-Android系统;2、3.Uber-iOS系统 图1截取iOS与Android系统上一些App,设计师使用非常规P距离线。图2截取了各平台App左右不留间距的线。从这两张图我们可以看到使用各种长短线的都有,并没有统一标准,最主要是你想要表达什么?在这里蓬佐错觉是否能帮助到你的UI表达。 手机屏幕的边界就如蓬佐错觉中外侧斜线,分割线与边界的距离就能让人对间隔中左右信息产生或长或短的感受,易读性也成为考量的一点。在App设计中,全局规范考虑是非常重要的,满足了单个页面的视觉需要是远远不够的。前端开发害怕的是没有逻辑规则的不同,只要定义好功能规范,即使在不同界面使用不同线长短也不是大问题。 简言之,在定义Line长短时,我们可以更多思考为什么要留边距、留多少合适、为什么确定这样的长短、是否有逻辑可循、考虑过全局性了吗、是否与品牌相合、是否能传达出视觉故事等等。 二. 艾宾浩斯错觉-Space 赫尔曼·艾宾浩斯(Hermann Ebbinghaus)是著名的研究人类记忆的心理学家,出生于德国,任职波兰布雷斯劳大学教授。他主要研究人类如何进行持续性记忆的(题外话:艾宾浩斯记忆曲线非常有名)。上图是他发现的视错觉图。位于中间的两个橘黄色的圆大小相同,但是看起来右侧的明显偏大。右侧橘黄色圆的四周是小圆,所以看起来比实际的大,而左侧的橘黄色圆周围是大圆,因此它看起来比实际的要略小。 △ Representations of the (A) Ebbinghaus-Titchener size-contrast illusion and (B) Delboeuf illusion. 艾宾浩斯错觉在实际应用中非常广泛,利用我们身边的东西,进行排列组合,就可以确认发现视错觉。艾宾浩斯错觉加上德勃夫错觉(Joseph Delboeuf illusion)和万辛克(Dr.Brian Wansink)、薛尔特·梵·依特森博士(Dr.Koert van Ittersum)的研究证实,人们的进食量会被盘子的大小与颜色所影响,也就是说,我们会被这些视错觉而影响真实行为。 … 继续阅读

用户体验重要一环 :App中的反馈设计

什么是反馈? 反馈就是用户做了某项操作之后,应用系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。 为什么反馈设计是用户体验重要的一环? 在人机交互的过程中,用户希望看到每一步都清晰,及时的显示,用户希望了解每一步的后果以及用户最关心的问题是什么。一方面,PC端和移动端产品需要保证产品有积极,及时的反馈响应以确保用户知道自己所处的状态,否则会让用户觉得反应迟钝;另一方面,我们也要避免过度的信息反馈,尤其注意不要反馈错误信息,错误的信息对用户造成的影响是巨大的。 产品的反馈直观的表现为界面的变化(少数为声音和震动),通过这种变化使的用户能够更加友好高效地与产品进行交互,更加专心地投入到任务流程当中去。 举个栗子:当用户执行完一步操作后,系统没有及时甚至没有给出相应的反馈提示,就会给用户带来疑惑(实现模型与心理模型冲突),让用户不能确定自己的操作是否被执行、执行是否成功、执行整体进度、或者是执行后会产生怎么样的影响、能在哪里查询到结果以及执行后是否可以被撤销等等。而这其中的任何一个环节都有可能影响到用户对当前任务的理解以是否执行下一步操作,从而影响到产品的用户体验。 反馈的设计应该满足以下四个原则: 反馈通过直观的体现,可以帮助用户理解微交互的规则,最大可能地降低用户的学习成本。 别让反馈给用户造成压力,通过最少的反馈传达同样的信息。 反馈应该由需求驱动,然后在恰当的场景下和时间下让用户知道他需要知道的事情。 反馈的速度尽可能的快,反馈过慢会给用户感觉产品的性能差。 对于用户而言,反馈设计的目的主要告诉用户以下几点: 告诉用户发什么了什么? 用户刚刚做了什么事? 哪些过程已经开始了? 哪些过程已经结束了? 哪些过程正在进行中? 用户不能做什么? 用户刚刚操作的结果是什么? 在设计过程中,涉及到反馈的情况一般分为五种类型: 1.结果反馈 告知用户的操作结果。例如操作成功或者操作失败、对操作后的一种确认。 a.以toast形式给用户反馈。例如:微信转发他人信息,出现toast,提示用户已经发送成功。 b.以浮层动画的形式给用户反馈。例如微信输入语音时,出现浮层动画提示用户的语音输入是有效的。 2.状态反馈 操作前后展示效果不一样。 当用户操作后,界面操作前的状态和操作后的状态不一致。通过这个不一致,给用户反馈我的操作得到了提交。 3.过渡反馈 有些时候程序确实不够快,缓慢的加载速度和延迟问题,这时候通过常见的过渡组件给用户反馈,过渡反馈的目的在于通过向用户反馈当前的响应进度和合理的时间消耗来让用户在等待过程中放松下来。 a.以进度指示器给用户反馈当前状态。例如浏览器在点击搜索后,页面加载的进程反馈。 b.以系统/自定义的循环动画,例如iOS的菊花Loading 和安卓的圆形Loading 。 例如:微博问答,点击立即支付然后出现的过渡动画。 例如:YouTube页面加载过渡的圆形Loading 。 4.操作反馈 对下一步操作的指引,用户点击一个操作就出现新的操作组件以此给用户的反馈。 当用户进行一个操作后,出现反馈,这个反馈通常是通过浮层弹框、调起键盘、进入下一个界面等等形式表现。 例如:iOS原生邮件,点击回复/转发出现底部浮层。 … 继续阅读

如何制作统一可复用iOS/Material Design元件库?(附源文件)

echo:文章对制作统一可复用的Axure元件库方法进行了相关的分享,希望对你有所受用。 阅读这篇文章你可以得到哪些? iOS和Material Design(简称MD)元件库下载。 通过源文件学习iOS和MD两大设计规范的组件控件体系。 如何通过Axure元件库提高效率。 作者制作的元件库基本包含了两个系统的所有常用组件控件,适用于移动端绝大部分设计场景。同时所有元件都可再修改,方便大家使用。 下载地址:https://pan.baidu.com/s/1mhPlNQw 一. 统一可复用元件库价值 统一产品的用户体验:涉及到多个交互设计师/产品经理协同时,如果各个交互设计师/PM没有使用统一的元件时,会出现同一种类型不同的组件设计。视觉设计师最终没有强行统一,那么实现稿就会出现各式各样相似的组件。 提升工作效率:有了统一的axure元件库,交互设计师/PM可以快速根据元件库搭建界面,从整体的产品设计到开发流程环节提升效率,避免重复性工作。 提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务产品创新。 二. 如何制作统一可复用的Axure元件库 打开Axure软件,在元件库面板中,点击快捷菜单按钮,选择「创建元件库」,如下图所示: 选择了「创建元件库」后,就会弹出一个界面,你需要选择一下元件库的保存路径。注意元件库的格式为:rplib。 在元件库创建页面中,操作跟平时使用Axure没什么区别,一个页面就是一种类型的元件,不要把所有元件都创建在一个页面里。 制作一套完整的MD和iOS元件库,需要熟知MD和iOS设计规范,然后综合我们的设计经验来制作一套全面和常用的元件。以下为元件库的部分内容: MD的菜单(Menu) MD的底部动作条(bottom sheets)和iOS的操作列表(action sheet) iOS的Toast和MD的Snackbar iOS的搜索栏和MD的搜索栏 iOS的警告对话框(Alert)和MD的对话框(Dialog) MD的导航栏和iOS的导航栏 三. 如何使用统一可复用的Axure元件库 打开Axure软件,在元件库面板中,点击快捷菜单按钮,选择「载入元件库」,选择对应的元件库即可。 四. 通过源文件,学习iOS和MD两大设计规范的组件控件体系 通过iOS和MD的元件库的源文件的站点地图,即可掌握两大系统的组件控件目录体系,查看每个组件控件可以快速掌握两大设计规范的组件控件体系。 例如查看源文件的iOS的警告对话框(Alert)和MD的对话框(Dialog)的组件细节可快速掌握两大规范的两种组件的用法等。 欢迎关注作者的微信公众号:「UEDC」

微信小程序官方设计规范(附PSD+Sketch源文件)

UI妹儿(ID:UIfaner):上周,U妹刚完成了一个微信小程序项目设计,这是U妹做过的第3个小程序,早在去年小程序还未开放时,就设计了第1个小程序,在小程序正式开放后,设计了第2个,在U妹做第3个的时候,突然发现小程序的设计规范有了新变化,所以U妹觉得很有必要把最新版的微信小程序设计规范分享给下伙伴们。 概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。 一.友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。   1.重点突出  每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。 反例示意 此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。   纠正示意 去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户目标的帮助内容,比如最近搜索词,常用搜索词等。   反例示意 操作没有主次,让用户无从选择   纠正示意 首先要避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。     2.流程明确 为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索,在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰; 而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。   二.清晰明确 一旦用户进入我们的小程序页面,我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全的愉悦的使用体验。 1.导航明确,来去自如 导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户,我在哪,我可以去哪,如何回去等问题。首先在微信系统内的所有小程序的全部页面,均会自带微信提供的导航栏,统一解决我在哪,如何回去的问题。在微信层级导航保持体验一致,有助于用户在微信内形成统一的体验和交互认知,无需在各小程序和微信切换中新增学习成本或改变使用习惯。 微信导航栏 微信导航栏,直接继承于客户端,除导航栏颜色之外,开发者无需亦不可对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系,让导航系统能够以合理的方式工作。 微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色。 导航区(iOS) 微信进入小程序的第一个页面,导航区通常只有一个操作——“返回”,即返回进入小程序前的微信页面。 进入小程序后的次级页面,导航区的操作为——“返回” 和“关闭”。 “返回”,即返回上一级小程序界面或微信界面。“关闭”,即在当前界面直接退出小程序,回到进入小程序前的微信页面。 … 继续阅读

大产品小细节!5分钟带你了解经典的费茨定律

金蝶云之家体验部交互设计师-王梓铭:大家有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,非常重要的定律 —— 费茨定律。 上期回顾:《大产品小细节!5分钟了解格式塔原则》 一. 概述 首先来看看费茨定律公式: 看起来很复杂吧, 但实际上并不难,我用一张图给大家解释下费茨定律是什么。当用户需要拖动黄色点到目标区块中时: 费茨定律中的 D 就是从开始点到目标中心的距离,而 W 则是目标的宽度大小。根据公式可以看到,A和 b 都是常量,那么 MT (黄点从左移到目标中心所需的时间)的大小取决于 D 和 W 的值: 当 D 一定时,W 越小,MT 越大;W 越大,MT 越小。 当 W 一定时,D 越小,MT 越小;D 越大,MT 越大。 … 继续阅读