php

php

php相关问题
html+css

html+css

JavaScript

JavaScript

js,jquery,vue.js等
Linux

Linux

Linux操作系统
Mysql

Mysql

各种资源

各种资源

开发工具,手册等
就业指导

就业指导

UI设计

UI设计

教学视频分享

教学视频分享

认知 UI 设计师的职责与今后的进阶之路

寇老师 发表了文章 • 0 个评论 • 1536 次浏览 • 2019-10-08 11:02 • 来自相关话题

一、UI 设计不是素材合成

对于初入职场的设计师,我们一定要在最短的时间内提升自己的项目参与度与设计执行能力,很多设计师一接到项目的第一反应就是去寻找素材,特别是在图标设计上面,习惯于去下载素材直接运用。这样不仅会使得设计稿质量下降,也会不断丧失动手执行力。
我们需要根据不同项目定制界面中的组成元素,而非素材合成,就算一个简单的常见图标,我们也要自己动手按照原定的风格绘制一遍,这样不仅可以保持整套作品的风格统一,也能加强我们的设计执行能力与软件操作熟练度。
 
二、UI 设计不是艺术绘画

随着现在很多概念设计的冲击,很多设计师也会经常在 Dribbble、Behance 等国外设计平台看到很多酷炫的 UI 设计作品,但是你不要认为这个就是你的日常工作项目结果。在真实的项目中 UI 设计不是艺术绘画,我们在寻求感官体验的同时,产品思维、交互逻辑、品牌基因、情感化元素等整体的思考也是非常重要的。
提到绘画,又要抛出一个问题,就是 UI 设计师需不需要手绘功底。这个问题之前也有很多设计师在讨论,当然具备手绘能力的设计师更具竞争力。现在情感化设计运用到产品设计中,也得到很多产品的认可与推崇,主要会运用到应用图标、引导页、闪屏、空状态、背景设计等等方面。
UI 设计师学习插画设计肯定是有利而无害的事情,但是也有很多设计师以自己没有美术基础而放弃学习。手绘都是练出来的,只要你坚持每天都拿起画笔,总是能够找到感觉的,从最简单的图形开始,不要自己给自己设置阻碍,没有人是天生具备,只有早晚涉足而已。
 
三、你不是原型的搬运工

UI 设计师有时候会抱怨团队没有交互设计产出原型,自己设计界面比较盲目。配备交互设计师的团队也会出现交互质疑 UI 设计师没有创新,设计出来的稿子和自己原型差不多,就是上了颜色而已。这样的情况并非少数,依然很多设计师还处于原型的搬运工阶段。
原型展示的只是产品功能布局,交互逻辑与我们的业务流程等。我们在进行界面设计的时候只要不对功能进行擅自增删处理,至于最终的表现形式与展示侧重点我们都可以有自己的想法,只要我们的设计是基于用户行为习惯之上的即可。
 
四、你的工作缺一个交互输出

我们在工作中较为理想化的团队组成是有专业的用研、产品、交互、UI 等人员配备,但是随着人员成本的管控,特别是在一些初创型团队,用研、产品、交互不一定能够配备到位,那么 UI 设计师直接对接产品或者老板都是完全可能的。在这样的团队你不能指望谁给你完整的交互输出,有时候只有老板的几个概念,剩下的都需要你去完善。
作为 UI 设计师,我们不能仅局限于视觉表现,我们要具备一些基本的产品思维、交互输出能力等,这样才能应对更多元化的职场需求。
自我要求:每周坚持体验两款以上产品,不要在意什么类型的产品或者产品好与坏,我们的目的是养成产品思维。没有见过的东西必然不会在脑海中产生印象,只有看得越多,思维才会更加活跃,思路也才能更加敏捷。我们体验的时候需要进行梳理,对功能结构的梳理、交互形式的梳理、视觉表现的梳理等等。刚开始可以停留在单一的层面,逐步加深难度和多维度去进行体验梳理。
我们需要具备的不只是原型的美化,当我们工作中缺一个交互输出的时候,我们需要具备基本的交互设计能力。我们要在平时空闲的时候利用好自己的时间,多产出一些从 0~1 的作品,坚持日常练习还是很有必要的。
 
五、你永远只是满足于工作项目

做好工作项目这个是作为一个设计师最基本的专业素养,但是我们不能仅局限于此。工作项目的提升是一方面,还有更多的其他方面也需要加强,你不能永远只满足于工作项目,还有很多设计玩法需要你去体验,不断地激发自己更多的潜能与掌握更多的设计趋势。
根据我们在工作中将会遇到的不同场景,我们看一下相对应的一些应对处理方案:

1. 项目单一

项目单一造成设计师的发挥机会较少,在这样的情况往往作品的产出也较少,要利用好空余时间,完成工作项目之后要善于从多方面去练习突破。在工作项目中没办法发挥的设计技能要重点加强练习,以应对以后多方面的调整。

2. 项目局限,接触面较少

有时候我们在工作中常年服务一类产品,没有机会接触更多多元化的产品,这样可能会将自己的专业锁定在这个领域,以后如果想要尝试更多的机会也将会受到局限。这样的情况我们更加不能满足于工作项目,要试着多练习弥补其他方面的短板,让自己的设计能够应对更多类型的产品。

3. 项目很多,工作饱和度过大

这样的情况如果本身在一个专业的大平台,发挥的机会很多,项目的接触面也很广,那么现在的辛苦付出都是值得的。如果在小团队,项目很多但是也很杂,这样的状态适合前期,扩展自己多面能力,但是如果长时间做的都是没有设计含量的杂事,那样也将会对未来长期的发展带来弊端。这个时候你需要结合自己当前的处境分析一下利与弊,要有更多设计挑战才能获得更大的进步。

4. 项目很少,发挥机会很少

之前我也遇到过这样的团队,一年下来产品就改版一次,还是小改版,所以那个时候我很闲 ,但是我利用好了那段时间做了很多设计提升,充实了我这段很闲的时光。如果你恰巧也是这样的状态,那么你一定要规划好自己的时间,不然一年一年过得很快。
由于所在城市、机遇等的不同,大家所遇到的职场环境都千差万别,但是无论身处何种环境,我们首先要找到兴趣所在、目标所在、动力来源,只有不满足、善于规划,才能成就更好的自己。

六、过于主观性地判断设计作品

当我们在判断一个作品的时候,不能只是停留在美与丑阶段,这样的判断属于过于主观的行为。一个成熟的商业设计是经过反复的产品迭代、数据反馈与分析、用户反馈与研究、可用性测试与多次的试错等等综合孵化的结果。
我们也会经常访问一些国内外的设计网站,从上面看到很多精美的设计作品,不乏有设计师在评判他人作品的时候只是站在了自己的角度,没有发现作品背后的目的。我们产出任何一套作品都有设计师自己的目的,不论是商业的目的还是个人成长的目的,肯定是通过这个作品给自己带来某些方面的进阶。所以,我们看待一些作品的时候,要去发现作品中值得借鉴与学习的局部,结合更多有用的优点,转化为自己的技能。
我们在平时也需要多采集一些优秀的作品,做好细分类,不要局限于自己职业领域,要多方面的吸收,扩宽自己眼界广度。在空闲的时候就挑选几个触动你心灵的作品进行细节分析,找出这个优秀作品背后的轨迹,这样这个轨迹将会被你所复用。
 
七、只想画图不想知道真相

平时也经常收到很多设计师发来的设计作品,大家一起探讨,经常问到他们为什么这么设计的时候都会出现卡顿。在一些设计师眼中,依然还是有停留在画好图阶段,对产品背后的逻辑不闻不问,照着原型和产品经理的意思仅仅做了视觉表层的还原。
虽然我们在整个产品设计链路中只是其中的一个环节,但是你想要做好这个环节,必然要熟知其他的环节运行机制,这样你才能做好承上启下。接到项目后,要对项目的大致情况有所了解,每一个功能点传达给用户的意图,用户操作后的反馈,设计需要凸显的比重等等。我们不能盲目的设计,只有思路清晰之后才能把设计做对。
我们做的是满足于商业市场、用户需求的设计,不是自我风格的表现,不仅要把作品做好看,更多的是要把作品做对方向。作为成熟的 UI 设计师,你不能只是一个画图的设计师,要养成勤于思考、熟知原理、产出更加符合市场与用户需求的作品。
 
八、你需要一点品牌思维

品牌的概念在产品中是非常重要的,市场上永远不缺竞品的脚印,如何让用户对你的产品产生价值认同而做出选择,品牌的建立与认可起到关键性的因素。品牌的成功受到诸多因素的控制,我们 UI 设计师需要对应到自己的板块为整个品牌服务加分。
我们能够做出设计是满足了基本的需求,还需要把设计继续深入,融入品牌基因到我们的产品设计中,为产品设计的差异化走出一条路。同样设计了一个界面,能否最大化地辅助品牌的传播是需要我们不断思考与尝试。从品牌基因延续可以运用到应用图标、功能图标等设计中;在导航的处理上面品牌色的介入也会辅助传播品牌色的认知,从而加强对于产品的记忆;空状态中带有品牌基因的形象运用,通过情感化的手段拉进与用户的距离;辅助图形在背景或者装饰性元素上的运用将会提升整体品牌元素的统一等等。
如果我们在产品设计的时候能够多一点品牌思维,那么也将有助于设计能够区别于竞品。作为 UI 设计师,我们需要掌握的远不止设计一个界面而已。
 
九、UI 设计师不只等于 APP 设计师

虽然在大部分的 UI 设计师的认知中,我们的工作主要以移动端的设计为主,也就是 APP 设计。但是在工作中也很难这么理想,随着人员成本的走高,几乎所有的公司都是希望设计师能够满足更多需求。
现在对于 UI 设计师的招聘需求也在逐步趋向于视觉设计师,希望设计师在视觉层面能够独立完成界面设计、网页设计、品牌设计、运营视觉支持,最好还能会点手绘插画等,在产品层面希望设计师能够具备基本的产品思维、交互设计,能够做出以用户为本,设计具备较好的用户体验等。
设计也具备一定的通用性,我们在短时间很难精专每一方面,但是我们可以阶段性地制定提升计划,只要你在某个专业领域具备很好的专业度,很多成功的技巧与思路是可以被复制的。我们不能盲目的随波逐流,学习提升需要结合当前自己的职业需求,做出优先级的学习计划表。
现在很多企业对于 UI 设计师的要求已经在逐步趋向于视觉设计师,希望在今后的设计进阶之路上,你能够更好的运用自己的时间,逐步地提升自己的设计综合能力。

