首页

想要用好留白?这篇文章帮你从头开始梳理

涛涛

留白对于设计的价值,已经得到相当广泛的认可了。留白的存在让其中的元素得到更好的凸显,有了留白才有强调,它们从来都是一体两面,焦不离孟。今天的文章,我们来聊一下留白的使用技巧和最佳实践。

设计中的留白

留白本身通常还被称为负空间,它们可以在网页布局中各个元素之间,还可以在特定 UI元素的内部。留白赋予了页面呼吸感,而它本身并不一定非得是白色的空白区域。留白界定了 UI元素本身的空间边界,而借助格式塔原理,它还可以创造视觉上的联系。

因此,留白是一种重要的、功能强大的设计元素,它对于创造积极的用户体验有着重大的影响。 交互设计基金会的 Mads Soegaard 是这么说的:“留白就像一块画布,它是将不同设计元素融合到一起的背景,又让这些元素通过对比衬托脱颖而出。”

在诸多的平面设计领域当中,负空间都发挥着无法替代的作用。无论是设计LOGO、平面插画还是字体的时候,留白的使用关系着整个设计的表现力。就像下面的博客插图,负空间的运用让整个画面显得更加生动。

无论是在网站设计还是 UI设计当中,设计师都需要借助留白来提升界面和导航的可用性。布局元素周围的留白或者负空间通常被称为宏空间,而它们之间的留白和内部的负空间,则被称为微空间。

理清概念

留白和负空间虽然是两个不同的说法,但是两者表述的是同一个东西。之所以有两个不同的说法,是因为两个名称是来源于不同的两个领域。

留白是来自排版印刷设计领域,因为页面的背景通常是白色的,而文本和图片周围的区域也多是白色的空白,因此有留白之说。而负空间这个说法是源自于摄影,吸引人注意的视觉主体被称为正空间,而相应的留白就成了负空间。

需要注意的是,留白并不一定非得是白色的,可以是其他的颜色,甚至是其他的图案。

留白为何如此重要

当你进入一个挤满各种物品和人的房间,到处都是东西和人,找到特定的东西肯定是一个非常艰难的事情。相应的,在干净的地面上,摆放的唯一的物品肯定是非常醒目的,你不需要花费任何力气就能注意到它。这也是留白发挥作用的原理所在。

虽然客户可能会要求设计师在页面上尽可能多地塞满各种元素和功能,这样可以节省空间。但是,实际上这是一个最常见的错误的做法:用户并不需要在网页上一次完成全部的工作。更重要的是,太多的元素会分散用户的注意力,用户会难以找到真正想要的信息。正如同 Aarron Walter 所说:“你想让用户注意到所有事情的时候,他们会感知不到任何东西的。”

对于设计而言,负空间的价值是非常高的,我们随便总结一下,都有很多:

  • 它让页面的可阅读性得到了提升;
  • 它增强了视觉层次;
  • 它使得元素和元素之间的关系更加清晰,更容易被感知,而不需要借助表格、框架这样的附加手段;
  • 它为页面增加了呼吸感,而不至于导致混乱;
  • 它让用户更容易将注意力集中到核心元素上,减少分心;
  • 它提升了页面的风格,让设计更加优雅。

看看这个城市指南的着陆页吧,负空间在背景中扮演了非常重要的角色,更重要的是,图片中的元素和前景的文本标题之间有所互动,这也同样是借助负空间的方式来呈现,呈现出一种和谐而有趣的设计效果。

影响留白的核心因素

合理的使用留白能够让界面的用户体验提升不少。

可读性和清晰度:如果和元素之间没有足够的留白,会变得难以阅读,用户需要花费额外的精力来进行分辨。不合理的留白设计会让用户感到紧张,想要让用户感到自然,需要让留白恰到好处,令布局显得足够自然。如同音乐中的韵律感一样,设计中的韵律感是通过留白的变化来呈现的。

品牌化:如果你熟悉LOGO的设计,你会发现设计师借助元素周围的留白来营造氛围提升感觉,留白的功能性在品牌设计上有着非常显著的体现。打破留白的设计规则,对于整体是有害的。

强化属性:留白的运用能够强化属性,比如新闻博客平台会更加密集地呈现信息,甚至会借助动态的数据呈现和较为致密的布局来营造一种资讯的密集感和平台的调性。

视觉层次:富有层次感的留白设计能够创造出视觉层次,并且让用户注意到特定的元素和信息。

留白对于视觉的影响主要体现在以下的几个方面:

  • 文案和内容
  • 图形元素
  • 导航
  • 视觉识别

接下来看看几个案例。这是 The Big Landscape 的首页,没有表单,没有视觉框架,仅仅借助留白来平衡所有的设计元素。设计师构建出了清晰的层次结构,并且允许用户一瞥即可看清所有的内容块,这样的设计看起来是清晰而有条不紊的,而且充满呼吸感。白色的背景和简约的布局让整个界面充满了实体杂志的质感, 而这也相对视觉化地告知用户这是一个在线的数字杂志。

另外一个是移动端的APP Upper。整个应用的留白都是使用黑色来进行填充的,在视觉上,黑色的留白和核心的视觉元素构成了鲜明的对比,从而起到了凸显的作用。整个设计留白充足,用户不会错过关键的部分,也不会分心,布局的组织性极强,可读性也都毫无问题。设计师确保了整体的优雅性,也让布局更加具有美学特征。

需要考虑的问题和隐患

1. 术语紊淆

和不熟悉设计术语的客户进行沟通的时候,应该尽量让他们明白负空间/留白的含义和功能。对于非设计从业者而言,很多时候确实不能很快接受「屏幕中需要留下更多的留白」这样的概念。对于黑色或者深色的背景,这类客户可能会有不好的联想,事实上并非如此。在进行足够深入的沟通之后,尽量将这些关键点灌输给客户,避免术语和概念上的误读。

2. 希望减少留白,增加页面和内容

其实这个是几乎所有的设计领域都会面临的问题。客户会希望室内设计师在一面墙摆满柜子而不是给两个剩余的地方留白,而建筑设计师也常常需要建筑周围有足够的留白,确保呼吸感,提供更好的服务。设计师需要和客户沟通,了解哪些部分更重要,哪些部分次重要,而哪些内容是可有可无的,分清层级,进行筛选。留白有助于营造更加协调的布局,让信息和功能的可用性更强。

3. 优先级不够高

如果深思熟虑的信息架构和界面并不匹配,留白并不是万能的解决方案。你需要在考虑界面设计之前,就确定用户获取信息的方式,然后再进行设计。在确定风格之前,先要梳理清楚用户流程,否则,再好的负空间设计也不足以发挥出它应有的功能。

UI设计改稿经验总结

博博


UI大课堂 2018-02-01 00:00:39

提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以后者为出发点进行讨论,其目的是为了给部分设计师在利用自己业余时间上面探索出一个新的方向。在工作项目中进行UI设计改版分为团队发起和自我发起,这个我们下一次一起来讨论。

