首页

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

蓝蓝

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

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

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

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

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

设计师应该知道的图片优化技巧

蓝蓝

蓝蓝设计收集了UI设计前辈们的一些关于图片优化的技巧,在此收拢到一起,对于各个方法的优化原理做了一些研究,希望能给大家对于图片优化这一块起到抛砖引玉的作用。提高朋友们的界面设计能力!

下面来给大家介绍一下图片的一些基本原理和优化的方法:

1.JPG原理与优化
JPG是一种对彩色或灰阶之类连续色调图形作压缩和解压缩的标准.这个标准是由ISO/IEC JTC1/SC29 WG10所订定。
压缩算法为正、反离散余弦转换,如下图:

正离散余弦转换

如何让网站提速:图片优化网站推荐

蓝蓝

页面的加载时间是每一个UI设计师都担心的数据,或者至少是每个UI设计师都应该担心的问题。图片的大小肯定是一个需要留意的问题。这就是为什么蓝蓝设计在这里写了几个有助于优化页面中的图片的小技巧,这些小技巧将有助于大家解决这个问题,这些小技巧也可以在你需要优化图片的时候提供很多帮助。提高大家的网站界面设计能力!

TinyPNG
TinyPNG是使用智能有损压缩技术,来减小png图片的大小。

注册表单的设计技巧

蓝蓝

网上挤满了各种各样的UI设计方案,事实上我们已经有一套套的方案可遵循。但!设计永无止境!哪怕是一个注册表单的界面设计,也值得再细心研究。下面蓝蓝设计给出注册表单设计5个小技巧

1、别让用户重复填写相同的内容

几乎每个人都经历过这样一个事实:注册时被要求填写邮箱地址两次或重复输入密码。但是这其实是没有必要的。仅填写一次,因为用户一般都记得自己常用的邮箱地址和密码。假设哪天用户忘记密码了可以通过邮箱找回,再多此一举填写两次反而更加容易导致用户流失。

5个注册表单的用户体验设计技巧

下面是一些非常值得参照的表单设计:

 

如何提升企业产品(WEB APP)的用户体验?

蓝蓝

一般人对於企业产品的预期,可能仅停留在功能要强大,信息要安全,能够帮助企业提高工作效率。但今时已不同往日,除此以外,人们开始更注重产品的用户体验。那么,在面对企业产品的界面设计上,有什么方法可以提升用户体验呢?

接下来,蓝蓝设计为大家带来一些国内外的优秀案例以及一些设计Web App时的思考方向。

Web App 设计要点

1. 配色

颜色作为设计师传达情感的主要元素之一。一个明确的品牌颜色,对信任度,认知度都会有大大的提升。颜色除了能为界面提升美感,也能作为功能上的辅助。在普遍页面信息量大的企业产品中,往往一个有颜色的按钮就很容易吸引用户的视觉焦点。

Lovely是Dribbble大神Kerem Suer设计的Web App。橙色主,蓝色辅助,淡灰色为底色。这个配色既色彩鲜明,淡淡的感觉更让人长时间使用也不觉累。整体感觉和谐舒服,简洁耐看。

如何提升企业产品(Web app)的用户体验

开发人员应该知道5个设计技巧

蓝蓝

优秀的编码和优秀的设计之间是相辅相成的。不幸的是,视觉设计能力偏弱的人通常会觉得自己缺乏天赋,换句话说,就是人们要么觉得自己具有出众的美学天赋,要么就是这方面的白痴。对这个说法,我可不敢苟同。

如果你在一个小团队里面身兼数职,却又没有多少美学基础。又或者你觉得你们的项目在视觉上还有更多发挥的空间,那么这篇文章就是写给你的。蓝蓝设计将谈到传统的5个消除丑陋艺术设计的元素和原则(或者至少能够进行一定程度的掩盖)

1.来点留白

大多数的UI设计开发者并不在意添加空白的像页边距,填充,行高,或者其他任何增加空白的CSS属性。识别出开发者设计的界面设计是很容易的:文本都是紧紧地挨着边缘的,没有任何留白,而且屏幕元素之间是通过直线来实现分割的,而不是空白。