十、UI 设计之路任重而道远

现在很多设计师都希望转入 UI 设计,也有很多质疑 UI 设计不就是把画海报的技能改为画界面吗,外界的声音无论如何评价,我们自己需要清晰地认知。一个产品设计的诞生绝非几个界面设计而已,里面需要我们思考与验证的地方有很多,通过我们的设计搭建起用户的操作习惯,通过视觉引导满足用户的需求。
UI 设计之路任重而道远,我们需要坚持不断地突破自己。不要停留在视觉表面,坚持体验不同的产品和加强日常练习,从产品思维、交互逻辑思维、设计执行力等方面综合提升自己,应对不断发生变化的设计市场。坚持越努力,越幸运! 查看全部
一、UI 设计不是素材合成

对于初入职场的设计师,我们一定要在最短的时间内提升自己的项目参与度与设计执行能力,很多设计师一接到项目的第一反应就是去寻找素材,特别是在图标设计上面,习惯于去下载素材直接运用。这样不仅会使得设计稿质量下降,也会不断丧失动手执行力。
我们需要根据不同项目定制界面中的组成元素,而非素材合成,就算一个简单的常见图标,我们也要自己动手按照原定的风格绘制一遍,这样不仅可以保持整套作品的风格统一,也能加强我们的设计执行能力与软件操作熟练度。
 
二、UI 设计不是艺术绘画

随着现在很多概念设计的冲击,很多设计师也会经常在 Dribbble、Behance 等国外设计平台看到很多酷炫的 UI 设计作品,但是你不要认为这个就是你的日常工作项目结果。在真实的项目中 UI 设计不是艺术绘画,我们在寻求感官体验的同时,产品思维、交互逻辑、品牌基因、情感化元素等整体的思考也是非常重要的。
提到绘画,又要抛出一个问题,就是 UI 设计师需不需要手绘功底。这个问题之前也有很多设计师在讨论,当然具备手绘能力的设计师更具竞争力。现在情感化设计运用到产品设计中,也得到很多产品的认可与推崇,主要会运用到应用图标、引导页、闪屏、空状态、背景设计等等方面。
UI 设计师学习插画设计肯定是有利而无害的事情,但是也有很多设计师以自己没有美术基础而放弃学习。手绘都是练出来的,只要你坚持每天都拿起画笔,总是能够找到感觉的,从最简单的图形开始,不要自己给自己设置阻碍,没有人是天生具备,只有早晚涉足而已。
 
三、你不是原型的搬运工

UI 设计师有时候会抱怨团队没有交互设计产出原型,自己设计界面比较盲目。配备交互设计师的团队也会出现交互质疑 UI 设计师没有创新,设计出来的稿子和自己原型差不多,就是上了颜色而已。这样的情况并非少数,依然很多设计师还处于原型的搬运工阶段。
原型展示的只是产品功能布局,交互逻辑与我们的业务流程等。我们在进行界面设计的时候只要不对功能进行擅自增删处理,至于最终的表现形式与展示侧重点我们都可以有自己的想法,只要我们的设计是基于用户行为习惯之上的即可。
 
四、你的工作缺一个交互输出

我们在工作中较为理想化的团队组成是有专业的用研、产品、交互、UI 等人员配备,但是随着人员成本的管控,特别是在一些初创型团队,用研、产品、交互不一定能够配备到位,那么 UI 设计师直接对接产品或者老板都是完全可能的。在这样的团队你不能指望谁给你完整的交互输出,有时候只有老板的几个概念,剩下的都需要你去完善。
作为 UI 设计师,我们不能仅局限于视觉表现,我们要具备一些基本的产品思维、交互输出能力等,这样才能应对更多元化的职场需求。
自我要求:每周坚持体验两款以上产品,不要在意什么类型的产品或者产品好与坏,我们的目的是养成产品思维。没有见过的东西必然不会在脑海中产生印象,只有看得越多,思维才会更加活跃,思路也才能更加敏捷。我们体验的时候需要进行梳理,对功能结构的梳理、交互形式的梳理、视觉表现的梳理等等。刚开始可以停留在单一的层面,逐步加深难度和多维度去进行体验梳理。
我们需要具备的不只是原型的美化,当我们工作中缺一个交互输出的时候,我们需要具备基本的交互设计能力。我们要在平时空闲的时候利用好自己的时间,多产出一些从 0~1 的作品,坚持日常练习还是很有必要的。
 
五、你永远只是满足于工作项目

做好工作项目这个是作为一个设计师最基本的专业素养,但是我们不能仅局限于此。工作项目的提升是一方面,还有更多的其他方面也需要加强,你不能永远只满足于工作项目,还有很多设计玩法需要你去体验,不断地激发自己更多的潜能与掌握更多的设计趋势。
根据我们在工作中将会遇到的不同场景,我们看一下相对应的一些应对处理方案:

1. 项目单一

项目单一造成设计师的发挥机会较少,在这样的情况往往作品的产出也较少,要利用好空余时间,完成工作项目之后要善于从多方面去练习突破。在工作项目中没办法发挥的设计技能要重点加强练习,以应对以后多方面的调整。

2. 项目局限,接触面较少

有时候我们在工作中常年服务一类产品,没有机会接触更多多元化的产品,这样可能会将自己的专业锁定在这个领域,以后如果想要尝试更多的机会也将会受到局限。这样的情况我们更加不能满足于工作项目,要试着多练习弥补其他方面的短板,让自己的设计能够应对更多类型的产品。

3. 项目很多,工作饱和度过大

这样的情况如果本身在一个专业的大平台,发挥的机会很多,项目的接触面也很广,那么现在的辛苦付出都是值得的。如果在小团队,项目很多但是也很杂,这样的状态适合前期,扩展自己多面能力,但是如果长时间做的都是没有设计含量的杂事,那样也将会对未来长期的发展带来弊端。这个时候你需要结合自己当前的处境分析一下利与弊,要有更多设计挑战才能获得更大的进步。

4. 项目很少,发挥机会很少

之前我也遇到过这样的团队,一年下来产品就改版一次,还是小改版,所以那个时候我很闲 ,但是我利用好了那段时间做了很多设计提升,充实了我这段很闲的时光。如果你恰巧也是这样的状态,那么你一定要规划好自己的时间,不然一年一年过得很快。
由于所在城市、机遇等的不同,大家所遇到的职场环境都千差万别,但是无论身处何种环境,我们首先要找到兴趣所在、目标所在、动力来源,只有不满足、善于规划,才能成就更好的自己。

六、过于主观性地判断设计作品

当我们在判断一个作品的时候,不能只是停留在美与丑阶段,这样的判断属于过于主观的行为。一个成熟的商业设计是经过反复的产品迭代、数据反馈与分析、用户反馈与研究、可用性测试与多次的试错等等综合孵化的结果。
我们也会经常访问一些国内外的设计网站,从上面看到很多精美的设计作品,不乏有设计师在评判他人作品的时候只是站在了自己的角度,没有发现作品背后的目的。我们产出任何一套作品都有设计师自己的目的,不论是商业的目的还是个人成长的目的,肯定是通过这个作品给自己带来某些方面的进阶。所以,我们看待一些作品的时候,要去发现作品中值得借鉴与学习的局部,结合更多有用的优点,转化为自己的技能。
我们在平时也需要多采集一些优秀的作品,做好细分类,不要局限于自己职业领域,要多方面的吸收,扩宽自己眼界广度。在空闲的时候就挑选几个触动你心灵的作品进行细节分析,找出这个优秀作品背后的轨迹,这样这个轨迹将会被你所复用。
 
七、只想画图不想知道真相

平时也经常收到很多设计师发来的设计作品,大家一起探讨,经常问到他们为什么这么设计的时候都会出现卡顿。在一些设计师眼中,依然还是有停留在画好图阶段,对产品背后的逻辑不闻不问,照着原型和产品经理的意思仅仅做了视觉表层的还原。
虽然我们在整个产品设计链路中只是其中的一个环节,但是你想要做好这个环节,必然要熟知其他的环节运行机制,这样你才能做好承上启下。接到项目后,要对项目的大致情况有所了解,每一个功能点传达给用户的意图,用户操作后的反馈,设计需要凸显的比重等等。我们不能盲目的设计,只有思路清晰之后才能把设计做对。
我们做的是满足于商业市场、用户需求的设计,不是自我风格的表现,不仅要把作品做好看,更多的是要把作品做对方向。作为成熟的 UI 设计师,你不能只是一个画图的设计师,要养成勤于思考、熟知原理、产出更加符合市场与用户需求的作品。
 
八、你需要一点品牌思维

品牌的概念在产品中是非常重要的,市场上永远不缺竞品的脚印,如何让用户对你的产品产生价值认同而做出选择,品牌的建立与认可起到关键性的因素。品牌的成功受到诸多因素的控制,我们 UI 设计师需要对应到自己的板块为整个品牌服务加分。
我们能够做出设计是满足了基本的需求,还需要把设计继续深入,融入品牌基因到我们的产品设计中,为产品设计的差异化走出一条路。同样设计了一个界面,能否最大化地辅助品牌的传播是需要我们不断思考与尝试。从品牌基因延续可以运用到应用图标、功能图标等设计中;在导航的处理上面品牌色的介入也会辅助传播品牌色的认知,从而加强对于产品的记忆;空状态中带有品牌基因的形象运用,通过情感化的手段拉进与用户的距离;辅助图形在背景或者装饰性元素上的运用将会提升整体品牌元素的统一等等。
如果我们在产品设计的时候能够多一点品牌思维,那么也将有助于设计能够区别于竞品。作为 UI 设计师,我们需要掌握的远不止设计一个界面而已。
 
九、UI 设计师不只等于 APP 设计师