UI设计师的自我提升来源于多方面的综合体现,工作项目中的实战经验、团队协作的互补学习、项目沉淀与反思、碎片化阅读的查漏补缺、业余时间的自我驱动、阅读带来的知识沉淀等等。如何充分利用自己的业余时间是被很多初入行业的设计师所忽略的,一晃三五年过去了,却发现自己找不到更多的作品用来丰富简历,很快便进入了瓶颈期。

面对未来的自己可能会出现这样的情况,我们一起提前探讨一下这个话题,以 UI设计改版为突破口展开我们的话题,希望带给即将入行和刚入行的设计伙伴儿一个新的方向。

目录

1、UI改版的目的,从不做无意义的事情;

2、制定时间规划,是为了治疗懒病;

3、如何挑选改版产品,再也不是选“美”了;

4、体验,这是你的第一次深度探寻;

5、功能梳理,理清流程好开工;

6、竞品分析,做好知己知彼;

7、素材采集,打开禁锢的思维;

8、体验,走了一圈才发现你可以更好;

9、交互设计,实现你心中的更好;

10、设计风格推导,符合产品的设计趋势运用;

11、界面设计,碎片化积累;

12、审核,寻找导师;

13、调整优化,不放过任何一个细节;

14、包装,整理设计思路;

15、分享,设计交流。

正文

1、UI改版的目的,从不做无意义的事情

工作中的项目参与对UI设计师的专业提升是非常重要的,由于很多公司都处于高速发展的阶段,项目的周期很紧张,都希望每个支援板块能够具备更高的效率,推进项目更快的完成迭代上线。在设计板块,很多成熟的平台也是愿意花费更高的福利待遇引进资深及以上级别的设计师支持项目的运转,那么设计师的进阶之路便是你在职场中稳中求进的关键。

在真实的场景中,有一部分设计师也存在着以下情况:

  • a. 项目参与度低,没有更多的机会发挥自己的专业;

  • b. 公司产品迭代缓慢或者视觉支持较小,空余时间较多;

  • c. 没有机会在项目中尝试一些新的设计语言;

  • d. 自学 UI 中,没有真实项目能够发挥;

  • e. 增强设计效率和产品设计思维等能力。

如果你拥有以上的情况之一,利用自己的业余时间进行 APP 设计改版将会给你带来更多的提升空间,不但可以通过练习增强自己的设计效率,也能体验更加丰富的产品设计。在改版中也能不断加强一些交互或者产品的思维,可以让你在以后的工作项目中不局限在视觉层面,具备更多的产品思考,做出更合理的设计。

UI设计改稿经验总结

2、制定时间规划,是为了治疗懒病

如果你想要改变现状,也拿出前所未有的热度值,那就趁热打铁吧,制定一份时间表是必须的,千万别忽略它的重要性,如果你不按照这个时间计划去推进,可能这个热度值将会被懒宝宝不断地熄灭^_^。

制定时间规划不仅可以合理的利用好自己的业余时间,也能更好的按照这个规划表去逐步的推进这次改版项目,把一个大的事项拆分为若干的小事项,每天推进一部分,一次改版设计很快就在不断的推进中被完成。

APP 改版时间规划表大家可根据自己的习惯设置,表格形式还是简单的文字记录都可以,进度把控需要结合自身情况而定,确保其有效性。

UI设计改稿经验总结

3、如何挑选改版产品,再也不是选“美”了

面对应用商城里面海量的 APP 产品,你是否有点不知所措,如果选择一个自己从来不玩的 APP,改版的时候对产品的服务模式、功能架构、交互逻辑等都是比较陌生的,需要一定的时间进行学习。如果选择一些大型的产品,由于其自身的设计团队就是非常的专业,你很难从中发现可以优化的点,即使勉强进行改版,也会发现自己设计得不如原版的好,进而打击自己的自信心。

通过上面的分析,我们在挑选改版产品的时候,需要结合自身的一些情况先做出一定的预判,然后再去挑选现阶段相对比较符合的产品进行改版练习。

a. 挑选自己接触过的直接产品或者间接产品;

b. 对 APP 里面所提供的产品或者服务比较认可或者没有一定的排斥感;

c. 挑选无论是视觉层面还是交互层面都有一定优化空间的产品,别轻易尝试精品;

d. 如果身边有朋友使用过的产品优先考虑,因为可以成为你调研数据的来源;

e. 选择阳光积极型的产品,不做传递负能量或者违反规定的产品;

f. 初次尝试 APP 改版设计,从轻量级的产品入手,可以控制练习时间和自己的驾驭度。

UI设计改稿经验总结

4、体验,这是你的第一次深度探寻

当你确定自己改版的 APP 对象以后,我们就开始做一次体验吧,这是你的第一次深度探寻。体验情况根据设计师对该产品的熟悉程度而定,你需要通过不断的进行操作把自己从小白用户升级到专家级用户。

这个过程需要你对产品有一个很深入的了解,不只是熟悉主流程操作逻辑,对一些偏冷门的功能操作也要非常的熟悉,如果是需要注册使用的产品,一定不要忽略注册会员以后的体验。最终达到的级别是你可以向身边任何一位朋友轻松的进行推荐和演说,能够通过你的讲解让他轻松地学会使用该产品。

UI设计改稿经验总结

5、功能梳理,理清流程好开工

当你对改版 APP 进行第一次深度体验之后,利用思维导图软件绘制出整个产品的功能结构图,思维导图软件种类很多,大家自行选择,我常用的是 MindNode。第一次进行功能梳理无需进行增删处理,真实还原产品现有功能即可,其目的是整理自家“仓库”,做到心中有数。

在进行功能梳理的时候,如果遇到操作复杂的功能需要备注信息,以便自己后期预览时能够快速理解其含义。如果是第一次做功能结构图越详细越好,这将有助于你充分理解每个功能传达的含义。

UI设计改稿经验总结

6、竞品分析,做好知己知彼

深度体验完改版 APP 之后,做了功能结构图,此时你对所需要改版的 APP 以及这个行业的产品都有一定的认知,此时你再去体验直接竞品和间接竞品必然是以一个专家级用户的水平去探寻。在体验过程中需要结合改版产品的功能进行对比,可能第一遍体验无法很好的进行对比,所以需要至少体验 3 次以上才能很好的得出对比的结论。

体验产品时需要注意的几个维度:

  • a. 不要急于进行总结,先进行至少 3 次以上体验;

  • b. 先看整体布局再分析局部细节;

  • c. 重点功能交互形式需要提取出来进行对比;

  • d. 主界面的各版块布局设计需要进行对比;

  • e. 配色分析,作为改版时的配色优化指导;

  • f. 图标和组件库的分析,找出细节的优化方向。

进行竞品体验时,尽可能多的找出差异化的设计形式,作为改版 APP 优化的指导方向。由于作为 UI 设计师进行 APP 改版练习更多是视觉优化为主,交互优化为辅,所以我们需要在相同模块上面找出更多不同的设计样式,作为视觉优化的方向。

