设计资源

交互设计中如何增加趣味性、提升愉悦度?

蓝蓝

「好的产品关注功能,优秀的产品关注情感」

趣味性、愉悦度,这些都是针对用户情感化设计的领域。

功能、实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐、愉悦、悲伤、美…

花、大海、春天、小屋… 这些都是很普通的名词,但将它们富有诗意的组合在一起:我有一所房子,面朝大海,春暖花开。接受者会投入不同的情绪去理解这样一个组合。

上面这些名词就像我们在界面设计过程当中所遇到的各种元素,按键、菜单、icon、动态效果… 将它以诗意的方式组合在一起,由此用户产生了情绪上的波动。

交互设计的本质是对用户行为的一种界面设计,直达内心的UI设计能够影响用户自身的情感,从而导致用户的行为。常会有设计师说将用户当成是一个易怒、情绪不定、不明理的人,为什么?因为人的本质是非理性的,逻辑是理性层面的考量,而面对情感这个潜藏在理性背后的东西,需要设计师有深厚的功力,这不是单纯技巧上的问题,而是一种时间、感觉、情绪等综合的圆熟。

针对用户情感进行设计时需要考虑产品的用户群,情感设计的应用将会为产品塑造个性,需要明确产品个性是否与目标用户相符。所以题主需要考虑一下,所说的趣味性是否与产品所预期的个性相符,这很重要。

扯回到正题,交互设计中的趣味性如果让我用一句话表达,我会说:「情理之中,意料之外

btw:自己对有趣的定义可能会与大家不太一样。

网页设计中图片格式的选择技巧

蓝蓝

网页设计中,切图输出是指UI设计师将手边绘制完成的原始图稿转换成网页界面设计用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担。今天蓝蓝设计就和朋友们分享一下网页设计中图片格式的选择技巧
UI设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用…」的功能。与默认的存盘模式不同,在这个模式中,软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项:

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

蓝蓝

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

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

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

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

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

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

蓝蓝

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

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

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

正离散余弦转换

优秀图像优化工具推荐

蓝蓝

网页设计中往往需要大量部署图片。网站设计的品质取决于图像,如果一个网站的界面设计图像品质精良,那么体验将非常的棒。
可以去看看那些优秀UI设计师和开发者的作品,他们往往非常注意图像的优化。既保证了图片的质量,又适度压缩图像,以提高加载速度。

蓝蓝设计将介绍多种极佳的图像优化工具,可以在日常应用中帮助你。

Online Image Optimizer(在线)

The Online Image Optimizer是一款在线压缩图像工具。支持本地上传图像进行压缩(最大不超过2.86MB)。可以选择图像输出类型。默认输出格式设置为和输入图像格式相同。

Online Image Optimizer

注册表单的设计技巧

蓝蓝

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

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

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

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

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

 

APP设计中便捷的单手操作

蓝蓝

探讨APP界面设计的手势操作前,蓝蓝设计想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何感应我们的操作的。

用户是如何使用手机的

Steven Hoober在《How Do Users Really Hold Mobile Devices?》[1]一文中指出,通过两个月的时间对1333名手机用户在公众场所(街道、机场、汽车站、咖啡馆、火车上、汽车上等)使用习惯的观察得出以下结论:

①780名用户是通过滑动、点击、打字等来操作屏幕,其他用户则仅仅是用手机来收听、观看、打电话。

②49%的用户通过单手操作,36%一手拿着手机一手操作,另有15%双手操作。

③在单手操作用户中,有33%的用户用左手拇指来操作。

④用户经常变换操作姿势和手势。

49%的单手操作用户是以下两种姿势(左手用户相反)。绿色代表容易点击区域,黄色为拇指伸展可到点击区域,红色区域超出单手可点击范围。

p2

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

蓝蓝

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

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

Web App 设计要点

1. 配色

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

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

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

如何在设计中建立良好的视觉层级

蓝蓝

随着互联网信息爆炸式增长,用户浏览单个网页时,并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看,那么朋友们和蓝蓝设计一起了解如何在设计中建立良好的视觉层级!

一、 视觉层级为什么重要

左侧是设计师期望用户的浏览方式,右侧为用户实际的浏览方式—摘自《Don’t make me think》

用户来到一个网站有他自己特定的目标,如阅读新闻、购物、查看新消息,然而信息量太大,逐一查看需要大量时间,这就要求网站设计能抓住主流用户特征,将重点推送给他,用户找到自己的目标或感兴趣的点,才有可能继续浏览或产生下一步动作,否则就会离开。

开发人员应该知道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>

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档