虽然在大部分的 UI 设计师的认知中,我们的工作主要以移动端的设计为主,也就是 APP 设计。但是在工作中也很难这么理想,随着人员成本的走高,几乎所有的公司都是希望设计师能够满足更多需求。
现在对于 UI 设计师的招聘需求也在逐步趋向于视觉设计师,希望设计师在视觉层面能够独立完成界面设计、网页设计、品牌设计、运营视觉支持,最好还能会点手绘插画等,在产品层面希望设计师能够具备基本的产品思维、交互设计,能够做出以用户为本,设计具备较好的用户体验等。
设计也具备一定的通用性,我们在短时间很难精专每一方面,但是我们可以阶段性地制定提升计划,只要你在某个专业领域具备很好的专业度,很多成功的技巧与思路是可以被复制的。我们不能盲目的随波逐流,学习提升需要结合当前自己的职业需求,做出优先级的学习计划表。
现在很多企业对于 UI 设计师的要求已经在逐步趋向于视觉设计师,希望在今后的设计进阶之路上,你能够更好的运用自己的时间,逐步地提升自己的设计综合能力。

十、UI 设计之路任重而道远

现在很多设计师都希望转入 UI 设计,也有很多质疑 UI 设计不就是把画海报的技能改为画界面吗,外界的声音无论如何评价,我们自己需要清晰地认知。一个产品设计的诞生绝非几个界面设计而已,里面需要我们思考与验证的地方有很多,通过我们的设计搭建起用户的操作习惯,通过视觉引导满足用户的需求。
UI 设计之路任重而道远,我们需要坚持不断地突破自己。不要停留在视觉表面,坚持体验不同的产品和加强日常练习,从产品思维、交互逻辑思维、设计执行力等方面综合提升自己,应对不断发生变化的设计市场。坚持越努力,越幸运!

FIREFOX正在重塑品牌

刘宇昆 发表了文章 • 0 个评论 • 1625 次浏览 • 2019-10-07 15:44 • 来自相关话题

还记得Mozilla Application Suite吗?每个人都知道怀旧是吸引注意力的东西。现在您已经在这里,让我们继续第一个项目:Firefox。最终将要更改徽标。Mozilla基金会需要您的帮助来确定前进的方向。
 
我们所知道的Firefox徽标是 Daniel Burka,Stephen Desroches和不可估量的Jon Hicks的合作。是他们向我们介绍了那个蓝色的小球,以及甚至当我们看不到他的脸狐狸时也很奇怪的魅力。

但是,多年来,它已被更改和简化。随着我们西方集体美学的发展,以及屏幕越来越小,它需要与时俱进。而现在,又一次改变了,因为Firefox不再只是浏览器;它是产品家族的负责人。





 
从视觉上来说,由于产品系列或多或少需要匹配,因此Firefox的徽标需要更改以提供更大的灵活性。它需要适应其他软件。为此,Mozilla的品牌团队提出了两种不同的品牌系统,并正在寻求有关它们的反馈。

您可以在上面链接的博客文章中给他们留言。

请注意,这些系统都没有一个接近最终定型。Mozilla现在甚至将它们称为“虚构作品”,它应该告诉您它们与实现有多接近。在做出任何决定之前,每个图标都尚未经过大量迭代。
 
系统1

尽管颜色有些变化,但第一个系统强调的是浓密的几何形状和强烈的黄红色调色板。在这两者中,这几乎感觉有点像“经典Firefox”。
 





 
系统2

第二个系统引入了更多的颜色变化,线条更细。





 
我的反思

这些设计系统看起来都非常非常合规,我认为现在是合适的。但是,我认为他们没有像其他最近的徽标重新设计一样缺乏个性或历史。这是品牌的实际演变,而不是通过手术去除所有有趣和/或过时的东西。

就像评论部分中的许多内容一样,我认为应该将System 2中的Firefox图标与System 1中的其他图标结合使用。这似乎更合适。

唯一令我担心的是最后的引用:“有了您的输入,我们将拥有一个最终系统,即使狐狸不在视线,该系统也将使Firefox产品在世界范围内广为人知。”认为他们实际上没有删除狐狸图像的任何计划;但是,如果这个问题出现了,这是我的想法:保持该死的狐狸! 查看全部
还记得Mozilla Application Suite吗?每个人都知道怀旧是吸引注意力的东西。现在您已经在这里,让我们继续第一个项目:Firefox。最终将要更改徽标。Mozilla基金会需要您的帮助来确定前进的方向。
 
我们所知道的Firefox徽标是 Daniel Burka,Stephen Desroches和不可估量的Jon Hicks的合作。是他们向我们介绍了那个蓝色的小球,以及甚至当我们看不到他的脸狐狸时也很奇怪的魅力。

但是,多年来,它已被更改和简化。随着我们西方集体美学的发展,以及屏幕越来越小,它需要与时俱进。而现在,又一次改变了,因为Firefox不再只是浏览器;它是产品家族的负责人。

firefox-hicks.jpg

 
从视觉上来说,由于产品系列或多或少需要匹配,因此Firefox的徽标需要更改以提供更大的灵活性。它需要适应其他软件。为此,Mozilla的品牌团队提出了两种不同的品牌系统,并正在寻求有关它们的反馈。

您可以在上面链接的博客文章中给他们留言。

请注意,这些系统都没有一个接近最终定型。Mozilla现在甚至将它们称为“虚构作品”,它应该告诉您它们与实现有多接近。在做出任何决定之前,每个图标都尚未经过大量迭代。
 
系统1

尽管颜色有些变化,但第一个系统强调的是浓密的几何形状和强烈的黄红色调色板。在这两者中,这几乎感觉有点像“经典Firefox”。
 

System-1.jpg

 
系统2

第二个系统引入了更多的颜色变化,线条更细。

System-2.jpg

 
我的反思

这些设计系统看起来都非常非常合规,我认为现在是合适的。但是,我认为他们没有像其他最近的徽标重新设计一样缺乏个性或历史。这是品牌的实际演变,而不是通过手术去除所有有趣和/或过时的东西。

就像评论部分中的许多内容一样,我认为应该将System 2中的Firefox图标与System 1中的其他图标结合使用。这似乎更合适。

唯一令我担心的是最后的引用:“有了您的输入,我们将拥有一个最终系统,即使狐狸不在视线,该系统也将使Firefox产品在世界范围内广为人知。”认为他们实际上没有删除狐狸图像的任何计划;但是,如果这个问题出现了,这是我的想法:保持该死的狐狸!

颜色如何影响用户体验?

刘宇昆 发表了文章 • 0 个评论 • 1704 次浏览 • 2019-10-07 15:21 • 来自相关话题

颜色影响着一切,从用户与设计进行交互时的感觉,使用方式到能否完全看到和理解它,无所不包。很简单,颜色不只是装饰工具。颜色对于用户体验至关重要。

让我们从一个常见的例子开始:您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它,但他们无法解释原因。
 
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪,使人们对其产生敏锐的反应。这部分是个人喜好,部分是心理,甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
 
一 、用户期望和偏好
 
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息(例如性别或居住地区)可能会影响他们对基于颜色的设计的感知。
 
颜色对用户体验的最有趣的影响之一与性别有关。研究表明,男人和女人倾向于喜欢和不喜欢某些类型的颜色。
 





 
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互,例如上面的VLNC Studio设计。

女性往往更喜欢与设计方案更浅,调色板更柔和的网站进行交互,例如下面的Tally。

有些人对使用明显女性化的颜色(例如柔和的粉红色,紫色和黄色)的网站产生了强烈的反应。具有严酷配色方案的网站(例如深色背景和完全饱和的红色点缀)倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
 





 
二、颜色关联和含义

虽然这不是一门精确的科学,但是色彩具有相当不同的情感联想。请注意,某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。

当用户看到某种颜色或颜色组合时,它会在大脑中立即产生反应。

红色:力量,危险,爱/激情,饥饿
黄色:能量,幸福,光明,温暖
橙色:创造力,决心,刺激,鼓励
绿色:自然,成长,和谐,新鲜
蓝色:信心,信任,宁静,镇定
紫色:魔术,皇室,野心,独立





 
您期望可口可乐的设计元素为红色。颜色与品牌同义,因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快,并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。

所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时,您可能会觉得自己在说“什么?”。





 
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素,因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。

更改颜色或使用其他品牌,用户访问体验会受到影响,因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
 
三、用户图案连接到颜色

您是否注意到有多少网站使用红色或橙色按钮?

这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到,理解并希望与可单击或可点击元素进行互动,因为他们在视觉上立即知道他们对该元素的期望。

用户体验的关键部分是为用户提供轻松的互动机会,使他们享受并理解。
 






Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同,但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
 





 
四、提高转化率

在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。(它可能不是您期望的颜色。)

当按钮或链接的颜色与设计的其余部分形成鲜明对比时,转换率往往会增加。因此,当您要使用品牌调色板时,选择对比色是产生有助于整体用户体验的转化的关键。

请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击?(原始颜色为蓝色。)





 
五、为所有用户提供可访问性

最后,颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。

颜色会影响用户体验,因为它可以使设计不可访问。

为了使每个人都能充分理解设计并与内容互动,他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”(WCAG 2.1)的调色板和对比度,可以确保每个用户都能理解您的颜色选择。

使用色盲过滤器(例如下面的比较中的过滤器)可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性?










 
结论

将颜色视为一种工具,可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。

找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。 查看全部
颜色影响着一切,从用户与设计进行交互时的感觉,使用方式到能否完全看到和理解它,无所不包。很简单,颜色不只是装饰工具。颜色对于用户体验至关重要。

让我们从一个常见的例子开始:您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏。客户讨厌它,但他们无法解释原因。
 
罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪,使人们对其产生敏锐的反应。这部分是个人喜好,部分是心理,甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。
 
一 、用户期望和偏好
 
用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息(例如性别或居住地区)可能会影响他们对基于颜色的设计的感知。
 
颜色对用户体验的最有趣的影响之一与性别有关。研究表明,男人和女人倾向于喜欢和不喜欢某些类型的颜色。
 

vlnc.jpg

 
人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互,例如上面的VLNC Studio设计。

女性往往更喜欢与设计方案更浅,调色板更柔和的网站进行交互,例如下面的Tally。

