首页

移动设备上的劝导式设计

蓝蓝设计的小编

译者序

本文围绕劝导式设计(persuasive design)而展开,介绍了移动终端上banner广告、push信息等典型的劝服失败案例,并从用户与移动设备之间的情感联系出发,探讨了移动劝导策略的几个切入点。所谓劝导式设计,是指通过说服和社会影响,而非通过强制的方式,以达到改变和引导用户态度或行为的技术。这种技术常被应用于销售、外交、政治、宗教、军事训练、公共卫生和管理等领域。近年来,大多数劝导式技术的研究主要集中在计算机交互领域,包括台式电脑、互联网服务、视屏游戏和移动设备。劝导技术可以看成是对用户意图的设计。

作者: Amber Krishan 译者:晓千 秦封
译文

 

【Tips:消费者不会仅仅因为导航很容易而为你的产品买单。】

为移动设备而设计时,设计师要考虑移动设备间的差异,努力提供统一的体验。他们致力于减少点击的次数,使架构更扁平;并根据触摸屏的特点而设计, 在较小屏上规划合理的布局等。这些重点都在通过方便的使用、流畅的导航和简洁的呈现,来确保的最佳的产品可用性。

为确保你的用户“可以做”你想让他们做的事情,较高的可用性是一个很好的开始。但它并不能保证用户“会来做”这些事情。因为,用户不会仅仅因为导航容易使用而来买你的产品。

消费者是否来买你的产品,这和科学的劝导式设计策略相关。通过“人——机” 互动的研究我们了解到,计算机设备本身具备巨大的“劝导”潜力。如果在设备的体验设计中注入激励机制,这些设备将激励我们的用户并驱动他们的想法。

能找到合适的技巧来劝导你的用户是一个巨大的挑战。这涉及到深入理解用户的动机、障碍、信任和感受。上述这些对人的深入理解可以让我们更系统的去了解人们如何使用移动设备,这样,我们就可以找到更有力的方法来劝导用户。

典型的“劝导”失败案例

你的产品能够有效地劝导用户来使用吗?嗯,让我们看一些普通公司通常会使用的典型手段。

banner广告

巧夺天工!50枚来自Behance、DRIBBBLE的超精致图标

蓝蓝设计的小编

自从苹果iOS系统推出后,拟物化图标设计逐渐风靡全球(好吧!让我们暂时别提iOS7的扁平风),随着技术发展,设计师们也越来越厉害,图标做得愈加精致。如果你是一个移动界面设计师,或者你对图标设计感兴趣,那就千万不要错过接下来的这50枚精致图标!希望它们能给你带来创意与灵感。

多尝试,多练习,多模仿,你也可以的!
PS+AI制作精致可爱的毛线风格图标
在PHOTOSHOP中创建精细的工具图标

Minion App Icon by CreativeDash

iOS Icon by Eugene Zolotco


101个鲜为人知的超实用网站

蓝蓝设计的小编

101个鲜为人知的超实用网站

今天要分享出来的网站就像水浒传里的108个好汉一样,个个身怀绝技,是滴!我们也做了简单的介绍,因为网站太多,就木有一一截图,大家自行感受一下。(有几个需翻墙)

这里列出了许多鲜为人知的好网站,还有那些大家知道却常常被遗忘的网站。
这些网站中,大部分都在某一个领域非常专业,并且都拥有非常简单的网址,你可以省略搜索的步骤,轻松将他们记在心里。

01. screenr.com —— 将你在电脑上的操作录制成影片并直接传送到YouTube上。

02. bounceapp.com —— 能够将一个网页进行完整的截图。

03. goo.gl —— 将网站地址进行缩写并可以将网址转换成二维码。

04. untiny.me —— 找到缩写网址的原始域名。

05. localti.me —— 能查询不只一个城市的当地时间。

06. copypastecharacter.com —— 复制你键盘上没有的特殊字符。

07. topsy.com —— Twitter专用搜索引擎。