如果你自身交互能力较好,也可以以交互优化为主,视觉优化为辅,这个可以结合自身情况选择。在进行竞品体验的时候也要根据优化目的的不同,着重的转移体验的重心。

UI设计改稿经验总结

7、素材采集,打开禁锢的思维

通过竞品体验你会总结出改版 APP 各个模块的差异化,相同的功能模块各自产品的交互形式、布局样式、视觉风格都存在各自的差异。此时,你对改版 APP 中的很多设计都一个初步的优化清单,你需要再深入一步,因为竞品的设计样式不一定就是值得借鉴的,我们需要寻找更多的灵感,打开自己禁锢的思维。

通过国内外的一些设计平台、素材网站等我们可以去采集更多的设计样式作为灵感借鉴,日常的一个采集收藏习惯也就变得尤为重要了,作为一个优秀的 UI 设计师,我们需要养成这样的习惯。个人平时经常访问的设计平台有站酷、UI中国、致设计、Dribbble、Behance等,采集收藏灵感会经常用Pinterest和花瓣,都是一些大家经常访问的平台,所以不是别人知道你所不知的优秀平台,而是你没有他的良好习惯。

UI设计改稿经验总结

8、体验,走了一圈才发现你可以更好

采集完一些灵感素材之后,我们又回到体验改版 APP 的起点,走了一圈之后你会发现改版 APP 中很多你可以入手优化的方向,比起第一次体验,你会更加有信心能够做出一个不一样的设计作品。再次进行产品体验的时候,你需要带着脑海中处理相同功能板块的不同设计表现形式进行思考,寻找出更好的设计表现形式来解决这个功能模块。

在构思优化样式的时候,可以绘制一些简单的草图,以防后期进行交互输出的时候遗漏灵感细节。在进行设计优化的时候先从灵感库中寻找较为符合的样式进行思维嵌套,然后再发散思维,融入自己原创性的思维,形成自己的原创思路。

UI设计改稿经验总结

9、交互设计,实现你心中的更好

通过前期的准备工作,我们即将进入重要的设计部分,大家不要忽略前期的准备阶段,只有思路成熟且清晰,后面的设计工作才能更加顺畅。

作为 UI 设计师最终输出的必然是高保真的视觉稿,那么交互原型设计是为了快速的把自己的思路展现出来,所以不局限于原型软件的绘制,哪怕是纸上的草图绘制也是可行的方案。最终的交互稿是给自己看的,所以能看懂就能达到最终的目的。

如果你考虑后期进行作品包装展示时,希望能展示出交互思维,那你花点时间适当的对低保真交互原型进行绘制也是不错的选择,也能锻炼自己原型制作软件的操作能力^_^。

UI设计改稿经验总结

10、设计风格推导,符合产品的设计趋势运用

在开始进入界面视觉设计时,我们需要对整体 APP 设计做风格推导,这将直接关系着最终界面呈现的效果。如果你是一位对行业趋势关注的设计师,各种设计趋势呈现在你脑海中,你需要进行筛选,结合改版产品的属性选择合适的设计语言去表达,切不可为了趋势而牺牲产品定位。

在进行风格确定的时候,颜色的选择也占据一定的因素,我们可以选择改版 APP 现有的主色进行优化,也可以进行推翻重选。如果是重新选择配色方案,我们可以通过情绪版的方式在身边朋友或者各种群里进行。也可以与竞品形成视觉差异化,选择一些形成对比的配色方案,方式很多,大家根据自己的条件和思路自行展开。

确定好配色方案之后,我们需要考虑设计的表现形式,无论是何种设计形式都需要符合产品的属性。比如大标题、大圆角卡片、大投影等设计表现形式会在视觉层面带来不错的效果,却需要考虑信息量的因素,如果本身改版 APP 就属于信息量很大的产品,在选择时就要综合考虑。根据 APP 的风格定位,比如文艺类、娱乐类、儿童类等,那么设计的风格也会对产品风格定位起到一定的影响。

UI设计改稿经验总结

11、界面设计,碎片化积累

当你打开设计软件进行界面设计的时候,剩下的就是“满血复活”的激情,为了能够充分利用好业余时间,我们需要把数十个界面分配到具体的日程中,的利用碎片化的时间进行积累。规定自己一天完成两个界面,就要严格执行,只有这样你才能具备超强的战斗力。

提到界面设计很多设计师会纠结在软件的选择上面,总会问老司机们你们用什么软件,其实软件的选择并不是问题,它只是一个工具,用的顺手即可,现在很多软件都能带来最终的目的。随着很多轻量级的软件不断丰富多样,软件的操作也更加简单便捷,只要你充分的利用互联网资源,软件的学习只是熟练度的问题,设计的思路与技巧才是需要更多的学习、研究和总结。

UI设计改稿经验总结

12、审核,寻找导师

历尽艰辛你收获了希望,一套 APP 改版设计作品初步完成,接下来你需要寻找到一位导师,俗话说当局者迷,你自己构思出来的东西需要得到验证,寻找一位资深的设计老司机给你指点作品,将会给你的成长带来很大的帮助。他们会站在更高的专业角度给你指出一些优化建议,也能使你的作品更加成熟。

导师在哪里?

  • a. 可以是身边的同事,别以为导师一定是大神,旁观者的意见都是具有一定的思考价值;

  • b. 通过一些设计交流群寻求意见,建群的意义其实就是交流设计(可是现在演变为畅谈人生了/(ㄒoㄒ)/~~);

  • c. 通过设计平台寻找那些活跃的老司机,只要是真诚的设计交流,他们都会乐于分享;

  • d. 机缘巧合下加上的大神微信或者QQ,平时要注意不要群发小广告去骚扰他们,他们关键时候会乐于给你专业性的指点;

  • e. 相信你能找到更多的方法,寻求帮助。

UI设计改稿经验总结

13、调整优化,不放过任何一个细节

通过不同形式的意见反馈,我们即将面临一次调整优化,在众多的反馈意见中,我们也不能盲目的进行修改。我们要做有思考能力的设计师,去分析这些修改意见,遇到意见相左的修改建议要结合自己前期的调研进行把控,因为提意见的人不一定能像你一样熟悉产品,可能存在一定的主观性。

选择性的进行修改,也要保持自己的自信度,适度的自信可以增强你对作品的信任度,我们不能总是质疑自己的能力,只要保持不断努力学习的心态,有时候也要相信自己的专业能力,相信自己就能给作品带来自信度,你的需求方才能被你的专业意见所引导。

UI设计改稿经验总结

14、包装,整理设计思路

作品包装总是会被很多设计师所忽略,在进行作品展示的时候也比较随意,没有充分利用作品包装的优势传达出作品自身的价值。我们将作品展示出来进行交流时,需要通过适当的包装把作品更好的一面清晰的传递给读者。