有些人对使用明显女性化的颜色(例如柔和的粉红色,紫色和黄色)的网站产生了强烈的反应。具有严酷配色方案的网站(例如深色背景和完全饱和的红色点缀)倾向于让更多的女性望而却步。中间色调调色板最适合所有人。
 

tally.jpg

 
二、颜色关联和含义

虽然这不是一门精确的科学,但是色彩具有相当不同的情感联想。请注意,某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。

当用户看到某种颜色或颜色组合时,它会在大脑中立即产生反应。

红色:力量,危险,爱/激情,饥饿
黄色:能量,幸福,光明,温暖
橙色:创造力,决心,刺激,鼓励
绿色:自然,成长,和谐,新鲜
蓝色:信心,信任,宁静,镇定
紫色:魔术,皇室,野心,独立

coke-green.jpg

 
您期望可口可乐的设计元素为红色。颜色与品牌同义,因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快,并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。

所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时,您可能会觉得自己在说“什么?”。

coke.jpg

 
它影响了品牌向前发展时的用户体验。颜色是品牌塑造中的重要元素,因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。

更改颜色或使用其他品牌,用户访问体验会受到影响,因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。
 
三、用户图案连接到颜色

您是否注意到有多少网站使用红色或橙色按钮?

这是有原因的。与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到,理解并希望与可单击或可点击元素进行互动,因为他们在视觉上立即知道他们对该元素的期望。

用户体验的关键部分是为用户提供轻松的互动机会,使他们享受并理解。
 

cruise.jpg


Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同,但是如何交互却没有什么问题。颜色将用户吸引到该按钮。
 

bluez.jpg

 
四、提高转化率

在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。(它可能不是您期望的颜色。)

当按钮或链接的颜色与设计的其余部分形成鲜明对比时,转换率往往会增加。因此,当您要使用品牌调色板时,选择对比色是产生有助于整体用户体验的转化的关键。

请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击?(原始颜色为蓝色。)

issey.gif

 
五、为所有用户提供可访问性

最后,颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。

颜色会影响用户体验,因为它可以使设计不可访问。

为了使每个人都能充分理解设计并与内容互动,他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”(WCAG 2.1)的调色板和对比度,可以确保每个用户都能理解您的颜色选择。

使用色盲过滤器(例如下面的比较中的过滤器)可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性?

craft.jpg


dew.jpg

 
结论

将颜色视为一种工具,可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。

找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。A / B颜色测试可能是一个有价值的工具。

值得关注的 10 个UI 设计趋势

寇老师 发表了文章 • 0 个评论 • 1587 次浏览 • 2019-09-25 16:57 • 来自相关话题

创意动画

1. 品牌加载
公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。
 
2. 图标动画
微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。
最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。
 
留白分隔

在 UI 界面中,最常见的分隔方式是用细线对模块进行划分,但随着设计重心趋向简约,注重内容本身,传统的分隔线方式就略显多余。
根据格式塔亲密原则,通过留白控制间距大小,可以清晰地划分模块层级,同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。
 
融入插图

1. 品牌形象插画
一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象,包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。
从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的 ID。
 
2. 3D插画
随着软件技术的提升,3D 插画在这几年中大受欢迎,很多应用都使用 3D 渲染产品,如:星巴克、Keep、毒App 等等,因为它真实立体,有着更高的转化率。
 
圆角卡片

圆角代表友好、亲和力,而卡片模块化的布局更为清晰、有效、整洁。
在上周的微信改版《微信 7.0.5 发布:9个细节提升体验》的文章中,我讲到了订阅号的推送文章去掉了标题栏的背景,卡片变得更加简洁。另外,公众号详情页由原先的列表式,改成了圆角卡片式,弹窗也由直角改成圆角。
 
视频背景

长期以来,图像在视觉设计中起着至关重要的作用,而视频能够更直观的吸引用户,传达主要的思想。
在移动端中,视频主要用于登录页背景,一般可以是几秒钟的循环剪辑视频,它可以带来一种身临其境的体验感受。
 
轻提示

Toast 是一种轻量级的提示,作为用户操作后的反馈。UI 形态上从居中浮层,慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。
举一个反例,iOS 的调整音量提示,大范围的遮住了界面,特别是对正在玩游戏的用户非常不友好,直到 iOS 13 这个设计才被修改。
 
色彩平铺

随着扁平化设计和 Material Design 进一步占据主流趋势,简约的界面,明亮,大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。
 
注重内容

重内容、轻 UI,把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点,就是文字都是黑白灰,将彩色交给图片去传达,让用户关注内容即可。
 
AR

增强现实的技术,已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面,可预期到这种类型的 App 将会越来越多。

1. 地图导视界面
地图+AR,让你不再盯着二维平面上那个蓝色的点,而是现实世界中的箭头告诉你在哪个路口转向。
 
2. 表情贴纸
Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作,表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。
 
车载系统界面

随着 5G、车联网、人工智能、自动驾驶的发展,车载界面也越来越受重视了。
在今年的 Google I/O 开发者大会上,针对车载系统 Android Auto,推出了新的设计语言,它有着更好的可拓展性。在 UI 上,完全重新设计了导航栏,能够更轻松地访问应用、通知,和你的 Google 智能助理,最大限度的帮助驾驶者减少分心,将注意力集中在道路上。
此外,还开发了新的系统小部件,在使用地图进行导航时,仍然可以一键控制音乐应用,或者正在进行的电话,同时在屏幕上保持地图的完整视图。
 
总结

UI 设计的趋势除了侧重内容和情感之外,还会根据不同设备载体、新的技术(3D、AR)而变化。但归根结底还是以人为本,借用 Adobe 设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求,用户的需求,打造真正人性化,多元化与包容性的设计。
  查看全部
创意动画

1. 品牌加载
公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。
 
2. 图标动画
微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。
最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。
 
留白分隔

在 UI 界面中,最常见的分隔方式是用细线对模块进行划分,但随着设计重心趋向简约,注重内容本身,传统的分隔线方式就略显多余。
根据格式塔亲密原则,通过留白控制间距大小,可以清晰地划分模块层级,同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。
 
融入插图

1. 品牌形象插画
一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象,包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。
从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的 ID。
 
2. 3D插画
随着软件技术的提升,3D 插画在这几年中大受欢迎,很多应用都使用 3D 渲染产品,如:星巴克、Keep、毒App 等等,因为它真实立体,有着更高的转化率。
 
圆角卡片

圆角代表友好、亲和力,而卡片模块化的布局更为清晰、有效、整洁。
在上周的微信改版《微信 7.0.5 发布:9个细节提升体验》的文章中,我讲到了订阅号的推送文章去掉了标题栏的背景,卡片变得更加简洁。另外,公众号详情页由原先的列表式,改成了圆角卡片式,弹窗也由直角改成圆角。
 
视频背景

长期以来,图像在视觉设计中起着至关重要的作用,而视频能够更直观的吸引用户,传达主要的思想。
在移动端中,视频主要用于登录页背景,一般可以是几秒钟的循环剪辑视频,它可以带来一种身临其境的体验感受。
 
轻提示

Toast 是一种轻量级的提示,作为用户操作后的反馈。UI 形态上从居中浮层,慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。
举一个反例,iOS 的调整音量提示,大范围的遮住了界面,特别是对正在玩游戏的用户非常不友好,直到 iOS 13 这个设计才被修改。
 
色彩平铺

随着扁平化设计和 Material Design 进一步占据主流趋势,简约的界面,明亮,大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。
 
注重内容

重内容、轻 UI,把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点,就是文字都是黑白灰,将彩色交给图片去传达,让用户关注内容即可。
 
AR

增强现实的技术,已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面,可预期到这种类型的 App 将会越来越多。

1. 地图导视界面
地图+AR,让你不再盯着二维平面上那个蓝色的点,而是现实世界中的箭头告诉你在哪个路口转向。
 
2. 表情贴纸
Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作,表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。
 
车载系统界面

随着 5G、车联网、人工智能、自动驾驶的发展,车载界面也越来越受重视了。
在今年的 Google I/O 开发者大会上,针对车载系统 Android Auto,推出了新的设计语言,它有着更好的可拓展性。在 UI 上,完全重新设计了导航栏,能够更轻松地访问应用、通知,和你的 Google 智能助理,最大限度的帮助驾驶者减少分心,将注意力集中在道路上。
此外,还开发了新的系统小部件,在使用地图进行导航时,仍然可以一键控制音乐应用,或者正在进行的电话,同时在屏幕上保持地图的完整视图。
 
总结

UI 设计的趋势除了侧重内容和情感之外,还会根据不同设备载体、新的技术(3D、AR)而变化。但归根结底还是以人为本,借用 Adobe 设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求,用户的需求,打造真正人性化,多元化与包容性的设计。
 

细节决定成败

寇老师 发表了文章 • 0 个评论 • 1494 次浏览 • 2019-09-16 09:34 • 来自相关话题

