首页

今天的扁平化设计中有哪些值得注意的要点?

周周

扁平化设计在过去的几年当中以惊人的速度发展起来,并且随着用户需求的变化而逐步进化。扁平化设计看似简单,但是其中分支多样,涉及到的技术多样,相关规范也都比较系统。

到现在,扁平化设计所探讨的核心已经从最初的标准化设计转向如何创造视觉焦点了,所以,目前的扁平化设计当中,值得注意的要点大多是围绕着这一需求来的。

太及时了!视觉设计师怎样让前端100%实现设计效果?

周周

编者按:今天的好文,总结了两位设计师的工作经验,内容干货不用多加描述,同为设计师,这个问题的答案,你一定想知道(附神器唷) >>>

酸梅干超人:首先,作为一个设计师,尤其是UI设计师,请跟我一起大声念:必须掌握前端切图流程!!

这可能意味着你得学会HTML+CSS,或者要长时间和IOS或者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么能去学码农的东西,设计人员对这些看似高深的源码有本能的畏惧和厌恶。无论你所在的公司在项目人员配置上如何贴心到位,但如果你自己没有掌握这些知识点,就不要妄想最后实现环节上能顺利收尾,因为你从出发点开始和程序员的认知就不对称,这些不对称是矛盾和偏差的根源。

让我们来举举例子:

如何快速有效的发散思维

资深UI设计者

想方案想的头大,一直在原地打转跳不出来?想了半天提出的方案,被老板说怎么没想到别的某某方案?有时虽然想出不少方案,但是实质在渐行渐远?

不是人人都有特别灵活的脑子 ,就算是灵活的脑子也不会无时无刻都灵感无限,那在我们面对思维瓶颈的时候,有没有方法可以帮助我们快速且有效的去拓展思维呢?

涨姿势!世界名牌是怎样选用字体的?

周周

编者按:@笔戈科技 :今天来见识下福布斯榜上各大世界企业是如何为它们的LOGO挑选字体的,有助于同学们了解衬线与非衬线字体在生活里的具体运用,等自己上手了思路也会更清晰,话不多说,来学习吧。

名牌之所以成为名牌,常常是由于企业的决策者能注意到诸多常人无心关注的细节。

比如,字体。选择合适的 Logo 字体,可以在最直接的视觉观感上传递品牌的信息,其重要程度不亚于文字本身。

所以,世界级品牌对于字体选择的严苛程度,往往是小企业无法想象的。下面我们一起来看看福布斯榜上的各大名牌企业都选用了什么字体,并观察一下其中的规律与趋势。

字体对网站也有关键的作用,不信看 >>> 《网站字体有多重要?它帮网站提高了38%的流量!》

人人都爱 Helvetica

相信没有人会对 Helvetica 的流行产生异议吧。在平面设计中,Helvetica 的通用性和普适性使其倍受喜爱,这种简洁、端正、优雅的字体,永远都是不会出错的选择。

于是,选用 Helvetica 的品牌跨越了各种行业:丰田、塔基特百货、宝马,通用汽车,美国服饰……

1fin20150107

四类弹框的四大设计准则

用心设计

有一种大家见得最多的,就是评分类弹窗。这种自动弹出的提醒,每次都会让我有想卸载APP的冲动。855B29BA-2874-4892-93EE-923AE007BEAE.png

[ISUX译]Touch bar 设计指南

资深UI设计者

导语:日前苹果发布会上,最大的亮点之一当属替代一栏功能键的Touch bar。本文包括有5个小节,详细介绍了Touch bar设计原则、新特性和基本元素 ,一起来学习。

Touch bar概述

Touch Bar是位于新一代MacBook Pro键盘上方的一条 Retina 显示屏,同时也是与主屏幕内容交互提供动态操作界面的输入设备。基于当前语境,Touch Bar的这些控件能对系统或应用的功能进行快速访问。 例如,当用户在编辑文档时,Touch Bar可提供调整字体类型和大小的控件。 当用户查看地图时,Touch Bar可一键快速查找位置附近的加油站、住宿和餐馆。 Touch Bar右侧的Touch ID传感器支持指纹登录计算机及App Store和Apple Pay的购买支付功能。

正在逐渐流行的分屏式设计,常见的玩法有哪些?

周周

习惯了一栏式的设计,将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的两栏呈现不同的信息,是分屏式设计的最典型特征,两边的信息可以包含相同类型的元素,可以呈现不同属性的媒体内容,比如一边是图片,一边是文本。

分屏式设计完美的解决了你需要同时呈现两个不同内容的需求,这种UI界面突出了这两项内容的对等地位,让用户自行浏览,或者作出选择。

你会发现,分屏式设计不仅仅是一种逐步流行的页面设计趋势,而且非常实际地解决了需要呈现同等重要内容、让用户选择的设计需求。这种呈现方式看起来原始,但是确实有着明显的优势:

·引起用户对于特定区域的注意力
·创造对比
·非常规式的布局

