首页

使用纹理的20个华丽示例

蓝蓝设计的小编

纹理的使用非常广泛:网站,横幅,LOGO以及名片等很多场合都会使用。使用纹理的最大好处是能够帮助设计师节省大量的时间,不需要自己去制作图形。同时,纹理能够让你的设计项目更有趣,更有个性。下面是20个使用纹理的华丽的网站实例。

 

These Are Things

50个小时的可用性测试带给我的启示

蓝蓝设计的小编

 

2012年里,我(英文原文作者)在TH_NK 里大约花费了50个小时用于可用性测试,其余的时间则主要用来进行实际的设计工作,或是与客户、开发者、分析人员等进行沟通。在这些可用性测试当中,经过对被测者行为的观察以及与他们面对面的交流,我对一些一直以来虽有所了解、但在实际工作中却时常会忽视掉的设计原则有了更加贴近实践的认知,另外也发现了一些从前没有想到过的问题。时值岁末,我将这些经过实践验证的设计要点作以小结并分享给各位,希望能够为大伙来年的工作带来一定参考和借鉴的价值。

1.你不是你的用户

扪心自问,我们真的很容易忘记一件重要的事情:用户并不会按照我们设想的方式去行事。作为产品和设计方面的从业者,我们对自己的产品和服务太了如指掌了,对产品的功能逻辑及设计方案太心知肚明了;即使是作为第三方咨询顾问一类的角色,你也很容易把事情考虑的过于理所当然,认为“外界”的人能非常清楚的理解你所要表达的东西。

而事实上,多数用户在实际上手使用之前,并没有和产品产生长久的关联;对于我们来说很显而易见的东西在用户看来很可能需要一定的辅助才能理解并正确操作。交互模式是否符合直觉,是否能够保持足够的一致性以符合用户逐渐建立起来的心智模型,用户界面是否会在必要的环节提供足够有效的辅助引导,这些都是我们在为核心功能打造设计方案的同时必须考虑到的问题。

 

2.导航至首页

在很多场可用性测试当中,我们都观察到,其实会通过点击页头logo回到首页的被测者很少;多数人都试图通过点击浏览器上的后退按钮来实现这个目标。虽然对于设计师来说,将logo链接至网站首页的做法是一种早已被普遍接受的规范,但事实上普通用户对这一点的认知似乎并不是那么的根深蒂固。

3.通过下拉列表选择国家

我们曾经对一个面向全球的在线零售网站的支付环节进行过可用性测试,从中我们发现,在选择国家的时候,很少有用户懂得通过首字母快捷键来快速定位国家选项在下拉列表当中的位置,然后通过上下箭头按键进行调整并敲击回车或空格键来完成选择。绝大多数的用户仍然是使用鼠标将列表点开,上下寻找并点击选取。

其实下拉列表易用性的问题(特别是那些所包含的选项超过了7个的列表)早就引发过广泛的争论,使用快捷键进行操作的方案也是为了解决这方面的问题而孕育而生的,但在现实当中我们仍然发现有那么多的用户实际上并不了解这种重要的导航操作。

点击查看原图

Christian Holst在重新设计国家列表 一文中介绍过一种蛮有意思的解决方案,虽然我们还没有对这种方案进行过量化的测试,不过至少它看上去确实比传统的下拉列表方式要好用。

视觉设计是为了表达信息

蓝蓝设计的小编

在日常工作中,我们经常会遇到一些设计的很”漂亮”的图片不被用户认可,点击率很低,这时候我们会暗地里抱怨,可却没明白问题究竟出在哪?

网页设计与平面设计究竟有啥区别,我们主观的为页面添加元素的时候是否有章可循,博主以前曾是一名视觉设计菜鸟,以自己的切身体会谈谈在Web页面设计中的一些体会。

下面我们先看一个专题的banner:

第一眼看上去,画面感好像还行,但细看后会发现整个画面没有一个视觉中心,这张图片究竟想表达什么也没有说清楚,看看上面的元素:女人,模特架,灯光,展厅,衣服。好像表达了很多,其实除了设计师本人知道这是衣服与配件专题的banner,其他人都一头雾水。

建立良好的视觉层级

蓝蓝设计的小编

 

随着互联网信息爆炸式增长,用户浏览单个网页时,并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看,为什么?

一、 视觉层级为什么重要

点击查看原图

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

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

平常的力量

蓝蓝设计的小编

一本好书,跟一款好的产品类似,要有一种“代入”的力量。能够让用户跟着你设定的逻辑一路走下去,一种心无旁骛的沉静。每个章节,每个功能模块,都如同空气,似有如无,但是又让人欲罢不能。平淡无奇的呈现反而最有杀伤力,柴姑娘的《看见》就是这样,真实,自有万钧之力。

有的时候,我常常无法进入状态,这个时候我会选择看书。一本好书有一种力量,一种代入感的力量,会让你随着做着的逻辑一路陷入进去,慢慢的将内心的浮躁都洗去,让你沉静下来,然后整个人也跟着沉了下来。

为产品赋予人格 - 情感化设计的组成要素及实践案例

蓝蓝设计的小编

 

Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀念它们

点击查看原图

我(英文原文作者)会特别在意这些细节,因为它们可以触发用户的情感响应。如果运用方式得当,这些细节当中的小魔鬼可以帮助我们打造出更具人格的产品,并使用户在与之进行互动的过程中产生积极的情感响应;而这种积极的态度会有效的促使用户主动传播和拥护你的产品。这种在人格层面与用户建立关联的设计思路也被称作“情感化设计”。

一点小理论