我们常说“细节决定成败”,有些界面会让人觉得不精致,缺细节,而这些细节又包括哪些呢?如何去深入呢?
界面元素的对齐,我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意摆放的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情。
像素精确,虽然现在的分辨率越来越高,但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
界面光源的一致性,一致性是个很大的课题,应该能写一篇论文那么长,细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果,那正文就应该避免用深色的文字向上投深色的阴影
图标面积的一致性,这也是一个一直难以避免的问题,而且有很多主观成分,最好的方法是设计的时候放到实际屏幕上以较远的距离查看,是不是有哪些会特别轻或特别重,然后再去调整尺寸
文案,虽然这不是直接的界面设计元素,但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
别直接使用 Windows 自带宋体 / 黑体里的英文!!!这个不解释
谨慎地使用高饱和度颜色、大差别渐变,我们 GUI 设计师总喜欢把自己当做艺术家,即使 GUI 真算艺术那也是限制最大的一门艺术(天朝的电影、电视剧不算。。。),大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥,所以一些醒目出跳的颜 色和渐变使用起来要比较小心,否则很容易产生“俗气”的感觉
适当的留白,留白是个很好的东西,尤其是当老板 / 客户 / PM 要求你做一些“大气”的设计时候能成为一个很好的说辞,但是留白同时也很难掌握度,过度的留白有时候会起到反作用,让我们的作品看起来没有细节、内容空 洞。就跟那些学画画的同学在电脑上画图经常水平镜像检查画面一样,有时候我也会把做到一半的设计去色、然后反白,看看那时候画面里的黑色会不会产生一种令 人恐怖的感觉(好吧,我承认我是个很感性的同学,很多设计思路和方法都不够科学)。。。
其实这些问题罗列一下很容易,但是日常工作当中要做到真的是很难,我们大家一起共勉吧~ 查看全部
我们常说“细节决定成败”,有些界面会让人觉得不精致,缺细节,而这些细节又包括哪些呢?如何去深入呢?
界面元素的对齐,我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意摆放的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情。
像素精确,虽然现在的分辨率越来越高,但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
界面光源的一致性,一致性是个很大的课题,应该能写一篇论文那么长,细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果,那正文就应该避免用深色的文字向上投深色的阴影
图标面积的一致性,这也是一个一直难以避免的问题,而且有很多主观成分,最好的方法是设计的时候放到实际屏幕上以较远的距离查看,是不是有哪些会特别轻或特别重,然后再去调整尺寸
文案,虽然这不是直接的界面设计元素,但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
别直接使用 Windows 自带宋体 / 黑体里的英文!!!这个不解释
谨慎地使用高饱和度颜色、大差别渐变,我们 GUI 设计师总喜欢把自己当做艺术家,即使 GUI 真算艺术那也是限制最大的一门艺术(天朝的电影、电视剧不算。。。),大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥,所以一些醒目出跳的颜 色和渐变使用起来要比较小心,否则很容易产生“俗气”的感觉
适当的留白,留白是个很好的东西,尤其是当老板 / 客户 / PM 要求你做一些“大气”的设计时候能成为一个很好的说辞,但是留白同时也很难掌握度,过度的留白有时候会起到反作用,让我们的作品看起来没有细节、内容空 洞。就跟那些学画画的同学在电脑上画图经常水平镜像检查画面一样,有时候我也会把做到一半的设计去色、然后反白,看看那时候画面里的黑色会不会产生一种令 人恐怖的感觉(好吧,我承认我是个很感性的同学,很多设计思路和方法都不够科学)。。。
其实这些问题罗列一下很容易,但是日常工作当中要做到真的是很难,我们大家一起共勉吧~

完善的品牌识别和网络解决方案

刘宇昆 发表了文章 • 0 个评论 • 2178 次浏览 • 2019-09-15 20:10 • 来自相关话题

Hannes Ahremark是设计工作室Studio Ahremar的设计工作室,位于瑞典哥德堡,旨在创造具有概念深度和现代视觉效果的复杂设计解决方案。根据Hannes在Behance上分享的项目,您可以证明他们保持多少目标,以提供真正令人敬畏的产品,在这种情况下,一个品牌标识和响应网站Limitato,一个致力于将时尚世界与时尚世界融为一体的时尚品牌艺术世界。 

尊重艺术家并保持其原创作品的真实性是Limitato业务的核心。Limitato与世界上一些最杰出的艺术家和摄影师合作,他们使用精选作品并将其转换为“限量可穿戴艺术”。 
 
Limitato来到Studio Ahremark,提供全面的视觉识别和网络解决方案,使其与其他“常规”时尚品牌区别开来,并强调他们对美术的承诺。 
 
该解决方案是一个网站,能够毫不费力地容纳艺术和时尚,而不会感到双面。这是通过创建一个将艺术家,他们的艺术和服装联系在一起的排版系统来完成的。此外,该网站还有一个主题引擎,可以根据要显示的艺术品创建不同的情绪和布局。
 
品牌识别与网页设计
 


















































  查看全部
Hannes Ahremark是设计工作室Studio Ahremar的设计工作室,位于瑞典哥德堡,旨在创造具有概念深度和现代视觉效果的复杂设计解决方案。根据Hannes在Behance上分享的项目,您可以证明他们保持多少目标,以提供真正令人敬畏的产品,在这种情况下,一个品牌标识和响应网站Limitato,一个致力于将时尚世界与时尚世界融为一体的时尚品牌艺术世界。 

尊重艺术家并保持其原创作品的真实性是Limitato业务的核心。Limitato与世界上一些最杰出的艺术家和摄影师合作,他们使用精选作品并将其转换为“限量可穿戴艺术”。 
 
Limitato来到Studio Ahremark,提供全面的视觉识别和网络解决方案,使其与其他“常规”时尚品牌区别开来,并强调他们对美术的承诺。 
 
该解决方案是一个网站,能够毫不费力地容纳艺术和时尚,而不会感到双面。这是通过创建一个将艺术家,他们的艺术和服装联系在一起的排版系统来完成的。此外,该网站还有一个主题引擎,可以根据要显示的艺术品创建不同的情绪和布局。
 
品牌识别与网页设计
 

1.jpg


2.jpg


3.jpg


4.jpg


5.jpg


6.jpg


7.jpg


8.jpg


9.jpg


10.jpg

 

设计领域里的数字之美

寇老师 发表了文章 • 0 个评论 • 1576 次浏览 • 2019-09-12 16:54 • 来自相关话题

比例关系是设计时必须要考虑的元素之一,无论在尺寸、空间还是颜色上,比例和谐与否会影响设计元素之间的关系。比例可以创建视觉层次,也可以产生一种张力或一种和谐感。纵观设计历史,运用比例进行创作一直是一个创造性的方法。一些体系如黄金比例和三分法将结构带入到设计中,创造了一种和谐感,并确保了平衡和连贯性。品牌形象设计和版式设计是把比例应用到设计中的主要领域。
 
黄金比例黄金比又称黄金律,是指事物各部分间一定的数学比例关系,即将整体一分为二,较大部分与较小部分之比等于整体与较大部分之比,其比值约为1:0.618,即长段为全段的0.618。0.618是被公认为最具有审美意义的比例数字。
那黄金分割线到底是个什么东西呢。它在什么位置?它在画面中的什么地方?
有一条线条,如果我们从中切一段,如果左边是0.618这么一个比列,右边是1这么一个比例。
如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。

三分线(黄金比例的衍生)
我们还有个困难,那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说,我们有一种简化黄金风格线的做法?就是三分线。
什么意思呢?三分线就是均匀的把长方形的长和宽切三段,均匀的砍三段,每个方格都是一样大小。

白银比例
根号矩形具有特殊性质,由√2矩形开始可以无限地衍生出√3、√4、√5、√6等矩形,同时在这些矩形内部又可以分割出无限的等比矩形。
白银比例 √2 ≈ 1.414

青铜比例
因为根号矩形的等比性和可无限分割型,所以在分割构图中和黄金矩形一样,能产生大量和谐的组合。
青铜比例 √3 ≈ 1.732

斐波那契数列(黄金比例的衍生)
斐波那契数列是由意大利数学家奥纳多·斐波那契在1202年出版《算盘全书》中提出。这组数列的数字为1、1、2、3、5、8、13、21、34…从第三位开始,每一个数都是由前两位相加得出。而这个数列的比例形式非常接近黄金比例,所以又称“黄金分割数列”。
斐波那契数列(FibonacciSequence)数列是这样一个数列:
1、1、2、3、5、8、13、21、34、55、89…

等差数列
等差数列是最常见数列的一种,如果一个数列从第二项起,每一项与它前一项的差等于同一个常数,这个数列就叫作等差数列。比如1、3、5、7、9、11、13…

等比数列
如果一个数列从第二项起,每一项与它前一项的比值等于同一个常数,这个数列就叫作等比数列。比如1、2、4、8、16、32、64…

卢卡斯数列
卢卡斯数列:1、 3、 4、 7、 11、18、 29、 47、 76、 123…
斐波那契数列和卢卡斯数列具有相同的性质:从第三项开始,每一项都等于前两项之和,我们称之为斐波那契—卢卡斯递推。

卡特兰数
卡特兰数是一种经典的组合数,经常出现在各种计算中,其前几项为 : 1、2、5、14、42、132、 429、1430、4862…

帕多瓦数列
帕多瓦数列是:1,1,1,2,2,3,4,5,7,9,12,16,21,28,37,49,65,86,114,151……
它从第四项开始,每一项都是前面2项与前面3项的和。即x=(x-2)+(x-3),x为项的序数(x>4)。
它和斐波拉契数列非常相似,稍有不同的是:每个数都是跳过它前面的那个数,并把前面的两个数相加而得出的

雷诺数列
雷诺数列是把10分成5份,或10份、20份、40份的一个方法,就是应用在分割比例上,二是应用在字号比例大小选择上。从数学上讲就是把10分别开5次方、10次方、20次方和40次方。我们以5次方为例分别是:10%、16%、25%、40%、63%、100%。

勒·柯布西耶 — 模度(黄金比例的衍生)
1948年,经过7年的理论研究与试验,柯布出版了《模度-合乎人体比例的、通用与建筑和机械的和谐尺度》一书,详细阐述了模度理论的开端、发展、完善到实际应用。此书的出版标志着模度理论的正式建立。
比较成熟的模度系统的数字推导起始于以身高为6英尺(约183厘米)人作为标准,结合斐波那契数列分析。对人体的分析得出的结论包括以下几个关键数字:举手高(226厘米),身高(183厘米),脐高(113厘米)和垂手高(86厘米)。这一系列数字都可以利用黄金分割比和斐波那契数列结合在一起:43=70×0.618,70=113×0.618,113=183×0.618;43+70=113,70+113=183,43+70+113=226。
柯布还借助“模度”的比例优势对文艺复兴的几何不变性研究展开了批判。他认为对正多面体、星形体及正多边形的研究,背离了基于视觉判断的建筑学的本质,因为人眼对不同距离的事物的认知并不是均匀、等分的而是渐变的

三角函数特殊角
特殊三角函数值一般指在0,30°,45°,60°,90°,180°角下的正余弦值。
我们在设计中会把360°角度会进行细分,以15°角为一个单位进行递增归纳我们常用的角度值:0°、15°、30°、45°、60°、90°、120°、135°、150°、180°、270°
我们在设计中在颜色的色相就是用360°来衡量的,设计中经常使用不透明度配色法就是把颜色不透明度10等分,在产品设计中我们确定主色的颜色后,可以根据主色的色相的角度值比如每次增加15°来找到合适的辅助色和点缀色。
最近两年流行的2.5d插画风格就是会基于30°倾斜角去统一轴的方向。
品牌设计中也是一样,很多都需要线条辅助。线的角度有0°、15°、30°、45°、60°、90°帮助设计的更加合理规范。