08. fb.me/AppStore —— 无需运行iTunes就可以搜索iOS的手机应用。

09. iconfinder.com ——在这里可以找到图标的所有尺寸。

10. office.com —— 下载办公文件的模板、剪贴画以及图片。

11. woorank.com —— 你想知道的关于一个网站的所有信息都可以在这里找到。

12. virustotal.com —— 对任何可疑的文件或者邮件附件进行病毒扫描。

13. wolframalpha.com —— 不用搜索就可以知道问题的答案 —— 更多信息,请阅读Wolfram提示。

14. printwhatyoulike.com —— 完整的打印网页。

15. joliprint.com —— 将新闻和博客内容重新整合为报纸。

16. isnsfw.com —— 当你想要分享18X网页时为你做警示标记。

17. e.ggtimer.com —— 一个居家常备的简易在线计时器。

18. coralcdn.org —— 如果某网站由于服务器太繁忙而无法访问的话,试试通过CDN来进入网站吧。

19. random.org —— 帮你随机挑选数字,抛硬币~

20. mywot.com —— 测试任意网站的可信任指数。

21. viewer.zoho.com —— 帮你用浏览器来预览PDF文件和PPT。

22. tubemogul.com —— 能同时向多个视频网站上传视频。

23. truveo.com —— 最佳网络视频搜索。

24. scr.im —— 不用担心垃圾邮件困扰,安全无忧地分享你的邮件地址。

25. spypig.com —— 从今往后在你的邮箱里查看收据吧~

26. sizeasy.com —— 将任一产品进行视觉化并进行尺寸比较。

27. whatfontis.com —— 迅速通过图片来确定字体名称。

28. fontsquirrel.com —— 优质的字体大集合 —— 免费自用与商用。

设计师为何做不出产品经理想要的设计

蓝蓝设计的小编

产品经理设计师之间最常见也是最尖锐的矛盾就是,设计师把花了很多心血做出来的稿子放到产品经理面前,产品看了一下,觉得非常陌生和超出预期,说:“这都是些什么啊”。