在进行作品包装的时候,可以加入自己的设计思路辅助传达出作品背后的故事,让读者更容易走进你的作品。通过包装把原本单调的独立界面进行解剖,利用整体布局、局部提炼、细节展示、文案描述、思路整理等形式,让作品呈现效果更加丰富多样。

作品包装中一些简单的设计技巧:

  • a. 作品包装设计中的版面布局需要舍得,适当加大留白会给版面更强的呼吸感;

  • b. 局部提炼,对界面设计中的一些视觉表现力强的样式提取出来独立展示,丰富作品的细节展示;

  • c. 精心挑选样机,让作品展示效果更佳,有时候也可以自己绘制更加简练的样机模型;

  • d. 设计组建选择性展示,增删挑选的组建让布局更加整体,视觉效果更加协调,整体组合形成块面感;

  • e. 利用对比突出重点,不要使整体布局都处于平面化;

  • f. 装饰元素的运用,可以利用辅助图形、短线等进行设计装饰;

  • g. 加强头图设计的视觉表现,提高读者的注意力。

作品包装设计分为平台型作品包装和作品集包装,也是需要我们设计师加以重视的一个板块,以后我们单独进行这方面的研究分享。

UI设计改稿经验总结

15、分享,设计交流

此时,你已经完成了这次 APP 改版之旅,恭喜你击败了懒宝宝,相信下一次你会具备更强的自我驱动力。完成一次作品你可以选择封印在冰冷的硬盘,也可以选择分享给更多的设计朋友,大家互相学习和讨论,个人比较倾向于后者。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

博博


天极网 2018-06-04 18:18:17

5月31日,小米在发布会上推出一代操作系统——MIUI10。近日,小编顺利通过了MIUI10的内测申请,于是将手里的小米5第一时间更新,一起来看看官方给新系统定义的几大更新亮点吧。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

首先,在更新MIUI10内测版之后,老旗舰手机小米5焕然一新,变得流畅许多。此次新系统主要是针对全面屏做的设计,具体表现在状态栏和多任务的排版上,UI设计结合了Andrid P和iOS风格,整体比较清新。在点按之后,图标会变成蓝色,开关按钮采用了翻页的形式,而且可以容纳的数量也比以前多了。虽然在风格上进行了大量的修改与整合,不过最终还是没能逃脱“苹果味”。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

小编觉得MIUI10最大的变化就是多任务面板,之前的MIUI9、MIUI8等版本均为横向布局,而此次MIUI10变为了纵向布局,交互方式上有些变化。官方宣称这是可以在一块屏幕上看到更多的多任务。其实就是迎合了全面屏的理念,而又不想太过抄袭苹果的多任务,最终就出现了这样的产物。说实话,小米5上的MIUI10多任务面板不是很好看,但是使用效果还不错,多任务左右滑动是关闭,长按就有分屏,锁定和设置三个按钮。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

接下来是本次新增的驾车模式和小爱同学。之前MIUI9也有语音助手,不过稍显“智障”,并没有太多实用性。MIUI10上,小爱同学增加了训练计划,可也设定提问他要回答的答案,实用性大大增强。驾车模式应该是广大司机朋友最关注的功能,全新的驾车模式在小爱同学的帮助下,可以做到边开车边回复消息,同时还能保证开车的安全性,非常实用。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

再来说说小编遇到的问题吧,因为是MIUI10内测第一批版本,BUG多也是可以理解的。刚小米5升级MIUI10后,虽然操作确实很顺滑,不过头疼的BUG使得系统整体性没那么强。有几个BUG甚至把传统的16:9手机当成18:9的手机来显示。需要提升的地方还有很多,比如消息通知会跑到下面来,就像有虚拟的刘海,还有充电的时候电量小圆圈也只能显示四分之一,还有改不了热点的名字和密码。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

最后总结一下这几天的使用体验,MIUI10系统的外观设计与流畅性自然不必多说,提升蛮大的。最让小编印象深刻的还是杀后台情况,3G内存的小米5在MIUI9系统下杀后台现象非常严重。在MIUI10下,这种情况改善了许多,使用时没有以前那么“虚”,强烈推荐老旗舰手机升级。另外,小编发现“小爱同学”贯穿在了MIUI10中,许多地方都能见到AI智能的身影,相比MIUI9“聪明”了许多。总的来说,内测版MIUI10的升级非常到位,焕然一新的UI设计以及交互方式,提升颜值的同时也提高了档次。

UI按钮设计发展史

蓝蓝设计的小编

当我们在网上购物,提交我们个人信息都需要用到按钮。网页UI设计的增长很快,风格似乎也是一个月一变。最近几年,我们经历过从文 本链接到拟物化设计再到扁平化瀑布流设计。导航是网页设计中最重要的元素,并且按钮是最重要的行为工具。

request中跟路径有关的api的分析

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

           最近重在研究struts的源码,其中涉及到了request中的几个api,看了文档后还是觉得不清楚,所以在自己原来的工程中

测试了一下各个api的具体效果。在这里跟大家分享一下。

            这是我具体测试的代码:

           这是我servlet配置的路径:

            以下是访问这个ProductServlet后控制台打印的结果:

            从以上我们可以发现:

    1.getRealPath(....),这个方法是返回给定资源的磁盘绝对路径,简单来说,就是以盘符开头的路径

    2.getRequestURI(....)与getRequestURL(....)这个两个方法,从名字上来说,一个是返回url(统一资源定位器)一个是返回

uri(统一资源标识符,用来唯一的标识一个资源),那么url跟uri有什么区别呢?比较结果后我们就知道,URL中包含URI,URL是

带协议,带端口号的。

    3.getContextPath(....)这个方法,其实就是用来返回工程名,或者说工程路径,看结果我们一目了然

    4.getServletPath(.....)这个方法,从结果中,我们可以分析得出,它其实就是在工程目录下,访问我们servlet的路径,或者说

servlet相对于我们工程的路径,在或者说,它就是我们在配置文件中配置的路径,但是不包括后面具体的请求资源名

    5.getPathInfo(.....),这个方法其实就是返回我们具体请求资源的名称,或者说,相对于我们的servlet而言的请求路径

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

如何做好电商类App?来看这份对新版淘宝的设计思考!

涛涛


电商类 App 是日常使用频次非常高的应用,它们的每一次更新改版不仅是业务的拓展、用户需求的满足,同时也是消费趋势的引领与跟随。

近期淘宝 App 的许多页面都有了较大的改动,在分析淘宝改版的基础上,通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计,希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。

一、淘宝改版

前阵子淘宝进行了改版,这次改版循序渐进,并做了较多的 A/B 测试。

1. 主要改版页面

上图是淘宝几个主要改版页面。从视觉上看,很明显的大圆角卡片、去线条,整体风格统一轻质化。大圆角卡片追随了 iOS11 的风格(App Store 中尤为突出),卡片使信息更加聚焦,模块感更强;圆角卡片本身也比原先的卡片式增加了更多细节;大圆角卡片亲和力高,更加活泼,也符合淘宝人群的定位。