8点网格
建立8点为一个单位的网格,所有的元素尺寸都是8的倍数。使用 8 的增量来确定页面上元素的大小和空间。界面设计中的边距或填充都是 8 的增量(倍数)
如果你用8作为设计的最小单位,你可以很方便的缩小的你的设计尺寸,8/2=4,4/2=2,2/2=1。

图片常用尺寸
在UI界面设计中我们经常需要使用不同尺寸的图片,由于移动端界面大小有限,在大量界面设计中总结了图片尺寸的比例有1:1、2:3、4:3、16:9、16:10。
Airbnb移动端的界面中使用了大量1:1、3:2、13:21等尺寸大小的图片,有了基于黄金比例的图片尺寸让界面排版看上去更加合理舒服。

费希纳矩形
19世纪中叶,德国心理学家费希纳曾经做过一次别出心裁的试验,他召开一次“矩形展览会”,会上展出了他精心制作的各种矩形,并要求参观者投票选择各种自认为最美的矩形,结果以下四种矩形入选(宽×长):(1)5×8;(2)8×13;(3)13×21;(4)21×34。
因为5∶8=0.625,8∶13≈0.615,13∶21≈0.619,21∶34≈0.618。由此可见,它们的宽与长的比都接近于0.618,因此这些矩形可近似地看作黄金矩形,给人以美的感受。
 
  查看全部
比例关系是设计时必须要考虑的元素之一,无论在尺寸、空间还是颜色上,比例和谐与否会影响设计元素之间的关系。比例可以创建视觉层次,也可以产生一种张力或一种和谐感。纵观设计历史,运用比例进行创作一直是一个创造性的方法。一些体系如黄金比例和三分法将结构带入到设计中,创造了一种和谐感,并确保了平衡和连贯性。品牌形象设计和版式设计是把比例应用到设计中的主要领域。
 
黄金比例黄金比又称黄金律,是指事物各部分间一定的数学比例关系,即将整体一分为二,较大部分与较小部分之比等于整体与较大部分之比,其比值约为1:0.618,即长段为全段的0.618。0.618是被公认为最具有审美意义的比例数字。
那黄金分割线到底是个什么东西呢。它在什么位置?它在画面中的什么地方?
有一条线条,如果我们从中切一段,如果左边是0.618这么一个比列,右边是1这么一个比例。
如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。

三分线(黄金比例的衍生)
我们还有个困难,那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说,我们有一种简化黄金风格线的做法?就是三分线。
什么意思呢?三分线就是均匀的把长方形的长和宽切三段,均匀的砍三段,每个方格都是一样大小。

白银比例
根号矩形具有特殊性质,由√2矩形开始可以无限地衍生出√3、√4、√5、√6等矩形,同时在这些矩形内部又可以分割出无限的等比矩形。
白银比例 √2 ≈ 1.414

青铜比例
因为根号矩形的等比性和可无限分割型,所以在分割构图中和黄金矩形一样,能产生大量和谐的组合。
青铜比例 √3 ≈ 1.732

斐波那契数列(黄金比例的衍生)
斐波那契数列是由意大利数学家奥纳多·斐波那契在1202年出版《算盘全书》中提出。这组数列的数字为1、1、2、3、5、8、13、21、34…从第三位开始,每一个数都是由前两位相加得出。而这个数列的比例形式非常接近黄金比例,所以又称“黄金分割数列”。
斐波那契数列(FibonacciSequence)数列是这样一个数列:
1、1、2、3、5、8、13、21、34、55、89…

等差数列
等差数列是最常见数列的一种,如果一个数列从第二项起,每一项与它前一项的差等于同一个常数,这个数列就叫作等差数列。比如1、3、5、7、9、11、13…

等比数列
如果一个数列从第二项起,每一项与它前一项的比值等于同一个常数,这个数列就叫作等比数列。比如1、2、4、8、16、32、64…

卢卡斯数列
卢卡斯数列:1、 3、 4、 7、 11、18、 29、 47、 76、 123…
斐波那契数列和卢卡斯数列具有相同的性质:从第三项开始,每一项都等于前两项之和,我们称之为斐波那契—卢卡斯递推。

卡特兰数
卡特兰数是一种经典的组合数,经常出现在各种计算中,其前几项为 : 1、2、5、14、42、132、 429、1430、4862…

帕多瓦数列
帕多瓦数列是:1,1,1,2,2,3,4,5,7,9,12,16,21,28,37,49,65,86,114,151……
它从第四项开始,每一项都是前面2项与前面3项的和。即x=(x-2)+(x-3),x为项的序数(x>4)。
它和斐波拉契数列非常相似,稍有不同的是:每个数都是跳过它前面的那个数,并把前面的两个数相加而得出的

雷诺数列
雷诺数列是把10分成5份,或10份、20份、40份的一个方法,就是应用在分割比例上,二是应用在字号比例大小选择上。从数学上讲就是把10分别开5次方、10次方、20次方和40次方。我们以5次方为例分别是:10%、16%、25%、40%、63%、100%。

勒·柯布西耶 — 模度(黄金比例的衍生)
1948年,经过7年的理论研究与试验,柯布出版了《模度-合乎人体比例的、通用与建筑和机械的和谐尺度》一书,详细阐述了模度理论的开端、发展、完善到实际应用。此书的出版标志着模度理论的正式建立。
比较成熟的模度系统的数字推导起始于以身高为6英尺(约183厘米)人作为标准,结合斐波那契数列分析。对人体的分析得出的结论包括以下几个关键数字:举手高(226厘米),身高(183厘米),脐高(113厘米)和垂手高(86厘米)。这一系列数字都可以利用黄金分割比和斐波那契数列结合在一起:43=70×0.618,70=113×0.618,113=183×0.618;43+70=113,70+113=183,43+70+113=226。
柯布还借助“模度”的比例优势对文艺复兴的几何不变性研究展开了批判。他认为对正多面体、星形体及正多边形的研究,背离了基于视觉判断的建筑学的本质,因为人眼对不同距离的事物的认知并不是均匀、等分的而是渐变的

三角函数特殊角
特殊三角函数值一般指在0,30°,45°,60°,90°,180°角下的正余弦值。
我们在设计中会把360°角度会进行细分,以15°角为一个单位进行递增归纳我们常用的角度值:0°、15°、30°、45°、60°、90°、120°、135°、150°、180°、270°
我们在设计中在颜色的色相就是用360°来衡量的,设计中经常使用不透明度配色法就是把颜色不透明度10等分,在产品设计中我们确定主色的颜色后,可以根据主色的色相的角度值比如每次增加15°来找到合适的辅助色和点缀色。
最近两年流行的2.5d插画风格就是会基于30°倾斜角去统一轴的方向。
品牌设计中也是一样,很多都需要线条辅助。线的角度有0°、15°、30°、45°、60°、90°帮助设计的更加合理规范。

8点网格
建立8点为一个单位的网格,所有的元素尺寸都是8的倍数。使用 8 的增量来确定页面上元素的大小和空间。界面设计中的边距或填充都是 8 的增量(倍数)
如果你用8作为设计的最小单位,你可以很方便的缩小的你的设计尺寸,8/2=4,4/2=2,2/2=1。

图片常用尺寸
在UI界面设计中我们经常需要使用不同尺寸的图片,由于移动端界面大小有限,在大量界面设计中总结了图片尺寸的比例有1:1、2:3、4:3、16:9、16:10。
Airbnb移动端的界面中使用了大量1:1、3:2、13:21等尺寸大小的图片,有了基于黄金比例的图片尺寸让界面排版看上去更加合理舒服。

费希纳矩形
19世纪中叶,德国心理学家费希纳曾经做过一次别出心裁的试验,他召开一次“矩形展览会”,会上展出了他精心制作的各种矩形,并要求参观者投票选择各种自认为最美的矩形,结果以下四种矩形入选(宽×长):(1)5×8;(2)8×13;(3)13×21;(4)21×34。
因为5∶8=0.625,8∶13≈0.615,13∶21≈0.619,21∶34≈0.618。由此可见,它们的宽与长的比都接近于0.618,因此这些矩形可近似地看作黄金矩形,给人以美的感受。
 
 

什么是造字工房非商业字体

刘宇昆 发表了文章 • 0 个评论 • 2102 次浏览 • 2019-08-09 17:05 • 来自相关话题

造字工房宣布从2054年4月1日起个人正版字体全部免费。现如今,造字工房遵守承诺,已将所有个人(非商用)字体产品于官方网站免费提供下载。
 
汉字字体字形的设计也正面临革新发展。造字工房的成立,既是担负这份使命与责任,专注为客户在品牌推广方面提升视觉优势,从而直接影响企业品牌的价值提升。努力帮助视觉设计师在设计过程中有更多的优秀字体选择,使其更快更好的完成设计项目。
 
中国设计师的生存从业环境一直不易,设计资源(尤其汉字字体)更是匮乏,造字工房即便逆境生长,也甘愿与大家一起分享我们的劳动成果,共同承担商业版权环境之责任。造字工房的个人(非商业应用)正版字体产品,是不应用于任何商业的使用行为!

为了我们设计从业环境得以改善和良性发展,鼓励造字工房对汉字字体的创新与发展做出贡献,请以实际行动支持我们。只有您的支持和鼓励,才能使我们进步。
 

                                                             



 
汉字字体的设计开发工作一直是不太被大众关注和了解的行业,而应用又无处不在。汉字字体字数繁多,结构复杂,每一款字体的设计和开发都是一项工程,更是字体设计师们艰苦努力的结晶,请您在使用字库字体的同时支持正版,从而帮助字体设计从业者为社会提供更多更优秀的汉字字体,丰富汉字之美。
 
 
  查看全部
造字工房宣布从2054年4月1日起个人正版字体全部免费。现如今,造字工房遵守承诺,已将所有个人(非商用)字体产品于官方网站免费提供下载。
 
