首页

无法忘怀的色彩:移动界面设计中的渐变

蓝蓝

今天蓝蓝设计要探讨的可不是渐变,要探讨的是移动界面设计中的渐变。我们来一起学习、感受一下现今移动界面设计中最流行的渐变吧。

推荐阅读:
《一枚app图标的设计文化》 
《超赞!高大上的动效设计方法及流程总结》

一、渐变作为界面的背景

iOS7 Lockscreen by Michael Shanks
神秘、优雅、颇具吸引力、简单、只包含必要信息,半透明的解锁条让我们感受到细腻的质感。

iOS7 Lockscreen by Michael Shanks

超酷的饮料类网站设计欣赏

蓝蓝

经常在电视上看到各种饮料的动感广告,但作为多媒体推广最重要的一环,饮料自身的官方主题网站界面设计必然是很有看头的:动感激情或优雅宁静,通过明艳的视觉和新鲜的交互将产品推销给顾客。那么朋友们和蓝蓝设计一起欣赏下面这些超酷的饮料类网站设计吧!

更多饮料类网站欣赏http://www.lanlanwork.com/

KOA Water

KOA Water

如何设计新闻类型的门户网站

蓝蓝

最近,一个朋友建议我写点关于新闻类网站界面设计的分析:什么是正确的新闻类网页设计,什么是错误的。他认为现今的线上新闻用户体验非常落后,让人感到厌倦无比,而且只是他们不用心做罢了,采用AJAX或者类似的技术就能把内容呈递的完善,而且导航做得十足精美。

一开始我非常赞同他的观点。蓝蓝设计认为新闻类网站的约束在于:过去传统的报纸以及杂志均为纸媒,动辄就在页面里融入了那些根深蒂固的惯例。因此用户在浏览时会发现,这类网站的感觉很熟悉,但是却限制了视觉表现。与此同时大部分新闻类网站的用户体验设计非常差,经常会出现令人阅读困难的小文本。

从《互联网设计之道》开始,我知道这句话已经别人重复无数次了,如果把网络比作一种媒介的话,那么网络是流动的,是复杂的,也是美丽的。而且网络的威力超出了大多数人的意料。
所以我们一起来看一下这些国际知名的新闻类网站,看看他们的优点与缺点。

归根结底是移动端的用户体验

其实,主要还得是移动端用户的体验。然而很多新闻类网站并没有将此类用户纳入考虑。当然,确实很多新闻网站已经出了iOS或者Android版本的原生应用,可惜效果并不理想,大部分的用户下载完之后,用几次就基本废置到一旁了。

我们获取信息的途径是什么?因为太过官方,内容太过常规,现在的用户很少主动浏览新闻类网站。他们通常是通过点击朋友、亲戚、网友的分享来得到信息。通过社交网络,E-Mail,RSS Feed以及新闻源中的链接来得到信息。而链接导向的往往是网站,而不可能是应用。因此,每个新闻类网站都必须要注重移动端的用户体验。现在用手机浏览消息的人实在是太多了。

那么问题又是什么?为什么新闻类网站不改进呢?
路很漫长,前方有两块绊脚石有待清除。

网页设计中优化图片的6大技巧

蓝蓝

平面设计网页设计是两个截然不同的领域,这两个领域有不同的设计需求、设计实践和设计方法。

例如,在网页设计中更常使用基于像素或栅格的文件格式,诸如JPG、GIF或PNG。相反,在平面设计领域像logo这样的图形可能会用到不同尺寸,因此使用最多的格式则是EPS和AI这样的矢量格式。然而,用于网页界面设计的矢量格式,如SVG或HTML5 Canvas则不能广泛应用,也不会被所有浏览器所支持。

另外,用于web端的图形有基于它们自身的相关处理方式。其中一条便是你要时刻注意文件的大小,因为你需要使你的网页加载越快越好。作为一名网页ui设计师,你应当尽量减少HTTP对图像的请求次数——无论通过减少图片的使用数量还是将它们整合成CSS sprite——以及确保你选择了正确的图像格式,使其在图像大小和质量间得以平衡。

Photoshop是平面设计师和网页设计师使用的行业标准工具。以下是你在创建web端使用图像时的一些简单的小技巧。

1. 将图片保存成Web所用格式