此外,分屏式设计和响应式框架能够很好的结合起来,这种类型的布局特别适合在桌面端大屏幕和平板电脑上使用,同时还能够在小屏幕上以上下堆叠式的方式呈现出来。

在今天之前,优设也曾预测过分屏式设计的流行:《查漏补缺!极有可能被低估的三种有趣的网页设计趋势》

分屏式设计的最佳选项

当你将屏幕划分为两块的时候,两个区域内的内容的重要性是同等的,这也意味着你可以在这个界面中传达双重重要的概念。处于两个对等区块的元素就像阴阳鱼一样,从视觉到功能上,同等重要,互为补充。

活力四射的配色和趣味十足的排版

得益于扁平化设计和Material Design 在设计领域的大范围普及,色彩和排版成为了目前设计的主要驱动力。鲜艳的色彩带来视觉刺激,而有趣的排版则让文本更有意思,两者的结合能带来颇为值得一看的设计。

色彩和排版的组合

图片和色块的组合

吸引用户注意行为召唤按钮

分屏式设计在视觉设计可以很有张力,这也意味着身为设计师的你同样可以合理地运用留白创造视觉焦点,将用户的注意力吸引到特定的元素上,这也是行为召唤(CTA)按钮的使用原理。

将屏幕视作一个卡片

分屏式设计本质上是从卡片式设计中延伸出来的,而遵循这一设计原理的网站通常都会将屏幕视作为一个卡片,每一屏都是一个容器,每个卡片都承载一个交互和一条信息。

屏幕的左边包含一个卡片,而右边则包含了一对卡片

分屏式设计是自由的,它所包含的左右两大块其实是还可以继续往下细分的,比如下面的Stikwood 这个网站就将右侧的部分划分为更小的区块,用来承载更多的内容,提供更多的信息入口。

小贴士:尽量让你的界面保持简单,即使要分割出更多区块,也尽量不要使用复杂的模式,否则UI界面会看起来很混乱。

构建视觉关联

虽然分屏设计模式让你可以在其中呈现截然不同的元素,但是两个信息容器之间还是有关系和关联的。创建关联的方式很多,色彩是最常用的一种构建联系的方式。通过“共享”最明显的色彩,让两个不同的屏产生联系,产生视觉流。如果这个色彩正好是品牌色的话,效果尤其明显:

Bump 使用品牌色来构建视觉流,让界面和用户产生联系

Marka 也采用了类似的技巧,色彩对比度更加强烈

另外一个值得一提的技巧,是让某个元素横跨两个区块(比如文本),让这个元素来作为两个区块的连接点:

除了文字,你还可以使用色彩叠加来连接两个部分:

这个分屏设计案例中,右侧的屏幕看起来像是左侧屏幕的延伸一样。

使用动效鼓励用户交互

动效越来越多的参与到我们的UI设计和交互中来,使用动效来鼓励用户但与到交互中是非常合理的设计策略。看看下面 Chekhow is Alive 这个网站的设计,设计师通过动效展示不同的角色,与你进行匹配。

结语

分屏式的页面设计非常有趣,功能也足够强大,不过你的内容是否适合用来这么展示?所以,在如此设计之前,建议先问自己几个问:

·分屏式设计是否和你的网站内容相匹配?是否有足够的布局来进行分屏式设计?
·你的用户是否会喜欢这样的布局?
·将用户的注意力一分为二是否合适?

引导设计的最佳实践

用心设计

普通应用在起初的三天里每天会流失77%的日活跃用户。

 

        你肯定不想你的公司发生这样的事情,为获得新用户而投入了众多资源,而大多数用户仅仅在首次访问之后便马上离开了。如何改善这种情况呢?即你需要通过创造完美的访问流程为用户留下非常棒的第一印象。

引导设计的最佳实践

将视频融入网页设计有哪些讲究?

资深UI设计者

随着网络传输速度的提升,视频在网页中的应用越来越多,也越来越广泛,带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升,在移动端网页中使用视频也并不显得吃力。所以,今天我们常常能在不同的网页中看到各种不同功用的视频。

常言道一图胜千言,而视频比起图片所能承载的信息量更大。如果能够有效的使用视频,它对于用户的吸引力会非常明显——它可以更好的传递情绪,更加富有表现力,能让用户更容易“感受”到你想要传递的信息。不过,相比于其他元素,视频都比较“重”的媒体,使用的时候要谨慎。

简而未减 结构化消息专为大屏而设计

资深UI设计者

随着大屏幕高清分辨率的普及,我们在打游戏、看电影、浏览美图时,总希望屏幕越大越好,这种视角上广度与深度的享受以及和沉浸式聚焦的体验,是在小屏幕上完全给予不了的。

图中可以看出5.5英寸以上屏幕可以称Phablet,7英寸以上就是Tablet。这次案例以Tablet设备为主,Phablet设备为辅进行体验设计。

日历

链接

个人资料

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

存档