汉字字体字形的设计也正面临革新发展。造字工房的成立,既是担负这份使命与责任,专注为客户在品牌推广方面提升视觉优势,从而直接影响企业品牌的价值提升。努力帮助视觉设计师在设计过程中有更多的优秀字体选择,使其更快更好的完成设计项目。
 
中国设计师的生存从业环境一直不易,设计资源(尤其汉字字体)更是匮乏,造字工房即便逆境生长,也甘愿与大家一起分享我们的劳动成果,共同承担商业版权环境之责任。造字工房的个人(非商业应用)正版字体产品,是不应用于任何商业的使用行为!

为了我们设计从业环境得以改善和良性发展,鼓励造字工房对汉字字体的创新与发展做出贡献,请以实际行动支持我们。只有您的支持和鼓励,才能使我们进步。
 

                                                             
aaa.jpg

 
汉字字体的设计开发工作一直是不太被大众关注和了解的行业,而应用又无处不在。汉字字体字数繁多,结构复杂,每一款字体的设计和开发都是一项工程,更是字体设计师们艰苦努力的结晶,请您在使用字库字体的同时支持正版,从而帮助字体设计从业者为社会提供更多更优秀的汉字字体,丰富汉字之美。
 
 
 

在UI设计中有效利用空白区域

刘宇昆 发表了文章 • 0 个评论 • 2265 次浏览 • 2019-08-02 13:32 • 来自相关话题

白色空间是设计中最被忽视的部分之一,通常是UX / UI设计人员最有效的解决方案。

在我的设计生涯开始时,我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而,当出现挑战时期时,有效利用空白区域对于解决问题至关重要。

然而,正确使用白色空间是非常必要的,否则设计最终会看起来非专业和简单。

                                                                 




什么是白色空间?
白色空间是布局之间的空白区域,段落中的线条,多个设计元素之间的空白等。这些元素可以是图像,排版,插图,图标等。白色空间不是指空白色背景,也不一定是白色,它可以是任何颜色或图案,因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域,那么让我们深入了解它将如何影响可用性和用户界面。
 
1、改善你的视觉层次结构

                                                                 




将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则,最重要的信息必须位于顶部,大胆且易于查看,而底部最不重要的信息,在较小的框中,不太集中。这很容易理解,甚至可以在您的设计中展示。
但是,在上面的例子中,左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构,并导致用户混淆或不感兴趣以吸收给定的信息集。
因此,示例显示了白色空间如何使设计更易于扫描,从而更容易理解。
 
 2.帮助用户关注重要方面
 

                                                                   



 

负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。

在非专业术语中,宏观空间是指设计中较大的白色空间段(页眉,页脚和网站边距之间的空间),而微空间指的是不同UI元素之间的较小空间(行和段落之间的空间)

如果您希望将用户的注意力集中在说明图而不是文本上,则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中,在左侧,插图与其他元素混合,禁止用户吸收适当的信息,而在右侧,插图享有白色空间,允许用户专注于相关插图,而后者又链接提供的信息。
 
3、找到合适的平衡点
                             
                                                                   



 
白色空间有多少白色空间?在设计领域经常提出的一个问题。对此的简单回答是,允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。

在上面的例子中,右侧的图像爆炸,信息使其势不可挡。虽然右侧的图像是舒缓的,但能够在不压倒用户的情况下实现理解。
 
4、保持一致

                                                                 




一致性是白色空间的关键。设计中的每条信息都是一致的,白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。

利用率的不一致将导致突然的用户界面。

示例中,不一致的白色间距使得它看起来像两组照片,一组在顶部,另一组在底部。在右侧图像中,所有6张照片看起来都是一致的,并且是1套照片的一部分。
 
5、创造性地适应元素中的空白区域

                                                           




白色空间的创造性利用是一项技能,可以使元素看起来更加美观,并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来,而不是利用白色空间来改善视觉吸引力,而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx,其中白色空间用于显示与品牌使命产生共鸣的箭头。

总之,白色空间就像艺术一样,你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章,它帮助您重新思考用户界面设计中的白色间距原则。

                      
 
 
  查看全部
白色空间是设计中最被忽视的部分之一,通常是UX / UI设计人员最有效的解决方案。

在我的设计生涯开始时,我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而,当出现挑战时期时,有效利用空白区域对于解决问题至关重要。

然而,正确使用白色空间是非常必要的,否则设计最终会看起来非专业和简单。

                                                                 
1.jpg


什么是白色空间?
白色空间是布局之间的空白区域,段落中的线条,多个设计元素之间的空白等。这些元素可以是图像,排版,插图,图标等。白色空间不是指空白色背景,也不一定是白色,它可以是任何颜色或图案,因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域,那么让我们深入了解它将如何影响可用性和用户界面。
 
1、改善你的视觉层次结构

                                                                 
2.jpg


将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则,最重要的信息必须位于顶部,大胆且易于查看,而底部最不重要的信息,在较小的框中,不太集中。这很容易理解,甚至可以在您的设计中展示。
但是,在上面的例子中,左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构,并导致用户混淆或不感兴趣以吸收给定的信息集。
因此,示例显示了白色空间如何使设计更易于扫描,从而更容易理解。
 
 2.帮助用户关注重要方面
 

                                                                   
3.jpg

 

负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。

在非专业术语中,宏观空间是指设计中较大的白色空间段(页眉,页脚和网站边距之间的空间),而微空间指的是不同UI元素之间的较小空间(行和段落之间的空间)

如果您希望将用户的注意力集中在说明图而不是文本上,则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中,在左侧,插图与其他元素混合,禁止用户吸收适当的信息,而在右侧,插图享有白色空间,允许用户专注于相关插图,而后者又链接提供的信息。
 
3、找到合适的平衡点
                             
                                                                   
4.jpg

 
白色空间有多少白色空间?在设计领域经常提出的一个问题。对此的简单回答是,允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。

在上面的例子中,右侧的图像爆炸,信息使其势不可挡。虽然右侧的图像是舒缓的,但能够在不压倒用户的情况下实现理解。
 
4、保持一致

                                                                 
5.jpg


一致性是白色空间的关键。设计中的每条信息都是一致的,白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。

利用率的不一致将导致突然的用户界面。

示例中,不一致的白色间距使得它看起来像两组照片,一组在顶部,另一组在底部。在右侧图像中,所有6张照片看起来都是一致的,并且是1套照片的一部分。
 
5、创造性地适应元素中的空白区域

                                                           
7.jpg


白色空间的创造性利用是一项技能,可以使元素看起来更加美观,并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来,而不是利用白色空间来改善视觉吸引力,而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx,其中白色空间用于显示与品牌使命产生共鸣的箭头。

总之,白色空间就像艺术一样,你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章,它帮助您重新思考用户界面设计中的白色间距原则。

                      
 
 
 

快速改善UI视觉体验的7个小技巧

寇老师 发表了文章 • 0 个评论 • 577 次浏览 • 2019-07-29 09:34 • 来自相关话题

也许你是个新手设计师,也许你是个有着丰富开发经验的开发者,但是有需求让自己设计的网页和UI看起来更像那么一回事,至少看起来不是一个外行的手笔。

那么今天的文章应该能够帮到你。在UI的设计过程中,有很多技巧并不需要很深厚的设计知识,但是它们能让你的UI和网页界面看起来有明显的提升。改进设计这件事情,经验和技巧往往能让人少走弯路。

闲话少叙,下面我们具体看看。

1. 按钮色彩凸显重要性
在给用户提供多个选择的时候,可以通过色彩所传递的情绪是积极还是消极的,来简单快速地进行设计。
 
实际上,红色和绿色按钮的色彩含义,已经横跨物理世界和数字设计领域,我们每天在很多实体产品上也能看到类似的设计,包括交通上的红绿灯,警告标识,以及实体按钮。

绿色表示通行,红色表示禁止。如果用户需要购买一个漏斗,你希望感兴趣的用户赶紧点击,而不是取消。

另外,如果你的网站或者 APP 涉及到重要性不同的若干交互,除了按钮都要标识出相应的文本标签内容以外,还可以借助色彩填充与否来进一步区分层级结构。
 
有色彩填充的按钮、幽灵按钮(无色彩填充、有边框)以及无边框无填充按钮来区分。 而在少数情况下,对于系统有重要影响的、破坏性的或者限制性的按钮,也应该突出显示,但是可以使用红色来进行强调和警告。这个时候,相对的「非负面」的按钮则被视作为重要性较低的操作。
 
简而言之,实际上用户用来区分按钮的核心靠的是感知而非复杂逻辑判断,设计的基本规则在上面,但是更重要的是要基于情绪和感知来进行设计。
 
2. 用字重和明暗来区分层级

尤其是在构建文本内容的视觉层级的时候,可用到的属性很多,只使用大小差异来构建就显得过于单一了。

在很多时候,可以借助色彩、字重、明暗来进行区分。我们可以让更重要的文本更大、字体更粗、色彩更加鲜明,或者使用更深的黑色来呈现。
 
3. 用留白来隔离元素

两个元素互不相关,如果想将它们分隔开来,使用分割线似乎是一件理所当然的事情?当然可以,但是这种方式真的是非常过时且笨拙的一种呈现方式。你需要的是更好、更优雅、更贴合当下的一种呈现方式。

不是简单地使用分割线,而是使用留白,或者说负空间来间隔就可以了。分割线在很大程度上是丑陋且难以驾驭的视觉噪音,相对而言留白则好了很多。
 
多数情况下,删除分隔线条是比较快速的方法,当然更多的时候需要你适当地调整一下留白的大小。

使用分割线来分隔内容,不仅会让扫视页面花费更长的时间,而且增加的信息噪音会影响整体的层次结构。
 
4. 用阴影替代边框

想要凸显一些元素,并不一定需要依靠描边。使用阴影则可以起到同样的效果,单独使用则会显得更加整洁。描边+阴影则会显得过于杂乱。

使用相对不那么具有侵略性的小阴影无疑让效果更加轻松,看起来也不会突兀。
 
5. 用色条提升视觉调性

如果觉得内容区块过于单调,可以根据你的目的来强化这一区块的视觉属性。在内容区的一边加上色条能够在提升视觉属性的同时,赋予这一区块内容以情绪。