上图为5个 tab 的页面,这次统一了头部的颜色,强调了品牌,统一性方面也得到了提升。

以下是从单个页面的角度进行改版分析。

2. 个人首页

△ 旧版图为除夕的截图,颜色方面先不讨论

新旧版本的对比,可以看出88会员、卡券包优先级提高,会员信息更加集中、突出。这也印证了这两年会员机制的火热,拉新成本和难度都越来越高的情况下,巩固老用户才能带来更多的价值。

新版的卡片式很突出,去掉了大部分的线条,转而用块面来代替线条表达层级关系。

「我的订单」部分 icon 样式发生了变化(7. 7. 2 版),从填充式转变为线条式,突出了 icon 右上角的数字,但这一点在测试版本中又改回来了(后面讨论)。

88会员和物流这两块内容滚动呈现,真正是动效解决问题,从时间轴来解决信息量大而空间局限的问题,同时动态效果增加了用户吸引度。

在测试版中,这个页面主要看到两个点的变化,一个是 icon 改为原来的填充式,一个是动效滚动的节奏。

icon 的问题个人猜想是因为体量与重要性、位置的问题,线条式的体量弱于填充式。在「我的淘宝」页面中,最重要的信息是「我的订单」,因此需要一定的突出。另外在测试版里,「我的订单」的上面固定的广告位放置了旅行青蛙的广告,此位置的突出性导致其弱化了底下的「我的订单」,占用了原先「我的订单」的 C 位,因此测试版考虑到更全的场景(有广告),从而将 icon 的样式换回了体量大的填充式。

动效滚动是上面说的88会员和物流,7. 7. 2版本里两个滚动是同时进行的,而7. 7. 8的测试版中两个滚动是错开的。上下同时滚动会让人有些混乱,会让人认为这两块的信息是相互关联的。

3. 店铺首页

这一块做的 A/B 测试。店铺页面的改动较大,导航做了较大调整。新版将常用操作和重要功能放到了底部固定;二级导航中的内容让商家自定义选择,从而满足不同店铺的需求;新版一级二级导航较旧版层级关系明确了许多。

再来说说这次的 A/B 测试,这次的测试时间比较长(从7. 7. 2到目前的7. 8. 2都在,目测到8. 0应该会给出一个结果)。店铺页在导航上的大改动,会在一定程度上对已经形成习惯的老用户造成冲击,对页面重新适应和学习,有点类似于前摄抑制(在认知心理学上指之前学习过的材料对保持和回忆以后学习的材料的干扰作用)。新版设计的目的一是方便用户初期快速学习,二是中后期快速使用。对于中后期的快速使用就需要一段时间的铺垫来获得数据。该次测试应该是区分各种不同的用户,简单来说测试新用户、老用户分别对于新旧版本的学习,以及他们对新版本熟悉之后的使用。

4. 物流详情

这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作,增强用户感知(降低理解难度),进一步提升对商品信息的把控感。比原先仅仅是文字展示而言生动了许多,样式接近外卖等待中的订单页面。可视化固然可以展示更多的信息,但是在用户非训练的情况下信息传递的速度未必比文字要更快,不同的人对图形的理解也会有所偏差。不过介于外卖 App 的页面已经对很多用户进行了教育,相信这种理解上不会有太大难度。但是依然要在后续优化中逐渐突出信息的重点。

物流详情页除了样式的巨大变化,还有一个特点就是场景化细分,不同的场景做出了差异化。例如仅仅是物流详情页,根据不同的场景:发货未揽件 – 已揽件未配送 – 快递员配送中 – 到达菜鸟驿站/其他快递点 – 已签收等,页面突出的信息均有所区别。已揽件时突出快递信息,配送时突出配送员信息等。

从场景细分做差异化,让用户获取当前最需要的信息这件事的出发点无疑是很好的,但是从上图中,仅是快递信息这一类信息,就出现了三种样式(如上图),并且位置也不统一。如果用户是购买了几件不同店家的商品,这时快递员打电话来说我是XX快递的,快递给你放在了某某地方,这时我想知道这是啥商品的时候,于是我就打开了物流详情,来找快递信息,发现快递信息居然不在原来的地图底下了,找了好一会才发现放到了快递员下方。这个例子也就是说在非常见场景下获取某个信息时可能需要付出额外的学习成本。

不过在7. 7. 8的测试版本中,又将快递信息的样式减为两种,算是一种妥协。本人认为,场景细分出发点是好的,但在样式和位置两点中,最好至少有一点是固定不变的,这样才不会过多增加用户的学习成本,也能涵盖一些小概率场景。

5. 动效

这两张图都是店铺页面顶部的动效,当用户向下滑动页面时,顶部的信息会出现变化,也算是细分场景的一种,通过动效的方式完美过渡,过渡的流畅感会让用户对该平台增加些许好感。

我的淘宝这一页的动效解决问题在上面有说到,右边的有好货页面,当用户在滑动页面时,攻略推荐一栏的图片有依次展现的效果,吸引眼球,小有惊喜。

总结来看,淘宝改版的设计角度可以总结为:设计追随目标,品牌、会员突出,追随设计趋势,细分场景,可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说,设计解决实际问题,设计需要验证,测试要严谨。

二、淘宝与其他竞品

这里只选了京东和苏宁易购两个与淘宝进行了几个关键页面比较,以下主要从视觉的角度谈一下有哪些问题,这里几乎不牵扯业务、页面跳转等问题。

1. 首页

淘宝:整体看起来没有什么硬伤,没有用卡片风格。

京东:这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬,大有为了卡片而卡片既视感,京东秒杀这块的整齐度不高,也有些左重右轻。「每日逛」这种装饰性较强的风格也与整体卡片式简洁风格不符。「东家小院」楼层次级标题的颜色跳跃,大有喧宾夺主之感。

苏宁易购:目前还没有改版。掌上抢这楼层整齐度不高,和京东类似,同时缺少层次感,部分有渐变部分没有,非常不统一。「逛实惠」楼层视觉不平衡,而且信息层级很有问题。

2. 搜索结果页

风格:淘宝这页用了无框设计,省去了中间的分割线,商品图片尺寸较大;从左到右,图片尺寸越来越小,分割线从无到细到粗,整体效果上淘宝和京东效果比易购的好。

标签:在标签的处理上,易购的标签非常强,在页面上非常突出,喧宾夺主;京东的标签弱化,与淘宝类似,但完全不同类的标签样式相同(秒杀与自营),会让人觉得有些混乱。

图文编排:淘宝和京东都没有硬伤,比较和谐,但易购的图片和文字大小间距比例不和谐,图片与线框无论在视觉效果上还是像素上都没有对齐;易购底部没有适配 iPhone X。

3. 分类页

风格:淘宝用了明显的卡片,去线条;而京东也用了卡片,卡片感微弱,是为了统一性而做;易购仍然是线框区分,整体区分效果不佳。