“情感化设计(Emotional Design)”一词由Donald Norman在其同名著作 当中提出。而在Designing for Emotion 一书中,作者Aarron Walter将情感化设计与马斯洛的人类需求层次理论联系了起来。正如人类的生理、安全、爱与归属、自尊和自我实现这五个层次的需求,产品特质也可以被划分为功能性、可依赖性、可用性和愉悦性这四个从低到高的层面,而情感化设计则处于其中最上层的“愉悦性”层面当中。

点击查看原图

一个有效的情感化设计策略通常包括两个方面:

  1. 你创造出了独特并且优秀的风格理念,令用户产生了积极响应。
  2. 你持续的使用该理念打造出一整套具有人格层面的设计方案。

接下来,我们将一起了解一下情感化设计的组成要素及相关策略,看一看有哪些产品在这些方面做的比较有代表性;另外,我们还会通过几个案例分析来感受一下从整体角度持续使用情感化设计理念所带给产品的“人格魅力”。

简单之美:极简主义风格的网站作品

蓝蓝设计的小编

在决定网站的布局之前,有很多重要的事情需要考虑。颜色、风格和可用性是网站布局的核心因素,是网站是否成功的关键。多年以来,我们看到很多内容充实,色彩丰富的网站作品,但最近几年极简主义风格(一种设计风格,感官上简约整洁,品味和思想上更为优雅)的设计越来越流行,人们认识到简洁干净的网站布局能够更加有效的突出网站的主题内容。

 

 

Tapmates

 

Caava Design

 

关于扁平化界面风格的设计美学讨论

蓝蓝设计的小编

 

我个人对这方面的话题是蛮关注的,偶尔在微博 上弱弱的念叨两句,也会有不少朋友来发表各自的看法,确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的,其中有些比较公允务实,有些则比较偏颇;所谓偏颇,也就是片面表达某种风格一定比某种风格更好,以及好在哪里。说真的,都有一定的道理,都能看出发表论调的设计师的思考和激情。

有人说了你怎么这么没节操呢,你到底觉得哪种好呢?我要说的是叭,在我看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题;脱离了实际产品的上下文环境,脱离了产品功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立。

说的具体些,远的不讲,单说Beforweb 这边的视觉风格,除了每篇文章的图标以外,可以说是彻彻底底的扁平化了(当然,细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框,这个不算数...),但如果有人说我是扁平风格的卫道者的话,我会很不开心,因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面,最典型的包括语音备忘录、iBooks、iPad里的日历等等,它们的界面让我觉得亲切自然,让我可以在冰冷的电子设备当中找到现实生活的真实感,就这么简单。

下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒,我着实在这些东西上花掉不少钱,但如果它们的界面没有采用如此逼真的拟物化设计,如果他们只是干巴巴的功能和数据陈列或是Metro风,我是绝不会在它们身上花半毛钱的。

点击查看原图

怎样为网站创建风格指南(style guide)

蓝蓝设计的小编

什么是风格指南?简单的说,就是一份告诉你如何讲故事的文档。它确立了一些标准,例如怎样撰写文案、怎样排版、怎样打造视觉元素和交互方式等等。风格指南源自于印刷领域,例如报刊(看看卫报的风格指南 );在Web领域,它同样体现出了巨大的价值。

无论是传统印刷,还是互联网,最关键的都是“内容”。风格指南的最终目标就是让内容以清晰并且一致的视觉风格呈现出来。BBC的全球体验语言 (Global Experience Language,GEL)就是网站风格指南的绝佳范例。不妨通过页面右侧的“Download GEL Web Styleguide”下载一份PDF文档来稍作了解先。

点击查看原图

移动应用的十项设计原则及小提示

蓝蓝设计的小编

 

移动设备与传统桌面设备虽然都被成为“计算设备”,但它们之间的差异是显而易见的:移动设备的屏幕要小很多,无线网络链接方面会有不稳定,电池续航能力较弱,等等。这份“弱点”清单可以列的很长,但如果你因此认为移动设备就是降级版的计算机,那同样是错误的看法。

实际上,从其他一些角度来观察,移动设备又是比桌面设备更加强大的。智能手机和平板电脑都是更加个人化的设备,它们会一直陪伴在你身边,让你随时随地都可以接入互联网获取所需的信息;它们身上还有传统设备所不具备的很酷的功能,包括GPS、数位罗盘、加速计等等。

所有这些差异都使得移动设备当中的应用程序在界面设计方面存在很多独到之处。我(英文原文作者)基于在自己的workshop中的工作经验,总结出了移动应用界面设计的十条原则及小提示,在这里与大家分享,希望能够帮助那些还不是非常熟悉这个领域的设计师们建立起一套有实践价值的设计思维框架。

1.设计观念

从传统设备转向移动领域,设计师们首先要做的是调整思维模式和设计观念。

  • 专注 :移动应用的本质目标是帮助人们以最高的效率完成特定的任务。少即是多,你要砍掉的产品功能通常会比你想象的多很多。
  • 独特:从一开始就要理解你的应用与同类产品相比具有哪些独到之处,将其体现到产品的整体用户体验策略当中,并在交互及视觉设计流程当中着重突出这些卖点。
  • 迷人 :移动设备是相当个人化的工具,人们会在长久的使用过程中逐渐将感情融入到软硬件当中;应用程序同样要与用户在情感层面产生互动,通过各种友好的、有趣的、可信赖的设计与功能让用户觉得爱不释手。
  • 体贴 :不要将注意力过多集中在“开发”本身上,不要将自己的心智模型以及产品的业务逻辑作为设计的准绳。如果你确实希望自己的产品能够被更多用户所接受,那么必须学会站在他们的角度观察问题、制定设计决策。

点击查看原图

不要用“多多益善”的观念打造移动应用

日历

链接

个人资料

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

存档