色条可以是单色的,也可以是渐变的,这取决于你想传达什么样的视觉体验。这个色条还可以具备良好的功能性。当然,这很大程度是用在相对比较素的页面上的,如果页面本身已经很花哨了,就不太用得上。
 
比如使用红色和绿色来标识不同的状态,也可以用色条来标识出被触发的 Tab 或者控件。
 
6. 用背景色区分区块

其实,同样是为了进行区分内容区块和层级,这个方法同样优雅而快速,几乎可以算是毫不费力的一种设计技巧。
 
为了区分两个不同区块的元素,简单地使用不同的背景来进行区分也可以,本质上,它采用的类似卡片式设计的思路——用不同的卡片来归类内容。

相对而言,使用有差异但是不那么显著的不同色块来作为背景,在保证整体整洁的同时,起到了区分的作用。
 
7. 「字」尽其用

谁不喜欢漂亮的字体呢?当然都喜欢,但是字体的功用其实各不相同。从呈现正文的强可读性文本,到装饰性极强的视觉化字体,各种不同的字体需要应对不同的功能。

简单看看几种不同类型的字体:

1. 衬线字体:Serif 本身就是衬线的意思,这样的字体字符的末尾通常是会有小的装饰性的衬线。衬线除了装饰性以外,还能强化字体的可读性。常见的衬线字体:Georgia,Times New Roman,Cambria。

2. 非衬线字体:也就是 Sans-Serif 字体,它相对而言更加现代,衬线被去掉之后,线条感更强,更加干净,也更加贴合数字时代的一些显示需求。常见的非衬线字体:Helvetica,Montserrat,Gotham。

人们通常会认为,衬线字体更加适宜长时间阅读,它也更多地运用在印刷品上。然而衬线字体的衬线和边角大多更加锐利,在一定程度上会被视作为视觉噪音。在屏幕分辨率尚且达不到要求的时代,衬线字体的显示问题很大。当然,如今屏幕分辨率提高起来之后,这个问题几乎不存在了,只是在小字号和低分辨率和小屏幕上,依然存在这个问题。

3. 手写字体:手写字体通常被认为是手写风格的字体,在呈现的时候,常常会有连写的笔画,更贴近传统的书写字体所呈现出来的效果。手写字体更加随意和有趣。常见的手写字体包括:Alex Brush,Great Vibes,Sofia。

4. 展示性字体:展示性字体是一个功能导向型的分类,通常指的是用来作为标题展示、用于海报、徽章等地方的字体,它们表现力更强,视觉特征更突出,直言不讳地说就是为了吸引用户的注意力。常见的展示性字体包括:Algerian,Curlz,Gigi,Umbra。
 
在网页设计中,绝大多数情况下都只会使用衬线字体和非衬线字体两种,在英文网站当中,通常会采用一种衬线字体+一种非衬线字体的搭配方式。注意,如果有不同粗细和字重的字体,使用同一字体族中字体为好。在中文当中,开源且可以免费商用的「思源黑体」和「思源宋体」是一个设计中非常常见的选择。

在进行视觉设计的时候,我坚持使用2种字体,极少会使用3种字体,后者最多会在强调视觉的商业或者艺术性项目当中使用,比如 Banner 和海报。

结语

我真心期望这样的小技巧能够帮你做出好的设计,无论你是设计师还是其他职业。很多时候,设计是灵活的,是基于感知的,有方法可供遵循的,尤其当你仔细观察一些现有的好设计,会发现有很多这样的小技巧。观察共性,仔细感知,总结经验,你也可以。 查看全部
也许你是个新手设计师,也许你是个有着丰富开发经验的开发者,但是有需求让自己设计的网页和UI看起来更像那么一回事,至少看起来不是一个外行的手笔。

那么今天的文章应该能够帮到你。在UI的设计过程中,有很多技巧并不需要很深厚的设计知识,但是它们能让你的UI和网页界面看起来有明显的提升。改进设计这件事情,经验和技巧往往能让人少走弯路。

闲话少叙,下面我们具体看看。

1. 按钮色彩凸显重要性
在给用户提供多个选择的时候,可以通过色彩所传递的情绪是积极还是消极的,来简单快速地进行设计。
 
实际上,红色和绿色按钮的色彩含义,已经横跨物理世界和数字设计领域,我们每天在很多实体产品上也能看到类似的设计,包括交通上的红绿灯,警告标识,以及实体按钮。

绿色表示通行,红色表示禁止。如果用户需要购买一个漏斗,你希望感兴趣的用户赶紧点击,而不是取消。

另外,如果你的网站或者 APP 涉及到重要性不同的若干交互,除了按钮都要标识出相应的文本标签内容以外,还可以借助色彩填充与否来进一步区分层级结构。
 
有色彩填充的按钮、幽灵按钮(无色彩填充、有边框)以及无边框无填充按钮来区分。 而在少数情况下,对于系统有重要影响的、破坏性的或者限制性的按钮,也应该突出显示,但是可以使用红色来进行强调和警告。这个时候,相对的「非负面」的按钮则被视作为重要性较低的操作。
 
简而言之,实际上用户用来区分按钮的核心靠的是感知而非复杂逻辑判断,设计的基本规则在上面,但是更重要的是要基于情绪和感知来进行设计。
 
2. 用字重和明暗来区分层级

尤其是在构建文本内容的视觉层级的时候,可用到的属性很多,只使用大小差异来构建就显得过于单一了。

在很多时候,可以借助色彩、字重、明暗来进行区分。我们可以让更重要的文本更大、字体更粗、色彩更加鲜明,或者使用更深的黑色来呈现。
 
3. 用留白来隔离元素

两个元素互不相关,如果想将它们分隔开来,使用分割线似乎是一件理所当然的事情?当然可以,但是这种方式真的是非常过时且笨拙的一种呈现方式。你需要的是更好、更优雅、更贴合当下的一种呈现方式。

不是简单地使用分割线,而是使用留白,或者说负空间来间隔就可以了。分割线在很大程度上是丑陋且难以驾驭的视觉噪音,相对而言留白则好了很多。
 
多数情况下,删除分隔线条是比较快速的方法,当然更多的时候需要你适当地调整一下留白的大小。

使用分割线来分隔内容,不仅会让扫视页面花费更长的时间,而且增加的信息噪音会影响整体的层次结构。
 
4. 用阴影替代边框

想要凸显一些元素,并不一定需要依靠描边。使用阴影则可以起到同样的效果,单独使用则会显得更加整洁。描边+阴影则会显得过于杂乱。

使用相对不那么具有侵略性的小阴影无疑让效果更加轻松,看起来也不会突兀。
 
5. 用色条提升视觉调性

如果觉得内容区块过于单调,可以根据你的目的来强化这一区块的视觉属性。在内容区的一边加上色条能够在提升视觉属性的同时,赋予这一区块内容以情绪。

色条可以是单色的,也可以是渐变的,这取决于你想传达什么样的视觉体验。这个色条还可以具备良好的功能性。当然,这很大程度是用在相对比较素的页面上的,如果页面本身已经很花哨了,就不太用得上。
 
比如使用红色和绿色来标识不同的状态,也可以用色条来标识出被触发的 Tab 或者控件。
 
6. 用背景色区分区块

其实,同样是为了进行区分内容区块和层级,这个方法同样优雅而快速,几乎可以算是毫不费力的一种设计技巧。
 
为了区分两个不同区块的元素,简单地使用不同的背景来进行区分也可以,本质上,它采用的类似卡片式设计的思路——用不同的卡片来归类内容。

相对而言,使用有差异但是不那么显著的不同色块来作为背景,在保证整体整洁的同时,起到了区分的作用。
 
7. 「字」尽其用

谁不喜欢漂亮的字体呢?当然都喜欢,但是字体的功用其实各不相同。从呈现正文的强可读性文本,到装饰性极强的视觉化字体,各种不同的字体需要应对不同的功能。

简单看看几种不同类型的字体:

1. 衬线字体:Serif 本身就是衬线的意思,这样的字体字符的末尾通常是会有小的装饰性的衬线。衬线除了装饰性以外,还能强化字体的可读性。常见的衬线字体:Georgia,Times New Roman,Cambria。

2. 非衬线字体:也就是 Sans-Serif 字体,它相对而言更加现代,衬线被去掉之后,线条感更强,更加干净,也更加贴合数字时代的一些显示需求。常见的非衬线字体:Helvetica,Montserrat,Gotham。

人们通常会认为,衬线字体更加适宜长时间阅读,它也更多地运用在印刷品上。然而衬线字体的衬线和边角大多更加锐利,在一定程度上会被视作为视觉噪音。在屏幕分辨率尚且达不到要求的时代,衬线字体的显示问题很大。当然,如今屏幕分辨率提高起来之后,这个问题几乎不存在了,只是在小字号和低分辨率和小屏幕上,依然存在这个问题。

3. 手写字体:手写字体通常被认为是手写风格的字体,在呈现的时候,常常会有连写的笔画,更贴近传统的书写字体所呈现出来的效果。手写字体更加随意和有趣。常见的手写字体包括:Alex Brush,Great Vibes,Sofia。

4. 展示性字体:展示性字体是一个功能导向型的分类,通常指的是用来作为标题展示、用于海报、徽章等地方的字体,它们表现力更强,视觉特征更突出,直言不讳地说就是为了吸引用户的注意力。常见的展示性字体包括:Algerian,Curlz,Gigi,Umbra。
 
在网页设计中,绝大多数情况下都只会使用衬线字体和非衬线字体两种,在英文网站当中,通常会采用一种衬线字体+一种非衬线字体的搭配方式。注意,如果有不同粗细和字重的字体,使用同一字体族中字体为好。在中文当中,开源且可以免费商用的「思源黑体」和「思源宋体」是一个设计中非常常见的选择。

在进行视觉设计的时候,我坚持使用2种字体,极少会使用3种字体,后者最多会在强调视觉的商业或者艺术性项目当中使用,比如 Banner 和海报。

结语

我真心期望这样的小技巧能够帮你做出好的设计,无论你是设计师还是其他职业。很多时候,设计是灵活的,是基于感知的,有方法可供遵循的,尤其当你仔细观察一些现有的好设计,会发现有很多这样的小技巧。观察共性,仔细感知,总结经验,你也可以。