在网页设计中,你必须确保你的图像大小越小越好。当然,当你想要图片完好显示时可以抛弃这条原则。
在Photoshop中创建图像的完美方法便是平衡质量与文件大小。
网页设计师经常犯的一个错误便是使用“另存为”命令,而不是使用“存储为Web所用格式”。

2702d5d227fdbb0be2cd35ac6a37f76f 网页设计师必须知道的6个小技巧

向优美交互致敬!移动端APP动画设计总结

蓝蓝

扁平化界面设计越来越火爆,那么在弱化视觉效果的情况下,有ui设计师提到该从交互方面使体验更加愉悦,现在很多App界面设计也在努力朝这一方向发展,例如最近火遍全球倍受好评的 《FACEBOOK PAPER 中23个的设计细节》,还有《设计师新宠!交互神器ORIGAMI》等都足以让人期待交互的未来。

今天蓝蓝设计收集总结了一组移动端的App动画设计,朋友们可以学习一下。

百度云UE负责人@elya妞也分享了一篇App动态设计的好文,基础不行的同学可以补补:
提升品质!丰富App动态效果的六点原则

1、flipboard:

利用上下动画来切换到下一个界面(由于网慢数据没有加载出来);

flipboard:刚毅的上下动画来切换到下一个界面(由于网慢数据没有加载出来);

漂亮的切换开关UI PSD

蓝蓝

用户界面设计元素是现在的热门焦点,我们很多设计师的工作已经和它息息相关。那么,如何提高UI设计水平呢?这也是一个永恒的话题,值得探索、值得钻研。而今天要和您聊聊的是在用户界面组件中,存在与网站和移动应用程序的切换开关ui设计,是不是很有价值的话题呢?设计师通常试图优雅或吸引力的去设计各种形状、尺寸和主题来诠释自己对切换开关界面设计的理解。今天蓝蓝设计展示在下面的图片,都是附带psd源文件的,戳链接即可。这意味着,这些文件是完全可编辑的。你可以自由修改颜色或二次创新这些开关,直到在你的设计里看上去漂亮和谐。
Toggle Switch PSD

Toggle Switch PSD

实用资源!注册登录界面PSD免费下载

蓝蓝

在这篇文章中蓝蓝设计收集了许多可免费下载的注册登录界面设计PSD,从简洁的扁平化到精致的拟物化ui设计都有,童鞋们可以依自己的需求择优而求。

Login Free PSD

login-free-psd

产品设计的八个原则

蓝蓝

产品设计中,产品界面、使用情景、用户操作等都会影响用户对产品的体验。因此我们在ui设计的过程中应遵循一定的原则,避免设计者片面的根据自己主观认识对产品做出抉择。

原则1:用户界面设计应该是基于用户的心里模型,而不是基于工程实现模型

就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点,用户的心理模型抓的越准,界面就会越优秀。

如何做一款成功的应用

蓝蓝

蓝蓝设计从自身丰富的应用开发设计实践经验和大量的优秀界面设计应用实例中,总结提炼了从产品概念、ui设计、开发到市场推广等一系列的相关原则,指导移动开发人员怎样来打造一款成功赚钱的应用。姗姗来迟的这篇文章希望给大家带来一些感悟与帮助。

原文地址:http://www.lanlanwork.com/ 

绝大多数应用都失败了。 这个残酷的现实令很多幻想破灭的开发者开始认为,在Apple store中成功就像在淘金热潮中致富一样:你所需要的仅仅是运气。

image001

“运气论”这种想法是危险的,它就像是用来减轻失败痛楚的麻醉药。感到痛苦是件好事,这样才能看到问题所在。如果我的应用失败了,我会寻找失败 的原因。与其埋怨那些超出你控制之外的因素,为什么不看看像tap tap tap和Tapbots这些公司做了些什么,可以让他们一次次的成功。

灵感风暴!将滚屏玩出新奇花样的网站

蓝蓝

曾经有一段时间,大伙儿都在努力把网页内容全部塞进首屏。今时不同往日,网站设计师和开发者们不再害怕滚屏,而是将背景渐进展示、页面元素动画以及其它基于滚屏动作的酷炫效果融入其中,把滚屏当作一个吸引访客的绝佳靓点来好好展现。

为了给亲们带来新的ui设计灵感,蓝蓝设计特意收集了一系列把滚屏玩出新花样的网站界面设计,跟我来感受一下吧!

Hot Dot

19 Websites with Extremely Creative Scrolling Effects

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档