品牌:淘宝和京东在文字的处理上没有用更多的色彩,而易购的色彩运用得非常多,削弱品牌感,且没有带来任何优势。

4. 商品详情页

此页面我仅从节奏感这一个角度来看,上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好,轻重缓和;京东和易购在节奏感上做的都有些问题,重节奏之间无轻节奏的调和会缺乏呼吸感。

5. 购物车

风格效果:淘宝没有用卡片风格;京东用了卡片,导致大量留白,同时没有带来任何优势,苏宁易购整体稍显拥挤,没有亮点。

图文编排:淘宝整体非常和谐;京东图片均使用了白底,这点很好保持了统一性;京东使用了大量的设计细节,字号、粗细、字体、颜色等等非常丰富,但整体效果并没有很理想,稍显琐碎与凌乱;苏宁易购的文字大小与间距处理不和谐而带来拥挤感。

其他细节:京东标签不同于搜索结果页的弱化,而是非常强化,导致视觉焦点混乱,个别按钮非常小,操作不便;易购标签处理上比京东收敛;易购底部 tab 与其他部分没有区分,浮框像广告,效果不佳,数量修改框的描边太硬,比例不和谐。

6. 个人首页

整体风格:淘宝和京东都是明显的卡片式,苏宁易购是广义上的卡片式。

这里主要说一说易购的问题:首屏出现「我的专场」的大片不平衡色块非常不合适,部分 icon 效果不佳,另外有一些内容上的 bug。

7. 订单

淘宝和京东的订单页个人认为没有什么硬伤,淘宝有个适配的问题。苏宁易购的问题比较多,首先是顶部「常购清单」中没有商品的 bug,然后是图片与购物车等地方的风格不符,商品之间分割线有时有有时无,间距有问题等等。

三、总结

综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势:追随设计趋势、统一性、排版和谐等。

关于统一性这一点,可能有人说京东做的更好,因为它几乎所有页面都用了卡片风,而淘宝没有。个人认为,设计风格是次于设计目标的,如果这种设计风格不能很好满足该页面的设计目标,建议还是以设计目标为重;如果仍然强制使用该风格的话,会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格,除了卡片以外,还有去线条、色块等等设计语言,因此并非强调一定要使用卡片形式。

从月薪3000到月薪30000,设计师更该专注什么

博博

从月薪3000到月薪30000,设计师更该专注什么

SODO学堂 2017-09-11 19:17:47

从月薪3000到月薪30000,设计师更该专注什么

又是一篇长文,但有用

花5min读完,你会有收获

我知道很多人看了这个题目可能是冲着“月薪3000到月薪30000”来的,想看看一个人的成功背后的故事。但是今天恐怕要说,一个人的成功有TA自己的机会和运气,而方法论才是更重要的。

让自己成为一个更值钱的人才是要紧事,任何一个职业都一样。

所以,今天就来说说,怎样让自己成为一个“更值钱”的人,以及想要充实自己,你应该抓紧每一个周末甚至平日的时间做点什么。

01

关心收入之前先确保自己有能力

总有人在后台也好,在知乎也好,在各种能私信的地方问我:

“我学的是xx专业,现在在哪里哪里做着一份如何如何的工作,工作了1年多,我怎么才能让自己快速增加更多的收入呢?”

一般说来,本着切合实际的原则,我也会告诉他们:“工作才1年多,最重要的是要先稳定自己的设计水平,持续有高质量的输出,然后积累自己的作品,增加自己的设计能力。然后再关心所谓的赚钱和收入。”

简而言之,先有能力,再谈机会和收入。

从月薪3000到月薪30000,设计师更该专注什么

所以,这么看来,这些人应该优先转化一下自己思考问题的出发点,比如下面这样的问题会更具体、更符合实情:

“我应该报什么样培训班,应该快速获得什么样的专业能力,才能在工作中有赚更多钱的可能?”

“工资1w+的设计师,做出来的东西是什么样?我怎么才能尽快做出同样的设计?”

但其实,这样的问题我也并没有一个一概而论的答案,不同公司的规模不同,大平台和小公司所需要的能力、技能、水平都不同。

举个例子,一般大公司的设计师职位划分可能是非常细致的,每个人就干小范围那一类活儿;小公司就比较杂了,可能设计稿你要做、市场沟通你要做,还要懂一些运营知识等等。

像是1w+这种以薪酬来论能力的情况并没有统一标准的答案,和公司、行业、环境、城市、专业、竞争力等等很多因素都有关系。

这里给大家一个建议,如果你想知道一定收入的设计师达到什么样的水平。可以去招聘搜索网站按照薪资去排查搜索,会出来一批公司的list;然后再相应去找每一家你感兴趣的公司的官网或者电商网站(某宝之类)看具体出来的是什么感觉的设计,这是最简单也直观的方法

所以,下次问类似问题的同学,应该知道怎么办了。

02

不要为了多那一点收入而耗光自己的精力

我发现有很多同学都很迷茫一个事儿。大家似乎都想快点赚到更多收入:“作为设计师是不是可以利用私人或周末时间接点私单?这样还能认识更多的人,有额外收入,还能积累到更丰富的设计经验?”

有这种想法的人应该挺多的,毕竟设计师1-3年内都很少能让自己攒下什么钱,社会加注给每个人的经济压力都很大,也无可厚非。

但是,我个人的看法是,如果你想要“吃更大的蛋糕、做更大的事情”,那么不要为了多那一点点收入,而在这个阶段因为接私单而耗费掉自己太多的额外精力。

从月薪3000到月薪30000,设计师更该专注什么

为什么这么说?

一般有这种想法的人,基本上都处在设计水平中等偏下的位置,也有一点设计项目的经验了,也有那么些稿子了,但是每一个项目做的不算出彩。知识不够扎实、资源不够丰富、人脉半上不下,又一心想要赚多点钱,所以才想着跑去接私单。一般,还只能接廉价的私单。

但是基本上都会面临被私单逼疯的境地,具体表现为:

1. 因为廉价私单单主逼格不高,所以瞎指挥的情况较多,改稿无数是常态

2. 改稿会经过反复沟通协调,又耗费掉大量时间,沟通不善的情况也较多

3. 廉价私单越多,品味会越来越差,陷入丧失信心还没时间充电的焦虑中

总之,如果你想保持个人精进,最好还是抽出时间来充电和充实自己,不要想着眼皮子底下那一点点收入。心态的差异与专注执行在哪儿,是造成月薪3000→4000还是月薪3000→30000的本质原因。

03

让自己更专注在这些事情上

既然坚持走在设计的道路上,那么真正保持让自己有核心竞争力、让自己可以持续创造更多财富的做法,大家可以参考并尝试以下几个方面:

观察优秀人群,学习并模仿

如果你和我们一样不是天生自带尚方宝剑含着金汤匙出生的人,就不要在起跑线上幻想自己可以很快靠做图成为“设计界的马云”。最好还是踏踏实实稳中求进,这样比较不会带来那么多消极情绪。