<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDOWS: 2; TEXT-TRANSFORM: none; TEXT-INDENT: 0px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; MAX-WIDTH: 100%; WHITE-SPACE: normal; ORPHANS: 2; LETTER-SPACING: normal; HEIGHT: auto; COLOR: #525252; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; BORDER-RIGHT: 0px; WORD-SPACING: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="'Two examples of space. The first box reads " src="http://uisdc.qiniudn.com/wp-content/uploads/2013/04/space.png" frontier.??? final The ?Space... reads, box second you?? on in closing are walls the like feel ever you Do>

如何给网站布置干净的“关于我们”页面

蓝蓝

所有网站设计,无论是官方、电子商务、社会化网络还是个人站点,都应该设计一个恰到好处的“关于”页面,直截了当地告诉到访者,为什么要浪费他们宝贵的时间浏览你的网站。

蓝蓝设:这是一篇老文章,不过写得还算实用,大家可以了解一下界面设计思路

一、为什么要有“关于”页面

不要让用户思考!

1、向浏览者传达本站的价值,留住用户
2、始终提醒自己站点的主旨,不要跑题

二、起什么名

“关于”页面存在的目的就是尽快让浏览者找到网站的方向,或者作为进一步补充,比如陈列相比竞争对手而言,自己的优势和特色。所以名字越简单、越朴 素就越好。

典型的门户的名字比较传统,因为它们无人不晓。比如网易的“公司简介”,谷歌的“Google大全”。

大众、平易近人的网站往往都称呼为“关于我们”,比如嘀咕、phpChina;“关于+网站名称”的类型也不在少数,比如豆瓣和支付宝。

个人站点比较简约,两个字搞定:“关于”。人人网等很多社会化网络站点也是如此。

多数国外站点同上,比如“about Flickr”、“about us”、“about”。

三、放在哪里

标题、标识、内容或知名度非常强的网站放在页脚。
这些类型的网站要么你们熟知,要么一眼就能看出它讲的是什么。比如新浪微博,淘宝。

小站点,比如个人站点、博客,或者全新的网站,有必要显性地“通告”浏览者本站的导向和意图(以期靠好奇心留住访客),放在页首。

PMCaff成立不久,导航干净明晰。如图01

经验分享:小技巧帮你完成创意十足的网页设计

蓝蓝

作为一名设计师,每年都会沉浸在一些新的设计趋势中兴奋不已。接下来,蓝蓝设计将探寻2014年的界面设计势,这绝对是意义非凡的事情。Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流。

这些新趋势让设计变得妙趣横生。但是很多专家还会倡导那些并非最时髦、最震撼世界的ui设计。当然,响应式设计不仅去年是热点,今年依然还会被人们重视。同样,栅格化设计作为最基本的设计,也会被继续延续下去。

这次,我想探索一下那些逐渐发展起来的设计潮流。也许过去我们只是偶尔尝试一下这些设计风格,但是今年我们会真正关注它们。

更多留白/负空间

I think I might -

如何展示你的设计方案?

蓝蓝

蓝蓝设计是从职场方面分享一些展示设计方案的经验,如何使甲方看懂你的界面设计也是门学问,如果你是ui设计新手,也可以在《PS新手教程:变换角度!让你的设计稿更上档次》学到好东西。

像一个常胜将军一样信心十足的展示你的线框图

1

在我兼职制作 UXPin(用户体验设计平台)之前我一直都是全职做着 UX Designer和UX Manager。兴奋的创作过程和臭名昭著的压力交错在我的生活里,而且让人感觉最残酷的事情就是被拒绝的感觉。

教你几招实用的设计排版技巧

蓝蓝

一、门票:大门票产生大印象

读者特利发给我们一张他设计的洗车券,这张洗车券是他希望为他儿子的游泳队筹集在游泳池训练的各种费用而举行的一次洗车筹款,而它的有趣之处就在于其尺寸相当抢眼:


b2b2e10a62824c03b78d83cf9c9ca765 设计中排版的技巧(一)

没有人会对它视而不见:这张洗车券是一般门票尺寸的两倍之大,界面设计起来也很容易,从视觉上也非常能吸引有兴趣的消费者。大图片及大标题使这张洗车券产生一张海报的视觉效果,效果当然不错。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档