(- -#),(- -’),此处无声胜有声。倒不是说这里面谁对谁错,都挺辛苦的其实,但为什么总会落得如此尴尬呢。

世上配合最好的其实就是自己的手配合自己的脑袋。脑袋怎么想,手就怎么画,画出来的丁老头再丑也觉得很亲切,恩恩,是我的好作品(星星眼)。只是等到两个人合作的时候,就有些麻烦了。因为,让“设计师的手”精致地受控于“产品经理的脑袋”,每次画完看一看,觉得对就继续画、错就改的敏捷调控是不现实的。

祸起,在于一些沟通中有很多弊端,唯有解决这些问题,才能让团队和谐地高唱“同一个梦想”。

 

一、产品没有意识到要讲的其实是故事

常见的产品经理提需求的方式往往都是在需求文档里直接写“在Feed上增加一个转载按钮,点击后可以填写转载理由”。这种描述方式其实已经是一个很具象的解决方案了。然后这份包含数十条如此描述需求的文档会被贴到内部需求管理网站上,或者通过邮件发给设计师。

设计师拿到这份文档,通常会觉得很憋屈。哎,忍忍算了,拿人钱财替人消灾。然后拿着这份需求文档在现有界面上去改。但往往会发现产品说这些具体解决方案其实在实现时是有很多细节冲突的。于是,设计师要先逆向YY出这个功能背后的用户需求,然后再尝试在与各种细节不冲突的夹缝中找一个新的解决方案。把这个稿子拿给产品看,产品就会楞一下,说“这是什么…”。(- -#),(- -’)

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

蓝蓝设计的小编

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

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

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

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

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

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

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

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

“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式,包括图像质量、图像分辨率、浏览器兼容性和文件大小。

这一命令会有一个对话框,你可以用来微调你的图像。当你调整图像的设置时,它会显示出文件的大小和图像的质量。

不容错过!20套新鲜出炉的Web+Mobile PSD素材下载

蓝蓝设计的小编

在这篇文章中,我们展示的是一组免费漂亮的UI设计素材套件。这些线框图和 UI设计工具包让设计师在设计用户界面原型的时候能够非常便利,希望这个集合会帮助到你的 UI 设计项目。

优设11月超赞资源:
50套万里挑一的设计师专属精华资源包
超实用的PHOTOSHOP亮度调节脚本

UI Kit

 

iPhone UI

一组启迪设计灵感的复古风格网页作品

蓝蓝设计的小编

有时候一个纹理,一个文字,一张背景图,一个颜色体系,甚至一个小图标,都能让页面有复古的感觉。在这篇文章中,我们收集了许多这种风格的页面。如果你的下一个项目是需要设计出复古的感觉的话,那这篇文章可以启发你很多的设计灵感。

相关阅读:

复古背景下载 →漂亮的复古纹理背景素材下载
复古字体下载 → 25套复古怀旧字体打包下载
复古网页欣赏 → 44个绝赞的复古风格网页设计

Cyclemon

Ready to Inspire

十个简单好用的设计技巧

蓝蓝设计的小编

本文作者Mark Praschan是一位具有将近十年经验的网页设计师,Web开发师,Web项目经理人。 文中强调复杂的高级效果能为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注。高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需要一些更简单的效果与其配合。

  简单的效果和技巧是建造当今设计的基石。比方说,如果你都不知道如何正确选择颜色和文字效果,灿烂的 星光效果又能有什么用?

  本着“少就是多”的理念,通过十个简单好用的设计技巧 ,就足以大大提升你设计的专业性和感染力。基础先行。 学会走之前要先学会爬,让我们从最基础的简单有效设计的概念开始。

基础先行。 学会走之前要先学会爬,让我们从最基础的简单有效设计的概念开始。

1. 增加对比

很可惜,添加额外的对比是最被忽视和弃用的技巧之一。

Screenshot

Joost de Valk 采用了细的高对比度边线,让访客能更容易区分页面的不同区域。在上图中放大了的部分,你可以看到,大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线。

话说回来,这个页面上的“More”和“Go”按钮与周围的对比度太小,即使你刻意在找也很容易被忽略掉。

Screenshot

30个“大气高端国际化”的网页设计欣赏

蓝蓝设计的小编

怎样设计大气的网页

大家应该都发现现在很多网站的首屏都越来越有”感觉“了,用我们经常调侃的一句话就是高端大气国际化,那么如何做到这一点呢?

大家不妨打开支付宝、财付通等网站瞧瞧,不难发现规律:1、在首屏一条大横纹上下功夫,区分下方的辅助信息;2、看上去更有人性(有人物素材出现在首屏),配合产品的精彩实物截图。3、温暖的色调、能烘托出产品气质的色彩。4、简要的产品描述文案。5、点击欲望更强的(橙、绿)大按钮。6、尽可能多的高斯模糊。

今天我们要在这篇文章向您展示30个伟大漂亮的网页例子,看看他们是如何利用首屏的横条纹的吧,瞧瞧是不是利用此布局更有助于分解页面引导用户更好了解产品、爱上产品。

Janko At Warp Speed

View the website

Theme Trust

View the website

推荐给设计师的22个美观实用的网站

蓝蓝设计的小编

推荐给设计师的22个美观实用的网站

我们灰常乐意每周在网页设计佳作列表中展现设计精美的网站,不断为你提供灵感。而今天我们打算另辟蹊径,为网页设计师收集了既能提供设计灵感又实用的优秀案例,与过往选择单一”主题”的例子有所不同。我们将为你呈现不同的工具和技术分享网站,可让你在得到灵感的同时还能发现不错的工具或服务。在这篇文章中你将看到22个美观又实用的网站,全部都不容错过哦亲!

responsify

Responsify是个用于创建响应式模板的浏览器工具。

22 Inspiring and Useful Websites

iconmonstr

你下一个项目就可以用的免费简约icon。

日历

链接

个人资料

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

存档