正常说来,在一个人的社交圈中,周围总有人的水准是高于自己,也有低于自己的。而你要关注的就是设计水平和能力高于自己的人,用心观察和留心他们的习惯,感受自己究竟还有哪里可以进步,学到这些人的长处并且活用。

不要光是说想学习然后只是放嘴炮,要踏实地付出行动。一般说来,值得被学习的方面有:

执行力强多于嘴炮

期待并拥抱改变

自我驱动力做事

积极乐观热爱光做

关注设计行业信息

说到这个,又想起来周末有个同学私信我问什么是“时尚管理”,是不是从国外学习这个专业毕业之后就能进品大公司,在品牌强大的背书下挥斥方遒。

我记得我跟她说:“有人觉得自己在圣马丁服装设计专业一毕业就能成为约翰·加利亚诺,怎么会如此天真?

后来我真诚地建议她“多去看一些行业信息,比如BOF,这样你至少能对这一行究竟是哪一行、做什么事儿、市场行情啥样有最基本的了解和判断。”

不知道不可怕,可怕的是单纯地活在自己幻想的世界里不肯去了解真相。

选择一个方向,坚持越久越幸运

很多同学觉得学设计也不一定非得只做高级设计师,听说学设计还有很多其他的出路,比如做设计培训行业的老师、注册账号做设计类自媒体、自己设计自创品牌、做freelancer到处走穴等等等等。也不知道到底哪个算是真正滴适合自己,于是每一个为期半年,都试一试,不成功就换下一个。

不过试的越多越发现,似乎都没成功,哪个试到一半都觉得就那样,总是会有各种各样的问题和自己最理想中的状态有区别。

在这个跳槽说跳就跳的年代,脚踏实地去慢慢积累的人正在越来越少。

但没有100%理想状态的工作的,培训参差不齐容易入坑、自媒体竞争惨烈千篇一律、自创品牌需要人脉财力持续支持、自由职业者要面对强大的自控力和专注力考验……不论选哪个都会有自己赚钱的方式也会遇到自己的问题

你需要做的,只是选定一个方向。愿意多点点耐心在一个方向上积累和沉淀自己,别把精力分得太散,先做好手头上的事儿再说。

知道自己哪里最强、哪里

设计师应该都听说过要保持自己的核心竞争力,要让自己的活儿做得原来越精良,越来越好。但是只有这一点我觉得还不够,你应该在明确自己的核心竞争力之外,还知道自己的的差异化竞争力在哪儿。

比如,同样是UI设计师,你的UI界面做得好是你的核心竞争力,此外,你有产品设计学习基础同时又超级会做总结,写文案你也不在话下,那么,你的差异化竞争力就包括了“ID设计基础、会做总结、会写文案”3项加分点。

当你明白了这一点,你也知道原来做好设计本身之外还有好多可以精进可以学。

总之,多去想想该如何提升自己的设计能力,保持的优势,同时尽可能深耕下去走得久一点,做到这些,你的收入自然如水到渠成般地增值翻翻。

UI设计方向大抉择:是游戏UI还是应用UI?

蓝蓝设计的小编

学习UI设计培训的人很多,但是方向基本都是应用UI和游戏UI。下面我们分别来谈谈两者的区别

由‘==’和‘===’引出的js的隐式转换问题

周周

‘==’和‘===’都是Javascript中的比较运算符,都是比较运算符两边是否相等。对于‘==’和‘===’的区别,大家也都知道:

  ‘==’仅仅是比较运算符两边的数值是否相等,如果数值相等则返回true;‘===’不仅会判断运算符两边的数值是否相等,并且还会判断两边的类型是否相等,只有数值和类型都相等才会返回true。虽然知道以上的判断依据已经能解决绝大数此类问题,但是如果往其中深究来说,会有同学问:在比较的时候‘===’先判断类型,如果类型不同就直接返回false,这个没什么问题。但是如果是‘==’比较两个不同类型的数据时,具体是怎么进行计算判断的呢?

 既然是不同类型进行比较,肯定最终参与比较的结果必须是同一个类型的,因此JS会存在一个隐式转换的问题,并且很多JS的隐式转换很难通过console.log()等方法直观的观察到,因此很多初学者会对JS的隐式转换感到疑惑。

 首先让我们回忆一下,咱们的JS中一共有哪些数据类型?

       六大数据类型
       基本数据类型(简单数据类型)
       number 数值型(NaN)
       string 字符串
       boolean 布尔型
       undefined 未定义
       null 空引用
       引用数据类型(复杂数据类型)
       object

       JS基础中,我们学习到咱们的JS中一共有六种数据类型,分为基本数据类型(简单数据类型)和引用数据类型(复杂数据类型),不同类型的值进行比较的时候,存在隐式转换的问题,咱们通过‘==’来验证一下JS隐式转换的情况。

       1.我们首先来看看下列的语句计算结果:

console.log(NaN==true);//false
console.log(NaN==false);//false
console.log(NaN==0);//false
console.log(NaN==1);//false
console.log(NaN==NaN);//false

       由上面的例子可以看出,NaN属于Number数据类型中一个特殊情况,如果‘==’两边同为Number数据类型的数字,很直观的可以看出值是否相同一眼就可以看出结果,但是作为Number类型的特殊情况,NaN在进行比较的时候,也会有特殊的结果:如果 x 或 y 中有一个为 NaN,则返回 false;

       2.我们继续看看下列的语句计算结果:

console.log(null == undefined); //true(特殊情况)---------------------------------
console.log(null == ''); //false
console.log(undefined == ''); //false

      在上述例子中,引出了一个null,null是一个简单数据类型,它的意义就是一个空应用,但是你如果通过console.log(typeof null) 来打印结果的时候却发现,结果竟然是object?此时你可能会怀疑人生,然后疯狂的翻阅之前学习的资料,因为object明明是一个复杂数据类型,怎么会在判断null这个简单数据类型的类型时打印出来呢?其实,这个问题属于一个历史问题。咱们学习的JS在发展过程中是通过ECMAScript来确定规范的,每年都会有新的规定和规范提出,在JS的发展过程中,null一开始的作用就是用来指向一个空地址,让开发者在创建数据的时候,先用null赋值给还未给值的对象用于标准初始化。但是其实咱们开发过程中很少用到,但是这个仍作为规范留了下来。又因为typeof是根据数据的前几位判断数据类型的,null相当于空指针,前几位是地址的格式,所以判断结果就为object。又因为undefined值是派生自null值的,因此ECMA-262规定对他们的相等测试要返回true。所以这一情况判断的条件为:如果 x 与 y 皆为 null 或 undefined 中的一种类型,则返回 true(null == undefined // true);否则返回 false(null == 0 // false);

       3.请看下列例子:

console.log(true == '123'); //false
console.log(true == '1'); //true
console.log(false == '0'); //true
 
console.log(true == !0); //true
 
console.log([] == []); //false
console.log([] == ![]); //true 比较地址 ------------------------------------------------
var a = c = [];
var b = [];
console.log(a == b); //false
console.log(a == !b); //true
console.log(a == c); //true
 
console.log(Boolean([]) == true); //true
console.log(Number([]) == 0); //true
console.log(Number(false) == 0); //true

       其实比较的逻辑为:如果 x,y 类型不一致,且 x,y 为 String、Number、Boolean 中的某一类型,则将 x,y 使用 Number 函数转化为 Number 类型再进行比较;

      使用Number函数可以将其他的数据类型转变为Number类型,这一同为Number类型的数据,对比起来就会变得十分简单。值得注意的是在上述的例子中,两个空数组进行比较,结果返回的结果仍然为false,这个是怎么回事呢?其实这个很好理解,因为数组也是对象的一种,是复杂数据类型,所以用变量储存对象时储存的其实是地址。对象的内容相同,但是储存在堆区的位置不同,所以地址也是不同的,所以在判断的时候返回的是false。

      其实在JS中还有很多的隐式转换情况,以上只是针对于‘==’的隐式转换情况,对于这些问题,在实际开发过程中,需要作为开发者不断的学习和积累,这也是咱们作为开发者的一个要求之一。

遵循这7个原则,能让你的网页用户体验更优秀

涛涛

作为用户,在很多时候会很容易判断出一个网站的用户体验是否优秀,因为主观感受是很难被欺骗的。但是作为网站的设计者和开发者,角色转换之后,所需要面对问题就复杂得多。身为构建者,要让体验尽善尽美需要花费大量的时间精力来完善整个体验的闭环。今天为你所整理的这7个 UX设计的原则,能够帮你更好地进行网站的 UX设计,并且尽可能地将整体的用户体验提升到一定高度。

1. 围绕用户体验来进行整体设计

想要创造难忘的用户体验,自然要围绕着用户体验本身来进行设计。甚至在某种意义上来说,数据和内容也应该是服务于体验的, 它们应该以什么样的体验来呈现出来,这是设计者需要反复思考和琢磨的问题。

图形、布局、文本和交互元素之间的协同工作才能创造体验,任何一个维度缺一不可,单纯的信息展示是不够的。

想让你的网页能在互联网上大量的信息中脱颖而出,体验是至关重要的。现代网页中大量的视觉和交互内容存在,是为了能通过体验直击人心,这样才能在激烈的竞争中存活。

2. 网站内容应当一目了然

如果你认为网站内容是用来读的,那就错了。现代用户的注意力集中的时间非常短,绝大多数用户在浏览信息的时候,都是快速扫视,而非逐字逐句地仔细阅读,信息的展现一定要直观、清晰,确保能够一瞥就能看明白。借助信息图表和视觉,更快地传达信息和数据。

你需要让你的内容更加吸引用户,绝大多数用户会为触动它们的信息和内容而驻足,当他们想要了解更多的时候,才会点击,了解更多。

3. 用户想要简单而清晰的内容

用户只需要半秒就能判断出网站设计和内容,你需要尽量让网站的交互和指引足够清晰,显而易见。不要让按钮难以被用户发现,在首页上放上一大堆的按钮和链接,不如通过视觉上的引导,让用户注意到最关键的那个 CTA按钮。

通过迭代和测试,不断地优化和提升网站的易用性。有的设计对于绝大多数的用户都非常有用,凸显最重要的选项,允许隐藏额外的功能,并且为用户提供显示全部的选项。

除了清晰的设计,整体的一致性也很重要。统一的配色、交互和图形能够让用户对于后续的操作有更清晰的预期,减少用户在后续操作过程中探索的力度,这是通过统一性设计提升产品易用性的一种方式。

4. 通用设计元素 vs 创造性

当某个设计元素在其他地方很常见的时候,它就已经形成了特定的 UI 模式,尽量不要去修改它,哪怕是很富有创意的方式。当你将这种约定俗成的元素修改成其他样子的时候,用户需要花费比平时更长的时间来判断它究竟是什么。这种认知负荷将会影响整个网站的使用效率和转化率。比如汉堡图标,比如网站登录入口的位置(右上角)。没有必要在这种地方重新「标准化」。

对于链接、导航、布局这样基本的元素,应该始终优先考虑其可用性,在此基础上再发挥创意。

虽然非传统的设计很酷,但是它的可用性问题同样很大。创造性的设计同样是需要控制其程度和平衡,如果非要打破常规,尽量控制好程度,并且一次最多打破一条规则,不能更多。

5. 了解你的用户

在开始创建网站和 APP 之前,你应该对于你的目标客户群体有足够清晰的了解,这样才能更好地为他们来设计界面。

一旦你清楚地了解了你的用户,就能了解他们的需求和愿望,并且设计出符合他们预期的界面和体验。这个时候,你的竞争对手能够为你提供灵感和想法。注意对方的色彩,布局,风格和功能。

尽可能使用你的受众已经熟悉的 UI 模式和 UI 元素,能够更快让他们上手。在此基础上,适当地进行差异化的设计,这样效率更高。

当你确定了受众之后,记得尽量把他们的反馈纳入到你的设计当中。

6. 视觉层次很重要

当界面中优先放置最重要的元素,通过视觉层次来凸显它们,确保用户能够更快注意到它们。在设计中,有很多方法能够凸显内容,但是最有效的方法始终是让它们更大更醒目。

视觉层次的构建能够让网站内容更加清晰,也更加富有功能性。

7. 控制用户体验的质量

Peter Moville 在 usability.gov 这个网站上列举出了用户体验设计的关键因素,它的核心价值在于通过不同的维度更好地掌控用户体验的质量:

  • 有用:内容应该是原创的且满足需求。
  • 可用:网站的内容应该很容易被找到。
  • 可取:设计元素应该贴合情感且具备可欣赏性。
  • 可发现:内容容易被定位,被找到,并且可导航。
  • 无障碍:设计要为有障碍的用户进行定制。
  • 可信:网站内容应该有权威性,且值得被相信。

除了上面的维度之外,还有一些值得参考的 UX设计的质量衡量标准:

  • 符合上下文:有明确的路径,符合上下文逻辑。
  • 人性化:值得信赖,平易近人,透明,并不机械。
  • 可发现性:用户在第一次访问的时候就能够顺畅的完成任务。
  • 可学习性:确保交互足够简单,并且能够无缝地相应移动端界面,确保用户在随后的访问过程中达成目标。
  • :确保用户能够快速轻松地完成各种任务。
  • 令人愉悦:确保产品能够满足用户需求,还能够和用户产生情感联系。
  • 表现良好:当用户与之交互的时候表现良好。

结语

用户体验设计的目标不仅仅是让产品本身更优秀,更重要的是从情感层面上和用户产生关联。有界面而没有体验,这样的产品在今天的竞争中是活不下去的。

日历

链接

个人资料

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

存档